Merge branch 'master' of http://115.159.85.185:8098/r/HuaYiZhongHeng/ZhongH...

qinchulong

2025-05-27 c020f31a67fc5aa5644511bddff075f7ecc85234

 ´úÂë¹ÜÀí/WMS/WIDESEA_WMSClient/src/extension/outbound/extend/StockSelect.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,251 @@
<template>
  <div>
    <vol-box v-model="showDetialBox" :lazy="true" width="60%" :padding="15" title="指定库存">
      <div class="box-head">
        <el-alert :closable="false" style="width: 100%">
          <el-row>
            <el-col :span="20">
              <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.orderQuantity }}
              </span>
              <el-divider direction="vertical"></el-divider>
              <span :class="selectionClass">已选数量： {{ selectionSum }}
              </span>
            </el-col>
            <el-col :span="2">
              <el-link type="primary" size="small" style="float: right; height: 20px"
                @click="getData">刷新</el-link></el-col>
            <el-col :span="2">
              <el-link type="primary" size="small" style="float: right; height: 20px"
                @click="revokeAssign">撤销分配</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
          @row-click="handleRowClick" height="500px" @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">
            <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>
          </el-table-column>
        </el-table>
      </div>
      <template #footer>
        <el-button type="primary" size="small" @click="outbound">直接出库</el-button>
        <el-button type="primary" size="small" @click="lockStock">锁定库存</el-button>
        <el-button type="danger" size="small" @click="showDetialBox = false">关闭</el-button>
      </template>
    </vol-box>
  </div>
</template>
<script>
import VolBox from "@/components/basic/VolBox.vue";
export default {
  components: { VolBox },
  data() {
    return {
      row: null,
      showDetialBox: false,
      tableData: [],
      tableColumns: [
        {
          prop: "materielCode",
          title: "物料编号",
          type: "string",
          width: 150,
        },
        {
          prop: "materielName",
          title: "物料名称",
          type: "string",
          width: 150,
        },
        {
          prop: "palletCode",
          title: "托盘编号",
          type: "string",
          width: 150,
        },
        {
          prop: "locationCode",
          title: "货位编号",
          type: "string",
          width: 180,
        },
        {
          prop: "useableQuantity",
          title: "可用数量",
          type: "string",
        },
      ],
      selection: [],
      selectionSum: 0,
      selectionClass: "less-style",
      originalQuantity: 0,
    };
  },
  methods: {
    open(row) {
      this.row = row;
      this.showDetialBox = true;
      this.originalQuantity = this.row.lockQuantity;
      this.selectionSum = this.row.lockQuantity;
      this.getData();
      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";
      }
    },
    lockStock() {
      this.http
        .post(
          "api/OutboundOrderDetail/LockOutboundStock?id=" + this.row.id,
          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();
          });
        });
    },
    outbound() {
      this.http
        .post(
          "api/Task/GenerateOutboundTask?id=" + this.row.id,
          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();
          });
        });
    },
    getData() {
      this.http
        .post(
          "api/StockInfo/GetStockSelectViews?materielCode=" +
          this.row.materielCode,
          null,
          "查询中"
        )
        .then((x) => {
          this.tableData = x;
        });
    },
    revokeAssign() {
      console.log(this.row);
      this.http
        .post(
          "api/OutboundOrderDetail/RevokeLockOutboundStock?id=" + this.row.id,
          null,
          "数据处理中"
        )
        .then((x) => {
          if (!x.status) return this.$message.error(x.message);
          this.$message.success("操作成功");
          this.showDetialBox = false;
          this.$emit("parentCall", ($vue) => {
            $vue.getData();
          });
        });
    },
    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);
    },
  },
};
</script>
<style scoped>
.less-style {
  color: black;
}

.equle-style {
  color: green;
}

.more-style {
  color: red;
}
</style>

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

.el-table .warning-row {
  background: oldlace;
}

.box-table .el-table tbody tr:hover>td {
  background-color: #d8e0d4 !important;
  /* color: #ffffff; */
}

.box-table .el-table tbody tr.current-row>td {
  background-color: #f0f9eb !important;
  /* color: #ffffff; */
}

.el-table .success-row {
  background: #f0f9eb;
}

.box-table .el-table {
  border: 1px solid #ebeef5;
}

.box-head .el-alert__content {
  width: 100%;
}
</style>