From 3fa8b2b1f1200a0662c51d812fc0f0c28c63cac0 Mon Sep 17 00:00:00 2001
From: wangchengming <15110151257@163.com>
Date: Fri, 18 Apr 2025 19:01:28 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=94=B9=E7=99=BB=E5=BD=95=E6=97=A5?=
 =?UTF-8?q?=E5=BF=97=EF=BC=8C=E6=93=8D=E4=BD=9C=E6=97=A5=E5=BF=97=E7=95=8C?=
 =?UTF-8?q?=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/system/LogList.vue   | 198 +++++++++++++++----------------
 src/views/system/OptionLog.vue | 207 +++++++++++++++++++++++++++++++++
 2 files changed, 301 insertions(+), 104 deletions(-)
 create mode 100644 src/views/system/OptionLog.vue

diff --git a/src/views/system/LogList.vue b/src/views/system/LogList.vue
index 956863e..553166a 100644
--- a/src/views/system/LogList.vue
+++ b/src/views/system/LogList.vue
@@ -1,75 +1,68 @@
 <template>
   <a-card :bordered="false">
-    <!--导航区域-->
-    <div>
-      <a-tabs defaultActiveKey="1" @change="callback">
-        <a-tab-pane tab="登录日志" key="1"></a-tab-pane>
-        <a-tab-pane tab="操作日志" key="2"></a-tab-pane>
-      </a-tabs>
-    </div>
-
     <!-- 查询区域 -->
     <div class="table-page-search-wrapper">
       <a-form layout="inline" @keyup.enter.native="searchQuery">
         <a-row :gutter="24">
-
-          <a-col :md="6" :sm="8">
-            <a-form-item label="搜索日志">
-              <a-input placeholder="请输入搜索关键词" v-model="queryParam.keyWord"></a-input>
+          <a-col :md="4" :sm="8">
+            <a-form-item label="登录地址">
+              <a-input placeholder="请输入" v-model="queryParam.keyWord"></a-input>
             </a-form-item>
           </a-col>
-
-          <a-col :md="6" :sm="10">
-            <a-form-item label="创建时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
-              <a-range-picker
-                style="width: 210px"
-                v-model="queryParam.createTimeRange"
-                format="YYYY-MM-DD"
-                :placeholder="['开始时间', '结束时间']"
-                @change="onDateChange"
-                @ok="onDateOk"
-              />
+          <a-col :md="4" :sm="8">
+            <a-form-item label="登录名称">
+              <a-input placeholder="请输入" v-model="queryParam.keyWord"></a-input>
             </a-form-item>
           </a-col>
-          <a-col :md="5" :sm="8" v-if="tabKey === '2'">
-            <a-form-item label="操作类型" style="left: 10px">
-              <j-dict-select-tag v-model="queryParam.operateType" placeholder="请选择操作类型" dictCode="operate_type"/>
+          <a-col :md="4" :sm="8">
+            <a-form-item label="登录状态">
+              <a-input placeholder="请输入" v-model="queryParam.keyWord"></a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :md="4" :sm="8">
+            <a-form-item label="开始日期">
+              <a-date-picker v-model="queryParam.startTime" />
+            </a-form-item>
+          </a-col>
+          <a-col :md="4" :sm="8">
+            <a-form-item label="结束日期">
+              <a-date-picker v-model="queryParam.endTime" />
             </a-form-item>
           </a-col>
 
           <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
-            <a-col :md="6" :sm="24" >
-                <a-button type="primary"  style="left: 10px" @click="searchQuery" icon="search">查询</a-button>
-                <a-button type="primary"  @click="searchReset" icon="reload" style="margin-left: 8px;left: 10px">重置</a-button>
+            <a-col :md="4" :sm="24">
+              <a-button type="primary" style="left: 10px" @click="searchQuery" icon="search">查询</a-button>
+              <a-button type="primary" @click="searchReset" icon="reload"
+                style="margin-left: 8px;left: 10px">重置</a-button>
             </a-col>
           </span>
 
         </a-row>
       </a-form>
     </div>
-
+    <div class="linese"></div>
     <!-- table区域-begin -->
-    <div style="height:620px;;overflow-y:auto;">
-    <a-table
-      ref="table"
-      size="middle"
-      rowKey="id"
-      :columns="columns"
-      :dataSource="dataSource"
-      :pagination="ipagination"
-      :loading="loading"
-      @change="handleTableChange">
+    <div style="height:calc(100vh - 300px);background: #e6e9f1;overflow:hidden;padding: 15px;">
+      <a-table ref="table" size="middle" rowKey="id" :columns="columns" :dataSource="dataSource"
+        :pagination="ipagination" :loading="loading" @change="handleTableChange">
 
