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

818 lines
31 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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;
}
/* 自定义滚动条样式 */
/* WebKit 浏览器 */
::-webkit-scrollbar {
width: 8px; /* 滚动条宽度 */
}
::-webkit-scrollbar-track {
background-color: #f1f1f1; /* 滚动条背景色 */
}
::-webkit-scrollbar-thumb {
background-color: #888; /* 滚动条滑块颜色 */
}
#commit {
position: fixed;
bottom: 20px;
right: 20px;
}
.layui-table-tool {
display: none
}
.layui-upload-list {
margin: 11px 0;
width: 84.5%;
margin-left: 2%;
}
.layui-form-select {
position: relative;
color: #5f5f5f;
width: 80%;
}
.marked {
background-color: yellow;
}
#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">
<div>
<div class="layui-form-item" style="margin-top: 1%;">
<div class="layui-input-inline">
<label class="layui-form-label"><i class="tip-required"
style="color: red;font-size: 20px">*</i>公告标题:</label>
</div>
<div class="layui-input-inline" style="border: 0px dashed dimgrey;width: 74%;">
<input class="title layui-input" id="title" name="title" maxlength="50">
</div>
</div>
<div class="layui-form-item" style="margin-top: 1%;">
<div class="layui-input-inline">
<label class="layui-form-label"><i class="tip-required"
style="color: red;font-size: 20px">*</i>公告类型:</label>
</div>
<div class="layui-input-inline" style="border: 0px dashed dimgrey;width: 74%;">
<select id="type" name="type" class="layui-select" lay-search=""></select>
</div>
<div class="layui-input-inline" id="changeType" onclick="changeType()">
<span>类型管理</span>
</div>
</div>
<div class="layui-form-item" style="margin-top: 1%;">
<div class="layui-input-inline" style="width: 540px;">
<label class="layui-form-label"><i class="tip-required"
style="color: red;font-size: 20px">*</i>可见范围:(部分人员可见需要勾选具体人员,全体人员可见直接跳过)</label>
</div>
</div>
<div class="layui-form-item" style="margin-top: 1%;">
<div class="layui-tab layui-tab-card" lay-filter="test-hash"
style="width: 78.5%;margin-left: 9%;margin-top: 1%;">
<ul class="layui-tab-title">
<li class="layui-this" lay-id="1">所有人员可见</li>
<li lay-id="2">部分人员可见</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show"></div>
<div class="layui-tab-item">
<div class="layui-container">
<div class="layui-row">
<div class="layui-col-md3" style="overflow: auto; height: 500px;">
<div class="layui-card">
<div class="layui-card-header">组织架构</div>
<div class="layui-card-body" style="height: 400px; overflow: auto;">
<!-- 左侧组织架构树 -->
<ul id="orgTree" class="ztree"></ul>
</div>
</div>
</div>
<div class="layui-col-md5">
<div style="overflow-y: auto; height: 500px;overflow-x: hidden;">
<table id="test_demo" lay-filter="test_demo" style="padding: 10px"></table>
</div>
</div>
<div class="layui-col-md2">
<div class="layui-card-header">
<span style="margin-left: 30px;">已选择人员</span>
<span onclick="cleanPersonGroup()"
style="color: #17BAAA;float: right;cursor: pointer">清空</span>
</div>
<div class="layui-card-body" id="personDiv"
style="overflow-y: auto;height: 500px;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="layui-form-item" style="margin-top: 1%;">
<div class="layui-input-inline">
<label class="layui-form-label"><i class="tip-required"
style="color: red;font-size: 20px">*</i>公告详情:</label>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block" style="margin-left: 9%; width: 78.5%; min-height: 36px;border-radius: 0px">
<textarea id="mytextarea"></textarea>
</div>
</div>
<div class="layui-form-item" style="margin-top: 1%;">
<div class="layui-input-inline" style="width:80%">
<label class="layui-form-label" style="width:190px">上传附件:</label>
<button type="button" class="layui-btn" id="ID-upload-demo-files">选择多文件</button>
<span style="color:red;margin-left: 100px;">支持格式xls .xlsx .doc .docx .pdf .pptx单个文件不能超过20MB</span>
</div>
</div>
<div class="layui-form-item" style="margin-bottom: 90px;">
<div class="layui-input-block">
<div class="layui-upload-list">
<table class="layui-table">
<colgroup>
<col width="250">
<col width="150">
<col width="260">
<col width="150">
</colgroup>
<thead>
<th>文件名</th>
<th>大小</th>
<th>上传进度</th>
<th>操作</th>
</thead>
<tbody id="ID-upload-demo-files-list"></tbody>
</table>
</div>
</div>
</div>
</div>
<button type="submit" class="layui-btn subBtn" id="commit" lay-submit lay-filter="formDemo">提交</button>
</form>
</body>
</html>
<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>
<script type="text/javascript" src="../../../public/public.js"></script>
<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 form;
var table;
var newData;
var notice;
var layNotify;
var upload;
var element;
var tree;
var transfer;
var transferArray = [];
var finalData;
var personType = '1';
var uuid = generateUUID();
let checkAll = false;
var proId = "";
let mns = [];
let ctrUpdateTable;
var code = "tabid=1";
layui.use(['table', 'form', 'notice', 'layNotify', 'upload', 'element', 'tree', 'transfer'], function () {
table = layui.table;
form = layui.form;
notice = layui.notice;
layNotify = layui.layNotify;
upload = layui.upload;
element = layui.element;
tree = layui.tree;
transfer = layui.transfer;
// hash 地址定位
var hashName = 'tabid'; // hash 名称
var layid = location.hash.replace(new RegExp('^#' + hashName + '='), ''); // 获取 lay-id 值
// 初始切换
element.tabChange('test-hash', layid);
// 切换事件
element.on('tab(test-hash)', function (obj) {
code = hashName + '=' + this.getAttribute('lay-id');
location.hash = code
if (code == "tabid=2") {
personType = '0';
mns = [];
showTable()
} else {
mns = [];
personType = '1'
}
console.log(personType)
});
/**
* 加载左侧公司-分公司-项目部树
*/
$.ajax({
type: 'post',
url: czl_ht_url + '/announcement/tree',//数据接口
dataType: 'json', // 服务器返回数据类型
async: true,
data: {},
success: function (data) {
personType = '0';
var result = [];
for (let i = 0; i < data.length; i++) {
if (data[i].level == '0') {
data[i].spread = true
result.push(data[i])
}
}
for (let i = 0; i < result.length; i++) {
result[i].children = []
for (let j = 0; j < data.length; j++) {
if (result[i].id == data[j].parentId) {
data[j].spread = true
result[i].children.push(data[j])
}
}
}
for (let i = 0; i < result.length; i++) {
//root
for (let k = 0; k < result[i].children.length; k++) {
//parent = 0
result[i].children[k].children = []
for (let j = 0; j < data.length; j++) {
if (result[i].children[k].id == data[j].parentId) {
data[j].spread = true
result[i].children[k].children.push(data[j])
}
}
}
}
tree.render({
elem: '#orgTree'
, data: result
, spread: true
, showLine: false // 是否开启连接线
, onlyIconControl: true
, click: function (obj) {
personType = '0';
var level = obj.data.level;
proId = obj.data.id;
showTable();
}
});
},
error: function (err) {
console.log("获取工程下拉列表出错:", err);
}
});
/**
* 初始化tinymce插件
*/
tinymce.init({
selector: '#mytextarea',
language: 'zh_CN',
plugins: [
'a11ychecker', 'advlist', 'advcode', 'advtable', 'autolink', 'checklist', 'export',
'lists', 'link', 'image', 'charmap', 'preview', 'anchor', 'searchreplace', 'visualblocks',
'powerpaste', 'fullscreen', 'formatpainter', 'insertdatetime', 'media', 'table', 'help', 'wordcount'
],
toolbar: 'undo redo | formatpainter casechange blocks | bold italic backcolor | ' +
'alignleft aligncenter alignright alignjustify | ' +
'bullist numlist checklist outdent indent | removeformat | a11ycheck code table help',
});
/**
* 上传方法
*/
uploadFile();
// 监听上传按钮点击事件
document.getElementById('commit').onclick = function () {
/**
* 获取上传表格是否有数据,决定是否走上传方法
* @type {HTMLElement}
*/
var fileTable = document.getElementById('ID-upload-demo-files-list');
var rows = fileTable.getElementsByTagName('tr');
var filesToUpload = false;
if (rows.length > 0) {
filesToUpload = true;
}
if(filesToUpload){
uploadFile();
}else {
var tf = checkData();
if (tf){
addInfo();
}
}
};
upload.render();
/**
* 公告类型下拉框
*/
getAnnouncementType(form, "");
});
// 标注选中节点
function markSelectedNode(id) {
// 先移除之前的标记样式
var prevSelectedNode = document.querySelector('.selected-node');
if (prevSelectedNode) {
prevSelectedNode.classList.remove('selected-node');
}
// 根据id找到对应的节点元素
var selectedNode = document.querySelector('[data-id="' + id + '"]');
if (selectedNode) {
// 给选中的节点添加标记样式
selectedNode.classList.add('selected-node');
}
}
/**
* 检查公告标题是否存在
* @returns {string}
*/
function checkTitle() {
var code = 'success';
$.ajax({
type: 'post',
url: czl_ht_url + '/announcement/checkTitle',
dataType: 'text', // 服务器返回数据类型
async: false,
data: {
title: $("#title").val(),
},
success: function (data) {
if ("success" == data) {
code = 'success';
} else {
code = 'false';
}
},
error: function (err) {
code = 'false';
console.log("检查公告标题是否存在出错:", err);
}
});
return code;
}
/**
* 上传附件
*/
function uploadFile() {
// 制作多文件上传表格
var uploadListIns = upload.render({
elem: '#ID-upload-demo-files',
elemList: $('#ID-upload-demo-files-list'), // 列表元素对象
url: czl_ht_url + '/announcement/upload', // 实际使用时改成您自己的上传接口即可。
accept: 'file', // 只允许上传文件
acceptMime: '.rar,.zip,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/pdf',
exts: 'xls|xlsx|doc|docx|pdf|pptx', // 只允许上传指定格式的文件
size: 20 * 1024, // 限制文件大小,单位 KB
multiple: true,
number: 10,
auto: false,
bindAction: '#commit',
before: function (obj) {
// 携带工程ID传入后端
this.data = {
associaId: uuid,
};
var tf = checkData();
if (!tf){
return false;
}
},
choose: function (obj) {
var that = this;
var files = this.files = obj.pushFile(); // 将每次选择的文件追加到文件队列
// 读取本地文件
obj.preview(function (index, file, result) {
var tr = $(['<tr id="upload-' + index + '">',
'<td>' + file.name + '</td>',
'<td>' + (file.size / 1024 / 1024).toFixed(1) + 'MB</td>',
'<td><div class="layui-progress" lay-filter="progress-demo-' + index + '"><div class="layui-progress-bar" lay-percent=""></div></div></td>',
'<td>',
'<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>',
'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>',
'</td>',
'</tr>'].join(''));
// 单个重传
tr.find('.demo-reload').on('click', function () {
obj.upload(index, file);
});
// 删除
tr.find('.demo-delete').on('click', function () {
delete files[index]; // 删除对应的文件
tr.remove(); // 删除表格行
// 清空 input file 值,以免删除后出现同名文件不可选
uploadListIns.config.elem.next()[0].value = '';
});
that.elemList.append(tr);
element.render('progress'); // 渲染新加的进度条组件
});
},
done: function (res, index, upload) { // 成功的回调
var that = this;
// if(res.code == 0){ // 上传成功
var tr = that.elemList.find('tr#upload-' + index)
var tds = tr.children();
tds.eq(3).html(''); // 清空操作
delete this.files[index]; // 删除文件队列已经上传成功的文件
return;
//}
this.error(index, upload);
},
allDone: function (obj) { // 多文件上传完毕后的状态回调
console.log(obj)
reloadTip("上传", "文件上传成功", 'success');
addInfo();
},
error: function (index, upload) { // 错误回调
var that = this;
var tr = that.elemList.find('tr#upload-' + index);
var tds = tr.children();
// 显示重传
tds.eq(3).find('.demo-reload').removeClass('layui-hide');
reloadTip("上传", "文件上传失败", 'error');
},
progress: function (n, elem, e, index) { // 注意index 参数为 layui 2.6.6 新增
element.progress('progress-demo-' + index, n + '%'); // 执行进度条。n 即为返回的进度百分比
}
});
}
function showTable() {
ctrUpdateTable = table.render({
elem: '#test_demo'
, test: '#test_demo'
, url: czl_ht_url + '/announcement/getUserList' //数据接口
, method: 'post' //方式默认是get
, toolbar: 'default' //开启工具栏,此处显示默认图标,可以自定义模板,详见文档
, where: {
id: proId
} //post请求必须加where post请求需要的参数
, cellMinWidth: 80
, cols: [[ //表头
{type: 'checkbox', title: '复选框', field: 'allCheck', align: 'center'},
{field: 'userName', align: 'center', title: '用户名称'},
]],
done: function (res, curr, count) {
console.log(res);
let len = res.data.length; // 获取当前页面的条数
let chooseNum = 0; //记录当前页选中的数据行数
if (checkAll) {
$.each(res.list, function (idx, item) {
let flag = true;
for (let mn of mns) {
if (mn.userId == item.userId) {
flag = false;
}
}
if (flag) {
mns.push(item);
}
});
}
$.each(res.data, function (index, val) {
for (let mn of mns) {
if (mn.userId == val.userId) {
$('tr[data-index=' + index + '] input[type="checkbox"]').prop('checked', true);
chooseNum++;
}
}
//刷新checkbox选择框渲染
form.render('checkbox');
});
if (len !== 0 && chooseNum === len) {//表示该页全选
//全选按钮样式回显
$('input[lay-filter="layTableAllChoose"]').prop('checked', true);
$('input[lay-filter="layTableAllChoose"]').next().addClass('layui-form-checked');
}
checkPermission();
if (mns != null && mns.length > 0) {
updatePersonGroups(); // 更新右侧学员列表
}
}
, id: 'menuTable'
, page: true //开启分页
, loading: true //数据加载中。。。
, limits: [5, 10, 20] //一页选择显示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('checkbox(test_demo)', function (obj) {
var id = obj.config.id;
var checkStatus = table.checkStatus(id);
if (obj.checked) {
//选中逻辑处理
if (obj.type === "one") {
mns.push(obj.data);
} else {
let datas = checkStatus.data;
$.each(datas, function (idx, item) {
let flag = true;
for (let mn of mns) {
if (mn.userId == item.userId) {
flag = false;
}
}
if (flag) {
mns.push(item);
}
});
}
} else {
//取消选中逻辑处理
if (obj.type === "one") {
//获取数组中所在的下标
let index = mns.findIndex(item => item.userId == obj.data.userId);
//根据下标删除删除的长度为1
mns.splice(index, 1);
} else {
let datas = table.getData(id);
$.each(datas, function (idx, item) {
let index = jQuery.inArray(item, mns);
mns.splice(index, 1);
});
}
}
console.info(mns);
//调用右侧更新列表事件
updatePersonGroups();
});
}
/**
* 上传表单
*/
function addInfo() {
var userIdArray = [];
if (personType == '0') {
for (let i = 0; i < mns.length; i++) {
userIdArray.push(mns[i].userId)
}
}
var tip = '保存';
var data = {
uuid: uuid,
title: $("#title").val(),
type: $("#type").val(),
content: tinyMCE.activeEditor.getContent(),
personType: code == 'tabid=2' ? "0" : "1",
userId: userIdArray.length == 0 ? "" : userIdArray.join(","),
}
var formUrl = czl_ht_url + "/announcement/addAnnouncementInfo";
// 加载提示
var addLoadingMsg = top.layer.msg('数据上传中,请稍候...', {
icon: 16,
scrollbar: false,
time: 0,
shade: [0.8, '#393D49']
});
$.ajax({
type: 'post',
async: false, // 默认异步true,false表示同步
url: formUrl, // 请求地址
contentType: "application/json; charset=utf-8",
dataType: 'json', // 服务器返回数据类型
data: JSON.stringify(data), //获取提交的表单字段
success: function (data) {
if (data.resMsg == "发起成功") {
top.layer.close(addLoadingMsg); //再执行关闭
reloadTip(tip + "提示", tip + "成功", "success");
setTimeout(function () {
parent.layer.closeAll();
window.parent.location.reload();
}, 2000);
} else {
top.layer.close(addLoadingMsg); //再执行关闭
reloadTip(tip + "提示", tip + "失败", "error");
}
},
error: function (XMLHttpRequest, textStatus, e) {
layer.msg('数据请求发生异常,请稍后重试', {icon: 16, scrollbar: false});
top.layer.close(addLoadingMsg); //再执行关闭
}
});
}
function changeType() {
var index = layer.open({
title: ['分类管理', 'color:#3B70A1;background-color:#E8ECEB;font-size:20px'],
type: 2,
content: "./classificationManagement.html",
area: ['90%', '95%'],
maxmin: false,
btn: ['确定'],
success: function (layero, index) {
},
yes: function (index, layero) {
//提交子页面时执行
// 获取弹出层中的form表单元素
var formSubmit = layer.getChildFrame('form', index);
// 查找class样式为submitBtn的按钮
let submited = formSubmit.find('button.subBtn');
// 触发点击事件,会对表单进行验证,验证成功则提交表单,失败则返回错误信息
submited.click();
},
cancel: function (index, layero) {
getAnnouncementType(form, "");
}
});
}
function reloadTip(tip, message, type) {
layNotify.notice({
title: tip + "提示",
type: type,
message: message
});
}
function generateUUID() {
var d = new Date().getTime();
if (window.performance && typeof window.performance.now === "function") {
d += performance.now(); // 使用高精度时间来增加熵
}
var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
var r = (d + Math.random() * 16) % 16 | 0;
d = Math.floor(d / 16);
return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);
});
return uuid;
}
/**
* 检查数据是否存在空值
* @returns {boolean}
*/
function checkData(){
if (isEmpty($("#title").val())) {
reloadTip("表单验证", "公告标题未填写内容", "error");
return false;
}
if (isEmpty($("#type").val())) {
reloadTip("表单验证", "公告类型未填写内容", "error");
return false;
}
if (tinyMCE.activeEditor.getContent().length == 0) {
reloadTip("表单验证", "公告详情未填写内容", "error");
return false;
}
var tf = checkTitle();
if (tf == "false") {
reloadTip("表单验证", "公告标题已存在,请更换标题", "error");
return false;
}
if (code == 'tabid=2' && mns.length == 0) {
reloadTip("表单验证", "可见范围未勾选相应人员", "error");
//无文件上传,直接上传表单内容
return false;
}
return true;
}
//清空已选择人员
window.cleanPersonGroup = function () {
//清空数组
mns.length = 0;
//删除右侧人员列表
$("#personDiv").empty();
//重载左侧表格
window.refresh();
};
//更新右侧人员列表
window.updatePersonGroups = function () {
let personDiv = $("#personDiv");
personDiv.empty();
if (mns.length !== 0) {
let html = '';
mns.forEach(function (item) {
html += '<button onclick="deletePersonBtn(this)" value="' + item.userId + '" class="layui-btn layui-btn-primary layui-border-green" ' +
'style="margin-left: 2px;margin-right: 2px;margin-bottom: 4px;width:180px"><i class="layui-icon" style="color: #17BAAA;float: left">&#xe66f;</i>&nbsp;' + item.userName + ' <i class="layui-icon" ' +
'style="color:#17BAAA;float:right">&#x1006;</i></button>';
});
personDiv.append(html);
}
};
//右侧按钮组--删除事件
window.deletePersonBtn = function (obj) {
// 设置 Switch 开关为关闭状态
$("#switch").prop("checked", false);
// 重新渲染
form.render("checkbox");
// 把判断是否全选的变量做手动切换
checkAll = false;
//获取当前选中的下标
let index = mns.findIndex(item => item.userId == obj.value);
//从数组中根据下标移除删除的长度为1
mns.splice(index, 1);
//删除组件元素
obj.remove();
//根据新数据重载表格
window.refresh();
};
//刷新table表格
window.refresh = function () {
ctrUpdateTable.reload({
data: mns
});
}
</script>