账号编辑修改

src/views/accountManagement/components/accountEdit.vue

@@ -1,8 +1,8 @@
 <!--
  * @Author: Badguy
  * @Date: 2022-02-15 11:37:42
- * @LastEditTime: 2022-02-28 16:52:09
- * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2022-03-02 09:40:14
+ * @LastEditors: your name
  * @Description: 编辑账号
  * have a nice day!
 -->
@@ -27,28 +27,68 @@
         </div> -->
         <div v-is="['userupdate_btn_save']">
           <!-- <button type="submmit" class="btn-delete" @click="delate">删除</button> -->
-          <button type="submmit" class="btn-save" @click="handleClickSave('accountForm')">保存</button>
+          <button
+            type="submmit"
+            class="btn-save"
+            @click="handleClickSave('accountForm')"
+          >保存</button>
         </div>
       </div>
       <div class="title-content">
-        <el-form ref="accountForm" label-width="80px" :inline="true" :model="accountForm" :rules="formRules">
+        <el-form
+          ref="accountForm"
+          label-width="80px"
+          :inline="true"
+          :model="accountForm"
+          :rules="formRules"
+        >
           <el-row :gutter="40">
             <el-col :span="5">
-              <el-form-item label="账号名称" prop="name">
-                <el-input v-model="accountForm.name" maxlength="32" placeholder="请输入名称" size="small" />
+              <el-form-item
+                label="账号名称"
+                prop="name"
+              >
+                <el-input
+                  v-model="accountForm.name"
+                  maxlength="32"
+                  placeholder="请输入名称"
+                  size="small"
+                />
               </el-form-item>
             </el-col>
             <el-col :span="5">
-              <el-form-item label="登录密码" prop="pwd">
-                <el-input v-model="accountForm.pwd" placeholder="*******" size="small" disabled />
+              <el-form-item
+                label="登录密码"
+                prop="pwd"
+              >
+                <el-input
+                  v-model="accountForm.pwd"
+                  placeholder="*******"
+                  size="small"
+                  disabled
+                />
               </el-form-item>
             </el-col>
-            <el-col v-is="['userupdate_btn_re_pwd']" :span="2">
-              <button class="btn-reset-pwd" @click="resetPwd">重置密码</button>
+            <el-col
+              v-is="['userupdate_btn_re_pwd']"
+              :span="2"
+            >
+              <button
+                class="btn-reset-pwd"
+                @click="resetPwd"
+              >重置密码</button>
             </el-col>
             <el-col :span="8">
-              <el-form-item label="描述" prop="desc">
-                <el-input v-model="accountForm.desc" maxlength="128" placeholder="描述内容···" size="small" />
+              <el-form-item
+                label="描述"
+                prop="desc"
+              >
+                <el-input
+                  v-model="accountForm.desc"
+                  maxlength="128"
+                  placeholder="描述内容···"
+                  size="small"
+                />
               </el-form-item>
             </el-col>
           </el-row>
@@ -58,80 +98,189 @@
 
     <div class="content">
       <!-- 用户组和角色未开启 -->
-      <el-row v-if="!openGroup && !openRole" :gutter="24">
+      <el-row
+        v-if="!openGroup && !openRole"
+        :gutter="24"
+      >
         <el-col :span="8">
           <div class="content-card content-card-lg">
-            <PermissionTree title="权限树" :query-type="queryType" :checked-keys="permissionTreeChckedKeys" @getTreeData="getPermissionTreeChecked" />
+            <PermissionTree
+              title="权限树"
+              :query-type="queryType"
+              :checked-keys="permissionTreeChckedKeys"
+              @getTreeData="getPermissionTreeChecked"
+            />
           </div>
         </el-col>
         <el-col :span="8">
           <div class="content-card content-card-lg">
-            <RulesOfCompetency title="权限规则" margin-b="20px" @getData="getRulesOfCompetency" />
+            <RulesOfCompetency
+              title="权限规则"
+              margin-b="20px"
+              @getData="getRulesOfCompetency"
+            />
           </div>
         </el-col>
-        <el-col v-is="['account_edit_login_setting']" :span="8">
+        <el-col
+          v-is="['account_edit_login_setting']"
+          :span="8"
+        >
           <div class="content-card content-card-lg">
