<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>
|
