宅基地审批签字

src/views/onlineHome/homestead/homeApplication/proposerLite.vue

@@ -266,7 +266,16 @@
                     </van-col>
                     <van-col span="19">
                       <van-field required :readonly="!formEnabled.baseApplyForm.villageFormEnabled" v-model="applicationDetail.tHouseApproveVillageOptions.villageOption" rows="2" autosize type="textarea" placeholder="同意申请宅基地" :rules="[{ required: true }]"/>
-                      <van-field :rules="[{ required: true }]" required :readonly="!formEnabled.baseApplyForm.baseFormEnabled" v-model="applicationDetail.tHouseApproveVillageOptions.villageLeader" label="负责人" placeholder="负责人" input-align="right" label-width="auto"/>
+                    <!--  <van-field :rules="[{ required: true }]" required :readonly="!formEnabled.baseApplyForm.baseFormEnabled" v-model="applicationDetail.tHouseApproveVillageOptions.villageLeader" label="负责人" placeholder="负责人" input-align="right" label-width="auto"/>-->
+                      <van-cell title="负责人:"  :rules="[{ required: true }]">
+                        <van-button round color="#7AC943" required :disabled ="!formEnabled.baseApplyForm.baseFormEnabled" v-show="false" v-model="applicationDetail.tHouseApproveVillageOptions.villageLeader" type="primary" style="float: right;width:200px;height:40px" @click="searchCommit">签名确认</van-button>
+                        <van-image
+                          width="100"
+                          height="50"
+                          :disabled ="formEnabled.baseApplyForm.baseFormEnabled"
+                          :src="imageUrl+applicationDetail.tHouseApproveVillageOptions.villageLeader"
+                        />
+                      </van-cell>
                         <field-date-picker
                           v-model="applicationDetail.tHouseApproveVillageOptions.villageTime"
                           label="审批日期"
@@ -313,7 +322,10 @@
                       <!--                        </common-map>-->
                       <!--                      </div>-->
                       <van-field required :readonly="!formEnabled.baseApplyForm.townFormEnabled" v-model="applicationDetail.tHouseApproveNatureOptions.approveOption" rows="2" autosize type="textarea" placeholder="审查意见" :rules="[{ required: true }]"/>
-                      <van-field :rules="[{ required: true }]" required :readonly="!formEnabled.baseApplyForm.baseFormEnabled" v-model="applicationDetail.tHouseApproveNatureOptions.approveLeader" label="负责人" placeholder="负责人" input-align="right" label-width="auto"/>
+<!--                      <van-field :rules="[{ required: true }]" required :readonly="!formEnabled.baseApplyForm.baseFormEnabled" v-model="applicationDetail.tHouseApproveNatureOptions.approveLeader" label="负责人" placeholder="负责人" input-align="right" label-width="auto"/>-->
+                      <van-cell title="负责人:"  :rules="[{ required: true }]">
+                      <van-button round color="#7AC943" v-model="applicationDetail.tHouseApproveNatureOptions.approveLeader" type="primary" style="float: right;width:200px;height:40px" @click="searchCommit">签名确认</van-button>
+                      </van-cell>
                         <field-date-picker
                           v-model="applicationDetail.tHouseApproveNatureOptions.approveTime"
                           label="审批日期"
@@ -367,7 +379,10 @@
                       <!--                      <van-field required :readonly="!formEnabled.baseApplyForm.townFormEnabled" v-model="applicationDetail.tHouseApproveOtherOptions.south" label="南至" placeholder="请输入" input-align="right" :rules="[{ required: true }]"/>-->
                       <!--                      <van-field required :readonly="!formEnabled.baseApplyForm.townFormEnabled" v-model="applicationDetail.tHouseApproveOtherOptions.north" label="北至" placeholder="请输入" input-align="right" :rules="[{ required: true }]"/>-->
                       <van-field required :readonly="!formEnabled.baseApplyForm.townFormEnabled" v-model="applicationDetail.tHouseApproveOtherOptions.approveOption" rows="2" autosize  type="textarea" placeholder="审批意见" :rules="[{ required: true }]"/>
