| <template> | 
|   <GlobalWindow | 
|     :title="title" | 
|     :visible.sync="visible" | 
|     :confirm-working="isWorking" | 
|     @confirm="confirm" | 
|     :width="width" | 
|   > | 
|     <div class="text">生产计划</div> | 
|     <el-table | 
|       ref="planTable" | 
|       v-loading="isWorking.search" | 
|       :data="tableData" | 
|       stripe | 
|       border | 
|       @selection-change="handleSelectionChange" | 
|       @cell-mouse-leave="selectPlan" | 
|     > | 
|       <el-table-column type="selection" fixed="left" width="55"></el-table-column> | 
|       <el-table-column prop="procedureName" label="工序" fixed="left" show-overflow-tooltip min-width="100px"> | 
|         <template slot-scope="{ row }"> | 
|           <span class="long-title-style">{{ row.procedureName }}</span> | 
|         </template> | 
|       </el-table-column> | 
|       <el-table-column label="物料编码" show-overflow-tooltip min-width="160px"> | 
|         <template slot-scope="{ row }"> | 
|           <span class="long-title-style">{{ row.mmodel.code }}</span> | 
|         </template> | 
|       </el-table-column> | 
|       <el-table-column prop="materialInfo" label="物料名称" show-overflow-tooltip min-width="100px"> | 
|         <template slot-scope="{ row }"> | 
|           <span class="long-title-style">{{ row.mmodel.name }}</span> | 
|         </template> | 
|       </el-table-column> | 
|       <el-table-column prop="pPlanDate" label="计划日期" min-width="90px"></el-table-column> | 
|       <el-table-column prop="num" label="待分配数量" min-width="90px"> | 
|       </el-table-column> | 
|       <el-table-column prop="batch" label="生产批次号" min-width="100px"></el-table-column> | 
|       <el-table-column prop="urgent" label="优先级" min-width="60px"></el-table-column> | 
|       <el-table-column prop="planNum" label="分配数量" min-width="100px"> | 
|         <template slot-scope="{ row }"> | 
|           <div class="disNum"> | 
|             <el-input v-if="isSelectRow(row)" v-model="row.planNum" placeholder="请输入"></el-input> | 
|           </div> | 
|         </template> | 
|       </el-table-column> | 
|       <el-table-column prop="planDate" label="计划开工时间" min-width="160px"> | 
|         <template slot-scope="{ row }"> | 
|           <div class="planDate"> | 
|             <el-date-picker | 
|               v-if="isSelectRow(row)" | 
|               v-model="row.planDate" | 
|               value-format="yyyy-MM-dd" | 
|               type="date" | 
|               placeholder="请选择开工时间" | 
|               :picker-options="pickerOptions" | 
|             > | 
|             </el-date-picker> | 
|           </div> | 
|         </template> | 
|       </el-table-column> | 
|       <el-table-column label="生产设备" min-width="200px"> | 
|         <template  #header=''> | 
|           <div class="custom-header"> | 
|             <div>生产设备</div> | 
|             <!-- <el-checkbox @change="unifyDevice" :disabled="canUnifyDevice()">统一设备</el-checkbox> --> | 
|           </div> | 
|         </template> | 
|         <template slot-scope="{ row }"> | 
|           <!-- class="device" --> | 
|           <div | 
|             v-if="isSelectRow(row)" | 
|             style="vertical-align: middle;" | 
|           > | 
|             <el-select | 
|               v-model="row.proGroupId" | 
|               filterable | 
|               clearable | 
|               placeholder="请选择" | 
|               @change='selectedDevice' | 
|               @visible-change='alertOption' | 
|             > | 
|               <el-option | 
|                 v-for="item in device" | 
|                 :key="item.id" | 
|                 :label="'【' + item.code + '】' +item.name " | 
|                 :value="item.id"> | 
|               </el-option> | 
|             </el-select> | 
|           </div> | 
|         </template> | 
|       </el-table-column> | 
|       <el-table-column label="生产人员" min-width="200px"> | 
|         <template #header=""> | 
|           <div class="custom-header"> | 
|             <div>生产人员</div> | 
|             <!-- <el-checkbox @change="unifyProUser" :disabled="canUnifyProUser()">统一人员</el-checkbox> --> | 
|           </div> | 
|         </template> | 
|         <template slot-scope="{ row }"> | 
|           <div v-if="isSelectRow(row)" class="user"> | 
|             <el-select | 
|               v-model="row.proUserList"  | 
|               :disabled='!row.proGroupId'  | 
|               multiple  | 
|               filterable  | 
|               clearable  | 
|               placeholder="请选择" | 
|               @change='selectedUser' | 
|             > | 
|               <el-option | 
|                 v-for="item in tempUser(row.proGroupId)" | 
|                 :key="item.id" | 
|                 :label="item.umodel.name + ' - ' + item.tmodel.name" | 
|                 :value="item.userId"> | 
|               </el-option> | 
|             </el-select> | 
|           </div> | 
|         </template> | 
|       </el-table-column> | 
|     </el-table> | 
|   </GlobalWindow> | 
| </template> | 
|   | 
| <script> | 
| import BaseOpera from '@/components/base/BaseOpera' | 
| import GlobalWindow from '@/components/common/GlobalWindow' | 
| import { findAll } from '@/api/ext/userDeviceExt' | 
| import { distribute } from '@/api/ext/plansExt' | 
| import { getDeviceByCondition } from '@/api/ext/deviceExt' | 
| export default { | 
|   name: 'OperaPlansExtWindow', | 
|   extends: BaseOpera, | 
|   components: { GlobalWindow }, | 
|   data () { | 
|     return { | 
|       tableData: [], | 
|       tempSelectRows: [], | 
|       width: '85%', | 
|       options: [ | 
|         { name: '11', id: '1' }, | 
|         { name: '22', id: '2' } | 
|       ], | 
|       user: [], | 
|       device: [], | 
|       tempRow: {}, | 
|       pickerOptions: {}, | 
|       shouldChangeTempRow: true, | 
|       // 验证规则 | 
|       rules: { | 
|         planDate: [{ required: true, message: '请选择日期', trigger: 'change' }], | 
|         num: [{ required: true, message: '请输入计划数量', trigger: 'blur' }], | 
|         batch: [{ required: true, message: '请输入生产批次号', trigger: 'blur' }] | 
|       } | 
|     } | 
|   }, | 
|   created () { | 
|     this.config({ | 
|       api: '/ext/plansExt', | 
|       'field.id': 'id' | 
|     }) | 
|     this.pickerOptions.disabledDate = (time) => { | 
|         // 一天 | 
|       let tempTime = 3600 * 1000 * 24  | 
|       return time.getTime() < new Date()-tempTime | 
|     } | 
|     this.getBaseMessage() | 
|      | 
|   }, | 
|   mounted () { | 
|      | 
|   }, | 
|   methods: { | 
|     open (title, target) { | 
|       this.title = title | 
|       this.visible = true | 
|       // 编辑 | 
|       this.$nextTick(() => { | 
|         // this.getBaseMessage(target[0].procedureId) | 
|         this.tableData = [] | 
|         for (const item of target) { | 
|           // console.log(item) | 
|           this.tableData.push({ | 
|             procedureId: item.procedureId, | 
|             planId: item.id, | 
|             procedureName: item.pmodel.name, | 
|             materialInfo: item.mmodel.name + ' ' + item.mmodel.code, | 
|             pPlanDate: item.planDate, | 
|             planNum: item.num - item.distributNum, | 
|             // target.num - target.distributNum | 
|             batch: item.batch, | 
|             urgent: item.urgent, | 
|             mmodel: item.mmodel, | 
|             num: (item.num - item.distributNum) + item.umodel.name, | 
|             planDate: new Date(), | 
|             proGroupId: '', | 
|             proUserList: [], | 
|           }) | 
|         } | 
|         setTimeout(()=>{ | 
|           this.tableData.forEach(item => { | 
|             this.$refs.planTable.toggleRowSelection(item) | 
|           }) | 
|         },500) | 
|       }) | 
|     }, | 
|     procedureArray (id) { | 
|       const tempArray = [] | 
|       this.user.forEach((v, i, a) => { | 
|         if (v.dmodel.procedureId === id) { | 
|           tempArray.push(v) | 
|         } | 
|       }) | 
|       return tempArray | 
|     }, | 
|     tempUser( id ) { | 
|       let tempUser = this.user.filter((item)=>{ | 
|         return item.deviceId === id | 
|       }) | 
|       return tempUser | 
|     }, | 
|     handleSelectionChange (selectRows) { | 
|       this.tempSelectRows = selectRows | 
|     }, | 
|     isSelectRow (row) { | 
|       return this.tempSelectRows.includes(row) | 
|     }, | 
|     selectPlan (row, column, cell, event) { | 
|       this.tempRow = row | 
|     }, | 
|     alertOption (v) { | 
|       this.shouldChangeTempRow = v | 
|     }, | 
|     selectedDevice (v) { | 
|       this.tempRow.proUserList = [] | 
|       if (this.tempRow.id === this.tempSelectRows[0].id) { | 
|         this.tempSelectRows.forEach(item => { | 
|           if (!item.proGroupId) { | 
|             item.proGroupId = v | 
|             item.proUserList = [] | 
|           } | 
|         }) | 
|       } | 
|     }, | 
|     selectedUser (v) { | 
|       if (this.tempRow.id === this.tempSelectRows[0].id) { | 
|         this.tempSelectRows.forEach(item => { | 
|           if (!item.proUserList.length) { | 
|             item.proUserList = v | 
|           } | 
|         }) | 
|       } | 
|     }, | 
|     confirm () { | 
|       if (!this.tempSelectRows) { | 
|         this.$tip.error('至少选择一条计划!') | 
|         return | 
|       } | 
|       this.isWorking = true | 
|       distribute(this.tempSelectRows) | 
|         .then(() => { | 
|           this.visible = false | 
|           this.$tip.apiSuccess('分配成功') | 
|           this.$emit('success') | 
|         }) | 
|         .catch(err => { | 
|           this.$tip.apiFailed(err) | 
|         }) | 
|         .finally(() => { | 
|           this.isWorking = false | 
|         }) | 
|     }, | 
|     getBaseMessage () { | 
|       getDeviceByCondition({}) | 
|         .then(res => { | 
|           this.device = res | 
|         }) | 
|         .catch(err => { | 
|           console.log(err) | 
|         }) | 
|       findAll({}) | 
|         .then(res => { | 
|           // console.log(res); | 
|           this.user = res | 
|           // console.log(this.user) | 
|         }) | 
|         .catch(err => { | 
|           console.log(err) | 
|         }) | 
|     }, | 
|     canUnifyDevice () { | 
|       if (this.tempSelectRows.length === 0) { | 
|         return true | 
|       } else if (!this.tempSelectRows[0].proGroupId) { | 
|         return true | 
|       } | 
|       return false | 
|     }, | 
|     unifyDevice (v) { | 
|       if (v) { | 
|         let tempProGroupId = this.tempSelectRows[0].proGroupId | 
|         for (const item of this.tempSelectRows) { | 
|           item.proGroupId = tempProGroupId | 
|         } | 
|       } | 
|     }, | 
|     canUnifyProUser () { | 
|       if (this.tempSelectRows.length === 0) { | 
|         return true | 
|       } else if (!this.tempSelectRows[0].proGroupId) { | 
|         return true | 
|       } else if (this.tempSelectRows[0].proUserList.length === 0) { | 
|         return true | 
|       } else { | 
|         let tempProGroupId = this.tempSelectRows[0].proGroupId | 
|         for (const item of this.tempSelectRows) { | 
|           if (tempProGroupId !== item.proGroupId) { | 
|             return true | 
|           } | 
|         } | 
|         return false | 
|       } | 
|     }, | 
|     unifyProUser (v) { | 
|       if (v) { | 
|         let tempProUserList = this.tempSelectRows[0].proUserList | 
|         for (const item of this.tempSelectRows) { | 
|           item.proUserList = tempProUserList | 
|         } | 
|       } | 
|     } | 
|   } | 
| } | 
| </script> | 
| <style lang="scss" scoped> | 
| .text{ | 
| font-weight: 500; | 
|    | 
| } | 
| .planDate ::v-deep .el-input--small .el-input__inner { | 
|   width: 140px; | 
| } | 
| .disNum ::v-deep .el-input--small .el-input__inner { | 
|   width: 80px; | 
| } | 
| .user ::v-deep .el-input--small .el-input__inner { | 
|   width: 180px; | 
| } | 
|   | 
| ::v-deep .el-dropdown { | 
|   width: 155px !important; | 
|   vertical-align: middle; | 
|   margin-left: 5px; | 
| } | 
| .custom-header { | 
|   display: flex; | 
|   justify-content: space-between; | 
| } | 
| </style> |