From 6634a2236e9425b62fc22df6a3ac3bc450c1a0d3 Mon Sep 17 00:00:00 2001
From: QI_YUJIE <2878090898@qq.com>
Date: Mon, 21 Aug 2023 13:31:52 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8F=91=E5=8C=85=E6=96=B9=E8=B0=83=E6=9F=A5?=
 =?UTF-8?q?=E7=AD=BE=E5=AD=97=E5=92=8C=E6=89=BF=E5=8C=85=E6=96=B9=E8=B0=83?=
 =?UTF-8?q?=E6=9F=A5=E7=AD=BE=E5=AD=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/contracted/cbf.js                     |   9 ++
 src/api/contracted/fbf.js                     |   9 ++
 .../village/contractor/contractorHeader.vue   | 129 +++++++++++++++++-
 .../contracted/village/employer/employer.vue  | 123 ++++++++++++++++-
 4 files changed, 265 insertions(+), 5 deletions(-)

diff --git a/src/api/contracted/cbf.js b/src/api/contracted/cbf.js
index e103e88b..157ae997 100644
--- a/src/api/contracted/cbf.js
+++ b/src/api/contracted/cbf.js
@@ -51,3 +51,12 @@ export function generateContractorCode(params) {
     params: params
   });
 }
+
+// 承包方调查签字
+export function contractorSignature(data) {
+  return request({
+    url: '/service/cbf/surveySign',
+    method: 'post',
+    data: data
+  });
+}
diff --git a/src/api/contracted/fbf.js b/src/api/contracted/fbf.js
index 2f6bd64b..cc4206fc 100644
--- a/src/api/contracted/fbf.js
+++ b/src/api/contracted/fbf.js
@@ -26,3 +26,12 @@ export function updateFbf(data) {
     data: data
   })
 }
+
+// 发包方调查签字
+export function manualSignature(data) {
+  return request({
+    url: '/service/fbf/surveySign',
+    method: 'post',
+    data: data
+  });
+}
diff --git a/src/views/contracted/village/contractor/contractorHeader.vue b/src/views/contracted/village/contractor/contractorHeader.vue
index 3c02d2b2..7ab7c021 100644
--- a/src/views/contracted/village/contractor/contractorHeader.vue
+++ b/src/views/contracted/village/contractor/contractorHeader.vue
@@ -3,24 +3,128 @@
     <van-nav-bar left-arrow fixed placeholder @click-left="goBack">
       <template #title>
         <div class="tb_main">
-          {{ contractorName }}<p><span class="tb">签字完成</span><span class="tb">异常挂起</span></p>
+          {{ contractorName }}<p><span class="tb" @click="handleSign">签字完成</span><span class="tb">异常挂起</span></p>
         </div>
       </template>
     </van-nav-bar>
+
+    <van-popup v-model="showSignPopup" closeable position="right" :style="{ height: '100%' }" >
+      <van-cell-group style="width: 100%;height:100%;overflow: hidden;padding-top: 10px;padding-bottom: 10px;">
+        <div class="signature-box" @mousedown="canvasTTdown" @touchstart="canvasTTdown">
+          <vue-esign
+            ref="esign"
+            class="mySign"
+            :width="500"
+            :height="height"
+            :isCrop="signature.isCrop"
+            :lineWidth="signature.lineWidth"
+            :lineColor="signature.lineColor"
+            :bgColor.sync="signature.bgColor"
+          />
+        </div>
+        <img src="../../../../assets/images/sunVillage_info/signature_icon_10.png" id="canvasTT" style="position:absolute;top: 50%;left: 50%;transform: translate(-50%,-50%)" alt="">
+        <div class="signature-footer">
+          <van-button @click="handleReset" class="clearBtn" type="info" plain  size="small">清空画板</van-button>
+          <van-button @click="handleGenerate" type="info" size="small">保存签字</van-button>
+        </div>
+      </van-cell-group>
+    </van-popup>
+
   </div>
 </template>
 <script>
   import { getDept } from "@/api/contracted";
