heshaofeng
2025-12-29 266e4bf654c55ce2f7e9271048e4625f1b8b49f6
ÏîÄ¿´úÂë/WIDESEA_WMSClient/src/extension/outbound/extend/outOrderDetail.vue
@@ -1,12 +1,6 @@
<template>
  <div>
    <vol-box
      v-model="showDetialBox"
      :lazy="true"
      width="75%"
      :padding="15"
      title="单据明细信息"
    >
    <vol-box v-model="showDetialBox" :lazy="true" width="75%" :padding="15" title="单据明细信息">
      <div class="box-head">
        <el-alert :closable="false" style="width: 100%">
          <el-row>
@@ -14,84 +8,44 @@
              <span>已选中 {{ selection.length }} é¡¹</span>
            </el-col>
            <el-col :span="8">
          <!--     <el-link
                type="primary"
                size="small"
                style="float: right; height: 20px"
                @click="lockstocks"
                >锁定库存</el-link> -->
              <el-link
                type="primary"
                size="small"
                style="float: right; height: 20px"
                @click="handleOpenPicking"
                >拣选</el-link>
              <el-link
                type="primary"
                size="small"
                style="float: right; height: 20px; margin-right: 10px"
                @click="outbound"
                >直接出库</el-link
              >
              <el-link
                type="primary"
                size="small"
                style="float: right; height: 20px; margin-right: 10px"
                @click="getData"
                >刷新</el-link
              ></el-col
            >
              <el-link type="primary" size="small" v-if="isBatch === 0" style="float: right; height: 20px"
                @click="handleOpenPicking">拣选</el-link>
              <el-link type="primary" size="small" style="float: right; height: 20px; margin-right: 10px"
                v-if="isBatch === 1" @click="handleOpenBatchPicking">分批拣选</el-link>
              <el-link type="primary" size="small" v-if="isBatch === 0"
                style="float: right; height: 20px; margin-right: 10px" @click="outbound">直接出库</el-link>
              <el-link type="primary" size="small" v-if="isBatch === 1"
                style="float: right; height: 20px; margin-right: 10px" @click="outboundbatch">分批出库</el-link>
              <el-link type="primary" size="small" style="float: right; height: 20px; margin-right: 10px"
                @click="getData">刷新</el-link>
            </el-col>
          </el-row>
        </el-alert>
      </div>
      <div class="box-table" style="margin-top: 1%">
        <el-table
          ref="singleTable"
          :data="tableData"
          style="width: 100%; height: 100%"
          highlight-current-row
          @current-change="handleCurrentChange"
          height="500px"
          @row-click="handleRowClick"
          @selection-change="handleSelectionChange"
        >
        <el-table ref="singleTable" :data="tableData" style="width: 100%; height: 100%" highlight-current-row
          @current-change="handleCurrentChange" height="500px" @row-click="handleRowClick"
          @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column
            label="序号"
            type="index"
            fixed="left"
            width="55"
            align="center"
          ></el-table-column>
          <el-table-column
            v-for="(item, index) in tableColumns.filter((x) => !x.hidden)"
            :key="index"
            :prop="item.prop"
            :label="item.title"
            :width="item.width"
            align="center"
          >
          <el-table-column label="序号" type="index" fixed="left" width="55" align="center"></el-table-column>
          <el-table-column v-for="(item, index) in tableColumns.filter((x) => !x.hidden)" :key="index" :prop="item.prop"
            :label="item.title" :width="item.width" align="center">
            <template #default="scoped">
              <div v-if="item.type == 'icon'">
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="item.title"
                  placement="bottom"
                  ><el-link
                    type="primary"
                    :disabled="getButtonEnable(item.prop, scoped.row)"
                    @click="tableButtonClick(scoped.row, item)"
                    ><i :class="item.icon" style="font-size: 22px"></i></el-link
                ></el-tooltip>
                <el-tooltip class="item" effect="dark" :content="item.title" placement="bottom">
                  <el-link type="primary" :disabled="getButtonEnable(item.prop, scoped.row)"
                    @click="tableButtonClick(scoped.row, item)">
                    <i :class="item.icon" style="font-size: 22px"></i>
                  </el-link>
                </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>
