| <template> | 
|     <GlobalWindow :title="title" width="1182px" :visible.sync="visible" :confirm-working="isWorking" @confirm="confirm"> | 
|         <div style="min-width:1150px"> | 
|             <el-form :model="form" ref="form" label-width="100px" label-suffix=":" inline> | 
|                 <div style="margin-bottom:15px"> | 
|                     <span class="text-code">{{ form.materialName }}</span> | 
|                     <span style="background-color: #ffcc00;" class="status-log" v-if="form.urgent">优先{{ form.urgent }}</span> | 
|                     <span style="background-color: #305ED5;" class="status-log">正常计划</span> | 
|                 </div> | 
|                 <el-form-item label="计划编码" class="count-style"> | 
|                     {{ form.planCode }} | 
|                 </el-form-item> | 
|                 <el-form-item label="计划日期" class="count-style"> | 
|                     {{ form.planDate }} | 
|                 </el-form-item> | 
|                 <el-form-item label="生产批号" class="count-style"> | 
|                     {{ form.batch }} | 
|                 </el-form-item> | 
|                 <el-form-item label="计划数量" class="count-style"> | 
|                     {{ form.num }}{{ form.unitName }} | 
|                 </el-form-item> | 
|                 <el-form-item label="发布日期" class="count-style"> | 
|                     {{ form.publishDate }} | 
|                 </el-form-item> | 
|                 <el-form-item label="计划人员" class="count-style"> | 
|                     {{ form.userName }} {{ userDepartName }} | 
|                 </el-form-item> | 
|                 <!-- <el-form-item label="完工数量" class="count-style"> | 
|                     <div v-if="form.doneNum"> | 
|                         {{ form.doneNum }}{{ form.unitName }} | 
|                     </div> | 
|                     <span v-else>-</span> | 
|                 </el-form-item> --> | 
|                 <el-form-item label="合格数量" class="count-style"> | 
|                     <div v-if="info.finishQualifiedNum"> | 
|                         {{ info.finishQualifiedNum }}{{ form.unitName }} | 
|                     </div> | 
|                     <span v-else>-</span> | 
|                 </el-form-item> | 
|                 <el-form-item label="不良数量" class="count-style"> | 
|                     <div v-if="info.finishUnQualifiedNum"> | 
|                         {{ info.finishUnQualifiedNum }}{{ form.unitName }} | 
|                     </div> | 
|                     <span v-else>-</span> | 
|                 </el-form-item> | 
|             </el-form> | 
|             <div style="width: 100%; height: 1px; background-color: #BBBBBB; margin-bottom: 20px; margin-top: 10px;"></div> | 
|             <div style="margin-bottom: 10px;">各个工序完成情况</div> | 
|             <!-- 表格和分页 --> | 
|             <el-table :data="list" stripe border> | 
|                 <el-table-column type="index" label="序号" min-width="80px"></el-table-column> | 
|                 <el-table-column label="工序" min-width="140px"> | 
|                     <template slot-scope="{row}"> | 
|                         <el-button type="text"> | 
|                             <span class="long-title-style">{{ row.pmodel.name }}</span> | 
|                         </el-button> | 
|                     </template> | 
|                 </el-table-column> | 
|                 <el-table-column prop="smodelRealName" label="计划数量" min-width="100px"> | 
|                     <template slot-scope="{row}"> | 
|                         {{ row.num }}{{ row.unitName }} | 
|                     </template> | 
|                 </el-table-column> | 
|                 <el-table-column prop="num" label="完工数量" min-width="100px"> | 
|                     <template slot-scope="{row}"> | 
|                         {{ row.doneNum }}{{ row.unitName }} | 
|                     </template> | 
|                 </el-table-column> | 
|                 <el-table-column prop="qualifiedNum" label="合格数量" min-width="100px"> | 
|                     <template slot-scope="{row}"> | 
|                         {{ row.qulifiedNum }}{{ row.unitName }} | 
|                     </template> | 
|                 </el-table-column> | 
|                 <el-table-column prop="unqualifiedNum" label="不良数量" min-width="100px"> | 
|                     <template slot-scope="{row}"> | 
|                         {{ row.unqulifiedNum }}{{ row.unitName }} | 
|                     </template> | 
|                 </el-table-column> | 
|                 <el-table-column prop="verifyType" label="完工率" min-width="100px"> | 
|                     <template slot-scope="{row}"> | 
|                         <span v-if="row.doneNum == 0 && row.num == 0">0.00%</span> | 
|                         <span :style="{ color: (row.doneNum / row.num) * 100 > 100 ? 'red' : '' }" v-else>{{ ((row.doneNum / row.num) * 100).toFixed(2) }}%</span> | 
|                     </template> | 
|                 </el-table-column> | 
|                 <el-table-column prop="devmodel.code" label="合格率" min-width="100px"> | 
|                     <template slot-scope="{row}"> | 
|                         <span v-if="row.qulifiedNum == 0 && row.doneNum == 0">0.00%</span> | 
|                         <span v-else>{{ ((row.qulifiedNum / row.doneNum) * 100).toFixed(2) }}%</span> | 
|                     </template> | 
|                 </el-table-column> | 
|             </el-table> | 
|         </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' | 
| import Pagination from '@/components/common/Pagination' | 
| import { workPlansById } from '@/api/business/workPlans' | 
|   | 
| export default { | 
|     name: 'OperaWorkorderDetailWindow', | 
|     extends: BaseOpera, | 
|     components: { GlobalWindow, Pagination }, | 
|     data() { | 
|         return { | 
|             // 表单数据 | 
|             form: { | 
|                 num: '', | 
|                 unitName: '', | 
|                 doneNum: '', | 
|                 qulifiedNum: '', | 
|                 unqulifiedNum: '', | 
|                 planDate: '', | 
|                 batch: '', | 
|                 publishDate: '', | 
|                 userName: '', | 
|                 urgent: '', | 
|                 userDepartName: '', | 
|                 planCode: '', | 
|                 materialName: '' | 
|             }, | 
|             info: {}, | 
|             userDepartName: '', | 
|             list: [] | 
|         } | 
|     }, | 
|     methods: { | 
|         open(title, target) { | 
|             this.title = title | 
|             this.visible = true | 
|             console.log(target) | 
|             workPlansById(target.id) | 
|                 .then(res => { | 
|                     console.log(res) | 
|                     this.userDepartName = res.userDepartName | 
|                     this.list = res.plansExtListVOList | 
|                     this.info = res | 
|                 }) | 
|             // 编辑 | 
|             this.$nextTick(() => { | 
|                 for (const key in this.form) { | 
|                     this.form[key] = target[key] | 
|                 } | 
|             }) | 
|         }, | 
|         cancel() { | 
|             this.visible = false | 
|         } | 
|     } | 
| } | 
| </script> | 
|    | 
| <style lang="scss" scoped> | 
| .count-style { | 
|     display: inline-block; | 
|     width: 23%; | 
|     // height: 32px; | 
| } | 
|   | 
| ::v-deep .el-form-item { | 
|     margin-bottom: 8px !important; | 
| } | 
|   | 
| .text-code { | 
|     color: #305ED5; | 
|     font-weight: 500; | 
|     padding-right: 15px; | 
|     font-size: 15px; | 
|     vertical-align: middle; | 
| } | 
|   | 
| .status-log { | 
|     padding: 3px 5px; | 
|     border-radius: 3px; | 
|     font-size: 12px; | 
|     margin-right: 10px; | 
|     color: #fff; | 
|     vertical-align: middle; | 
| } | 
| </style> | 
|    |