feat: 添加编码日志

locales/en.yaml

@@ -1,4 +1,4 @@
-title: System Title
+title: HTS Code Query System
 buttons:AccountSettings: Account
 buttons:LoginOut: LoginOut
 buttons:Login: Login
@@ -111,6 +111,7 @@ menus:SystemConfig: System Config
 menus:CodeManager: Code Manager
 menus:CodeQueryIndex: Code Query
 menus:CodeQueryLog: Query Log
+menus:QueryCodedetails: Log Detail
 status:Load: Loading...
 status:Message: Message
 status:Notify: Notify

locales/zh-CN.yaml

@@ -1,4 +1,4 @@
-title: 系统标题
+title: 清关编码查询系统
 buttons:AccountSettings: 账户设置
 buttons:LoginOut: 退出系统
 buttons:Login: 登录
@@ -111,6 +111,7 @@ menus:SystemConfig: 系统配置
 menus:CodeManager: 编码管理
 menus:CodeQueryIndex: 编码查询
 menus:CodeQueryLog: 查询日志
+menus:QueryCodedetails: 日志详情
 status:Load: 加载中...
 status:Message: 消息
 status:Notify: 通知

src/api/code.ts

@@ -1,5 +1,6 @@
 import { http } from "@/utils/http";
 import type { CodeInfo, QueryCodeLogInfo, QueryCodeResult } from "types/code";
+import { filterEmptyObject } from "./utils";
 
 /**
  * 获取编码模版
@@ -87,7 +88,7 @@ interface GetCodeListParams {
  */
 export const getCodeListAPI = (params: GetCodeListParams) => {
   return http.request<QueryListResult<CodeInfo>>("get", "/api/code/list", {
-    params
+    params: filterEmptyObject(params)
   });
 };
 
@@ -110,15 +111,20 @@ export const getQueryCodeAPI = (id: string) => {
  */
 export const getCodeLogListAPI = (params: {
   page: number;
-  PageSize: number;
+  pageSize: number;
-  startTime?: number;
+  startTime?: string;
-  endTime?: number;
+  endTime?: string;
 }) => {
   return http.request<QueryListResult<QueryCodeLogInfo>>(
     "get",
     `/api/code/logList`,
     {
-      params
+      params: filterEmptyObject(params)
     }
   );
 };
+
+/**获取查询编码日志详情 */
+export const getCodeLogInfoAPI = (id: string) => {
+  return http.request<QueryCodeLogInfo>("get", `/api/code/logInfo/${id}`);
+};

src/views/codes/index/index.vue

@@ -4,18 +4,21 @@
       ref="formRef"
       :inline="true"
       :model="form"
-      class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]"
+      class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] flex justify-between items-center"
     >
-      <el-form-item label="查询文本" prop="query_text">
+      <el-form-item label="查询文本" prop="query_text" class="w-[50%]">
         <el-input
           v-model="form.query_text"
           placeholder="请输入查询文本~"
+          class="w-full"
           clearable
           type="textarea"
+          :rows="5"
           autosize
         />
       </el-form-item>
-      <el-form-item>
+
+      <el-form-item class="w-[50%] flex justify-center items-center">
         <el-button
           type="primary"
           :icon="useRenderIcon('ri:search-line')"
@@ -116,7 +119,7 @@
               {{ t("buttons:Deselect") }}
             </el-button>
           </div>
-          <el-popconfirm title="是否确认删除?" @confirm="onbatchDel">
+          <el-popconfirm title="是否确认删除?">
             <template #reference>
               <el-button type="danger" text class="mr-1">
                 {{ t("buttons:DeleteInBatches") }}
@@ -144,8 +147,6 @@
             color: 'var(--el-text-color-primary)'
           }"
           @selection-change="handleSelectionChange"
-          @page-size-change="handleSizeChange"
-          @page-current-change="handleCurrentChange"
         >
           <template #operation="{ row }">
             <el-button
@@ -162,7 +163,6 @@
         </pure-table>
       </template>
     </PureTableBar>
-  </div>
     <el-drawer v-model="drawerStatus" title="查询详情" :size="`50%`" show-close>
       <el-collapse v-model="activeCollapse" :accordion="false">
         <!-- 基本信息 -->
