需求:点击按钮会出现弹出框
父组件
<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>