角色授权管理修改

src/pages/appfun-auth-manage/role-auth-manage/DataConfig.js

@@ -1,56 +1,56 @@
-import { roleViewApplication } from '@/api/role-auth-info';
+import { roleViewApplication } from "@/api/role-auth-info"
 export const userConditionForm = [
-  {
-    label: '单位名称',
-    name: 'orgId',
-    op: '=',
-    value: '',
-    apiName: 'getOrgTree',
-    nodeKey: 'id',
-    type: 'APP',
-    component: 'SelectOrgTree',
-    placeholder: '请选择单位名称'
-  },
-  {
-    label: '姓名',
-    name: 'name',
-    op: 'like',
-    value: '',
-    component: 'ElInput',
-    attr: {
-      style: 'width: 130px'
+    {
+        label: "单位名称",
+        name: "orgId",
+        op: "=",
+        value: "",
+        apiName: "getOrgTree",
+        nodeKey: "id",
+        type: "APP",
+        component: "SelectOrgTree",
+        placeholder: "请选择单位名称"
+    },
+    {
+        label: "姓名",
+        name: "name",
+        op: "like",
+        value: "",
+        component: "ElInput",
+        attr: {
+            style: "width: 130px"
+        }
     }
-  }
-];
+]
 
 export const userTableHeader = [
-  { label: '姓名', prop: 'name' },
-  { label: '身份证号码', prop: 'idcard' },
-  { label: '用户类型', width: '100px', prop: 'userType', enum: 'UserTypeEnum' },
-  { label: '单位名称', prop: 'orgName' },
-  { label: '警种', prop: 'policeCategory', code: 'T_MD_POLICE_TYPE' },
-  { label: '业务域标签', prop: 'policeBusiness', custom: true }
-];
+    { label: "姓名", prop: "name" },
+    { label: "身份证号码", prop: "idcard" },
+    { label: "用户类型", width: "100px", prop: "userType", enum: "UserTypeEnum" },
+    { label: "单位名称", prop: "orgName" },
+    { label: "警种", prop: "policeCategory", code: "T_MD_POLICE_TYPE" },
+    { label: "业务域", prop: "policeBusiness", custom: true }
+]
 
 export const roleConditionForm = [
-  {
-    label: '应用系统名称',
-    name: 'appName',
-    op: '=',
-    value: '',
-    component: 'SelectApp',
-    apiUrl: roleViewApplication,
-    valueName: 'name',
-    labelName: 'name'
-  },
-  {
-    label: '角色名称',
-    name: 'roleName',
-    op: 'like',
-    value: '',
-    component: 'ElInput',
-    attr: {
-      style: 'width: 150px'
+    {
+        label: "应用系统名称",
+        name: "appName",
+        op: "=",
+        value: "",
+        component: "SelectApp",
+        apiUrl: roleViewApplication,
+        valueName: "name",
+        labelName: "name"
+    },
+    {
+        label: "角色名称",
+        name: "roleName",
+        op: "like",
+        value: "",
+        component: "ElInput",
+        attr: {
+            style: "width: 150px"
+        }
     }
-  }
-];
+]

src/pages/appfun-auth-manage/role-auth-manage/index.vue

@@ -1,8 +1,3 @@
-<!--
-     人员授权管理
-    @Author: laiyh
-    @Date:  2020-07-31
--->
 <template>
     <el-tabs v-model="activeName" type="card" @tab-click="handleTabChange">
         <el-tab-pane label="人员视图" name="persionList">
@@ -15,8 +10,8 @@
 </template>
 
 <script>
-import PersionView from "./persionView";
-import RoleView from "./roleView";
+import PersionView from "./persionView.vue"
+import RoleView from "./roleView.vue"
 export default {
     name: "index",
     components: {
@@ -31,26 +26,26 @@ export default {
             activeName: "persionList",
             isFirst: true,
             isSecond: false
-        };
+        }
     },
     // 计算属性
     computed: {},
     // 方法
     methods: {
         handleTabChange() {
-            const { activeName } = this;
+            const { activeName } = this
             if (activeName === "persionList") {
-                this.isFirst = true;
-                this.isSecond = false;
+                this.isFirst = true
+                this.isSecond = false
             } else if (activeName === "roleList") {
-                this.isFirst = false;
-                this.isSecond = true;
+                this.isFirst = false
+                this.isSecond = true
             }
         }
     },
     // 创建组件时调用
     created() {}
-};
+}
 </script>
 
 <style scoped lang="scss">

src/pages/appfun-auth-manage/role-auth-manage/persionView.vue

@@ -1,277 +1,305 @@
 <template>
-  <dg-row gutter="1rem">
-    <scroll-card header="人员列表" contentHeight="calc(100vh - 19rem)" :colSpan="11">
-      <!-- 人员搜索栏 -->
-      <search-bar :conditionForm="userConditionForm" @submitSearch="receiveSearch"></search-bar>
-      <!-- 人员列表 -->
-      <new-table
-        ref="table"
-        :tableUrl="userTableUrl"
-        :tableHeader="userTableHeader"
-        :condition="condition"
-        @handleRowClick="handleRowClick"
-      >
-        <template #policeBusiness="{ row }">
-          {{ transferBusinessTag(row.policeBusiness) }}
-        </template>
-      </new-table>
-    </scroll-card>
-    <scrollCard header="角色列表" contentHeight="calc(100vh - 19rem)" :colSpan="13">
-      <!-- 角色搜索栏 -->
-      <search-bar :conditionForm="roleConditionForm" @submitSearch="receiveRoleSearch"></search-bar>
-      <!-- 角色操作栏 -->
-      <operate-bar :pageOptList="pageOptList" @submitPageOpt="receviceOpt"></operate-bar>
-      <!-- 角色列表 -->
-      <dg-table
-        ref="myRoleTable"
-        :data="tableData"
-        :pagination="false"
-        :span-method="objectSpanMethod"
-        border
-        style="width: 100%"
-        overflow="tooltip"
-        @selection-change="handleSelectChange"
-      >
-        <dg-table-column prop="appName" label="应用系统名称" min-width="120" align="center"> </dg-table-column>
-        <dg-table-column type="selection" width="50" align="center"></dg-table-column>
-        <dg-table-column prop="name" label="角色名称" width="100" align="center"> </dg-table-column>
-        <dg-table-column prop="roleLevel" label="角色层级" code="DM_ROLE_LEVEL" width="100" align="center">
-        </dg-table-column>
-        <dg-table-column prop="policeCategory" label="警种" code="T_MD_POLICE_TYPE" align="center"> </dg-table-column>
-        <dg-table-column
-          prop="roleBusiness"
-          label="业务域标签"
-          min-width="100"
-          code="DM_POLICE_BUSINESS"
-          align="center"
-        >
-          <template slot-scope="{ row }">
-            {{ row.roleBusiness }}
-          </template>
-        </dg-table-column>
-        <dg-table-column prop="activeTime" label="权限有效期" min-width="90" align="center">
-          <template slot-scope="{ row }">
-            <a href="javascript:;" @click="handleValidateChoose(row)">{{ row.activeTime }}</a>
-          </template>
-        </dg-table-column>
-      </dg-table>
-    </scrollCard>
-  </dg-row>
+    <dg-row gutter="1rem">
+        <scroll-card header="人员列表" contentHeight="calc(100vh - 19rem)" :colSpan="11">
+            <!-- 人员搜索栏 -->
+            <search-bar :conditionForm="userConditionForm" @submitSearch="receiveSearch"></search-bar>
+            <!-- 人员列表 -->
+            <new-table
+                ref="table"
+                :tableUrl="userTableUrl"
+                :tableHeader="userTableHeader"
+                :condition="condition"
+                @handleRowClick="handleRowClick"
+            >
+                <template #policeBusiness="{ row }">
+                    {{ transferBusinessTag(row.policeBusiness) }}
+                </template>
+            </new-table>
+        </scroll-card>
+        <scrollCard header="角色列表" contentHeight="calc(100vh - 19rem)" :colSpan="13">
+            <!-- 角色搜索栏 -->
+            <search-bar :conditionForm="roleConditionForm" @submitSearch="receiveRoleSearch"></search-bar>
+            <!-- 角色操作栏 -->
+            <operate-bar :pageOptList="pageOptList" @submitPageOpt="receviceOpt"></operate-bar>
+            <!-- 角色列表 -->
+            <dg-table
+                v-loading="myRoleTableLoading"
+                ref="myRoleTable"
+                :data="tableData"
+                :pagination="false"
+                :span-method="objectSpanMethod"
+                border
+                style="width: 100%"
+                overflow="tooltip"
+                @selection-change="handleSelectChange"
+            >
+                <dg-table-column type="selection" width="50" align="center"></dg-table-column>
+                <dg-table-column prop="appName" label="应用系统名称" min-width="120" align="center"> </dg-table-column>
+                <dg-table-column prop="name" label="角色名称" width="100" align="center">
+                    <template slot-scope="{ row }">
+                        <span style="cursor: pointer;color: #1890ff;" @click="viewRoleMenu(row, $event)">
+                            {{ row.name }}
+                        </span>
+                    </template>
+                </dg-table-column>
+                <dg-table-column prop="code" label="角色代码" width="100" align="center"> </dg-table-column>
+                <dg-table-column prop="roleLevel" label="角色层级" code="DM_ROLE_LEVEL" width="100" align="center">
+                </dg-table-column>
+                <dg-table-column prop="policeCategory" label="警种" code="T_MD_POLICE_TYPE" align="center">
+                </dg-table-column>
+                <dg-table-column
+                    prop="roleBusiness"
+                    label="业务域"
+                    min-width="100"
+                    code="DM_POLICE_BUSINESS"
+                    align="center"
+                >
+                    <template slot-scope="{ row }">
+                        {{ row.roleBusiness }}
+                    </template>
+                </dg-table-column>
+                <dg-table-column prop="activeTime" label="权限有效期" min-width="90" align="center">
+                    <template slot-scope="{ row }">
+                        <a href="javascript:;" @click="handleValidateChoose(row)">{{ row.activeTime }}</a>
+                    </template>
+                </dg-table-column>
+            </dg-table>
+        </scrollCard>
+    </dg-row>
 </template>
 
 <script>
