kd-aiot-frontend-eom/src/BIZComponents/product-list.vue

<template>
  <ele-modal
    title="选择物品"
    :visible.sync="visible"
    v-if="visible"
    :before-close="handleClose"
    top="5vh"
    append-to-body
    width="70%"
    :maxable="true"
  >
    <el-card shadow="never">
      <searchProduct v-if="dataSources == '1'" @search="reload"></searchProduct>
      <el-form
        :model="searchForm"
        label-width="100px"
        @submit.native.prevent
        v-else
      >
        <el-row>
          <el-row>
            <!-- <el-col :span="6">
              <el-form-item label="仓库名称:">
                <el-select v-model="searchForm.warehouseId" style="width: 100%">
                  <el-option
                    v-for="item in warehouseList"
                    :key="item.id"
                    :value="item.id"
                    :label="item.name"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col> -->
            <el-col :span="6">
              <el-form-item label="牌号">
                <el-input
                  type="text"
                  placeholder="搜索牌号"
                  v-model="searchForm.brandNum"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6" style="height: 43px">
              <el-form-item label="列表维度:" prop="dimension">
                <template>
                  <el-select
                    style="width: 100%"
                    @change="changeDimensionHandler"
                    v-model="dimension"
                    placeholder="请选择"
                  >
                    <el-option label="物料维度" value="4"></el-option>
                    <el-option label="包装维度" value="3"></el-option>
                    <el-option label="批次维度" value="2"></el-option>
                    <el-option label="物品维度" value="1"></el-option>
                  </el-select>
                </template>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="物品编码:">
                <el-input
                  style="width: 100%"
                  type="text"
                  placeholder="搜索物品编码"
                  v-model="searchForm.categoryCode"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="物品名称:">
                <el-input
                  style="width: 100%"
                  type="text"
                  placeholder="搜索物品名称"
                  v-model="searchForm.categoryName"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col style="text-align: right; margin-bottom: 10px">
              <el-button type="primary" @click="doSearch">搜索</el-button>
              <el-button icon="el-icon-refresh-left" @click="reset"
                >重置</el-button
              >
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="批次号:">
                <el-input
                  type="text"
                  placeholder="搜索批次号"
                  v-model="searchForm.batchNo"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="型号:">
                <el-input
                  type="text"
                  placeholder="搜索型号"
                  v-model="searchForm.categoryModel"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="规格:">
                <el-input
                  type="text"
                  placeholder="搜索规格"
                  v-model="searchForm.specification"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="颜色:">
                <el-input
                  type="text"
                  placeholder="搜索颜色"
                  v-model="searchForm.colorKey"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-row>
      </el-form>
      <ele-split-layout
        width="244px"
        allow-collapse
        :right-style="{ overflow: 'hidden' }"
      >
        <div class="ele-border-lighter split-layout-right-content">
          <productTree
            @handleNodeClick="handleNodeClick"
            :isFirstRefreshTable="isFirstRefreshTable"
            ref="treeList"
            :ids="ids"
            :typeIds="typeIds"
            :itemType="itemType"
          />
        </div>
        <!-- 表格 -->
        <template v-slot:content>
          <ele-pro-table
            ref="table"
            :columns="columns"
            :datasource="datasource"
            @row-dblclick="handleDoubleClick"
            row-key="id"
            height="calc(100vh - 480px)"
            class="dict-table"
            @cell-click="cellClick"
            :selection.sync="selection"
            @done="tableDone"
            :row-class-name="tableRowClassName"
            :initLoad="!isFirstRefreshTable"
            @columns-change="handleColumnChange"
            :cache-key="cacheKeyUrl"
            :page-size="20"
          >
            <!-- 表头工具栏 -->
            <template v-slot:action="{ row }">
              <!-- <el-radio class="radio" v-model="radio" :label="row.code"></el-radio> -->
              <el-radio class="radio" v-model="radio" :label="row.id">
                <i></i>
              </el-radio>
            </template>
            <template v-slot:saleCount="{ row }">
              <el-input
                v-model="row.saleCount"
                style="width: 100%"
                placeholder="请输入"
                type="number"
                :min="0"
              ></el-input>
            </template>
            <template v-slot:cz="{ row }">
              <el-button type="text" @click="handleDoubleClick(row)"
                >选择PBom</el-button
              >
            </template>
          </ele-pro-table>
        </template>
      </ele-split-layout>
    </el-card>

    <div slot="footer">
      <el-button
        type="primary"
        size="small"
        :loading="selecting"
        @click="selected"
        >选择</el-button
      >
      <el-button size="small" @click="handleClose">关闭</el-button>
    </div>
    <c-bom-list
      v-if="cBomListDialogFlag"
      :cBomListDialogFlag.sync="cBomListDialogFlag"
      :current-row="current"
      ref="cBomRef"
      @changeParent="getSelectionCbom"
    ></c-bom-list>
  </ele-modal>