-                      <van-field :rules="[{ required: true }]" required :readonly="!formEnabled.baseApplyForm.baseFormEnabled" v-model="applicationDetail.tHouseApproveOtherOptions.approveLeader" label="负责人" placeholder="负责人" input-align="right" label-width="auto"/>
+<!--                      <van-field :rules="[{ required: true }]" required :readonly="!formEnabled.baseApplyForm.baseFormEnabled" v-model="applicationDetail.tHouseApproveOtherOptions.approveLeader" label="负责人" placeholder="负责人" input-align="right" label-width="auto"/>-->
+                      <van-cell title="负责人:"  :rules="[{ required: true }]">
+                        <van-button round color="#7AC943" v-model="applicationDetail.tHouseApproveOtherOptions.approveLeader" type="primary" style="float: right;width:200px;height:40px" @click="searchCommit">签名确认</van-button>
+                      </van-cell>
                         <field-date-picker
                           v-model="applicationDetail.tHouseApproveOtherOptions.approveTime"
                           label="审批日期"
@@ -419,8 +434,11 @@
 <!--                        :columns="[{dictLabel: '齐全', dictValue: '1'}, {dictLabel: '不齐全', dictValue: '2'}]"-->
 <!--                      />-->
                       <van-field required :readonly="!formEnabled.baseApplyForm.townFormEnabled" rows="2" v-model="applicationDetail.tHouseApproveAgricultureOptions.approveOption" autosize type="textarea" placeholder="审查意见" :rules="[{ required: true }]"/>
-                      <van-field :rules="[{ required: true }]" required :readonly="!formEnabled.baseApplyForm.baseFormEnabled" v-model="applicationDetail.tHouseApproveAgricultureOptions.approveLeader" label="负责人" placeholder="负责人" input-align="right" label-width="auto"/>
-                        <field-date-picker
+<!--                      <van-field :rules="[{ required: true }]" required :readonly="!formEnabled.baseApplyForm.baseFormEnabled" v-model="applicationDetail.tHouseApproveAgricultureOptions.approveLeader" label="负责人" placeholder="负责人" input-align="right" label-width="auto"/>-->
+                      <van-cell title="负责人:"  :rules="[{ required: true }]">
+                        <van-button round color="#7AC943" v-model="applicationDetail.tHouseApproveAgricultureOptions.approveLeader" type="primary" style="float: right;width:200px;height:40px" @click="searchCommit">签名确认</van-button>
+                      </van-cell>
+                      <field-date-picker
                           v-model="applicationDetail.tHouseApproveAgricultureOptions.approveTime"
                           label="审批日期"
                           placeholder="选择日期"
@@ -441,7 +459,10 @@
                     <van-col span="5">乡镇<br/>政府<br/>审核<br/>批准<br/>意见</van-col>
                     <van-col span="19">
                       <van-field required :readonly="!formEnabled.baseApplyForm.townFormEnabled" v-model="applicationDetail.tHouseApproveTownOptions.approveOption" rows="2" autosize type="textarea" placeholder="同意申请宅基地" :rules="[{ required: true }]"/>
-                      <van-field :rules="[{ required: true }]" required :readonly="!formEnabled.baseApplyForm.baseFormEnabled" v-model="applicationDetail.tHouseApproveTownOptions.approveLeader" label="负责人:" placeholder="负责人" input-align="right" label-width="auto"/>
+<!--                      <van-field :rules="[{ required: true }]" required :readonly="!formEnabled.baseApplyForm.baseFormEnabled" v-model="applicationDetail.tHouseApproveTownOptions.approveLeader" label="负责人:" placeholder="负责人" input-align="right" label-width="auto"/>-->
+                      <van-cell title="负责人:"  :rules="[{ required: true }]">
+                        <van-button round color="#7AC943" v-model="applicationDetail.tHouseApproveTownOptions.approveLeader" type="primary" style="float: right;width:200px;height:40px" @click="searchCommit">签名确认</van-button>
+                      </van-cell>
                       <field-date-picker
                         v-model="applicationDetail.tHouseApproveTownOptions.approveTime"
                         label="审批日期"
