feat: 添加编码日志
This commit is contained in:
parent
97b4e942c2
commit
4ebb798921
@ -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
|
||||
|
||||
@ -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: 通知
|
||||
|
||||
@ -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;
|
||||
startTime?: number;
|
||||
endTime?: number;
|
||||
pageSize: number;
|
||||
startTime?: string;
|
||||
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}`);
|
||||
};
|
||||
|
||||
@ -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 {
|
||||
flex: 1;
|
||||
: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>
|
||||
|
||||
@ -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: "",
|
||||
description: "",
|
||||
match_rate: 0
|
||||
result_text: []
|
||||
});
|
||||
/**抽屉状态 */
|
||||
const drawerStatus = ref<boolean>(false);
|
||||
@ -266,6 +267,7 @@ export const useIndex = (tableRef: Ref) => {
|
||||
uploadStatus,
|
||||
rowInfo,
|
||||
drawerStatus,
|
||||
activeCollapse,
|
||||
beforeUpload,
|
||||
handleUpload,
|
||||
beforeRemove,
|
||||
|
||||
@ -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>
|
||||
258
src/views/codes/log/components/details.vue
Normal file
258
src/views/codes/log/components/details.vue
Normal file
@ -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>
|
||||
184
src/views/codes/log/index.vue
Normal file
184
src/views/codes/log/index.vue
Normal file
@ -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>
|
||||
316
src/views/codes/log/utils/hook.tsx
Normal file
316
src/views/codes/log/utils/hook.tsx
Normal file
@ -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
|
||||
};
|
||||
};
|
||||
Loading…
x
Reference in New Issue
Block a user