Skip to content

M
mes-ui
Commit 0f26b924 authored by 仇晓婷's avatar 仇晓婷
Browse files
Options

电子对账单数据对接

parent 914dfa78
Hide whitespace changes
Inline Side-by-side
Showing with 189 additions and 384 deletions
pages/order/bill/index.vue
View file @ 0f26b924
<template>
<div>
<div class="order-bill">
<Row>
<Col span="4">
<Input
v-model="keys"
search
placeholder="请输入订单编号"
enter-button
clearable
style="width:280px;margin:10px 5px;"
/>
</Col>
......@@ -14,81 +14,55 @@
<a @click="clickSeach">高级搜索</a>
</Col>
</Row>
<div class="bill">
<div class="bill-l">
<h4 class="title1">订单信息</h4>
<div class="body" v-for="(li,index) in listData" :key="index" @click="itemClick">
<div class="l-list">
<Row class="title-i">
<Col :span="12">{{li.name}}</Col>
<Col :span="12">{{li.code}}</Col>
</Row>
<Row class="bady-c">
<Col :span="12">订单状态：{{li.status}}</Col>
<Col :span="12">紧急程度：{{li.chengdu}}</Col>
</Row>
<Row class="bady-c">
<Col :span="12">数量：{{li.cont}}</Col>
<Col :span="12">任务类型：{{li.type}}</Col>
</Row>
<div class="bady-c">图号：{{li.tuhao}}</div>
<div class="bady-c">批次号：{{li.picihao}}</div>
<div class="bady-c">项目号：{{li.xianmuhao}}</div>
</div>
</div>
</div>
<div class="bill-r">
<h4 class="title2">工单信息</h4>
<div class="r-list">
<div v-for="(li,index) in WorkOrder1" :key="index">
<div
class="gong-dan"
:class="li.status==0?'gong-dan0':li.status==1?'gong-dan1':li.status==2?'gong-dan2':'gong-dan3'"
>
<div>{{li.title}}</div>
<div>{{li.name}}</div>
<div>{{li.PaigaongTime}}</div>
<div>{{li.finshTime}}</div>
<div>{{li.startTime}}</div>
<div>{{li.endTime}}</div>
</div>
</div>
</div>
<div class="r-list">
<div v-for="(li,index) in WorkOrder2" :key="index">
<div
class="gong-dan"
:class="li.status==0?'gong-dan0':li.status==1?'gong-dan1':li.status==2?'gong-dan2':'gong-dan3'"
>
<div>{{li.title}}</div>
<div>{{li.name}}</div>
<div>{{li.PaigaongTime}}</div>
<div>{{li.finshTime}}</div>
<div>{{li.startTime}}</div>
<div>{{li.endTime}}</div>
<h4 class="title1">订单信息</h4>
<h4 class="title2">订单信息</h4>
</div>
<div class="bill-conten">
<div class="bill-body" v-for="(li,index) in listData" :key="index" @click="itemClick">
<div class="body">
<div class="bill-l">
<div class="l-list">
<Row class="title-i">
<Col :span="12">{{li.mesCode}}</Col>
<Col :span="12" style="text-align: right;padding-right:10px">{{li.productName}}</Col>
</Row>
<Row class="bady-c">
<Col :span="8">订单状态：{{li.status}}</Col>
<Col :span="16">工艺规程：{{li.actualFinishDate}}</Col>
</Row>
<div class="bady-c">订单计划开始时间：{{li.demandStartDate}}</div>
<div class="bady-c">订单计划结束时间：{{li.demandFinishDate}}</div>
<div class="bady-c">实际开始时间：{{li.actualStartDate}}</div>
<div class="bady-c">实际结束时间：{{li.actualFinishDate}}</div>
</div>
</div>
</div>
<div class="r-list">
<div v-for="(li,index) in WorkOrder3" :key="index">
<div
class="gong-dan"
:class="li.status==0?'gong-dan0':li.status==1?'gong-dan1':li.status==2?'gong-dan2':'gong-dan3'"
>
<div>{{li.title}}</div>
<div>{{li.name}}</div>
<div>{{li.PaigaongTime}}</div>
<div>{{li.finshTime}}</div>
<div>{{li.startTime}}</div>
<div>{{li.endTime}}</div>
<div class="bill-r">
<div class="r-list">
<div v-for="(item,index) in li.dispatchList" :key="index">
<!-- status=0,已完成，1正在进行，3暂停 -->
<div
class="gong-dan"
:class="item.status==0?'gong-dan0':item.status==1?'gong-dan1':item.status==2?'gong-dan2':'gong-dan3'"
>
<div>{{item.taskSeq}} {{item.detailName}}</div>
<div>人员：{{item.userNames}}</div>
<div>{{li.demandStartDate}}</div>
<div>{{li.demandFinishDate}}</div>
<div>{{li.actualStartDate}}</div>
<div>{{li.actualFinishDate}}</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<Modal v-model="modal" title="高级搜索" @on-ok="ok" @on-cancel="cancel">
<Form ref="form" :model="entity" :rules="rules" :label-width="90">
<Form ref="form" :model="entity" :label-width="90">
<Row>
<Col :span="12">
<FormItem label="订单" prop="name">
......@@ -122,210 +96,40 @@ export default {
keys: "",
modal: false,
entity: {},
listP: [
{
name: "DDBH_20200219",
code: "CR200J0001",
status: "已派发",
chengdu: "一级",
cont: 100,
type: "正式计划",
tuhao: "CLX-2K-001",
picihao: "20200519-LXG-001",
xianmuhao: "XM-20200519-LXG"
},
{
name: "DDBH_20200220",
code: "CR200J0001",
status: "已派发",
chengdu: "一级",
cont: 100,
type: "正式计划",
tuhao: "CLX-2K-001",
picihao: "20200519-LXG-001",
xianmuhao: "XM-20200519-LXG"
},
{
name: "DDBH_20200221",
code: "CR200J0001",
status: "已派发",
chengdu: "一级",
cont: 100,
type: "正式计划",
tuhao: "CLX-2K-001",
picihao: "20200519-LXG-001",
xianmuhao: "XM-20200519-LXG"
}
],
WorkOrder1: [
{
title: "10 作业准备",
name: "机加中心-操作工1",
PaigaongTime: "2020-03-12",
finshTime: "2020-03-12",
startTime: "2020-03-12",
endTime: "2020-03-12",
status: 0 //已完成
},
{
title: "20 接触网断电",
name: "机加中心-操作工1",
PaigaongTime: "2020-03-12",
finshTime: "2020-03-12",
startTime: "2020-03-12",
endTime: "2020-03-12",
status: 1 //正在进行
},
{
title: "30 有电作业",
name: "机加中心-操作工1",
PaigaongTime: "2020-03-12",
finshTime: "2020-03-12",
startTime: "2020-03-12",
endTime: "2020-03-12",
status: 2
},
{
title: "40 泄露试验",
name: "机加中心-操作工1",
PaigaongTime: "2020-03-12",
finshTime: "2020-03-12",
startTime: "2020-03-12",
endTime: "2020-03-12",
status: 2
},
{
title: "50 票据填写",
name: "机加中心-操作工1",
PaigaongTime: "2020-03-12",
finshTime: "2020-03-12",
startTime: "2020-03-12",
endTime: "2020-03-12",
status: 2
}
],
WorkOrder2: [
{
title: "10 车顶作业",
name: "机加中心-操作工1",
PaigaongTime: "2020-03-12",
finshTime: "2020-03-12",
startTime: "2020-03-12",
endTime: "2020-03-12",
status: 0 //已完成
},
{
title: "20 司机室作业",
name: "机加中心-操作工1",
PaigaongTime: "2020-03-12",
finshTime: "2020-03-12",
startTime: "2020-03-12",
endTime: "2020-03-12",
status: 3
},
{
title: "30 机械间作业",
name: "机加中心-操作工1",
PaigaongTime: "2020-03-12",
finshTime: "2020-03-12",
startTime: "2020-03-12",
endTime: "2020-03-12",
status: 2
},
{
title: "40 走行部作业",
name: "机加中心-操作工1",
PaigaongTime: "2020-03-12",
finshTime: "2020-03-12",
startTime: "2020-03-12",
endTime: "2020-03-12",
status: 2
}
],
WorkOrder3: [
{
title: "10 接车入库",
name: "机加中心-操作工1",
PaigaongTime: "2020-03-12",
finshTime: "2020-03-12",
startTime: "2020-03-12",
endTime: "2020-03-12",
status: 0 //已完成
},
{
title: "20 接触网断电",
name: "机加中心-操作工1",
PaigaongTime: "2020-03-12",
finshTime: "2020-03-12",
startTime: "2020-03-12",
endTime: "2020-03-12",
status: 1 //正在进行
},
{
title: "30 车顶检查",
name: "机加中心-操作工1",
PaigaongTime: "2020-03-12",
finshTime: "2020-03-12",
startTime: "2020-03-12",
endTime: "2020-03-12",
status: 1
},
{
title: "40 电务检查",
name: "机加中心-操作工1",
PaigaongTime: "2020-03-12",
finshTime: "2020-03-12",
startTime: "2020-03-12",
endTime: "2020-03-12",
status: 2
},
{
title: "50 供电",
name: "机加中心-操作工1",
PaigaongTime: "2020-03-12",
finshTime: "2020-03-12",
startTime: "2020-03-12",
endTime: "2020-03-12",
status: 2
},
{
title: "50 供电",
name: "机加中心-操作工1",
PaigaongTime: "2020-03-12",
finshTime: "2020-03-12",
startTime: "2020-03-12",
endTime: "2020-03-12",
status: 2
},
{
title: "50 供电",
name: "机加中心-操作工1",
PaigaongTime: "2020-03-12",
finshTime: "2020-03-12",
startTime: "2020-03-12",
endTime: "2020-03-12",
status: 2
},
{
title: "50 供电",
name: "机加中心-操作工1",
PaigaongTime: "2020-03-12",
finshTime: "2020-03-12",
startTime: "2020-03-12",
endTime: "2020-03-12",
status: 2
}
]
WorkOrder: [],
rules: []
};
},
computed: {
listData() {
return this.listP.filter(u => {
return u.name.indexOf(this.keys) > -1;
return this.WorkOrder.filter(u => {
return u.mesCode.indexOf(this.keys) > -1;
});
}
},
mounted() {
this.getMessage();
},
methods: {
getMessage() {
let conditions = [
{
conditionalType: "Equal",
fieldName: "",
fieldValue: ""
}
];
this.$api
.post(`${PlanUrl}/orderaudit/pagedaccountmesorders`, {
conditions: conditions
})
.then(res => {
if (res.success) {
this.WorkOrder = res.result.items;
}
});
},
clickSeach() {
this.modal = true;
},
......@@ -343,136 +147,137 @@ export default {
};
</script>
<style lang="less" >
.bill {
display: flex;
display: -webkit-flex;
height: 83vh;
overflow: hidden;
margin-left: 3px;
border: 1px solid #e4e6ed;
.bill-l {
width: 400px;
.order-bill {
.bill {
display: flex;
display: -webkit-flex;
height: 49px;
line-height: 49px;
border: 1px solid #e4e6ed;
height: 100%;
overflow: hidden;
.title1 {
width: 400px;
background: rgba(81, 90, 110, 0.2);
height: 49px;
line-height: 49px;
padding-left: 10px;
}
.body:hover {
cursor: pointer;
}
.body {
padding: 15px 0;
border-bottom: 1px solid #cacbd0;
.l-list {
width: 360px;
height: 200px;
border: 1px solid #2680eb;
border-radius: 4px;
margin: 0 auto;
.title-i {
height: 36px;
line-height: 36px;
padding-left: 10px;
border-bottom: 1px dashed #a7b8cc;
font-weight: bold;
color: rgba(38, 128, 235, 1);
}
.bady-c {
height: 31px;
line-height: 31px;
padding-left: 10px;
}
}
}
}
.bill-r {
width: 1495px;
height: 100%;
border: 1px solid #e4e6ed;
// overflow: hidden;
.title2 {
width: 1499px;
background: rgba(38, 128, 235, 0.2);
height: 49px;
line-height: 49px;
padding-left: 10px;
}
.r-list {
width: 1495px;
display: -webkit-flex;
display: flex;
padding: 15px 10px;
border-bottom: 1px solid #cacbd0;
flex-wrap: nowrap;
overflow-x: auto;
.gong-dan {
div {
height: 30px;
}
div:nth-child(1) {
color: #515a6e;
font-size: 16px;
font-weight: bold;
}
div:nth-child(2) {
color: #515a6e;
font-size: 14px;
}
div:nth-child(3),
div:nth-child(4),
div:nth-child(5),
div:nth-child(6) {
color: #666;
font-size: 14px;
opacity: 0.6;
}
}
.gong-dan0 {
width: 198.5px;
height: 200px;
background-image: url("../../../assets/images/bill/black.png");
padding: 13px 20px;
// float: left;
div:nth-child(1),
div:nth-child(2) {
color: #515a6e;
}
}
.gong-dan1 {
width: 198.5px;
height: 200px;
background-image: url("../../../assets/images/bill/green.png");
padding: 13px 20px;
// float: left;
div:nth-child(1),
div:nth-child(2) {
color: #0dd78d;
}
}
.gong-dan2 {
width: 198.5px;
height: 200px;
background-image: url("../../../assets/images/bill/blue.png");
padding: 13px 20px;
// float: left;
div:nth-child(1),
div:nth-child(2) {
color: #2680eb;
opacity: 0.5;
}
.bill-conten {
height: 77vh;
overflow: auto;
border: 1px solid #e4e6ed;
.bill-body {
.body {
display: flex;
display: -webkit-flex;
border-bottom: 1px solid #e4e6ed;
.bill-l {
width: 400px;
padding: 15px 0;
.l-list {
width: 360px;
height: 200px;
border: 1px solid #2680eb;
border-radius: 4px;
margin: 0 auto;
.title-i {
height: 36px;
line-height: 36px;
padding-left: 10px;
border-bottom: 1px dashed #a7b8cc;
font-weight: bold;
color: rgba(38, 128, 235, 1);
}
.bady-c {
height: 31px;
line-height: 31px;
padding-left: 10px;
}
}
.l-list:hover {
cursor: pointer;
}
}
}
.gong-dan3 {
width: 198.5px;
height: 200px;
background-image: url("../../../assets/images/bill/red.png");
padding: 13px 20px;
// float: left;
div:nth-child(1),
div:nth-child(2) {
color: #fe7777;
.bill-r {
width: 1495px;
border-left: 1px solid #e4e6ed;
.r-list {
display: -webkit-flex;
display: flex;
padding: 15px 10px;
flex-wrap: nowrap;
overflow-x: auto;
.gong-dan {
div {
height: 30px;
}
div:nth-child(1) {
color: #515a6e;
font-size: 16px;
font-weight: bold;
}
div:nth-child(2) {
color: #515a6e;
font-size: 14px;
}
div:nth-child(3),
div:nth-child(4),
div:nth-child(5),
div:nth-child(6) {
color: #666;
font-size: 14px;
opacity: 0.6;
}
}
.gong-dan0 {
width: 198.5px;
height: 200px;
background-image: url("../../../assets/images/bill/black.png");
padding: 13px 20px;
// float: left;
div:nth-child(1),
div:nth-child(2) {
color: #515a6e;
}
}
.gong-dan1 {
width: 198.5px;
height: 200px;
background-image: url("../../../assets/images/bill/green.png");
padding: 13px 20px;
// float: left;
div:nth-child(1),
div:nth-child(2) {
color: #0dd78d;
}
}
.gong-dan2 {
width: 198.5px;
height: 200px;
background-image: url("../../../assets/images/bill/blue.png");
padding: 13px 20px;
// float: left;
div:nth-child(1),
div:nth-child(2) {
color: #2680eb;
opacity: 0.5;
}
}
.gong-dan3 {
width: 198.5px;
height: 200px;
background-image: url("../../../assets/images/bill/red.png");
padding: 13px 20px;
// float: left;
div:nth-child(1),
div:nth-child(2) {
color: #fe7777;
}
}
}
}
}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment