用户属性管理界面完成

src/pages/common/table/index.vue

@@ -6,7 +6,7 @@
 <template>
     <dg-table
         border
-        :auto-page="(h) => h * 0.6"
+        :auto-page="h => h * 0.6"
         :expand-row-keys="expands"
         overflow="tooltip"
         @change-current="handleChangeCurrent"
@@ -36,6 +36,7 @@
         <template v-for="(item, indexs) in headerData">
             <dg-table-column :key="indexs" v-bind="item" align="center">
                 <template slot-scope="scope">
+                    <slot v-if="item.custom" v-bind:row="scope.row" :name="item.prop"></slot>
                     <span v-if="item.state">{{ converterText(scope.row, item) }}</span>
                     <span v-if="item.timestamp">{{ formatTimestamp(scope.row, item) }}</span>
                     <span v-if="item.adminAudit">{{ transformText(scope.row, item) }}</span>
@@ -111,7 +112,7 @@ export default {
         converter: Function,
         beforeSearch: {
             type: Function,
-            default: (conditions) => conditions
+            default: conditions => conditions
         },
         tableName: {
             type: String,
@@ -126,7 +127,7 @@ export default {
             mapping: {
                 list: "content",
                 total: "totalPages"
-            },
+            }
         };
     },
 
@@ -213,7 +214,7 @@ export default {
          * */
         converterText(rowData, item) {
             const prop = item.prop || { label: "label", value: "value" };
-            let resultItem = item.state.find((val) => val["value"] == rowData[item.prop]);
+            let resultItem = item.state.find(val => val["value"] == rowData[item.prop]);
             if (resultItem) {
                 return resultItem["label"];
             } else {
@@ -336,9 +337,7 @@ export default {
         /**
          * 转换业务域
          * */
-        tranformBusinessText(row, item) {
-                        
-        },
+        tranformBusinessText(row, item) {},
         /*
          * 切换勾选状态
          * */

src/pages/data-auth-module/property-management/DataConfig.js

@@ -0,0 +1,73 @@
+/*
+ * @Author: Liugh
+ * @Date: 2021-05-17 15:38:23
+ * @LastEditTime: 2021-05-17 17:17:51
+ * @LastEditors: Do not edit
+ * @Description:
+ */
+
+const UserTableData = [
+    {
+        label: "用户类型",
+        prop: ""
+    },
+    {
+        label: "姓名",
+        prop: ""
+    },
+    {
+        label: "身份证号码",
+        prop: ""
+    },
+    {
+        label: "编号",
+        prop: ""
+    },
+    {
+        label: "所属机构",
+        custom: true, // 如果需要自定义请加上这个属性，插槽名称为prop
+        prop: ""
+    },
+    {
+        label: "人员类型",
+        prop: ""
+    },
+    {
+        label: "警种",
+        prop: ""
+    }
+];
+const typeData = {
+    jy: [
+        { label: "姓名", value: "name" },
+        { label: "性别", value: "sex" },
+        { label: "身份证号码", value: "idCard" },
+        { label: "省份", value: "province" },
+        { label: "编号", value: "number" },
+        { label: "人员类型", value: "typePersonnel" },
+        { label: "职级", value: "rank" },
+        { label: "人员类别", value: "categoryPersonnel" },
+        { label: "业务域", value: "businessDomain" },
+        { label: "警种", value: "policeClassification" }
+    ],
+    fj: [
+        { label: "姓名", value: "name" },
+        { label: "性别", value: "sex" },
+        { label: "身份证号码", value: "idCard" },
+        { label: "编号", value: "number" },
+        { label: "所属", value: "institution" },
+        { label: "人员类型", value: "typePersonnel" },
+        { label: "人员类别", value: "categoryPersonnel" },
+        { label: "业务域", value: "businessDomain" },
+        { label: "警种", value: "policeClassification" }
+    ],
+    sgry: [
+        { label: "姓名", value: "name" },
+        { label: "性别", value: "sex" },
+        { label: "身份证号码", value: "idCard" },
+        { label: "编号", value: "number" },
+        { label: "人员类型", value: "typePersonnel" }
+    ]
+};
+
+export { UserTableData, typeData };

src/pages/data-auth-module/property-management/application-properties.vue

@@ -0,0 +1,7 @@
+<!--
+ * @Author: Liugh
+ * @Date: 2021-05-17 14:53:49
+ * @LastEditTime: 2021-05-17 14:53:49
+ * @LastEditors: Do not edit
+ * @Description: 
+-->

src/pages/data-auth-module/property-management/detail.vue

@@ -0,0 +1,83 @@
+<!--
+ * @Author: Liugh
+ * @Date: 2021-05-17 16:22:06
+ * @LastEditTime: 2021-05-17 17:18:05
+ * @LastEditors: Do not edit
+ * @Description: 
+-->
+<template>
+    <main class="user-attributes-detail">
+        <el-form ref="ruleForm" :model="data" label-width="120px">
+            <el-row>
+                <el-col :span="12" v-for="(item, index) in typeData[infoType]" :key="index">
+                    <el-form-item :label="item.label">
+                        <span>{{ data[item.value] }}</span>
+                    </el-form-item>
+                </el-col>
+            </el-row>
+        </el-form>
+        <Table
+            ref="myTable"
+            :url="tableUrl"
+            :headerData="UserTableData"
+            :condition="reportForm"
+            v-if="infoType == 'jy'"
+        />
+    </main>
+</template>
+
+<script>
+import Table from "@/pages/common/table";
+import { UserTableData, typeData } from "./DataConfig";
+import * as dynamicManageApi from "@/api/dynamic-manage";
+export default {
+    name: "user-attributes-detail", // 组件名称
+    props: {
+        // 接收父组件的数据
+        infoType: {
+            type: [String, Number],
+            default: "jy"
+        },
+        data: {
+            type: Object,
+            default() {
+                return {
+                    name: "测试数据中",
+                    sex: "测试数据中",
+                    idCard: "测试数据中",
+                    province: "测试数据中",
+                    number: "测试数据中",
+                    typePersonnel: "测试数据中",
+                    rank: "测试数据中",
+                    categoryPersonnel: "测试数据中",
+                    businessDomain: "测试数据中",
+                    policeClassification: "测试数据中"
+                };
+            }
+        }
+    },
+    data() {
+        // 组件内部参数
+        return {
+            // 参数名称及默认值
+            UserTableData,
+            typeData,
+            tableUrl: dynamicManageApi.tableUrl,
+            reportForm: {}
+        };
+    },
+    computed: {}, // 计算属性
+    watch: {}, // 侦听器（扩展的计算属性）
+    components: { Table }, // 注册局部组件
+    methods: {}, // 内部方法
+    beforeCreate() {}, // 组件创建前
+    created() {}, // 组件创建完成后
+    beforeMount() {}, // 组件挂载前
+    mounted() {}, // 组件挂载完成后
+    beforeUpdate() {}, // 组件更新前
+    updated() {}, // 组件挂载完成后
+    beforeDestroy() {}, // 组件销毁前
+    destroyed() {} // 组件销毁完成后
+};
+</script>
+<style lang="scss" scoped></style>

src/pages/data-auth-module/property-management/index.scss

@@ -0,0 +1,12 @@
+/*
+ * @Author: Liugh
+ * @Date: 2021-05-17 15:18:43
+ * @LastEditTime: 2021-05-17 15:43:21
+ * @LastEditors: Do not edit
+ * @Description: 
+ */
+.user-attributes {
+    .buttonGroup {
+        margin-bottom: 20px;
+    }
+}

src/pages/data-auth-module/property-management/institutional-attributes.vue

@@ -0,0 +1,7 @@
+<!--
+ * @Author: Liugh
+ * @Date: 2021-05-17 14:53:19
+ * @LastEditTime: 2021-05-17 14:53:19
+ * @LastEditors: Do not edit
+ * @Description: 
+-->

src/pages/data-auth-module/property-management/subject-property.vue

@@ -0,0 +1,7 @@
+<!--
+ * @Author: Liugh
+ * @Date: 2021-05-17 14:54:08
+ * @LastEditTime: 2021-05-17 14:54:08
+ * @LastEditors: Do not edit
+ * @Description: 
+-->

src/pages/data-auth-module/property-management/user-attributes.vue

@@ -0,0 +1,176 @@
+<!--
+ * @Author: Liugh
+ * @Date: 2021-05-17 14:52:53
+ * @LastEditTime: 2021-05-17 17:17:29
+ * @LastEditors: Do not edit
+ * @Description: 
+-->
+<template>
+    <main class="user-attributes">
+        <el-form ref="ruleForm" inline :rules="rules" :model="form">
+            <el-form-item label="用户类别">
+                <el-select v-model="form.userType" placeholder="请选择用户类别">
+                    <el-option label="警员" value="shanghai"></el-option>
+                    <el-option label="辅警" value="beijing"></el-option>
+                    <el-option label="施工人员" value="beijing"></el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item label="姓名">
+                <el-input v-model="form.name" placeholder="请输入姓名"></el-input>
+            </el-form-item>
+            <el-form-item label="身份证号">
+                <el-input v-model="form.idCard" placeholder="请输入身份证号"></el-input>
+            </el-form-item>
+
+            <el-form-item label="所属机构">
+                <dg-tree-select
+                    v-model="form.institution"
+                    placeholder="请选择所属机构"
+                    :data="options"
+                    clearable
+                    filterable
+                    multiple
+                ></dg-tree-select>
+            </el-form-item>
+
+            <el-form-item>
+                <dg-button type="primary" @click="handleSearch" icon="el-icon-search">查询</dg-button>
+            </el-form-item>
+        </el-form>
+        <div class="buttonGroup">
+            <dg-button type="primary" @click="handleLeading" icon="el-icon-upload2">导入</dg-button>
+            <dg-button type="primary" @click="handleSynchro" icon="el-icon-refresh">同步</dg-button>
+            <dg-button type="text" @click="handleInfo">详情</dg-button>
+        </div>
+
+        <Table ref="myTable" :url="tableUrl" :headerData="UserTableData" :condition="reportForm">
+            <dg-table-column fixed="right" label="操作" align="center">
+                <template>
+                    <dg-button type="text" @click="handleInfo">详情</dg-button>
+                </template>
+            </dg-table-column>
+        </Table>
+    </main>
+</template>
+
+<script>
+import Table from "@/pages/common/table";
+import { UserTableData } from "./DataConfig";
+import * as dynamicManageApi from "@/api/dynamic-manage";
+import detail from "./detail";
+const editorArea = ["900px", "660px"];
+export default {
+    name: "user-attributes", // 组件名称
+    props: {
+        // 接收父组件的数据
+    },
+    data() {
+        // 组件内部参数
+        return {
+            // 参数名称及默认值
+            form: {},
+            rules: {},
+            options: [
+                {
+                    id: "fruits",
+                    label: "Fruits",
+                    children: [
+                        {
+                            id: "apple",
+                            label: "Apple",
+                            isNew: true
+                        },
+                        {
+                            id: "grapes",
+                            label: "Grapes",
+                            disabled: true
+                        },
+                        {
+                            id: "pear",
+                            label: "Pear"
+                        },
+                        {
+                            id: "strawberry",
+                            label: "Strawberry 🍓"
+                        },
+                        {
+                            id: "watermelon",
+                            label: "Watermelon 🍉"
+                        }
+                    ]
+                },
+                {
+                    id: "vegetables",
+                    label: "Vegetables",
+                    children: [
+                        {
+                            id: "corn",
+                            label: "Corn 🌽"
+                        },
+                        {
+                            id: "carrot",
+                            label: "Carrot 🥕"
+                        },
+                        {
+                            id: "eggplant",
+                            label: "Eggplant 🍆"
+                        },
+                        {
+                            id: "tomato",
+                            label: "Tomato 🍅"
+                        }
+                    ]
+                }
+            ],
+            UserTableData,
+            tableUrl: dynamicManageApi.tableUrl,
+            reportForm: {}
+        };
+    },
+    computed: {}, // 计算属性
+    watch: {}, // 侦听器（扩展的计算属性）
+    components: { Table }, // 注册局部组件
+    methods: {
+        /**
+         * @description:表单查询方法
+         */
+        handleSearch() {},
+        /**
+         * @description:导入方法
+         */
+        handleLeading() {},
+        /**
+         * @description:同步方法
+         */
+        handleSynchro() {},
+        /**
+         * @description:详情
+         */
+        handleInfo() {
+            const layer = this.$dgLayer({
+                title: "警员详情",
+                shade: [0.4, "#FFF"],
+                content: detail,
+                props: {},
+                on: {
+                    success() {
+                        layer.close(layer.dialogIndex);
+                    }
+                },
+                area: editorArea
+            });
+        }
+    }, // 内部方法
+    beforeCreate() {}, // 组件创建前
+    created() {}, // 组件创建完成后
+    beforeMount() {}, // 组件挂载前
+    mounted() {}, // 组件挂载完成后
+    beforeUpdate() {}, // 组件更新前
+    updated() {}, // 组件挂载完成后
+    beforeDestroy() {}, // 组件销毁前
+    destroyed() {} // 组件销毁完成后
+};
+</script>
+<style lang="scss" scoped>
+@import "./index.scss";
+</style>

src/router/modules/data-auth-module.js

@@ -4,9 +4,42 @@
  * @Date:   2020-03-31 16:20
  */
 import Layout from "@/pages/layout/layout";
-import common from "@/pages/common"
+import common from "@/pages/common";
 
 const componentsRouter = [
+    {
+        path: "/auth-main-manage",
+        component: Layout,
+        redirect: "/auth-main-manage",
+        alwaysShow: true,
+        meta: { title: "授权主体管理", icon: "el-icon-goods", noCache: true, permission: ["QXGL_SQKTGL"] },
+        children: [
+            {
+                path: "user-attributes",
+                component: () => import("@/pages/data-auth-module/property-management/user-attributes"),
+                name: "user-attributes",
+                meta: { title: "用户属性管理", noCache: false, permission: ["QXGL_SQKTGL_SJFJFLBM"] }
+            },
+            {
+                path: "institutional-attributes",
+                component: () => import("@/pages/data-auth-module/property-management/institutional-attributes"),
+                name: "institutional-attributes",
+                meta: { title: "机构属性管理", noCache: false, permission: ["QXGL_SQKTGL_SJFJFLBM"] }
+            },
+            {
+                path: "application-properties",
+                component: () => import("@/pages/data-auth-module/property-management/application-properties"),
+                name: "application-properties",
+                meta: { title: "应用属性管理", noCache: false, permission: ["QXGL_SQKTGL_SJFJFLBM"] }
+            },
+            {
+                path: "subject-property",
+                component: () => import("@/pages/data-auth-module/property-management/subject-property"),
+                name: "subject-property",
+                meta: { title: "主体属性类管理", noCache: false, permission: ["QXGL_SQKTGL_SJFJFLBM"] }
+            }
+        ]
+    },
     {
         path: "/auth-object-manage",
         component: Layout,
@@ -18,7 +51,7 @@ const componentsRouter = [
                 path: "sort-code-manage",
                 component: () => import("@/pages/data-auth-module/auth-object-manage/sort-code-manage"),
                 name: "sort-code-manage",
-                meta: { title: "数据分级分类表码", noCache: false, permission: ["QXGL_SQKTGL_SJFJFLBM"]}
+                meta: { title: "数据分级分类表码", noCache: false, permission: ["QXGL_SQKTGL_SJFJFLBM"] }
             }
         ]
     },
@@ -38,10 +71,16 @@ const componentsRouter = [
                 children: [
                     {
                         path: "person-view",
-                        component: () => import("@/pages/data-auth-module/data-permission-manage/data-auth-search/person-view.vue"),
+                        component: () =>
+                            import("@/pages/data-auth-module/data-permission-manage/data-auth-search/person-view.vue"),
                         name: "person-view",
-                        meta: { title: "人员视角", noCache: false, permission: ["QXGL_SQCX_SJSQCX_RYSJ"], layout:'page' }
-                    },
+                        meta: {
+                            title: "人员视角",
+                            noCache: false,
+                            permission: ["QXGL_SQCX_SJSQCX_RYSJ"],
+                            layout: "page"
+                        }
+                    }
                     // {
                     //     path: "data-view",
                     //     component: () => import("@/pages/data-auth-module/data-permission-manage/data-auth-search/data-view.vue"),