kd-aiot-frontend-wms/src/views/warehouseManagement/components/AssetsDialog.vue

<template>
  <ele-modal
    :visible.sync="visible"
    title="物品信息"
    width="80vw"
    :maxable="true"
  >
    <el-form :model="searchForm" label-width="100px">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="列表维度:" prop="dimension">
            <template>
              <el-select
                style="width: 100%"
                @change="changeDimensionHandler"
                @keyup.enter.native="doSearch"
                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
              type="text"
              placeholder="搜索物品编码"
              v-model="searchForm.categoryCode"
              @keyup.enter.native="doSearch"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="物品名称:">
            <el-input
              type="text"
              placeholder="搜索物品名称"
              v-model="searchForm.categoryName"
              @keyup.enter.native="doSearch"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="批次号:">
            <el-input
              type="text"
              placeholder="搜索批次号"
              v-model="searchForm.batchNo"
              @keyup.enter.native="doSearch"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="刻码">
            <el-input
              type="text"
              placeholder="搜索物品刻码"
              v-model="searchForm.engrave"
              @keyup.enter.native="doSearch"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="物料代号">
            <el-input
              type="text"
              placeholder="搜索物料代号"
              v-model="searchForm.materielDesignation"
              @keyup.enter.native="doSearch"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="发货码">
            <el-input
              type="text"
              placeholder="搜索发货码"
              v-model="searchForm.barcodes"
              @keyup.enter.native="doSearch"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="牌号">
            <el-input
              type="text"
              placeholder="搜索牌号"
              v-model="searchForm.brandNum"
              @keyup.enter.native="doSearch"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="仓库">
            <el-select
              clearable
              style="width: 100%"
              v-model="searchForm.warehouseId"
              placeholder="请选择"
              @keyup.enter.native="doSearch"
            >
              <el-option
                v-for="item in warehouseList"
                :label="item.name"
                :value="item.id"
                :key="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="所属工厂" prop="factoryId">
            <el-select
              filterable
              placeholder="请选择"
              v-model="searchForm.factoryId"
              clearable
              class="w100"
              @keyup.enter.native="doSearch"
            >
              <el-option
                v-for="item in factoryList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="关键字">
            <el-input
              clearable
              type="text"
              placeholder="请输入"
              v-model="searchForm.keyWord"
              @keyup.enter.native="doSearch"
            ></el-input>
          </el-form-item>
        </el-col>

        <el-col>
          <div style="float: right">
            <el-button type="primary" @click="doSearch">搜索</el-button>
            <el-button icon="el-icon-refresh-left" @click="reset"
              >重置</el-button
            >
          </div>
        </el-col>
      </el-row>
    </el-form>
    <el-container class="assets-dialog">
      <el-aside width="200px" class="wrapper-assets">
        <AssetTree
          ref="treeList"
          :treeIds="treeIds"
          @handleNodeClick="handleNodeClick"
        />
      </el-aside>
      <el-main>
        <ele-pro-table
          row-key="id"
          :selection.sync="selectionList"
          ref="table"
          class="table"
          :columns="columns"
          :datasource="datasource"
          height="calc(100vh - 550px)"
          full-height="calc(100vh - 116px)"
          tool-class="ele-toolbar-form"
          :pageSize="20"
          @columns-change="handleColumnChange"
          :cache-key="cacheKeyUrl"
        >
          <template v-slot:outboundNum="{ row }">
            <el-input
              type="text"
              placeholder="请输入"
              v-model="row.outboundNum"
              @input="handleInput(row, $event)"
              :disabled="inputDisabled(row)"
            ></el-input>
          </template>
        </ele-pro-table>
      </el-main>
    </el-container>

    <div slot="footer">
      <el-button type="primary" @click="confirm">确定</el-button>
      <el-button @click="cancel">关闭</el-button>
    </div>
  </ele-modal>
</template>

