1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586 |
- <template>
- <BasicModal
- v-bind="$attrs"
- @register="register"
- title="Modal Title"
- @visible-change="handleVisibleChange"
- >
- <div class="pt-3px pr-3px">
- <BasicForm @register="registerForm" :model="model" />
- </div>
- </BasicModal>
- </template>
- <script lang="ts">
- import { defineComponent, ref, nextTick } from 'vue';
- import { BasicModal, useModalInner } from '/@/components/Modal';
- import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
- const schemas: FormSchema[] = [
- {
- field: 'field1',
- component: 'Input',
- label: '字段1',
- colProps: {
- span: 24,
- },
- defaultValue: '111',
- },
- {
- field: 'field2',
- component: 'Input',
- label: '字段2',
- colProps: {
- span: 24,
- },
- },
- ];
- export default defineComponent({
- components: { BasicModal, BasicForm },
- props: {
- userData: { type: Object },
- },
- setup(props) {
- const modelRef = ref({});
- const [
- registerForm,
- // {
- // // setFieldsValue,
- // // setProps
- // },
- ] = useForm({
- labelWidth: 120,
- schemas,
- showActionButtonGroup: false,
- actionColOptions: {
- span: 24,
- },
- });
- const [register] = useModalInner((data) => {
- data && onDataReceive(data);
- });
- function onDataReceive(data) {
- console.log('Data Received', data);
- // 方式1;
- // setFieldsValue({
- // field2: data.data,
- // field1: data.info,
- // });
- // // 方式2
- modelRef.value = { field2: data.data, field1: data.info };
- // setProps({
- // model:{ field2: data.data, field1: data.info }
- // })
- }
- function handleVisibleChange(v) {
- v && props.userData && nextTick(() => onDataReceive(props.userData));
- }
- return { register, schemas, registerForm, model: modelRef, handleVisibleChange };
- },
- });
- </script>
|