一、父组件
绑定方法,引入子组件并传递数据和方法
<el-button size="small" plain type="primary" @click="click_add_notice">+添加公告</el-button>
<AddNoticeDialog
v-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-switch
v-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-picker
v-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-button
icon="fas fa-plus"
type="text"
style="margin: -10px 0px"
@click="click_Add_Institutions"
> 新增监管机构</el-button
>
<addDialog
ref="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-item
label="机构名称"
prop="orgName"
:label-width="formLabelWidth"
>
<el-input
placeholder="请输入"
class="inputForm"
v-model="form.orgName"
autocomplete="off"
/>
</el-form-item>
<el-form-item
label="机构简称"
prop="shortName"
:label-width="formLabelWidth"
>
<el-input
placeholder="请输入"
class="inputForm"
v-model="form.shortName"
autocomplete="off"
/>
</el-form-item>
<el-form-item
v-if="props.formTitle == '新增监管机构'"
label="机构ID"
prop="orgId"
:label-width="formLabelWidth"
>
<el-input
placeholder="请输入"
class="inputForm"
v-model="form.orgId"
autocomplete="off"
/>
</el-form-item>
<el-form-item
v-else
label="机构ID"
prop="orgId"
:label-width="formLabelWidth"
>
<el-input
disabled
placeholder="请输入"
class="inputForm"
v-model="form.orgId"
autocomplete="off"
/>
</el-form-item>
<el-form-item
label="启用状态"
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-select
v-model="form.province"
placeholder="请选择省"
filterable
@change="provinceChange"
>
<el-option
v-for="province in provinces"
:label="province.label"
:value="province.value"
:key="province.value"
/>
</el-select>
</el-col>
<el-col :span="6">
<el-select
v-model="form.city"
placeholder="请选择市"
filterable
@change="cityChange"
>
<el-option
v-for="city in cities"
:label="city.label"
:value="city.value"
:key="city.value"
/>
</el-select>
</el-col>
<el-col :span="6">
<el-select
v-model="form.county"
placeholder="请选择县区"
filterable
>
<el-option
v-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-input
placeholder="请输入内容"
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 = "";
};