<template>
|
<div class="order-manage">
|
<div class="filter">
|
<div class="filter-card">
|
<CommonSearch
|
:show-add="false"
|
:show-download="false"
|
:amount-view="true"
|
:totalObject="totalObject"
|
:otherOptions="otherOptions"
|
:show-action-btn="false"
|
:placeholder="'请输入订单编号'"
|
@searchClick="searchClick"
|
/>
|
</div>
|
</div>
|
<div class="content">
|
<div class="content-top">
|
<div class="list-view">
|
<TableCommonView
|
ref="tableListRef"
|
:table-list="tableList"
|
@tableRowClick="tableRowClick"
|
:selectClassRow="selectRow"
|
@selTableCol="selTableCol"
|
@getSelectArray="getSelectArray"
|
:outsourceOrderStatus="'status'"
|
>
|
<template slot="tableButton">
|
<el-table-column label="操作" width="160" fixed="right">
|
<template slot-scope="scope">
|
<template v-if="scope.row.status == 1">
|
<el-button type="text" size="small" @click.stop="changeStatusClick(scope.row, '确认')"
|
>确认</el-button
|
>
|
<el-button type="text" size="small" @click.stop="changeStatusClick(scope.row, '取消')"
|
>取消</el-button
|
>
|
</template>
|
<el-button
|
v-else-if="scope.row.status == 2 || scope.row.status == 4"
|
type="text"
|
size="small"
|
@click.stop="applyClick(scope.row)"
|
>申请物料</el-button
|
>
|
<template v-else-if="scope.row.status == 5">
|
<el-button type="text" size="small" @click.stop="changeStatusClick(scope.row, '生产完成')"
|
>生产完成</el-button
|
>
|
<el-button type="text" size="small" @click.stop="deliveryClick(scope.row)">发货</el-button>
|
</template>
|
<template v-else-if="scope.row.status == 6">
|
<el-button type="text" size="small" @click.stop="deliveryClick(scope.row)">发货</el-button>
|
<el-button type="text" size="small" @click.stop="changeStatusClick(scope.row, '发货完成')"
|
>发货完成</el-button
|
>
|
</template>
|
<span v-else>--</span>
|
</template>
|
</el-table-column>
|
</template>
|
</TableCommonView>
|
</div>
|
<div class="btn-pager">
|
<PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" />
|
</div>
|
</div>
|
<div class="content-bottom">
|
<div class="lable-view table-bottom-tabs">
|
<span class="name">{{ selectRow.number || "--" }}</span>
|
<div
|
class="tab-pane"
|
@click="tabClickBottom(1)"
|
:style="{
|
background: activeNameBottom == 1 ? '#2a78fb' : '#F1F3F8',
|
color: activeNameBottom == 1 ? '#fff' : '#666'
|
}"
|
>
|
产品信息
|
</div>
|
<div
|
class="tab-pane"
|
@click="tabClickBottom(2)"
|
:style="{
|
background: activeNameBottom == 2 ? '#2a78fb' : '#F1F3F8',
|
color: activeNameBottom == 2 ? '#fff' : '#666'
|
}"
|
>
|
物料申请单
|
</div>
|
<div
|
class="tab-pane"
|
@click="tabClickBottom(3)"
|
:style="{
|
background: activeNameBottom == 3 ? '#2a78fb' : '#F1F3F8',
|
color: activeNameBottom == 3 ? '#fff' : '#666'
|
}"
|
>
|
发货明细
|
</div>
|
</div>
|
<div class="list-view">
|
<TableCommonView
|
v-if="activeNameBottom == 1"
|
:table-list="bottomTwoTableList1"
|
v-loading="isTableBottomLoading"
|
element-loading-text="数据加载中，请耐心等待~"
|
@selTableCol="selBottomTableCol"
|
>
|
</TableCommonView>
|
<TableCommonView
|
v-if="activeNameBottom == 2"
|
:table-list="bottomTwoTableList2"
|
@selTableCol="selBottomTwoTableCol2"
|
>
|
</TableCommonView>
|
<TableCommonView
|
v-if="activeNameBottom == 3"
|
:table-list="bottomTwoTableList3"
|
@selTableCol="selBottomTwoTableCol3"
|
>
|
</TableCommonView>
|
</div>
|
</div>
|
</div>
|
<!-- 申请物料-->
|
<ApplyMaterialsDialog
|
v-if="editApplyConfig.visible"
|
:edit-common-config="editApplyConfig"
|
@reRreshData="reRreshData"
|
/>
|
<!-- 发货/发货信息 -->
|
<DeliveryDialog v-if="deliveryConfig.visible" :edit-common-config="deliveryConfig" @reRreshData="reRreshData" />
|
</div>
|
</template>
|
|
<script>
|
import {
|
outsourceOrderList,
|
outsourceOrderOverview,
|
outsourceOrderProductList,
|
getMaterialApplyList,
|
getDeliveryList,
|
changeOutsourceOrderStatus
|
} from "@/api/orderManageModule/orderManage"
|
import pageMixin from "@/components/makepager/pager/mixin/pageMixin"
|
import ApplyMaterialsDialog from "@/views/orderManageModule/orderManage/components/ApplyMaterialsDialog"
|
import DeliveryDialog from "@/views/orderManageModule/orderManage/components/DeliveryDialog"
|
export default {
|
name: "orderManage",
|
props: {},
|
components: { ApplyMaterialsDialog, DeliveryDialog },
|
mixins: [pageMixin],
|
computed: {},
|
data() {
|
return {
|
totalObject: {
|
value: 0,
|
label: "订单总量"
|
},
|
otherOptions: [
|
{
|
value: 0,
|
label: "待分配",
|
status: "yellow"
|
},
|
{
|
value: 0,
|
label: "已分配",
|
status: "success"
|
}
|
],
|
tableList: {},
|
tableColumn: [
|
{ label: "订单编号", prop: "number", min: 90, default: true },
|
{ label: "产品数量", prop: "productQuantity", min: 120 },
|
{ label: "签约日期", prop: "signTime", min: 100 },
|
{ label: "交付日期", prop: "deliveryDate", min: 120 },
|
{ label: "状态", prop: "status", isCallMethod: true, getCallMethod: this.getStatus }
|
],
|
showCol: ["订单编号", "产品数量", "签约日期", "交付日期", "状态"],
|
selectRow: {},
|
activeNameBottom: 1,
|
isTableBottomLoading: false,
|
bottomTwoTableList1: {},
|
bottomTwoTableList2: {},
|
bottomTwoTableList3: {},
|
productColumn: [
|
{ label: "产品名称", prop: "productName", min: 90, default: true },
|
{ label: "产品编号", prop: "productId", min: 120 },
|
{ label: "Bom编号", prop: "bomID", min: 100 },
|
{ label: "产品规格", prop: "specs", min: 120 },
|
{ label: "产品数量", prop: "amount" },
|
{ label: "单位", prop: "unit", min: 120 }
|
],
|
showProductCol: ["产品名称", "产品编号", "Bom编号", "产品规格", "产品数量", "单位"],
|
materialRquestColumn: [
|
{ label: "产品名称", prop: "materialName", min: 90, default: true },
|
{ label: "产品编号", prop: "materialNumber", min: 120 },
|
{ label: "产品数量", prop: "amount", min: 100 },
|
{ label: "产品规格", prop: "specs", min: 120 },
|
{ label: "产品型号", prop: "type" },
|
{ label: "单位", prop: "unit", min: 120 }
|
],
|
showMaterialRquestCol: ["产品名称", "产品编号", "产品数量", "产品规格", "产品型号", "单位"],
|
deliveryRquestColumn: [
|
{ label: "发货单号", prop: "number", default: true },
|
{ label: "产品名称", prop: "productName", default: true },
|
{ label: "产品编号", prop: "productId" },
|
{ label: "订单数量", prop: "amount" },
|
{ label: "发货数量", prop: "sendAmount" },
|
{ label: "产品规格", prop: "specs" },
|
{ label: "产品型号", prop: "type" },
|
{ label: "单位", prop: "unit" },
|
{ label: "运单号", prop: "waybillNumber" },
|
{ label: "承运商", prop: "carrier" },
|
{ label: "创建时间", prop: "createdAt", min: 100 }
|
],
|
showDeliveryRquestCol: [
|
"发货单号",
|
"产品名称",
|
"产品编号",
|
"订单数量",
|
"发货数量",
|
"产品规格",
|
"产品型号",
|
"单位",
|
"运单号",
|
"承运商",
|
"创建时间"
|
],
|
editApplyConfig: {
|
visible: false,
|
title: "物料申请",
|
infomation: {}
|
},
|
deliveryConfig: {
|
visible: false,
|
title: "发货",
|
infomation: {}
|
},
|
searchParam: {
|
keyword: "",
|
page: 1,
|
pageSize: 15
|
}
|
}
|
},
|
created() {
|
this.setTable()
|
this.getData()
|
},
|
methods: {
|
reRreshData() {
|
this.getData()
|
},
|
// 获取top订单列表数据
|
async getData() {
|
this.searchParam.page = this.pagerOptions.currPage
|
this.searchParam.pageSize = this.pagerOptions.pageSize
|
let rsp = await outsourceOrderList(this.searchParam)
|
let list = rsp
|
if (list && list.code == 200) {
|
this.tableList.tableInfomation = list.data
|
this.pagerOptions.totalCount = list.total
|
if (list.total > 0) {
|
this.selectRow = list.data[0]
|
if (this.activeNameBottom == 1) {
|
this.getProductListMethod(this.selectRow.id)
|
} else if (this.activeNameBottom == 2) {
|
this.getMaterialApplyList(this.selectRow.number)
|
} else {
|
this.getDeliveryList(this.selectRow.id)
|
}
|
} else {
|
this.selectRow = {}
|
}
|
this.overview()
|
}
|
},
|
// 获取产品信息
|
getProductListMethod(id) {
|
outsourceOrderProductList({ outsourcingOrderId: id }).then((res) => {
|
if (res.code == 200) {
|
this.bottomTwoTableList1.tableInfomation = res.data
|
}
|
})
|
},
|
// 获取物料申请单
|
getMaterialApplyList(number) {
|
getMaterialApplyList({ number: number }).then((res) => {
|
if (res.code == 200) {
|
this.bottomTwoTableList2.tableInfomation = res.data
|
}
|
})
|
},
|
// 获取发货列表
|
getDeliveryList(id) {
|
getDeliveryList({ outsourcingOrderID: id }).then((res) => {
|
console.log(res)
|
if (res.code == 200) {
|
let list = res.data.map((item) => {
|
return {
|
number: item.outsourcingOrderDelivery.number,
|
productName: item.outsourcingOrderProduct.productName,
|
productId: item.outsourcingOrderProduct.productId,
|
amount: item.outsourcingOrderProduct.amount,
|
sendAmount: item.sendAmount,
|
type: item.outsourcingOrderProduct.type,
|
unit: item.outsourcingOrderProduct.unit,
|
waybillNumber: item.outsourcingOrderDelivery.waybillNumber,
|
carrier: item.outsourcingOrderDelivery.carrier,
|
createdAt: item.createdAt
|
}
|
})
|
this.bottomTwoTableList3.tableInfomation = list
|
}
|
})
|
},
|
overview() {
|
outsourceOrderOverview().then((reply) => {
|
this.totalObject.value = reply.data.total || 0
|
this.otherOptions.map((item) => {
|
if (item.label === "待分配") {
|
item.value = reply.data.waitAssigned
|
} else if (item.label === "已分配") {
|
item.value = reply.data.hasAssigned
|
}
|
})
|
})
|
},
|
searchClick(val) {
|
this.searchParam.keyword = val
|
this.pagerOptions.currPage = 1
|
this.bottomTwoTableList1.tableInfomation = []
|
this.bottomTwoTableList2.tableInfomation = []
|
this.bottomTwoTableList3.tableInfomation = []
|
this.getData()
|
},
|
tableRowClick(row, column, event) {
|
console.log(row, column, event)
|
this.selectRow = row
|
if (this.activeNameBottom == 1) {
|
this.getProductListMethod(this.selectRow.id)
|
} else if (this.activeNameBottom == 2) {
|
this.getMaterialApplyList(this.selectRow.number)
|
} else {
|
this.getDeliveryList(this.selectRow.id)
|
}
|
},
|
tableRowClassName({ row }) {
|
if (row.id == this.selectRow.id) {
|
return "onSelect"
|
}
|
},
|
getSelectArray() {},
|
// 状态修改
|
changeStatusClick(row, val) {
|
if (val == "确认") {
|
this.changeOutsourceOrderStatus(row.number, 2, "确认成功")
|
} else if (val == "取消") {
|
this.changeOutsourceOrderStatus(row.number, 0, "取消成功")
|
} else if (val == "生产完成") {
|
this.$confirm("是否确认生产完成?", "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning"
|
})
|
.then(() => {
|
this.changeOutsourceOrderStatus(row.number, 6, "生产完成成功")
|
})
|
.catch(() => {
|
this.$message.warning("已取消生产完成")
|
})
|
} else if (val == "发货完成") {
|
this.$confirm("是否确认全部发货完成?", "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning"
|
})
|
.then(() => {
|
this.changeOutsourceOrderStatus(row.number, 7, "全部发货完成成功")
|
})
|
.catch(() => {
|
this.$message.warning("已取消发货完成")
|
})
|
}
|
},
|
changeOutsourceOrderStatus(number, status, str) {
|
changeOutsourceOrderStatus({
|
outsourcingOrderNumber: number,
|
status: status
|
})
|
.then((reply) => {
|
if (reply.code == 200) {
|
this.getData()
|
this.$message.success(str)
|
}
|
})
|
.catch(() => {})
|
},
|
// 申请物料
|
applyClick(row) {
|
this.editApplyConfig.visible = true
|
this.editApplyConfig.title = "物料申请"
|
this.editApplyConfig.infomation = {
|
outsourcingOrderNumber: row.number,
|
...row,
|
products: []
|
}
|
},
|
// 发货
|
deliveryClick(row) {
|
this.deliveryConfig.visible = true
|
this.deliveryConfig.title = "发货"
|
this.deliveryConfig.infomation = {
|
id: row.id,
|
number: row.number
|
}
|
},
|
tabClickBottom(activeNameBottom) {
|
this.activeNameBottom = activeNameBottom
|
if (Object.keys(this.selectRow).length > 0) {
|
if (activeNameBottom == 1) {
|
this.getProductListMethod(this.selectRow.id)
|
} else if (activeNameBottom == 2) {
|
this.getMaterialApplyList(this.selectRow.number)
|
} else {
|
this.getDeliveryList(this.selectRow.id)
|
}
|
}
|
},
|
setTable() {
|
this.tableList = {
|
selectIndex: true,
|
selectBox: true,
|
tableInfomation: [],
|
allcol: [],
|
showcol: this.showCol,
|
tableColumn: this.setColumnVisible(this.showCol, this.tableColumn)
|
}
|
this.setTableList(this.tableList)
|
// bottom 产品信息
|
this.tableBottomColumn = this.productColumn
|
this.showBottomCol = this.showProductCol
|
this.setBottomList()
|
this.setBottomMaterialList()
|
this.setBottomDeliveryList()
|
},
|
// bom 产品新列表
|
setBottomList() {
|
this.bottomTwoTableList1 = {
|
selectIndex: true,
|
tableInfomation: [],
|
allcol: [],
|
showcol: this.showBottomCol,
|
tableColumn: this.setColumnVisible(this.showBottomCol, this.tableBottomColumn)
|
}
|
this.setTableList(this.bottomTwoTableList1)
|
},
|
setTableList(tableList) {
|
tableList.allcol = tableList.tableColumn.filter((ele) => !ele.default).map((ele) => ele.label)
|
this.searchOptions = []
|
for (let i = 0; i < tableList.tableColumn.length; i++) {
|
const label = tableList.tableColumn[i].label
|
const value = tableList.tableColumn[i].prop
|
this.searchOptions.push({ value: value, label: label })
|
}
|
},
|
// bottom 产品信息
|
selBottomTableCol(val) {
|
this.showProductCol = val
|
this.bottomTwoTableList1.tableColumn = this.setColumnVisible(val, this.tableBottomColumn)
|
},
|
setColumnVisible(showCol, tableColumn) {
|
return tableColumn.map((ele) => {
|
return {
|
...ele,
|
isShowColumn: showCol.includes(ele.label)
|
}
|
})
|
},
|
selTableCol(val) {
|
this.showcol = val
|
this.tableList.tableColumn = this.setColumnVisible(val)
|
},
|
// bottom 物料申请单
|
setBottomMaterialList() {
|
this.bottomTwoTableList2 = {
|
selectIndex: true,
|
tableInfomation: [],
|
allcol: [],
|
showcol: this.showMaterialRquestCol,
|
tableColumn: this.setColumnVisible(this.showMaterialRquestCol, this.materialRquestColumn)
|
}
|
this.setTableList(this.bottomTwoTableList2)
|
},
|
selBottomTwoTableCol2(val) {
|
this.showMaterialRquestCol = val
|
this.bottomTwoTableList1.tableColumn = this.setBottomTwoTableColumn1(val, this.materialRquestColumn)
|
},
|
// bottom 物料申请单
|
setBottomDeliveryList() {
|
this.bottomTwoTableList3 = {
|
selectIndex: true,
|
tableInfomation: [],
|
allcol: [],
|
showcol: this.showDeliveryRquestCol,
|
tableColumn: this.setColumnVisible(this.showDeliveryRquestCol, this.deliveryRquestColumn)
|
}
|
this.setTableList(this.bottomTwoTableList2)
|
},
|
selBottomTwoTableCol3(val) {
|
this.showDeliveryRquestCol = val
|
this.bottomTwoTableList3.tableColumn = this.setBottomTwoTableColumn1(val, this.deliveryRquestColumn)
|
},
|
// 状态
|
getStatus(val) {
|
return val === 1
|
? "待确认"
|
: val === 2
|
? "待生产"
|
: val === 3
|
? "待领料审核"
|
: val === 4
|
? "领料审核拒绝"
|
: val === 5
|
? "生产中"
|
: val === 6
|
? "生产完成"
|
: val === 7
|
? "发货完成"
|
: val == 8
|
? "入库完成"
|
: val == 9
|
? "关闭"
|
: "--"
|
}
|
}
|
}
|
</script>
|
|
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
<style lang="scss" scoped>
|
.order-manage {
|
height: 100%;
|
overflow: hidden;
|
background-color: transparent;
|
.filter {
|
height: 80px;
|
display: flex;
|
align-items: center;
|
padding: 12px 20px 0 20px;
|
&-card {
|
height: 80px;
|
display: flex;
|
align-items: center;
|
box-sizing: border-box;
|
padding: 10px 20px;
|
flex: 1;
|
border-radius: 12px;
|
background-color: #fff;
|
}
|
}
|
.content {
|
width: 100%;
|
height: calc(100% - 102px);
|
box-sizing: border-box;
|
padding: 10px 20px;
|
border-radius: 12px;
|
.content-top {
|
min-height: 70px;
|
background-color: #fff;
|
height: 48%;
|
border-radius: 12px;
|
.list-view {
|
height: calc(100% - 60px);
|
}
|
}
|
.content-bottom {
|
background-color: #fff;
|
min-height: 70px;
|
height: calc(52% - 10px);
|
margin-top: 10px;
|
// padding: 10px 20px;
|
.lable-view {
|
width: 100%;
|
background: #e6ecf2;
|
height: 40px;
|
line-height: 40px;
|
position: relative;
|
.name {
|
border-left: 4px solid #2a78fb;
|
padding-left: 10px;
|
margin-right: 40px;
|
}
|
.sure-btn {
|
float: right;
|
position: absolute;
|
right: 0;
|
top: 0;
|
}
|
}
|
.list-view {
|
height: calc(100% - 40px);
|
}
|
// 列表下的页签的样式
|
.table-bottom-tabs {
|
height: 34px;
|
line-height: 34px;
|
background: #e6ecf2;
|
display: flex;
|
font-size: 14px;
|
.tab-pane {
|
min-width: 60px;
|
width: auto;
|
padding: 0 20px;
|
margin-right: 20px;
|
text-align: center;
|
background: #2a78fb;
|
cursor: pointer;
|
border-top-left-radius: 20px;
|
border-top-right-radius: 20px;
|
}
|
}
|
}
|
}
|
}
|
::v-deep {
|
.el-table {
|
height: auto !important;
|
.el-table--fit {
|
height: 90%;
|
}
|
.onSelect {
|
background: #ebf2ff;
|
}
|
}
|
.el-table {
|
height: 100% !important;
|
}
|
}
|
</style>
|
