fix: 嵌套式form组件

src/components/Form/src/components/ApiComplex.vue

@@ -27,12 +27,17 @@
           :placeholder="props.placeholder || '请输入'"
           v-model:value="inputValue"
           :disabled="disabled"
+          @change="handleInputChange"
         />
       </a-form-item>
       <div class="mb-2 ml-1">)</div>
     </div>
     <a-form-item v-else>
-      <a-input :placeholder="props.placeholder || '请输入'" v-model:value="inputValue" />
+      <a-input
+        :placeholder="props.placeholder || '请输入'"
+        v-model:value="inputValue"
+        @change="handleInputChange"
+      />
     </a-form-item>
   </div>
 </template>
@@ -43,7 +48,7 @@
   import { isFunction } from '/@/utils/is';
   import { get } from 'lodash-es';
   import { propTypes } from '/@/utils/propTypes';
-  import { useRuleFormItem } from '/@/hooks/component/useFormItem';
+  import { useDebounceFn } from '@vueuse/core';
 
   export default defineComponent({
     name: 'ApiComplex',
@@ -54,40 +59,53 @@
       immediate: { type: Boolean, default: true },
       resultField: propTypes.string.def(''),
       placeholder: { type: String },
-      values: { type: Object },
-      value: { type: Object },
     },
     emits: ['change'],
     setup(props, { attrs, emit }) {
-      const radioData = ref(
-        props.params?.radioData || [
-          { label: '无', value: 0 },
-          { label: '有', value: 1 },
-        ],
-      );
-      const radioValue = ref(props.values?.radioValue || 0);
-      const inputValue = ref(props.values?.inputValue || '');
-      const checkboxValue = ref(props.values?.checkboxValue || []);
-      const checkboxDisabled = ref(true);
+      const radioData = props.params?.radioData || [
+        { label: '无', value: 0 },
+        { label: '有', value: 1 },
+      ];
       const checkboxData = ref([]);
-      const disabled = ref(true);
-      const isFirstLoaded = ref<Boolean>(false);
-      const loading = ref(false);
       const getAttrs = computed(() => {
         return {
           ...(props.api ? { checkboxData: unref(checkboxData) } : {}),
           ...attrs,
-        };
+        } as any;
       });
-      console.log('🚀 ~ file: ApiComplex.vue:82 ~ getAttrs ~ getAttrs:', getAttrs);
-      const [state] = useRuleFormItem(props);
-      console.log('state', state);
-      console.log('value', props.value);
-      function handleChange(...args) {
-        // emitData.value = args;
-        emit('change', ...args);
-      }
-
+      // console.log('🚀 ~ file: ApiComplex.vue:82 ~ attrs:', attrs);
+      // console.log('🚀 ~ file: ApiComplex.vue:82 ~ props:', props);
+      const radioValue = ref(0);
+      const inputValue = ref('');
+      const checkboxValue = ref([]);
+      const checkboxDisabled = computed(() => {
+        return radioValue.value ? false : true;
+      });
+      const disabled = computed(() => {
+        if (checkboxData.value.length) {
+          return checkboxValue.value &&
+            checkboxValue.value.filter(ele => {
+              return ele == '-1';
+            }).length
+            ? false
+            : true;
+        } else {
+          return radioValue.value ? false : true;
+        }
+      });
+      const isFirstLoaded = ref<Boolean>(false);
+      const loading = ref(false);
+      watch(
+        () => attrs.formValues,
+        (v: any) => {
+          // console.log('🚀 ~ file: ApiComplex.vue:102 ~ setup ~ v:', v);
+          const field = v.field;
+          const defaultValue = v?.model?.[field];
+          radioValue.value = defaultValue?.bool;
+          inputValue.value = defaultValue?.remark;
+          checkboxValue.value = defaultValue?.dictValues;
+        },
+      );
       watch(
         () => props.params?.dictCode,
         () => {
@@ -118,19 +136,17 @@
             checkboxData.value = res;
             checkboxData.value.push({
               label: '其他',
-              value: -1,
+              value: '-1',
             });
-            emitChange();
             return;
           }
           if (props.resultField) {
             checkboxData.value = get(res, props.resultField) || [];
             checkboxData.value.push({
               label: '其他',
-              value: -1,
+              value: '-1',
             });
           }
-          emitChange();
         } catch (error) {
           console.warn(error);
         } finally {
@@ -139,25 +155,44 @@
       }
 
       function emitChange() {
-        // emit('change', unref(getOptions));
+        debouncedFn();
       }
 
+      // 防抖
+      const debouncedFn = useDebounceFn(() => {
+        const data = {
+          bool: radioValue.value,
+          boolText: radioData,
+          dictValues: checkboxValue.value,
+          remark: inputValue.value,
+          dictCode: props.params?.dictCode,
+        };
+        emit('change', data);
+      }, 1000);
+
       // 单选改变
       function handleRadioChange(e) {
-        console.log('🚀 ~ file: ApiComplex.vue:114 ~ handleRadioChange ~ e:', e);
-        checkboxDisabled.value = e.target.value ? false : true;
+        checkboxValue.value = e.target.value ? checkboxValue.value : [];
+        radioValue.value = e.target.value;
+        emitChange();
       }
 
       // 复选改变
       function handleCheckboxChange(e) {
-        console.log('🚀 ~ file: ApiComplex.vue:114 ~ handleRadioChange ~ e:', e);
-        disabled.value = e.includes(-1) ? false : true;
+        inputValue.value = e.includes('-1') ? inputValue.value : '';
+        checkboxValue.value = e;
+        emitChange();
+      }
+
+      // 输入改变
+      function handleInputChange(e) {
+        inputValue.value = e.target.value || '';
+        emitChange();
       }
 
       return {
         getAttrs,
         loading,
-        handleChange,
         props,
         radioData,
         radioValue,
@@ -168,6 +203,7 @@
         checkboxDisabled,
         handleRadioChange,
         handleCheckboxChange,
+        handleInputChange,
       };
     },
   });