@tmagic/form 1.8.0-beta.25 → 1.8.0-beta.27

package/src/containers/GroupListItem.vue

@@ -6,89 +6,95 @@
           <TMagicIcon><ArrowDown v-if="expand" /><ArrowRight v-else /></TMagicIcon>
         </TMagicButton>
 
-        <span v-html="title"></span>
-        <TMagicTooltip :content="`删除 ${title}`">
+        <div class="m-fields-group-list-item-title">
+          <slot name="title" :model="model" :index="index" :last-values="lastValues" :prop="rowProp" :title="title">
+            <span v-html="title"></span>
+          </slot>
+        </div>
+        <div class="m-fields-group-list-item-actions">
           <TMagicButton
-            v-if="!isCompare"
-            v-show="showDelete"
-            size="default"
-            link
-            class="delete-button"
-            :icon="Delete"
-            :disabled="disabled"
-            @click="removeHandler"
-          ></TMagicButton>
-        </TMagicTooltip>
-
-        <TMagicButton
-          v-if="copyable && !isCompare"
-          link
-          size="default"
-          type="primary"
-          :icon="DocumentCopy"
-          :disabled="disabled"
-          @click="copyHandler"
-          >复制</TMagicButton
-        >
-
-        <template v-if="movable && !isCompare">
-          <TMagicButton
-            v-show="index !== 0"
-            link
-            size="default"
-            :disabled="disabled"
-            :icon="Top"
-            @click="changeOrder(-1)"
-            >上移</TMagicButton
-          >
-          <TMagicButton
-            v-show="index !== length - 1"
+            v-if="copyable && !isCompare"
             link
             size="default"
+            type="primary"
+            :icon="DocumentCopy"
             :disabled="disabled"
-            :icon="Bottom"
-            @click="changeOrder(1)"
-            >下移</TMagicButton
+            @click="copyHandler"
+            >复制</TMagicButton
           >
-        </template>
-
-        <TMagicPopover
-          v-if="config.moveSpecifyLocation && !isCompare"
-          trigger="click"
-          placement="top"
-          width="200"
-          :visible="moveSpecifyLocationVisible"
-        >
-          <template #reference>
+
+          <template v-if="movable && !isCompare">
+            <TMagicButton
+              v-show="index !== 0"
+              link
+              size="default"
+              :disabled="disabled"
+              :icon="Top"
+              @click="changeOrder(-1)"
+              >上移</TMagicButton
+            >
             <TMagicButton
+              v-show="index !== length - 1"
               link
-              size="small"
-              type="primary"
-              :icon="Position"
+              size="default"
               :disabled="disabled"
-              @click="moveSpecifyLocationVisible = true"
-              >移动至</TMagicButton
+              :icon="Bottom"
+              @click="changeOrder(1)"
+              >下移</TMagicButton
             >
           </template>
-          <div>
-            <div>
-              第<TMagicInputNumber
-                style="margin: 0 5px"
-                v-model="moveSpecifyLocationIndex"
+
+          <TMagicPopover
+            v-if="config.moveSpecifyLocation && !isCompare"
+            trigger="click"
+            placement="top"
+            width="200"
+            :visible="moveSpecifyLocationVisible"
+          >
+            <template #reference>
+              <TMagicButton
+                link
                 size="small"
-                :min="1"
+                type="primary"
+                :icon="Position"
                 :disabled="disabled"
-              ></TMagicInputNumber
-              >行
-            </div>
-            <div style="text-align: right; margin-top: 20px">
-              <TMagicButton size="small" text @click="moveSpecifyLocationVisible = false">取消</TMagicButton>
-              <TMagicButton size="small" type="primary" @click="moveSpecifyLocationHandler">确认</TMagicButton>
+                @click="moveSpecifyLocationVisible = true"
+                >移动至</TMagicButton
+              >
+            </template>
+            <div>
+              <div>
+                第<TMagicInputNumber
+                  style="margin: 0 5px"
+                  v-model="moveSpecifyLocationIndex"
+                  size="small"
+                  :min="1"
+                  :disabled="disabled"
+                ></TMagicInputNumber
+                >行
+              </div>
+              <div style="text-align: right; margin-top: 20px">
+                <TMagicButton size="small" text @click="moveSpecifyLocationVisible = false">取消</TMagicButton>
+                <TMagicButton size="small" type="primary" @click="moveSpecifyLocationHandler">确认</TMagicButton>
+              </div>
             </div>
