hn_cloud_web/czl-web/pages/announcement/AnnouncementView.html

300 lines
10 KiB
HTML
Raw Normal View History

2025-11-27 16:55:35 +08:00
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>系统公告表单</title>
<link rel="stylesheet" href="../../layui-v2.8.18/layui/css/layui.css" media="all"/>
</head>
<style>
.layui-form-label {
position: relative;
float: left;
display: block;
padding: 9px 15px;
width: 100%;
font-weight: 400;
line-height: 20px;
text-align: right;
}
#commit {
position: fixed;
bottom: 20px;
right: 20px;
}
.layui-upload-list {
margin: 11px 0;
width: 84.5%;
margin-left: 2%;
}
.layui-form-select {
position: relative;
color: #5f5f5f;
width: 80%;
}
#changeType {
width: 160px;
margin-left: -12.5%;
height: 26px;
color: #1AA094;
border: 1px solid #dedede;
padding: 5px;
text-align: center;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
cursor: pointer;
}
.layui-this {
background: #17BAAA !important;
color: white !important;
}
.tox .tox-notification--warn, .tox .tox-notification--warning {
background-color: #fff5cc;
border-color: #fff0b3;
color: #222f3e;
display: none !important;
}
</style>
<body>
<form class="layui-form" action="" onsubmit="return false" style="padding:10px">
<div class="layui-form-item" style="margin-top: 1%;margin-left: 15%;">
<div class="layui-col-md10">
<div class="layui-card">
<blockquote class="layui-elem-quote">
<h2 id="title"></h2>
</blockquote>
<div class="layui-card-body" style="background-color: #dedede;">
<div id="title_view" style="margin-top: 7px;">
</div>
</div>
<div class="layui-panel" style="margin-top: 10px;margin-bottom: 10px;">
<div class="layui-card-body">
<div id="content">
</div>
</div>
</div>
</div>
</div>
<div class="layui-form-item" style="margin-top: 1%;width: 83%;">
<table id="fileDemo" lay-filter="fileDemo" style="width: 100%;"></table>
</div>
</div>
</form>
</body>
</html>
<script type="text/html" id="fileBarDemo">
<a lay-event="download" style="color: #009688;cursor: pointer;font-size: 15px">下载</a>
</script>
<script src="../../js/jquery/jquery-3.6.0.js"></script>
<script src="../../layui-v2.8.18/layui/layui.js"></script>
<script type="text/javascript" src="../../js/jq.js"></script>
<script src="../../js/common_methon.js"></script>
2025-12-09 18:44:29 +08:00
<script type="text/javascript" src="../../../public/public.js"></script>
2025-11-27 16:55:35 +08:00
<script type="text/javascript" src="../../js/publicJs.js"></script>
<script type="text/javascript" src="../../js/select.js"></script>
<script type="text/javascript" src="../../js/my/permission.js"></script>
<script type="text/javascript" src="../../js/tinymce.min.js" referrerpolicy="origin"></script>
<script type="text/javascript">
layui.config({
base: '../../js/layuiModules/', // 第三方模块所在目录
version: 'v1.6.4' // 插件版本号
}).extend({
soulTable: 'notice,layNotify', // 模块
});
var id = localStorage.getItem("announcementId");
var form;
var table;
var newData;
var notice;
var layNotify;
layui.use(['table', 'form', 'notice', 'layNotify',], function () {
table = layui.table;
form = layui.form;
notice = layui.notice;
layNotify = layui.layNotify;
getData();
});
function getData() {
$.ajax({
type: 'post',
2025-12-09 18:44:29 +08:00
url: czl_ht_url + '/announcement/getAnnouncementView',
2025-11-27 16:55:35 +08:00
dataType: 'json', // 服务器返回数据类型
async: false,
data: {
id: id,
},
success: function (data) {
var resMsg = data.resMsg;
if ("数据获取成功" == resMsg) {
$("#content").empty();
$("#title_view").empty();
$("#title").empty();
let info = data.obj.announcementBean;
$("#content").append(info.content)
$("#title_view").append("发布人员:" + info.releasePerson + "&nbsp;&nbsp;&nbsp;&nbsp;消息类型:" + info.type + "&nbsp;&nbsp;&nbsp;&nbsp;发布时间:" + info.releaseTime + "&nbsp;&nbsp;&nbsp;&nbsp;接收人员:" + info.acceptGroup)
$("#title").append(info.title)
showTable(info.uuid);
}
},
error: function (err) {
console.log("获取工程下拉列表出错:", err);
}
});
}
function showTable(id) {
//渲染表格
table.render({
elem: '#fileDemo'
2025-12-09 18:44:29 +08:00
, url: czl_ht_url + '/announcement/getFileList' //数据接口
2025-11-27 16:55:35 +08:00
, method: 'post' //方式默认是get
, toolbar: 'default' //开启工具栏,此处显示默认图标,可以自定义模板,详见文档
, where: {
id: id,
} //post请求必须加where post请求需要的参数
, cellMinWidth: 80
, cols: [[ //表头
{
field: 'number', width: 80, title: '序号', align: 'center', type: 'numbers'
}
, {field: 'fileName', align: 'center', title: '文件名'}
, {field: 'fileSize', align: 'center', title: '大小'}
, {field: 'uploadTime', align: 'center', title: '上传时间'}
, {field: 'userName', align: 'center', title: '上传人员'}
, {field: 'remark', align: 'center', title: '备注内容'}
, {title: '操作', toolbar: '#fileBarDemo', align: 'center'} //自定义操作栏模板
]]
, id: 'fileDemo'
, page: true //开启分页
, loading: true //数据加载中。。。
, limits: [5, 10, 20, 100] //一页选择显示3,5或10条数据
, limit: 10 //一页显示5条数据
, response: {
statusCode: 200 //规定成功的状态码默认0
}, parseData: function (res) { //将原始数据解析成 table 组件所规定的数据res为从url中get到的数据
let result;
if (res.data !== '' && res.data != null && res.data !== "null") {
if (this.page.curr) {
result = res.data.slice(this.limit * (this.page.curr - 1), this.limit * this.page.curr);
} else {
result = res.data.slice(0, this.limit);
}
}
return {
"code": res.code, //解析接口状态
"msg": res.msg, //解析提示文本
"count": res.count, //解析数据长度
"data": result, //解析数据列表
};
},
toolbar: "#toolbar"
});
//监听工具条
table.on('tool(fileDemo)', function (obj) {
var id = obj.config.id;
var data = obj.data; //当前行数据
var layEvent = obj.event; //当前点击的事件名
if (layEvent === 'download') {
var truePath;
// window.location.href = '/download/download?filePath=' + data.filePath;
if (data.filePath.indexOf("http") != -1) {
truePath = data.filePath;
} else {
2025-12-09 18:44:29 +08:00
truePath = czl_ht_url + "/statics/" + data.filePath;
2025-11-27 16:55:35 +08:00
}
var fileName = data.fileName;
var data = {
fileName: fileName,
filePath: data.filePath,
}
2025-12-09 18:44:29 +08:00
var formUrl = czl_ht_url + "/announcement/insertFileDownLoadRecord";
2025-11-27 16:55:35 +08:00
// 加载提示
$.ajax({
type: 'post',
async: false, // 默认异步true,false表示同步
url: formUrl, // 请求地址
contentType: "application/json; charset=utf-8",
dataType: 'json', // 服务器返回数据类型
data: JSON.stringify(data), //获取提交的表单字段
success: function (data) {
},
error: function (XMLHttpRequest, textStatus, e) {
layer.msg('数据请求发生异常,请稍后重试', {icon: 16, scrollbar: false});
top.layer.close(addLoadingMsg); //再执行关闭
return false;
}
});
download(truePath, data.fileName);
}
});
}
/**
* 获取 blob
* @param {String} url 目标文件地址
* @return {Promise}
*/
function getBlob(url) {
return new Promise(resolve => {
const xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'blob';
xhr.onload = () => {
if (xhr.status === 200) {
resolve(xhr.response);
}
};
xhr.send();
});
}
/**
* 保存
* @param {Blob} blob
* @param {String} filename 想要保存的文件名称
*/
function saveAs(blob, filename) {
if (window.navigator.msSaveOrOpenBlob) {
navigator.msSaveBlob(blob, filename);
} else {
const link = document.createElement('a');
const body = document.querySelector('body');
link.href = window.URL.createObjectURL(blob);
link.download = filename;
// fix Firefox
link.style.display = 'none';
body.appendChild(link);
link.click();
body.removeChild(link);
window.URL.revokeObjectURL(link.href);
}
}
/**
* 下载
* @param {String} url 目标文件地址
* @param {String} filename 想要保存的文件名称
*/
function download(url, filename) {
getBlob(url).then(blob => {
saveAs(blob, filename);
});
}
</script>