-import newTable from '@/components/new-table';
-import { mapGetters } from 'vuex';
-import * as roleAuthInfoApi from '@/api/role-auth-info';
-import Termvalidate from './term-validity';
-import transferBusinessTagMixin from '@/mixins/transfer-business-tag';
-import searchBar from '@/components/search-bar';
-import { searchOpt } from '@/mixins/page-opt';
-import { userConditionForm, userTableHeader, roleConditionForm } from './DataConfig';
-import operateBar from '@/components/operate-bar';
-import scrollCard from '@/components/scroll-card';
+import newTable from "@/components/new-table"
+import { mapGetters } from "vuex"
+import * as roleAuthInfoApi from "@/api/role-auth-info"
+import Termvalidate from "./term-validity"
+import transferBusinessTagMixin from "@/mixins/transfer-business-tag"
+import searchBar from "@/components/search-bar"
+import { searchOpt } from "@/mixins/page-opt"
+import { userConditionForm, userTableHeader, roleConditionForm } from "./DataConfig.js"
+import operateBar from "@/components/operate-bar"
+import scrollCard from "@/components/scroll-card"
+import roleMenuTree from "./role-menu-tree.vue"
 
 export default {
-  name: 'role-list',
-  // 接收父页面传过来的属性
-  props: {},
-  components: {
-    newTable,
-    searchBar,
-    operateBar,
-    scrollCard
-  },
-  mixins: [transferBusinessTagMixin, searchOpt],
+    name: "role-list",
+    // 接收父页面传过来的属性
+    props: {},
+    components: {
+        newTable,
+        searchBar,
+        operateBar,
+        scrollCard
+    },
+    mixins: [transferBusinessTagMixin, searchOpt],
 
-  // 页面数据绑定
-  data() {
-    return {
-      userTableUrl: roleAuthInfoApi.staffUserPage,
-      userConditionForm,
-      userTableHeader,
-      roleConditionForm,
-      pageOptList: ['保存'],
-      r_titleData: [
-        { label: '系统名称' },
-        { type: 'selection', width: '50px', label: '' },
-        { label: '角色名称' },
-        { label: '角色层级' },
-        { label: '警种' },
-        { label: '业务域标签' },
-        {
-          label: '有效期至',
-          'class-name': 'a-link',
-          state: [{ label: '长期有效', value: null }]
-        }
-      ],
-      roleCondition: {
-        appName: '',
-        roleName: '',
-        userId: '',
-        orgId: ''
-      },
-      tableData: [],
-      selections: [],
-      deleteIds: [],
-      perRow: null,
-      count: 0,
-      tagTree: []
-    };
-  },
-  // 计算属性
-  computed: {
-    ...mapGetters(['user'])
-  },
-  // 方法
-  methods: {
-    // 构建新的一级标签树
-    setNewTagTree() {
-      let newTagTree = [];
-      for (let j = 0; j < this.tagTree.length; j++) {
-        const item = this.tagTree[j];
-        if (item.child && item.parent) {
-          newTagTree = [...newTagTree, ...item.child];
+    // 页面数据绑定
+    data() {
+        return {
+            userTableUrl: roleAuthInfoApi.staffUserPage,
+            userConditionForm,
+            userTableHeader,
+            roleConditionForm,
+            pageOptList: ["保存"],
+            r_titleData: [
+                { label: "系统名称" },
+                { type: "selection", width: "50px", label: "" },
+                { label: "角色名称" },
+                { label: "角色层级" },
+                { label: "警种" },
+                { label: "业务域" },
+                {
+                    label: "有效期至",
+                    "class-name": "a-link",
+                    state: [{ label: "长期有效", value: null }]
+                }
+            ],
+            roleCondition: {
+                appName: "",
+                roleName: "",
+                userId: "",
+                orgId: ""
+            },
+            tableData: [],
+            selections: [],
+            deleteIds: [],
+            perRow: null,
+            count: 0,
+            tagTree: [],
+            myRoleTableLoading: false
         }
-      }
-      return newTagTree;
-    },
-    // 人员列表行点击
-    handleRowClick(row) {
-      this.roleCondition.userId = row.id;
-      this.roleCondition.orgId = row.orgId;
-      this.handleSearchRoleList();
     },
-    receiveRoleSearch(val) {
-      for (const key in val) {
-        this.roleCondition[key] = val[key].value;
-      }
-      this.handleSearchRoleList();
+    // 计算属性
+    computed: {
+        ...mapGetters(["user"])
     },
-    receviceOpt(opt, row) {
-      this.handleSaveStaff();
-    },
-    handleSearchRoleList() {
-      const that = this;
-      const { roleCondition } = that;
-      this.tableData = [];
-      this.selections = [];
-      this.deleteIds = [];
-      roleAuthInfoApi.getStaffRoleList(roleCondition).then((res) => {
-        that.tableData = res;
-        that.$nextTick(() => {
-          res.forEach((row) => {
-            if (row.cause == 1) {
-              this.$refs.myRoleTable.toggleRowSelection(row, true);
+    // 方法
+    methods: {
+        viewRoleMenu(row, event) {
+            event.stopPropagation()
+            this.$dgLayer({
+                title: "功能清单",
+                area: ["540px", "500px"],
+                content: roleMenuTree,
+                props: {
+                    row
+                }
+            })
+        },
+        // 构建新的一级标签树
+        setNewTagTree() {
+            let newTagTree = []
+            for (let j = 0; j < this.tagTree.length; j++) {
+                const item = this.tagTree[j]
+                if (item.child && item.parent) {
+                    newTagTree = [...newTagTree, ...item.child]
+                }
             }
-          });
-        });
-
-        that.setrowspans();
-      });
-    },
-    handleSaveStaff() {
-      const that = this;
-      if (this.selections.length == 0) {
-        this.tableData.forEach((dd) => {
-          this.deleteIds.push({
-            id: dd.id,
-            appId: dd.appId
-          });
-        });
-      } else {
-        for (let i = 0; i < this.tableData.length; i++) {
-          let flag = true;
-          for (let j = 0; j < this.selections.length; j++) {
-            if (this.tableData[i].id == this.selections[j].id) {
-              flag = false;
-              break;
+            return newTagTree
+        },
+        // 人员列表行点击
+        handleRowClick(row) {
+            this.roleCondition.userId = row.id
+            this.roleCondition.orgId = row.orgId
+            this.handleSearchRoleList()
+        },
+        receiveRoleSearch(val) {
+            for (const key in val) {
+                this.roleCondition[key] = val[key].value
             }
-          }
-          if (flag) {
-            this.deleteIds.push({
-              id: this.tableData[i].id,
-              appId: this.tableData[i].appId
-            });
-          }
-        }
-      }
-      const queryParams = {
-        saveIds: this.selections,
-        deleteIds: this.deleteIds,
-        userId: this.roleCondition.userId,
-        orgId: this.roleCondition.orgId
-      };
-      roleAuthInfoApi
-        .saveRoleStaff(queryParams)
-        .then((res) => {
-          that.$message.success('保存成功！');
-        })
-        .catch((err) => {
-          that.$message.error(err);
-        });
-    },
-    handleSelectChange(selection) {
-      this.selections = selection;
-      this.deleteIds = [];
-    },
-    // 合并行
-    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
-      if (columnIndex === 0) {
-        return {
-          rowspan: row.rowspan,
-          colspan: 1
-        };
-      }
-    },
-    setrowspans() {
-      // 先给所有的数据都加一个v.rowspan = 1
-      this.tableData.forEach((v) => {
-        v.rowspan = 1;
-      });
-      // 双层循环
-      for (let i = 0; i < this.tableData.length; i++) {
-        // 内层循环，上面已经给所有的行都加了v.rowspan = 1
-        // 这里进行判断
-        // 如果当前行的id和下一行的id相等
-        // 就把当前v.rowspan + 1
-        // 下一行的v.rowspan - 1
-        for (let j = i + 1; j < this.tableData.length; j++) {
-          //此处可根据相同字段进行合并，此处是根据的id
-          if (this.tableData[i].appName === this.tableData[j].appName) {
-            this.tableData[i].rowspan++;
-            this.tableData[j].rowspan--;
-          }
-        }
-        // 这里跳过已经重复的数据
-        i = i + this.tableData[i].rowspan - 1;
-      }
-    },
+            this.handleSearchRoleList()
+        },
+        receviceOpt(opt, row) {
+            this.handleSaveStaff()
+        },
+        handleSearchRoleList() {
+            this.myRoleTableLoading = true
+            const that = this
+            const { roleCondition } = that
+            this.tableData = []
+            this.selections = []
+            this.deleteIds = []
+            roleAuthInfoApi
+                .getStaffRoleList(roleCondition)
+                .then(res => {
+                    that.tableData = res
+                    that.$nextTick(() => {
+                        res.forEach(row => {
+                            if (row.cause == 1) {
+                                this.$refs.myRoleTable.toggleRowSelection(row, true)
+                            }
+                        })
+                    })
 
-    // 有效期选择
-    handleValidateChoose(row) {
-      const that = this;
-      const layer = that.$dgLayer({
-        title: '有效期选择',
-        area: ['540px', '300px'],
-        shade: [0.4, '#FFF'],
-        content: Termvalidate,
-        props: {
-          operatorRow: row
+                    that.setrowspans()
+                })
+                .finally(() => {
+                    this.myRoleTableLoading = false
+                })
+        },
+        handleSaveStaff() {
+            const that = this
+            if (this.selections.length == 0) {
+                this.tableData.forEach(dd => {
+                    this.deleteIds.push({
+                        id: dd.id,
+                        appId: dd.appId
+                    })
+                })
+            } else {
+                for (let i = 0; i < this.tableData.length; i++) {
+                    let flag = true
+                    for (let j = 0; j < this.selections.length; j++) {
+                        if (this.tableData[i].id == this.selections[j].id) {
+                            flag = false
+                            break
+                        }
+                    }
+                    if (flag) {
+                        this.deleteIds.push({
+                            id: this.tableData[i].id,
+                            appId: this.tableData[i].appId
+                        })
+                    }
+                }
+            }
+            const queryParams = {
+                saveIds: this.selections,
+                deleteIds: this.deleteIds,
+                userId: this.roleCondition.userId,
+                orgId: this.roleCondition.orgId
+            }
+            roleAuthInfoApi
+                .saveRoleStaff(queryParams)
+                .then(res => {
+                    that.$message.success("保存成功！")
+                })
+                .catch(err => {
+                    that.$message.error(err)
+                })
         },
-        on: {
-          success: function (res) {
-            layer.closeAll(layer.dialogIndex);
-            row.activeTime = res.activeTime;
-          }
+        handleSelectChange(selection) {
+            this.selections = selection
+            this.deleteIds = []
+        },
+        // 合并行
+        objectSpanMethod({ row, column, rowIndex, columnIndex }) {
+            if (columnIndex === 0) {
+                return {
+                    rowspan: row.rowspan,
+                    colspan: 1
+                }
+            }
+        },
+        setrowspans() {
+            // 先给所有的数据都加一个v.rowspan = 1
+            this.tableData.forEach(v => {
+                v.rowspan = 1
+            })
+            // 双层循环
+            for (let i = 0; i < this.tableData.length; i++) {
+                // 内层循环，上面已经给所有的行都加了v.rowspan = 1
+                // 这里进行判断
+                // 如果当前行的id和下一行的id相等
+                // 就把当前v.rowspan + 1
+                // 下一行的v.rowspan - 1
+                for (let j = i + 1; j < this.tableData.length; j++) {
+                    // 此处可根据相同字段进行合并，此处是根据的id
+                    if (this.tableData[i].appName === this.tableData[j].appName) {
+                        this.tableData[i].rowspan++
+                        this.tableData[j].rowspan--
+                    }
+                }
+                // 这里跳过已经重复的数据
+                i = i + this.tableData[i].rowspan - 1
+            }
+        },
+
+        // 有效期选择
+        handleValidateChoose(row) {
+            const that = this
+            const layer = that.$dgLayer({
+                title: "有效期选择",
+                area: ["540px", "300px"],
+                shade: [0.4, "#FFF"],
+                content: Termvalidate,
+                props: {
+                    operatorRow: row
+                },
+                on: {
+                    success: function(res) {
+                        layer.closeAll(layer.dialogIndex)
+                        row.activeTime = res.activeTime
+                    }
+                }
+            })
         }
-      });
-    }
-  },
-  // 创建组件时调用
-  created() {}
-};
+    },
+    // 创建组件时调用
+    created() {}
+}
 </script>
 
 <style lang="scss" scoped>
-@import url('./index.scss');
+@import url("./index.scss");
 </style>

src/pages/appfun-auth-manage/role-auth-manage/role-menu-tree.vue

@@ -0,0 +1,35 @@
+<template>
+    <div>
+        <dg-tree default-expand-all :data="menuData" node-key="id" :props="defaultProps"></dg-tree>
+        <dg-button v-footer @click="$emit('close')">关闭</dg-button>
+    </div>
+</template>
+
+<script>
+import * as funcResourceApi from "@/api/func-resource.js"
+export default {
+    props: {
+        row: Object
+    },
+    components: {},
+    data() {
+        return {
+            defaultProps: {
+                children: "children",
+                label: "name"
+            },
+            menuData: []
+        }
+    },
+    computed: {},
+    methods: {},
+    created() {
+        funcResourceApi.getRoleMenu(this.row.id).then(res => {
+            this.menuData = (res.data && res.data.content) || []
+        })
+    },
+    mounted() {}
+}
+</script>
+
+<style lang="scss"></style>

src/pages/appfun-auth-manage/role-auth-manage/roleView.vue

@@ -1,376 +1,398 @@
-<!--
-     人员授权管理-角色视图
-    @Author:laiyh
-    @Date:  2020-08-03
--->
 <template>
-  <dg-row gutter="1rem">
-    <dg-col :span="12">
-      <dg-card shadow="never" header="角色列表">
-        <!-- 角色搜索栏 -->
-        <search-bar
-          :conditionForm="roleConditionForm"
-          @submitSearch="receiveRoleSearch"
-          @submitCurrentApp="getCurrentApp"
-        ></search-bar>
-        <!-- 角色列表 -->
-        <new-table
-          ref="table"
-          :tableHeader="roleTableHeader"
-          :tableUrl="roleTableUrl"
-          :condition="roleCondition"
-          @handleRowClick="handleRoleRowClick"
-        >
-        </new-table>
-      </dg-card>
-    </dg-col>
-    <dg-col :span="12">
-      <dg-card shadow="never" header="人员列表">
-        <!-- 角色搜索栏 -->
-        <search-bar
-          :conditionForm="userConditionForm"
-          @submitSearch="receiveUserSearch"
-          @submitDefaultSearch="receiveUserDefaultCondition"
-        ></search-bar>
-        <!-- 角色操作栏 -->
-        <operate-bar :pageOptList="userOptList" @submitPageOpt="receviceOpt"></operate-bar>
-        <!-- 角色列表 -->
-        <dg-table
-          ref="userTable"
-          :condition="userCondition"
-          :url="userTableUrl"
-          row-key="id"
-          border
-          @selection-change="handleSelectChange"
-          :before-quest="handleBeforeQuest"
-          lazyLoad
-        >
-          <dg-table-column type="selection" reserve-selection width="50"></dg-table-column>
-          <!-- <dg-table-column type="index" label="序号" width="70"></dg-table-column> -->
-          <dg-table-column prop="name" align="center" width="120" label="姓名"></dg-table-column>
-          <dg-table-column prop="idcard" align="center" label="身份证号码"></dg-table-column>
-          <!-- <dg-table-column prop="orgName" align="center" label="单位名称"></dg-table-column> -->
-          <dg-table-column prop="userType" align="center" label="用户类型" enum='UserTypeEnum'></dg-table-column>
+    <dg-row gutter="1rem">
+        <dg-col :span="12">
+            <dg-card shadow="never" header="角色列表">
+                <!-- 角色搜索栏 -->
+                <search-bar
+                    :conditionForm="roleConditionForm"
+                    @submitSearch="receiveRoleSearch"
+                    @submitCurrentApp="getCurrentApp"
+                ></search-bar>
+                <!-- 角色列表 -->
+                <new-table
+                    ref="table"
+                    :tableHeader="roleTableHeader"
+                    :tableUrl="roleTableUrl"
+                    :condition="roleCondition"
+                    @handleRowClick="handleRoleRowClick"
+                >
+                    <template #name="{ row }">
+                        <span style="cursor: pointer;color: #1890ff;" @click="viewRoleMenu(row, $event)">
+                            {{ row.name }}
+                        </span>
+                    </template>
+                </new-table>
+            </dg-card>
+        </dg-col>
+        <dg-col :span="12">
+            <dg-card shadow="never" header="人员列表">
+                <!-- 角色搜索栏 -->
+                <search-bar
+                    :conditionForm="userConditionForm"
+                    @submitSearch="receiveUserSearch"
+                    @submitDefaultSearch="receiveUserDefaultCondition"
+                ></search-bar>
+                <!-- 角色操作栏 -->
+                <operate-bar :pageOptList="userOptList" @submitPageOpt="receviceOpt"></operate-bar>
+                <!-- 角色列表 -->
+                <dg-table
+                    ref="userTable"
+                    :condition="userCondition"
+                    :url="userTableUrl"
+                    row-key="id"
+                    border
+                    @selection-change="handleSelectChange"
+                    :before-quest="handleBeforeQuest"
+                    lazyLoad
+                >
+                    <dg-table-column type="selection" reserve-selection width="50"></dg-table-column>
+                    <!-- <dg-table-column type="index" label="序号" width="70"></dg-table-column> -->
+                    <dg-table-column prop="name" align="center" width="120" label="姓名"></dg-table-column>
+                    <dg-table-column prop="idcard" align="center" label="身份证号码"></dg-table-column>
+                    <!-- <dg-table-column prop="orgName" align="center" label="单位名称"></dg-table-column> -->
+                    <dg-table-column
+                        prop="userType"
+                        align="center"
+                        label="用户类型"
+                        enum="UserTypeEnum"
+                    ></dg-table-column>
 
-          <dg-table-column prop="policeCategory" align="center" code="T_MD_POLICE_TYPE" label="警种"></dg-table-column>
-          <dg-table-column prop="policeBusiness" align="center" label="业务域标签"></dg-table-column>
-          <dg-table-column label="权限有效期" width="120" align="center">
-            <template slot-scope="scope">
-              <a href="javascript:;" @click="handleValidateChoose(scope.row)">{{ scope.row.activeTime }}</a>
-            </template>
-          </dg-table-column>
-        </dg-table>
-      </dg-card>
-    </dg-col>
-  </dg-row>
+                    <dg-table-column
+                        prop="policeCategory"
+                        align="center"
+                        code="T_MD_POLICE_TYPE"
+                        label="警种"
+                    ></dg-table-column>
+                    <dg-table-column prop="policeBusiness" align="center" label="业务域"></dg-table-column>
+                    <dg-table-column label="权限有效期" width="120" align="center">
+                        <template slot-scope="scope">
+                            <a href="javascript:;" @click="handleValidateChoose(scope.row)">{{
+                                scope.row.activeTime
+                            }}</a>
+                        </template>
+                    </dg-table-column>
+                </dg-table>
+            </dg-card>
+        </dg-col>
+    </dg-row>
 </template>
 
 <script>
-import newTable from '@/components/new-table';
-import TermValid from './term-validity';
-import * as roleAuthApi from '@/api/role-auth-info';
-import searchBar from '@/components/search-bar';
-import operateBar from '@/components/operate-bar';
-import { searchOpt } from '@/mixins/page-opt';
-import { userConditionForm } from './DataConfig';
+import newTable from "@/components/new-table"
+import TermValid from "./term-validity"
+import * as roleAuthApi from "@/api/role-auth-info"
+import searchBar from "@/components/search-bar"
+import operateBar from "@/components/operate-bar"
+import { searchOpt } from "@/mixins/page-opt"
+import { userConditionForm } from "./DataConfig"
+import roleMenuTree from "./role-menu-tree.vue"
 export default {
-  name: 'role-list',
-  components: {
-    newTable,
-    searchBar,
-    operateBar
-  },
-  mixins: [searchOpt],
-  // 接收父页面传过来的属性
-  props: {},
-  // 页面数据绑定
-  data() {
-    return {
-      roleCondition: {},
-      roleConditionForm: [
-        {
-          label: '应用系统名称',
-          name: 'appId',
-          op: '=',
-          value: '',
-          component: 'SelectApp',
-          apiUrl: roleAuthApi.roleViewApplication,
-          valueName: 'id',
-          labelName: 'name'
-        },
-        {
-          label: '角色名称',
-          name: 'name',
-          op: 'like',
-          value: '',
-          component: 'ElInput',
-          attr: {
-            style: 'width: 150px'
-          }
+    name: "role-list",
+    components: {
+        newTable,
+        searchBar,
+        operateBar
+    },
+    mixins: [searchOpt],
+    // 接收父页面传过来的属性
+    props: {},
+    // 页面数据绑定
+    data() {
+        return {
+            roleCondition: {},
+            roleConditionForm: [
+                {
+                    label: "应用系统名称",
+                    name: "appId",
+                    op: "=",
+                    value: "",
+                    component: "SelectApp",
+                    apiUrl: roleAuthApi.roleViewApplication,
+                    valueName: "id",
+                    labelName: "name"
+                },
+                {
+                    label: "角色名称",
+                    name: "name",
+                    op: "like",
+                    value: "",
+                    component: "ElInput",
+                    attr: {
+                        style: "width: 150px"
+                    }
+                }
+            ],
+            roleTableHeader: [
+                { label: "应用系统名称", prop: "appName" },
+                { label: "角色名称", prop: "name", custom: true },
+                { label: "角色代码", prop: "code" },
+                { label: "角色层级", prop: "roleLevel", code: "DM_ROLE_LEVEL" },
+                { label: "警种", prop: "policeCategory", code: "T_MD_POLICE_TYPE" },
+                { label: "业务域", prop: "roleBusiness", code: "DM_POLICE_BUSINESS" }
+            ],
+            roleTableUrl: roleAuthApi.getRoleListByAppid,
+            userConditionForm: [
+                {
+                    label: "单位名称",
+                    name: "orgId",
+                    op: "=",
+                    value: "",
+                    apiName: "getOrgTree",
+                    nodeKey: "id",
+                    type: "APP",
+                    component: "SelectOrgTree",
+                    placeholder: "请选择单位名称",
+                    defaultSelectRoot: true
+                },
+                {
+                    label: "姓名",
+                    name: "name",
+                    op: "like",
+                    value: "",
+                    component: "ElInput",
+                    attr: {
+                        style: "width: 130px"
+                    }
+                }
+            ],
+            userOptList: ["保存"],
+            userCondition: {
+                roleId: {
+                    value: "",
+                    op: "="
+                },
+                orgId: {
+                    value: "",
+                    op: "="
+                },
+                name: {
+                    value: "",
+                    op: "like"
+                }
+            },
+            userTableUrl: roleAuthApi.userTableUrl,
+            checkUserList: [],
+            deleteIds: [],
+
+            // 点击动作object
+            saveRoleAuthParams: {
+                appId: "", // 应用id
+                orgId: "", // 机构id
+                roleId: "", // 角色id
+                appOrgId: "", // 应用绑定的机构id
+                staffList: "",
+                staffJson: "",
+                delStaffJson: ""
+            },
+            page: 0,
+            size: 10,
+            total: 0,
+            updateUsers: []
         }
-      ],
-      roleTableHeader: [
-        { label: '角色名称', prop: 'name' },
-        { label: '角色层级', prop: 'roleLevel', code: 'DM_ROLE_LEVEL' },
-        { label: '应用系统名称', prop: 'appName' },
-        { label: '警种', prop: 'policeCategory', code: 'T_MD_POLICE_TYPE' },
-        { label: '业务域标签', prop: 'roleBusiness', code: 'DM_POLICE_BUSINESS' }
-      ],
-      roleTableUrl: roleAuthApi.getRoleListByAppid,
-      userConditionForm: [
-        {
-          label: '单位名称',
-          name: 'orgId',
-          op: '=',
-          value: '',
-          apiName: 'getOrgTree',
-          nodeKey: 'id',
-          type: 'APP',
-          component: 'SelectOrgTree',
-          placeholder: '请选择单位名称',
-          defaultSelectRoot: true
+    },
+    // 计算属性
+    computed: {},
+    // 方法
+    methods: {
+        viewRoleMenu(row, event) {
+            event.stopPropagation()
+            this.$dgLayer({
+                title: "功能清单",
+                area: ["540px", "500px"],
+                content: roleMenuTree,
+                props: {
+                    row
+                }
+            })
         },
-        {
-          label: '姓名',
-          name: 'name',
-          op: 'like',
-          value: '',
-          component: 'ElInput',
-          attr: {
-            style: 'width: 130px'
-          }
-        }
-      ],
-      userOptList: ['保存'],
-      userCondition: {
-        roleId: {
-          value: '',
-          op: '='
+        receviceOpt(opt, row) {
+            if (opt == "保存") {
+                this.handleSave()
+            }
         },
-        orgId: {
-          value: '',
-          op: '='
+        getCurrentApp(item) {
+            this.currentAppItem = item
+        },
+        receiveRoleSearch(val) {
+            this.roleCondition = val
+            this.handleSearch()
+            this.saveRoleAuthParams.appOrgId = this.currentAppItem.appOrgId
+            this.saveRoleAuthParams.appId = this.currentAppItem.id
+        },
+        receiveUserDefaultCondition(val) {
+            for (const key in val) {
+                this.userCondition[key].value = val[key].value
+            }
+            this.saveRoleAuthParams.orgId = this.userCondition.orgId.value
+        },
+        loadUserTable() {
+            this.selectUserList = []
+            this.$refs.userTable.searchForm()
+        },
+        receiveUserSearch(val) {
+            for (const key in val) {
+                this.userCondition[key].value = val[key].value
+            }
+            this.saveRoleAuthParams.orgId = this.userCondition.orgId.value
+            if (!this.handleValid()) return
+            this.loadUserTable()
+        },
+        async handleRoleRowClick({ id, appId }) {
+            this.saveRoleAuthParams.roleId = this.userCondition.roleId.value = id
+            this.saveRoleAuthParams.appId = appId
+            this.$refs.userTable.clearAll()
+            await this.getUserChecked()
+            this.loadUserTable()
         },
-        name: {
-          value: '',
-          op: 'like'
-        }
-      },
-      userTableUrl: roleAuthApi.userTableUrl,
-      checkUserList: [],
-      deleteIds: [],
-
-      // 点击动作object
-      saveRoleAuthParams: {
-        appId: '', // 应用id
-        orgId: '', // 机构id
-        roleId: '', // 角色id
-        appOrgId: '', // 应用绑定的机构id
-        staffList: '',
-        staffJson: '',
-        delStaffJson: ''
-      },
-      page: 0,
-      size: 10,
-      total: 0,
-      updateUsers: []
-    };
-  },
-  // 计算属性
-  computed: {},
-  // 方法
-  methods: {
-    receviceOpt(opt, row) {
-      if (opt == '保存') {
-        this.handleSave();
-      }
-    },
-    getCurrentApp(item) {
-      this.currentAppItem = item;
-    },
-    receiveRoleSearch(val) {
-      this.roleCondition = val;
-      this.handleSearch();
-      this.saveRoleAuthParams.appOrgId = this.currentAppItem.appOrgId;
-      this.saveRoleAuthParams.appId = this.currentAppItem.id;
-    },
-    receiveUserDefaultCondition(val) {
-      for (const key in val) {
-        this.userCondition[key].value = val[key].value;
-      }
-      this.saveRoleAuthParams.orgId = this.userCondition.orgId.value;
-    },
-    loadUserTable() {
-      this.selectUserList = [];
-      this.$refs.userTable.searchForm();
-      
-    },
-    receiveUserSearch(val) {
-      for (const key in val) {
-        this.userCondition[key].value = val[key].value;
-      }
-      this.saveRoleAuthParams.orgId = this.userCondition.orgId.value;
-      if (!this.handleValid()) return;
-      this.loadUserTable();
 
-    },
-    async handleRoleRowClick({ id, appId }) {
-      this.saveRoleAuthParams.roleId = this.userCondition.roleId.value = id;
-      this.saveRoleAuthParams.appId = appId;
-      this.$refs.userTable.clearAll();
-      await this.getUserChecked();
-      this.loadUserTable();
-    },
+        getUserChecked() {
+            return new Promise(resolve => {
+                const { orgId, roleId, appId } = this.saveRoleAuthParams
+                // 获取人员列表选中记录
+                const queryCheckedParams = {
+                    orgId,
+                    roleId,
+                    appId,
+                    type: "role"
+                }
+                roleAuthApi.getChecked(queryCheckedParams).then(res => {
+                    this.checkUserList = res
+                    resolve(res)
+                })
+            })
+        },
+        handleValid() {
+            if (!this.saveRoleAuthParams.roleId) {
+                this.$message.warning("请选择角色!")
+                return false
+            }
+            if (!this.saveRoleAuthParams.orgId) {
+                this.$message.warning("请选择单位名称!")
+                return false
+            }
+            return true
+        },
+        // 用户列表数据渲染前整合数据
+        handleBeforeQuest(res) {
+            const { content, totalElements } = res.data
+            let _content = content.map(item => {
+                return {
+                    ...item,
+                    activeTime: "长期"
+                }
+            })
+            this.currentPageContent = _content
+            if (this.checkUserList.length > 0) {
+                let rowKeys = []
+                for (let j = 0; j < _content.length; j++) {
+                    const cItem = _content[j]
+                    const index = this.checkUserList.findIndex(item => item.id == cItem.id)
+                    if (index > -1) {
+                        _content[j].activeTime = this.checkUserList[index].activeTime
+                        rowKeys.push(this.checkUserList[index].id)
+                    }
+                }
+                setTimeout(() => {
+                    this.$refs.userTable.setCheck(rowKeys)
+                }, 500)
+            }
+            this.Usertotal = totalElements
 
-    getUserChecked() {
-      return new Promise((resolve) => {
-        const { orgId, roleId, appId } = this.saveRoleAuthParams;
-        // 获取人员列表选中记录
-        const queryCheckedParams = {
-          orgId,
-          roleId,
-          appId,
-          type: 'role'
-        };
-        roleAuthApi.getChecked(queryCheckedParams).then((res) => {
-          this.checkUserList = res;
-          resolve(res);
-        });
-      });
-    },
-    handleValid() {
-      if (!this.saveRoleAuthParams.roleId) {
-        this.$message.warning('请选择角色!');
-        return false;
-      }
-      if (!this.saveRoleAuthParams.orgId) {
-        this.$message.warning('请选择单位名称!');
-        return false;
-      }
-      return true;
-    },
-    // 用户列表数据渲染前整合数据
-    handleBeforeQuest(res) {
-      const { content, totalElements } = res.data;
-      let _content = content.map((item) => {
-        return {
-          ...item,
-          activeTime: '长期'
-        };
-      });
-      this.currentPageContent = _content;
-      if (this.checkUserList.length > 0) {
-        let rowKeys = [];
-        for (let j = 0; j < _content.length; j++) {
-          const cItem = _content[j];
-          const index = this.checkUserList.findIndex((item) => item.id == cItem.id);
-          if (index > -1) {
-            _content[j].activeTime = this.checkUserList[index].activeTime;
-            rowKeys.push(this.checkUserList[index].id);
-          }
-        }
-        setTimeout(() => {
-          this.$refs.userTable.setCheck(rowKeys);
-        }, 500);
-      }
-      this.Usertotal = totalElements;
+            const result = {
+                data: {
+                    content: _content,
+                    totalElements
+                }
+            }
+            return result
+        },
+        handleSelectChange(selection) {
+            this.selectUserList = this.$lodash.cloneDeep(selection)
+        },
+        handleSave() {
+            if (!this.handleValid()) return
+            if (this.Usertotal == 0) {
+                this.$message.warning("没有可保存的数据！")
+                return
+            }
+            const { roleId, orgId } = this.saveRoleAuthParams
 
-      const result = {
-        data: {
-          content: _content,
-          totalElements
-        }
-      };
-      return result;
-    },
-    handleSelectChange(selection) {
-      this.selectUserList = this.$lodash.cloneDeep(selection);
-    },
-    handleSave() {
-      if (!this.handleValid()) return;
-      if (this.Usertotal == 0) {
-        this.$message.warning("没有可保存的数据！");
-        return; 
-      }
-      const { roleId, orgId } = this.saveRoleAuthParams;
+            const delUserIds = this.checkUserList
+                .filter(item => !this.selectUserList.map(sItem => sItem.id).includes(item.id))
+                .map(item => item.id)
 
-      const delUserIds = this.checkUserList
-        .filter((item) => !this.selectUserList.map((sItem) => sItem.id).includes(item.id))
-        .map((item) => item.id);
+            const addUserIds = this.selectUserList
+                .filter(item => !this.checkUserList.map(cItem => cItem.id).includes(item.id))
+                .map(item => item.id)
 
-      const addUserIds = this.selectUserList
-        .filter((item) => !this.checkUserList.map((cItem) => cItem.id).includes(item.id))
-        .map((item) => item.id);
+            // 剔除掉被删除的再过滤出修改过的，与check接口比较
+            const updateUserIncludeDel = this.updateUsers.filter(item => !delUserIds.includes(item.id))
 
-      // 剔除掉被删除的再过滤出修改过的，与check接口比较
-      const updateUserIncludeDel = this.updateUsers.filter((item) => !delUserIds.includes(item.id));
+            const updateUsers = updateUserIncludeDel
+                .filter(item => {
+                    const index = this.selectUserList.findIndex(sItem => sItem.id == item.id)
+                    if (index > -1) {
+                        if (item.activeTime !== this.selectUserList[index].activeTime) {
+                            return item
+                        }
+                    }
+                })
+                .map(item => {
+                    return {
+                        id: item.id,
+                        activeTime: item.activeTime
+                    }
+                })
 
-      const updateUsers = updateUserIncludeDel
-        .filter((item) => {
-          const index = this.selectUserList.findIndex((sItem) => sItem.id == item.id);
-          if (index > -1) {
-            if (item.activeTime !== this.selectUserList[index].activeTime) {
-              return item;
+            const saveParams = {
+                roleId,
+                orgId,
+                addUserIds,
+                delUserIds,
+                updateUsers: updateUsers
             }
-          }
-        })
-        .map((item) => {
-          return {
-            id: item.id,
-            activeTime: item.activeTime
-          };
-        });
 
-      const saveParams = {
-        roleId,
-        orgId,
-        addUserIds,
-        delUserIds,
-        updateUsers: updateUsers
-      };
-
-
-      // 保存
-      roleAuthApi
-        .savePersion(saveParams)
-        .then(() => {
-          this.$message.success('保存成功');
-        })
-        .catch((err) => {
-          this.$message.error(err);
-        });
-    },
-    // 有效期选择
-    handleValidateChoose(row) {
-      const that = this;
-      const layer = that.$dgLayer({
-        title: '有效期选择',
-        area: ['540px', '300px'],
-        shade: [0.4, '#FFF'],
-        content: TermValid,
-        props: {
-          operatorRow: row
+            // 保存
+            roleAuthApi
+                .savePersion(saveParams)
+                .then(() => {
+                    this.$message.success("保存成功")
+                })
+                .catch(err => {
+                    this.$message.error(err)
+                })
         },
-        on: {
-          success: function (res) {
-            layer.closeAll(layer.dialogIndex);
-            row.activeTime = res.activeTime;
-            const index = that.updateUsers.findIndex((item) => item.id == res.id);
-            if (index > -1) {
-              that.updateUsers[index] = res;
-            } else {
-              that.updateUsers.push(res);
-            }
-          }
+        // 有效期选择
+        handleValidateChoose(row) {
+            const that = this
+            const layer = that.$dgLayer({
+                title: "有效期选择",
+                area: ["540px", "300px"],
+                shade: [0.4, "#FFF"],
+                content: TermValid,
+                props: {
+                    operatorRow: row
+                },
+                on: {
+                    success: function(res) {
+                        layer.closeAll(layer.dialogIndex)
+                        row.activeTime = res.activeTime
+                        const index = that.updateUsers.findIndex(item => item.id == res.id)
+                        if (index > -1) {
+                            that.updateUsers[index] = res
+                        } else {
+                            that.updateUsers.push(res)
+                        }
+                    }
+                }
+            })
         }
-      });
-    }
-  },
-  // 创建组件时调用
-  created() {}
-};
+    },
+    // 创建组件时调用
+    created() {}
+}
 </script>
 
 <style lang="scss" scoped>
-@import url('./index.scss');
+@import url("./index.scss");
 </style>