-          </div>
-        </TMagicPopover>
+          </TMagicPopover>
+
+          <!-- v-if 必须挂在 Tooltip 上：子节点为 false 时 ElOnlyChild 会报 no valid child node found -->
+          <TMagicTooltip v-if="!isCompare" :content="`删除 ${title}`">
+            <TMagicButton
+              v-show="showDelete"
+              size="default"
+              link
+              class="delete-button"
+              :icon="Delete"
+              :disabled="disabled"
+              @click="removeHandler"
+            ></TMagicButton>
+          </TMagicTooltip>
 
-        <span v-if="itemExtra" v-html="itemExtra" class="m-form-tip"></span>
+          <span v-if="itemExtra" v-html="itemExtra" class="m-form-tip"></span>
+        </div>
       </div>
     </template>
 
@@ -99,7 +105,8 @@
       :lastValues="lastValues"
       :is-compare="isCompare"
       :labelWidth="labelWidth"
-      :prop="`${prop}${prop ? '.' : ''}${String(index)}`"
+      :labelPosition="labelPosition"
+      :prop="rowProp"
       :size="size"
       :disabled="disabled"
       @change="changeHandler"
@@ -115,7 +122,8 @@ import { ArrowDown, ArrowRight, Bottom, Delete, DocumentCopy, Position, Top } fr
 import { TMagicButton, TMagicCard, TMagicIcon, TMagicInputNumber, TMagicPopover, TMagicTooltip } from '@tmagic/design';
 
 import type { ContainerChangeEventData, FormState, GroupListConfig } from '../schema';
-import { filterFunction } from '../utils/form';
+import { appendProp, filterFunction } from '../utils/form';
+import { getGroupListRowConfig } from '../utils/tableGroupList';
 
 import Container from './Container.vue';
 
