fs-admin/src/components/form/ProForm.vue

<script setup lang="ts">
import type { PropType } from 'vue'
import type { BasicForm, BasicFormItem, AdvancedForm, AdvancedFormItem } from '@/types/form'
import { ElMessage } from 'element-plus'

const props = defineProps({
  formData: {
    required: true,
    type: Object
  },
  formConfig: {
    required: true,
    type: Object as PropType<BasicForm | AdvancedForm>
  },
  create: {
    required: true,
    type: Function
  },
  update: {
    required: true,
    type: Function
  },
  advanced: Boolean
})

const formProps: any = ref({
  labelWidth: '100px',
  labelPosition: 'top',
  size: 'large',
  ...props.formConfig?.props
})

const formInitData = computed(() => {
  return props.formData
})
const formRef = ref()

const submit = async () => {
  let message
  return formRef.value.validate().then(async (valid: boolean) => {
    try {
      if (formInitData.value.id) {
        await props.update(formInitData.value)
        message = '编辑成功'
      } else {
        await props.create(formInitData.value)
        message = '新增成功'
      }

      ElMessage({
        type: 'success',
        message
      })
      return true
    } catch (error) {
      return false
    }
  })
}

defineExpose({
  submit
})
</script>

<template>
  <el-form :model="formInitData" ref="formRef" v-bind="formProps" class="form">
    <advanced-form :formConfig="formConfig" :formData="formInitData" v-if="advanced" />
    <basic-form :formConfig="formConfig" :formData="formInitData" v-else />
  </el-form>
</template>

<style lang="scss" scoped>
:deep(.el-select) {
  width: 100%;
}
</style>