108 lines
2.1 KiB
Vue
108 lines
2.1 KiB
Vue
<template>
|
|
<el-form
|
|
:model="form"
|
|
v-bind="$attrs"
|
|
label-width="auto"
|
|
ref="formInstance"
|
|
>
|
|
<el-row :gutter="20">
|
|
<el-col
|
|
v-for="item in filterSchma"
|
|
v-bind="item.colProps || { span: 12}"
|
|
:key="item.prop"
|
|
>
|
|
<el-form-item
|
|
v-bind="item"
|
|
:key="item.prop"
|
|
>
|
|
<template #default>
|
|
<component
|
|
v-if="item.component"
|
|
:is="item.component"
|
|
v-bind="item.props || {}"
|
|
v-on="item.on || {}"
|
|
v-model="form[item.prop]"
|
|
>
|
|
</component>
|
|
<span v-else>
|
|
{{ form[item.prop] || '--' }}
|
|
</span>
|
|
</template>
|
|
<template #label>
|
|
<slot :name="item?.slots?.label" v-bind="{item, form}">
|
|
{{ item?.label || '' }}
|
|
</slot>
|
|
</template>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form>
|
|
</template>
|
|
|
|
<script setup lang="jsx">
|
|
import { ElMessage } from 'element-plus';
|
|
|
|
|
|
|
|
const props = defineProps({
|
|
schema: {
|
|
type: Array,
|
|
default: []
|
|
}
|
|
})
|
|
|
|
const emits = defineEmits(['getInstance'])
|
|
|
|
const form = ref({})
|
|
const formInstance = ref(null)
|
|
|
|
const filterSchma = computed(()=>{
|
|
return props.schema.filter(item=>{
|
|
if(item.prop) return true
|
|
})
|
|
})
|
|
|
|
|
|
const validate = async () => {
|
|
let validObj = {}
|
|
await formInstance.value.validate((valid, fields)=>{
|
|
validObj.isValidate = valid
|
|
validObj.fields = fields
|
|
})
|
|
return validObj
|
|
}
|
|
|
|
const getValues = () => {
|
|
return form.value
|
|
}
|
|
|
|
const setValues = (data) => {
|
|
try {
|
|
if(data instanceof Object) {
|
|
form.value = {...data}
|
|
}
|
|
} catch (error) {
|
|
ElMessage.warning('传入参数格式有误')
|
|
}
|
|
}
|
|
|
|
const resetFields = () => {
|
|
formInstance.value.resetFields()
|
|
}
|
|
|
|
onMounted(()=>{
|
|
emits('getInstance',Object.assign({}, unref(formInstance), {
|
|
getValues,
|
|
validate,
|
|
setValues,
|
|
resetFields
|
|
}))
|
|
})
|
|
|
|
defineExpose({ getValues, setValues, validate, resetFields, formInstance, form })
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
</style> |