✨ 清空操作日志.

orion-ops-ui/src/views/user/operator-log/components/operator-log-clear-modal.vue

@@ -0,0 +1,199 @@
+<template>
+  <a-modal v-model:visible="visible"
+           body-class="modal-form"
+           title-align="start"
+           title="清空操作日志"
+           :align-center="false"
+           :draggable="true"
+           :mask-closable="false"
+           :unmount-on-close="true"
+           ok-text="清空"
+           :ok-button-props="{ disabled: loading }"
+           :cancel-button-props="{ disabled: loading }"
+           :on-before-ok="handlerOk"
+           @close="handleClose">
+    <a-spin class="full" :loading="loading">
+      <a-form :model="formModel"
+              label-align="right"
+              :style="{ width: '460px' }"
+              :label-col-props="{ span: 5 }"
+              :wrapper-col-props="{ span: 19 }">
+        <!-- 操作用户 -->
+        <a-form-item field="userId"
+                     label="操作用户"
+        >
+          <user-selector v-model="formModel.userId"
+                         placeholder="请选择操作用户"
+                         allow-clear />
+        </a-form-item>
+        <!-- 操作模块 -->
+        <a-form-item field="module" label="操作模块">
+          <a-select v-model="formModel.module"
+                    :options="toOptions(operatorLogModuleKey)"
+                    :allow-search="true"
+                    :filter-option="labelFilter"
+                    placeholder="请选择操作模块"
+                    @change="m => selectedModule(m as string)"
+                    allow-clear />
+        </a-form-item>
+        <!-- 操作类型 -->
+        <a-form-item field="type" label="操作类型">
+          <a-select v-model="formModel.type"
+                    :options="typeOptions"
+                    :allow-search="true"
+                    :filter-option="labelFilter"
+                    placeholder="请选择操作类型"
+                    allow-clear />
+        </a-form-item>
+        <!-- 风险等级 -->
+        <a-form-item field="riskLevel" label="风险等级">
+          <a-select v-model="formModel.riskLevel"
+                    :options="toOptions(operatorRiskLevelKey)"
+                    placeholder="请选择风险等级"
+                    allow-clear />
+        </a-form-item>
+        <!-- 执行结果 -->
+        <a-form-item field="result" label="执行结果">
+          <a-select v-model="formModel.result"
+                    :options="toOptions(operatorLogResultKey)"
+                    placeholder="请选择执行结果"
+                    allow-clear />
+        </a-form-item>
+        <!-- 执行时间 -->
+        <a-form-item field="startTimeRange" label="执行时间">
+          <a-range-picker v-model="formModel.startTimeRange"
+                          style="width: 100%"
+                          :time-picker-props="{ defaultValue: ['00:00:00', '23:59:59'] }"
+                          show-time
+                          format="YYYY-MM-DD HH:mm:ss" />
+        </a-form-item>
+      </a-form>
+    </a-spin>
+  </a-modal>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'userOperatorLogClearModal'
+  };
+</script>
+
+<script lang="ts" setup>
+  import type { SelectOptionData } from '@arco-design/web-vue/es/select/interface';
+  import type { OperatorLogQueryRequest } from '@/api/user/operator-log';
+  import { ref } from 'vue';
+  import useLoading from '@/hooks/loading';
+  import useVisible from '@/hooks/visible';
+  import { getOperatorLogCount, clearOperatorLog } from '@/api/user/operator-log';
+  import { Message, Modal } from '@arco-design/web-vue';
+  import { useDictStore } from '@/store';
+  import { operatorLogModuleKey, operatorLogResultKey, operatorLogTypeKey, operatorRiskLevelKey } from '@/views/user/operator-log/types/const';
+  import { labelFilter } from '@/types/form';
+  import UserSelector from '@/components/user/user/user-selector.vue';
+
+  const { $state: dictState, toOptions } = useDictStore();
+  const { visible, setVisible } = useVisible();
+  const { loading, setLoading } = useLoading();
+
+  const defaultForm = (): OperatorLogQueryRequest => {
+    return {
+      module: undefined,
+      type: undefined,
+      riskLevel: undefined,
+      result: undefined,
+      startTimeRange: undefined,
+    };
+  };
+
+  const typeOptions = ref<SelectOptionData[]>(toOptions(operatorLogTypeKey));
+  const formModel = ref<OperatorLogQueryRequest>({});
+
+  const emits = defineEmits(['clear']);
+
+  // 打开
+  const open = () => {
+    renderForm({ ...defaultForm() });
+    setVisible(true);
+  };
+
+  // 渲染表单
+  const renderForm = (record: any) => {
+    formModel.value = Object.assign({}, record);
+  };
+
+  defineExpose({ open });
+
+  // 选择类型
+  const selectedModule = (module: string) => {
+    if (!module) {
+      // 不选择则重置 options
+      typeOptions.value = toOptions(operatorLogTypeKey);
+      return;
+    }
+    const moduleArr = module.split(':');
+    const modulePrefix = moduleArr[moduleArr.length - 1] + ':';
+    // 渲染 options
+    typeOptions.value = dictState[operatorLogTypeKey].filter(s => (s.value as string).startsWith(modulePrefix));
+    // 渲染输入框
+    if (formModel.value.type && !formModel.value.type.startsWith(modulePrefix)) {
+      formModel.value.type = undefined;
+    }
+  };
+
+  // 确定
+  const handlerOk = async () => {
+    setLoading(true);
+    try {
+      // 获取总数量
+      const { data } = await getOperatorLogCount(formModel.value);
+      if (data) {
+        // 清空
+        doClear(data);
+      } else {
+        // 无数据
+        Message.warning('当前条件未查询到数据');
+      }
+    } catch (e) {
+    } finally {
+      setLoading(false);
+    }
+    return false;
+  };
+
+  // 执行删除
+  const doClear = (count: number) => {
+    Modal.confirm({
+      title: '删除清空',
+      content: `确定要删除 ${count} 条数据吗? 确定后将立即删除且无法恢复!`,
+      onOk: async () => {
+        setLoading(true);
+        try {
+          // 调用删除
+          await clearOperatorLog(formModel.value);
+          emits('clear');
+          // 清空
+          setVisible(false);
+          handlerClear();
+        } catch (e) {
+        } finally {
+          setLoading(false);
+        }
+      }
+    });
+  };
+
+  // 关闭
+  const handleClose = () => {
+    handlerClear();
+  };
+
+  // 清空
+  const handlerClear = () => {
+    setLoading(false);
+  };
+
+</script>
+
+<style lang="less" scoped>
+
+</style>

