| | |
| | | <div class="mainContent"> |
| | | <el-form ref="user" label-width="140px" autoComplete="on" :model="user" :rules="createUserRules" |
| | | label-position="right"> |
| | | <!-- 用户名称 |
| | | <el-form-item class="optionItem" label="用户名称:" prop="nickName"> |
| | | <el-input v-model="user.nickName" placeholder="填写用户名称"></el-input> |
| | | </el-form-item> --> |
| | | <!-- 用户名称 --> |
| | | <el-form-item class="optionItem" label="用户名称:" prop="username"> |
| | | <el-input v-model="user.username" placeholder="填写用户名称"></el-input> |
| | | </el-form-item> |
| | | <!-- 用户密码 --> |
| | | <el-form-item class="optionItems" label="用户密码:" prop="password"> |
| | | <el-input v-model="user.password" type="password" placeholder="请输入用户密码"></el-input> |
| | | </el-form-item> |
| | | <!-- 所属用户姓名 --> |
| | | <el-form-item class="optionItem" label="所属用户姓名:" prop="username"> |
| | | <el-input v-model="user.username" placeholder="请填写用户姓名"></el-input> |
| | | <el-form-item class="optionItem" label="所属用户姓名:" prop="nickName"> |
| | | <el-input v-model="user.nickName" placeholder="请填写用户姓名"></el-input> |
| | | </el-form-item> |
| | | <!-- 性别 --> |
| | | <el-form-item class="optionItem" label="性别:" prop="sex"> |
| | |
| | | </el-form-item> |
| | | <!-- 所属手机号码 --> |
| | | <el-form-item class="optionItem" label="所属手机号码:" prop="mobile"> |
| | | <el-input v-model="user.mobile" placeholder="请填写手机号码"></el-input> |
| | | <el-input v-model="user.mobile" maxlength="11" placeholder="请填写手机号码"></el-input> |
| | | </el-form-item> |
| | | <!-- 邮箱地址 --> |
| | | <el-form-item class="optionItem" label="邮箱地址:" prop="email"> |
| | |
| | | </el-form-item> |
| | | <!-- 选择角色 --> |
| | | <el-form-item class="optionItem" label="选择角色:" prop="role"> |
| | | <el-select v-model="user.role" placeholder="请选择所属角色"> |
| | | <el-select v-model="user.role" placeholder="请选择所属角色" multiple collapse-tags> |
| | | <el-option v-for="item in roleList" :key="item.id" :label="item.name" :value="item.id"> |
| | | </el-option> |
| | | </el-select> |
| | | <!-- <el-select v-model="user.role" placeholder="请选择所属角色"> |
| | | <el-option v-for="item in roleList" :key="item.id" :label="item.name" :value="item.id" |
| | | :disabled="item.disabled"> |
| | | </el-option> |
| | | </el-select> |
| | | </el-select> --> |
| | | </el-form-item> |
| | | <!-- 用户类型 --> |
| | | <el-form-item class="optionItem" label="用户类型:" prop="userType"> |
| | | <el-select v-model="user.userType" placeholder="请选择用户类型"> |
| | | <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id" |
| | | :disabled="item.disabled"> |
| | | <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id"> |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <!-- 座机/分机 --> |
| | | <el-form-item class="optionItem" label="座机/分机:" prop="zj"> |
| | | <div class="optionHandleSp"> |
| | | <el-input class="areaNumber" v-model="user.zj.areaNumber" placeholder="电话区号"> |
| | | <div class="user-item"> |
| | | <el-form-item label="座机/分机:" prop="zjarea"> |
| | | <el-input v-model="user.zjarea" placeholder="电话区号"> |
| | | </el-input> |
| | | <el-input class="telNumber" v-model="user.zj.phoneNumber" placeholder="电话号码"> |
| | | </el-form-item> |
| | | <el-form-item prop="zjnumber" class="left-px"> |
| | | <el-input v-model="user.zjnumber" placeholder="电话号码"> |
| | | </el-input> |
| | | <el-input class="moreNumber" v-model="user.zj.moreNumber" placeholder="分机号码"> |
| | | </el-form-item> |
| | | <el-form-item prop="zjother" class="left-px"> |
| | | <el-input v-model="user.zjother" placeholder="分机号码"> |
| | | </el-input> |
| | | </div> |
| | | </el-form-item> |
| | | </el-form-item> |
| | | </div> |
| | | <!-- 所属部门 --> |
| | | <el-form-item class="optionItem" label="所属部门:" prop="departmentId"> |
| | | <el-select v-model="user.departmentId" placeholder="请选择所属部门" @change="getDepartName"> |
| | |
| | | <script> |
| | | export default { |
| | | data() { |
| | | // const validateNickname = (rule, value, callback) => { |
| | | // if (!value) { |
| | | // callback(new Error("用户名称不能为空")); |
| | | // }else{ |
| | | // callback(); |
| | | // } |
| | | // }; |
| | | const validateNickname = (rule, value, callback) => { |
| | | if (!value) { |
| | | callback(new Error("用户名称不能为空")); |
| | | } else { |
| | | callback(); |
| | | } |
| | | }; |
| | | const validatePass = (rule, value, callback) => { |
| | | if (!value) { |
| | | callback(new Error("用户密码不能为空")); |
| | |
| | | const rep = /^\w+$/; |
| | | if (!rep.test(value)) { |
| | | callback(new Error("密码只能是以数字、26个英文字母或者下划线组成的字符串")); |
| | | }else{ |
| | | } else { |
| | | callback(); |
| | | } |
| | | } |
| | |
| | | const rep = /^[\u4E00-\u9FA5]{2,4}$/; |
| | | if (!rep.test(value)) { |
| | | callback("请输入正确的用户姓名"); |
| | | }else{ |
| | | } else { |
| | | callback(); |
| | | } |
| | | } |
| | |
| | | const rep = /(^1[3|4|5|7|8|9]\d{9}$)|(^09\d{8}$)/ |
| | | if (!rep.test(value)) { |
| | | callback("请输入正确的手机号码"); |
| | | }else{ |
| | | } else { |
| | | callback(); |
| | | } |
| | | } |
| | | }; |
| | | // const validateMail = (rule, value, callback) => { |
| | | // if (value) { |
| | | // const rep = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/; |
| | | // if (!rep.test(value)) { |
| | | // callback(new Error("请输入正确的邮箱")) |
| | | // } |
| | | // } |
| | | // }; |
| | | const validateMail = (rule, value, callback) => { |
| | | if (value) { |
| | | const rep = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/; |
| | | if (!rep.test(value)) { |
| | | callback(new Error("请输入正确的邮箱")) |
| | | }else{ |
| | | callback(); |
| | | } |
| | | }else{ |
| | | callback(); |
| | | } |
| | | }; |
| | | const validateRole = (rule, value, callback) => { |
| | | if (!value) { |
| | | callback(new Error("所属角色不能为空")); |
| | |
| | | callback(); |
| | | } |
| | | }; |
| | | // const validateMac = (rule, value, callback) => { |
| | | // if (value) { |
| | | // callback(new Error("")); |
| | | // }else{ |
| | | // callback() |
| | | // } |
| | | // }; |
| | | // const validateIp = (rule, value, callback) => { |
| | | // if (value) { |
| | | // }else{ |
| | | // callback() |
| | | // } |
| | | // }; |
| | | const validateMac = (rule, value, callback) => { |
| | | if (value) { |
| | | callback(); |
| | | }else{ |
| | | callback() |
| | | } |
| | | }; |
| | | const validateIp = (rule, value, callback) => { |
| | | if (value) { |
| | | callback(); |
| | | }else{ |
| | | callback() |
| | | } |
| | | }; |
| | | return { |
| | | user: { |
| | | // nickName: '', |
| | | nickName: '', |
| | | password: '', |
| | | username: '', |
| | | sex: 1, |
| | |
| | | email: '', |
| | | role: null, |
| | | userType: null, |
| | | zj: { |
| | | areaNumber: '', |
| | | phoneNumber: "", |
| | | moreNumber: "", |
| | | }, |
| | | zjarea: '', |
| | | zjnumber: '', |
| | | zjother: '', |
| | | departmentId: null, |
| | | jobTitle: null, |
| | | mac: '', |
| | | ip: '', |
| | | }, |
| | | createUserRules: { |
| | | // nickName: [ |
| | | // { required: true, trigger: "blur", validator: validateNickname }, |
| | | // ], |
| | | nickName: [ |
| | | { required: true, trigger: "blur", validator: validateNickname }, |
| | | ], |
| | | password: [ |
| | | { required: true, trigger: "blur", validator: validatePass }, |
| | | ], |
| | |
| | | mobile: [ |
| | | { required: true, trigger: "blur", validator: validatePhone }, |
| | | ], |
| | | // email: [ |
| | | // { required: false, trigger: "blur", validator: validateMail }, |
| | | // ], |
| | | email: [ |
| | | { required: false, trigger: "blur", validator: validateMail }, |
| | | ], |
| | | role: [ |
| | | { required: true, trigger: "change", validator: validateRole }, |
| | | ], |
| | |
| | | jobTitle: [ |
| | | { required: true, trigger: "blur", validator: validateWork }, |
| | | ], |
| | | // mac: [ |
| | | // { required: false, trigger: "blur", validator: validateMac }, |
| | | // ], |
| | | // ip: [ |
| | | // { required: false, trigger: "blur", validator: validateIp }, |
| | | // ], |
| | | mac: [ |
| | | { required: false, trigger: "blur", validator: validateMac }, |
| | | ], |
| | | ip: [ |
| | | { required: false, trigger: "blur", validator: validateIp }, |
| | | ], |
| | | }, |
| | | roleList: [ |
| | | { name: '角色1', id: 1 }, { name: '角色2', id: 2 } |
| | | |
| | | ], |
| | | typeList: [ |
| | | { name: '类型1', id: 1 }, { name: '类型2', id: 2 } |
| | | |
| | | ], |
| | | departList: [] |
| | | } |
| | |
| | | this.$axios.get('sccg/depart/page').then(res => { |
| | | that.departList = res.data.records; |
| | | }) |
| | | // 获取用户类型 |
| | | this.getUserTypeList(); |
| | | }, |
| | | methods: { |
| | | // 提交注册 |
| | |
| | | this.$axios.post('sccg/admin/register', { |
| | | departmentId: user.departmentId, |
| | | email: user.email, |
| | | jsDy: user.isDy, |
| | | icon:'', |
| | | isDy: `${user.isDy}`, |
| | | jobTitle: user.jobTitle, |
| | | mobile: user.mobile, |
| | | note:'', |
| | | roleIds:user.role, |
| | | // nickName: user.nickName, |
| | | sex:`${user.sex}`, |
| | | password: user.password, |
| | | userType: user.userType, |
| | | userType: `${user.userType}`, |
| | | username: user.username, |
| | | departName:user.departName, |
| | | zj:user.zjarea+`${user.zjnumber}`+user.zjother, |
| | | // departName:user.departName, |
| | | }).then(res => { |
| | | if (res.code === 200) { |
| | | console.log(1); |
| | |
| | | type:'warning', |
| | | message:'该用户已注册' |
| | | }) |
| | | }else{ |
| | | this.$message({ |
| | | type:'warning', |
| | | message:res.message |
| | | }) |
| | | } |
| | | }) |
| | | }else{ |
| | | } else { |
| | | return false |
| | | } |
| | | }) |
| | |
| | | }) |
| | | }, |
| | | // 重置表单 |
| | | resetForm(){ |
| | | resetForm() { |
| | | this.$refs['user'].resetFields(); |
| | | }, |
| | | // 获得部门名称 |
| | | getDepartName(data){ |
| | | this.departList.forEach(item=>{ |
| | | if(item.id === data){ |
| | | getDepartName(data) { |
| | | this.departList.forEach(item => { |
| | | if (item.id === data) { |
| | | this.user.departName = item.departName |
| | | } |
| | | }) |
| | | }, |
| | | // 获取用户类型 |
| | | getUserTypeList(){ |
| | | this.$axios({ |
| | | method:'get', |
| | | url:'sccg/dict/query_user_type' |
| | | }) |
| | | .then(res=>{ |
| | | console.log(res); |
| | | this.typeList = res.data; |
| | | }) |
| | | } |
| | | }, |
| | |
| | | } |
| | | } |
| | | |
| | | .optionHandleSp { |
| | | .user-item { |
| | | display: flex; |
| | | |
| | | .areaNumber, |
| | | .moreNumber { |
| | | flex: 1; |
| | | } |
| | | |
| | | .telNumber { |
| | | flex: 2; |
| | | .left-px :deep(.el-form-item__content) { |
| | | margin-left: 0px !important; |
| | | } |
| | | } |
| | | .optionBtn { |
| | | display: flex; |
| | | margin-top: 20px; |
| | | |
| | | .optionBtn { |
| | | display: flex; |
| | | margin-top: 20px; |
| | | |
| | | .btn { |
| | | padding: 12px 50px; |
| | | .btn { |
| | | padding: 12px 50px; |
| | | } |
| | | } |
| | | } |
| | | |
| | | } |
| | | } |
| | | } |
| | | } |
| | | </style> |