封装弹框精简版

父组件

<template>  
<cashierDetailBox
    v-if="modalchoosePayeeVisible"
    :modalVisible="modalchoosePayeeVisible"
    :cashierObj="cashierObj"
    @doSelectPayee="doSelectPayee"
/>
</template>
import cashierDetailBox from './cashierDetailBox.vue';

export default defineComponent({
components: { cashierDetailBox },
setup() {

 let cashierObj = ref({}) as any;
 let modalchoosePayeeVisible = ref(false);

const doSelectPayee = (modalVisible: any) => {
    modalchoosePayeeVisible.value = modalVisible;
};
})

const showDetail = async (data: any) => {
const res: any = await getDetail({
    voucher_id: data.voucher_id,
});
if (res.status_code == '0000') {
    cashierObj.value = res.data;
} else {
    message.error(res.reason);
}
modalchoosePayeeVisible.value = true;
};
}

子组件

<template>
  <div class="page_wrap enclosure_wrap">
    <a-modal
      class="gic-modal enclosure-modal"
      v-model:visible="modalchoosePayeeVisible"
      title="查看详情"
      width="1000px"
      @ok="hideChooseProModal"
    >
      <template #footer>
        <a-button key="submit" type="primary" @click="handleChooseProModalOk">确定</a-button>
      </template>
      <div class="modal-content">
        <div v-if="cashierObj.baseInfo">
          <span class="box_title"></span>
          <span>基本信息</span>
          <a-form ref="quotaFormRef" :model="cashierObj">
            <div class="inline-row">
              <div v-for="(item, index) in baseInformation" :key="index" class="custome_item">
                <a-form-item :label="item.name" :name="item.code">
                  <a-input
                    :bordered="false"
                    :disabled="true"
                    style="width: 220px"
                    v-model:value="cashierObj.baseInfo[item.code]"
                    placeholder="暂无数据"
                  />
                </a-form-item>
              </div>
            </div>
          </a-form>
        </div>
      </div>
    </a-modal>
  </div>
</template>


export default defineComponent({
  name: 'dialog',
  props: {
    modalVisible: {
      type: Boolean,
    },
    cashierObj: {
      type: Object,
    },
  setup(props, { emit }) {
    let modalchoosePayeeVisible = ref(false);
    let cashierObj: any = ref({});
    let baseInformation = ref<Array<any>>([
      {
        code: 'bill_no',
        name: '报销单号',
      },
} 

    const initViewData = () => {
      modalchoosePayeeVisible.value = props.modalVisible;
      cashierObj.value = props.cashierObj;
      console.log('cashierObj.value', cashierObj.value);
    };

    onMounted(() => {
      initViewData();
    });
    watch(
      () => props.modalVisible, //第二次点击才触发
      () => {
        initViewData();
      },
    );
    watch(modalchoosePayeeVisible, () => {
      emit('doSelectPayee', modalchoosePayeeVisible.value);
    });
   const hideChooseProModal = () => {
      modalchoosePayeeVisible.value = false;
      console.log('==========', modalchoosePayeeVisible.value);
    };

    const handleChooseProModalOk = async () => {
      modalchoosePayeeVisible.value = false;
      // emit('doSelectPayee', modalchoosePayeeVisible.value, selRows.value);
    };

}