@@ -1050,7 +1071,8 @@
                   <van-col span="5">乡镇<br/>政府<br/>验收<br/>意见</van-col>
                   <van-col span="19">
                     <van-field required :readonly="!formEnabled.acceptingForm.townFormEnabled" rows="2" v-model="applicationDetail.tHouseApplyEnd.zhenOption" :autosize="true" type="textarea" placeholder="乡镇政府验收意见" :rules="[{ required: true }]"/>
-                    <van-field :rules="[{ required: true }]" required :readonly="!formEnabled.baseApplyForm.baseFormEnabled" v-model="applicationDetail.tHouseApplyEnd.zhenName" label="负责人:" placeholder="负责人" input-align="right" label-width="auto"/>
+<!--                    <van-field :rules="[{ required: true }]" required :readonly="!formEnabled.baseApplyForm.baseFormEnabled" v-model="applicationDetail.tHouseApplyEnd.zhenName" label="负责人:" placeholder="负责人" input-align="right" label-width="auto"/>-->
+                    <van-button round color="#7AC943"  style="flex:1;" @click="searchCommit">签名确认</van-button>
                     <field-date-picker
                       v-model="applicationDetail.tHouseApplyEnd.zhenTime"
                       label="审批日期"
@@ -1170,6 +1192,30 @@
           </van-row>
         </div>
       </van-popup>
+      <van-popup v-model="showesign" position="bottom" closeable
+                 close-icon="close">
+        <van-row style="margin:0 10%">
+          <p class="title" style="margin:20px 0;position:relative;padding-left:20px;font-size:0.5rem">电子签名</p>
+        </van-row>
+        <van-row style="margin: 0 5% 5% 5%;border:1px solid #BFBFBF">
+          <vue-esign
+            ref="esign"
+            class="mySign"
+            :width="800"
+            :height="500"
+            :isCrop="isCrop"
+            :lineWidth="lineWidth"
+            :lineColor="lineColor"
+            :bgColor.sync="bgColor"
+            v-if="!resultImg"
+          />
+          <img :src="resultImg" alt="" width="100%" height="100%" v-if="resultImg"/>
+        </van-row>
+        <van-row type="flex" justify="center" style="margin-bottom:20px;">   <!--v-if="!formEnabled.acceptingForm.townFormEnabled"-->
+          <van-col span="6" style="text-align:center;"><van-button type="primary" round size="small" @click="handleReset">清空画板</van-button></van-col>
+          <van-col span="6" style="text-align:center;"><van-button type="primary" round size="small" @click="handleGenerate">保存提交</van-button></van-col>
+        </van-row>
+      </van-popup>
     </div>
 </template>
 
@@ -1178,8 +1224,8 @@ import HouseApplyUploadComp from "@/components/house/HouseApplyUploadComp";
 import HouseLocationPlanComp from "@/components/house/HouseLocationPlanComp";
 
 import FieldSelect from "@/components/form/FieldSelect";
-  import { getQueryLand, saveHouseBaseInfo , houseList , getHouseMembers , allInformationWLHT, checkDuplicateBuilding, checkDuplicateBuildingQuery, customSubmitWLHT, submitStartWLHT, updateStart, updateEnd, submitEndWLHT, getWorkflow } from "@/api/onlineHome/homestead/application";
-  import $ from "jquery";
+import { getQueryLand, saveHouseBaseInfo , houseList , getHouseMembers , allInformationWLHT, checkDuplicateBuilding, checkDuplicateBuildingQuery, customSubmitWLHT, submitStartWLHT, updateStart, updateEnd, submitEndWLHT, getWorkflow } from "@/api/onlineHome/homestead/application";
+import $ from "jquery";
 import CommonMap from "@/components/house/CommonMap";
 import FieldDatePicker from "@/components/form/FieldDatePicker";
 import FieldRadio from "@/components/form/FieldRadio";