-            <LoginPolicy :checked-list="loginPolicyCheckedList" @getCheckedList="getLoginPolicyChecked" />
+            <LoginPolicy
+              :checked-list="loginPolicyCheckedList"
+              @getCheckedList="getLoginPolicyChecked"
+            />
           </div>
         </el-col>
       </el-row>
       <!-- 角色和用户组都开启 -->
-      <el-row v-if="openGroup && openRole" :gutter="24">
+      <el-row
+        v-if="openGroup && openRole"
+        :gutter="24"
+      >
         <el-col :span="8">
           <div class="content-card content-card-xl">
-            <AccountGroupTree title="所属账号组" nodekey="GroupId" :default-props="accountGroupTreeProps" :checked-keys="accountGroupTreeCheckedList" @getTreeData="getAccountGroupChecked" />
+            <AccountGroupTree
+              title="所属账号组"
+              nodekey="GroupId"
+              :default-props="accountGroupTreeProps"
+              :checked-keys="accountGroupTreeCheckedList"
+              @getTreeData="getAccountGroupChecked"
+            />
           </div>
         </el-col>
-        <el-col v-is="['account_edit_role_list']" :span="8">
+        <el-col
+          v-is="['account_edit_role_list']"
+          :span="8"
+        >
           <div class="content-card content-card-xl">
-            <RoleList title="角色列表" :role-type="roleType" :group-ids="groupIds" :check-box-list="roleListCheckedList" :number="8" :active="true" @checkChange="getRoleListChecked" @checkClick="selectRole" @roleListChange="roleListCheckedChange" />
+            <RoleList
+              title="角色列表"
+              :role-type="roleType"
+              :group-ids="groupIds"
+              :check-box-list="roleListCheckedList"
+              :number="8"
+              :active="true"
+              @checkChange="getRoleListChecked"
+              @checkClick="selectRole"
+              @roleListChange="roleListCheckedChange"
+            />
           </div>
         </el-col>
-        <el-col v-is="['account_edit_auth_list']" :span="8">
+        <el-col
+          v-is="['account_edit_auth_list']"
+          :span="8"
+        >
           <div class="content-card content-card-sm">
-            <PermissionList title="权限列表" class="permission-list" :role-list="checkedRoles" :check="true" @Competen="Competen" />
+            <PermissionList
+              title="权限列表"
+              class="permission-list"
+              :role-list="checkedRoles"
+              :check="true"
+              @Competen="Competen"
+            />
           </div>
-          <div v-is="['account_edit_login_setting']" class="content-card content-card-xs">
-            <LoginPolicy :checked-list="loginPolicyCheckedList" @getCheckedList="getLoginPolicyChecked" />
+          <div
+            v-is="['account_edit_login_setting']"
+            class="content-card content-card-xs"
+          >
+            <LoginPolicy
+              :checked-list="loginPolicyCheckedList"
+              @getCheckedList="getLoginPolicyChecked"
+            />
           </div>
         </el-col>
       </el-row>
       <!-- 只开启用户组 -->
-      <el-row v-if="openGroup && !openRole" :gutter="24">
+      <el-row
+        v-if="openGroup && !openRole"
+        :gutter="24"
+      >
         <el-col :span="8">
           <div class="content-card content-card-xxl">
-            <AccountGroupTree title="所属账号组" nodekey="GroupId" :default-props="accountGroupTreeProps" :checked-keys="accountGroupTreeCheckedList" @getTreeData="getAccountGroupChecked" />
+            <AccountGroupTree
+              title="所属账号组"
+              nodekey="GroupId"
+              :default-props="accountGroupTreeProps"
+              :checked-keys="accountGroupTreeCheckedList"
+              @getTreeData="getAccountGroupChecked"
+            />
           </div>
         </el-col>
         <el-col :span="8">
           <div class="content-card content-card-xxl">
-            <PermissionTree title="权限树" :query-type="queryType" :query-ids="queryIds" :checked-keys="permissionTreeChckedKeys" @getTreeData="getPermissionTreeChecked" />
+            <PermissionTree
+              title="权限树"
+              :query-type="queryType"
+              :query-ids="queryIds"
+              :checked-keys="permissionTreeChckedKeys"
+              @getTreeData="getPermissionTreeChecked"
+            />
           </div>
         </el-col>
         <el-col :span="8">
           <div class="content-card content-card-md">
