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

2024-07-04 10:29:39 +08:00
parent 08895ba170
commit 5d3dc83bab
6 changed files with 59 additions and 47 deletions
--- a/orion-visor-ui/src/views/user/info/components/user-operator-log.vue
+++ b/orion-visor-ui/src/views/user/info/components/user-operator-log.vue
@@ -3,8 +3,9 @@
    <!-- 查询头 -->
    <a-card class="general-card table-search-card">
      <!-- 查询头组件 -->
-      <operator-log-query-header :visible-user="false"
-                                 @submit="(e) => table.fetchTableData(undefined, undefined, e)" />
+      <operator-log-query-header :model="formModel"
+                                 :visible-user="false"
+                                 @submit="() => table.fetchTableData()" />
    </a-card>
    <!-- 表格 -->
    <a-card class="general-card table-card">
@@ -20,7 +21,8 @@
      <!-- 表格组件 -->
      <operator-log-simple-table ref="table"
                                 :current="!user"
-                                 :base-params="{ userId: user?.id }" />
+                                 :base-params="{ userId: user?.id }"
+                                 :model="formModel"/>
    </a-card>
  </div>
 </template>
@@ -33,11 +35,12 @@

 <script lang="ts" setup>
  import type { UserQueryResponse } from '@/api/user/user';
-  import { ref, onBeforeMount } from 'vue';
+  import { ref, reactive, onBeforeMount } from 'vue';
  import { useCacheStore, useDictStore } from '@/store';
  import { dictKeys } from '@/views/user/operator-log/types/const';
  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 { OperatorLogQueryRequest } from '@/api/user/operator-log';

  const props = defineProps<{
    user?: UserQueryResponse;
@@ -47,6 +50,13 @@

  const render = ref();
  const table = ref();
+  const formModel = reactive<OperatorLogQueryRequest>({
+    module: undefined,
+    type: undefined,
+    riskLevel: undefined,
+    result: undefined,
+    startTimeRange: undefined,
+  });

  onBeforeMount(async () => {
    // 加载字典值
--- a/orion-visor-ui/src/views/user/operator-log/components/operator-log-query-header.vue
+++ b/orion-visor-ui/src/views/user/operator-log/components/operator-log-query-header.vue
@@ -1,5 +1,5 @@
 <template>
-  <query-header :model="formModel"
+  <query-header :model="model"
                label-align="left"
                :itemOptions="{ [visibleUser ? 5 : 4]: { span: 2 } }"
                @submit="submit"
@@ -9,13 +9,13 @@
    <a-form-item v-if="visibleUser"
                 field="userId"
                 label="操作用户">
-      <user-selector v-model="formModel.userId"
+      <user-selector v-model="model.userId"
                     placeholder="请选择操作用户"
                     allow-clear />
    </a-form-item>
    <!-- 操作模块 -->
    <a-form-item field="module" label="操作模块">
-      <a-select v-model="formModel.module"
+      <a-select v-model="model.module"
                :options="toOptions(operatorLogModuleKey)"
                :allow-search="true"
                :filter-option="labelFilter"
@@ -24,7 +24,7 @@
    </a-form-item>
    <!-- 操作类型 -->
    <a-form-item field="type" label="操作类型">
-      <a-select v-model="formModel.type"
+      <a-select v-model="model.type"
                :options="typeOptions"
                :allow-search="true"
                :filter-option="labelFilter"
@@ -33,21 +33,21 @@
    </a-form-item>
    <!-- 风险等级 -->
    <a-form-item field="riskLevel" label="风险等级">
-      <a-select v-model="formModel.riskLevel"
+      <a-select v-model="model.riskLevel"
                :options="toOptions(operatorRiskLevelKey)"
                placeholder="请选择风险等级"
                allow-clear />
    </a-form-item>
    <!-- 执行结果 -->
    <a-form-item field="result" label="执行结果">
-      <a-select v-model="formModel.result"
+      <a-select v-model="model.result"
                :options="toOptions(operatorLogResultKey)"
                placeholder="请选择执行结果"
                allow-clear />
    </a-form-item>
    <!-- 执行时间 -->
    <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'] }"
                      show-time
                      format="YYYY-MM-DD HH:mm:ss" />
@@ -64,34 +64,31 @@
 <script lang="ts" setup>
  import type { OperatorLogQueryRequest } from '@/api/user/operator-log';
  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 { useDictStore } from '@/store';
  import { operatorLogModuleKey, operatorLogTypeKey, operatorRiskLevelKey, operatorLogResultKey } from '../types/const';
  import { labelFilter } from '@/types/form';
  import UserSelector from '@/components/user/user/selector/index.vue';

-  const emits = defineEmits(['submit']);
+  const emits = defineEmits(['submit', 'update:modelValue']);
  const props = withDefaults(defineProps<Partial<{
    visibleUser: boolean;
+    model: OperatorLogQueryRequest;
  }>>(), {
    visibleUser: true,
+    model: () => {
+      return {};
+    },
  });

  const { loading, setLoading } = useLoading();
  const { $state: dictState, toOptions } = useDictStore();

  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) {
      // 不选择则重置 options
      typeOptions.value = toOptions(operatorLogTypeKey);
@@ -102,14 +99,14 @@
    // 渲染 options
    typeOptions.value = dictState[operatorLogTypeKey].filter(s => (s.value as string).startsWith(modulePrefix));
    // 渲染输入框
-    if (formModel.type && !formModel.type.startsWith(modulePrefix)) {
-      formModel.type = undefined;
+    if (props.model.type && !props.model.type.startsWith(modulePrefix)) {
+      props.model.type = undefined;
    }
  });

  // 切换页码
  const submit = () => {
-    emits('submit', { ...formModel });
+    emits('submit');
  };

 </script>
--- a/orion-visor-ui/src/views/user/operator-log/components/operator-log-simple-table.vue
+++ b/orion-visor-ui/src/views/user/operator-log/components/operator-log-simple-table.vue
@@ -84,11 +84,15 @@
  const props = withDefaults(defineProps<Partial<{
    handleColumn: boolean;
    current: boolean;
-    baseParams: object;
+    baseParams: OperatorLogQueryRequest;
+    model: OperatorLogQueryRequest;
  }>>(), {
    baseParams: () => {
      return {};
    },
+    model: () => {
+      return {};
+    },
  });

  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 });
  };

