From 89b5e3921f298c3c1b687405472f0da7fe25d20a Mon Sep 17 00:00:00 2001 From: “dzb” <2632970487@qq.com> Date: 星期二, 20 九月 2022 14:45:19 +0800 Subject: [PATCH] 新增新建角色 --- src/views/systemSetting/baseSetting/role/createUser/index.vue | 233 ++++++---------------------------------------------------- 1 files changed, 24 insertions(+), 209 deletions(-) diff --git a/src/views/systemSetting/baseSetting/role/createUser/index.vue b/src/views/systemSetting/baseSetting/role/createUser/index.vue index 99aa8a6..668e4b9 100644 --- a/src/views/systemSetting/baseSetting/role/createUser/index.vue +++ b/src/views/systemSetting/baseSetting/role/createUser/index.vue @@ -3,104 +3,33 @@ <header> <div class="headerTitle">鏂板璐︽埛</div> <div class="headerTip"> - <span>*</span> - <label>涓哄繀濉」</label> + <label>x</label> </div> </header> <main> - <div class="mainTitle">鍩虹淇℃伅</div> <div class="mainContent"> - <el-form ref="user" label-width="140px" autoComplete="on" :model="user" :rules="createUserRules" + <el-form ref="user" label-width="140px" autoComplete="on" :model="role" :rules="createRoleRules" label-position="right"> - <!-- 鐢ㄦ埛鍚嶇О --> - <el-form-item class="optionItem" label="鐢ㄦ埛鍚嶇О:" prop="nickName"> - <el-input v-model="user.nickName" placeholder="濉啓鐢ㄦ埛鍚嶇О"></el-input> + <!-- 瑙掕壊鍚嶇О --> + <el-form-item class="optionItem" label="鐢ㄦ埛鍚嶇О:" prop="name"> + <el-input v-model="role.name" 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> - <!-- 鎬у埆 --> - <!-- <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 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="mobile"> - <el-input v-model="user.mobile" placeholder="璇峰~鍐欐墜鏈哄彿鐮�"></el-input> - </el-form-item> - <!-- 閭鍦板潃 --> - <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-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 class="optionItem" label="鐢ㄦ埛绫诲瀷:" prop="userType"> - <el-select v-model="user.userType" placeholder="璇烽�夋嫨鐢ㄦ埛绫诲瀷"> + <!-- 瑙掕壊绫诲瀷 --> + <el-form-item class="optionItems" label="瑙掕壊绫诲瀷:" prop="status"> + <el-select v-model="role.status" 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="zj"> - <div class="optionHandleSp"> - <el-input class="areaNumber" v-model="user.zj.areaNumber" placeholder="鐢佃瘽鍖哄彿"> - </el-input> - <el-input class="telNumber" v-model="user.zj.phoneNumber" placeholder="鐢佃瘽鍙风爜"> - </el-input> - <el-input class="moreNumber" v-model="user.zj.moreNumber" placeholder="鍒嗘満鍙风爜"> - </el-input> - </div> + <!-- 瑙掕壊鎻忚堪 --> + <el-form-item class="optionItem" label="瑙掕壊鎻忚堪:" prop="description"> + <el-input v-model="role.description" placeholder="璇疯緭鍏ユ弿杩板唴瀹�200瀛椾互鍐�"></el-input> </el-form-item> - <!-- 鎵�灞為儴闂� --> - <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="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-option> - </el-select> - </el-form-item> - <!-- 濉啓鎵�灞瀖ac鍦板潃 --> - <!-- <el-form-item class="optionItem" label="濉啓鎵�灞瀖ac鍦板潃:" prop="mac"> - <el-input v-model="user.mac" placeholder="璇峰~鍐欐墍灞瀖ac鍦板潃"></el-input> - </el-form-item> --> - <!-- 濉啓鎵�灞瀒p鍦板潃 --> - <!-- <el-form-item class="optionItem" label="濉啓鎵�灞瀒p鍦板潃:" prop="ip"> - <el-input v-model="user.ip" placeholder="璇峰~鍐欐墍灞瀒p鍦板潃"></el-input> - </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> + <el-button class="btn cancel" >鍙栨秷</el-button> + <el-button type="primary" class="btn submit" @click.native.prevent="handleUser">鎻愪氦</el-button> </div> </el-form-item> </el-form> @@ -137,130 +66,22 @@ } } }; - const validatePhone = (rule, value, callback) => { - if (!value) { - callback(new Error("璇峰~鍐欐墜鏈哄彿鐮�")); - } else { - const rep = /(^1[3|4|5|7|8|9]\d{9}$)|(^09\d{8}$)/ - 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)) { - callback(new Error("璇疯緭鍏ユ纭殑閭")) - } - } - }; - const validateRole = (rule, value, callback) => { - if (!value) { - callback(new Error("璇峰~鍐欑櫥褰曞瘑鐮�")); - } else { - callback(); - } - }; - const validateType = (rule, value, callback) => { - if (!value) { - callback(new Error("璇峰~鍐欑櫥褰曞瘑鐮�")); - } else { - callback(); - } - }; - const validateDepartment = (rule, value, callback) => { - if (!value) { - callback(new Error("璇峰~鍐欑櫥褰曞瘑鐮�")); - } else { - callback(); - } - }; - const validateWork = (rule, value, callback) => { - if (!value) { - callback(new Error("璇峰~鍐欑櫥褰曞瘑鐮�")); - } else { - callback(); - } - }; - const validateMac = (rule, value, callback) => { - if (!value) { - callback(new Error("璇峰~鍐欑櫥褰曞瘑鐮�")); - } else { - callback(); - } - }; - const validateIp = (rule, value, callback) => { - if (!value) { - callback(new Error("璇峰~鍐欑櫥褰曞瘑鐮�")); - } else { - callback(); - } - }; return { - user: { - nickName: '', - password: '', - username: '', - // gender: 1, - isDy: 0, - mobile: '', - email: '', - // role: null, - userType: null, - zj: { - areaNumber: '', - phoneNumber: "", - moreNumber: "", - }, - departmentId: null, - jobTitle: null, - // mac: '', - // ip: '', + role: { + name: '', + status: '', + description: '', }, - createUserRules: { - nickName: [ + createRoleRules: { + name: [ { required: true, trigger: "blur", validator: validateNickname }, ], - password: [ - { required: true, trigger: "blur", validator: validatePass }, + status: [ + { required: false, trigger: "blur", validator: validatePass }, ], - username: [ - { required: true, trigger: "blur", validator: validateTruename }, + description: [ + { required: false, trigger: "blur", validator: validateTruename }, ], - // gender: [ - // { required: true, trigger: "blur" }, - // ], - isDy: [ - { required: true, trigger: "blur" }, - ], - mobile: [ - { required: true, trigger: "blur", validator: validatePhone }, - ], - email: [ - { required: false, trigger: "blur", validator: validateMail }, - ], - // role: [ - // { required: true, trigger: "blur", validator: validateRole }, - // ], - userType: [ - { required: true, trigger: "blur", validator: validateType }, - ], - zj: [ - { required: false, trigger: "blur" }, - ], - departmentId: [ - { required: true, trigger: "blur", validator: validateDepartment }, - ], - jobTitle: [ - { required: true, trigger: "blur", validator: validateWork }, - ], - // mac: [ - // { required: false, trigger: "blur", validator: validateMac }, - // ], - // ip: [ - // { required: false, trigger: "blur", validator: validateIp }, - // ], }, roleList: [ { name: '瑙掕壊1', value: 1 }, { name: '瑙掕壊2', value: 2 } @@ -338,17 +159,11 @@ padding: 0 55px; background-color: #09152f; padding-bottom: 50px; - .mainTitle { - color: #4b9bb7; - font-weight: 600; - line-height: 100px; - font-size: 14px; - } .mainContent { display: flex; justify-content: center; - + margin-top: 50px; &::v-deep .el-form-item__label { color: #4b9bb7; } -- Gitblit v1.8.0