<template>
|
<GlobalWindow
|
title="计划详情"
|
:visible.sync="visible"
|
:confirm-working="isWorking"
|
@confirm="confirm"
|
>
|
<div style="min-width:500px;width:100%">
|
<div class="top-title" style="margin-bottom:15px">
|
<div>
|
<span class="text-code">{{ form.mmodel.name }}</span>
|
<span v-if="form.urgent" style="background-color: #DE5243; margin-right:8px" class="status-log">{{ '优先级' + form.urgent }}</span>
|
<span v-if="form.type == 0" style="background-color: #03AF76;" class="status-log">正常计划</span>
|
<span v-if="form.type == 1" style="background-color: #DE5243;" class="status-log">计划异常</span>
|
<span v-if="form.type == 2" style="background-color: #F5A400;" class="status-log">返工计划</span>
|
</div>
|
<div>
|
<!-- 0已生成、1已发布、2已撤回、3已取消、4已分配、5已暂停、6已完工、8已关闭-->
|
<span v-if="form.status==0||form.status==5" style="color: #305ED5;" class="status-log">{{ form.status==5 ? '已暂停' :'已生成' }}</span>
|
<span v-else-if="form.status==3 || form.status==2|| form.status==8" style="color: #BBBBBB;" class="status-log">{{ form.status==2 ? '已撤回' : form.status==3 ? '已取消' : '已关闭' }}</span>
|
<span v-else style="color: #03AF76;" class="status-log">{{ form.status==1 ? '已发布' : form.status==4 ? '已分配' : '已完工' }}</span>
|
</div>
|
</div>
|
<div class="plan-style">
|
<el-form inline label-width="90px" label-suffix="：">
|
<el-form-item label="工序名称">{{ form.pmodel.name }}</el-form-item>
|
<el-form-item label="计划数量">{{ form.num + (form.umodel ? form.umodel.name : '') }}</el-form-item>
|
<el-form-item label="计划日期">{{ form.planDate }}</el-form-item>
|
<el-form-item label="生产批次">
|
<span style="width:100px" :title="form.batch" class="long-title-style">{{ form.batch }}</span>
|
</el-form-item>
|
<el-form-item label="发布日期">{{ form.publishDate }}</el-form-item>
|
<el-form-item label="计划人员">{{ form.usermodel.realname }}</el-form-item>
|
<el-form-item label="分配数量">{{ form.workorderDistributNum }}</el-form-item>
|
<el-form-item label="完工数量">{{ form.doneNum }}</el-form-item>
|
</el-form>
|
</div>
|
<div v-for="(item, index) in form.workorderList" :key="index">
|
<div style="background-color: #f7f7f7;height:10px"></div>
|
<div class="work-order-style">
|
<div class="order-title-v">
|
<div class="order-title">
|
{{ '工单编号：' + item.code }}
|
</div>
|
<div>
|
<!-- 0已创建、1已备料、2已完工、3已检验、4已报工、5已入库、6已取消 -->
|
<span v-if="item.status==0" style="color: #305ED5;" class="status-log">已创建</span>
|
<span v-else-if="item.status==6" style="color: #F5A400;" class="status-log">已取消</span>
|
<span v-else style="color: #03AF76;" class="status-log">{{ item.status==1 ? '已备料' : item.status==2 ? '已完工' : item.status==3 ? '已检验' : '已报工' }}</span>
|
</div>
|
</div>
|
<div class="c3 mt10 mb10 f12" style="display: flex;">
|
<div>计划数量：{{ item.planNum }}</div>
|
<div class="ml10">计划开工日期：{{ item.planDate }}</div>
|
</div>
|
<div v-if="item.produceDate" class="order-setup">
|
<!-- 报工信息 -->
|
<div class="line-style">
|
<div class="top-line-top"></div>
|
<div class="center-point-temp"></div>
|
<div class="bottom-line"></div>
|
</div>
|
<div class="setup-content">
|
<div class="left-message">
|
<div class="message-title-temp">产出</div>
|
</div>
|
<div class="right-message ml30">
|
<div style="display: flex;">
|
<div class="time-style">操作人：{{ item.createUserName }}</div>
|
<div class="time-style ml50">操作时间：{{ item.produceDate }}</div>
|
</div>
|
<div style="display: flex;" class="mt10">
|
<span style="color:#666;">产品：</span>
|
<div v-if="item.qualifiedNum">
|
<span style="color:#03AF76">[合格品] </span>
|
<span style="color:#333333">{{ item.qualifiedNum + (form.umodel && form.umodel.name) }}</span>
|
</div>
|
<div v-if="item.unqualifiedNum" class="ml20">
|
<span style="color:#F5A400">[不良品] </span>
|
<span style="color:#333333">{{ item.unqualifiedNum + (form.umodel && form.umodel.name) }}</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<!-- 投料信息 -->
|
<div v-if="item.materialDate" class="order-setup">
|
<div class="line-style">
|
<div :class="item.produceDate ? 'top-line' : 'top-line-top'"></div>
|
<div :class="item.produceDate ? 'center-point' : 'center-point-temp'"></div>
|
<div class="bottom-line"></div>
|
</div>
|
<div class="setup-content">
|
<div class="left-message">
|
<div :class="item.produceDate ? 'message-title' : 'message-title-temp'">
|
投料
|
</div>
|
</div>
|
<div class="right-message ml30">
|
<div style="display: flex;">
|
<div class="time-style">操作人：{{ item.createUserName }}</div>
|
<div class="time-style ml50">操作时间：{{ item.materialDate }}</div>
|
</div>
|
<div style="display: flex" class="mt10">
|
<div style="color:#666;">物料：</div>
|
<div>
|
<div v-for="(sItem, sIndex) in item.materialList" :key="sIndex">
|
<span style="color:#333333">{{ sItem.name + ' / ' + sItem.num + sItem.unitName }}</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<!-- 分配信息 -->
|
<div class="order-setup">
|
<div class="line-style">
|
<div :class="item.materialDate ? 'top-line' : 'top-line-top'"></div>
|
<div :class="item.materialDate ? 'center-point' : 'center-point-temp'"></div>
|
</div>
|
<div class="setup-content">
|
<div class="left-message">
|
<div :class="item.materialDate ? 'message-title' : 'message-title-temp'">
|
分配
|
</div>
|
|
</div>
|
<div class="right-message ml30">
|
<div style="display: flex;">
|
<div class="time-style">操作人：{{ item.createUserName }}</div>
|
<div class="time-style ml50">操作时间：{{ item.distributeDate }}</div>
|
</div>
|
<div class="mt10">
|
<span style="color:#666;">分配数量：{{ item.planNum + (form.umodel && form.umodel.name) }}</span>
|
</div>
|
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div slot="footer" class="window__header">
|
<el-button type="primary" @click="cancel">返回</el-button>
|
</div>
|
</GlobalWindow>
|
</template>
|
|
<script>
|
import BaseOpera from '@/components/base/BaseOpera'
|
import GlobalWindow from '@/components/common/GlobalWindow'
|
export default {
|
name: 'OperaPlansDetailExtWindow',
|
extends: BaseOpera,
|
components: { GlobalWindow },
|
data () {
|
return {
|
options: [
|
{ name: '11', id: '1' },
|
{ name: '22', id: '2' }
|
],
|
// 表单数据
|
form: {
|
id: null,
|
deleted: null,
|
createUser: null,
|
createTime: null,
|
updateUser: null,
|
updateTime: null,
|
remark: null,
|
rootDepartId: null,
|
departId: null,
|
origin: null,
|
paused: null,
|
planDate: null,
|
materialId: null,
|
distributNum: null,
|
workorderDistributNum: null,
|
lessDistributNum: null,
|
type: null,
|
procedureId: null,
|
factoryId: null,
|
unitId: null,
|
num: null,
|
batch: null ,
|
urgent: null,
|
importId: null,
|
userId: null,
|
status: null,
|
publishDate: null,
|
dmodel: {},
|
mmodel: {},
|
pmodel: {},
|
fmodel: {},
|
umodel: {},
|
usermodel: {},
|
doneNum: null,
|
workorderList: [],
|
qulifiedNum: null,
|
unqulifiedNum: null,
|
distributNoDoneNum: null
|
},
|
materials: [],
|
factories: [],
|
productes: [],
|
}
|
},
|
created () {
|
this.config({
|
api: '/ext/plansExt',
|
'field.id': 'id'
|
})
|
},
|
methods: {
|
open (title, target) {
|
this.title = title
|
this.visible = true
|
// 编辑
|
this.$nextTick(() => {
|
for (const key in this.form) {
|
this.form[key] = target[key]
|
}
|
console.log(this.form.workorderList);
|
// this.form.doneNum = .reduce((accumulator, currentValue) => {
|
// console.log(currentValue.qualifiedNum, currentValue.unqualifiedNum, accumulator);
|
// return currentValue.qualifiedNum + currentValue.unqualifiedNum + accumulator
|
// }, 0)
|
})
|
},
|
selectFactoey (v) {
|
this.form.procedureId = null
|
productesGroup({ orgId: v })
|
.then(res => {
|
this.productes = res
|
})
|
.catch(err => {
|
console.log(err)
|
})
|
},
|
cancel () {
|
this.visible = false
|
// let that = this
|
},
|
proUserStr (item) {
|
if (!item.proUserList || item.proUserList.length<1) {
|
return '-'
|
}
|
return item.proUserList.map((user) => { return user.proUserDepartName}).join('，')
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
::v-deep .window__body {
|
padding: 12px 0px !important;
|
}
|
.text-code {
|
color: #333;
|
font-weight: 500;
|
padding-right: 15px;
|
font-size: 16px;
|
vertical-align:middle;
|
}
|
.status-log {
|
padding: 1px 5px;
|
border-radius: 3px;
|
font-size: 12px;
|
color:#fff;
|
vertical-align:middle;
|
}
|
.top-title {
|
padding: 0 16px;
|
display: flex;
|
justify-content: space-between;
|
}
|
.plan-style {
|
width: calc(100% - 93px);
|
padding: 10px;
|
margin: 16px;
|
background-color: #f7f7f7;
|
border-radius: 8px;
|
.el-form-item {
|
width: 47%;
|
margin-bottom: 0px !important;
|
}
|
}
|
.work-order-style {
|
padding: 16px;
|
.order-title-v {
|
display: flex;
|
justify-content: space-between;
|
.order-title {
|
font-size: 14px;
|
font-weight: 500;
|
color: #333;
|
}
|
}
|
.order-setup {
|
// height: 100px;
|
display: flex;
|
justify-content: space-between;
|
.line-style {
|
display: flex;
|
flex-direction: column;
|
width: 16px;
|
.top-line {
|
margin-left: 3px;
|
width: 8px;
|
height: 15px;
|
border-left: #f7f7f7 2px dashed;
|
}
|
.top-line-top {
|
margin-left: 3px;
|
width: 8px;
|
height: 15px;
|
}
|
.center-point-temp {
|
margin-left: -4px;
|
height: 8px;
|
width: 8px;
|
border-radius: 8px;
|
background-color: #4275FC;
|
border: 4px #E4EBFE solid;
|
}
|
.center-point {
|
height: 8px;
|
width: 8px;
|
border-radius: 4px;
|
background-color: #ccc;
|
}
|
.bottom-line {
|
margin-left: 3px;
|
width: 8px;
|
border-left: #f7f7f7 2px dashed;
|
flex: 1;
|
}
|
.bottom-line-bottom {
|
margin-left: 3px;
|
width: 8px;
|
flex: 1;
|
}
|
}
|
.setup-content {
|
margin: 15px;
|
flex: 1;
|
// background-color: #f7f7f7;
|
display: flex;
|
.left-message {
|
display: flex;
|
line-height: 20px;
|
.message-title {
|
color: #333;
|
font-weight: 500;
|
font-size: 15px;
|
}
|
.message-title-temp {
|
color: #4275FC;
|
font-weight: 500;
|
font-size: 15px;
|
}
|
.time-style {
|
color: #999999;
|
}
|
}
|
.right-message {
|
font-size: 13px;
|
// display: flex;
|
flex-direction: row;
|
}
|
}
|
}
|
}
|
</style>
|
