334 lines
13 KiB
JavaScript
334 lines
13 KiB
JavaScript
layui.use(['laytpl', 'table', 'jquery', 'form', 'miniTab', 'tree', 'xmSelect', 'laydate','upload'], function () {
|
|
let $ = layui.jquery,
|
|
form = layui.form,
|
|
table = layui.table,
|
|
layer = layui.layer,
|
|
laydate = layui.laydate,
|
|
xmSelect = layui.xmSelect,
|
|
miniTab = layui.miniTab;
|
|
upload = layui.upload;
|
|
|
|
let parentMenu = $('#parent-menu');
|
|
let menuList = parentMenu.data('menu') ? parentMenu.data('menu') : [];
|
|
let showList = parentMenu.data('show') ? parentMenu.data('show') : [];//各栏目 可展示字段列表
|
|
|
|
let image_exts = $('#image_exts').data('exts') ? $('#image_exts').data('exts') : "jpg|png|gif|bmp|jpeg";//图片上传后缀
|
|
xmSelect.render({
|
|
el: '#parent-menu',
|
|
paging: false,
|
|
autoRow: true,
|
|
radio: true,
|
|
clickClose: true,
|
|
name: 'category_id',
|
|
tips: '请选择栏目',
|
|
direction: 'auto',
|
|
height: 'auto',
|
|
model: {
|
|
icon: 'hidden',
|
|
},
|
|
prop: {
|
|
name: 'title',
|
|
value: 'id',
|
|
},
|
|
tree: {
|
|
show: true,
|
|
strict: false,
|
|
clickCheck: true,
|
|
expandedKeys: true,
|
|
clickExpand: false
|
|
},
|
|
theme: {
|
|
color: '#1e84ff',
|
|
},
|
|
data: menuList,
|
|
on: function (data) {
|
|
//arr: 当前多选已选中的数据
|
|
let arr = data.arr;
|
|
//change, 此次选择变化的数据,数组
|
|
let change = data.change;
|
|
//isAdd, 此次操作是新增还是删除
|
|
// let isAdd = data.isAdd;
|
|
|
|
// console.log(arr, 'arr')
|
|
// console.log(change, 'change')
|
|
// console.log('已有: '+arr.length+' 变化: '+change.length+', 状态: ' + isAdd, 'desc')
|
|
if (arr.length > 0 && change.length > 0) {
|
|
//切换
|
|
$('.field-div').hide();//全部隐藏
|
|
let currentCateId = arr[0].id;//当前栏目ID
|
|
let showFields = showList[currentCateId] ? showList[currentCateId] : [];
|
|
// console.log(showFields, 'show current')
|
|
// 显示选择栏目的字段
|
|
$.each(showFields, function (index, val) {
|
|
$('.current-field-' + val).show();
|
|
})
|
|
}
|
|
},
|
|
});
|
|
|
|
|
|
/**** index begin ***/
|
|
//index页面
|
|
if ($('.location-index-page').length > 0) {
|
|
miniTab.listen();
|
|
|
|
laydate.render({
|
|
elem: '#publish-date',
|
|
});
|
|
|
|
// 渲染表格
|
|
let listUrl = $('#table-container').data('url');
|
|
let insTb = table.render({
|
|
elem: '#table-container',
|
|
toolbar: '#toolbar-tpl',
|
|
defaultToolbar: ['filter', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
|
|
title: '搜索'
|
|
, layEvent: 'search'
|
|
, icon: 'layui-icon-search'
|
|
}],
|
|
url: listUrl,
|
|
method: 'post',
|
|
even: true,
|
|
limits: [10,20,50,100,200,500,1000],
|
|
request: {
|
|
pageName: 'page',
|
|
limitName: 'size',
|
|
},
|
|
parseData: function (res) {
|
|
return {
|
|
"code": res.code, //解析接口状态
|
|
"msg": res.msg, //解析提示文本
|
|
"count": res.data.total, //解析数据长度
|
|
"data": res.data.list //解析数据列表
|
|
};
|
|
},
|
|
|
|
page: true,
|
|
cols: [[
|
|
{type: 'checkbox'}
|
|
,{field: 'title', title: '碎片标题' }
|
|
,{field: 'name', title: '碎片名称', }
|
|
,{templet:"#row-category", title: '所属栏目', width: 120}
|
|
,{templet:"#row-type", title: '类型', width: 120}
|
|
,{templet:"#row-content", title: '内容', maxWidth: 450}
|
|
,{title: '操作', templet: '#buttonTpl', width: 180}
|
|
]],
|
|
done: function () {
|
|
Tools.setInsTb(insTb);
|
|
}
|
|
});
|
|
// 监听搜索操作
|
|
form.on('submit(data-search-btn)', function (data) {
|
|
//执行搜索重载
|
|
table.reload('table-container', {
|
|
page: {curr: 1}
|
|
, where: {searchParams: data.field}
|
|
}, 'data');
|
|
return false;
|
|
});
|
|
|
|
//监听行工具条
|
|
table.on('tool(table-container)', function (obj) {
|
|
let data = obj.data;
|
|
let layEvent = obj.event;
|
|
let url = $($(this).context).data('href');
|
|
let title = $($(this).context).data('title');
|
|
let width = $($(this).context).data('width') ? $($(this).context).data('width') : '100%';
|
|
let height = $($(this).context).data('height') ? $($(this).context).data('height') : '100%';
|
|
let insTb = Tools.getInsTb();
|
|
|
|
switch (layEvent) {
|
|
// 行 删除
|
|
case 'del':
|
|
let ids = [data.id];
|
|
delRow(url, ids, insTb);
|
|
return false;
|
|
//其他 默认为打开弹出层
|
|
default:
|
|
openLayer(url, title, width, height);
|
|
return false;
|
|
}
|
|
});
|
|
|
|
}
|
|
/*** index end ***/
|
|
|
|
// add和edit页面
|
|
if ($('.location-operate-page').length > 0) {
|
|
|
|
form.on('select(type)', function(data) {
|
|
$('.content').hide().eq(data.value - 1).show();
|
|
});
|
|
// 删除节点时间
|
|
$('body').on('click', '.upload-file-div-close', function () {
|
|
$(this).parent().remove()
|
|
});
|
|
|
|
|
|
// 根据input 刷新预览图片列表
|
|
function initPreviewList() {
|
|
let input = $('.upload-file-value');
|
|
if (input.length > 0) {
|
|
input.each(function () {
|
|
let that = $(this);
|
|
let fileList = that.val();
|
|
let fileArr = [];
|
|
let html = '';
|
|
if (fileList) {
|
|
fileArr = fileList.split(',');
|
|
}
|
|
if (fileArr.length > 0) {
|
|
$.each(fileArr, function (index, item) {
|
|
let ext = item.split('.');
|
|
src = getFileRequestUrl(item);
|
|
let aLink = getFileRequestUrl(item);
|
|
|
|
html += `<li class="layui-col-xs12 layui-col-md2 preview-li">
|
|
<a href="${aLink}" target="_blank" class="preview-li-img">
|
|
<img src="${src}" data-img="${item}">
|
|
</a>
|
|
<a href="javascript:;" class="layui-btn layui-btn-xs layui-btn-danger del-preview-img">
|
|
<i class="fa fa-trash-o"></i> 删除
|
|
</a>
|
|
</li>`;
|
|
})
|
|
}
|
|
that.parents('.upload-file-div').find('.preview-list').html(html);
|
|
})
|
|
}
|
|
|
|
}
|
|
|
|
//渲染节点
|
|
function renderImgListNode(id) {
|
|
// 多个上传组件 多个实例
|
|
|
|
upload.render({
|
|
elem: '#ImgListNode-upload-btn-' + id
|
|
, url: '/manager/upload/image'
|
|
, auto: true
|
|
, field: 'image_image'
|
|
, accept: 'images'
|
|
, acceptMime: 'images/*'
|
|
, exts: image_exts
|
|
, size: 50 * 1204
|
|
, number: 0
|
|
, multiple: false
|
|
, data: {}
|
|
, before: function (obj) {
|
|
layer.load(2);
|
|
}
|
|
, done: function (res, index, upload) { //每个文件提交一次触发一次。详见“请求成功的回调”
|
|
layer.closeAll('loading'); //关闭loading
|
|
let item = this.item;
|
|
let div = item.parents('.upload-file-div');
|
|
let existsNotice = item.data('notice-exists');//已存在文件是否提示 默认不提示
|
|
let callback = item.data('callback');//上传成功执行函数
|
|
if (callback) {
|
|
eval(callback);
|
|
}
|
|
|
|
// 200=已存在文件 0=新上传成功
|
|
if (res.code === 0 || res.code === 200) {
|
|
let inputValue = '';
|
|
inputValue += res.data.src;
|
|
$(div).find('.upload-file-value').val(inputValue);
|
|
initPreviewList();
|
|
if (existsNotice && res.code === 200) {
|
|
layer.alert(res.msg);
|
|
}
|
|
} else {
|
|
layer.msg(res.msg);
|
|
}
|
|
}
|
|
});
|
|
|
|
}
|
|
function setImgListNode(key){
|
|
let html = ` <div class="layui-row upload-file-div">
|
|
<div class=" layui-col-xs12 layui-col-md4">
|
|
<input class="layui-input upload-file-value" name="content7[${key}][src]" type="text" value="">
|
|
<div class="layui-form-mid layui-word-aux">图片尺寸：请上传合适尺寸</div>
|
|
</div>
|
|
<div class="layui-col-xs12 layui-col-md3">
|
|
<span>
|
|
<button type="button" class="layui-btn layui-btn-danger " id="ImgListNode-upload-btn-${key}">
|
|
<i class="fa fa-upload"></i> 上传
|
|
</button>
|
|
</span>
|
|
<span><button type="button" class="layui-btn layui-btn-primary upload-choose-btn"
|
|
data-url="/manager/attachment/image"
|
|
data-type="image"
|
|
data-multiple="false">
|
|
<i class="fa fa-list"></i> 选择
|
|
</button></span>
|
|
</div>
|
|
<ul class="layui-row layui-col-xs12 layui-col-md9 preview-list layui-col-space5"></ul>
|
|
|
|
<div class="layui-row">
|
|
<div class="layui-inline">
|
|
<label class="layui-form-label">标题</label>
|
|
<div class="layui-input-inline">
|
|
<input type="text" name="content7[${key}][title]" class="layui-input">
|
|
</div>
|
|
</div>
|
|
<div class="layui-inline">
|
|
<label class="layui-form-label">副标题</label>
|
|
<div class="layui-input-inline">
|
|
<input type="text" name="content7[${key}][subtitle]" autocomplete="off" class="layui-input">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="layui-inline">
|
|
<label class="layui-form-label">描述</label>
|
|
<div class="layui-input-inline">
|
|
<input type="text" name="content7[${key}][description]" class="layui-input">
|
|
</div>
|
|
</div>
|
|
<div class="layui-inline">
|
|
<label class="layui-form-label">链接</label>
|
|
<div class="layui-input-inline">
|
|
<input type="text" name="content7[${key}][link]" class="layui-input">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="layui-inline">
|
|
<label class="layui-form-label">时间</label>
|
|
<div class="layui-input-inline">
|
|
<input type="text" name="content7[${key}][time]" class="layui-input">
|
|
</div>
|
|
</div>
|
|
<div class="layui-inline">
|
|
<label class="layui-form-label">排序</label>
|
|
<div class="layui-input-inline">
|
|
<input type="number" name="content7[${key}][sort]" class="layui-input">
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<button class="layui-btn upload-file-div-close">删除</button>
|
|
</div>`;
|
|
$("#img_list").append(html);
|
|
renderImgListNode(key);
|
|
|
|
ImgListNodeKey++;
|
|
}
|
|
|
|
|
|
$(function () {
|
|
if(addImgListNode == true){
|
|
//添加第一个节点
|
|
setImgListNode(ImgListNodeKey);
|
|
}
|
|
|
|
//增加节点绑定
|
|
$("#addrImgListNode").on("click",function () {
|
|
setImgListNode(ImgListNodeKey)
|
|
});
|
|
initPreviewList();
|
|
})
|
|
|
|
|
|
}
|
|
}); |