供应商列表相关bug修复及样式调整

yangfeng

2023-09-06 29b5ffe318b8ab32865ebebedd865ea2aa3f6c7e

 src/views/supplierManage/supplier/index.vue

@@ -13,49 +13,30 @@
        </div>
      </div>
      <template>
        <el-table
        <div class="list-view">
          <TableCommonView
          ref="tableSupplier"
          border
          :data="tableList.tableInfomation"
          tooltip-effect="dark"
          style="width: 100%"
          :lazy="tableList.lazy"
          highlight-current-row
          @row-click="tableRowClick"
          :header-cell-style="{ background: '#ECF4FF', color: '#666' }"
            :table-list="tableList"
            @selCommonClick="selCommonClick"
            @tableRowClick="tableRowClick"
        >
          <el-table-column type="index" label="序号" width="50"> </el-table-column>
          <el-table-column
            v-for="(item, i) in tableList.tableColumn"
            :key="i"
            :prop="item.prop"
            :label="item.label"
            :width="item.width"
            :min-width="item.min"
            show-overflow-tooltip
            :sortable="item.sortable"
          >
            <template slot-scope="scope">
              <div v-if="item.status" :class="scope.row.status">{{ scope.row[item.prop] }}</div>
              <span
                v-else-if="item.isCommonClick && scope.row[item.prop]"
                class="sel-name"
                @click="selCommonClick(scope.row)"
                >{{ scope.row[item.prop] }}</span
              >
              <span v-else>{{ scope.row[item.prop] ? scope.row[item.prop] : "--" }}</span>
            </template>
          </el-table-column>
            <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
                    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>
        </el-table>
            </template>
          </TableCommonView>
        </div>
        <div class="btn-pager">
          <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" />
        </div>
@@ -79,6 +60,7 @@
        </div>
      </div>
      <template>
        <div class="list-view">
        <TableCommonView
          ref="tableListProduct"
          :table-list="productTableList"
@@ -95,6 +77,7 @@
            </el-table-column>
          </template>
        </TableCommonView>
        </div>
        <div class="btn-pager">
          <PagerView class="page" :pager-options="productPagerOptions" v-on="pagerEvents" />
        </div>
@@ -169,6 +152,7 @@
      this.tableList = {
        tableInfomation: [],
        selectIndex: true,
        highlight: true,
        ref: "tableListRef",
        tableColumn: [
          { label: "供应商编号", prop: "number", min: 190, isCommonClick: true },
@@ -237,7 +221,7 @@
            this.supplierId = 0
          }
          this.$nextTick(() => {
            this.$refs.tableSupplier.setCurrentRow(this.tableList.tableInfomation[0])
            this.$refs.tableSupplier.$refs.table.setCurrentRow(this.tableList.tableInfomation[0])
          })
          this.getProductList()
        }
@@ -367,8 +351,16 @@
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.rightContent {
  height: 100%;
  background: #f0f2f5;
  padding: 10px;
  .top {
    margin-bottom: 20px;
    height: 55%;
    background: #fff;
    .list-view {
      height: calc(100% - 120px);
    }
    .supplier-search {
      display: flex;
      align-items: center;
@@ -381,14 +373,20 @@
      color: $color-primary;
      cursor: pointer;
    }
    .btn-pager {
      display: flex;
      .page {
        margin-left: auto;
      }
    }
    // .btn-pager {
    //   display: flex;
    //   .page {
    //     margin-left: auto;
    //   }
    // }
  }
  .bottom {
    margin-top: 20px;
    height: calc(40% - 0px);
    background: #fff;
    .list-view {
      height: calc(100% - 120px);
    }
    .product-search {
      display: flex;
      align-items: center;
@@ -398,12 +396,6 @@
      .add-view {
        margin-left: 20px;
        margin-right: 20px;
      }
    }
    .btn-pager {
      display: flex;
      .page {
        margin-left: auto;
      }
    }
  }