From 7b99e3e74e2652e5a0ce75a8afefe3a969b939f7 Mon Sep 17 00:00:00 2001 From: zhanghua <314079846@qq.com> Date: 星期一, 20 三月 2023 11:07:38 +0800 Subject: [PATCH] 视频code修改 --- src/views/systemSetting/baseSetting/user/components/updateUser/index.vue | 626 ++++++++++++++++++++++++-------------------------------- 1 files changed, 271 insertions(+), 355 deletions(-) diff --git a/src/views/systemSetting/baseSetting/user/components/updateUser/index.vue b/src/views/systemSetting/baseSetting/user/components/updateUser/index.vue index eabcd01..601d067 100644 --- a/src/views/systemSetting/baseSetting/user/components/updateUser/index.vue +++ b/src/views/systemSetting/baseSetting/user/components/updateUser/index.vue @@ -1,379 +1,295 @@ <template> - <div class="updateUser"> - <!-- <header> - <div class="headerTitle">{{updateFlag ? '淇敼鐢ㄦ埛閮ㄩ棬淇℃伅' :'鏌ョ湅鐢ㄦ埛淇℃伅'}}</div> - </header> --> - <main> - <!-- <div class="mainTitle">鍩虹淇℃伅</div> --> - <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="username"> - <el-input v-model="user.username" placeholder="濉啓鐢ㄦ埛鍚嶇О" :disabled="true"></el-input> - </el-form-item> - <!-- 鐢ㄦ埛瀵嗙爜 --> - <el-form-item class="optionItems" label="鐢ㄦ埛瀵嗙爜:" prop="password"> - <el-input v-model="user.password" type="password" placeholder="璇疯緭鍏ョ敤鎴峰瘑鐮�" :disabled="true"> - </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> --> - <!-- 鎬у埆 --> - <!-- <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" disabled> - <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="璇峰~鍐欐墜鏈哄彿鐮�" :disabled="true"></el-input> - </el-form-item> - <!-- 閭鍦板潃 --> - <el-form-item class="optionItem" label="閭鍦板潃:" prop="email"> - <el-input v-model="user.email" placeholder="璇峰~鍐欓偖绠卞湴鍧�" :disabled="true"></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="璇烽�夋嫨鐢ㄦ埛绫诲瀷" disabled> - <el-option v-for="item in typeList" :key="item.name" :label="item.name" :value="item.value"> - </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> --> - <!-- 鎵�灞為儴闂� --> - <el-form-item class="optionItem" label="鎵�灞為儴闂�:" prop="departmentId"> - <el-select v-model="user.department" placeholder="璇烽�夋嫨鎵�灞為儴闂�" :disabled="!updateFlag"> - <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="璇烽�夋嫨褰撳墠鑱屽姟" disabled> - <el-option v-for="item in typeList" :key="item.name" :label="item.name" :value="item.value"> - </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 v-if="updateFlag"> - <div class="optionBtn"> - <el-button type="primary" class="btn submit" @click.native.prevent="handleUser">鎻愪氦 - </el-button> - </div> - </el-form-item> - </el-form> - + <div class="updateUser"> + <main> + <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="role" + v-if="flag.role" + > + <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-form-item> + <!-- 鎵�灞為儴闂� --> + <el-form-item + class="optionItem" + label="鎵�灞為儴闂�:" + prop="departmentId" + v-else + > + <departTree + :depart="userDepart" + @selectDepart="selectDepart" + ></departTree> + </el-form-item> + <el-form-item> + <div class="optionBtn"> + <el-button + type="primary" + class="btn submit" + @click.native.prevent="handleUser" + >鎻愪氦 + </el-button> </div> - </main> - </div> + </el-form-item> + </el-form> + </div> + </main> + </div> </template> <script> +import departTree from "@/components/departTree/index.vue"; export default { - data() { - const validateNickname = (rule, value, callback) => { - if (!value) { - callback(new Error("璇峰~鍐欑敤鎴峰悕绉�")); - } - }; - const validatePass = (rule, value, callback) => { - if (!value) { - callback(new Error("璇峰~鍐欑櫥褰曞瘑鐮�")); - } else { - const rep = /^\w+$/; - if (!rep.test(value)) { - callback(new Error("瀵嗙爜鍙兘鏄互鏁板瓧銆�26涓嫳鏂囧瓧姣嶆垨鑰呬笅鍒掔嚎缁勬垚鐨勫瓧绗︿覆")); - } - } - }; - const validateTruename = (rule, value, callback) => { - if (!value) { - callback(new Error("璇峰~鍐欑敤鎴峰鍚�")); - } else { - const rep = /^[\u4E00-\u9FA5]{2,4}$/; - if (!rep.test(value)) { - callback("璇疯緭鍏ユ纭殑鐢ㄦ埛濮撳悕"); - } - } - }; - 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: 1, - mobile: '', - email: '', - // role: null, - userType: null, - zj: { - areaNumber: '', - phoneNumber: "", - moreNumber: "", - }, - departmentId: null, - jobTitle: null, - // mac: '', - // ip: '', - }, - createUserRules: { - nickName: [ - { required: true, trigger: "blur", validator: validateNickname }, - ], - password: [ - { required: true, trigger: "blur", validator: validatePass }, - ], - username: [ - { required: true, 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 } - ], - typeList: [] + components: { + departTree, + }, + data() { + return { + user: {}, + userDepart: {}, + createUserRules: {}, + roleList: [], + departList: [], + mylabel: "", + defaultProps: { + children: "children", + label: "departName", + }, + tempName: "", + tempRole: [], + }; + }, + created() { + this.user = JSON.parse(JSON.stringify(this.userInfo)); + this.tempName = this.user.depart[0].departName; + + this.userDepart = { + departId: this.user.depart[0].departId, + departName: this.user.depart[0].departName, + }; + // 鑾峰彇鎵�鏈夎鑹插垪琛� + this.getRoleList(); + // 鑾峰彇褰撳墠鐢ㄦ埛瑙掕壊鍒楄〃 + this.getUserRole(this.user.id); + }, + methods: { + // 淇敼閮ㄩ棬 + changeDepart(data) { + this.departList.forEach((item) => { + if (item.id === data) { + this.user.departName = item.departName; } + }); }, - created() { - const that = this; - this.user = JSON.parse(JSON.stringify(that.userInfo)); - // 鑾峰彇瑙掕壊鍒楄〃 - // 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() { - const { user } = this; - this.$axios.post('sccg/depart/status', { - id: user.departmentId, - status: user.status ? 1 : 0, - }).then(res => { - console.log(res); - }) + // 淇敼鐢ㄦ埛淇℃伅 + handleUser() { + const { flag, user, tempName, tempRole, isArraySame } = this; + let umsDepartManage = { userId: user.id, departId: user.departId }; + this.$refs.user.validate((valid) => { + if (valid) { + user.isDy = `${user.isDy}`; + if (flag.depart) { + if (tempName === user.departName) { + this.$message({ + type: "warning", + message: "鎮ㄧ殑閮ㄩ棬杩樻湭鏇存敼", + }); + } else { + if (user.departName) { + this.$axios({ + method: "put", + url: + `/sccg/depart/user_update_depart?userId=` + + user.id + + "&departId=" + + user.departId, + }).then((res) => { + this.$message({ + type: res.code === 200 ? "success" : "warning", + message: res.message, + }); + this.getUserList(); + this.$emit("closeDialog", { flag: false }); + }); + } else { + this.$message({ + type: "warning", + message: "鐢ㄦ埛閮ㄩ棬涓嶈兘涓虹┖", + }); + } + } + } else { + if (user.role.length === 0) { + this.$message({ + type: "warning", + message: "鐢ㄦ埛瑙掕壊涓嶈兘涓虹┖", + }); + } else if ( + isArraySame(tempRole, user.role) && + tempRole.length === user.role.length + ) { + this.$message({ + type: "warning", + message: "鎮ㄨ繕鏈洿鏀硅鑹�", + }); + } else { + this.$axios({ + method: "put", + url: + "sccg/depart/user_update_Role?id=" + + user.id + + "&roles=" + + user.role, + }).then((res) => { + this.$message({ + type: res.code === 200 ? "success" : "warning", + message: res.message, + }); + this.getUserList(); + this.$emit("closeDialog", { flag: false }); + }); + } + } + } else { + return false; } + }); }, - props: ['userInfo', 'updateFlag'] -} + // 鑾峰彇瑙掕壊鍒楄〃 + getRoleList() { + this.$axios({ + method: "get", + url: "sccg/role/listAll", + }).then((res) => { + this.roleList = res.data; + }); + }, + // 鑾峰彇鐢ㄦ埛鐨勮鑹插垪琛� + getUserRole(id) { + this.$axios({ + method: "get", + url: `sccg/admin/role/${id}`, + }).then((res) => { + const arr = []; + res.data.forEach((item) => { + arr.push(item.id); + }); + this.user.role = arr; + this.tempRole = arr; + }); + }, + + selectDepart(depart) { + if (depart) { + this.user.departId = depart.departId; + this.user.departName = depart.departName; + } + }, + + // 鍒ゆ柇鏁扮粍鏄惁鐩哥瓑 + isArraySame(arr1, arr2) { + let flag = true; + arr1.sort((a, b) => a - b); + arr2.sort((a, b) => a - b); + arr1.forEach((item) => { + arr2.forEach((child) => { + if (item !== child) { + flag = false; + } + }); + }); + return flag; + }, + }, + props: ["userInfo", "flag", "closeDialog", "getUserList"], +}; </script> <style lang="scss" scoped> .updateUser { - border-radius: 1px; - background-color: #09152f; + border-radius: 1px; + // background-color: #09152f; - // header { - // display: flex; - // justify-content: center; - // height: 60px; - // line-height: 60px; - // padding: 0 20px; - // border: 1px solid #fff; - // .headerTitle { - // color: #4b9bb7; - // font-weight: 600; - // } + // :deep(.el-tag) { + // background-color: #09152f; + // } - // .headerTip span { - // color: #ff3b6c; - // } + // .el-select-dropdown.is-multiple .el-select-dropdown__item.selected { + // background-color: #09152f; + // color: #4b9bb7; + // } - // .headerTip label { - // color: #4b9bb7; - // } - // } + main { + text-align: left; + padding: 0 55px; + // background-color: #09152f; + padding-bottom: 50px; - main { - // border: 1px solid #fff; - text-align: left; - 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; + padding-top: 50px; - .mainContent { - display: flex; - justify-content: center; - padding-top: 50px; - .el-form-item__content { - width: 400px; + .el-form-item__content { + width: 400px; - .el-select { - width: 100%; - } - } - - .optionHandleSp { - display: flex; - - .areaNumber, - .moreNumber { - flex: 1; - } - - .telNumber { - flex: 2; - } - } - - .optionBtn { - display: flex; - margin-top: 20px; - - .btn { - padding: 12px 50px; - } - } - + .el-select { + width: 100%; } + } + + .optionHandleSp { + display: flex; + + .areaNumber, + .moreNumber { + flex: 1; + } + + .telNumber { + flex: 2; + } + } + + .optionBtn { + display: flex; + margin-top: 20px; + + .btn { + padding: 12px 50px; + } + } } + } } -.updateUser::v-deep .el-form-item__label { - color: #4b9bb7; -} +// .updateUser::v-deep .el-form-item__label { +// color: #4b9bb7; +// } -.updateUser::v-deep .el-input__inner { - background-color: #09152f; - border: 1px solid #17324c; -} +// .updateUser::v-deep .el-input__inner { +// background-color: #09152f; +// border: 1px solid #17324c; +// } </style> \ No newline at end of file -- Gitblit v1.8.0