需求：点击按钮会出现弹出框
父组件
<contractChoosePayeev-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-modalclass="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-inputstyle="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>