-            <RulesOfCompetency title="权限规则" margin-b="20px" @getData="getRulesOfCompetency" />
+            <RulesOfCompetency
+              title="权限规则"
+              margin-b="20px"
+              @getData="getRulesOfCompetency"
+            />
           </div>
-          <div v-is="['account_edit_login_setting']" class="content-card content-card-xs">
-            <LoginPolicy :checked-list="loginPolicyCheckedList" @getCheckedList="getLoginPolicyChecked" />
+          <div
+            v-is="['account_edit_login_setting']"
+            class="content-card content-card-xs"
+          >
+            <LoginPolicy
+              :checked-list="loginPolicyCheckedList"
+              @getCheckedList="getLoginPolicyChecked"
+            />
           </div>
         </el-col>
       </el-row>
       <!-- 只开启角色 -->
-      <el-row v-if="!openGroup && openRole" :gutter="24">
-        <el-col v-is="['account_edit_role_list']" :span="8">
+      <el-row
+        v-if="!openGroup && openRole"
+        :gutter="24"
+      >
+        <el-col
+          v-is="['account_edit_role_list']"
+          :span="8"
+        >
           <div class="content-card content-card-lg">
-            <RoleList title="角色列表" :role-type="roleType" :check-box-list="roleListCheckedList" :number="8" :active="true" @checkChange="getRoleListChecked" @checkClick="selectRole" />
+            <RoleList
+              title="角色列表"
+              :role-type="roleType"
+              :check-box-list="roleListCheckedList"
+              :number="8"
+              :active="true"
+              @checkChange="getRoleListChecked"
+              @checkClick="selectRole"
+            />
           </div>
         </el-col>
-        <el-col v-is="['account_edit_auth_list']" :span="8">
+        <el-col
+          v-is="['account_edit_auth_list']"
+          :span="8"
+        >
           <div class="content-card content-card-lg">
-            <PermissionList title="权限列表" :role-list="checkedRoles" :check="true" class="permission-list" @Competen="Competen" />
+            <PermissionList
+              title="权限列表"
+              :role-list="checkedRoles"
+              :check="true"
+              class="permission-list"
+              @Competen="Competen"
+            />
           </div>
         </el-col>
-        <el-col v-is="['account_edit_login_setting']" :span="8">
+        <el-col
+          v-is="['account_edit_login_setting']"
+          :span="8"
+        >
           <div class="content-card content-card-lg">
-            <LoginPolicy :checked-list="loginPolicyCheckedList" @getCheckedList="getLoginPolicyChecked" />
+            <LoginPolicy
+              :checked-list="loginPolicyCheckedList"
+              @getCheckedList="getLoginPolicyChecked"
+            />
           </div>
         </el-col>
       </el-row>
@@ -177,7 +326,7 @@ export default {
     PermissionList
     // Dialog
   },
