修改新增/编辑账号页面

src/components/permissiontree/index.vue

@@ -91,6 +91,10 @@ export default {
       type: String,
       default: "",
     },
+    queryIds: {
+      type: Array,
+      default: () => []
+    },
     //要查询的查询ID
     isMainJob: {
       type: Boolean,
@@ -161,6 +165,12 @@ export default {
       },
       deep: true,
     },
+    queryIds: {
+      handler() {
+        this.getDefaultDataList()
+      },
+      deep: true
+    }
   },
   created: function () {
     this.getDataList();
@@ -194,9 +204,15 @@ export default {
         });
       } else if (this.queryType == "group") {
         //根据帐号组获取权限树
-        GetAuthTreeByGroup({ GroupId: this.searchId }).then((result) => {
-          this.setUnDisabledData(result.returnData);
-        });
+        if (this.searchId) {
+          GetAuthTreeByGroup({ GroupIds: [this.searchId] }).then((result) => {
+            this.setUnDisabledData(result.returnData);
+          });
+        } else if (this.queryIds.length) {
+          GetAuthTreeByGroup({ GroupIds: this.queryIds }).then((result) => {
+            this.setUnDisabledData(result.returnData)
+          })
+        }
       }
     },
     setData (result) {

src/components/usergrouptree/index.vue

@@ -1,8 +1,8 @@
 <!--
  * @Author: zk
  * @Date: 2022-02-09 15:47:09
- * @LastEditTime: 2022-02-16 11:45:24
- * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2022-02-18 16:50:48
+ * @LastEditors: your name
  * @Description: 用户组树
  * @FilePath: \Foshan4A4.0\src\components\usergrouptree\index.vue
 -->

src/router/routes/routes-file-five.js

@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2022-01-06 10:05:44
- * @LastEditTime: 2022-02-17 16:38:56
+ * @LastEditTime: 2022-02-18 18:16:12
  * @LastEditors: your name
  * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  * @FilePath: \src\router\routes\routes-file-five.js
@@ -56,7 +56,7 @@ const accountRoutes = {
   children: [
     {
       path: 'account',
-      name: 'account',
+      name: '',
       component: () => import('@/views/accountManagement'),
       meta: {
         title: '账号管理'

src/utils/pwdRules.js

@@ -1,7 +1,7 @@
 /*
  * @Author: Badguy
  * @Date: 2022-02-15 17:16:32
- * @LastEditTime: 2022-02-15 17:25:14
+ * @LastEditTime: 2022-02-18 17:57:54
  * @LastEditors: your name
  * @Description: 账号管理方法
  * have a nice day!
@@ -29,7 +29,7 @@ export function generatePassword(rules, minNum, maxNum) {
   }
   for (let i = 0; i < rulesArrLnArr.length; i++) {
     item[rulesArrLnArr[i]] = rulesArrLnArr[i] + ''
-    console.log(`rulesArrLnArr[i]`, rulesArrLnArr[i])
+    // console.log(`rulesArrLnArr[i]`, rulesArrLnArr[i])
   }
   for (let i = 0; i < pwdLen; i++) {
     if (rulesArrLnArr.indexOf(i + '') === -1) {

src/views/accountManagement/components/accountEdit.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: Badguy
  * @Date: 2022-02-15 11:37:42
- * @LastEditTime: 2022-02-17 17:59:58
+ * @LastEditTime: 2022-02-18 19:54:41
  * @LastEditors: your name
  * @Description: 编辑账号
  * have a nice day!
@@ -37,8 +37,10 @@
       <div class="title-content">
         <el-form
           ref="accountForm"
-          :model="accountForm"
           label-width="80px"
+          :inline="true"
+          :model="accountForm"
+          :rules="formRules"
         >
           <el-row :gutter="40">
             <el-col :span="5">
@@ -63,12 +65,12 @@
                   v-model="accountForm.pwd"
                   placeholder="*******"
                   size="small"
+                  disabled
                 />
               </el-form-item>
             </el-col>
             <el-col :span="2">
               <button
-                type="reset"
                 class="btn-reset-pwd"
                 @click="resetPwd"
               >重置密码</button>
@@ -98,26 +100,28 @@
         :gutter="24"
       >
         <el-col :span="8">
-          <div class="content-card content-card-large">
+          <div class="content-card content-card-lg">
             <PermissionTree
               title="权限树"
-              query-type="all"
-              :query-id="permissionTreeQueryId"
+              :query-type="queryType"
               :checked-keys="permissionTreeChckedKeys"
               @getTreeData="getPermissionTreeChecked"
             />
           </div>
         </el-col>
         <el-col :span="8">
-          <div class="content-card content-card-large">
+          <div class="content-card content-card-lg">
             <RulesOfCompetency
               title="权限规则"
+              margin-b="20px"
+              :auth-list="authList"
+              :auth-to="authTo"
               @getData="getRulesOfCompetency"
             />
           </div>
         </el-col>
         <el-col :span="8">
-          <div class="content-card content-card-large">
+          <div class="content-card content-card-lg">
             <LoginPolicy
               :checked-list="loginPolicyCheckedList"
               @getCheckedList="getLoginPolicyChecked"
@@ -131,31 +135,33 @@
         :gutter="24"
       >
         <el-col :span="8">
-          <div class="content-card content-card-large">
+          <div class="content-card content-card-xl">
             <AccountGroupTree
               title="所属账号组"
               nodekey="GroupId"
+              :type="false"
               :default-props="accountGroupTreeProps"
-              :checked-id-list="accountGroupTreeCheckedList"
+              :checked-keys="accountGroupTreeCheckedList"
               @getTreeData="getAccountGroupChecked"
             />
           </div>
         </el-col>
         <el-col :span="8">
-          <div class="content-card content-card-large">
+          <div class="content-card content-card-xl">
             <RoleList
               title="角色列表"
               :role-type="roleType"
-              :group-ids="accountGroupTreeCheckedList"
+              :group-ids="accountGroupTreeCheckedTemp"
               :check-box-list="roleListCheckedList"
               :number="8"
+              :active="true"
               @checkChange="getRoleListChecked"
               @checkClick="selectRole"
             />
           </div>
         </el-col>
         <el-col :span="8">
-          <div class="content-card content-card-medium">
+          <div class="content-card content-card-sm">
             <PermissionList
               title="权限列表"
               class="permission-list"
@@ -164,7 +170,7 @@
               @Competen="Competen"
             />
           </div>
-          <div class="content-card content-card-small">
+          <div class="content-card content-card-xs">
             <LoginPolicy
               :checked-list="loginPolicyCheckedList"
               @getCheckedList="getLoginPolicyChecked"
@@ -178,36 +184,39 @@
         :gutter="24"
       >
         <el-col :span="8">
-          <div class="content-card content-card-large">
+          <div class="content-card content-card-xxl">
             <AccountGroupTree
               title="所属账号组"
               nodekey="GroupId"
+              :type="false"
               :default-props="accountGroupTreeProps"
-              :checked-id-list="accountGroupTreeCheckedList"
+              :checked-keys="accountGroupTreeCheckedList"
               @getTreeData="getAccountGroupChecked"
             />
           </div>
         </el-col>
         <el-col :span="8">
-          <div class="content-card content-card-large">
+          <div class="content-card content-card-xxl">
             <PermissionTree
               title="权限树"
-              query-type="group"
-              :query-id="permissionTreeQueryId"
+              :query-type="queryType"
+              :query-ids="accountGroupTreeCheckedTemp"
               :checked-keys="permissionTreeChckedKeys"
               @getTreeData="getPermissionTreeChecked"
             />
           </div>
         </el-col>
         <el-col :span="8">
-          <div class="content-card content-card-medium">
+          <div class="content-card content-card-md">
             <RulesOfCompetency
               title="权限规则"
+              margin-b="20px"
+              :auth-list="authList"
+              :auth-to="authTo"
               @getData="getRulesOfCompetency"
             />
           </div>
-
-          <div class="content-card content-card-small">
+          <div class="content-card content-card-xs">
             <LoginPolicy
               :checked-list="loginPolicyCheckedList"
               @getCheckedList="getLoginPolicyChecked"
@@ -221,19 +230,20 @@
         :gutter="24"
       >
         <el-col :span="8">
-          <div class="content-card content-card-large">
+          <div class="content-card content-card-lg">
             <RoleList
               title="角色列表"
               :role-type="roleType"
               :check-box-list="roleListCheckedList"
               :number="8"
-              @check-change="getRoleListChecked"
+              :active="true"
+              @checkChange="getRoleListChecked"
               @checkClick="selectRole"
             />
           </div>
         </el-col>
         <el-col :span="8">
-          <div class="content-card content-card-large">
+          <div class="content-card content-card-lg">
             <PermissionList
               title="权限列表"
               :role-list="permissionList"
@@ -244,7 +254,7 @@
           </div>
         </el-col>
         <el-col :span="8">
-          <div class="content-card content-card-large">
+          <div class="content-card content-card-lg">
             <LoginPolicy
               :checked-list="loginPolicyCheckedList"
               @getCheckedList="getLoginPolicyChecked"
@@ -281,7 +291,7 @@ import PermissionList from '@/components/permissionlist/index.vue'
 
 import { RoleAuths } from '@/api/apiAuthority'
 import { getAccountDetails, editAccount, addAccount } from '@/api/Account.js'
-import { generatePassword } from '@/utils/pwdRules'
+import { pwdProduce } from '@/utils/validate'
 import { mapGetters } from 'vuex'
 
 export default {
@@ -303,21 +313,23 @@ export default {
       pwdStruc: '',
       pwdLengthBegin: 0,
       pwdLengthEnd: 0,
-      permissionTreeQueryId: '',
+      authTo: {},
+      authList: [],
       permissionTreeChckedKeys: [], // 权限树初始勾选项
       permissionTreeChckedTemp: [], // 权限树当前勾选项
       rulesOfCompetency: null, // 当前编辑的权限规则
       loginPolicyCheckedList: [], // 登录策略初始勾选项
       loginPolicyCheckedTemp: [], // 登录策略当前勾选项
       accountGroupTreeCheckedList: [], // 账号组树初始勾选项
-      accountGroupTreeCheckedTemp: [], // 账号组树当前勾选项
+      accountGroupTreeCheckedTemp: [-1], // 账号组树当前勾选项
       roleListCheckedList: [], // 角色列表初始勾选项
       roleListCheckedTemp: [], // 角色列表当前勾选项
       roleType: '',
       permissionList: [],
       currentSelectedRoleId: 0,
+      queryType: '',
       // dialogVisible: false,
-      pwdRules: {
+      formRules: {
         UserName: [
           { required: true, message: '请输入账号名称', trigger: 'blur' },
           { min: 1, max: 32, message: '长度在 1到 32 个字符', trigger: 'blur' }
@@ -341,7 +353,7 @@ export default {
     }
   },
   computed: {
-    ...mapGetters(['systemSet', 'authArrs']),
+    ...mapGetters(['systemSet']),
     pageTitle() {
       return this.doesAccountExist ? '编辑账号' : '新增账号'
     }
@@ -354,13 +366,14 @@ export default {
     } else {
       obj = this.systemSet
     }
-    // console.log(obj)
+    console.log(obj)
     const { OpenRole, OpenGroup, PwdStruc, PwdLengthBegin, PwdLengthEnd } = obj
     this.openRole = OpenRole
     this.openGroup = OpenGroup
     this.pwdStruc = PwdStruc
     this.pwdLengthBegin = PwdLengthBegin
     this.pwdLengthEnd = PwdLengthEnd
+    this.queryType = OpenGroup ? 'group' : 'all'
   },
   mounted() {
     this.openRole && (this.roleType = this.openGroup ? 'roleByUpId' : 'onlyRole')
@@ -382,30 +395,34 @@ export default {
           const { UserDesc, UserName, GroupList, TacList, AuthList, RoleList } = res.returnData
           this.accountForm.name = UserName
           this.accountForm.desc = UserDesc
-          this.accountGroupTreeCheckedList = GroupList
-          this.loginPolicyCheckedList = TacList
-          this.$store.state.auth.authList = AuthList
+          // this.$store.state.auth.authList = AuthList
 
           AuthList &&
             AuthList.length &&
-            AuthList.forEach(auth => {
+            (AuthList.forEach(auth => {
               this.permissionTreeChckedKeys.push(auth.AuthId)
-            })
+            }),
+            (this.authTo = AuthList[0]),
+            (this.authList = this._.cloneDeep(AuthList)))
+          this.permissionTreeChckedTemp = this.permissionTreeChckedKeys
           GroupList &&
             GroupList.length &&
             GroupList.forEach(group => {
               this.accountGroupTreeCheckedList.push(group.GroupId)
             })
+          this.accountGroupTreeCheckedTemp = this.accountGroupTreeCheckedList
           RoleList &&
             RoleList.length &&
             RoleList.forEach(role => {
               role.IsSelected && this.roleListCheckedList.push(role.RoleId)
             })
+          this.roleListCheckedTemp = RoleList
           TacList &&
             TacList &&
             TacList.forEach(tac => {
-              tac.IsSelected && this.loginPolicyCheckedList.push(tac.TacId)
+              tac.IsSelected && this.loginPolicyCheckedList.push(tac)
             })
+          this.loginPolicyCheckedTemp = this.loginPolicyCheckedList
         } else {
           this.$message.error(res.message)
         }
@@ -415,11 +432,11 @@ export default {
     },
     // 随机生成密码
     resetPwd() {
-      this.accountForm.pwd = generatePassword(this.pwdStruc, this.pwdLengthBegin, this.pwdLengthEnd)
+      this.accountForm.pwd = pwdProduce(this.pwdLengthBegin, this.pwdLengthEnd, this.pwdStruc)
     },
     // 获取当前权限树勾选项
     getPermissionTreeChecked(arr) {
-      console.log('权限树勾选', arr)
+      console.log(arr)
       this.permissionTreeChckedTemp = arr
     },
     // 获取当前编辑的权限规则
@@ -428,12 +445,18 @@ export default {
     },
     // 获取当前勾选的登录策略
     getLoginPolicyChecked(arr) {
-      console.log('登录策略勾选', arr)
+      console.log(arr)
       this.loginPolicyCheckedTemp = arr
     },
     // 获取当前勾选的账号组
     getAccountGroupChecked(arr) {
-      this.accountGroupTreeCheckedTemp = arr
+      this.accountGroupTreeCheckedTemp.length = 0
+      if (arr && arr.length) {
+        const GroupIds = arr.map(item => item.GroupId)
+        this.accountGroupTreeCheckedTemp.push(...GroupIds)
+      } else {
+        this.accountGroupTreeCheckedTemp.push(-1)
+      }
     },
     // 获取当前勾选的角色列表
     getRoleListChecked(arr) {
@@ -461,35 +484,25 @@ export default {
     },
     // 账号编辑保存
     handleClickSave() {
-      // const treeData = []
-      // this.permissionTreeChckedTemp.forEach(item => {
-      //   treeData.push(item.AuthList)
-      // })
-      // treeData.forEach((item, index) => {
-      //   this.authArrs.forEach(item2 => {
-      //     if (item.AuthId === item2.AuthId) {
-      //       treeData[index] = item2.AuthList
-      //     }
-      //   })
-      // })
-      // const params = {
-      //   AuthList: treeData,
-      //   GroupList: this.accountGroupTreeCheckedTemp,
-      //   RoleList: this.roleListCheckedTemp,
-      //   Status: 0,
-      //   TacList: this.loginPolicyCheckedTemp,
-      //   UserDesc: this.accountForm.desc,
-      //   UserName: this.accountForm.name,
-      //   UserPwd: this.accountForm.pwd
-      // }
-      // if (this.doesAccountExist) {
-      //   this.saveEditAccount({
-      //     ...params,
-      //     UserId: this.userId
-      //   })
-      // } else {
-      //   this.saveAddAccount(params)
-      // }
+      const AuthList = this.permissionTreeChckedTemp.map(auth => auth.AuthList)
+      const params = {
+        AuthList,
+        GroupList: this.accountGroupTreeCheckedTemp.map(groupId => ({ GroupId: groupId })),
+        RoleList: this.roleListCheckedTemp,
+        Status: 0,
+        TacList: this.loginPolicyCheckedTemp,
+        UserDesc: this.accountForm.desc,
+        UserName: this.accountForm.name,
+        UserPwd: this.accountForm.pwd
+      }
+      if (this.doesAccountExist) {
+        this.saveEditAccount({
+          ...params,
+          UserId: this.userId
+        })
+      } else {
+        this.saveAddAccount(params)
+      }
     },
     // 编辑账号
     async saveEditAccount(params) {
@@ -605,15 +618,24 @@ export default {
       background: #ffffff;
       box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
       border-radius: 16px;
-      &.content-card-large {
+      &.content-card-xxl {
+        height: 856px;
+      }
+      &.content-card-xl {
         height: 720px;
       }
-      &.content-card-medium {
+      &.content-card-lg {
+        height: 704px;
+      }
+      &.content-card-md {
+        height: 512px;
+      }
+      &.content-card-sm {
         height: 376px;
       }
-      &.content-card-small {
+      &.content-card-xs {
         height: 320px;
-        margin-top: 25px;
+        margin-top: 24px;
         overflow: hidden;
       }
     }

src/views/accountManagement/components/accountHome.vue

@@ -92,7 +92,7 @@
                       :inactive-value="false"
                       active-color="#6F81BC"
                       inactive-color="#CFD6E2"
-                      @change="isUsedChange(account.Flag, account.UserId)"
+                      @change="userActiveToggle(account.Flag, account.UserId)"
                     />
                   </el-col>
                 </el-row>
@@ -194,9 +194,9 @@ export default {
       this.pageInit()
     },
     // 修改状态
-    async isUsedChange(Flag, UserId) {
+    async userActiveToggle(Flag, UserId) {
       const result = await ChangeUserStatus({
-        Flag: Flag,
+        Flag,
         UserId
       })
       if (result.code === 0) {
@@ -235,14 +235,9 @@ export default {
         if (result.code === 0) {
           this.loading = false
           const newDatas = result.returnData.records
-          // console.log(newDatas)
+          // console.log(newDatas[0])
           this.pages = result.returnData.pages
           newDatas.forEach(element => {
-            if (element.Status === 1) {
-              element['Flag'] = true
-            } else {
-              element['Flag'] = false
-            }
             this.accountArr.push(element)
           })
         } else {