<!-- 新增通知公告弹窗 --> <script lang="ts" setup> import type { FormInstance, FormRules } from 'element-plus' const emits = defineEmits(['resetData']) const ruleFormRef = ref<FormInstance>() // from组件 const ruleForm = reactive({ noticeNo: '', // 通知公告编号 noticePublisher: '', // 发布人 noticeCompany: '', // 发布单位 noticeTime: '', // 发布时间 noticeSketch: '', // 内容简述 noticeContent: '', // 发布内容 }) // 表单 const rules = ref<FormRules>({ noticeNo: [{ required: true, message: '通知公告编号不能为空', trigger: 'blur' }], noticeSketch: [{ required: true, message: '内容简述不能为空', trigger: 'blur' }], noticeContent: [{ required: true, message: '发布内容不能为空', trigger: 'blur' }], }) // 表单验证规则 const dialogVisible = ref<boolean>(false) // 弹窗显示 // 弹窗初始化 const initDialog = () => { dialogVisible.value = true } defineExpose({ initDialog }) // 关闭弹窗 const close = () => { dialogVisible.value = false emits('resetData') } </script> <template> <el-dialog v-model="dialogVisible" title="添加公告" width="50%" append-to-body> <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-position="right" label-width="110px"> <el-form-item label="通知公告编号" prop="noticeNo"> <el-input v-model.trim="ruleForm.noticeNo" placeholder="请输入通知公告编号" /> </el-form-item> <el-form-item label="发布人" prop="noticePublisher"> <el-input v-model.trim="ruleForm.noticePublisher" disabled /> </el-form-item> <el-form-item label="发布单位" prop="noticeCompany"> <el-input v-model.trim="ruleForm.noticeCompany" /> </el-form-item> <el-form-item label="发布时间" prop="noticeTime"> <el-input v-model.trim="ruleForm.noticeTime" /> </el-form-item> <el-form-item label="标题" prop="noticeTime"> <el-input v-model.trim="ruleForm.noticeTime" /> </el-form-item> <el-form-item label="内容简述" prop="noticeSketch"> <el-input v-model.trim="ruleForm.noticeSketch" /> </el-form-item> <el-form-item label="发布内容" prop="noticeContent"> <el-input v-model.trim="ruleForm.noticeContent" /> </el-form-item> <el-form-item label="附件" prop="noticeTime"> <el-button type="primary">上传</el-button> </el-form-item> <el-form-item> <el-button type="primary">发布</el-button> <el-button>关闭</el-button> </el-form-item> </el-form> </el-dialog> </template> <style lang="ts" scoped></style>