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.engrave"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="发货码">
                <el-input type="text" placeholder="搜索发货码" v-model="searchForm.barcodes"></el-input>
              </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-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"
            :rowClickChecked="true"
            :cache-key="'product-list-cache-key'"
          >
            <!-- 表头工具栏 -->
            <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: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" @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';

  export default {
    mixins: [tabMixins],

    components: {
      productTree,
      searchProduct,
      cBomList
    },
    props: {
      /*是否需要获取仓库产品数量*/
      isGetInventoryTotal: {
        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'
      }
    },

    data() {
      return {
        visible: false,
        currentIndex: null,
        radio: null,
        cBomListDialogFlag: null,
        dictList: {},
        selection: [],
        isColorId: [],
        dataSources: '1', // 0：仓库；1：主数据
        dimension: '1',
        searchForm: {
          categoryCode: '',
          categoryName: '',
          batchNo: '',
          brandNum: '',
          engrave: '',
          barcodes: '',
          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
          };
        }

        return [
          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: '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: 'measureUnit',
            label: '计量单位',
            showOverflowTooltip: true,
            align: 'center',
            minWidth: 90
          },

          {
            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
          }
        ];
      }
    },
    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]]
          };
        });
      },
      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);
        }
        return getProductList({
          pageNum: page,
          size: limit,
          ...where
        });
      },
      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;
            }
          });
        }
        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 {
          let categoryIds = productList
            .filter((item) => item[queryName])
            .map((item) => item[queryName]);
          if (categoryIds.length > 0) {
            return await contactQueryByCategoryIdsAPI({
              categoryIds
            });
          } 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);

        //获取仓库库存
        if (this.isGetInventoryTotal) {
          let inventoryTotalList = await getInventoryTotalAPI(codeList);
          list.forEach((item) => {
            let find =
              inventoryTotalList.find((key) => key.code == item.code) || {};
            item.availableCountBase = find.availableCountBase;
          });
        }
        //获取供应商
        if (this.isSupplier) {
          let supplierList = await this.getSupplierObj(list, 'id');
          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;
            }
          });
        }
        // 获取包装规格
        let packingSpecification = await getCategoryPackageDisposition({
          categoryIds: idList
        });
        list.forEach((item) => {
          item['packageDispositionList'] = packingSpecification
            .filter((ite) => item.id == ite.categoryId && ite.conversionUnit)
            .sort((a, b) => a.sort - b.sort);
          if (item.level) {
            item['goodsLevel'] = levelList.find(
              (val) => val.label == item.level
            )?.value;
          }
        });

        this.$emit('changeParent', list, this.currentIndex);
        this.handleClose();
      },
      // 仓库查询
      doSearch() {
        // this.searchForm.pageNum = 1;
        this.reload({ pageNum: 1, where: this.searchForm });
      },

      // 仓库查询重置
      reset() {
        this.searchForm = {
          categoryCode: '',
          categoryName: '',
          batchNo: '',
          brandNum: '',
          engrave: '',
          barcodes: '',
          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>