| <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="userName"> | 
|           <el-input v-model="form.userName" :disabled="form.id ? true : false" maxlength="20" placeholder="请输入,不超过20个字符" v-trim /> | 
|         </el-form-item> | 
|         <el-form-item label="登录密码" prop="password"> | 
|           <el-input v-model="form.password" :disabled="form.id ? true : false" show-password placeholder="密码支持数字、字符组合,长度6-18位" v-trim /> | 
|         </el-form-item> | 
|         <el-form-item label="员工姓名" prop="realName"> | 
|           <el-input v-model="form.realName" placeholder="请输入员工姓名" v-trim /> | 
|         </el-form-item> | 
|         <el-form-item label="手机号" prop="mobile"> | 
|           <el-input v-model="form.mobile" maxlength="11" show-word-limit placeholder="请输入手机号" v-trim /> | 
|         </el-form-item> | 
|         <el-form-item label="角色" prop="roleId"> | 
|             <el-select v-model="form.roleId" placeholder="请选择"> | 
|                 <el-option | 
|                     v-for="item in roleList" | 
|                     :key="item.id" | 
|                     :label="item.name" | 
|                     :value="item.id"> | 
|                 </el-option> | 
|             </el-select> | 
|         </el-form-item> | 
|       </el-form> | 
|     </GlobalWindow> | 
|   </template> | 
|      | 
|   <script> | 
|   import BaseOpera from '@/components/base/BaseOpera' | 
|   import GlobalWindow from '@/components/common/GlobalWindow' | 
|   import { fetchAll } from '@/api/system/role' | 
|   import { companyCreateUser, companyUpdUser } from '@/api/business/anchor' | 
|   | 
|   export default { | 
|     name: 'OperaBrandWindow', | 
|     extends: BaseOpera, | 
|     components: { GlobalWindow }, | 
|     data() { | 
|       var validatePass = (rule, value, callback) => { | 
|         if (value === '') { | 
|           callback(new Error('登录密码不能为空')); | 
|         } else { | 
|           if (!/^(?![^a-zA-Z]+$)(?!\D+$)/.test(value)) { | 
|             callback(new Error('密码支持数字、字符组合,长度6-18位')); | 
|           } | 
|           callback(); | 
|         } | 
|       }; | 
|       var validatePhone = (rule, value, callback) => { | 
|         if (value === '') { | 
|           callback(); | 
|         } else { | 
|           if (!/^1[3,4,5,6,7,8,9][0-9]{9}$/.test(value)) { | 
|             callback(new Error('手机号码格式不正确!')); | 
|           } | 
|           callback(); | 
|         } | 
|       }; | 
|       return { | 
|         roleList: [], | 
|         // 表单数据 | 
|         form: { | 
|           id: null, | 
|           userName: '', | 
|           password: '', | 
|           realName: '', | 
|           mobile: '', | 
|           roleId: '' | 
|         }, | 
|         // 验证规则 | 
|         rules: { | 
|           userName: [ | 
|             { required: true, message: '登录账号不能为空', trigger: 'blur' } | 
|           ], | 
|           password: [ | 
|             { required: true, validator: validatePass, trigger: 'blur' } | 
|           ], | 
|           realName: [ | 
|             { required: true, message: '主播姓名不能为空', trigger: 'blur' } | 
|           ], | 
|           mobile: [ | 
|             { validator: validatePhone, trigger: 'blur' } | 
|           ] | 
|         } | 
|       } | 
|     }, | 
|     created() { | 
|       this.config({ | 
|         api: '/business/anchor', | 
|         'field.id': 'id' | 
|       }) | 
|     }, | 
|     methods: { | 
|         confirm() { | 
|             this.$refs.form.validate((valid) => { | 
|                 if (!valid) return | 
|                 // 调用新建接口 | 
|                 this.isWorking = true | 
|                 // 新建 | 
|                 if (!this.form.id) { | 
|                     companyCreateUser(this.form) | 
|                         .then(res => { | 
|                             this.visible = false | 
|                             this.$tip.apiSuccess('新建成功') | 
|                             this.$emit('success') | 
|                         }) | 
|                         .catch(e => { | 
|                             this.$tip.apiFailed(e) | 
|                         }) | 
|                         .finally(() => { | 
|                             this.isWorking = false | 
|                         }) | 
|                 } else { | 
|                     companyUpdUser(this.form) | 
|                         .then(res => { | 
|                             this.visible = false | 
|                             this.$tip.apiSuccess('编辑成功') | 
|                             this.$emit('success') | 
|                         }) | 
|                         .catch(e => { | 
|                             this.$tip.apiFailed(e) | 
|                         }) | 
|                         .finally(() => { | 
|                             this.isWorking = false | 
|                         }) | 
|                 } | 
|             }) | 
|         }, | 
|         /** | 
|          * 打开窗口 | 
|          * @title 窗口标题 | 
|          * @target 编辑的对象 | 
|          */ | 
|         open (title, target) { | 
|             this.title = title | 
|             this.visible = true | 
|             // 获取所有角色 | 
|             fetchAll() | 
|                 .then(res => { | 
|                     this.roleList = res | 
|                 }) | 
|             // 新建 | 
|             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] | 
|                 } | 
|             }) | 
|         } | 
|     } | 
|   } | 
|   </script> | 
|      |