@tmagic/form 1.7.9 → 1.7.11

package/src/containers/TableGroupList.vue

@@ -0,0 +1,181 @@
+<template>
+  <component
+    :is="displayMode === 'table' ? MFormTable : MFormGroupList"
+    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"
+  >
+    <template #toggle-button>
+      <TMagicButton
+        v-if="config.enableToggleMode || enableToggleMode"
+        :icon="Grid"
+        size="small"
+        @click="toggleDisplayMode"
+      >
+        {{ displayMode === 'table' ? '展开配置' : '切换为表格' }}
+      </TMagicButton>
+    </template>
+
+    <template #add-button="{ trigger }">
+      <TMagicButton
+        v-if="addable"
+        :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="trigger"
+      >
+        {{ currentConfig.addButtonConfig?.text || (displayMode === 'table' ? '新增一行' : '新增') }}
+      </TMagicButton>
+    </template>
+  </component>
+</template>
+
+<script setup lang="ts">
+import { computed, inject, ref } from 'vue';
+import { Grid, Plus } from '@element-plus/icons-vue';
+
+import { TMagicButton } from '@tmagic/design';
+import type { FormState, GroupListConfig, TableConfig } from '@tmagic/form-schema';
+
+import type { ContainerChangeEventData } from '../schema';
+import MFormTable from '../table/Table.vue';
+
+import MFormGroupList from './GroupList.vue';
+
+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 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;
+});
+
+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');
+</script>

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/TableGroupList.vue';
+export { default as MGroupList } from './containers/TableGroupList.vue';
+export { default as MTableGroupList } from './containers/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';

package/src/plugin.ts

@@ -21,10 +21,10 @@ import { type App } from 'vue';
 import Container from './containers/Container.vue';
 import Fieldset from './containers/Fieldset.vue';
 import FlexLayout from './containers/FlexLayout.vue';
-import GroupList from './containers/GroupList.vue';
 import Panel from './containers/Panel.vue';
 import Row from './containers/Row.vue';
 import MStep from './containers/Step.vue';
+import TableGroupList from './containers/TableGroupList.vue';
 import Tabs from './containers/Tabs.vue';
 import Cascader from './fields/Cascader.vue';
 import Checkbox from './fields/Checkbox.vue';
@@ -46,7 +46,6 @@ import Text from './fields/Text.vue';
 import Textarea from './fields/Textarea.vue';
 import Time from './fields/Time.vue';
 import Timerange from './fields/Timerange.vue';
-import Table from './table/Table.vue';
 import { setConfig } from './utils/config';
 import Form from './Form.vue';
 import FormDialog from './FormDialog.vue';
@@ -70,11 +69,11 @@ export default {
     app.component('m-form-dialog', FormDialog);
     app.component('m-form-container', Container);
     app.component('m-form-fieldset', Fieldset);
-    app.component('m-form-group-list', GroupList);
+    app.component('m-form-group-list', TableGroupList);
     app.component('m-form-panel', Panel);
     app.component('m-form-row', Row);
     app.component('m-form-step', MStep);
-    app.component('m-form-table', Table);
+    app.component('m-form-table', TableGroupList);
     app.component('m-form-tab', Tabs);
     app.component('m-form-flex-layout', FlexLayout);
     app.component('m-fields-text', Text);

package/src/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" :trigger="newHandler"></slot>
         </div>
 
         <div class="bottom" style="text-align: right" v-if="config.pagination">
@@ -96,8 +80,8 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, useTemplateRef } from 'vue';
-import { FullScreen, Grid, Plus } from '@element-plus/icons-vue';
+import { computed, ref, useTemplateRef, watch } from 'vue';
+import { FullScreen } from '@element-plus/icons-vue';
 
 import { TMagicButton, TMagicPagination, TMagicTable, TMagicTooltip, TMagicUpload, useZIndex } from '@tmagic/design';
 
@@ -120,7 +104,6 @@ defineOptions({
 const props = withDefaults(defineProps<TableProps>(), {
   prop: '',
   sortKey: '',
-  enableToggleMode: true,
   showIndex: true,
   lastValues: () => ({}),
   isCompare: false,
@@ -138,42 +121,24 @@ const { pageSize, currentPage, paginationData, handleSizeChange, handleCurrentCh
 
 const { nextZIndex } = useZIndex();
 const updateKey = ref(1);
+const fullscreenZIndex = ref(nextZIndex());
 
-const { addable, newHandler } = useAdd(props, emit);
+const { newHandler } = useAdd(props, emit);
 const { columns } = useTableColumns(props, emit, currentPage, pageSize, modelName);
 useSortable(props, emit, tMagicTableRef, modelName, updateKey);
 const { isFullscreen, toggleFullscreen } = useFullscreen();
+
+watch(isFullscreen, (value) => {
+  if (value) {
+    fullscreenZIndex.value = nextZIndex();
+  }
+});
+
 const { importable, excelHandler, clearHandler } = useImport(props, emit, newHandler);
 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/type.ts

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

package/src/table/useAdd.ts

@@ -1,4 +1,4 @@
-import { computed, inject } from 'vue';
+import { inject } from 'vue';
 
 import { tMagicMessage } from '@tmagic/design';
 import type { FormConfig, FormState } from '@tmagic/form-schema';
@@ -13,21 +13,6 @@ export const useAdd = (
 ) => {
   const mForm = inject<FormState | undefined>('mForm');
 
-  const addable = computed(() => {
-    const modelName = props.name || props.config.name || '';
-    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,
-      });
-    }
-    return typeof props.config.addable === 'undefined' ? true : props.config.addable;
-  });
-
   const newHandler = async (row?: any) => {
     const modelName = props.name || props.config.name || '';
 
@@ -37,7 +22,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,
@@ -106,7 +91,6 @@ export const useAdd = (
   };
 
   return {
-    addable,
     newHandler,
   };
 };