若依RuoYi-Vue分离版—增加通知公告预览及缩放功能

2024-06-08 16:36
文章标签 javascript 分离 功能 vue 预览 frontend 缩放 通知 增加 若依 公告 ruoyi

本文主要是介绍若依RuoYi-Vue分离版—增加通知公告预览及缩放功能，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

若依RuoYi-Vue分离版—增加通知公告预览及缩放功能

  • 前言
  • 开发通知公告

前言

若依分离版的通知公告没有预览功能，想开发通知公告功能

开发通知公告

  1. 效果如下
    在这里插入图片描述
    在这里插入图片描述
  2. 具体开发内容

修改若依notice代码如下。
在这里插入图片描述

<template><div class="app-container"><el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px"><el-form-item label="公告标题" prop="noticeTitle"><el-inputv-model="queryParams.noticeTitle"placeholder="请输入公告标题"clearable@keyup.enter.native="handleQuery"/></el-form-item><el-form-item label="操作人员" prop="createBy"><el-inputv-model="queryParams.createBy"placeholder="请输入操作人员"clearable@keyup.enter.native="handleQuery"/></el-form-item><el-form-item label="类型" prop="noticeType"><el-select v-model="queryParams.noticeType" placeholder="公告类型" clearable><el-optionv-for="dict in dict.type.sys_notice_type":key="dict.value":label="dict.label":value="dict.value"/></el-select></el-form-item><el-form-item><el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button><el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button></el-form-item></el-form><el-row :gutter="10" class="mb8"><el-col :span="1.5"><el-buttontype="primary"plainicon="el-icon-plus"size="mini"@click="handleAdd"v-hasPermi="['system:notice:add']">新增</el-button></el-col><el-col :span="1.5"><el-buttontype="success"plainicon="el-icon-edit"size="mini":disabled="single"@click="handleUpdate"v-hasPermi="['system:notice:edit']">修改</el-button></el-col><el-col :span="1.5"><el-buttontype="danger"plainicon="el-icon-delete"size="mini":disabled="multiple"@click="handleDelete"v-hasPermi="['system:notice:remove']">删除</el-button></el-col><right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar></el-row><el-table v-loading="loading" :data="noticeList" @selection-change="handleSelectionChange"><el-table-column type="selection" width="55" align="center" /><el-table-column label="序号" align="center" prop="noticeId" width="100" /><el-table-columnlabel="公告标题"align="center"prop="noticeTitle":show-overflow-tooltip="true"/><el-table-column label="公告类型" align="center" prop="noticeType" width="100"><template slot-scope="scope"><dict-tag :options="dict.type.sys_notice_type" :value="scope.row.noticeType"/></template></el-table-column><el-table-column label="状态" align="center" prop="status" width="100"><template slot-scope="scope"><dict-tag :options="dict.type.sys_notice_status" :value="scope.row.status"/></template></el-table-column><el-table-column label="创建者" align="center" prop="createBy" width="100" /><el-table-column label="创建时间" align="center" prop="createTime" width="100"><template slot-scope="scope"><span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span></template></el-table-column><el-table-column label="操作" align="center" class-name="small-padding fixed-width"><template slot-scope="scope"><el-buttonsize="mini"type="text"icon="el-icon-edit"@click="handleUpdate(scope.row)"v-hasPermi="['system:notice:edit']">修改</el-button><el-buttonsize="mini"type="text"icon="el-icon-delete"@click="handleDelete(scope.row)"v-hasPermi="['system:notice:remove']">删除</el-button><el-buttonsize="mini"type="text"icon="el-icon-view"@click="openDetailDialog(scope.row.noticeId)">查看</el-button></template></el-table-column></el-table><paginationv-show="total>0":total="total":page.sync="queryParams.pageNum":limit.sync="queryParams.pageSize"@pagination="getList"/><!-- 添加或修改公告对话框 --><el-dialog :title="title" :visible.sync="open" width="780px" append-to-body><el-form ref="form" :model="form" :rules="rules" label-width="80px"><el-row><el-col :span="12"><el-form-item label="公告标题" prop="noticeTitle"><el-input v-model="form.noticeTitle" placeholder="请输入公告标题" /></el-form-item></el-col><el-col :span="12"><el-form-item label="公告类型" prop="noticeType"><el-select v-model="form.noticeType" placeholder="请选择公告类型"><el-optionv-for="dict in dict.type.sys_notice_type":key="dict.value":label="dict.label":value="dict.value"></el-option></el-select></el-form-item></el-col><el-col :span="24"><el-form-item label="状态"><el-radio-group v-model="form.status"><el-radiov-for="dict in dict.type.sys_notice_status":key="dict.value":label="dict.value">{{dict.label}}</el-radio></el-radio-group></el-form-item></el-col><el-col :span="24"><el-form-item label="内容"><editor v-model="form.noticeContent" :min-height="192"/></el-form-item></el-col></el-row></el-form><div slot="footer" class="dialog-footer"><el-button type="primary" @click="submitForm">确 定</el-button><el-button @click="cancel">取 消</el-button></div></el-dialog><!--通知公告详情 --><el-dialog :title="form.noticeTitle":visible.sync="openDetail"width="800px" append-to-body:fullscreen="dialogFull"custom-class="adTextDetailDialogClass"><div slot="title"><div class="avue-crud__dialog__header"><span class="el-dialog__title"><span style="display:inline-block;background-color: #3478f5;width:3px;height:20px;margin-right:5px;float: left;margin-top:2px"></span>{{ form.noticeTitle }}</span><!--     全屏缩放按钮     --><div class="avue-crud__dialog__menu" @click="dialogFull? dialogFull=false: dialogFull=true"><i class="el-icon-full-screen"></i></div></div></div><div style="margin-top:-20px;margin-bottom:10px;"><el-tag size="mini" effect="dark" type="warning" v-if="form.noticeType==2">公告</el-tag><el-tag size="mini" effect="dark" v-else>信息</el-tag><span style="margin-left:20px;">{{form.createTime}}</span></div><div v-loading="loadingDetail" class="content"><div v-html="form.noticeContent" style="margin-left:0px;margin-right:76px" class="ql-editor"></div></div><div slot="footer" class="dialog-footer"><el-button type="primary" @click="closeDetail"> 关 闭 </el-button></div></el-dialog></div>
</template><script>
import { listNotice, getNotice, delNotice, addNotice, updateNotice } from "@/api/system/notice";
import ZDialog from '@/components/ZDialog'
import ZDialog2 from '@/components/ZDialog2'
export default {name: "Notice",dicts: ['sys_notice_status', 'sys_notice_type'],components: {ZDialog,ZDialog2},data() {return {// 全屏缩放按钮dialogFull:false,// 详情加载loadingDetail: false,// 打开详情openDetail: false,// 遮罩层loading: true,// 选中数组ids: [],// 非单个禁用single: true,// 非多个禁用multiple: true,// 显示搜索条件showSearch: true,// 总条数total: 0,// 公告表格数据noticeList: [],// 弹出层标题title: "",// 是否显示弹出层open: false,// 查询参数queryParams: {pageNum: 1,pageSize: 10,noticeTitle: undefined,createBy: undefined,status: undefined},// 表单参数form: {},// 表单校验rules: {noticeTitle: [{ required: true, message: "公告标题不能为空", trigger: "blur" }],noticeType: [{ required: true, message: "公告类型不能为空", trigger: "change" }]}};},created() {this.getList();},methods: {/** 查询公告列表 */getList() {this.loading = true;listNotice(this.queryParams).then(response => {this.noticeList = response.rows;this.total = response.total;this.loading = false;});},// 取消按钮cancel() {this.open = false;this.reset();},// 表单重置reset() {this.form = {noticeId: undefined,noticeTitle: undefined,noticeType: undefined,noticeContent: undefined,status: "0"};this.resetForm("form");},/** 搜索按钮操作 */handleQuery() {this.queryParams.pageNum = 1;this.getList();},/** 重置按钮操作 */resetQuery() {this.resetForm("queryForm");this.handleQuery();},// 多选框选中数据handleSelectionChange(selection) {this.ids = selection.map(item => item.noticeId)this.single = selection.length!=1this.multiple = !selection.length},/** 新增按钮操作 */handleAdd() {this.reset();this.open = true;this.title = "添加公告";},/** 修改按钮操作 */handleUpdate(row) {this.reset();const noticeId = row.noticeId || this.idsgetNotice(noticeId).then(response => {this.form = response.data;this.open = true;this.title = "修改公告";});},// 打开信息详情openDetailDialog(id) {this.dialogVisible2 = true;this.openDetail = true;this.loadingDetail = true;getNotice(id).then(response => {this.form = response.data;this.openDetail = true;this.loadingDetail = false;});},// 取消按钮closeDetail() {this.titleDetail = "详情";this.openDetail = false;this.reset();},/** 提交按钮 */submitForm: function() {this.$refs["form"].validate(valid => {if (valid) {if (this.form.noticeId != undefined) {updateNotice(this.form).then(response => {this.$modal.msgSuccess("修改成功");this.open = false;this.getList();});} else {addNotice(this.form).then(response => {this.$modal.msgSuccess("新增成功");this.open = false;this.getList();});}}});},/** 删除按钮操作 */handleDelete(row) {const noticeIds = row.noticeId || this.idsthis.$modal.confirm('是否确认删除公告编号为"' + noticeIds + '"的数据项？').then(function() {return delNotice(noticeIds);}).then(() => {this.getList();this.$modal.msgSuccess("删除成功");}).catch(() => {});}}
};
</script><style lang="scss" scoped>
/*  dialog*/
::v-deep .el-dialog {margin-top: 0vh !important;
}
::v-deep .el-dialog__header {padding: 15px 20px 15px;
}
::v-deep .el-dialog__headerbtn{top: 15px;
}/*dialog header*/
::v-deep .el-dialog__header{background: #e3eaed;
}
::v-deep .avue-crud__dialog__header {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;
}
::v-deep .el-dialog__title {color: rgba(0,0,0,.85);font-weight: 500;word-wrap: break-word;
}
/*全屏缩放图标样式*/
::v-deep .avue-crud__dialog__menu {padding-right: 20px;float: left;
}
::v-deep .avue-crud__dialog__menu i {color: #909399;font-size: 15px;
}
::v-deep .el-icon-full-screen{cursor: pointer;
}
::v-deep .el-icon-full-screen:before {content: "\e719";
}//头部固定
::v-deep .adTextDetailDialogClass .el-dialog__body{max-height: calc(100vh - 150px);overflow: auto;border-top:1px solid #dfdfdf;border-bottom:1px solid #dfdfdf;
}
::v-deep .adTextDetailDialogClass .el-dialog{position: fixed;height:fit-content;left:0 !important;right:0 !important;top:0 !important;bottom:0 !important;margin:auto !important;
}</style>

参考文章
【1】若依分离版—增加通知公告预览功能

这篇关于若依RuoYi-Vue分离版—增加通知公告预览及缩放功能的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1042721。

相关文章

Knife4j+Axios+Redis前后端分离架构下的 API 管理与会话方案(最新推荐)

Knife4j+Axios+Redis前后端分离架构下的 API 管理与会话方案(最新推荐)

《Knife4j+Axios+Redis前后端分离架构下的API管理与会话方案(最新推荐)》本文主要介绍了Swagger与Knife4j的配置要点、前后端对接方法以及分布式Session实现原理,... 目录一、Swagger 与 Knife4j 的深度理解及配置要点Knife4j 配置关键要点1.Spri
阅读更多...
mysql表操作与查询功能详解

mysql表操作与查询功能详解

《mysql表操作与查询功能详解》本文系统讲解MySQL表操作与查询,涵盖创建、修改、复制表语法,基本查询结构及WHERE、GROUPBY等子句,本文结合实例代码给大家介绍的非常详细,感兴趣的朋友跟随... 目录01.表的操作1.1表操作概览1.2创建表1.3修改表1.4复制表02.基本查询操作2.1 SE
阅读更多...
Golang如何用gorm实现分页的功能

Golang如何用gorm实现分页的功能

《Golang如何用gorm实现分页的功能》：本文主要介绍Golang如何用gorm实现分页的功能方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录背景go库下载初始化数据【1】建表【2】插入数据【3】查看数据4、代码示例【1】gorm结构体定义【2】分页结构体
阅读更多...
前端如何通过nginx访问本地端口

前端如何通过nginx访问本地端口

《前端如何通过nginx访问本地端口》：本文主要介绍前端如何通过nginx访问本地端口的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、nginx安装1、下载（1）下载地址（2）系统选择（3）版本选择2、安装部署（1）解压（2）配置文件修改（3）启动（4）
阅读更多...
MySQL主从复制与读写分离的用法解读

MySQL主从复制与读写分离的用法解读

《MySQL主从复制与读写分离的用法解读》：本文主要介绍MySQL主从复制与读写分离的用法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、主从复制mysql主从复制原理实验案例二、读写分离实验案例安装并配置mycat 软件设置mycat读写分离验证mycat读
阅读更多...
Java Web实现类似Excel表格锁定功能实战教程

Java Web实现类似Excel表格锁定功能实战教程

《JavaWeb实现类似Excel表格锁定功能实战教程》本文将详细介绍通过创建特定div元素并利用CSS布局和JavaScript事件监听来实现类似Excel的锁定行和列效果的方法,感兴趣的朋友跟随... 目录1. 模拟Excel表格锁定功能2. 创建3个div元素实现表格锁定2.1 div元素布局设计2.
阅读更多...
HTML中meta标签的常见使用案例(示例详解)

HTML中meta标签的常见使用案例(示例详解)

《HTML中meta标签的常见使用案例(示例详解)》HTMLmeta标签用于提供文档元数据,涵盖字符编码、SEO优化、社交媒体集成、移动设备适配、浏览器控制及安全隐私设置,优化页面显示与搜索引擎索引... 目录html中meta标签的常见使用案例一、基础功能二、搜索引擎优化（seo）三、社交媒体集成四、移动
阅读更多...
HTML input 标签示例详解

HTML input 标签示例详解

《HTMLinput标签示例详解》input标签主要用于接收用户的输入，随type属性值的不同，变换其具体功能,本文通过实例图文并茂的形式给大家介绍HTMLinput标签，感兴趣的朋友一... 目录通用属性输入框单行文本输入框 text密码输入框 password数字输入框 number电子邮件输入编程框
阅读更多...
HTML img标签和超链接标签详细介绍

HTML img标签和超链接标签详细介绍

《HTMLimg标签和超链接标签详细介绍》：本文主要介绍了HTML中img标签的使用，包括src属性（指定图片路径）、相对/绝对路径区别、alt替代文本、title提示、宽高控制及边框设置等，详细内容请阅读本文，希望能对你有所帮助... 目录img 标签src 属性alt 属性title 属性width/h
阅读更多...
CSS3打造的现代交互式登录界面详细实现过程

CSS3打造的现代交互式登录界面详细实现过程

《CSS3打造的现代交互式登录界面详细实现过程》本文介绍CSS3和jQuery在登录界面设计中的应用,涵盖动画、选择器、自定义字体及盒模型技术,提升界面美观与交互性,同时优化性能和可访问性，感兴趣的朋... 目录1. css3用户登录界面设计概述1.1 用户界面设计的重要性1.2 CSS3的新特性与优势1.
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2