<!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/admin.css?v=318" media="all">
|
<link rel="stylesheet" href="../../static/css/cool.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="node"></table>
|
</div>
|
</div>
|
</div>
|
|
<script type="text/html" id="toolbar">
|
<div class="layui-btn-container" style="width: 100%">
|
<button lay-event="add" class="layui-btn layui-btn-sm layui-btn-normal 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>
|
<button class="layui-btn layui-btn-sm" id="btn-print-batch" lay-event="printBatch">批量打印</button>
|
<!-- 商品/物料 数据中心 -->
|
<div class="dropdown-menu" style="margin-left: 0">
|
<button class="layui-btn layui-btn-sm icon-btn layui-btn-primary" style="margin-top: 2px"> 数据同步 <i class="layui-icon layui-icon-drop"></i></button>
|
<ul class="dropdown-menu-nav dark">
|
<div class="dropdown-anchor"></div>
|
<li class="title">1st menu</li>
|
<li><a onclick="excelMouldDownload()" style="font-size: 12px"><i class="layui-icon layui-icon-template-1"></i>模板下载</a></li>
|
<li><a onclick="importExcel()" style="font-size: 12px"><i class="layui-icon layui-icon-upload"></i>导入 Excel</a></li>
|
<li style="display: none"><input id="importExcel" type="file" onchange="upload(this)" ></li>
|
<hr>
|
<li class="title">2nd menu</li>
|
<li><a onclick="exportExcel()" style="font-size: 12px"><i class="layui-icon layui-icon-export"></i>导出 Excel</a></li>
|
</ul>
|
</div>
|
</div>
|
</script>
|
|
<script type="text/html" id="typeTpl">
|
{{# if( d.type === 1){ }}
|
<span name="type" class="layui-badge layui-badge-red" ><span style="display: none">{{d.number}}</span>仓库</span>
|
{{# } else if(d.type === 2){ }}
|
<span name="type" class="layui-badge layui-badge-blue" ><span style="display: none">{{d.number}}</span>库区</span>
|
{{# } else if(d.type === 3){ }}
|
<span name="type" class="layui-badge layui-badge-green" ><span style="display: none">{{d.number}}</span>货位</span>
|
{{# } else { }}
|
<span name="type" class="layui-badge layui-badge-gray" ><span style="display: none">{{d.number}}</span>其他</span>
|
{{# } }}
|
</script>
|
|
<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="level" type="hidden">
|
<input name="sort" type="hidden">
|
<input name="leading" type="hidden">
|
<input name="barcode" type="hidden">
|
<input name="major" 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="nodeParentSel" 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="3">货位</option>
|
</select>
|
</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="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/template" id="locPrintTpl">
|
{{#each data}}
|
<img class="template-code" src="{{this.barcodeUrl}}" width="100%">
|
<div style="letter-spacing: 2px;margin-top: 1px; text-align: center">
|
<span>{{this.item}}</span>
|
</div>
|
{{/each}}
|
</script>
|
<div id="printBox" style="display: none;"></div>
|
<script type="text/javascript" src="../../static/js/jquery/jquery-3.3.1.min.js"></script>
|
<script type="text/javascript" src="../../static/js/jquery/jQuery.print.js"></script>
|
<script type="text/javascript" src="../../static/js/handlebars/handlebars-v4.5.3.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>
|
var insTb;
|
var admin;
|
layui.config({
|
base: baseUrl + "/static/layui/lay/modules/"
|
}).extend({
|
dropdown: 'dropdown/dropdown',
|
}).use(['form','treeTable', 'admin', 'xmSelect', 'dropdown', 'element'], function() {
|
var $ = layui.jquery;
|
var layer = layui.layer;
|
var form = layui.form;
|
admin = layui.admin;
|
var treeTable = layui.treeTable;
|
var xmSelect = layui.xmSelect;
|
var tbDataList = [];
|
|
insTb = treeTable.render({
|
elem: '#node',
|
url: baseUrl+'/node/list/tree/auth',
|
headers: {token: localStorage.getItem('token')},
|
height: 'full-200',
|
toolbar: '#toolbar',
|
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', left: 'center',title: '编号/名称', minWidth: 150}
|
,{field: 'type$', align: 'center',title: '类型', templet: '#typeTpl'}
|
// ,{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: '状态', hide: true}
|
,{field: 'row1', align: 'center',title: '排'}
|
,{field: 'bay1', align: 'center',title: '列'}
|
,{field: 'lev1', align: 'center',title: '层'}
|
,{field: 'updateTime$', align: 'center',title: '修改时间'}
|
,{field: 'updateBy$', align: 'center',title: '修改人员'}
|
,{field: 'memo', align: 'center',title: '备注', hide: true}
|
|
,{fixed: 'right', title:'操作', align: 'center', toolbar: '#operate', width:150}
|
]],
|
done: function (data) {
|
console.log(data)
|
$('.ew-tree-table-box').css('height', '100%');
|
insTb.expandAll();
|
tbDataList = data;
|
}
|
});
|
|
/* 表格头工具栏点击事件 */
|
treeTable.on('toolbar(node)', function (obj) {
|
var checkRows = insTb.checkStatus();
|
if (obj.event === 'add') { // 添加
|
showEditModel();
|
} else if (obj.event === 'del') { // 删除
|
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});
|
} else if (obj.event === 'printBatch') {
|
if (checkRows.length === 0) {
|
layer.msg('请选择要打印的数据', {icon: 2});
|
return;
|
}
|
var printContent = checkRows.map(function (d) {
|
if (!d.LAY_INDETERMINATE && d.type === 3) {
|
return d.name;
|
} else {
|
return null;
|
}
|
});
|
printBatch(printContent, 1);
|
}
|
});
|
|
/* 表格操作列点击事件 */
|
treeTable.on('tool(node)', 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+"/node/"+(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: '#nodeParentSel',
|
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+"/node/delete0/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});
|
}
|
}
|
})
|
});
|
}
|
|
// 批量打印
|
function printBatch(printMsgList, type) {
|
var data = [];
|
for (var i = 0; i<printMsgList.length; i ++) {
|
if (printMsgList[i] != null && printMsgList[i] !== '') {
|
var barcodeUrl;
|
if (type === 1) {
|
barcodeUrl = baseUrl+"/barcode/qrcode/auth?type="+type+"¶m="+printMsgList[i]+"&width="+200+"&height="+70;
|
} else {
|
barcodeUrl = baseUrl+"/barcode/qrcode/auth?type="+type+"¶m="+printMsgList[i]+"&width="+400+"&height="+180;
|
}
|
data.push({
|
item: printMsgList[i],
|
barcodeUrl: barcodeUrl
|
})
|
}
|
}
|
var tpl = $('#locPrintTpl').html();
|
var template = Handlebars.compile(tpl);
|
var html = template({data: data});
|
var box = $("#printBox");
|
box.html(html);
|
box.show();
|
box.print({mediaPrint:true});
|
box.hide();
|
}
|
|
});
|
|
// excel导入模板下载
|
function excelMouldDownload(){
|
layer.load(1, {shade: [0.1,'#fff']});
|
location.href = baseUrl + "/node/excel/import/mould";
|
layer.closeAll('loading');
|
}
|
|
// excel导入
|
function importExcel() {
|
$("#importExcel").trigger("click");
|
}
|
function upload(obj){
|
if(!obj.files) {
|
return;
|
}
|
var file = obj.files[0];
|
admin.confirm('确认同步 [' + file.name +'] 文件吗？', function (index) {
|
layer.load(1, {shade: [0.1,'#fff']});
|
var url = baseUrl + "/node/excel/import/auth";
|
var form = new FormData();
|
form.append("file", file);
|
xhr = new XMLHttpRequest();
|
xhr.open("post", url, true); //post方式，url为服务器请求地址，true 该参数规定请求是否异步处理。
|
xhr.setRequestHeader('token', localStorage.getItem('token'));
|
xhr.onload = uploadComplete; //请求完成
|
xhr.onerror = uploadFailed; //请求失败
|
xhr.onloadend = function () { // // 上传完成重置文件流
|
layer.closeAll('loading');
|
$("#importExcel").val("");
|
};
|
// xhr.upload.onprogress = progressFunction;//【上传进度调用方法实现】
|
xhr.upload.onloadstart = function(){//上传开始执行方法
|
ot = new Date().getTime(); //设置上传开始时间
|
oloaded = 0;//设置上传开始时，以上传的文件大小为0
|
};
|
xhr.send(form);
|
}, function(index){
|
$("#importExcel").val("");
|
});
|
}
|
function uploadComplete(evt) {
|
var res = JSON.parse(evt.target.responseText);
|
if(res.code === 200) {
|
layer.msg(res.msg, {icon: 1});
|
insTb.refresh();
|
} else {
|
layer.msg(res.msg, {icon: 2});
|
}
|
}
|
function uploadFailed(evt) {
|
var res = JSON.parse(evt.target.responseText);
|
layer.msg(res.msg, {icon: 2});
|
}
|
|
// excel导出
|
function exportExcel() {
|
|
}
|
|
</script>
|
</body>
|
</html>
|