orion-ops-ui/src/views/user/operator-log/components/operator-log-simple-table.vue

@@ -0,0 +1,167 @@
+<template>
+  <!-- 表格 -->
+  <a-table row-key="id"
+           class="table-wrapper-8"
+           ref="tableRef"
+           :loading="loading"
+           :columns="tableColumns"
+           :data="tableRenderData"
+           :pagination="pagination"
+           @page-change="(page) => fetchTableData(page, pagination.pageSize)"
+           @page-size-change="(size) => fetchTableData(1, size)"
+           :bordered="false">
+    <!-- 操作模块 -->
+    <template #module="{ record }">
+      {{ getDictValue(operatorLogModuleKey, record.module) }}
+      <icon-oblique-line />
+      {{ getDictValue(operatorLogTypeKey, record.type) }}
+    </template>
+    <!-- 风险等级 -->
+    <template #riskLevel="{ record }">
+      <a-tag :color="getDictValue(operatorRiskLevelKey, record.riskLevel, 'color')">
+        {{ getDictValue(operatorRiskLevelKey, record.riskLevel) }}
+      </a-tag>
+    </template>
+    <!-- 执行结果 -->
+    <template #result="{ record }">
+      <a-tag :color="getDictValue(operatorLogResultKey, record.result, 'color')">
+        {{ getDictValue(operatorLogResultKey, record.result) }}
+      </a-tag>
+    </template>
+    <!-- 操作日志 -->
+    <template #originLogInfo="{ record }">
+      <icon-copy class="copy-left" @click="copy(record.originLogInfo, '已复制')" />
+      <span v-html="replaceHtmlTag(record.logInfo)" />
+    </template>
+    <!-- 操作 -->
+    <template #handle="{ record }">
+      <div class="table-handle-wrapper">
+        <!-- 详情 -->
+        <a-button type="text"
+                  size="mini"
+                  @click="openLogDetail(record)">
+          详情
+        </a-button>
+      </div>
+    </template>
+  </a-table>
+  <!-- json 查看器模态框 -->
+  <json-editor-modal ref="jsonView" />
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'userOperatorLogSimpleTable'
+  };
+</script>
+
+<script lang="ts" setup>
+  import type { OperatorLogQueryRequest, OperatorLogQueryResponse } from '@/api/user/operator-log';
+  import { ref, onMounted, onBeforeMount } from 'vue';
+  import { operatorLogModuleKey, operatorLogTypeKey, operatorRiskLevelKey, operatorLogResultKey, dictKeys } from '../types/const';
+  import columns from '../types/table.columns';
+  import { getLogDetail } from '../types/const';
+  import useCopy from '@/hooks/copy';
+  import useLoading from '@/hooks/loading';
+  import { usePagination } from '@/types/table';
+  import { useDictStore } from '@/store';
+  import { getOperatorLogPage } from '@/api/user/operator-log';
+  import { getCurrentUserOperatorLog } from '@/api/user/mine';
+  import { replaceHtmlTag, clearHtmlTag } from '@/utils';
+  import JsonEditorModal from '@/components/view/json-editor/json-editor-modal.vue';
+
+  const props = defineProps({
+    handleColumn: {
+      type: Boolean,
+      default: true
+    },
+    current: {
+      type: Boolean,
+      default: false
+    },
+    baseParams: {
+      type: Object,
+      default: () => {
+        return {};
+      }
+    }
+  });
+
+  const pagination = usePagination();
+  const { loading, setLoading } = useLoading();
+  const { getDictValue } = useDictStore();
+  const { copy } = useCopy();
+
+  const jsonView = ref();
+  const tableColumns = ref();
+  const tableRenderData = ref<OperatorLogQueryResponse[]>([]);
+
+  // 查看详情
+  const openLogDetail = (record: OperatorLogQueryResponse) => {
+    jsonView.value.open(getLogDetail(record));
+  };
+
+  // 加载数据
+  const doFetchTableData = async (request: OperatorLogQueryRequest) => {
+    try {
+      setLoading(true);
+      let rows;
+      if (props.current) {
+        // 查询当前用户
+        const { data } = await getCurrentUserOperatorLog(request);
+        rows = data;
+      } else {
+        // 查询所有
+        const { data } = await getOperatorLogPage({ ...request, ...props.baseParams });
+        rows = data;
+      }
+      tableRenderData.value = rows.rows.map(s => {
+        return { ...s, originLogInfo: clearHtmlTag(s.logInfo) };
+      });
+      pagination.total = rows.total;
+      pagination.current = request.page;
+      pagination.pageSize = request.limit;
+    } catch (e) {
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 切换页码
+  const fetchTableData = (page = 1, limit = pagination.pageSize, form = {}) => {
+    doFetchTableData({ page, limit, ...form });
+  };
+
+  defineExpose({
+    fetchTableData
+  });
+
+  // 加载字典值
+  onBeforeMount(async () => {
+    const dictStore = useDictStore();
+    await dictStore.loadKeys(dictKeys);
+  });
+
+  // 初始化
+  onMounted(() => {
+    let cols = [...columns].map(s => {
+      return { ...s };
+    }).filter(s => s.dataIndex !== 'username');
+    if (props.handleColumn) {
+      const handleCol = cols.find(s => s.dataIndex === 'handle');
+      // 设置操作项宽度
+      if (handleCol) {
+        handleCol.width = 80;
+      }
+    } else {
+      // 不显示操作
+      cols = cols.filter(s => s.dataIndex !== 'handle');
+    }
+    tableColumns.value = cols;
+    fetchTableData();
+  });
+
+</script>
+
+<style lang="less" scoped>
+</style>

orion-ops-ui/src/views/user/operator-log/components/operator-log-table.vue

@@ -1,117 +1,191 @@
 <template>
-  <a-table row-key="id"
-           class="table-wrapper-8"
-           ref="tableRef"
-           :loading="loading"
-           :columns="tableColumns"
-           :data="tableRenderData"
-           :pagination="pagination"
-           @page-change="(page) => fetchTableData(page, pagination.pageSize)"
-           @page-size-change="(size) => fetchTableData(1, size)"
-           :bordered="false">
-    <!-- 操作模块 -->
-    <template #module="{ record }">
-      {{ getDictValue(operatorLogModuleKey, record.module) }}
-    </template>
-    <!-- 操作类型 -->
-    <template #type="{ record }">
-      {{ getDictValue(operatorLogTypeKey, record.type) }}
-    </template>
-    <!-- 风险等级 -->
-    <template #riskLevel="{ record }">
-      <a-tag :color="getDictValue(operatorRiskLevelKey, record.riskLevel, 'color')">
-        {{ getDictValue(operatorRiskLevelKey, record.riskLevel) }}
-      </a-tag>
-    </template>
-    <!-- 执行结果 -->
-    <template #result="{ record }">
-      <a-tag :color="getDictValue(operatorLogResultKey, record.result, 'color')">
-        {{ getDictValue(operatorLogResultKey, record.result) }}
-      </a-tag>
-    </template>
-    <!-- 操作日志 -->
-    <template #originLogInfo="{ record }">
-      <icon-copy class="copy-left" @click="copy(record.originLogInfo, '已复制')" />
-      <span v-html="replaceHtmlTag(record.logInfo)" />
-    </template>
-    <!-- 操作 -->
-    <template #handle="{ record }">
-      <div class="table-handle-wrapper">
-        <!-- 详情 -->
-        <a-button type="text"
-                  size="mini"
-                  @click="viewDetail(record)">
-          详情
-        </a-button>
+  <!-- 查询头 -->
+  <a-card class="general-card table-search-card">
+    <!-- 查询头组件 -->
+    <operator-log-query-header @submit="(e) => fetchTableData(undefined, undefined, e)" />
+  </a-card>
+  <!-- 表格 -->
+  <a-card class="general-card table-card">
+    <template #title>
+      <!-- 左侧操作 -->
+      <div class="table-left-bar-handle">
+        <!-- 标题 -->
+        <div class="table-title">
+          操作日志
+        </div>
+      </div>
+      <!-- 右侧操作 -->
+      <div class="table-right-bar-handle">
+        <a-space>
+          <!-- 清空 -->
+          <a-button v-permission="['infra:operator-log:clear']"
+                    status="danger"
+                    @click="openClear">
+            清空
+            <template #icon>
+              <icon-close />
+            </template>
+          </a-button>
+          <!-- 删除 -->
+          <a-popconfirm :content="`确认删除选中的 ${selectedKeys.length} 条记录吗?`"
+                        position="br"
+                        type="warning"
+                        @ok="deleteSelectRows">
+            <a-button v-permission="['infra:operator-log:delete']"
+                      type="secondary"
+                      status="danger"
+                      :disabled="selectedKeys.length === 0">
+              删除
+              <template #icon>
+                <icon-delete />
+              </template>
+            </a-button>
+          </a-popconfirm>
+        </a-space>
       </div>
     </template>
-  </a-table>
+    <!-- 表格 -->
+    <a-table row-key="id"
+             class="table-wrapper-8"
+             ref="tableRef"
+             :loading="loading"
+             v-model:selected-keys="selectedKeys"
+             :row-selection="rowSelection"
+             :columns="columns"
+             :data="tableRenderData"
+             :pagination="pagination"
+             @page-change="(page) => fetchTableData(page, pagination.pageSize)"
+             @page-size-change="(size) => fetchTableData(1, size)"
+             :bordered="false">
+      <!-- 操作模块 -->
+      <template #module="{ record }">
+        {{ getDictValue(operatorLogModuleKey, record.module) }}
+        <icon-oblique-line />
+        {{ getDictValue(operatorLogTypeKey, record.type) }}
+      </template>
+      <!-- 风险等级 -->
+      <template #riskLevel="{ record }">
+        <a-tag :color="getDictValue(operatorRiskLevelKey, record.riskLevel, 'color')">
+          {{ getDictValue(operatorRiskLevelKey, record.riskLevel) }}
+        </a-tag>
+      </template>
+      <!-- 执行结果 -->
+      <template #result="{ record }">
+        <a-tag :color="getDictValue(operatorLogResultKey, record.result, 'color')">
+          {{ getDictValue(operatorLogResultKey, record.result) }}
+        </a-tag>
+      </template>
+      <!-- 操作日志 -->
+      <template #originLogInfo="{ record }">
+        <icon-copy class="copy-left" @click="copy(record.originLogInfo, '已复制')" />
+        <span v-html="replaceHtmlTag(record.logInfo)" />
+      </template>
+      <!-- 操作 -->
+      <template #handle="{ record }">
+        <div class="table-handle-wrapper">
+          <!-- 详情 -->
+          <a-button type="text"
+                    size="mini"
+                    @click="openLogDetail(record)">
+            详情
+          </a-button>
+          <!-- 删除 -->
+          <a-popconfirm content="确认删除这条记录吗?"
+                        position="left"
+                        type="warning"
+                        @ok="deleteRow(record)">
+            <a-button v-permission="['infra:operator-log:delete']"
+                      type="text"
+                      size="mini"
+                      status="danger">
+              删除
+            </a-button>
+          </a-popconfirm>
+        </div>
+      </template>
+    </a-table>
+  </a-card>
+  <!-- 清理模态框 -->
+  <operator-log-clear-modal ref="clearModal"
+                            @clear="fetchTableData" />
+  <!-- json 查看器模态框 -->
+  <json-editor-modal ref="jsonView" />
 </template>
 
 <script lang="ts">
   export default {
-    name: 'operatorLogTable'
+    name: 'userOperatorLogTable'
   };
 </script>
 
 <script lang="ts" setup>
   import type { OperatorLogQueryRequest, OperatorLogQueryResponse } from '@/api/user/operator-log';
-  import { ref, onMounted, onBeforeMount } from 'vue';
-  import { operatorLogModuleKey, operatorLogTypeKey, operatorRiskLevelKey, operatorLogResultKey, dictKeys } from '../types/const';
+  import { ref, onMounted } from 'vue';
+  import { operatorLogModuleKey, operatorLogTypeKey, operatorRiskLevelKey, operatorLogResultKey, getLogDetail } from '../types/const';
   import columns from '../types/table.columns';
-  import useLoading from '@/hooks/loading';
-  import { usePagination } from '@/types/table';
-  import { useDictStore } from '@/store';
-  import { getOperatorLogPage } from '@/api/user/operator-log';
-  import { replaceHtmlTag, clearHtmlTag, dateFormat } from '@/utils';
-  import { pick } from 'lodash';
-  import { getCurrentUserOperatorLog } from '@/api/user/mine';
   import useCopy from '@/hooks/copy';
-
-  const emits = defineEmits(['viewDetail']);
-  const props = defineProps({
-    visibleUser: {
-      type: Boolean,
-      default: true
-    },
-    visibleHandle: {
-      type: Boolean,
-      default: true
-    },
-    current: {
-      type: Boolean,
-      default: false
-    },
-    baseParams: {
-      type: Object,
-      default: () => {
-        return {};
-      }
-    }
-  });
+  import useLoading from '@/hooks/loading';
+  import { usePagination, useRowSelection } from '@/types/table';
+  import { useDictStore } from '@/store';
+  import { getOperatorLogPage, deleteOperatorLog } from '@/api/user/operator-log';
+  import { replaceHtmlTag, clearHtmlTag } from '@/utils';
+  import { Message } from '@arco-design/web-vue';
+  import OperatorLogQueryHeader from './operator-log-query-header.vue';
+  import OperatorLogClearModal from './operator-log-clear-modal.vue';
+  import JsonEditorModal from '@/components/view/json-editor/json-editor-modal.vue';
 
   const pagination = usePagination();
+  const rowSelection = useRowSelection();
   const { loading, setLoading } = useLoading();
   const { getDictValue } = useDictStore();
   const { copy } = useCopy();
 
-  const tableColumns = ref();
+  const clearModal = ref();
+  const jsonView = ref();
   const tableRenderData = ref<OperatorLogQueryResponse[]>([]);
+  const selectedKeys = ref<number[]>([]);
 
   // 查看详情
-  const viewDetail = (record: OperatorLogQueryResponse) => {
+  const openLogDetail = (record: OperatorLogQueryResponse) => {
+    jsonView.value.open(getLogDetail(record));
+  };
+
+  // 打开清空
+  const openClear = () => {
+    clearModal.value?.open();
+  };
+
+  // 删除选中行
+  const deleteSelectRows = async () => {
     try {
-      const detail = Object.assign({} as Record<string, any>,
-        pick(record, 'traceId', 'address', 'location',
-          'userAgent', 'errorMessage'));
-      detail.duration = `${record.duration} ms`;
-      detail.startTime = dateFormat(new Date(record.startTime));
-      detail.endTime = dateFormat(new Date(record.endTime));
-      detail.extra = JSON.parse(record?.extra);
-      detail.returnValue = JSON.parse(record?.returnValue);
-      emits('viewDetail', detail);
+      setLoading(true);
+      // 调用删除接口
+      await deleteOperatorLog(selectedKeys.value);
+      Message.success(`成功删除 ${selectedKeys.value.length} 条数据`);
+      selectedKeys.value = [];
+      // 重新加载数据
+      fetchTableData();
     } catch (e) {
-      emits('viewDetail', record);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 删除当前行
+  const deleteRow = async ({ id }: {
+    id: number
+  }) => {
+    try {
+      setLoading(true);
+      // 调用删除接口
+      await deleteOperatorLog([id]);
+      Message.success('删除成功');
+      selectedKeys.value = [];
+      // 重新加载数据
+      fetchTableData();
+    } catch (e) {
+    } finally {
+      setLoading(false);
     }
   };
 
@@ -119,22 +193,14 @@
   const doFetchTableData = async (request: OperatorLogQueryRequest) => {
     try {
       setLoading(true);
-      let rows;
-      if (props.current) {
-        // 查询当前用户
-        const { data } = await getCurrentUserOperatorLog(request);
-        rows = data;
-      } else {
-        // 查询所有
-        const { data } = await getOperatorLogPage({ ...request, ...props.baseParams });
-        rows = data;
-      }
-      tableRenderData.value = rows.rows.map(s => {
+      const { data } = await getOperatorLogPage(request);
+      tableRenderData.value = data.rows.map(s => {
         return { ...s, originLogInfo: clearHtmlTag(s.logInfo) };
       });
-      pagination.total = rows.total;
+      pagination.total = data.total;
       pagination.current = request.page;
       pagination.pageSize = request.limit;
+      selectedKeys.value = [];
     } catch (e) {
     } finally {
       setLoading(false);
@@ -146,31 +212,11 @@
     doFetchTableData({ page, limit, ...form });
   };
 
-  // 加载字典值
-  onBeforeMount(async () => {
-    const dictStore = useDictStore();
-    await dictStore.loadKeys(dictKeys);
-  });
-
   // 初始化
   onMounted(() => {
-    let cols = columns;
-    // 不显示用户
-    if (!props.visibleUser) {
-      cols = cols.filter(s => s.dataIndex !== 'username');
-    }
-    // 不显示操作
-    if (!props.visibleHandle) {
-      cols = cols.filter(s => s.dataIndex !== 'handle');
-    }
-    tableColumns.value = cols;
     fetchTableData();
   });
 
-  defineExpose({
-    fetchTableData
-  });
-
 </script>
 
 <style lang="less" scoped>

orion-ops-ui/src/views/user/operator-log/index.vue

@@ -1,26 +1,6 @@
 <template>
-  <div class="layout-container">
-    <!-- 查询头 -->
-    <a-card class="general-card table-search-card">
-      <!-- 查询头组件 -->
-      <operator-log-query-header @submit="(e) => table.fetchTableData(undefined, undefined, e)" />
-    </a-card>
-    <!-- 表格 -->
-    <a-card class="general-card table-card">
-      <template #title>
-        <!-- 左侧操作 -->
-        <div class="table-left-bar-handle">
-          <!-- 标题 -->
-          <div class="table-title">
-            操作日志
-          </div>
-        </div>
-      </template>
-      <!-- 表格组件 -->
-      <operator-log-table ref="table" @viewDetail="(e) => view.open(e)" />
-    </a-card>
-    <!-- json 查看器模态框 -->
-    <json-editor-modal ref="view" />
+  <div class="layout-container" v-if="render">
+    <operator-log-table />
   </div>
 </template>
 
@@ -31,16 +11,21 @@
 </script>
 
 <script lang="ts" setup>
-  import { ref, onUnmounted } from 'vue';
-  import { useCacheStore } from '@/store';
-  import OperatorLogQueryHeader from './components/operator-log-query-header.vue';
+  import { ref, onUnmounted, onBeforeMount } from 'vue';
+  import { useCacheStore, useDictStore } from '@/store';
+  import { dictKeys } from './types/const';
   import OperatorLogTable from './components/operator-log-table.vue';
-  import JsonEditorModal from '@/components/view/json-editor/json-editor-modal.vue';
 
   const cacheStore = useCacheStore();
 
-  const table = ref();
-  const view = ref();
+  const render = ref(false);
+
+  // 加载字典值
+  onBeforeMount(async () => {
+    const dictStore = useDictStore();
+    await dictStore.loadKeys(dictKeys);
+    render.value = true;
+  });
 
   // 卸载时清除 cache
   onUnmounted(() => {

orion-ops-ui/src/views/user/operator-log/types/table.columns.ts

@@ -45,7 +45,7 @@ const columns = [
     title: '操作',
     dataIndex: 'handle',
     slotName: 'handle',
-    width: 138,
+    width: 128,
     align: 'center',
     fixed: 'right',
   },