'commit'

1 year ago · d7aa1487cf
parent 4aa3ba9d3b
commit d7aa1487cf
3 changed files with 213 additions and 118 deletions
--- a/WebRoot/view/ywgl/qm/index.html
+++ b/WebRoot/view/ywgl/qm/index.html
@ -1,133 +1,87 @@
-<!DOCTYPE html>
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
+<html>
 <script src="../../../admin/js/jquery-3.6.0.min.js"></script>
 <script src="../../../component/jSignature/jSignature.min.js"></script>
 <head>
-    <meta charset="UTF-8">    
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-    <title>Title</title>
+    <title>签名</title>
    <link rel="stylesheet" th:href="@{/static/css/style.css}">
 </head>
 <body>
 <div class="layui-form" style="padding: 20px 20px 20px 20px;">
    <div class="page-group">
        <!-- 单个page ,第一个.page默认被展示-->
        <div class="page page-current">
            <header class="bar bar-nav bar-nav-top">
                <h1 class="title">签名</h1>
            </header>
            <nav class="bar bar-footer padding-none">
                <div class="grid-flex footer-btn-group">
                    <button type="button" class="item btn-gray" id="reSign">重签一次</button>
                    <button type="button" class="item btn-blue" data-id="submit" id="confirm-btn">保存，签名确认</button>
                </div>
            </nav>
            <div class="content">
