817 lines
31 KiB
HTML
817 lines
31 KiB
HTML
|
<!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="../../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: ctxPath + '/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: ctxPath + '/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: ctxPath + '/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: ctxPath + '/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 = ctxPath + "/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"></i> ' + item.userName + ' <i class="layui-icon" ' +
|
|||
|
|
'style="color:#17BAAA;float:right">ဆ</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>
|