<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="16">
|
<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="8">
|
<el-link
|
type="primary"
|
size="small"
|
style="float: right; height: 20px; margin-right: 10px"
|
@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="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="danger" size="small" @click="showDetialBox = false"
|
>关闭</el-button
|
>
|
</template>
|
</vol-box>
|
|
<!-- 出库站台选择弹窗（静态模板实现） -->
|
<el-dialog
|
v-model="showOutboundDialog"
|
title="出库操作 - 选择出库站台"
|
width="500px"
|
:append-to-body="true"
|
>
|
<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>
|
<template #footer>
|
<el-button @click="showOutboundDialog = false" style="margin-right: 8px">取消</el-button>
|
<el-button type="primary" @click="confirmOutbound">确定出库</el-button>
|
</template>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import VolBox from "@/components/basic/VolBox.vue";
|
import { ElMessage } from "element-plus";
|
|
export default {
|
components: { VolBox },
|
data() {
|
return {
|
row: null,
|
showDetialBox: false,
|
tableData: [],
|
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:"orderDetailId",title:"单据明细主键",type:"string",width:150,hidden:true},
|
],
|
selection: [],
|
selectionSum: 0,
|
selectionClass: "less-style",
|
originalQuantity: 0,
|
|
// 出库弹窗相关数据
|
showOutboundDialog: false,
|
outboundForm: { selectedPlatform: "" }, // 表单绑定数据
|
outboundRules: {
|
selectedPlatform: [
|
{ required: true, message: "请选择出库站台", trigger: "change" },
|
],
|
},
|
platformOptions: [
|
{ label: "站台2", value: "2-1" },
|
{ label: "站台3", value: "3-1" },
|
],
|
};
|
},
|
methods: {
|
open(row) {
|
this.row = row;
|
this.showDetialBox = true;
|
this.getData();
|
this.updateSelectionClass(); // 初始化已选数量样式
|
},
|
|
lockStock() {
|
this.http
|
.post(
|
"api/OutboundOrderDetail/LockOutboundStock?id=" + this.row.id,
|
this.selection,
|
"数据处理中"
|
)
|
.then((x) => {
|
if (!x.status) return ElMessage.error(x.message);
|
ElMessage.success("操作成功");
|
this.showDetialBox = false;
|
this.$emit("parentCall", ($vue) => {
|
$vue.getData();
|
});
|
});
|
},
|
|
// 打开出库弹窗
|
openOutboundDialog() {
|
if (this.selection.length === 0) {
|
return ElMessage.error("请选择单据明细");
|
}
|
// 重置表单避免残留值
|
this.outboundForm.selectedPlatform = "";
|
this.showOutboundDialog = true;
|
},
|
|
// 确认出库操作
|
confirmOutbound() {
|
this.$refs.outboundFormRef.validate((valid) => {
|
if (!valid) return;
|
|
console.log(this.selection)
|
if (this.selection.length <= 0) {
|
return this.$message.error("请勾选");
|
}
|
let url = this.pkcx
|
? "api/Task/GenerateAllocatOutboundTask?orderDetailId="
|
: "api/Task/GenerateAllocatOutboundTask?orderDetailId=";
|
this.http
|
.post(url + this.row.id+"&station="+this.outboundForm.selectedPlatform, 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() {
|
const url = "api/StockInfo/GetAllocateStockSelect?materielCode=";
|
this.http
|
.post(
|
url + this.row.materielCode + "&orderId=" + this.row.orderId + "&orderDetailId=" + this.row.id,
|
null,
|
"查询中"
|
)
|
.then((x) => {
|
this.tableData = x;
|
// 刷新后清空之前的选择和计数
|
this.clearSelection();
|
this.selectionSum = 0;
|
this.originalQuantity = 0;
|
this.updateSelectionClass();
|
});
|
},
|
|
revokeAssign() {
|
this.http
|
.post(
|
"api/OutboundOrderDetail/RevokeLockOutboundStock?id=" + this.row.id,
|
null,
|
"数据处理中"
|
)
|
.then((x) => {
|
if (!x.status) return ElMessage.error(x.message);
|
ElMessage.success("操作成功");
|
this.showDetialBox = false;
|
this.$emit("parentCall", ($vue) => {
|
$vue.getData();
|
});
|
});
|
},
|
|
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.orderQuantity) {
|
this.selectionClass = "equle-style";
|
} 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();
|
},
|
|
clearSelection() {
|
if (this.$refs.singleTable) {
|
this.$refs.singleTable.clearSelection();
|
}
|
},
|
|
handleRowClick(row) {
|
this.$refs.singleTable.toggleRowSelection(row);
|
},
|
|
// 图标按钮点击占位方法（可根据需求扩展）
|
tableButtonClick(row, item) {
|
console.log("图标按钮点击：", item.title, 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;
|
}
|
|
.box-table .el-table tbody tr.current-row > td {
|
background-color: #f0f9eb !important;
|
}
|
|
.el-table .success-row {
|
background: #f0f9eb;
|
}
|
|
.box-table .el-table {
|
border: 1px solid #ebeef5;
|
}
|
|
.box-head .el-alert__content {
|
width: 100%;
|
}
|
</style>
|
