对接物资签名

src/main/webapp/webpage/modules/warehouse/materialrequisition/materialRequisitionDetail.jsp

@@ -9,12 +9,12 @@
 <%@ include file="/webpage/include/taglib.jsp" %>
 <div id="toolbar" class="text-left">
     <c:if test="${mode == 'add' || mode == 'edit'}">
-        <a class="btn btn-primary btn-sm" onclick="addDetail('#detail_table')" title="新增"><i class="fa fa-plus"></i>
-            手动添加</a>
-        <a class="btn btn-primary btn-sm" onclick="addScan('#detail_table')" title="新增"><i class="fa fa-plus"></i>
-            扫码添加</a>
-        <a id="editAll" class="btn btn-primary btn-sm" onclick="addReceiver('#detail_table')" title="新增"><i
-                class="fa fa-plus"></i> 批量编辑领用人</a>
+        <button type="button" class="btn btn-primary btn-sm" onclick="addDetail('#detail_table')" title="新增"><i class="fa fa-plus"></i>
+            手动添加</button>
+        <button type="button" class="btn btn-primary btn-sm" onclick="addScan('#detail_table')" title="新增"><i class="fa fa-plus"></i>
+            扫码添加</button>
+        <button id="editAll" type="button" class="btn btn-primary btn-sm" disabled onclick="addReceiver()" title="新增"><i
+                class="fa fa-plus"></i> 批量编辑领用人</button>
     </c:if>
 </div>
 <table id="detail_table" data-toolbar="#toolbar"></table>