@@ -1187,6 +1233,7 @@ import FieldCheckbox from "@/components/form/FieldCheckbox";
 import {formatDate} from "element-ui/src/utils/date-util.js";
 import request from '@/utils/request'
 import {Notify} from "vant";
+import {uploadFile} from "@/api/homesteadSurvey/zjdzd";
 // 意图
 const PROPOSER_VIEW = 1;
 const PROPOSER_EDIT = 2;
@@ -1213,6 +1260,7 @@ export default {
       FieldRadio, HouseApplyUploadComp, FieldDatePicker, CommonMap, FieldSelect, HouseLocationPlanComp},
     data() {
     return {
+      imageUrl:"",
       // 当前流程步骤
       active: 0,
       // 申请ID
@@ -1350,6 +1398,13 @@ export default {
       attachmentActive: 0,
       // 家庭成员tab
       familyMembersActive: 0,
+      //电子签名
+      showesign: false,
+      lineWidth: 6, // 画笔的线条粗细
+      lineColor: "#000000", // 画笔的颜色
+      bgColor: "", // 画布的背景颜色
+      resultImg: "", // 最终画布生成的base64图片
+      isCrop: false, // 是否裁剪，在画布设定尺寸基础上裁掉四周空白部分
     };
   },
   created() {
@@ -1357,6 +1412,8 @@ export default {
     this.type = this.$route.query.type;
     this.taskId = this.$route.query.taskId;
     this.instanceId = this.$route.query.instanceId;
+    console.log(this.$cookies)
+    this.imageUrl =this.$cookies.get("url");
     this.getFormIntent();
     this.getLandCoord();
     this.getDetail();
@@ -1462,7 +1519,6 @@ export default {
     init(value) {
       const role = this.$store.getters.roles;
       this.currentUserRole = role[0];
-
       // 局部变量
       let houseApplyStatus = value ? value.tHouseApplyProposer.houseApplyStatus : -1;
       let proposerId = value ? value.tHouseApplyProposer.id : null;
@@ -1639,7 +1695,7 @@ export default {
             }
             else {
               if(!this.applicationDetail.tHouseApproveNatureOptions.approveLeader)
-                this.$set(this.applicationDetail.tHouseApproveNatureOptions, 'approveLeader', handlerName);
+               // this.$set(this.applicationDetail.tHouseApproveNatureOptions, 'approveLeader', handlerName);
               if(!this.applicationDetail.tHouseApproveNatureOptions.approveTime)
                 this.$set(this.applicationDetail.tHouseApproveNatureOptions, 'approveTime', handlerTime);
             }
@@ -1657,7 +1713,7 @@ export default {
             }
             else {
               if(!this.applicationDetail.tHouseApproveAgricultureOptions.approveLeader)
-                this.$set(this.applicationDetail.tHouseApproveAgricultureOptions, 'approveLeader', handlerName);
+                //this.$set(this.applicationDetail.tHouseApproveAgricultureOptions, 'approveLeader', handlerName);
               if(!this.applicationDetail.tHouseApproveAgricultureOptions.approveTime)
                 this.$set(this.applicationDetail.tHouseApproveAgricultureOptions, 'approveTime', handlerTime);
             }
@@ -1682,7 +1738,7 @@ export default {
             }
             else {
               if(!this.applicationDetail.tHouseApproveOtherOptions.approveLeader)
-                this.$set(this.applicationDetail.tHouseApproveOtherOptions, 'approveLeader', handlerName);
+               // this.$set(this.applicationDetail.tHouseApproveOtherOptions, 'approveLeader', handlerName);
               if(!this.applicationDetail.tHouseApproveOtherOptions.approveTime)
                 this.$set(this.applicationDetail.tHouseApproveOtherOptions, 'approveTime', handlerTime);
             }
@@ -1696,7 +1752,7 @@ export default {
             }
             else {
               if(!this.applicationDetail.tHouseApproveTownOptions.approveLeader)
-                this.$set(this.applicationDetail.tHouseApproveTownOptions, 'approveLeader', handlerName);
+               // this.$set(this.applicationDetail.tHouseApproveTownOptions, 'approveLeader', handlerName);
               if(!this.applicationDetail.tHouseApproveTownOptions.approveTime)
                 this.$set(this.applicationDetail.tHouseApproveTownOptions, 'approveTime', handlerTime);
             }
@@ -3044,6 +3100,90 @@ export default {
         this.applicationDetail.tHouseApplyFamilyMembers[index].age = res[1];
       }
     },
+    searchCommit(){
+      this.showesign = true
+    },
+    // 清空画板
+    handleReset() {
+      this.resultImg = null
+      if(this.$refs.esign){
+        this.$refs.esign.reset();
+      }
+    },
+    // 生成签字图
+    handleGenerate() {
+      if(this.resultImg==null||this.resultImg==''){
+        this.$refs.esign
+          .generate() // 使用生成器调用把签字的图片转换成为base64图片格式
+          .then((res) => {
+            this.resultImg = res;
+          })
+          .catch((err) => {
+            // 画布没有签字时会执行这里提示一下
+            this.$message({
+              type: "warning",
+              message: "请签名后再生成签字图片",
+            });
+          });
+        // 在这里向后端发请求把转换后的base64文件传给后端，后端接收以后再转换成图片做静态图片存储
+        // 当然也可以把base64转成流文件blob格式的，类似上传给后端这样，具体哪种方式看后端要求
+        setTimeout(() => {
+          // 这里要使用定时器稍微延后以后就能取到base64数据了，当然也可以再加一个确认按钮，如：确认使用这张base64签名图片
+          // 点击确认以后，在其回调函数中，再把base64的签名图片传给后端用于存储
+          const blobBin = atob(this.resultImg.split(',')[1])
+          let d = []
+          for (let i=0;i<blobBin.length;i++){
+            d.push(blobBin.charCodeAt(i))
+          }
+          const data2 = new FormData();
+          data2.append("file", new Blob([new Uint8Array(d)],{type:'image/jpeg'}));
+          uploadFile(data2).then(res => {
+            console.log(res);
+            console.log(this.selectedTabName);
+            console.log(this.currentUserRole);
+            if(this.selectedTabName ==0){
+              if(this.currentUserRole == 'task_executor'){
+                //自然资源部门签字
+                if(this.checkString(this.applicationDetail.tHouseApproveNatureOptions.approveLeader))
+                  return  '自然资源部门签字不能为空';
+                this.applicationDetail.tHouseApproveNatureOptions.approveLeader = res.fileName;
+              } else if (this.currentUserRole == ''){
+                //其他部门签字
+                if(this.checkString(this.applicationDetail.tHouseApproveOtherOptions.approveLeader))
+                  return  '其他部门签字不能为空';
+                this.applicationDetail.tHouseApproveOtherOptions.approveLeader = res.fileName;
+              } else if (this.currentUserRole == ''){
+                //农村农业部门签字
+                if(this.checkString(this.applicationDetail.tHouseApproveAgricultureOptions.approveLeader))
+                  return  '农村农业部门签字不能为空';
+                this.applicationDetail.tHouseApproveAgricultureOptions.approveLeader = res.fileName;
+              } else if (this.currentUserRole == ''){
+                //镇级领导签字 tHouseApproveTownOptions
+                if(this.checkString(this.applicationDetail.tHouseApproveTownOptions.approveLeader))
+                  return  '镇级领导签字不能为空';
+                this.applicationDetail.tHouseApproveTownOptions.approveLeader = res.fileName;
+              } else if (this.currentUserRole == 'village_leader'){
+                this.applicationDetail.tHouseApproveVillageOptions.villageLeader = res.fileName;
+              }
+            } else if(this.selectedTabName ==1){
+
+            } else if (this.selectedTabName ==2){
+
+            }
+
+          })
+        }, 200);
+      }else{
+        // submitOnly(this.form).then(response => {
+        //   let _this =this
+        //   this.$toast({
+        //     icon: 'success', // 找到自己需要的图标
+        //     message: '修改成功',
+        //     duration:"1000",
+        //   });
+        // });
+      }
+    },
   },
   watch: {
     selectedTabName: function (newVal, oldVal) {