<template>
|
<div>
|
<!-- 库存指定弹窗 -->
|
<vol-box
|
v-model="showDetialBox"
|
:lazy="true"
|
width="80%"
|
:padding="15"
|
title="指定库存"
|
>
|
<div class="box-head">
|
<el-alert :closable="false" style="width: 100%">
|
<el-row>
|
<el-col :span="16">
|
<span class="less-style">单据编号：{{ mainOrderNo }}</span>
|
<el-divider direction="vertical"></el-divider>
|
<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-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">
|
<div 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>
|
</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>
|
</el-table>
|
</div>
|
<template #footer>
|
<el-button type="primary" size="small" @click="openStationDialog"
|
>直接出库</el-button
|
>
|
<el-button type="danger" size="small" @click="showDetialBox = false"
|
>关闭</el-button
|
>
|
</template>
|
</vol-box>
|
|
<!-- 站台选择弹窗 -->
|
<el-dialog
|
v-model="showStationDialog"
|
title="选择出库站台"
|
width="500px"
|
:close-on-click-modal="false"
|
>
|
<div class="station-dialog-content">
|
<el-form :model="stationForm" label-width="100px">
|
<el-form-item label="选择站台：" required>
|
<el-select
|
v-model="stationForm.selectedPlatform"
|
placeholder="请选择出库站台"
|
style="width: 100%"
|
>
|
<el-option
|
v-for="item in stations"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="出库数量：">
|
<el-input
|
v-model="selectionSum"
|
readonly
|
style="width: 100%"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="物料信息：">
|
<div style="font-size: 12px; color: #666; line-height: 1.5">
|
<div>物料编号：{{ row.materielCode }}</div>
|
<div>物料名称：{{ row.materielName }}</div>
|
</div>
|
</el-form-item>
|
</el-form>
|
</div>
|
<template #footer>
|
<span class="dialog-footer">
|
<el-button @click="showStationDialog = false">取消</el-button>
|
<el-button type="primary" @click="confirmOutbound">确认出库</el-button>
|
</span>
|
</template>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import VolBox from "@/components/basic/VolBox.vue";
|
// 引入站台管理工具
|
import { stationManager } from "@/../src/uitils/stationManager";
|
|
export default {
|
components: { VolBox },
|
data() {
|
return {
|
row: null,
|
kcname: "",
|
mainOrderNo: "",
|
pkcx: false,
|
showDetialBox: false,
|
showStationDialog: false, // 站台选择弹窗显示控制
|
tableData: [],
|
dictionaryList: null, // 新增：字典数据
|
tableColumns: [
|
{
|
prop: "materielCode",
|
title: "物料编号",
|
type: "string",
|
width: 150,
|
},
|
{
|
prop: "materielName",
|
title: "物料名称",
|
type: "string",
|
width: 150,
|
},
|
{
|
prop: "palletCode",
|
title: "托盘编号",
|
type: "string",
|
width: 150,
|
},
|
{
|
prop: "barcode",
|
title: "条码",
|
type: "string",
|
width: 150,
|
},
|
{
|
prop: "locationCode",
|
title: "货位编号",
|
type: "string",
|
width: 180,
|
},
|
{
|
prop: "useableQuantity",
|
title: "可用数量",
|
type: "string",
|
},
|
{
|
prop: "supplyCode",
|
title: "供应商",
|
type: "string",
|
},
|
{
|
prop: "batchNo",
|
title: "批次号",
|
type: "string",
|
},
|
{
|
prop: "stockStatus",
|
title: "库存明细状态",
|
type: "tag",
|
width: 90,
|
bindKey: "stockStatusEmun",
|
},
|
{
|
prop: "stockId",
|
title: "库存主键",
|
type: "string",
|
},
|
{
|
prop: "orderDetailId",
|
title: "单据明细主键",
|
type: "string",
|
},
|
],
|
selection: [],
|
selectionSum: 0,
|
selectionClass: "less-style",
|
originalQuantity: 0,
|
|
// 站台相关数据
|
stations: [
|
{ label: "站台2", value: "2-1" },
|
{ label: "站台3", value: "3-1" },
|
],
|
stationForm: {
|
selectedPlatform: "", // 修改字段名以匹配参数
|
},
|
};
|
},
|
methods: {
|
open(row, orderNo) {
|
this.row = row;
|
this.mainOrderNo = orderNo;
|
this.showDetialBox = true;
|
this.originalQuantity = this.row.lockQuantity;
|
this.selectionSum = this.row.lockQuantity;
|
|
// 加载字典数据
|
this.getDictionaryData();
|
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";
|
}
|
},
|
|
// 获取字典数据
|
getDictionaryData() {
|
if (this.dictionaryList) {
|
return;
|
}
|
var param = [];
|
this.tableColumns.forEach((x) => {
|
if (x.type == "tag" && x.bindKey != "") {
|
param.push(x.bindKey);
|
}
|
});
|
this.http
|
.post("api/Sys_Dictionary/GetVueDictionary", param, "查询中")
|
.then((x) => {
|
if (x.length > 0) {
|
this.dictionaryList = x;
|
}
|
});
|
},
|
|
// 获取字典值
|
getDictionary(row, column) {
|
if (this.dictionaryList) {
|
var item = this.dictionaryList.find((x) => x.dicNo == column.bindKey);
|
if (item) {
|
var dicItem = item.data.find((x) => x.key == row[column.prop]);
|
if (dicItem) {
|
return dicItem.value;
|
} else {
|
return row[column.prop];
|
}
|
} else {
|
return row[column.prop];
|
}
|
}
|
return row[column.prop];
|
},
|
|
// 打开站台选择弹窗
|
openStationDialog() {
|
if (this.selection.length <= 0) {
|
return this.$message.error("请先勾选要出库的库存");
|
}
|
|
// 从缓存中获取默认站台
|
const cachedStation = stationManager.getStation();
|
this.stationForm.selectedPlatform = cachedStation || "";
|
|
this.showStationDialog = true;
|
},
|
|
// 确认出库
|
async confirmOutbound() {
|
if (!this.stationForm.selectedPlatform) {
|
return this.$message.error("请选择出库站台");
|
}
|
|
// 准备请求参数
|
const requestParams = {
|
detailIds: [this.row.id], // 出库单的明细ID
|
outboundTargetLocation: this.stationForm.selectedPlatform, // 选择的站台
|
outboundQuantity: this.selectionSum, // 已选数量
|
operator: this.getCurrentOperator(), // 获取当前操作人
|
orderNo: this.mainOrderNo, // 单据编号
|
stockDetailIds: this.selection.map(item => item.stockId) // 库存明细主键数组
|
};
|
|
try {
|
const x = await this.http.post(
|
"api/Outbound/ProcessPickingOutbound",
|
requestParams,
|
"数据处理中"
|
);
|
|
if (!x.status) {
|
return this.$message.error(x.message);
|
}
|
|
this.$message.success("出库任务创建成功");
|
this.showStationDialog = false;
|
this.showDetialBox = false;
|
this.$emit("parentCall", ($vue) => {
|
$vue.getData();
|
});
|
} catch (error) {
|
this.$message.error(error.message || "出库处理失败");
|
}
|
},
|
|
// 获取当前操作人
|
getCurrentOperator() {
|
// 可以从本地存储、Vuex或全局状态中获取当前用户
|
try {
|
// 示例：从localStorage获取用户信息
|
const userInfo = JSON.parse(localStorage.getItem('userInfo') || '{}');
|
if (userInfo.userName) {
|
return userInfo.userName;
|
}
|
|
// 示例：从Vuex获取用户信息
|
if (this.$store && this.$store.state.user) {
|
return this.$store.state.user.userName;
|
}
|
} catch (error) {
|
console.error('获取操作人信息失败:', error);
|
}
|
|
// 默认操作人
|
return "admin";
|
},
|
|
getData(a) {
|
if (!a) this.pkcx = !this.pkcx;
|
let url = this.pkcx
|
? "api/StockInfo/GetStockSelectViews?materielCode="
|
: "api/StockInfo/GetStockSelectViews?materielCode=";
|
this.kcname = this.pkcx ? "立库库存" : "平库库存";
|
this.http
|
.post(
|
url + this.row.materielCode + "&orderId=" + this.row.orderId,
|
null,
|
"查询中"
|
)
|
.then((x) => {
|
this.tableData = x;
|
});
|
},
|
|
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;
|
}
|
|
/* 站台选择弹窗样式 */
|
.station-dialog-content {
|
padding: 10px 0;
|
}
|
|
.dialog-footer {
|
display: flex;
|
justify-content: flex-end;
|
gap: 10px;
|
}
|
|
.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>
|
