kd-aiot-frontend-eom/src/BIZComponents/selectStockLedger/selectStockLedgerDialog.vue

<template>
  <ele-modal
    title="库存台账"
    :visible.sync="visible"
    v-if="visible"
    :close-on-click-modal="false"
    :before-close="handleClose"
    :close-on-press-escape="false"
    destroy-on-close
    top="5vh"
    append-to-body
    width="70%"
    :maxable="true"
  >
    <el-card shadow="never">
      <item-search @search="reload" ref="refSeavch"></item-search>
      <ele-split-layout
        width="244px"
        allow-collapse
        :right-style="{ overflow: 'hidden' }"
      >
        <div class="ele-border-lighter split-layout-right-content">
          <el-tree
            :data="treeList"
            :props="defaultProps"
            ref="treeRef"
            :default-expanded-keys="
              curNodeData && curNodeData.id ? [curNodeData.id] : []
            "
            :highlight-current="true"
            node-key="id"
            :expand-on-click-node="false"
            @node-click="handleNodeClick"
            ><span class="custom-tree-node" slot-scope="{ node, data }">
              <span
                >{{ data.factoryName ? data.factoryName + '-' : ''
                }}{{ data.name }}</span
              >
            </span></el-tree
          >
        </div>
        <!-- 表格 -->
        <template v-slot:content>
          <ele-pro-table
            ref="table"
            :columns="columns"
            :datasource="datasource"
            row-key="_tableRowKey"
            height="calc(100vh - 480px)"
            class="dict-table"
            @cell-click="cellClick"
            :selection.sync="selection"
            :current.sync="currentRow"
            highlight-current-row
            :cache-key="cacheKeyUrl"
            @columns-change="handleColumnChange"
            @done="handleTableDone"
            :page-size="20"
            @header-dragend="handleHeaderDragend"
          >
            <template v-slot:toolbar>
              <el-button
                v-if="dimension == '2'"
                type="primary"
                size="small"
                @click="openUnlock"
                >库存解锁</el-button
              >
              <span
                v-if="dimension == '2' && unlockSourceLabel"
                class="unlock-tip"
                >{{ unlockSourceLabel }}</span
              >
            </template>
            <template v-slot:saleCount="{ row }">
              <el-input
                v-model="row.saleCount"
                style="width: 100%"
                placeholder="请输入"
                type="number"
                :min="0"
                @input="handleSaleCountInput(row)"
              ></el-input>
            </template>
            <template v-slot:action="{ row }">
              <el-radio class="radio" v-model="radio" :label="row.id"
                ><i></i
              ></el-radio>
            </template>
          </ele-pro-table>
        </template>
      </ele-split-layout>
    </el-card>

    <unlock-modal ref="unlockModalRef"></unlock-modal>

    <div slot="footer">
      <el-button v-if="!isView" type="primary" size="small" @click="selected"
        >选择</el-button
      >
      <el-button size="small" @click="handleClose">关闭</el-button>
    </div>
  </ele-modal>
</template>