@@ -130,6 +138,7 @@ const props = defineProps<{
   groupModel: any[];
   config: GroupListConfig;
   labelWidth?: string;
+  labelPosition?: 'top' | 'left' | 'right';
   prop?: string;
   size?: string;
   index: number;
@@ -143,15 +152,9 @@ const mForm = inject<FormState | undefined>('mForm');
 const defaultExpandQuantity = props.config.defaultExpandQuantity ?? 7;
 const expand = ref(props.config.expandAll || defaultExpandQuantity > props.index);
 
-const rowConfig = computed(() => ({
-  type: 'row',
-  span: props.config.span || 24,
-  items: props.config.items,
-  labelWidth: props.config.labelWidth,
-  [mForm?.keyProp || '__key']: `${(props.config as Record<string, any>)[mForm?.keyProp || '__key']}${String(
-    props.index,
-  )}`,
-}));
+const rowConfig = computed(() => getGroupListRowConfig(props.config, props.index, mForm?.keyProp));
+
+const rowProp = computed(() => appendProp(props.prop, props.index));
 
 const title = computed(() => {
   if (props.config.titleKey && props.model[props.config.titleKey]) {

package/src/containers/Panel.vue

@@ -39,6 +39,7 @@
             :size="size"
             :disabled="disabled"
             :label-width="config.labelWidth || labelWidth"
+            :label-position="config.labelPosition || labelPosition"
             @change="changeHandler"
             @addDiffCount="onAddDiffCount()"
           ></Container>
@@ -59,6 +60,7 @@
           :size="size"
           :disabled="disabled"
           :label-width="config.labelWidth || labelWidth"
+          :label-position="config.labelPosition || labelPosition"
           @change="changeHandler"
           @addDiffCount="onAddDiffCount()"
         ></Container>
@@ -89,6 +91,7 @@ const props = defineProps<{
   config: PanelConfig;
   name?: string;
   labelWidth?: string;
+  labelPosition?: 'top' | 'left' | 'right';
   prop?: string;
   size?: string;
   disabled?: boolean;

package/src/containers/Row.vue

@@ -6,6 +6,7 @@
       :span="col.span || config.span || 24 / config.items.length"
       :config="col"
       :labelWidth="config.labelWidth || labelWidth"
+      :labelPosition="config.labelPosition || labelPosition"
       :expandMore="expandMore"
       :model="name ? model[name] : model"
       :lastValues="name ? lastValues[name] : lastValues"
@@ -39,6 +40,7 @@ const props = defineProps<{
   config: RowConfig;
   name: string;
   labelWidth?: string;
+  labelPosition?: 'top' | 'left' | 'right';
   prop?: string;
   size?: string;
   expandMore?: boolean;

package/src/containers/Step.vue

@@ -24,6 +24,7 @@
           :size="size"
           :disabled="disabled"
           :label-width="config.labelWidth || labelWidth"
+          :label-position="config.labelPosition || labelPosition"
           @change="changeHandler"
           @addDiffCount="onAddDiffCount()"
         ></Container>
@@ -54,6 +55,7 @@ const props = withDefaults(
     config: StepConfig;
     stepActive?: number;
     labelWidth?: string;
+    labelPosition?: 'top' | 'left' | 'right';
     size?: string;
     disabled?: boolean;
   }>(),

package/src/containers/Tabs.vue

@@ -70,6 +70,7 @@
         "
         :size="size"
         :label-width="tab.labelWidth || labelWidth"
+        :label-position="tab.labelPosition || labelPosition"
         :expand-more="expandMore"
         @change="changeHandler"
         @addDiffCount="onAddDiffCount(Number(tabIndex))"
@@ -85,6 +86,7 @@ import { isEmpty } from 'lodash-es';
 import { getDesignConfig, TMagicBadge } from '@tmagic/design';
 
 import type { ContainerChangeEventData, FormState, TabConfig, TabPaneConfig } from '../schema';
+import { applyMountValueEffects } from '../utils/collectFields';
 import { display as displayFunc, filterFunction, initValue } from '../utils/form';
 
 import Container from './Container.vue';
@@ -106,6 +108,7 @@ const props = withDefaults(
     name: string;
     size?: string;
     labelWidth?: string;
+    labelPosition?: 'top' | 'left' | 'right';
     prop?: string;
     expandMore?: boolean;
     disabled?: boolean;
@@ -203,6 +206,13 @@ const onTabAdd = async () => {
       prop: props.prop,
       config: props.config,
     });
+    // 自定义回调可能直接 push 原始对象；对现有标签页再规整一遍（effect 必须幂等）
+    const tabsModel = props.model[props.name];
+    if (Array.isArray(tabsModel) && Array.isArray(props.config.items)) {
+      for (const tab of tabsModel) {
+        applyMountValueEffects(mForm, props.config.items, tab);
+      }
+    }
     emit('change', props.model[props.name]);
   } else {
     const newObj = await initValue(mForm, {
@@ -210,6 +220,9 @@ const onTabAdd = async () => {
       initValues: {},
     });
 
+    // 新增标签页的值在挂到表单上之前先规整一遍，与整表初始化走同一份登记表
+    applyMountValueEffects(mForm, props.config.items, newObj);
+
     newObj.title = `标签${tabs.value.length + 1}`;
 
     props.model[props.name].push(newObj);

package/src/containers/table/ActionsColumn.vue

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

package/src/containers/table/Table.vue

@@ -8,13 +8,14 @@
     >
       <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>
+        <!-- v-if 必须挂在 Tooltip 上：表格未就绪时 ElOnlyChild 会报 no valid child node found -->
         <TMagicTooltip
+          v-if="model[modelName]"
           content="拖拽可排序"
           placement="left-start"
           :disabled="config.dropSort !== true || config.dropSortHandle"
         >
           <TMagicTable
-            v-if="model[modelName]"
             ref="tMagicTable"
             style="width: 100%"
             show-header
@@ -92,8 +93,8 @@ import { FullScreen } from '@element-plus/icons-vue';
 
 import { TMagicButton, TMagicPagination, TMagicTable, TMagicTooltip, TMagicUpload } from '@tmagic/design';
 
-import type { SortProp } from '../../schema';
-import { sortChange } from '../../utils/form';
+import type { SortProp } from '@form/schema';
+import { sortChange } from '@form/utils/form';
 
 import type { TableProps } from './type';
 import { useFullscreen } from './useFullscreen';

package/src/containers/table/usePagination.ts

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

package/src/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 '@form/utils/form';
 
 import type { TableProps } from './type';
 

package/src/containers/table/useTableColumns.ts

@@ -1,13 +1,14 @@
 import { computed, h, inject, type Ref } from 'vue';
 import { WarningFilled } from '@element-plus/icons-vue';
-import { cloneDeep } from 'lodash-es';
 
 import { type TableColumnOptions, TMagicIcon, TMagicTooltip } from '@tmagic/design';
-import type { FormItemConfig, FormState, TableColumnConfig } from '@tmagic/form-schema';
+import type { FormItemConfig, FormState } from '@tmagic/form-schema';
+
+import type { ContainerChangeEventData } from '@form/schema';
+import { isGlobalFlat } from '@form/utils/config';
+import { appendProp, display as displayFunc, getDataByPage, sortArray } from '@form/utils/form';
+import { isTableColumnRendered, makeTableColumnConfig } from '@form/utils/tableGroupList';
 
-import type { ContainerChangeEventData } from '../../schema';
-import { isGlobalFlat } from '../../utils/config';
-import { display as displayFunc, getDataByPage, sortArray } from '../../utils/form';
 import Container from '../Container.vue';
 
 import ActionsColumn from './ActionsColumn.vue';
@@ -65,18 +66,7 @@ export const useTableColumns = (
     return props.config.selection;
   });
 
-  const getProp = (index: number) => {
-    return `${props.prop}${props.prop ? '.' : ''}${index + 1 + currentPage.value * pageSize.value - 1}`;
-  };
-
-  const makeConfig = (config: TableColumnConfig, row: any): TableColumnConfig => {
-    const newConfig = cloneDeep(config);
-    if (typeof config.itemsFunction === 'function') {
-      newConfig.items = config.itemsFunction(row);
-    }
-    delete newConfig.display;
-    return newConfig;
-  };
+  const getProp = (index: number) => appendProp(props.prop, index + currentPage.value * pageSize.value);
 
   const changeHandler = (v: any, eventData: ContainerChangeEventData) => {
     emit('change', props.model, eventData);
@@ -185,7 +175,7 @@ export const useTableColumns = (
     }
 
     for (const column of props.config.items) {
-      if (column.type !== 'hidden' && display(column.display)) {
+      if (isTableColumnRendered(column, display)) {
         const titleTipValue = titleTip(column.titleTip);
 
         columns.push({
@@ -203,7 +193,7 @@ export const useTableColumns = (
               disabled: props.disabled,
               prop: getProp($index),
               rules: column.rules,
-              config: makeConfig(column, row) as FormItemConfig,
+              config: makeTableColumnConfig(column, row) as FormItemConfig,
               model: row,
               lastValues: lastData.value[$index],
               isCompare: props.isCompare,

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

@@ -12,6 +12,7 @@
     :last-values="lastValues"
     :prop="prop"
     :label-width="labelWidth"
+    :label-position="labelPosition"
     :show-index="showIndex"
     :sort-key="sortKey"
     :sort="sort"
@@ -20,13 +21,8 @@
     @addDiffCount="onAddDiffCount"
     @add="onAdd"
   >
-    <template #toggle-button>
-      <TMagicButton
-        v-if="config.enableToggleMode || enableToggleMode"
-        :icon="Grid"
-        size="small"
-        @click="toggleDisplayMode"
-      >
+    <template #toggle-button v-if="config.enableToggleMode || enableToggleMode">
+      <TMagicButton :icon="Grid" size="small" @click="toggleDisplayMode">
         {{ displayMode === 'table' ? '展开配置' : '切换为表格' }}
       </TMagicButton>
     </template>
@@ -35,12 +31,10 @@
       <TMagicButton
         :class="displayMode === 'table' ? 'm-form-table-add-button' : ''"
         :size="addButtonSize"
-        :plain="displayMode === 'table'"
         :icon="Plus"
-        text
         :disabled="disabled"
-        v-bind="currentConfig.addButtonConfig?.props || { type: 'primary' }"
-        @click="newHandler"
+        v-bind="addButtonProps"
+        @click="handleAdd"
       >
         {{
           currentConfig.addButtonConfig?.text ||
@@ -50,6 +44,10 @@
         }}
       </TMagicButton>
     </template>
+
+    <template #title="slotProps" v-if="$slots.title">
+      <slot name="title" v-bind="slotProps"></slot>
+    </template>
   </component>
 </template>
 
@@ -60,11 +58,14 @@ 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 type { ContainerChangeEventData } from '@form/schema';
+import { isGroupListType, toGroupListConfig, toTableConfig } from '@form/utils/tableGroupList';
+
 import MFormGroupList from '../GroupList.vue';
 import MFormTable from '../table/Table.vue';
 
 import { useAdd } from './useAdd';
+import { useScrollLastItemIntoView } from './useScrollLastItemIntoView';
 
 defineOptions({
   name: 'MFormTableGroupList',
@@ -79,6 +80,7 @@ const props = defineProps<{
   name: string;
   prop?: string;
   labelWidth?: string;
+  labelPosition?: 'top' | 'left' | 'right';
   disabled?: boolean;
   size?: string;
   enableToggleMode?: true;
@@ -91,88 +93,58 @@ 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;
-  }
+// 若原始是 groupList，则基于它派生出 table 所需的 config（反之同理）
+const tableConfig = computed<TableConfig>(() => toTableConfig(props.config));
 
-  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;
-});
+const groupListConfig = computed<GroupListConfig>(() => toGroupListConfig(props.config));
 
 // 运行时类型由 displayMode 决定，`<component :is>` 无法做联合类型收窄，统一转 any 交给子组件处理
 const currentConfig = computed<any>(() => (displayMode.value === 'table' ? tableConfig.value : groupListConfig.value));
 
 // 保持原 Table/GroupList 模式下新增按钮的不同尺寸策略
 const addButtonSize = computed(() => {
+  if (currentConfig.value.addButtonConfig?.sticky) return 'default';
   if (displayMode.value === 'table') return 'small';
   return props.config.enableToggleMode !== false ? 'small' : 'default';
 });
 
+const addButtonProps = computed(() => {
+  const custom = currentConfig.value.addButtonConfig?.props;
+  if (custom) return { type: 'primary', ...custom };
+  if (displayMode.value === 'table') return { type: 'primary', plain: true };
+  return { type: 'primary', text: true };
+});
+
 const toggleDisplayMode = () => {
   displayMode.value = displayMode.value === 'table' ? 'groupList' : 'table';
 };
 
+const tableGroupListRef = useTemplateRef<InstanceType<typeof MFormTable>>('tableGroupList');
+
+const { scrollLastItemIntoView } = useScrollLastItemIntoView(
+  tableGroupListRef,
+  () => Boolean(currentConfig.value.scrollLastItemIntoView) && displayMode.value === 'groupList',
+);
+
+const handleAdd = async () => {
+  const expectedCount = await newHandler();
+  if (expectedCount !== null) await scrollLastItemIntoView(expectedCount);
+};
+
 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 onAdd = async (rows: any[]) => {
+  let expectedCount: number | null = null;
+  for (const row of rows) {
+    expectedCount = (await newHandler(row)) ?? expectedCount;
+  }
+  if (expectedCount !== null) await scrollLastItemIntoView(expectedCount);
 };
 
-const tableGroupListRef = useTemplateRef<InstanceType<typeof MFormTable>>('tableGroupList');
-
 defineExpose({
   toggleRowSelection: (row: any, selected: boolean) => tableGroupListRef.value?.toggleRowSelection?.(row, selected),
 });