-  data () {
+  data() {
     return {
       doesAccountExist: this.$route.meta.doesAccountExist, // 控制账号新增/编辑
       userId: '',
@@ -223,11 +372,11 @@ export default {
   },
   computed: {
     ...mapGetters(['systemSet']),
-    pageTitle () {
+    pageTitle() {
       return this.doesAccountExist ? '编辑账号' : '新增账号'
     }
   },
-  created () {
+  created() {
     // 获取系统配置
     let obj
     if (typeof this.systemSet === 'string') {
@@ -243,7 +392,7 @@ export default {
     this.pwdLengthBegin = PwdLengthBegin
     this.pwdLengthEnd = PwdLengthEnd
   },
-  mounted () {
+  mounted() {
     if (this.doesAccountExist) {
       this.userId = this.$route.query.userId
       this.getAccountInfo()
@@ -255,7 +404,7 @@ export default {
   },
   methods: {
     // 获取当前账号信息
-    async getAccountInfo () {
+    async getAccountInfo() {
       try {
         const res = await getAccountDetails({
           UserId: this.userId
@@ -274,15 +423,20 @@ export default {
               this.permissionTreeChckedTemp.push(auth)
             })
 
-          this.accountGroupTreeCheckedTemp = []
-          GroupList &&
-            GroupList.length &&
+          if (GroupList && GroupList.length && GroupList[0] !== -1) {
+            this.accountGroupTreeCheckedTemp = []
+            this.roleType = this.openGroup ? 'roleByUpId' : 'onlyRole'
+            this.queryType = this.openGroup ? 'group' : 'all'
             GroupList.forEach(group => {
               this.accountGroupTreeCheckedList.push(group.GroupId)
               this.accountGroupTreeCheckedTemp.push(group.GroupId)
               this.groupIds.push(group.GroupId)
               this.queryIds.push(group.GroupId)
             })
+          } else {
+            this.roleType = 'onlyRole'
+            this.queryType = 'all'
+          }
 
           RoleList &&
             RoleList.length &&
@@ -296,8 +450,6 @@ export default {
               tac.IsSelected && this.loginPolicyCheckedList.push(tac)
               tac.IsSelected && this.loginPolicyCheckedTemp.push(tac)
             })
-          this.roleType = this.openGroup ? 'roleByUpId' : 'onlyRole'
-          this.queryType = this.openGroup ? 'group' : 'all'
         } else {
           this.$message.error(res.message)
         }
@@ -306,23 +458,23 @@ export default {
       }
     },
     // 随机生成密码
-    resetPwd () {
+    resetPwd() {
       this.accountForm.pwd = pwdProduce(this.pwdLengthBegin, this.pwdLengthEnd, this.pwdStruc)
     },
     // 获取当前权限树勾选项
-    getPermissionTreeChecked (arr) {
+    getPermissionTreeChecked(arr) {
       this.permissionTreeChckedTemp = arr.map(auth => auth.AuthList)
     },
     // 获取当前编辑的权限规则
-    getRulesOfCompetency (obj) {
+    getRulesOfCompetency(obj) {
       this.rulesOfCompetency = obj
     },
     // 获取当前勾选的登录策略
-    getLoginPolicyChecked (arr) {
+    getLoginPolicyChecked(arr) {
       this.loginPolicyCheckedTemp = arr
     },
     // 获取当前勾选的账号组
-    getAccountGroupChecked (arr) {
+    getAccountGroupChecked(arr) {
       if (arr && arr.length && arr[0] !== -1) {
         const GroupIds = arr.map(item => item.GroupId)
         this.accountGroupTreeCheckedTemp = GroupIds
@@ -337,21 +489,15 @@ export default {
       }
     },
     // 获取当前勾选的角色列表
-    getRoleListChecked (arr) {
+    getRoleListChecked(arr) {
       this.roleListCheckedTemp = arr
     },
-    roleListCheckedChange (arr) {
-      if (arr && arr.length) {
-        this.roleListCheckedTemp = this.roleListCheckedTemp.filter(role =>
-          arr.some(data => data.RoleId === role.RoleId)
-        )
-      } else {
-        this.roleListCheckedTemp = []
-      }
+    roleListCheckedChange(arr) {
+      this.roleListCheckedTemp = this.roleListCheckedTemp.filter(role => arr.some(data => data.RoleId === role.RoleId))
       this.roleListCheckedList = this.roleListCheckedTemp.map(role => role.RoleId)
     },
     // 点击角色后显示对应权限列表
-    async selectRole (data) {
+    async selectRole(data) {
       if (this.currentSelectedRoleId === data.RoleId) return
       try {
         const params = {
@@ -369,11 +515,11 @@ export default {
       }
     },
     // 修改权限规则
-    Competen (data) {
+    Competen(data) {
       console.log(data)
     },
     // 账号编辑保存
-    handleClickSave (formName) {
+    handleClickSave(formName) {
       this.$refs[formName].validate(valid => {
         if (valid) {
           this.handleSaveEdit()
@@ -383,7 +529,7 @@ export default {
         }
       })
     },
-    handleSaveEdit () {
+    handleSaveEdit() {
       const params = {
         AuthList: this.permissionTreeChckedTemp,
         GroupList: this.accountGroupTreeCheckedTemp.map(groupId => ({ GroupId: groupId })),
@@ -404,7 +550,7 @@ export default {
       }
     },
     // 编辑账号
-    async saveEditAccount (params) {
+    async saveEditAccount(params) {
       try {
         const res = await editAccount(params)
         if (res.code === 0) {
@@ -421,7 +567,7 @@ export default {
       }
     },
     // 新增账号
-    async saveAddAccount (params) {
+    async saveAddAccount(params) {
       try {
         const res = await addAccount(params)
         if (res.code === 0) {