| <template> | 
|   <GlobalWindow | 
|     :title="title" | 
|     :visible.sync="visible" | 
|     width="80%" | 
|     :confirm-working="isWorking" | 
|     @confirm="submit" | 
|   > | 
|     <div style="min-width:950px;width:100%"> | 
|       <div class="form-wrap"> | 
|         <div>基本信息</div> | 
|         <el-form :model="form" ref="form" inline :rules="rules" label-suffix=":" label-width="100px"> | 
|           <el-form-item label="工艺名称" prop="name"> | 
|             <el-input v-model="form.name"  placeholder="请输入工艺名称" max="10" v-trim/> | 
|           </el-form-item> | 
|           <el-form-item label="工艺编码" prop="code"> | 
|             <el-input v-model="form.code" :disabled="form.id" placeholder="可填写,忽略将自动生成" max="10" v-trim/> | 
|           </el-form-item> | 
|           <el-form-item label="所属工厂" prop="departId"> | 
|             <el-select v-model="form.departId" placeholder="请选择所属工厂" @visible-change="visibleChange" :loading="loading" clearable filterable @change="selectDepart"> | 
|               <el-option | 
|                 v-for="item in factoreis" | 
|                 :key="item.id" | 
|                 :label="item.name" | 
|                 :value="item.id"> | 
|               </el-option> | 
|             </el-select> | 
|           </el-form-item> | 
|         </el-form> | 
|       </div> | 
|       <!-- 列表 --> | 
|       <el-tabs v-model="activeName"> | 
|         <el-tab-pane label="工序列表" name="first"></el-tab-pane> | 
|       </el-tabs> | 
|       <ul class="toolbar"> | 
|           <li><el-button type="primary" @click="addMaterial">添加工序</el-button></li> | 
|           <el-button type="primary" @click="up" plain>上移</el-button> | 
|           <el-button type="primary" @click="down" plain>下移</el-button> | 
|         </ul> | 
|       <el-table | 
|         :data="form.rpList" | 
|         border | 
|         stripe | 
|         @selection-change="handleSelectionChange" | 
|       > | 
|         <el-table-column type="selection" fixed="left" width="55"></el-table-column> | 
|         <el-table-column prop="name" label="工序名称" min-width="100px"></el-table-column> | 
|         <el-table-column prop="code" label="工序编码" fixed="left" min-width="100px"></el-table-column> | 
|         <!-- <el-table-column prop="sortNum" label="加工顺序" min-width="100px"></el-table-column> --> | 
|         <el-table-column label="工序类型" prop="type" min-width="100px"> | 
|           <template slot-scope="{row}"> | 
|             {{ row.type == 1 ? '委外' : '自有' }} | 
|           </template> | 
|         </el-table-column> | 
|           <!-- <el-table-column prop="userId" label="负责人" min-width="100px"></el-table-column> --> | 
|         <el-table-column label="设备收集层次" min-width="100px"> | 
|           <template slot-scope="{row}"> | 
|             {{ row.level == 0 ? '设备' : '设备组'  }} | 
|           </template> | 
|         </el-table-column> | 
|         <el-table-column label="操作" prop="createTime" min-width="100px"> | 
|           <template slot-scope="{row}"> | 
|             <span> | 
|               <el-button type="text" @click="deleteProdure(row)">删除</el-button> | 
|             </span> | 
|           </template> | 
|         </el-table-column> | 
|       </el-table> | 
|     </div> | 
|     <!-- 新增工序 --> | 
|     <SelectProcedure | 
|       ref="selectProcedure" | 
|       @selectData="selectData" | 
|     ></SelectProcedure> | 
|   </GlobalWindow> | 
| </template> | 
|   | 
| <script> | 
| import BaseOpera from '@/components/base/BaseOpera' | 
| import GlobalWindow from '@/components/common/GlobalWindow' | 
| import SelectProcedure from '@/components/ext/SelectProcedure' | 
| import Pagination from '@/components/common/Pagination' | 
| import { getDepartmentListByConditon } from '@/api/ext/departmentExt' | 
|   | 
| import { validateSpecialKey } from '@/assets/js/validate' | 
| export default { | 
|   name: 'OperaBomExtWindow', | 
|   extends: BaseOpera, | 
|   components: { GlobalWindow, Pagination, SelectProcedure }, | 
|   data () { | 
|     return { | 
|       // 表单数据 | 
|       searchForm: { | 
|         name: '', | 
|         code: '' | 
|       }, | 
|       form: { | 
|         id: null, | 
|         name: '', | 
|         code: '', | 
|         departId: null, | 
|         rpList: [ | 
|         ] | 
|       }, | 
|       factoreis: [], | 
|       loading: false, | 
|       // 验证规则 | 
|       rules: { | 
|         name: [ | 
|           { max: 10, message: '输入字数不超10', trigger: 'blur' }, | 
|           { required: true, message: '请输入工艺名称', trigger: 'blur' } | 
|         ], | 
|         // code: [ | 
|         //   { required: true, message: '请输入工艺编码', trigger: 'blur' }, | 
|         //   { max: 10, message: '输入字数不超10', trigger: 'blur' }, | 
|         //   { validator: validateSpecialKey, trigger: 'blur' } | 
|         //   //{ pattern: /^[0-9a-zA-Z]+$/, message: '只可以输入数字、字母和符号', trigger: 'change' } | 
|         // ], | 
|         departId: [ | 
|           { required: true, message: '请选择所属工厂', trigger: 'change' } | 
|         ] | 
|       }, | 
|       selectedRows: [], | 
|       productes: [], | 
|       selectP: [], | 
|       activeName: 'first', | 
|     } | 
|   }, | 
|   created () { | 
|     this.config({ | 
|       api: '/ext/routeProcedureExt', | 
|       'field.id': 'id' | 
|     }) | 
|      | 
|   }, | 
|   methods: { | 
|     visibleChange(e) { | 
|       if (e) { | 
|         this.loading = true | 
|         getDepartmentListByConditon({ | 
|           type: 1 | 
|         }) | 
|           .then(res => { | 
|             // console.log(res) | 
|             this.factoreis = res | 
|             this.loading = false | 
|           }) | 
|           .catch(err => { | 
|             console.log(err) | 
|             this.loading = false | 
|           }) | 
|       } | 
|     }, | 
|     open (title, target) { | 
|       this.title = title | 
|       this.visibleChange(true) | 
|       this.visible = true | 
|       this.form.rpList = [] | 
|       // 新建 | 
|       if (target == null) { | 
|         this.$nextTick(() => { | 
|           this.$refs.form.resetFields() | 
|           this.form[this.configData['field.id']] = null | 
|         }) | 
|         return | 
|       } | 
|       // 编辑 | 
|       this.$nextTick(() => { | 
|         for (const key in this.form) { | 
|           this.form[key] = target[key] | 
|         } | 
|         this.form.rpList = target.proceList | 
|         // console.log(this.form, target) | 
|       }) | 
|     }, | 
|     submit () { | 
|       // 提交修改 | 
|       this.form.rpList.forEach((item, index, arr) => { | 
|         item.sortnum = index | 
|         arr[index] = item | 
|       }) | 
|       this.confirm() | 
|     }, | 
|     selectDepart (v) { | 
|       this.form.rpList = [] | 
|     }, | 
|     /* | 
|       工艺部分 | 
|     */ | 
|     handleSelectionChange (selectedRows) { | 
|       this.selectedRows = selectedRows | 
|     }, | 
|     swapArray (arr, index1, index2) { | 
|       // 排序核心 | 
|       arr[index1] = arr.splice(index2, 1, arr[index1])[0] | 
|       return arr | 
|     }, | 
|     up () { | 
|       if (this.selectedRows.length !== 1) { | 
|         this.$tip.warning('只能选择1条') | 
|         return | 
|       } | 
|       const selectIndex = this.form.rpList.findIndex((t) => t.id === this.selectedRows[0].id) | 
|       if (selectIndex === 0) { | 
|         this.$tip.warning('已经是第一条了') | 
|         return | 
|       } | 
|       this.form.rpList = this.swapArray(this.form.rpList, selectIndex, selectIndex - 1) | 
|     }, | 
|     down () { | 
|       if (this.selectedRows.length !== 1) { | 
|         this.$tip.warning('只能选择1条') | 
|         return | 
|       } | 
|       const selectIndex = this.form.rpList.findIndex((t) => t.id === this.selectedRows[0].id) | 
|       if (selectIndex === this.form.rpList.length - 1) { | 
|         this.$tip.warning('已经是最后一条了') | 
|         return | 
|       } | 
|       this.form.rpList = this.swapArray(this.form.rpList, selectIndex, selectIndex + 1) | 
|     }, | 
|     deleteProdure (row) { | 
|       // console.log(row) | 
|       this.form.rpList.splice(this.form.rpList.indexOf(row), 1) | 
|     }, | 
|     /* | 
|       工序 | 
|     */ | 
|     addMaterial () { | 
|       // console.log('添加工序') | 
|       if (!this.form.departId) { | 
|         this.$tip.error('请先选择工厂') | 
|         return | 
|       } | 
|       const ids = this.form.rpList.map(e => { return e.id }).join(',') | 
|       this.$refs.selectProcedure.open('选择工序', { ids, departId: this.form.departId }) | 
|       // this.search() | 
|     }, | 
|     selectData (data) { | 
|       this.form.rpList.push(...data.selectedProcedures) | 
|     }, | 
|     __confirmCreate () { | 
|       this.$refs.form.validate((valid) => { | 
|         if (!this.form.rpList) { | 
|           this.$tip.console.error('至少选择一道工序') | 
|           return | 
|         } | 
|         if (!valid) { | 
|           return | 
|         } | 
|         // 调用新建接口 | 
|         this.isWorking = true | 
|         this.api.create(this.form) | 
|           .then(() => { | 
|             this.visible = false | 
|             this.$tip.apiSuccess('新建成功') | 
|             this.$emit('success') | 
|           }) | 
|           .catch(e => { | 
|             this.$tip.apiFailed(e) | 
|           }) | 
|           .finally(() => { | 
|             this.isWorking = false | 
|           }) | 
|       }) | 
|     }, | 
|     __confirmEdit () { | 
|       this.$refs.form.validate((valid) => { | 
|         if (!this.form.rpList) { | 
|           this.$tip.console.error('至少选择一道工序') | 
|           return | 
|         } | 
|         if (!valid) { | 
|           return | 
|         } | 
|         // 调用更新接口 | 
|         this.isWorking = true | 
|         this.api.updateById(this.form) | 
|           .then(() => { | 
|             this.visible = false | 
|             this.$tip.apiSuccess('修改成功') | 
|             this.$emit('success') | 
|           }) | 
|           .catch(e => { | 
|             this.$tip.apiFailed(e) | 
|           }) | 
|           .finally(() => { | 
|             this.isWorking = false | 
|           }) | 
|       }) | 
|     } | 
|   } | 
| } | 
| </script> | 
|   | 
| <style lang="scss" scoped> | 
| .toolbar { | 
|   border-bottom: 1px solid #eee; | 
|   padding-bottom: 10px; | 
|   li { | 
|     display: inline-block; | 
|     margin-right: 6px; | 
|   } | 
| } | 
| ::v-deep .el-dialog { | 
|   // height: calc(100% - 190px); | 
|   margin-top: 0 !important; | 
|   top: 10%; | 
|   bottom: 10%; | 
|   height: 80%; | 
|   min-height: 600px; | 
| } | 
| ::v-deep .el-dialog__footer { | 
|   padding: 0px; | 
| } | 
| ::v-deep .el-dialog__body { | 
|   height: calc(100% - 114px); | 
| } | 
| </style> |