<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="onFilterSearch"
|
/>
|
</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">
|
<el-button v-if="scope.row.status == 0" type="text" size="small">待确认</el-button>
|
<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">生产完成</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">关闭</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 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: "quotationName", min: 120 },
|
{ label: "签约日期", prop: "validity_date", min: 100 },
|
{ label: "交付日期", prop: "client_name", min: 120 },
|
{ label: "状态", prop: "quotationStatus", isCallMethod: true, getCallMethod: this.getStatus }
|
],
|
showCol: ["订单编号", "产品数量", "签约日期", "交付日期", "状态"],
|
selectRow: {},
|
activeNameBottom: 1,
|
isTableBottomLoading: false,
|
bottomTwoTableList1: {},
|
bottomTwoTableList2: {},
|
bottomTwoTableList3: {},
|
productColumn: [
|
{ label: "产品名称", prop: "number", min: 90, default: true },
|
{ label: "产品编号", prop: "quotationName", min: 120 },
|
{ label: "Bom编号", prop: "validity_date", min: 100 },
|
{ label: "产品规格", prop: "client_name", min: 120 },
|
{ label: "产品数量", prop: "quotationStatus" },
|
{ label: "单位", prop: "client_name", min: 120 }
|
],
|
showProductCol: ["产品名称", "产品编号", "Bom编号", "产品规格", "产品数量", "单位"],
|
materialRquestColumn: [
|
{ label: "产品名称", prop: "number", min: 90, default: true },
|
{ label: "产品编号", prop: "quotationName", min: 120 },
|
{ label: "产品数量", prop: "validity_date", min: 100 },
|
{ label: "产品规格", prop: "client_name", min: 120 },
|
{ label: "产品型号", prop: "quotationStatus" },
|
{ label: "单位", prop: "client_name", min: 120 }
|
],
|
showMaterialRquestCol: ["产品名称", "产品编号", "产品数量", "产品规格", "产品型号", "单位"],
|
deliveryRquestColumn: [
|
{ label: "发货单号", prop: "number", default: true },
|
{ label: "产品名称", prop: "number", default: true },
|
{ label: "产品编号", prop: "quotationName" },
|
{ label: "订单数量", prop: "validity_date" },
|
{ label: "发货数量", prop: "validity_date" },
|
{ label: "产品规格", prop: "client_name" },
|
{ label: "产品型号", prop: "quotationStatus" },
|
{ label: "单位", prop: "client_name" },
|
{ label: "运单号", prop: "validity_date" },
|
{ label: "承运商", prop: "validity_date" },
|
{ label: "创建时间", prop: "client_name", min: 100 }
|
],
|
showDeliveryRquestCol: [
|
"发货单号",
|
"产品名称",
|
"产品编号",
|
"订单数量",
|
"发货数量",
|
"产品规格",
|
"产品型号",
|
"单位",
|
"运单号",
|
"承运商",
|
"创建时间"
|
],
|
editApplyConfig: {
|
visible: false,
|
title: "物料申请",
|
infomation: {}
|
},
|
deliveryConfig: {
|
visible: false,
|
title: "发货",
|
infomation: {}
|
}
|
}
|
},
|
created() {
|
this.setTable()
|
},
|
methods: {
|
reRreshData() {
|
this.getData()
|
},
|
addCommonClick() {
|
alert("露西666")
|
},
|
searchClick() {},
|
onFilterSearch() {},
|
tableRowClick() {},
|
getSelectArray() {},
|
// 申请物料
|
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 = {
|
outsourcingOrderNumber: row.number
|
}
|
},
|
tabClickBottom(activeNameBottom) {
|
this.activeNameBottom = activeNameBottom
|
// if (activeNameBottom == 1) {
|
// this.getProductListMethod(this.selectRow.id);
|
// } else {
|
// this.getMaterialApplyList(this.selectRow.number);
|
// }
|
},
|
setTable() {
|
this.tableList = {
|
selectIndex: true,
|
selectBox: true,
|
tableInfomation: [
|
{
|
number: "1111",
|
status: 4
|
}
|
],
|
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 === 0
|
? "待分配"
|
: val === 1
|
? "已分配"
|
: val === 2
|
? "待生产"
|
: val === 3
|
? "待领料审核"
|
: val === 4
|
? "领料审核拒绝"
|
: val === 5
|
? "生产中"
|
: val === 6
|
? "生产完成"
|
: "--"
|
}
|
}
|
}
|
</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>
|
