From 1072347d40b800d616b3369eb1e5a073d623d7f7 Mon Sep 17 00:00:00 2001
From: zhangdaiscott <zhangdaiscott@163.com>
Date: Wed, 9 Nov 2022 11:50:21 +0800
Subject: [PATCH] =?UTF-8?q?JDictSelectTag=20=E7=9B=AE=E5=89=8D=E9=80=89?=
 =?UTF-8?q?=E6=8B=A9=E6=98=BE=E7=A4=BA=E6=9C=89=E9=97=AE=E9=A2=98=EF=BC=8C?=
 =?UTF-8?q?option=E9=80=89=E6=8B=A9=E9=80=89=E9=A1=B9=E9=80=89=E6=8B=A9?=
 =?UTF-8?q?=E5=90=8E=E4=B8=8D=E4=BC=9A=E6=AD=A3=E7=A1=AE=E6=98=BE=E7=A4=BA?=
 =?UTF-8?q?=E5=88=B0=E7=BB=93=E6=9E=9C=E4=B8=8A=20#226?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/jeecg/components/JAreaLinkage.vue     |  3 +-
 .../src/jeecg/components/JDictSelectTag.vue   | 40 ++++++++++++++-----
 .../src/jeecg/components/JImageUpload.vue     |  2 +-
 src/hooks/component/useFormItem.ts            |  7 ++--
 4 files changed, 37 insertions(+), 15 deletions(-)

diff --git a/src/components/Form/src/jeecg/components/JAreaLinkage.vue b/src/components/Form/src/jeecg/components/JAreaLinkage.vue
index 48ee309..5fbeffb 100644
--- a/src/components/Form/src/jeecg/components/JAreaLinkage.vue
+++ b/src/components/Form/src/jeecg/components/JAreaLinkage.vue
@@ -58,8 +58,7 @@
       }
 
       function handleChange(array, ...args) {
-        emitData.value = args;
-        console.info(emitData);
+        // emitData.value = args;
         //update-begin-author:taoyan date:2022-6-27 for: VUEN-1424【vue3】树表、单表、jvxe、erp 、内嵌子表省市县 选择不上
         // 上面改的v-model:value导致选中数据没有显示
         state.value = array;
diff --git a/src/components/Form/src/jeecg/components/JDictSelectTag.vue b/src/components/Form/src/jeecg/components/JDictSelectTag.vue
index f423a40..857f77a 100644
--- a/src/components/Form/src/jeecg/components/JDictSelectTag.vue
+++ b/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];
-        nextTick(() => onFieldChange());
+        const { mode } = unref<Recordable>(getBindValue);
+        // 兼容多选模式
+        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,
       };
     },
diff --git a/src/components/Form/src/jeecg/components/JImageUpload.vue b/src/components/Form/src/jeecg/components/JImageUpload.vue
index ae13d9b..eb4f720 100644
--- a/src/components/Form/src/jeecg/components/JImageUpload.vue
+++ b/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(','));
       }
diff --git a/src/hooks/component/useFormItem.ts b/src/hooks/component/useFormItem.ts
index 6885bee..26d871f 100644
--- a/src/hooks/component/useFormItem.ts
+++ b/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];
 }