| | |
| | | <el-form ref="user" label-width="140px" autoComplete="on" :model="user" :rules="createUserRules" |
| | | label-position="right"> |
| | | <!-- 用户名称 --> |
| | | <el-form-item class="optionItem" label="用户名称:" prop="nick_name"> |
| | | <el-input v-model="user.nick_name" 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="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="true_name"> |
| | | <el-input v-model="user.true_name" placeholder="请填写用户姓名"></el-input> |
| | | <el-form-item class="optionItem" label="所属用户姓名:" prop="username"> |
| | | <el-input v-model="user.username" placeholder="请填写用户姓名"></el-input> |
| | | </el-form-item> |
| | | <!-- 性别 --> |
| | | <el-form-item class="optionItem" label="性别:" prop="gender"> |
| | | <!-- <el-form-item class="optionItem" label="性别:" prop="gender"> |
| | | <el-radio-group v-model="user.gender"> |
| | | <el-radio :label="1">男</el-radio> |
| | | <el-radio :label="2">女</el-radio> |
| | | </el-radio-group> |
| | | </el-form-item> |
| | | </el-form-item> --> |
| | | <!-- 是否党员 --> |
| | | <el-form-item class="optionItem" label="是否党员:" prop="member"> |
| | | <el-radio-group v-model="user.member"> |
| | | <el-form-item class="optionItem" label="是否党员:" prop="isDy"> |
| | | <el-radio-group v-model="user.isDy"> |
| | | <el-radio :label="1">是</el-radio> |
| | | <el-radio :label="0">否</el-radio> |
| | | </el-radio-group> |
| | | </el-form-item> |
| | | <!-- 所属手机号码 --> |
| | | <el-form-item class="optionItem" label="所属手机号码:" prop="phone"> |
| | | <el-input v-model="user.phone" placeholder="请填写手机号码"></el-input> |
| | | <el-form-item class="optionItem" label="所属手机号码:" prop="mobile"> |
| | | <el-input v-model="user.mobile" placeholder="请填写手机号码"></el-input> |
| | | </el-form-item> |
| | | <!-- 邮箱地址 --> |
| | | <el-form-item class="optionItem" label="邮箱地址:" prop="mail"> |
| | | <el-input v-model="user.mail" placeholder="请填写邮箱地址"></el-input> |
| | | <el-form-item class="optionItem" label="邮箱地址:" prop="email"> |
| | | <el-input v-model="user.email" placeholder="请填写邮箱地址"></el-input> |
| | | </el-form-item> |
| | | <!-- 选择角色 --> |
| | | <el-form-item class="optionItem" label="选择角色:" prop="role"> |
| | | <!-- <el-form-item class="optionItem" label="选择角色:" prop="role"> |
| | | <el-select v-model="user.role" placeholder="请选择所属角色"> |
| | | <el-option v-for="item in roleList" :key="item.name" :label="item.name" :value="item.value" |
| | | :disabled="item.disabled"> |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | </el-form-item> --> |
| | | <!-- 用户类型 --> |
| | | <el-form-item class="optionItem" label="用户类型:" prop="type"> |
| | | <el-select v-model="user.type" placeholder="请选择用户类型"> |
| | | <el-form-item class="optionItem" label="用户类型:" prop="userType"> |
| | | <el-select v-model="user.userType" placeholder="请选择用户类型"> |
| | | <el-option v-for="item in typeList" :key="item.name" :label="item.name" :value="item.value" |
| | | :disabled="item.disabled"> |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <!-- 座机/分机 --> |
| | | <el-form-item class="optionItem" label="座机/分机:" prop="telPhone"> |
| | | <el-form-item class="optionItem" label="座机/分机:" prop="zj"> |
| | | <div class="optionHandleSp"> |
| | | <el-input class="areaNumber" v-model="user.telPhone.areaNumber" placeholder="电话区号"> |
| | | <el-input class="areaNumber" v-model="user.zj.areaNumber" placeholder="电话区号"> |
| | | </el-input> |
| | | <el-input class="telNumber" v-model="user.telPhone.phoneNumber" placeholder="电话号码"> |
| | | <el-input class="telNumber" v-model="user.zj.phoneNumber" placeholder="电话号码"> |
| | | </el-input> |
| | | <el-input class="moreNumber" v-model="user.telPhone.moreNumber" placeholder="分机号码"> |
| | | <el-input class="moreNumber" v-model="user.zj.moreNumber" placeholder="分机号码"> |
| | | </el-input> |
| | | </div> |
| | | </el-form-item> |
| | | <!-- 所属部门 --> |
| | | <el-form-item class="optionItem" label="所属部门:" prop="department"> |
| | | <el-select v-model="user.department" placeholder="请选择所属部门"> |
| | | <el-option v-for="item in typeList" :key="item.name" :label="item.name" :value="item.value" |
| | | :disabled="item.disabled"> |
| | | <el-form-item class="optionItem" label="所属部门:" prop="departmentId"> |
| | | <el-select v-model="user.departmentId" placeholder="请选择所属部门"> |
| | | <el-option v-for="item in typeList" :key="item.name" :label="item.departName" |
| | | :value="item.id"> |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <!-- 当前职务 --> |
| | | <el-form-item class="optionItem" label="当前职务:" prop="work"> |
| | | <el-form-item class="optionItem" label="当前职务:" prop="jobTitle"> |
| | | <el-select v-model="user.work" placeholder="请选择当前职务"> |
| | | <el-option v-for="item in typeList" :key="item.name" :label="item.name" :value="item.value" |
| | | :disabled="item.disabled"> |
| | |
| | | </el-select> |
| | | </el-form-item> |
| | | <!-- 填写所属mac地址 --> |
| | | <el-form-item class="optionItem" label="填写所属mac地址:" prop="mac"> |
| | | <!-- <el-form-item class="optionItem" label="填写所属mac地址:" prop="mac"> |
| | | <el-input v-model="user.mac" placeholder="请填写所属mac地址"></el-input> |
| | | </el-form-item> |
| | | </el-form-item> --> |
| | | <!-- 填写所属ip地址 --> |
| | | <el-form-item class="optionItem" label="填写所属ip地址:" prop="ip"> |
| | | <!-- <el-form-item class="optionItem" label="填写所属ip地址:" prop="ip"> |
| | | <el-input v-model="user.ip" placeholder="请填写所属ip地址"></el-input> |
| | | </el-form-item> |
| | | <el-form-item class="optionBtn"> |
| | | <el-button type="primary" class="btn submit" @click="handleUser">提交</el-button> |
| | | </el-form-item> --> |
| | | <el-form-item> |
| | | <div class="optionBtn"> |
| | | <el-button type="primary" class="btn submit" @click.native.prevent="handleUser">提交</el-button> |
| | | <el-button class="btn reset">重置</el-button> |
| | | </div> |
| | | </el-form-item> |
| | | </el-form> |
| | | |
| | |
| | | callback(new Error("请填写登录密码")); |
| | | } else { |
| | | const rep = /^\w+$/; |
| | | if(!rep.test(value)){ |
| | | if (!rep.test(value)) { |
| | | callback(new Error("密码只能是以数字、26个英文字母或者下划线组成的字符串")); |
| | | } |
| | | } |
| | |
| | | callback(new Error("请填写用户姓名")); |
| | | } else { |
| | | const rep = /^[\u4E00-\u9FA5]{2,4}$/; |
| | | if(!rep.test(value)){ |
| | | if (!rep.test(value)) { |
| | | callback("请输入正确的用户姓名"); |
| | | } |
| | | } |
| | |
| | | callback(new Error("请填写手机号码")); |
| | | } else { |
| | | const rep = /(^1[3|4|5|7|8|9]\d{9}$)|(^09\d{8}$)/ |
| | | if(!rep.test(value)){ |
| | | if (!rep.test(value)) { |
| | | 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)){ |
| | | if (!rep.test(value)) { |
| | | callback(new Error("请输入正确的邮箱")) |
| | | } |
| | | } |
| | |
| | | }; |
| | | return { |
| | | user: { |
| | | nick_name: '', |
| | | nickName: '', |
| | | password: '', |
| | | true_name: '', |
| | | gender: 1, |
| | | member: 1, |
| | | phone: '', |
| | | mail: '', |
| | | role: null, |
| | | type: null, |
| | | telPhone: { |
| | | username: '', |
| | | // gender: 1, |
| | | isDy: 0, |
| | | mobile: '', |
| | | email: '', |
| | | // role: null, |
| | | userType: null, |
| | | zj: { |
| | | areaNumber: '', |
| | | phoneNumber: "", |
| | | moreNumber: "", |
| | | }, |
| | | department: null, |
| | | work: null, |
| | | mac: '', |
| | | ip: '', |
| | | departmentId: null, |
| | | jobTitle: null, |
| | | // mac: '', |
| | | // ip: '', |
| | | }, |
| | | createUserRules: { |
| | | nick_name: [ |
| | | nickName: [ |
| | | { required: true, trigger: "blur", validator: validateNickname }, |
| | | ], |
| | | password: [ |
| | | { required: true, trigger: "blur", validator: validatePass }, |
| | | ], |
| | | true_name: [ |
| | | username: [ |
| | | { required: true, trigger: "blur", validator: validateTruename }, |
| | | ], |
| | | gender: [ |
| | | // gender: [ |
| | | // { required: true, trigger: "blur" }, |
| | | // ], |
| | | isDy: [ |
| | | { required: true, trigger: "blur" }, |
| | | ], |
| | | member: [ |
| | | { required: true, trigger: "blur" }, |
| | | ], |
| | | phone: [ |
| | | mobile: [ |
| | | { required: true, trigger: "blur", validator: validatePhone }, |
| | | ], |
| | | mail: [ |
| | | email: [ |
| | | { required: false, trigger: "blur", validator: validateMail }, |
| | | ], |
| | | role: [ |
| | | { required: true, trigger: "blur", validator: validateRole }, |
| | | ], |
| | | type: [ |
| | | // role: [ |
| | | // { required: true, trigger: "blur", validator: validateRole }, |
| | | // ], |
| | | userType: [ |
| | | { required: true, trigger: "blur", validator: validateType }, |
| | | ], |
| | | telPhone: [ |
| | | zj: [ |
| | | { required: false, trigger: "blur" }, |
| | | ], |
| | | department: [ |
| | | departmentId: [ |
| | | { required: true, trigger: "blur", validator: validateDepartment }, |
| | | ], |
| | | work: [ |
| | | 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', value: 1 }, { name: '角色2', value: 2 } |
| | | ], |
| | | typeList: [ |
| | | { name: '类型1', value: 1 }, { name: '类型2', value: 2 } |
| | | ] |
| | | typeList: [] |
| | | } |
| | | }, |
| | | created() { |
| | | this.$axios.get("http://42.193.1.25:8082/sccg/role/listAll").then(res=>{ |
| | | console.log(res); |
| | | }); |
| | | created() { |
| | | const that = this; |
| | | // 获取角色列表 |
| | | // this.$axios.get('') |
| | | // 获取用户类型列表 |
| | | // this.$axios.get('sccg/admin/list',{userType:0}).then(res=>{ |
| | | // console.log(res); |
| | | // }) |
| | | // 获取全部部门列表 |
| | | this.$axios.get('sccg/depart/page').then(res => { |
| | | that.typeList = res.data.records; |
| | | }) |
| | | }, |
| | | methods: { |
| | | handleUser() { |
| | | console.log(this.user); |
| | | const { user } = this; |
| | | console.log(user); |
| | | this.$axios.post('sccg/admin/register', { |
| | | departmentId: user.departmentId, |
| | | email: user.email, |
| | | jsDy: user.isDy, |
| | | jobTitle: user.jobTitle, |
| | | mobile: user.mobile, |
| | | nickName: user.nickName, |
| | | password: user.password, |
| | | userType: user.userType, |
| | | username: user.username, |
| | | }).then(res => { |
| | | if (res.code === 200) { |
| | | this.refresh(); |
| | | } |
| | | }) |
| | | } |
| | | }, |
| | | props: ['refresh'] |
| | | } |
| | | </script> |
| | | <style lang="scss" scpoed> |
| | | <style lang="scss" scoped> |
| | | .createUser { |
| | | border-radius: 1px; |
| | | // min-width: 1024px; |
| | | // min-height: 1450px; |
| | | background-color: #fff; |
| | | background-color: #09152f; |
| | | |
| | | header { |
| | | display: flex; |
| | |
| | | height: 60px; |
| | | line-height: 60px; |
| | | padding: 0 20px; |
| | | border: 1px solid #fff; |
| | | |
| | | .headerTitle { |
| | | color: #4b9bb7; |
| | | font-weight: 600; |
| | | color: #666; |
| | | } |
| | | |
| | | .headerTip span { |
| | |
| | | } |
| | | |
| | | .headerTip label { |
| | | color: #999999; |
| | | color: #4b9bb7; |
| | | } |
| | | } |
| | | |
| | | main { |
| | | border-top: 1px solid #f0f2f5; |
| | | border: 1px solid #fff; |
| | | text-align: left; |
| | | padding: 0 55px; |
| | | background-color: #09152f; |
| | | padding-bottom: 50px; |
| | | .mainTitle { |
| | | // margin-left: 60px; |
| | | color: #666; |
| | | color: #4b9bb7; |
| | | font-weight: 600; |
| | | line-height: 100px; |
| | | font-size: 14px; |
| | |
| | | .mainContent { |
| | | display: flex; |
| | | justify-content: center; |
| | | |
| | | &::v-deep .el-form-item__label { |
| | | color: #4b9bb7; |
| | | } |
| | | |
| | | &::v-deep .el-input__inner { |
| | | background-color: #09152f; |
| | | border: 1px solid #17324c; |
| | | } |
| | | |
| | | .el-form-item__content { |
| | | width: 400px; |
| | | |
| | |
| | | width: 100%; |
| | | } |
| | | } |
| | | .optionHandleSp{ |
| | | |
| | | .optionHandleSp { |
| | | display: flex; |
| | | .areaNumber,.moreNumber{ |
| | | |
| | | .areaNumber, |
| | | .moreNumber { |
| | | flex: 1; |
| | | } |
| | | .telNumber{ |
| | | |
| | | .telNumber { |
| | | flex: 2; |
| | | } |
| | | } |
| | | .optionBtn{ |
| | | |
| | | .optionBtn { |
| | | display: flex; |
| | | justify-content: center; |
| | | margin-top: 80px; |
| | | .btn{ |
| | | margin-top: 20px; |
| | | |
| | | .btn { |
| | | padding: 12px 50px; |
| | | } |
| | | } |