<template>
|
<div>
|
<vol-box v-model="showDetialBox" :lazy="true" width="85%" :padding="15" title="单据明细信息">
|
<div class="box-head">
|
<el-alert :closable="false" style="width: 100%">
|
<el-row>
|
<el-col :span="16">
|
<span>已选中 {{ selection.length }} 项</span>
|
</el-col>
|
<el-col :span="8">
|
<el-link type="primary" size="small" style="float: right; height: 20px; margin-right: 10px"
|
@click="outbound">直接出库</el-link>
|
<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="search-form">
|
<label style="margin-left: 10px">物料编号：</label>
|
<el-input style="width: 310px" v-model="MaterialCode"></el-input>
|
<el-button size="small" type="primary" @click="getData">搜索</el-button>
|
|
</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="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-input style="width: 310px" v-model="Warehouse" placeholder="请输入调拨仓库"></el-input> -->
|
<el-select v-model="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: 630px" highlight-current-row
|
height="500px" @row-click="handleRowClick"
|
@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-link type="primary"
|
:disabled="getButtonEnable(item.prop, scoped.row)" @click="tableButtonClick(scoped.row, item)"><i
|
:class="item.icon" style="font-size: 22px"></i></el-link></el-tooltip>
|
</div>
|
|
<div v-else-if="item.type == 'tags'">
|
<el-tag size="small" :type="scoped.row.remark === '有库存' ? 'primary' : 'error'">
|
{{ getDictionary(scoped.row, item) }}
|
</el-tag>
|
</div>
|
<div v-else-if="item.type == 'tag'">
|
<el-tag size="small">
|
{{ getDictionary(scoped.row, item) }}
|
</el-tag>
|
</div>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
<div style="margin-top: 20px; text-align: right;">
|
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
|
:current-page="paginations.page" :page-sizes="paginations.sizes" :page-size="paginations.size"
|
layout="total, sizes, prev, pager, next, jumper" :total="paginations.total"> <!-- 关键：绑定total属性 -->
|
</el-pagination>
|
</div>
|
</vol-box>
|
<stock-select ref="child" @parentCall="parentCall"></stock-select>
|
</div>
|
</template>
|
<script>
|
import VolBox from "@/components/basic/VolBox.vue";
|
import VolForm from "@/components/basic/VolForm.vue";
|
import StockSelect from "./AllocateStockSelect.vue";
|
export default {
|
components: { VolBox, VolForm, StockSelect },
|
data() {
|
return {
|
row: null,
|
areaId: "2",
|
Warehouse: "",
|
showDetialBox: false,
|
flag: false,
|
MaterialCode: "",
|
currentRow: null,
|
selection: [],
|
tableData: [],
|
tableColumns: [
|
{
|
prop: "id",
|
title: "Id",
|
type: "int",
|
width: 90,
|
hidden: true,
|
},
|
{
|
prop: "orderId",
|
title: "出库单主键",
|
type: "string",
|
width: 90,
|
hidden: true,
|
},
|
{
|
prop: "materielCode",
|
title: "物料编号",
|
type: "string",
|
width: 150,
|
},
|
{
|
prop: "materielName",
|
title: "物料名称",
|
type: "string",
|
width: 150,
|
},
|
{
|
prop: "demandClassification",
|
title: "需求分类",
|
type: "string",
|
width: 150,
|
},
|
{
|
prop: "remark",
|
title: "是否有库存",
|
type: "tags",
|
width:120,
|
},
|
{
|
prop: "orderQuantity",
|
title: "单据数量",
|
type: "string",
|
width: 90,
|
},
|
{
|
prop: "notOutQuantity",
|
title: "未出库数量",
|
type: "int",
|
width: 100,
|
},
|
{
|
prop: "overOutQuantity",
|
title: "已出数量",
|
type: "string",
|
width: 90,
|
},
|
{
|
prop: "orderDetailStatus",
|
title: "订单明细状态",
|
type: "tag",
|
width: 120,
|
bindKey: "OrderStateEmun"
|
},
|
{
|
prop: "assignStock",
|
title: "指定库存",
|
type: "icon",
|
width: 90,
|
icon: "el-icon-s-grid",
|
},
|
// {
|
// prop: "viewDetail",
|
// title: "出库详细",
|
// type: "icon",
|
// width: 90,
|
// icon: "el-icon-s-operation",
|
// },
|
{
|
prop: "creater",
|
title: "创建人",
|
type: "string",
|
width: 90,
|
},
|
{
|
prop: "createDate",
|
title: "创建时间",
|
type: "datetime",
|
width: 160,
|
},
|
{
|
prop: "modifier",
|
title: "修改人",
|
type: "string",
|
width: 100,
|
},
|
{
|
prop: "modifyDate",
|
title: "修改时间",
|
type: "datetime",
|
width: 160,
|
},
|
{
|
prop: "remark",
|
title: "备注",
|
type: "string",
|
},
|
],
|
paginations: {
|
sort: "id",
|
order: "desc",
|
Foots: "",
|
total: 0,
|
// 2020.08.29增加自定义分页条大小
|
sizes: [30, 60, 100, 120],
|
size: 30, // 默认分页大小
|
Wheres: [],
|
page: 1,
|
rows: 30,
|
},
|
searchFormOptions: [
|
[
|
{
|
title: "单据编号",
|
field: "allocation_code",
|
type: "like",
|
},
|
{
|
title: "单据类型",
|
field: "allocation_type",
|
type: "select",
|
dataKey: "OrderType",
|
data: [],
|
},
|
{
|
title: "单据状态",
|
field: "allocation_state",
|
type: "select",
|
dataKey: "OrderState",
|
data: [],
|
},
|
],
|
],
|
searchFormFields: {
|
allocation_code: "",
|
allocation_type: "",
|
allocation_state: "",
|
},
|
dictionaryList: null,
|
};
|
},
|
methods: {
|
open(row) {
|
this.row = row;
|
this.showDetialBox = true;
|
this.getDictionaryData();
|
this.getData();
|
},
|
getData() {
|
var wheres = [{ name: "orderId", value: this.row.id }, { name: "materielCode", value: this.MaterialCode, DisplayType: "text" }];
|
var param = {
|
page: this.paginations.page,
|
rows: this.paginations.rows,
|
sort: this.paginations.sort,
|
order: this.paginations.order,
|
wheres: JSON.stringify(wheres), // 查询条件，格式为[{ name: "字段", value: "xx" }]
|
};
|
console.log(param);
|
this.http
|
.post("api/AllocateOutboundOrderDetail/GetPageData", param, "查询中")
|
.then((x) => {
|
this.tableData = x.rows;
|
this.MaterialCode = "";
|
this.paginations.total = x.total;
|
this.tableData = x.rows;
|
});
|
},
|
tableButtonClick(row, column) {
|
if (column.prop == "assignStock") {
|
if (row.overOutQuantity > row.orderQuantity) {
|
this.$message.error("该单据已没有数量可出库");
|
return;
|
}
|
console.log(row);
|
this.$refs.child.open(row);
|
}
|
},
|
outbound() {
|
if (this.selection.length === 0) {
|
return this.$message.error("请选择单据明细");
|
}
|
var keys = this.selection.map((item) => item.id); // 获取选中行的id
|
var param = {
|
"orderIds": keys,
|
"AreaId": this.areaId,
|
"Warehouse": this.Warehouse,
|
}
|
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();
|
});
|
});
|
},
|
setCurrent(row) {
|
this.$refs.singleTable.setCurrentRow(row);
|
},
|
// handleCurrentChange(val) {
|
// this.currentRow = val;
|
// },
|
handleSizeChange(size) {
|
console.log(size);
|
this.paginations.size = size;
|
this.paginations.rows = size;
|
this.paginations.page = 1; // 重置页码
|
this.getData();
|
},
|
|
handleCurrentChange(page) {
|
console.log(page)
|
this.paginations.page = page;
|
this.getData();
|
},
|
getButtonEnable(propName, row) {
|
if (propName == "assignStock") {
|
if (row.orderDetailStatus !== 0 && row.orderDetailStatus !== 60 && row.orderDetailStatus !== 70
|
) {
|
return true;
|
} else {
|
return false;
|
}
|
}
|
return false;
|
},
|
parentCall(fun) {
|
if (typeof fun != "function") {
|
return console.log("扩展组件需要传入一个回调方法才能获取父级Vue对象");
|
}
|
fun(this);
|
},
|
handleRowClick(row) {
|
this.$refs.singleTable.toggleRowSelection(row);
|
},
|
handleSelectionChange(val) {
|
this.selection = val;
|
},
|
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];
|
}
|
}
|
},
|
}
|
};
|
</script>
|
<style scoped>
|
.text-button {
|
border: 0px;
|
}
|
</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;
|
}
|
|
.search-form {
|
display: flex;
|
padding: 10px;
|
line-height: 34px;
|
|
button {
|
margin-left: 10px;
|
}
|
}
|
</style>
|
