添加账号管理、角色管理、权限管理

.eslintrc.js

@@ -172,7 +172,7 @@ module.exports = {
       'after': true
     }],
     'space-before-blocks': [2, 'always'],
-    'space-before-function-paren': [2, 'never'],
+    'space-before-function-paren': 0,
     'space-in-parens': [2, 'never'],
     'space-infix-ops': 2,
     'space-unary-ops': [2, {

src/router/index.js

@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2021-10-14 17:17:53
- * @LastEditTime: 2022-03-24 18:24:03
+ * @LastEditTime: 2022-04-25 16:08:49
  * @LastEditors: your name
  * @Description: In User Settings Edit
  * @FilePath: \Foshan4A\src\router\index.js
@@ -17,6 +17,7 @@ Vue.use(Router)
 import routesOne from './routes/routes-file-one'
 import routesTwo from './routes/routes-file-two'
 import routesThree from './routes/routes-file-three'
+import routesFileFour from './routes/routes-file-four'
 /**
  * Note: sub-menu only appear when route children.length >= 1
  * Detail see: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
@@ -70,7 +71,8 @@ routesPush(
   [
     ...routesOne,
     ...routesTwo,
-    ...routesThree
+    ...routesThree,
+    ...routesFileFour
   ],
   asyncRoutes
 )

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

@@ -0,0 +1,183 @@
+/*
+ * @Author: Badguy
+ * @Date: 2022-04-25 16:01:34
+ * @LastEditTime: 2022-04-25 16:06:24
+ * @LastEditors: your name
+ * @Description: 账号管理
+ * have a nice day!
+ */
+
+import Layout from '@/layout'
+
+// 权限管理
+const authorityRoutes = {
+  path: '/authority',
+  component: Layout,
+  meta: { roles: ['authority_menu'] },
+  children: [
+    {
+      path: '/authority',
+      component: () => import('@/views/authorityManagement/index'),
+      meta: {
+        title: '权限管理',
+        icon: 'authority',
+        imgstyle: 'ic_list_nav_permissions_default.png',
+        imgstyleup: 'ic_list_nav_permissions_check.png'
+      },
+      children: [
+        {
+          path: '/',
+          name: 'AuthorityHome',
+          component: {
+            render(c) {
+              return c('router-view')
+            }
+          },
+          redirect: '/',
+          meta: { title: '权限项管理', isPage: 'authority_page' },
+          children: [
+            {
+              path: '/',
+              component: () => import('@/views/authorityManagement/components/authorityHome')
+            },
+            {
+              path: 'appAdd',
+              name: 'AuthorityAppAdd',
+              component: () => import('@/views/authorityManagement/components/authorityAppAdd'),
+              meta: { title: '新增应用' }
+            },
+            {
+              path: 'appEdit',
+              name: 'AuthorityAppEdit',
+              component: () => import('@/views/authorityManagement/components/authorityAppEdit'),
+              meta: { title: '编辑应用' }
+            },
+            {
+              path: 'addPower',
+              name: 'AuthorityPowerAdd',
+              component: () => import('@/views/authorityManagement/components/authorityPowerAdd'),
+              meta: { title: '新增权限项' }
+            },
+            {
+              path: 'editPower',
+              name: 'AuthorityPowerEdit',
+              component: () => import('@/views/authorityManagement/components/authorityPowerEdit'),
+              meta: { title: '编辑权限项' }
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}
+
+// 角色管理
+const roleRoutes = {
+  path: '/role',
+  component: Layout,
+  meta: { roles: ['role_menu'] },
+  children: [
+    {
+      path: '/role',
+      component: () => import('@/views/authorityManagement/components/authorityRole'),
+      meta: {
+        title: '角色管理',
+        icon: 'role',
+        imgstyle: 'ic_list_nav_character_default.png',
+        imgstyleup: 'ic_list_nav_character_check.png'
+      },
+      children: [
+        {
+          path: '/',
+          name: 'AuthorityRoleHome',
+          component: {
+            render(c) {
+              return c('router-view')
+            }
+          },
+          redirect: '/',
+          meta: { title: '角色管理', isPage: 'role_page' },
+          children: [
+            {
+              path: '/',
+              component: () => import('@/views/authorityManagement/components/authorityRoleHome')
+            },
+            {
+              path: 'addRole',
+              name: 'AuthorityRoleAdd',
+              component: () => import('@/views/authorityManagement/components/authorityRoleAdd'),
+              meta: { title: '新增角色' }
+            },
+            {
+              path: 'editRole',
+              name: 'AuthorityRoleEdit',
+              component: () => import('@/views/authorityManagement/components/authorityRoleEdit'),
+              meta: { title: '编辑角色' }
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}
+
+// 账号管理
+const accountRoutes = {
+  path: '/account',
+  component: Layout,
+  meta: { roles: ['account_menu'] },
+  children: [
+    {
+      path: '/account',
+      name: 'accountManagement',
+      component: () => import('@/views/accountManagement'),
+      meta: {
+        title: '账号管理',
+        icon: 'account',
+        imgstyle: 'ic_list_nav_account_default.png',
+        imgstyleup: 'ic_list_nav_account_check.png'
+      },
+      children: [
+        {
+          path: '/account',
+          name: 'accountHome',
+          component: {
+            render(c) {
+              return c('router-view')
+            }
+          },
+          redirect: '/account',
+          meta: {
+            title: '账号管理',
+            roles: ['account_page']
+          },
+          children: [
+            {
+              path: '/account',
+              component: () => import('@/views/accountManagement/components/accountHome')
+            },
+            {
+              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 [authorityRoutes, roleRoutes, accountRoutes]

src/utils/validate.js

@@ -18,46 +18,55 @@ export function validUsername(str) {
   const valid_map = ['admin', 'editor']
   return valid_map.indexOf(str.trim()) >= 0
 }
-//  账号组树构造
+// 账号组树构造
 export function translateDataToTreeAll(data, parentKey, parentIDKey) {
-  let parent = data.filter((value) => Number(value[parentKey]) <= 0);// 父数据
-  let children = data.filter((value) => Number(value[parentKey]) > 0);// 子数据
-  //console.log('--parent', parent)
-  //console.log('--children', children)
-  let translator = (parent, children) => {
-    parent.forEach((parent) => {
-      parent.children = [];
-      children.forEach((current, index) => {
-        if (current[parentKey] === parent[parentIDKey]) {
-          const temp = JSON.parse(JSON.stringify(children));
-          temp.splice(index, 1);
-          translator([current], temp);
-          typeof parent.children !== "undefined"
-            ? parent.children.push(current)
-            : (parent.children = [current]);
+  const parent = data.filter(value => Number(value[parentKey]) <= 0) // 父数据
+  const children = data.filter(value => Number(value[parentKey]) > 0) // 子数据
+  // console.log('--parent', parent)
+  // console.log('--children', children)
+  const translator = (parent, children) => {
+    parent.forEach(parent => {
+      parent.children = []
+      // children.forEach((current, index) => {
+      //   if (current[parentKey] === parent[parentIDKey]) {
+      //     const temp = JSON.parse(JSON.stringify(children))
+      //     temp.splice(index, 1)
+      //     translator([current], temp)
+      //     typeof parent.children !== 'undefined' ? parent.children.push(current) : (parent.children = [current])
+      //   }
+      // })
+      for (let i = 0; i < children.length;) {
+        if (children[i][parentKey] === parent[parentIDKey]) {
+          const temp = children.splice(i, 1)
+          typeof parent.children !== 'undefined'
+            ? parent.children.push(...temp)
+            : (parent.children = temp)
+          translator(temp, children)
+        } else {
+          i++
         }
-      });
-    });
-  };
-  translator(parent, children);
-  return parent;
+      }
+    })
+  }
+  translator(parent, children)
+  return parent
 }
 
-//模糊查询
+// 模糊查询
 export function findarrays(ar, feature, v) {
-  var arr = [];
+  var arr = []
   ar.forEach(res => {
     console.log(res.feature)
-  });
+  })
   for (var i = 0; i < ar.length; i++) {
-    var atxt = ar[i][feature];
-    var btxt = v;
-    var type = 0;
+    var atxt = ar[i][feature]
+    var btxt = v
+    var type = 0
     if (atxt.match(btxt) == btxt) {
-      type = 1;
+      type = 1
     }
     if (type == 1) {
-      arr.push(ar[i]);
+      arr.push(ar[i])
     }
   }
   // var arr = [];
@@ -90,7 +99,7 @@ export function findarrays(ar, feature, v) {
   //     arr.push(ar[i]);
   //   }
   // }
-  return arr;
+  return arr
 }
 
 // 随机长度
@@ -98,7 +107,7 @@ function randomNum(start, end) {
   return Math.floor(Math.random() * (Number(end) - Number(start)) + start)
 }
 
-//字母随机
+// 字母随机
 function randomAlp(arr, count) {
   let shuffled = arr.slice(0),
     i = arr.length,
@@ -128,7 +137,7 @@ export function pwdProduce(minLen, maxLen, struc) {
   const alphabet = 'abcdefghijklmnopqrstuvwxyz'
   // 特殊字符
   const special = ['~', '!', '@', '#', '$', '%', '^', '&', '*', '_', '+', '.']
-  //数字
+  // 数字
   const numbers = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9']
   // 密码随机长度
   const pwdLen = randomNum(minLen, maxLen)
@@ -167,7 +176,7 @@ export function pwdProduce(minLen, maxLen, struc) {
       }
     }
     return dis
-    //缓存当前的密码规则
+    // 缓存当前的密码规则
     // pwdStruc.forEach((item, index) => {
     //   if (item == 1) {
     //     datas.push(index)
@@ -192,3 +201,35 @@ export function pwdProduce(minLen, maxLen, struc) {
     return new Error('密码规则转换失败')
   }
 }
+
+// 表单输入长度验证
+function getRealLength(string) {
+  let realLength = 0,
+    len = string.length,
+    charCode = -1
+  for (let i = 0; i < len; i++) {
+    charCode = string.charCodeAt(i)
+    if (charCode >= 0 && charCode <= 128) {
+      realLength += 1
+    } else {
+      realLength += 2
+    }
+  }
+  return realLength
+}
+
+export function lengthValidator(rule, value, callback) {
+  value = value ?? ''
+  const realLength = getRealLength(value)
+  if (realLength === 0) {
+    callback()
+  } else if (rule.min && realLength < rule.min) {
+    rule.message += `  ${realLength}/${rule.min}`
+    callback(new Error('长度小于最小值'))
+  } else if (rule.max && realLength > rule.max) {
+    rule.message += `  ${realLength}/${rule.max}`
+    callback(new Error('长度超出最大值'))
+  } else {
+    callback()
+  }
+}

src/views/accountManagement/components/accountEdit.vue

@@ -0,0 +1,720 @@
+<!--
+ * @Author: Badguy
+ * @Date: 2022-02-15 11:37:42
+ * @LastEditTime: 2022-04-25 12:02:43
+ * @LastEditors: your name
+ * @Description: 编辑账号
+ * have a nice day!
+-->
+
+<template>
+  <div class="account-edit">
+    <div class="account-edit-header">
+      <div class="title">
+        <div class="manageTitle">{{ pageTitle }}</div>
+        <div class="account-status">
+          是否启用
+          <el-radio-group v-model="accountForm.status">
+            <el-radio :label="1">是</el-radio>
+            <el-radio :label="0">否</el-radio>
+          </el-radio-group>
+        </div>
+        <div v-is="doesAccountExist ? ['userupdate_btn_save'] : []">
+          <!-- <el-button size="small" type="primary" class="btn-delete" @click="delate">删除</el-button> -->
+          <el-button
+            size="small"
+            type="primary"
+            class="btn-save"
+            @click="handleClickSave('accountForm')"
+          >保存</el-button>
+        </div>
+      </div>
+      <div class="title-content">
+        <el-form
+          ref="accountForm"
+          :inline="true"
+          :model="accountForm"
+          :rules="formRules"
+        >
+          <el-form-item
+            label="账号名称"
+            prop="name"
+          >
+            <el-input
+              v-model="accountForm.name"
+              maxlength="32"
+              placeholder="请输入名称"
+              size="small"
+            />
+          </el-form-item>
+          <el-form-item
+            label="登录密码"
+            prop="pwd"
+          >
+            <el-input
+              v-model="accountForm.pwd"
+              placeholder="*******"
+              size="small"
+              disabled
+            />
+          </el-form-item>
+          <el-form-item>
+            <el-button
+              v-is="doesAccountExist ? ['userupdate_btn_re_pwd'] : []"
+              size="small"
+              type="primary"
+              class="btn-reset-pwd"
+              @click="resetPwd"
+            >重置密码</el-button>
+          </el-form-item>
+          <el-form-item
+            label="描述"
+            prop="desc"
+          >
+            <el-input
+              v-model="accountForm.desc"
+              class="desc"
+              maxlength="128"
+              placeholder="描述内容···"
+              size="small"
+            />
+          </el-form-item>
+        </el-form>
+      </div>
+    </div>
+
+    <div class="account-edit-main">
+      <!-- 用户组和角色未开启 -->
+      <el-row
+        v-if="!openGroup && !openRole"
+        :gutter="24"
+      >
+        <el-col :span="8">
+          <div class="content-card">
+            <PermissionTree
+              title="权限树"
+              :query-type="queryType"
+              :checked-keys="permissionTreeChckedKeys"
+              @getTreeData="getPermissionTreeChecked"
+            />
+          </div>
+        </el-col>
+        <el-col :span="8">
+          <div class="content-card">
+            <RulesOfCompetency
+              title="权限规则"
+              margin-b="20px"
+              @getData="getRulesOfCompetency"
+            />
+          </div>
+        </el-col>
+        <el-col
+          v-is=" doesAccountExist ? ['account_edit_login_setting'] : ['account_add_login_setting']"
+          :span="8"
+        >
+          <div class="content-card">
+            <LoginPolicy
+              :checked-list="loginPolicyCheckedList"
+              @getCheckedList="getLoginPolicyChecked"
+            />
+          </div>
+        </el-col>
+      </el-row>
+      <!-- 角色和用户组都开启 -->
+      <el-row
+        v-if="openGroup && openRole"
+        :gutter="24"
+      >
+        <el-col :span="8">
+          <div class="content-card">
+            <AccountGroupTree
+              title="所属账号组"
+              nodekey="GroupId"
+              :default-props="accountGroupTreeProps"
+              :checked-keys="accountGroupTreeCheckedList"
+              @getTreeData="getAccountGroupChecked"
+            />
+          </div>
+        </el-col>
+        <el-col
+          v-is="doesAccountExist ? ['account_edit_role_list'] : ['account_add_role_list']"
+          :span="8"
+        >
+          <div class="content-card">
+            <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="doesAccountExist
+            ? ['account_edit_auth_list','account_edit_login_setting']
+            : ['account_add_auth_list','account_add_login_setting']"
+          :span="8"
+        >
+          <div
+            v-is="doesAccountExist ? ['account_edit_auth_list'] : ['account_add_auth_list']"
+            class="content-card"
+          >
+            <PermissionList
+              title="权限列表"
+              class="permission-list"
+              :role-list="checkedRoles"
+              :check="true"
+              @Competen="Competen"
+            />
+          </div>
+          <div
+            v-is="doesAccountExist ? ['account_edit_login_setting'] : ['account_add_login_setting']"
+            class="content-card"
+          >
+            <LoginPolicy
+              :checked-list="loginPolicyCheckedList"
+              @getCheckedList="getLoginPolicyChecked"
+            />
+          </div>
+        </el-col>
+      </el-row>
+      <!-- 只开启用户组 -->
+      <el-row
+        v-if="openGroup && !openRole"
+        :gutter="24"
+      >
+        <el-col :span="8">
+          <div class="content-card">
+            <AccountGroupTree
+              title="所属账号组"
+              nodekey="GroupId"
+              :default-props="accountGroupTreeProps"
+              :checked-keys="accountGroupTreeCheckedList"
+              @getTreeData="getAccountGroupChecked"
+            />
+          </div>
+        </el-col>
+        <el-col :span="8">
+          <div class="content-card">
+            <PermissionTree
+              title="权限树"
+              :query-type="queryType"
+              :query-ids="queryIds"
+              :checked-keys="permissionTreeChckedKeys"
+              @getTreeData="getPermissionTreeChecked"
+            />
+          </div>
+        </el-col>
+        <el-col :span="8">
+          <div class="content-card">
+            <RulesOfCompetency
+              title="权限规则"
+              margin-b="20px"
+              @getData="getRulesOfCompetency"
+            />
+          </div>
+          <div
+            v-is="doesAccountExist ? ['account_edit_login_setting'] : ['account_add_login_setting']"
+            class="content-card"
+          >
+            <LoginPolicy
+              :checked-list="loginPolicyCheckedList"
+              @getCheckedList="getLoginPolicyChecked"
+            />
+          </div>
+        </el-col>
+      </el-row>
+      <!-- 只开启角色 -->
+      <el-row
+        v-if="!openGroup && openRole"
+        :gutter="24"
+      >
+        <el-col
+          v-is="doesAccountExist ? ['account_edit_role_list'] : ['account_add_role_list']"
+          :span="8"
+        >
+          <div class="content-card">
+            <RoleList
+              title="角色列表"
+              :role-type="roleType"
+              :check-box-list="roleListCheckedList"
+              :number="8"
+              :active="true"
+              @checkChange="getRoleListChecked"
+              @checkClick="selectRole"
+              @roleListChange="roleListCheckedChange"
+            />
+          </div>
+        </el-col>
+        <el-col
+          v-is="doesAccountExist ? ['account_edit_auth_list'] : ['account_add_auth_list']"
+          :span="8"
+        >
+          <div class="content-card">
+            <PermissionList
+              title="权限列表"
+              :role-list="checkedRoles"
+              :check="true"
+              class="permission-list"
+              @Competen="Competen"
+            />
+          </div>
+        </el-col>
+        <el-col
+          v-is="doesAccountExist ? ['account_edit_login_setting'] : ['account_add_login_setting']"
+          :span="8"
+        >
+          <div class="content-card">
+            <LoginPolicy
+              :checked-list="loginPolicyCheckedList"
+              @getCheckedList="getLoginPolicyChecked"
+            />
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+    <!-- <Dialog :flag="dialogVisible">
+      <div class="closeDialog">
+        <div class="title">删除账号</div>
+        <div class="content">是否确定要删除该账号？</div>
+        <div class="foot right t30">
+          <el-button
+            size="medium"
+            type="danger"
+            class="r24"
+          >删除</el-button>
+          <el-button size="medium">取消</el-button>
+        </div>
+      </div>
+    </Dialog> -->
+  </div>
+</template>
+
+<script>
+import AccountGroupTree from '@/components/usergrouptree/index.vue'
+import PermissionTree from '@/components/permissiontree/index.vue'
+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 { RoleAuths } from '@/api/apiAuthority'
+import { getAccountDetails, editAccount, addAccount } from '@/api/Account.js'
+import { pwdProduce } from '@/utils/validate'
+import { mapGetters } from 'vuex'
+
+export default {
+  components: {
+    AccountGroupTree,
+    PermissionTree,
+    RulesOfCompetency,
+    LoginPolicy,
+    RoleList,
+    PermissionList
+    // Dialog
+  },
+  data() {
+    return {
+      doesAccountExist: this.$route.meta.doesAccountExist, // 控制账号新增/编辑
+      userId: '',
+      openRole: 0,
+      openGroup: 0,
+      pwdStruc: '',
+      pwdLengthBegin: 0,
+      pwdLengthEnd: 0,
+      permissionTreeChckedKeys: [], // 权限树初始勾选项
+      permissionTreeChckedTemp: [], // 权限树当前勾选项
+      rulesOfCompetency: null, // 当前编辑的权限规则
+      loginPolicyCheckedList: [], // 登录策略初始勾选项
+      loginPolicyCheckedTemp: [], // 登录策略当前勾选项
+      accountGroupTreeCheckedList: [], // 账号组树初始勾选项
+      accountGroupTreeCheckedTemp: [], // 账号组树当前勾选项
+      roleListCheckedList: [], // 角色列表初始勾选项
+      roleListCheckedTemp: [], // 角色列表当前勾选项
+      roleType: '',
+      queryType: '',
+      checkedRoles: [],
+      currentSelectedRoleId: 0,
+      groupIds: [],
+      queryIds: [],
+      // dialogVisible: false,
+      formRules: {
+        name: [
+          { required: true, message: '请输入账号名称', trigger: 'blur' },
+          { min: 1, max: 32, message: '长度在 1到 32 个字符', trigger: 'blur' }
+        ],
+        desc: [{ min: 1, max: 128, message: '长度最多128个字符', trigger: 'blur' }]
+      },
+      accountForm: {
+        name: null,
+        pwd: null,
+        desc: null,
+        status: 0
+      },
+      accountGroupTreeProps: {
+        children: 'children',
+        label: 'GroupName'
+      }
+    }
+  },
+  computed: {
+    ...mapGetters(['systemSet']),
+    pageTitle() {
+      return this.doesAccountExist ? '编辑账号' : '新增账号'
+    }
+  },
+  created() {
+    // 获取系统配置
+    let obj
+    if (typeof this.systemSet === 'string') {
+      obj = JSON.parse(this.systemSet)
+    } else {
+      obj = this.systemSet
+    }
+    // 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
+  },
+  mounted() {
+    if (this.doesAccountExist) {
+      this.userId = this.$route.query.userId
+      this.getAccountInfo()
+    } else {
+      this.resetPwd()
+      this.roleType = 'onlyRole'
+      this.queryType = 'all'
+    }
+  },
+  methods: {
+    // 获取当前账号信息
+    async getAccountInfo() {
+      try {
+        const res = await getAccountDetails({
+          UserId: this.userId
+        })
+        if (res.code === 0) {
+          // console.log(res.returnData)
+          const { UserDesc, UserName, GroupList, TacList, AuthList, RoleList, Status } = res.returnData
+          this.accountForm.name = UserName
+          this.accountForm.desc = UserDesc
+          this.accountForm.status = Status ?? 1
+
+          AuthList &&
+            AuthList.length &&
+            AuthList.forEach(auth => {
+              this.permissionTreeChckedKeys.push(auth.AuthId)
+              this.permissionTreeChckedTemp.push(auth)
+            })
+          if (GroupList && GroupList.length && GroupList[0] !== -1) {
+            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'
+            this.accountGroupTreeCheckedTemp.push(-1)
+          }
+
+          RoleList &&
+            RoleList.length &&
+            RoleList.forEach(role => {
+              role.IsSelected && this.roleListCheckedTemp.push(role)
+            })
+          TacList &&
+            TacList &&
+            TacList.forEach(tac => {
+              tac.IsSelected && this.loginPolicyCheckedList.push(tac)
+              tac.IsSelected && this.loginPolicyCheckedTemp.push(tac)
+            })
+        } else {
+          this.$message.error(res.message)
+        }
+      } catch (error) {
+        console.log('出错了', error)
+      }
+    },
+    // 随机生成密码
+    resetPwd() {
+      this.accountForm.pwd = pwdProduce(this.pwdLengthBegin, this.pwdLengthEnd, this.pwdStruc)
+    },
+    // 获取当前权限树勾选项
+    getPermissionTreeChecked(arr) {
+      this.permissionTreeChckedTemp = arr.map(auth => auth.AuthList)
+    },
+    // 获取当前编辑的权限规则
+    getRulesOfCompetency(obj) {
+      this.rulesOfCompetency = obj
+    },
+    // 获取当前勾选的登录策略
+    getLoginPolicyChecked(arr) {
+      this.loginPolicyCheckedTemp = arr
+    },
+    // 获取当前勾选的账号组
+    getAccountGroupChecked(arr) {
+      if (arr && arr.length && arr[0] !== -1) {
+        const GroupIds = arr.map(item => item.GroupId)
+        this.accountGroupTreeCheckedTemp = GroupIds
+        this.roleType = 'roleByUpId'
+        this.groupIds = GroupIds
+        this.queryType = 'group'
+        this.queryIds = GroupIds
+      } else {
+        this.accountGroupTreeCheckedTemp = [-1]
+        this.roleType = 'onlyRole'
+        this.queryType = 'all'
+      }
+    },
+    // 获取当前勾选的角色列表
+    getRoleListChecked(arr) {
+      this.roleListCheckedTemp = arr
+    },
+    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) {
+      if (this.currentSelectedRoleId === data.RoleId) return
+      try {
+        const params = {
+          RoleId: data.RoleId
+        }
+        const result = await RoleAuths(params)
+        if (result.code === 0) {
+          this.checkedRoles = result.returnData
+          this.currentSelectedRoleId = data.RoleId
+        } else {
+          this.$message.error(result.message)
+        }
+      } catch (error) {
+        console.log('出错了', error)
+      }
+    },
+    // 修改权限规则
+    Competen(data) {
+      console.log(data)
+    },
+    // 账号编辑保存
+    handleClickSave(formName) {
+      this.$refs[formName].validate(valid => {
+        if (valid) {
+          this.handleSaveEdit()
+        } else {
+          console.log('error submit!!')
+          return false
+        }
+      })
+    },
+    handleSaveEdit() {
+      const params = {
+        AuthList: this.permissionTreeChckedTemp,
+        GroupList: this.accountGroupTreeCheckedTemp.map(groupId => ({ GroupId: groupId })),
+        RoleList: this.roleListCheckedTemp,
+        TacList: this.loginPolicyCheckedTemp,
+        UserDesc: this.accountForm.desc,
+        UserName: this.accountForm.name,
+        UserPwd: this.accountForm.pwd
+      }
+      if (this.doesAccountExist) {
+        this.saveEditAccount({
+          ...params,
+          UserId: this.userId,
+          Status: this.accountForm.status
+        })
+      } else {
+        this.saveAddAccount(params)
+      }
+    },
+    // 编辑账号
+    async saveEditAccount(params) {
+      try {
+        const res = await editAccount(params)
+        if (res.code === 0) {
+          this.$message.success(res.message)
+          setTimeout(() => {
+            this.$store.dispatch('tagsView/delView', this.$route)
+            this.$router.push('/account')
+          }, 1000)
+        } 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(() => {
+            this.$store.dispatch('tagsView/delView', this.$route)
+            this.$router.push('/account')
+          }, 1000)
+        } else {
+          this.$message.error(res.message)
+        }
+      } catch (error) {
+        console.log('出错了', error)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.account-edit {
+  padding: 23px 24px;
+  .account-edit-header {
+    box-sizing: border-box;
+    width: 100%;
+    margin-bottom: 24px;
+    border-radius: 4px;
+    padding: 24px 32px 32px 24px;
+    background-color: #fff;
+    .title {
+      display: flex;
+      justify-content: space-between;
+      flex-direction: row;
+      position: relative;
+      .manageTitle {
+        line-height: 30px;
+      }
+      .account-status {
+        flex: 1;
+        line-height: 32px;
+        font-family: Microsoft YaHei;
+        color: #303133;
+        ::v-deep .el-radio-group {
+          margin-left: 16px;
+          .el-radio__label {
+            font-family: Microsoft YaHei;
+            color: #303133;
+          }
+          .el-radio__inner {
+            background: #fff;
+            &::after {
+              width: 8px;
+              height: 8px;
+              background-color: #2d67e3;
+            }
+          }
+        }
+      }
+      .title-left {
+        font-size: 24px;
+        font-weight: bold;
+        color: #303133;
+      }
+      .btn-save {
+        width: 64px;
+        height: 32px;
+        border: none;
+        font-weight: 400;
+        font-size: 14px;
+      }
+      .btn-delete {
+        width: 64px;
+        height: 32px;
+        background: #f56c6c;
+        border: none;
+        margin-right: 24px;
+      }
+    }
+    .title-content {
+      width: 100%;
+      padding-top: 24px;
+      box-sizing: border-box;
+      .btn-reset-pwd {
+        width: 81px;
+        height: 32px;
+        padding: 0;
+        border: none;
+        text-align: center;
+        font-weight: 400;
+        border-radius: 2px;
+        font-size: 14px;
+      }
+      ::v-deep .el-form {
+        height: 32px;
+        display: flex;
+        .el-form-item {
+          margin-bottom: 0;
+          vertical-align: middle;
+          &:nth-child(1) {
+            margin-right: 79px;
+          }
+          &:nth-child(2) {
+            margin-right: 16px;
+          }
+          &:nth-child(3) {
+            margin-right: 80px;
+          }
+          &:nth-last-child(1) {
+            margin-right: 0;
+            flex: 1;
+            display: flex;
+            .el-form-item__content {
+              flex: 1;
+            }
+          }
+          .el-form-item__label {
+            padding-right: 16px;
+            height: 32px;
+            line-height: 32px;
+          }
+          .el-form-item__content {
+            height: 32px;
+            line-height: 32px;
+          }
+        }
+        .el-input__inner {
+          height: 32px;
+          line-height: 32px;
+          min-width: 240px;
+          background: #ffffff;
+          border: 1px solid #d2d6df;
+          border-radius: 2px;
+        }
+      }
+    }
+  }
+  .account-edit-main {
+    box-sizing: border-box;
+    ::v-deep .el-empty {
+      padding: 0;
+    }
+    .content-card {
+      width: 100%;
+      height: calc(100vh - 294px);
+      min-height: 300px;
+      max-height: 786px;
+      overflow: hidden;
+    }
+    .img-onlyRead {
+      pointer-events: none;
+    }
+    .last {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+    }
+  }
+}
+</style>

src/views/accountManagement/components/accountHome.vue

@@ -0,0 +1,457 @@
+<template>
+  <div class="account-home">
+    <div class="account-header">
+      <div class="status flex-wrap">
+        <div class="manageTitle">账号管理</div>
+        <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"
+        :is-title="false"
+        @getSearchData="getSearchData"
+        @clearSearchData="clearSearchData"
+      >
+        <el-button
+          v-is="['userlist_btn_add']"
+          class="btnAdd"
+          @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="4"
+            class="account-box"
+          >
+            <div class="account-box-wrap">
+              <div :class="account.Status === 1 ? 'headOnline' : account.Status === 2 ? 'headOffline' : 'headDisabled'" />
+              <div>
+                <div class="nameBox flex">
+                  <div class="flex-wrap">
+                    <div class="name">{{ account.UserName }}</div>
+                    <div
+                      v-is="['userlist_btn_update']"
+                      class="loger"
+                      @click="toEdit(account.UserId)"
+                    />
+                  </div>
+                  <div
+                    v-is="['userlist_btn_del']"
+                    class="del"
+                    @click="deleteUser(account)"
+                  >
+                    <i class="el-icon-close" />
+                  </div>
+                </div>
+
+                <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
+                    v-is="['userlist_btn_status_change']"
+                    :span="12"
+                    class="flexLeft"
+                  >
+                    <el-switch
+                      v-model="account.Flag"
+                      :active-value="true"
+                      :inactive-value="false"
+                      active-color="#2D67E3"
+                      inactive-color="#CFD6E2"
+                      @change="userActiveToggle(account)"
+                    />
+                  </el-col>
+                </el-row>
+              </div>
+            </div>
+          </el-col>
+        </el-row>
+        <template v-if="pages > 1">
+          <p
+            v-if="loading"
+            class="center"
+          >加载中...</p>
+          <p
+            v-if="noMore"
+            class="center"
+          >没有更多数据了~</p>
+        </template>
+      </template>
+    </div>
+    <Dialog :flag="dialogVisible">
+      <div class="del-dialog">
+        <div class="title del-title">删除账号</div>
+        <div class="content del-content"><i class="el-icon-error error r10" />你确定要删除<span class="error l10">{{ deleteUserName }}</span>？</div>
+        <div class="foot Delfoot 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: '', // 搜索内容
+      PageIndex: 1,
+      PageSize: 20,
+      pages: null,
+      loading: false
+    }
+  },
+  computed: {
+    noMore() {
+      return this.PageIndex >= this.pages
+    },
+    disabled() {
+      return this.loading || this.noMore
+    }
+  },
+  watch: {
+    searchInfo(val) {
+      val.length === 0 && this.pageInit()
+    }
+  },
+  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 = ''
+    },
+    // 修改状态
+    async userActiveToggle({ Flag, Status, UserId }) {
+      Status = Flag ? 2 : 3
+      try {
+        const result = await ChangeUserStatus({
+          Flag,
+          Status,
+          UserId
+        })
+        if (result.code === 0) {
+          this.accountArr.forEach(account => {
+            if (account.UserId === UserId) {
+              account.Status = Status
+            }
+          })
+          this.$message.success(result.message)
+        } else {
+          this.$message.error(result.$message)
+        }
+      } catch (error) {
+        console.log('出错了', error)
+      }
+    },
+    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[0])
+          this.pages = result.returnData.pages
+          newDatas.forEach(element => {
+            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: 16px 32px 32px 32px;
+  .account-header {
+    margin-bottom: 30px;
+    line-height: 32px;
+    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;
+      .icon {
+        width: 14px;
+        height: 14px;
+        background: #2d67e3;
+        border-radius: 2px;
+        display: inline-block;
+        vertical-align: middle;
+        margin-right: 10px;
+        position: relative;
+        top: -2px;
+      }
+      &:last-child {
+        margin-right: 0;
+      }
+      .status2 {
+        margin: 0 28px;
+        .icon {
+          background: #eb2f3b;
+        }
+      }
+      .status3 {
+        .icon {
+          background: #afb4bf;
+        }
+      }
+    }
+  }
+  .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: 24px;
+        background: #ffffff;
+        box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.1);
+        border-radius: 4px;
+        overflow: hidden;
+      }
+      .headOffline {
+        width: 100%;
+        height: 4px;
+        background: #f25555;
+        box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
+        border-radius: 4px;
+        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: 4px;
+        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: 4px;
+        position: absolute;
+        left: 0;
+        top: 0;
+      }
+      .el-row {
+        margin: 8px 0;
+      }
+      .flexLeft {
+        display: flex;
+        justify-content: flex-end;
+        flex-direction: row;
+      }
+
+      .del {
+        cursor: pointer;
+        i {
+          font-size: 14px;
+          font-weight: 600;
+          color: #606266;
+        }
+      }
+      .nameBox {
+        display: flex;
+        .name {
+          font-size: 16px;
+          font-weight: bold;
+          color: #303133;
+          max-width: 120px;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+        .loger {
+          width: 14px;
+          height: 14px;
+          margin-left: 24px;
+          background: url('../../../assets/status/ic_edit_default.png') no-repeat;
+          background-size: 100% 100%;
+          cursor: pointer;
+        }
+        .loger:hover {
+          background: url('../../../assets/status/ic_edit_hovar.png') no-repeat;
+          background-size: 100% 100%;
+        }
+      }
+
+      .content {
+        margin-top: 14px;
+        font-size: 14px;
+      }
+      .used {
+        font-size: 14px;
+        font-weight: 400;
+        color: #2d67e3;
+      }
+      span {
+        font-size: 16px;
+        font-weight: 400;
+        color: #909399;
+      }
+    }
+  }
+  .del-dialog {
+    .del-content {
+      font-size: 16px;
+      font-family: Microsoft YaHei;
+      font-weight: 400;
+      color: #101611;
+      .el-icon-error {
+        vertical-align: sub;
+        font-size: 26px;
+      }
+    }
+  }
+}
+</style>

src/views/accountManagement/index.vue

@@ -0,0 +1,14 @@
+<!--
+ * @Author: Badguy
+ * @Date: 2022-02-17 16:08:29
+ * @LastEditTime: 2022-02-21 10:58:55
+ * @LastEditors: your name
+ * @Description: 账号管理
+ * have a nice day!
+-->
+
+<template>
+  <div class="accountManagement">
+    <router-view />
+  </div>
+</template>

src/views/authorityManagement/components/authorityAppAdd.vue

@@ -0,0 +1,209 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-11-29 09:18:04
+ * @LastEditTime: 2022-02-28 10:52:56
+ * @LastEditors: Please set LastEditors
+ * @Description: 新增/编辑应用
+ * @FilePath: \Foshan4A2.0\src\views\authorityManagement\components\addApp.vue
+-->
+<template>
+  <div class="addApp flex-wrap">
+    <!--新增应用-->
+    <div class="addApp-form r24">
+      <div class="addApp-form-title flex">
+        <div class="manageTitle">新增应用</div>
+        <div class="btn">
+          <el-button size="small" @click="onSubmit('form')" type="primary">保存</el-button>
+        </div>
+      </div>
+      <div class="addApp-form-content dialog-public-background">
+        <el-form ref="form" class="form" :rules="rules" :model="form">
+          <el-form-item prop="name" label="应用名称">
+            <el-input placeholder="请输入应用名称" maxlength="32" v-model="form.name"></el-input>
+          </el-form-item>
+          <el-form-item class="url" prop="url" label="应用地址">
+            <el-input placeholder="请输入应用地址" maxlength="200" v-model="form.url"></el-input>
+          </el-form-item>
+          <el-form-item class="content" prop="content" label="描述">
+            <el-input type="textarea" maxlength="200" rows="3" placeholder="请输入描述" v-model="form.content"></el-input>
+          </el-form-item>
+        </el-form>
+      </div>
+    </div>
+    <!--上传logo-->
+    <div class="addApp-upload">
+      <div class="flex">
+        <div class="upload">
+          <div class="title">上传Logo</div>
+          <el-upload action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
+            <i class="el-icon-plus"></i>
+          </el-upload>
+        </div>
+        <div class="preview">
+          <div class="title">预览</div>
+          <div class="box"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { SaveApp } from "@/api/apiAuthority";
+export default {
+  name: "Addapp",
+  data () {
+    return {
+      form: {
+        //应用表单
+        name: "",
+        id: "",
+        app: "",
+        url: "",
+        content: "",
+      },
+      rules: {
+        //表单验证
+        name: [{ required: true, message: "请输入应用名称", trigger: "blur" }],
+        content: [{ required: true, message: "请输入描述", trigger: "blur" }],
+      },
+      radio: "1",
+      type: null, //参数类型
+      dialogImageUrl: "",
+      dialogVisible: false,
+    };
+  },
+  methods: {
+    handleRemove (file, fileList) {
+      console.log(file, fileList);
+    },
+    handlePictureCardPreview (file) {
+      this.dialogImageUrl = file.url;
+      this.dialogVisible = true;
+    },
+    // 新增应用
+    async saveApp () {
+      try {
+        const res = await SaveApp({
+          AppName: this.form.name,
+          AppDesc: this.form.content,
+          AppUrl: this.form.url,
+        });
+        if (res.code === 0) {
+          this.$message.success(res.message);
+          this.$store.dispatch("tagsView/delView", this.$route);
+          this.$router.push("/authority");
+        } else {
+          this.$message.error(res.message);
+        }
+      } catch (error) {
+        console.log("出错了", error);
+      }
+    },
+    /**
+     * @description: 提交
+     * @param {*}
+     * @return {*}
+     */
+    onSubmit (formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          this.saveApp();
+        } else {
+          return false;
+        }
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.addApp {
+  padding: 24px;
+  .addApp-form {
+    flex: 1;
+    background: #ffffff;
+    border-radius: 4px;
+    padding: 30px 68px 32px 24px;
+    .title {
+      font-size: 24px;
+      font-family: Microsoft YaHei;
+      font-weight: bold;
+      color: #303133;
+      .isqy {
+        span {
+          font-weight: 400;
+          font-size: 14px;
+          margin: 0 28px 0 42px;
+        }
+      }
+    }
+    .addApp-form-title {
+      line-height: 32px;
+    }
+    .addApp-form-content {
+      margin-top: 40px;
+      ::v-deep .form {
+        .el-form-item {
+          display: flex;
+        }
+        .el-input__inner {
+          height: 32px;
+          line-height: 32px;
+        }
+        .url {
+          margin-left: 10px;
+          .el-form-item__content {
+            width: calc(100% - 70px);
+          }
+        }
+        .content {
+          .el-form-item__content {
+            flex: 1;
+          }
+          .el-form-item__label {
+            margin-left: 10px;
+          }
+        }
+        textarea {
+          resize: none;
+        }
+      }
+    }
+  }
+  .addApp-upload {
+    width: 425px;
+    background: #ffffff;
+    border-radius: 4px;
+    padding: 32px 32px 40px 32px;
+    .title {
+      font-size: 24px;
+      font-family: Microsoft YaHei;
+      font-weight: bold;
+      color: #303133;
+      margin-bottom: 22px;
+    }
+    ::v-deep .el-upload--picture-card {
+      height: 160px;
+      line-height: 160px;
+      width: 160px;
+      background: #f5f7fa;
+      border: 1px dashed #2d67e3;
+      border-radius: 4px;
+      .el-icon-plus {
+        font-size: 51px;
+        color: #2d67e3;
+      }
+    }
+    .preview {
+      .box {
+        width: 160px;
+        height: 160px;
+        background: #3b3c3d;
+        border-radius: 4px;
+      }
+    }
+  }
+}
+</style>

src/views/authorityManagement/components/authorityAppEdit.vue

@@ -0,0 +1,281 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-11-29 09:18:04
+ * @LastEditTime: 2022-02-28 10:46:33
+ * @LastEditors: Please set LastEditors
+ * @Description: 新增/编辑应用
+ * @FilePath: \Foshan4A2.0\src\views\authorityManagement\components\addApp.vue
+-->
+<template>
+  <div class="addApp flex-wrap">
+    <!--新增应用-->
+    <div class="addApp-form r24">
+      <div class="addApp-form-title flex">
+        <div class="manageTitle">
+          编辑应用
+          <!-- <span class="isqy">
+            <span>是否启用</span>
+            <el-radio-group v-model="radio">
+              <el-radio :label="1">是</el-radio>
+              <el-radio :label="0">否</el-radio>
+            </el-radio-group>
+          </span> -->
+        </div>
+        <div class="btn">
+          <!-- <el-button @click="deleteApp" class="r24" type="danger">删除</el-button> -->
+          <el-button size="small" @click="editApp" type="primary">保存</el-button>
+        </div>
+      </div>
+      <div class="addApp-form-content dialog-public-background">
+        <el-form ref="form" class="form" :rules="rules" :model="form">
+          <div class="flex">
+            <el-form-item prop="name" label="应用名称">
+              <el-input placeholder="请输入应用名称" maxlength="32" v-model="form.name"></el-input>
+            </el-form-item>
+            <el-form-item label="APPID">
+              <el-input placeholder="请输入APPID" disabled v-model="form.id"></el-input>
+            </el-form-item>
+            <el-form-item label="APPSECRET">
+              <el-input placeholder="请输入APPSECRET" disabled v-model="form.app"></el-input>
+            </el-form-item>
+          </div>
+          <el-form-item class="url" prop="url" label="应用地址">
+            <el-input placeholder="请输入应用地址" maxlength="200" v-model="form.url"></el-input>
+          </el-form-item>
+          <el-form-item prop="content" class="content" label="描述">
+            <el-input type="textarea" maxlength="200" rows="3" placeholder="请输入描述" v-model="form.content"></el-input>
+          </el-form-item>
+        </el-form>
+      </div>
+    </div>
+    <!--上传logo-->
+    <div class="addApp-upload">
+      <div class="flex">
+        <div class="upload">
+          <div class="title">上传Logo</div>
+          <el-upload action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
+            <i class="el-icon-plus"></i>
+          </el-upload>
+        </div>
+        <div class="preview">
+          <div class="title">预览</div>
+          <div class="box"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {
+  GetAppDetails,
+  EditApp,
+  UpdateAppStatus,
+  DeleteApp,
+} from "@/api/apiAuthority";
+export default {
+  name: "Addapp",
+  data () {
+    return {
+      form: {
+        //应用表单
+        name: "",
+        id: "",
+        app: "",
+        url: "",
+        content: "",
+      },
+      rules: {
+        //表单验证
+        name: [{ required: true, message: "请输入应用名称", trigger: "blur" }],
+        content: [{ required: true, message: "请输入描述", trigger: "blur" }],
+      },
+      radio: 1,
+      AppId: null,
+      type: null, //参数类型
+      dialogImageUrl: "",
+      dialogVisible: false,
+    };
+  },
+  created () {
+    const { AuthId, Status } = this.$route.query;
+    this.radio = Status;
+    this.AppId = AuthId;
+    this.getAppDetails(AuthId);
+  },
+  methods: {
+    handleRemove (file, fileList) {
+      console.log(file, fileList);
+    },
+    handlePictureCardPreview (file) {
+      this.dialogImageUrl = file.url;
+      this.dialogVisible = true;
+    },
+    //获取应用详情
+    async getAppDetails (id) {
+      try {
+        const res = await GetAppDetails({
+          AppId: id,
+        });
+        if (res.code === 0) {
+          const { AppName, AppShowId, AppShowSecret, AppDesc, AppUrl } =
+            res.returnData;
+          this.form.name = AppName;
+          this.form.id = AppShowId;
+          this.form.app = AppShowSecret;
+          this.form.content = AppDesc;
+          this.form.url = AppUrl;
+        } else {
+          this.$message.error(res.message);
+        }
+      } catch (error) {
+        console.log("出错了", error);
+      }
+    },
+    //应用状态变更
+    async handleChange (val) {
+      try {
+        const res = await UpdateAppStatus({
+          AppId: this.AppId,
+          Status: val,
+        });
+        if (res.code === 0) {
+          this.$message.success(res.message);
+        } else {
+          this.$message.error(res.message);
+        }
+      } catch (error) {
+        console.log("出错了", error);
+      }
+    },
+    //应用状态变更
+    async editApp () {
+      try {
+        const res = await EditApp({
+          AppId: this.AppId,
+          AppDesc: this.form.content,
+          AppName: this.form.name,
+          AppUrl: this.form.url,
+        });
+        if (res.code === 0) {
+          this.$message.success(res.message);
+          this.$store.dispatch("tagsView/delView", this.$route);
+          this.$router.push("/authority");
+        } else {
+          this.$message.error(res.message);
+        }
+      } catch (error) {
+        console.log("出错了", error);
+      }
+    },
+    //应用删除
+    async deleteApp () {
+      try {
+        const res = await DeleteApp({
+          AppId: this.AppId,
+        });
+        if (res.code === 0) {
+          this.$message.success(res.message);
+          setTimeout(() => {
+            this.$router.push("/authority");
+          }, 2000);
+        } else {
+          this.$message.error(res.message);
+        }
+      } catch (error) {
+        console.log("出错了", error);
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.addApp {
+  padding: 24px;
+  .addApp-form {
+    flex: 1;
+    background: #ffffff;
+    border-radius: 4px;
+    padding: 30px 68px 32px 24px;
+    .title {
+      font-size: 24px;
+      font-family: Microsoft YaHei;
+      font-weight: bold;
+      color: #303133;
+      .isqy {
+        span {
+          font-weight: 400;
+          font-size: 14px;
+          margin: 0 28px 0 42px;
+        }
+      }
+    }
+    .addApp-form-title {
+      line-height: 32px;
+    }
+    .addApp-form-content {
+      margin-top: 40px;
+      ::v-deep .form {
+        .el-form-item {
+          display: flex;
+        }
+        .el-input__inner {
+          height: 32px;
+          line-height: 32px;
+        }
+        .url {
+          margin-left: 10px;
+          .el-form-item__content {
+            width: calc(100% - 70px);
+          }
+        }
+        .content {
+          .el-form-item__content {
+            flex: 1;
+          }
+          .el-form-item__label {
+            margin-left: 10px;
+          }
+        }
+        textarea {
+          resize: none;
+        }
+      }
+    }
+  }
+  .addApp-upload {
+    width: 425px;
+    background: #ffffff;
+    border-radius: 4px;
+    padding: 32px 32px 40px 32px;
+    .title {
+      font-size: 24px;
+      font-family: Microsoft YaHei;
+      font-weight: bold;
+      color: #303133;
+      margin-bottom: 22px;
+    }
+    ::v-deep .el-upload--picture-card {
+      height: 160px;
+      line-height: 160px;
+      width: 160px;
+      background: #f5f7fa;
+      border: 1px dashed #2d67e3;
+      border-radius: 4px;
+      .el-icon-plus {
+        font-size: 51px;
+        color: #2d67e3;
+      }
+    }
+    .preview {
+      .box {
+        width: 160px;
+        height: 160px;
+        background: #3b3c3d;
+        border-radius: 4px;
+      }
+    }
+  }
+}
+</style>

src/views/authorityManagement/components/authorityHome.vue

@@ -0,0 +1,1019 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-11-29 09:27:43
+ * @LastEditTime: 2022-03-02 17:01:27
+ * @LastEditors: Please set LastEditors
+ * @Description: 权限管理
+ * @FilePath: \Foshan4A2.0\src\views\authorityManagement\components\home.vue
+-->
+<template>
+  <div class="authority-home">
+    <!--状态和搜索-->
+    <div class="authority-head flex">
+      <div class="status flex-wrap">
+        <div class="manageTitle">权限项管理</div>
+        <div class="status1"><span class="icon"></span>应用权限项</div>
+        <div class="status2"><span class="icon"></span>普通权限项</div>
+      </div>
+      <Search
+        @getSearchData="getSearchData"
+        :isTitle="false"
+        @clearSearchData="clearSearchData"
+      />
+    </div>
+    <!--权限树-->
+    <!-- <div class="authority-content">
+      <OrgTree :dataList="dataList" :renderContent="renderContent" />
+    </div> -->
+    <div class="authority-content">
+      <!-- <OrgTree :dataList="dataList" :renderContent="renderContent" /> -->
+      <el-row :gutter="24" class="bodyContent">
+        <el-col :span="6" class="bodyPart">
+          <div class="grid-content">
+            <div class="manageTitle">权限树</div>
+            <div class="contentTree">
+              <el-tree
+                ref="tree"
+                :data="dataListTree"
+                :props="defaultProps"
+                node-key="AuthId"
+                :filter-node-method="filterNode"
+                highlight-current
+                :default-expanded-keys="[currentKey]"
+                @node-click="handleNodeClick"
+              >
+              </el-tree>
+            </div>
+          </div>
+        </el-col>
+        <el-col :span="18" class="bodyPart">
+          <div class="grid-contentTop">
+            <div class="manageTitle">当前</div>
+            <div class="content">
+              <template v-if="currDataArr.length">
+                <el-row>
+                  <el-col
+                    :span="6"
+                    v-for="(data, index) in currDataArr"
+                    :key="data.AuthId"
+                  >
+                    <div class="account-left-content-teams">
+                      <div class="team">
+                        <div
+                          class="bg"
+                          :class="
+                            data.Type == 1 || data.Type == 0
+                              ? 'status1'
+                              : 'status2'
+                          "
+                        ></div>
+                        <div
+                          class="list"
+                          :class="data.QueryTarget == 1 ? 'activeStatus' : ''"
+                        >
+                          <div class="flex info">
+                            <div :title="data.AuthName" class="name">
+                              {{ data.AuthName }}
+                            </div>
+                            <div class="icon">
+                              <el-tooltip
+                                effect="dark"
+                                content="新增应用"
+                                placement="bottom"
+                              >
+                                <span
+                                  v-if="data.Type === 0"
+                                  title="新增应用"
+                                  @click="renderAdd()"
+                                  class="cap cap-plus"
+                                ></span>
+                              </el-tooltip>
+                              <el-tooltip
+                                effect="dark"
+                                content="修改应用"
+                                placement="bottom"
+                              >
+                                <span
+                                  v-if="data.Type === 1"
+                                  title="修改应用"
+                                  @click="renderEdit(data)"
+                                  class="cap cap-edit"
+                                ></span>
+                              </el-tooltip>
+                              <el-tooltip
+                                v-is="['authtree_btn_add_auth']"
+                                effect="dark"
+                                content="新增权限项"
+                                placement="bottom"
+                              >
+                                <span
+                                  v-if="data.Type === 2"
+                                  title="新增权限项"
+                                  @click="renderSub(data)"
+                                  class="cap cap-sub"
+                                ></span>
+                              </el-tooltip>
+                              <el-tooltip
+                                v-is="['authtree_btn_update_auth']"
+                                effect="dark"
+                                content="编辑权限项"
+                                placement="bottom"
+                              >
+                                <span
+                                  v-if="data.Type > 2"
+                                  title="编辑权限项"
+                                  @click="renderEdit(data)"
+                                  class="cap cap-edit"
+                                ></span>
+                              </el-tooltip>
+                              <el-tooltip
+                                v-is="['authtree_btn_add_auth']"
+                                effect="dark"
+                                content="新增权限项"
+                                placement="bottom"
+                              >
+                                <span
+                                  v-if="data.Type > 2"
+                                  title="新增权限项"
+                                  @click="renderSub(data)"
+                                  class="cap cap-sub"
+                                ></span>
+                              </el-tooltip>
+                            </div>
+                          </div>
+                          <div v-if="data.Type > 0" class="flex details">
+                            <div class="details-msg">
+                              状态：<span
+                                :class="data.Status === 1 ? 'success' : 'error'"
+                                >{{ data.Status === 1 ? "启用" : "禁用" }}</span
+                              >
+                            </div>
+                            <div
+                              v-is="['authtree_btn_state_swatch']"
+                              class="details-info"
+                            >
+                              <el-switch
+                                v-model="data.flag"
+                                @change="renderChange(data, index)"
+                                active-color="#2D67E3"
+                              >
+                              </el-switch>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      <div v-is="['authtree_btn_del_auth']">
+                        <div
+                          v-if="data.Type !== 0 && data.Type !== 2"
+                          @click.stop="onNodeClick(data)"
+                          class="info-close"
+                        >
+                          <i
+                            class="icon el-icon-close"
+                            :class="
+                              data.Type === 1
+                                ? 'close1'
+                                : data.Type > 2
+                                ? 'close2'
+                                : ''
+                            "
+                          ></i>
+                        </div>
+                      </div>
+                    </div>
+                  </el-col>
+                </el-row>
+              </template>
+              <template v-else>
+                <NoData :imageWidth="180" :imageHeight="130" />
+              </template>
+            </div>
+          </div>
+          <div class="grid-contentBottom">
+            <div class="manageTitle">拥有权限</div>
+            <div class="content">
+              <template v-if="childrenData.length">
+                <el-row :gutter="24">
+                  <el-col
+                    :span="6"
+                    v-for="(data, index) in childrenData"
+                    :key="data.AuthId"
+                  >
+                    <div
+                      @click.stop="childrenClick(data)"
+                      class="account-left-content-teams"
+                    >
+                      <div class="team">
+                        <div
+                          class="bg"
+                          :class="data.Type == 1 ? 'status1' : 'status2'"
+                        ></div>
+                        <div
+                          class="list"
+                          :class="data.QueryTarget == 1 ? 'activeStatus' : ''"
+                        >
+                          <div class="flex info">
+                            <div :title="data.AuthName" class="name">
+                              {{ data.AuthName }}
+                            </div>
+                            <div class="icon">
+                              <el-tooltip
+                                effect="dark"
+                                content="新增应用"
+                                placement="bottom"
+                              >
+                                <span
+                                  v-if="data.Type === 0"
+                                  title="新增应用"
+                                  @click="renderAdd()"
+                                  class="cap cap-plus"
+                                ></span>
+                              </el-tooltip>
+                              <el-tooltip
+                                effect="dark"
+                                content="修改应用"
+                                placement="bottom"
+                              >
+                                <span
+                                  v-if="data.Type === 1"
+                                  title="修改应用"
+                                  @click="renderEdit(data)"
+                                  class="cap cap-edit"
+                                ></span>
+                              </el-tooltip>
+                              <el-tooltip
+                                v-is="['authtree_btn_add_auth']"
+                                effect="dark"
+                                content="新增权限项"
+                                placement="bottom"
+                              >
+                                <span
+                                  v-if="data.Type === 2"
+                                  title="新增权限项"
+                                  @click="renderSub(data)"
+                                  class="cap cap-sub"
+                                ></span>
+                              </el-tooltip>
+                              <el-tooltip
+                                v-is="['authtree_btn_update_auth']"
+                                effect="dark"
+                                content="编辑权限项"
+                                placement="bottom"
+                              >
+                                <span
+                                  v-if="data.Type > 2"
+                                  title="编辑权限项"
+                                  @click="renderEdit(data)"
+                                  class="cap cap-edit"
+                                ></span>
+                              </el-tooltip>
+                              <el-tooltip
+                                v-is="['authtree_btn_add_auth']"
+                                effect="dark"
+                                content="新增权限项"
+                                placement="bottom"
+                              >
+                                <span
+                                  v-if="data.Type > 2"
+                                  title="新增权限项"
+                                  @click="renderSub(data)"
+                                  class="cap cap-sub"
+                                ></span>
+                              </el-tooltip>
+                            </div>
+                          </div>
+                          <div v-if="data.Type > 0" class="flex details">
+                            <div class="details-msg">
+                              状态：<span
+                                :class="data.Status === 1 ? 'success' : 'error'"
+                                >{{ data.Status === 1 ? "启用" : "禁用" }}</span
+                              >
+                            </div>
+                            <div
+                              v-is="['authtree_btn_state_swatch']"
+                              class="details-info"
+                            >
+                              <el-switch
+                                v-model="data.flag"
+                                @click.stop.native
+                                @change="renderChange(data, index)"
+                                active-color="#2D67E3"
+                              >
+                              </el-switch>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      <!-- <div v-if="data.Type !== 0 && data.Type !== 2" @click.stop="onNodeClick(data)" class="info-close">
+                        <i class="icon el-icon-close" :class="data.Type === 1 ? 'close1' : data.Type > 2 ? 'close2' : ''"></i>
+                      </div> -->
+                      <div v-is="['authtree_btn_del_auth']">
+                        <div
+                          v-if="data.Type !== 0 && data.Type !== 2"
+                          @click.stop="onNodeClick(data)"
+                          class="info-close"
+                        >
+                          <i
+                            class="icon el-icon-close"
+                            :class="
+                              data.Type === 1
+                                ? 'close1'
+                                : data.Type > 2
+                                ? 'close2'
+                                : ''
+                            "
+                          ></i>
+                        </div>
+                      </div>
+                    </div>
+                  </el-col>
+                </el-row>
+              </template>
+              <template v-else>
+                <NoData :imageWidth="280" :imageHeight="230" />
+              </template>
+            </div>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+    <!--删除弹框-->
+    <Dialog :flag="flag">
+      <div class="airportInfoDialog">
+        <div class="title del-title">删除{{ title }}</div>
+        <div class="content del-content">
+          <span class="el-icon-error error r10"></span>是否确认删除<span
+            class="error l10"
+            >{{ title }}</span
+          >？
+        </div>
+        <div class="foot Delfoot right t30">
+          <el-button size="medium" class="r24" @click="remove" type="danger"
+            >删除</el-button
+          >
+          <el-button size="medium" @click="flag = false">取消</el-button>
+        </div>
+      </div>
+    </Dialog>
+  </div>
+</template>
+
+<script>
+import OrgTree from "@/layout/components/OrgTree";
+import Search from "@/layout/components/Search";
+import Dialog from "@/layout/components/Dialog";
+import NoData from "@/components/nodata";
+import {
+  UpdateAppStatus,
+  UpdateAuthStatus,
+  DeleteApp,
+  DeleteAuth,
+} from "@/api/apiAuthority";
+import treeData from "../minixs/treeData";
+export default {
+  name: "Authority",
+  components: { OrgTree, Search, Dialog, NoData },
+  mixins: [treeData],
+  data() {
+    return {
+      dataIndex: 1,
+      dataNum: 0,
+      dataArr: [],
+      type: null,
+      title: "", //弹框title
+      flag: false, //弹框开关
+      dataId: null, //tree数据id
+      currDataArr: [],
+      currDataArrId: 0,
+      childrenData: [],
+      dataListTree: [],
+      currentKey: -1,
+      defaultProps: {
+        children: "children",
+        label: "AuthName",
+      },
+    };
+  },
+  created: function () {
+    let keyWords = "";
+    if (this.$route.query.keyWords) {
+      keyWords = this.$route.query.keyWords;
+    }
+    this.getAuthTree(keyWords);
+  },
+  watch: {
+    dataList: {
+      handler(val) {
+        this.dataListTree = [];
+        this.dataListTree.push(_.cloneDeep(val));
+      },
+      deep: true,
+    },
+  },
+  methods: {
+    //树点击
+    handleNodeClick(data) {
+      const dataNew = _.cloneDeep(data);
+      this.currDataArrId = dataNew.AuthId;
+      this.currDataArr = [];
+      this.childrenData = [];
+      this.currDataArr = this.decompose(this.dataArr, "AuthId", dataNew.AuthId);
+      this.childrenData = this.decompose(
+        this.dataArr,
+        "UpAuthId",
+        dataNew.AuthId
+      );
+    },
+    //下级卡片点击
+    childrenClick(data) {
+      const dataNew = _.cloneDeep(data);
+      this.currDataArrId = dataNew.AuthId;
+      this.currDataArr = [];
+      this.childrenData = [];
+      this.currDataArr = this.decompose(this.dataArr, "AuthId", dataNew.AuthId);
+      this.childrenData = this.decompose(
+        this.dataArr,
+        "UpAuthId",
+        dataNew.AuthId
+      );
+      this.$refs.tree.setCurrentKey(dataNew.AuthId);
+      this.currentKey = dataNew.AuthId;
+    },
+    //下级关闭
+    childrenRenderChange(data, index) {
+      try {
+        const { OrganId, flag } = data;
+        const Status = flag ? 1 : 0;
+        tissueTreeStart({
+          OrganId: OrganId,
+          Status: Status,
+        }).then((res) => {
+          if (res.code === 0) {
+            this.$message.success(res.message);
+            this.childrenData[index].Status = Status;
+            // this.getOrganTree();
+          } else {
+            this.$message.error(res.message);
+            this.childrenData[index].flag = !flag;
+          }
+        });
+      } catch (error) {
+        console.log("出错了", error);
+        this.childrenData[index].flag = !flag;
+      }
+    },
+    filterNode(value, data) {
+      if (!value) return true;
+      return data.AuthName.indexOf(value) !== -1;
+    },
+    // 添加应用
+    renderAdd() {
+      this.$router.push("/authority/appAdd");
+    },
+    // 修改权限
+    renderEdit(data) {
+      if (data.Type === 1) {
+        this.$router.push({
+          path: "/authority/appEdit",
+          query: {
+            AuthId: data.AuthId,
+            Status: data.Status,
+            UpAuthId: data.UpAuthId,
+          },
+        });
+      } else if (data.Type > 2) {
+        this.$router.push({
+          path: "/authority/editPower",
+          query: {
+            AuthId: data.AuthId,
+            Status: data.Status,
+            UpAuthId: data.UpAuthId,
+          },
+        });
+      }
+    },
+    // 权限树
+    renderSub(data) {
+      this.$router.push({
+        path: "/authority/addPower",
+        query: {
+          AuthId: data.AuthId,
+          Status: data.Status,
+          UpAuthId: data.UpAuthId,
+        },
+      });
+    },
+    // 关闭开启
+    renderChange(data, index) {
+      const { AuthId, flag, Type } = data;
+      const Status = flag ? 1 : 0;
+      this.handleChange(AuthId, Status, Type, index);
+    },
+    //删除
+    remove() {
+      if (this.type === 1) {
+        this.deleteApp(this.dataId);
+      } else {
+        this.deleteAuth(this.dataId);
+      }
+    },
+    //查询
+    getSearchData(val) {
+      this.$refs.tree.filter(val);
+      // this.getAuthTree(val)
+    },
+    //清除查询
+    clearSearchData() {
+      this.getAuthTree();
+    },
+    //节点关闭按钮点击
+    onNodeClick(data) {
+      this.flag = true;
+      this.dataId = data.AuthId;
+      this.title = data.AuthName;
+      this.type = data.Type;
+    },
+    //获取指定数据
+    decompose(value, key, id) {
+      let data = _.cloneDeep(value);
+      let arr = [];
+      for (let i = 0; i < data.length; i++) {
+        if (data[i][key] == id) {
+          arr.push(data[i]);
+        }
+      }
+      return arr;
+    },
+    //渲染节点
+    renderContent(h, data) {
+      return (
+        <div class="account-left-content-teams">
+          <div class="team">
+            <div class={[data.Type <= 1 ? "status1" : "status2", "bg"]}></div>
+            <div class={[data.QueryTarget == 1 ? "activeStatus" : "", "list"]}>
+              <div class="flex info">
+                <div class="name">{data.AuthName}</div>
+                <div class="icon">
+                  <span
+                    v-show={data.Type === 0}
+                    onClick={() => this.renderAdd()}
+                    class="cap cap-plus"
+                  ></span>
+                  <span
+                    v-show={data.Type === 1}
+                    onClick={() => this.renderEdit(data)}
+                    class="cap cap-edit"
+                  ></span>
+                  <span
+                    v-show={data.Type === 2}
+                    onClick={() => this.renderSub(data)}
+                    class="cap cap-sub"
+                  ></span>
+                  <span
+                    v-show={data.Type > 2}
+                    onClick={() => this.renderEdit(data)}
+                    class="cap cap-edit"
+                  ></span>
+                  <span
+                    v-show={data.Type > 2}
+                    onClick={() => this.renderSub(data)}
+                    class="cap cap-sub"
+                  ></span>
+                </div>
+              </div>
+              <div v-show={data.Type > 0} class="flex details">
+                <div class="details-msg">
+                  状态：
+                  <span class={[data.Status === 1 ? "success" : "error"]}>
+                    {data.Status === 1 ? "启用" : "禁用"}
+                  </span>
+                </div>
+                <div class="details-info">
+                  <el-switch
+                    v-model={data.flag}
+                    onChange={() => this.renderChange(data)}
+                    active-color="#6F81BC"
+                  ></el-switch>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            v-show={data.Type !== 0 && data.Type !== 2}
+            onClick={() => this.onNodeClick(data)}
+            class="info-close"
+          >
+            <i
+              class={[
+                data.Type === 1 ? "close1" : data.Type > 2 ? "close2" : "",
+                "icon",
+                "el-icon-close",
+              ]}
+            ></i>
+          </div>
+        </div>
+      );
+    },
+    //-----------获取数据------------
+    //应用状态变更
+    async handleChange(id, val, type, index) {
+      try {
+        let res = null;
+        if (type === 1) {
+          res = await UpdateAppStatus({
+            AppId: id,
+            Status: val,
+          });
+        } else {
+          res = await UpdateAuthStatus({
+            AuthId: id,
+            AuthStatus: val,
+          });
+        }
+        if (res.code === 0) {
+          this.$message.success(res.message);
+          if (type === 1) {
+            this.currDataArr[0].Status = val;
+          } else {
+            this.childrenData[index].Status = val;
+          }
+          //this.getAuthTree()
+        } else {
+          this.$message.error(res.message);
+          if (type === 1) {
+            this.currDataArr[0].flag = !flag;
+          } else {
+            this.childrenData[index].flag = !flag;
+          }
+        }
+      } catch (error) {
+        console.log("出错了", error);
+        if (type === 1) {
+          this.currDataArr[0].flag = !flag;
+        } else {
+          this.childrenData[index].flag = !flag;
+        }
+      }
+    },
+    //应用删除
+    async deleteApp(id) {
+      try {
+        const res = await DeleteApp({
+          AppId: id,
+        });
+        if (res.code === 0) {
+          this.$message.success(res.message);
+          this.flag = false;
+          this.getAuthTree();
+        } else {
+          this.flag = false;
+          this.$message.error(res.message);
+        }
+      } catch (error) {
+        this.flag = false;
+      }
+    },
+    //权限项删除
+    async deleteAuth(id) {
+      try {
+        const res = await DeleteAuth({
+          AuthId: id,
+        });
+        if (res.code === 0) {
+          this.$message.success(res.message);
+          this.flag = false;
+          this.getAuthTree();
+        } else {
+          this.flag = false;
+          this.$message.error(res.message);
+        }
+      } catch (error) {
+        this.flag = false;
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.authority-home {
+  padding: 16px 32px 32px 32px;
+  .authority-head {
+    line-height: 32px;
+    font-size: 14px;
+    .status {
+      .icon {
+        width: 14px;
+        height: 14px;
+        background: #58c274;
+        border-radius: 2px;
+        display: inline-block;
+        vertical-align: middle;
+        margin-right: 10px;
+        position: relative;
+        top: -2px;
+      }
+      &:last-child {
+        margin-right: 0;
+      }
+
+      .status2 {
+        margin-left: 28px;
+        .icon {
+          background: #2d67e3;
+        }
+      }
+    }
+  }
+  .authority-content {
+    // margin-top: 34px;
+    ::v-deep .orgTreeContent {
+      padding-top: 110px;
+      .account-left-content-teams {
+        .status1 {
+          background: #58c274;
+        }
+        .status2 {
+          background: #2d67e3;
+        }
+        .activeStatus {
+          background: #464960;
+          .name,
+          .details-msg,
+          .success,
+          .error {
+            color: #fff;
+          }
+        }
+        .list {
+          .info {
+            .name {
+              max-width: 100px;
+              white-space: nowrap;
+              overflow: hidden;
+              text-overflow: ellipsis;
+            }
+          }
+        }
+      }
+    }
+  }
+  .authority-content {
+    padding-top: 30px;
+    height: calc(100vh - 166px);
+    box-sizing: border-box;
+    .bodyContent {
+      height: 100%;
+      .bodyPart {
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+      }
+    }
+    .account-left-content-teams {
+      position: relative;
+      margin-top: 24px;
+      .info-close {
+        position: absolute;
+        width: 24px;
+        height: 24px;
+        line-height: 24px;
+        text-align: center;
+        background: #000000;
+        border-radius: 50%;
+        top: -12px;
+        right: -12px;
+        z-index: 5;
+        cursor: pointer;
+        .icon {
+          color: #fff;
+          font-weight: 600;
+        }
+      }
+      .list {
+        background-color: #f5f7fa;
+        .info {
+          line-height: normal;
+          margin-bottom: 37px;
+          .name {
+            font-size: 16px;
+            font-weight: bold;
+            max-width: 120px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
+          .cap {
+            width: 16px;
+            height: 16px;
+            display: inline-block;
+            background-repeat: no-repeat;
+            background-size: 100%;
+            transition: all 0.3s;
+            margin-left: 16px;
+            &:first-child {
+              margin-right: 0;
+            }
+          }
+          .cap-plus {
+            background-image: url("../../../assets/status/ic_plus.png");
+            &:hover {
+              background-image: url("../../../assets/status/ic_plus_hovar.png");
+            }
+          }
+          .cap-edit {
+            background-image: url("../../../assets/status/ic_edit_default.png");
+            &:hover {
+              background-image: url("../../../assets/status/ic_edit_hovar.png");
+            }
+          }
+          .cap-sub {
+            background-image: url("../../../assets/status/ic_permissions_add_default.png");
+            &:hover {
+              background-image: url("../../../assets/status/ic_permissions_add_hoavr.png");
+            }
+          }
+          .cap-job {
+            background-image: url("../../../assets/status/ic_jobs.png");
+            &:hover {
+              background-image: url("../../../assets/status/ic_jobs_hovar.png");
+            }
+          }
+          .cap-member {
+            background-image: url("../../../assets/status/ic_member.png");
+            &:hover {
+              background-image: url("../../../assets/status/ic_member_hovar.png");
+            }
+          }
+        }
+      }
+      .team {
+        background: #fff;
+        border-radius: 4px;
+        box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.1);
+        overflow: hidden;
+        .bg {
+          height: 4px;
+          background: #6f81bc;
+        }
+        .status1 {
+          background: #58c274;
+        }
+        .status2 {
+          background: #2d67e3;
+        }
+      }
+      .list {
+        padding: 23px 24px;
+        position: relative;
+        min-width: 240px;
+        min-height: 118px;
+        .info {
+          margin-bottom: 20px;
+          .info-avoutr {
+            display: flex;
+            .avoutr {
+              width: 40px;
+              height: 40px;
+              border-radius: 50%;
+              background: #303133;
+              img {
+                max-width: 100%;
+              }
+            }
+            .msg {
+              margin-left: 20px;
+              p {
+                margin: 0;
+                padding: 0;
+                height: 20px;
+                line-height: 20px;
+              }
+              .name {
+                font-weight: bold;
+                color: #303133;
+                font-size: 18px;
+                margin-bottom: 8px;
+              }
+              .group {
+                font-size: 14px;
+                font-family: Microsoft YaHei;
+                font-weight: 400;
+                color: #303133;
+              }
+            }
+          }
+          .icon {
+            font-size: 16px;
+            cursor: pointer;
+          }
+        }
+        .time,
+        .ip {
+          height: 16px;
+          line-height: 16px;
+          font-size: 16px;
+          .glr {
+            color: #909399;
+          }
+        }
+        .ip {
+          margin-top: 23px;
+          margin-bottom: 38px;
+        }
+        .details {
+          height: 24px;
+          line-height: 24px;
+          font-size: 14px;
+          .success {
+            color: #2d67e3;
+          }
+          .error {
+            color: #909399;
+          }
+        }
+      }
+    }
+    .grid-content {
+      width: 100%;
+      height: 100%;
+      background: #ffffff;
+      padding: 27px 24px;
+      border-radius: 4px;
+      // .title {
+      //   font-size: 18px;
+      //   font-family: Microsoft YaHei;
+      //   font-weight: bold;
+      //   color: #303133;
+      //   height: 40px;
+      //   padding: 30px;
+      // }
+      ::v-deep .contentTree {
+        margin-top: 30px;
+        height: calc(100% - 60px);
+        overflow: auto;
+        .el-tree-node.is-expanded > .el-tree-node__children {
+          display: block;
+        }
+      }
+    }
+    .grid-contentTop {
+      width: 100%;
+      height: 240px;
+      background: #ffffff;
+      border-radius: 4px;
+      padding: 27px 24px;
+      .title {
+        font-size: 18px;
+        font-family: Microsoft YaHei;
+        font-weight: bold;
+        color: #303133;
+        height: 40px;
+        padding: 30px;
+      }
+      .content {
+        width: 100%;
+        height: calc(100% - 60px);
+        padding: 0 20px;
+        margin-left: 0;
+      }
+    }
+
+    .grid-contentBottom {
+      width: 100%;
+      height: calc(100% - 240px - 24px);
+      background: #ffffff;
+      border-radius: 4px;
+      padding: 27px 24px;
+      .title {
+        font-size: 18px;
+        font-family: Microsoft YaHei;
+        font-weight: bold;
+        color: #303133;
+        height: 40px;
+        padding: 30px;
+      }
+      .content {
+        width: 100%;
+        height: calc(100% - 20px);
+        padding: 0 20px;
+        overflow-y: auto;
+        margin-left: 0;
+      }
+    }
+  }
+}
+::-webkit-scrollbar-track-piece {
+  background: #d3dce6;
+}
+
+::-webkit-scrollbar {
+  width: 8px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #99a9bf;
+  border-radius: 2px;
+}
+</style>

src/views/authorityManagement/components/authorityPowerAdd.vue

@@ -0,0 +1,396 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-11-29 11:26:07
+ * @LastEditTime: 2022-03-02 18:21:48
+ * @LastEditors: Please set LastEditors
+ * @Description:权限项
+ * @FilePath: \Foshan4A2.0\src\views\authorityManagement\components\authorityPower.vue
+-->
+<template>
+  <div class="authorityPower">
+    <!--新增权限项-->
+    <div class="addApp-form">
+      <div class="addApp-form-title flex">
+        <div class="manageTitle">
+          新增权限项
+          <!-- <span class="isqy">
+            <span>是否启用</span>
+            <el-radio v-model="radio" :label="1">是</el-radio>
+            <el-radio v-model="radio" :label="0">否</el-radio>
+          </span> -->
+        </div>
+        <div class="btn">
+          <!-- <el-button @click="deleteAuth" class="r24" type="danger">删除</el-button> -->
+          <el-button @click="saveBtn('form')" size="small" type="primary">保存</el-button>
+        </div>
+      </div>
+      <div class="addApp-form-content dialog-public-background">
+        <el-form :inline="true" ref="form" :rules="rules" class="form" :model="form">
+          <el-form-item prop="name" label="权限项名称">
+            <el-input placeholder="请输入权限项名称" v-model="form.name"></el-input>
+          </el-form-item>
+          <el-form-item prop="id" label="标识符">
+            <el-input placeholder="请输入标识符" v-model="form.id"></el-input>
+          </el-form-item>
+          <el-form-item label="描述">
+            <el-input style="width: 640px" maxlength="200" placeholder="请输入描述" v-model="form.app"></el-input>
+          </el-form-item>
+        </el-form>
+      </div>
+    </div>
+    <div class="power-content flex-wrap">
+      <div :class="!openRole && !OpenGroup ? '' : 'r24'" class="flex1 part">
+        <Organization :defaultProps="defaultProps" :checkedKeys="checkedKeys" @getTreeData="getTreeData" :orgType="orgType" :data="data" nodekey="AuthId" title="上级权限项" />
+      </div>
+      <!--有角色-->
+      <template v-if="openRole">
+        <div :class="isClass ? '' :'r24'" class="flex1 part">
+          <Rulesofcompetency @getData="getData" :authTo="authTo" title="权限规则" />
+        </div>
+        <div v-is="['authtree_role_card']" class="flex1 part">
+          <Rolelist @checkChange="checkChange" :roleType="roleType" :checkBoxList="checkBoxList" :number="8" title="角色" />
+        </div>
+      </template>
+      <!--有账号组-->
+      <template v-else-if="OpenGroup">
+        <div class="r24 flex1 part">
+          <Rulesofcompetency @getData="getData" :authTo="authTo" title="权限规则" />
+        </div>
+        <div class="flex1 part">
+          <Rolelist @checkChange="checkChange" :roleType="roleType" :checkBoxList="checkBoxList" :number="8" title="账号授权" />
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script>
+import Rolelist from "@/components/rolelist";
+import Rulesofcompetency from "@/components/rulesofcompetency";
+import Organization from "@/components/organization";
+import { checkPermission } from '@/utils/add-is-class';
+import {
+  GetAuthDetails,
+  QueryRole,
+  GetUserList,
+  SaveAuth,
+  DeleteAuth,
+} from "@/api/apiAuthority";
+import treeData from "../minixs/treeData";
+import { mapGetters } from "vuex";
+export default {
+  name: "AuthorityPower",
+  components: { Rolelist, Rulesofcompetency, Organization },
+  mixins: [treeData],
+  data () {
+    return {
+      radio: 1,
+      form: {
+        //应用表单
+        name: "",
+        id: "",
+        app: "",
+      },
+      rules: {
+        //表单验证
+        name: [
+          { required: true, message: "请输入权限项名称", trigger: "blur" },
+        ],
+        id: [{ required: true, message: "请输入标识符", trigger: "blur" }],
+      },
+      defaultProps: {
+        children: "children",
+        label: "AuthName",
+      },
+      AppId: null, //参数类型
+      UpAuthId: null,
+      data: [],
+      openRole: null,
+      OpenGroup: null,
+      roleList: [],
+      title: "角色",
+      editRoles: [],
+      checkBoxList: [],
+      authTo: {},
+      rulesObj: {},
+      msgDatas: [],
+      roleType: '',
+      orgType: '',
+      checkedKeys: []
+    };
+  },
+  computed: {
+    ...mapGetters(["systemSet"]),
+    isClass () {
+      const le = checkPermission(['authtree_role_card']);
+      return le;
+    }
+  },
+  watch: {
+    dataList: {
+      handler (val) {
+        const arr = [val];
+        this.decompose(arr, this.AppId);
+        this.data = [this.dataObj];
+        this.checkedKeys = [this.AppId];
+      },
+      deep: true,
+    },
+  },
+  created () {
+    const { AuthId, Status, UpAuthId } = this.$route.query;
+    const { OpenRole, OpenGroup } =
+      typeof this.systemSet === "string"
+        ? JSON.parse(this.systemSet)
+        : this.systemSet; //1是请求角色 0是请求用户
+    this.radio = Status;
+    this.AppId = AuthId;
+    this.UpAuthId = UpAuthId;
+    this.openRole = OpenRole;
+    this.OpenGroup = OpenGroup;
+    this.getAuthTree();
+  },
+  mounted () {
+    if (this.openRole) {
+      this.roleType = 'onlyRole';
+    } else if (this.OpenGroup) {
+      this.roleType = 'account';
+    }
+    this.orgType = 'auth';
+  },
+  methods: {
+    //获取指定数据
+    decompose (data, id) {
+      for (let i = 0; i < data.length; i++) {
+        if (data[i].AuthId == id) {
+          this.dataObj = data[i];
+          delete this.dataObj.children;
+        } else if (data[i].children && data[i].children.length > 0) {
+          this.decompose(data[i].children, id);
+        }
+      }
+    },
+    //保存
+    saveBtn (formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          this.editAuth();
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    //获取权限树回调
+    getTreeData (arr) {
+      const { AuthId, UpAuthId } = arr[0];
+      this.AppId = AuthId;
+      this.UpAuthId = UpAuthId;
+    },
+    //获取权限规则
+    getData (obj) {
+      this.rulesObj = obj;
+    },
+    //获取应用详情
+    async getAuthDetails (id) {
+      try {
+        const res = await GetAuthDetails({
+          AuthId: id,
+        });
+        if (res.code === 0) {
+          const {
+            AuthDesc,
+            AuthName,
+            AuthIdent,
+            RoleInfo,
+            AuthTo,
+            UserInfo,
+            AuthStatus,
+          } = res.returnData;
+          this.form.name = AuthName;
+          this.form.id = AuthIdent;
+          this.form.app = AuthDesc;
+          this.radio = AuthStatus;
+          if (AuthTo) {
+            this.authTo = AuthTo;
+            this.$store.dispatch("auth/changeAuthId", AuthTo.AuthId);
+            this.$store.dispatch("auth/changeAuthArrs", [AuthTo]);
+          }
+          if (this.openRole) {
+            if (RoleInfo && RoleInfo.length) {
+              RoleInfo.forEach((item) => {
+                if (item.IsSelected) {
+                  this.msgDatas.push(item);
+                }
+              });
+              this.checkBoxList = this.msgDatas;
+            } else {
+              this.msgDatas = [];
+            }
+          } else if (this.OpenGroup) {
+            if (UserInfo && UserInfo.length) {
+              UserInfo.forEach((item) => {
+                if (item.IsSelected) {
+                  this.msgDatas.push(item);
+                }
+              });
+              this.checkBoxList = this.msgDatas;
+            } else {
+              this.msgDatas = [];
+            }
+          }
+        } else {
+          this.$message.error(res.message);
+        }
+      } catch (error) {
+        console.log("出错了", error);
+      }
+    },
+    //角色列表
+    async queryRole () {
+      try {
+        const res = await QueryRole({
+          QueryName: "",
+        });
+        if (res.code === 0) {
+          const arr = res.returnData;
+          arr.forEach((item) => {
+            item.name = item.RoleName;
+          });
+          this.roleList = arr;
+        } else {
+          this.$message.error(res.message);
+        }
+      } catch (error) {
+        console.log("出错了", error);
+      }
+    },
+    //账号列表
+    async getUserList () {
+      try {
+        const res = await GetUserList({
+          QueryName: "",
+        });
+        if (res.code === 0) {
+          const arr = res.returnData;
+          arr.forEach((item) => {
+            item.name = item.UserName;
+          });
+          this.roleList = arr;
+        } else {
+          this.$message.error(res.message);
+        }
+      } catch (error) {
+        console.log("出错了", error);
+      }
+    },
+    //角色选取
+    checkChange (arr) {
+      this.msgDatas = arr;
+    },
+    //权限新增保存
+    async editAuth () {
+      try {
+        const datas = this.msgDatas;
+        if (datas && datas.length) {
+          datas.forEach((item) => {
+            item.IsSelected = 1;
+          });
+        }
+        const res = await SaveAuth({
+          AuthName: this.form.name,
+          AuthIdent: this.form.id,
+          AuthDesc: this.form.app,
+          UpAuthId: this.AppId,
+          RoleInfo: this.openRole ? datas : [],
+          UserInfo: this.openRole ? [] : datas,
+          AuthTo: this.rulesObj,
+          AuthStatus: this.radio,
+        });
+        if (res.code === 0) {
+          this.$message.success(res.message);
+          this.$store.dispatch("tagsView/delView", this.$route);
+          this.$router.push("/authority");
+        } else {
+          this.$message.error(res.message);
+        }
+      } catch (error) {
+        console.log("出错了", error);
+      }
+    },
+    //删除权限
+    async deleteAuth () {
+      try {
+        const res = await DeleteAuth({
+          AuthId: this.AppId,
+        });
+        if (res.code === 0) {
+          this.$message.success(res.message);
+          setTimeout(() => {
+            this.$router.push("/authority");
+          }, 2000);
+        } else {
+          this.$message.error(res.message);
+        }
+      } catch (error) {
+        console.log("出错了", error);
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.authorityPower {
+  padding: 24px;
+}
+.addApp-form {
+  background: #ffffff;
+  border-radius: 4px;
+  padding: 30px 68px 30px 24px;
+  .addApp-form-title {
+    line-height: 32px;
+    .title {
+      font-size: 24px;
+      font-family: Microsoft YaHei;
+      font-weight: bold;
+      color: #303133;
+    }
+    .isqy {
+      span {
+        font-weight: 400;
+        font-size: 14px;
+        margin: 0 28px 0 42px;
+      }
+    }
+  }
+  .addApp-form-content {
+    margin-top: 30px;
+    ::v-deep .form {
+      .el-form-item {
+        margin-bottom: 0;
+        margin-right: 40px;
+      }
+      .el-input__inner {
+        height: 32px;
+        line-height: 32px;
+        min-width: 184px;
+      }
+      .content {
+        .el-form-item__content {
+          flex: 1;
+        }
+        .el-form-item__label {
+          margin-left: 27px;
+        }
+      }
+    }
+  }
+}
+.power-content {
+  margin-top: 24px;
+  .part {
+    height: 704px;
+  }
+}
+</style>

src/views/authorityManagement/components/authorityPowerEdit.vue

@@ -0,0 +1,397 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-11-29 11:26:07
+ * @LastEditTime: 2022-03-02 18:22:02
+ * @LastEditors: Please set LastEditors
+ * @Description:权限项
+ * @FilePath: \Foshan4A2.0\src\views\authorityManagement\components\authorityPower.vue
+-->
+<template>
+  <div class="authorityPower">
+    <!--新增权限项-->
+    <div class="addApp-form">
+      <div class="addApp-form-title flex">
+        <div class="manageTitle">
+          编辑权限项
+          <!-- <span class="isqy">
+            <span>是否启用</span>
+            <el-radio v-model="radio" :label="1">是</el-radio>
+            <el-radio v-model="radio" :label="0">否</el-radio>
+          </span> -->
+        </div>
+        <div v-is="['appupdate_box_save']" class="btn">
+          <!-- <el-button @click="deleteAuth" class="r24" type="danger">删除</el-button> -->
+          <el-button @click="saveBtn('form')" size="small" type="primary">保存</el-button>
+        </div>
+      </div>
+      <div class="addApp-form-content dialog-public-background">
+        <el-form :inline="true" ref="form" :rules="rules" class="form" :model="form">
+          <el-form-item prop="name" label="权限项名称">
+            <el-input placeholder="请输入权限项名称" v-model="form.name"></el-input>
+          </el-form-item>
+          <el-form-item prop="id" label="标识符">
+            <el-input placeholder="请输入标识符" v-model="form.id"></el-input>
+          </el-form-item>
+          <el-form-item label="描述">
+            <el-input style="width: 640px" maxlength="200" placeholder="请输入描述" v-model="form.app"></el-input>
+          </el-form-item>
+        </el-form>
+      </div>
+    </div>
+    <div class="power-content flex-wrap">
+      <div :class="!openRole && !OpenGroup ? '' : 'r24'" class="flex1 part">
+        <Organization :defaultProps="defaultProps" :checkedKeys="checkedKeys" @getTreeData="getTreeData" :orgType="orgType" :data="data" nodekey="AuthId" title="上级权限项" />
+      </div>
+      <!--有角色-->
+      <template v-if="openRole">
+        <div :class="isClass ? '' :'r24'" class="flex1 part">
+          <Rulesofcompetency @getData="getData" :authTo="authTo" title="权限规则" />
+        </div>
+        <div v-is="['appupdate_edit_card']" class="flex1 part">
+          <Rolelist @checkChange="checkChange" :roleType="roleType" :checkBoxList="checkBoxList" :number="8" title="角色" />
+        </div>
+      </template>
+      <!--有账号组-->
+      <template v-else-if="OpenGroup">
+        <div class="r24 flex1 part">
+          <Rulesofcompetency @getData="getData" :authTo="authTo" title="权限规则" />
+        </div>
+        <div class="flex1 part">
+          <Rolelist @checkChange="checkChange" :roleType="roleType" :checkBoxList="checkBoxList" :number="8" title="账号授权" />
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script>
+import Rolelist from "@/components/rolelist";
+import Rulesofcompetency from "@/components/rulesofcompetency";
+import Organization from "@/components/organization";
+import { checkPermission } from '@/utils/add-is-class';
+import {
+  GetAuthDetails,
+  QueryRole,
+  GetUserList,
+  EditAuth,
+  DeleteAuth,
+} from "@/api/apiAuthority";
+import treeData from "../minixs/treeData";
+import { mapGetters } from "vuex";
+export default {
+  name: "AuthorityPower",
+  components: { Rolelist, Rulesofcompetency, Organization },
+  mixins: [treeData],
+  data () {
+    return {
+      radio: 1,
+      form: {
+        //应用表单
+        name: "",
+        id: "",
+        app: "",
+      },
+      rules: {
+        //表单验证
+        name: [
+          { required: true, message: "请输入权限项名称", trigger: "blur" },
+        ],
+        id: [{ required: true, message: "请输入标识符", trigger: "blur" }],
+      },
+      defaultProps: {
+        children: "children",
+        label: "AuthName",
+      },
+      AppId: null, //参数类型
+      UpAuthId: null,
+      data: [],
+      openRole: null,
+      OpenGroup: null,
+      roleList: [],
+      title: "角色",
+      editRoles: [],
+      checkBoxList: [],
+      authTo: {},
+      rulesObj: {},
+      msgDatas: [],
+      roleType: '',
+      orgType: '',
+      checkedKeys: []
+    };
+  },
+  computed: {
+    ...mapGetters(["systemSet"]),
+    isClass () {
+      const le = checkPermission(['appupdate_edit_card']);
+      return le;
+    }
+  },
+  watch: {
+    dataList: {
+      handler (val) {
+        const arr = [val];
+        this.data = arr;
+        this.checkedKeys = [this.UpAuthId];
+      },
+      deep: true,
+    },
+  },
+  created () {
+    const { AuthId, Status, UpAuthId } = this.$route.query;
+    const { OpenRole, OpenGroup } =
+      typeof this.systemSet === "string"
+        ? JSON.parse(this.systemSet)
+        : this.systemSet; //1是请求角色 0是请求用户
+    this.radio = Status;
+    this.AppId = AuthId;
+    this.UpAuthId = UpAuthId;
+    this.openRole = OpenRole;
+    this.OpenGroup = OpenGroup;
+    this.getAuthTree();
+    this.getAuthDetails(AuthId);
+  },
+  mounted () {
+    if (this.openRole) {
+      this.roleType = 'onlyRole';
+    } else if (this.OpenGroup) {
+      this.roleType = 'account';
+    }
+    this.orgType = 'auth';
+  },
+  methods: {
+    //获取指定数据
+    decompose (data, id) {
+      for (let i = 0; i < data.length; i++) {
+        if (data[i].AuthId == id) {
+          this.dataObj = data[i];
+          delete this.dataObj.children;
+        } else if (data[i].children && data[i].children.length > 0) {
+          this.decompose(data[i].children, id);
+        }
+      }
+    },
+    //保存
+    saveBtn (formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          this.editAuth();
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    //获取权限树回调
+    getTreeData (arr) {
+      const { AuthId, UpAuthId } = arr[0];
+      this.AppId = AuthId;
+      this.UpAuthId = UpAuthId;
+    },
+    //获取权限规则
+    getData (obj) {
+      this.rulesObj = obj;
+    },
+    //获取应用详情
+    async getAuthDetails (id) {
+      try {
+        const res = await GetAuthDetails({
+          AuthId: id,
+        });
+        if (res.code === 0) {
+          const {
+            AuthDesc,
+            AuthName,
+            AuthIdent,
+            RoleInfo,
+            AuthTo,
+            UserInfo,
+            AuthStatus,
+          } = res.returnData;
+          this.form.name = AuthName;
+          this.form.id = AuthIdent;
+          this.form.app = AuthDesc;
+          this.radio = AuthStatus;
+          if (AuthTo) {
+            this.authTo = AuthTo;
+            this.$store.dispatch("auth/changeAuthId", AuthTo.AuthId);
+            this.$store.dispatch("auth/changeAuthArrs", [AuthTo]);
+          }
+          if (this.openRole) {
+            if (RoleInfo && RoleInfo.length) {
+              RoleInfo.forEach((item) => {
+                if (item.IsSelected) {
+                  this.msgDatas.push(item);
+                }
+              });
+              this.checkBoxList = this.msgDatas;
+            } else {
+              this.msgDatas = [];
+            }
+          } else if (this.OpenGroup) {
+            if (UserInfo && UserInfo.length) {
+              UserInfo.forEach((item) => {
+                if (item.IsSelected) {
+                  this.msgDatas.push(item);
+                }
+              });
+              this.checkBoxList = this.msgDatas;
+            } else {
+              this.msgDatas = [];
+            }
+          }
+        } else {
+          this.$message.error(res.message);
+        }
+      } catch (error) {
+        console.log("出错了", error);
+      }
+    },
+    //角色列表
+    async queryRole () {
+      try {
+        const res = await QueryRole({
+          QueryName: "",
+        });
+        if (res.code === 0) {
+          const arr = res.returnData;
+          arr.forEach((item) => {
+            item.name = item.RoleName;
+          });
+          this.roleList = arr;
+        } else {
+          this.$message.error(res.message);
+        }
+      } catch (error) {
+        console.log("出错了", error);
+      }
+    },
+    //账号列表
+    async getUserList () {
+      try {
+        const res = await GetUserList({
+          QueryName: "",
+        });
+        if (res.code === 0) {
+          const arr = res.returnData;
+          arr.forEach((item) => {
+            item.name = item.UserName;
+          });
+          this.roleList = arr;
+        } else {
+          this.$message.error(res.message);
+        }
+      } catch (error) {
+        console.log("出错了", error);
+      }
+    },
+    //角色选取
+    checkChange (arr) {
+      this.msgDatas = arr;
+    },
+    //权限新增保存
+    async editAuth () {
+      try {
+        const datas = this.msgDatas;
+        if (datas && datas.length) {
+          datas.forEach((item) => {
+            item.IsSelected = 1;
+          });
+        }
+        const res = await EditAuth({
+          AuthName: this.form.name,
+          AuthIdent: this.form.id,
+          AuthDesc: this.form.app,
+          UpAuthId: this.UpAuthId,
+          AuthId: this.AppId,
+          RoleInfo: this.openRole ? datas : [],
+          UserInfo: this.openRole ? [] : datas,
+          AuthTo: this.rulesObj,
+          AuthStatus: this.radio,
+        });
+        if (res.code === 0) {
+          this.$message.success(res.message);
+          this.$store.dispatch("tagsView/delView", this.$route);
+          this.$router.push("/authority");
+        } else {
+          this.$message.error(res.message);
+        }
+      } catch (error) {
+        console.log("出错了", error);
+      }
+    },
+    //删除权限
+    async deleteAuth () {
+      try {
+        const res = await DeleteAuth({
+          AuthId: this.AppId,
+        });
+        if (res.code === 0) {
+          this.$message.success(res.message);
+          setTimeout(() => {
+            this.$router.push("/authority");
+          }, 2000);
+        } else {
+          this.$message.error(res.message);
+        }
+      } catch (error) {
+        console.log("出错了", error);
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.authorityPower {
+  padding: 24px;
+}
+.addApp-form {
+  background: #ffffff;
+  border-radius: 4px;
+  padding: 30px 68px 30px 24px;
+  .addApp-form-title {
+    line-height: 32px;
+    .title {
+      font-size: 24px;
+      font-family: Microsoft YaHei;
+      font-weight: bold;
+      color: #303133;
+    }
+    .isqy {
+      span {
+        font-weight: 400;
+        font-size: 14px;
+        margin: 0 28px 0 42px;
+      }
+    }
+  }
+  .addApp-form-content {
+    margin-top: 30px;
+    ::v-deep .form {
+      .el-form-item {
+        margin-bottom: 0;
+        margin-right: 40px;
+      }
+      .el-input__inner {
+        height: 32px;
+        line-height: 32px;
+        min-width: 184px;
+      }
+      .content {
+        .el-form-item__content {
+          flex: 1;
+        }
+        .el-form-item__label {
+          margin-left: 27px;
+        }
+      }
+    }
+  }
+}
+.power-content {
+  margin-top: 24px;
+  .part {
+    height: 704px;
+  }
+}
+</style>

src/views/authorityManagement/components/authorityRole.vue

@@ -0,0 +1,13 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-11-29 14:37:54
+ * @LastEditTime: 2021-11-29 16:42:45
+ * @LastEditors: Please set LastEditors
+ * @Description: 角色管理-路由出口
+ * @FilePath: \Foshan4A2.0\src\views\authorityManagement\components\authorityRole.vue
+-->
+<template>
+  <div class="authorityRole">
+    <router-view />
+  </div>
+</template>

src/views/authorityManagement/components/authorityRoleAdd.vue

@@ -0,0 +1,209 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-11-29 16:31:31
+ * @LastEditTime: 2022-03-02 13:50:30
+ * @LastEditors: Please set LastEditors
+ * @Description: 新增/编辑角色
+ * @FilePath: \Foshan4A2.0\src\views\authorityManagement\components\authorityRoleStatus.vue
+-->
+<template>
+  <div class="authorityPower">
+    <!--新增权限项-->
+    <div class="addApp-form">
+      <div class="addApp-form-title flex">
+        <div class="manageTitle">新增角色</div>
+        <div class="btn">
+          <el-button @click="saveBtn('form')" size="small" type="primary">保存</el-button>
+        </div>
+      </div>
+      <div class="addApp-form-content dialog-public-background">
+        <el-form :inline="true" :rules="rules" ref="form" class="form" :model="form">
+          <el-form-item prop="name" label="角色名称">
+            <el-input placeholder="请输入角色名称" maxlength="32" v-model="form.name"></el-input>
+          </el-form-item>
+          <el-form-item label="描述">
+            <el-input style="width: 640px" maxlength="200" placeholder="请输入描述" v-model="form.app"></el-input>
+          </el-form-item>
+        </el-form>
+      </div>
+    </div>
+    <div class="power-content flex-wrap">
+      <div class="r24 flex1 part">
+        <Permissiontree @nodeClick="nodeClick" @getTreeData="getTreeData" title="权限树" />
+      </div>
+      <div class="flex1 part">
+        <Rulesofcompetency @getData="getData" title="权限规则" />
+      </div>
+      <!-- <div class="flex1 part">
+        <Rolelist
+          v-is="['role_add_mutually_exclusive']"
+          @checkChange="checkChange"
+          @checkClick="checkClick"
+          :imageSize="80"
+          :roleType="roleType"
+          :active="true"
+          class="hucRole"
+          :number="8"
+          style="height: 280px; overflow: hidden"
+          title="互斥角色"
+        />
+        <Permissionlist
+          v-is="['role_add_mutually_exclusive_list']"
+          v-loading="permission"
+          :imageSize="80"
+          :RoleList="RoleList"
+          :check="true"
+          class="hucPower"
+          style="margin-top: 24px"
+          title="互斥角色已有权限列表"
+        />
+      </div> -->
+    </div>
+  </div>
+</template>
+
+<script>
+import Permissionlist from "@/components/permissionlist";
+import Rulesofcompetency from "@/components/rulesofcompetency";
+import Permissiontree from "@/components/permissiontree";
+import Rolelist from "@/components/rolelist";
+import roleData from "../minixs/roleData";
+import { SaveRole, RoleAuths } from "@/api/apiAuthority";
+export default {
+  name: "AuthorityRoleAdd",
+  components: { Permissionlist, Rulesofcompetency, Permissiontree, Rolelist },
+  mixins: [roleData],
+  data () {
+    return {
+      radio: 1,
+      form: {
+        //应用表单
+        name: "",
+        id: "",
+        app: "",
+      },
+      rules: {
+        //表单验证
+        name: [{ required: true, message: "请输入角色名称", trigger: "blur" }],
+      },
+      permission: false,
+      RoleList: [],
+      checkedBoxs: [],
+      arrs: [],
+      dataObj: {}, //上级权限指定树数据
+      type: null, //参数类型
+      defRoleId: null,
+      AuthObj: {},
+      treeData: [],
+      roleType: "",
+    };
+  },
+  watch: {
+    arrs: {
+      handler (arr) {
+        arr.forEach((item) => {
+          item.name = item.RoleName;
+        });
+        this.arrs = arr;
+      },
+      deep: true,
+    },
+  },
+  mounted () {
+    this.roleType = "onlyRole";
+  },
+  methods: {
+    //获取权限树回调
+    getTreeData (arr) {
+      this.treeData = arr;
+    },
+    //获取权限规则回调
+    getData (obj) {
+      this.AuthObj = obj;
+    },
+    //互斥角色选中回调
+    checkChange (arr) {
+      const arrs = [];
+      arr.forEach((item) => {
+        const obj = {
+          DefRoleId: item.RoleId,
+          IsSelected: 1,
+          DefRoleName: item.RoleName,
+        };
+        arrs.push(obj);
+      });
+      this.checkedBoxs = arrs;
+    },
+    //互斥角色点击回调
+    checkClick (item) {
+      this.roleAuths(item.RoleId);
+    },
+    //互斥角色回调
+    async roleAuths (id) {
+      try {
+        this.permission = true;
+        let params = {
+          RoleId: id,
+        };
+        const res = await RoleAuths(params);
+        if (res.code === 0) {
+          this.RoleList = res.returnData;
+          this.permission = false;
+        } else {
+          this.$message.error(res.message);
+          this.permission = false;
+        }
+      } catch (error) {
+        console.log("出错了", error);
+        this.permission = false;
+      }
+    },
+    //权限树点击
+    nodeClick (obj) {
+      const arr = this.$store.getters.authArrs;
+      arr.push(obj);
+      this.$store.dispatch("auth/changeAuthArrs", arr);
+    },
+    //新增
+    saveBtn (formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          this.saveRole();
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    //新增保存
+    async saveRole () {
+      try {
+        const datas = [];
+        this.treeData.forEach((item) => {
+          datas.push(item.AuthList);
+        });
+        const res = await SaveRole({
+          RoleName: this.form.name,
+          RoleDesc: this.form.app,
+          DefRoleList: this.checkedBoxs,
+          AuthList: datas,
+          RoleStatus: this.radio,
+        });
+        if (res.code === 0) {
+          this.$message.success(res.message);
+          this.$store.dispatch("tagsView/delView", this.$route);
+          this.$router.push("/role");
+        } else {
+          this.$message.error(res.message);
+        }
+      } catch (error) {
+        console.log("出错了", error);
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../css/role.scss";
+</style>

src/views/authorityManagement/components/authorityRoleEdit.vue

@@ -0,0 +1,260 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-11-29 16:31:31
+ * @LastEditTime: 2022-03-02 13:51:29
+ * @LastEditors: Please set LastEditors
+ * @Description: 新增/编辑角色
+ * @FilePath: \Foshan4A2.0\src\views\authorityManagement\components\authorityRoleStatus.vue
+-->
+<template>
+  <div class="authorityPower">
+    <!--新增权限项-->
+    <div class="addApp-form">
+      <div class="addApp-form-title flex">
+        <div class="title">
+          编辑角色
+          <!-- <span class="isqy">
+            <span>是否启用</span>
+            <el-radio v-model="radio" :label="1">是</el-radio>
+            <el-radio v-model="radio" :label="0">否</el-radio>
+          </span> -->
+        </div>
+        <div v-is="['role_edit save']" class="btn">
+          <!-- <el-button class="r24" @click="removeRole" type="danger">删除</el-button> -->
+          <el-button @click="saveBtn('form')" size="small" type="primary">保存</el-button>
+        </div>
+      </div>
+      <div class="addApp-form-content dialog-public-background">
+        <el-form :inline="true" ref="form" :rules="rules" class="form" :model="form">
+          <el-form-item prop="name" label="角色名称">
+            <el-input placeholder="请输入角色名称" maxlength="32" v-model="form.name"></el-input>
+          </el-form-item>
+          <el-form-item label="描述">
+            <el-input style="width: 640px" maxlength="200" placeholder="请输入描述" v-model="form.app"></el-input>
+          </el-form-item>
+        </el-form>
+      </div>
+    </div>
+    <div class="power-content flex-wrap">
+      <div class="r24 flex1 part">
+        <Permissiontree v-loading="loading" element-loading-text="数据加载中" @getTreeData="getTreeData" :checkedKeys="checkedKeys" title="权限树" />
+      </div>
+      <div class="flex1 part">
+        <Rulesofcompetency v-loading="loading" element-loading-text="数据加载中" :authList="authList" :authTo="authTo" title="权限规则" />
+      </div>
+      <!-- <div class="flex1 part">
+        <Rolelist
+          v-is="['role_edit_mutually_exclusive']"
+          v-loading="loading"
+          element-loading-text="数据加载中"
+          @checkChange="checkChange"
+          @checkClick="checkClick"
+          :roleType="roleType"
+          :checkBoxList="radioCheck"
+          :active="true"
+          class="hucRole"
+          :imageSize="80"
+          :number="8"
+          style="height: 280px; overflow: hidden"
+          title="互斥角色"
+        />
+        <Permissionlist
+          v-is="['role_edit_mutually_exclusive_list']"
+          v-loading="permission"
+          element-loading-text="数据加载中"
+          :check="true"
+          :imageSize="80"
+          :RoleList="RoleList"
+          class="hucPower"
+          style="margin-top: 24px"
+          title="互斥角色已有权限列表"
+        />
+      </div> -->
+    </div>
+  </div>
+</template>
+
+<script>
+import Permissionlist from "@/components/permissionlist";
+import Rulesofcompetency from "@/components/rulesofcompetency";
+import Permissiontree from "@/components/permissiontree";
+import Rolelist from "@/components/rolelist";
+import { RoleDetails, EditRole, RoleAuths } from "@/api/apiAuthority";
+import roleData from "../minixs/roleData";
+export default {
+  name: "AuthorityRoleEdit",
+  components: { Permissionlist, Rulesofcompetency, Permissiontree, Rolelist },
+  mixins: [roleData],
+  data () {
+    return {
+      radio: 1,
+      form: {
+        //应用表单
+        name: "",
+        id: "",
+        app: "",
+      },
+      rules: {
+        //表单验证
+        name: [{ required: true, message: "请输入角色名称", trigger: "blur" }],
+      },
+      loading: false,
+      permission: false,
+      treeData: [],
+      arrs: [],
+      checkedKeys: [],
+      RoleList: [],
+      radioCheck: [],
+      checkedBoxs: [],
+      defRoleId: [],
+      roleId: null,
+      Status: null,
+      authTo: {},
+      authList: [],
+      authId: [],
+      type: null, //参数类型
+      roleType: "",
+    };
+  },
+  created () {
+    //this.getAuthTree();
+    const { RoleId, Status } = this.$route.query;
+    this.roleId = RoleId;
+    this.Status = Status;
+    this.roleDetails(RoleId);
+  },
+  mounted () {
+    this.roleType = "onlyRole";
+  },
+  methods: {
+    //角色明细
+    async roleDetails (id) {
+      try {
+        this.loading = true;
+        const res = await RoleDetails({
+          RoleId: id,
+        });
+        if (res.code === 0) {
+          const { RoleName, RoleDesc, AuthList, RoleStatus, DefRoleList } =
+            res.returnData;
+          this.form.name = RoleName;
+          this.form.app = RoleDesc;
+          this.radio = RoleStatus;
+          if (AuthList && AuthList.length) {
+            AuthList.forEach((item) => {
+              this.authId.push(item.AuthId);
+            });
+            this.checkedKeys = this.authId;
+            this.authList = _.cloneDeep(AuthList);
+            this.authTo = AuthList[0];
+          }
+          if (DefRoleList && DefRoleList.length) {
+            this.checkedBoxs = DefRoleList;
+            DefRoleList.forEach((item) => {
+              item.RoleId = item.DefRoleId;
+            });
+            this.radioCheck = DefRoleList;
+            this.roleAuths(DefRoleList[0].DefRoleId);
+          }
+          this.loading = false;
+        } else {
+          this.$message.error(res.message);
+          this.loading = false;
+        }
+      } catch (error) {
+        console.log("出错了", error);
+        this.loading = false;
+      }
+    },
+    //删除
+    removeRole () {
+      this.deleteRole(this.roleId);
+    },
+    //获取权限树回调
+    getTreeData (arr) {
+      this.treeData = arr;
+    },
+    //获取权限规则回调
+    getData (obj) {
+      this.authTo = obj;
+    },
+    //互斥角色选中回调
+    checkChange (arr) {
+      const arrs = [];
+      arr.forEach((item) => {
+        const obj = {
+          DefRoleId: item.RoleId,
+          IsSelected: 1,
+          DefRoleName: item.RoleName,
+        };
+        arrs.push(obj);
+      });
+      this.checkedBoxs = arrs;
+    },
+    //互斥角色点击回调
+    checkClick (item) {
+      this.roleAuths(item.RoleId);
+    },
+    async roleAuths (id) {
+      try {
+        let params = {
+          RoleId: id,
+        };
+        this.permission = true;
+        const res = await RoleAuths(params);
+        if (res.code === 0) {
+          this.RoleList = res.returnData;
+          this.permission = false;
+        } else {
+          this.$message.error(res.message);
+          this.permission = false;
+        }
+      } catch (error) {
+        console.log("出错了", error);
+        this.permission = false;
+      }
+    },
+    //保存
+    saveBtn (formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          this.editRole();
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    //确认保存
+    async editRole () {
+      try {
+        const datas = [];
+        this.treeData.forEach((item) => {
+          datas.push(item.AuthList);
+        });
+        const res = await EditRole({
+          RoleName: this.form.name,
+          RoleDesc: this.form.app,
+          DefRoleList: this.checkedBoxs,
+          AuthList: datas,
+          RoleStatus: this.radio,
+          RoleId: this.roleId,
+        });
+        if (res.code === 0) {
+          this.$message.success(res.message);
+          this.$store.dispatch("tagsView/delView", this.$route);
+          this.$router.push("/role");
+        } else {
+          this.$message.error(res.message);
+        }
+      } catch (error) {
+        console.log("出错了", error);
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../css/role.scss";
+</style>

src/views/authorityManagement/components/authorityRoleHome.vue

@@ -0,0 +1,399 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-11-29 14:37:54
+ * @LastEditTime: 2022-03-03 10:29:05
+ * @LastEditors: Please set LastEditors
+ * @Description: 角色管理
+ * @FilePath: \Foshan4A2.0\src\views\authorityManagement\components\authorityRole.vue
+-->
+<template>
+  <div class="authorityRoleHome">
+    <!--状态和搜索-->
+    <div class="authority-head flex">
+      <div class="status flex-wrap">
+        <div class="manageTitle">角色管理</div>
+        <div class="status1"><span class="icon"></span>存在互斥</div>
+        <div class="status2"><span class="icon"></span>不存在互斥</div>
+      </div>
+      <Search @getSearchData="getSearchData" @clearSearchData="clearSearchData" :isTitle="false" :isSlot="true">
+        <button v-is="['role_add']" @click="addRole" class="btnAdd">新增</button>
+      </Search>
+    </div>
+    <!--列表-->
+    <div class="role-content scrollbar infinite-list-wrapper">
+      <template v-if="arrs.length">
+        <el-row v-infinite-scroll="load" :infinite-scroll-distance="20" infinite-scroll-disabled="disabled" :gutter="24">
+          <el-col v-for="(item,index) in arrs" class="account-left-content-teams" :lg="4" :key="index">
+            <div class="team">
+              <div :class="'status'+ item.IsDef" class="bg"></div>
+              <div class="list">
+                <div class="flex info">
+                  <div class="info-avoutr">
+                    <div class="msg flex-wrap">
+                      <p :title="item.RoleName" class="name">{{item.RoleName}}</p>
+                      <div v-is="['role_edit']" @click="editRole(item)" class="cap cap-edit"></div>
+                    </div>
+                  </div>
+                  <div v-is="['role_delete']" class="info-close">
+                    <i @click="checkRemove(item,index)" class="icon el-icon-close"></i>
+                  </div>
+                </div>
+                <div class="flex-wrap time">
+                  <div class="time-msg">账号数：</div>
+                  <div class="time-info glr">{{item.UserCount}}</div>
+                </div>
+                <div class="flex-wrap ip">
+                  <div class="ip-msg">权限项数：</div>
+                  <div class="ip-info glr">{{item.AuthCount}}</div>
+                </div>
+                <div class="flex details">
+                  <div class="details-msg">
+                    状态：<span :class="item.Status == 1 ? 'success' : 'error'">{{item.Status == 1 ? '启用' : '停用'}}</span>
+                  </div>
+                  <div v-is="['role_state switch']" class="details-info">
+                    <el-switch v-model="item.isauto" @change="handleChange(item)" active-color="#2D67E3">
+                    </el-switch>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </el-col>
+        </el-row>
+        <template v-if="total > 1">
+          <p class="center" v-if="loading">加载中...</p>
+          <p class="center" v-if="noMore">没有更多数据了~</p>
+        </template>
+      </template>
+      <template v-else>
+        <el-empty :image-size="1" description="暂无数据"></el-empty>
+      </template>
+    </div>
+    <!--删除弹框-->
+    <Dialog :flag="flag">
+      <div class="airportInfoDialog">
+        <div class="title del-title">删除角色</div>
+        <div class="content del-content"><span class="el-icon-error error r10"></span>您是否确认删除<span class="error l10">{{ title }}</span> ？</div>
+        <div class="foot right Delfoot t30">
+          <el-button size="medium" class="r24" @click="remove" type="danger">删除</el-button>
+          <el-button size="medium" @click="flag = false">取消</el-button>
+        </div>
+      </div>
+    </Dialog>
+  </div>
+</template>
+
+<script>
+import Search from '@/layout/components/Search'
+import Dialog from '@/layout/components/Dialog'
+import roleData from '../minixs/roleData'
+import { UpdateStatus } from '@/api/apiAuthority'
+export default {
+  name: 'AuthorityRole',
+  components: { Search, Dialog },
+  mixins: [roleData],
+  data () {
+    return {
+      arrs: [], //卡片数据
+      arr: [],
+      arrsCopy: [],
+      flag: false,
+      title: '',
+      index: null,
+      num: null,
+      pageNum: 1,
+      PageSize: 20,
+      loading: false,
+      keyWords: '',
+      total: null,
+      search: null
+    }
+  },
+  created () {
+    if (this.$route.query.keyWords) {
+      keyWords = this.$route.query.keyWords
+      this.keyWords = keyWords
+    }
+    this.gueryRole({
+      QueryName: this.keyWords,
+      PageSize: this.PageSize,
+      PageIndex: this.pageNum
+    });
+  },
+  computed: {
+    noMore () {
+      return this.pageNum >= this.total
+    },
+    disabled () {
+      return this.loading || this.noMore
+    }
+  },
+  methods: {
+    //删除
+    checkRemove (item, index) {
+      this.flag = true
+      this.index = item
+      this.title = item.RoleName
+      this.num = index
+    },
+    //确认删除
+    remove () {
+      this.deleteRole(this.index.RoleId, this.num)
+    },
+    //角色新增
+    addRole () {
+      this.$router.push('/role/addRole')
+    },
+    //角色编辑
+    editRole (item) {
+      this.$router.push({ path: '/role/editRole', query: { RoleId: item.RoleId, Status: item.Status } })
+    },
+    //查询
+    getSearchData (val) {
+      this.arrs = []
+      this.dataList = []
+      this.pageNum = 1
+      this.keyWords = val
+      this.gueryRole({
+        QueryName: val,
+        PageSize: this.PageSize,
+        PageIndex: this.pageNum
+      })
+    },
+    //清除查询
+    clearSearchData () {
+      this.arrs = []
+      this.dataList = []
+      this.pageNum = 1
+      this.keyWords = ''
+      this.gueryRole({
+        QueryName: this.keyWords,
+        PageSize: this.PageSize,
+        PageIndex: this.pageNum
+      })
+    },
+    //状态变更
+    async handleChange (item) {
+      try {
+        const { RoleId, isauto } = item
+        const Status = isauto ? 1 : 0
+        const res = await UpdateStatus({
+          RoleId: RoleId,
+          RoleStatus: Status
+        })
+        if (res.code === 0) {
+          this.$message.success(res.message)
+          this.arrs.forEach(item => {
+            if (item.RoleId == RoleId) {
+              item.isauto = isauto
+              item.Status = Status
+            }
+          })
+        } else {
+          this.$message.error(res.message)
+        }
+      } catch (error) {
+        console.log('出错了', error)
+      }
+    },
+    //滚动加载数据
+    load () {
+      this.pageNum += 1
+      this.gueryRole({
+        QueryName: this.keyWords,
+        PageSize: this.PageSize,
+        PageIndex: this.pageNum
+      });
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.authorityRoleHome {
+  // padding: 0 64px;
+  padding: 16px 32px 32px 32px;
+}
+.authority-head {
+  line-height: 32px;
+  .status {
+    & > div {
+      .icon {
+        width: 14px;
+        height: 14px;
+        background: #2d67e3;
+        border-radius: 2px;
+        display: inline-block;
+        vertical-align: middle;
+        margin-right: 10px;
+        position: relative;
+        top: -2px;
+      }
+      &:last-child {
+        margin-right: 0;
+      }
+    }
+    .status1 {
+      font-size: 14px;
+      margin-right: 28px;
+    }
+    .status2 {
+      font-size: 14px;
+      .icon {
+        background: #afb4bf;
+      }
+    }
+  }
+}
+.role-content {
+  margin-top: 24px;
+  height: 72vh;
+  overflow-y: auto;
+  overflow-x: hidden;
+  .el-col-lg-5-5 {
+    width: 20%;
+  }
+  .account-left-content-teams {
+    position: relative;
+    margin-bottom: 24px;
+    .info-close {
+      cursor: pointer;
+      .icon {
+        color: #303133;
+        font-weight: 600;
+      }
+    }
+    .list {
+      .info {
+        line-height: normal;
+        margin-bottom: 19px;
+        .name {
+          font-size: 16px;
+          font-weight: bold;
+        }
+        .cap {
+          width: 14px;
+          height: 14px;
+          display: inline-block;
+          background-repeat: no-repeat;
+          background-size: cover;
+          transition: all 0.3s;
+          margin-left: 24px;
+          cursor: pointer;
+          &:first-child {
+            margin-right: 0;
+          }
+        }
+        .cap-plus {
+          background-image: url("../../../assets/status/ic_plus.png");
+          &:hover {
+            background-image: url("../../../assets/status/ic_plus_hovar.png");
+          }
+        }
+        .cap-edit {
+          background-image: url("../../../assets/status/ic_edit_default.png");
+          &:hover {
+            background-image: url("../../../assets/status/ic_edit_hovar.png");
+          }
+        }
+        .cap-sub {
+          background-image: url("../../../assets/status/ic_subordinate.png");
+          &:hover {
+            background-image: url("../../../assets/status/ic_subordinate_hovar.png");
+          }
+        }
+      }
+    }
+    .team {
+      background: #fff;
+      border-radius: 4px;
+      box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.06);
+      overflow: hidden;
+      .bg {
+        height: 4px;
+        background: #2d67e3;
+      }
+      .status1 {
+        background: #2d67e3;
+      }
+      .status2 {
+        background: #afb4bf;
+      }
+    }
+    .list {
+      padding: 24px;
+      position: relative;
+      min-width: 264px;
+      .info {
+        margin-bottom: 19px;
+        .info-avoutr {
+          display: flex;
+          .avoutr {
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            background: #303133;
+            img {
+              max-width: 100%;
+            }
+          }
+          .msg {
+            p {
+              margin: 0;
+              padding: 0;
+              height: 20px;
+              line-height: 20px;
+            }
+            .name {
+              font-weight: bold;
+              color: #303133;
+              font-size: 16px;
+              max-width: 180px;
+              white-space: nowrap;
+              text-overflow: ellipsis;
+              overflow: hidden;
+            }
+            .cap {
+              position: relative;
+              top: 2px;
+            }
+            .group {
+              font-size: 14px;
+              font-family: Microsoft YaHei;
+              font-weight: 400;
+              color: #303133;
+            }
+          }
+        }
+        .icon {
+          font-size: 14px;
+          cursor: pointer;
+        }
+      }
+      .time,
+      .details,
+      .ip {
+        height: 14px;
+        line-height: 14px;
+        font-size: 14px;
+        .glr {
+          color: #909399;
+        }
+      }
+      .ip {
+        margin-top: 14px;
+        margin-bottom: 14px;
+      }
+      .details {
+        height: 24px;
+        line-height: 24px;
+        .success {
+          color: #2d67e3;
+        }
+        .error {
+          color: #afb4bf;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/authorityManagement/css/role.scss

@@ -0,0 +1,63 @@
+.authorityPower {
+  padding: 24px;
+  height: calc(100% - 24px);
+}
+.addApp-form {
+  background: #ffffff;
+  border-radius: 4px;
+  padding: 30px 68px 32px 24px;
+  .title {
+    font-size: 20px;
+    font-family: Microsoft YaHei;
+    font-weight: bold;
+    color: #303133;
+    .isqy {
+      span {
+        font-weight: 400;
+        font-size: 14px;
+        margin: 0 28px 0 42px;
+      }
+    }
+  }
+  .addApp-form-title{
+    line-height: 32px;
+  }
+  .addApp-form-content {
+    margin-top: 30px;
+    ::v-deep .form {
+      .el-form-item {
+        margin-bottom: 0;
+        margin-right: 40px;
+      }
+      .el-input__inner {
+        height: 32px;
+        line-height: 32px;
+        min-width: 184px;
+      }
+      .content {
+        .el-form-item__content {
+          flex: 1;
+        }
+        .el-form-item__label {
+          margin-left: 27px;
+        }
+      }
+    }
+  }
+}
+.power-content {
+  margin-top: 24px;
+  height: 704px;
+  .part{
+    height: 704px;
+  }
+  // ::v-deep .hucRole {
+  //   box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
+  // }
+  ::v-deep .hucPower {
+    height: calc(100% - 280px - 24px);
+    .paren_list {
+      margin-bottom: 23px;
+    }
+  }
+}

src/views/authorityManagement/index.vue

@@ -0,0 +1,13 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-11-26 09:25:16
+ * @LastEditTime: 2021-11-29 10:12:53
+ * @LastEditors: Please set LastEditors
+ * @Description: 权限管理
+ * @FilePath: \Foshan4A2.0\src\views\authorityManagement\index.vue
+-->
+<template>
+  <div class="authority">
+    <router-view />
+  </div>
+</template>

src/views/authorityManagement/minixs/roleData.js

@@ -0,0 +1,68 @@
+/*
+ * @Author: your name
+ * @Date: 2021-12-24 11:36:07
+ * @LastEditTime: 2022-02-09 10:59:01
+ * @LastEditors: Please set LastEditors
+ * @Description: 权限公用
+ * @FilePath: \Foshan4A2.0\src\views\authorityManagement\minixs\roleData.js
+ */
+import { QueryRole, DeleteRole } from '@/api/apiAuthority'
+
+export default {
+  data () {
+    return {
+      dataList: []
+    }
+  },
+  created () {
+    // this.gueryRole()
+  },
+  methods: {
+    //获取列表数据
+    async gueryRole (obj) {
+      try {
+        this.loading = true
+        const res = await QueryRole(obj)
+        if (res.code === 0) {
+          const datas = res.returnData.records
+          const num = res.returnData.pages
+          datas.forEach(item => {
+            item.isauto = item.Status == 1 ? true : false
+          })
+          this.dataList.push(datas)
+          const arrs = this.dataList.flat()
+          const msgs = _.unionBy(arrs, "RoleId")
+          this.arrs = msgs
+          this.total = num
+          this.loading = false
+        } else {
+          this.$message.error(res.message)
+          this.loading = false
+        }
+      } catch (error) {
+        console.log('出错了', error)
+        this.loading = false
+      }
+    },
+    //删除角色
+    async deleteRole (id, num) {
+      try {
+        const res = await DeleteRole({
+          RoleId: id
+        })
+        if (res.code === 0) {
+          this.flag = false
+          this.$message.success(res.message)
+          this.arrs.splice(num, 1)
+          this.num = null
+        } else {
+          this.flag = false
+          this.$message.error(res.message)
+        }
+      } catch (error) {
+        this.flag = false
+        console.log('出错了', error)
+      }
+    }
+  }
+}

src/views/authorityManagement/minixs/treeData.js

@@ -0,0 +1,104 @@
+/*
+ * @Author: your name
+ * @Date: 2021-12-22 17:00:22
+ * @LastEditTime: 2022-02-15 10:16:36
+ * @LastEditors: Please set LastEditors
+ * @Description: 获取权限树
+ * @FilePath: \Foshan4A2.0\src\views\authorityManagement\minixs\treeData.js
+ */
+import { translateDataToTreeAll } from '@/utils/validate'
+import { GetAuthTree } from '@/api/apiAuthority'
+
+export default {
+  data () {
+    return {
+      dataList: {}
+    }
+  },
+  created () {
+    // this.getAuthTree()
+  },
+  methods: {
+    async getAuthTree (name = '') {
+      try {
+        const result = await GetAuthTree({
+          "QueryName": name
+        })
+        if (result.code === 0 && result.returnData.length) {
+          result.returnData.forEach(item => {
+            item.flag = item.Status === 1 ? true : false
+          })
+          const obj = {
+            AuthId: -1,
+            AuthName: "所有权限",
+            QueryTarget: 0,
+            Status: 0,
+            UpAuthId: -1,
+            Type: 0,
+            disabled: true,
+            children: translateDataToTreeAll(result.returnData, 'UpAuthId', 'AuthId')
+          }
+          this.dataList = obj
+          this.dataArr = result.returnData;
+          this.dataArr.push({
+            AuthId: -1,
+            AuthName: "所有权限",
+            QueryTarget: 0,
+            Status: 0,
+            UpAuthId: -2,
+            Type: 0,
+            disabled: true,
+            children: []
+          }
+          )
+        } else {
+          const obj = {
+            AuthId: -1,
+            AuthName: "所有权限",
+            QueryTarget: 0,
+            Status: 0,
+            UpAuthId: -2,
+            Type: 0,
+            disabled: true,
+            children: []
+          }
+          this.dataList = obj
+          this.dataArr.push({
+            AuthId: -1,
+            AuthName: "所有权限",
+            QueryTarget: 0,
+            Status: 0,
+            UpAuthId: -2,
+            Type: 0,
+            disabled: true,
+            children: []
+          }
+          )
+        }
+      } catch (error) {
+        const obj = {
+          AuthId: -1,
+          AuthName: "所有权限",
+          QueryTarget: 0,
+          Status: 0,
+          UpAuthId: -2,
+          Type: 0,
+          disabled: true,
+          children: []
+        }
+        this.dataList = obj
+        this.dataArr.push({
+          AuthId: -1,
+          AuthName: "所有权限",
+          QueryTarget: 0,
+          Status: 0,
+          UpAuthId: -2,
+          Type: 0,
+          disabled: true,
+          children: []
+        }
+        )
+      }
+    }
+  }
+}