kd-aiot-frontend-qms/src/views/inspectionPlan/components/stokledger.vue

<template>
  <ele-modal :visible.sync="visible" title="物品信息" width="80%" :close-on-click-modal="true"
    :close-on-press-escape="false"  :maxable="true"
    append-to-body>
    <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" 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"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="物品名称:">
            <el-input type="text" placeholder="搜索物品名称" v-model="searchForm.categoryName"></el-input>
          </el-form-item>
        </el-col>
        <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.materielDesignation"></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-col :span="6">
          <el-form-item label="仓库">
            <el-select clearable style="width: 100%" v-model="searchForm.warehouseId" placeholder="请选择">
              <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">
              <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>
          <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>
        <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" height="50vh" border row-key="id"
          style="width: 100%" :header-cell-style="{ background: '#F0F3F3', border: 'none' }"
          @selection-change="handleSelectionChange" :header-cell-class-name="hideHeaderCheckbox">
          <el-table-column  type="selection":reserve-selection="true" width="55" align="center"
            fixed="left" :selectable="(row) => dimension != 3 ?  true : checkSelectable(row)">
          </el-table-column>
          <el-table-column label="序号" type="index" width="50" fixed="left">
          </el-table-column>
          <el-table-column v-if="dimension != 4" label="抽取数量" type="index" width="100">
            <template slot-scope="{ row }">
              <el-input type="text" placeholder="请输入" v-model="row.outboundNum" @input="handleInput(row, $event)"
                :disabled="dimension == '3'"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="categoryCode" label="物品编码" min-width="120" fixed="left"
            :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="categoryName" width="200" label="物品名称" fixed="left"
            :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="brandNum" label="牌号" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="categoryModel" label="型号" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="specification" label="规格" :show-overflow-tooltip="true"></el-table-column>
          <template v-if="dimension == 1">
            <el-table-column v-for="(item, index) in newColumns" :label="item.label" :align="item.align"
              :prop="item.prop" :show-overflow-tooltip="item.showOverflowTooltip"></el-table-column>
          </template>
          <el-table-column v-else prop="batchNo" label="批次号" key="batchNo" min-width="80"></el-table-column>
          <el-table-column prop="level" label="级别"></el-table-column>
          <el-table-column prop="measureQuantity" label="计量数量" width="120"></el-table-column>
          <el-table-column prop="measureUnit" label="计量单位" width="90"></el-table-column>
          <el-table-column prop="weight" label="重量" min-width="120"></el-table-column>
          <el-table-column prop="weightUnit" label="重量单位" min-width="120"></el-table-column>
          <el-table-column v-if="dimension == 3" prop="packageNo" label="包装编码" min-width="120"
            :show-overflow-tooltip="true"></el-table-column>
          <el-table-column v-if="dimension == 3" prop="packingQuantity" label="包装数量" min-width="120"
            :show-overflow-tooltip="true"></el-table-column>
          <el-table-column v-if="dimension == 3" prop="packingUnit" label="包装单位" min-width="120"
            :show-overflow-tooltip="true"></el-table-column>
          <el-table-column v-if="dimension == 3 || dimension == 4" label="发货条码" prop="barcodes" width="80"
            :show-overflow-tooltip="true"></el-table-column>
          <el-table-column v-if="dimension == 4" prop="no" label="物料编码" min-width="120"
            :show-overflow-tooltip="true"></el-table-column>
          <el-table-column v-if="dimension == 3 || dimension == 4" prop="materielDesignation" label="物料代号"
            min-width="100"></el-table-column>
          <el-table-column v-if="dimension == 3 || dimension == 4" prop="clientCode" label="客户代号"
            min-width="100"></el-table-column>
          <el-table-column v-if="dimension == 3 || dimension == 4" prop="engrave" label="刻码"
            min-width="120"></el-table-column>
          <el-table-column v-if="dimension == 3 || dimension == 4" prop="warehouseName" label="仓库" min-width="200"
            :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="supplierName" label="供应商" min-width="200"
            :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="supplierCode" label="供应商代号" min-width="200"
            :show-overflow-tooltip="true"></el-table-column>
        </el-table>
        <div style="text-align: right; padding: 10px">
          <el-pagination background layout="total, sizes, prev, pager, next, jumper" :total="total"
            :page-sizes="[5, 10, 20, 50]" :page-size.sync="searchForm.size" :current-page.sync="searchForm.pageNum"
            @current-change="handleCurrentChange" @size-change="handleSizeChange">
          </el-pagination>
        </div>
      </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 './assetTree.vue';