@@ -191,12 +191,13 @@
               item.description
             }}</el-descriptions-item>
             <el-descriptions-item align="center" label="匹配率">{{
-            item.match_rate
+              item.match_rate ? `${item.match_rate}%` : "0%"
             }}</el-descriptions-item>
           </el-descriptions>
         </el-collapse-item>
       </el-collapse>
     </el-drawer>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -234,6 +235,7 @@ const {
   fileIds,
   fileList,
   uploadStatus,
+  activeCollapse,
   beforeUpload,
   handleUpload,
   beforeRemove,
@@ -244,11 +246,20 @@ const {
   onDownloadTemplate,
   handleDetail
 } = useIndex(tableRef);
-const activeCollapse = ["baseInfo"];
 </script>
 
 <style scoped lang="scss">
-.upload-demo {
+:deep(.el-dropdown-menu__item i) {
-  flex: 1;
+  margin: 0;
+}
+
+.main-content {
+  margin: 24px 24px 0 !important;
+}
+
+.search-form {
+  :deep(.el-form-item) {
+    margin-bottom: 12px;
+  }
 }
 </style>

src/views/codes/index/utils/hook.tsx

@@ -59,12 +59,13 @@ export const useIndex = (tableRef: Ref) => {
    * 查询结果
    */
   const queryResult = ref<QueryCodeResult>();
+  const activeCollapse = ref(["baseInfo"]);
   /**列表值 */
-  const rowInfo = reactive<QueryResultItem>({
+  const rowInfo = reactive<QueryResult>({
+    query_text: "",
+    status: 0,
     id: "",
-    code: "",
+    result_text: []
-    description: "",
-    match_rate: 0
   });
   /**抽屉状态 */
   const drawerStatus = ref<boolean>(false);
@@ -266,6 +267,7 @@ export const useIndex = (tableRef: Ref) => {
     uploadStatus,
     rowInfo,
     drawerStatus,
+    activeCollapse,
     beforeUpload,
     handleUpload,
     beforeRemove,

src/views/codes/log.vue

@@ -1,250 +0,0 @@
-<template>
-  <div class="p-4">
-    <!-- 查询区域 -->
-    <el-card class="mb-4">
-      <div class="flex items-center space-x-4">
-        <!-- 查询文本 -->
-        <el-input
-          v-model="queryParams.queryText"
-          placeholder="请输入查询文本"
-          class="flex-1"
-        />
-        <!-- 查询时间范围 -->
-        <el-date-picker
-          v-model="queryParams.timeRange"
-          type="datetimerange"
-          range-separator="至"
-          start-placeholder="开始时间"
-          end-placeholder="结束时间"
-        />
-        <!-- 查询按钮 -->
-        <el-button type="primary" @click="handleQuery">查询</el-button>
-        <!-- 清空表单按钮 -->
-        <el-button @click="clearQuery">清空表单</el-button>
-      </div>
-    </el-card>
-
-    <!-- 结果显示区域 -->
-    <el-card>
-      <div class="mb-4 flex items-center space-x-4">
-        <!-- 全部导出按钮 -->
-        <el-button type="primary" @click="exportAll">全部导出</el-button>
-        <!-- 多选导出按钮 -->
-        <el-button
-          type="primary"
-          :disabled="selectedRows.length === 0"
-          @click="exportSelected"
-        >
-          导出选中项
-        </el-button>
-      </div>
-      <el-table
-        :data="pagedTableData"
-        style="width: 100%"
-        @selection-change="handleSelectionChange"
-      >
-        <el-table-column type="selection" width="55" />
-        <el-table-column prop="queryText" label="查询文本" />
-        <el-table-column prop="result1Code" label="查询结果编码1" />
-        <el-table-column prop="result1" label="查询结果1" />
-        <el-table-column prop="result2Code" label="查询结果编码2" />
-        <el-table-column prop="result2" label="查询结果2" />
-        <el-table-column prop="queryTime" label="查询时间" />
-        <el-table-column label="操作">
-          <template #default="scope">
-            <el-button type="text" @click="showDetail(scope.row)"
-              >详情</el-button
-            >
-            <el-button type="text" @click="showFeedback(scope.row)"
-              >反馈</el-button
-            >
-          </template>
-        </el-table-column>
-      </el-table>
-      <!-- 分页组件 -->
-      <el-pagination
-        class="mt-4"
-        background
-        layout="total, sizes, prev, pager, next, jumper"
-        :total="total"
-        :page-size="pageSize"
-        :current-page="currentPage"
-        :page-sizes="[10, 20, 50, 100]"
-        @size-change="handleSizeChange"
-        @current-change="handlePageChange"
-      />
-    </el-card>
-
-    <!-- 详情抽屉 -->
-    <el-drawer v-model="detailVisible" title="详情" :with-header="false">
-      <div class="p-4">
-        <h3 class="text-lg font-bold mb-4">查询详情</h3>
-        <p><strong>查询文本:</strong> {{ currentRow.queryText }}</p>
-        <p><strong>查询结果编码1:</strong> {{ currentRow.result1Code }}</p>
-        <p><strong>查询结果1:</strong> {{ currentRow.result1 }}</p>
-        <p><strong>查询结果编码2:</strong> {{ currentRow.result2Code }}</p>
-        <p><strong>查询结果2:</strong> {{ currentRow.result2 }}</p>
-        <p><strong>查询时间:</strong> {{ currentRow.queryTime }}</p>
-      </div>
-    </el-drawer>
-
-    <!-- 反馈弹窗 -->
-    <el-dialog v-model="feedbackVisible" title="反馈" width="30%">
-      <el-form :model="feedbackForm" label-width="120px">
-        <el-form-item label="查询结果是否正确">
-          <el-radio-group v-model="feedbackForm.isCorrect">
-            <el-radio :label="true">正确</el-radio>
-            <el-radio :label="false">错误</el-radio>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item v-if="!feedbackForm.isCorrect" label="正确结果">
-          <el-input
-            v-model="feedbackForm.correctResult"
-            type="textarea"
-            :rows="2"
-          />
-        </el-form-item>
-      </el-form>
-      <template #footer>
-        <el-button @click="feedbackVisible = false">取消</el-button>
-        <el-button type="primary" @click="submitFeedback">提交</el-button>
-      </template>
-    </el-dialog>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, computed } from "vue";
-import { ElMessage } from "element-plus";
-import * as XLSX from "xlsx";
-
-defineOptions({
-  name: "CodeQueryLog"
-});
-// 查询参数
-const queryParams = ref({
-  queryText: "",
-  timeRange: []
-});
-
-// 模拟数据
-const mockData = () => {
-  const data = [];
-  for (let i = 1; i <= 100; i++) {
-    data.push({
-      queryText: `示例查询文本${i}`,
-      result1Code: `00${i}`,
-      result1: `结果${i}`,
-      result2Code: `01${i}`,
-      result2: `结果${i + 1}`,
-      queryTime: new Date().toLocaleString()
-    });
-  }
-  return data;
-};
-
-// 表格数据
-const tableData = ref(mockData());
-
-// 分页相关
-const currentPage = ref(1);
-const pageSize = ref(10);
-const total = computed(() => tableData.value.length);
-
-// 分页数据
-const pagedTableData = computed(() => {
-  const start = (currentPage.value - 1) * pageSize.value;
-  const end = start + pageSize.value;
-  return tableData.value.slice(start, end);
-});
-
-// 选中行数据
-const selectedRows = ref<any[]>([]);
-
-// 详情抽屉显示状态
-const detailVisible = ref(false);
-const currentRow = ref({});
-
-// 反馈弹窗显示状态
-const feedbackVisible = ref(false);
-const feedbackForm = ref({
-  isCorrect: true,
-  correctResult: ""
-});
-
-// 查询按钮点击事件
-const handleQuery = () => {
-  console.log("查询参数:", queryParams.value);
-  // 这里可以添加查询逻辑
-};
-
-// 清空表单按钮点击事件
-const clearQuery = () => {
-  queryParams.value = {
-    queryText: "",
-    timeRange: []
-  };
-};
-
-// 处理表格多选
-const handleSelectionChange = (selection: any[]) => {
-  selectedRows.value = selection;
-};
-
-// 导出全部数据为Excel
-const exportAll = () => {
-  const worksheet = XLSX.utils.json_to_sheet(tableData.value);
-  const workbook = XLSX.utils.book_new();
-  XLSX.utils.book_append_sheet(workbook, worksheet, "查询日志");
-  XLSX.writeFile(workbook, "查询日志.xlsx");
-  ElMessage.success("导出成功");
-};
-
-// 导出选中数据为Excel
-const exportSelected = () => {
-  if (selectedRows.value.length === 0) {
-    ElMessage.warning("请选择要导出的数据");
-    return;
-  }
-  const worksheet = XLSX.utils.json_to_sheet(selectedRows.value);
-  const workbook = XLSX.utils.book_new();
-  XLSX.utils.book_append_sheet(workbook, worksheet, "查询日志");
-  XLSX.writeFile(workbook, "选中查询日志.xlsx");
-  ElMessage.success("导出成功");
-};
-
-// 分页大小变化事件
-const handleSizeChange = (size: number) => {
-  pageSize.value = size;
-  currentPage.value = 1; // 重置到第一页
-};
-
-// 页码变化事件
-const handlePageChange = (page: number) => {
-  currentPage.value = page;
-};
-
-// 显示详情抽屉
-const showDetail = (row: any) => {
-  currentRow.value = row;
-  detailVisible.value = true;
-};
-
-// 显示反馈弹窗
-const showFeedback = (row: any) => {
-  currentRow.value = row;
-  feedbackVisible.value = true;
-};
-
-// 提交反馈
-const submitFeedback = () => {
-  console.log("提交反馈:", feedbackForm.value);
-  feedbackVisible.value = false;
-};
-</script>
-
-<style scoped lang="scss">
-.upload-demo {
-  flex: 1;
-}
-</style>

src/views/codes/log/components/details.vue

@@ -0,0 +1,258 @@
+<template>
+  <div class="main">
+    <el-card v-if="queryInfo" shadow="never" class="mt-2">
+      <el-descriptions title="查询基本信息" border :column="4">
+        <el-descriptions-item align="center" label="操作时间">{{
+          dayjs(queryInfo.operation_time).format("YYYY-MM-DD HH:mm:ss")
+        }}</el-descriptions-item>
+        <el-descriptions-item align="center" label="耗时"
+          >{{ queryInfo.cost_time.toFixed(2) }} ms</el-descriptions-item
+        >
+        <el-descriptions-item align="center" label="查询统计">{{
+          queryInfo.query_count
+        }}</el-descriptions-item>
+        <el-descriptions-item align="center" label="结果统计">{{
+          queryInfo.result_count
+        }}</el-descriptions-item>
+      </el-descriptions>
+    </el-card>
+    <PureTableBar title="查询结果" :columns="columns">
+      <template #buttons>
+        <el-button type="primary" :icon="useRenderIcon(AddFill)">
+          {{ t("buttons:Export") }}
+        </el-button>
+      </template>
+      <template v-slot="{ size, dynamicColumns }">
+        <div
+          v-if="selectedNum > 0"
+          v-motion-fade
+          class="bg-[var(--el-fill-color-light)] w-full h-[46px] mb-2 pl-4 flex items-center"
+        >
+          <div class="flex-auto">
+            <span
+              style="font-size: var(--el-font-size-base)"
+              class="text-[rgba(42,46,54,0.5)] dark:text-[rgba(220,220,242,0.5)]"
+            >
+              已选 {{ selectedNum }} 项
+            </span>
+            <el-button type="primary" text @click="onSelectionCancel">
+              {{ t("buttons:Deselect") }}
+            </el-button>
+          </div>
+          <el-popconfirm title="是否确认删除?">
+            <template #reference>
+              <el-button type="danger" text class="mr-1">
+                {{ t("buttons:DeleteInBatches") }}
+              </el-button>
+            </template>
+          </el-popconfirm>
+        </div>
+        <pure-table
+          ref="tableRef"
+          row-key="id"
+          adaptive
+          border
+          stripe
+          :adaptiveConfig="{ offsetBottom: 45 }"
+          align-whole="center"
+          table-layout="auto"
+          :loading="loading"
+          :data="dataList"
+          :columns="dynamicColumns"
+          :pagination="pagination"
+          :paginationSmall="size === 'small' ? true : false"
+          :header-cell-style="{
+            background: 'var(--el-fill-color-light)',
+            color: 'var(--el-text-color-primary)'
+          }"
+          @selection-change="handleSelectionChange"
+        >
+          <template #operation="{ row }">
+            <el-button
+              class="reset-margin"
+              link
+              type="primary"
+              :size="size"
+              :icon="useRenderIcon(EditPen)"
+              @click="handleDetail(row)"
+            >
+              {{ t("buttons:Details") }}
+            </el-button>
+          </template>
+        </pure-table>
+      </template>
+    </PureTableBar>
+    <el-drawer v-model="drawerStatus" title="查询详情" :size="`50%`" show-close>
+      <el-collapse v-model="activeCollapse" :accordion="false">
+        <!-- 基本信息 -->
+        <el-collapse-item title="基本信息" name="baseInfo">
+          <el-descriptions border>
+            <el-descriptions-item align="center" label="查询文本">{{
+              rowInfo.query_text
+            }}</el-descriptions-item>
+          </el-descriptions>
+        </el-collapse-item>
+        <!-- 查询结果 -->
+        <el-collapse-item
+          v-for="(item, index) in rowInfo.result_text"
+          :key="item.id"
+          :title="`匹配结果${index + 1}`"
+          :name="`result${index + 1}`"
+        >
+          <el-descriptions border :column="1">
+            <el-descriptions-item align="center" label="编码ID">{{
+              item.id
+            }}</el-descriptions-item>
+            <el-descriptions-item align="center" label="海关编码">{{
+              item.code
+            }}</el-descriptions-item>
+            <el-descriptions-item align="center" label="编码描述">{{
+              item.description
+            }}</el-descriptions-item>
+            <el-descriptions-item align="center" label="匹配率">{{
+              item.match_rate ? `${item.match_rate}%` : "0%"
+            }}</el-descriptions-item>
+          </el-descriptions>
+        </el-collapse-item>
+      </el-collapse>
+    </el-drawer>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineOptions({
+  name: "QueryCodedetails"
+});
+import { ref, reactive, onMounted, h } from "vue";
+import { useRouter, useRoute } from "vue-router";
+import dayjs from "dayjs";
+import { useI18n } from "vue-i18n";
+import { isEmpty, isString } from "@pureadmin/utils";
+import { PureTableBar } from "@/components/RePureTableBar";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+// import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
+import EditPen from "@iconify-icons/ep/edit-pen";
+import Refresh from "@iconify-icons/ep/refresh";
+import AddFill from "@iconify-icons/ri/add-circle-line";
+// import { $t } from "@/plugins/i18n";
+import type {
+  QueryCodeLogInfo,
+  QueryResult,
+  QueryResultItem
+} from "types/code";
+import { getCodeLogInfoAPI } from "@/api/code";
+import { PaginationProps } from "@pureadmin/table";
+const { t } = useI18n();
+const route = useRoute();
+const router = useRouter();
+const getParameter = isEmpty(route.params) ? route.query : route.params;
+console.log(getParameter);
+// /**初始化加载页面 */
+// function init() {
+//   Object.keys(getParameter).forEach(param => {
+//     if (!isString(getParameter[param])) {
+//       getParameter[param] = getParameter[param].toString();
+//     } else {
+//       getParameter["detailsId"] = "";
+//     }
+//   });
+//   useMultiTagsStoreHook().handleTags("push", {
+//     path: "/code/log/details/:detailsId",
+//     name: "QueryCodedetails",
+//     params: getParameter,
+//     meta: {
+//       title: $t("menus:QueryCodedetails")
+//     },
+//     dynamicLevel: 1
+//   });
+//   router.push({
+//     name: "QueryCodedetails",
+//     params: getParameter
+//   });
+// }
+// init();
+const activeCollapse = ref(["baseInfo"]);
+/**
+ * 查询结果
+ */
+const queryInfo = ref<QueryCodeLogInfo>();
+/**
+ * 数据列表
+ */
+const dataList = ref<QueryResult[]>([]);
+const tableRef = ref();
+/**抽屉状态 */
+const drawerStatus = ref<boolean>(false);
+const loading = ref(true);
+const selectedNum = ref(0);
+const pagination = reactive<PaginationProps>({
+  total: 0,
+  pageSize: 10,
+  currentPage: 1,
+  background: true,
+  pageSizes: [10, 20, 30, 40, 50]
+});
+/**列表值 */
+const rowInfo = reactive<QueryResult>({
+  query_text: "",
+  status: 0,
+  id: "",
+  result_text: []
+});
+/**
+ * 表格列设置
+ */
+const columns: TableColumnList = [
+  {
+    label: "勾选列", // 如果需要表格多选，此处label必须设置
+    type: "selection",
+    fixed: "left",
+    reserveSelection: true // 数据刷新后保留选项
+  },
+  {
+    label: "查询ID",
+    prop: "id"
+  },
+  {
+    label: "查询文本",
+    prop: "query_text"
+  },
+  {
+    label: "操作",
+    fixed: "right",
+    width: 250,
+    slot: "operation"
+  }
+];
+/**获取查询结果 */
+const getQueryInfo = async () => {
+  const res = await getCodeLogInfoAPI(getParameter.detailsId as string);
+  if (res.success) {
+    queryInfo.value = res.data;
+    dataList.value = JSON.parse(
+      res.data.response_result.replace(/'/g, '"').replace(/None/g, "null")
+    );
+    loading.value = false;
+  }
+};
+const handleDetail = (row: QueryResultItem) => {
+  drawerStatus.value = true;
+  Object.assign(rowInfo, row);
+};
+/** 当CheckBox选择项发生变化时会触发该事件 */
+const handleSelectionChange = async (val: any) => {
+  selectedNum.value = val.length;
+  // 重置表格高度
+  tableRef.value.setAdaptive();
+};
+
+/** 取消选择 */
+const onSelectionCancel = async () => {
+  selectedNum.value = 0;
+  // 用于多选表格，清空用户的选择
+  tableRef.value.getTableRef().clearSelection();
+};
+onMounted(async () => {
+  await getQueryInfo();
+});
+</script>

src/views/codes/log/index.vue

@@ -0,0 +1,184 @@
+<template>
+  <div class="main">
+    <el-form
+      ref="formRef"
+      :inline="true"
+      :model="form"
+      class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto"
+    >
+      <el-form-item label="操作时间" prop="operatingTime">
+        <el-date-picker
+          v-model="form.timeRange"
+          :shortcuts="getPickerShortcuts()"
+          type="datetimerange"
+          range-separator="至"
+          start-placeholder="开始日期时间"
+          end-placeholder="结束日期时间"
+          value-format="x"
+          unlink-panels
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button
+          type="primary"
+          :icon="useRenderIcon('ri:search-line')"
+          :loading="loading"
+          @click="onSearch"
+        >
+          {{ t("buttons:Search") }}
+        </el-button>
+        <el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)">
+          {{ t("buttons:Reset") }}
+        </el-button>
+      </el-form-item>
+    </el-form>
+
+    <PureTableBar title="操作日志" :columns="columns" @refresh="onSearch">
+      <template #buttons>
+        <!-- <el-popconfirm title="确定要删除所有日志数据吗？" @confirm="clearAll">
+          <template #reference>
+            <el-button type="danger" :icon="useRenderIcon(Delete)">
+              清空日志
+            </el-button>
+          </template>
+        </el-popconfirm> -->
+      </template>
+      <template v-slot="{ size, dynamicColumns }">
+        <div
+          v-if="selectedNum > 0"
+          v-motion-fade
+          class="bg-[var(--el-fill-color-light)] w-full h-[46px] mb-2 pl-4 flex items-center"
+        >
+          <div class="flex-auto">
+            <span
+              style="font-size: var(--el-font-size-base)"
+              class="text-[rgba(42,46,54,0.5)] dark:text-[rgba(220,220,242,0.5)]"
+            >
+              已选 {{ selectedNum }} 项
+            </span>
+            <el-button type="primary" text @click="onSelectionCancel">
+              {{ t("buttons:Deselect") }}
+            </el-button>
+          </div>
+          <el-popconfirm title="是否确认删除?">
+            <template #reference>
+              <el-button type="danger" text class="mr-1">
+                {{ t("buttons:DeleteInBatches") }}
+              </el-button>
+            </template>
+          </el-popconfirm>
+        </div>
+        <pure-table
+          ref="tableRef"
+          row-key="id"
+          align-whole="center"
+          table-layout="auto"
+          :loading="loading"
+          :size="size"
+          adaptive
+          :adaptiveConfig="{ offsetBottom: 108 }"
+          :data="dataList"
+          :columns="dynamicColumns"
+          :pagination="{ ...pagination, size }"
+          :header-cell-style="{
+            background: 'var(--el-fill-color-light)',
+            color: 'var(--el-text-color-primary)'
+          }"
+          @selection-change="handleSelectionChange"
+          @page-size-change="handleSizeChange"
+          @page-current-change="handleCurrentChange"
+        >
+          <template #operation="{ row }">
+            <el-button
+              class="reset-margin"
+              link
+              type="primary"
+              :size="size"
+              :icon="useRenderIcon(View)"
+              @click="onClickDetails(row)"
+            >
+              {{ t("buttons:Details") }}
+            </el-button>
+          </template>
+        </pure-table>
+      </template>
+    </PureTableBar>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineOptions({
+  name: "CodeQueryLog"
+});
+// import dayjs from "dayjs";
+import { ref } from "vue";
+import View from "@iconify-icons/ep/view";
+// import Delete from "@iconify-icons/ep/delete";
+import Refresh from "@iconify-icons/ep/refresh";
+import { PureTableBar } from "@/components/RePureTableBar";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+import { isString } from "@pureadmin/utils";
+import { useRouter } from "vue-router";
+import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
+import { $t } from "@/plugins/i18n";
+const router = useRouter();
+import { useI18n } from "vue-i18n";
+import { useQueryLog } from "./utils/hook";
+import { QueryCodeLogInfo } from "types/code";
+const formRef = ref();
+const tableRef = ref();
+const { t } = useI18n();
+const {
+  form,
+  loading,
+  columns,
+  dataList,
+  pagination,
+  selectedNum,
+  onSearch,
+  resetForm,
+  handleCurrentChange,
+  handleSelectionChange,
+  handleSizeChange,
+  onSelectionCancel,
+  getPickerShortcuts
+} = useQueryLog(tableRef);
+/**处理详情 */
+const onClickDetails = (row: QueryCodeLogInfo) => {
+  let params = { detailsId: row.id };
+  Object.keys(params).forEach(param => {
+    if (!isString(params[param])) {
+      params[param] = params[param].toString();
+    }
+  });
+  useMultiTagsStoreHook().handleTags("push", {
+    path: "/code/log/details/:detailsId",
+    name: "QueryCodedetails",
+    params: params,
+    meta: {
+      title: $t("menus:QueryCodedetails")
+    },
+    dynamicLevel: 1
+  });
+  router.push({
+    name: "QueryCodedetails",
+    params: params
+  });
+};
+</script>
+
+<style scoped lang="scss">
+:deep(.el-dropdown-menu__item i) {
+  margin: 0;
+}
+
+.main-content {
+  margin: 24px 24px 0 !important;
+}
+
+.search-form {
+  :deep(.el-form-item) {
+    margin-bottom: 12px;
+  }
+}
+</style>

src/views/codes/log/utils/hook.tsx

@@ -0,0 +1,316 @@
+import dayjs from "dayjs";
+import timezone from "dayjs/plugin/timezone"; // 时区插件
+import utc from "dayjs/plugin/utc"; // UTC 插件
+
+dayjs.extend(utc);
+dayjs.extend(timezone);
+import { usePublicHooks } from "@/views/system/hooks";
+import type { PaginationProps } from "@pureadmin/table";
+import { type Ref, reactive, ref, onMounted } from "vue";
+import type { QueryCodeLogInfo } from "types/code";
+import { getCodeLogListAPI } from "@/api/code";
+
+export const useQueryLog = (tableRef: Ref) => {
+  /**查询表单 */
+  const form = reactive({
+    timeRange: [null, null]
+  });
+  /**数据列表 */
+  const dataList = ref<QueryCodeLogInfo[]>([]);
+  /**等待状态 */
+  const loading = ref(true);
+  const selectedNum = ref(0);
+  const { tagStyle } = usePublicHooks();
+
+  const pagination = reactive<PaginationProps>({
+    total: 0,
+    pageSize: 10,
+    currentPage: 1,
+    background: true,
+    pageSizes: [10, 20, 30, 40, 50]
+  });
+  const columns: TableColumnList = [
+    {
+      label: "勾选列", // 如果需要表格多选，此处label必须设置
+      type: "selection",
+      fixed: "left",
+      reserveSelection: true // 数据刷新后保留选项
+    },
+    {
+      label: "查询ID",
+      prop: "id"
+    },
+    {
+      label: "操作人员账号",
+      prop: "operator_name",
+      minWidth: 100
+    },
+    {
+      label: "操作人员昵称",
+      prop: "operator_nickname",
+      minWidth: 100
+    },
+    {
+      label: "查询统计",
+      prop: "query_count"
+    },
+    {
+      label: "结果统计",
+      prop: "result_count"
+    },
+    {
+      label: "查询耗时",
+      prop: "cost_time",
+      cellRenderer: ({ row, props }) => (
+        <el-tag
+          size={props.size}
+          type={row.cost_time < 1000 ? "success" : "warning"}
+          effect="plain"
+        >
+          {row.cost_time.toFixed(2)} ms
+        </el-tag>
+      )
+    },
+    {
+      label: "查询状态",
+      prop: "status",
+      cellRenderer: ({ row, props }) => (
+        <el-tag size={props.size} style={tagStyle.value(row.status)}>
+          {row.status === 1 ? "成功" : "失败"}
+        </el-tag>
+      )
+    },
+    {
+      label: "操作时间",
+      prop: "operation_time",
+      minWidth: 180,
+      formatter: ({ operation_time }) =>
+        dayjs(operation_time).format("YYYY-MM-DD HH:mm:ss")
+    },
+    {
+      label: "操作",
+      fixed: "right",
+      width: 100,
+      slot: "operation"
+    }
+  ];
+  const handleSizeChange = async (val: number) => {
+    const res = await getCodeLogListAPI({
+      page: pagination.currentPage,
+      pageSize: val,
+      startTime: form.timeRange[0] ? form.timeRange[0] : null,
+      endTime: form.timeRange[1] ? form.timeRange[1] : null
+    });
+    if (res.success) {
+      dataList.value = res.data.result;
+      pagination.total = res.data.total;
+      pagination.currentPage = res.data.page;
+    }
+  };
+  const handleCurrentChange = async (val: number) => {
+    const res = await getCodeLogListAPI({
+      page: val,
+      pageSize: pagination.pageSize,
+      startTime: form.timeRange[0] ? form.timeRange[0] : null,
+      endTime: form.timeRange[1] ? form.timeRange[1] : null
+    });
+    if (res.success) {
+      dataList.value = res.data.result;
+      pagination.total = res.data.total;
+      pagination.currentPage = res.data.page;
+    }
+  };
+
+  /** 当CheckBox选择项发生变化时会触发该事件 */
+  const handleSelectionChange = val => {
+    selectedNum.value = val.length;
+    // 重置表格高度
+    tableRef.value.setAdaptive();
+  };
+
+  /** 取消选择 */
+  const onSelectionCancel = () => {
+    selectedNum.value = 0;
+    // 用于多选表格，清空用户的选择
+    tableRef.value.getTableRef().clearSelection();
+  };
+  const onSearch = async () => {
+    loading.value = true;
+    const res = await getCodeLogListAPI({
+      page: pagination.currentPage,
+      pageSize: pagination.pageSize,
+      startTime: form.timeRange[0] ? form.timeRange[0] : null,
+      endTime: form.timeRange[1] ? form.timeRange[1] : null
+    });
+    if (res.success) {
+      dataList.value = res.data.result;
+      pagination.total = res.data.total;
+      pagination.currentPage = res.data.page;
+    }
+
+    setTimeout(() => {
+      loading.value = false;
+    }, 500);
+  };
+
+  const resetForm = formEl => {
+    if (!formEl) return;
+    formEl.resetFields();
+    onSearch();
+  };
+  /** 日期、时间选择器快捷选项，常搭配 [DatePicker](https://element-plus.org/zh-CN/component/date-picker.html) 和 [DateTimePicker](https://element-plus.org/zh-CN/component/datetime-picker.html) 的`shortcuts`属性使用 */
+  const getPickerShortcuts = (): Array<{
+    text: string;
+    value: Date | Function;
+  }> => {
+    return [
+      {
+        text: "今天",
+        value: () => {
+          const today = new Date();
+          today.setHours(0, 0, 0, 0);
+          const todayEnd = new Date();
+          todayEnd.setHours(23, 59, 59, 999);
+          return [today, todayEnd];
+        }
+      },
+      {
+        text: "昨天",
+        value: () => {
+          const yesterday = new Date();
+          yesterday.setDate(yesterday.getDate() - 1);
+          yesterday.setHours(0, 0, 0, 0);
+          const yesterdayEnd = new Date();
+          yesterdayEnd.setDate(yesterdayEnd.getDate() - 1);
+          yesterdayEnd.setHours(23, 59, 59, 999);
+          return [yesterday, yesterdayEnd];
+        }
+      },
+      {
+        text: "前天",
+        value: () => {
+          const beforeYesterday = new Date();
+          beforeYesterday.setDate(beforeYesterday.getDate() - 2);
+          beforeYesterday.setHours(0, 0, 0, 0);
+          const beforeYesterdayEnd = new Date();
+          beforeYesterdayEnd.setDate(beforeYesterdayEnd.getDate() - 2);
+          beforeYesterdayEnd.setHours(23, 59, 59, 999);
+          return [beforeYesterday, beforeYesterdayEnd];
+        }
+      },
+      {
+        text: "本周",
+        value: () => {
+          const today = new Date();
+          const startOfWeek = new Date(
+            today.getFullYear(),
+            today.getMonth(),
+            today.getDate() - today.getDay() + (today.getDay() === 0 ? -6 : 1)
+          );
+          startOfWeek.setHours(0, 0, 0, 0);
+          const endOfWeek = new Date(
+            startOfWeek.getTime() +
+              6 * 24 * 60 * 60 * 1000 +
+              23 * 60 * 60 * 1000 +
+              59 * 60 * 1000 +
+              59 * 1000 +
+              999
+          );
+          return [startOfWeek, endOfWeek];
+        }
+      },
+      {
+        text: "上周",
+        value: () => {
+          const today = new Date();
+          const startOfLastWeek = new Date(
+            today.getFullYear(),
+            today.getMonth(),
+            today.getDate() -
+              today.getDay() -
+              7 +
+              (today.getDay() === 0 ? -6 : 1)
+          );
+          startOfLastWeek.setHours(0, 0, 0, 0);
+          const endOfLastWeek = new Date(
+            startOfLastWeek.getTime() +
+              6 * 24 * 60 * 60 * 1000 +
+              23 * 60 * 60 * 1000 +
+              59 * 60 * 1000 +
+              59 * 1000 +
+              999
+          );
+          return [startOfLastWeek, endOfLastWeek];
+        }
+      },
+      {
+        text: "本月",
+        value: () => {
+          const today = new Date();
+          const startOfMonth = new Date(
+            today.getFullYear(),
+            today.getMonth(),
+            1
+          );
+          startOfMonth.setHours(0, 0, 0, 0);
+          const endOfMonth = new Date(
+            today.getFullYear(),
+            today.getMonth() + 1,
+            0
+          );
+          endOfMonth.setHours(23, 59, 59, 999);
+          return [startOfMonth, endOfMonth];
+        }
+      },
+      {
+        text: "上个月",
+        value: () => {
+          const today = new Date();
+          const startOfLastMonth = new Date(
+            today.getFullYear(),
+            today.getMonth() - 1,
+            1
+          );
+          startOfLastMonth.setHours(0, 0, 0, 0);
+          const endOfLastMonth = new Date(
+            today.getFullYear(),
+            today.getMonth(),
+            0
+          );
+          endOfLastMonth.setHours(23, 59, 59, 999);
+          return [startOfLastMonth, endOfLastMonth];
+        }
+      },
+      {
+        text: "本年",
+        value: () => {
+          const today = new Date();
+          const startOfYear = new Date(today.getFullYear(), 0, 1);
+          startOfYear.setHours(0, 0, 0, 0);
+          const endOfYear = new Date(today.getFullYear(), 11, 31);
+          endOfYear.setHours(23, 59, 59, 999);
+          return [startOfYear, endOfYear];
+        }
+      }
+    ];
+  };
+
+  onMounted(async () => {
+    await onSearch();
+  });
+  return {
+    form,
+    loading,
+    dataList,
+    columns,
+    selectedNum,
+    pagination,
+    onSearch,
+    getPickerShortcuts,
+    resetForm,
+    handleCurrentChange,
+    handleSizeChange,
+    handleSelectionChange,
+    onSelectionCancel
+  };
+};