</template>

<script>
  import {
    getOutindetailtwoList,
    getBatchList,
    getMaterialList,
    getPackingList
  } from '@/api/wms';
  import {
    getProductList,
    queryLastContractProductList
  } from '@/api/saleManage/quotation';
  import searchProduct from './searchProduct.vue';
  import productTree from '@/components/productTree';
  import {
    getInventoryTotalAPI,
    getCategoryPackageDisposition
  } from '@/api/wms';
  import cBomList from './cBom-list.vue';
  import { getByCode } from '@/api/system/dictionary-data';
  import { contactQueryByCategoryIdsAPI } from '@/api/saleManage/contact';
  import { lbjtList } from '@/enum/dict.js';
  import tabMixins from '@/mixins/tableColumnsMixin';
  import { levelList } from '@/enum/dict.js';
  import dictMixins from '@/mixins/dictMixins';

  export default {
    mixins: [tabMixins, dictMixins],

    components: {
      productTree,
      searchProduct,
      cBomList
    },
    props: {
      /*是否需要获取仓库产品数量*/
      isGetInventoryTotal: {
        type: Boolean,
        default: false
      },
      // 是否回传库存数量
      showStockCount: {
        type: Boolean,
        default: false
      },
      /*已选择的产品*/
      data: {
        type: Array,
        default: () => []
      },
      /*是否需要cBom*/
      isShowCBom: {
        type: Boolean,
        default: false
      },
      /*是否需要供应商*/
      isSupplier: {
        type: Boolean,
        default: false
      },
      //获取上一次销售记录  1销售合同 2采购合同
      isSalesRecord: {
        default: ''
      },
      typeIds: {
        type: Array,
        default: () => []
      },
      isFirstRefreshTable: {
        type: Boolean,
        default: false
      },
      ids: {
        type: Array,
        default: () => []
      },
      itemType: {
        type: String,
        default: '1'
      },
      // 是否需要显示可填采购数量的输入框
      showSaleCount: {
        type: Boolean,
        default: false
      }
    },

    data() {
      return {
        visible: false,
        selecting: false,
        currentIndex: null,
        radio: null,
        cBomListDialogFlag: null,
        dictList: {},
        selection: [],
        isColorId: [],
        dataSources: '1', // 0：仓库；1：主数据
        dimension: '1',
        cacheKeyUrl: 'product-list-cache-key',
        searchForm: {
          categoryCode: '',
          categoryName: '',
          batchNo: '',
          brandNum: '',
          engrave: '',
          barcodes: '',
          categoryModel: '',
          specification: '',
          colorKey: '',
          categoryLevelId: '',
          warehouseId: '',
          pageNum: 1,
          size: 10
        },
        datasourceList: [],
        columnsVersion: 1
      };
    },
    watch: {},
    computed: {
      columns() {
        let columnsVersion = this.columnsVersion;

        let data = null;
        if (this.currentIndex != -1) {
          data = {
            action: 'action',
            slot: 'action',
            align: 'center',
            label: '选择',
            reserveSelection: true
          };
        }
        if (this.currentIndex == -1) {
          data = {
            label: '选择',
            width: 45,
            type: 'selection',
            columnKey: 'selection',
            align: 'center',
            reserveSelection: true
          };
        }

        const tempData = [
          data,
          {
            columnKey: 'index',
            type: 'index',
            width: 50,
            align: 'center',
            showOverflowTooltip: true,
            label: '序号'
          },
          {
            prop: 'code',
            label: '编码',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'name',
            label: '名称',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'saleCount',
            slot: 'saleCount',
            label: '订单数量',
            showOverflowTooltip: true,
            align: 'center',
            minWidth: 120,
            hide: !this.showSaleCount
          },
          {
            prop: 'imgCode',
            align: 'center',
            label: '图号/件号',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'componentAttribute',
            align: 'center',
            label: '属性类型',
            showOverflowTooltip: true,
            formatter: (row, column) => {
              if (row.componentAttribute) {
                return row.componentAttribute
                  .map((item) => {
                    return lbjtList[item];
                  })
                  .toString();
              }
            },
            minWidth: 110
          },
          {
            prop: 'level',
            align: 'center',
            label: '级别',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'extField.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: 'modelKey',
            label: '机型',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'colorKey',
            label: '颜色',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'voltage',
            label: '电压',
            align: 'center',
            showOverflowTooltip: true,
            formatter: (row, column) => {
              return row.extField?.voltage || '';
            }
          },
          {
            prop: 'layBy',
            label: '贮藏',
            align: 'center',
            showOverflowTooltip: true,
            formatter: (row, column) => {
              return row.extField?.layBy
                ? this.getDictValue('贮藏', row.extField?.layBy)
                : '';
            }
          },
          {
            prop: 'warrantyPeriod',
            label: '保质期',
            align: 'center',
            showOverflowTooltip: true,
            formatter: (row, column) => {
              let unit = '';
              if (row.warrantyPeriodUnit) {
                unit = this.getDictValue('保质期单位', row.warrantyPeriodUnit);
              }
              return row.warrantyPeriod ? row.warrantyPeriod + unit : '';
            }
          },
          {
            prop: 'purchaseOrigins',
            label: '产地',
            align: 'center',
            showOverflowTooltip: true,
            formatter: (row, column) => {
              return row.purchaseOrigins && row.purchaseOrigins.length
                ? row.purchaseOrigins
                    .map((item) => this.getDictValue('产地', item))
                    .join(',')
                : '';
            }
          },
          {
            prop: 'measuringUnit',
            label: '计量单位',
            showOverflowTooltip: true,
            align: 'center',
            minWidth: 90,
            formatter: (row, column) => {
              return row.measuringUnit || row.measureUnit;
            }
          },

          {
            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
          },
          {
            slot: 'cz',
            align: 'center',
            minWidth: 90,
            fixed: 'right',
            label: '操作',
            show: this.isShowCBom
          }
        ];

        return tempData.filter((item) => !item.hide);
      }
    },
    created() {
      this.requestDict('保质期单位');
      this.requestDict('贮藏');
      this.requestDict('产地');
      this.requestDict('贮藏');
    },
    methods: {
      getDictV(code, val) {
        if (!this.dictList[code]) return '';
        return this.dictList[code].find((item) => item.value == val)?.label;
      },
      async getDictList(code) {
        let { data: res } = await getByCode(code);
        this.dictList[code] = res.map((item) => {
          let values = Object.keys(item);
          return {
            value: values[0],
            label: item[values[0]]
          };
        });
        console.log('code', this.dictList[code]);
      },
      open(item, currentIndex, value) {
        this.dataSources = value || '1';
        this.currentIndex = currentIndex;
        this.visible = true;
        this.getDictList('productionType');
      },
      /* 表格数据源 */
      datasource({ page, limit, where, order }) {
        if (this.dataSources == '0') {
          this.searchForm.pageNum = page;
          return this.changeDimension(this.dimension);
        }
        // isEnabled 1：查启用  0：查停用，不传该参数查所有
        return getProductList({
          pageNum: page,
          size: limit,
          ...where,
          isEnabled: 1
        });
      },
      async tableDone() {
        if (this.isSalesRecord == 1 || this.isSalesRecord == 2) {
          this.isColorId = await queryLastContractProductList(
            this.isSalesRecord
          );
        }
      },
      //上次销售记录 改变背景色
      tableRowClassName({ row }) {
        if (this.isColorId?.includes(row?.id)) {
          return 'success-row';
        }
        return '';
      },

      /* 刷新表格 */
      reload(where) {
        where.categoryLevelId = this.curNodeData?.id;
        this.searchForm.categoryLevelId = this.curNodeData?.id;
        this.$refs.table.reload({ pageNum: 1, where: where });
      },

      handleNodeClick(data, node) {
        this.curNodeData = data;
        this.$nextTick(() => {
          this.reload({ categoryLevelId: data.id });
        });
      },

      // 单击获取id
      cellClick(row) {
        if (this.currentIndex == -1) return;
        this.current = row;
        this.radio = row.id;
      },
      handleDoubleClick(row) {
        if (!this.isShowCBom) return;
        this.cBomListDialogFlag = true;
        this.current = row;
        this.$nextTick(() => {
          this.$refs.cBomRef.open(row);
        });
      },
      async getSelectionCbom(rows = []) {
        console.log(rows);
        let list = rows;
        //获取供应商
        if (this.isSupplier) {
          let supplierList = await this.getSupplierObj(list, 'categoryId');
          list.forEach((item) => {
            item['supplierList'] = supplierList[item.categoryId];
            // item['entrustedEnterpriseIdList'] = supplierList[item.categoryId];
            if (supplierList[item.categoryId]?.length) {
              // item['entrustedEnterpriseId'] = supplierList[item.id][0].id;
              // item['supplierCode'] = supplierList[item.categoryId][0].code;
              // item['supplierId'] = supplierList[item.categoryId][0].id;
              // item['supplierName'] = supplierList[item.categoryId][0].name;
              item['supplierName'] =
                supplierList[item.categoryId].find(
                  (i) => i.id == item.supplierId
                )?.name || '';
            }
          });
        }
        this.$emit('getSelectionCbom', list);
        this.handleClose();
      },
      handleClose() {
        this.visible = false;
        this.current = null;
        this.selection = [];
        this.$refs.table.clearSelection();
        this.radio = '';
      },
      async getSupplierObj(productList, queryName) {
        try {
          const categoryIds = [
            ...new Set(
              productList
                .filter((item) => item[queryName])
                .map((item) => item[queryName])
            )
          ];
          if (categoryIds.length > 0) {
            const supplierObj = await contactQueryByCategoryIdsAPI({
              categoryIds
            });
            // 同一物品的供应商列表去重，避免重复 id 渲染成多个 el-option
            Object.keys(supplierObj || {}).forEach((categoryId) => {
              const supplierIds = new Set();
              supplierObj[categoryId] = (supplierObj[categoryId] || []).filter(
                (supplier) => {
                  const supplierId = String(supplier.id);
                  if (supplierIds.has(supplierId)) {
                    return false;
                  }
                  supplierIds.add(supplierId);
                  return true;
                }
              );
            });
            return supplierObj;
          } else {
            return Promise.resolve({});
          }
        } catch (e) {
          return Promise.resolve({});
        }
      },
      async selected() {
        if (!this.current && !this.selection.length) {
          return this.$message.warning('请至少选择一条数据');
        }
        if (this.currentIndex != -1) {
          if (
            this.data
              .map((item) => item.productCode)
              .includes(this.current.code)
          ) {
            return this.$message.error('选择的物品已经存在列表了');
          }
        } else {
          if (
            this.selection.some((item) =>
              this.data.some((i) => i.productCode == item.code)
            )
          ) {
            return this.$message.error('选择的物品已经存在列表了');
          }
        }
        let list = this.currentIndex == -1 ? this.selection : [this.current];
        let codeList = list.map((item) => item.code);
        let idList = list.map((item) => item.id);

        this.selecting = true;
        try {
          // 库存、供应商、包装规格三个请求互不依赖，并行发起，避免串行等待多次往返
          const [inventoryTotalList, supplierList, packingSpecification] =
            await Promise.all([
              this.isGetInventoryTotal
                ? getInventoryTotalAPI(codeList)
                : Promise.resolve([]),
              this.isSupplier
                ? this.getSupplierObj(list, 'id')
                : Promise.resolve({}),
              getCategoryPackageDisposition({ categoryIds: idList })
            ]);

          //获取仓库库存
          if (this.isGetInventoryTotal) {
            list.forEach((item) => {
              let find =
                (inventoryTotalList || []).find(
                  (key) => key.code == item.code
                ) || {};
              if (this.showStockCount) {
                item.stockCountBase = find.stockCountBase;
                item.lockQuantity = find.lockQuantity;
              }
              item.availableCountBase = find.availableCountBase;
            });
          }
          //获取供应商
          if (this.isSupplier) {
            list.forEach((item) => {
              item['supplierList'] = supplierList[item.id];
              item['entrustedEnterpriseIdList'] = supplierList[item.id];
              if (supplierList[item.id]?.length) {
                item['entrustedEnterpriseId'] = supplierList[item.id][0].id;
                item['supplierCode'] = supplierList[item.id][0].code;
                item['supplierId'] = supplierList[item.id][0].id;
                item['supplierName'] = supplierList[item.id][0].name;
              }
            });
          }
          // 获取包装规格
          const packageMap = (packingSpecification || []).reduce(
            (map, item) => {
              if (!item?.conversionUnit) return map;
              const mapList = map[item.categoryId] || [];
              mapList.push(item);
              map[item.categoryId] = mapList;
              return map;
            },
            {}
          );
          Object.keys(packageMap).forEach((key) => {
            packageMap[key].sort((a, b) => a.sort - b.sort);
          });
          list.forEach((item) => {
            item['packageDispositionList'] = packageMap[item.id] || [];
            if (item.level) {
              item['goodsLevel'] = levelList.find(
                (val) => val.label == item.level
              )?.value;
            }
          });

          // 先关弹框，再等浏览器把关闭动画画出来，最后才做回显计算
          const currentIndex = this.currentIndex;
          this.handleClose();
          requestAnimationFrame(() => {
            requestAnimationFrame(() => {
              this.$emit('changeParent', list, currentIndex);
            });
          });
        } finally {
          this.selecting = false;
        }
      },
      // 仓库查询
      doSearch() {
        // this.searchForm.pageNum = 1;
        this.reload({ pageNum: 1, where: this.searchForm });
      },

      // 仓库查询重置
      reset() {
        this.searchForm = {
          categoryCode: '',
          categoryName: '',
          batchNo: '',
          brandNum: '',
          engrave: '',
          barcodes: '',
          categoryModel: '',
          specification: '',
          colorKey: '',
          categoryLevelId: this.categoryLevelId,
          pageNum: 1,
          warehouseId: '',
          size: 10
        };
        this.doSearch();
      },
      // 切换维度
      changeDimensionHandler(e) {
        // this.searchForm.pageNum = 1;
        // this.selectionList = [];
        // this.$refs.multipleTable.clearSelection();
        this.reload({ pageNum: 1, where: this.searchForm });
      },
      // 仓库数据
      async changeDimension(e) {
        this.dimension = e;
        let data = [];
        if (this.dimension == 1) {
          // 物品维度
          data = await getOutindetailtwoList(this.searchForm);
        } else if (this.dimension == 2) {
          // 批次维度
          data = await getBatchList(this.searchForm);
        } else if (this.dimension == 4) {
          // 物料维度
          data = await getMaterialList(this.searchForm);
        } else {
          // 包装维度
          data = await getPackingList(this.searchForm);
        }
        data.list.map((el) => {
          el.modelType = el.categoryModel;
          el.name = el.categoryName;
          el.code = el.categoryCode;
        });
        return data;
      }
    }
  };
</script>

<style lang="scss" scoped>
  :deep(.success-row) {
    background: #f0f9eb;
  }
  .tree_col {
    border: 1px solid #eee;
    padding: 10px 0;
    box-sizing: border-box;
    height: 500px;
    overflow: auto;
  }

  .table_col {
    padding-left: 10px;

    ::v-deep .el-table th.el-table__cell {
      background: #f2f2f2;
    }
  }

  .pagination {
    text-align: right;
    padding: 10px 0;
  }

  .btns {
    text-align: center;
    padding: 10px 0;
  }

  .topsearch {
    margin-bottom: 15px;
  }
</style>