--- a/orion-visor-ui/src/views/user/operator-log/components/operator-log-table.vue
+++ b/orion-visor-ui/src/views/user/operator-log/components/operator-log-table.vue
@@ -2,7 +2,8 @@
  <!-- 查询头 -->
  <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 class="general-card table-card">
@@ -131,7 +132,7 @@

 <script lang="ts" setup>
  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 columns from '../types/table.columns';
  import { copy } from '@/hooks/copy';
@@ -152,8 +153,15 @@

  const clearModal = ref();
  const jsonView = ref();
-  const tableRenderData = ref<OperatorLogQueryResponse[]>([]);
-  const selectedKeys = ref<number[]>([]);
+  const selectedKeys = ref<Array<number>>([]);
+  const tableRenderData = ref<Array<OperatorLogQueryResponse>>([]);
+  const formModel = reactive<OperatorLogQueryRequest>({
+    module: undefined,
+    type: undefined,
+    riskLevel: undefined,
+    result: undefined,
+    startTimeRange: undefined,
+  });

  // 查看详情
  const openLogDetail = (record: OperatorLogQueryResponse) => {
@@ -182,13 +190,11 @@
  };

  // 删除当前行
-  const deleteRow = async ({ id }: {
-    id: number
-  }) => {
+  const deleteRow = async (record: OperatorLogQueryResponse) => {
    try {
      setLoading(true);
      // 调用删除接口
-      await deleteOperatorLog([id]);
+      await deleteOperatorLog([record.id]);
      Message.success('删除成功');
      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 });
  };

--- a/orion-visor-ui/src/views/user/role/components/role-table.vue
+++ b/orion-visor-ui/src/views/user/role/components/role-table.vue
@@ -144,13 +144,12 @@

  const emits = defineEmits(['openAdd', 'openUpdate', 'openGrant']);

-  const tableRenderData = ref<RoleQueryResponse[]>([]);
-
  const pagination = usePagination();
  const { hasPermission } = usePermission();
  const { loading, setLoading } = useLoading();
  const { toOptions, getDictValue } = useDictStore();

+  const tableRenderData = ref<Array<RoleQueryResponse>>([]);
  const formModel = reactive<RoleQueryRequest>({
    id: undefined,
    name: undefined,
@@ -168,13 +167,11 @@
  };

  // 删除当前行
-  const deleteRow = async ({ id }: {
-    id: number
-  }) => {
+  const deleteRow = async (record: RoleQueryResponse) => {
    try {
      setLoading(true);
      // 调用删除接口
-      await deleteRole(id);
+      await deleteRole(record.id);
      Message.success('删除成功');
      // 重新加载数据
      fetchTableData();
--- a/orion-visor-ui/src/views/user/user/components/user-table.vue
+++ b/orion-visor-ui/src/views/user/user/components/user-table.vue
@@ -196,8 +196,8 @@
  const router = useRouter();
  const userStore = useUserStore();

-  const selectedKeys = ref<number[]>([]);
-  const tableRenderData = ref<UserQueryResponse[]>([]);
+  const selectedKeys = ref<Array<number>>([]);
+  const tableRenderData = ref<Array<UserQueryResponse>>([]);
  const formModel = reactive<UserQueryRequest>({
    id: undefined,
    username: undefined,
@@ -211,13 +211,11 @@
  });

  // 删除当前行
-  const deleteRow = async ({ id }: {
-    id: number
-  }) => {
+  const deleteRow = async (record: UserQueryResponse) => {
    try {
      setLoading(true);
      // 调用删除接口
-      await deleteUser(id);
+      await deleteUser(record.id);
      Message.success('删除成功');
      // 重新加载数据
      fetchTableData();