kd-aiot-frontend/src/views/documentManagement/certificateManagement/components/productTable.vue

<template>
    <div>
    <headerTitle title="关联产品" ></headerTitle>
    <ele-pro-table ref="table" :needPage="false" :columns="columns" :datasource="datasource" class="time-form"
      :toolkit="[]">
      <!-- 表头工具栏 -->
      <template v-slot:toolbar>
        <el-button
          v-if="!isView"
          size="small"
          type="primary"
          icon="el-icon-plus"
          class="ele-btn-icon"
          @click="handParent('', -1)"
        >
          新增
        </el-button>
      </template>
      <!-- 操作列 -->
      <template v-slot:action="scope">
        <el-popconfirm  class="ele-action" title="确定要删除吗？" @confirm="remove(scope.$index)">
          <template v-slot:reference>
            <el-link v-if="!isView" type="danger" :underline="false" icon="el-icon-delete">
              删除
            </el-link>
          </template>
        </el-popconfirm>
      </template>
    </ele-pro-table>
    <product-list
      ref="productListRef"
      classType="1"
      :is-get-inventory-total="true"
      @changeParent="changeParent"
      :data="datasource"
    ></product-list>
</div>
</template>

<script>
  import productList from './product-list.vue';

  export default {
    props: {
      isView: {
        type: Boolean,
        default: false
      }
    },
    components:{
        productList
    },
    data() {
        return {
            datasource: [],
            columns: [
            {
            width: 50,
            label: '序号',
            type: 'index',
            columnKey: 'index',
            align: 'center',
            fixed: 'left'
          },
          {
            prop: 'productCategoryName',
            label: '类型',
            slot: 'productCategoryName',
            align: 'center'
          },
          {
            prop: 'productCode',
            label: '编码',
            slot: 'productCode',
            align: 'center'
          },
          {
            prop: 'productName',
            label: '名称',
            slot: 'productName',
            headerSlot: 'headerProductName',
            align: 'center',
            fixed: 'left'
          },
          {
            prop: 'specification',
            label: '规格',
            slot: 'specification',
            align: 'center'
          },
          {
            prop: 'productBrand',
            label: '牌号',
            slot: 'productBrand',
            align: 'center'
          },
          {
            prop: 'modelType',
            label: '型号',
            slot: 'modelType',
            align: 'center'
          },
          {
          columnKey: 'action',
          label: '操作',
          width: 80,
          align: 'left',
          resizable: false,
          slot: 'action',
          showOverflowTooltip: true
        }]
        }
    },
    methods:{
      //选择产品回调
      changeParent(obj, idx) {
        obj.forEach((item, index) => {
          let i = idx == -1 ? index : idx;
          let row = {};
          row.key = this.datasource.length + 1;
          let parasm = idx == -1 ? row : this.datasource[i];
          this.$set(parasm, 'productId', item.id);
          this.$set(parasm, 'productCategoryId', item.categoryLevelId);
          this.$set(parasm, 'productCategoryName', item.categoryLevelPath);
          this.$set(parasm, 'productCode', item.code);
          this.$set(parasm, 'productName', item.name);
          this.$set(parasm, 'specification', item.specification);
          this.$set(parasm, 'productBrand', item.brandNum);
          this.$set(parasm, 'modelType', item.modelType);
          if (idx == -1) {
            this.datasource.push(row);
          }
        });
      },

      //选择产品
      handParent() {
        this.$refs.productListRef.open(-1);
      },
      //删除选中产品
      remove(index) {
        this.datasource.splice(index, 1);
        this.setSort();
      },

      // 重新排序
      setSort() {
        this.datasource.forEach((n, index) => {
          n.key = index + 1;
        });
      },

      // 初始化数据
      initData() {
        this.datasource = [];
      },

      // 返回列表数据
      getTableValue() {
        let comitDatasource = this.datasource;
        if (comitDatasource.length === 0) return [];
        return comitDatasource;
      },

      //修改回显
      putTableValue(data) {
        this.datasource = data;
      }
    }
  }
</script>