@tmagic/form 1.7.0-beta.1 → 1.7.0-beta.3

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.7.0-beta.1",
+  "version": "1.7.0-beta.3",
   "name": "@tmagic/form",
   "type": "module",
   "sideEffects": [
@@ -51,9 +51,9 @@
   "peerDependencies": {
     "vue": "^3.5.22",
     "typescript": "^5.9.3",
-    "@tmagic/design": "1.7.0-beta.1",
-    "@tmagic/form-schema": "1.7.0-beta.1",
-    "@tmagic/utils": "1.7.0-beta.1"
+    "@tmagic/design": "1.7.0-beta.3",
+    "@tmagic/utils": "1.7.0-beta.3",
+    "@tmagic/form-schema": "1.7.0-beta.3"
   },
   "peerDependenciesMeta": {
     "typescript": {

package/src/FormBox.vue

@@ -101,8 +101,9 @@ watchEffect(() => {
 
 const submitHandler = async () => {
   try {
+    const changeRecords = form.value?.changeRecords;
     const values = await form.value?.submitForm();
-    emit('submit', values, { changeRecords: form.value?.changeRecords });
+    emit('submit', values, { changeRecords });
   } catch (e) {
     emit('error', e);
   }

package/src/FormDialog.vue

@@ -131,8 +131,9 @@ const closeHandler = () => {
 
 const save = async () => {
   try {
+    const changeRecords = form.value?.changeRecords;
     const values = await form.value?.submitForm();
-    emit('submit', values, { changeRecords: form.value?.changeRecords });
+    emit('submit', values, { changeRecords });
   } catch (e) {
     emit('error', e);
   }

package/src/FormDrawer.vue

@@ -109,8 +109,9 @@ watchEffect(() => {
 
 const submitHandler = async () => {
   try {
+    const changeRecords = form.value?.changeRecords;
     const values = await form.value?.submitForm();
-    emit('submit', values, { changeRecords: form.value?.changeRecords });
+    emit('submit', values, { changeRecords });
   } catch (e) {
     emit('error', e);
   }

package/src/containers/Container.vue

@@ -208,10 +208,7 @@ const items = computed(() => (props.config as ContainerCommonConfig).items);
 
 const itemProp = computed(() => {
   let n: string | number = '';
-  const { names } = props.config as any;
-  if (names?.[0]) {
-    [n] = names;
-  } else if (name.value) {
+  if (name.value) {
     n = name.value;
   } else {
     return props.prop;

package/src/containers/GroupList.vue

@@ -2,7 +2,7 @@
   <div class="m-fields-group-list">
     <div v-if="config.extra" v-html="config.extra" style="color: rgba(0, 0, 0, 0.45)"></div>
     <div v-if="!model[name] || !model[name].length" class="el-table__empty-block">
-      <span class="el-table__empty-text">暂无数据</span>
+      <span class="el-table__empty-text t-table__empty">暂无数据</span>
     </div>
 
     <MFieldsGroupListItem
@@ -26,16 +26,21 @@
       @addDiffCount="onAddDiffCount()"
     ></MFieldsGroupListItem>
 
-    <TMagicButton
-      v-if="addable"
-      type="primary"
-      :size="config.enableToggleMode ? 'small' : 'default'"
-      :disabled="disabled"
-      @click="addHandler"
-      >新增</TMagicButton
-    >
-
-    <TMagicButton :icon="Grid" size="small" @click="toggleMode" v-if="config.enableToggleMode">切换为表格</TMagicButton>
+    <div class="m-fields-group-list-footer">
+      <TMagicButton v-if="config.enableToggleMode" :icon="Grid" size="small" @click="toggleMode"
+        >切换为表格</TMagicButton
+      >
+      <div style="display: flex; justify-content: flex-end; flex: 1">
+        <TMagicButton
+          v-if="addable"
+          type="primary"
+          :size="config.enableToggleMode ? 'small' : 'default'"
+          :disabled="disabled"
+          @click="addHandler"
+          >新增</TMagicButton
+        >
+      </div>
+    </div>
   </div>
 </template>
 

package/src/containers/GroupListItem.vue

@@ -1,90 +1,92 @@
 <template>
-  <div class="m-fields-group-list-item">
-    <div>
-      <TMagicButton link :disabled="disabled" @click="expandHandler">
-        <TMagicIcon><CaretBottom v-if="expand" /><CaretRight v-else /></TMagicIcon>{{ title }}
-      </TMagicButton>
-
-      <TMagicButton
-        v-show="showDelete"
-        type="danger"
-        size="small"
-        link
-        :icon="Delete"
-        :disabled="disabled"
-        @click="removeHandler"
-      ></TMagicButton>
-
-      <TMagicButton
-        v-if="copyable"
-        link
-        size="small"
-        type="primary"
-        :icon="DocumentCopy"
-        :disabled="disabled"
-        @click="copyHandler"
-        >复制</TMagicButton
-      >
-
-      <template v-if="movable">
+  <TMagicCard class="m-fields-group-list-item" :body-style="{ display: expand ? 'block' : 'none' }">
+    <template #header>
+      <div>
+        <TMagicButton link :disabled="disabled" @click="expandHandler">
+          <TMagicIcon><CaretBottom v-if="expand" /><CaretRight v-else /></TMagicIcon>{{ title }}
+        </TMagicButton>
+
         <TMagicButton
-          v-show="index !== 0"
-          link
+          v-show="showDelete"
+          type="danger"
           size="small"
+          link
+          :icon="Delete"
           :disabled="disabled"
-          :icon="CaretTop"
-          @click="changeOrder(-1)"
-          >上移</TMagicButton
-        >
+          @click="removeHandler"
+        ></TMagicButton>
+
         <TMagicButton
-          v-show="index !== length - 1"
+          v-if="copyable"
           link
           size="small"
+          type="primary"
+          :icon="DocumentCopy"
           :disabled="disabled"
-          :icon="CaretBottom"
-          @click="changeOrder(1)"
-          >下移</TMagicButton
+          @click="copyHandler"
+          >复制</TMagicButton
         >
-      </template>
-
-      <TMagicPopover
-        v-if="config.moveSpecifyLocation"
-        trigger="click"
-        placement="top"
-        width="200"
-        :visible="moveSpecifyLocationVisible"
-      >
-        <template #reference>
+
+        <template v-if="movable">
+          <TMagicButton
+            v-show="index !== 0"
+            link
+            size="small"
+            :disabled="disabled"
+            :icon="CaretTop"
+            @click="changeOrder(-1)"
+            >上移</TMagicButton
+          >
           <TMagicButton
+            v-show="index !== length - 1"
             link
             size="small"
-            type="primary"
-            :icon="Position"
             :disabled="disabled"
-            @click="moveSpecifyLocationVisible = true"
-            >移动至</TMagicButton
+            :icon="CaretBottom"
+            @click="changeOrder(1)"
+            >下移</TMagicButton
           >
         </template>
-        <div>
-          <div>
-            第<TMagicInputNumber
-              style="margin: 0 5px"
-              v-model="moveSpecifyLocationIndex"
+
+        <TMagicPopover
+          v-if="config.moveSpecifyLocation"
+          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>
 
-      <span v-if="itemExtra" v-html="itemExtra" class="m-form-tip"></span>
-    </div>
+        <span v-if="itemExtra" v-html="itemExtra" class="m-form-tip"></span>
+      </div>
+    </template>
 
     <Container
       v-if="expand"
@@ -99,14 +101,14 @@
       @change="changeHandler"
       @addDiffCount="onAddDiffCount()"
     ></Container>
-  </div>
+  </TMagicCard>
 </template>
 
 <script setup lang="ts">
 import { computed, inject, ref } from 'vue';
 import { CaretBottom, CaretRight, CaretTop, Delete, DocumentCopy, Position } from '@element-plus/icons-vue';
 
-import { TMagicButton, TMagicIcon, TMagicInputNumber, TMagicPopover } from '@tmagic/design';
+import { TMagicButton, TMagicCard, TMagicIcon, TMagicInputNumber, TMagicPopover } from '@tmagic/design';
 
 import type { ContainerChangeEventData, FormState, GroupListConfig } from '../schema';
 import { filterFunction } from '../utils/form';

package/src/fields/Daterange.vue

@@ -9,6 +9,7 @@
     :unlink-panels="true"
     :disabled="disabled"
     :default-time="config.defaultTime"
+    :format="`${config.dateFormat || 'YYYY/MM/DD'} ${config.timeFormat || 'HH:mm:ss'}`"
     :value-format="config.valueFormat || 'YYYY/MM/DD HH:mm:ss'"
     :date-format="config.dateFormat || 'YYYY/MM/DD'"
     :time-format="config.timeFormat || 'HH:mm:ss'"
@@ -17,11 +18,11 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, watch } from 'vue';
+import { onUnmounted, ref, watch } from 'vue';
 
 import { TMagicDatePicker } from '@tmagic/design';
 
-import type { DaterangeConfig, FieldProps } from '../schema';
+import type { ChangeRecord, DaterangeConfig, FieldProps } from '../schema';
 import { datetimeFormatter } from '../utils/form';
 import { useAddField } from '../utils/useAddField';
 
@@ -40,7 +41,7 @@ const value = ref<(Date | string | undefined)[] | null>([]);
 
 if (props.model !== undefined) {
   if (names?.length) {
-    watch(
+    const unWatch = watch(
       [() => props.model[names[0]], () => props.model[names[1]]],
       ([start, end], [preStart, preEnd]) => {
         if (!value.value) {
@@ -56,8 +57,12 @@ if (props.model !== undefined) {
         immediate: true,
       },
     );
+
+    onUnmounted(() => {
+      unWatch();
+    });
   } else if (props.name && props.model[props.name]) {
-    watch(
+    const unWatch = watch(
       () => props.model[props.name],
       (start, preStart) => {
         const format = `${props.config.dateFormat || 'YYYY/MM/DD'} ${props.config.timeFormat || 'HH:mm:ss'}`;
@@ -71,32 +76,41 @@ if (props.model !== undefined) {
         immediate: true,
       },
     );
+    onUnmounted(() => {
+      unWatch();
+    });
   }
 }
 
-const setValue = (v: Date[] | Date) => {
-  names?.forEach((item, index) => {
-    if (!props.model) {
-      return;
-    }
-    if (Array.isArray(v)) {
-      props.model[item] = v[index];
-    } else {
-      props.model[item] = undefined;
-    }
-  });
-};
-
 const changeHandler = (v: Date[]) => {
   const value = v || [];
 
   if (props.name) {
     emit('change', value);
   } else {
-    if (names?.length) {
-      setValue(value);
+    if (props.config.names?.length) {
+      const newChangeRecords: ChangeRecord[] = [];
+      props.config.names.forEach((item, index) => {
+        if (!props.model) {
+          return;
+        }
+        if (Array.isArray(v)) {
+          newChangeRecords.push({
+            propPath: props.prop ? `${props.prop}.${item}` : item,
+            value: v[index],
+          });
+        } else {
+          newChangeRecords.push({
+            propPath: props.prop ? `${props.prop}.${item}` : item,
+            value: undefined,
+          });
+        }
+      });
+
+      emit('change', props.model, {
+        changeRecords: newChangeRecords,
+      });
     }
-    emit('change', props.model);
   }
 };
 </script>

package/src/fields/Link.vue

@@ -17,7 +17,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, ref } from 'vue';
+import { computed, inject, readonly, ref } from 'vue';
 
 import { TMagicButton } from '@tmagic/design';
 
@@ -54,7 +54,8 @@ const formConfig = computed(() => {
   if (typeof props.config.form === 'function') {
     return props.config.form(mForm, {
       model: props.model || {},
-      values: props.values || {},
+      values: mForm ? readonly(mForm.initValues) : null,
+      formValue: props.values || {},
     });
   }
   return props.config.form;

package/src/fields/Text.vue

@@ -41,7 +41,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, ref, shallowRef, watch } from 'vue';
+import { computed, inject, readonly, ref, shallowRef, watch } from 'vue';
 import type { Instance } from '@popperjs/core';
 import { createPopper } from '@popperjs/core';
 import { debounce } from 'lodash-es';
@@ -49,7 +49,7 @@ import { debounce } from 'lodash-es';
 import { TMagicButton, TMagicInput } from '@tmagic/design';
 import { isNumber } from '@tmagic/utils';
 
-import type { FieldProps, FormState, TextConfig } from '../schema';
+import type { ChangeRecord, ContainerChangeEventData, FieldProps, FormState, TextConfig } from '../schema';
 import { useAddField } from '../utils/useAddField';
 
 defineOptions({
@@ -59,7 +59,7 @@ defineOptions({
 const props = defineProps<FieldProps<TextConfig>>();
 
 const emit = defineEmits<{
-  change: [value: string];
+  change: [value: string, eventData?: ContainerChangeEventData];
   input: [value: string];
 }>();
 
@@ -121,10 +121,28 @@ const inputHandler = (v: string) => {
 const buttonClickHandler = () => {
   if (!appendConfig.value) return;
   if (typeof appendConfig.value.handler === 'function') {
+    const newChangeRecords: ChangeRecord[] = [];
+    const setModel = (key: string, value: any) => {
+      newChangeRecords.push({ propPath: props.prop.replace(`${props.name}`, key), value });
+    };
+
+    const setFormValue = (key: string, value: any) => {
+      newChangeRecords.push({ propPath: key, value });
+    };
+
     appendConfig.value.handler(mForm, {
       model: props.model,
-      values: mForm?.values,
+      values: mForm ? readonly(mForm.initValues) : null,
+      formValue: props.values || {},
+      setModel,
+      setFormValue,
     });
+
+    if (newChangeRecords.length > 0) {
+      emit('change', props.model[props.name], {
+        changeRecords: newChangeRecords,
+      });
+    }
   }
 };
 

package/src/table/Table.vue

@@ -1,7 +1,12 @@
 <template>
-  <div class="m-fields-table-wrap">
-    <teleport to="body" :disabled="!isFullscreen">
-      <div ref="mTable" class="m-fields-table" :class="{ 'm-fields-table-item-extra': config.itemExtra }">
+  <teleport to="body" :disabled="!isFullscreen">
+    <div
+      v-bind="$attrs"
+      class="m-fields-table-wrap"
+      :class="{ fixed: isFullscreen }"
+      :style="isFullscreen ? `z-index: ${nextZIndex()}` : ''"
+    >
+      <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>
         <TMagicTooltip content="拖拽可排序" placement="left-start" :disabled="config.dropSort !== true">
           <TMagicTable
@@ -24,15 +29,10 @@
         <slot></slot>
 
         <div style="display: flex; justify-content: space-between; margin: 10px 0">
-          <TMagicButton v-if="addable" size="small" type="primary" :disabled="disabled" plain @click="newHandler()"
-            >新增一行</TMagicButton
-          >
-
           <div style="display: flex">
             <TMagicButton
               :icon="Grid"
               size="small"
-              type="primary"
               @click="toggleMode"
               v-if="enableToggleMode && config.enableToggleMode !== false && !isFullscreen"
               >展开配置</TMagicButton
@@ -40,7 +40,6 @@
             <TMagicButton
               :icon="FullScreen"
               size="small"
-              type="primary"
               @click="toggleFullscreen"
               v-if="config.enableFullscreen !== false"
             >
@@ -61,6 +60,9 @@
               >清空</TMagicButton
             >
           </div>
+          <TMagicButton v-if="addable" size="small" type="primary" :disabled="disabled" plain @click="newHandler()"
+            >新增一行</TMagicButton
+          >
         </div>
 
         <div class="bottom" style="text-align: right" v-if="config.pagination">
@@ -77,15 +79,15 @@
           </TMagicPagination>
         </div>
       </div>
-    </teleport>
-  </div>
+    </div>
+  </teleport>
 </template>
 
 <script setup lang="ts">
 import { computed, ref, useTemplateRef } from 'vue';
 import { FullScreen, Grid } from '@element-plus/icons-vue';
 
-import { TMagicButton, TMagicPagination, TMagicTable, TMagicTooltip, TMagicUpload } from '@tmagic/design';
+import { TMagicButton, TMagicPagination, TMagicTable, TMagicTooltip, TMagicUpload, useZIndex } from '@tmagic/design';
 
 import type { SortProp } from '../schema';
 import { sortChange } from '../utils/form';
@@ -122,6 +124,8 @@ const { pageSize, currentPage, paginationData, handleSizeChange, handleCurrentCh
   modelName,
 );
 
+const { nextZIndex } = useZIndex();
+
 const { addable, newHandler } = useAdd(props, emit);
 const { columns } = useTableColumns(props, emit, currentPage, pageSize, modelName);
 useSortable(props, emit, tMagicTableRef, modelName);

package/src/table/useAdd.ts

@@ -78,6 +78,7 @@ export const useAdd = (
       if (typeof props.config.defaultAdd === 'function') {
         inputs = await props.config.defaultAdd(mForm, {
           model: props.model[modelName],
+          prop: props.prop,
           formValue: mForm?.values,
         });
       } else if (props.config.defaultAdd) {

package/src/table/useFullscreen.ts

@@ -1,22 +1,12 @@
-import { ref, useTemplateRef } from 'vue';
-
-import { useZIndex } from '@tmagic/design';
+import { ref } from 'vue';
 
 export const useFullscreen = () => {
   const isFullscreen = ref(false);
-  const mTableEl = useTemplateRef<HTMLDivElement>('mTable');
-
-  const { nextZIndex } = useZIndex();
 
   const toggleFullscreen = () => {
-    if (!mTableEl.value) return;
-
     if (isFullscreen.value) {
-      mTableEl.value.classList.remove('fixed');
       isFullscreen.value = false;
     } else {
-      mTableEl.value.classList.add('fixed');
-      mTableEl.value.style.zIndex = `${nextZIndex()}`;
       isFullscreen.value = true;
     }
   };

package/src/theme/group-list.scss

@@ -20,4 +20,19 @@
       border-bottom: 0;
     }
   }
+
+  .tmagic-design-card {
+    .el-card__header {
+      padding: 5px 20px;
+    }
+    .t-card__header {
+      padding: 5px 0;
+    }
+  }
+
+  .m-fields-group-list-footer {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 10px;
+  }
 }

package/src/theme/table.scss

@@ -1,9 +1,6 @@
 .m-fields-table-wrap {
   width: 100%;
-}
 
-.m-fields-table {
-  width: 100%;
   &.fixed {
     position: fixed;
     height: 100%;
@@ -14,6 +11,8 @@
     bottom: 0;
     z-index: 100;
     background: rgba(0, 0, 0, 0.5);
+    align-items: center;
+    display: flex;
 
     & > .el-form-item__content {
       z-index: 101;
@@ -25,6 +24,10 @@
       width: 95vw !important;
     }
   }
+}
+
+.m-fields-table {
+  width: 100%;
 
   th {
     background-color: #f2f2f2 !important;