From 7705cdd240ea1a07a5772ffb6ba0e1e4995bcc74 Mon Sep 17 00:00:00 2001 From: zhanghua <314079846@qq.com> Date: 星期四, 09 二月 2023 16:36:19 +0800 Subject: [PATCH] 部门组件,bug修改 --- src/views/systemSetting/baseSetting/user/components/updateUser/index.vue | 521 +++++++++++++++++++++++++++++---------------------------- 1 files changed, 263 insertions(+), 258 deletions(-) diff --git a/src/views/systemSetting/baseSetting/user/components/updateUser/index.vue b/src/views/systemSetting/baseSetting/user/components/updateUser/index.vue index 68dbf83..601d067 100644 --- a/src/views/systemSetting/baseSetting/user/components/updateUser/index.vue +++ b/src/views/systemSetting/baseSetting/user/components/updateUser/index.vue @@ -1,282 +1,287 @@ <template> - <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> - <el-select v-model="user.departName" placeholder="璇烽�夋嫨鎵�灞為儴闂�" :disabled="!flag.depart"> - <el-option :value="mylabel"> - <el-tree ref="tree" :check-strictly="true" :data="departList" :props="defaultProps" - show-checkbox @check-change="handleCheck" - :default-checked-keys="[selectOrg.orgsid[0],]" default-expand-all node-key="id"> - </el-tree> - </el-option> - </el-select> - </el-form-item> - <el-form-item> - <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() { - return { - user: { - }, - createUserRules: { - }, - roleList: [ + 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; - ], - departList: [], - mylabel: "", - defaultProps: { - children: "children", - label: "departName", - }, - selectOrg: { - orgsid: [], - }, - tempName: '', - tempRole: [] + 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() { - this.user = JSON.parse(JSON.stringify(this.userInfo)); - this.tempName = this.user.depart[0].departName; - this.selectOrg.orgsid.push(this.user.depart[0].id); - // 鑾峰彇鎵�鏈夎鑹插垪琛� - this.getRoleList(); - // 鑾峰彇褰撳墠鐢ㄦ埛瑙掕壊鍒楄〃 - this.getUserRole(this.user.id) - // 鑾峰彇鍏ㄩ儴閮ㄩ棬鍒楄〃 - this.$axios.get('/sccg/depart/tree').then(res => { - this.departList = res.data; - }) - }, - methods: { - // 淇敼閮ㄩ棬 - changeDepart(data) { - this.departList.forEach(item => { - if (item.id === data) { - this.user.departName = item.departName; - } - }) - }, - // 淇敼鐢ㄦ埛淇℃伅 - handleUser() { - const { flag, user, tempName, selectOrg, tempRole, isArraySame } = this; - let umsDepartManage = { userId: user.id, departId: selectOrg.orgsid[0] } - 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=' + selectOrg.orgsid[0] - }) - .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; - } - }) - }, - // 鑾峰彇瑙掕壊鍒楄〃 - 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; - }) - }, - // 閮ㄩ棬淇敼 - handleCheck(data, checked) { - this.user.departName = data.departName; - // 鑾峰彇褰撳墠閫夋嫨鐨刬d鍦ㄦ暟缁勪腑鐨勭储寮� - const indexs = this.selectOrg.orgsid.indexOf(data.id); - // 濡傛灉涓嶅瓨鍦ㄦ暟缁勪腑锛屽苟涓旀暟缁勪腑宸茬粡鏈変竴涓猧d骞朵笖checked涓簍rue鐨勬椂鍊欙紝浠h〃涓嶈兘鍐嶆閫夋嫨銆� - if (indexs < 0 && this.selectOrg.orgsid.length === 1 && checked) { - this.$message({ - message: "鍙兘閫夋嫨涓�涓儴闂紒", - type: "warning", - showClose: true, + // 淇敼鐢ㄦ埛淇℃伅 + 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 }); }); - // 璁剧疆宸查�夋嫨鐨勮妭鐐逛负false 寰堥噸瑕� - this.$refs.tree.setChecked(data, false); - } else if (this.selectOrg.orgsid.length === 0 && checked) { - // 鍙戠幇鏁扮粍涓虹┖ 骞朵笖鏄凡閫夋嫨 - // 闃叉鏁扮粍鏈夊�硷紝棣栧厛娓呯┖锛屽啀push - this.selectOrg.orgsid = []; - this.selectOrg.orgsid.push(data.id); - } else if ( - indexs >= 0 && - this.selectOrg.orgsid.length === 1 && - !checked - ) { - // 鍐嶆鐩存帴杩涜璧嬪�间负绌烘搷浣� - this.selectOrg.orgsid = []; - this.user.departName = '' + } else { + this.$message({ + type: "warning", + message: "鐢ㄦ埛閮ㄩ棬涓嶈兘涓虹┖", + }); + } } - }, - // 鍒ゆ柇鏁扮粍鏄惁鐩哥瓑 - 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 + } 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', 'flag', 'closeDialog', 'getUserList'] -} + // 鑾峰彇瑙掕壊鍒楄〃 + 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; + border-radius: 1px; + // background-color: #09152f; + + // :deep(.el-tag) { + // background-color: #09152f; + // } + + // .el-select-dropdown.is-multiple .el-select-dropdown__item.selected { + // background-color: #09152f; + // color: #4b9bb7; + // } + + main { + text-align: left; + padding: 0 55px; // background-color: #09152f; + padding-bottom: 50px; - // :deep(.el-tag) { - // background-color: #09152f; - // } + .mainContent { + display: flex; + justify-content: center; + padding-top: 50px; - // .el-select-dropdown.is-multiple .el-select-dropdown__item.selected { - // background-color: #09152f; - // color: #4b9bb7; - // } + .el-form-item__content { + width: 400px; - main { - text-align: left; - padding: 0 55px; - // background-color: #09152f; - padding-bottom: 50px; - - .mainContent { - display: flex; - justify-content: center; - padding-top: 50px; - - .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 { -- Gitblit v1.8.0