<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="22">
|
<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-row>
|
</el-alert>
|
</div>
|
<div style="margin-top:10px;width:400px">
|
<el-form ref="form" :model="form" label-width="90px">
|
<!-- <el-form-item label="出库区域" prop="areaId">
|
<el-select v-model="form.areaId" placeholder="请选择出库区域">
|
<el-option label="一楼AGV出库缓存区" value="2" />
|
<el-option label="一楼AGV立库缓存区" value="3" />
|
<el-option label="一楼AGV入库缓存区" value="4" />
|
</el-select>
|
</el-form-item> -->
|
<el-form-item label="调拨出库" prop="Warehouse">
|
<el-select v-model="form.Warehouse" placeholder="请选择调拨仓库">
|
<el-option label="小件成品仓" value="102" />
|
<el-option label="组件仓" value="103" />
|
<el-option label="项目成品仓" value="104" />
|
<el-option label="不良品仓" value="105" />
|
<el-option label="零成本仓" value="106" />
|
<el-option label="车间在制仓" value="199" />
|
<el-option label="智能立库" value="107" />
|
<el-option label="电气装配仓库" value="108" />
|
<el-option label="机加仓" value="109" />
|
<el-option label="原材料仓" value="201" />
|
<el-option label="化工仓" value="110" />
|
<el-option label="外协供应商仓" value="111" />
|
<el-option label="辅助料仓" value="202" />
|
<el-option label="配件仓" value="203" />
|
<el-option label="电器仓" value="204" />
|
<el-option label="WMS出库缓存区" value="205" />
|
<el-option label="成品仓" value="206" />
|
<el-option label="待处理仓" value="211" />
|
<el-option label="工废仓" value="212" />
|
<el-option label="外协待发仓" value="221" />
|
<el-option label="供应商成品仓" value="222" />
|
<el-option label="工程退料仓" value="231" />
|
<el-option label="暂时仓" value="232" />
|
</el-select>
|
</el-form-item>
|
</el-form>
|
</div>
|
<div class="box-table" style="margin-top: 1%">
|
<el-table ref="singleTable" :data="tableData" style="width: 100%; height: 800px" 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>
|
import type { formContextKey } from "element-plus";
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
<template #footer>
|
<el-button type="primary" size="small" @click="outbound">直接出库</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 {
|
form: {
|
TargetAddress: "",
|
areaId: "2",
|
Warehouse: ""
|
},
|
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: [],
|
ids: [],
|
selectionSum: 0,
|
selectionClass: "less-style",
|
originalQuantity: 0,
|
};
|
},
|
methods: {
|
open(row) {
|
this.row = row;
|
this.showDetialBox = true;
|
this.originalQuantity = this.row.overOutQuantity;
|
this.selectionSum = this.row.overOutQuantity;
|
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";
|
}
|
},
|
outbound() {
|
if (!this.selection || !this.selection.length) {
|
this.$message.error("请选择需要出库的托盘");
|
return;
|
}
|
this.ids.push(this.row.id);
|
var param = {
|
"orderIds": this.ids,
|
"stockViews": this.selection,
|
"AreaId": this.form.areaId,
|
"Warehouse": this.form.Warehouse,
|
}
|
console.log(param);
|
this.http
|
.post(
|
"api/AllocateOutboundOrder/GenerateAllocateOutboundTask",
|
param,
|
"数据处理中"
|
)
|
.then((x) => {
|
if (!x.status) return this.$message.error(x.message);
|
this.$message.success("操作成功");
|
this.showDetialBox = false;
|
this.$emit("parentCall", ($vue) => {
|
$vue.getData();
|
});
|
});
|
},
|
getData() {
|
var param = {
|
"materielCode": this.row.materielCode,
|
"materielName": this.row.materielName,
|
"demandClassification": this.row.demandClassification,
|
}
|
this.http
|
// .post(
|
// "api/StockInfo/GetStockSelectViews?materielCode=" +
|
// this.row.materielCode,
|
// null,
|
// "查询中"
|
// )
|
.post("api/StockInfo/GetStockSelectViews", param, "查询中").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;
|
}
|
</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>
|
