kd-aiot-frontend-eom/src/views/purchasingManage/purchaseOrder/components/supplierGoodsListDialog.vue

<template>
  <ele-modal
    custom-class="ele-dialog-form long-dialog-form"
    :centered="true"
    :visible.sync="supplierGoodsListDialogFlag"
    title="供货列表"
    :close-on-click-modal="false"
    append-to-body
    width="70%"
    :before-close="cancel"
    :maxable="true"
    :resizable="true"
  >
    <ele-pro-table
      ref="supplyRef"
      :columns="supplyColumns"
      :need-page="false"
      :selection.sync="selection"
      :datasource="supplyList"
      :toolkit="[]"
      height="350px"
    
      @header-dragend="handleHeaderDragend">
      <template v-slot:toolbar>
        <el-button type="primary" @click="handSelectSupply">新增</el-button>
      </template>
      <!-- 操作栏 -->
      <template v-slot:action="scope">
        <el-popconfirm
          class="ele-action"
          title="确定要删除此物品吗？"
          @confirm="handleRemoveSupply(scope.$index)"
        >
          <template v-slot:reference>
            <el-link type="danger" :underline="false" icon="el-icon-delete">
              删除
            </el-link>
          </template>
        </el-popconfirm>
      </template>
    </ele-pro-table>

    <div slot="footer" class="footer">
      <el-button type="primary" size="small" @click="selected">选择</el-button>
      <el-button @click="cancel">返回</el-button>
    </div>
    <product-list
      ref="productListRef"
      :data="supplyList"
      @changeParent="getSupplyList"
    ></product-list>
  </ele-modal>
</template>
<script>
  import { contactDetail, contactUpdate } from '@/api/saleManage/contact';
  import { getInventoryTotalAPI } from '@/api/wms';
  import productList from '@/BIZComponents/product-list.vue';
  import { lbjtList } from '@/enum/dict.js';
import tabMixins from '@/mixins/tableColumnsMixin';

  export default {
  mixins: [tabMixins],
    name: 'generateContractsDialog',
    props: {
      supplierGoodsListDialogFlag: {
        type: Boolean,
        default: false
      }
    },
    components: {
      productList
    },
    data() {
      return {
      cacheKeyUrl: 'views_purchasingManage_purchaseOrder_components_supplierGoodsListDialog',
        supplyList: [],
        selection: [],
        form: {},
        supplyColumnsRaw: [
          {
            label: '选择',
            width: 45,
            type: 'selection',
            columnKey: 'selection',
            align: 'center'
          },
          {
            columnKey: 'index',
            type: 'index',
            width: 50,
            align: 'center',
            showOverflowTooltip: true,
            label: '序号'
          },
          {
            prop: 'productCode',
            label: '编码',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'productName',
            label: '名称',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'imgCode',
            align: 'center',
            label: '图号/件号',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'produceType',
            align: 'center',
            label: '属性类型',
            showOverflowTooltip: true,
            minWidth: 110,
            formatter: (row, column) => {
              if(row.produceType){
                return row.produceType.map(item=>{
                  return lbjtList[item]
                }).toString()
              }
          
            }
          },
          // {
          //   prop: 'approvalNumber',
          //   align: 'center',
          //   label: '批准文号',
          //   showOverflowTooltip: true,
          //   minWidth: 110
          // },
          {
            prop: 'packingSpecification',
            align: 'center',
            label: '包装规格',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'brandNum',
            align: 'center',
            label: '牌号',
            showOverflowTooltip: true
          },
          {
            prop: 'modelType',
            label: '型号',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'specification',
            label: '规格',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'measuringUnit',
            label: '计量单位',
            showOverflowTooltip: true,
            align: 'center',
            minWidth: 90
          },
          {
            action: 'action',
            slot: 'action',
            label: '操作',
            align: 'center',
            width: 130
          }

          // {
          //   prop: 'weightUnit',
          //   label: '重量单位',
          //   showOverflowTooltip: true,
          //   align: 'center',
          //   minWidth: 90
          // },
          //
          // {
          //   prop: 'roughWeight',
          //   label: '毛重',
          //   showOverflowTooltip: true,
          //   align: 'center',
          //   minWidth: 90
          // },
          //
          // {
          //   prop: 'netWeight',
          //   label: '净重',
          //   showOverflowTooltip: true,
          //   align: 'center',
          //   minWidth: 90
          // },
          //
          // {
          //   prop: 'packingUnit',
          //   align: 'center',
          //   label: '包装单位',
          //   showOverflowTooltip: true
          // },
          // {
          //   prop: 'categoryLevelPath',
          //   label: '分类',
          //   align: 'center',
          //   showOverflowTooltip: true
          // },
        ]
      };
    },
    computed: {
      // 标准 mixin 列宽持久化：包成 computed 让 applyColumnWidth 应用缓存列宽
      supplyColumns() {
        this.columnsVersion;
        return this.applyColumnWidth(this.supplyColumnsRaw);
      },
    },

    methods: {
      async open(id) {
        this.form = await contactDetail(id);
        this.supplyList = this.form.productList || [];
      },
      //选择产品
      handSelectSupply() {
        this.$refs.productListRef.open(this.supplyList, -1);
      },
      getSupplyList(obj) {
        obj.forEach((item, index) => {
          let params = {};
          this.$set(params, 'contactId', this.form?.base?.id);
          this.$set(params, 'productId', item.id);
          this.$set(params, 'categoryName', item.name);
          this.$set(params, 'productCategoryId', item.categoryLevelId);
          this.$set(params, 'productBrand', item.brandNum);
          this.$set(params, 'productCategoryName', item.categoryLevelPath);
          this.$set(params, 'productCode', item.code);
          this.$set(params, 'productName', item.name);
          this.$set(params, 'modelType', item.modelType);
          this.$set(params, 'availableCountBase', item.availableCountBase);
          this.$set(params, 'measuringUnit', item.measuringUnit);
          this.$set(params, 'specification', item.specification);
          this.$set(params, 'weightUnit', item.weightUnit);
          this.$set(params, 'imgCode', item.imgCode);
          this.$set(params, 'produceType', item.componentAttribute);
          this.$set(params, 'approvalNumber', item.approvalNumber);
          this.$set(params, 'packingSpecification', item.packingSpecification);
          if (item.purchaseOrigins?.length) {
            item.purchaseOrigins = item.purchaseOrigins.map((val) => val + '');
          }
          this.$set(params, 'provenance', item.purchaseOrigins || []);
          this.supplyList.push(params);
        });
        this.contactUpdate()
        this.$forceUpdate();
      },
      //删除供货产品
      handleRemoveSupply(index) {
        this.supplyList.splice(index, 1);
        this.contactUpdate()
      },
      contactUpdate() {
        this.form.productList = this.supplyList;
        const data = {
          ...this.form
        };
        contactUpdate(data);
      },
      async selected() {
        if (!this.selection.length) {
          return this.$message.warning('请至少选择一条数据');
        }
        let codeList = [];
        let list = this.selection;
        //获取仓库库存
        if (this.isGetInventoryTotal) {
          codeList = list.map((item) => item.code);
          let inventoryTotalList = await getInventoryTotalAPI(codeList);
          list.forEach((item) => {
            let find =
              inventoryTotalList.find((key) => key.code == item.code) || {};
            item.availableCountBase = find.availableCountBase;
          });
        }
        this.$emit('changeParent', list);
        this.cancel();
      },
      cancel() {
        this.$emit('update:supplierGoodsListDialogFlag', false);
      }
    }
  };
</script>

<style scoped lang="scss"></style>