<script>
  import {
    getOutindetailtwoList,
    getTreeByGroup,
    getBatchList,
    getCategoryPackageDisposition
  } from '@/api/wms';
  import ItemSearch from './item-search.vue';
  import UnlockModal from './unlockModal.vue';
  import { contactQueryByCategoryIdsAPI } from '@/api/saleManage/contact';
  import tabMixins from '@/mixins/tableColumnsMixin';

  export default {
    mixins: [tabMixins],
    components: { ItemSearch, UnlockModal },
    props: {
      /*已选择的产品*/
      data: {
        type: Array,
        default: () => []
      },
      /*是否需要供应商*/
      isSupplier: {
        type: Boolean,
        default: false
      },
      /*是否显示销售数量*/
      showSaleCount: {
        type: Boolean,
        default: false
      },
      // 是否按库存余额和锁库数量展示可用数量
      showStockCount: {
        type: Boolean,
        default: false
      },
      cacheKeyUrl: {
        type: String,
        default: 'eom-sales-selectStockLedgerDialog-202605131603'
      },
      isView: {
        type: Boolean,
        default: false
      }
    },

    data() {
      return {
        visible: false,
        currentIndex: null,
        radio: null,
        dictList: {},
        curNodeData: {},
        selection: [],
        // 表格当前高亮行（点击行即选中），用于库存解锁定位库存数据
        currentRow: null,
        treeData: [],
        dimension: '2',
        defaultProps: {
          children: 'children',
          label: 'name'
        },
        treeList: [],
        treeLoading: false,
        // cacheKeyUrl: '',
        columnsVersion: 1,
        tabMixinsInit: false,
        widthsVersion: 0
      };
    },
    watch: {},
    computed: {
      columns() {
        const version = this.columnsVersion;
        // 强制重新计算（打开弹窗时重新读取缓存宽度）
        this.widthsVersion;
        const cacheWidths = this.getStorage(this.cacheKeyUrl + 'Widths') || {};
        const applyWidth = (col) => {
          if (col.prop && cacheWidths[col.prop]) {
            return { ...col, width: cacheWidths[col.prop], minWidth: undefined };
          }
          return col;
        };

        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,
            selectable: (row) => {
              return this.getAvailableStockCount(row) != 0;
            }
          };
        }

        const tempData = [
          data,

          {
            columnKey: 'index',
            type: 'index',
            width: 50,
            align: 'center',
            showOverflowTooltip: true,
            label: '序号'
          },
          {
            prop: 'categoryCode',
            label: '编码',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'categoryName',
            label: '名称',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'saleCount',
            slot: 'saleCount',
            label: '订单数量',
            showOverflowTooltip: true,
            align: 'center',
            minWidth: 120,
            hide: !this.showSaleCount
          },
          {
            prop: 'brandNum',
            align: 'center',
            label: '牌号',
            showOverflowTooltip: true
          },
          this.dimension == '2'
            ? {
                prop: 'batchNo',
                label: '批次号',
                align: 'center',
                showOverflowTooltip: true
              }
            : {
                width: 1
              },
          this.dimension == '2'
            ? {
                prop: 'systemBatchNo',
                label: '系统内部批次号',
                align: 'center',
                minWidth: 180,
                showOverflowTooltip: true,
                formatter: (row) => row.systemBatchNo || '-'
              }
            : {
                width: 1
              },
          {
            prop: 'categoryModel',
            label: '型号',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'specification',
            label: '规格',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'colorKey',
            label: '颜色',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'modelKey',
            label: '机型',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'warehouseName',
            label: '仓库',
            showOverflowTooltip: true,
            align: 'center',
            minWidth: 90
          },
          {
            prop: 'inventoryCycle',
            label: '存货周期(天)',
            align: 'center',
            width: 150,
            sortable: true,
            showOverflowTooltip: true,
            hide: this.dimension == 1
          },
          {
            prop: 'measureQuantity',
            label: '库存',
            showOverflowTooltip: true,
            align: 'center',
            minWidth: 90,
            formatter: (row) => this.getStockCount(row)
          },
          {
            prop: 'lockQuantity',
            label: '锁库数量',
            showOverflowTooltip: true,
            align: 'center',
            minWidth: 90
          },
          {
            prop: 'useQuantity',
            label: '可用数量',
            showOverflowTooltip: true,
            align: 'center',
            minWidth: 90,
            formatter: (row) => {
              return this.getAvailableStockCount(row);
            }
          },
          {
            prop: 'measureUnit',
            label: '单位',
            showOverflowTooltip: true,
            align: 'center',
            minWidth: 90
          },
          {
            prop: 'weight',
            label: '重量',
            showOverflowTooltip: true,
            align: 'center',
            minWidth: 90
          },
          {
            prop: 'weightUnit',
            label: '重量单位',
            showOverflowTooltip: true,
            align: 'center',
            minWidth: 90
          },
          {
            prop: 'packingUnit',
            align: 'center',
            label: '包装单位',
            showOverflowTooltip: true
          },
          {
            prop: 'reelSpecification',
            label: '盘具',
            showOverflowTooltip: true,
            align: 'center'
          }
        ];
        // 应用 mixin 列配置与本地列宽缓存后返回
        return this.applyColumnWidth(tempData.filter((item) => !item.hide)).map(
          applyWidth
        );
      },
      // 库存解锁操作的来源行：优先取唯一勾选行，否则取当前点击高亮行
      unlockSourceRow() {
        if (this.selection.length === 1) {
          return this.selection[0];
        }
        return this.currentRow || null;
      },
      // 解锁按钮旁的选中数据提示，避免表格级操作定位不明
      unlockSourceLabel() {
        const row = this.unlockSourceRow;
        if (!row) {
          return '';
        }
        const code = row.categoryCode || '-';
        const batch = row.systemBatchNo || row.batchNo || '-';
        return `已选：${code} / ${batch} / 锁库 ${row.lockQuantity || 0}`;
      }
    },
    methods: {
      getDictV(code, val) {
        if (!this.dictList[code]) return '';
        return this.dictList[code].find((item) => item.value == val)?.label;
      },
      open(item, currentIndex) {
        console.log(item, currentIndex);
        this.widthsVersion++;
        this.currentIndex = currentIndex;
        this.visible = true;
        this.getTreeData();
      },
      async getTreeData() {
        try {
          this.treeLoading = true;
          let res = null;
          res = await getTreeByGroup({ type: 2 });
          this.treeLoading = false;
          if (res?.code === '0') {
            this.treeList = res.data;
            return this.treeList;
          }
        } catch (error) {
          console.log(error);
        }
        this.treeLoading = false;
      },

      /* 表格数据源 */
      async datasource({ page, limit, where, order }) {
        this.dimension = where.dimension || '2';
        let api = where.dimension == '1' ? getOutindetailtwoList : getBatchList;

        const data = await api({
          ...where,
          ...order,
          pageNum: page,
          size: limit
        });
        // 与 WMS 库存台账保持一致：库存取 stockCountBase，旧接口无该字段时回退 measureQuantity；
        // 可用数量按库存减锁库数量计算，并统一将负数归零。
        if (data && Array.isArray(data.list)) {
          data.list = data.list.map((item, index) => {
            const stockCountBase = Math.max(
              Number(
                item.stockCountBase !== undefined && item.stockCountBase !== null
                  ? item.stockCountBase
                  : item.measureQuantity
              ) || 0,
              0
            );
            const lockQuantity = Number(item.lockQuantity) || 0;
            const availableCountBase = Math.max(
              stockCountBase - lockQuantity,
              0
            );
            return {
              ...item,
              stockCountBase,
              availableCountBase,
              _tableRowKey: `${item.id || 'row'}_${page}_${index}`
            };
          });
        }
        // 库存接口在同一物品/批次存在多条台账时可能返回重复 id。
        // id 仍作为业务主键保留，表格使用仅用于渲染的唯一 key，避免 Vue patch 冲突。
        this.getTabColumns();
        return data;
      },

      /* 清空表格勾选与当前行：搜索、切换分页/排序、关闭弹窗时都必须重置 */
      clearTableSelection() {
        this.selection = [];
        this.currentRow = null;
        this.current = null;
        this.radio = '';
        if (this.$refs.table && this.$refs.table.clearSelection) {
          this.$refs.table.clearSelection();
        }
      },

      /* 刷新表格 */
      reload(where) {
        // 查询条件变化后原勾选行已不在结果集中，先清空避免带着旧数据继续操作
        this.clearTableSelection();
        this.$refs.table.reload({ pageNum: 1, where: where });
      },

      /* 分页、排序后清除当前行，避免解锁操作误用上一页数据，但保留跨页勾选 */
      handleTableDone() {
        this.currentRow = null;
        this.current = null;
        this.radio = '';
      },

      handleNodeClick(data, node) {
        this.curNodeData = data;
        if (data.id == this.currentId) {
          this.$refs.treeRef.setCurrentKey(null);
          this.reload();
        } else {
          this.reload({ categoryLevelId: data.id });
        }
      },
      async getSupplierObj(productList, queryName) {
        try {
          let categoryIds = productList
            .filter((item) => item.id)
            .map((item) => item.id);
          if (categoryIds.length > 0) {
            return await contactQueryByCategoryIdsAPI({
              categoryIds,
              isQueryEE: 1
            });
          } else {
            return Promise.resolve({});
          }
        } catch (e) {
          return Promise.resolve({});
        }
      },
      // 单击获取id
      cellClick(row) {
        if (this.currentIndex == -1) return;
        this.current = row;
        this.radio = row.id;
      },
      // 打开库存解锁申请弹窗（校验与数据规格化由子弹窗负责）
      openUnlock() {
        if (!this.unlockSourceRow) {
          return this.$message.warning('请先选择一条库存数据进行解锁');
        }
        this.$refs.unlockModalRef.open(this.unlockSourceRow);
      },
      // 列头拖拽结束 - 保存列宽到本地缓存
      handleHeaderDragend(newWidth, oldWidth, column) {
        if (!column.property) return;
        const widths = this.getStorage(this.cacheKeyUrl + 'Widths') || {};
        widths[column.property] = newWidth;
        this.setStorage(this.cacheKeyUrl + 'Widths', widths);
      },
      // 新接口返回 stockCountBase，旧接口使用 measureQuantity 表示当前库存
      getStockCount(row) {
        if (row.stockCountBase !== undefined && row.stockCountBase !== null) {
          return Number(row.stockCountBase);
        }
        return Number(row.measureQuantity || 0);
      },
      getAvailableStockCount(row) {
        if (row.availableCountBase !== undefined && row.availableCountBase !== null) {
          return Number(row.availableCountBase);
        }
        const available = this.getStockCount(row) - Number(row.lockQuantity || 0);
        return Math.max(Number(available.toFixed(4)), 0);
      },
      // 限制订单数量不超过当前可用数量
      handleSaleCountInput(row) {
        const available = this.getAvailableStockCount(row);
        const val = parseFloat(row.saleCount);
        if (!isNaN(val) && val > available) {
          this.$message.warning(`订单数量不能超过可用数量（${available}）`);
          this.$set(row, 'saleCount', available);
        }
      },
      handleClose() {
        this.clearTableSelection();
        this.visible = false;
      },

      isSameStockRecord(source, target) {
        if (source.batchStockId && target.id) {
          return source.batchStockId == target.id;
        }
        const sourceProductId = source.productId || source.categoryId;
        const targetProductId = target.categoryId || target.productId;
        const sourceProductCode =
          source.productCode || source.categoryCode || source.code;
        const targetProductCode =
          target.categoryCode || target.productCode || target.code;
        const sameProduct =
          sourceProductId && targetProductId
            ? sourceProductId == targetProductId
            : sourceProductCode == targetProductCode;
        const sameWarehouse =
          !source.warehouseId ||
          !target.warehouseId ||
          source.warehouseId == target.warehouseId;
        return (
          sameProduct &&
          sameWarehouse &&
          source.batchNo == target.batchNo &&
          (source.systemBatchNo || '') == (target.systemBatchNo || '')
        );
      },

      async selected() {
        if (!this.current && !this.selection.length) {
          return this.$message.warning('请至少选择一条数据');
        }
        if (this.currentIndex != -1) {
          if (
            this.data.some((item) => this.isSameStockRecord(item, this.current))
          ) {
            return this.$message.error('选择的库存记录已经存在列表了');
          }
        } else {
          if (
            this.selection.some((item) =>
              this.data.some((source) => this.isSameStockRecord(source, item))
            )
          ) {
            return this.$message.error('选择的库存记录已经存在列表了');
          }
        }
        let list = this.currentIndex == -1 ? this.selection : [this.current];
        //获取供应商
        if (this.isSupplier) {
          let supplierList = await this.getSupplierObj(list);
          list.forEach((item) => {
            item['entrustedEnterpriseIdList'] = supplierList[item.id];
            if (supplierList[item.id]?.length === 1) {
              item['entrustedEnterpriseId'] = supplierList[item.id][0].id;
            }
          });
        }
        let idList = list.map((item) => item.categoryId);

        // 获取包装规格（接口异常时置空，不阻断选择流程）
        let packingSpecification = [];
        try {
          packingSpecification = await getCategoryPackageDisposition({
            categoryIds: idList
          });
        } catch (e) {
          console.error('获取包装规格失败:', e);
        }

        list.forEach((item, index) => {
          item.productName = item.categoryName;
          item.productCode = item.categoryCode;
          item.productCategoryName = '';
          item.productBrand = item.brandNum;
          item.provenance = item.provenance || [];
          if (this.showSaleCount) {
            item.saleCount = item.saleCount;
          }
          item['packageDispositionList'] = (packingSpecification || [])
            .filter(
              (ite) => item.categoryId == ite.categoryId && ite.conversionUnit
            )
            .sort((a, b) => a.sort - b.sort);
          this.$set(list[index], 'totalCount', 1);
          // item.totalCount = 1;
          item.measuringUnit = item.measureUnit;
          //item.weightUnit = item.weightUnit;
          // item.warehouseNum = item.measureQuantity;
          item.productId = item.categoryId;
          item.batchStockId = item.id;
          item.id = '';
          item.batchNo = this.dimension != 1 ? item.batchNo : '';
          item.systemBatchNo =
            this.dimension != 1 ? item.systemBatchNo || '' : '';

          // item.specification = item.specification;
        });
        this.$emit('changeParent', list, this.currentIndex);
        this.handleClose();
      }
    }
  };
</script>

<style lang="scss" scoped>
  .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;
  }

  /* 库存解锁按钮旁展示当前选中的库存数据，避免表格级操作定位不明 */
  .unlock-tip {
    margin-left: 8px;
    font-size: 12px;
    color: #909399;
  }
</style>