feat: 表格组件新增表头配置组件, 各列表页适配此组件

songshankun

2023-09-23 7f0ec738a0af4d9d334ce85012f864f2519ebb3f

feat: 表格组件新增表头配置组件, 各列表页适配此组件

 src/components/makepager/TableCommonView.vue

@@ -21,8 +21,9 @@
    >
      <el-table-column align="center" v-if="tableList.selectBox" type="selection" width="40"> </el-table-column>
      <el-table-column align="center" v-if="tableList.selectIndex" type="index" label="序号" width="50"> </el-table-column>
      <el-table-column align="center"
        v-for="(item, i) in tableList.tableColumn"
      <template v-for="(item, i) in tableList.tableColumn">
        <el-table-column
          align="center"
        :key="i"
        :prop="item.prop"
        :label="item.label"
@@ -30,6 +31,7 @@
        :min-width="item.min"
        show-overflow-tooltip
        :sortable="item.sortable"
          v-if="item.isShowColumn"
      >
        <template slot-scope="scope">
          <span v-if="item.price">{{ "￥" + number_format(scope.row[item.prop], 2, ".", ",") }}</span>
@@ -92,11 +94,26 @@
          <span v-else>{{ scope.row[item.prop] ? scope.row[item.prop] : "--" }}</span>
        </template>
      </el-table-column>
      </template>
      <slot name="tableButton" />
      <div slot="empty">
        <el-empty description="暂无数据"></el-empty>
      </div>
    </el-table>
    <div class="overSpread1" v-show="iscolopen" @click="onMaskClick"></div>
    <div class="styleBtn">
      <i @click="checkCol()" class="label">...</i>
      <el-checkbox-group
          v-model="showcol"
          v-show="iscolopen"
          class="checkbox-group"
          @change="selectCheckBoxList"
      >
        <el-checkbox v-for="item in tableList.allcol" :label="item" :key="item"
        >{{ item }}
        </el-checkbox>
      </el-checkbox-group>
    </div>
  </div>
</template>

@@ -111,6 +128,9 @@
          selectBox: false,
          selectIndex: false,
          tableInfomation: [], // 接口返回数据
          showcol: [],
          allcol: [],
          highlight: false,
          tableColumn: [
            // table表单
            { label: "", prop: "", min: 200, tooltip: true }
@@ -138,11 +158,30 @@
    }
  },
  data() {
    return {}
    return {
      iscolopen: false,
      showcol:[]
    }
  },
  watch: {
    'tableList.showcol':{
      handler(newVal){
        this.showcol=newVal
      },
      immediate:true
    }
  },
  computed: {},
  mounted() {},
  methods: {
    onMaskClick() {
      this.iscolopen = false;
    },
    checkCol() {
      this.iscolopen = !this.iscolopen;
    },
    selectCheckBoxList(val) {
      this.$emit("selTableCol", val);
    },
    handleReserve(row) {
      return row._id ? row._id : row.id
    },
@@ -299,6 +338,7 @@
  // margin-top: 20px;
  // margin-right: 10px;
  // margin-bottom: 40px;
  position: relative;
  height: 100%;
  .blue {
    width: 70px;
@@ -363,4 +403,50 @@
    padding: 4px 0;
  }
}

.overSpread1 {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0);
  z-index: 10;
}

.styleBtn {
  position: absolute;
  width: 30px;
  height: 36px;
  // line-height: 26px;
  // background: #06c062;
  top: 0;
  right: 2px;
  z-index: 9999;
  .label {
    position: absolute;
    top: 6px;
    font-size: 20px;
    // line-height: 5px;
    cursor: pointer;
    color: #000;
    transform: rotate(-90deg);
  }
  .checkbox-group {
    width: 160px;
    height: 330px;
    overflow: auto;
    display: flex;
    flex-direction: column;
    line-height: 25px;
    background: #ffffff;
    border-radius: 16px;
    padding: 12px;
    position: absolute;
    right: 0;
    top: 30px;
    z-index: 99;
    box-shadow: 0 0 2px 2px #f8f8f8;
  }
}
</style>

 src/views/productManage/product/index.vue

@@ -26,7 +26,12 @@
    <div class="body">
      <div class="body-card">
        <div class="list-view">
          <TableCommonView ref="tableListRef" :table-list="tableList" @selCommonClick="selCommonClick">
          <TableCommonView
            ref="tableListRef"
            :table-list="tableList"
            @selCommonClick="selCommonClick"
            @selTableCol="selTableCol"
          >
            <!-- <template slot="tableButton">
            <el-table-column label="操作" width="120">
              <template slot-scope="scope">