<script>
  import warehouseDefinition from '@/api/warehouseManagement/warehouseDefinition';
  import storageApi from '@/api/warehouseManagement';
  import AssetTree from '../stockManagement/components/assetTree.vue';
  import { getWarehouseList } from '@/api/classifyManage/itemInformation';
  import { getDetailById, quantityDelivery } from '@/api/classifyManage';

  import tabMixins from '@/mixins/tableColumnsMixin';
  export default {
    mixins: [tabMixins],
    components: { AssetTree },
    props: {
      treeIds: { type: Array, default: () => [] }
    },
    data() {
      return {
        factoryList: [],
        newColumns: [], // 动态表头
        isShowTable: true,
        qualityResultOption: [
          {
            value: 0,
            label: '合格'
          },
          {
            value: 1,
            label: '不合格'
          }
        ],
        qualityStatusOption: [
          {
            value: 1,
            label: '已质检'
          },
          {
            value: 0,
            label: '未质检'
          }
        ],
        visible: false,
        tableData: [],
        total: 0,
        categoryLevelId: '',
        searchForm: {
          categoryCode: '',
          categoryName: '',
          batchNo: '',
          factoryId: '',
          brandNum: '',
          engrave: '',
          barcodes: '',
          categoryLevelId: '',
          warehouseId: '',
          pageNum: 1,
          size: 20
        },
        selectionList: [],
        materialType: '',
        warehouseList: [],
        dimension: '1',
        productLists: [],
        columnsVersion: 1,
        diffCacheKeyUrl: 'wms-warehouseManagement-components-AssetsDialog',
        cacheKeyUrl: 'wms-warehouseManagement-components-AssetsDialog1',
        selection: []
      };
    },
    created() {
      console.log('created');

      this.getFieldModel();
      this.getWarehouse();
      this.getFactoryList();
    },
    mounted() {
      // this.$nextTick(() => {
      //   this.$refs.table.reload();
      // });
    },
    computed: {
      inputDisabled() {
        let _this = this;
        return (row) => {
          // console.log(row);
          return (
            _this.productLists.some((it) => it.categoryId == row.categoryId) ||
            _this.dimension == '3'
          );
        };
      },
      columns() {
        const _this = this;
        const version = this.columnsVersion;

        let kk = [];
        let jj = [];

        if (this.dimension == 1) {
          kk = this.newColumns.map((item) => {
            return {
              label: item.label,
              align: item.align,
              prop: item.prop,
              showOverflowTooltip: item.showOverflowTooltip
            };
          });
        } else {
          kk = [
            {
              label: '批次号',
              prop: 'batchNo',
              showOverflowTooltip: true
            }
          ];
        }

        if (this.dimension == 3) {
          jj = [
            {
              label: '包装编码',
              prop: 'packageNo',
              align: 'center',
              showOverflowTooltip: true
            },
            {
              label: '包装数量',
              prop: 'packingQuantity',
              align: 'center',
              showOverflowTooltip: true
            },
            {
              label: '包装单位',
              prop: 'packingUnit',
              align: 'center',
              showOverflowTooltip: true
            },
            {
              label: '发货条码',
              prop: 'barcodes',
              align: 'center',
              showOverflowTooltip: true
            },
            {
              label: '物料代号',
              prop: 'materielDesignation',
              align: 'center',
              showOverflowTooltip: true
            },
            {
              label: '客户代号',
              prop: 'clientCode',
              align: 'center',
              showOverflowTooltip: true
            },
            {
              label: '刻码',
              prop: 'engrave',
              align: 'center',
              showOverflowTooltip: true
            },
            {
              label: '仓库',
              prop: 'warehouseName',
              align: 'center',
              showOverflowTooltip: true
            }
          ];
        }

        let arr = [
          this.dimension == 1
            ? {
                width: 55,
                type: 'selection',
                columnKey: 'selection',
                fixed: 'left',
                align: 'center',
                reserveSelection: true,
                selectable: (row) => {
                  return !_this.productLists.some(
                    (it) => it.categoryId == row.categoryId
                  );
                }
              }
            : {
                width: 55,
                type: 'selection',
                columnKey: 'selection',
                fixed: 'left',
                align: 'center',
                reserveSelection: true,
                selectable: (row) => {
                  return !_this.productLists.some(
                    (it) => it.categoryId == row.categoryId
                  );
                }
              },
          {
            columnKey: 'index',
            type: 'index',
            width: 50,
            align: 'center',
            label: '序号',
            showOverflowTooltip: true,
            fixed: 'left'
          },
          {
            fixed: 'left',
            prop: 'categoryCode',
            label: '物品编码',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            fixed: 'left',
            prop: 'categoryName',
            label: '物品名称',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'outboundNum',
            label: '出库数量',
            align: 'center',
            minWidth: '100',
            showOverflowTooltip: true,
            slot: 'outboundNum'
          },
          {
            prop: 'brandNum',
            label: '牌号',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'categoryModel',
            label: '型号',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'specification',
            label: '规格',
            align: 'center',
            showOverflowTooltip: true
          },
          ...kk,
          {
            prop: 'level',
            label: '级别',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'measureQuantity',
            label: '计量数量',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'measureUnit',
            label: '计量单位',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'weight',
            label: '重量',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'weightUnit',
            label: '重量单位',
            align: 'center',
            showOverflowTooltip: true
          },
          ...jj,
          {
            prop: 'supplierName',
            label: '供应商',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'supplierCode',
            label: '供应商代号',
            align: 'center',
            showOverflowTooltip: true
          }
        ];
        return arr;
      }
    },

    watch: {},
    methods: {
      //获取工厂列表
      async getFactoryList() {
        const res = await warehouseDefinition.getFactoryarea({
          pageNum: 1,
          size: 9999,
          type: 1
        });
        this.factoryList = res.list;
      },

      async getWarehouse() {
        const { data } = await getWarehouseList();
        this.warehouseList = data;
      },

      // 获取动态表头
      getFieldModel() {
        storageApi.fieldModel({ fieldModel: 't_main_category' }).then((res) => {
          let newRes = res.map((m) => {
            return {
              prop: 'extField.' + m.prop,
              label: m.label,
              align: 'center',
              showOverflowTooltip: true
            };
          });
          this.newColumns = [...newRes];
        });
      },

      // 出库数量限制
      handleInput(row, value) {
        if (row.outboundNum <= row.measureQuantity) {
          // return (row.outboundNum = value.replace(/^(0+)|[^\d]+/g, ''));

          // 过滤掉非数字和小数点的字符
          const filteredValue = value.replace(/[^0-9.]/g, '');
          // 限制只能有一个小数点
          const singleDotValue = filteredValue.replace(/(\..*)\./g, '$1');

          let finalValue = '';
          const dotIndex = singleDotValue.indexOf('.');
          if (dotIndex !== -1) {
            // 截取小数点后最多两位
            finalValue = singleDotValue.slice(0, dotIndex + 3);
          } else {
            finalValue = singleDotValue;
          }
          return (row.outboundNum = finalValue);
        } else {
          row.outboundNum = row.measureQuantity;
        }
      },

      // 切换维度
      changeDimensionHandler(e) {
        this.searchForm.pageNum = 1;

        this.selectionList = [];
        this.cacheKeyUrl = this.diffCacheKeyUrl + e;
        this.getTabColumns();
        this.reload();
      },
      async changeDimension(e) {
        this.dimension = e;
        if (this.dimension == 1) {
          // 物品维度
          const data = await storageApi.getProductList(this.searchForm);
          this.tableData = data.list;
          this.total = data.count;
        } else if (this.dimension == 2) {
          // 批次维度
          const data = await storageApi.getBatchList(this.searchForm);
          for (let i = 0; i < data.list.length; i++) {
            data.list[i].outboundNum = data.list[i].measureQuantity;
          }
          this.tableData = data.list;
          this.total = data.count;
        } else if (this.dimension == 4) {
          // 物料维度
          const data = await storageApi.getMaterialList(this.searchForm);
          this.tableData = data.list;
          this.total = data.count;
        } else {
          // 包装维度
          const data = await storageApi.getPackingList(this.searchForm);
          for (let i = 0; i < data.list.length; i++) {
            data.list[i].outboundNum = data.list[i].packingQuantity;
          }
          this.tableData = data.list;
          this.total = data.count;
        }
        console.log(this.tableData);
        this.updateProductOutboundNums(this.tableData);
      },
      updateProductOutboundNums(list) {
        console.log(this.productLists, 'this.productLists');
        console.log(this.dimension);

        // 物品时有bug，可能有多条，不用find，用filter
        if (this.dimension == 1) {
          //物品层
          for (let i = 0; i < list.length; i++) {
            const item = list[i];
            const matchedProduct = this.productLists.filter(
              (product) => product.categoryId === item.categoryId
            );
            let num = matchedProduct.reduce(
              (pre, cur) => pre + cur.measureQuantity,
              0
            );
            // console.log(matchedProduct);

            if (matchedProduct.length) {
              this.$set(item, 'outboundNum', num);
            }
            const isSelection = this.selectionList.find(
              (product) => product.categoryId === item.categoryId
            );
            if (isSelection) {
              this.$set(item, 'outboundNum', isSelection.outboundNum);
            }
          }
        } else {
          for (let i = 0; i < list.length; i++) {
            const item = list[i];
            const matchedProduct = this.productLists.find(
              (product) => product.id === item.id
            );

            if (matchedProduct) {
              this.$set(item, 'outboundNum', matchedProduct.measureQuantity);
            }
            const isSelection = this.selectionList.find(
              (product) => product.id === item.id
            );
            if (isSelection) {
              this.$set(item, 'outboundNum', isSelection.outboundNum);
            }
          }
        }
      },
      open(val) {
        let that = this;
        this.productLists = val || [];
        this.visible = true;
        this.$nextTick(() => {
          this.$refs.treeList.getTreeData().then((data) => {
            // that.$nextTick(() => {
            //   that.categoryLevelId = data.id;
            //   that.searchForm.categoryLevelId = data.id;
            //   that.doSearch();
            // });

            this.handleNodeClick(data);
          });
        });
      },
      async confirm() {
        console.log(this.selectionList);

        if (!this.selectionList.length) {
          this.$message.error('请至少选择一条数据！');
          return;
        }
        if (this.dimension == 1) {
          let boolen = this.selectionList.every((item) => item.outboundNum > 0);
          if (!boolen) {
            this.$message.error('请输入出库数量！');
            return;
          }
        }
        console.log(this.selectionList);
        let data = null;
        if (this.dimension == 3) {
          data = await storageApi.getHierarchyList({
            ids: this.selectionList.map((item) => item.id).join(','),
            type: this.dimension
          });
        } else if (this.dimension == 2) {
          data = await storageApi.getHierarchyFifo({
            type: this.dimension,
            ids: this.selectionList.map((item) => item.id),
            builders: this.selectionList.map((item) => {
              return {
                categoryId: item.categoryId,
                num: item.outboundNum,
                id: item.id
              };
            })
          });
        } else if (this.dimension == 1) {
          data = await storageApi.getHierarchyFifo({
            type: this.dimension,
            builders: this.selectionList.map((item) => {
              return {
                categoryId: item.categoryId,
                num: item.outboundNum
              };
            })
          });
        }
        console.log('data-------------------', data);
        this.$emit('detailData', data, this.dimension);
        this.cancel();
      },
      cancel() {
        this.selectionList = [];
        // this.$refs.multipleTable.clearSelection();
        this.visible = false;
      },
      handleSelectionChange(val) {
        this.selectionList = val;
      },
      handleNodeClick(data) {
        // console.log(data);
        this.categoryLevelId = data.id;
        this.searchForm.categoryLevelId = data.id;
        this.doSearch();
      },
      handleCurrentChange() {
        this.changeDimension(this.dimension);
      },
      reset() {
        this.searchForm = {
          categoryCode: '',
          categoryName: '',
          batchNo: '',
          brandNum: '',
          engrave: '',
          barcodes: '',
          warehouseId: '',
          factoryId: '',
          categoryLevelId: this.categoryLevelId,
          pageNum: 1,
          size: 20
        };
        this.doSearch();
      },
      doSearch() {
        this.searchForm.pageNum = 1;
        this.$refs.table.reload();
        this.$refs.table.reRenderTable();
      },
      handleSizeChange() {
        this.searchForm.pageNum = 1;
        this.changeDimension(this.dimension, 'page');
      },
      // 翻页时，输入的数量会重置
      updateSelect(data) {
        if (!this.selectionList.length) {
          return data;
        }
        let ids = this.selectionList.map((item) => item.id);
        data.list.forEach((item) => {
          let id = ids.find((id) => item.id === id);
          if (id) {
            item.outboundNum = this.selectionList.find(
              (item) => item.id === id
            ).outboundNum;
          }
        });
        return data;
      },

      async datasource({ page, limit, where, order }) {
        const dimension = this.dimension;
        let data;
        // console.log(this.searchForm);
        // console.log(dimension);

        if (dimension == 1) {
          data = await storageApi.getProductList({
            ...where,
            ...order,
            ...this.searchForm,
            pageNum: page,
            size: limit
          });

          // console.log(data);
          // let result = this.updateSelect(data);
          // return result;
          this.updateProductOutboundNums(data.list);
          return data;
        }

        if (dimension == 2) {
          data = await storageApi.getBatchList({
            ...where,
            ...order,
            ...this.searchForm,
            pageNum: page,
            size: limit
          });
          data.list.forEach((item) => {
            item.outboundNum = item.measureQuantity;
          });
          return data;
        }

        if (dimension == 3) {
          data = await storageApi.getPackingList({
            ...where,
            ...order,
            ...this.searchForm,
            pageNum: page,
            size: limit
          });
          data.list.forEach((item) => {
            item.outboundNum = item.packingQuantity;
          });
          this.updateProductOutboundNums(data.list);
          return data;
        }
      },
      reload(where) {
        this.$refs.table.reload({
          pageNum: 1
        });
      }
    }
  };
</script>

<style lang="scss" scoped>
  .el-dialog__wrapper {
    ::v-deep .el-aside {
      background-color: #fff !important;
      border: 1px solid #ccc;
    }
  }

  .wrapper-assets {
    max-height: 53vh;
    overflow: auto;
  }
</style>