| <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.code }}</span> | 
|         </div> | 
|         <el-form-item label="物料编码" prop="workorderCode" class="count-style" > | 
|           <span class="long-title-style" :title="form.mmodelCode" style="max-width: 160px">{{ form.mmodelCode }}</span> | 
|         </el-form-item> | 
|         <el-form-item label="物料名称" prop="mmodelName" class="count-style" > | 
|           <span class="long-title-style" :title="form.mmodelName" style="max-width: 160px">{{ form.mmodelName }}</span> | 
|         </el-form-item> | 
|         <el-form-item label="生产批次号" prop="batch" class="count-style" > | 
|           {{ form.batch }} | 
|         </el-form-item> | 
|         <el-form-item label="工序" prop="proTime" class="count-style" > | 
|           {{ form.pmodelName }} | 
|         </el-form-item> | 
|         <el-form-item label="工装属性" prop="proTime" class="count-style" > | 
|           <!-- {{ form.smodelCode }} --> | 
|           <span :style="typeColor(form.smodelCode)">{{ form.smodelCode }}</span> | 
|           <!-- <span v-else-if="form.qualityType==1" class="unvalid-style">不良</span> | 
|           <span v-else-if="form.qualityType==2" class="scrap-style">报废</span> | 
|           <span v-else>-</span> --> | 
|         </el-form-item> | 
|         <el-form-item label="所在仓库" prop="whmodelName" class="count-style" > | 
|           <span class="long-title-style" :title="form.whmodelName" style="max-width: 160px">{{ form.whmodelName  }}</span> | 
|         </el-form-item> | 
|         <el-form-item label="所在库位" prop="origin" class="count-style"> | 
|           <span class="long-title-style" :title="form.lmodelUnionName" style="max-width: 160px">{{ form.lmodelUnionName }}</span> | 
|         </el-form-item> | 
|         <el-form-item label="创建人" prop="distributeUser" class="count-style" > | 
|           {{ form.createName }} | 
|         </el-form-item> | 
|         <el-form-item label="创建时间" prop="distributeTime" class="count-style" > | 
|           {{ form.createTime }} | 
|         </el-form-item> | 
|          | 
|       </el-form> | 
|       <!-- 表格和分页 --> | 
|       <el-tabs v-model="activeName"> | 
|         <el-tab-pane label="更换篮筐明细" name="first"> | 
|           <el-table | 
|             v-loading="isSearch" | 
|             :data="changeList" | 
|             border | 
|             :summary-method="getSummaries" | 
|             show-summary | 
|           > | 
|           <!-- stripe --> | 
|             <el-table-column prop="amodel.code" label="篮筐编码" min-width="140px"></el-table-column> | 
|             <el-table-column prop="doneType" label="更换类型" min-width="60px"> | 
|               <template slot-scope="{row}"> | 
|                 <span v-if="row.type==0">旧篮筐</span> | 
|                 <span v-else>新篮筐</span> | 
|               </template> | 
|             </el-table-column> | 
|             <el-table-column label="单据类型" min-width="80px"> | 
|               <template slot-scope="{row}"> | 
|                 {{ row.relobjType == 0 ? '生产工单': '更换单'}} | 
|               </template> | 
|             </el-table-column> | 
|             <el-table-column prop="zjcode" label="单据编码" min-width="140px"> | 
|             </el-table-column> | 
|             <el-table-column prop="num" label="数量" show-overflow-tooltip min-width="100px"> | 
|               <template slot-scope="{row}"> | 
|                 {{ row.num ? (row.num + (row.umodel ? row.umodel.name : '')) : '0' }} | 
|               </template> | 
|             </el-table-column> | 
|           </el-table> | 
|         </el-tab-pane> | 
|         <Pagination | 
|           style="margin-top:10px" | 
|           @size-change="handleSizeChange" | 
|           @current-change="handlePageChange" | 
|           :pagination="pagination" | 
|         ></Pagination> | 
|       </el-tabs> | 
|     </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 { applianceChangeDetialPage } from '@/api/ext/applianceChange' | 
|   | 
|   | 
| export default { | 
|   name: 'OperaApplianceChangeDetailWindow', | 
|   extends: BaseOpera, | 
|   components: { GlobalWindow, Pagination }, | 
|   data () { | 
|     return { | 
|       // 表单数据 | 
|       form: { | 
|         id: null, | 
|         mmodelName: null, | 
|         mmodelCode: null, | 
|         smodelCode: null, | 
|         code: null, | 
|         batch: null,  | 
|         pmodelName: null, // 工序名称 | 
|         qualityType: null, | 
|         whmodelName: null, | 
|         lmodelUnionName: null, | 
|         createName: null, | 
|         createTime: null | 
|       }, | 
|       // 验证规则 | 
|       rules: { | 
|       }, | 
|       activeName: 'first', | 
|       isSearch: false, | 
|       pagination: { | 
|         pageIndex: 1, | 
|         pageSize: 10, | 
|         total: 1 | 
|       }, | 
|       changeList: [], | 
|       style: '' | 
|     } | 
|   }, | 
|   created () { | 
|     this.config({ | 
|       api: '/ext/materialExt', | 
|       '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] | 
|         } | 
|         this.search() | 
|       }) | 
|     }, | 
|     cancel () { | 
|       this.$refs.form.resetFields() | 
|       this.activeName = 'first' | 
|       this.pagination.pageIndex = 1 | 
|       this.pagination.pageSize = 10 | 
|       this.pagination.total = 0 | 
|       this.visible = false | 
|     }, | 
|     handleSizeChange (pageSize) { | 
|       this.pagination.pageSize = pageSize | 
|       this.search() | 
|     }, | 
|     handlePageChange (pageIndex) { | 
|       this.pagination.pageIndex = pageIndex | 
|       this.search() | 
|     }, | 
|     search () { | 
|       applianceChangeDetialPage( | 
|       { | 
|         capacity: this.pagination.pageSize, | 
|         model: { | 
|           type: null, | 
|           chaneId: this.form.id | 
|         }, | 
|         page: this.pagination.pageIndex, | 
|         sorts: null | 
|       }) | 
|       .then(res => { | 
|         this.changeList = res.records | 
|         this.pagination.pageIndex = res.page | 
|         this.pagination.total = res.total | 
|         this.pagination.pageSize = res.capacity | 
|       }) | 
|       .catch(err => { | 
|         console.log(err) | 
|       }) | 
|     }, | 
|     typeColor (smodelCode) { | 
|       switch (smodelCode) { | 
|         case '合格': return 'color:#03AF76' | 
|         case '报废': return 'color:#DE5243' | 
|         case '不良': return 'color:#F5A400' | 
|         default: return 'color: #111111' | 
|       } | 
|     }, | 
|     getSummaries (param) { | 
|       const { columns, data } = param; | 
|       const sums = []; | 
|       columns.forEach((column, index) => { | 
|         if (index === 0) { | 
|           sums[index] = '合计'; | 
|           return; | 
|         } else if (index === 3) { | 
|           sums[index] = '-'; | 
|           return; | 
|         } | 
|         const values = data.map(item => Number(item[column.property])); | 
|         if (!values.every(value => isNaN(value))) { | 
|           sums[index] = values.reduce((prev, curr) => { | 
|             const value = Number(curr); | 
|             if (!isNaN(value)) { | 
|               return prev + curr; | 
|             } else { | 
|               return prev; | 
|             } | 
|           }, 0); | 
|           sums[index] | 
|         } else { | 
|           sums[index] = '-'; | 
|         } | 
|       }); | 
|       return sums | 
|     } | 
|   } | 
| } | 
| </script> | 
|   | 
| <style lang="scss" scoped> | 
| .count-style { | 
|   display: inline-block; | 
|   width: 23%; | 
|   height: 32px; | 
|   margin-bottom: 10px; | 
| } | 
|   | 
| .text-code { | 
|   color: #333; | 
|   font-weight: 500; | 
|   padding-right: 15px; | 
|   font-size: 15px; | 
|   vertical-align:middle; | 
| } | 
| .status-log { | 
|   padding: 1px 5px; | 
|   border-radius: 3px; | 
|   font-size: 12px; | 
|   color:#fff; | 
|   vertical-align:middle; | 
| } | 
| </style> |