JDictSelectTag 目前选择显示有问题，option选择选项选择后不会正确显示到结果上 #226

src/components/Form/src/jeecg/components/JAreaLinkage.vue

@@ -58,8 +58,7 @@
       }
 
       function handleChange(array, ...args) {
-        emitData.value = args;
+        // emitData.value = args;
-        console.info(emitData);
         //update-begin-author:taoyan date:2022-6-27 for: VUEN-1424【vue3】树表、单表、jvxe、erp 、内嵌子表省市县 选择不上
         // 上面改的v-model:value导致选中数据没有显示
         state.value = array;

src/components/Form/src/jeecg/components/JDictSelectTag.vue

@@ -1,5 +1,5 @@
 <template>
-  <a-radio-group v-if="compType === CompTypeEnum.Radio" v-bind="attrs" v-model:value="state" @change="handleChange">
+  <a-radio-group v-if="compType === CompTypeEnum.Radio" v-bind="attrs" v-model:value="state" @change="handleChangeRadio">
     <template v-for="item in dictOptions" :key="`${item.value}`">
       <a-radio :value="item.value">
         {{ item.label }}
@@ -7,7 +7,13 @@
     </template>
   </a-radio-group>
 
-  <a-radio-group v-else-if="compType === CompTypeEnum.RadioButton" v-bind="attrs" v-model:value="state" buttonStyle="solid" @change="handleChange">
+  <a-radio-group
+    v-else-if="compType === CompTypeEnum.RadioButton"
+    v-bind="attrs"
+    v-model:value="state"
+    buttonStyle="solid"
+    @change="handleChangeRadio"
+  >
     <template v-for="item in dictOptions" :key="`${item.value}`">
       <a-radio-button :value="item.value">
         {{ item.label }}
@@ -44,7 +50,6 @@
 </template>
 <script lang="ts">
   import { defineComponent, PropType, ref, reactive, watchEffect, computed, unref, watch, onMounted, nextTick } from 'vue';
-  import { Form } from 'ant-design-vue';
   import { propTypes } from '/@/utils/propTypes';
   import { useAttrs } from '/@/hooks/core/useAttrs';
   import { initDictOptions } from '/@/utils/dict';
@@ -78,11 +83,9 @@
     },
     emits: ['options-change', 'change'],
     setup(props, { emit, refs }) {
-      const { onFieldChange } = Form.useInjectFormItemContext();
-      const emitData = ref<any[]>([]);
       const dictOptions = ref<any[]>([]);
       const attrs = useAttrs();
-      const [state] = useRuleFormItem(props, 'value', 'change', emitData);
+      const [state, , , formItemContext] = useRuleFormItem(props, 'value', 'change');
       const getBindValue = Object.assign({}, unref(props), unref(attrs));
       // 是否正在加载回显数据
       const loadingEcho = ref<boolean>(false);
@@ -118,7 +121,7 @@
         () => {
           if (props.value === '') {
             emit('change', '');
-            nextTick(() => onFieldChange());
+            nextTick(() => formItemContext.onFieldChange());
           }
         }
       );
@@ -142,8 +145,26 @@
       }
 
       function handleChange(e) {
-        emitData.value = [e?.target?.value || e];
+        const { mode } = unref<Recordable>(getBindValue);
-        nextTick(() => onFieldChange());
+        // 兼容多选模式
+        if (mode === 'multiple') {
+          state.value = e?.target?.value ?? e;
+        } else {
+          state.value = [e?.target?.value ?? e];
+        }
+        // 过滤掉空值
+        if (state.value == null || state.value === '') {
+          state.value = [];
+        }
+        if (Array.isArray(state.value)) {
+          state.value = state.value.filter((item) => item != null && item !== '');
+        }
+        // nextTick(() => formItemContext.onFieldChange());
+      }
+
+      /** 单选radio的值变化事件 */
+      function handleChangeRadio(e) {
+        state.value = e?.target?.value ?? e;
       }
 
       /** 用于搜索下拉框中的内容 */
@@ -166,6 +187,7 @@
         dictOptions,
         CompTypeEnum,
         handleChange,
+        handleChangeRadio,
         handleFilterOption,
       };
     },

src/components/Form/src/jeecg/components/JImageUpload.vue

@@ -189,7 +189,7 @@
             handleDelete(file);
           }
         }
-        emitData.value = fileUrls.join(',');
+        // emitData.value = fileUrls.join(',');
         state.value = fileUrls.join(',');
         emit('update:value', fileUrls.join(','));
       }

src/hooks/component/useFormItem.ts

@@ -1,6 +1,7 @@
 import type { UnwrapRef, Ref, WritableComputedRef, DeepReadonly } from 'vue';
 import { reactive, readonly, computed, getCurrentInstance, watchEffect, unref, nextTick, toRaw } from 'vue';
-import {Form} from "ant-design-vue";
+import { Form } from 'ant-design-vue';
+import { FormItemContext } from 'ant-design-vue/es/form/FormItemContext';
 
 import { isEqual } from 'lodash-es';
 export function useRuleFormItem<T extends Recordable, K extends keyof T, V = UnwrapRef<T[K]>>(
@@ -8,7 +9,7 @@ export function useRuleFormItem<T extends Recordable, K extends keyof T, V = Unw
   key?: K,
   changeEvent?,
   emitData?: Ref<any[] | undefined>
-): [WritableComputedRef<V>, (val: V) => void, DeepReadonly<V>];
+): [WritableComputedRef<V>, (val: V) => void, DeepReadonly<V>, FormItemContext];
 export function useRuleFormItem<T extends Recordable>(props: T, key: keyof T = 'value', changeEvent = 'change', emitData?: Ref<any[]>) {
   const instance = getCurrentInstance();
   const emit = instance?.emit;
@@ -46,5 +47,5 @@ export function useRuleFormItem<T extends Recordable>(props: T, key: keyof T = '
     },
   });
 
-  return [state, setState, defaultState];
+  return [state, setState, defaultState, formItemContext];
 }