-      <div v-show="queryParam.logType==2" slot="expandedRowRender" slot-scope="record" style="margin: 0">
-        <div style="margin-bottom: 5px"><a-badge status="success" style="vertical-align: middle;"/><span style="vertical-align: middle;">请求方法:{{ record.method }}</span></div>
-        <div><a-badge status="processing" style="vertical-align: middle;"/><span style="vertical-align: middle;">请求参数:{{ record.requestParam }}</span></div>
-      </div>
-      <!-- 字符串超长截取省略号显示-->
-      <span slot="logContent" slot-scope="text, record">
-          <j-ellipsis :value="text" :length="40"/>
+        <div v-show="queryParam.logType == 2" slot="expandedRowRender" slot-scope="record" style="margin: 0">
+          <div style="margin-bottom: 5px"><a-badge status="success" style="vertical-align: middle;" /><span
+              style="vertical-align: middle;">请求方法:{{ record.method }}</span></div>
+          <div><a-badge status="processing" style="vertical-align: middle;" /><span
+              style="vertical-align: middle;">请求参数:{{ record.requestParam }}</span></div>
+        </div>
+        <!-- 字符串超长截取省略号显示-->
+        <span slot="logContent" slot-scope="text, record">
+          <j-ellipsis :value="text" :length="40" />
         </span>
-    </a-table>
+        <span slot="action" slot-scope="text, record">
+          <a @click="handleEdit(record)">详情</a>
+        </span>
+      </a-table>
     </div>
+    <div class="linese"></div>
     <!-- table区域-end -->
   </a-card>
 </template>