@@ -76,18 +81,7 @@
        visible: false,
        title: "新建",
        infomation: {}
      }
    }
  },
  created() {
    this.setTable()
    this.getData()
  },
  methods: {
    setTable() {
      this.tableList = {
        tableInfomation: [],
        selectIndex: true,
        tableColumn: [
          { label: "产品编码", prop: "number", min: 190, isCommonClick: true },
          { label: "产品名称", prop: "name", min: 130 },
@@ -99,8 +93,33 @@
          { label: "价格", prop: "purchasePrice", min: 130 },
          { label: "最低库存", prop: "minimumStock", min: 80 },
          { label: "最高库存", prop: "maximumStock", min: 80 }
        ]
      ],
      showCol: ['产品编码', '产品名称', '供应商', '产品类别', '规格', '型号', '单位', '价格', '最低库存', '最高库存']
      }
  },
  created() {
    this.setTable()
    this.getData()
  },
  methods: {
    setColumnVisible(showCol){
      return  this.tableColumn.map(ele=>{
        return {
          ...ele,
          isShowColumn:showCol.includes(ele.label)
        }
      })
    },
    setTable() {
      this.tableList = {
        tableInfomation: [],
        selectIndex: true,
        showcol: this.showCol,
        allcol: [],
        tableColumn:this.setColumnVisible(this.showCol)
      }
      this.tableList.allcol = this.tableList.tableColumn.filter(ele=>!ele.default).map(ele=>ele.label);

      this.searchOptions = []
      for (let i = 0; i < this.tableList.tableColumn.length; i++) {
        const label = this.tableList.tableColumn[i].label
@@ -108,6 +127,10 @@
        this.searchOptions.push({ value: value, label: label })
      }
    },
    selTableCol(val) {
      this.showcol = val;
      this.tableList.tableColumn = this.setColumnVisible(val);
    },
    // 请求数据
    async getData() {
      await getProductList({

 src/views/purchaseManage/purchase/index.vue

@@ -22,6 +22,7 @@
              ref="tableListRef"
              :table-list="tableList"
              @selCommonClick="selCommonClick"
              @selTableCol="selTableCol"
          >
            <template slot="tableButton">
              <el-table-column  label="状态" width="120">
@@ -84,7 +85,18 @@
        title: "创建",
        infomation: {}
      },
      purchaseStatusList: getDataByType("purchaseStatus")
      purchaseStatusList: getDataByType("purchaseStatus"),
      tableColumn: [
        { label: "采购单号", prop: "number", min: 150, isCommonClick: true },
        { label: "采购单名称", prop: "name", min: 130, isCommonClick: true },
        { label: "单据类型", prop: "orderType", min: 130 },
        { label: "供应商名称", prop: "contact", min: 130 },
        { label: "采购数量", prop: "quantity", min: 130 },
        { label: "收货仓库", prop: "warehouse", min: 130 },
        { label: "经办人", prop: "handledBy", min: 130 },
        { label: "制单人", prop: "creator", min: 130 }
      ],
      showCol: ['采购单号', '采购单名称', '单据类型', '供应商名称', '采购数量', '收货仓库', '经办人', '制单人']
    }
  },
  created() {
@@ -103,21 +115,27 @@
        return "--"
      }
    },
    setColumnVisible(showCol){
      return  this.tableColumn.map(ele=>{
        return {
          ...ele,
          isShowColumn:showCol.includes(ele.label)
        }
      })
    },
    setTable() {
      this.tableList = {
        tableInfomation: [],
        selectIndex: true,
        tableColumn: [
          { label: "采购单号", prop: "number", min: 150, isCommonClick: true },
          { label: "采购单名称", prop: "name", min: 130, isCommonClick: true },
          { label: "单据类型", prop: "orderType", min: 130 },
          { label: "供应商名称", prop: "contact", min: 130 },
          { label: "采购数量", prop: "quantity", min: 130 },
          { label: "收货仓库", prop: "warehouse", min: 130 },
          { label: "经办人", prop: "handledBy", min: 130 },
          { label: "制单人", prop: "creator", min: 130 }
        ]
        showcol: this.showCol,
        allcol: [],
        tableColumn:this.setColumnVisible(this.showCol)
      }
      this.tableList.allcol = this.tableList.tableColumn.filter(ele=>!ele.default).map(ele=>ele.label);
    },
    selTableCol(val) {
      this.showcol = val;
      this.tableList.tableColumn = this.setColumnVisible(val);
    },
    // 请求数据
    async getData() {

 src/views/purchaseManage/quality/index.vue

@@ -21,6 +21,7 @@
              ref="tableListRef"
              :table-list="tableList"
              @selCommonClick="selCommonClick"
              @selTableCol="selTableCol"
          >
            <template slot="tableButton">
              <el-table-column align="center" label="状态" width="120">
@@ -72,6 +73,18 @@
      },
      search: {},
      qualityStatusList:getDataByType('qualityStatus'),
      tableColumn: [
        { label: "质检单编号", prop: "number", min: 190, isCommonClick: true },
        { label: "采购单编号", prop: "name", min: 130, isCommonClick: true},
        { label: "单据类型", prop: "contact_name", min: 130 },
        { label: "供应商名称", prop: "contact_phone", min: 130 },
        { label: "到货仓库", prop: "sales_resources", min: 130 },
        { label: "质检数量", prop: "province", min: 130 },
        { label: "检验员", prop: "city", min: 130 },
        // { label: "状态", prop: "member_name", min: 110 },
        { label: "质检时间", prop: "member_name", min: 150 },
      ],
      showCol: ['质检单编号', '采购单编号', '单据类型', '供应商名称', '到货仓库', '质检数量', '检验员', '质检时间']
    }
  },
  created() {
@@ -90,22 +103,27 @@
        return "--";
      }
    },
    setColumnVisible(showCol){
      return  this.tableColumn.map(ele=>{
        return {
          ...ele,
          isShowColumn:showCol.includes(ele.label)
        }
      })
    },
    setTable() {
      this.tableList = {
        tableInfomation: [],
        selectIndex: true,
        tableColumn: [
          { label: "质检单编号", prop: "number", min: 190, isCommonClick: true },
          { label: "采购单编号", prop: "name", min: 130, isCommonClick: true},
          { label: "单据类型", prop: "contact_name", min: 130 },
          { label: "供应商名称", prop: "contact_phone", min: 130 },
          { label: "到货仓库", prop: "sales_resources", min: 130 },
          { label: "质检数量", prop: "province", min: 130 },
          { label: "检验员", prop: "city", min: 130 },
          // { label: "状态", prop: "member_name", min: 110 },
          { label: "质检时间", prop: "member_name", min: 150 },
        ]
        showcol: this.showCol,
        allcol: [],
        tableColumn:this.setColumnVisible(this.showCol)
      }
      this.tableList.allcol = this.tableList.tableColumn.filter(ele=>!ele.default).map(ele=>ele.label);
    },
    selTableCol(val) {
      this.showcol = val;
      this.tableList.tableColumn = this.setColumnVisible(val);
    },
    // 请求数据
    async getData() {

 src/views/purchaseManage/returned/index.vue

@@ -21,6 +21,7 @@
             ref="tableListRef"
             :table-list="tableList"
             @selCommonClick="selCommonClick"
             @selTableCol="selTableCol"
         >
           <template slot="tableButton">
             <el-table-column align="center" label="状态" width="120">
@@ -74,6 +75,19 @@
      },
      search: '',
      returnedStatusList:getDataByType('returnedStatus'),
      tableColumn: [
        { label: "退货单编号", prop: "number", min: 190, isCommonClick: true },
        { label: "采购单编号", prop: "name", min: 130, isCommonClick: true},
        { label: "单据类型", prop: "contact_name", min: 130 },
        { label: "供应商名称", prop: "contact_phone", min: 130 },
        { label: "退货仓库", prop: "sales_resources", min: 130 },
        { label: "退货理由", prop: "province", min: 180 },
        { label: "经办人", prop: "city", min: 130 },
        { label: "制单人", prop: "member_name", min: 130 },
        { label: "退货日期", prop: "member_name", min: 150 },
        // { label: "状态", prop: "member_name", min: 110 }
      ],
      showCol: ['退货单编号', '采购单编号', '单据类型', '供应商名称', '退货仓库', '退货理由', '经办人', '制单人', '退货日期']
    }
  },
  created() {
@@ -92,23 +106,27 @@
        return "--";
      }
    },
    setColumnVisible(showCol){
      return  this.tableColumn.map(ele=>{
        return {
          ...ele,
          isShowColumn:showCol.includes(ele.label)
        }
      })
    },
    setTable() {
      this.tableList = {
        tableInfomation: [],
        selectIndex: true,
        tableColumn: [
          { label: "退货单编号", prop: "number", min: 190, isCommonClick: true },
          { label: "采购单编号", prop: "name", min: 130, isCommonClick: true},
          { label: "单据类型", prop: "contact_name", min: 130 },
          { label: "供应商名称", prop: "contact_phone", min: 130 },
          { label: "退货仓库", prop: "sales_resources", min: 130 },
          { label: "退货理由", prop: "province", min: 180 },
          { label: "经办人", prop: "city", min: 130 },
          { label: "制单人", prop: "member_name", min: 130 },
          { label: "退货日期", prop: "member_name", min: 150 },
          // { label: "状态", prop: "member_name", min: 110 }
        ]
        showcol: this.showCol,
        allcol: [],
        tableColumn:this.setColumnVisible(this.showCol)
      }
      this.tableList.allcol = this.tableList.tableColumn.filter(ele=>!ele.default).map(ele=>ele.label);
    },
    selTableCol(val) {
      this.showcol = val;
      this.tableList.tableColumn = this.setColumnVisible(val);
    },
    // 请求数据
    async getData() {

 src/views/supplierManage/supplier/index.vue

@@ -23,6 +23,7 @@
                :table-list="tableList"
                @selCommonClick="selCommonClick"
                @tableRowClick="tableRowClick"
                @selTableCol="selTableCol"
            >
              <template slot="tableButton">
                <el-table-column label="操作" width="100">
@@ -77,6 +78,7 @@
                :table-list="productTableList"
                @selCommonClick="selCommonClick"
                @getSelectArray="getSelectArray"
                @selTableCol="selProductTableCol"
            >
              <template slot="tableButton">
                <el-table-column label="操作" width="170">
@@ -157,21 +159,8 @@
        pageSize: 10,
        totalCount: 0
      },
      supplierId: 0
    }
  },
  created() {
    this.setTable()
    this.setProductTable()
    this.getData()
  },
  methods: {
    setTable() {
      this.tableList = {
        tableInfomation: [],
        selectIndex: true,
        highlight: true,
        ref: "tableListRef",
      supplierId: 0,
      showCol:['供应商编号','供应商名称','供应商类型','所属行业','联系人','联系电话','状态','创建时间'],
        tableColumn: [
          { label: "供应商编号", prop: "number", min: 190, isCommonClick: true },
          { label: "供应商名称", prop: "name", min: 130 },
@@ -181,21 +170,9 @@
          { label: "联系电话", prop: "phone", min: 130 },
          { label: "状态", prop: "status_name", min: 130 },
          { label: "创建时间", prop: "created_at", min: 130 }
        ]
      }
      this.searchOptions = []
      for (let i = 0; i < this.tableList.tableColumn.length; i++) {
        const label = this.tableList.tableColumn[i].label
        const value = this.tableList.tableColumn[i].prop
        this.searchOptions.push({ value: value, label: label })
      }
    },
    setProductTable() {
      this.productTableList = {
        tableInfomation: [],
        selectBox: true,
        selectIndex: true,
        tableColumn: [
      ],
      showProductCol:['产品编码','产品名称','产品规格','单位','采购价格','供货时长(天)','物流时长(天)'],
      productColumn:[
          { label: "产品编码", prop: "number", min: 190 },
          { label: "产品名称", prop: "name", min: 130 },
          { label: "产品规格", prop: "specifications", min: 130 },
@@ -205,12 +182,74 @@
          { label: "物流时长(天)", prop: "shippingDuration", min: 130 }
        ]
      }
  },
  created() {
    this.setTable()
    this.setProductTable()
    this.getData()
  },
  methods: {
    setColumnVisible(showCol){
      return  this.tableColumn.map(ele=>{
        return {
          ...ele,
          isShowColumn:showCol.includes(ele.label)
        }
      })
    },
    setProductColumnVisible(showCol){
      return  this.productColumn.map(ele=>{
        return {
          ...ele,
          isShowColumn:showCol.includes(ele.label)
        }
      })
    },
    setTable() {
      this.tableList = {
        tableInfomation: [],
        selectIndex: true,
        highlight: true,
        ref: "tableListRef",
        showcol: this.showCol,
        allcol: [],
        tableColumn: this.setColumnVisible(this.showCol),
      }
      this.tableList.allcol = this.tableList.tableColumn.filter(ele=>!ele.default).map(ele=>ele.label);

      this.searchOptions = []
      for (let i = 0; i < this.tableList.tableColumn.length; i++) {
        const label = this.tableList.tableColumn[i].label
        const value = this.tableList.tableColumn[i].prop
        this.searchOptions.push({ value: value, label: label })
      }
    },
    selTableCol(val) {
      this.showcol = val;
      this.tableList.tableColumn = this.setColumnVisible(val);
    },
    setProductTable() {
      this.productTableList = {
        tableInfomation: [],
        selectBox: true,
        selectIndex: true,
        showcol: this.showProductCol,
        allcol: [],
        tableColumn: this.setProductColumnVisible(this.showProductCol),
      }
      this.searchProductOptions = []
      for (let i = 0; i < this.productTableList.tableColumn.length; i++) {
        const label = this.productTableList.tableColumn[i].label
        const value = this.productTableList.tableColumn[i].prop
        this.searchProductOptions.push({ value: value, label: label })
      }

      this.productTableList.allcol = this.productTableList.tableColumn.filter(ele=>!ele.default).map(ele=>ele.label);
      console.log('this.productTableList',this.productTableList)
    },
    selProductTableCol(val) {
      this.showProductCol = val;
      this.productTableList.tableColumn = this.setProductColumnVisible(val);
    },
    // 请求数据
    getData() {