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

2024-06-05 00:04
文章标签 分离 功能 预览 缩放 通知 增加 若依 公告

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

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

  • 前言
  • 开发通知公告

前言

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

开发通知公告

  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】若依分离版—增加通知公告预览功能

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


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

相关文章

Python的time模块一些常用功能(各种与时间相关的函数)

Python的time模块一些常用功能(各种与时间相关的函数)

《Python的time模块一些常用功能(各种与时间相关的函数)》Python的time模块提供了各种与时间相关的函数,包括获取当前时间、处理时间间隔、执行时间测量等,：本文主要介绍Python的... 目录1. 获取当前时间2. 时间格式化3. 延时执行4. 时间戳运算5. 计算代码执行时间6. 转换为指
阅读更多...
Android实现在线预览office文档的示例详解

Android实现在线预览office文档的示例详解

《Android实现在线预览office文档的示例详解》在移动端展示在线Office文档（如Word、Excel、PPT）是一项常见需求,这篇文章为大家重点介绍了两种方案的实现方法,希望对大家有一定的... 目录一、项目概述二、相关技术知识三、实现思路3.1 方案一：WebView + Office Onl
阅读更多...
Spring Security+JWT如何实现前后端分离权限控制

Spring Security+JWT如何实现前后端分离权限控制

《SpringSecurity+JWT如何实现前后端分离权限控制》本篇将手把手教你用SpringSecurity+JWT搭建一套完整的登录认证与权限控制体系,具有很好的参考价值,希望对大家... 目录Spring Security+JWT实现前后端分离权限控制实战一、为什么要用 JWT？二、JWT 基本结构
阅读更多...
Android实现两台手机屏幕共享和远程控制功能

Android实现两台手机屏幕共享和远程控制功能

《Android实现两台手机屏幕共享和远程控制功能》在远程协助、在线教学、技术支持等多种场景下,实时获得另一部移动设备的屏幕画面,并对其进行操作,具有极高的应用价值,本项目旨在实现两台Android手... 目录一、项目概述二、相关知识2.1 MediaProjection API2.2 Socket 网络
阅读更多...
Redis消息队列实现异步秒杀功能

Redis消息队列实现异步秒杀功能

《Redis消息队列实现异步秒杀功能》在高并发场景下,为了提高秒杀业务的性能,可将部分工作交给Redis处理,并通过异步方式执行,Redis提供了多种数据结构来实现消息队列,总结三种,本文详细介绍Re... 目录1 Redis消息队列1.1 List 结构1.2 Pub/Sub 模式1.3 Stream 结
阅读更多...
MySQL索引的优化之LIKE模糊查询功能实现

MySQL索引的优化之LIKE模糊查询功能实现

《MySQL索引的优化之LIKE模糊查询功能实现》：本文主要介绍MySQL索引的优化之LIKE模糊查询功能实现,本文通过示例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧... 目录一、前缀匹配优化二、后缀匹配优化三、中间匹配优化四、覆盖索引优化五、减少查询范围六、避免通配符开头七、使用外部搜索引擎八、分
阅读更多...
Android实现悬浮按钮功能

Android实现悬浮按钮功能

《Android实现悬浮按钮功能》在很多场景中,我们希望在应用或系统任意界面上都能看到一个小的“悬浮按钮”（FloatingButton）,用来快速启动工具、展示未读信息或快捷操作,所以本文给大家介绍... 目录一、项目概述二、相关技术知识三、实现思路四、整合代码4.1 Java 代码（MainActivi
阅读更多...
SpringBoot集成Milvus实现数据增删改查功能

SpringBoot集成Milvus实现数据增删改查功能

《SpringBoot集成Milvus实现数据增删改查功能》milvus支持的语言比较多,支持python,Java,Go,node等开发语言,本文主要介绍如何使用Java语言,采用springboo... 目录1、Milvus基本概念2、添加maven依赖3、配置yml文件4、创建MilvusClient
阅读更多...
使用Python开发一个带EPUB转换功能的Markdown编辑器

使用Python开发一个带EPUB转换功能的Markdown编辑器

《使用Python开发一个带EPUB转换功能的Markdown编辑器》Markdown因其简单易用和强大的格式支持,成为了写作者、开发者及内容创作者的首选格式,本文将通过Python开发一个Markd... 目录应用概览代码结构与核心组件1. 初始化与布局 (__init__)2. 工具栏 (setup_t
阅读更多...
SpringBoot实现微信小程序支付功能

SpringBoot实现微信小程序支付功能

《SpringBoot实现微信小程序支付功能》小程序支付功能已成为众多应用的核心需求之一,本文主要介绍了SpringBoot实现微信小程序支付功能,文中通过示例代码介绍的非常详细,对大家的学习或者工作... 目录一、引言二、准备工作（一）微信支付商户平台配置（二）Spring Boot项目搭建（三）配置文件
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2