xz-szwhy/src/main/resources/static/route/news/newscontent/save-image-newscontent.html
LiuY f9c2aadfc1 1、替换页面文件相关接口
2、树形插件 替换
2022-08-15 16:23:02 +08:00

658 lines
33 KiB
HTML

<!doctype html>
<html lang="en">
<head>
<base href="/xzszwhy/">
<meta charset="utf-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link rel="stylesheet" href="assets/fonts/font-awesome/css/font-awesome.css"/>
<link rel="stylesheet" href="assets/layuiadmin/layui/css/layui.css" media="all">
<link rel="stylesheet" href="assets/layuiadmin/style/admin.css" media="all">
<link rel="stylesheet" type="text/css" href="assets/js/vendor/viewer/viewer.min.css">
</head>
<body>
<div class="layui-fluid layui-anim layui-anim-fadein">
<div class="layui-card">
<div class="layui-card-header">
<span class="layui-breadcrumb" lay-filter="breadcrumb" style="visibility: visible;">
<a class="close" href="javascript:void(0);">上级列表</a><span lay-separator="">/</span>
<a href="javascript:void(0);"><cite>图文新闻</cite></a>
</span>
</div>
<div class="layui-card-body" style="padding: 15px;">
<form class="layui-form layui-form-pane" lay-filter="dataForm">
<input type="hidden" name="newsContentType" value="1" id="newsContentType">
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">封面图片<span style="color: red">*</span></label>
<div class="layui-input-block">
<input type="hidden" id="contentCoverId" name="contentCoverId">
<div class="layui-btn-container" id="contentCoverIdFileBox" style="border: 1px solid #e6e6e6;"></div>
<script id="contentCoverIdFileDownload" type="text/html">
{{# var fileName = 'contentCoverId'; }}
{{# if(d[fileName].length > 0) { }}
{{# var files = d[fileName];}}
{{# for(var i = 0, item = files[i]; item = files[i++];) { }}
<div class="upload-image-box">
<span class="upload-image-span">
<img src="route/file/download/false/{{item.fileId}}" align="加载失败">
</span>
<a class="layui-btn layui-btn-xs layui-btn-danger text-danger remove-image" href="javascript:void(0);" lay-form-button data-id="{{item.fileId}}" data-name="{{fileName}}" lay-filter="contentCoverIdRemoveFile">
<i class="fa fa-trash-o"></i>
</a>
</div>
{{# } }}
{{# } }}
{{# if(d[fileName].length < 3) { }}
<div class="upload-image-box" style="width: auto; height: auto; padding: 5px;">
<a href="javascript:void(0);" lay-form-button data-explain="封面图片" data-name="contentCoverId" lay-filter="contentCoverIdUploadFile">
<i class="fa fa-plus-square-o" style="font-size: 70px;"></i>
</a>
</div>
{{# } }}
</script>
</div>
</div>
<div class="layui-form-item layui-row ">
<div class="layui-col-lg12">
<label class="layui-form-label">新闻标题<span style="color: red">*</span></label>
<div class="layui-input-block">
<input type="text" id="newsContentTitle" name="newsContentTitle" class="layui-input" value="" placeholder="请输入新闻标题" >
</div>
</div>
</div>
<div class="layui-form-item layui-row">
<div class="layui-col-lg6">
<label class="layui-form-label">新闻版块<span style="color: red">*</span></label>
<div class="layui-input-block">
<input type="hidden" id="newsDirectoriesId" name="newsDirectoriesId" lay-verify="require">
<input readonly type="text" id="newsDirectoriesName" name="newsDirectoriesName" lay-verify="require" placeholder="请选择新闻版块" class="layui-input" style="cursor:pointer;">
</div>
</div>
<div class="layui-col-lg6">
<label class="layui-form-label">新闻排版<span style="color: red">*</span></label>
<div class="layui-input-block">
<input type="hidden" id="newsTypesettingId" name="newsTypesettingId" lay-verify="require">
<input type="text" id="typesettingName" name="typesettingName" lay-verify="require" placeholder="请选择新闻排版" class="layui-input" style="cursor:pointer;">
</div>
</div>
</div>
<div class="layui-form-item layui-row">
<div class="layui-col-lg6">
<div class="layui-form-item">
<label class="layui-form-label">新闻来源<span style="color: red">*</span></label>
<div class="layui-input-block">
<input type="text" id="newsContentResource" name="newsContentResource" class="layui-input" value="" placeholder="请输入新闻来源" >
</div>
</div>
</div>
<div class="layui-col-lg6">
<div class="layui-form-item">
<label class="layui-form-label">发布单位</label>
<div class="layui-input-block">
<input type="text" id="newsContentPublishDepartment" name="newsContentPublishDepartment" class="layui-input" value="" placeholder="请输入发布单位" >
</div>
</div>
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">新闻概述</label>
<div class="layui-input-block">
<textarea id="newsContentSummary" name="newsContentSummary" class="layui-input" value="" placeholder="请输入新闻概述" class="layui-textarea" rows="2" style="height: auto; line-height: 39px"></textarea>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">新闻链接</label>
<div class="layui-input-block">
<input type="text" id="newsContentLink" name="newsContentLink" class="layui-input" value="" placeholder="请输入新闻链接" >
</div>
</div>
<div class="layui-form-item layui-row" pane="">
<div class="layui-col-lg6">
<label class="layui-form-label">发布时间<span style="color: red">*</span></label>
<div class="layui-input-block">
<input type="text" id="newsContentPublishTime" name="newsContentPublishTime" class="layui-input" value="" placeholder="请输入发布时间" >
</div>
</div>
<div class="layui-col-lg6">
<label class="layui-form-label">发布状态<span style="color: red">*</span></label>
<div class="layui-input-block" >
<input type="radio" name="newsContentPublishStatus" value="1" title="发布">
<input type="radio" name="newsContentPublishStatus" value="0" title="不发布">
</div>
</div>
</div>
<div class="layui-form-item layui-row">
<div class="layui-col-lg6">
<label class="layui-form-label">新闻作者<span style="color: red">*</span></label>
<div class="layui-input-block">
<input type="text" id="newsContentAuthor" name="newsContentAuthor" class="layui-input" value="" placeholder="请输入新闻作者" >
</div>
</div>
<div class="layui-col-lg6">
<label class="layui-form-label">新闻排序<span style="color: red">*</span></label>
<div class="layui-input-block">
<input type="number" id="newsContentScore" name="newsContentScore" class="layui-input" value="1" placeholder="请输入新闻排序" >
</div>
</div>
</div>
<!--<div class="layui-form-item" pane="">
<label class="layui-form-label">新闻标签<span style="color: red">*</span></label>
<div class="layui-input-block layui-form" id="newsContentLabelSelectTemplateBox" lay-filter="newsContentLabelSelectTemplateBox" pane=""></div>
<script id="newsContentLabelSelectTemplate" type="text/html">
{{# for(var i = 0, item; item = d[i++];) { }}
<input type="checkbox" name="newsContentLabel[{{item.newsLabelId}}]" value="{{item.newsLabelId}}" title="{{item.labelName}}">
{{# } }}
</script>
</div>-->
<div class="layui-row" >
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">新闻图片<button type="button" style="margin-left: 20px;" class="layui-btn layui-btn-radius layui-btn-xs" lay-form-button lay-filter="newsFileAddEvent">添加一行内容</button><span style="color: red">*</span></label>
<div class="layui-input-block">
<input type="hidden" id="newsFile" name="newsFile">
<div id="newsFileFileBox" style="border: 1px solid #e6e6e6;"></div>
<script id="newsFileFileDownload" type="text/html">
{{# for(var i = 0, iItem; iItem = d[i++];) { }}
{{# var fileId = iItem.fileId }}
<div class="layui-row" style="border: 1px solid #e6e6e6;">
<div class="layui-col-lg4">
<div class=" layui-form-item">
{{# if(iItem.fileValues.length > 0) { }}
{{# var files = iItem.fileValues; }}
{{# for(var j = 0, jItem; jItem = files[j++];) { }}
<div class="upload-image-box" style="width: auto; height: auto; padding-left: 25px; padding-top: 25px;">
<span class="upload-image-span">
<img src="route/file/download/false/{{jItem.fileId}}" align="加载失败">
</span>
<a class="layui-btn layui-btn-xs layui-btn-danger text-danger remove-image" href="javascript:void(0);" lay-form-button data-id="{{jItem.fileId}}" data-name="{{fileId}}" lay-filter="newsFileRemoveFile">
<i class="fa fa-trash-o"></i>
</a>
</div>
{{# } }}
{{# } }}
{{# if(iItem.fileValues.length < 1) { }}
<div class="upload-image-box" style="width: auto; height: auto; padding-left: 55px; padding-top: 40px;">
<a href="javascript:void(0);" lay-form-button data-explain="新闻图片" data-name="{{fileId}}" lay-filter="newsFileUploadFile">
<i class="fa fa-plus-square-o" style="font-size: 70px;"></i>
</a>
</div>
{{# } }}
</div>
</div>
<div class="layui-col-lg6" style="padding-top: 2px">
<div class="layui-input-block" >
<textarea style="min-height: 150px;" placeholder="输入说明" maxlength="1000" class="layui-textarea data-text" data-textname="{{fileId}}" >{{iItem.fileSummary}}</textarea>
</div>
</div>
<div class="layui-col-lg1" style="padding-top: 2px">
<div class="layui-input-block">
<input style="min-height: 150px;font-size: 50px;" type="number" placeholder="排序" class="layui-input data-sort" data-sortname="{{fileId}}" value="{{iItem.fileSort}}" >
</div>
</div>
<div class="layui-col-lg1" style="padding-top: 60px; padding-left: 30px;">
<div class="layui-input-block">
<button type="button" class="layui-btn layui-btn-radius layui-btn-danger" data-name="{{fileId}}" lay-form-button lay-filter="newsFileRemove">删除本行</button>
</div>
</div>
</div>
{{# } }}
</script>
</div>
</div>
</div>
<div class="layui-form-item layui-layout-admin">
<div class="layui-input-block">
<div class="layui-footer" style="left: 0;">
<button type="button" class="layui-btn" lay-submit lay-filter="submitForm">提交新增</button>
<button type="button" class="layui-btn layui-btn-primary close">返回上级</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<script src="assets/js/vendor/wangEditor/wangEditor.min.js"></script>
<script src="assets/layuiadmin/layui/layui.js"></script>
<script src="assets/js/vendor/viewer/viewer.min.js"></script>
<script src="assets/js/common/layui-input-tree.js"></script>
<script>
layui.config({
base: 'assets/layuiadmin/' //静态资源所在路径
}).extend({
index: 'lib/index' //主入口模块
}).use(['index', 'form', 'laydate', 'laytpl', 'ztree'], function(){
var $ = layui.$;
var form = layui.form;
var laytpl = layui.laytpl;
var laydate = layui.laydate;
var ztree = layui.ztree;
var wangEditor = window.wangEditor;
var wangEditorObj = {};
var viewerObj = {};
var layuiInputTree = new LayuiInputTree(layui);
var newsContentType = top.restAjax.params(window.location.href).newsContentType;
function closeBox() {
parent.layer.close(parent.layer.getFrameIndex(window.name));
}
function refreshDownloadTemplet(fileName, file) {
var dataRander = {};
dataRander[fileName] = file;
laytpl(document.getElementById(fileName +'FileDownload').innerHTML).render(dataRander, function(html) {
document.getElementById(fileName +'FileBox').innerHTML = html;
});
}
var multiPhotos = [{
fileId: new Date().getTime(),
fileValues: [],
fileSummary: '文字说明',
fileSort: 1
}];
// 增加一行
form.on('button(newsFileAddEvent)', function(obj) {
multiPhotos.push({
fileId: new Date().getTime(),
fileValues: [],
fileSummary: '文字说明',
fileSort: multiPhotos.length + 1
});
laytpl(document.getElementById('newsFileFileDownload').innerHTML).render(multiPhotos, function(html) {
document.getElementById('newsFileFileBox').innerHTML = html;
});
updateSummaryAndSort();
});
// 删除一行
form.on('button(newsFileRemove)', function(obj) {
if(multiPhotos.length < 2) {
layer.msg('至少需要一条新闻数据');
return;
}
var name = this.dataset.name;
for(var i = 0; i < multiPhotos.length; i++) {
var item = multiPhotos[i];
if(item.fileId == name) {
multiPhotos.splice(i, 1);
laytpl(document.getElementById('newsFileFileDownload').innerHTML).render(multiPhotos, function(html) {
document.getElementById('newsFileFileBox').innerHTML = html;
});
updateSummaryAndSort();
break;
}
}
});
// 重新排序
function updateSummaryAndSort() {
$('.data-text').on('input propertychange', function() {
var name = this.dataset.textname;
for(var i = 0; i < multiPhotos.length; i++) {
var item = multiPhotos[i];
if(item.fileId == name) {
item.fileSummary = this.value;
break;
}
}
});
$('.data-sort').on('input propertychange', function() {
var name = this.dataset.sortname;
for(var i = 0; i < multiPhotos.length; i++) {
var item = multiPhotos[i];
if(item.fileId == name) {
item.fileSort = this.value;
break;
}
}
});
}
function initNewsFile(name, fileValues) {
top.restAjax.get(top.restAjax.path('api/file/list', []), {
ids: fileValues
}, null, function(code, data) {
// 找到FileId对应的对象
for(var i = 0, iItem; iItem = multiPhotos[i++];) {
if(iItem.fileId == name) {
iItem.fileValues = data;
}
}
laytpl(document.getElementById('newsFileFileDownload').innerHTML).render(multiPhotos, function(html) {
document.getElementById('newsFileFileBox').innerHTML = html;
viewerObj.newsFileFileBox.update();
});
updateSummaryAndSort();
}, function(code, data) {
top.dialog.msg(data.msg);
});
}
function getNewsFileValues(fileId) {
var fileValues = '';
for(var i = 0, iItem; iItem = multiPhotos[i++];) {
if(iItem.fileId == fileId) {
for(var j = 0, jItem; jItem = iItem.fileValues[j++];) {
if(fileValues.length > 0) {
fileValues += ',';
}
fileValues += jItem.fileId;
}
}
}
return fileValues;
}
// 初始化上传
function initNewsFileUploadFile() {
var viewer = new Viewer(document.getElementById('newsFileFileBox'), {navbar: false})
viewerObj.newsFileFileBox = viewer;
laytpl(document.getElementById('newsFileFileDownload').innerHTML).render(multiPhotos, function(html) {
document.getElementById('newsFileFileBox').innerHTML = html;
})
updateSummaryAndSort();
form.on('button(newsFileUploadFile)', function(obj) {
var name = this.dataset.name;
var explain = this.dataset.explain;
top.dialog.file({
type: 'image',
title: '上传'+ explain,
width: '400px',
height: '460px',
maxFileCount: '1',
onClose: function() {
var uploadFileArray = top.dialog.dialogData.uploadFileArray;
if(typeof(uploadFileArray) != 'undefined' && uploadFileArray.length > 0) {
var fileValues = getNewsFileValues(name);
for(var j = 0, file; file = uploadFileArray[j++];) {
if(fileValues.length > 0) {
fileValues += ',';
}
fileValues += file.data;
}
initNewsFile(name, fileValues);
}
}
});
});
form.on('button(newsFileRemoveFile)', function(obj) {
var name = this.dataset.name;
var id = this.dataset.id;
var fileValues = getNewsFileValues(name);
var files = fileValues.replace(id, '');
files = files.replace(/\,+/g, ',');
if(files.charAt(0) == ',') {
files = files.substring(1);
}
if(files.charAt(files.length - 1) == ',') {
files = files.substring(0, files.length - 1);
}
initNewsFile(name, files);
});
}
// 初始化文件列表
function initFileList(fileName, ids, callback) {
var dataForm = {};
dataForm[fileName] = ids;
form.val('dataForm', dataForm);
if(!ids) {
refreshDownloadTemplet(fileName, []);
if(callback) {
callback(fileName, []);
}
return;
}
top.restAjax.get(top.restAjax.path('api/file/list', []), {
ids: ids
}, null, function(code, data) {
refreshDownloadTemplet(fileName, data);
if(callback) {
callback(fileName, data);
}
}, function(code, data) {
top.dialog.msg(data.msg);
});
}
// 初始化新闻标签
function initNewsContentLabelSelect() {
top.restAjax.get(top.restAjax.path('api/newslabel/listnewslabel?labelStatus={labelStatus}', ['1']), {}, null, function(code, data, args) {
laytpl(document.getElementById('newsContentLabelSelectTemplate').innerHTML).render(data, function(html) {
document.getElementById('newsContentLabelSelectTemplateBox').innerHTML = html;
});
form.render('checkbox', 'newsContentLabelSelectTemplateBox');
}, function(code, data) {
top.dialog.msg(data.msg);
});
}
$(document).on('click', '#typesettingName', function() {
top.dialog.open({
url: top.restAjax.path('route/news/newstypesetting/list-newstypesettingselect.html?typesettingNewsType={typesettingNewsType}', [newsContentType]),
title: '选择排版',
width: '695px',
height: '100%',
onClose: function(data) {
$("#newsTypesettingId").val(top.dialog.dialogData.newsTypesettingId);
$("#typesettingName").val(top.dialog.dialogData.typesettingName);
}
});
});
// 初始化新闻版块
function initSelectNewsDir(){
layuiInputTree.initSelect({
id: 'newsDirectoriesName',
url: 'api/newsdirectories/ztreeselect',
key: {
id: 'id',
name: 'name',
title: 'title',
pId: 'pId',
checked: 'checked',
children: 'subs',
isParent: 'isParent',
isHidden: 'isHidden',
url: 'url',
},
selectedData: {id: $('#newsDirectoriesId').val(), name: $('#newsDirectoriesName').val()},
onConfirm: function(zTree, selectedNode) {
if(!selectedNode) {
$('#newsDirectoriesId').val('');
$('#newsDirectoriesName').val('');
return;
}
$('#newsDirectoriesId').val(selectedNode.id);
$('#newsDirectoriesName').val(selectedNode.name);
},
onClear: function(zTree) {}
})
}
/* $(document).on('click', '#newsDirectoriesName', function() {
top.dialog.tree({
title: '选择新闻版块',
apiUri: top.restAjax.path('api/newsdirectories/ztreeselect', []),
width: '400px',
height: '400px',
defaultParams: {id: 0},
selectedNodes: [
{
id: $('#newsDirectoriesId').val(),
name: $('#newsDirectoriesName').val(),
title: $('#newsDirectoriesName').val()
}
],
onClose: function() {
var selectNodes = top.dialog.dialogTreeData.selectedNodes;
if(typeof(selectNodes) != 'undefined' && selectNodes != null) {
if(selectNodes.length > 0) {
form.val('dataForm', {
newsDirectoriesId: selectNodes[0].id,
newsDirectoriesName: selectNodes[0].name
});
} else {
form.val('dataForm', {
newsDirectoriesId: '',
newsDirectoriesName: ''
});
}
form.render(null, 'dataForm');
}
}
});
});*/
// 初始化封面图片集图片上传
function initContentCoverIdUploadFile() {
var files = $('#contentCoverId').val();
initFileList('contentCoverId', files, function(fileName) {
var viewer = new Viewer(document.getElementById(fileName +'FileBox'), {navbar: false});
viewerObj[fileName] = viewer;
});
form.on('button(contentCoverIdUploadFile)', function(obj) {
var name = this.dataset.name;
var explain = this.dataset.explain;
top.dialog.file({
type: 'image',
title: '上传'+ explain,
width: '400px',
height: '460px',
maxFileCount: '1',
onClose: function() {
var uploadFileArray = top.dialog.dialogData.uploadFileArray;
if(typeof(uploadFileArray) != 'undefined' && uploadFileArray.length > 0) {
var files = $('#'+ name).val();
for(var j = 0, file = uploadFileArray[j]; file = uploadFileArray[j++];) {
if(files.length > 0) {
files += ',';
}
files += file.data;
}
initFileList(name, files, function(fileName) {
viewerObj[fileName].update();
});
}
}
});
});
form.on('button(contentCoverIdRemoveFile)', function(obj) {
var name = this.dataset.name;
var id = this.dataset.id;
var files = $('#'+ name).val().replace(id, '');
files = files.replace(/\,+/g, ',');
if(files.charAt(0) == ',') {
files = files.substring(1);
}
if(files.charAt(files.length - 1) == ',') {
files = files.substring(0, files.length - 1);
}
initFileList(name, files, function(fileName) {
viewerObj[fileName].update();
});
});
}
// 初始化新闻时间日期
function initLibraryDataDateDate() {
laydate.render({
elem: '#newsContentPublishTime',
type: 'date',
value: new Date(),
trigger: 'click'
});
}
// 初始化内容
function initData() {
top.restAjax.get(top.restAjax.path('api/newscontent/getcurrentuseridinfo', []), {}, null, function(code, data) {
initContentCoverIdUploadFile();
initLibraryDataDateDate();
// initNewsContentLabelSelect();
initNewsFileUploadFile();
initSelectNewsDir();
}, function(code, data) {
top.dialog.msg(data.msg);
}, function() {
loadLayerIndex = top.dialog.msg(top.dataMessage.loading, {icon: 16, time: 0, shade: 0.3});
}, function() {
top.dialog.close(loadLayerIndex);
});
}
initData();
// 提交表单
form.on('submit(submitForm)', function(formData) {
top.dialog.confirm(top.dataMessage.commit, function(index) {
top.dialog.close(index);
var loadLayerIndex;
formData.field.newsContentType = newsContentType;
formData.field['newsContentLabel'] = top.restAjax.checkBoxToString(formData.field, 'newsContentLabel');
var fileList = new Array();
for(var i = 0 ; i < multiPhotos.length ; i++) {
var obj = {};
if ( multiPhotos[i].fileValues.length > 0) {
var arr = multiPhotos[i].fileValues;
if(arr.length > 0) {
obj.contentFileFileId = arr[0].fileId;
}else{
continue;
}
obj.contentFileText = multiPhotos[i].fileSummary;
obj.contentFileOrder = multiPhotos[i].fileSort;
fileList.push(obj);
}
}
formData.field.fileList = fileList;
top.restAjax.post(top.restAjax.path('api/newscontent/savenewscontent', []), formData.field, null, function(code, data) {
var layerIndex = top.dialog.msg(top.dataMessage.commitSuccess, {
time: 0,
btn: [top.dataMessage.button.yes, top.dataMessage.button.no],
shade: 0.3,
yes: function(index) {
top.dialog.close(index);
window.location.reload();
},
btn2: function() {
closeBox();
}
});
}, function(code, data) {
top.dialog.msg(data.msg);
}, function() {
loadLayerIndex = top.dialog.msg(top.dataMessage.committing, {icon: 16, time: 0, shade: 0.3});
}, function() {
top.dialog.close(loadLayerIndex);
});
});
return false;
});
$('.close').on('click', function() {
closeBox();
});
// 校验
form.verify({
});
});
</script>
</body>
</html>