一、父组件
绑定方法，引入子组件并传递数据和方法
<el-button size="small" plain type="primary" @click="click_add_notice">+添加公告</el-button>
<AddNoticeDialogv-model="AddNoticeDialogDialogVisible"@addNoticeSuccess="get_infocenter_notice_list":complaintRecordId="currentComplaintRecordId" ></AddNoticeDialog>
import AddNoticeDialog from './AddNoticeDialog.vue'
const AddNoticeDialogDialogVisible = ref(false)
const currentComplaintRecordId = ref<string | null>(null)
//打开弹窗
const click_add_notice = () => {AddNoticeDialogDialogVisible.value = true
}
二、子组件
<script setup lang="ts">
import { ref } from 'vue'
import parametersuperApi from '@/api/parametersuper/index'import { ElMessage, type FormInstance } from 'element-plus'
import { regulatoryBodiesIdStore } from '@/stores/insuiList'
import { storeToRefs } from 'pinia'
const { regulatoryBodiesId } = storeToRefs(regulatoryBodiesIdStore())
//接收父组件数据
const model = defineModel()
//接收父组件方法
const emit = defineEmits<{(e: 'addNoticeSuccess'): void
}>()
//定义表单数据
const noticeForm: any = ref({type: null,title: '',content: '',file: '',picture: '',releaseMode: null,planReleaseTime: null
})
const click_save_noticeForm = () => {let params = {regulatorId: regulatoryBodiesId.value,type: noticeForm.value.type,title: noticeForm.value.title,content: noticeForm.value.content,file: noticeForm.value.file,picture: noticeForm.value.picture,releaseMode: noticeForm.value.releaseMode,planReleaseTime: noticeForm.value.planReleaseTime}parametersuperApi.add_infocenter_notice_api(params).then((res: any) => {if (res.errorcode == 0) {//调用父组件方法emit('addNoticeSuccess')ElMessage.success('新增成功')
//关闭弹窗model.value = false}})
}
//弹窗打开时逻辑
function handleDialogOpen() {addDisabled.value = false
}
</script>
<template><el-dialog title="新增公告" v-model="model" @open="handleDialogOpen"><el-form :model="noticeForm" label-width="auto" label-suffix="：" ref="formRef"><el-form-item><el-col :span="11"><el-form-item label="公告类型" prop="type"><el-select v-model="noticeForm.type" placeholder="请选择公告类型"><el-option label="行业公告" value="0"> </el-option><el-option label="督导公告" value="1"> </el-option><el-option label="系统公告" value="2"> </el-option></el-select></el-form-item></el-col><el-col :span="2"> </el-col><el-col :span="11"> </el-col></el-form-item><el-form-item><el-col :span="24"><el-form-item label="公告标题" prop="title"><el-input v-model="noticeForm.title"> </el-input></el-form-item></el-col><!-- <el-col :span="2"> </el-col><el-col :span="11"></el-col> --></el-form-item><el-form-item prop="content" label="公告内容"><el-input v-model="noticeForm.content" type="textarea" :rows="7"> </el-input></el-form-item><el-form-item label="添加附件"> </el-form-item><el-form-item label="上传图片"> </el-form-item><el-form-item><el-col :span="11"><el-form-item label="发布方式" prop="releaseMode"><el-switchv-model="noticeForm.releaseMode"active-text="自动"inactive-text="手动"active-value="1"inactive-value="0"/></el-form-item></el-col><el-col :span="2"> </el-col><el-col :span="11"> </el-col></el-form-item><el-form-item><el-col :span="11"><el-form-item label="发布时间" prop="planReleaseTime"><el-date-pickerv-model="noticeForm.planReleaseTime"type="datetime"placeholder="请选择"format="YYYY/MM/DD hh:mm:ss"value-format="x"/></el-form-item></el-col><el-col :span="2"> </el-col><el-col :span="11"> </el-col></el-form-item></el-form><template #footer><div class="dialog-footer"><el-button @click="model = false">取消</el-button><el-button type="primary" @click="click_save_noticeForm" :disabled="addDisabled">添加</el-button></div></template></el-dialog>
</template>
三、另一种方法
绑定新增按钮弹出表单，使用子组件addDialog，定义了ref，传递数据option，rowData，formTitle，传递方法closeAuthorizeChildDialog，get_Institutions_List
父组件
<el-buttonicon="fas fa-plus"type="text"style="margin: -10px 0px"@click="click_Add_Institutions"> 新增监管机构</el-button>
<addDialogref="addDialogRef":option="optionAuth":rowData="rowData":formTitle="formTitle"@closeAuthorizeChildDialog="closeAuthorizeChildDialog"@get_Institutions_List="get_Institutions_List"></addDialog>
import addDialog from "./add_dialog.vue";
const addDialogRef: any = ref();
const optionAuth = ref({dialogAuthorizeChildVisible: false,currectRowData: {},
});
const formTitle = ref("新增监管机构");
const rowData = ref({});
//打开弹窗传递title调用子组件方法clearForm
const click_Add_Institutions = () => {optionAuth.value.dialogAuthorizeChildVisible = true;formTitle.value = "新增监管机构";addDialogRef.value.clearForm();
};
//关闭弹窗
const closeAuthorizeChildDialog = () => {optionAuth.value.dialogAuthorizeChildVisible = false;
};
// 获取机构列表
const get_Institutions_List = () => {let loadingInstance: any = null;loadingInstance = ElLoading.service({lock: true,text: "加载中...",background: "rgba(0, 0, 0, 0.7)",});proxy.axios.get(`/regulator/get`).then(({ data }: { data: any }) => {tableData_Institutions_List.value = data.data;if (loadingInstance) {loadingInstance.close();}}).catch((err: any) => {console.error(err);if (loadingInstance) {loadingInstance.close();}});
};
子组件
//add_dialog.vue
//定义方法closeAuthorizeChildDialog，绑定数据option1，title，form表单布局
<el-dialog@close="closeAuthorizeChildDialog"v-model="option1":title="props.formTitle"width="50%"><el-form :model="form"><el-form-itemlabel="机构名称"prop="orgName":label-width="formLabelWidth"><el-inputplaceholder="请输入"class="inputForm"v-model="form.orgName"autocomplete="off"/></el-form-item><el-form-itemlabel="机构简称"prop="shortName":label-width="formLabelWidth"><el-inputplaceholder="请输入"class="inputForm"v-model="form.shortName"autocomplete="off"/></el-form-item><el-form-itemv-if="props.formTitle == '新增监管机构'"label="机构ID"prop="orgId":label-width="formLabelWidth"><el-inputplaceholder="请输入"class="inputForm"v-model="form.orgId"autocomplete="off"/></el-form-item><el-form-itemv-elselabel="机构ID"prop="orgId":label-width="formLabelWidth"><el-inputdisabledplaceholder="请输入"class="inputForm"v-model="form.orgId"autocomplete="off"/></el-form-item><el-form-itemlabel="启用状态"prop="status":label-width="formLabelWidth"><el-switch v-model="form.status" /></el-form-item><el-form-item:label-width="formLabelWidth"v-if="props.formTitle == '新增监管机构'"label="所在位置"prop="county":rules="{ required: true, message: '请选择所在区县！' }"><el-row><el-col :span="6"><el-selectv-model="form.province"placeholder="请选择省"filterable@change="provinceChange"><el-optionv-for="province in provinces":label="province.label":value="province.value":key="province.value"/></el-select></el-col><el-col :span="6"><el-selectv-model="form.city"placeholder="请选择市"filterable@change="cityChange"><el-optionv-for="city in cities":label="city.label":value="city.value":key="city.value"/></el-select></el-col><el-col :span="6"><el-selectv-model="form.county"placeholder="请选择县区"filterable><el-optionv-for="county in counties":label="county.label":value="county.value":key="county.value"/></el-select></el-col></el-row></el-form-item><el-form-item label="备注" prop="remarks" :label-width="formLabelWidth"><el-inputplaceholder="请输入内容"class="inputForm"v-model="form.remarks"type="textarea"/></el-form-item></el-form><template #footer><div class="dialog-footer"><el-button @click="closeAuthorizeChildDialog">取消</el-button><el-button type="primary" @click="onClick_SaveForm"> 确定 </el-button></div></template></el-dialog>
import {ref,defineProps,reactive,onMounted,toRef,defineEmits,getCurrentInstance,computed,defineExpose,
} from "vue";
//暴露方法供父组件调用
defineExpose({ clearForm, editToForm });
//接收父组件传递数据
const props = defineProps({option: Object,rowData: Object,formTitle: String,
});
//转成ref响应式
const option = toRef(props, "option");
//接收父组件传递方法
const emit = defineEmits(["closeAuthorizeChildDialog","get_Institutions_List",
]);
//调用父组件方法
const closeAuthorizeChildDialog = () => {emit("closeAuthorizeChildDialog");
};
//计算属性
const option1 = computed({get: () => option.value?.dialogAuthorizeChildVisible,set: (val: any) => {emit("closeAuthorizeChildDialog");},
});
//定义form表单
const form: any = reactive({orgId: "",orgName: "",shortName: "",status: true,address: "",longitude: "123",latitude: "123",remarks: "",province: "",city: "",county: "",
});
//定义方法clearForm
const clearForm = () => {form.orgId = "";form.orgName = "";form.shortName = "";form.status = true;form.address = "";form.longitude = "";form.latitude = "";form.remarks = "";
};