<template> <!-- 排水防涝子系统 公众服务 通知公告--> <div class="publicContainer"> <!-- 搜索区域 --> <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch"> <el-form-item label="通知公告名称:" prop="title" style="width: 250px"> <el-input v-model="queryParams.title" placeholder="请输入通知公告名称" clearable @keyup.enter="handleQuery" /> </el-form-item> <el-form-item> <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button> <el-button type="success" icon="Refresh" @click="resetQuery">重置</el-button> </el-form-item> </el-form> <!-- 按钮区域 --> <el-row :gutter="10" class="mb8"> <el-col :span="1.5"> <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['floodSys:jing:add']">新增</el-button> </el-col> <right-toolbar v-model:showSearch="showSearch" @queryTable="getDataList"></right-toolbar> </el-row> <!-- 表格 --> <el-table v-loading="tableLoading" :data="tableData" max-height="650"> <el-table-column label="发布日期" prop="time" /> <el-table-column label="通知公告名称" prop="title" /> <el-table-column label="通知内容" prop="title1" /> <el-table-column label="跳转链接" prop="createBy" />> <el-table-column label="操作" width="160" class-name="small-padding fixed-width"> <template #default="scope"> <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['floodSys:jing:edit']">修改</el-button> <el-button link type="danger" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['floodSys:jing:remove']"> 删除 </el-button> </template> </el-table-column> </el-table> <!-- 分页 --> <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getDataList" /> <!-- 添加或修改弹窗 --> <el-dialog :title="dialogTitle" v-model="dialogShow" width="900px" append-to-body> <el-form ref="formRef" :model="formData" :rules="rulesForm" label-width="120px" class="publicForm"> <el-row :gutter="20"> <el-col :span="12"> <el-form-item label="发布日期:" prop="createBy1"> <el-date-picker type="date" v-model="formData.createBy1" value-format="YYYY-MM-DD" placeholder="请选择发布日期" /> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="跳转链接:" prop="emergencyMeasure"> <el-input type="text" v-model="formData.emergencyMeasure" placeholder="请输入跳转链接" clearable style="width: 100%" /> </el-form-item> </el-col> </el-row> <el-row :gutter="20"> <el-col :span="12"> <el-form-item label="通知公告名称:" prop="title"> <el-input type="text" v-model="formData.title" placeholder="请输入通知公告名称" clearable style="width: 100%" /> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="通知内容:" prop="emergencyMeasure"> <el-input type="textarea" v-model="formData.emergencyMeasure" placeholder="请输入通知内容" clearable style="width: 100%" /> </el-form-item> </el-col> </el-row> </el-form> <template #footer> <div class="dialog-footer"> <el-button type="info" @click="cancelForm">取 消</el-button> <el-button type="primary" @click="submitForm">确 定</el-button> </div> </template> </el-dialog> </div> </template> <script setup name="通知公告"> import { articlePage, articleAdd, articleDel, articleDetail, articleEdit } from '@/api/publicService/index'; import ImageFileUpload from '@/components/ImageFileUpload/index.vue'; //图片文件上传 import WangEditor from '@/components/WangEditor/index.vue'; //富文本编辑器 const { proxy } = getCurrentInstance(); const tableData = ref([]); const tableLoading = ref(true); const total = ref(0); const dialogShow = ref(false); const dialogTitle = ref(''); const showSearch = ref(true); const allData = reactive({ formData: { articleType: 'notice', coverPhotosFileList: [], content: '', degist: '', title: '', }, queryParams: { pageNum: 1, pageSize: 10, title: undefined, articleType: 'notice', }, rulesForm: { title: [{ required: true, message: '请输入', trigger: 'blur' }], }, }); const { queryParams, formData, rulesForm } = toRefs(allData); /** 获取查询数据列表 */ function getDataList() { tableData.value = [ { title: '123', }, ]; tableLoading.value = false; // tableLoading.value = true; // articlePage(queryParams.value).then(response => { // tableData.value = response.data; // total.value = response.total; // tableLoading.value = false; // }); } /** 取消按钮 */ function cancelForm() { dialogShow.value = false; } /** 搜索按钮操作 */ function handleQuery() { queryParams.value.pageNum = 1; getDataList(); } /** 重置按钮操作 */ function resetQuery() { proxy.resetForm('queryRef'); handleQuery(); } /** 新增按钮操作 */ function handleAdd() { proxy.resetForm('formRef'); //清空表单 formData.value.content = ' '; dialogShow.value = true; dialogTitle.value = '新增通知公告'; } /** 修改按钮操作 */ function handleUpdate(row) { dialogShow.value = true; dialogTitle.value = '修改通知公告'; formData.value = row; // articleDetail(row.id).then(response => { // dialogShow.value = true; // dialogTitle.value = '修改通知公告'; // nextTick(() => { // formData.value = response.data; // }); // }); } /** 提交按钮 */ function submitForm() { // proxy.$refs['formRef'].validate(valid => { // if (valid) { // if (dialogTitle.value == '修改通知公告') { // articleEdit(formData.value).then(response => { // proxy.$modal.msgSuccess('修改成功'); // dialogShow.value = false; // getDataList(); // }); // } else { // if (formData.value.id) delete formData.value.id; // articleAdd(formData.value).then(response => { // proxy.$modal.msgSuccess('新增成功'); // dialogShow.value = false; // getDataList(); // }); // } // } // }); } /** 删除按钮操作 */ function handleDelete(row) { // const postIds = row.id; // proxy.$modal // .confirm('是否确认删除该数据项?') // .then(function () { // return articleDel(postIds); // }) // .then(() => { // getDataList(); // proxy.$modal.msgSuccess('删除成功'); // }) // .catch(() => {}); } onMounted(() => { getDataList(); }); </script>