style: 供应商管理模块样式调整

songshankun

2023-09-22 282e0017a1eab4a2f1bb954091aab4a520f7e751

style: 供应商管理模块样式调整

 src/components/layout/components/appsidebar/index.scss

@@ -3,7 +3,7 @@
  // height: 100%;
  background-color: #314255;
  .box {
    width: 200px;
    width: 187px;
    .logo-view {
      margin: 40px 20px 10px;
    }
@@ -27,8 +27,8 @@
    }

    .el-submenu .el-menu-item {
      width: 178px;
      min-width: 178px;
      width: 166px;
      min-width: 166px;
      height: 38px;
      display: flex;
      align-items: center;

 src/components/makepager/CommonSearch.vue

@@ -98,6 +98,9 @@
            @click="inspectionConfigClick"
        ></i>
      </div>
      <div class="right">
        <slot name="rightButton"></slot>
      </div>
    </div>
  </div>
</template>

 src/views/supplierManage/index.vue

@@ -15,7 +15,6 @@
<style lang="scss" scoped>
.content {
  width: 100%;
  background-color: #fff;
  height: calc(100vh - 70px);
  height: 100%;
}
</style>

 src/views/supplierManage/supplier/index.vue

@@ -1,92 +1,104 @@
<template>
  <div class="rightContent">
  <div class="supplier">
    <div class="top">
      <div class="supplier-search">
        <SearchCommonView
          ref="searchCommonView"
          :search-options="searchOptions"
          @searchClick="searchClick"
          @resetClick="resetClick"
        />
        <div class="add-view">
          <el-button type="primary" size="mini" @click="addBtnClick">新建</el-button>
        </div>
      </div>
      <template>
        <div class="list-view">
          <TableCommonView
            ref="tableSupplier"
            :table-list="tableList"
            @selCommonClick="selCommonClick"
            @tableRowClick="tableRowClick"
          >
            <template slot="tableButton">
              <el-table-column label="操作" width="100">
                <template slot-scope="scope">
                  <el-button
                    v-if="scope.row.status === 0"
                    @click="enableClick(scope.row, '启用')"
                    type="text"
                    size="small"
                    >启用</el-button
                  >
                  <el-button v-else @click="enableClick(scope.row, '停用')" type="text" size="small">停用</el-button>
                  <el-button @click="modifyClick(scope.row)" type="text" size="small">修改</el-button>
                </template>
              </el-table-column>
            </template>
          </TableCommonView>
        </div>
        <div class="btn-pager">
          <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" />
        </div>
      </template>
    </div>
    <div class="bottom">
      <div class="product-search">
        <div style="margin-left: 10px">可提供的产品</div>
        <div style="margin-left: 20px">
          <el-button type="primary" size="mini">创建采购单</el-button>
        </div>
        <SearchCommonView
          class="search"
          ref="searchCommonView"
          :search-options="searchProductOptions"
          @searchClick="searchProductClick"
          @resetClick="resetProductClick"
        />
        <div class="add-view">
          <el-button type="primary" size="mini" @click="addNewProductClick">添加新产品</el-button>
        </div>
      </div>
      <template>
        <div class="list-view">
          <TableCommonView
            ref="tableListProduct"
            :table-list="productTableList"
            @selCommonClick="selCommonClick"
            @getSelectArray="getSelectArray"
          >
            <template slot="tableButton">
              <el-table-column label="操作" width="170">
                <template slot-scope="scope">
                  <el-button @click="raleteClick(scope.row)" type="text" size="small">相关供应商</el-button>
                  <el-button @click="editClick(scope.row)" type="text" size="small">修改</el-button>
                  <el-button @click="delClick(scope.row)" type="text" size="small">删除</el-button>
                </template>
              </el-table-column>
            </template>
          </TableCommonView>
        </div>
        <div class="btn-pager">
          <PagerView
            class="page"
            :pager-options="productPagerOptions"
            @size-change="productChangeHandler"
            @current-change="currentProductHandler"
      <div class="filter">
        <div class="filter-card">
          <CommonSearch
              :show-add="true"
              add-title="新建"
              @addCommonClick="addBtnClick"
              :show-download="false"
              :amount-view="false"
              :show-action-btn="false"
              :placeholder="'请输入供应商名称'"
              @searchClick="onFilterSearch"
          />
        </div>
      </template>
      </div>
      <div class="body">
        <div class="body-card">
          <div class="list-view">
            <TableCommonView
                ref="tableSupplier"
                :table-list="tableList"
                @selCommonClick="selCommonClick"
                @tableRowClick="tableRowClick"
            >
              <template slot="tableButton">
                <el-table-column label="操作" width="100">
                  <template slot-scope="scope">
                    <el-button
                        v-if="scope.row.status === 0"
                        @click="enableClick(scope.row, '启用')"
                        type="text"
                        size="small"
                    >启用</el-button
                    >
                    <el-button v-else @click="enableClick(scope.row, '停用')" type="text" size="small">停用</el-button>
                    <el-button @click="modifyClick(scope.row)" type="text" size="small">修改</el-button>
                  </template>
                </el-table-column>
              </template>
            </TableCommonView>
          </div>
          <div class="btn-pager">
            <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" />
          </div>
        </div>
      </div>

    </div>
    <div class="bottom">
      <div class="simple-filter">
        <div class="simple-filter-card">
          <CommonSearch
              :show-add="false"
              :show-download="false"
              :amount-view="false"
              :show-action-btn="false"
              :placeholder="'请输入产品名称'"
              @searchClick="onProductFilterSearch"
          >
            <template slot="leftButton">
              <div class="sub-title"><span class="sub-title-decorator"></span>可提供的产品</div>
              <el-button type="primary" size="mini">创建采购单</el-button>
            </template>
            <template slot="rightButton">
              <el-button type="primary" size="mini" @click="addNewProductClick">添加新产品</el-button>
            </template>
          </CommonSearch>
        </div>
      </div>
      <div class="body">
        <div class="body-card">
          <div class="list-view">
            <TableCommonView
                ref="tableListProduct"
                :table-list="productTableList"
                @selCommonClick="selCommonClick"
                @getSelectArray="getSelectArray"
            >
              <template slot="tableButton">
                <el-table-column label="操作" width="170">
                  <template slot-scope="scope">
                    <el-button @click="raleteClick(scope.row)" type="text" size="small">相关供应商</el-button>
                    <el-button @click="editClick(scope.row)" type="text" size="small">修改</el-button>
                    <el-button @click="delClick(scope.row)" type="text" size="small">删除</el-button>
                  </template>
                </el-table-column>
              </template>
            </TableCommonView>
          </div>
          <div class="btn-pager">
            <PagerView
                class="page"
                :pager-options="productPagerOptions"
                @size-change="productChangeHandler"
                @current-change="currentProductHandler"
            />
          </div>
        </div>
      </div>
    </div>
    <!-- 新建/编辑销售线索 -->
    <AddSupplier v-if="editConfig.visible" :add-common-config="editConfig" />
@@ -116,6 +128,7 @@
  computed: {},
  data() {
    return {
      searchSupplierName: '',
      tableList: {}, // 供应商列表
      productTableList: {}, // 产品列表
      selValueList: [],
@@ -200,13 +213,13 @@
      }
    },
    // 请求数据
    async getData(val, content) {
      this.getSupplierList(val, content)
    getData() {
      this.getSupplierList()
    },
    // 供应商列表
    async getSupplierList(val, content) {
    async getSupplierList() {
      await getSupplierList({
        [val]: content,
        name: this.searchSupplierName,
        page: this.pagerOptions.currPage,
        pageSize: this.pagerOptions.pageSize
      }).then((res) => {
@@ -252,20 +265,13 @@
      })
    },
    // 搜索供应商
    searchClick(val, content) {
      console.log(val, content)
      this.getSupplierList(val.value, content)
    },
    resetClick() {
    onFilterSearch(searchText){
      this.searchSupplierName = searchText ??''
      this.getSupplierList()
    },
    // 搜索产品
    searchProductClick(val, content) {
      console.log(val, content)
      this.getProductList(val.value, content)
    },
    resetProductClick() {
      this.getProductList()
    onProductFilterSearch(searchText){
      this.getProductList('name', searchText)
    },
    // 新建供应商
    addBtnClick() {
@@ -416,4 +422,107 @@
    }
  }
}



.supplier{
  height: 100%;
  overflow: hidden;
  .top{
    position: relative;
    height: 55%;
    .body{
      position: relative;
      height: calc(100% - 92px);
    }
  }
  .bottom{
    position: relative;
    height: 45%;
    .body{
      position: relative;
      height: calc(100% - 40px);
      padding-top: 0;
    }
  }
  .filter{
    height: 80px;
    display: flex;
    align-items: center;
    padding: 12px 20px 0 20px;
    &-card{
      height: 80px;
      display: flex;
      align-items: center;
      box-sizing: border-box;
      padding: 10px 20px;
      flex: 1;
      border-radius: 12px;
      background-color: #fff;
    }
  }
  .simple-filter{
    height: 40px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding: 0 20px;
    &-card{
      height: 80px;
      display: flex;
      align-items: center;
      box-sizing: border-box;
      flex: 1;
    }
  }
  .body{
    box-sizing: border-box;
    padding: 10px 20px;
    border-radius: 12px;
    .body-card {
      background-color: #fff;
      border-radius: 12px;
      height: 100%;
      overflow: hidden;
    }

    .supplier-search {
      display: flex;
      align-items: center;
      .add-view {
        margin-left: auto;
        margin-right: 20px;
      }
    }
    .list-view {
      height: calc(100% - 60px);
      overflow: hidden;
    }
    .btn-pager {
      display: flex;
      .page {
        margin-left: auto;
      }
    }
  }
}
.sub-title{
  flex-shrink: 0;
  margin-right: 20px;
  font-size: 16px;
  font-weight: bold;
  height: 28px;
  line-height: 28px;
  position: relative;
  padding-left: 12px;
  &-decorator{
    position: absolute;
    height: 100%;
    width: 4px;
    background-color: #2a78fb;
    top: 0;
    left: 0;
  }
}

</style>