@tmagic/form 1.7.10 → 1.7.12

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.7.10",
+  "version": "1.7.12",
   "name": "@tmagic/form",
   "type": "module",
   "sideEffects": [
@@ -50,11 +50,11 @@
     "@vue/test-utils": "^2.4.6"
   },
   "peerDependencies": {
-    "vue": "^3.5.24",
-    "typescript": "^6.0.2",
-    "@tmagic/design": "1.7.10",
-    "@tmagic/form-schema": "1.7.10",
-    "@tmagic/utils": "1.7.10"
+    "vue": "^3.5.33",
+    "typescript": "^6.0.3",
+    "@tmagic/design": "1.7.12",
+    "@tmagic/form-schema": "1.7.12",
+    "@tmagic/utils": "1.7.12"
   },
   "peerDependenciesMeta": {
     "typescript": {

package/src/containers/GroupList.vue

@@ -10,7 +10,7 @@
       v-for="(item, index) in model[name]"
       :key="index"
       :model="item"
-      :lastValues="getLastValues(lastValues[name], Number(index))"
+      :lastValues="getLastValues(lastValues?.[name], Number(index))"
       :is-compare="isCompare"
       :config="config"
       :prop="prop"
@@ -27,33 +27,18 @@
     ></MFieldsGroupListItem>
 
     <div class="m-fields-group-list-footer">
-      <TMagicButton v-if="config.enableToggleMode" :icon="Grid" size="small" @click="toggleMode"
-        >切换为表格</TMagicButton
-      >
+      <slot name="toggle-button"></slot>
       <div style="display: flex; justify-content: flex-end; flex: 1">
-        <TMagicButton
-          v-if="addable"
-          :size="config.enableToggleMode ? 'small' : 'default'"
-          :icon="Plus"
-          v-bind="config.addButtonConfig?.props || { type: 'primary' }"
-          :disabled="disabled"
-          @click="addHandler"
-          >{{ config.addButtonConfig?.text || '新增' }}</TMagicButton
-        >
+        <slot name="add-button"></slot>
       </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, inject } from 'vue';
-import { Grid, Plus } from '@element-plus/icons-vue';
 import { cloneDeep } from 'lodash-es';
 
-import { TMagicButton } from '@tmagic/design';
-
-import type { ContainerChangeEventData, FormState, GroupListConfig } from '../schema';
-import { initValue } from '../utils/form';
+import type { ContainerChangeEventData, GroupListConfig } from '../schema';
 
 import MFieldsGroupListItem from './GroupListItem.vue';
 
@@ -71,6 +56,7 @@ const props = defineProps<{
   prop?: string;
   size?: string;
   disabled?: boolean;
+  showIndex?: boolean;
 }>();
 
 const emit = defineEmits<{
@@ -78,60 +64,10 @@ const emit = defineEmits<{
   addDiffCount: [];
 }>();
 
-const mForm = inject<FormState | undefined>('mForm');
-
-const addable = computed(() => {
-  if (!props.name) return false;
-
-  if (typeof props.config.addable === 'function') {
-    return props.config.addable(mForm, {
-      model: props.model[props.name],
-      formValue: mForm?.values,
-      prop: props.prop,
-      config: props.config,
-    });
-  }
-
-  return typeof props.config.addable === 'undefined' ? true : props.config.addable;
-});
-
 const changeHandler = (v: any, eventData: ContainerChangeEventData) => {
   emit('change', props.model, eventData);
 };
 
-const addHandler = async () => {
-  if (!props.name) return false;
-
-  let initValues = {};
-
-  if (typeof props.config.defaultAdd === 'function') {
-    initValues = await props.config.defaultAdd(mForm, {
-      model: props.model[props.name],
-      formValue: mForm?.values,
-      prop: props.prop,
-      config: props.config,
-    });
-  } else if (props.config.defaultAdd) {
-    initValues = props.config.defaultAdd;
-  }
-
-  const groupValue = await initValue(mForm, {
-    config: props.config.items,
-    initValues,
-  });
-
-  props.model[props.name].push(groupValue);
-
-  emit('change', props.model[props.name], {
-    changeRecords: [
-      {
-        propPath: `${props.prop}.${props.model[props.name].length - 1}`,
-        value: groupValue,
-      },
-    ],
-  });
-};
-
 const removeHandler = (index: number) => {
   if (!props.name) return false;
 
@@ -153,17 +89,6 @@ const swapHandler = (idx1: number, idx2: number) => {
   emit('change', props.model[props.name]);
 };
 
-const toggleMode = () => {
-  props.config.type = 'table';
-  props.config.groupItems = props.config.items;
-  props.config.items = (props.config.tableItems ||
-    props.config.items.map((item: any) => ({
-      ...item,
-      label: item.label || item.text,
-      text: null,
-    }))) as any;
-};
-
 const onAddDiffCount = () => emit('addDiffCount');
 
 const getLastValues = (item: any, index: number) => item?.[index] || {};

package/src/{table → containers/table}/ActionsColumn.vue

@@ -38,7 +38,7 @@ import { cloneDeep } from 'lodash-es';
 
 import { TMagicButton, TMagicTooltip } from '@tmagic/design';
 
-import type { FormState, TableConfig } from '../schema';
+import type { FormState, TableConfig } from '../../schema';
 
 const emit = defineEmits(['change']);
 

package/src/{table → containers/table}/Table.vue

@@ -4,7 +4,7 @@
       v-bind="$attrs"
       class="m-fields-table-wrap"
       :class="{ fixed: isFullscreen }"
-      :style="isFullscreen ? `z-index: ${nextZIndex()}` : ''"
+      :style="isFullscreen ? `z-index: ${fullscreenZIndex}` : ''"
     >
       <div class="m-fields-table" :class="{ 'm-fields-table-item-extra': config.itemExtra }">
         <span v-if="config.extra" style="color: rgba(0, 0, 0, 0.45)" v-html="config.extra"></span>
@@ -34,13 +34,7 @@
 
         <div style="display: flex; justify-content: space-between; margin: 10px 0">
           <div style="display: flex">
-            <TMagicButton
-              :icon="Grid"
-              size="small"
-              @click="toggleMode"
-              v-if="enableToggleMode && config.enableToggleMode !== false && !isFullscreen"
-              >展开配置</TMagicButton
-            >
+            <slot name="toggle-button" v-if="!isFullscreen"></slot>
             <TMagicButton
               :icon="FullScreen"
               size="small"
@@ -64,17 +58,7 @@
               >清空</TMagicButton
             >
           </div>
-          <TMagicButton
-            v-if="addable"
-            class="m-form-table-add-button"
-            size="small"
-            plain
-            :icon="Plus"
-            v-bind="config.addButtonConfig?.props || { type: 'primary' }"
-            :disabled="disabled"
-            @click="newHandler()"
-            >{{ config.addButtonConfig?.text || '新增一行' }}</TMagicButton
-          >
+          <slot name="add-button"></slot>
         </div>
 
         <div class="bottom" style="text-align: right" v-if="config.pagination">
@@ -97,15 +81,14 @@
 
 <script setup lang="ts">
 import { computed, ref, useTemplateRef } from 'vue';
-import { FullScreen, Grid, Plus } from '@element-plus/icons-vue';
+import { FullScreen } from '@element-plus/icons-vue';
 
-import { TMagicButton, TMagicPagination, TMagicTable, TMagicTooltip, TMagicUpload, useZIndex } from '@tmagic/design';
+import { TMagicButton, TMagicPagination, TMagicTable, TMagicTooltip, TMagicUpload } from '@tmagic/design';
 
-import type { SortProp } from '../schema';
-import { sortChange } from '../utils/form';
+import type { SortProp } from '../../schema';
+import { sortChange } from '../../utils/form';
 
 import type { TableProps } from './type';
-import { useAdd } from './useAdd';
 import { useFullscreen } from './useFullscreen';
 import { useImport } from './useImport';
 import { usePagination } from './usePagination';
@@ -120,13 +103,12 @@ defineOptions({
 const props = withDefaults(defineProps<TableProps>(), {
   prop: '',
   sortKey: '',
-  enableToggleMode: true,
   showIndex: true,
   lastValues: () => ({}),
   isCompare: false,
 });
 
-const emit = defineEmits(['change', 'select', 'addDiffCount']);
+const emit = defineEmits(['change', 'select', 'addDiffCount', 'add']);
 
 const modelName = computed(() => props.name || props.config.name || '');
 const tMagicTableRef = useTemplateRef<InstanceType<typeof TMagicTable>>('tMagicTable');
@@ -136,44 +118,17 @@ const { pageSize, currentPage, paginationData, handleSizeChange, handleCurrentCh
   modelName,
 );
 
-const { nextZIndex } = useZIndex();
 const updateKey = ref(1);
 
-const { addable, newHandler } = useAdd(props, emit);
 const { columns } = useTableColumns(props, emit, currentPage, pageSize, modelName);
 useSortable(props, emit, tMagicTableRef, modelName, updateKey);
-const { isFullscreen, toggleFullscreen } = useFullscreen();
-const { importable, excelHandler, clearHandler } = useImport(props, emit, newHandler);
+const { isFullscreen, fullscreenZIndex, toggleFullscreen } = useFullscreen();
+
+const { importable, excelHandler, clearHandler } = useImport(props, emit);
 const { selectHandle, toggleRowSelection } = useSelection(props, emit, tMagicTableRef);
 
 const data = computed(() => (props.config.pagination ? paginationData.value : props.model[modelName.value]));
 
-const toggleMode = () => {
-  const calcLabelWidth = (label: string) => {
-    if (!label) return '0px';
-    const zhLength = label.match(/[^\x00-\xff]/g)?.length || 0;
-    const chLength = label.length - zhLength;
-    return `${Math.max(chLength * 8 + zhLength * 20, 80)}px`;
-  };
-
-  // 切换为groupList的形式
-  props.config.type = 'groupList';
-  props.config.enableToggleMode = true;
-  props.config.tableItems = props.config.items;
-  props.config.items =
-    props.config.groupItems ||
-    props.config.items.map((item: any) => {
-      const text = item.text || item.label;
-      const labelWidth = calcLabelWidth(text);
-      return {
-        ...item,
-        text,
-        labelWidth,
-        span: item.span || 12,
-      };
-    });
-};
-
 const sortChangeHandler = (sortOptions: SortProp) => {
   const modelName = props.name || props.config.name || '';
   sortChange(props.model[modelName], sortOptions);

package/src/{table → containers/table}/type.ts

@@ -13,6 +13,5 @@ export interface TableProps {
   sortKey?: string;
   text?: string;
   size?: string;
-  enableToggleMode?: boolean;
   showIndex?: boolean;
 }

package/src/containers/table/useFullscreen.ts

@@ -0,0 +1,31 @@
+import { ref, watch } from 'vue';
+
+import { useZIndex } from '@tmagic/design';
+
+export const useFullscreen = () => {
+  const { nextZIndex } = useZIndex();
+
+  const fullscreenZIndex = ref(nextZIndex());
+
+  const isFullscreen = ref(false);
+
+  const toggleFullscreen = () => {
+    if (isFullscreen.value) {
+      isFullscreen.value = false;
+    } else {
+      isFullscreen.value = true;
+    }
+  };
+
+  watch(isFullscreen, (value) => {
+    if (value) {
+      fullscreenZIndex.value = nextZIndex();
+    }
+  });
+
+  return {
+    isFullscreen,
+    fullscreenZIndex,
+    toggleFullscreen,
+  };
+};

package/src/{table → containers/table}/useImport.ts

@@ -8,8 +8,7 @@ import type { TableProps } from './type';
 
 export const useImport = (
   props: TableProps,
-  emit: (event: 'select' | 'change' | 'addDiffCount', ...args: any[]) => void,
-  newHandler: (row: any) => void,
+  emit: (event: 'select' | 'change' | 'addDiffCount' | 'add', ...args: any[]) => void,
 ) => {
   const mForm = inject<FormState | undefined>('mForm');
   const modelName = computed(() => props.name || props.config.name || '');
@@ -41,9 +40,7 @@ export const useImport = (
       pdata.SheetNames.forEach((sheetName: string) => {
         const arr = (globalThis as any).XLSX.utils.sheet_to_json(pdata.Sheets[sheetName], { header: 1 });
         if (arr?.[0]) {
-          arr.forEach((row: any) => {
-            newHandler(row);
-          });
+          emit('add', arr);
         }
         setTimeout(() => {
           excelBtn.value?.clearFiles();

package/src/{table → containers/table}/usePagination.ts

@@ -1,6 +1,6 @@
 import { computed, type Ref, ref } from 'vue';
 
-import { getDataByPage } from '../utils/form';
+import { getDataByPage } from '../../utils/form';
 
 import type { TableProps } from './type';
 

package/src/{table → containers/table}/useSortable.ts

@@ -4,7 +4,7 @@ import type { default as SortableType, SortableEvent } from 'sortablejs';
 import { type TMagicTable } from '@tmagic/design';
 import type { FormState } from '@tmagic/form-schema';
 
-import { sortArray } from '../utils/form';
+import { sortArray } from '../../utils/form';
 
 import type { TableProps } from './type';
 

package/src/{table → containers/table}/useTableColumns.ts

@@ -5,9 +5,9 @@ import { cloneDeep } from 'lodash-es';
 import { type TableColumnOptions, TMagicIcon, TMagicTooltip } from '@tmagic/design';
 import type { FormItemConfig, FormState, TableColumnConfig } from '@tmagic/form-schema';
 
-import Container from '../containers/Container.vue';
-import type { ContainerChangeEventData } from '../schema';
-import { display as displayFunc, getDataByPage, sortArray } from '../utils/form';
+import type { ContainerChangeEventData } from '../../schema';
+import { display as displayFunc, getDataByPage, sortArray } from '../../utils/form';
+import Container from '../Container.vue';
 
 import ActionsColumn from './ActionsColumn.vue';
 import SortColumn from './SortColumn.vue';
@@ -187,7 +187,7 @@ export const useTableColumns = (
         columns.push({
           props: {
             prop: column.name,
-            label: column.label,
+            label: column.label || column.text,
             width: column.width,
             sortable: column.sortable,
             sortOrders: ['ascending', 'descending'],
@@ -223,7 +223,10 @@ export const useTableColumns = (
                             gap: '5px',
                           },
                         },
-                        [h('span', column.label), h(TMagicIcon, {}, { default: () => h(WarningFilled) })],
+                        [
+                          h('span', column.label || column.text),
+                          h(TMagicIcon, {}, { default: () => h(WarningFilled) }),
+                        ],
                       ),
                     content: () =>
                       h('div', {

package/src/containers/table-group-list/TableGroupList.vue

@@ -0,0 +1,173 @@
+<template>
+  <component
+    :is="displayMode === 'table' ? MFormTable : MFormGroupList"
+    ref="tableGroupList"
+    v-bind="$attrs"
+    :model="model"
+    :name="`${name}`"
+    :config="currentConfig"
+    :disabled="disabled"
+    :size="size"
+    :is-compare="isCompare"
+    :last-values="lastValues"
+    :prop="prop"
+    :label-width="labelWidth"
+    :show-index="showIndex"
+    :sort-key="sortKey"
+    :sort="sort"
+    @change="onChange"
+    @select="onSelect"
+    @addDiffCount="onAddDiffCount"
+    @add="onAdd"
+  >
+    <template #toggle-button>
+      <TMagicButton
+        v-if="config.enableToggleMode || enableToggleMode"
+        :icon="Grid"
+        size="small"
+        @click="toggleDisplayMode"
+      >
+        {{ displayMode === 'table' ? '展开配置' : '切换为表格' }}
+      </TMagicButton>
+    </template>
+
+    <template #add-button v-if="addable">
+      <TMagicButton
+        :class="displayMode === 'table' ? 'm-form-table-add-button' : ''"
+        :size="addButtonSize"
+        :plain="displayMode === 'table'"
+        :icon="Plus"
+        :disabled="disabled"
+        v-bind="currentConfig.addButtonConfig?.props || { type: 'primary' }"
+        @click="newHandler"
+      >
+        {{ currentConfig.addButtonConfig?.text || (displayMode === 'table' ? '新增一行' : '新增') }}
+      </TMagicButton>
+    </template>
+  </component>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, useTemplateRef } from 'vue';
+import { Grid, Plus } from '@element-plus/icons-vue';
+
+import { TMagicButton } from '@tmagic/design';
+import type { GroupListConfig, TableConfig } from '@tmagic/form-schema';
+
+import type { ContainerChangeEventData } from '../../schema';
+import MFormGroupList from '../GroupList.vue';
+import MFormTable from '../table/Table.vue';
+
+import { useAdd } from './useAdd';
+
+defineOptions({
+  name: 'MFormTableGroupList',
+  inheritAttrs: false,
+});
+
+const props = defineProps<{
+  model: any;
+  lastValues?: any;
+  isCompare?: boolean;
+  config: TableConfig | GroupListConfig;
+  name: string;
+  prop?: string;
+  labelWidth?: string;
+  disabled?: boolean;
+  size?: string;
+  enableToggleMode?: true;
+  showIndex?: boolean;
+  sortKey?: string;
+  sort?: boolean;
+}>();
+
+const emit = defineEmits(['change', 'select', 'addDiffCount']);
+
+const { addable, newHandler } = useAdd(props, emit);
+
+const isGroupListType = (type: string | undefined) => type === 'groupList' || type === 'group-list';
+
+const displayMode = ref<'table' | 'groupList'>(isGroupListType(props.config.type) ? 'groupList' : 'table');
+
+const calcLabelWidth = (label: string) => {
+  if (!label) return '0px';
+  const zhLength = label.match(/[^\x00-\xff]/g)?.length || 0;
+  const chLength = label.length - zhLength;
+  return `${Math.max(chLength * 8 + zhLength * 20, 80)}px`;
+};
+
+// 当原始 config 是 table 形态时，table 模式直接透传；
+// 若原始是 groupList，则基于它派生出 table 所需的 config
+const tableConfig = computed<TableConfig>(() => {
+  if (!isGroupListType(props.config.type)) {
+    return props.config as TableConfig;
+  }
+
+  const source = props.config as GroupListConfig;
+  return {
+    ...props.config,
+    type: 'table',
+    groupItems: source.items,
+    items:
+      source.tableItems ||
+      (source.items as any[]).map((item: any) => ({
+        ...item,
+        label: item.label || item.text,
+        text: null,
+      })),
+  } as any as TableConfig;
+});
+
+// 反向派生 groupList 所需的 config
+const groupListConfig = computed<GroupListConfig>(() => {
+  if (isGroupListType(props.config.type)) {
+    return props.config as GroupListConfig;
+  }
+
+  const source = props.config as TableConfig;
+  return {
+    ...props.config,
+    type: 'groupList',
+    tableItems: source.items,
+    items:
+      source.groupItems ||
+      (source.items as any[]).map((item: any) => {
+        const text = item.text || item.label;
+        return {
+          ...item,
+          text,
+          labelWidth: calcLabelWidth(text),
+          span: item.span || 12,
+        };
+      }),
+  } as any as GroupListConfig;
+});
+
+// 运行时类型由 displayMode 决定，`<component :is>` 无法做联合类型收窄，统一转 any 交给子组件处理
+const currentConfig = computed<any>(() => (displayMode.value === 'table' ? tableConfig.value : groupListConfig.value));
+
+// 保持原 Table/GroupList 模式下新增按钮的不同尺寸策略
+const addButtonSize = computed(() => {
+  if (displayMode.value === 'table') return 'small';
+  return props.config.enableToggleMode !== false ? 'small' : 'default';
+});
+
+const toggleDisplayMode = () => {
+  displayMode.value = displayMode.value === 'table' ? 'groupList' : 'table';
+};
+
+const onChange = (v: any, eventData?: ContainerChangeEventData) => emit('change', v, eventData);
+const onSelect = (...args: any[]) => emit('select', ...args);
+const onAddDiffCount = () => emit('addDiffCount');
+const onAdd = (rows: any[]) => {
+  rows.forEach((row: any) => {
+    newHandler(row);
+  });
+};
+
+const tableGroupListRef = useTemplateRef<InstanceType<typeof MFormTable>>('tableGroupList');
+
+defineExpose({
+  toggleRowSelection: (row: any, selected: boolean) => tableGroupListRef.value?.toggleRowSelection?.(row, selected),
+});
+</script>

package/src/{table → containers/table-group-list}/useAdd.ts

@@ -1,30 +1,40 @@
 import { computed, inject } from 'vue';
 
 import { tMagicMessage } from '@tmagic/design';
-import type { FormConfig, FormState } from '@tmagic/form-schema';
+import type { FormConfig, FormState, TableConfig, TableGroupListCommonConfig } from '@tmagic/form-schema';
 
-import { initValue } from '../utils/form';
-
-import type { TableProps } from './type';
+import { initValue } from '../../utils/form';
+import type { TableProps } from '../table/type';
 
 export const useAdd = (
-  props: TableProps,
-  emit: (event: 'select' | 'change' | 'addDiffCount', ...args: any[]) => void,
+  props: Pick<TableProps, 'name' | 'model' | 'prop' | 'sortKey'> & {
+    config: Pick<TableGroupListCommonConfig, 'addable' | 'max' | 'beforeAddRow' | 'defaultAdd' | 'enum'> &
+      Pick<TableConfig, 'key' | 'name'> & {
+        items: { name?: string | number }[];
+      };
+  },
+  emit: (event: 'change', ...args: any[]) => void,
 ) => {
   const mForm = inject<FormState | undefined>('mForm');
 
   const addable = computed(() => {
     const modelName = props.name || props.config.name || '';
+
+    if (!modelName) return false;
+
     if (!props.model[modelName].length) {
       return true;
     }
+
     if (typeof props.config.addable === 'function') {
       return props.config.addable(mForm, {
         model: props.model[modelName],
         formValue: mForm?.values,
         prop: props.prop,
+        config: props.config,
       });
     }
+
     return typeof props.config.addable === 'undefined' ? true : props.config.addable;
   });
 
@@ -37,7 +47,7 @@ export const useAdd = (
     }
 
     if (typeof props.config.beforeAddRow === 'function') {
-      const beforeCheckRes = props.config.beforeAddRow(mForm, {
+      const beforeCheckRes = await props.config.beforeAddRow(mForm, {
         model: props.model[modelName],
         formValue: mForm?.values,
         prop: props.prop,

package/src/index.ts

@@ -32,8 +32,9 @@ export { default as MFlexLayout } from './containers/FlexLayout.vue';
 export { default as MPanel } from './containers/Panel.vue';
 export { default as MRow } from './containers/Row.vue';
 export { default as MTabs } from './containers/Tabs.vue';
-export { default as MTable } from './table/Table.vue';
-export { default as MGroupList } from './containers/GroupList.vue';
+export { default as MTable } from './containers/table-group-list/TableGroupList.vue';
+export { default as MGroupList } from './containers/table-group-list/TableGroupList.vue';
+export { default as MTableGroupList } from './containers/table-group-list/TableGroupList.vue';
 export { default as MText } from './fields/Text.vue';
 export { default as MNumber } from './fields/Number.vue';
 export { default as MNumberRange } from './fields/NumberRange.vue';