fix(component): 🐛修复dynamicTable ts类型错误

src/api/system/log/index.ts

@@ -10,7 +10,6 @@ export function getReqLogList(query: API.PageParams) {
     },
     {
       isMock: true,
-      isGetDataDirectly: false,
     },
   );
 }

src/api/system/log/model.d.ts

@@ -32,7 +32,7 @@ declare namespace API {
     id: number;
     taskId: number;
     name: string;
-    createTime: string;
+    createdAt: string;
     consumeTime: number;
     detail: string;
     status: number;

src/components/dynamic-table/components/table-settings/column-setting.vue

@@ -83,6 +83,7 @@
   let inited = false;
   const defaultColumns = cloneDeep(table.columns);
   const defaultShowIndex = !!table.showIndex;
+  const defaultBordered = table.bordered;
 
   const tableColumns = ref<TableColumn[]>([]);
 
@@ -103,6 +104,7 @@
   const initCheckStatus = () => {
     tableColumns.value = cloneDeep(defaultColumns);
     checkIndex.value = defaultShowIndex;
+    checkBordered.value = defaultBordered;
     tableColumns.value.forEach((item) => (item.hideInTable ??= false));
   };
   initCheckStatus();
@@ -157,7 +159,7 @@
 
   const reset = () => {
     initCheckStatus();
-    table.setProps({ showIndex: defaultShowIndex });
+    table.setProps({ showIndex: defaultShowIndex, bordered: defaultBordered });
   };
 </script>
 

src/components/dynamic-table/components/table-settings/size-setting.vue

@@ -8,7 +8,7 @@
       <ColumnHeightOutlined />
       <template #overlay>
         <Menu @click="handleMenuClick" selectable v-model:selectedKeys="selectedKeysRef">
-          <Menu.Item key="default">
+          <Menu.Item key="large">
             <span>默认</span>
           </Menu.Item>
           <Menu.Item key="middle">
@@ -33,7 +33,7 @@
 
   const table = useTableContext();
 
-  const selectedKeysRef = ref<SizeType[]>([table.getProps?.size || 'default']);
+  const selectedKeysRef = ref<SizeType[]>([table.getProps?.size || 'large']);
 
   function handleMenuClick({ key }: { key: SizeType }) {
     selectedKeysRef.value = [key];

src/components/dynamic-table/dynamic-table.vue

@@ -63,7 +63,7 @@
     reactive,
     ref,
     toRefs,
-    watch,
+    watchEffect,
     getCurrentInstance,
     computed,
     unref,
@@ -114,7 +114,7 @@
         'expandedRowRender',
         'customFilterIcon',
         'customFilterDropdown',
-      ];
+      ] as const;
 
       const state = reactive({
         expandItemRefs: {},
@@ -123,18 +123,11 @@
       });
 
       // 如果外界设置了dataSource，那就直接用外界提供的数据
