个人页新增操作日志查询

src/views/system/user/profile/index.vue

@@ -57,6 +57,9 @@
             <el-tab-pane label="修改密码" name="resetPwd">
               <resetPwd :user="state.user" />
             </el-tab-pane>
+            <el-tab-pane label="操作日志" name="log">
+              <operLog></operLog>
+            </el-tab-pane>
           </el-tabs>
         </el-card>
       </el-col>
@@ -65,29 +68,30 @@
 </template>
 
 <script setup name="Profile">
-import userAvatar from "./userAvatar";
-import userInfo from "./userInfo";
-import resetPwd from "./resetPwd";
-import { getUserProfile } from "@/api/system/user";
+import userAvatar from './userAvatar'
+import userInfo from './userInfo'
+import resetPwd from './resetPwd'
+import operLog from './operLog.vue'
+import { getUserProfile } from '@/api/system/user'
 
-const activeTab = ref("userinfo");
+const activeTab = ref('userinfo')
 const state = reactive({
   user: {},
   roles: [],
   roleGroup: {},
   postGroup: {},
-});
+})
 
 function getUser() {
   getUserProfile().then((response) => {
-    state.user = response.data.user;
-    state.roles = response.data.roles;
-    state.roleGroup = response.data.roleGroup;
-    state.postGroup = response.data.postGroup;
-  });
+    state.user = response.data.user
+    state.roles = response.data.roles
+    state.roleGroup = response.data.roleGroup
+    state.postGroup = response.data.postGroup
+  })
 }
 
-getUser();
+getUser()
 </script>
 
 <style scoped>

src/views/system/user/profile/operLog.vue

@@ -0,0 +1,112 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
+      <el-form-item>
+        <el-date-picker v-model="dateRange" size="small" style="width: 240px" value-format="YYYY-MM-DD" type="daterange" range-separator="-"
+          start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="search" @click="handleQuery">搜索</el-button>
+        <el-button icon="refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-table v-loading="loading" :data="list">
+      <!-- <el-table-column label="编号" align="center" prop="operId" width="60px" :show-overflow-tooltip="true" /> -->
+      <el-table-column label="系统模块" align="center" prop="title" :show-overflow-tooltip="true" />
+      <el-table-column prop="businessType" label="业务类型" align="center">
+        <template #default="scope">
+          <dict-tag :options="businessTypeOptions" :value="scope.row.businessType" />
+        </template>
+      </el-table-column>
+      <el-table-column label="请求方式" align="center" prop="requestMethod" />
+      <el-table-column label="操作地点" align="center" prop="operLocation" :show-overflow-tooltip="true" />
+      <el-table-column label="操作状态" align="center" prop="status">
+        <template #default="{row}">
+          <dict-tag :options="statusOptions" :value="row.status"></dict-tag>
+        </template>
+      </el-table-column>
+
+      <el-table-column label="日志内容" align="center" prop="errorMsg" :show-overflow-tooltip="true" />
+      <el-table-column label="操作日期" align="center" prop="operTime" width="180">
+        <template #default="scope">
+          <span>{{ scope.row.operTime }}</span>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination v-show="total>0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
+
+  </div>
+</template>
+
+<script setup name="operlog">
+import { list as queryLog } from '@/api/monitor/operlog'
+
+import { getCurrentInstance } from 'vue-demi'
+
+// 遮罩层
+const loading = ref(true)
+// 总条数
+const total = ref(0)
+// 表格数据
+const list = ref([])
+// 类型数据字典
+const statusOptions = ref([])
+// 业务类型（0其它 1新增 2修改 3删除）选项列表 格式 eg:{ dictLabel: '标签', dictValue: '0'}
+const businessTypeOptions = ref([])
+// 日期范围
+const dateRange = ref([])
+
+// 查询参数
+const queryParams = reactive({
+  pageNum: 1,
+  pageSize: 10,
+  title: undefined,
+  operName: undefined,
+  businessType: undefined,
+  status: undefined,
+})
+
+const { proxy } = getCurrentInstance()
+var dictParams = [
+  { dictType: 'sys_oper_type', columnName: 'businessTypeOptions' },
+  { dictType: 'sys_common_status', columnName: 'statusOptions' },
+]
+proxy.getDicts(dictParams).then((response) => {
+  response.data.forEach((element) => {
+    proxy[element.columnName] = element.list
+  })
+})
+
+/** 查询登录日志 */
+function getList() {
+  loading.value = true
+  queryParams.operName = proxy.$store.getters.userinfo.userName
+  queryLog(proxy.addDateRange(queryParams, dateRange.value)).then(
+    (response) => {
+      loading.value = false
+      if (response.code == 200) {
+        list.value = response.data.result
+        total.value = response.data.totalNum
+      } else {
+        total.value = 0
+        list.value = []
+      }
+    }
+  )
+}
+/** 重置按钮操作 */
+function resetQuery() {
+  dateRange.value = []
+  proxy.resetForm('queryForm')
+  handleQuery()
+}
+/** 搜索按钮操作 */
+function handleQuery() {
+  queryParams.pageNum = 1
+  getList()
+}
+getList()
+</script>
+