@@ -94,6 +94,7 @@
                 {
                     field: 'receiver.name',
                     title: '领用人',
+                    align: 'center',
                     formatter: function (value, row, index) {
                         return Mustache.render($("#receiverTpl").html().replace(/(\/\/\<!\-\-)|(\/\/\-\->)/g, ""), {
                             row: row,
@@ -115,7 +116,7 @@
                     field: '',
                     title: '操作',
                     formatter: function (value, row, index) {
-                        var text = row.delFlag == 1 ? '撤销删除' : '删除';
+                        var text =  '删除';
                         var result = ["<a href='javascript:void(0);' onclick=\"removeRow(" + index + ", '" + row.id + "',  '" + row.delFlag + "')\">" + text + "</a>"]
                         return result.join('');
                     }
@@ -176,17 +177,10 @@
     }
 
     function removeRow(index, rowId, rowDelFlag) {
-        if (rowId) {
-            var delFlag = rowDelFlag === 1 ? 0 : 1
-            updateRow(index, {
-                delFlag: delFlag
-            })
-        } else {
-            $(selector).bootstrapTable("remove", {
-                field: '$index',
-                values: [index]
-            })
-        }
+        $(selector).bootstrapTable("remove", {
+            field: '$index',
+            values: [index]
+        })
     }
 
     function updateRow(index, row) {
@@ -227,39 +221,47 @@
         return $(selector).bootstrapTable('getData');
     }
 
-    function addReceiver() {
+    function addReceiver(ledgerInfoId) {
 
         if (!$("#officeId").val()) {
             jp.warning('请选择领用机构！');
             return;
         }
 
-        if(!getSelections().length){
-            jp.warning('请添加并勾选明细!');
-            return;
-        }
-
-        jp.openGridSelectDialog({
-            title: '选择领用人',
-            isMultiSelect: false,
-            url: "${ctx}/sys/user/list?office.id=" + $("#officeId").val(),
-            fieldLabels: "领用人|手机|归属公司|归属部门",
-            fieldKeys: "name|phone|company.name|office.name",
-            searchLabels: "领用人",
-            searchKeys: "name",
-
-        }, function (items) {
-            var receiver = items[0];
-            // TODO: 获取选中的明细下标
-            getSelections().forEach(function (item) {
-                var index = getTableData().findIndex(function (current) {
-                    return current.ledgerInfo.id === item.ledgerInfo.id;
-                })
-                updateRow(index, {
-                    receiver: receiver
-                })
-            })
-
+        layer.open({
+            type: 1,
+            title: '签名',
+            auto:true,
+            area:[800,600],
+            content: '<div id="signBox" class="sign" contentEditable="true" style="width: 100%;height: 100%;"></div>',
+            success: function (layero){
+                $(layero[0]).find("#signBox").focus();
+            },
+            btn: ['确认','清空','取消'],
+            btn1: function(index, layero){
+                if(ledgerInfoId){
+                    var i = getTableData().findIndex(function (current) {
+                        return current.ledgerInfo.id === ledgerInfoId;
+                    })
+                    updateRow(i, {
+                        receiver: $(layero[0]).find("#signBox img").attr('src')
+                    })
+                }else{
+                    getSelections().forEach(function (item) {
+                        var index = getTableData().findIndex(function (current) {
+                            return current.ledgerInfo.id === item.ledgerInfo.id;
+                        })
+                        updateRow(index, {
+                            receiver: $(layero[0]).find("#signBox img").attr('src')
+                        })
+                    });
+                }
+                layer.close(index);
+            },
+            btn2: function (index, layero){
+                $(layero[0]).find("#signBox").empty().focus();
+                return false;
+            }
         })
     }
 
@@ -326,6 +328,13 @@
             console.log(e);
         }
     }
+
+    function delSign(elem, index){
+        $(elem).parent().remove();
+        updateRow(index,{
+            receiver: ''
+        })
+    }
 </script>
 
 <script id="hideTpl" type="text/html">
@@ -365,12 +374,20 @@
            name="materialRequisitionInfoList[{{idx}}].ledgerInfo.amount" type="text" readonly class="form-control"
            value="{{row.ledgerInfo.amount}}"/>
 </script>
-<script id="receiverTpl" type="text/html">//<!--
-  <sys:gridselect url="${ctx}/sys/user/list" id="materialRequisitionInfoList{{idx}}_receiver" name="materialRequisitionInfoList[{{idx}}].receiver.id" value="{{row.receiver.id}}" labelName="materialRequisitionInfoList[{{idx}}].receiver.name" labelValue="{{row.receiver.name}}"
-                  title="选择领用人" cssClass="form-control required" fieldLabels="领用人|手机|归属公司|归属部门" iframeUrl="/warehouse/materialrequisition/materialRequisition/form" validate="true" callback="onSelectReceiver" validateSelector="#officeId" validateMsg="请选择领用机构" fieldKeys="name|phone|company.name|office.name" searchLabels="领用人" searchKeys="name" ></sys:gridselect>//-->
+<script id="receiverTpl" type="text/html">
+    <input type="hidden" name="materialRequisitionInfoList[{{idx}}].receiver" value="{{row.receiver}}">
+    {{#row.receiver}}
+     <div class="sign-result">
+         <img src="{{row.receiver}}" alt="签名" width="100%"  />
+         <span class="del-sign" onclick="delSign(this, {{idx}})">&times;</span>
+     </div>
+    {{/row.receiver}}
+    {{^row.receiver}}
+    <a onclick="addReceiver('{{row.ledgerInfo.id}}')">签名</a>
+    {{/row.receiver}}
 </script>
 <script id="remarksTpl" type="text/html">
-    <textarea id="storageInfoList{{idx}}_remarks" name="storageInfoList[{{idx}}].remarks" rows="2"
+    <textarea id="materialRequisitionInfoList{{idx}}_remarks" name="materialRequisitionInfoList[{{idx}}].remarks" rows="2"
               onchange="onInputChange('{{idx}}', this, 'remarks')" class="form-control ">{{row.remarks}}</textarea>
 </script>
 

src/main/webapp/webpage/modules/warehouse/materialrequisition/materialRequisitionForm.jsp

@@ -8,6 +8,28 @@
     <link rel="stylesheet" href="${ctxStatic}/plugin/bootstrapTable/bootstrap-table.min.css">
     <script type="text/javascript" src="${ctxStatic}/plugin/bootstrapTable/bootstrap-table.min.js"></script>
     <script type="text/javascript" src="${ctxStatic}/plugin/bootstrapTable/bootstrap-table-zh-CN.js"></script>
+    <style>
+        .sign-result{
+            width: 80px;
+            position: relative;
+        }
+        .sign-result .del-sign{
+            position: absolute;
+            top: -8px;
+            right: -7px;
+            width: 16px;
+            height: 16px;
+            line-height: 16px;
+            background: #f00;
+            text-align: center;
+            border-radius: 100%;
+            color: #fff;
+            cursor: pointer;
+        }
+        .sign:focus-visible {
+            outline: none;
+        }
+    </style>
 </head>
 <body>
 <div class="wrapper wrapper-content">
@@ -45,7 +67,7 @@
                                 <td>领用时间</td>
                                 <td>
                                     <div class='input-group form_datetime' id='time'>
-                                        <input type='text' name="time" class="form-control "
+                                        <input type='text' name="time" class="form-control"
                                                value="<fmt:formatDate value="${materialRequisition.time}" pattern="yyyy-MM-dd HH:mm:ss"/>"/>
                                         <span class="input-group-addon">
 								        <span class="glyphicon glyphicon-calendar"></span>

src/main/webapp/webpage/modules/warehouse/materialrequisition/materialRequisitionList.js

@@ -349,7 +349,7 @@ $(document).ready(function() {
 						{{row.ledgerInfo.amount}}
 					</td>
 					<td>
-						{{row.receiver.name}}
+						<img src="{{row.receiver}}" width="80"/>
 					</td>
 					<td>
 						{{row.remarks}}