diff --git a/locales/en.yaml b/locales/en.yaml index 910893c..77f7985 100644 --- a/locales/en.yaml +++ b/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 diff --git a/locales/zh-CN.yaml b/locales/zh-CN.yaml index 5cab03a..c99d088 100644 --- a/locales/zh-CN.yaml +++ b/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: 通知 diff --git a/src/api/code.ts b/src/api/code.ts index 7403dae..6540882 100644 --- a/src/api/code.ts +++ b/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>("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; - startTime?: number; - endTime?: number; + pageSize: number; + startTime?: string; + endTime?: string; }) => { return http.request>( "get", `/api/code/logList`, { - params + params: filterEmptyObject(params) } ); }; + +/**获取查询编码日志详情 */ +export const getCodeLogInfoAPI = (id: string) => { + return http.request("get", `/api/code/logInfo/${id}`); +}; diff --git a/src/views/codes/index/index.vue b/src/views/codes/index/index.vue index eedb1e4..2748a4b 100644 --- a/src/views/codes/index/index.vue +++ b/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" > - + - + + - + diff --git a/src/views/codes/index/utils/hook.tsx b/src/views/codes/index/utils/hook.tsx index 797a52f..47f2ac2 100644 --- a/src/views/codes/index/utils/hook.tsx +++ b/src/views/codes/index/utils/hook.tsx @@ -59,12 +59,13 @@ export const useIndex = (tableRef: Ref) => { * 查询结果 */ const queryResult = ref(); + const activeCollapse = ref(["baseInfo"]); /**列表值 */ - const rowInfo = reactive({ + const rowInfo = reactive({ + query_text: "", + status: 0, id: "", - code: "", - description: "", - match_rate: 0 + result_text: [] }); /**抽屉状态 */ const drawerStatus = ref(false); @@ -266,6 +267,7 @@ export const useIndex = (tableRef: Ref) => { uploadStatus, rowInfo, drawerStatus, + activeCollapse, beforeUpload, handleUpload, beforeRemove, diff --git a/src/views/codes/log.vue b/src/views/codes/log.vue deleted file mode 100644 index 3171086..0000000 --- a/src/views/codes/log.vue +++ /dev/null @@ -1,250 +0,0 @@ - - - - - diff --git a/src/views/codes/log/components/details.vue b/src/views/codes/log/components/details.vue new file mode 100644 index 0000000..8256fe0 --- /dev/null +++ b/src/views/codes/log/components/details.vue @@ -0,0 +1,258 @@ + + + diff --git a/src/views/codes/log/index.vue b/src/views/codes/log/index.vue new file mode 100644 index 0000000..41e6198 --- /dev/null +++ b/src/views/codes/log/index.vue @@ -0,0 +1,184 @@ + + + + + diff --git a/src/views/codes/log/utils/hook.tsx b/src/views/codes/log/utils/hook.tsx new file mode 100644 index 0000000..8b311bf --- /dev/null +++ b/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([]); + /**等待状态 */ + const loading = ref(true); + const selectedNum = ref(0); + const { tagStyle } = usePublicHooks(); + + const pagination = reactive({ + 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 }) => ( + + {row.cost_time.toFixed(2)} ms + + ) + }, + { + label: "查询状态", + prop: "status", + cellRenderer: ({ row, props }) => ( + + {row.status === 1 ? "成功" : "失败"} + + ) + }, + { + 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 + }; +};