+  import { contractorSignature } from "@/api/contracted/cbf";
+  import vueEsign from "vue-esign";
+  import $ from "jquery";
 
   export default {
     name: 'contractedVillageHeader',
     props: ['deptId', 'contractorCode', 'contractorName', 'surveyStatus'],
+    components: {
+      vueEsign
+    },
+    data() {
+      return {
+        // 控制签字面板的显示和隐藏
+        showSignPopup: false,
+        height: null,
+        //电子签名
+        signature: {
+          lineWidth: 6, // 画笔的线条粗细
+          lineColor: "#000000", // 画笔的颜色
+          bgColor: "", // 画布的背景颜色
+          resultImg: "", // 最终画布生成的base64图片
+          isCrop: false, // 是否裁剪，在画布设定尺寸基础上裁掉四周空白部分
+        },
+      };
+    },
+    created() {
+      this.height = window.screen.height * 1.28 - 20;
+    },
     methods: {
       goBack() {
         getDept(this.deptId).then(response => {
           this.$router.push({path:'/contracted/village/contractor', query: { deptId: this.deptId, deptName: response.data.deptName }});
         });
-      }
+      },
+      handleSign() {
+        this.showSignPopup = true;
+        this.handleReset();
+      },
+      canvasTTdown() {
+        $('#canvasTT').css('display', 'none');
+      },
+      // 清空画板
+      handleReset() {
+        if (this.$refs.esign) {
+          this.$refs.esign.reset();
+        }
+        $('#canvasTT').css('display', 'block')
+      },
+      // 生成签字图片
+      handleGenerate() {
+        this.$refs.esign
+          .generate() // 使用生成器调用把签字的图片转换成为base64图片格式
+          .then((res) => {
+            this.signature.resultImg = res;
+            let wj = this.dataURLtoBlob(res);
+            let param = new FormData()  // 创建form对象
+            param.append('file', wj)  // 通过append向form对象添加数据
+            param.append('cbfbm', this.contractorCode);
+            contractorSignature(param).then(response => {
+              if (response.code === 200) {
+                this.$toast({
+                  icon: 'success', // 找到自己需要的图标
+                  message: '签字成功',
+                  duration: "1000",
+                  onClose: () => {
+                    this.showSignPopup = false;
+                    this.goBack();
+                  }
+                });
+              }
+            });
+          })
+          .catch((err) => {
+            // 画布没有签字时会执行这里提示一下
+            this.$toast.fail('请签名后再保存签字');
+          });
+      },
+      dataURLtoBlob(dataurl, filename = 'file') {
+        let arr = dataurl.split(',')
+        let mime = arr[0].match(/:(.*?);/)[1]
+        let suffix = mime.split('/')[1]
+        let bstr = atob(arr[1])
+        let n = bstr.length
+        let u8arr = new Uint8Array(n)
+        while (n--) {
+          u8arr[n] = bstr.charCodeAt(n)
+        }
+        return new File([u8arr], `${filename}.${suffix}`, {
+          type: mime
+        })
+      },
     }
   }
 </script>
@@ -43,4 +147,25 @@
     border-radius: 50PX;
     margin-right: 5PX;
   }
+
+  .signature-box {
+    border: 1px dashed #666;
+    margin: 2px 20px;
+    height: 100%;
+    /*canvas{*/
+    /*  height: 100%!important;*/
+    /*}*/
+  }
+
+  .signature-footer {
+    transform: rotate(90deg);
+    width: auto;
+    position: absolute;
+    top: 50%;
+    left: 0PX;
+
+    .clearBtn {
+      margin-left: 15px;
+    }
+  }
 </style>
diff --git a/src/views/contracted/village/employer/employer.vue b/src/views/contracted/village/employer/employer.vue
index 6eff0d66..3410db79 100644
--- a/src/views/contracted/village/employer/employer.vue
+++ b/src/views/contracted/village/employer/employer.vue
@@ -52,19 +52,45 @@
       </van-form>
       <div class="btn_main">
         <p class="btn" @click="submitForm">保存</p>
-        <p class="btn1">签字</p>
+        <p class="btn1" @click="handleSign">签字</p>
       </div>
     </div>
 
+    <van-popup v-model="showSignPopup" closeable position="right" :style="{ height: '100%' }" >
+      <van-cell-group style="width: 100%;height:100%;overflow: hidden;padding-top: 10px;padding-bottom: 10px;">
+        <div class="signature-box" @mousedown="canvasTTdown" @touchstart="canvasTTdown">
+          <vue-esign
+            ref="esign"
+            class="mySign"
+            :width="500"
+            :height="height"
+            :isCrop="signature.isCrop"
+            :lineWidth="signature.lineWidth"
+            :lineColor="signature.lineColor"
+            :bgColor.sync="signature.bgColor"
+          />
+        </div>
+        <img src="../../../../assets/images/sunVillage_info/signature_icon_10.png" id="canvasTT" style="position:absolute;top: 50%;left: 50%;transform: translate(-50%,-50%)" alt="">
+        <div class="signature-footer">
+          <van-button @click="handleReset" class="clearBtn" type="info" plain  size="small">清空画板</van-button>
+          <van-button @click="handleGenerate" type="info" size="small">保存签字</van-button>
+        </div>
+      </van-cell-group>
+    </van-popup>
 
   </div>
 </template>
 <script>
   import Cookies from "js-cookie";
