<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="4">
|
<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">
|
<template 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="{ fontSize: item.iconSize || '22px' }"
|
></i></el-button
|
></el-tooltip>
|
</template>
|
<template v-else>
|
<el-tooltip
|
:content="scoped.row[item.prop]"
|
placement="top"
|
:disabled="
|
!isContentOverflow(scoped.row[item.prop], item.width)
|
"
|
>
|
<div class="cell-content">
|
{{ scoped.row[item.prop] }}
|
</div>
|
</el-tooltip>
|
</template>
|
</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: "batchNo",
|
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: {
|
isContentOverflow(content, width) {
|
if (!content || !width) return false;
|
// 估算每个字符的宽度（根据字体大小调整）
|
const charWidth = 8; // 假设每个字符宽度为 8px
|
const maxChars = Math.floor(width / charWidth);
|
return content.length > maxChars;
|
},
|
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() {
|
if (this.selection.length <= 0) {
|
return this.$message.error("请选择指定库存");
|
}
|
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;
|
}
|
.cell-content {
|
white-space: nowrap; /* 防止换行 */
|
overflow: hidden; /* 隐藏超出部分 */
|
text-overflow: ellipsis; /* 显示省略号 */
|
width: 100%; /* 宽度占满单元格 */
|
}
|
</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>
|
