封装弹出框组件 vue3

需求：点击按钮会出现弹出框

父组件

   <contractChoosePayee
      v-if="modalchoosePayeeVisible"
      :modalVisible="modalchoosePayeeVisible"
      @doSelectPayee="doSelectPayee"
    />

import contractChoosePayee from './contractChoosePayee.vue';
components: {contractChoosePayee},

回显

    //付款方
    const doSelectPayee = (modalVisible: any, selectedRows: any) => {
      modalchoosePayeeVisible.value = modalVisible;
      let selectedPro = {} as any;
      //selectedRows 为选中的数据
      if (selectedRows == undefined) {
        return;
      }

      selectedPro = selectedRows[0];//只能单选
      if (contractData.formData.baseContractDTO) {
        contractData.formData.baseContractDTO.payee_name = selectedPro.name;
        (contractData.formData.baseContractDTO as any).payee_account = selectedPro.account_no;
        (contractData.formData.baseContractDTO as any).payee_bank_no = selectedPro.bank_name;
      }
    };

子组件（弹出框）

<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 class="filter_container">
          <a-form class="form_item_right" layout="inline" :model="queries">
            <a-form-item label="请输入：">
              <a-input
                style="width: 230px"
                v-model:value="queries.query_filed"
                placeholder="请输入"
              ></a-input>
            </a-form-item>
            <a-form-item>
              <a-button class="form_btn" type="primary" @click="getTableData">查询</a-button>
            </a-form-item>
          </a-form>
        </div>
        <gap-table
          :configData="configData"
          :dataSource="dataSource"
          @pageChange="handlePageChange"
          class="bill_table"
        ></gap-table>
      </div>
    </a-modal>
  </div>
</template>
<script lang="ts">
import {
  chooseProject,
  choosePayee,
  showPmCateSetCode,
} from '@/api/gic/contract/contractEnteringForm';
import { message } from 'ant-design-vue';
import gapTable from '@/components/gap3/gap-components/gap-table/gap-table.vue';
import { defineComponent, onMounted, reactive, ref, toRefs,watch } from 'vue';
import { validateThousands } from '@/utils';

export default defineComponent({
  name: 'contractChoosePayee',
  components: {
    gapTable,
  },
  props: {
    modalVisible: {
      type: Boolean,
    },
  },
  setup(props, { emit }) {
    const chooseProData = reactive({
      queries: {
        query_filed: '',
      },
      curPage: 1,
      size: 10,
      configData: {
        viewConfig: {},
        cusPagination: {
          pageSize: 2,
          current: 1,
          total: 1,
        },
        columns: [],
      },
      dataSource: [],
      formState: {
        attach_type_code: '',
        attach_type_name: '',
        business_types: [],
        is_enabled: 2,
        remark: '',
      },
      modalvisible: false,
      modalTitle: '',
    });

    let selRows: any = ref([]);
    let modalchoosePayeeVisible = ref(false);
    const initViewData = () => {
      modalchoosePayeeVisible.value = props.modalVisible;
    };
    watch(
      () => props.modalVisible,
      () => {
        initViewData();
      },
    );
    onMounted(() => {
      initViewData();
    });
    watch(modalchoosePayeeVisible, () => {
      emit('doSelectPayee', modalchoosePayeeVisible.value, undefined);
    });
    let proTypeCodeList = ref<Array<any>>([]);

    /** 设置表格字段 */
    const initTableColumn = () => {
      chooseProData.configData.viewConfig = {
        code: 'enclosuretable',
        pagination: true,
        rowSelection: {
          onChange: (selectedRowKeys: any, selectedRows: any) => {
            selRows.value = selectedRows;
          },
        },
      };
      chooseProData.configData.cusPagination = {
        pageSize: 10,
        current: 1,
        total: 1,
      };
      (chooseProData.configData.cusPagination as any) = null;
      (chooseProData.configData.columns as any) = [
        {
          title: '序号',
          dataIndex: 'order_num',
          key: 'order_num',
          width: 50,
          customRender: function (t: any) {
            return t.index + 1;
          },
        },
        {
          title: '供应商名称',
          dataIndex: 'name',
          key: 'name',
          width: 200,
        },
        {
          title: '账户',
          dataIndex: 'account_no',
          key: 'account_no',
          width: 100,
        },
        {
          title: '开户行名称',
          dataIndex: 'bank_name',
          key: 'bank_name',
          width: 200,
        },
    
      ];
    };
    initTableColumn();

    /** 获取单据列表数据 */
    const getTableData = async () => {
      const res: any = await choosePayee({
        page: 1,
        queryFiled: '',
        rows: 100,
      });
      if (res.status_code == '0000') {
        chooseProData.dataSource = res.data.rows;
      } else {
        message.error(res.reason);
      }
    };
    getTableData();

    
    /** 当前页变化 */
    const handlePageChange = (page: number, pageSize: number) => {
      chooseProData.configData.cusPagination.current = page;
      chooseProData.configData.cusPagination.pageSize = pageSize;
      getTableData();
    };

    const hideChooseProModal = () => {
      modalchoosePayeeVisible.value = false;
      console.log('==========', modalchoosePayeeVisible.value);
    };

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

    return {
      ...toRefs(chooseProData),
      modalchoosePayeeVisible,
      getTableData,
      handlePageChange,
      hideChooseProModal,
      handleChooseProModalOk,
    };
  },
});
</script>
<style lang="less"></style>