代码优化

647556386

2026-01-27 1378fc4cd7abc24ed3a982e09437c2c8a74e9f2f

 ÏîÄ¿´úÂë/WIDESEA_WMSClient/src/extension/outbound/extend/StockSelect.vue

@@ -1,9 +1,10 @@
<template>
  <div>
    <!-- åº“存指定弹窗 -->
    <vol-box
      v-model="showDetialBox"
      :lazy="true"
      width="60%"
      width="80%"
      :padding="15"
      title="指定库存"
    >
@@ -11,13 +12,19 @@
        <el-alert :closable="false" style="width: 100%">
          <el-row>
            <el-col :span="16">
              <span class="less-style">单据编号：{{ mainOrderNo }}</span>
              <el-divider direction="vertical"></el-divider>
              <span class="less-style">物料名称： {{ row.materielName }} </span>
              <el-divider direction="vertical"></el-divider>
              <span class="less-style">物料编号： {{ row.materielCode }} </span>
              <el-divider direction="vertical"></el-divider>
              <span class="less-style">需求数量： {{ row.qty }} </span>
              <span class="less-style"
                >需求数量： {{ row.orderQuantity }}
              </span>
              <el-divider direction="vertical"></el-divider>
              <span :class="selectionClass">已选数量： {{ selectionSum }} </span>
              <span :class="selectionClass"
                >已选数量： {{ selectionSum }}
              </span>
            </el-col>
            <el-col :span="8">
              <el-link
@@ -27,64 +34,10 @@
                @click="getData"
                >刷新</el-link
              >
              <el-link
                type="primary"
                size="small"
                style="float: right; height: 20px; margin-right: 10px"
                @click="openOutboundDialog"
                >直接出库</el-link
              >
            </el-col>
          </el-row>
        </el-alert>
      </div>

      <!-- æ–°å¢žç­›é€‰åŒºåŸŸ -->
      <div class="filter-area" style="margin: 10px 0; padding: 10px; background: #f8f9fa; border-radius: 4px;">
        <el-form :model="filterForm" inline @submit.prevent>
          <el-form-item label="物料编号：">
            <el-input
              v-model="filterForm.materielCode"
              placeholder="模糊筛选物料编号"
              clearable
              style="width: 180px"
              @input="filterTable"
            ></el-input>
          </el-form-item>
          <el-form-item label="物料条码：">
            <el-input
              v-model="filterForm.barcode"
              placeholder="模糊筛选物料条码"
              clearable
              style="width: 180px"
              @input="filterTable"
            ></el-input>
          </el-form-item>
          <el-form-item label="托盘编号：">
            <el-input
              v-model="filterForm.palletCode"
              placeholder="模糊筛选托盘编号"
              clearable
              style="width: 180px"
              @input="filterTable"
            ></el-input>
          </el-form-item>
          <el-form-item label="货位编号：">
            <el-input
              v-model="filterForm.locationCode"
              placeholder="模糊筛选货位编号"
              clearable
              style="width: 180px"
              @input="filterTable"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="filterTable">搜索</el-button>
            <el-button @click="resetFilter">重置</el-button>
          </el-form-item>
        </el-form>
      </div>

      <div class="box-table" style="margin-top: 1%">
        <el-table
          ref="singleTable"
