255 lines
7.8 KiB
Vue
255 lines
7.8 KiB
Vue
|
<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>
|