jeecgboot-vue3筆記（三）彈窗的使用

• 2022 年 6 月 1 日
• 筆記
• 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的要一致。