🐛 修复操作日志分页无效.

This commit is contained in:
lijiahang
2024-07-04 10:29:39 +08:00
parent 08895ba170
commit 5d3dc83bab
6 changed files with 59 additions and 47 deletions

View File

@@ -3,8 +3,9 @@
<!-- 查询头 --> <!-- 查询头 -->
<a-card class="general-card table-search-card"> <a-card class="general-card table-search-card">
<!-- 查询头组件 --> <!-- 查询头组件 -->
<operator-log-query-header :visible-user="false" <operator-log-query-header :model="formModel"
@submit="(e) => table.fetchTableData(undefined, undefined, e)" /> :visible-user="false"
@submit="() => table.fetchTableData()" />
</a-card> </a-card>
<!-- 表格 --> <!-- 表格 -->
<a-card class="general-card table-card"> <a-card class="general-card table-card">
@@ -20,7 +21,8 @@
<!-- 表格组件 --> <!-- 表格组件 -->
<operator-log-simple-table ref="table" <operator-log-simple-table ref="table"
:current="!user" :current="!user"
:base-params="{ userId: user?.id }" /> :base-params="{ userId: user?.id }"
:model="formModel"/>
</a-card> </a-card>
</div> </div>
</template> </template>
@@ -33,11 +35,12 @@
<script lang="ts" setup> <script lang="ts" setup>
import type { UserQueryResponse } from '@/api/user/user'; import type { UserQueryResponse } from '@/api/user/user';
import { ref, onBeforeMount } from 'vue'; import { ref, reactive, onBeforeMount } from 'vue';
import { useCacheStore, useDictStore } from '@/store'; import { useCacheStore, useDictStore } from '@/store';
import { dictKeys } from '@/views/user/operator-log/types/const'; import { dictKeys } from '@/views/user/operator-log/types/const';
import OperatorLogQueryHeader from '@/views/user/operator-log/components/operator-log-query-header.vue'; import OperatorLogQueryHeader from '@/views/user/operator-log/components/operator-log-query-header.vue';
import OperatorLogSimpleTable from '@/views/user/operator-log/components/operator-log-simple-table.vue'; import OperatorLogSimpleTable from '@/views/user/operator-log/components/operator-log-simple-table.vue';
import { OperatorLogQueryRequest } from '@/api/user/operator-log';
const props = defineProps<{ const props = defineProps<{
user?: UserQueryResponse; user?: UserQueryResponse;
@@ -47,6 +50,13 @@
const render = ref(); const render = ref();
const table = ref(); const table = ref();
const formModel = reactive<OperatorLogQueryRequest>({
module: undefined,
type: undefined,
riskLevel: undefined,
result: undefined,
startTimeRange: undefined,
});
onBeforeMount(async () => { onBeforeMount(async () => {
// 加载字典值 // 加载字典值

View File

@@ -1,5 +1,5 @@
<template> <template>
<query-header :model="formModel" <query-header :model="model"
label-align="left" label-align="left"
:itemOptions="{ [visibleUser ? 5 : 4]: { span: 2 } }" :itemOptions="{ [visibleUser ? 5 : 4]: { span: 2 } }"
@submit="submit" @submit="submit"
@@ -9,13 +9,13 @@
<a-form-item v-if="visibleUser" <a-form-item v-if="visibleUser"
field="userId" field="userId"
label="操作用户"> label="操作用户">
<user-selector v-model="formModel.userId" <user-selector v-model="model.userId"
placeholder="请选择操作用户" placeholder="请选择操作用户"
allow-clear /> allow-clear />
</a-form-item> </a-form-item>
<!-- 操作模块 --> <!-- 操作模块 -->
<a-form-item field="module" label="操作模块"> <a-form-item field="module" label="操作模块">
<a-select v-model="formModel.module" <a-select v-model="model.module"
:options="toOptions(operatorLogModuleKey)" :options="toOptions(operatorLogModuleKey)"
:allow-search="true" :allow-search="true"
:filter-option="labelFilter" :filter-option="labelFilter"
@@ -24,7 +24,7 @@
</a-form-item> </a-form-item>
<!-- 操作类型 --> <!-- 操作类型 -->
<a-form-item field="type" label="操作类型"> <a-form-item field="type" label="操作类型">
<a-select v-model="formModel.type" <a-select v-model="model.type"
:options="typeOptions" :options="typeOptions"
:allow-search="true" :allow-search="true"
:filter-option="labelFilter" :filter-option="labelFilter"
@@ -33,21 +33,21 @@
</a-form-item> </a-form-item>
<!-- 风险等级 --> <!-- 风险等级 -->
<a-form-item field="riskLevel" label="风险等级"> <a-form-item field="riskLevel" label="风险等级">
<a-select v-model="formModel.riskLevel" <a-select v-model="model.riskLevel"
:options="toOptions(operatorRiskLevelKey)" :options="toOptions(operatorRiskLevelKey)"
placeholder="请选择风险等级" placeholder="请选择风险等级"
allow-clear /> allow-clear />
</a-form-item> </a-form-item>
<!-- 执行结果 --> <!-- 执行结果 -->
<a-form-item field="result" label="执行结果"> <a-form-item field="result" label="执行结果">
<a-select v-model="formModel.result" <a-select v-model="model.result"
:options="toOptions(operatorLogResultKey)" :options="toOptions(operatorLogResultKey)"
placeholder="请选择执行结果" placeholder="请选择执行结果"
allow-clear /> allow-clear />
</a-form-item> </a-form-item>
<!-- 执行时间 --> <!-- 执行时间 -->
<a-form-item field="startTimeRange" label="执行时间"> <a-form-item field="startTimeRange" label="执行时间">
<a-range-picker v-model="formModel.startTimeRange" <a-range-picker v-model="model.startTimeRange"
:time-picker-props="{ defaultValue: ['00:00:00', '23:59:59'] }" :time-picker-props="{ defaultValue: ['00:00:00', '23:59:59'] }"
show-time show-time
format="YYYY-MM-DD HH:mm:ss" /> format="YYYY-MM-DD HH:mm:ss" />
@@ -64,34 +64,31 @@
<script lang="ts" setup> <script lang="ts" setup>
import type { OperatorLogQueryRequest } from '@/api/user/operator-log'; import type { OperatorLogQueryRequest } from '@/api/user/operator-log';
import type { SelectOptionData } from '@arco-design/web-vue/es/select/interface'; import type { SelectOptionData } from '@arco-design/web-vue/es/select/interface';
import { reactive, ref, watch } from 'vue'; import { ref, watch } from 'vue';
import useLoading from '@/hooks/loading'; import useLoading from '@/hooks/loading';
import { useDictStore } from '@/store'; import { useDictStore } from '@/store';
import { operatorLogModuleKey, operatorLogTypeKey, operatorRiskLevelKey, operatorLogResultKey } from '../types/const'; import { operatorLogModuleKey, operatorLogTypeKey, operatorRiskLevelKey, operatorLogResultKey } from '../types/const';
import { labelFilter } from '@/types/form'; import { labelFilter } from '@/types/form';
import UserSelector from '@/components/user/user/selector/index.vue'; import UserSelector from '@/components/user/user/selector/index.vue';
const emits = defineEmits(['submit']); const emits = defineEmits(['submit', 'update:modelValue']);
const props = withDefaults(defineProps<Partial<{ const props = withDefaults(defineProps<Partial<{
visibleUser: boolean; visibleUser: boolean;
model: OperatorLogQueryRequest;
}>>(), { }>>(), {
visibleUser: true, visibleUser: true,
model: () => {
return {};
},
}); });
const { loading, setLoading } = useLoading(); const { loading, setLoading } = useLoading();
const { $state: dictState, toOptions } = useDictStore(); const { $state: dictState, toOptions } = useDictStore();
const typeOptions = ref<SelectOptionData[]>(toOptions(operatorLogTypeKey)); const typeOptions = ref<SelectOptionData[]>(toOptions(operatorLogTypeKey));
const formModel = reactive<OperatorLogQueryRequest>({
module: undefined,
type: undefined,
riskLevel: undefined,
result: undefined,
startTimeRange: undefined,
});
// 监听类型变化 // 监听类型变化
watch(() => formModel.module, (module: string | undefined) => { watch(() => props.model?.module, (module: string | undefined) => {
if (!module) { if (!module) {
// 不选择则重置 options // 不选择则重置 options
typeOptions.value = toOptions(operatorLogTypeKey); typeOptions.value = toOptions(operatorLogTypeKey);
@@ -102,14 +99,14 @@
// 渲染 options // 渲染 options
typeOptions.value = dictState[operatorLogTypeKey].filter(s => (s.value as string).startsWith(modulePrefix)); typeOptions.value = dictState[operatorLogTypeKey].filter(s => (s.value as string).startsWith(modulePrefix));
// 渲染输入框 // 渲染输入框
if (formModel.type && !formModel.type.startsWith(modulePrefix)) { if (props.model.type && !props.model.type.startsWith(modulePrefix)) {
formModel.type = undefined; props.model.type = undefined;
} }
}); });
// 切换页码 // 切换页码
const submit = () => { const submit = () => {
emits('submit', { ...formModel }); emits('submit');
}; };
</script> </script>

View File

@@ -84,11 +84,15 @@
const props = withDefaults(defineProps<Partial<{ const props = withDefaults(defineProps<Partial<{
handleColumn: boolean; handleColumn: boolean;
current: boolean; current: boolean;
baseParams: object; baseParams: OperatorLogQueryRequest;
model: OperatorLogQueryRequest;
}>>(), { }>>(), {
baseParams: () => { baseParams: () => {
return {}; return {};
}, },
model: () => {
return {};
},
}); });
const pagination = usePagination(); const pagination = usePagination();
@@ -131,7 +135,7 @@
}; };
// 切换页码 // 切换页码
const fetchTableData = (page = 1, limit = pagination.pageSize, form = {}) => { const fetchTableData = (page = 1, limit = pagination.pageSize, form = props.model) => {
doFetchTableData({ page, limit, ...form }); doFetchTableData({ page, limit, ...form });
}; };

View File

@@ -2,7 +2,8 @@
<!-- 查询头 --> <!-- 查询头 -->
<a-card class="general-card table-search-card"> <a-card class="general-card table-search-card">
<!-- 查询头组件 --> <!-- 查询头组件 -->
<operator-log-query-header @submit="(e) => fetchTableData(undefined, undefined, e)" /> <operator-log-query-header :model="formModel"
@submit="fetchTableData" />
</a-card> </a-card>
<!-- 表格 --> <!-- 表格 -->
<a-card class="general-card table-card"> <a-card class="general-card table-card">
@@ -131,7 +132,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import type { OperatorLogQueryRequest, OperatorLogQueryResponse } from '@/api/user/operator-log'; import type { OperatorLogQueryRequest, OperatorLogQueryResponse } from '@/api/user/operator-log';
import { ref, onMounted } from 'vue'; import { ref, reactive, onMounted } from 'vue';
import { operatorLogModuleKey, operatorLogTypeKey, operatorRiskLevelKey, operatorLogResultKey, getLogDetail } from '../types/const'; import { operatorLogModuleKey, operatorLogTypeKey, operatorRiskLevelKey, operatorLogResultKey, getLogDetail } from '../types/const';
import columns from '../types/table.columns'; import columns from '../types/table.columns';
import { copy } from '@/hooks/copy'; import { copy } from '@/hooks/copy';
@@ -152,8 +153,15 @@
const clearModal = ref(); const clearModal = ref();
const jsonView = ref(); const jsonView = ref();
const tableRenderData = ref<OperatorLogQueryResponse[]>([]); const selectedKeys = ref<Array<number>>([]);
const selectedKeys = ref<number[]>([]); const tableRenderData = ref<Array<OperatorLogQueryResponse>>([]);
const formModel = reactive<OperatorLogQueryRequest>({
module: undefined,
type: undefined,
riskLevel: undefined,
result: undefined,
startTimeRange: undefined,
});
// 查看详情 // 查看详情
const openLogDetail = (record: OperatorLogQueryResponse) => { const openLogDetail = (record: OperatorLogQueryResponse) => {
@@ -182,13 +190,11 @@
}; };
// 删除当前行 // 删除当前行
const deleteRow = async ({ id }: { const deleteRow = async (record: OperatorLogQueryResponse) => {
id: number
}) => {
try { try {
setLoading(true); setLoading(true);
// 调用删除接口 // 调用删除接口
await deleteOperatorLog([id]); await deleteOperatorLog([record.id]);
Message.success('删除成功'); Message.success('删除成功');
selectedKeys.value = []; selectedKeys.value = [];
// 重新加载数据 // 重新加载数据
@@ -218,7 +224,7 @@
}; };
// 切换页码 // 切换页码
const fetchTableData = (page = 1, limit = pagination.pageSize, form = {}) => { const fetchTableData = (page = 1, limit = pagination.pageSize, form = formModel) => {
doFetchTableData({ page, limit, ...form }); doFetchTableData({ page, limit, ...form });
}; };

View File

@@ -144,13 +144,12 @@
const emits = defineEmits(['openAdd', 'openUpdate', 'openGrant']); const emits = defineEmits(['openAdd', 'openUpdate', 'openGrant']);
const tableRenderData = ref<RoleQueryResponse[]>([]);
const pagination = usePagination(); const pagination = usePagination();
const { hasPermission } = usePermission(); const { hasPermission } = usePermission();
const { loading, setLoading } = useLoading(); const { loading, setLoading } = useLoading();
const { toOptions, getDictValue } = useDictStore(); const { toOptions, getDictValue } = useDictStore();
const tableRenderData = ref<Array<RoleQueryResponse>>([]);
const formModel = reactive<RoleQueryRequest>({ const formModel = reactive<RoleQueryRequest>({
id: undefined, id: undefined,
name: undefined, name: undefined,
@@ -168,13 +167,11 @@
}; };
// 删除当前行 // 删除当前行
const deleteRow = async ({ id }: { const deleteRow = async (record: RoleQueryResponse) => {
id: number
}) => {
try { try {
setLoading(true); setLoading(true);
// 调用删除接口 // 调用删除接口
await deleteRole(id); await deleteRole(record.id);
Message.success('删除成功'); Message.success('删除成功');
// 重新加载数据 // 重新加载数据
fetchTableData(); fetchTableData();

View File

@@ -196,8 +196,8 @@
const router = useRouter(); const router = useRouter();
const userStore = useUserStore(); const userStore = useUserStore();
const selectedKeys = ref<number[]>([]); const selectedKeys = ref<Array<number>>([]);
const tableRenderData = ref<UserQueryResponse[]>([]); const tableRenderData = ref<Array<UserQueryResponse>>([]);
const formModel = reactive<UserQueryRequest>({ const formModel = reactive<UserQueryRequest>({
id: undefined, id: undefined,
username: undefined, username: undefined,
@@ -211,13 +211,11 @@
}); });
// 删除当前行 // 删除当前行
const deleteRow = async ({ id }: { const deleteRow = async (record: UserQueryResponse) => {
id: number
}) => {
try { try {
setLoading(true); setLoading(true);
// 调用删除接口 // 调用删除接口
await deleteUser(id); await deleteUser(record.id);
Message.success('删除成功'); Message.success('删除成功');
// 重新加载数据 // 重新加载数据
fetchTableData(); fetchTableData();