@tmagic/form 1.2.6 → 1.2.7

package/package.json

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

package/src/Form.vue

@@ -15,6 +15,8 @@
         :key="item[keyProp] ?? index"
         :config="item"
         :model="values"
+        :last-values="lastValuesProcessed"
+        :is-compare="isCompare"
         :label-width="item.labelWidth || labelWidth"
         :step-active="stepActive"
         :size="size"
@@ -26,8 +28,8 @@
 
 <script setup lang="ts" name="MForm">
 import { provide, reactive, ref, toRaw, watch, watchEffect } from 'vue';
+import { isEqual } from 'lodash-es';
 import cloneDeep from 'lodash-es/cloneDeep';
-import isEqual from 'lodash-es/isEqual';
 
 import { TMagicForm } from '@tmagic/design';
 
@@ -38,8 +40,14 @@ import type { FormConfig, FormState, FormValue, ValidateError } from './schema';
 
 const props = withDefaults(
   defineProps<{
+    /** 表单配置 */
     config: FormConfig;
+    /** 表单值 */
     initValues: Object;
+    /** 需对比的值（开启对比模式时传入） */
+    lastValues?: Object;
+    /** 是否开启对比模式 */
+    isCompare?: boolean;
     parentValues?: Object;
     labelWidth?: string;
     disabled?: boolean;
@@ -54,6 +62,8 @@ const props = withDefaults(
   {
     config: () => [],
     initValues: () => ({}),
+    lastValues: () => ({}),
+    isCompare: false,
     parentValues: () => ({}),
     labelWidth: '200px',
     disabled: false,
@@ -70,6 +80,7 @@ const emit = defineEmits(['change', 'field-input', 'field-change']);
 const tMagicForm = ref<InstanceType<typeof TMagicForm>>();
 const initialized = ref(false);
 const values = ref<FormValue>({});
+const lastValuesProcessed = ref<FormValue>({});
 const fields = new Map<string, any>();
 
 const requestFuc = getConfig('request') as Function;
@@ -79,8 +90,11 @@ const formState: FormState = reactive<FormState>({
   popperClass: props.popperClass,
   config: props.config,
   initValues: props.initValues,
+  isCompare: props.isCompare,
+  lastValues: props.lastValues,
   parentValues: props.parentValues,
   values,
+  lastValuesProcessed,
   $emit: emit as (event: string, ...args: any[]) => void,
   fields,
   setField: (prop: string, field: any) => fields.set(prop, field),
@@ -98,6 +112,8 @@ const formState: FormState = reactive<FormState>({
 
 watchEffect(() => {
   formState.initValues = props.initValues;
+  formState.lastValues = props.lastValues;
+  formState.isCompare = props.isCompare;
   formState.config = props.config;
   formState.keyProp = props.keyProp;
   formState.popperClass = props.popperClass;
@@ -118,8 +134,20 @@ watch(
       config: props.config,
     }).then((value) => {
       values.value = value;
-      initialized.value = true;
+      // 非对比模式，初始化完成
+      initialized.value = !props.isCompare;
     });
+
+    if (props.isCompare) {
+      // 对比模式下初始化待对比的表单值
+      initValue(formState, {
+        initValues: props.lastValues,
+        config: props.config,
+      }).then((value) => {
+        lastValuesProcessed.value = value;
+        initialized.value = true;
+      });
+    }
   },
   { immediate: true },
 );
@@ -130,6 +158,7 @@ const changeHandler = () => {
 
 defineExpose({
   values,
+  lastValuesProcessed,
   formState,
   initialized,
 

package/src/containers/Col.vue

@@ -2,6 +2,8 @@
   <TMagicCol v-show="display && config.type !== 'hidden'" :span="span">
     <Container
       :model="model"
+      :lastValues="lastValues"
+      :is-compare="isCompare"
       :config="config"
       :prop="prop"
       :label-width="config.labelWidth || labelWidth"
@@ -9,6 +11,7 @@
       :size="size"
       :disabled="disabled"
       @change="changeHandler"
+      @add-diff-count="onAddDiffCount"
     ></Container>
   </TMagicCol>
 </template>
@@ -25,6 +28,8 @@ import Container from './Container.vue';
 
 const props = defineProps<{
   model: any;
+  lastValues?: any;
+  isCompare?: boolean;
   config: ChildConfig;
   labelWidth?: string;
   expandMore?: boolean;
@@ -34,9 +39,10 @@ const props = defineProps<{
   disabled?: boolean;
 }>();
 
-const emit = defineEmits(['change']);
+const emit = defineEmits(['change', 'addDiffCount']);
 
 const mForm = inject<FormState | undefined>('mForm');
 const display = computed(() => displayFunction(mForm, props.config.display, props));
 const changeHandler = () => emit('change', props.model);
+const onAddDiffCount = () => emit('addDiffCount');
 </script>

package/src/containers/Container.vue

@@ -20,6 +20,8 @@
       :size="size"
       :is="tagName"
       :model="model"
+      :last-values="lastValues"
+      :is-compare="isCompare"
       :config="config"
       :disabled="disabled"
       :name="name"
@@ -28,15 +30,120 @@
       :expand-more="expand"
       :label-width="itemLabelWidth"
       @change="onChangeHandler"
+      @addDiffCount="onAddDiffCount"
     ></component>
 
-    <template v-else-if="type && display">
+    <template v-else-if="type && display && !showDiff">
       <TMagicFormItem
         :style="config.tip ? 'flex: 1' : ''"
         :class="{ hidden: `${itemLabelWidth}` === '0' || !config.text }"
         :prop="itemProp"
         :label-width="itemLabelWidth"
         :rules="rule"
+      >
+        <template #label><span v-html="type === 'checkbox' ? '' : config.text"></span></template>
+        <TMagicTooltip v-if="tooltip">
+          <component
+            :key="key(config)"
+            :size="size"
+            :is="tagName"
+            :model="model"
+            :config="config"
+            :name="name"
+            :disabled="disabled"
+            :prop="itemProp"
+            @change="onChangeHandler"
+            @addDiffCount="onAddDiffCount"
+          ></component>
+          <template #content>
+            <div v-html="tooltip"></div>
+          </template>
+        </TMagicTooltip>
+
+        <component
+          v-else
+          :key="key(config)"
+          :size="size"
+          :is="tagName"
+          :model="model"
+          :config="config"
+          :name="name"
+          :disabled="disabled"
+          :prop="itemProp"
+          @change="onChangeHandler"
+          @addDiffCount="onAddDiffCount"
+        ></component>
+
+        <div v-if="extra" v-html="extra" class="m-form-tip"></div>
+      </TMagicFormItem>
+
+      <TMagicTooltip v-if="config.tip" placement="left">
+        <TMagicIcon style="line-height: 40px; margin-left: 5px"><warning-filled /></TMagicIcon>
+        <template #content>
+          <div v-html="config.tip"></div>
+        </template>
+      </TMagicTooltip>
+    </template>
+
+    <!-- 对比 -->
+    <template v-else-if="type && display && showDiff">
+      <!-- 上次内容 -->
+      <TMagicFormItem
+        :style="config.tip ? 'flex: 1' : ''"
+        :class="{ hidden: `${itemLabelWidth}` === '0' || !config.text }"
+        :prop="itemProp"
+        :label-width="itemLabelWidth"
+        :rules="rule"
+        style="background: #f7dadd"
+      >
+        <template #label><span v-html="type === 'checkbox' ? '' : config.text"></span></template>
+        <TMagicTooltip v-if="tooltip">
+          <component
+            :key="key(config)"
+            :size="size"
+            :is="tagName"
+            :model="lastValues"
+            :config="config"
+            :name="name"
+            :disabled="disabled"
+            :prop="itemProp"
+            @change="onChangeHandler"
+          ></component>
+          <template #content>
+            <div v-html="tooltip"></div>
+          </template>
+        </TMagicTooltip>
+
+        <component
+          v-else
+          :key="key(config)"
+          :size="size"
+          :is="tagName"
+          :model="lastValues"
+          :config="config"
+          :name="name"
+          :disabled="disabled"
+          :prop="itemProp"
+          @change="onChangeHandler"
+        ></component>
+
+        <div v-if="extra" v-html="extra" class="m-form-tip"></div>
+      </TMagicFormItem>
+
+      <TMagicTooltip v-if="config.tip" placement="left">
+        <TMagicIcon style="line-height: 40px; margin-left: 5px"><warning-filled /></TMagicIcon>
+        <template #content>
+          <div v-html="config.tip"></div>
+        </template>
+      </TMagicTooltip>
+      <!-- 当前内容 -->
+      <TMagicFormItem
+        :style="config.tip ? 'flex: 1' : ''"
+        :class="{ hidden: `${itemLabelWidth}` === '0' || !config.text }"
+        :prop="itemProp"
+        :label-width="itemLabelWidth"
+        :rules="rule"
+        style="background: #def7da"
       >
         <template #label><span v-html="type === 'checkbox' ? '' : config.text"></span></template>
         <TMagicTooltip v-if="tooltip">
@@ -86,6 +193,8 @@
           v-for="item in items"
           :key="key(item)"
           :model="name || name === 0 ? model[name] : model"
+          :last-values="name || name === 0 ? lastValues[name] : lastValues"
+          :is-compare="isCompare"
           :config="item"
           :size="size"
           :disabled="disabled"
@@ -94,6 +203,7 @@
           :label-width="itemLabelWidth"
           :prop="itemProp"
           @change="onChangeHandler"
+          @addDiffCount="onAddDiffCount"
         ></Container>
       </template>
     </template>
@@ -107,8 +217,9 @@
 </template>
 
 <script setup lang="ts" name="MFormContainer">
-import { computed, inject, ref, resolveComponent, watchEffect } from 'vue';
+import { computed, inject, ref, resolveComponent, watch, watchEffect } from 'vue';
 import { WarningFilled } from '@element-plus/icons-vue';
+import { isEqual } from 'lodash-es';
 
 import { TMagicButton, TMagicFormItem, TMagicIcon, TMagicTooltip } from '@tmagic/design';
 
@@ -117,7 +228,10 @@ import { display as displayFunction, filterFunction, getRules } from '../utils/f
 
 const props = withDefaults(
   defineProps<{
+    /** 表单值 */
     model: FormValue;
+    /** 需对比的值（开启对比模式时传入） */
+    lastValues?: FormValue;
     config: ChildConfig;
     prop?: string;
     disabled?: boolean;
@@ -125,15 +239,19 @@ const props = withDefaults(
     expandMore?: boolean;
     stepActive?: string | number;
     size?: string;
+    /** 是否开启对比模式 */
+    isCompare?: boolean;
   }>(),
   {
     prop: '',
     size: 'small',
     expandMore: false,
+    lastValues: () => ({}),
+    isCompare: false,
   },
 );
 
-const emit = defineEmits(['change']);
+const emit = defineEmits(['change', 'addDiffCount']);
 
 const mForm = inject<FormState | undefined>('mForm');
 
@@ -141,6 +259,14 @@ const expand = ref(false);
 
 const name = computed(() => props.config.name || '');
 
+// 是否展示两个版本的对比内容
+const showDiff = computed(() => {
+  if (!props.isCompare) return false;
+  const curValue = name.value ? props.model[name.value] : props.model;
+  const lastValue = name.value ? props.lastValues[name.value] : props.lastValues;
+  return !isEqual(curValue, lastValue);
+});
+
 const items = computed(() => (props.config as ContainerCommonConfig).items);
 
 const itemProp = computed(() => {
@@ -196,6 +322,21 @@ watchEffect(() => {
   expand.value = props.expandMore;
 });
 
+// 监听是否展示对比内容，如果出现差异项则触发差异数计数事件
+watch(
+  showDiff,
+  (showDiff) => {
+    if (type.value === 'hidden') return;
+    if (items.value && !props.config.text && type.value && display.value) return;
+    if (display.value && showDiff && type.value) {
+      emit('addDiffCount');
+    }
+  },
+  {
+    immediate: true,
+  },
+);
+
 const expandHandler = () => (expand.value = !expand.value);
 
 const key = (config: any) => config[mForm?.keyProps];
@@ -236,6 +377,9 @@ const trimHandler = (trim: any, value: FormValue | number | string) => {
   }
 };
 
+// 继续抛出给更高层级的组件
+const onAddDiffCount = () => emit('addDiffCount');
+
 const onChangeHandler = async function (v: FormValue, key?: string) {
   const { filter, onChange, trim, name, dynamicKey } = props.config as any;
   let value: FormValue | number | string = v;

package/src/containers/Fieldset.vue

@@ -24,6 +24,8 @@
           v-for="(item, index) in config.items"
           :key="key(item, index)"
           :model="name ? model[name] : model"
+          :lastValues="name ? lastValues[name] : lastValues"
+          :is-compare="isCompare"
           :rules="name ? rules[name] : []"
           :config="item"
           :prop="prop"
@@ -31,6 +33,7 @@
           :labelWidth="lWidth"
           :size="size"
           @change="change"
+          @add-diff-count="onAddDiffCount()"
         ></Container>
       </div>
 
@@ -42,6 +45,8 @@
         v-for="(item, index) in config.items"
         :key="key(item, index)"
         :model="name ? model[name] : model"
+        :lastValues="name ? lastValues[name] : lastValues"
+        :is-compare="isCompare"
         :rules="name ? rules[name] : []"
         :config="item"
         :prop="prop"
@@ -49,6 +54,7 @@
         :size="size"
         :disabled="disabled"
         @change="change"
+        @addDiffCount="onAddDiffCount()"
       ></Container>
     </template>
   </fieldset>
@@ -69,6 +75,8 @@ const props = withDefaults(
     prop: string;
     size?: string;
     model: Record<string, any>;
+    lastValues?: Record<string, any>;
+    isCompare?: boolean;
     config: FieldsetConfig;
     rules?: any;
     disabled?: boolean;
@@ -76,10 +84,12 @@ const props = withDefaults(
   {
     rules: {},
     prop: '',
+    lastValues: () => ({}),
+    isCompare: false,
   },
 );
 
-const emit = defineEmits(['change']);
+const emit = defineEmits(['change', 'addDiffCount']);
 
 const mForm = inject<FormState | undefined>('mForm');
 
@@ -113,4 +123,5 @@ if (props.config.checkbox && name.value) {
     },
   );
 }
+const onAddDiffCount = () => emit('addDiffCount');
 </script>

package/src/containers/GroupList.vue

@@ -10,6 +10,8 @@
       v-for="(item, index) in model[name]"
       :key="index"
       :model="item"
+      :lastValues="getLastValues(lastValues[name], index)"
+      :is-compare="isCompare"
       :config="config"
       :prop="prop"
       :index="index"
@@ -20,6 +22,7 @@
       @remove-item="removeHandler"
       @swap-item="swapHandler"
       @change="changeHandler"
+      @addDiffCount="onAddDiffCount()"
     ></MFieldsGroupListItem>
 
     <TMagicButton @click="addHandler" size="small" :disabled="disabled" v-if="addable">添加组</TMagicButton>
@@ -41,6 +44,8 @@ import MFieldsGroupListItem from './GroupListItem.vue';
 
 const props = defineProps<{
   model: any;
+  lastValues?: any;
+  isCompare?: boolean;
   config: GroupListConfig;
   name: string;
   labelWidth?: string;
@@ -49,7 +54,7 @@ const props = defineProps<{
   disabled?: boolean;
 }>();
 
-const emit = defineEmits(['change']);
+const emit = defineEmits(['change', 'addDiffCount']);
 
 const mForm = inject<FormState | undefined>('mForm');
 
@@ -123,4 +128,7 @@ const toggleMode = () => {
       text: null,
     }))) as any;
 };
+const onAddDiffCount = () => emit('addDiffCount');
+
+const getLastValues = (item: any, index: number) => item?.[index] || {};
 </script>

package/src/containers/GroupListItem.vue

@@ -32,11 +32,14 @@
       v-if="expand"
       :config="rowConfig"
       :model="model"
+      :lastValues="lastValues"
+      :is-compare="isCompare"
       :labelWidth="labelWidth"
       :prop="`${prop}${prop ? '.' : ''}${String(index)}`"
       :size="size"
       :disabled="disabled"
       @change="changeHandler"
+      @addDiffCount="onAddDiffCount()"
     ></Container>
   </div>
 </template>
@@ -54,6 +57,8 @@ import Container from './Container.vue';
 
 const props = defineProps<{
   model: any;
+  lastValues: any;
+  isCompare?: boolean;
   groupModel: any[];
   config: GroupListConfig;
   labelWidth?: string;
@@ -63,7 +68,7 @@ const props = defineProps<{
   disabled?: boolean;
 }>();
 
-const emit = defineEmits(['swap-item', 'remove-item', 'change']);
+const emit = defineEmits(['swap-item', 'remove-item', 'change', 'addDiffCount']);
 
 const mForm = inject<FormState | undefined>('mForm');
 const expand = ref(false);
@@ -122,4 +127,5 @@ const movable = () => {
   }
   return movable;
 };
+const onAddDiffCount = () => emit('addDiffCount');
 </script>

package/src/containers/Panel.vue

@@ -23,11 +23,14 @@
             :key="item[mForm?.keyProp || '__key'] ?? index"
             :config="item"
             :model="name ? model[name] : model"
+            :lastValues="name ? lastValues[name] : lastValues"
+            :is-compare="isCompare"
             :prop="prop"
             :size="size"
             :disabled="disabled"
             :label-width="config.labelWidth || labelWidth"
             @change="changeHandler"
+            @addDiffCount="onAddDiffCount()"
           ></Container>
         </div>
 
@@ -40,11 +43,14 @@
           :key="item[mForm?.keyProp || '__key'] ?? index"
           :config="item"
           :model="name ? model[name] : model"
+          :lastValues="name ? lastValues[name] : lastValues"
+          :is-compare="isCompare"
           :prop="prop"
           :size="size"
           :disabled="disabled"
           :label-width="config.labelWidth || labelWidth"
           @change="changeHandler"
+          @addDiffCount="onAddDiffCount()"
         ></Container>
       </template>
     </div>
@@ -64,6 +70,8 @@ import Container from './Container.vue';
 
 const props = defineProps<{
   model: any;
+  lastValues?: any;
+  isCompare?: boolean;
   config: PanelConfig;
   name: string;
   labelWidth?: string;
@@ -72,7 +80,7 @@ const props = defineProps<{
   disabled?: boolean;
 }>();
 
-const emit = defineEmits(['change']);
+const emit = defineEmits(['change', 'addDiffCount']);
 
 const mForm = inject<FormState | undefined>('mForm');
 
@@ -83,4 +91,5 @@ const items = computed(() => props.config.items);
 const filter = (config: any) => filterFunction(mForm, config, props);
 
 const changeHandler = () => emit('change', props.model);
+const onAddDiffCount = () => emit('addDiffCount');
 </script>

package/src/containers/Row.vue

@@ -8,10 +8,13 @@
       :labelWidth="config.labelWidth || labelWidth"
       :expandMore="expandMore"
       :model="name ? model[name] : model"
+      :lastValues="name ? lastValues[name] : lastValues"
+      :is-compare="isCompare"
       :prop="prop"
       :size="size"
       :disabled="disabled"
       @change="changeHandler"
+      @add-diff-count="onAddDiffCount"
     />
   </TMagicRow>
 </template>
@@ -27,6 +30,8 @@ import Col from './Col.vue';
 
 const props = defineProps<{
   model: any;
+  lastValues?: any;
+  isCompare?: boolean;
   config: RowConfig;
   name: string;
   labelWidth?: string;
@@ -36,9 +41,10 @@ const props = defineProps<{
   disabled?: boolean;
 }>();
 
-const emit = defineEmits(['change']);
+const emit = defineEmits(['change', 'addDiffCount']);
 
 const mForm = inject<FormState | undefined>('mForm');
 
 const changeHandler = () => emit('change', props.name ? props.model[props.name] : props.model);
+const onAddDiffCount = () => emit('addDiffCount');
 </script>

package/src/containers/Step.vue

@@ -18,11 +18,14 @@
           :key="item[mForm?.keyProp || '__key']"
           :config="item"
           :model="step.name ? model[step.name] : model"
+          :lastValues="step.name ? lastValues[step.name] : lastValues"
+          :is-compare="isCompare"
           :prop="`${step.name}`"
           :size="size"
           :disabled="disabled"
           :label-width="config.labelWidth || labelWidth"
           @change="changeHandler"
+          @addDiffCount="onAddDiffCount()"
         ></Container>
       </template>
     </template>
@@ -41,6 +44,8 @@ import Container from './Container.vue';
 const props = withDefaults(
   defineProps<{
     model: any;
+    lastValues?: any;
+    isCompare?: boolean;
     config: StepConfig;
     stepActive?: number;
     labelWidth?: string;
@@ -52,7 +57,7 @@ const props = withDefaults(
   },
 );
 
-const emit = defineEmits(['change']);
+const emit = defineEmits(['change', 'addDiffCount']);
 
 const mForm = inject<FormState | undefined>('mForm');
 const active = ref(1);
@@ -69,4 +74,5 @@ const stepClick = (index: number) => {
 const changeHandler = () => {
   emit('change', props.model);
 };
+const onAddDiffCount = () => emit('addDiffCount');
 </script>