@@ -111,61 +64,84 @@
            :width="item.width"
            align="center"
          >
            <template #default="scoped" v-if="item.type == 'icon'">
              <el-tooltip
                class="item"
                effect="dark"
                :content="item.title"
                placement="bottom"
                ><el-button
                  type="text"
                  @click="tableButtonClick(scoped.row, item)"
                  ><i :class="item.icon" style="font-size: 22px"></i></el-button
              ></el-tooltip>
            <template #default="scoped">
              <div v-if="item.type == 'icon'">
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="item.title"
                  placement="bottom"
                  ><el-button
                    type="text"
                    @click="tableButtonClick(scoped.row, item)"
                    ><i :class="item.icon" style="font-size: 22px"></i></el-button
                ></el-tooltip>
              </div>
              <div v-else-if="item.type == 'tag'">
                <el-tag size="small">
                  {{ getDictionary(scoped.row, item) }}
                </el-tag>
              </div>
              <div v-else>
                {{ scoped.row[item.prop] }}
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <template #footer>
        <!-- åŽ»æŽ‰é”å®šåº“存按钮，只保留关闭按钮 -->
        <el-button type="primary" size="small" @click="openStationDialog"
          >直接出库</el-button
        >
        <el-button type="danger" size="small" @click="showDetialBox = false"
          >关闭</el-button
        >
      </template>
    </vol-box>

    <!-- å‡ºåº“站台选择弹窗（静态模板实现） -->
    <!-- ç«™å°é€‰æ‹©å¼¹çª— -->
    <el-dialog
      v-model="showOutboundDialog"
      title="出库操作 - é€‰æ‹©å‡ºåº“站台"
      v-model="showStationDialog"
      title="选择出库站台"
      width="500px"
      :append-to-body="true"
      :close-on-click-modal="false"
    >
      <el-form
        :model="outboundForm"
        :rules="outboundRules"
        ref="outboundFormRef"
        label-width="100px"
        style="padding: 0 20px"
      >
        <el-form-item label="出库站台" prop="selectedPlatform" style="margin-bottom: 24px">
          <el-select
            v-model="outboundForm.selectedPlatform"
            placeholder="请选择出库站台（3-12）"
            style="width: 100%; height: 40px"
          >
            <el-option
              v-for="platform in platformOptions"
              :key="platform.value"
              :label="platform.label"
              :value="platform.value"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div class="station-dialog-content">
        <el-form :model="stationForm" label-width="100px">
          <el-form-item label="选择站台：" required>
            <el-select
              v-model="stationForm.selectedPlatform"
              placeholder="请选择出库站台"
              style="width: 100%"
            >
              <el-option
                v-for="item in stations"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="出库数量：">
            <el-input
              v-model="selectionSum"
              readonly
              style="width: 100%"
            ></el-input>
          </el-form-item>
          <el-form-item label="物料信息：">
            <div style="font-size: 12px; color: #666; line-height: 1.5">
              <div>物料编号：{{ row.materielCode }}</div>
              <div>物料名称：{{ row.materielName }}</div>
            </div>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <el-button @click="showOutboundDialog = false" style="margin-right: 8px">取消</el-button>
        <el-button type="primary" @click="confirmOutbound">确定出库</el-button>
        <span class="dialog-footer">
          <el-button @click="showStationDialog = false">取消</el-button>
          <el-button type="primary" @click="confirmOutbound">确认出库</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
@@ -173,284 +149,283 @@

<script>
import VolBox from "@/components/basic/VolBox.vue";
import { ElMessage } from "element-plus";
// å¼•å…¥ç«™å°ç®¡ç†å·¥å…·
import { stationManager } from "@/../src/uitils/stationManager";

