|
|
|
@ -1,45 +1,55 @@ |
|
|
|
<template> |
|
|
|
<div class="app-container"> |
|
|
|
<div class="app-container traceability-details-wrap"> |
|
|
|
<el-form ref="queryForm" :model="formData" :inline="true"> |
|
|
|
<el-form-item :label="getColumnName('OM_WorkOrder-WorkOrderId')"> |
|
|
|
<el-input |
|
|
|
v-model.trim="formData.WorkOrderId" |
|
|
|
v-model.trim="formData.workOrderId" |
|
|
|
placeholder="请输入查询内容" |
|
|
|
clearable |
|
|
|
size="small" |
|
|
|
style="width: 200px" |
|
|
|
style="width: 150px" |
|
|
|
/> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="项目"> |
|
|
|
<el-select |
|
|
|
v-model="formData.ProjectId" |
|
|
|
<el-form-item :label="getColumnName('OM_SerialOrder-SerialOrderId')"> |
|
|
|
<el-input |
|
|
|
v-model.trim="formData.serialOrderId" |
|
|
|
placeholder="请输入查询内容" |
|
|
|
clearable |
|
|
|
size="small" |
|
|
|
style="width: 150px" |
|
|
|
/> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="产线"> |
|
|
|
<el-select |
|
|
|
v-model="formData.workLineId" |
|
|
|
filterable |
|
|
|
clearable |
|
|
|
placeholder="请选择" |
|
|
|
style="width: 100%" |
|
|
|
style="width: 150px" |
|
|
|
> |
|
|
|
<el-option |
|
|
|
v-for="item in projectArray" |
|
|
|
:key="item['ME_Project-ProjectId']" |
|
|
|
:label="item['ME_Project-Descr']" |
|
|
|
:value="item['ME_Project-ProjectId']" |
|
|
|
v-for="item in workLineArray" |
|
|
|
:key="item['WorkLine-WorkLineid']" |
|
|
|
:label="item['WorkLine-Descr']" |
|
|
|
:value="item['WorkLine-WorkLineid']" |
|
|
|
/> |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item :label="getColumnName('OM_WorkOrder-ArtId')"> |
|
|
|
<el-input |
|
|
|
v-model.trim="formData.ArtId" |
|
|
|
placeholder="请输入查询内容" |
|
|
|
clearable |
|
|
|
size="small" |
|
|
|
style="width: 200px" |
|
|
|
/> |
|
|
|
<el-form-item label="时间"> |
|
|
|
<el-date-picker |
|
|
|
v-model="formData.date" |
|
|
|
type="date" |
|
|
|
style="width: 150px" |
|
|
|
format="yyyy-MM-dd" |
|
|
|
value-format="yyyy-MM-dd" |
|
|
|
placeholder="选择日期"> |
|
|
|
</el-date-picker> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item :label="getColumnName('OM_WorkOrderStatus-Status')"> |
|
|
|
<el-select |
|
|
|
v-model="formData.status" |
|
|
|
clearable |
|
|
|
style="width: 100%" |
|
|
|
style="width: 150px" |
|
|
|
filterable |
|
|
|
placeholder="请选择" |
|
|
|
> |
|
|
|
@ -51,6 +61,27 @@ |
|
|
|
/> |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="NG编码"> |
|
|
|
<el-input |
|
|
|
v-model.trim="formData.NGCode" |
|
|
|
placeholder="请输入查询内容" |
|
|
|
clearable |
|
|
|
size="small" |
|
|
|
style="width: 150px" |
|
|
|
/> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="是否返修"> |
|
|
|
<el-select |
|
|
|
v-model="formData.repair" |
|
|
|
clearable |
|
|
|
style="width: 150px" |
|
|
|
filterable |
|
|
|
placeholder="请选择" |
|
|
|
> |
|
|
|
<el-option label="是" value="true" /> |
|
|
|
<el-option label="否" value="false" /> |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item> |
|
|
|
<el-button |
|
|
|
type="primary" |
|
|
|
@ -61,210 +92,128 @@ |
|
|
|
> |
|
|
|
</el-form-item> |
|
|
|
</el-form> |
|
|
|
<el-table |
|
|
|
v-loading="loading" |
|
|
|
:data="tableData" |
|
|
|
@expand-change="loadOrderData" |
|
|
|
@row-click="setItem" |
|
|
|
border |
|
|
|
> |
|
|
|
<el-table-column type="expand"> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<el-table :data="scope.row.tableDetailsList" border> |
|
|
|
<el-table-column |
|
|
|
v-for="(item, index) in detailsHeaders" |
|
|
|
:key="index" |
|
|
|
:label="getColumnName(item)" |
|
|
|
:show-overflow-tooltip="true" |
|
|
|
align="center" |
|
|
|
> |
|
|
|
<template slot-scope="props"> |
|
|
|
<div |
|
|
|
v-if="item === 'OM_SerialOrder-SerialOrderStatus'" |
|
|
|
:class="[ colorClass[scope.row[item]], 'bg-div']" |
|
|
|
> |
|
|
|
{{ |
|
|
|
fieldTrans(props.row[item]['OM_SerialOrderStatus-Status']) |
|
|
|
}} |
|
|
|
</div> |
|
|
|
<span v-else-if="props.row[item] === '19000101000000'" /> |
|
|
|
<span v-else-if="item == 'OM_SerialOrder-PlanStartTime'" >{{parseTime(props.row[item])}}</span> |
|
|
|
<span v-else-if="item == 'OM_SerialOrder-PlanEndTime'" >{{parseTime(props.row[item])}}</span> |
|
|
|
<span v-else-if="item == 'OM_SerialOrder-ActEndTime'" >{{parseTime(props.row[item])}}</span> |
|
|
|
<span v-else>{{ props.row[item] }}</span> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
</el-table> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column |
|
|
|
v-for="item in headers" |
|
|
|
:key="item" |
|
|
|
:label="getColumnName(item)" |
|
|
|
:show-overflow-tooltip="true" |
|
|
|
align="center" |
|
|
|
width="156px" |
|
|
|
<div class="table-wrap"> |
|
|
|
<el-table |
|
|
|
v-loading="loading" |
|
|
|
:data="tableData" |
|
|
|
@cell-click="cellClick" |
|
|
|
border |
|
|
|
> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<span v-if="item === 'OM_WorkOrder-PlantNr'">{{ |
|
|
|
getValue(scope.row['OM_WorkOrder-PlantNr']) |
|
|
|
}}</span> |
|
|
|
<span v-else-if="scope.row[item] === '19000101000000'" /> |
|
|
|
<div v-else-if="item === 'OM_WorkOrder-LastModify'"> |
|
|
|
{{ parseTime(scope.row[item]) }} |
|
|
|
</div> |
|
|
|
<div v-else-if="item === 'OM_WorkOrder-CreateTime'"> |
|
|
|
{{ parseTime(scope.row[item]) }} |
|
|
|
</div> |
|
|
|
<div v-else-if="item === 'OM_WorkOrder-PlanStartTime'"> |
|
|
|
{{ parseTime(scope.row[item]) }} |
|
|
|
</div> |
|
|
|
<div v-else-if="item === 'OM_WorkOrder-PlanEndTime'"> |
|
|
|
{{ parseTime(scope.row[item]) }} |
|
|
|
</div> |
|
|
|
<div v-else-if="item === 'OM_WorkOrder-ActStartTime'"> |
|
|
|
{{ parseTime(scope.row[item]) }} |
|
|
|
</div> |
|
|
|
<div v-else-if="item === 'OM_WorkOrder-ActEndTime'"> |
|
|
|
{{ parseTime(scope.row[item]) }} |
|
|
|
</div> |
|
|
|
<div |
|
|
|
v-else-if="item === 'OM_WorkOrderStatus-Status'" |
|
|
|
:class="[colorClass[scope.row[item]], 'bg-div'] " |
|
|
|
<el-table-column |
|
|
|
:label="getColumnName('OM_SerialOrder-SerialOrderId')" |
|
|
|
prop="serialOrderId" |
|
|
|
:show-overflow-tooltip="true" |
|
|
|
width="200px" |
|
|
|
/> |
|
|
|
<el-table-column |
|
|
|
v-for="(item, index) in headers" |
|
|
|
:key="item" |
|
|
|
:label="getColumnName(item)" |
|
|
|
:show-overflow-tooltip="true" |
|
|
|
width="200px" |
|
|
|
> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<span |
|
|
|
v-if="scope.row.poLi[index]" |
|
|
|
:class="[classData[scope.row.poLi[index].status]]" |
|
|
|
>{{ scope.row.poLi[index].startTime }}</span |
|
|
|
> |
|
|
|
<span v-else></span> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
</el-table> |
|
|
|
</div> |
|
|
|
<div class="details-wrap"> |
|
|
|
<p class="details-title">明细过程数据</p> |
|
|
|
<div class="details-table-wrap"> |
|
|
|
<el-table v-loading="loading" :data="tableDetailsData" border> |
|
|
|
<el-table-column |
|
|
|
v-for="item in detailsHeaders" |
|
|
|
:key="item" |
|
|
|
:label="getColumnName(item)" |
|
|
|
:show-overflow-tooltip="true" |
|
|
|
align="center" |
|
|
|
width="200px" |
|
|
|
> |
|
|
|
{{ fieldTrans(scope.row[item]) }} |
|
|
|
</div> |
|
|
|
<div v-else-if="item === 'OM_WorkOrder-OrderType'"> |
|
|
|
{{ orderTypeTrans(scope.row[item]) }} |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<span v-else>{{ scope.row[item] }}</span> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
</el-table> |
|
|
|
<pagination |
|
|
|
v-show="pagination.total > 0" |
|
|
|
:total="pagination.total" |
|
|
|
:page.sync="pagination.pageNumber" |
|
|
|
:limit.sync="pagination.pageSize" |
|
|
|
@pagination="getTableData" |
|
|
|
/> |
|
|
|
<TraceabilityDetails v-if="item['OM_WorkOrder-WorkOrderId']" :item="item" @callback="setItem" /> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<span>{{ scope.row[item] }}</span> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
</el-table> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
<script> |
|
|
|
import TraceabilityDetails from './traceabilityDetails.vue'; |
|
|
|
import {getWorkorderList, getSerialOrder, getProjectList} from '@/api/retrospect/product' |
|
|
|
import {getPotrace, getDetailtrace, getWorkLineList } from '@/api/retrospect/product' |
|
|
|
export default { |
|
|
|
components:{ |
|
|
|
TraceabilityDetails |
|
|
|
props:{ |
|
|
|
item:{ |
|
|
|
default:{} |
|
|
|
} |
|
|
|
}, |
|
|
|
data(){ |
|
|
|
return{ |
|
|
|
loading:false, |
|
|
|
formData:{}, |
|
|
|
pagination:{ |
|
|
|
pageNumber: 1, |
|
|
|
pageSize: 10, |
|
|
|
total:0 |
|
|
|
classData:{ |
|
|
|
39:'status-39', |
|
|
|
40:'status-40' |
|
|
|
}, |
|
|
|
colorClass:{ |
|
|
|
10:'not-plan-bg', |
|
|
|
20:'has-plan-bg', |
|
|
|
24:'has-lock-bg', |
|
|
|
26:'has-issued-bg', |
|
|
|
39:'interrupt-bg', |
|
|
|
40:'in-production-bg', |
|
|
|
80:'has-complete-bg', |
|
|
|
90:'has-shipment-bg', |
|
|
|
95:'freeze-bg', |
|
|
|
98:'has-cancel-bg', |
|
|
|
formData:{ |
|
|
|
workOrderId:undefined |
|
|
|
}, |
|
|
|
headers:[ |
|
|
|
'OM_WorkOrder-PlantNr', |
|
|
|
'OM_WorkOrder-WorkOrderId', |
|
|
|
'OM_WorkOrderStatus-Status', |
|
|
|
'OM_WorkOrder-ArtId', |
|
|
|
'OM_WorkOrder-CustArtId', |
|
|
|
'OM_WorkOrder-ProjectId', |
|
|
|
'OM_WorkOrder-OrderType', |
|
|
|
'OM_WorkOrder-ErpOrderId', |
|
|
|
'OM_WorkOrder-ParentOrderId', |
|
|
|
'OM_WorkOrder-UsedResourceId', |
|
|
|
'OM_WorkOrder-PlanQty', |
|
|
|
'OM_WorkOrder-PlanStartTime', |
|
|
|
'OM_WorkOrder-PlanEndTime', |
|
|
|
'OM_WorkOrder-ActStartTime', |
|
|
|
'OM_WorkOrder-ActEndTime' |
|
|
|
], // 外层表格表头 |
|
|
|
detailsHeaders:[ |
|
|
|
'OM_SerialOrder-WorkOrderId', |
|
|
|
'OM_SerialOrder-SerialOrderId', |
|
|
|
'OM_SerialOrder-PlanResourceId', |
|
|
|
'OM_SerialOrder-UsedResourceId', |
|
|
|
'OM_SerialOrder-PlanQty', |
|
|
|
'OM_SerialOrder-ProjectId', |
|
|
|
'OM_SerialOrder-SerialOrderStatus', |
|
|
|
'OM_SerialOrder-PlanStartTime', |
|
|
|
'OM_SerialOrder-PlanEndTime', |
|
|
|
'OM_SerialOrder-ActEndTime', |
|
|
|
], // 明细表头 |
|
|
|
tableData:[], // table数据 |
|
|
|
projectArray:[],// 项目定义数据 |
|
|
|
workLineArray:[], // 产线数据 |
|
|
|
orderStatusArray:[], // 订单状态 |
|
|
|
orderTypeArray:[], // 订单类型 |
|
|
|
item:{}, // 当前要操作的对象 |
|
|
|
headers:[], |
|
|
|
tableData:[], |
|
|
|
detailsHeaders:[ |
|
|
|
'SerialOrderOPTrace-PO', |
|
|
|
'SerialOrderOPTrace-WorkOrderId', |
|
|
|
'SerialOrderOPTrace-ArtId', |
|
|
|
'SerialOrderOPTrace-RecvData', |
|
|
|
'SerialOrderOPTrace-SerialOrderId', |
|
|
|
'SerialOrderOPTrace-Status', |
|
|
|
'SerialOrderOPTrace-StepDesc', |
|
|
|
'SerialOrderOPTrace-WorkPlaceId', |
|
|
|
'SerialOrderOPTrace-ExecuteTime', |
|
|
|
'SerialOrderOPTrace-Remark1', |
|
|
|
], |
|
|
|
tableDetailsData:[], |
|
|
|
loading:false, |
|
|
|
cellItem:{} |
|
|
|
} |
|
|
|
}, |
|
|
|
created(){ |
|
|
|
this.getWorkOrderStatus(); |
|
|
|
this.getWorkLineList(); |
|
|
|
if(this.$route.query['OM_WorkOrder-WorkOrderId']){ |
|
|
|
this.formData.workOrderId=this.$route.query['OM_WorkOrder-WorkOrderId']; |
|
|
|
} |
|
|
|
this.getPotrace(); |
|
|
|
}, |
|
|
|
methods:{ |
|
|
|
setItem(row){ |
|
|
|
console.log(row); |
|
|
|
this.item=row; |
|
|
|
// 单击单元格回调 |
|
|
|
cellClick(row, column, cell, event){ |
|
|
|
this.getDetailtrace(row); |
|
|
|
}, |
|
|
|
// 获取明细 |
|
|
|
loadOrderData(row) { |
|
|
|
if(row.tableDetailsList.length>0){ |
|
|
|
return; |
|
|
|
} |
|
|
|
getSerialOrder({workOrderId: row['OM_WorkOrder-WorkOrderId']}).then(({code, data=[]})=>{ |
|
|
|
if(code==200 && data){ |
|
|
|
this.tableData.forEach(e=>{ |
|
|
|
if(e['OM_WorkOrder-WorkOrderId'] == row['OM_WorkOrder-WorkOrderId']){ |
|
|
|
e.tableDetailsList=data||[] |
|
|
|
} |
|
|
|
}) |
|
|
|
} |
|
|
|
// 获取工单下的详细操作数据 |
|
|
|
getDetailtrace(row){ |
|
|
|
getDetailtrace({serialOrderId: row.serialOrderId}).then(({data})=>{ |
|
|
|
this.tableDetailsData=data||[]; |
|
|
|
}) |
|
|
|
}, |
|
|
|
// 搜索 |
|
|
|
handleQuery(){ |
|
|
|
this.pagination.pageNumber=1; |
|
|
|
this.getTableData(); |
|
|
|
this.getPotrace(); |
|
|
|
}, |
|
|
|
// 获取列表数据 |
|
|
|
getTableData(){ |
|
|
|
this.loading=true; |
|
|
|
getWorkorderList({...this.formData, ...this.pagination}).then(({code, data:{records=[], count=0}})=>{ |
|
|
|
this.loading=false; |
|
|
|
// table数据 |
|
|
|
getPotrace(){ |
|
|
|
getPotrace({ |
|
|
|
...this.formData |
|
|
|
}).then(({code, data})=>{ |
|
|
|
if(code==200){ |
|
|
|
this.tableData=(records || []).map(e=>{ |
|
|
|
e.tableDetailsList=[]; |
|
|
|
return e; |
|
|
|
}); |
|
|
|
this.pagination.count=count; |
|
|
|
}else{ |
|
|
|
this.tableData=[]; |
|
|
|
this.pagination.count=0; |
|
|
|
this.headers=data.titleLi; |
|
|
|
this.tableData=data.data; |
|
|
|
} |
|
|
|
}).catch(()=>{ |
|
|
|
this.loading=false; |
|
|
|
}) |
|
|
|
}, |
|
|
|
// 获取项目定义数据 |
|
|
|
getProject(){ |
|
|
|
getProjectList().then(({data}) => { |
|
|
|
this.projectArray = data || [] |
|
|
|
}) |
|
|
|
}, |
|
|
|
// 订单生产状态 |
|
|
|
@ -276,30 +225,57 @@ export default { |
|
|
|
}) |
|
|
|
}) |
|
|
|
}, |
|
|
|
// 订单状态字段转换 |
|
|
|
fieldTrans(value) { |
|
|
|
const item = this.orderStatusArray.find(e=>e['stdeftab-stdeftyp'] === value); |
|
|
|
return item&&item['stdeftab-bez'] || value; |
|
|
|
}, |
|
|
|
// 订单类型字段转换 |
|
|
|
orderTypeTrans(value) { |
|
|
|
const item = this.orderTypeArray.find(e=>e['stdeftab-stdeftyp'] === value); |
|
|
|
return item&&item['stdeftab-bez'] || value; |
|
|
|
}, |
|
|
|
// 订单类型 |
|
|
|
getOrderType(){ |
|
|
|
this.getStanderOne({ statid: 'OM_OrderType' }).then(res => { |
|
|
|
this.orderTypeArray = res.data |
|
|
|
// 产线列表 |
|
|
|
getWorkLineList(){ |
|
|
|
getWorkLineList().then(({data=[]})=>{ |
|
|
|
this.workLineArray=data; |
|
|
|
}) |
|
|
|
}, |
|
|
|
}, |
|
|
|
created(){ |
|
|
|
this.getProject(); |
|
|
|
this.getOrderType(); |
|
|
|
this.getWorkOrderStatus(); |
|
|
|
}, |
|
|
|
mounted(){ |
|
|
|
this.getTableData(); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
|
|
.traceability-details-wrap { |
|
|
|
position: relative; |
|
|
|
width: 100%; |
|
|
|
height: calc(100vh - 50px); |
|
|
|
box-sizing: border-box; |
|
|
|
.table-wrap { |
|
|
|
width: 100%; |
|
|
|
height: calc(50% - 34px); |
|
|
|
border-bottom: 1px solid #dcdfe6; |
|
|
|
margin-bottom: 10px; |
|
|
|
overflow-y: auto; |
|
|
|
} |
|
|
|
.details-wrap { |
|
|
|
width: 100%; |
|
|
|
height: calc(50% - 34px); |
|
|
|
.details-title { |
|
|
|
width: 100%; |
|
|
|
line-height: 40px; |
|
|
|
padding: 0; |
|
|
|
margin: 0; |
|
|
|
background: #dfdfdf; |
|
|
|
box-sizing: border-box; |
|
|
|
padding-left: 20px; |
|
|
|
} |
|
|
|
.details-table-wrap { |
|
|
|
width: 100%; |
|
|
|
height: calc(100% - 40px); |
|
|
|
overflow-y: auto; |
|
|
|
} |
|
|
|
} |
|
|
|
.status-39 { |
|
|
|
box-sizing: border-box; |
|
|
|
padding-left: 23px; |
|
|
|
background: url('../../../assets/imgs/status-39.png') no-repeat 0px -2px; |
|
|
|
background-size: 23px 23px; |
|
|
|
} |
|
|
|
.status-40 { |
|
|
|
box-sizing: border-box; |
|
|
|
padding-left: 23px; |
|
|
|
background: url('../../../assets/imgs/status-40.png') no-repeat 0px -2px; |
|
|
|
background-size: 23px 23px; |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
</style> |
