<!DOCTYPE html>
|
<html lang="en">
|
<head>
|
<meta charset="utf-8">
|
<title></title>
|
<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, maximum-scale=1">
|
<link rel="stylesheet" href="../../static/layui/css/layui.css" media="all">
|
<link rel="stylesheet" href="../../static/css/cool.css" media="all">
|
<link rel="stylesheet" href="../../static/css/admin.css" media="all">
|
<style>
|
#detail {
|
padding: 25px 30px 0 0;
|
}
|
.ew-tree-table-box {
|
height: 100%;
|
}
|
</style>
|
</head>
|
<body>
|
|
<!-- 正文开始 -->
|
<div class="layui-fluid">
|
<div class="layui-card">
|
<div class="layui-card-body">
|
<!-- 数据表格 -->
|
<table id="tag"></table>
|
</div>
|
</div>
|
</div>
|
|
<script type="text/html" id="operate">
|
<a class="layui-btn layui-btn-primary layui-btn-xs btn-edit" lay-event="edit">修改</a>
|
<a class="layui-btn layui-btn-danger layui-btn-xs btn-del" lay-event="del">删除</a>
|
</script>
|
|
<!-- 表单弹窗 -->
|
<script type="text/html" id="editDialog">
|
<form id="detail" lay-filter="detail" class="layui-form">
|
<input name="id" type="hidden">
|
<input name="uuid" type="hidden">
|
<input name="path" type="hidden">
|
<input name="pathName" type="hidden">
|
<input name="img" type="hidden">
|
<input name="brief" type="hidden">
|
<input name="level" type="hidden">
|
<input name="count" type="hidden">
|
<input name="createTime$" type="hidden">
|
<input name="createBy" type="hidden">
|
<input name="updateTime$" type="hidden">
|
<input name="updateBy" type="hidden">
|
<div class="layui-row">
|
|
<div class="layui-col-md6">
|
|
<div class="layui-form-item">
|
<label class="layui-form-label">上级菜单</label>
|
<div class="layui-input-block">
|
<div id="tagParentSel" class="ew-xmselect-tree"></div>
|
</div>
|
</div>
|
|
<div class="layui-form-item">
|
<label class="layui-form-label layui-form-required">类型</label>
|
<div class="layui-input-block">
|
<select name="type" lay-vertype="tips" lay-verify="required" required="">
|
<option value="">请选择类型</option>
|
<option value="1">盒装</option>
|
<option value="2">袋装</option>
|
<option value="0">其他</option>
|
</select>
|
</div>
|
</div>
|
|
<div class="layui-form-item">
|
<label class="layui-form-label">负责人</label>
|
<div class="layui-input-block">
|
<input name="leading" placeholder="请输入负责人" class="layui-input">
|
</div>
|
</div>
|
|
</div>
|
|
<div class="layui-col-md6">
|
|
<div class="layui-form-item">
|
<label class="layui-form-label layui-form-required">归类名称</label>
|
<div class="layui-input-block">
|
<input name="name" placeholder="请输入归类名称" class="layui-input" lay-vertype="tips" lay-verify="required" required="">
|
</div>
|
</div>
|
|
<div class="layui-form-item">
|
<label class="layui-form-label">排序</label>
|
<div class="layui-input-block">
|
<input name="sort" placeholder="请输入排序" class="layui-input">
|
</div>
|
</div>
|
|
<div class="layui-form-item">
|
<label class="layui-form-label">备注</label>
|
<div class="layui-input-block">
|
<input name="memo" placeholder="请输入备注" class="layui-input">
|
</div>
|
</div>
|
|
</div>
|
</div>
|
<hr class="layui-bg-gray">
|
<div class="layui-form-item text-right">
|
<button class="layui-btn" lay-filter="editSubmit" lay-submit="">保存</button>
|
<button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
|
</div>
|
</form>
|
</script>
|
|
<script type="text/javascript" src="../../static/js/jquery/jquery-3.3.1.min.js"></script>
|
<script type="text/javascript" src="../../static/layui/layui.js" charset="utf-8"></script>
|
<script type="text/javascript" src="../../static/js/common.js" charset="utf-8"></script>
|
<script type="text/javascript" src="../../static/js/cool.js" charset="utf-8"></script>
|
|
<script>
|
layui.config({
|
base: baseUrl + "/static/layui/lay/modules/"
|
}).use(['form','treeTable', 'admin', 'xmSelect'], function() {
|
var $ = layui.jquery;
|
var layer = layui.layer;
|
var form = layui.form;
|
var admin = layui.admin;
|
var treeTable = layui.treeTable;
|
var xmSelect = layui.xmSelect;
|
var tbDataList = [];
|
|
var insTb = treeTable.render({
|
elem: '#tag',
|
url: baseUrl+'/tag/list/auth',
|
headers: {token: localStorage.getItem('token')},
|
height: 'full-200',
|
toolbar: ['<p>',
|
'<button lay-event="add" class="layui-btn layui-btn-sm icon-btn"><i class="layui-icon"></i>添加</button> ',
|
'<button lay-event="del" class="layui-btn layui-btn-sm layui-btn-danger icon-btn"><i class="layui-icon"></i>删除</button>',
|
'</p>'].join(''),
|
tree: {
|
iconIndex: 2, // 折叠图标显示在第几列
|
isPidData: true, // 是否是id、pid形式数据
|
idName: 'id', // id字段名称
|
pidName: 'parentId' // pid字段名称
|
},
|
cols: [[
|
{type: 'checkbox'}
|
,{type: 'numbers'}
|
,{field: 'name', align: 'left',title: '名称', minWidth: 150}
|
// ,{field: 'uuid', align: 'center',title: '编号'}
|
,{field: 'type$', align: 'center',title: '类型'}
|
,{field: 'leading', align: 'center',title: '负责人'}
|
,{field: 'img', align: 'center',title: '图片', hide: true}
|
// ,{field: 'brief', align: 'center',title: '简要描述'}
|
// ,{field: 'count', align: 'center',title: '数量'}
|
,{field: 'sort', align: 'center',title: '排序'}
|
,{field: 'status$', align: 'center',title: '状态'}
|
,{field: 'updateTime$', align: 'center',title: '修改时间'}
|
,{field: 'updateBy$', align: 'center',title: '修改人员', hide: true}
|
,{field: 'memo', align: 'center',title: '备注', hide: true}
|
|
,{fixed: 'right', title:'操作', align: 'center', toolbar: '#operate', width:150}
|
]],
|
done: function (data) {
|
$('.ew-tree-table-box').css('height', '100%');
|
insTb.expandAll();
|
tbDataList = data;
|
}
|
});
|
|
/* 表格头工具栏点击事件 */
|
treeTable.on('toolbar(tag)', function (obj) {
|
if (obj.event === 'add') { // 添加
|
showEditModel();
|
} else if (obj.event === 'del') { // 删除
|
var checkRows = insTb.checkStatus();
|
if (checkRows.length === 0) {
|
layer.msg('请选择要删除的数据', {icon: 2});
|
return;
|
}
|
var ids = checkRows.map(function (d) {
|
if (!d.LAY_INDETERMINATE) {
|
return d.id;
|
} else {
|
return null;
|
}
|
});
|
doDel({ids: ids});
|
}
|
});
|
|
/* 表格操作列点击事件 */
|
treeTable.on('tool(tag)', function (obj) {
|
if (obj.event === 'edit') { // 修改
|
showEditModel(obj.data);
|
} else if (obj.event === 'del') { // 删除
|
doDel(obj);
|
}
|
});
|
|
/* 显示表单弹窗 */
|
function showEditModel(mData) {
|
admin.open({
|
type: 1,
|
area: '600px',
|
title: (mData ? '修改' : '添加') + '权限',
|
content: $('#editDialog').html(),
|
success: function (layero, dIndex) {
|
// 回显表单数据
|
form.val('detail', mData);
|
// 表单提交事件
|
form.on('submit(editSubmit)', function (data) {
|
data.field.parentId = insXmSel.getValue('valueStr');
|
var loadIndex = layer.load(2);
|
$.ajax({
|
url: baseUrl+"/tag/"+(mData?'update':'add')+"/auth",
|
headers: {'token': localStorage.getItem('token')},
|
data: data.field,
|
method: 'POST',
|
success: function (res) {
|
layer.close(loadIndex);
|
if (res.code === 200){
|
layer.close(dIndex);
|
layer.msg(res.msg, {icon: 1});
|
insTb.refresh();
|
} else if (res.code === 403){
|
top.location.href = baseUrl+"/";
|
}else {
|
layer.msg(res.msg, {icon: 2});
|
}
|
}
|
})
|
return false;
|
});
|
// 渲染下拉树
|
var insXmSel = xmSelect.render({
|
el: '#tagParentSel',
|
height: '250px',
|
data: insTb.options.data,
|
initValue: mData ? [mData.parentId] : [],
|
model: {label: {type: 'text'}},
|
prop: {
|
name: 'name',
|
value: 'id'
|
},
|
radio: true,
|
clickClose: true,
|
tree: {
|
show: true,
|
indent: 15,
|
strict: false,
|
expandedKeys: true
|
}
|
});
|
// 弹窗不出现滚动条
|
$(layero).children('.layui-layer-content').css('overflow', 'visible');
|
layui.form.render('select');
|
}
|
});
|
}
|
|
/* 删除 */
|
function doDel(obj) {
|
layer.confirm('确定要删除选中数据吗？', {
|
skin: 'layui-layer-admin',
|
shade: .1
|
}, function (i) {
|
layer.close(i);
|
var loadIndex = layer.load(2);
|
var ids;
|
if (obj.data) {
|
ids = [];
|
ids[0] = obj.data.id;
|
} else {
|
ids = obj.ids;
|
}
|
$.ajax({
|
url: baseUrl+"/tag/delete/auth",
|
headers: {'token': localStorage.getItem('token')},
|
data: {ids: ids},
|
method: 'POST',
|
success: function (res) {
|
layer.close(loadIndex);
|
if (res.code === 200){
|
layer.msg(res.msg, {icon: 1});
|
insTb.refresh();
|
} else if (res.code === 403){
|
top.location.href = baseUrl+"/";
|
} else {
|
layer.msg(res.msg, {icon: 2});
|
}
|
}
|
})
|
});
|
}
|
|
});
|
</script>
|
</body>
|
</html>
|
