@tmagic/form 1.2.8 → 1.2.10

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.2.8",
+  "version": "1.2.10",
   "name": "@tmagic/form",
   "type": "module",
   "sideEffects": [
@@ -36,8 +36,8 @@
   },
   "dependencies": {
     "@element-plus/icons-vue": "^2.0.9",
-    "@tmagic/design": "1.2.8",
-    "@tmagic/utils": "1.2.8",
+    "@tmagic/design": "1.2.10",
+    "@tmagic/utils": "1.2.10",
     "lodash-es": "^4.17.21",
     "sortablejs": "^1.14.0",
     "vue": "^3.2.37"

package/src/containers/Container.vue

@@ -48,6 +48,7 @@
             :size="size"
             :is="tagName"
             :model="model"
+            :last-values="lastValues"
             :config="config"
             :name="name"
             :disabled="disabled"
@@ -66,6 +67,7 @@
           :size="size"
           :is="tagName"
           :model="model"
+          :last-values="lastValues"
           :config="config"
           :name="name"
           :disabled="disabled"
@@ -193,7 +195,7 @@
           v-for="item in items"
           :key="key(item)"
           :model="name || name === 0 ? model[name] : model"
-          :last-values="name || name === 0 ? lastValues[name] : lastValues"
+          :last-values="name || name === 0 ? lastValues[name] || {} : lastValues"
           :is-compare="isCompare"
           :config="item"
           :size="size"
@@ -258,7 +260,6 @@ const mForm = inject<FormState | undefined>('mForm');
 const expand = ref(false);
 
 const name = computed(() => props.config.name || '');
-
 // 是否展示两个版本的对比内容
 const showDiff = computed(() => {
   if (!props.isCompare) return false;

package/src/containers/Tabs.vue

@@ -15,11 +15,10 @@
         :is="uiComponent.component"
         :key="tab[mForm?.keyProp || '__key'] ?? tabIndex"
         :name="filter(tab.status) || tabIndex.toString()"
-        :label="filter(tab.title)"
         :lazy="tab.lazy || false"
       >
         <template #label>
-          <span class="custom-tabs-label">
+          <span>
             {{ filter(tab.title)
             }}<el-badge :hidden="!diffCount[tabIndex]" :value="diffCount[tabIndex]" class="diff-count-badge"></el-badge>
           </span>
@@ -29,8 +28,26 @@
           :key="item[mForm?.keyProp || '__key']"
           :config="item"
           :disabled="disabled"
-          :model="getValues(model, tabIndex, tab)"
-          :last-values="getValues(lastValues, tabIndex, tab)"
+          :model="
+            config.dynamic
+              ? (name ? model[name] : model)[tabIndex]
+              : tab.name
+              ? (name ? model[name] : model)[tab.name]
+              : name
+              ? model[name]
+              : model
+          "
+          :last-values="
+            isEmpty(lastValues)
+              ? {}
+              : config.dynamic
+              ? (name ? lastValues[name] : lastValues)[tabIndex]
+              : tab.name
+              ? (name ? lastValues[name] : lastValues)[tab.name]
+              : name
+              ? lastValues[name]
+              : lastValues
+          "
           :is-compare="isCompare"
           :prop="config.dynamic ? `${prop}${prop ? '.' : ''}${String(tabIndex)}` : prop"
           :size="size"
@@ -46,7 +63,7 @@
 
 <script setup lang="ts" name="MFormTabs">
 import { computed, inject, ref, watchEffect } from 'vue';
-import { cloneDeep } from 'lodash-es';
+import { cloneDeep, isEmpty } from 'lodash-es';
 
 import { getConfig, TMagicTabs } from '@tmagic/design';
 
@@ -185,18 +202,6 @@ const changeHandler = () => {
   }
 };
 
-const getValues = (model: any, tabIndex: number, tab: any) => {
-  const tabName = props.config.dynamic ? (model[props?.name] || model)[tabIndex] : tab.name;
-  let propName = props.name;
-  if (tabName) {
-    propName = (model[props?.name] || model)[tab.name];
-  }
-  if (propName) {
-    return model[props.name];
-  }
-  return model;
-};
-
 // 在tabs组件中收集事件触发次数，即该tab下的差异数
 const onAddDiffCount = (tabIndex: number) => {
   if (!diffCount.value[tabIndex]) {

package/src/theme/tabs.scss

@@ -1,15 +1,13 @@
 .magic-form-dynamic-tab {
   .el-tabs__header.is-top {
-    display: flex;
-    flex-direction: row-reverse;
     padding-right: 8px;
     .el-tabs__new-tab {
       margin-right: auto;
-      min-width: 36px;
+      min-width: 50px;
       outline: none;
       border-color: #409eff;
       color: #409eff;
-      width: 36px;
+      width: 10px;
       &::before {
         content: "添加";
       }