-      watch(
-        () => props.dataSource,
-        (val) => {
-          if (val) {
-            state.tableData = val;
-          }
-        },
-        {
-          deep: true,
-          immediate: true,
-        },
-      );
+      watchEffect(() => {
+        if (props.dataSource) {
+          state.tableData = props.dataSource;
+        }
+      });
 
       const setProps = (props: Partial<TableProps>) => {
         innerPropsRef.value = { ...unref(innerPropsRef), ...props };
@@ -228,6 +221,7 @@
             width: 60,
             align: 'center',
             fixed: 'left',
+            ...props.indexColumnProps,
             bodyCell: ({ index }) => {
               const getPagination = unref(paginationRef);
               if (isBoolean(getPagination)) {

src/components/dynamic-table/hooks/useTableContext.ts

@@ -1,12 +1,19 @@
-import { DynamicTableInstance } from '../';
 import { provide, inject, ComponentInternalInstance } from 'vue';
+import type { TableProps } from '../props';
+
+type DynamicTableInstance = {
+  [P in keyof TableProps]: TableProps[P];
+} & {
+  setProps(props: Partial<TableProps>): () => any;
+  getProps: TableProps;
+};
 
 const key = Symbol('dynamic-table');
 
 export function createTableContext(instance: ComponentInternalInstance) {
   provide(key, instance.proxy);
 }
 
-export function useTableContext(): DynamicTableInstance {
+export function useTableContext() {
   return inject(key) as DynamicTableInstance;
 }

src/components/dynamic-table/props.ts

@@ -1,4 +1,4 @@
-import type { PropType } from 'vue';
+import type { PropType, ExtractDefaultPropTypes } from 'vue';
 import { tableProps } from 'ant-design-vue/lib/table';
 import type { FormProps } from 'ant-design-vue';
 import type { LoadDataParams, TableColumn, OnChangeCallbackParams } from './typing';
@@ -11,9 +11,9 @@ export const props = {
     default: () => ({}),
   },
   columns: {
-    type: Array as PropType<TableColumn[]>,
+    type: Array as PropType<TableColumn<any>[]>,
     required: true,
-    default: () => [] as TableColumn[],
+    default: () => [],
   },
   dataRequest: {
     // 获取列表数据函数API
@@ -29,6 +29,11 @@ export const props = {
     type: Boolean as PropType<boolean>,
     default: false,
   },
+  /** 索引列属性配置 */
+  indexColumnProps: {
+    type: Object as PropType<Partial<TableColumn>>,
+    default: () => ({}),
+  },
   /** 是否显示表格工具栏 */
   showToolBar: {
     type: Boolean as PropType<boolean>,
@@ -50,6 +55,6 @@ export const props = {
   },
 };
 
-export type TableProps = typeof props;
+export type TableProps = ExtractDefaultPropTypes<typeof props>;
 
 export default props;

src/layout/header/index.vue

@@ -33,7 +33,7 @@
       <!--      切换全屏-->
       <component :is="fullscreenIcon" @click="toggleFullScreen" />
       <Dropdown>
-        <Avatar>{{ username }}</Avatar>
+        <Avatar :src="userInfo.headImg" :alt="userInfo.name">{{ userInfo.name }}</Avatar>
         <template #overlay>
           <Menu>
             <Menu.Item>
@@ -91,7 +91,7 @@
 
   const router = useRouter();
   const route = useRoute();
-  const username = computed(() => userStore.name);
+  const userInfo = computed(() => userStore.userInfo);
 
   // 点击菜单
   const clickMenuItem = ({ key }) => {

src/layout/tabs/tabs-view.vue

@@ -131,7 +131,7 @@
   });
 
   // 标签页列表
-  const tabsList = computed(() => tabsViewStore.tabsList);
+  const tabsList = computed(() => tabsViewStore.tabsList.filter((n) => router.hasRoute(n.name!)));
 
   // 缓存的路由组件列表
   const keepAliveComponents = computed(() => tabsViewStore.keepAliveComponents);

src/views/system/monitor/login-log/index.vue

@@ -1,9 +1,9 @@
 <template>
-  <DynamicTable :data-request="loadTableData" :columns="columns" />
+  <DynamicTable header-title="登录日志" :data-request="loadTableData" :columns="columns" />
 </template>
 
 <script lang="ts">
-  export default { name: 'LoginLog' };
+  export default { name: 'SystemMonitorLoginLog' };
 </script>
 
 <script setup lang="ts">

src/views/system/monitor/online/index.vue

@@ -1,11 +1,15 @@
 <template>
-  <div>
-    <DynamicTable ref="dynamicTableRef" :data-request="getOnlineList" :columns="columns" />
-  </div>
+  <DynamicTable
+    ref="dynamicTableRef"
+    header-title="在线用户"
+    title-tooltip="这是真实操作，请不要随意将其他用户踢下线。"
+    :data-request="getOnlineList"
+    :columns="columns"
+  />
 </template>
 
 <script lang="tsx">
-  export default { name: 'LoginLog' };
+  export default { name: 'SystemMonitorOnline' };
 </script>
 
 <script setup lang="tsx">

src/views/system/monitor/req-log/index.vue

@@ -1,26 +1,21 @@
 <template>
-  <DynamicTable :load-data="loadTableData" :columns="columns">
-    <template #method="{ record }">
-      <Tag color="processing">{{ record.method }}</Tag>
-    </template>
-  </DynamicTable>
+  <DynamicTable
+    header-title="请求日志"
+    title-tooltip="这是mock数据"
+    :data-request="getReqLogList"
+    :columns="columns"
+  />
 </template>
 
 <script lang="tsx">
-  export default { name: 'ReqLog' };
+  export default { name: 'SystemMonitorReqLog' };
 </script>
 
 <script setup lang="tsx">
-  import { DynamicTable, LoadDataParams, TableColumn } from '@/components/dynamic-table';
+  import { DynamicTable, TableColumn } from '@/components/dynamic-table';
   import { Tag } from 'ant-design-vue';
   import { getReqLogList } from '@/api/system/log';
 
-  const loadTableData = async ({ page, limit }: LoadDataParams) => {
-    // mock数据
-    const { data } = await getReqLogList({ page, limit });
-    return data;
-  };
-
   const getStatusType = (status: number) => {
     if (status >= 200 && status < 300) {
       return 'success';
@@ -62,11 +57,7 @@
       title: '请求方式',
       dataIndex: 'method',
       align: 'center',
-      slots: {
-        customRender: 'method',
-        // 不使用render就默认开始slot，见上面模板
-        // render: ({ method }) => <Tag color="processing">{method}</Tag>
-      },
+      bodyCell: ({ record }) => <Tag color="processing">{record.method}</Tag>,
     },
     {
       title: '请求参数',
@@ -85,22 +76,16 @@
       dataIndex: 'status',
       align: 'center',
       width: 120,
-      slots: {
-        customRender: 'status',
-        render: ({ status }) => <Tag color={getStatusType(status)}>{status}</Tag>,
-      },
+      bodyCell: ({ record }) => <Tag color={getStatusType(record.status)}>{record.status}</Tag>,
     },
     {
       title: '耗时',
       dataIndex: 'consumeTime',
       align: 'center',
       width: 120,
-      slots: {
-        customRender: 'consumeTime',
-        render: ({ consumeTime }) => (
-          <Tag color={getConsumeTimeType(consumeTime)}>{`${consumeTime}ms`}</Tag>
-        ),
-      },
+      bodyCell: ({ record }) => (
+        <Tag color={getConsumeTimeType(record.consumeTime)}>{`${record.consumeTime}ms`}</Tag>
+      ),
     },
     {
       title: '操作时间',

src/views/system/schedule/log/index.vue

@@ -1,7 +1,82 @@
-<template><div>任务日志</div></template>
+<template>
+  <DynamicTable
+    header-title="任务日志"
+    :data-request="getTaskLogList"
+    :search="false"
+    :columns="columns"
+  />
+</template>
 
-<script lang="ts">
-  export default {
-    name: 'ScheduleLog',
+<script lang="tsx">
+  export default { name: 'SystemScheduleTaskLog' };
+</script>
+
+<script setup lang="tsx">
+  import { DynamicTable, TableColumn } from '@/components/dynamic-table';
+  import { getTaskLogList } from '@/api/system/log';
+  import { Tag } from 'ant-design-vue';
+
+  type TableListItem = API.TaskLogListItemResult;
+
+  const getStatusType = (status) => {
+    switch (status) {
+      case 0:
+        return 'danger';
+      case 1:
+        return 'success';
+    }
+  };
+  const getStatusTip = (status) => {
+    switch (status) {
+      case 0:
+        return '失败';
+      case 1:
+        return '成功';
+    }
   };
+
+  const columns: TableColumn<TableListItem>[] = [
+    {
+      title: '#',
+      dataIndex: 'id',
+      width: 80,
+      align: 'center',
+      hideInSearch: true,
+    },
+    {
+      title: '任务编号',
+      dataIndex: 'taskId',
+      align: 'center',
+    },
+    {
+      title: '任务名称',
+      dataIndex: 'name',
+      align: 'center',
+    },
+    {
+      title: '异常信息',
+      dataIndex: 'detail',
+      align: 'center',
+      bodyCell: ({ record }) => <>{record.detail ?? '无'}</>,
+    },
+    {
+      title: '耗时',
+      dataIndex: 'consumeTime',
+      align: 'center',
+      bodyCell: ({ record }) => <Tag>{record.consumeTime}ms</Tag>,
+    },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      align: 'center',
+      bodyCell: ({ record }) => (
+        <Tag color={getStatusType(record.status)}>{getStatusTip(record.status)}</Tag>
+      ),
+    },
+    {
+      title: '执行时间',
+      dataIndex: 'createdAt',
+      align: 'center',
+    },
+  ];
 </script>