export default {
  components: { VolBox },
  data() {
    return {
      row: null, // æŽ¥æ”¶çˆ¶ç»„件传递的完整数据（包含明细ID集合）
      row: null,
      kcname: "",
      mainOrderNo: "",
      pkcx: false,
      showDetialBox: false,
      showStationDialog: false, // ç«™å°é€‰æ‹©å¼¹çª—显示控制
      tableData: [],
      originalTableData: [], // å­˜å‚¨åŽŸå§‹æ•°æ®ï¼Œç”¨äºŽç­›é€‰
      dictionaryList: null, // æ–°å¢žï¼šå­—典数据
      tableColumns: [
        { prop: "materielCode", title: "物料编号", type: "string", width: 150 },
        { prop: "barcode", title: "物料条码", type: "string", width: 150 },
        { prop: "palletCode", title: "托盘编号", type: "string", width: 150 },
        { prop: "locationCode", title: "货位编号", type: "string", width: 180 },
        { prop: "useableQuantity", title: "可用数量", type: "string" },
        {
          prop: "materielCode",
          title: "物料编号",
          type: "string",
          width: 150,
        },
        {
          prop: "materielName",
          title: "物料名称",
          type: "string",
          width: 150,
        },
        {
          prop: "palletCode",
          title: "托盘编号",
          type: "string",
          width: 150,
        },
        {
          prop: "barcode",
          title: "条码",
          type: "string",
          width: 150,
        },
        {
          prop: "locationCode",
          title: "货位编号",
          type: "string",
          width: 180,
        },
        {
          prop: "useableQuantity",
          title: "可用数量",
          type: "string",
        },
        {
          prop: "supplyCode",
          title: "供应商",
          type: "string",
        },
        {
          prop: "batchNo",
          title: "批次号",
          type: "string",
        },
        {
          prop: "stockStatus",
          title: "库存明细状态",
          type: "tag",
          width: 90,
          bindKey: "stockStatusEmun",
        },
        {
          prop: "stockId",
          title: "库存主键",
          type: "string",
        },
        {
          prop: "orderDetailId",
          title: "单据明细主键",
          type: "string",
        },
      ],
      selection: [], // é€‰ä¸­çš„库存数据
      selectionSum: 0, // å·²é€‰æ•°é‡æ€»å’Œ
      selection: [],
      selectionSum: 0,
      selectionClass: "less-style",
      originalQuantity: 0,

      // ç­›é€‰è¡¨å•æ•°æ®
      filterForm: {
        materielCode: "",
        barcode: "",
        palletCode: "",
        locationCode: ""
      },

      // å‡ºåº“弹窗相关数据
      showOutboundDialog: false,
      outboundForm: { selectedPlatform: "" }, // è¡¨å•ç»‘定数据
      outboundRules: {
        selectedPlatform: [
          { required: true, message: "请选择出库站台", trigger: "change" },
        ],
      },
      platformOptions: [
      
      // ç«™å°ç›¸å…³æ•°æ®
      stations: [
        { label: "站台2", value: "2-1" },
        { label: "站台3", value: "3-1" },
      ],
      pkcx: false, // æ–°å¢žï¼šé»˜è®¤false（如果需要可从父组件传递）
      stationForm: {
        selectedPlatform: "", // ä¿®æ”¹å­—段名以匹配参数
      },
    };
  },
  methods: {
    // æŽ¥æ”¶çˆ¶ç»„件传递的数据（包含明细ID集合和物料信息）
    open(data) {
      this.row = data; // data结构：{materielCode, materielName, qty, orderNo, detailIds, mainOrderId, groupRow}
    open(row, orderNo) {
      this.row = row;
      this.mainOrderNo = orderNo;
      this.showDetialBox = true;
      this.getData(); // åŠ è½½åº“存数据
      this.updateSelectionClass(); // åˆå§‹åŒ–已选数量样式
      console.log("接收的分组明细ID集合：", this.row.detailIds);
      console.log("查询库存的物料编码：", this.row.materielCode);
    },
      this.originalQuantity = this.row.lockQuantity;
      this.selectionSum = this.row.lockQuantity;
      
      // åŠ è½½å­—典数据
      this.getDictionaryData();
      this.getData();

    // æ‰“开出库弹窗
    openOutboundDialog() {
      if (this.selection.length === 0) {
        return ElMessage.error("请选择库存数据");
      }
      // æ ¡éªŒæ˜Žç»†ID集合
      if (!this.row?.detailIds || this.row.detailIds.length === 0) {
        return ElMessage.error("没有获取到单据明细ID，无法出库");
      }
      // é‡ç½®è¡¨å•é¿å…æ®‹ç•™å€¼
      this.outboundForm.selectedPlatform = "";
      this.showOutboundDialog = true;
    },

    // æ ¸å¿ƒä¿®æ”¹ï¼šURL拼接传递int[] orderDetailId（重复参数名）和station，请求体传库存数据
    confirmOutbound() {
      this.$refs.outboundFormRef.validate((valid) => {
        if (!valid) return;

        // æ ¡éªŒé€‰ä¸­åº“存和明细ID
        if (this.selection.length <= 0) {
          return this.$message.error("请勾选库存数据");
        }
        if (!this.row?.detailIds || this.row.detailIds.length === 0) {
          return this.$message.error("没有获取到单据明细ID，无法出库");
        }

        try {
          // 1. è½¬æ¢ID为整数数组（确保后端能识别为int[]）
          const orderDetailId = this.row.detailIds.map(id => {
            const num = Number(id);
            if (isNaN(num) || !Number.isInteger(num)) {
              throw new Error(`ID ${id} ä¸æ˜¯æœ‰æ•ˆçš„æ•´æ•°`);
            }
            return num;
          });

          // 2. æ‹¼æŽ¥URL：int[] ç”¨é‡å¤å‚数名格式（?orderDetailId=1&orderDetailId=2&...）
          let url = "api/Task/GenerateOutboundTask";
          // æ‹¼æŽ¥ID数组参数
          const idParams = orderDetailId.map(id => `orderDetailId=${id}`).join("&");
          // æ‹¼æŽ¥ç«™å°å‚æ•°
          const stationParam = `station=${encodeURIComponent(this.outboundForm.selectedPlatform)}`;
          // å®Œæ•´URL（处理参数拼接逻辑）
          const fullUrl = idParams 
            ? `${url}?${idParams}&${stationParam}` 
            : `${url}?${stationParam}`;

          console.log("出库请求URL：", fullUrl);

          // 3. å‘送请求：URL拼接ID和站台，请求体传库存数据（适配FromBody）
          this.http
            .post(fullUrl, this.selection, "数据处理中")
            .then((x) => {
              if (!x.status) return this.$message.error(x.message);
              this.$message.success("操作成功");
              this.showDetialBox = false;
              this.$emit("parentCall", ($vue) => {
                $vue.getData(); // åˆ·æ–°çˆ¶ç»„件数据
              });
            })
            .catch((err) => {
              console.error("出库失败：", err);
              this.$message.error(`出库失败：${err.message || '请稍后重试'}`);
            });
        } catch (err) {
          this.$message.error(err.message);
        }
      });
    },

    // æŒ‰ç¬¬ä¸€ä¸ªç‰©æ–™ç¼–码查询库存数据
    getData() {
      const url = "api/StockInfo/GetSelectViewDTOs?materielCode=";
      // ä½¿ç”¨çˆ¶ç»„件传递的物料编码（第一个明细的编码）
      this.http
        .post(
          url + this.row.materielCode + "&orderNo=" + (this.row.upperOrderNo || this.row.orderNo),
          null,
          "查询中"
        )
        .then((x) => {
          this.tableData = x || [];
          this.originalTableData = [...this.tableData]; // ä¿å­˜åŽŸå§‹æ•°æ®
          // åˆ·æ–°åŽæ¸…空之前的选择和计数
          this.clearSelection();
          this.selectionSum = 0;
          this.originalQuantity = 0;
          this.updateSelectionClass();
          // åˆ·æ–°åŽé‡ç½®ç­›é€‰æ¡ä»¶
          this.resetFilter();
        })
        .catch((err) => {
          console.error("库存查询失败：", err);
          ElMessage.error("库存查询失败，请稍后重试");
          this.tableData = [];
          this.originalTableData = [];
        });
    },

    // æ’¤é”€æŒ‡å®šåº“存（如果需要）
    revokeAssign() {
      if (!this.row?.detailIds || this.row.detailIds.length === 0) {
        return ElMessage.error("没有获取到单据明细ID，无法撤销");
      }

      try {
        // ID转为整数数组，拼接URL
        const detailIds = this.row.detailIds.map(id => Number(id));
        const idParams = detailIds.map(id => `detailIds=${id}`).join("&");
        const url = `api/OutboundOrderDetail/RevokeLockOutboundStock?id=${this.row.mainOrderId}&${idParams}`;
        
        this.http
          .post(url, null, "数据处理中")
          .then((x) => {
            if (!x.status) return ElMessage.error(x.message);
            ElMessage.success("撤销成功");
            this.showDetialBox = false;
            this.$emit("parentCall", ($vue) => {
              $vue.getData();
            });
          });
      } catch (err) {
        this.$message.error(`撤销失败：${err.message}`);
      }
    },

    // å¤„理表格选择变化（计算已选数量）
    handleSelectionChange(val) {
      this.selection = val;
      // è®¡ç®—已选数量（转数字避免字符串拼接）
      this.selectionSum = val.reduce(
        (acc, curr) => acc + Number(curr.useableQuantity || 0),
        0
      ) + this.originalQuantity;
      this.updateSelectionClass();
    },

    // æ›´æ–°å·²é€‰æ•°é‡æ ·å¼ï¼ˆå¯¹æ¯”分组总需求数量）
    updateSelectionClass() {
      if (!this.row) return;
      if (this.selectionSum === this.row.qty) {
      if (this.selectionSum == this.row.orderQuantity) {
        this.selectionClass = "equle-style";
      } else if (this.selectionSum < this.row.qty) {
      } else if (this.selectionSum < this.row.orderQuantity) {
        this.selectionClass = "less-style";
      } else {
        this.selectionClass = "more-style";
      }
    },

    // åˆ‡æ¢è¡¨æ ¼é€‰æ‹©
    toggleSelection(rows) {
      rows 
        ? rows.forEach((row) => this.$refs.singleTable.toggleRowSelection(row)) 
        : this.clearSelection();
    // èŽ·å–字典数据
    getDictionaryData() {
      if (this.dictionaryList) {
        return;
      }
      var param = [];
      this.tableColumns.forEach((x) => {
        if (x.type == "tag" && x.bindKey != "") {
          param.push(x.bindKey);
        }
      });
      this.http
        .post("api/Sys_Dictionary/GetVueDictionary", param, "查询中")
        .then((x) => {
          if (x.length > 0) {
            this.dictionaryList = x;
          }
        });
    },

    // æ¸…空选择
    clearSelection() {
      if (this.$refs.singleTable) {
    // èŽ·å–字典值
    getDictionary(row, column) {
      if (this.dictionaryList) {
        var item = this.dictionaryList.find((x) => x.dicNo == column.bindKey);
        if (item) {
          var dicItem = item.data.find((x) => x.key == row[column.prop]);
          if (dicItem) {
            return dicItem.value;
          } else {
            return row[column.prop];
          }
        } else {
          return row[column.prop];
        }
      }
      return row[column.prop];
    },

    // æ‰“开站台选择弹窗
    openStationDialog() {
      if (this.selection.length <= 0) {
        return this.$message.error("请先勾选要出库的库存");
      }
      
      // ä»Žç¼“存中获取默认站台
      const cachedStation = stationManager.getStation();
      this.stationForm.selectedPlatform = cachedStation || "";
      
      this.showStationDialog = true;
    },

    // ç¡®è®¤å‡ºåº“
    async confirmOutbound() {
      if (!this.stationForm.selectedPlatform) {
        return this.$message.error("请选择出库站台");
      }

      // å‡†å¤‡è¯·æ±‚参数
      const requestParams = {
        detailIds: [this.row.id], // å‡ºåº“单的明细ID
        outboundTargetLocation: this.stationForm.selectedPlatform, // é€‰æ‹©çš„站台
        outboundQuantity: this.selectionSum, // å·²é€‰æ•°é‡
        operator: this.getCurrentOperator(), // èŽ·å–当前操作人
        orderNo: this.mainOrderNo, // å•æ®ç¼–号
        stockDetailIds: this.selection.map(item => item.stockId) // åº“存明细主键数组
      };

      try {
        const x = await this.http.post(
          "api/Outbound/ProcessPickingOutbound",
          requestParams,
          "数据处理中"
        );

        if (!x.status) {
          return this.$message.error(x.message);
        }
        
        this.$message.success("出库任务创建成功");
        this.showStationDialog = false;
        this.showDetialBox = false;
        this.$emit("parentCall", ($vue) => {
          $vue.getData();
        });
      } catch (error) {
        this.$message.error(error.message || "出库处理失败");
      }
    },

    // èŽ·å–当前操作人
    getCurrentOperator() {
      // å¯ä»¥ä»Žæœ¬åœ°å­˜å‚¨ã€Vuex或全局状态中获取当前用户
      try {
        // ç¤ºä¾‹ï¼šä»ŽlocalStorage获取用户信息
        const userInfo = JSON.parse(localStorage.getItem('userInfo') || '{}');
        if (userInfo.userName) {
          return userInfo.userName;
        }
        
        // ç¤ºä¾‹ï¼šä»ŽVuex获取用户信息
        if (this.$store && this.$store.state.user) {
          return this.$store.state.user.userName;
        }
      } catch (error) {
        console.error('获取操作人信息失败:', error);
      }
      
      // é»˜è®¤æ“ä½œäºº
      return "admin";
    },

    getData(a) {
      if (!a) this.pkcx = !this.pkcx;
      let url = this.pkcx
        ? "api/StockInfo/GetStockSelectViews?materielCode="
        : "api/StockInfo/GetStockSelectViews?materielCode=";
      this.kcname = this.pkcx ? "立库库存" : "平库库存";
      this.http
        .post(
          url + this.row.materielCode + "&orderId=" + this.row.orderId,
          null,
          "查询中"
        )
        .then((x) => {
          this.tableData = x;
        });
    },

    handleSelectionChange(val) {
      this.selection = val;
      this.selectionSum =
        val.reduce(
          (accumulator, currentValue) =>
            accumulator + currentValue["useableQuantity"],
          0
        ) + this.originalQuantity;
      if (this.selectionSum == this.row.orderQuantity) {
        this.selectionClass = "equle-style";
      } else if (this.selectionSum < this.row.orderQuantity) {
        this.selectionClass = "less-style";
      } else {
        this.selectionClass = "more-style";
      }
    },

    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.singleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.singleTable.clearSelection();
      }
    },

    // è¡Œç‚¹å‡»äº‹ä»¶
    clearSelection() {
      this.$refs.singleTable.clearSelection();
    },

    handleRowClick(row) {
      this.$refs.singleTable.toggleRowSelection(row);
    },

    // å›¾æ ‡æŒ‰é’®ç‚¹å‡»å ä½æ–¹æ³•ï¼ˆå¯æ ¹æ®éœ€æ±‚扩展）
    tableButtonClick(row, item) {
      console.log("图标按钮点击：", item.title, row);
    },

    // ç­›é€‰è¡¨æ ¼æ•°æ®
    filterTable() {
      if (!this.originalTableData.length) return;
      
      // è§£æž„筛选条件并转为小写（忽略大小写）
      const { materielCode, barcode, palletCode, locationCode } = this.filterForm;
      const mc = materielCode.toLowerCase().trim();
      const bc = barcode.toLowerCase().trim();
      const pc = palletCode.toLowerCase().trim();
      const lc = locationCode.toLowerCase().trim();

      // æ¨¡ç³Šç­›é€‰é€»è¾‘
      this.tableData = this.originalTableData.filter(item => {
        // æ¯ä¸ªå­—段都做空值处理和小写转换，支持模糊匹配
        const itemMc = (item.materielCode || "").toLowerCase();
        const itemBc = (item.barcode || "").toLowerCase();
        const itemPc = (item.palletCode || "").toLowerCase();
        const itemLc = (item.locationCode || "").toLowerCase();

        return (
          itemMc.includes(mc) &&
          itemBc.includes(bc) &&
          itemPc.includes(pc) &&
          itemLc.includes(lc)
        );
      });

      // ç­›é€‰åŽæ¸…空选择状态
      this.clearSelection();
      this.selectionSum = 0;
      this.updateSelectionClass();
    },

    // é‡ç½®ç­›é€‰æ¡ä»¶
    resetFilter() {
      this.filterForm = {
        materielCode: "",
        barcode: "",
        palletCode: "",
        locationCode: ""
      };
      // æ¢å¤åŽŸå§‹æ•°æ®
      this.tableData = [...this.originalTableData];
      // é‡ç½®é€‰æ‹©çŠ¶æ€
      this.clearSelection();
      this.selectionSum = 0;
      this.updateSelectionClass();
    }
  },
};
</script>
@@ -468,14 +443,17 @@
  color: red;
}

/* ç­›é€‰åŒºåŸŸæ ·å¼ä¼˜åŒ– */
.filter-area :deep(.el-form-item) {
  margin-bottom: 0;
  margin-right: 10px;
/* ç«™å°é€‰æ‹©å¼¹çª—样式 */
.station-dialog-content {
  padding: 10px 0;
}
</style>

<style>
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.text-button:hover {
  background-color: #f0f9eb !important;
}