日志管理

src/api/modules/manage/log.ts

@@ -0,0 +1,10 @@
+import { handle } from '../../index'
+
+const suffix = 'api'
+
+// 分页
+export const searchLogsGetLogByPage = (params: any) => handle({
+  url: `/${suffix}/search-logs/getLogByPage`,
+  method: 'get',
+  params
+})

src/stores/dictionary-define.ts

@@ -18,6 +18,7 @@ export const dictionaryDefine = {
 	is_main_index: ['isMainIndexList', 'isMainIndexMap'], //  是否主索引
 	sort_type: ['sortTypeList', 'sortTypeMap'], //  排序类型
 	date_type: ['dateTypeList', 'dateTypeMap'], //  日期类型
+	search_status: ['searchStatusList', 'searchStatusMap'], //  搜索状态
 }
 
 const stateMap = {}

src/views/manage/system/log/index.vue

@@ -1,14 +1,112 @@
 <template>
-  <div>
-    <h1>这是后台-日志管理页面</h1>
+  <div class="__cus-manage_content">
+    <div class="__cus-manage_content-title"><SvgIcon class="flag" name="flag_1" color="var(--cus-main-color)"/>{{$route.meta.title}}</div>
+    <div class="__cus-manage_content-filters">
+      <CusForm labelWidth="50px" @handleEnter="onSearch">
+        <CusFormColumn
+          label-width="80px"
+          :span="4"
+          label="搜索内容"
+          v-model:param="state.query.form.roleName"
+        />
+        <CusFormColumn
+          :span="4"
+          label="状态"
+          v-model:param="state.query.form.isValid"
+          link="select"
+          :options="DictionaryStore.searchStatusList"
+        />
+        <CusButton type="main" title="搜索" @click="onSearch"/>
+        <CusButton type="main" title="重置" @click="onReset"/>
+      </CusForm>
+    </div>
+    <div class="__cus-manage_content-main" v-loading="state.query.loading">
+      <CusTable
+        :page-num="state.query.page.pageNum"
+        :page-size="state.query.page.pageSize"
+        :total="state.query.result.total"
+        :data="state.query.result.data"
+        :table-head="state.query.tableHead"
+        @handlePage="onPage"
+      >
+        <template #isValid-column-value="{scope}">
+          {{DictionaryStore.searchStatusMap.get(scope.row.isValid)}}
+        </template>
+      </CusTable>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import {getCurrentInstance, reactive} from "vue";
+import {getCurrentInstance, onMounted, reactive} from "vue";
+import {ElMessage, ElMessageBox} from "element-plus";
+import {useDictionaryStore} from "@/stores";
+import {searchLogsGetLogByPage} from "@/api/modules/manage/log";
 
 const {proxy} = getCurrentInstance()
-const state: any = reactive({})
+const DictionaryStore = useDictionaryStore()
+const state: any = reactive({
+  query: {
+    loading: false,
+    page: {
+      pageNum: 1,
+      pageSize: 10
+    },
+    tableHead: [
+      {value: "keyword", label: "搜索内容", fixed: 'left', popover: true},
+      {value: "isValid", label: "状态"},
+      {value: "createTime", label: "搜索时间", width: 200},
+      {value: "userName", label: "搜索人员"},
+    ],
+    form: {},
+    formReal: {},
+    result: {
+      total: 0,
+      data: []
+    }
+  },
+})
+const onPage = (pageNum, pageSize) => {
+  state.query.page = {
+    pageNum: pageNum,
+    pageSize: pageSize
+  }
+  const params = {
+    page: state.query.page.pageNum,
+    size: state.query.page.pageSize,
+  }
+  //  添加表单参数
+  for (const [k, v] of Object.entries(state.query.formReal)) {
+    if (proxy.$util.isValue(v)) {
+      params[k] = v
+    }
+  }
+  state.query.loading = true
+  searchLogsGetLogByPage(proxy.$util.formatGetParam(params)).then(res => {
+    state.query.result.total = res.data.totalElements
+    state.query.result.data = res.data.content
+    state.query.loading = false
+  })
+}
+const onSearch = () => {
+  state.query.formReal = JSON.parse(JSON.stringify(state.query.form))
+  onPage(1, state.query.page.pageSize)
+}
+const onReset = () => {
+  state.query.page = {
+    pageNum: 1,
+    pageSize: 10
+  }
+  state.query.form = {}
+  onSearch()
+}
+const initDictionary = () => {
+  DictionaryStore.initDict('search_status')
+}
+onMounted(() => {
+  initDictionary()
+  onReset()
+})
 </script>
 
 <style lang="scss" scoped>