@@ -99,29 +53,43 @@
      </div>
    </vol-box>
    <stock-select ref="child" @parentCall="parentCall"></stock-select>
    <selected-stock
      ref="selectedStock"
      @parentCall="parentCall"
    ></selected-stock>
    <selected-stock ref="selectedStock" @parentCall="parentCall"></selected-stock>
    <NoStockOut ref="NoStockOut" @parentCall="parentCall"></NoStockOut>
    <DirectOutbound ref="DirectOutbound" @parentCall="parentCall"></DirectOutbound>
  </div>
</template>
<script>
import VolBox from "@/components/basic/VolBox.vue";
import VolForm from "@/components/basic/VolForm.vue";
import StockSelect from "./StockSelect.vue";
import SelectedStock from "./SelectedStock.vue";
import { h,createVNode, render,reactive  } from 'vue';
import { ElDialog , ElForm, ElFormItem, ElSelect,ElOption, ElButton, ElMessage } from 'element-plus';
import NoStockOut from "./NoStockOut.vue";
import DirectOutbound from "./DirectOutbound.vue";
import { h, createVNode, render, reactive } from "vue";
import {
  ElDialog,
  ElForm,
  ElFormItem,
  ElSelect,
  ElOption,
  ElButton,
  ElInput,
  ElMessage,
} from "element-plus";
export default {
  components: { VolBox, VolForm, StockSelect, SelectedStock },
  components: { VolBox, VolForm, StockSelect, SelectedStock, NoStockOut, DirectOutbound },
  data() {
    return {
      row: null,
      isBatch: 0,
      showDetialBox: false,
      flag: false,
      currentRow: null,
      selection: [],
      tableData: [],
      mainBusinessType: null, // æ–°å¢žï¼šå­˜å‚¨ä¸»å•据的businessType
      tableColumns: [
        {
          prop: "id",
@@ -141,7 +109,7 @@
          prop: "materielCode",
          title: "物料编号",
          type: "string",
          width: 150,
          width: 120,
        },
        {
          prop: "materielName",
@@ -159,7 +127,7 @@
          prop: "supplyCode",
          title: "供应商编号",
          type: "string",
          width: 150,
          width: 90,
        },
        {
          prop: "orderQuantity",
@@ -180,16 +148,22 @@
          width: 90,
        },
        {
          prop: "moveQty",
          title: "挪料数量",
          type: "string",
          width: 90,
        },
        {
          prop: "unit",
          title: "单位",
          type: "string",
          width: 90,
          width: 80,
        },
        {
          prop: "orderDetailStatus",
          title: "订单明细状态",
          type: "tag",
          width: 180,
          width: 90,
          bindKey: "orderDetailStatusEnum",
        },
        {
@@ -197,6 +171,7 @@
          title: "指定库存",
          type: "icon",
          width: 90,
          //hidden: true, // é»˜è®¤éšè—
          icon: "el-icon-s-grid",
        },
        {
@@ -241,9 +216,8 @@
        order: "desc",
        Foots: "",
        total: 0,
        // 2020.08.29增加自定义分页条大小
        sizes: [30, 60, 100, 120],
        size: 30, // é»˜è®¤åˆ†é¡µå¤§å°
        size: 30,
        Wheres: [],
        page: 1,
        rows: 30,
@@ -280,11 +254,24 @@
    };
  },
  methods: {
    toggleAssignStockColumn() {
      const assignStockColumn = this.tableColumns.find(
        (item) => item.prop === "assignStock"
      );
      // if (assignStockColumn) {
      //   // businessType为22时显示,否则隐藏
      //   assignStockColumn.hidden = this.mainBusinessType !== '22';
      // }
    },
    open(row) {
      this.row = row;
      this.showDetialBox = true;
      console.log("主单据数据:", this.row);
      this.isBatch = row.isBatch;
      this.mainBusinessType = row.businessType;
      this.getDictionaryData();
      this.getData();
      this.toggleAssignStockColumn();
    },
    getData() {
      var wheres = [{ name: "orderId", value: this.row.id }];
@@ -293,19 +280,21 @@
        rows: this.paginations.rows,
        sort: this.paginations.sort,
        order: this.paginations.order,
        wheres: JSON.stringify(wheres), // æŸ¥è¯¢æ¡ä»¶ï¼Œæ ¼å¼ä¸º[{ name: "字段", value: "xx" }]
        wheres: JSON.stringify(wheres),
      };
      this.http
        .post("api/OutboundOrderDetail/GetPageData", param, "查询中")
        .then((x) => {
          this.tableData = x.rows;
          this.toggleAssignStockColumn(); // æ•°æ®åŠ è½½åŽé‡æ–°ç¡®è®¤åˆ—æ˜¾éš
        });
    },
    tableButtonClick(row, column) {
      if (column.prop == "assignStock") {
        this.$refs.child.open(row);
      } else if (column.prop == "NoStockOut") {
        this.$refs.NoStockOut.open(row);
      } else {
        //点击打开出库详情
        this.$refs.selectedStock.open(row);
      }
    },
@@ -313,7 +302,7 @@
      if (this.selection.length === 0) {
        return this.$message.error("请选择单据明细");
      }
      var keys = this.selection.map((item) => item.id); // èŽ·å–é€‰ä¸­è¡Œçš„id
      var keys = this.selection.map((item) => item.id);
      this.http
        .post("api/OutboundOrderDetail/LockOutboundStocks", keys, "数据处理中")
        .then((x) => {
@@ -325,149 +314,50 @@
          });
        });
    },
    // æ‰“开拣选页面
   handleOpenPicking() {
    handleOpenPicking() {
      this.$router.push({
        path: '/outbound/picking',
        query: { orderId: this.row.id ,orderNo:this.row.orderNo}
      })
        path: "/outbound/outPicking",
        query: { orderId: this.row.id, orderNo: this.row.orderNo },
      });
    },
    handleOpenBatchPicking() {
      this.$router.push({
        path: "/outbound/outPicking",
        query: { orderId: this.row.id, orderNo: this.row.orderNo },
      });
    },
    outbound() {
      if (this.selection.length === 0) {
        return this.$message.error("请选择单据明细");
      }
      const platformOptions = [{label:'站台2',value:'2-1'},{label:'站台3',value:'3-1'}];
      const mountNode = document.createElement('div');
      document.body.appendChild(mountNode);
      // 2. è¡¨å•数据(默认选中站台3)
      const formData = reactive({
        selectedPlatform: platformOptions[0].value // é»˜è®¤ç»‘定「站台3」的value
      });
      const keys = this.selection.map((item) => item.id);
      const requestParams = {
        detailIds: keys,
        outboundQuantity: 1,
        operator: "",
        orderNo: this.row.orderNo,
        isBatch: this.isBatch
      };
      console.log(requestParams);
      this.$refs.DirectOutbound.open(requestParams);
    },
    outboundbatch() {
      if (this.selection.length === 0) {
        return this.$message.error("请选择单据明细");
      }
      // 3. åŠ¨æ€åˆ›å»ºå¼¹çª—ç»„ä»¶
      const vnode = createVNode(ElDialog, {
        title: '出库操作 - é€‰æ‹©å‡ºåº“站台',
        width: '500px',
        modelValue: true,
        appendToBody: true,
        'onUpdate:modelValue': (isVisible) => {
          if (!isVisible) {
            render(null, mountNode);
            document.body.removeChild(mountNode);
          }
        },
        style: {
          padding: '20px 0',
          borderRadius: '8px'
        }
      }, {
        default: () => h(ElForm, {
          model: formData,
          rules: {
            selectedPlatform: [
              { required: true, message: '请选择出库站台', trigger: 'change' }
            ]
          },
          ref: 'outboundForm',
          labelWidth: '100px',
          style: {
            padding: '0 30px'
          }
        }, [
          // å‡ºåº“站台选择项(核心表单项)
          h(ElFormItem, {
            label: '出库站台',
            prop: 'selectedPlatform',
            style: {
              marginBottom: '24px'
            }
          }, [
            h(ElSelect, {
              placeholder: '请选择出库站台(3-12)',
              modelValue: formData.selectedPlatform,
              'onUpdate:modelValue': (val) => {
                formData.selectedPlatform = val;
              },
              style: {
                width: '100%',
                height: '40px',
                borderRadius: '4px',
                borderColor: '#dcdfe6'
              }
            }, platformOptions.map(platform =>
              h(ElOption, { label: platform.label, value: platform.value })
            ))
          ]),
          // åº•部按钮区
          h('div', {
            style: {
              textAlign: 'right',
              marginTop: '8px',
              paddingRight: '4px'
            }
          }, [
            h(ElButton, {
              type: 'text',
              onClick: () => {
                render(null, mountNode);
                document.body.removeChild(mountNode);
                ElMessage.info('取消出库操作');
              },
              style: {
                marginRight: '8px',
                color: '#606266'
              }
            }, '取消'),
            h(ElButton, {
              type: 'primary',
              onClick: async () => {
                const formRef = vnode.component.refs.outboundForm;
                try {
                  // è¡¨å•校验
                  await formRef.validate();
                } catch (err) {
                  return;
                }
      const keys = this.selection.map((item) => item.id);
      const requestParams = {
        detailIds: keys,
        outboundQuantity: this.selection[0].orderQuantity - this.selection[0].lockQuantity,
        operator: "",
        orderNo: this.row.orderNo,
        isBatch: this.isBatch
      };
      console.log(requestParams);
      this.$refs.DirectOutbound.open(requestParams);
                // 4. æž„造请求参数(选中单据ID + é€‰æ‹©çš„出库站台)
                const keys = this.selection.map((item) => item.id);
                const requestParams = {
                  taskIds: keys,
                  outboundPlatform: formData.selectedPlatform // å‡ºåº“站台
                };
                // 5. è°ƒç”¨å‡ºåº“接口
                this.http
                  .post("api/Task/GenerateOutboundTasks", requestParams, "数据处理中")
                  .then((x) => {
                    if (!x.status) return ElMessage.error(x.message);
                    ElMessage.success("操作成功");
                    this.showDetialBox = false; // å…³é—­è¯¦æƒ…框
                    this.$emit("parentCall", ($vue) => {
                      $vue.getData(); // é€šçŸ¥çˆ¶ç»„件刷新
                    });
                    // å…³é—­å¼¹çª—
                    render(null, mountNode);
                    document.body.removeChild(mountNode);
                  })
                  .catch(() => {
                    ElMessage.error('请求失败,请稍后重试');
                  });
              },
              style: {
                borderRadius: '4px',
                padding: '8px 20px'
              }
            }, '确定出库')
          ])
        ])
      });
      // ç»‘定app上下文,确保El组件正常工作
      vnode.appContext = this.$.appContext;
      render(vnode, mountNode);
    },
    setCurrent(row) {
      this.$refs.singleTable.setCurrentRow(row);
@@ -525,7 +415,6 @@
        var item = this.dictionaryList.find((x) => x.dicNo == column.bindKey);
        if (item) {
          var dicItem = item.data.find((x) => x.key == row[column.prop]);
          console.log(dicItem);
          if (dicItem) {
            return dicItem.value;
          } else {
@@ -535,10 +424,12 @@
          return row[column.prop];
        }
      }
      return row[column.prop];
    },
  },
};
</script>
<style scoped>
.text-button {
  border: 0px;
@@ -554,14 +445,12 @@
  background: oldlace;
}
.box-table .el-table tbody tr:hover > td {
.box-table .el-table tbody tr:hover>td {
  background-color: #d8e0d4 !important;
  /* color: #ffffff; */
}
.box-table .el-table tbody tr.current-row > td {
.box-table .el-table tbody tr.current-row>td {
  background-color: #f0f9eb !important;
  /* color: #ffffff; */
}
.el-table .success-row {
@@ -571,4 +460,4 @@
.box-table .el-table {
  border: 1px solid #ebeef5;
}
</style>
</style>