-                <div class="content-padded">
+    <style>
-                    <div class="enroll_box_qianm">
+        .box {
-                        <div id="signature" class="signature"></div>
+            width: 330px;
-                        <div class="tips">
+            height: 360px;
-                            请在上方输入框中进行手写签名
+            border: 1px solid #D1D1D1;
-                        </div>
+            border-radius: 10px;
                        <div class="signature-mark" style="display:none;">
                            <table width="100%" height="100%">
                                <tr>
                                    <td valign="middle" style="font-size:90%;">如需重签请点击“重签一次”</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
 </div>
            display: grid;
            justify-content: center;
            align-items: flex-end;
-<script th:src="@{/static/js/jquery.min.js}"></script>
+        }
 <script type="text/javascript">jQuery.noConflict();</script>
 <script th:src="@{/static/js/jSignature.min.noconflict.js}"></script>
 <script>
    /*
    api 命令：
-    init是默认的，假定的动作。 init需要一个参数 - 一个设置对象。 您可以省略命令，并在init中传递设置对象。 返回（以传统的jQuery链接方式）jQuery对象引用应用插件的元素。
+        .signature {
-    reset 复位只是清除签名板，数据存储（并放回签名线和其他装饰）。 返回（以传统的jQuery链接方式）jQuery对象引用应用插件的元素。
+            width: 300px;
-    clear reset别名，历史遗留
+            height: 300px;
-    getData 接受参数 - 数据格式的名称。 返回适合数据格式的数据对象
+            /* margin-bottom: 50px; */
-    setData 需要两个参数 - 数据对象，数据格式名称。 当数据对象是以data-url模式格式化的字符串时，您不需要指定数据dormat名称。 数据格式名称（mime）将从data-url前缀中隐含。 见下面的例子。 返回（以传统的jQuery链接方式）jQuery对象引用应用插件的元素。
+            border-bottom: 2px solid #999999;
-    importData  setData的别名 ，历史遗留
+        }
    listPlugins 接受一个参数 - 表示要列出的插件的类别（仅导出，此时支持的导入）的字符串。 返回字符串数组。
    disable 使画布只读，并禁用jSignature按钮
    enable 使画布只读，并启用jSignature按钮
    isModified 如果jSignature被修改，返回一个布尔值true，否则返回false。
    getSettings 返回jSignature实例的可配置设置。
    updateSetting 需要三个参数 - 设置名称，新值，布尔值，如果更改应该影响当前签名或将来的笔画。 这允许您更新某些设置，如lineWidth或线条颜色，使用第三个参数可以使更改适用于现有笔画。 目前，更新现有笔画的更改仅适用于像颜色这样的几个设置。 返回更新的值
    */
    (function($){
        //初始化签名插件
        $("#signature").jSignature({
            width : '300px',
            height : '350px'
        });
-        //重新签名
+        .memo {
-        $("#reSign").click(function(){
+            width: 300px;
-            var $signArea=$("#signature");
+            height: 40px;
            text-align: center;
            margin-top: 10px;
            color: #999999;
        }
-            //使画布只读，并启用jSignature按钮
+       
-            $signArea.jSignature("enable");
+    </style>
 </head>
-            $(".signature-mark").hide();
+<body>
-            $('#confirm-btn').prop('disabled', false);
+    
        <div class="box">
            <div class="signature" id="signature"></div>
            <div class="memo">请在上方进行手写签名</div>
-            //重置
+        </div>
-            $signArea.jSignature("reset");
+    
    <br>
    <button type="button" class="btn btn-primary btn-block" id="save">保存</button>
    <button type="button" class="btn btn-default btn-block" id="clear">清除</button>
    这里是保存后图片:
    <img class="img" src="" alt="">
    <script type="text/javascript">
        var param = {
            width: '300px', //签名区域的宽
            height: '300px', //签名区域的高            
            UndoButton: false, //撤销按钮的状态 这个按钮的样式修改要去jSignature.js文件中去找
            signatureLine: false, //去除默认画布上那条横线
            lineWidth: '5' //画笔的大小
        };
        $("#signature").jSignature(param);
        //jSignature提供了清除的API reset
        $('#clear').click(function () {
            $("#signature").jSignature("reset");
        });
-        //确认签名
+        //提交
-        $('#confirm-btn').click(function(){
+        $('#save').click(function () {
-            // 获取签名的SVG
+            if ($("#signature").jSignature('getData', 'native').length === 0) {
-            // jSignature("getData","svgbase64");
+                alert("请签名后再提交！");
            // 获取签名的“base30”数据对
            var base30 =$("#signature").jSignature("getData", "base30");
            if(base30 && base30.length==2 && base30[1]==""){
                alert('请签名');
                return;
            }
-            else{
+            //将签名的画布保存为base64编码字符串 默认是png的
-                //待提交数据
+            var datapair = $("#signature").jSignature("getData", "image");
-                var imageData=addSign();
+            var i = new Image();
-                $(this).prop('disabled', true);
+            i.src = "data:" + datapair[0] + "," + datapair[1];
-                $(".signature-mark").show();
+            console.log(i.src);
-
+            $('.img').attr('src', i.src)
-                var base64Src = encodeURIComponent(encodeURIComponent(imageData));
+        })
-                console.log(base64Src);
+    </script>
                //...  业务处理
            }
        });
        //将写字板的内容添加至展示区
        function addSign(){
            var src='';
            var $signArea=$("#signature");
            var data = $signArea.jSignature("getData", "image");
            if(data && data.length > 1){
                src = "data:" + data[0] + "," + data[1];
                console.log(src);
                //使画布只读，并禁用jSignature按钮
                $signArea.jSignature("disable");
            }
            return src;
        }
    })(jQuery);
 </script>
 </body>
-</html>
+
 </html>
--- a/WebRoot/view/ywgl/qm/signature.html
+++ b/WebRoot/view/ywgl/qm/signature.html
@ -0,0 +1,123 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="../../../component/pear/css/pear.css" />
    <style>
        .box {
            width: 430px;
            height: 210px;
            border: 1px solid #D1D1D1;
            border-radius: 10px;
            display: grid;
            justify-content: center;
            align-items: flex-end;
            margin: 10px;
        }
        .signature {
            width: 400px;
            height: 150px;
            /* margin-bottom: 50px; */
            border-bottom: 2px solid #999999;
        }
        .memo {
            width: 400px;
            height: 40px;
            text-align: center;
            margin-top: 10px;
            color: #999999;
        }
    </style>
 </head>
 <body>
    <div class="box">
        <div class="signature" id="signature"></div>
        <div class="memo">请在上方进行手写签名</div>
    </div>
    <div class="bottom">
        <div class="button-container">
            <button type="submit" class="pear-btn pear-btn-primary pear-btn-sm" id="save">
                <i class="layui-icon layui-icon-ok"></i>
                签名确认
            </button>
            &nbsp;&nbsp;
            <button type="submit" class="pear-btn pear-border pear-btn-sm" lay-submit="" lay-filter="clear">
                <i class="layui-icon layui-icon-fonts-clear"></i>
                重新签名
            </button>
        </div>
    </div>
    <script src="../../../component/layui/layui.js"></script>
    <script src="../../../component/pear/pear.js"></script>
    <script src="../../../admin/js/jquery-3.6.0.min.js"></script>
    <script src="../../../component/jSignature/jSignature.min.js"></script>
    <script>
        layui.use(['form'], function () {
            var form = layui.form;
            var param = {
                width: '400px', //签名区域的宽
                height: '150px', //签名区域的高            
                UndoButton: false, //撤销按钮的状态 这个按钮的样式修改要去jSignature.js文件中去找
                signatureLine: false, //去除默认画布上那条横线
                lineWidth: '5' //画笔的大小
            };
            $("#signature").jSignature(param);
            form.on('submit(clear)', function (data) {
                $("#signature").jSignature("reset");
            });
            //提交
            $('#save').click(function () {
                if ($("#signature").jSignature('getData', 'native').length === 0) {
                    layer.msg("请签名后再确认！", {
                        icon: 2,
                        time: 2000
                    });
                    return;
                }
                //将签名的画布保存为base64编码字符串 默认是png的
                var datapair = $("#signature").jSignature("getData", "image");
                var i = new Image();
                i.src = "data:" + datapair[0] + "," + datapair[1];
                console.log(i.src);
                $('.img').attr('src', i.src)
            })
            function GetQueryString(name, istop) {
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
                var r = window.location.search.substr(1).match(reg);
                if (typeof (istop) != "undefined") r = top.location.search.substr(1).match(reg);
                if (r != null) return unescape(r[2]);
                return null;
            }
        });
    </script>
 </body>
 </html>
--- a/WebRoot/view/ywgl/xswh/turn_audit_list.html
+++ b/WebRoot/view/ywgl/xswh/turn_audit_list.html
@ -52,6 +52,11 @@
                        <i class="layui-icon layui-icon-search"></i>
                        查询
                    </button>
                    <button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="testabc">
                        <i class="layui-icon layui-icon-search"></i>
                        查询
                    </button>
                </div>
            </div>
        </div>
@ -190,6 +195,19 @@
            });
            form.on('submit(testabc)', function () {
                layer.open({
                    type: 2,
                    title: '选择调转接收班级',
                    shade: 0.1,
                    area: ['450px', '340px'],
                    content: '../qm/signature.html'
                });
            });
            window.refresh = function (param) {
                table.reload('data-table');
            }