From 97b4e942c2bb29ccfe2be08452498a1d17506ad8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=9A=93=E6=9C=88=E5=BD=92=E5=B0=98?= Date: Sat, 15 Feb 2025 03:56:34 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E7=BC=96=E7=A0=81?= =?UTF-8?q?=E6=9F=A5=E8=AF=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/code.ts | 36 +++- src/views/codes/index.vue | 195 ------------------- src/views/codes/index/index.vue | 254 ++++++++++++++++++++++++ src/views/codes/index/utils/hook.tsx | 279 +++++++++++++++++++++++++++ types/code.d.ts | 36 +++- 5 files changed, 603 insertions(+), 197 deletions(-) delete mode 100644 src/views/codes/index.vue create mode 100644 src/views/codes/index/index.vue create mode 100644 src/views/codes/index/utils/hook.tsx diff --git a/src/api/code.ts b/src/api/code.ts index 0099669..7403dae 100644 --- a/src/api/code.ts +++ b/src/api/code.ts @@ -1,5 +1,5 @@ import { http } from "@/utils/http"; -import type { CodeInfo, QueryCodeResult } from "types/code"; +import type { CodeInfo, QueryCodeLogInfo, QueryCodeResult } from "types/code"; /** * 获取编码模版 @@ -10,6 +10,15 @@ export const getCodeTemplateAPI = () => { }); }; +/** + * 获取查询模版 + */ +export const getQueryTemplateAPI = () => { + return http.request("get", "/api/code/queryTemplate", { + responseType: "blob" // 设置响应类型为 blob + }); +}; + /** * 导入编码 */ @@ -88,3 +97,28 @@ export const postCodeInfoAPI = (data: { query_text: string }) => { data }); }; + +/**查询编码 */ +export const getQueryCodeAPI = (id: string) => { + return http.request("get", `/api/code/query/${id}`); +}; + +/** + * 获取编码日志列表 + * @param params + * @returns + */ +export const getCodeLogListAPI = (params: { + page: number; + PageSize: number; + startTime?: number; + endTime?: number; +}) => { + return http.request>( + "get", + `/api/code/logList`, + { + params + } + ); +}; diff --git a/src/views/codes/index.vue b/src/views/codes/index.vue deleted file mode 100644 index 7f6f7da..0000000 --- a/src/views/codes/index.vue +++ /dev/null @@ -1,195 +0,0 @@ - - - - - diff --git a/src/views/codes/index/index.vue b/src/views/codes/index/index.vue new file mode 100644 index 0000000..eedb1e4 --- /dev/null +++ b/src/views/codes/index/index.vue @@ -0,0 +1,254 @@ + + + + + diff --git a/src/views/codes/index/utils/hook.tsx b/src/views/codes/index/utils/hook.tsx new file mode 100644 index 0000000..797a52f --- /dev/null +++ b/src/views/codes/index/utils/hook.tsx @@ -0,0 +1,279 @@ +import { message } from "@/utils/message"; +import { type Ref, ref, reactive } from "vue"; +import type { PaginationProps } from "@pureadmin/table"; +import type { QueryCodeResult, QueryResult, QueryResultItem } from "types/code"; +import { + ElMessageBox, + type UploadProps, + type UploadUserFile +} from "element-plus"; +import { + getQueryCodeAPI, + getQueryTemplateAPI, + postCodeInfoAPI +} from "@/api/code"; +import { deleteFileAPI, postUploadFileAPI } from "@/api/file"; + +export const useIndex = (tableRef: Ref) => { + /** + * 查询表单 + */ + const form = reactive({ + query_text: "" + }); + /** + * 表单Ref + */ + // const formRef = ref(null); + /** + * 数据列表 + */ + const dataList = ref([]); + /** + * 加载状态 + */ + const loading = ref(false); + /** + * 已选数量 + */ + const selectedNum = ref(0); + /** + * 分页参数 + */ + const pagination = reactive({ + total: 0, + pageSize: 10, + currentPage: 1, + background: true, + pageSizes: [10, 20, 30, 40, 50] + }); + // 上传文件区域显示状态 + const showUploadArea = ref(false); + const fileList = ref([]); + /**上传成功后文件列表 */ + const fileIds = ref([]); + const fileId = ref(""); + /**上传按钮状态 */ + const uploadStatus = ref(false); + /** + * 查询结果 + */ + const queryResult = ref(); + /**列表值 */ + const rowInfo = reactive({ + id: "", + code: "", + description: "", + match_rate: 0 + }); + /**抽屉状态 */ + const drawerStatus = ref(false); + /** + * 表格列设置 + */ + 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 onSearch = async () => { + loading.value = true; + const res = await postCodeInfoAPI({ + query_text: form.query_text + }); + if (res.success) { + queryResult.value = res.data; + dataList.value = res.data.response_result; + pagination.total = res.data.result_count; + } + message(res.msg, { + type: res.success ? "success" : "error" + }); + loading.value = false; + }; + /** + * 重置表单 + * @param formEl 表单ref + * @returns + */ + const resetForm = (formEl: any) => { + if (!formEl) return; + formEl.resetFields(); + onSearch(); + }; + /** 当CheckBox选择项发生变化时会触发该事件 */ + const handleSelectionChange = async (val: any) => { + selectedNum.value = val.length; + // 重置表格高度 + tableRef.value.setAdaptive(); + }; + + /** 取消选择 */ + const onSelectionCancel = async () => { + selectedNum.value = 0; + // 用于多选表格，清空用户的选择 + tableRef.value.getTableRef().clearSelection(); + }; + /**下载模版文件 */ + const onDownloadTemplate = async () => { + try { + const blob = await getQueryTemplateAPI(); + + // 生成下载链接 + // @ts-ignore + const url = URL.createObjectURL(blob); + + // 创建 元素并触发下载 + const link = document.createElement("a"); + link.href = url; + link.download = "上传模版.xlsx"; // 设置下载文件名，确保后缀名正确 + document.body.appendChild(link); // 将 元素添加到 DOM 中 + link.click(); // 模拟点击下载 + + // 清理 URL 对象 + URL.revokeObjectURL(url); + document.body.removeChild(link); // 移除 元素 + } catch (error) { + console.error("下载模板失败:", error); + } + }; + /** 上传文件前 */ + const beforeUpload = async file => { + const isExcel = + file.type === + "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" || // xlsx + file.type === "application/vnd.ms-excel" || // xls + file.name.endsWith(".xlsx") || // 兼容部分浏览器 + file.name.endsWith(".xls"); // 兼容部分浏览器 + + // const maxSize = 20 * 1024 * 1024; // 20MB 限制 + + if (!isExcel) { + message("只能上传 xlsx 或 xls 文件!", { type: "error" }); + return false; + } + /* + if (file.size > maxSize) { + message("文件大小应在 20MB 以内!", { type: "error" }); + return false; + } + */ + + return true; + }; + + /**处理文件上传 */ + const handleUpload = async () => { + if (fileList.value.length === 0) { + message("请先上传文件！", { type: "error", duration: 5000 }); + return; + } + uploadStatus.value = true; + for (const file of fileList.value) { + if (file.status === "success") { + const data = await getQueryCodeAPI(fileId.value); + if (data.success) { + message("查询成功！", { type: "success" }); + queryResult.value = data.data; + dataList.value = data.data.response_result; + pagination.total = data.data.result_count; + } + continue; + } + try { + const res = await postUploadFileAPI({ + file: file.raw + }); + if (res.success) { + file.status = "success"; + fileId.value = res.data.id; + message(`${res.data.name}上传成功！`, { type: "success" }); + fileIds.value.push(res.data); + const data = await getQueryCodeAPI(fileId.value); + if (data.success) { + message(`查询成功！`, { type: "success" }); + queryResult.value = data.data; + dataList.value = data.data.response_result; + pagination.total = data.data.result_count; + } + } else { + file.status = "fail"; + } + } catch (error) { + console.error(error); + } + } + uploadStatus.value = false; + }; + /**移除文件 */ + const beforeRemove: UploadProps["beforeRemove"] = async uploadFile => { + return ElMessageBox.confirm(`是否移除 ${uploadFile.name} ?`).then( + async () => { + if (uploadFile.status === "success") { + const fileId = fileIds.value.filter( + item => item.filename === uploadFile.name + )[0]["fileId"]; + const res = await deleteFileAPI(fileId); + if (res.code === 200) { + message(res.msg, { type: "success" }); + return true; + } else { + message(res.msg, { type: "error" }); + return false; + } + } else { + return true; + } + }, + () => false + ); + }; + const handleDetail = (row: QueryResultItem) => { + drawerStatus.value = true; + Object.assign(rowInfo, row); + }; + return { + form, + dataList, + loading, + pagination, + columns, + queryResult, + selectedNum, + showUploadArea, + fileIds, + fileList, + uploadStatus, + rowInfo, + drawerStatus, + beforeUpload, + handleUpload, + beforeRemove, + onSearch, + resetForm, + handleSelectionChange, + onSelectionCancel, + onDownloadTemplate, + handleDetail + }; +}; diff --git a/types/code.d.ts b/types/code.d.ts index fc2458e..7354f5c 100644 --- a/types/code.d.ts +++ b/types/code.d.ts @@ -37,10 +37,12 @@ export interface QueryResult { /**会话ID */ id: string; /**结果 */ - result: QueryResultItem[]; + result_text: QueryResultItem[]; } /**查询编码结果 */ export interface QueryCodeResult { + /**查询ID */ + id: string; /**查询文本 */ query: string; /**查询统计 */ @@ -53,4 +55,36 @@ export interface QueryCodeResult { response_result: QueryResult[]; /**查询状态 */ status: number; + /**查询时间 */ + operation_time: string; +} + +/**查询编日志信息 */ +export interface QueryCodeLogInfo { + /**日志ID */ + id: string; + /**查询文本 */ + request_params: string; + /**查询统计 */ + query_count: number; + /**查询耗时 */ + cost_time: number; + /**结果统计 */ + result_count: number; + /**查询结果 */ + response_result: string; + /**查询状态 */ + status: number; + /**操作时间 */ + operation_time: string; + /** 操作员ID */ + operator_id: string; + /** 操作员名称 */ + operator_name: string; + /** 操作员昵称 */ + operator_nickname: string; + /** 部门ID */ + department_id: string; + /** 部门名称 */ + department_name: string; }