jeecgboot-vue3笔记（三）弹窗的使用

需求描述

点击按钮，弹窗窗体（子组件），确定后在子组件中完成业务逻辑处理（例如添加记录），然后回调父组件刷新以显示最近记录。

实现步骤

子组件

• 子组件定义BasicModal

 <BasicModal v-bind="$attrs" @register="registerModal" title="登录样品" @ok="handleSubmit" :width="700" :helpMessage="['手工登录原辅料、产品、中控样等，通过选择采样点、检测方案等登录']" >

• 声明Emits

// 声明Emits    const emit = defineEmits(['success', 'register']);  

• 响应register（父组件中注册子组件时）

//表单赋值  const [registerModal, {setModalProps, closeModal}] = useModalInner(async (data) => {       setModalProps({confirmLoading: false});   }); 

• 响应ok（提交/确定子组件弹窗时执行）
  例如执行提交表单等，通过emit调用父组件方法，达到通知父组件的作用，例如添加记录后，可通知父组件刷新页面以显示新记录。

//表单提交事件    async function handleSubmit() {        try {            const values = {"loginType":"RawMaterial","SamplingPointid":"1"};            // const values = await validate();            let data = refScheduled.value.getFieldsValue();            // console.log(data);            setModalProps({confirmLoading: true});            //提交表单            await login(values);            //关闭弹窗            closeModal();            //刷新列表            emit('success');        } finally {            setModalProps({confirmLoading: false});        }    }

父组件

• 父组件引入相关ts

import {useModal} from '/@/components/Modal';

• useModal解构展开获取register（用于给子组件传递）、openModal方法起别名（多个弹窗必须）

const [registerLoginManual, {openModal:openLoginManual}] = useModal();

• 父组件中子组件定义进行注册、传递ref

<calculation @register="registerCalculation" @success="handleLoginSucc" ref="refCalculation"></calculation>

• 响应按钮事件显示窗体

function onLoginManual(){  // refLoginManual.value.  openLoginManual(true, {        showFooter: true,     });}

解构的openModal和register在响应函数处调用的和组件@register的要一致。