添加表单详情组件 + 接口联调

src/api/permiss-log-manage.js

@@ -38,12 +38,12 @@ export const authServiceLogStatisticsTableUrl = `${baseUrl}/authenticationLog/st
 
 /********************************************** 鉴权风险日志 *********************************************/
 // tableUrl
-export const authRiskLogTableUrl = `${baseUrl}/riskProgramme/_search`;
+export const authRiskLogTableUrl = `${baseUrl}/riskLog/_search`;
 
 // 日志详情
 export function getAuthRiskLogDetail(id) {
     return request({
-        url: `${baseUrl}/riskProgramme/${id}`,
+        url: `${baseUrl}/riskLog/${id}`,
         method: "GET"
     });
 }

src/pages/common/form-detail/index.vue

@@ -0,0 +1,72 @@
+<!--
+表单详情组件
+@Author: linqian
+@Date: 2021-05-28 09:51
+-->
+<template>
+    <div>
+        <el-form v-if="detailInfo.id" :model="detailInfo" :label-width="labelWidth" label-suffix="：">
+            <el-row>
+                <el-col :span="item.span || 12" v-for="(item, index) in config" :key="index">
+                    <el-form-item :label="item.label">
+                        <template v-if="item.code">
+                            <div class="u-detail__text" v-translate="{ code: item.code }">
+                                {{ detailInfo[item.value] }}
+                            </div>
+                        </template>
+                        <template v-else-if="item.enum">
+                            <div class="u-detail__text" v-translate="{ enum: item.enum }">
+                                {{ detailInfo[item.value] }}
+                            </div>
+                        </template>
+                        <template v-else-if="item.isTime">
+                            <div class="u-detail__text">
+                                {{ detailInfo[item.value] | dateFormatter(item.format) }}
+                            </div>
+                        </template>
+                        <template v-else-if="item.custom">
+                            <div class="u-detail__text">
+                                <slot :name="item.value" :value="detailInfo[item.value]"></slot>
+                            </div>
+                        </template>
+                        <template v-else>
+                            <div class="u-detail__text">
+                                {{ detailInfo[item.value] }}
+                            </div>
+                        </template>
+                    </el-form-item>
+                </el-col>
+            </el-row>
+        </el-form>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        detailInfo: {
+            type: Object,
+            default: () => {}
+        },
+        config: {
+            type: Array,
+            default: () => []
+        },
+        labelWidth: {
+            type: String,
+            default: "100px"
+        }
+    },
+    components: {},
+    data() {
+        return {};
+    },
+    computed: {},
+    methods: {},
+    created() {},
+    mounted() {}
+};
+</script>
+
+<style lang='scss'>
+</style>

src/pages/log-manage/auth-behavior-statistic/index.vue

@@ -0,0 +1,86 @@
+<!--
+鉴权行为统计
+@Author: linqian
+@Date: 2021-05-28 08:51
+-->
+<template>
+    <div>
+        <!-- 搜索项 -->
+        <el-form ref="ruleForm" inline :model="form">
+            <el-form-item label="鉴权时间">
+                <dg-date-picker
+                    v-model="form.createTime.value"
+                    type="daterange"
+                    range-separator="至"
+                    start-placeholder="开始日期"
+                    end-placeholder="结束日期"
+                    clearable
+                    value-format="yyyyMMddHHmmss"
+                >
+                </dg-date-picker>
+            </el-form-item>
+            <el-form-item>
+                <dg-button type="primary" @click="handleSearch" icon="el-icon-search">查询</dg-button>
+                <!-- <dg-button type="primary" @click="handleReset" icon="el-icon-refresh-right">重置</dg-button> -->
+            </el-form-item>
+        </el-form>
+        <!-- 表格 -->
+        <Table ref="myTable" :url="authServiceLogStatisticsTableUrl" :headerData="authBehaviorStatisticTableHeader" :condition="form">
+        </Table>
+    </div>
+</template>
+
+<script>
+import Table from "@/pages/common/table";
+import { authBehaviorStatisticTableHeader } from "../permiss-log-manage/DataConfig";
+import { authServiceLogStatisticsTableUrl } from "@/api/permiss-log-manage";
+export default {
+    components: {
+        Table
+    },
+    data() {
+        return {
+            authServiceLogStatisticsTableUrl,
+            authBehaviorStatisticTableHeader,
+            form: {
+                createTime: {
+                    value: "",
+                    op: "between",
+                    type: "DATE",
+                    format: "yyyyMMddHHmmss"
+                }
+            }
+        };
+    },
+    computed: {},
+    methods: {
+        /**
+         * 查询
+         */
+        handleSearch() {
+            if(!this.form.createTime.value) {
+               this.$message.warning("鉴权时间不能为空");
+               return;
+            }
+            this.$refs.myTable.handleSearchClick();
+        },
+        /**
+         * 重置
+         */
+        handleReset() {
+            for (const key in this.form) {
+                this.form[key].value = "";
+            }
+        }
+    },
+    created() {
+         const startTime = this.$moment().subtract("1", "year").format("YYYYMMDDHHmmss");
+        const endTime = this.$moment().format("YYYYMMDDHHmmss");
+        this.form.createTime.value = [startTime, endTime];
+    },
+    mounted() {}
+};
+</script>
+
+<style lang='scss'>
+</style>

src/pages/log-manage/err-auth-earlywarning-manage/detail.vue

@@ -8,7 +8,7 @@
 -->
 <template>
     <main class="auth-earlywarning-plan-detail">
-        <el-form ref="ruleForm" :model="detailInfo" label-width="100px" label-suffix="：">
+        <el-form v-if="detailInfo.id" ref="ruleForm" :model="detailInfo" label-width="100px" label-suffix="：">
             <el-row>
                 <el-col :span="item.span" v-for="(item, index) in earlyWarningPlanTableInfo" :key="index">
                     <el-form-item :label="item.label">

src/pages/log-manage/permiss-log-manage/DataConfig.js

@@ -1,9 +1,11 @@
 /**
- * 表头配置
+ * 数据配置
  * @Author: linqian
  * @Date: 2021-05-27 11:33
  */
 
+/***********************************************  表格  ******************************************* */
+
 // 授权管理日志
 export const authManageLogTableHeader = [
     {
@@ -62,59 +64,168 @@ export const authServiceLogTableHeader = [
     {
         label: "终端标识",
         prop: "terminalId"
-    }, {
+    },
+    {
         label: "鉴权令牌",
         prop: "tokens"
-    }, {
+    },
+    {
         label: "鉴权类型",
         prop: "authenticationType",
         enum: "AuthenticationTypeEnum"
-    }, {
+    },
+    {
         label: "鉴权结果",
         prop: "state",
         enum: "AuthenticationResultEnum"
     }
-]
+];
 
 // 鉴权风险日志
 export const authRiskLogTableHeader = [
     {
         label: "风险产生方",
         prop: "creater"
-    }, {
+    },
+    {
         label: "风险产生方标识",
         prop: "createrId"
-    }, {
+    },
+    {
         label: "风险发生时间",
         prop: "createTime",
         timestamp: true,
         format: "YYYY-MM-DD HH:mm:ss"
-    }, {
+    },
+    {
         label: "风险类型",
         prop: "riskType",
         enum: "RiskProgrammeTypeEnum"
-    }, {
+    },
+    {
         label: "鉴权请求方",
         prop: "requesterName"
-    }, {
+    },
+    {
         label: "命中规则",
         prop: "targetRule"
     }
-]
+];
 
 // 鉴权行为统计
-export const authServiceStatisticsTableHeader = [
+export const authBehaviorStatisticTableHeader = [
     {
         label: "鉴权类型",
         prop: "type"
-    }, {
+    },
+    {
         label: "鉴权成功次数",
         prop: "susSize"
-    }, {
+    },
+    {
         label: "鉴权失败次数",
         prop: "failSize"
-    }, {
+    },
+    {
         label: "鉴权总次数",
         prop: "totalSize"
     }
-]
+];
+
+/***********************************************  详情  ******************************************* */
+
+// 鉴权风险日志详情
+export const authRiskLogDetail = [
+    {
+        label: "风险产生方",
+        value: "creater"
+    },
+    {
+        label: "风险产生方标识",
+        value: "createrId"
+    },
+    {
+        label: "风险发生时间",
+        value: "createTime",
+        isTime: true,
+        format: "YYYY-MM-DD HH:mm:ss"
+    },
+    {
+        label: "风险类型",
+        value: "riskType",
+        enum: "RiskProgrammeTypeEnum"
+    },
+    {
+        label: "鉴权请求者",
+        value: "requesterName"
+    },
+    {
+        label: "鉴权请求者标识",
+        value: "requesterId"
+    },
+    {
+        label: "命中规则",
+        value: "targetRule",
+        span: 24
+    },
+    {
+        label: "风险内容",
+        value: "riskContent",
+        span: 24
+    },
+    {
+        label: "处理建议",
+        value: "handleOpinion",
+        span: 24
+    }
+];
+
+// 鉴权服务日志详情
+export const authServiceLogDetail = [
+    {
+        label: "用户姓名",
+        value: "userName"
+    },
+    {
+        label: "用户身份证号码",
+        value: "userIdcard"
+    },
+    {
+        label: "鉴权请求者",
+        value: "requesterName"
+    },
+    {
+        label: "请求者唯一标识",
+        value: "requesterId"
+    },
+    {
+        label: "鉴权时间",
+        value: "createTime",
+        isTime: true,
+        format: "YYYY-MM-DD HH:mm:ss"
+    },
+    {
+        label: "终端标识",
+        value: "terminalId"
+    },
+    {
+        label: "鉴权令牌",
+        value: "tokens",
+        span: 24
+    },
+    {
+        label: "鉴权类型",
+        value: "authenticationType",
+        enum: "AuthenticationTypeEnum"
+    },
+    {
+        label: "鉴权结果",
+        value: "state",
+        enum: "AuthenticationResultEnum"
+    },
+    {
+        label: "鉴权内容",
+        value: "content",
+        span: 24
+    }
+];

src/pages/log-manage/permiss-log-manage/auth-manage-log.vue

@@ -8,7 +8,7 @@
         <!-- 搜索项 -->
         <el-form ref="ruleForm" inline :model="form">
             <el-form-item label="授权管理类型">
-                <dg-select v-model="form.authorizeType.value" placeholder="" enum="AuthorizeTypeEnum" clearable>
+                <dg-select v-model="form.authorizeType.value" placeholder="请选择授权管理类型" enum="AuthorizeTypeEnum" clearable>
                 </dg-select>
             </el-form-item>
             <el-form-item label="处理时间">
@@ -24,7 +24,7 @@
                 </dg-date-picker>
             </el-form-item>
             <el-form-item label="授权处理者">
-                <el-input v-model="form.authorizeHandlerNames.value" placeholder="" clearable></el-input>
+                <el-input v-model="form.authorizeHandlerNames.value" placeholder="请输入授权处理者" clearable></el-input>
             </el-form-item>
             <el-form-item>
                 <dg-button type="primary" @click="handleSearch" icon="el-icon-search">查询</dg-button>
@@ -33,7 +33,7 @@
         </el-form>
         <!-- 表格 -->
         <Table ref="myTable" :url="authManageLogTableUrl" :headerData="authManageLogTableHeader" :condition="form">
-            <dg-table-column fixed="right" label="操作" align="center">
+            <dg-table-column label="操作" align="center">
                 <template slot-scope="scope">
                     <div class="u-table__operation">
                         <el-tooltip content="详情" effect="dark" placement="top-end">
@@ -69,8 +69,10 @@ export default {
                     op: "like"
                 },
                 createTime: {
-                    value: [],
-                    op: "between"
+                    value: "",
+                    op: "between",
+                    type: "DATE",
+                    format: "yyyyMMddHHmmss"
                 }
             }
         };
@@ -112,8 +114,9 @@ export default {
         }
     },
     created() {
-          // const startTime =  this.$moment().subtract("1", "year").format("YYYYMMDD");
-            // const endTime = this.$moment().format("YYYYMMDD");
+        const startTime = this.$moment().subtract("1", "year").format("YYYYMMDDHHmmss");
+        const endTime = this.$moment().format("YYYYMMDDHHmmss");
+        this.form.createTime.value = [startTime, endTime];
     },
     mounted() {}
 };

src/pages/log-manage/permiss-log-manage/auth-risk-log.vue

@@ -5,33 +5,121 @@
 -->
 <template>
     <div>
-      鉴权风险日志
+        <!-- 搜索项 -->
+        <el-form ref="ruleForm" inline :model="form">
+            <el-form-item label="风险产生方">
+                <el-input v-model="form.creater.value" placeholder="请输入风险产生方" clearable></el-input>
+            </el-form-item>
+            <el-form-item label="风险发生时间">
+                <dg-date-picker
+                    v-model="form.createTime.value"
+                    type="daterange"
+                    range-separator="至"
+                    start-placeholder="开始日期"
+                    end-placeholder="结束日期"
+                    clearable
+                    value-format="yyyyMMddHHmmss"
+                >
+                </dg-date-picker>
+            </el-form-item>
+            <el-form-item label="风险类型">
+                <dg-select v-model="form.riskType.value" placeholder="请选择风险类型" enum="RiskProgrammeTypeEnum" clearable>
+                </dg-select>
+            </el-form-item>
+            <el-form-item>
+                <dg-button type="primary" @click="handleSearch" icon="el-icon-search">查询</dg-button>
+                <dg-button type="primary" @click="handleReset" icon="el-icon-refresh-right">重置</dg-button>
+            </el-form-item>
+        </el-form>
+        <!-- 表格 -->
+        <Table ref="myTable" :url="authRiskLogTableUrl" :headerData="authRiskLogTableHeader" :condition="form">
+            <dg-table-column label="操作" align="center">
+                <template slot-scope="scope">
+                    <div class="u-table__operation">
+                        <el-tooltip content="详情" effect="dark" placement="top-end">
+                            <i class="el-icon-document" @click="handleViewDetail(scope.row)"></i>
+                        </el-tooltip>
+                    </div>
+                </template>
+            </dg-table-column>
+        </Table>
     </div>
 </template>
 
 <script>
-    export default {
-        components: {
-
+import Table from "@/pages/common/table";
+import detail from "./log-detail/auth-risk";
+import { authRiskLogTableHeader } from "./DataConfig";
+import { authRiskLogTableUrl } from "@/api/permiss-log-manage";
+export default {
+    components: {
+        Table
+    },
+    data() {
+        return {
+            authRiskLogTableUrl,
+            authRiskLogTableHeader,
+            form: {
+                riskType: {
+                    value: "",
+                    op: "="
+                },
+                creater: {
+                    value: "",
+                    op: "like"
+                },
+                createTime: {
+                    value: "",
+                    op: "between",
+                    type: "DATE",
+                    format: "yyyyMMddHHmmss"
+                }
+            }
+        };
+    },
+    computed: {},
+    methods: {
+        /**
+         *  详情
+         */
+        handleViewDetail(row) {
+            const layer = this.$dgLayer({
+                title: `详情`,
+                shade: [0.4, "#FFF"],
+                content: detail,
+                props: {
+                    id: row.id
+                },
+                on: {
+                    success() {
+                        layer.close(layer.dialogIndex);
+                    }
+                },
+                area: ["800px", "500px"]
+            });
         },
-        data () {
-            return {
-
-            };
+        /**
+         * 查询
+         */
+        handleSearch() {
+            this.$refs.myTable.handleSearchClick();
         },
-        computed: {
-
-        },
-        methods: {
-
-        },
-        created() {
-
-        },
-        mounted() {
-
+        /**
+         * 重置
+         */
+        handleReset() {
+            for (const key in this.form) {
+                this.form[key].value = "";
+            }
         }
-}
+    },
+    created() {
+        const startTime = this.$moment().subtract("1", "year").format("YYYYMMDDHHmmss");
+        const endTime = this.$moment().format("YYYYMMDDHHmmss");
+        this.form.createTime.value = [startTime, endTime];
+    },
+    mounted() {}
+};
 </script>
 
 <style lang='scss'>

src/pages/log-manage/permiss-log-manage/auth-service-log.vue

@@ -9,17 +9,18 @@
         <!-- 搜索项 -->
         <el-form ref="ruleForm" inline :model="form">
             <el-form-item label="用户姓名">
-                <el-input v-model="form.userName.value" placeholder="" clearable></el-input>
+                <el-input v-model="form.userName.value" placeholder="请输入用户姓名" clearable></el-input>
             </el-form-item>
             <el-form-item label="用户身份证号码">
-                <el-input v-model="form.userIdcard.value" placeholder="" clearable></el-input>
+                <el-input v-model="form.userIdcard.value" placeholder="请输入用户身份证号码" clearable></el-input>
             </el-form-item>
             <el-form-item label="鉴权类型">
                 <dg-select
                     v-model="form.authenticationType.value"
-                    placeholder=""
+                    placeholder="请选择鉴权类型"
                     enum="AuthenticationTypeEnum"
                     clearable
+                    style="width: 9rem"
                 >
                 </dg-select>
             </el-form-item>
@@ -32,11 +33,12 @@
                     end-placeholder="结束日期"
                     clearable
                     value-format="yyyyMMddHHmmss"
+                    style="width: 16rem"
                 >
                 </dg-date-picker>
             </el-form-item>
             <el-form-item label="鉴权结果">
-                <dg-select v-model="form.state.value" placeholder="" enum="AuthenticationResultEnum" clearable>
+                <dg-select v-model="form.state.value" placeholder="请选择鉴权结果" enum="AuthenticationResultEnum" clearable  style="width: 9rem">
                 </dg-select>
             </el-form-item>
             <el-form-item>
@@ -46,7 +48,7 @@
         </el-form>
         <!-- 表格 -->
         <Table ref="myTable" :url="authServiceLogTableUrl" :headerData="authServiceLogTableHeader" :condition="form">
-            <dg-table-column fixed="right" label="操作" align="center">
+            <dg-table-column label="操作" align="center">
                 <template slot-scope="scope">
                     <div class="u-table__operation">
                         <el-tooltip content="详情" effect="dark" placement="top-end">
@@ -87,7 +89,9 @@ export default {
                 },
                 createTime: {
                     value: [],
-                    op: "between"
+                    op: "between",
+                    type: "DATE",
+                    format: "yyyyMMddHHmmss"
                 },
                 state: {
                     value: "",
@@ -114,7 +118,7 @@ export default {
                         layer.close(layer.dialogIndex);
                     }
                 },
-                area: ["900px", "800px"]
+                area: ["800px", "500px"]
             });
         },
         /**
@@ -133,8 +137,9 @@ export default {
         }
     },
     created() {
-        // const startTime =  this.$moment().subtract("1", "year").format("YYYYMMDD");
-        // const endTime = this.$moment().format("YYYYMMDD");
+         const startTime = this.$moment().subtract("1", "year").format("YYYYMMDDHHmmss");
+        const endTime = this.$moment().format("YYYYMMDDHHmmss");
+        this.form.createTime.value = [startTime, endTime];
     },
     mounted() {}
 };

src/pages/log-manage/permiss-log-manage/log-detail/auth-manage.vue

@@ -5,12 +5,17 @@
 -->
 <template>
     <div>
-        <el-form label-width="120px" label-suffix="：">
+        <el-form v-if="detailInfo.id" label-width="120px" label-suffix="：">
             <el-form-item label="授权管理类型">
-                <p class="u-detail__text" v-translate="{ enum: 'AuthorizeTypeEnum' }">{{ detailInfo.authorizeType }}</p>
+                <div class="u-detail__text" v-translate="{ enum: 'AuthorizeTypeEnum' }">
+                    {{ detailInfo.authorizeType }}
+                </div>
             </el-form-item>
             <el-form-item label="权限处理时间">
-                <p>{{ detailInfo.createTime }}</p>
+                <p>{{ detailInfo.createTime | dateFormatter("YYYY-MM-DD HH:mm:ss") }}</p>
+            </el-form-item>
+              <el-form-item label="操作内容">
+                --
             </el-form-item>
             <dg-row zebra="16px">
                 <dg-table :data="detailInfo.handlers" paging-type="client" :pagination-props="paginationProps">
@@ -30,14 +35,10 @@
                     <dg-table-column prop="objectId" label="授权管理客体ID"></dg-table-column>
                 </dg-table>
             </dg-row>
-
-            <el-form-item label="操作内容">
-                <el-input type="textarea" rows="3" v-model="value" placeholder=""></el-input>
-            </el-form-item>
         </el-form>
-        <div v-footer>
+        <!-- <div v-footer>
             <dg-button @click="handleClose">关闭</dg-button>
-        </div>
+        </div> -->
     </div>
 </template>
 

src/pages/log-manage/permiss-log-manage/log-detail/auth-risk.vue

@@ -5,33 +5,36 @@
 -->
 <template>
     <div>
-        
+        <form-detail :detailInfo="detailInfo" :config="authRiskLogDetail" labelWidth="160px"></form-detail>
     </div>
 </template>
 
 <script>
-    export default {
-        components: {
-
-        },
-        data () {
-            return {
-
-            };
-        },
-        computed: {
-
-        },
-        methods: {
-
-        },
-        created() {
-
-        },
-        mounted() {
-
-        }
-}
+import formDetail from "@/pages/common/form-detail";
+import { authRiskLogDetail } from "../DataConfig";
+import { getAuthRiskLogDetail } from "@/api/permiss-log-manage";
+export default {
+    props: {
+        id: [String, Number]
+    },
+    components: {
+        formDetail
+    },
+    data() {
+        return {
+            authRiskLogDetail,
+            detailInfo: {}
+        };
+    },
+    computed: {},
+    methods: {},
+    created() {
+        getAuthRiskLogDetail(this.id).then((res) => {
+            this.detailInfo = res.data.content;
+        });
+    },
+    mounted() {}
+};
 </script>
 
 <style lang='scss'>

src/pages/log-manage/permiss-log-manage/log-detail/auth-service.vue

@@ -5,33 +5,36 @@
 -->
 <template>
     <div>
-        
+        <form-detail :detailInfo="detailInfo" :config="authServiceLogDetail" labelWidth="140px"></form-detail>
     </div>
 </template>
 
 <script>
-    export default {
-        components: {
-
-        },
-        data () {
-            return {
-
-            };
-        },
-        computed: {
-
-        },
-        methods: {
-
-        },
-        created() {
-
-        },
-        mounted() {
-
-        }
-}
+import formDetail from "@/pages/common/form-detail";
+import { authServiceLogDetail } from "../DataConfig";
+import { getAuthServiceLogDetail } from "@/api/permiss-log-manage";
+export default {
+    props: {
+        id: [String, Number]
+    },
+    components: {
+        formDetail
+    },
+    data() {
+        return {
+            authServiceLogDetail,
+            detailInfo: {}
+        };
+    },
+    computed: {},
+    methods: {},
+    created() {
+        getAuthServiceLogDetail(this.id).then((res) => {
+            this.detailInfo = res.data.content;
+        });
+    },
+    mounted() {}
+};
 </script>
 
 <style lang='scss'>

src/router/modules/log-manage.js

@@ -77,6 +77,21 @@ const componentsRouter = {
                     }
                 }
             ]
+        },
+        {
+            path: "/auth-behavior-statistic",
+            component: common,
+            name: "common",
+            redirect: "/index",
+            meta: { title: "鉴权行为分析", icon: "el-icon-goods", noCache: true, permission: ["YHGLPT_RZSJGL"] },
+            children: [
+                {
+                    path: "index",
+                    component: () => import("@/pages/log-manage/auth-behavior-statistic"),
+                    name: "auth-behavior-statistic",
+                    meta: { title: "鉴权行为分析", icon: "el-icon-goods", noCache: true, permission: ["YHGLPT_RZSJGL"] }
+                }
+            ]
         }
     ]
 };