| <template> | 
|   <GlobalWindow | 
|     :title="title" | 
|     :visible.sync="visible" | 
|     :confirm-working="isWorking" | 
|     @confirm="confirm" | 
|   > | 
|     <el-form :model="form" ref="form" :rules="rules"> | 
|       <el-form-item label="属性名称:" prop="name"> | 
|         <el-input v-model="form.name" placeholder="请输入属性名称" max="20" v-trim/> | 
|       </el-form-item> | 
|       <el-form-item label="工序:" prop="procedureId"> | 
|         <el-select style="width:48%;" v-model="factory" placeholder="请选择工厂" @visible-change="visibleChange" :loading="loading" filterable clearable @change="selectFactory"> | 
|           <el-option | 
|             v-for="item in factoreis" | 
|             :key="item.id" | 
|             :label="item.name" | 
|             :value="item.id" | 
|           > | 
|           </el-option> | 
|         </el-select> | 
|         <div style="width:4%;display: inline-block;"></div> | 
|         <el-select style="width:48%" v-model="form.procedureId" filterable clearable placeholder="请选择工序"> | 
|           <el-option | 
|             v-for="item in productes" | 
|             :key="item.id" | 
|             :label="item.name" | 
|             :value="item.id" | 
|           > | 
|           </el-option> | 
|         </el-select> | 
|       </el-form-item> | 
|       <el-form-item label="字段类型:" prop="type"> | 
|         <el-select v-model="form.type" filterable clearable placeholder="请选择字段类型"> | 
|           <el-option | 
|             v-for="item in options" | 
|             :key="item.id" | 
|             :label="item.name" | 
|             :value="item.id"> | 
|           </el-option> | 
|         </el-select> | 
|       </el-form-item> | 
|       <el-form-item v-if="form.type==0||form.type==1" label="选项内容:" prop="remark"> | 
|         <el-input v-model="form.remark" placeholder="每个选项最多10个字,同时新建多个选项时,请用“空格”隔开" v-trim/> | 
|       </el-form-item> | 
|       <el-form-item label="提示文字:" prop="tips"> | 
|         <el-input v-model="form.tips" placeholder="请输入提示文字" v-trim/> | 
|       </el-form-item> | 
|       <el-form-item label="排序码:" prop="sortnum"> | 
|         <el-input v-model="form.sortnum" placeholder="请输入排序码,升序,只能输入数字" v-trim/> | 
|       </el-form-item> | 
|       <el-form-item label="是否启用:" prop="status" > | 
|         <el-switch v-model="form.status" :inactive-value="0" :active-value="1"></el-switch> | 
|       </el-form-item> | 
|       <!-- <el-form-item label="是否必填:" prop="isRequired" > | 
|         <el-switch v-model="form.isRequired" :inactive-value="0" :active-value="1"></el-switch> | 
|       </el-form-item> --> | 
|     </el-form> | 
|   </GlobalWindow> | 
| </template> | 
|   | 
| <script> | 
| import BaseOpera from '@/components/base/BaseOpera' | 
| import GlobalWindow from '@/components/common/GlobalWindow' | 
| import { getDepartmentListByConditon } from '@/api/ext/departmentExt' | 
| import { productesGroup } from '@/api/ext/proceduresExt' | 
| export default { | 
|   name: 'OperaCheckAttrExtWindow', | 
|   extends: BaseOpera, | 
|   components: { GlobalWindow }, | 
|    | 
|   data () { | 
|     const valEndValue = (rule, value, callback) => { | 
|       if (this.form.remark === '' || this.form.remark === null) { | 
|         return callback(new Error('请输入选项类容')) | 
|       }  | 
|       const array = this.form.remark.split(' ') | 
|       for (const item of array) { | 
|         if (item.length > 10) { | 
|           return callback(new Error('选项长度不能超过10')) | 
|         } | 
|       } | 
|       return callback() | 
|     } | 
|     return { | 
|       options: [ | 
|         // 0单选 1多选 2文本 3数字 4日期 | 
|         { name: '单选', id: 0 }, | 
|         { name: '多选', id: 1 }, | 
|         { name: '文本', id: 2 }, | 
|         { name: '数字', id: 3 }, | 
|         { name: '日期', id: 4 } | 
|       ], | 
|       factoreis: [], | 
|       factory: null, | 
|       loading: false, | 
|       productes: [], | 
|       // 表单数据 | 
|       form: { | 
|         id: '', | 
|         remark: '', | 
|         procedureId: null, | 
|         type: null, | 
|         sortnum: '', | 
|         isRequired: 1, | 
|         status: 1, | 
|         tips: '', | 
|         name: '' | 
|       }, | 
|       // 验证规则 | 
|       rules: { | 
|         name: [ | 
|           { required: true, message: '请输入属性名称', trigger: 'blur' }, | 
|           { max: 20, message: '输入字数不超过20', trigger: 'blur' } | 
|         ], | 
|         procedureId: [{ required: true, message: '请选择工序', trigger: 'change' }], | 
|         type: [{ required: true, message: "请选择类型", trigger: 'change' }], | 
|         remark: [{ required: true, validator: valEndValue, trigger: 'change' }], | 
|         tips: [{ max: 10, message: '输入字数不超过10', trigger: 'blur' }], | 
|         sortnum: [{ pattern: /^[0-9]+$/, message: '只能输入数字', trigger: 'change' }] | 
|       } | 
|     } | 
|   }, | 
|   created () { | 
|     this.config({ | 
|       api: '/ext/checkAttrExt', | 
|       '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 => { | 
|             this.loading = false | 
|             console.log(err) | 
|           }) | 
|       } | 
|     }, | 
|     open (title, target) { | 
|       this.title = title | 
|       this.visibleChange(true) | 
|       this.visible = true | 
|       // 新建 | 
|       if (target == null) { | 
|         this.$nextTick(() => { | 
|           this.$refs.form.resetFields() | 
|           this.factory = null | 
|           this.form.remark = null | 
|           this.$refs.form.clearValidate() | 
|           this.form[this.configData['field.id']] = null | 
|         }) | 
|         return | 
|       } | 
|       // 编辑 | 
|       this.$nextTick(() => { | 
|         for (const key in this.form) { | 
|           this.form[key] = target[key] | 
|         } | 
|         this.factory = target.pmodel.orgId | 
|         this.getProcedure(target.pmodel.orgId) | 
|       }) | 
|     }, | 
|     selectFactory (v) { | 
|       // console.log(this.form.remark); | 
|       this.form.procedureId = null | 
|       this.getProcedure(v) | 
|     }, | 
|     getProcedure (v) { | 
|       productesGroup({ orgId: v }) | 
|         .then(res => { | 
|           this.productes = res | 
|         }) | 
|         .catch(err => { | 
|           console.log(err) | 
|         }) | 
|     } | 
|   } | 
| } | 
| </script> |