import { getWarehouseList } from '@/api/classifyManage/itemInformation';
export default {
  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: []
    };
  },
  created() {
    this.getFieldModel();
    this.getWarehouse();
    this.getFactoryList();
  },
  watch: {
    tableData(val) {
      this.doLayout();
    }
  },
  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;
    },
    doLayout() {
      let that = this;
      this.$nextTick(() => {
        that.$refs.multipleTable.doLayout();
      });
    },
    // 获取动态表头
    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];
      });
    },
    getRowKeys(row) {
      return row.id;
    },
    // 出库数量限制
    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.$refs.multipleTable.clearSelection();
      this.changeDimension(e);
    },
    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')

      if (this.dimension == 1) {
        //物品层
        for (let i = 0; i < list.length; i++) {
          const item = list[i];
          const matchedProduct = this.productLists.find(product => {
            const isMatch = product.categoryId === item.categoryId;
            return isMatch;
          });

          if (matchedProduct) {
            this.$set(item, 'outboundNum', matchedProduct.measureQuantity);
          } else {
            console.warn('No match for item.id:', item.id);
          }
        }

      } else {
        for (let i = 0; i < list.length; i++) {
          const item = list[i];
          const matchedProduct = this.productLists.find(product => {
            const isMatch = product.id === item.id;
            return isMatch;
          });

          if (matchedProduct) {
            this.$set(item, 'outboundNum', matchedProduct.measureQuantity);
          } else {
            console.warn('No match for item.id:', item.id);
          }
        }
      }

    },
    open(val) {
      this.productLists = val || [];
      this.visible = true;
      this.$nextTick(() => {
        this.$refs.treeList.getTreeData().then((data) => {
          this.handleNodeClick(data);
        });
      });
    },
    async confirm() {
      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;
        }
      }
      
      this.$emit('choose', this.selectionList, this.dimension);
      this.cancel();
    },
    cancel() {
      this.selectionList = [];
      this.$refs.multipleTable.clearSelection();
      this.visible = false;
    },
    handleSelectionChange(selection) {
      if (this.dimension != 3 && selection.length > 1) {
        // 单选模式下，如果选了多个，只保留最后一个
        const lastSelected = selection[selection.length - 1];
        this.$refs.multipleTable.clearSelection(); // 清空所有选中
        this.$nextTick(() => {
          this.$refs.multipleTable.toggleRowSelection(lastSelected, true); // 重新选中最后一个
        });
        this.selectionList = [lastSelected];
      } else {
        this.selectionList = selection;
      }
    },
    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.changeDimension(this.dimension);
    },
    handleSizeChange() {
      this.searchForm.pageNum = 1;
      this.changeDimension(this.dimension, 'page');
    },

    checkSelectable(row, index) {
        if (this.selectionList.length < 1) return true
        let code = this.selectionList[0].categoryCode
        return row.categoryCode === code
    },

    hideHeaderCheckbox({ column }) {
      if (column.type === "selection") {
        return "hide-header-checkbox";
      }
      return "";
    },
  }
};
</script>

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

.wrapper-assets {
  max-height: 53vh;
  overflow: auto;
}

/* 隐藏表头的全选复选框 */
.hide-header-checkbox .el-checkbox {
  display: none !important;
}
</style>