修改账号新增/编辑页面

.eslintrc.js

@@ -174,7 +174,7 @@ module.exports = {
     'space-before-blocks': [2, 'always'],
     'space-before-function-paren': [2, {
       "anonymous": "always",
-      "named": "never",
+      "named": "ignore",
       "asyncArrow": "always"
     }],
     'space-in-parens': [2, 'never'],

src/api/Account.js

@@ -1,7 +1,7 @@
 /*
  * @Author: Badguy
  * @Date: 2022-02-14 09:37:11
- * @LastEditTime: 2022-02-15 10:41:09
+ * @LastEditTime: 2022-02-17 15:17:19
  * @LastEditors: your name
  * @Description: 账户管理api
  * have a nice day!
@@ -67,13 +67,3 @@ export function editAccount (params) {
     proxy: true
   })
 }
-
-// 根据账号组获取角色
-export function GetRoleByGroup (params) {
-  return request({
-    url: '/api/fs4a/GetRoleByGroup/v1',
-    method: 'post',
-    data: params,
-    proxy: true
-  })
-}

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

@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2022-01-06 10:05:44
- * @LastEditTime: 2022-02-15 17:33:05
+ * @LastEditTime: 2022-02-17 16:38:56
  * @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
@@ -12,73 +12,84 @@ const accountGroupRoutes = {
   path: '/',
   component: Layout,
   redirect: '/dashboard',
-  children: [{
-    path: 'accountGroup',
-    component: () => import('@/views/accountGroupManagement/index'),
-    meta: {
-      title: '账号组管理'
-    },
-    children: [{
-      path: '/',
-      name: 'accountGroupHome',
-      component: () => import('@/views/accountGroupManagement/components/accountGroupHome'),
-      meta: {
-        title: '账号组管理'
-      }
-    },
-    {
-      path: 'Add',
-      name: 'accountGroupAdd',
-      component: () => import('@/views/accountGroupManagement/components/accountGroupAdd'),
-      meta: {
-        title: '新增账号组'
-      }
-    },
+  children: [
     {
-      path: 'Edit',
-      name: 'accountGroupEdit',
-      component: () => import('@/views/accountGroupManagement/components/accountGroupEdit'),
+      path: 'accountGroup',
+      component: () => import('@/views/accountGroupManagement/index'),
       meta: {
-        title: '编辑账号组'
-      }
+        title: '账号组管理'
+      },
+      children: [
+        {
+          path: '/',
+          name: 'accountGroupHome',
+          component: () => import('@/views/accountGroupManagement/components/accountGroupHome'),
+          meta: {
+            title: '账号组管理'
+          }
+        },
+        {
+          path: 'Add',
+          name: 'accountGroupAdd',
+          component: () => import('@/views/accountGroupManagement/components/accountGroupAdd'),
+          meta: {
+            title: '新增账号组'
+          }
+        },
+        {
+          path: 'Edit',
+          name: 'accountGroupEdit',
+          component: () => import('@/views/accountGroupManagement/components/accountGroupEdit'),
+          meta: {
+            title: '编辑账号组'
+          }
+        }
+      ]
     }
-    ]
-  }]
+  ]
 }
 
 const accountRoutes = {
   path: '/',
   component: Layout,
   redirect: '/dashboard',
-  children: [{
-    path: 'account',
-    name: 'account',
-    component: () => import('@/views/accountManagement/index'),
-    meta: {
-      title: '账号管理'
-    }
-  },
-  {
-    path: 'accountAdd',
-    name: 'accountAdd',
-    component: () => import('@/views/accountManagement/accountEdit'),
-    meta: {
-      title: '新增账号'
-    }
-  },
-  {
-    path: 'accountEdit',
-    name: 'accountEdit',
-    component: () => import('@/views/accountManagement/accountEdit'),
-    meta: {
-      title: '编辑账号'
+  children: [
+    {
+      path: 'account',
+      name: 'account',
+      component: () => import('@/views/accountManagement'),
+      meta: {
+        title: '账号管理'
+      },
+      children: [
+        {
+          path: '/',
+          name: 'accountHome',
+          component: () => import('@/views/accountManagement/components/accountHome'),
+          meta: {
+            title: '账号管理'
+          }
+        },
+        {
+          path: 'accountAdd',
+          name: 'accountAdd',
+          component: () => import('@/views/accountManagement/components/accountEdit'),
+          meta: {
+            title: '新增账号'
+          }
+        },
+        {
+          path: 'accountEdit',
+          name: 'accountEdit',
+          component: () => import('@/views/accountManagement/components/accountEdit'),
+          meta: {
+            title: '编辑账号',
+            doesAccountExist: true
+          }
+        }
+      ]
     }
-  }
-
   ]
 }
 
-export default [
-  accountGroupRoutes,
-  accountRoutes
-]
+export default [accountGroupRoutes, accountRoutes]

src/views/accountManagement/accountEdit.vue → src/views/accountManagement/components/accountEdit.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: Badguy
  * @Date: 2022-02-15 11:37:42
- * @LastEditTime: 2022-02-15 17:38:03
+ * @LastEditTime: 2022-02-17 17:59:58
  * @LastEditors: your name
  * @Description: 编辑账号
  * have a nice day!
@@ -11,7 +11,7 @@
   <div class="account-edit">
     <div class="account-edit-header">
       <div class="title">
-        <div class="title-left">编辑账号</div>
+        <div class="title-left">{{ pageTitle }}</div>
         <!-- <div class="account-status">
           是否启用
           <el-radio
@@ -30,7 +30,7 @@
           <button
             type="submmit"
             class="btn-save"
-            @click="saveEdit"
+            @click="handleClickSave"
           >保存</button>
         </div>
       </div>
@@ -67,11 +67,11 @@
               </el-form-item>
             </el-col>
             <el-col :span="2">
-              <el-button
+              <button
+                type="reset"
                 class="btn-reset-pwd"
-                size="small"
                 @click="resetPwd"
-              >重置密码</el-button>
+              >重置密码</button>
             </el-col>
             <el-col :span="8">
               <el-form-item
@@ -81,7 +81,7 @@
                 <el-input
                   v-model="accountForm.desc"
                   maxlength="128"
-                  placeholder="描述内容描述内容描述内容描述内容描述内容描述内容"
+                  placeholder="描述内容···"
                   size="small"
                 />
               </el-form-item>
@@ -104,7 +104,7 @@
               query-type="all"
               :query-id="permissionTreeQueryId"
               :checked-keys="permissionTreeChckedKeys"
-              @get-tree-data="getPermissionTreeChecked"
+              @getTreeData="getPermissionTreeChecked"
             />
           </div>
         </el-col>
@@ -112,7 +112,7 @@
           <div class="content-card content-card-large">
             <RulesOfCompetency
               title="权限规则"
-              @get-data="getRulesOfCompetency"
+              @getData="getRulesOfCompetency"
             />
           </div>
         </el-col>
@@ -120,7 +120,7 @@
           <div class="content-card content-card-large">
             <LoginPolicy
               :checked-list="loginPolicyCheckedList"
-              @get-checked-list="getLoginPolicyChecked"
+              @getCheckedList="getLoginPolicyChecked"
             />
           </div>
         </el-col>
@@ -137,7 +137,7 @@
               nodekey="GroupId"
               :default-props="accountGroupTreeProps"
               :checked-id-list="accountGroupTreeCheckedList"
-              @get-tree-data="getAccountGroupChecked"
+              @getTreeData="getAccountGroupChecked"
             />
           </div>
         </el-col>
@@ -145,12 +145,12 @@
           <div class="content-card content-card-large">
             <RoleList
               title="角色列表"
-              role-type="roleByUpId"
+              :role-type="roleType"
               :group-ids="accountGroupTreeCheckedList"
               :check-box-list="roleListCheckedList"
               :number="8"
-              @check-change="getRoleListChecked"
-              @check-click="selectRole"
+              @checkChange="getRoleListChecked"
+              @checkClick="selectRole"
             />
           </div>
         </el-col>
@@ -167,7 +167,7 @@
           <div class="content-card content-card-small">
             <LoginPolicy
               :checked-list="loginPolicyCheckedList"
-              @get-checked-list="getLoginPolicyChecked"
+              @getCheckedList="getLoginPolicyChecked"
             />
           </div>
         </el-col>
@@ -184,7 +184,7 @@
               nodekey="GroupId"
               :default-props="accountGroupTreeProps"
               :checked-id-list="accountGroupTreeCheckedList"
-              @get-tree-data="getAccountGroupChecked"
+              @getTreeData="getAccountGroupChecked"
             />
           </div>
         </el-col>
@@ -195,7 +195,7 @@
               query-type="group"
               :query-id="permissionTreeQueryId"
               :checked-keys="permissionTreeChckedKeys"
-              @get-tree-data="getPermissionTreeChecked"
+              @getTreeData="getPermissionTreeChecked"
             />
           </div>
         </el-col>
@@ -203,14 +203,14 @@
           <div class="content-card content-card-medium">
             <RulesOfCompetency
               title="权限规则"
-              @get-data="getRulesOfCompetency"
+              @getData="getRulesOfCompetency"
             />
           </div>
 
           <div class="content-card content-card-small">
             <LoginPolicy
               :checked-list="loginPolicyCheckedList"
-              @get-checked-list="getLoginPolicyChecked"
+              @getCheckedList="getLoginPolicyChecked"
             />
           </div>
         </el-col>
@@ -224,11 +224,11 @@
           <div class="content-card content-card-large">
             <RoleList
               title="角色列表"
-              role-type="onlyRole"
+              :role-type="roleType"
               :check-box-list="roleListCheckedList"
               :number="8"
               @check-change="getRoleListChecked"
-              @check-click="selectRole"
+              @checkClick="selectRole"
             />
           </div>
         </el-col>
@@ -247,13 +247,13 @@
           <div class="content-card content-card-large">
             <LoginPolicy
               :checked-list="loginPolicyCheckedList"
-              @get-checked-list="getLoginPolicyChecked"
+              @getCheckedList="getLoginPolicyChecked"
             />
           </div>
         </el-col>
       </el-row>
     </div>
-    <Dialog :flag="dialogVisible">
+    <!-- <Dialog :flag="dialogVisible">
       <div class="closeDialog">
         <div class="title">删除账号</div>
         <div class="content">是否确定要删除该账号？</div>
@@ -266,7 +266,7 @@
           <el-button size="medium">取消</el-button>
         </div>
       </div>
-    </Dialog>
+    </Dialog> -->
   </div>
 </template>
 
@@ -277,11 +277,12 @@ import RulesOfCompetency from '@/components/rulesofcompetency/index.vue'
 import LoginPolicy from '@/components/loginpolicy/index.vue'
 import RoleList from '@/components/rolelist/index.vue'
 import PermissionList from '@/components/permissionlist/index.vue'
-import Dialog from '@/layout/components/Dialog'
+// import Dialog from '@/layout/components/Dialog'
 
 import { RoleAuths } from '@/api/apiAuthority'
-import { getAccountDetails, editAccount } from '@/api/Account.js'
+import { getAccountDetails, editAccount, addAccount } from '@/api/Account.js'
 import { generatePassword } from '@/utils/pwdRules'
+import { mapGetters } from 'vuex'
 
 export default {
   components: {
@@ -290,21 +291,19 @@ export default {
     RulesOfCompetency,
     LoginPolicy,
     RoleList,
-    PermissionList,
-    Dialog
+    PermissionList
+    // Dialog
   },
   data() {
     return {
-      appId: 0,
+      doesAccountExist: this.$route.meta.doesAccountExist, // 控制账号新增/编辑
       userId: this.$route.query.userId,
-      groupId: this.$route.query.groupId,
       openRole: 0,
       openGroup: 0,
       pwdStruc: '',
       pwdLengthBegin: 0,
       pwdLengthEnd: 0,
-      pwd: '',
-      permissionTreeQueryId: '1',
+      permissionTreeQueryId: '',
       permissionTreeChckedKeys: [], // 权限树初始勾选项
       permissionTreeChckedTemp: [], // 权限树当前勾选项
       rulesOfCompetency: null, // 当前编辑的权限规则
@@ -314,9 +313,10 @@ export default {
       accountGroupTreeCheckedTemp: [], // 账号组树当前勾选项
       roleListCheckedList: [], // 角色列表初始勾选项
       roleListCheckedTemp: [], // 角色列表当前勾选项
+      roleType: '',
       permissionList: [],
       currentSelectedRoleId: 0,
-      dialogVisible: false,
+      // dialogVisible: false,
       pwdRules: {
         UserName: [
           { required: true, message: '请输入账号名称', trigger: 'blur' },
@@ -340,12 +340,19 @@ export default {
       }
     }
   },
+  computed: {
+    ...mapGetters(['systemSet', 'authArrs']),
+    pageTitle() {
+      return this.doesAccountExist ? '编辑账号' : '新增账号'
+    }
+  },
   created() {
+    // 获取系统配置
     let obj
-    if (typeof this.$store.state.app.systemSet === 'string') {
-      obj = JSON.parse(this.$store.state.app.systemSet)
+    if (typeof this.systemSet === 'string') {
+      obj = JSON.parse(this.systemSet)
     } else {
-      obj = this.$store.state.app.systemSet
+      obj = this.systemSet
     }
     // console.log(obj)
     const { OpenRole, OpenGroup, PwdStruc, PwdLengthBegin, PwdLengthEnd } = obj
@@ -354,11 +361,13 @@ export default {
     this.pwdStruc = PwdStruc
     this.pwdLengthBegin = PwdLengthBegin
     this.pwdLengthEnd = PwdLengthEnd
-    this.getAccountInfo()
-    const { GroupId } = this.$route.query
-    this.appId = GroupId
-    if (OpenRole) {
-      this.title = '角色'
+  },
+  mounted() {
+    this.openRole && (this.roleType = this.openGroup ? 'roleByUpId' : 'onlyRole')
+    if (this.doesAccountExist) {
+      this.getAccountInfo()
+    } else {
+      this.resetPwd()
     }
   },
   methods: {
@@ -369,19 +378,34 @@ export default {
           UserId: this.userId
         })
         if (res.code === 0) {
-          // console.log(res.returnData)
+          console.log(res.returnData)
           const { UserDesc, UserName, GroupList, TacList, AuthList, RoleList } = res.returnData
           this.accountForm.name = UserName
           this.accountForm.desc = UserDesc
           this.accountGroupTreeCheckedList = GroupList
           this.loginPolicyCheckedList = TacList
-          // console.log(this.checkedIdList)
           this.$store.state.auth.authList = AuthList
 
-          AuthList.forEach(item => {
-            this.permissionTreeChckedKeys.push(item.AuthId)
-          })
-          this.roleListCheckedList = RoleList
+          AuthList &&
+            AuthList.length &&
+            AuthList.forEach(auth => {
+              this.permissionTreeChckedKeys.push(auth.AuthId)
+            })
+          GroupList &&
+            GroupList.length &&
+            GroupList.forEach(group => {
+              this.accountGroupTreeCheckedList.push(group.GroupId)
+            })
+          RoleList &&
+            RoleList.length &&
+            RoleList.forEach(role => {
+              role.IsSelected && this.roleListCheckedList.push(role.RoleId)
+            })
+          TacList &&
+            TacList &&
+            TacList.forEach(tac => {
+              tac.IsSelected && this.loginPolicyCheckedList.push(tac.TacId)
+            })
         } else {
           this.$message.error(res.message)
         }
@@ -389,11 +413,13 @@ export default {
         console.log('出错了', error)
       }
     },
+    // 随机生成密码
     resetPwd() {
       this.accountForm.pwd = generatePassword(this.pwdStruc, this.pwdLengthBegin, this.pwdLengthEnd)
     },
     // 获取当前权限树勾选项
     getPermissionTreeChecked(arr) {
+      console.log('权限树勾选', arr)
       this.permissionTreeChckedTemp = arr
     },
     // 获取当前编辑的权限规则
@@ -402,6 +428,7 @@ export default {
     },
     // 获取当前勾选的登录策略
     getLoginPolicyChecked(arr) {
+      console.log('登录策略勾选', arr)
       this.loginPolicyCheckedTemp = arr
     },
     // 获取当前勾选的账号组
@@ -412,7 +439,7 @@ export default {
     getRoleListChecked(arr) {
       this.roleListCheckedTemp = arr
     },
-    // 点击角色后
+    // 点击角色后显示对应权限列表
     async selectRole(data) {
       if (this.currentSelectedRoleId === data.RoleId) return
       try {
@@ -420,6 +447,7 @@ export default {
           RoleId: data.RoleId
         }
         const result = await RoleAuths(params)
+        // console.log(result.returnData)
         this.permissionList = result.returnData
         this.currentSelectedRoleId = data.RoleId
       } catch (error) {
@@ -431,33 +459,58 @@ export default {
     Competen(data) {
       console.log(data)
     },
-    // 账号编辑修改
-    async saveEdit() {
-      const treeData = []
-      this.permissionTreeChckedTemp.forEach(item => {
-        treeData.push(item.AuthList)
-      })
-      treeData.forEach((item, index) => {
-        this.$store.getters.authArrs.forEach(item2 => {
-          if (item.AuthId === item2.AuthId) {
-            treeData[index] = item2.AuthList
-          }
-        })
-      })
-
+    // 账号编辑保存
+    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)
+      // }
+    },
+    // 编辑账号
+    async saveEditAccount(params) {
       try {
-        const res = await editAccount({
-          UserDesc: this.accountForm.desc,
-          UserName: this.accountForm.name,
-          UserPwd: this.accountForm.pwd,
-          AuthList: treeData,
-          RoleList: this.roleListCheckedTemp,
-          GroupId: this.groupId,
-          UserId: this.userId,
-          AuthTo: treeData,
-          GroupList: this.accountGroupTreeCheckedTemp,
-          TacList: this.loginPolicyCheckedTemp ? this.loginPolicyCheckedTemp : []
-        })
+        const res = await editAccount(params)
+        if (res.code === 0) {
+          this.$message.success(res.message)
+          setTimeout(() => {
+            this.$router.push('/account')
+          })
+        } else {
+          this.$message.error(res.message)
+        }
+      } catch (error) {
+        console.log('出错了', error)
+      }
+    },
+    // 新增账号
+    async saveAddAccount(params) {
+      try {
+        const res = await addAccount(params)
         if (res.code === 0) {
           this.$message.success(res.message)
           setTimeout(() => {
@@ -510,6 +563,7 @@ export default {
         border-radius: 6px;
         color: #fff;
         border: none;
+        cursor: pointer;
       }
       .btn-delete {
         width: 80px;
@@ -526,8 +580,14 @@ export default {
       padding-top: 35px;
       box-sizing: border-box;
       .btn-reset-pwd {
+        width: 72px;
+        height: 32px;
         background: #6e81bc;
+        border: none;
+        border-radius: 6px;
         color: #fff;
+        font-size: 14px;
+        cursor: pointer;
         margin-top: 4px;
         margin-left: -25px;
       }

src/views/accountManagement/components/accountHome.vue

@@ -0,0 +1,433 @@
+<template>
+  <div class="account-home">
+    <div class="account-header">
+      <div class="status flex-wrap">
+        <div class="status1"><span class="icon" />在线</div>
+        <div class="status2"><span class="icon" />离线</div>
+        <div class="status3"><span class="icon" />禁用</div>
+      </div>
+      <Search
+        :is-slot="true"
+        @getSearchData="getSearchData"
+        @clearSearchData="clearSearchData"
+      >
+        <el-button
+          class="btn-add"
+          @click="addAccount"
+        >新增账号</el-button>
+      </Search>
+    </div>
+    <div class="content-box scrollbar">
+      <template v-if="accountArr.length">
+        <el-row
+          v-infinite-scroll="load"
+          :infinite-scroll-disabled="disabled"
+          :infinite-scroll-distance="20"
+          :gutter="24"
+        >
+          <el-col
+            v-for="account in accountArr"
+            :key="account.UserId"
+            :xs="24"
+            :sm="12"
+            :md="8"
+            :lg="6"
+            :xl="{ span: '4-8' }"
+            class="account-box"
+          >
+            <div class="account-box-wrap">
+              <div :class="account.Status === 1 ? 'headOnline' : account.Status === 2 ? 'headOffline' : 'headDisabled'" />
+              <div
+                class="del"
+                @click="deleteUser(account)"
+              >
+                <i class="el-icon-close" />
+              </div>
+              <div>
+                <el-row>
+                  <el-col
+                    :span="24"
+                    class="nameBox"
+                  >
+                    <div class="name">{{ account.UserName }}</div>
+                    <div
+                      class="loger"
+                      @click="toEdit(account.UserId)"
+                    />
+                  </el-col>
+                </el-row>
+
+                <el-row>
+                  <el-col :span="24">{{ account.group }}</el-col>
+                </el-row>
+
+                <el-row class="content">
+                  <el-col :span="12">登录次数：<span>{{ account.LoginCount }}</span></el-col>
+                  <el-col
+                    :span="12"
+                    class="flexLeft"
+                  >异常登录：<span>{{ account.ExceptionCount }}</span></el-col>
+                </el-row>
+                <el-row class="content">
+                  <el-col :span="24">权限项数：<span>{{ account.AuthCount }}</span></el-col>
+                </el-row>
+                <el-row class="content">
+                  <el-col :span="12">
+                    状态：<span
+                      v-if="account.Status == 1 || account.Status == 2"
+                      class="used"
+                    >启用</span>
+                    <span
+                      v-else-if="account.Status == 3"
+                      class="unUsed"
+                    >停用</span>
+                  </el-col>
+                  <el-col
+                    :span="12"
+                    class="flexLeft"
+                  >
+                    <el-switch
+                      v-model="account.Flag"
+                      :active-value="true"
+                      :inactive-value="false"
+                      active-color="#6F81BC"
+                      inactive-color="#CFD6E2"
+                      @change="isUsedChange(account.Flag, account.UserId)"
+                    />
+                  </el-col>
+                </el-row>
+              </div>
+            </div>
+          </el-col>
+        </el-row>
+        <p
+          v-if="loading"
+          class="center"
+        >加载中...</p>
+        <p
+          v-if="noMore"
+          class="center"
+        >没有更多数据了~</p>
+      </template>
+    </div>
+    <Dialog :flag="dialogVisible">
+      <div class="closeDialog">
+        <div class="title">删除账号</div>
+        <div class="content">是否确定要删除{{ deleteUserName }}？</div>
+        <div class="foot right t30">
+          <el-button
+            size="medium"
+            type="danger"
+            class="r24"
+            @click="del()"
+          >删除</el-button>
+
+          <el-button
+            size="medium"
+            @click="dialogVisible = false"
+          >取消</el-button>
+        </div>
+      </div>
+    </Dialog>
+  </div>
+</template>
+
+<script>
+import Search from '@/layout/components/Search'
+import Dialog from '@/layout/components/Dialog'
+import { GetAccountList, ChangeUserStatus, delAccount } from '@/api/Account'
+export default {
+  components: { Search, Dialog },
+  data() {
+    return {
+      dialogVisible: false,
+      accountArr: [],
+      deleteUserId: '',
+      deleteUserName: '',
+      UserId: '',
+      GroupId: '',
+      GroupUpid: '',
+      searchInfo: this.$route.query.keyWords, // 搜索内容
+      PageIndex: 1,
+      PageSize: 20,
+      pages: null,
+      loading: false
+    }
+  },
+  computed: {
+    noMore() {
+      return this.PageIndex >= this.pages
+    },
+    disabled() {
+      return this.loading || this.noMore
+    }
+  },
+  created() {
+    if (this.searchInfo === '') {
+      this.accountList()
+    } else {
+      console.log(this.searchInfo)
+      this.accountList()
+    }
+  },
+  methods: {
+    // 滚动加载
+    load() {
+      this.PageIndex += 1
+      this.accountList()
+    },
+    // 回到第一页
+    pageInit() {
+      this.PageIndex = 1
+      this.accountArr = []
+      this.accountList()
+    },
+    // 查询
+    getSearchData(val) {
+      this.searchInfo = val
+      this.pageInit()
+    },
+
+    // 清除查询
+    clearSearchData() {
+      this.searchInfo = ''
+      this.pageInit()
+    },
+    // 修改状态
+    async isUsedChange(Flag, UserId) {
+      const result = await ChangeUserStatus({
+        Flag: Flag,
+        UserId
+      })
+      if (result.code === 0) {
+        this.pageInit()
+        this.$message.success(result.message)
+      } else {
+        this.$message.error(result.$message)
+      }
+    },
+    deleteUser(user) {
+      this.dialogVisible = true
+      this.deleteUserId = user.UserId
+      this.deleteUserName = user.UserName
+    },
+    toEdit(userid) {
+      this.UserId = userid
+      this.$router.push({
+        path: '/account/accountEdit',
+        query: { userId: this.UserId }
+      })
+    },
+    addAccount() {
+      this.$router.push({
+        path: '/account/accountAdd'
+      })
+    },
+    // 获取列表
+    async accountList() {
+      try {
+        this.loading = true
+        const result = await GetAccountList({
+          QueryName: this.searchInfo,
+          PageIndex: this.PageIndex,
+          PageSize: this.PageSize
+        })
+        if (result.code === 0) {
+          this.loading = false
+          const newDatas = result.returnData.records
+          // console.log(newDatas)
+          this.pages = result.returnData.pages
+          newDatas.forEach(element => {
+            if (element.Status === 1) {
+              element['Flag'] = true
+            } else {
+              element['Flag'] = false
+            }
+            this.accountArr.push(element)
+          })
+        } else {
+          this.$message.error(result.message)
+        }
+      } catch (error) {
+        console.log('出错了', error)
+      }
+    },
+
+    // 删除接口
+    async del() {
+      const result = await delAccount({
+        UserId: this.deleteUserId
+      })
+      if (result.code === 0) {
+        this.dialogVisible = false
+        this.$message.success(result.message)
+        this.pageInit()
+      } else if (result.code === -1) {
+        this.$message.error('后端错误，稍后请重试')
+      } else {
+        this.$message.success(result.message)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.account-home {
+  padding: 0 64px;
+  .account-header {
+    margin: 32px 0;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    .btn-add {
+      width: 120px;
+      height: 48px;
+      background: #f5f7fa;
+      border: 1px solid #b4b7cb;
+      box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
+      border-radius: 6px;
+      font-size: 16px;
+      font-weight: bold;
+      color: #6f81bc;
+    }
+    .status {
+      align-items: center;
+      & > div {
+        margin-right: 28px;
+        .icon {
+          width: 16px;
+          height: 16px;
+          background: #6f81bc;
+          border-radius: 2px;
+          display: inline-block;
+          vertical-align: middle;
+          margin-right: 10px;
+          position: relative;
+          top: -2px;
+        }
+        &:last-child {
+          margin-right: 0;
+        }
+      }
+      .status2 {
+        .icon {
+          background: #f25555;
+        }
+      }
+      .status3 {
+        .icon {
+          background: #cfd6e2;
+        }
+      }
+    }
+  }
+  .content-box {
+    height: calc(100vh - 256px);
+    overflow-y: auto;
+    overflow-x: hidden;
+    @media only screen and (min-width: 1920px) {
+      .el-col-xl-4-8 {
+        width: 20%;
+      }
+    }
+    .account-box {
+      margin-bottom: 24px;
+      .account-box-wrap {
+        position: relative;
+        padding: 23px 32px;
+        background: #ffffff;
+        box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
+        border-radius: 16px;
+        overflow: hidden;
+      }
+      .headOffline {
+        width: 100%;
+        height: 4px;
+        background: #f25555;
+        box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
+        border-radius: 16px;
+        position: absolute;
+        left: 0;
+        top: 0;
+      }
+      .headOnline {
+        background: #6f81bc;
+        width: 100%;
+        height: 4px;
+        box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
+        border-radius: 16px;
+        position: absolute;
+        left: 0;
+        top: 0;
+      }
+      .headDisabled {
+        background: #cfd6e2;
+        width: 100%;
+        height: 4px;
+        box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
+        border-radius: 16px;
+        position: absolute;
+        left: 0;
+        top: 0;
+      }
+      .el-row {
+        margin: 8px 0;
+      }
+      .flexLeft {
+        display: flex;
+        justify-content: flex-end;
+        flex-direction: row;
+      }
+
+      .del {
+        position: absolute;
+        right: 24px;
+        top: 32px;
+        cursor: pointer;
+      }
+      .nameBox {
+        display: flex;
+        .name {
+          font-size: 18px;
+          font-weight: bold;
+          color: #303133;
+          width: 120px;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+        .loger {
+          width: 24px;
+          height: 24px;
+          background: url('../../../assets/status/ic_edit.png') no-repeat;
+          background-size: 100% 100%;
+          border: 1px solid #e4e7ec;
+          border-radius: 50%;
+          margin-left: 94px;
+          margin-top: -2px;
+          cursor: pointer;
+        }
+        .loger:hover {
+          background: url('../../../assets/status/ic_edit_hovar.png') no-repeat;
+          background-size: 100% 100%;
+        }
+      }
+
+      .content {
+        margin-top: 14px;
+      }
+      .used {
+        font-size: 16px;
+        font-weight: 400;
+        color: #6f81bc;
+      }
+      span {
+        font-size: 16px;
+        font-weight: 400;
+        color: #909399;
+      }
+    }
+  }
+}
+</style>

src/views/accountManagement/index.vue

@@ -1,431 +1,14 @@
-<template>
-  <div class="account-home">
-    <div class="account-header">
-      <div class="status flex-wrap">
-        <div class="status1"><span class="icon" />在线</div>
-        <div class="status2"><span class="icon" />离线</div>
-        <div class="status3"><span class="icon" />禁用</div>
-      </div>
-      <Search
-        :is-slot="true"
-        @getSearchData="getSearchData"
-        @clearSearchData="clearSearchData"
-      >
-        <el-button
-          class="addBtn"
-          @click="addAccount"
-        >新增账号</el-button>
-      </Search>
-    </div>
-    <div class="content-box scrollbar">
-      <template v-if="accountArr.length">
-        <el-row
-          v-infinite-scroll="load"
-          :infinite-scroll-disabled="disabled"
-          :infinite-scroll-distance="20"
-          :gutter="24"
-        >
-          <el-col
-            v-for="account in accountArr"
-            :key="account.UserId"
-            :xs="24"
-            :sm="12"
-            :md="8"
-            :lg="6"
-            :xl="{ span: '4-8' }"
-            class="account-box"
-          >
-            <div class="account-box-wrap">
-              <div :class="account.Status === 1 ? 'headOnline' : account.Status === 2 ? 'headOffline' : 'headDisabled'" />
-              <div
-                class="del"
-                @click="deleteUser(account)"
-              >
-                <i class="el-icon-close" />
-              </div>
-              <div>
-                <el-row>
-                  <el-col
-                    :span="24"
-                    class="nameBox"
-                  >
-                    <div class="name">{{ account.UserName }}</div>
-                    <div
-                      class="loger"
-                      @click="toEdit(account.UserId, account.GroupId)"
-                    />
-                  </el-col>
-                </el-row>
-
-                <el-row>
-                  <el-col :span="24">{{ account.group }}</el-col>
-                </el-row>
-
-                <el-row class="content">
-                  <el-col :span="12">登录次数：<span>{{ account.LoginCount }}</span></el-col>
-                  <el-col
-                    :span="12"
-                    class="flexLeft"
-                  >异常登录：<span>{{ account.ExceptionCount }}</span></el-col>
-                </el-row>
-                <el-row class="content">
-                  <el-col :span="24">权限项数：<span>{{ account.AuthCount }}</span></el-col>
-                </el-row>
-                <el-row class="content">
-                  <el-col :span="12">
-                    状态：<span
-                      v-if="account.Status == 1 || account.Status == 2"
-                      class="used"
-                    >启用</span>
-                    <span
-                      v-else-if="account.Status == 3"
-                      class="unUsed"
-                    >停用</span>
-                  </el-col>
-                  <el-col
-                    :span="12"
-                    class="flexLeft"
-                  >
-                    <el-switch
-                      v-model="account.Flag"
-                      :active-value="true"
-                      :inactive-value="false"
-                      active-color="#6F81BC"
-                      inactive-color="#CFD6E2"
-                      @change="isUsedChange(account.Flag, account.UserId)"
-                    />
-                  </el-col>
-                </el-row>
-              </div>
-            </div>
-          </el-col>
-        </el-row>
-        <p
-          v-if="loading"
-          class="center"
-        >加载中...</p>
-        <p
-          v-if="noMore"
-          class="center"
-        >没有更多数据了~</p>
-      </template>
-    </div>
-    <Dialog :flag="dialogVisible">
-      <div class="closeDialog">
-        <div class="title">删除账号</div>
-        <div class="content">是否确定要删除{{ deleteUserName }}？</div>
-        <div class="foot right t30">
-          <el-button
-            size="medium"
-            type="danger"
-            class="r24"
-            @click="del()"
-          >删除</el-button>
+<!--
+ * @Author: Badguy
+ * @Date: 2022-02-17 16:08:29
+ * @LastEditTime: 2022-02-17 16:10:26
+ * @LastEditors: your name
+ * @Description: 账号管理
+ * have a nice day!
+-->
 
-          <el-button
-            size="medium"
-            @click="dialogVisible = false"
-          >取消</el-button>
-        </div>
-      </div>
-    </Dialog>
+<template>
+  <div class="accountManagement">
+    <router-view />
   </div>
 </template>
-
-<script>
-import Search from '@/layout/components/Search'
-import Dialog from '@/layout/components/Dialog'
-import { GetAccountList, ChangeUserStatus, delAccount } from '@/api/Account'
-export default {
-  components: { Search, Dialog },
-  data() {
-    return {
-      dialogVisible: false,
-      accountArr: [],
-      deleteUserId: '',
-      deleteUserName: '',
-      UserId: '',
-      GroupId: '',
-      GroupUpid: '',
-      serachinfo: '', // 搜索内容
-      PageIndex: 1,
-      PageSize: 20,
-      pages: null,
-      loading: false
-    }
-  },
-  computed: {
-    noMore() {
-      return this.PageIndex >= this.pages
-    },
-    disabled() {
-      return this.loading || this.noMore
-    }
-  },
-  created() {
-    if (this.serachinfo === '') {
-      this.AccountList()
-    } else {
-      console.log(this.serachinfo)
-    }
-  },
-  methods: {
-    // 滚动加载
-    load() {
-      this.PageIndex += 1
-      this.AccountList()
-    },
-    // 回到第一页
-    pageInit() {
-      this.PageIndex = 1
-      this.AccountList()
-    },
-    // 查询
-    getSearchData(val) {
-      this.serachinfo = val
-      this.pageInit()
-    },
-
-    // 清除查询
-    clearSearchData() {
-      this.pageInit()
-    },
-    // 修改状态
-    async isUsedChange(Flag, UserId) {
-      const result = await ChangeUserStatus({
-        Flag: Flag,
-        UserId
-      })
-      if (result.code === 0) {
-        this.pageInit()
-        this.$message.success(result.message)
-      } else {
-        this.$message.error(result.$message)
-      }
-    },
-    deleteUser(user) {
-      this.dialogVisible = true
-      this.deleteUserId = user.UserId
-      this.deleteUserName = user.UserName
-    },
-    toEdit(userid, GroupIds) {
-      this.UserId = userid
-      this.$router.push({
-        path: 'accountEdit',
-        query: { userId: this.UserId }
-      })
-    },
-    addAccount() {
-      this.$router.push({
-        path: 'accountAdd',
-        query: { groupId: -1 }
-      })
-    },
-    // 获取列表
-    async AccountList() {
-      try {
-        this.loading = true
-        const result = await GetAccountList({
-          QueryName: this.serachinfo,
-          PageIndex: this.PageIndex,
-          PageSize: this.PageSize
-        })
-        if (result.code === 0) {
-          this.loading = false
-          const newDatas = result.returnData.records
-          // console.log(newDatas)
-          this.pages = result.returnData.pages
-          newDatas.forEach(element => {
-            if (element.Status === 1) {
-              element['Flag'] = true
-            } else {
-              element['Flag'] = false
-            }
-            this.accountArr.push(element)
-          })
-        } else {
-          this.$message.error(result.message)
-        }
-      } catch (error) {
-        console.log('出错了', error)
-      }
-    },
-
-    // 删除接口
-    async del() {
-      const result = await delAccount({
-        UserId: this.deleteUserId
-      })
-      if (result.code === 0) {
-        this.dialogVisible = false
-        this.$message.success(result.message)
-        this.pageInit()
-      } else if (result.code === -1) {
-        this.$message.error('后端错误，稍后请重试')
-      } else {
-        this.$message.success(result.message)
-      }
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.account-home {
-  padding: 0 64px;
-  .account-header {
-    margin: 32px 0;
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
-    .addBtn {
-      width: 120px;
-      height: 48px;
-      background: #f5f7fa;
-      border: 1px solid #b4b7cb;
-      box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
-      border-radius: 6px;
-      font-size: 16px;
-      font-weight: bold;
-      color: #6f81bc;
-    }
-    .status {
-      align-items: center;
-      & > div {
-        margin-right: 28px;
-        .icon {
-          width: 16px;
-          height: 16px;
-          background: #6f81bc;
-          border-radius: 2px;
-          display: inline-block;
-          vertical-align: middle;
-          margin-right: 10px;
-          position: relative;
-          top: -2px;
-        }
-        &:last-child {
-          margin-right: 0;
-        }
-      }
-      .status2 {
-        .icon {
-          background: #f25555;
-        }
-      }
-      .status3 {
-        .icon {
-          background: #cfd6e2;
-        }
-      }
-    }
-  }
-  .content-box {
-    height: calc(100vh - 256px);
-    overflow-y: auto;
-    overflow-x: hidden;
-    @media only screen and (min-width: 1920px) {
-      .el-col-xl-4-8 {
-        width: 20%;
-      }
-    }
-    .account-box {
-      margin-bottom: 24px;
-      .account-box-wrap {
-        position: relative;
-        padding: 23px 32px;
-        background: #ffffff;
-        box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
-        border-radius: 16px;
-        overflow: hidden;
-      }
-      .headOffline {
-        width: 100%;
-        height: 4px;
-        background: #f25555;
-        box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
-        border-radius: 16px;
-        position: absolute;
-        left: 0;
-        top: 0;
-      }
-      .headOnline {
-        background: #6f81bc;
-        width: 100%;
-        height: 4px;
-        box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
-        border-radius: 16px;
-        position: absolute;
-        left: 0;
-        top: 0;
-      }
-      .headDisabled {
-        background: #cfd6e2;
-        width: 100%;
-        height: 4px;
-        box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
-        border-radius: 16px;
-        position: absolute;
-        left: 0;
-        top: 0;
-      }
-      .el-row {
-        margin: 8px 0;
-      }
-      .flexLeft {
-        display: flex;
-        justify-content: flex-end;
-        flex-direction: row;
-      }
-
-      .del {
-        position: absolute;
-        right: 24px;
-        top: 32px;
-        cursor: pointer;
-      }
-      .nameBox {
-        display: flex;
-        .name {
-          font-size: 18px;
-          font-weight: bold;
-          color: #303133;
-          width: 120px;
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
-        }
-        .loger {
-          width: 24px;
-          height: 24px;
-          background: url('../../assets/status/ic_edit.png') no-repeat;
-          background-size: 100% 100%;
-          border: 1px solid #e4e7ec;
-          border-radius: 50%;
-          margin-left: 94px;
-          margin-top: -2px;
-          cursor: pointer;
-        }
-        .loger:hover {
-          background: url('../../assets/status/ic_edit_hovar.png') no-repeat;
-          background-size: 100% 100%;
-        }
-      }
-
-      .content {
-        margin-top: 14px;
-      }
-      .used {
-        font-size: 16px;
-        font-weight: 400;
-        color: #6f81bc;
-      }
-      span {
-        font-size: 16px;
-        font-weight: 400;
-        color: #909399;
-      }
-    }
-  }
-}
-</style>

src/views/accountManagement/mixins/treeData.js

@@ -1,85 +0,0 @@
-/*
- * @Author: your name
- * @Date: 2021-12-22 17:00:22
- * @LastEditTime: 2022-02-15 17:28:46
- * @LastEditors: your name
- * @Description: 获取权限树
- * @FilePath: \Foshan4A2.0\src\views\authorityManagement\minixs\treeData.js
- */
-import {
-  translateDataToTreeAll
-} from '@/utils/validate'
-import {
-  GetGroupTree
-} from '@/api/AccountGroup'
-
-export default {
-  data() {
-    return {
-      dataList: {
-        GroupId: -1,
-        GroupName: '系统权限组',
-        GroupUpid: -2,
-        UserCount: 0,
-        AuthCount: 0,
-        Status: 1,
-        QueryTarget: 0,
-        children: []
-      },
-      dataArr: []
-    }
-  },
-  created() {
-    // this.getGroupTree()
-  },
-  methods: {
-    async getGroupTree(name = '') {
-      try {
-        const result = await GetGroupTree({
-          'QueryName': name
-        })
-        if (result.code === 0 && result.returnData.length) {
-          result.returnData.forEach(item => {
-            item.flag = item.Status === 1 ? true : false
-          })
-          const obj = {
-            GroupId: -1,
-            GroupName: '系统权限组',
-            GroupUpid: -2,
-            UserCount: 0,
-            AuthCount: 0,
-            Status: 1,
-            QueryTarget: 0,
-            children: translateDataToTreeAll(result.returnData, 'GroupUpid', 'GroupId')
-          }
-          this.dataList = obj
-          this.dataArr = result.returnData
-          this.dataArr.push({
-            GroupId: -1,
-            GroupName: '系统权限组',
-            GroupUpid: -2,
-            UserCount: 0,
-            AuthCount: 0,
-            Status: 1,
-            QueryTarget: 0
-          })
-        } else {
-          const obj = {
-            GroupId: -1,
-            GroupName: '系统权限组',
-            GroupUpid: -2,
-            UserCount: 0,
-            AuthCount: 0,
-            Status: 1,
-            QueryTarget: 0,
-            children: []
-          }
-          this.dataList = obj
-          this.dataArr.push(obj)
-        }
-      } catch (error) {
-        console.log('出错了', error)
-      }
-    }
-  }
-}