perf 改进表格图片、文件展示组件使用方式，减少冗余

fix 修复生成树表时选项加载错误
chore 清理生成代码cli包中的测试文件

web/src/utils/hotgo.ts

@@ -145,6 +145,9 @@ export function rdmLightRgbColor(): string {
 
 // 将列表数据转为树形数据
 export function convertListToTree(list: any[], idField = 'id', pidField = 'pid') {
+  if (!list || list.length === 0) {
+    return [];
+  }
   const min = list.reduce((prev, current) => (prev[pidField] < current[pidField] ? prev : current));
 
   const map = list.reduce((acc, item) => {
@@ -154,6 +157,13 @@ export function convertListToTree(list: any[], idField = 'id', pidField = 'pid')
 
   list.forEach((item) => {
     if (item[pidField] !== min[pidField]) {
+      if (!map[item[pidField]]) {
+        map[item[pidField]] = {};
+      }
+
+      if (!map[item[pidField]].children) {
+        map[item[pidField]].children = [];
+      }
       map[item[pidField]].children.push(map[item[idField]]);
     }
   });
@@ -163,6 +173,9 @@ export function convertListToTree(list: any[], idField = 'id', pidField = 'pid')
 // 从树选项中获取所有key
 export function getTreeKeys(data: any[], idField = 'id') {
   const keys: any = [];
+  if (!data || data.length === 0) {
+    return keys;
+  }
   data.map((item: any) => {
     keys.push(item[idField]);
     if (item.children && item.children.length) {

web/src/utils/index.ts

@@ -5,6 +5,7 @@ import {
   NBadge,
   NButton,
   NIcon,
+  NImage,
   NPopover,
   NTable,
   NTag,
@@ -13,10 +14,12 @@ import {
 } from 'naive-ui';
 import { EllipsisHorizontalCircleOutline } from '@vicons/ionicons5';
 import { PageEnum } from '@/enums/pageEnum';
-import { isNullObject, isObject } from './is/index';
+import { isArray, isJsonString, isNullObject, isObject } from './is/index';
 import { cloneDeep } from 'lodash-es';
 import { VNode } from 'vue';
 import { DictType, useDictStore } from '@/store/modules/dict';
+import { fallbackSrc } from '@/utils/hotgo';
+import {getFileExt} from "@/utils/urlUtils";
 
 export const renderTooltip = (trigger, content) => {
   return h(NTooltip, null, {
@@ -95,6 +98,71 @@ export const renderOptionTag = (type: DictType, value: any) => {
   );
 };
 
+// render 图片
+export const renderImage = (image: string) => {
+  if (!image || image === '') {
+    return ``;
+  }
+  return h(NImage, {
+    width: 32,
+    height: 32,
+    src: image,
+    fallbackSrc: fallbackSrc(),
+    style: {
+      width: '32px',
+      height: '32px',
+      'max-width': '100%',
+      'max-height': '100%',
+      'margin-left': '2px',
+    },
+  });
+};
+
+// render 图片组
+export const renderImageGroup = (images: any) => {
+  if (isJsonString(images)) {
+    images = JSON.parse(images);
+  }
+  if (isNullObject(images) || !isArray(images)) {
+    return ``;
+  }
+  return images.map((image: string) => {
+    return renderImage(image);
+  });
+};
+
+// render 文件
+export const renderFile = (file: string) => {
+  if (!file || file === '') {
+    return ``;
+  }
+  return h(
+    NAvatar,
+    {
+      size: 'small',
+      style: {
+        'margin-left': '2px',
+      },
+    },
+    {
+      default: () => getFileExt(file),
+    }
+  );
+};
+
+// render 文件组
+export const renderFileGroup = (files: any) => {
+  if (isJsonString(files)) {
+    files = JSON.parse(files);
+  }
+  if (isNullObject(files) || !isArray(files)) {
+    return ``;
+  }
+  return files.map((file: string) => {
+    return renderFile(file);
+  });
+};
+
 export interface MemberSumma {
   id: number; // 用户ID
   realName: string; // 真实姓名
@@ -103,7 +171,7 @@ export interface MemberSumma {
 }
 
 // render 操作人摘要
-export const renderPopoverMemberSumma = (member?: MemberSumma) => {
+export const renderPopoverMemberSumma = (member: MemberSumma | null | undefined) => {
   if (!member) {
     return '';
   }

web/src/utils/is/index.ts

@@ -100,8 +100,13 @@ export function isJsonString(value: any) {
   return false;
 }
 
-export function isNullObject(value: object) {
-  return isNullOrUnDef(value) || JSON.stringify(value) === '{}' || JSON.stringify(value) === '[]';
+export function isNullObject(value: any) {
+  return (
+    isNullOrUnDef(value) ||
+    JSON.stringify(value) === '{}' ||
+    JSON.stringify(value) === '[]' ||
+    value === ''
+  );
 }
 
 /**

web/src/views/curdDemo/edit.vue

@@ -107,6 +107,34 @@
     return adaModalWidth(840);
   });
 
+  // 提交表单
+  function confirmForm(e) {
+    e.preventDefault();
+    formRef.value.validate((errors) => {
+      if (!errors) {
+        formBtnLoading.value = true;
+        Edit(formValue.value)
+          .then((_res) => {
+            message.success('操作成功');
+            closeForm();
+            emit('reloadTable');
+          })
+          .finally(() => {
+            formBtnLoading.value = false;
+          });
+      } else {
+        message.error('请填写完整信息');
+      }
+    });
+  }
+
+  // 关闭表单
+  function closeForm() {
+    showModal.value = false;
+    loading.value = false;
+  }
+
+  // 打开模态框
   function openModal(state: State) {
     showModal.value = true;
 
@@ -136,33 +164,6 @@
       });
   }
 
-  // 提交表单
-  function confirmForm(e) {
-    e.preventDefault();
-    formRef.value.validate((errors) => {
-      if (!errors) {
-        formBtnLoading.value = true;
-        Edit(formValue.value)
-          .then((_res) => {
-            message.success('操作成功');
-            closeForm();
-            emit('reloadTable');
-          })
-          .finally(() => {
-            formBtnLoading.value = false;
-          });
-      } else {
-        message.error('请填写完整信息');
-      }
-    });
-  }
-
-  // 关闭表单
-  function closeForm() {
-    showModal.value = false;
-    loading.value = false;
-  }
-
   defineExpose({
     openModal,
   });

web/src/views/curdDemo/index.vue

@@ -57,10 +57,10 @@
   import { adaTableScrollX } from '@/utils/hotgo';
   import Edit from './edit.vue';
 
+  const dict = useDictStore();
   const dialog = useDialog();
   const message = useMessage();
   const { hasPermission } = usePermission();
-  const dict = useDictStore();
   const actionRef = ref();
   const searchFormRef = ref<any>({});
   const editRef = ref();
@@ -72,7 +72,7 @@
     title: '操作',
     key: 'action',
     fixed: 'right',
-    render(record) {
+    render(record: State) {
       return h(TableAction as any, {
         style: 'button',
         actions: [

web/src/views/curdDemo/model.ts

@@ -1,11 +1,9 @@
 import { h, ref } from 'vue';
-import { NImage, NAvatar, NSwitch } from 'naive-ui';
+import { NSwitch } from 'naive-ui';
 import { cloneDeep } from 'lodash-es';
 import { FormSchema } from '@/components/Form';
-import { getFileExt } from '@/utils/urlUtils';
 import { defRangeShortcuts } from '@/utils/dateUtil';
-import { fallbackSrc } from '@/utils/hotgo';
-import { renderPopoverMemberSumma, MemberSumma } from '@/utils';
+import { renderImage, renderFile, renderPopoverMemberSumma, MemberSumma } from '@/utils';
 import { Switch } from '@/api/curdDemo';
 import { useDictStore } from '@/store/modules/dict';
 import { usePermission } from '@/hooks/web/usePermission';
@@ -176,19 +174,8 @@ export const columns = [
     key: 'image',
     align: 'left',
     width: 100,
-    render(row) {
-      return h(NImage, {
-        width: 32,
-        height: 32,
-        src: row.image,
-        fallbackSrc: fallbackSrc(),
-        style: {
-          width: '32px',
-          height: '32px',
-          'max-width': '100%',
-          'max-height': '100%',
-        },
-      });
+    render(row: State) {
+      return renderImage(row.image);
     },
   },
   {
@@ -196,19 +183,8 @@ export const columns = [
     key: 'attachfile',
     align: 'left',
     width: 100,
-    render(row) {
-      if (row.attachfile === '') {
-        return ``;
-      }
-      return h(
-        NAvatar,
-        {
-          size: 'small',
-        },
-        {
-          default: () => getFileExt(row.attachfile),
-        }
-      );
+    render(row: State) {
+      return renderFile(row.attachfile);
     },
   },
   {
@@ -222,7 +198,7 @@ export const columns = [
     key: 'switch',
     align: 'left',
     width: 150,
-    render(row) {
+    render(row: State) {
       return h(NSwitch, {
         value: row.switch === 1,
         checked: '开启',
@@ -243,7 +219,7 @@ export const columns = [
     key: 'createdBy',
     align: 'left',
     width: 150,
-    render(row) {
+    render(row: State) {
       return renderPopoverMemberSumma(row.createdBySumma);
     },
   },
@@ -258,7 +234,7 @@ export const columns = [
     key: 'updatedBy',
     align: 'left',
     width: 150,
-    render(row) {
+    render(row: State) {
       return renderPopoverMemberSumma(row.updatedBySumma);
     },
   },
@@ -279,4 +255,4 @@ export const columns = [
 // 加载字典数据选项
 export function loadOptions() {
   dict.loadOptions(['sys_normal_disable', 'testCategoryOption']);
-}
+}

web/src/views/normalTreeDemo/edit.vue

@@ -101,6 +101,34 @@
     return adaModalWidth(840);
   });
 
+  // 提交表单
+  function confirmForm(e) {
+    e.preventDefault();
+    formRef.value.validate((errors) => {
+      if (!errors) {
+        formBtnLoading.value = true;
+        Edit(formValue.value)
+          .then((_res) => {
+            message.success('操作成功');
+            closeForm();
+            emit('reloadTable');
+          })
+          .finally(() => {
+            formBtnLoading.value = false;
+          });
+      } else {
+        message.error('请填写完整信息');
+      }
+    });
+  }
+
+  // 关闭表单
+  function closeForm() {
+    showModal.value = false;
+    loading.value = false;
+  }
+
+  // 打开模态框
   function openModal(state: State) {
     showModal.value = true;
 
@@ -133,33 +161,6 @@
       });
   }
 
-  // 提交表单
-  function confirmForm(e) {
-    e.preventDefault();
-    formRef.value.validate((errors) => {
-      if (!errors) {
-        formBtnLoading.value = true;
-        Edit(formValue.value)
-          .then((_res) => {
-            message.success('操作成功');
-            closeForm();
-            emit('reloadTable');
-          })
-          .finally(() => {
-            formBtnLoading.value = false;
-          });
-      } else {
-        message.error('请填写完整信息');
-      }
-    });
-  }
-
-  // 关闭表单
-  function closeForm() {
-    showModal.value = false;
-    loading.value = false;
-  }
-
   defineExpose({
     openModal,
   });

web/src/views/normalTreeDemo/index.vue

@@ -59,13 +59,13 @@
   import { adaTableScrollX, convertListToTree } from '@/utils/hotgo';
   import Edit from './edit.vue';
 
+  const dict = useDictStore();
   const dialog = useDialog();
   const message = useMessage();
   const { hasPermission } = usePermission();
   const actionRef = ref();
   const searchFormRef = ref<any>({});
   const editRef = ref();
-  const dict = useDictStore();
 
   const checkedIds = ref([]);
   const expandedKeys = ref([]);
@@ -76,7 +76,7 @@
     title: '操作',
     key: 'action',
     fixed: 'right',
-    render(record) {
+    render(record: State) {
       return h(TableAction as any, {
         style: 'button',
         actions: [

web/src/views/normalTreeDemo/model.ts

@@ -1,10 +1,8 @@
 import { h, ref } from 'vue';
-import { NTag } from 'naive-ui';
 import { cloneDeep } from 'lodash-es';
 import { FormSchema } from '@/components/Form';
-import { isNullObject } from '@/utils/is';
 import { defRangeShortcuts } from '@/utils/dateUtil';
-import { renderPopoverMemberSumma, MemberSumma } from '@/utils';
+import { renderOptionTag, renderPopoverMemberSumma, MemberSumma } from '@/utils';
 import { TreeOption } from '@/api/normalTreeDemo';
 import { useDictStore } from '@/store/modules/dict';
 
@@ -121,23 +119,8 @@ export const columns = [
     key: 'categoryId',
     align: 'left',
     width: 100,
-    render(row) {
-      if (isNullObject(row.categoryId)) {
-        return ``;
-      }
-      return h(
-        NTag,
-        {
-          style: {
-            marginRight: '6px',
-          },
-          type: dict.getType('testCategoryOption', row.categoryId),
-          bordered: false,
-        },
-        {
-          default: () => dict.getLabel('testCategoryOption', row.categoryId),
-        }
-      );
+    render(row: State) {
+      return renderOptionTag('testCategoryOption', row.categoryId);
     },
   },
   {
@@ -151,23 +134,8 @@ export const columns = [
     key: 'status',
     align: 'left',
     width: 150,
-    render(row) {
-      if (isNullObject(row.status)) {
-        return ``;
-      }
-      return h(
-        NTag,
-        {
-          style: {
-            marginRight: '6px',
-          },
-          type: dict.getType('sys_normal_disable', row.status),
-          bordered: false,
-        },
-        {
-          default: () => dict.getLabel('sys_normal_disable', row.status),
-        }
-      );
+    render(row: State) {
+      return renderOptionTag('sys_normal_disable', row.status);
     },
   },
   {
@@ -175,7 +143,7 @@ export const columns = [
     key: 'createdBy',
     align: 'left',
     width: 100,
-    render(row) {
+    render(row: State) {
       return renderPopoverMemberSumma(row.createdBySumma);
     },
   },