xiaodou-ai-admin/src/components/FormPro/index.vue

<template>
  <a-form
    autocomplete="off"
  >
    <a-form-item
      v-for="item in modelRef"
      :key="item.id"
      :label="item.label"
      name="7788"
      v-bind="validateInfos[item.key]"
    >
      <a-input v-model:value="item[item.key]"  />
    </a-form-item>

    <!-- <a-form-item label="测试title" v-bind="validateInfos.modelLabel">
      <a-input v-model:value="modelRef.modelLabel"  />
    </a-form-item> -->
  </a-form>
</template>

<script lang='ts' setup >
import { onMounted, reactive, toRaw, computed } from 'vue'
import { Form } from 'ant-design-vue'
import { useId } from '@/hooks'

/**
 * 将submit的提交抛出去
 */
export interface FormItemProps {
  rules?: {required: boolean, message: string} | boolean,
  type: COMMON.COMPONENTS.ComType,
  key: string,
  value?: any,
  label: string,
  request?: () => {
    id?: string,
    name?: string,
    value: any,
    key: any
  }
}

export interface FormProProps {
  reset: boolean // 是否开启一键reset表单
  dire: 'h' | 'v', // 布局方式 默认横向布局
  formProps: FormItemProps[] // 表单props
  [key: string]: any
}

const useForm = Form.useForm

// const props = defineProps<FormProProps>()
const props: FormProProps = {
  dire: 'h',
  reset: true,
  formProps: [{
    rules: {
      required: true,
      message: '此项为必填项'
    },
    type: 'input',
    key: 'modelLabel',
    label: '测试title'
  }]
}

const modelRef = reactive<Record<string, any>>({})

const rulesRef = reactive<Record<string, any>>({})

props.formProps.forEach(item => {
  rulesRef[item.key] = [item.rules]
  modelRef[item.key] = item.value
})

const { resetFields, validate, validateInfos } = useForm(modelRef, rulesRef, {
  onValidate: (...args) => console.log(...args)
})

console.log(rulesRef)
console.log('validateInfos:', validateInfos)

const onSubmit = () => {
  console.log('onSubmit')

  validate()
    .then(() => {
      console.log(toRaw(modelRef))
    })
    .catch(err => {
      console.log('error', err)
    })
}

defineExpose({
  onSubmit
})

const reset = () => {
  // resetFields
}

</script>

<style lang="less" scope >

</style>