feat: 添加编码查询
This commit is contained in:
parent
acd364fdf7
commit
97b4e942c2
@ -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<Blob>("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<QueryCodeResult>("get", `/api/code/query/${id}`);
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取编码日志列表
|
||||
* @param params
|
||||
* @returns
|
||||
*/
|
||||
export const getCodeLogListAPI = (params: {
|
||||
page: number;
|
||||
PageSize: number;
|
||||
startTime?: number;
|
||||
endTime?: number;
|
||||
}) => {
|
||||
return http.request<QueryListResult<QueryCodeLogInfo>>(
|
||||
"get",
|
||||
`/api/code/logList`,
|
||||
{
|
||||
params
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,195 +0,0 @@
|
||||
<template>
|
||||
<div class="p-4">
|
||||
<!-- 查询区域 -->
|
||||
<el-card class="mb-4">
|
||||
<div class="flex items-center space-x-4">
|
||||
<!-- 富文本输入框 -->
|
||||
<el-input
|
||||
v-model="queryText"
|
||||
type="textarea"
|
||||
autosize
|
||||
:rows="2"
|
||||
placeholder="请输入查询文本"
|
||||
class="flex-1"
|
||||
/>
|
||||
<!-- 查询按钮 -->
|
||||
<el-button type="primary" @click="handleQuery">查询</el-button>
|
||||
<!-- 清空查询按钮 -->
|
||||
<el-button @click="clearQuery">清空查询</el-button>
|
||||
<!-- 上传文件按钮 -->
|
||||
<el-button @click="toggleUploadArea">
|
||||
{{ showUploadArea ? "隐藏上传区域" : "上传文件" }}
|
||||
</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<!-- 上传文件区域 -->
|
||||
<el-card v-if="showUploadArea" class="mb-4">
|
||||
<div class="flex items-center space-x-4">
|
||||
<!-- 拖拽上传组件 -->
|
||||
<el-upload
|
||||
class="upload-demo"
|
||||
drag
|
||||
action="https://jsonplaceholder.typicode.com/posts/"
|
||||
:on-success="handleUploadSuccess"
|
||||
>
|
||||
<el-icon class="el-icon--upload"><upload-filled /></el-icon>
|
||||
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
|
||||
</el-upload>
|
||||
<!-- 下载模板按钮 -->
|
||||
<el-button type="primary" @click="downloadTemplate"
|
||||
>下载上传文件模板</el-button
|
||||
>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<!-- 查询结果区域 -->
|
||||
<el-card>
|
||||
<el-table :data="tableData" style="width: 100%">
|
||||
<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 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-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>
|
||||
</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 } from "vue";
|
||||
import { UploadFilled } from "@element-plus/icons-vue";
|
||||
defineOptions({
|
||||
name: "CodeQueryIndex"
|
||||
});
|
||||
// 查询文本
|
||||
const queryText = ref("");
|
||||
|
||||
// 上传文件区域显示状态
|
||||
const showUploadArea = ref(false);
|
||||
|
||||
// 表格数据
|
||||
const tableData = ref([
|
||||
{
|
||||
queryText: "示例查询文本1",
|
||||
result1Code: "001",
|
||||
result1: "结果1",
|
||||
result2Code: "002",
|
||||
result2: "结果2"
|
||||
},
|
||||
{
|
||||
queryText: "示例查询文本2",
|
||||
result1Code: "003",
|
||||
result1: "结果3",
|
||||
result2Code: "004",
|
||||
result2: "结果4"
|
||||
}
|
||||
]);
|
||||
|
||||
// 详情抽屉显示状态
|
||||
const detailVisible = ref(false);
|
||||
const currentRow = ref({});
|
||||
|
||||
// 反馈弹窗显示状态
|
||||
const feedbackVisible = ref(false);
|
||||
const feedbackForm = ref({
|
||||
isCorrect: true,
|
||||
correctResult: ""
|
||||
});
|
||||
|
||||
// 查询按钮点击事件
|
||||
const handleQuery = () => {
|
||||
console.log("查询文本:", queryText.value);
|
||||
// 这里可以添加查询逻辑
|
||||
};
|
||||
|
||||
// 清空查询按钮点击事件
|
||||
const clearQuery = () => {
|
||||
queryText.value = "";
|
||||
};
|
||||
|
||||
// 上传文件按钮点击事件
|
||||
const toggleUploadArea = () => {
|
||||
showUploadArea.value = !showUploadArea.value;
|
||||
};
|
||||
|
||||
// 文件上传成功事件
|
||||
const handleUploadSuccess = (response: any, file: any) => {
|
||||
console.log("文件上传成功:", file);
|
||||
};
|
||||
|
||||
// 下载模板按钮点击事件
|
||||
const downloadTemplate = () => {
|
||||
console.log("下载模板");
|
||||
// 这里可以添加下载模板逻辑
|
||||
};
|
||||
|
||||
// 显示详情抽屉
|
||||
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>
|
||||
254
src/views/codes/index/index.vue
Normal file
254
src/views/codes/index/index.vue
Normal file
@ -0,0 +1,254 @@
|
||||
<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]"
|
||||
>
|
||||
<el-form-item label="查询文本" prop="query_text">
|
||||
<el-input
|
||||
v-model="form.query_text"
|
||||
placeholder="请输入查询文本~"
|
||||
clearable
|
||||
type="textarea"
|
||||
autosize
|
||||
/>
|
||||
</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-button
|
||||
type="primary"
|
||||
:icon="useRenderIcon(AddFill)"
|
||||
@click="showUploadArea = !showUploadArea"
|
||||
>
|
||||
{{ showUploadArea ? t("buttons:Hide") : t("buttons:Import") }}
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<!-- 上传文件区域 -->
|
||||
<el-card v-if="showUploadArea" shadow="never" class="mt-2">
|
||||
<el-upload
|
||||
ref="uploadRef"
|
||||
v-model:file-list="fileList"
|
||||
drag
|
||||
action="#"
|
||||
class="w-full"
|
||||
:auto-upload="false"
|
||||
:before-upload="beforeUpload"
|
||||
:before-remove="beforeRemove"
|
||||
>
|
||||
<div class="el-upload__text">
|
||||
<IconifyIconOffline
|
||||
:icon="UploadIcon"
|
||||
width="26"
|
||||
:limit="1"
|
||||
class="m-auto mb-2"
|
||||
/>
|
||||
可点击或拖拽上传
|
||||
</div>
|
||||
</el-upload>
|
||||
<template #footer>
|
||||
<div class="flex items-center justify-center">
|
||||
<el-button class="w-full my-2" @click="onDownloadTemplate">{{
|
||||
t("buttons:DownLodedTemplate")
|
||||
}}</el-button>
|
||||
<el-popconfirm title="是否确认上传?" @confirm="handleUpload">
|
||||
<template #reference>
|
||||
<el-button
|
||||
class="w-full my-2"
|
||||
type="primary"
|
||||
:disabled="uploadStatus"
|
||||
>{{ t("buttons:ConfirmUpload") }}</el-button
|
||||
>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</div>
|
||||
</template>
|
||||
</el-card>
|
||||
<!-- 查询结果 -->
|
||||
<el-card v-if="queryResult" shadow="never" class="mt-2">
|
||||
<el-descriptions title="查询基本信息" border :column="4">
|
||||
<el-descriptions-item align="center" label="操作时间">{{
|
||||
dayjs(queryResult.operation_time).format("YYYY-MM-DD HH:mm:ss")
|
||||
}}</el-descriptions-item>
|
||||
<el-descriptions-item align="center" label="耗时"
|
||||
>{{ queryResult.cost_time.toFixed(2) }} ms</el-descriptions-item
|
||||
>
|
||||
<el-descriptions-item align="center" label="查询统计">{{
|
||||
queryResult.query_count
|
||||
}}</el-descriptions-item>
|
||||
<el-descriptions-item align="center" label="结果统计">{{
|
||||
queryResult.result_count
|
||||
}}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-card>
|
||||
<PureTableBar title="查询结果" :columns="columns" @refresh="onSearch">
|
||||
<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="是否确认删除?" @confirm="onbatchDel">
|
||||
<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"
|
||||
:size="size"
|
||||
: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"
|
||||
@page-size-change="handleSizeChange"
|
||||
@page-current-change="handleCurrentChange"
|
||||
>
|
||||
<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>
|
||||
</div>
|
||||
<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
|
||||
}}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
</el-drawer>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
defineOptions({
|
||||
name: "CodeQueryIndex"
|
||||
});
|
||||
import dayjs from "dayjs";
|
||||
import { ref } from "vue";
|
||||
import { useIndex } from "./utils/hook";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { PureTableBar } from "@/components/RePureTableBar";
|
||||
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||||
import Delete from "@iconify-icons/ep/delete";
|
||||
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 UploadIcon from "@iconify-icons/ri/upload-2-line";
|
||||
const { t } = useI18n();
|
||||
/**
|
||||
* 表格Ref
|
||||
*/
|
||||
const tableRef = ref();
|
||||
const formRef = ref();
|
||||
const {
|
||||
form,
|
||||
dataList,
|
||||
loading,
|
||||
pagination,
|
||||
columns,
|
||||
rowInfo,
|
||||
drawerStatus,
|
||||
queryResult,
|
||||
selectedNum,
|
||||
showUploadArea,
|
||||
fileIds,
|
||||
fileList,
|
||||
uploadStatus,
|
||||
beforeUpload,
|
||||
handleUpload,
|
||||
beforeRemove,
|
||||
onSearch,
|
||||
resetForm,
|
||||
handleSelectionChange,
|
||||
onSelectionCancel,
|
||||
onDownloadTemplate,
|
||||
handleDetail
|
||||
} = useIndex(tableRef);
|
||||
const activeCollapse = ["baseInfo"];
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.upload-demo {
|
||||
flex: 1;
|
||||
}
|
||||
</style>
|
||||
279
src/views/codes/index/utils/hook.tsx
Normal file
279
src/views/codes/index/utils/hook.tsx
Normal file
@ -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<QueryResult[]>([]);
|
||||
/**
|
||||
* 加载状态
|
||||
*/
|
||||
const loading = ref(false);
|
||||
/**
|
||||
* 已选数量
|
||||
*/
|
||||
const selectedNum = ref<number>(0);
|
||||
/**
|
||||
* 分页参数
|
||||
*/
|
||||
const pagination = reactive<PaginationProps>({
|
||||
total: 0,
|
||||
pageSize: 10,
|
||||
currentPage: 1,
|
||||
background: true,
|
||||
pageSizes: [10, 20, 30, 40, 50]
|
||||
});
|
||||
// 上传文件区域显示状态
|
||||
const showUploadArea = ref(false);
|
||||
const fileList = ref<UploadUserFile[]>([]);
|
||||
/**上传成功后文件列表 */
|
||||
const fileIds = ref([]);
|
||||
const fileId = ref<string>("");
|
||||
/**上传按钮状态 */
|
||||
const uploadStatus = ref<boolean>(false);
|
||||
/**
|
||||
* 查询结果
|
||||
*/
|
||||
const queryResult = ref<QueryCodeResult>();
|
||||
/**列表值 */
|
||||
const rowInfo = reactive<QueryResultItem>({
|
||||
id: "",
|
||||
code: "",
|
||||
description: "",
|
||||
match_rate: 0
|
||||
});
|
||||
/**抽屉状态 */
|
||||
const drawerStatus = ref<boolean>(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);
|
||||
|
||||
// 创建 <a> 元素并触发下载
|
||||
const link = document.createElement("a");
|
||||
link.href = url;
|
||||
link.download = "上传模版.xlsx"; // 设置下载文件名，确保后缀名正确
|
||||
document.body.appendChild(link); // 将 <a> 元素添加到 DOM 中
|
||||
link.click(); // 模拟点击下载
|
||||
|
||||
// 清理 URL 对象
|
||||
URL.revokeObjectURL(url);
|
||||
document.body.removeChild(link); // 移除 <a> 元素
|
||||
} 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
|
||||
};
|
||||
};
|
||||
36
types/code.d.ts
vendored
36
types/code.d.ts
vendored
@ -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;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user