<!DOCTYPE html>
|
<html>
|
|
<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.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
|
<link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all">
|
<link rel="stylesheet" type="text/css" href="../../js/HiPrint/css/hiprint.css?t=' + Math.random() + '" />
|
<link rel="stylesheet" type="text/css" href="../../js/HiPrint/css/print-lock.css" />
|
<!-- <link rel="stylesheet" type="text/css" href="../../js/HiPrint/css/bootstrap.min.css" > -->
|
<style>
|
.layui-form-label {
|
padding: 5px 1px;
|
text-align: center;
|
}
|
|
div {
|
font-size: inherit;
|
}
|
</style>
|
</head>
|
|
<body>
|
<div class="layui-card">
|
<div class="layui-form" lay-filter="layuiadmin-app-form-list" id="layuiadmin-app-form-list"
|
style="padding: 20px 30px 0 0;">
|
<form class="layui-form layui-form-pane">
|
<input type="hidden" id="Id" name="Id" class="layui-input">
|
<div class="layui-form-item">
|
<div class="layui-inline">
|
<label class="layui-form-label">模板名称</label>
|
<div class="layui-input-block" style="width: 184.44px;">
|
<input type="text" id="Name" name="Name" placeholder="请输入模板名称" lay-verify="required"
|
autocomplete="off" class="layui-input">
|
</div>
|
</div>
|
<div class="layui-inline">
|
<label class="layui-form-label">类型</label>
|
<div class="layui-input-block" style="width: 184.44px;">
|
<select id="Type" name="Type" id="Type" lay-verify="" lay-filter="Type" lay-search>
|
<!-- <option value="1">入库货品</option> -->
|
<option value=""></option>
|
</select>
|
</div>
|
</div>
|
<div class="layui-inline">
|
<label class="layui-form-label">是否默认</label>
|
<div class="layui-input-block" style="width: 184.44px;">
|
<select id="Status" name="Status" id="Status" lay-verify="" lay-search>
|
<option value="0">否</option>
|
<option value="1">是</option>
|
</select>
|
</div>
|
</div>
|
<div class="layui-inline">
|
<button type="submit" class="layui-btn" lay-submit lay-filter="lay-sub">立即提交</button>
|
</div>
|
</div>
|
|
</form>
|
</div>
|
<div class="row">
|
<content style="border-left:1px solid #e8e8e8; ">
|
<!--左侧div-->
|
<div class="layui-col-xs2" style="padding-right:0px;max-height:250mm;">
|
<div class="small-printElement-types hiprintEpContainer">
|
</div>
|
</div>
|
<!--打印部分-->
|
<div class="layui-col-xs8" style="overflow: hidden;outline: none;">
|
<!--打印头部分-->
|
<div class="hiprint-toolbar" style="margin-top:15px;margin-left:10px;">
|
<ul>
|
<!-- <li><a class="hiprint-tizee-btn" onclick="setPaper('A3')">A3</a></li> -->
|
<li><a class="hiprint-tizee-btn" onclick="setPaper('A4')">A4</a></li>
|
<li><a class="hiprint-tizee-btn" onclick="setPaper('A5')">A5</a></li>
|
<!-- <li><a class="hiprint-tizee-btn" onclick="setPaper('B3')">B3</a></li> -->
|
<li><a class="hiprint-tizee-btn" onclick="setPaper('B4')">B4</a></li>
|
<li><a class="hiprint-tizee-btn" onclick="setPaper('B5')">B5</a></li>
|
<li><a class="hiprint-toolbar-item"><input type="number" id="customWidth"
|
style="width: 50px;height: 19px;border: 0px;" placeholder="宽/mm" /></a></li>
|
<li><a class="hiprint-toolbar-item"><input type="number" id="customHeight"
|
style="width: 50px;height: 19px;border: 0px;" placeholder="高/mm" /></a></li>
|
<li><a class="hiprint-tizee-btn"
|
onclick="setPaper($('#customWidth').val(),$('#customHeight').val())">自定义</a>
|
</li>
|
<li><a class="hiprint-toolbar-item" onclick="rotatePaper()">旋转</a></li>
|
<li><a class="hiprint-tizee-btn" onclick="clearTemplate()">清空</a></li>
|
<!-- <li> <a class="btn hiprint-toolbar-item "
|
style="color: #fff;background-color: #d9534f;border-color: #d43f3a;"
|
id="preview">快速预览</a> </li> -->
|
<li>
|
<a id="directPrint" class="btn hiprint-toolbar-item "
|
style="color: #fff;background-color: #d9534f; border-color: #d43f3a;">打印</a>
|
</li>
|
<!-- <li> <a id="directPrint2" class="btn hiprint-toolbar-item "
|
style="color: #fff;background-color: #d9534f; border-color: #d43f3a;">直接打印</a>
|
</li> -->
|
<!-- <li>
|
<a class="btn hiprint-toolbar-item"
|
style="color: #fff;background-color: #d9534f; border-color: #d43f3a;"
|
id="A4_getJson_toTextarea" onclick="BtnSubmit_Click()">保存</a>
|
</li> -->
|
</ul>
|
<div style="clear:both;"></div>
|
</div>
|
<!--打印主体部分-->
|
<div style="overflow-x: scroll; overflow-y: hidden;">
|
<div id="hiprint-printTemplate" class="hiprint-printTemplate"
|
style="margin-top:20px;margin-left:20px;">
|
</div>
|
</div>
|
<textarea class="form-control" rows="10" id="A4_textarea_json" style="display: none;"></textarea>
|
</div>
|
<div class="layui-col-xs2" style="max-height:260mm; overflow-y: scroll;">
|
<div id="PrintElementOptionSetting" style="margin-top: 10px;"></div>
|
</div>
|
</content>
|
<!--右侧div-->
|
</div>
|
</div>
|
|
<script src="../../js/jquery-3.5.1.min.js"></script>
|
<script src="../../js/jquery.cookie.js"></script>
|
<script src="../../js/hiprint/content/bootstrap.min.js"></script>
|
<script src="../../js/HiPrint/hiprint.bundle.js?t=' + Math.random() + '"></script>
|
<script src="../../js/HiPrint/polyfill.min.js"></script>
|
<script src="../../js/HiPrint/plugins/jquery.minicolors.min.js"></script>
|
<script src="../../js/HiPrint/plugins/JsBarcode.all.min.js"></script>
|
<script src="../../js/HiPrint/plugins/qrcode.js"></script>
|
<script src="../../js/HiPrint/plugins/jquery.hiwprint.js"></script>
|
<!-- <script src="../../js/HiPrint/plugins/socket.io.js"></script> -->
|
<script src="../../js/HiPrint/plugins/config-etype-provider.js"></script>
|
<script src="../../js/HiPrint/plugins/print-data-list.js"></script>
|
<script src="../../layuiadmin/layui/layui.js"></script>
|
<script src="../../js/public.js"></script>
|
<script>
|
var datalist = [];
|
var printData = {
|
SkuNo: '000001',
|
SkuName: '测试物料1'
|
};
|
var configPrintJson;
|
layui.config({
|
base: '../../layuiadmin/' //静态资源所在路径
|
}).extend({
|
index: 'lib/index' //主入口模块
|
}).use(['index', 'form', 'layer'], function () {
|
var $ = layui.$,
|
form = layui.form,
|
layer = layui.layer;
|
var istrue = "0";
|
// 提交事件
|
form.on('submit(lay-sub)', function (data) {
|
var field = data.field; // 获取表单字段值
|
var jsondata = JSON.stringify(hiprintTemplate.getJsonTid())
|
var url = "/sys/AddPrintTemplate";
|
var param = {
|
Name: data.field.Name,
|
Type: data.field.Type,
|
Status: data.field.Status,
|
PositionJson: jsondata
|
}
|
if ($("#Id").val()) {
|
param.Id = parseInt($("#Id").val());
|
url = "/sys/EditPrintTemplate"
|
}
|
sendData(IP + url, param, 'post', function (res) {
|
console.log(res);
|
if (res.code == 0) //成功
|
{
|
layer.msg(res.msg, {
|
icon: 1,
|
time: 2000 //2秒关闭（如果不配置，默认是3秒）
|
}, function () {
|
var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
|
parent.layer.close(index); //再执行关闭
|
parent.refreshTable();
|
});
|
}
|
else //不成功
|
{
|
layer.msg(res.msg, {
|
icon: 2,
|
time: 2000 //2秒关闭（如果不配置，默认是3秒）
|
}, function () { doing = true; });
|
}
|
});
|
return false; // 阻止默认 form 跳转
|
});
|
form.on('select(Type)', function (data) {
|
datalist = getPrintDataList()(data.value);
|
$(".hiprintEpContainer").html(""); //清除div内容
|
hiprint.init({
|
providers: [new configElementTypeProvider()]
|
});
|
hiprint.PrintElementTypeManager.build('.hiprintEpContainer',
|
'testModule');
|
})
|
|
//修改
|
GetPrintType();
|
var id = getQueryString('id');
|
if (!id) {
|
$('#Id').val('');
|
id = 0;
|
}
|
else {
|
$('#Id').val(id);
|
$('#Name').val(parent.objRowsData.Name);
|
$('#Type').val(parent.objRowsData.Type);
|
$('#Status').val(parent.objRowsData.Status);
|
form.render();
|
}
|
function GetPrintType() {
|
sendData(IP + "/Sys/GetDictionaryByParentNo?parentNo=" + "PrintType", {}, 'get', function (res) {
|
if (res.code == 0) { //成功
|
for (var i = 0; i < res.data.length; i++) {
|
$("#Type").append('<option value =' + res.data[i].DictNo + '>' +
|
res.data[i].DictName + '</option>');
|
}
|
$("#Type").val(parent.objRowsData.Type);
|
form.render('select');
|
} else { //不成功
|
layer.msg(res.msg, {
|
icon: 2,
|
time: 2000 //2秒关闭（如果不配置，默认是3秒）
|
}, function () { });
|
}
|
});
|
}
|
})
|
|
var setPaper = function (paperTypeOrWidth, height) {
|
hiprintTemplate.setPaper(paperTypeOrWidth, height);
|
}
|
var clearTemplate = function () {
|
hiprintTemplate.clear();
|
}
|
|
//初始化打印插件渲染
|
// $(".hiprintEpContainer").html(""); //清除div内容
|
if (parent.objRowsData.Type) {
|
datalist = getPrintDataList()(parent.objRowsData.Type);
|
}
|
hiprint.init({
|
providers: [new configElementTypeProvider()]
|
});
|
//设置左侧拖拽事件
|
hiprint.PrintElementTypeManager.build('.hiprintEpContainer',
|
'testModule');
|
|
let hiprintTemplate;
|
if (parent.objRowsData.PositionJson)
|
var JsonData = JSON.parse(parent.objRowsData.PositionJson)
|
if (JsonData) {
|
$("#customWidth").val(JsonData.panels[0].width);
|
$("#customHeight").val(JsonData.panels[0].height);
|
hiprintTemplate = new hiprint.PrintTemplate({
|
template: JsonData,//模板JSON
|
settingContainer: '#PrintElementOptionSetting',
|
paginationContainer: '.hiprint-printPagination'
|
});
|
}
|
else {
|
hiprintTemplate = new hiprint.PrintTemplate({
|
template: configPrintJson,//模板JSON
|
settingContainer: '#PrintElementOptionSetting',
|
paginationContainer: '.hiprint-printPagination'
|
});
|
}
|
|
//打印设计
|
hiprintTemplate.design('#hiprint-printTemplate');
|
|
//预览
|
$('#preview').click(function () {
|
$('#myModal .modal-body .prevViewDiv').html(hiprintTemplate.getHtml(printData))
|
$('#myModal').modal('show')
|
});
|
$('#directPrint').click(function () {
|
hiprintTemplate.print(printData);
|
});
|
$('#directPrint2').click(function () {
|
hiprintTemplate.print2(printData, '打印');
|
});
|
//旋转
|
var rotatePaper = function () {
|
hiprintTemplate.rotatePaper();
|
}
|
|
|
</script>
|
</body>
|
|
</html>
|