@@ -81,90 +74,88 @@ import JEllipsis from '@/components/jeecg/JEllipsis'
 
 export default {
   name: "LogList",
-  mixins:[JeecgListMixin],
+  mixins: [JeecgListMixin],
   components: {
     JEllipsis
   },
-  data () {
+  data() {
     return {
       description: '这是日志管理页面',
       // 查询条件
       queryParam: {
-        ipInfo:'',
-        createTimeRange:[],
-        logType:'1',
-        keyWord:'',
+        ipInfo: '',
+        createTimeRange: [],
+        logType: '1',
+        keyWord: '',
       },
       tabKey: "1",
       // 表头
       columns: [
         {
-          title: '#',
+          title: '访问编号',
           dataIndex: '',
-          key:'rowIndex',
-          align:"center",
-          customRender:function (t,r,index) {
-            return parseInt(index)+1;
+          key: 'rowIndex',
+          align: "center",
+          customRender: function (t, r, index) {
+            return parseInt(index) + 1;
           }
         },
         {
-          title: '日志内容',
-          align:"left",
+          title: '登录名称',
+          align: "left",
           dataIndex: 'logContent',
           scopedSlots: { customRender: 'logContent' },
           sorter: true
         },
         {
-          title: '操作人ID',
+          title: '登录地址',
           dataIndex: 'userid',
-          align:"center",
+          align: "center",
           sorter: true
         },
         {
-          title: '操作人名称',
+          title: '浏览器',
           dataIndex: 'username',
-          align:"center",
+          align: "center",
           sorter: true
         },
         {
-          title: 'IP',
+          title: '操作系统',
           dataIndex: 'ip',
-          align:"center",
+          align: "center",
           sorter: true
         },
         {
-          title: '耗时(毫秒)',
-          dataIndex: 'costTime',
-          align:"center",
-          sorter: true
-        },
-        {
-          title: '日志类型',
+          title: '登录状态',
           dataIndex: 'logType_dictText',
-          /*customRender:function (text) {
-            if(text==1){
-              return "登录日志";
-            }else if(text==2){
-              return "操作日志";
-            }else{
-              return text;
-            }
-          },*/
-          align:"center",
+          align: "center",
         },
         {
-          title: '创建时间',
-          dataIndex: 'createTime',
-          align:"center",
+          title: '操作信息',
+          dataIndex: 'costTime',
+          align: "center",
           sorter: true
+        },
+        {
+          title: '登录时间',
+          dataIndex: 'createTime',
+          align: "center",
+          sorter: true
+        },
+        {
+          title: '操作',
+          dataIndex: 'action',
+          align: "center",
+          width: 180,
+          scopedSlots: { customRender: 'action' },
         }
       ],
       operateColumn:
-        {
-          title: '操作类型',
-          dataIndex: 'operateType_dictText',
-          align:"center",
-        },
+      {
+        title: '操作类型',
+        dataIndex: 'operateType_dictText',
+        align: "center",
+      },
       labelCol: {
         xs: { span: 1 },
         sm: { span: 2 },
@@ -179,8 +170,8 @@ export default {
     }
   },
   methods: {
-    getQueryParams(){
-      var param = Object.assign({}, this.queryParam,this.isorter);
+    getQueryParams() {
+      var param = Object.assign({}, this.queryParam, this.isorter);
       param.field = this.getQueryField();
       param.pageNo = this.ipagination.current;
       param.pageSize = this.ipagination.pageSize;
@@ -193,7 +184,7 @@ export default {
     },
 
     // 重置
-    searchReset(){
+    searchReset() {
       var that = this;
       var logType = that.queryParam.logType;
       that.queryParam = {}; //清空查询区域参数
@@ -201,26 +192,25 @@ export default {
       that.loadData(this.ipagination.current);
     },
     // 日志类型
-    callback(key){
+    callback(key) {
 
       // 动态添加操作类型列
       if (key == 2) {
         this.tabKey = '2';
         this.columns.splice(7, 0, this.operateColumn);
-      }else if(this.columns.length == 9)
-      {
+      } else if (this.columns.length == 9) {
         this.tabKey = '1';
-        this.columns.splice(7,1);
+        this.columns.splice(7, 1);
       }
 
-      let that=this;
-      that.queryParam.logType=key;
+      let that = this;
+      that.queryParam.logType = key;
       that.loadData();
     },
     onDateChange: function (value, dateString) {
-      console.log(dateString[0],dateString[1]);
-      this.queryParam.createTime_begin=dateString[0];
-      this.queryParam.createTime_end=dateString[1];
+      console.log(dateString[0], dateString[1]);
+      this.queryParam.createTime_begin = dateString[0];
+      this.queryParam.createTime_end = dateString[1];
     },
     onDateOk(value) {
       console.log(value);
diff --git a/src/views/system/OptionLog.vue b/src/views/system/OptionLog.vue
new file mode 100644
index 0000000..4ee091e
--- /dev/null
+++ b/src/views/system/OptionLog.vue
@@ -0,0 +1,207 @@
+<template>
+    <a-card :bordered="false">
+        <!-- 查询区域 -->
+        <div class="table-page-search-wrapper">
+            <a-form layout="inline" @keyup.enter.native="searchQuery">
+                <a-row :gutter="24">
+                    <a-col :md="4" :sm="8">
+                        <a-form-item label="操作人员">
+                            <a-input placeholder="请输入" v-model="queryParam.keyWord"></a-input>
+                        </a-form-item>
+                    </a-col>
+                    <a-col :md="4" :sm="8">
+                        <a-form-item label="开始日期">
+                            <a-date-picker v-model="queryParam.startTime" />
+                        </a-form-item>
+                    </a-col>
+                    <a-col :md="4" :sm="8">
+                        <a-form-item label="结束日期">
+                            <a-date-picker v-model="queryParam.endTime" />
+                        </a-form-item>
+                    </a-col>
+
+                    <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
+                        <a-col :md="4" :sm="24">
+                            <a-button type="primary" style="left: 10px" @click="searchQuery" icon="search">查询</a-button>
+                            <a-button type="primary" @click="searchReset" icon="reload"
+                                style="margin-left: 8px;left: 10px">重置</a-button>
+                        </a-col>
+                    </span>
+
+                </a-row>
+            </a-form>
+        </div>
+        <div class="linese"></div>
+        <!-- table区域-begin -->
+        <div style="height:calc(100vh - 300px);background: #e6e9f1;overflow:hidden;padding: 15px;">
+            <a-table ref="table" size="middle" rowKey="id" :columns="columns" :dataSource="dataSource"
+                :pagination="ipagination" :loading="loading" @change="handleTableChange">
+
+                <div v-show="queryParam.logType == 2" slot="expandedRowRender" slot-scope="record" style="margin: 0">
+                    <div style="margin-bottom: 5px"><a-badge status="success" style="vertical-align: middle;" /><span
+                            style="vertical-align: middle;">请求方法:{{ record.method }}</span></div>
+                    <div><a-badge status="processing" style="vertical-align: middle;" /><span
+                            style="vertical-align: middle;">请求参数:{{ record.requestParam }}</span></div>
+                </div>
+                <!-- 字符串超长截取省略号显示-->
+                <span slot="logContent" slot-scope="text, record">
+                    <j-ellipsis :value="text" :length="40" />
+                </span>
+                <span slot="action" slot-scope="text, record">
+                    <a @click="handleEdit(record)">详情</a>
+                </span>
+            </a-table>
+        </div>
+        <div class="linese"></div>
+        <!-- table区域-end -->
+    </a-card>
+</template>
+
+<script>
+import { filterObj } from '@/utils/util';
+import { JeecgListMixin } from '@/mixins/JeecgListMixin'
+import JEllipsis from '@/components/jeecg/JEllipsis'
+
+export default {
+    name: "OptionLog",
+    mixins: [JeecgListMixin],
+    components: {
+        JEllipsis
+    },
+    data() {
+        return {
+            description: '这是日志管理页面',
+            // 查询条件
+            queryParam: {
+                ipInfo: '',
+                createTimeRange: [],
+                logType: '1',
+                keyWord: '',
+            },
+            tabKey: "1",
+            // 表头
+            columns: [
+                {
+                    title: '日志编号',
+                    dataIndex: '',
+                    key: 'rowIndex',
+                    align: "center",
+                    customRender: function (t, r, index) {
+                        return parseInt(index) + 1;
+                    }
+                },
+                {
+                    title: '系统模块',
+                    align: "left",
+                    dataIndex: 'logContent',
+                    scopedSlots: { customRender: 'logContent' },
+                    sorter: true
+                },
+                {
+                    title: '操作人',
+                    dataIndex: 'username',
+                    align: "center",
+                    sorter: true
+                },
+                {
+                    title: '操作地址',
+                    dataIndex: 'ip',
+                    align: "center",
+                    sorter: true
+                },
+                {
+                    title: '操作状态',
+                    dataIndex: 'logType_dictText',
+                    align: "center",
+                },
+                {
+                    title: '操作时间',
+                    dataIndex: 'createTime',
+                    align: "center",
+                    sorter: true
+                },
+                {
+                    title: '消耗时间',
+                    dataIndex: 'costTime',
+                    align: "center",
+                    sorter: true
+                },
+                {
+                    title: '操作',
+                    dataIndex: 'action',
+                    align: "center",
+                    width: 180,
+                    scopedSlots: { customRender: 'action' },
+                }
+            ],
+            operateColumn:
+            {
+                title: '操作类型',
+                dataIndex: 'operateType_dictText',
+                align: "center",
+            },
+            labelCol: {
+                xs: { span: 1 },
+                sm: { span: 2 },
+            },
+            wrapperCol: {
+                xs: { span: 10 },
+                sm: { span: 16 },
+            },
+            url: {
+                list: "/sys/log/list",
+            },
+        }
+    },
+    methods: {
+        getQueryParams() {
+            var param = Object.assign({}, this.queryParam, this.isorter);
+            param.field = this.getQueryField();
+            param.pageNo = this.ipagination.current;
+            param.pageSize = this.ipagination.pageSize;
+            delete param.createTimeRange; // 时间参数不传递后台
+            if (this.superQueryParams) {
+                param['superQueryParams'] = encodeURI(this.superQueryParams)
+                param['superQueryMatchType'] = this.superQueryMatchType
+            }
+            return filterObj(param);
+        },
+
+        // 重置
+        searchReset() {
+            var that = this;
+            var logType = that.queryParam.logType;
+            that.queryParam = {}; //清空查询区域参数
+            that.queryParam.logType = logType;
+            that.loadData(this.ipagination.current);
+        },
+        // 日志类型
+        callback(key) {
+
+            // 动态添加操作类型列
+            if (key == 2) {
+                this.tabKey = '2';
+                this.columns.splice(7, 0, this.operateColumn);
+            } else if (this.columns.length == 9) {
+                this.tabKey = '1';
+                this.columns.splice(7, 1);
+            }
+
+            let that = this;
+            that.queryParam.logType = key;
+            that.loadData();
+        },
+        onDateChange: function (value, dateString) {
+            console.log(dateString[0], dateString[1]);
+            this.queryParam.createTime_begin = dateString[0];
+            this.queryParam.createTime_end = dateString[1];
+        },
+        onDateOk(value) {
+            console.log(value);
+        },
+    }
+}
+</script>
+<style scoped>
+@import '~@assets/less/common.less'
+</style>
\ No newline at end of file