68 lines
1.9 KiB
Vue
68 lines
1.9 KiB
Vue
|
<template>
|
||
|
|
<a-card class="mb-5">
|
||
|
|
<eo-form ref="formRef" :fieldList="fieldList" :model="model" @submit="handleSubmit" @change="handleChange">
|
||
|
|
<!-- <template #header> 基本表单header </template> -->
|
||
|
|
<!-- <template #footer>基本表单footer</template> -->
|
||
|
|
|
||
|
|
<!-- <template #buttons="{ model, formRef }">
|
||
|
|
<a-button @click="handleSubmit(model, formRef)">提交</a-button>
|
||
|
|
</template> -->
|
||
|
|
|
||
|
|
<!-- <template #relationTable>
|
||
|
|
<div>关系人slot</div>
|
||
|
|
</template> -->
|
||
|
|
</eo-form>
|
||
|
|
<a-space>
|
||
|
|
<a-button type="primary" @click="onSubmit">父组件提交</a-button>
|
||
|
|
<a-button @click="onSwith">启用/禁用</a-button>
|
||
|
|
</a-space>
|
||
|
|
</a-card>
|
||
|
|
</template>
|
||
|
|
<script lang="ts" setup>
|
||
|
|
import EoForm from '@/components/wyg-form/index.vue';
|
||
|
|
import { formConfig } from './config';
|
||
|
|
import type { Form } from '@/components/wyg-form/interface';
|
||
|
|
import type { Ref } from 'vue';
|
||
|
|
|
||
|
|
const formRef = ref();
|
||
|
|
|
||
|
|
let fieldList: Form.FieldItem[] = formConfig;
|
||
|
|
const model = ref<Record<string, any>>({
|
||
|
|
name: '张三',
|
||
|
|
age: 18,
|
||
|
|
});
|
||
|
|
// 提交按钮在子组件
|
||
|
|
const handleSubmit = (model: Record<string, any>) => {
|
||
|
|
console.log(model, 'model====');
|
||
|
|
};
|
||
|
|
// 提交按钮在父组件
|
||
|
|
const onSubmit = async () => {
|
||
|
|
const res = await formRef?.value?.submit();
|
||
|
|
console.log(formRef, 'formRef====');
|
||
|
|
console.log(res, 'res====');
|
||
|
|
};
|
||
|
|
// 修改Form组件相关属性
|
||
|
|
const status = ref(false);
|
||
|
|
const onSwith = () => {
|
||
|
|
status.value = !status.value;
|
||
|
|
formRef?.value?.setForm({ disabled: !status.value });
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleChange = (params: any) => {
|
||
|
|
const { key, val } = params;
|
||
|
|
if (key === 'sex') {
|
||
|
|
const required = val === 'F';
|
||
|
|
// 更新form配置
|
||
|
|
const updateList: any = [
|
||
|
|
{
|
||
|
|
field: 'school',
|
||
|
|
required: required,
|
||
|
|
disabled: !required,
|
||
|
|
},
|
||
|
|
];
|
||
|
|
formRef?.value?.updateFieldsList(updateList);
|
||
|
|
formRef?.value?.setModel({ age: 26 });
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|