shuhi-ui/src/components/CommonPage/SimpleForm.vue

<!-- 编辑弹窗 -->
<template>
  <pro-form
    v-bind="$attrs"
    ref="proFormRef"
    :model="form"
    :items="items"
    :grid="{ span: gird }"
    @updateValue="setFieldValue"
  >
    <template v-for="(val, key) in slotArray" v-slot:[key]="{ row }">
      <slot :name="key" :row="row"></slot>
    </template>
  </pro-form>
</template>

<script setup>
  import { ref, useSlots } from 'vue';
  import { useFormData } from '@/utils/use-form-data';
  import ProForm from '@/components/ProForm/index.vue';
  const slotArray = useSlots();

  const proFormRef = ref(null);
  const props = defineProps({
    items: {
      type: Array,
      default() {
        return [];
      }
    },
    initKeys: {
      type: Object,
      default() {
        return {};
      }
    },
    gird: {
      type: Number,
      default: 24
    }
  });
  const [form, resetFields, assignFields, setFieldValue] = useFormData(
    props.initKeys
  );
  console.log(form, 'form');
  /** 提交表单 */
  const submitForm = () => {
    return new Promise((resolve, reject) => {
      proFormRef.value?.validate?.((valid) => {
        if (valid) {
          resolve(form);
        } else {
          reject('表单验证失败');
        }
      });
    });
  };

  /** 重置表单 */
  const resetForm = () => {
    resetFields();
    nextTick(() => {
      proFormRef.value?.clearValidate?.();
    });
  };

  defineExpose({
    resetFields,
    assignFields,
    submitForm,
    resetForm
  });
</script>