-  import { listFbf, addFbf, updateFbf } from "@/api/contracted/fbf";
+  import { listFbf, addFbf, updateFbf, manualSignature } from "@/api/contracted/fbf";
+  import vueEsign from "vue-esign";
+  import $ from "jquery";
 
   export default {
     name: "contractedVillageContractor",
+    components: {
+      vueEsign
+    },
     data() {
       return {
         form: {},                         // 发包方信息表单
@@ -72,9 +98,22 @@
         credentialTypeOptions: [],        // 证件类型字典
         credentialTypeText: null,         // 证件类型标签名
         showCredentialType: false,        // 控制证件类型字典弹出层的显示和隐藏
+
+        // 控制签字面板的显示和隐藏
+        showSignPopup: false,
+        height: null,
+        //电子签名
+        signature: {
+          lineWidth: 6, // 画笔的线条粗细
+          lineColor: "#000000", // 画笔的颜色
+          bgColor: "", // 画布的背景颜色
+          resultImg: "", // 最终画布生成的base64图片
+          isCrop: false, // 是否裁剪，在画布设定尺寸基础上裁掉四周空白部分
+        },
       };
     },
     created() {
+      this.height = window.screen.height * 1.28 - 20;
       this.getDicts("cert_type").then(response => {
         this.credentialTypeOptions = response.data;
       });
@@ -145,7 +184,64 @@
           fbfdcjs: null,
           fbfdcqz: null
         }
-      }
+      },
+      handleSign() {
+        this.showSignPopup = true;
+        this.handleReset();
+      },
+      canvasTTdown() {
+        $('#canvasTT').css('display', 'none');
+      },
+      // 清空画板
+      handleReset() {
+        if (this.$refs.esign) {
+          this.$refs.esign.reset();
+        }
+        $('#canvasTT').css('display', 'block')
+      },
+      // 生成签字图片
+      handleGenerate() {
+        this.$refs.esign
+          .generate() // 使用生成器调用把签字的图片转换成为base64图片格式
+          .then((res) => {
+            this.signature.resultImg = res;
+            let wj = this.dataURLtoBlob(res);
+            let param = new FormData();  // 创建form对象
+            param.append('file', wj);  // 通过append向form对象添加数据
+            param.append('deptId', this.$route.query.deptId);
+            manualSignature(param).then(response => {
+              if (response.code === 200) {
+                this.$toast({
+                  icon: 'success', // 找到自己需要的图标
+                  message: '签字成功',
+                  duration: "1000",
+                  onClose: () => {
+                    this.showSignPopup = false;
+                    this.form.fbfdcqz = response.data;
+                  }
+                });
+              }
+            });
+          })
+          .catch((err) => {
+            // 画布没有签字时会执行这里提示一下
+            this.$toast.fail('请签名后再保存签字');
+          });
+      },
+      dataURLtoBlob(dataurl, filename = 'file') {
+        let arr = dataurl.split(',')
+        let mime = arr[0].match(/:(.*?);/)[1]
+        let suffix = mime.split('/')[1]
+        let bstr = atob(arr[1])
+        let n = bstr.length
+        let u8arr = new Uint8Array(n)
+        while (n--) {
+          u8arr[n] = bstr.charCodeAt(n)
+        }
+        return new File([u8arr], `${filename}.${suffix}`, {
+          type: mime
+        })
+      },
     },
   };
 </script>
@@ -308,4 +404,25 @@
     margin: 2vh auto;
   }
 
+  .signature-box {
+    border: 1px dashed #666;
+    margin: 2px 20px;
+    height: 100%;
+    /*canvas{*/
+    /*  height: 100%!important;*/
+    /*}*/
+  }
+
+  .signature-footer {
+    transform: rotate(90deg);
+    width: auto;
+    position: absolute;
+    top: 50%;
+    left: 0PX;
+
+    .clearBtn {
+      margin-left: 15px;
+    }
+  }
+
 </style>