发包方、承包方审核签字

src/api/homesteadSurvey/nhhncy.js

@@ -25,6 +25,23 @@ export function getNhhncy(id) {
     method: 'get'
   })
 }
+// 查询列表
+export function queryHomesteadnhhncyList(query) {
+  return request({
+    url: '/home/homesteadnhhncy/queryList',
+    method: 'get',
+    params: query
+  })
+}
+
+
+export function addOutsidenhhncy(data) {
+  return request({
+    url: '/home/homesteadnhhncy/outsideAdd',
+    method: 'post',
+    data: data
+  })
+}
 
 // 新增数据调查-农户户内成员
 export function addNhhncy(data) {

src/api/sunVillage_info/sysCbf.js

@@ -0,0 +1,60 @@
+import request from '@/utils/request'
+
+//查询列表
+export function getList(data){
+  return request({
+    url:'/service/cbf/list',
+    method:'get',
+    params:data
+  })
+}
+//查询承包地块列表
+export function getCbdkms(data){
+  return request({
+    url:'/service/cbdkxx/getCbdkms',
+    method:'get',
+    params:data
+  })
+}
+
+//修改
+export function updateSysCfb(data){
+  return request({
+    url:'/service/cbf/edit',
+    method: 'post',
+    data: data
+  })
+}
+//批量修改承包方记事签字
+export function updateBatchSign(data,gsjs){
+  return request({
+    url:'/service/cbf/updateBatchSign?gsjs='+gsjs,
+    method: 'post',
+    data: data
+  })
+}
+//修改承包方记事签字
+export function updateSign(data){
+  return request({
+    url:'/service/cbf/updateSign',
+    method: 'post',
+    data: data
+  })
+}
+//批量修改承包方审核签字
+export function examineBatchSign(data,shyj){
+  return request({
+    url:'/service/cbf/examineBatchSign?shyj='+shyj,
+    method: 'post',
+    data: data
+  })
+}
+//修改承包方审核签字
+export function examineSign(data){
+  return request({
+    url:'/service/cbf/examineSign',
+    method: 'post',
+    data: data
+  })
+}
+

src/api/sunVillage_info/sysFbf.js

@@ -0,0 +1,18 @@
+import request from '@/utils/request'
+
+//查询列表
+export function getSysFfb(data){
+  return request({
+    url:'/service/fbf/sysFbfSelect',
+    method:'get',
+    params:data
+  })
+}
+//修改
+export function auditSign(data){
+  return request({
+    url:'/service/fbf/auditSign',
+    method: 'post',
+    data: data
+  })
+}

src/views/homesteadSurvey/add.vue

@@ -848,6 +848,7 @@ export default {
           Dialog({ type: 'danger', message: '请在地图上标注宅基地所在位置！' });
           return;
         }
+        this.permission = "false";
         if(this.form.id == null){
 
           let surveyItem = JSON.parse(localStorage.getItem("surveyItem"));
@@ -855,7 +856,7 @@ export default {
           if(this.form.theGeomJson.hasOwnProperty('coordinates')) // 从后台获取的
           this.$set(this.form, 'theGeomJson',this.form.theGeomJson.coordinates);
           this.$set(this.form, 'theGeomJson', JSON.stringify( this.form.theGeomJson));
-          this.$set(this.form, 'surveyId', surveyItem.id);
+          this.$set(this.form, 'surveyId', surveyItem.id)
           addZjdzd(this.form).then(response => {
             let _this =this;
             getZjdzd(response.data).then((res) => {

src/views/homesteadSurvey/index.vue

@@ -229,6 +229,7 @@
             console.info(userId);
             this.nickName = this.$store.state.user.nickName;
             this.$set(this.queryParams, "rwzxr", userId);
+            this.$set(this.queryParams, "params", {deptId:100});
             this.getList();
           },1000)
 
@@ -331,6 +332,7 @@
           if(this.active==1){
             let params = {
               "rwfbzt":"PUBLISHED",
+              "params":{deptId:this.$store.state.user.loginDeptId},
               "pageNum": this.countyhc+1,
               "pageSize":10,
             }
@@ -346,6 +348,7 @@
             let params = {
               "rwwczt": "PUBLISHED",
               "rwfbzt":"PUBLISHED",
+              "params":{deptId:this.$store.state.user.loginDeptId},
               "pageNum": this.countwhc+1,
               "pageSize":10,
             }
@@ -361,6 +364,7 @@
             let params = {
               "rwwczt": "UNPUBLISHED",
               "rwfbzt":"PUBLISHED",
+              "params":{deptId:this.$store.state.user.loginDeptId},
               "pageNum": this.countqb+1,
               "pageSize":10,
             }

src/views/homesteadSurvey/list2.vue

@@ -53,6 +53,7 @@
       <van-search  v-model="nhvalue" placeholder="请输入农户姓名或证件号" show-action @search="onSearchnh">
         <template #action>
           <van-icon name="add" color="rgba(122,201,67,1)" size=".8rem" @click="onClicknh" style="vertical-align:middle;"/>
+          <van-icon name="add" color="rgba(122,201,67,1)" size=".8rem" @click="onClickWcnh" style="vertical-align:middle;"/>
         </template>
       </van-search>
     </van-sticky>
@@ -83,6 +84,27 @@
       </template>
     </van-cell>
     </van-list>
+    <van-dialog v-model="outsideOpen"  title="外村农户" show-cancel-button   confirmButtonText="保存" cancelButtonText="关闭" @confirm="outsideSubmitForm" >
+      <van-row>
+        <van-col span="24">
+          <van-field  v-model="outsideForm.nhdm" label="外村农户" placeholder="外村农户" input-align="right"  required :rules="[{ required: true }]"  @click="showWcnh = true"/>
+          <van-popup  v-model="showWcnh" position="bottom">
+            <van-picker
+              show-toolbar
+              :columns="wcnhList"
+              @confirm="nhChange"
+              value-key="nhValue"
+              @cancel="showWcnh = false"
+            />
+          </van-popup>
+          <br/>
+          <br/>
+        </van-col>
+
+      </van-row>
+
+
+    </van-dialog>
 <!--    </van-pull-refresh>-->
   </div>
 </template>
@@ -90,7 +112,7 @@
 <script>
     import {getQueryLand,getZjdzd,delZjdzdInfo,uploadFile,submitUploadImageList} from "@/api/homesteadSurvey/zjdzd";
     import {addNh, delNh, exportNh, getNh, listNh, updateNh,setNhInfo} from "@/api/homesteadSurvey/nh";
-    import {addNhhncy, delNhhncy, exportNhhncy, getNhhncy, listNhhncy, updateNhhncy} from "@/api/homesteadSurvey/nhhncy";
+    import {addNhhncy, delNhhncy,queryHomesteadnhhncyList, addOutsidenhhncy,exportNhhncy, getNhhncy, listNhhncy, updateNhhncy} from "@/api/homesteadSurvey/nhhncy";
     import {listShyqr,setSyqrInfo} from "@/api/homesteadSurvey/shyqr";
     import {listSuyqr,updateSuyqr,addSuyqr} from "@/api/homesteadSurvey/suyqr";
     import {listZrz,getZrzZjdDmList,getZrz} from "@/api/homesteadSurvey/zrz";
@@ -149,6 +171,7 @@
           showhzlx:false,
           showhncylist:false,
           showhncy:false,
+          showWcnh: false,
           activeBtn:2,
           value:'',
           // 宅基地搜索框
@@ -243,6 +266,9 @@
           searchBarOperVisbile: false,
           mapDataAll: [],
           showSearch:false,
+          outsideOpen:false,
+          outsideForm:{nhdm:null},
+          wcnhList:[],
           bottomHeight:'0px',
           //搜索---end
           //测面
@@ -769,6 +795,30 @@
           this.$cookies.remove("search");
           this.$router.push({name:'hncyDetails',query:{item:{}}});
         },
+        /** 新增外村农户按钮操作 */
+        onClickWcnh(){
+          this.getWcnhList().then((resp) => {
+            this.outsideOpen = true;
+          });
+        },
+        getWcnhList() {
+          return queryHomesteadnhhncyList({
+            yhzgx: '02',
+            searchValue: 'id, dept_id, book_id, dept_name, YSDM, NHDM, XM, ZJLX, ZJHM, XB, YHZGX, HKLX, LXDH, HYZK, SFBJTJJZZCY, CYBZ, CYBZSM, SJLY, occupation, jzqk,' +
+              'sfwbh, sfpkh, jzhcssfyzf, zqtczsfyzf, sfbccm, sfjbzgq, txdz, hkszd,' +
+              'create_by, create_time, update_by, update_time',
+            sfbccm:"0",
+          }).then((resp) => {
+            this.wcnhList = resp.rows;
+            this.wcnhList.map(function (item) {
+              item.nhValue = item.xm+" "+item.zjhm;
+            })
+          });
+        },
+        nhChange(val){
+          this.outsideForm = val;
+          this.showWcnh = false;
+        },
         // 返回
         onClickLeft(){
           this.$cookies.set("search","")
@@ -4743,6 +4793,7 @@
             return v.toString(16);
           });
         },
+
         //宅基地点击地图核查
         zjdHc(){
           if(this.zjdHcDy != "" && this.zjdHcDy != "undefined"){
@@ -4865,6 +4916,16 @@
           value.indexOf('zrzSx') == -1 ? this.zrzSx = false : this.zrzSx = true;
           value.indexOf('fsssSx') == -1 ? this.fsssSx = false : this.fsssSx = true;
         },
+        /** 外村农户提交按钮 */
+        outsideSubmitForm() {
+          addOutsidenhhncy(this.outsideForm).then(response => {
+            if(response.code != 200) throw response.msg;
+            this.$toast("新增成功");
+            this.outsideOpen = false;
+            this.getList();
+            this.outDiglogStatus = true;
+          }).catch(() => this.outDiglogStatus = true);
+        },
         closeSearchBox(){
           this.showSearch = false ;
           var height = $(".searchBar_wrap").outerHeight(true) - $(".searchBar_wrap .van-search").outerHeight(true)

src/views/sunVillage_info/list_chronicles.vue

@@ -7,35 +7,37 @@
        <div class="search_info">
           <div class="search_block">
               <i class="icon"></i>
-              <input type="text" class="ipt" v-model="value" placeholder="搜索" >
+              <input type="text" class="ipt" v-model="queryParams.cbfmc" placeholder="搜索" >
           </div>
-          <div class="total">查询</div>
+          <div class="total" @click="getCbfCount">查询</div>
        </div>
        <div class="list_main">
          <van-list
-           v-model="loading"
+           v-model:loading="loading"
            :finished="finished"
            finished-text="没有更多了"
+           @load="onRefreshContractor"
+           :immediate-check="false"
          >
-           <van-swipe-cell v-for="item in 10" :key="item">
-             <div class="item">
+           <van-swipe-cell v-for="(item,index) in cbfList" :key="'cbfjs'+index">
+             <div class="item" style="height: 100px;" @click="$router.push({path:'/sunVillage_info/list_chronicles_single_process',query:{item:item,status:false}})">
                <div class="info">
                  <div class="title">
                    <i class="icon_box"></i>
-                   <p class="news_title">李佳佳</p>
+                   <p class="news_title">{{item.cbfmc}}</p>
                  </div>
                  <div class="time">
-                   <p><img src="../../assets/images/sunVillage_info/contractor_icon_04.png" width="14">444444444</p>
-                   <p><img src="../../assets/images/sunVillage_info/contractor_icon_05.png" width="14">13人</p>
+                   <p><img src="../../assets/images/sunVillage_info/contractor_icon_04.png" width="14">{{item.lxdh}}</p>
+                   <p><img src="../../assets/images/sunVillage_info/contractor_icon_05.png" width="14">{{item.cbfcysl}}</p>
                  </div>
                </div>
                <div style="width: 30%;">
-                 <img src="../../assets/images/sunVillage_info/contractor_icon_06.png" style="width: 100%" alt="">
+                 <img  :src="'/api'+item.gsjsrqz" width="100%" alt="" v-if="item.gsjsrqz" >
                </div>
              </div>
              <template #right>
                <div class="operation">
-                 <div class="opera_btn" @click="$router.push({path:'/sunVillage_info/list_chronicles_single_process'})">
+                 <div class="opera_btn" @click="$router.push({path:'/sunVillage_info/list_chronicles_single_process',query:{item:item,status:true}})">
                    <img src="../../assets/images/sunVillage_info/contractor_icon_07.png" alt="" width="25">
                    <p>记事签字</p>
                  </div>
@@ -47,14 +49,7 @@
      </div>
  </template>
  <script>
-   import {
-     listResource,
-     commonAttach,
-     attachmentList,
-     systemAttachment,
-     delResource,
-     updateResource
-   } from "@/api/sunVillage_info/fixedAssets";
+   import { getList} from "@/api/sunVillage_info/sysCbf";
    import request from '@/utils/request'
    import MapGisLine from "@/components/Map/MapGisLine";
    export default {
@@ -64,15 +59,49 @@
        return {
          loading: false,
          finished: false,
-
-         value:'',
+         cbfList:[],
+         countcbf:0,
+         queryParams:{
+           pageNum: 1,
+           pageSize: 10,
+           cbfbm:null},
        };
      },
      created() {
-
+      this.getCbfCount();
      },
      methods: {
-
+       getCbfCount(){
+         getList(this.queryParams).then(res=>{
+           this.cbfList = res.rows;
+           if(this.cbfList.length >= res.total){
+             this.finished = true;
+           }else{
+             this.loading = false;
+             this.queryParams.pageNum += 1 ;
+           }
+         });
+       },
+       onRefreshContractor(){
+         if(this.loading){
+           let params = {
+             "cbfbm":this.queryParams.cbfbm,
+             "pageNum": this.countcbf+1,
+             "pageSize":10,
+           }
+           getList(params).then((response) => {
+             if(response.rows.length>0&&this.cbfList.length<response.total){
+               response.rows.map(res => {
+                 this.cbfList.unshift(res)
+               })
+               this.loading = false;
+               this.countcbf++
+             }else{
+               this.finished = true;
+             }
+           });
+         }
+       },
      },
    }
  </script>

src/views/sunVillage_info/list_chronicles_process.vue

@@ -8,24 +8,24 @@
       <div class="information_main">
         <div class="titBox">
           <img src="../../assets/images/sunVillage_info/contractor_icon_01.png" style="width:22PX;height:22PX;margin-right: 10px;"/>
-          <p class="tit">娃娃村</p>
+          <p class="tit">{{this.$store.state.user.deptName}}</p>
         </div>
 
         <div class="information_content">
           <div class="information_block">
-            <p class="block_num">共有承包方<span>800</span>户</p>
+            <p class="block_num">共有承包方<span>{{cbfCount}}</span>户</p>
           </div>
           <div class="information_block">
-            <p class="block_num">共有承包方<span>800</span>户</p>
+            <p class="block_num">承包地<span>{{cbfdkCount}}</span>亩</p>
           </div>
         </div>
 
       </div>
 
-      <div class="subForm">
+      <div class="subForm" v-if="!showJsxx">
         <img src="../../assets/images/sunVillage_info/list_employer_process_icon_01.png" alt="">
         <van-field
-          v-model="value"
+          v-model="form.gsjs"
           rows="3"
           autosize
           required
@@ -35,46 +35,178 @@
         />
       </div>
 
-      <div class="subForm2">
+      <div class="subForm2" v-if="showJsxx">
         <img class="topImg" src="../../assets/images/sunVillage_info/list_employer_process_icon_03.png" alt="">
-        <van-field readonly v-model="value" label="审核意见" placeholder="审核意见" input-align="right" :border="false" />
-        <van-field readonly v-model="value" label="审核人" placeholder="审核人" input-align="right" :border="false" />
-        <van-field readonly v-model="value" label="审核日期" placeholder="审核日期" input-align="right" :border="false" />
+        <van-field readonly v-model="form.gsjs" label="记事内容" placeholder="记事内容" input-align="right" :border="false" />
+        <van-cell title="记事人" style="border: none;" >
+          <van-field readonly style="padding: 0 0;height: 30px;" label="记事人" input-align="right" :border="false" >
+            <template #label>
+              <img  :src="'/api'+form.gsjsrqz" width="10%" alt="" v-if="form.gsjsrqz" >
+            </template>
+          </van-field>
+        </van-cell>
+        <van-field readonly v-model="form.gsjsrq" label="记事日期" placeholder="审核日期" input-align="right" :border="false" />
 
         <img class="bottomImg" src="../../assets/images/sunVillage_info/contractor_icon_09.png" alt="">
       </div>
 
-      <div style="margin: 30px auto 0;width: 50%;">
-        <van-button round block type="primary" native-type="submit">
+      <div style="margin: 30px auto 0;width: 50%;" v-if="!showJsxx">
+        <van-button round block type="primary" native-type="submit" @click="onSign()">
           批量记事签字
         </van-button>
       </div>
 
-      <div style="margin: 30px auto 0;width: 50%;">
+      <div style="margin: 30px auto 0;width: 50%;" v-if="showJsxx">
         <van-button round block type="primary" native-type="submit" :to="{name:'sunVillageInfoListChronicles'}">
           单独记事签字
         </van-button>
       </div>
-
+      <van-popup v-model="showesign" closeable position="right" :style="{ height: '100%' }"
+                 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>
+        <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"
+            v-if="!signature.resultImg"
+          />
+        </div>
+        <img src="../../assets/images/sunVillage_info/signature_icon_10.png" id="canvasTT"  v-if="!signature.resultImg"
+             style="position:absolute;top: 50%;left: 50%;transform: translate(-50%,-50%)" alt="">
+        <img :src="signature.resultImg" alt="" width="100%" v-if="signature.resultImg"/>
+        <div class="signature-footer"  v-if="!signature.resultImg">
+          <van-button type="primary" round size="small" @click="handleReset">清空画板</van-button>
+          <van-button type="primary" round size="small" @click="handleGenerate">保存提交</van-button>
+          </van-row>
+        </div>
+      </van-popup>
     </div>
 </template>
 
 <script>
-  import { financePublicDetail , openAdd } from "@/api/sunVillage_info/fixedAssets";
-  import Cookies from "js-cookie";
-  import request from '@/utils/request'
+  import { getList,getCbdkms,updateSysCfb,updateBatchSign} from "@/api/sunVillage_info/sysCbf";
+  import $ from "jquery";
   export default {
     name: "certificateList",
     data() {
       return {
-        value:''
+        value:'',
+        cbfCount:0,
+        cbfdkCount:0,
+        showJsxx:false,
+        showesign:false,
+        height:0,
+        form:{},
+        //电子签名
+        signature: {
+          lineWidth: 6, // 画笔的线条粗细
+          lineColor: "#000000", // 画笔的颜色
+          bgColor: "", // 画布的背景颜色
+          resultImg: "", // 最终画布生成的base64图片
+          isCrop: false, // 是否裁剪，在画布设定尺寸基础上裁掉四周空白部分
+        },
       };
     },
     created() {
-
+      this.getCbfCount();
+      this.getCbfdkCount();
+      this.height = window.screen.height * 1.28 - 20;
     },
     methods: {
+      getCbfCount(){
+        getList({}).then(res=>{
+          this.cbfCount = res.total;
+          this.form = res.rows[0];
+          if(this.form.gsjsrqz != null){
+            this.showJsxx = true;
+          }
+        });
+      },
+      getCbfdkCount(){
+        getCbdkms({}).then(res=>{
+          this.cbfdkCount = res.data;
+        });
+      },
+      canvasTTdown() {
+        $('#canvasTT').css('display', 'none');
+      },
+      onSign(){
+        this.showesign = true;
+      },
+      // 清空画板
+      handleReset() {
+        this.resultImg = null
+        if(this.$refs.esign){
+          this.$refs.esign.reset();
+        }
+        $('#canvasTT').css('display', 'block')
+      },
+      // 生成签字图
+      handleGenerate() {
+        this.$refs.esign
+          .generate() // 使用生成器调用把签字的图片转换成为base64图片格式
+          .then((res) => {
+            this.signature.resultImg = res;
+            console.info(res)
+            let wj = this.dataURLtoBlob(res);
+            let param = new FormData();
+            param.append('file', wj)  // 通过append向form对象添加数据
+            param.append('date', this.format(new Date(), 'yyyy-MM-dd'))  // 通过append向form对象添加数据
+            this.showesign = false;
+            this.$toast.loading({
+              message: "数据处理中",
+              forbidClick: true,
+              duration: 40000,
+            });
+            updateBatchSign(param,this.form.gsjs).then((res) => {
+              this.$toast.clear();
+              this.getCbfCount();
+              this.$notify({type: 'success', message: '签字成功'});
+
+              })
+              // this.mainImgArr.push(r1.fileName)
+            // let param = new FormData()  // 创建form对象
+            // param.append('file', wj)  // 通过append向form对象添加数据
+            // param.append('date', this.format(new Date(), 'yyyy-MM-dd'))  // 通过append向form对象添加数据
+            // zjddcSign(param, this.zjdzdxx.zjddm).then(response => {
+            //   this.$notify({type: 'success', message: '签字成功'});
+            //   this.showesign = false;
+            //   getZjdzd(this.zjdzdxx.id).then((response) => {
+            //     localStorage.setItem("zjdzdxxItem",JSON.stringify(response.data))
+            //     location.reload();
+            //   });
+
 
+            // });
+
+          })
+          .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>
@@ -85,6 +217,27 @@
     background-size: 100% 100%;
     border: none;
   }
+  .signature-footer {
+    transform: rotate(90deg);
+    width: auto;
+    position: absolute;
+    top: 50%;
+    left: 0px;
+
+  }
+
+  .van-cell::after {
+    position: absolute;
+    box-sizing: border-box;
+    content: ' ';
+    pointer-events: none;
+    right: 0.426667rem;
+    bottom: 0;
+    left: 0.426667rem;
+    border:none;
+    -webkit-transform: scaleY(.5);
+    transform: scaleY(.5);
+  }
 .home_wrapper{
     background: #e9e9e9;
     min-height: 100vh;

src/views/sunVillage_info/list_chronicles_single_process.vue

@@ -9,24 +9,41 @@
           <img src="../../assets/images/sunVillage_info/list_employer_process_icon_02.png" style="width:22PX;height:22PX;margin-right: 10px;"/>
           <p class="tit">信息核对</p>
         </div>
-        <van-field readonly v-model="value" label="承包方名称" placeholder="承包方名称" input-align="right" :border="false" />
-        <van-field readonly v-model="value" label="承包方类型" placeholder="承包方类型" input-align="right" :border="false" />
-        <van-field readonly v-model="value" label="证件号码" placeholder="证件号码" input-align="right" :border="false" />
-        <van-field readonly v-model="value" label="电话" placeholder="电话" input-align="right" :border="false" />
-        <van-field readonly v-model="value" label="调查记事" placeholder="调查记事" input-align="right" :border="false" />
-        <van-field readonly v-model="value" label="公示记事" placeholder="公示记事" input-align="right" :border="false" />
-        <van-field readonly v-model="value" label="公示记事人" placeholder="公示记事人" input-align="right" :border="false" />
-        <van-field readonly v-model="value" label="公示记事时间" placeholder="公示记事时间" input-align="right" :border="false" />
-        <van-field readonly v-model="value" label="承包方公示结果意见" placeholder="承包方公示结果意见" input-align="right" :border="false" />
-        <van-field readonly v-model="value" label="承包方公示结果签字" placeholder="承包方公示结果签字" input-align="right" :border="false" />
-        <van-field readonly v-model="value" label="承包方公示日期" placeholder="承包方公示日期" input-align="right" :border="false" />
+        <van-field readonly v-model="form.cbfmc" label="承包方名称" placeholder="承包方名称" input-align="right" :border="false" />
+        <field-select
+          v-model="form.cbfzjlx"
+          label="承包方类型"
+          value-key="dictLabel"
+          data-key="dictValue"
+          placeholder="选择证件类型"
+          :rules="[{ required: true }]"
+          readonly
+          remote-url="/open/zdzh/list/cert_type"
+          :on-remote-response="'data'"
+        />
+        <van-field readonly v-model="form.cbfzjhm" label="证件号码" placeholder="证件号码" input-align="right" :border="false" />
+        <van-field readonly v-model="form.lxdh" label="电话" placeholder="电话" input-align="right" :border="false" />
+        <van-field readonly v-model="form.cbfdcjs" label="调查记事" placeholder="调查记事" input-align="right" :border="false" />
+        <van-field readonly v-model="form.gsjs" label="公示记事" placeholder="公示记事" input-align="right" :border="false" />
+<!--        <van-field readonly v-model="form.gsjsrqz" label="公示记事人" placeholder="公示记事人" input-align="right" :border="false" />-->
+        <van-cell title="公示记事人签字" >
+          <van-field style="padding: 0 0;height: 30px;" readonly label="公示记事人签字" input-align="right" :border="false" >
+            <template #label>
+              <img :src="'/api'+form.gsjsrqz" width="10%" alt="" v-if="form.gsjsrqz" >
+            </template>
+          </van-field>
+        </van-cell>
+        <van-field readonly v-model="form.gsjsrq" label="公示记事时间" placeholder="公示记事时间" input-align="right" :border="false" />
+        <van-field readonly v-model="form.gsjgyj" label="承包方公示结果意见" placeholder="承包方公示结果意见" input-align="right" :border="false" />
+        <van-field readonly v-model="form.gsjgqz" label="承包方公示结果签字" placeholder="承包方公示结果签字" input-align="right" :border="false" />
+        <van-field readonly v-model="form.gsjgqzrq" label="承包方公示日期" placeholder="承包方公示日期" input-align="right" :border="false" />
 
       </div>
 
-      <div class="subForm">
+      <div class="subForm" v-if="!showForm2">
         <img src="../../assets/images/sunVillage_info/list_employer_process_icon_01.png" alt="">
         <van-field
-          v-model="value"
+          v-model="form.gsjs"
           rows="3"
           autosize
           required
@@ -35,44 +52,186 @@
           :border="false"
           class="textarea"
         />
-        <van-field readonly value="123" label="记事人" placeholder="记事人" input-align="right" :border="false" />
-        <van-field readonly value="123" label="记事时间" placeholder="记事时间" input-align="right" :border="false" />
+        <van-cell title="记事人" style="color: #ffffff;" >
+          <van-field style="padding: 0 0;height: 30px;width: 100%;background-color: #ffffff; border-radius: 5PX;" readonly label="记事人" input-align="right" :border="false" >
+            <template #label>
+              <img :src="'/api'+form.gsjsrqz" style="top:55px;border:none;" width="10%" alt="" v-if="form.gsjsrqz" >
+            </template>
+          </van-field>
+        </van-cell>
+        <van-field readonly v-model="form.gsjsrq" label="记事时间" placeholder="记事时间" input-align="right" :border="false" />
 
       </div>
 
-      <div class="subForm2">
+      <div class="subForm2" v-if="showForm2">
         <img class="topImg" src="../../assets/images/sunVillage_info/list_employer_process_icon_03.png" alt="">
-        <van-field readonly v-model="value" label="记事内容" placeholder="记事内容" input-align="right" :border="false" />
-        <van-field readonly v-model="value" label="记事人" placeholder="记事人" input-align="right" :border="false" />
-        <van-field readonly v-model="value" label="记事日期" placeholder="记事日期" input-align="right" :border="false" />
+        <van-field readonly v-model="form.gsjs" label="记事内容" placeholder="记事内容" input-align="right" :border="false" />
+        <van-cell title="记事人" >
+          <van-field style="padding: 0 0;height: 30px;" readonly label="记事人" input-align="right" :border="false" >
+            <template #label>
+              <img :src="'/api'+form.gsjsrqz" width="10%" alt="" v-if="form.gsjsrqz" >
+            </template>
+          </van-field>
+        </van-cell>
+        <van-field readonly v-model="form.gsjsrq" label="记事日期" placeholder="记事日期" input-align="right" :border="false" />
 
         <img class="bottomImg" src="../../assets/images/sunVillage_info/contractor_icon_09.png" alt="">
       </div>
-      <div style="margin: 30px auto 0;width: 50%;">
-        <van-button round block type="primary" native-type="submit">
+      <div style="margin: 30px auto 0;width: 50%;"  v-if="!showForm2">
+        <van-button round block type="primary" native-type="submit"  @click="onSign()" >
           审核签字
         </van-button>
       </div>
-
+      <van-popup v-model="showesign" closeable position="right" :style="{ height: '100%' }"
+                 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>
+        <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"
+            v-if="!signature.resultImg"
+          />
+        </div>
+        <img src="../../assets/images/sunVillage_info/signature_icon_10.png" id="canvasTT"  v-if="!signature.resultImg"
+             style="position:absolute;top: 50%;left: 50%;transform: translate(-50%,-50%)" alt="">
+        <img :src="signature.resultImg" alt="" width="100%" v-if="signature.resultImg"/>
+        <div class="signature-footer"  v-if="!signature.resultImg">
+          <van-button type="primary" round size="small" @click="handleReset">清空画板</van-button>
+          <van-button type="primary" round size="small" @click="handleGenerate">保存提交</van-button>
+          </van-row>
+        </div>
+      </van-popup>
     </div>
 </template>
 
 <script>
-  import { financePublicDetail , openAdd } from "@/api/sunVillage_info/fixedAssets";
-  import Cookies from "js-cookie";
-  import request from '@/utils/request'
+  import { updateSign } from "@/api/sunVillage_info/sysCbf";
+  import FieldSelect from "@/components/form/FieldSelect";
+  import $ from "jquery";
   export default {
     name: "certificateList",
+    components: {FieldSelect},
     data() {
       return {
-        value:''
+        form:{},
+        showForm2:false,
+        showesign:false,
+        height:0,
+        options: {
+          cert_type: [],
+        },
+        //电子签名
+        signature: {
+          lineWidth: 6, // 画笔的线条粗细
+          lineColor: "#000000", // 画笔的颜色
+          bgColor: "", // 画布的背景颜色
+          resultImg: "", // 最终画布生成的base64图片
+          isCrop: false, // 是否裁剪，在画布设定尺寸基础上裁掉四周空白部分
+        },
       };
     },
     created() {
-
+      this.form = this.$route.query.item;
+      this.InitOptions();
+      this.height = window.screen.height * 1.28 - 20;
+      if(this.$route.query.status === "true"){
+        this.showForm2 =false;
+      }else{
+        this.showForm2 =true;
+      }
     },
     methods: {
+      InitOptions() {
+        for(let k in this.options)
+        {
+          this.getDicts(k).then((resp) => this.options[k] = resp.data);
+        }
+      },
+      canvasTTdown() {
+        $('#canvasTT').css('display', 'none');
+      },
+      onSign(){
+        this.showesign = true;
+      },
+      // 清空画板
+      handleReset() {
+        this.resultImg = null
+        if(this.$refs.esign){
+          this.$refs.esign.reset();
+        }
+        $('#canvasTT').css('display', 'block')
+      },
+      // 生成签字图
+      handleGenerate() {
+        console.info( this.$refs.esign
+          .generate() );
+        this.$refs.esign
+          .generate() // 使用生成器调用把签字的图片转换成为base64图片格式
+          .then((res) => {
+            this.signature.resultImg = res;
+            console.info(res)
+            let wj = this.dataURLtoBlob(res);
+            let param = new FormData();
+            param.append('file', wj)  // 通过append向form对象添加数据
+            param.append('id', this.form.id)
+            param.append('gsjs', this.form.gsjs)
+            this.showesign = false;
+            this.$toast.loading({
+              message: "数据处理中",
+              forbidClick: true,
+              duration: 40000,
+            });
+            updateSign(param).then((r1) => {
+              this.$toast.clear();
+              // this.tEnforceSamplingGoodsList[index].attachement.push(r1.fileName);
+              this.$notify({type: 'success', message: '签字成功'});
+              this.showForm2 = true;
+              this.form = r1.data;
+              this.$router.push({name:'sunVillageInfoListChronicles'})
+              // this.mainImgArr.push(r1.fileName)
+            })
+            // let param = new FormData()  // 创建form对象
+            // param.append('file', wj)  // 通过append向form对象添加数据
+            // param.append('date', this.format(new Date(), 'yyyy-MM-dd'))  // 通过append向form对象添加数据
+            // zjddcSign(param, this.zjdzdxx.zjddm).then(response => {
+            //   this.$notify({type: 'success', message: '签字成功'});
+            //   this.showesign = false;
+            //   getZjdzd(this.zjdzdxx.id).then((response) => {
+            //     localStorage.setItem("zjdzdxxItem",JSON.stringify(response.data))
+            //     location.reload();
+            //   });
 
+
+            // });
+
+          })
+          .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>
@@ -83,7 +242,27 @@
     background-size: 100% 100%;
     border: none;
   }
-.home_wrapper{
+  .van-cell::after {
+    position: absolute;
+    box-sizing: border-box;
+    content: ' ';
+    pointer-events: none;
+    right: 0.426667rem;
+    bottom: 0;
+    left: 0.426667rem;
+    border:none;
+    -webkit-transform: scaleY(.5);
+    transform: scaleY(.5);
+  }
+  .signature-footer {
+    transform: rotate(90deg);
+    width: auto;
+    position: absolute;
+    top: 50%;
+    left: 0px;
+
+  }
+  .home_wrapper{
     background: #e9e9e9;
     min-height: 100vh;
     width: 100vw;

src/views/sunVillage_info/list_contractor.vue

@@ -7,35 +7,36 @@
        <div class="search_info">
           <div class="search_block">
               <i class="icon"></i>
-              <input type="text" class="ipt" v-model="value" placeholder="搜索" >
+              <input type="text" class="ipt" v-model="queryParams.cbfmc" placeholder="搜索" >
           </div>
-          <div class="total">查询</div>
+         <div class="total" @click="getCbfCount">查询</div>
        </div>
        <div class="list_main">
          <van-list
-           v-model="loading"
+           v-model:loading="loading"
            :finished="finished"
            finished-text="没有更多了"
+           @load="onRefreshContractor"
          >
-           <van-swipe-cell v-for="item in 10" :key="item">
-             <div class="item">
+           <van-swipe-cell v-for="(item,index) in cbfList" :key="'cbf'+index">
+             <div class="item"  @click="$router.push({path:'/sunVillage_info/list_contractor_single_process',query:{item:item,status:false}})">
                <div class="info">
                  <div class="title">
                    <i class="icon_box"></i>
-                   <p class="news_title">李佳佳</p>
+                   <p class="news_title">{{item.cbfmc}}</p>
                  </div>
                  <div class="time">
-                   <p><img src="../../assets/images/sunVillage_info/contractor_icon_04.png" width="14">444444444</p>
-                   <p><img src="../../assets/images/sunVillage_info/contractor_icon_05.png" width="14">13人</p>
+                   <p><img src="../../assets/images/sunVillage_info/contractor_icon_04.png" width="14">{{item.lxdh}}</p>
+                   <p><img src="../../assets/images/sunVillage_info/contractor_icon_05.png" width="14">{{item.cbfcysl}}</p>
                  </div>
                </div>
                <div style="width: 30%;">
-                 <img src="../../assets/images/sunVillage_info/contractor_icon_06.png" style="width: 100%" alt="">
+                 <img  :src="'/api'+item.gsshqz" width="100%" alt="" v-if="item.gsshqz" >
                </div>
              </div>
              <template #right>
                <div class="operation">
-                 <div class="opera_btn" @click="$router.push({path:'/sunVillage_info/list_contractor_single_process'})">
+                 <div class="opera_btn" @click="$router.push({path:'/sunVillage_info/list_contractor_single_process',query:{item:item,status:true}})">
                    <img src="../../assets/images/sunVillage_info/contractor_icon_07.png" alt="" width="25">
                    <p>审核签字</p>
                  </div>
@@ -49,14 +50,7 @@
      </div>
  </template>
  <script>
-   import {
-     listResource,
-     commonAttach,
-     attachmentList,
-     systemAttachment,
-     delResource,
-     updateResource
-   } from "@/api/sunVillage_info/fixedAssets";
+   import { getList} from "@/api/sunVillage_info/sysCbf";
    import request from '@/utils/request'
    import MapGisLine from "@/components/Map/MapGisLine";
    export default {
@@ -66,15 +60,51 @@
        return {
          loading: false,
          finished: false,
-
+         cbfList:[],
+         countcbf:0,
+         queryParams:{
+           pageNum: 1,
+           pageSize: 10,
+           cbfbm:null},
          value:'',
        };
      },
      created() {
-
+       this.getCbfCount();
      },
      methods: {
-
+       getCbfCount(){
+         getList(this.queryParams).then(res=>{
+           this.cbfList = res.rows;
+           if(this.cbfList.length >= res.total){
+             this.finished = true;
+             return;
+           }else{
+             this.loading = false;
+             this.queryParams.pageNum += 1 ;
+           }
+         });
+       },
+       onRefreshContractor(){
+        if(this.loading){
+          let params = {
+            "cbfbm":this.queryParams.cbfbm,
+            "pageNum": this.countcbf+1,
+            "pageSize":10,
+          }
+          getList(params).then((response) => {
+            if(response.rows.length>0&&this.cbfList.length<response.total){
+              response.rows.map(res => {
+                this.cbfList.unshift(res)
+              })
+              this.loading = false;
+              this.countcbf++
+            }else{
+              this.finished = true;
+            }
+          });
+        }
+       },
      },
    }
  </script>

src/views/sunVillage_info/list_contractor_process.vue

@@ -8,21 +8,21 @@
       <div class="information_main">
         <div class="titBox">
           <img src="../../assets/images/sunVillage_info/contractor_icon_01.png" style="width:22PX;height:22PX;margin-right: 10px;"/>
-          <p class="tit">娃娃村</p>
+          <p class="tit">{{this.$store.state.user.deptName}}</p>
         </div>
 
         <div class="information_content">
           <div class="information_block">
-            <p class="block_num">800<span>户</span></p>
+            <p class="block_num">{{cbfCount}}<span>户</span></p>
             <p class="block_name">承包方</p>
           </div>
           <div class="information_block">
-            <p class="block_num">800<span>户</span></p>
-            <p class="block_name">承包方</p>
+            <p class="block_num">{{cbfdkCount}}<span>户</span></p>
+            <p class="block_name">承包地</p>
           </div>
           <div class="information_block">
-            <p class="block_num">800<span>户</span></p>
-            <p class="block_name">承包方</p>
+            <p class="block_num">{{cbfGsqzCount}}<span>户</span></p>
+            <p class="block_name">已公示签字确认</p>
           </div>
         </div>
 
@@ -33,15 +33,21 @@
           <img src="../../assets/images/sunVillage_info/list_employer_process_icon_02.png" style="width:22PX;height:22PX;margin-right: 10px;"/>
           <p class="tit">信息核对</p>
         </div>
-        <van-field readonly v-model="value" label="公示记事" placeholder="公示记事" input-align="right" :border="false" />
-        <van-field readonly v-model="value" label="公示记事人" placeholder="公示记事人" input-align="right" :border="false" />
-        <van-field readonly v-model="value" label="公示记事日期" placeholder="公示记事日期" input-align="right" :border="false" />
+        <van-field readonly v-model="form.gsjs" label="记事内容" placeholder="记事内容" input-align="right" :border="false" />
+        <van-cell title="记事人" style="border: none;" >
+          <van-field readonly style="padding: 0 0;height: 30px;" label="记事人" input-align="right" :border="false" >
+            <template #label>
+              <img  :src="'/api'+form.gsjsrqz" width="10%" alt="" v-if="form.gsjsrqz" >
+            </template>
+          </van-field>
+        </van-cell>
+        <van-field readonly v-model="form.gsjsrq" label="记事日期" placeholder="审核日期" input-align="right" :border="false" />
       </div>
 
-      <div class="subForm">
+      <div class="subForm" v-if="!showForm2">
         <img src="../../assets/images/sunVillage_info/list_employer_process_icon_01.png" alt="">
         <van-field
-          v-model="value"
+          v-model="form.gsshyj"
           rows="3"
           autosize
           required
@@ -51,46 +57,182 @@
         />
       </div>
 
-      <div class="subForm2">
+      <div class="subForm2" v-if="showForm2">
         <img class="topImg" src="../../assets/images/sunVillage_info/list_employer_process_icon_03.png" alt="">
-        <van-field readonly v-model="value" label="审核意见" placeholder="审核意见" input-align="right" :border="false" />
-        <van-field readonly v-model="value" label="审核人" placeholder="审核人" input-align="right" :border="false" />
-        <van-field readonly v-model="value" label="审核日期" placeholder="审核日期" input-align="right" :border="false" />
+        <van-field readonly v-model="form.gsshyj" label="审核意见" placeholder="审核意见" input-align="right" :border="false" />
+        <van-cell title="审核人" style="border: none;" >
+          <van-field readonly style="padding: 0 0;height: 30px;" label="审核人" input-align="right" :border="false" >
+            <template #label>
+              <img  :src="'/api'+form.gsshqz" width="10%" alt="" v-if="form.gsshqz" >
+            </template>
+          </van-field>
+        </van-cell>
+        <van-field readonly v-model="form.gsshrq" label="审核日期" placeholder="审核日期" input-align="right" :border="false" />
 
         <img class="bottomImg" src="../../assets/images/sunVillage_info/list_employer_process_icon_04.png" alt="">
       </div>
 
-      <div style="margin: 30px auto 0;width: 50%;">
-        <van-button round block type="primary" native-type="submit">
+      <div style="margin: 30px auto 0;width: 50%;" v-if="!showForm2">
+        <van-button round block type="primary" native-type="submit"  @click="onSign()">
           批量审核签字
         </van-button>
       </div>
 
-      <div style="margin: 30px auto 0;width: 50%;">
+      <div style="margin: 30px auto 0;width: 50%;" v-if="showForm2">
         <van-button round block type="primary" native-type="submit" :to="{name:'sunVillageInfoListContractor'}">
           单独审核签字
         </van-button>
       </div>
-
+      <van-popup v-model="showesign" closeable position="right" :style="{ height: '100%' }"
+                 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>
+        <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"
+            v-if="!signature.resultImg"
+          />
+        </div>
+        <img src="../../assets/images/sunVillage_info/signature_icon_10.png" id="canvasTT"  v-if="!signature.resultImg"
+             style="position:absolute;top: 50%;left: 50%;transform: translate(-50%,-50%)" alt="">
+        <img :src="signature.resultImg" alt="" width="100%" v-if="signature.resultImg"/>
+        <div class="signature-footer"  v-if="!signature.resultImg">
+          <van-button type="primary" round size="small" @click="handleReset">清空画板</van-button>
+          <van-button type="primary" round size="small" @click="handleGenerate">保存提交</van-button>
+          </van-row>
+        </div>
+      </van-popup>
     </div>
 </template>
 
 <script>
-  import { financePublicDetail , openAdd } from "@/api/sunVillage_info/fixedAssets";
-  import Cookies from "js-cookie";
-  import request from '@/utils/request'
+  import { getList,getCbdkms,updateSysCfb,examineBatchSign} from "@/api/sunVillage_info/sysCbf";
+  import $ from "jquery";
   export default {
     name: "certificateList",
     data() {
       return {
-        value:''
+        height:0,
+        cbfCount:0,
+        cbfdkCount:0,
+        cbfGsqzCount:0,
+        showForm2:false,
+        showesign:false,
+        form:{},
+        //电子签名
+        signature: {
+          lineWidth: 6, // 画笔的线条粗细
+          lineColor: "#000000", // 画笔的颜色
+          bgColor: "", // 画布的背景颜色
+          resultImg: "", // 最终画布生成的base64图片
+          isCrop: false, // 是否裁剪，在画布设定尺寸基础上裁掉四周空白部分
+        },
       };
     },
     created() {
-
+      this.getCbfCount();
+      this.getCbfdkCount();
+      this.getCbfGsqzCount();
+      this.height = window.screen.height * 1.28 - 20;
     },
     methods: {
+      getCbfCount(){
+        getList({}).then(res=>{
+          this.cbfCount = res.total;
+          this.form = res.rows[0];
+          if(this.form.gsshqz != null){
+            this.showForm2 = true;
+          }
+        });
+      },
+      getCbfGsqzCount(){
+        getList({params:{gsqz:true}}).then(res=>{
+          this.cbfGsqzCount = res.total;
+        });
+      },
+      getCbfdkCount(){
+        getCbdkms({}).then(res=>{
+          this.cbfdkCount = res.data;
+        });
+      },
+      canvasTTdown() {
+        $('#canvasTT').css('display', 'none');
+      },
+      onSign(){
+        this.showesign = true;
+      },
+      // 清空画板
+      handleReset() {
+        this.resultImg = null
+        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();
+            param.append('file', wj)  // 通过append向form对象添加数据
+            this.showesign = false;
+            this.$toast.loading({
+              message: "数据处理中",
+              forbidClick: true,
+              duration: 40000,
+            });
+            examineBatchSign(param,this.form.gsshyj).then((res) => {
+              this.$toast.clear();
+              this.getCbfCount();
+              this.$notify({type: 'success', message: '签字成功'});
+
+            })
+            // this.mainImgArr.push(r1.fileName)
+            // let param = new FormData()  // 创建form对象
+            // param.append('file', wj)  // 通过append向form对象添加数据
+            // param.append('date', this.format(new Date(), 'yyyy-MM-dd'))  // 通过append向form对象添加数据
+            // zjddcSign(param, this.zjdzdxx.zjddm).then(response => {
+            //   this.$notify({type: 'success', message: '签字成功'});
+            //   this.showesign = false;
+            //   getZjdzd(this.zjdzdxx.id).then((response) => {
+            //     localStorage.setItem("zjdzdxxItem",JSON.stringify(response.data))
+            //     location.reload();
+            //   });
 
+
+            // });
+
+          })
+          .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>
@@ -101,6 +243,26 @@
     background-size: 100% 100%;
     border: none;
   }
+  .van-cell::after {
+    position: absolute;
+    box-sizing: border-box;
+    content: ' ';
+    pointer-events: none;
+    right: 0.426667rem;
+    bottom: 0;
+    left: 0.426667rem;
+    border:none;
+    -webkit-transform: scaleY(.5);
+    transform: scaleY(.5);
+  }
+  .signature-footer {
+    transform: rotate(90deg);
+    width: auto;
+    position: absolute;
+    top: 50%;
+    left: 0px;
+
+  }
 .home_wrapper{
     background: #e9e9e9;
     min-height: 100vh;

src/views/sunVillage_info/list_contractor_single_process.vue

@@ -1,78 +1,236 @@
 <template>
-    <div class="home_wrapper">
-      <div class="header_main" >
-        承包方审核
-        <div class="return_btn" @click="onClickLeft"></div>
+  <div class="home_wrapper">
+    <div class="header_main" >
+      承包方审核
+      <div class="return_btn" @click="onClickLeft"></div>
+    </div>
+    <div class="list_main">
+      <div class="titBox">
+        <img src="../../assets/images/sunVillage_info/list_employer_process_icon_02.png" style="width:22PX;height:22PX;margin-right: 10px;"/>
+        <p class="tit">信息核对</p>
       </div>
-      <div class="list_main">
-        <div class="titBox">
-          <img src="../../assets/images/sunVillage_info/list_employer_process_icon_02.png" style="width:22PX;height:22PX;margin-right: 10px;"/>
-          <p class="tit">信息核对</p>
-        </div>
-        <van-field readonly v-model="value" label="承包方名称" placeholder="承包方名称" input-align="right" :border="false" />
-        <van-field readonly v-model="value" label="承包方类型" placeholder="承包方类型" input-align="right" :border="false" />
-        <van-field readonly v-model="value" label="证件号码" placeholder="证件号码" input-align="right" :border="false" />
-        <van-field readonly v-model="value" label="电话" placeholder="电话" input-align="right" :border="false" />
-        <van-field readonly v-model="value" label="调查记事" placeholder="调查记事" input-align="right" :border="false" />
-        <van-field readonly v-model="value" label="公示记事" placeholder="公示记事" input-align="right" :border="false" />
-        <van-field readonly v-model="value" label="公示记事人" placeholder="公示记事人" input-align="right" :border="false" />
-        <van-field readonly v-model="value" label="公示记事时间" placeholder="公示记事时间" input-align="right" :border="false" />
-        <van-field readonly v-model="value" label="承包方公示结果意见" placeholder="承包方公示结果意见" input-align="right" :border="false" />
-        <van-field readonly v-model="value" label="承包方公示结果签字" placeholder="承包方公示结果签字" input-align="right" :border="false" />
-        <van-field readonly v-model="value" label="承包方公示日期" placeholder="承包方公示日期" input-align="right" :border="false" />
+      <van-field readonly v-model="form.cbfmc" label="承包方名称" placeholder="承包方名称" input-align="right" :border="false" />
+      <field-select
+        v-model="form.cbfzjlx"
+        label="承包方类型"
+        value-key="dictLabel"
+        data-key="dictValue"
+        placeholder="选择证件类型"
+        :rules="[{ required: true }]"
+        readonly
+        remote-url="/open/zdzh/list/cert_type"
+        :on-remote-response="'data'"
+      />
+      <van-field readonly v-model="form.cbfzjhm" label="证件号码" placeholder="证件号码" input-align="right" :border="false" />
+      <van-field readonly v-model="form.lxdh" label="电话" placeholder="电话" input-align="right" :border="false" />
+      <van-field readonly v-model="form.cbfdcjs" label="调查记事" placeholder="调查记事" input-align="right" :border="false" />
+      <van-field readonly v-model="form.gsjs" label="公示记事" placeholder="公示记事" input-align="right" :border="false" />
+      <!--        <van-field readonly v-model="form.gsjsrqz" label="公示记事人" placeholder="公示记事人" input-align="right" :border="false" />-->
+      <van-cell title="公示记事人签字" >
+        <van-field style="padding: 0 0;height: 30px;" readonly label="公示记事人签字" input-align="right" :border="false" >
+          <template #label>
+            <img :src="'/api'+form.gsjsrqz" width="10%" alt="" v-if="form.gsjsrqz" >
+          </template>
+        </van-field>
+      </van-cell>
+      <van-field readonly v-model="form.gsjsrq" label="公示记事时间" placeholder="公示记事时间" input-align="right" :border="false" />
+      <van-field readonly v-model="form.gsjgyj" label="承包方公示结果意见" placeholder="承包方公示结果意见" input-align="right" :border="false" />
+      <van-field readonly v-model="form.gsjgqz" label="承包方公示结果签字" placeholder="承包方公示结果签字" input-align="right" :border="false" />
+      <van-field readonly v-model="form.gsjgqzrq" label="承包方公示日期" placeholder="承包方公示日期" input-align="right" :border="false" />
 
-      </div>
+    </div>
 
-      <div class="subForm">
-        <img src="../../assets/images/sunVillage_info/list_employer_process_icon_01.png" alt="">
-        <van-field
-          v-model="value"
-          rows="3"
-          autosize
-          required
-          label="审批意见"
-          type="textarea"
-          :border="false"
-          class="textarea"
-        />
-        <van-field readonly value="123" label="审核人" placeholder="承包方公示日期" input-align="right" :border="false" />
-        <van-field readonly value="123" label="审核日期" placeholder="承包方公示日期" input-align="right" :border="false" />
+    <div class="subForm" v-if="!showForm2">
+      <img src="../../assets/images/sunVillage_info/list_employer_process_icon_01.png" alt="">
+      <van-field
+        v-model="form.gsshyj"
+        rows="3"
+        autosize
+        required
+        label="审核意见"
+        type="textarea"
+        :border="false"
+        class="textarea"
+      />
+      <van-cell title="审核人" style="color: #ffffff;" >
+        <van-field style="padding: 0 0;height: 30px;width: 100%;background-color: #ffffff; border-radius: 5PX;" readonly label="审核人" input-align="right" :border="false" >
+          <template #label>
+            <img :src="'/api'+form.gsshqz" style="top:55px;border:none;" width="10%" alt="" v-if="form.gsshqz" >
+          </template>
+        </van-field>
+      </van-cell>
+      <van-field readonly v-model="form.gsshrq" label="审核日期" placeholder="审核日期" input-align="right" :border="false" />
 
-      </div>
+    </div>
 
-      <div class="subForm2">
-        <img class="topImg" src="../../assets/images/sunVillage_info/list_employer_process_icon_03.png" alt="">
-        <van-field readonly v-model="value" label="审核意见" placeholder="审核意见" input-align="right" :border="false" />
-        <van-field readonly v-model="value" label="审核人" placeholder="审核人" input-align="right" :border="false" />
-        <van-field readonly v-model="value" label="审核日期" placeholder="审核日期" input-align="right" :border="false" />
+    <div class="subForm2" v-if="showForm2">
+      <img class="topImg" src="../../assets/images/sunVillage_info/list_employer_process_icon_03.png" alt="">
+      <van-field readonly v-model="form.gsshyj" label="审核意见" placeholder="审核意见" input-align="right" :border="false" />
+      <van-cell title="审核人" >
+        <van-field style="padding: 0 0;height: 30px;" readonly label="审核人" input-align="right" :border="false" >
+          <template #label>
+            <img :src="'/api'+form.gsshqz" width="10%" alt="" v-if="form.gsshqz" >
+          </template>
+        </van-field>
+      </van-cell>
+      <van-field readonly v-model="form.gsshrq" label="审核日期" placeholder="审核日期" input-align="right" :border="false" />
 
-        <img class="bottomImg" src="../../assets/images/sunVillage_info/list_employer_process_icon_04.png" alt="">
+      <img class="bottomImg" src="../../assets/images/sunVillage_info/contractor_icon_09.png" alt="">
+    </div>
+    <div style="margin: 30px auto 0;width: 50%;"  v-if="!showForm2">
+      <van-button round block type="primary" native-type="submit"  @click="onSign()" >
+        审核签字
+      </van-button>
+    </div>
+    <van-popup v-model="showesign" closeable position="right" :style="{ height: '100%' }"
+               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>
+      <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"
+          v-if="!signature.resultImg"
+        />
       </div>
-      <div style="margin: 30px auto 0;width: 50%;">
-        <van-button round block type="primary" native-type="submit">
-          审核签字
-        </van-button>
+      <img src="../../assets/images/sunVillage_info/signature_icon_10.png" id="canvasTT"  v-if="!signature.resultImg"
+           style="position:absolute;top: 50%;left: 50%;transform: translate(-50%,-50%)" alt="">
+      <img :src="signature.resultImg" alt="" width="100%" v-if="signature.resultImg"/>
+      <div class="signature-footer"  v-if="!signature.resultImg">
+        <van-button type="primary" round size="small" @click="handleReset">清空画板</van-button>
+        <van-button type="primary" round size="small" @click="handleGenerate">保存提交</van-button>
+        </van-row>
       </div>
-
-    </div>
+    </van-popup>
+  </div>
 </template>
 
 <script>
-  import { financePublicDetail , openAdd } from "@/api/sunVillage_info/fixedAssets";
-  import Cookies from "js-cookie";
-  import request from '@/utils/request'
+  import { examineSign } from "@/api/sunVillage_info/sysCbf";
+  import FieldSelect from "@/components/form/FieldSelect";
+  import $ from "jquery";
   export default {
     name: "certificateList",
+    components: {FieldSelect},
     data() {
       return {
-        value:''
+        form:{},
+        showForm2:false,
+        showesign:false,
+        height:0,
+        options: {
+          cert_type: [],
+        },
+        //电子签名
+        signature: {
+          lineWidth: 6, // 画笔的线条粗细
+          lineColor: "#000000", // 画笔的颜色
+          bgColor: "", // 画布的背景颜色
+          resultImg: "", // 最终画布生成的base64图片
+          isCrop: false, // 是否裁剪，在画布设定尺寸基础上裁掉四周空白部分
+        },
       };
     },
     created() {
-
+      this.form = this.$route.query.item;
+      this.InitOptions();
+      this.height = window.screen.height * 1.28 - 20;
+      if(this.$route.query.status === "true"){
+        this.showForm2 =false;
+      }else{
+        this.showForm2 =true;
+      }
     },
     methods: {
+      InitOptions() {
+        for(let k in this.options)
+        {
+          this.getDicts(k).then((resp) => this.options[k] = resp.data);
+        }
+      },
+      canvasTTdown() {
+        $('#canvasTT').css('display', 'none');
+      },
+      onSign(){
+        this.showesign = true;
+      },
+      // 清空画板
+      handleReset() {
+        this.resultImg = null
+        if(this.$refs.esign){
+          this.$refs.esign.reset();
+        }
+        $('#canvasTT').css('display', 'block')
+      },
+      // 生成签字图
+      handleGenerate() {
+        console.info( this.$refs.esign
+          .generate() );
+        this.$refs.esign
+          .generate() // 使用生成器调用把签字的图片转换成为base64图片格式
+          .then((res) => {
+            this.signature.resultImg = res;
+            console.info(res)
+            let wj = this.dataURLtoBlob(res);
+            let param = new FormData();
+            param.append('file', wj)  // 通过append向form对象添加数据
+            param.append('id', this.form.id)
+            param.append('shyj', this.form.gsshyj)
+            this.showesign = false;
+            this.$toast.loading({
+              message: "数据处理中",
+              forbidClick: true,
+              duration: 40000,
+            });
+            examineSign(param).then((r1) => {
+              this.$toast.clear();
+              // this.tEnforceSamplingGoodsList[index].attachement.push(r1.fileName);
+              this.$notify({type: 'success', message: '签字成功'});
+              this.showForm2 = true;
+              this.form = r1.data;
+              this.$router.push({name:'sunVillageInfoListContractor'})
+            })
+            // let param = new FormData()  // 创建form对象
+            // param.append('file', wj)  // 通过append向form对象添加数据
+            // param.append('date', this.format(new Date(), 'yyyy-MM-dd'))  // 通过append向form对象添加数据
+            // zjddcSign(param, this.zjdzdxx.zjddm).then(response => {
+            //   this.$notify({type: 'success', message: '签字成功'});
+            //   this.showesign = false;
+            //   getZjdzd(this.zjdzdxx.id).then((response) => {
+            //     localStorage.setItem("zjdzdxxItem",JSON.stringify(response.data))
+            //     location.reload();
+            //   });
+
+
+            // });
 
+          })
+          .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>
@@ -83,82 +241,102 @@
     background-size: 100% 100%;
     border: none;
   }
-.home_wrapper{
+  .van-cell::after {
+    position: absolute;
+    box-sizing: border-box;
+    content: ' ';
+    pointer-events: none;
+    right: 0.426667rem;
+    bottom: 0;
+    left: 0.426667rem;
+    border:none;
+    -webkit-transform: scaleY(.5);
+    transform: scaleY(.5);
+  }
+  .signature-footer {
+    transform: rotate(90deg);
+    width: auto;
+    position: absolute;
+    top: 50%;
+    left: 0px;
+
+  }
+  .home_wrapper{
     background: #e9e9e9;
     min-height: 100vh;
     width: 100vw;
-    .header_main {
-        height: 116px;
-        background: url('../../assets/images/sunVillage_info/list_head.png') no-repeat;
-        background-size: 100% 100%;
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        font-size: 36px;
-        line-height: 116px;
-        text-align: center;
-        color: #fff;
-        position: relative;
+  .header_main {
+    height: 116px;
+    background: url('../../assets/images/sunVillage_info/list_head.png') no-repeat;
+    background-size: 100% 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    font-size: 36px;
+    line-height: 116px;
+    text-align: center;
+    color: #fff;
+    position: relative;
 
-        .return_btn {
-            width: 24px;
-            height: 43.2px;
-            background: url('../../assets/images/sunVillage_info/list_icon_5.png') center center no-repeat;
-            background-size: 20px 36px;
-            position: absolute;
-            left: 38px;
-            top: 36px;
-        }
-    }
-    .release_head{
-        height: 90px;
-        padding:0 23px;
-        display: flex;
-        align-items: center;
-        font-size: 26px;
-        color: #929292;
-        .people{
-            flex: 1;
-            display: flex;
-            align-items: center;
-            .icon{
-                width: 24px;
-                height: 21px;
-                background: url('../../assets/images/sunVillage_info/details_icon_1.png') no-repeat;
-                background-size: 100% 100%;
-                display: block;
-                margin-right: 8px;
-            }
-        }
-        .time{
-            flex: 1;
-            display: flex;
-            align-items: center;
-            justify-content:flex-end;
-            .icon{
-                width: 25px;
-                height: 25px;
-                background: url('../../assets/images/sunVillage_info/details_icon_2.png') no-repeat;
-                background-size: 100% 100%;
-                display: block;
-                margin-right: 8px;
-            }
-        }
-    }
-    .release_conetnt{
-        padding:0 22px;
-        font-size: 32px;
-        color: #252525;
-        line-height: 44px;
-        img{
-            max-width: 100%;
-            margin-bottom: 16px;
-        }
-        p{
-            margin-bottom: 16px;
-        }
-    }
+  .return_btn {
+    width: 24px;
+    height: 43.2px;
+    background: url('../../assets/images/sunVillage_info/list_icon_5.png') center center no-repeat;
+    background-size: 20px 36px;
+    position: absolute;
+    left: 38px;
+    top: 36px;
+  }
+  }
+  .release_head{
+    height: 90px;
+    padding:0 23px;
+    display: flex;
+    align-items: center;
+    font-size: 26px;
+    color: #929292;
+  .people{
+    flex: 1;
+    display: flex;
+    align-items: center;
+  .icon{
+    width: 24px;
+    height: 21px;
+    background: url('../../assets/images/sunVillage_info/details_icon_1.png') no-repeat;
+    background-size: 100% 100%;
+    display: block;
+    margin-right: 8px;
+  }
+  }
+  .time{
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content:flex-end;
+  .icon{
+    width: 25px;
+    height: 25px;
+    background: url('../../assets/images/sunVillage_info/details_icon_2.png') no-repeat;
+    background-size: 100% 100%;
+    display: block;
+    margin-right: 8px;
+  }
+  }
+  }
+  .release_conetnt{
+    padding:0 22px;
+    font-size: 32px;
+    color: #252525;
+    line-height: 44px;
+  img{
+    max-width: 100%;
+    margin-bottom: 16px;
+  }
+  p{
+    margin-bottom: 16px;
+  }
+  }
   .list_main{
     padding:25px;
     background: #ffffff;
@@ -176,46 +354,46 @@
     box-shadow: 4px 6px 5px rgba(63, 68, 75, 0.1);
     position: relative;
     padding-top: 10vw;
-    img{
-      position: absolute;
-      left: 50%;
-      width: 15vw;
-      transform: translate(-50%,calc(-50% - 10vw));
-      border: 5PX solid #e9e9e9;
-      border-radius: 100%;
-    }
-    /deep/ .van-field__label{
-      /*padding-left: 10PX;*/
-      width: auto;
-      display: flex;
-      align-items: start;
-      color: #ffffff;
-      margin-right: 6vw;
-    }
-    /deep/ .van-cell{
-      background-color: transparent;
-    }
-    .textarea{
-      /deep/ .van-field__value{
-        background-color: #ffffff;
-        border-radius: 10PX;
-      }
-      /deep/ .van-field__control{
-        padding: 12PX;
-        color: #666666;
-      }
-    }
-    /deep/ .van-field__value{
-      background-color: transparent;
-      border-radius: 10PX;
-    }
-    /deep/ .van-field__control{
-      padding: 0PX;
-      color: #ffffff;
-    }
-    /deep/ .van-cell--required::before{
-      left: 60PX;
-    }
+  img{
+    position: absolute;
+    left: 50%;
+    width: 15vw;
+    transform: translate(-50%,calc(-50% - 10vw));
+    border: 5PX solid #e9e9e9;
+    border-radius: 100%;
+  }
+  /deep/ .van-field__label{
+    /*padding-left: 10PX;*/
+    width: auto;
+    display: flex;
+    align-items: start;
+    color: #ffffff;
+    margin-right: 6vw;
+  }
+  /deep/ .van-cell{
+    background-color: transparent;
+  }
+  .textarea{
+  /deep/ .van-field__value{
+    background-color: #ffffff;
+    border-radius: 10PX;
+  }
+  /deep/ .van-field__control{
+    padding: 12PX;
+    color: #666666;
+  }
+  }
+  /deep/ .van-field__value{
+    background-color: transparent;
+    border-radius: 10PX;
+  }
+  /deep/ .van-field__control{
+    padding: 0PX;
+    color: #ffffff;
+  }
+  /deep/ .van-cell--required::before{
+    left: 60PX;
+  }
   }
   .subForm2{
     padding:25px;
@@ -226,21 +404,21 @@
     box-shadow: 4px 6px 5px rgba(63, 68, 75, 0.1);
     position: relative;
     padding-top: 10vw;
-    .topImg{
-      position: absolute;
-      left: 50%;
-      width: 15vw;
-      transform: translate(-50%,calc(-50% - 10vw));
-      border: 5PX solid #e9e9e9;
-      border-radius: 100%;
-    }
-    .bottomImg{
-      position: absolute;
-      left: 50%;
-      top: 50%;
-      width: 25vw;
-      transform: translate(-50%,-50%);
-    }
+  .topImg{
+    position: absolute;
+    left: 50%;
+    width: 15vw;
+    transform: translate(-50%,calc(-50% - 10vw));
+    border: 5PX solid #e9e9e9;
+    border-radius: 100%;
+  }
+  .bottomImg{
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    width: 25vw;
+    transform: translate(-50%,-50%);
+  }
   }
   .titBox{
     display: flex;
@@ -264,5 +442,5 @@
   /deep/ .van-cell--required::before{
     left: 85PX;
   }
-}
+  }
 </style>

src/views/sunVillage_info/list_employer_process.vue

@@ -9,22 +9,30 @@
           <img src="../../assets/images/sunVillage_info/list_employer_process_icon_02.png" style="width:22PX;height:22PX;margin-right: 10px;"/>
           <p class="tit">信息核对</p>
         </div>
-        <van-field readonly v-model="value" label="编码" placeholder="编码" input-align="right" :border="false" />
-        <van-field readonly v-model="value" label="名称" placeholder="名称" input-align="right" :border="false" />
-        <van-field readonly v-model="value" label="负责人" placeholder="负责人" input-align="right" :border="false" />
-        <van-field readonly v-model="value" label="证件类型" placeholder="证件类型" input-align="right" :border="false" />
-        <van-field readonly v-model="value" label="证件号码" placeholder="证件号码" input-align="right" :border="false" />
-        <van-field readonly v-model="value" label="调查记事" placeholder="调查记事" input-align="right" :border="false" />
-        <van-field readonly v-model="value" label="调查员" placeholder="调查员" input-align="right" :border="false" />
-        <van-field readonly v-model="value" label="调查日期" placeholder="调查日期" input-align="right" :border="false" />
-        <van-field readonly v-model="value" label="调查签字" placeholder="调查签字" input-align="right" :border="false" />
+        <van-field readonly v-model="form.fbfbm" label="编码" placeholder="编码" input-align="right" :border="false" />
+        <van-field readonly v-model="form.fbfdcy" label="名称" placeholder="名称" input-align="right" :border="false" />
+        <van-field readonly v-model="form.fbffzrxm" label="负责人" placeholder="负责人" input-align="right" :border="false" />
+        <van-field readonly v-model="form.fzrzjlx" label="证件类型" placeholder="证件类型" input-align="right" :border="false" />
+        <van-field readonly v-model="form.fzrzjhm" label="证件号码" placeholder="证件号码" input-align="right" :border="false" />
+        <van-field readonly v-model="form.fbfdcjs" label="调查记事" placeholder="调查记事" input-align="right" :border="false" />
+        <van-field readonly v-model="form.fbfdcy" label="调查员" placeholder="调查员" input-align="right" :border="false" />
+        <van-field readonly v-model="form.fbfdcrq" label="调查日期" placeholder="调查日期" input-align="right" :border="false" />
+        <van-cell title="调查签名" >
+        <van-field style="padding: 0 0;" readonly label="调查签名" input-align="right" :border="false" >
+          <template #label>
+            <img :src="'/api'+form.fbfdcqz" width="10%" alt="" v-if="form.fbfdcqz" >
+          </template>
+        </van-field>
+        </van-cell>
+<!--        <van-col :span="12">  <van-field readonly label="调查签名" input-align="right" :border="false" /></van-col>-->
+<!--        <van-col :span="12"><img :src="'/api'+form.fbfdcqz" width="100%" alt="" v-if="form.fbfdcqz" ></van-col>-->
 
       </div>
 
-      <div class="subForm">
+      <div class="subForm"  v-if="!showShenHe">
         <img src="../../assets/images/sunVillage_info/list_employer_process_icon_01.png" alt="">
         <van-field
-          v-model="value"
+          v-model="form.shyj"
           rows="3"
           autosize
           required
@@ -34,39 +42,174 @@
         />
       </div>
 
-      <div class="subForm2">
+      <div class="subForm2" v-if="showShenHe">
         <img class="topImg" src="../../assets/images/sunVillage_info/list_employer_process_icon_03.png" alt="">
-        <van-field readonly v-model="value" label="审核意见" placeholder="审核意见" input-align="right" :border="false" />
-        <van-field readonly v-model="value" label="审核人" placeholder="审核人" input-align="right" :border="false" />
-        <van-field readonly v-model="value" label="审核日期" placeholder="审核日期" input-align="right" :border="false" />
+        <van-field readonly v-model="form.shyj" label="审核意见" placeholder="审核意见" input-align="right" :border="false" />
+        <van-cell title="审核人" style="border: none;height: 40px;" >
+          <van-field readonly style="padding: 0 0;" label="审核人" input-align="right" :border="false" >
+            <template #label>
+              <img :src="'/api'+form.shrqz" width="10%" alt="" v-if="form.shrqz" >
+            </template>
+          </van-field>
+        </van-cell>
+        <van-field readonly v-model="form.shrq" label="审核日期" placeholder="审核日期" input-align="right" :border="false" />
 
         <img class="bottomImg" src="../../assets/images/sunVillage_info/list_employer_process_icon_04.png" alt="">
       </div>
-      <div style="margin: 30px auto 0;width: 50%;">
-        <van-button round block type="primary" native-type="submit">
+      <div style="margin: 30px auto 0;width: 50%;" v-if="showShqz && !showShenHe">
+        <van-button round block type="primary" native-type="submit" @click="onSign()">
           审核签字
         </van-button>
       </div>
-
+      <van-popup v-model="showesign" closeable position="right" :style="{ height: '100%' }"
+                 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>
+        <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"
+            v-if="!signature.resultImg"
+          />
+        </div>
+        <img src="../../assets/images/sunVillage_info/signature_icon_10.png" id="canvasTT"  v-if="!signature.resultImg"
+             style="position:absolute;top: 50%;left: 50%;transform: translate(-50%,-50%)" alt="">
+        <img :src="signature.resultImg" alt="" width="100%" v-if="signature.resultImg"/>
+        <div class="signature-footer"  v-if="!signature.resultImg">
+          <van-button type="primary" round size="small" @click="handleReset">清空画板</van-button>
+          <van-button type="primary" round size="small" @click="handleGenerate">保存提交</van-button>
+          </van-row>
+        </div>
+      </van-popup>
     </div>
 </template>
 
 <script>
-  import { financePublicDetail , openAdd } from "@/api/sunVillage_info/fixedAssets";
+  import { getSysFfb,auditSign} from "@/api/sunVillage_info/sysFbf";
+  import  { commonUpload } from "@/api/homestead/index";
+  import $ from "jquery";
   import Cookies from "js-cookie";
   import request from '@/utils/request'
   export default {
     name: "certificateList",
     data() {
       return {
-        value:''
+        value:'',
+        showesign:false,
+        showShenHe:false,
+        showShqz:true,
+        height:0,
+        form:{},
+        //电子签名
+        signature: {
+          lineWidth: 6, // 画笔的线条粗细
+          lineColor: "#000000", // 画笔的颜色
+          bgColor: "", // 画布的背景颜色
+          resultImg: "", // 最终画布生成的base64图片
+          isCrop: false, // 是否裁剪，在画布设定尺寸基础上裁掉四周空白部分
+        },
       };
     },
     created() {
-
+      this.getSysFfb();
+      this.height = window.screen.height * 1.28 - 20;
     },
     methods: {
+        getSysFfb(){
+          getSysFfb().then(response => {
+            if(response.data.length > 0){
+              this.form = response.data[0];
+              if(this.form.shrqz != null){
+                this.showShenHe = true;
+              }
+              console.info(this.form);
+            }
+
+          });
+        },
+      canvasTTdown() {
+        $('#canvasTT').css('display', 'none');
+      },
+      onSign(){
+        this.showesign = true;
+      },
+      // 清空画板
+      handleReset() {
+        this.resultImg = null
+        if(this.$refs.esign){
+          this.$refs.esign.reset();
+        }
+        $('#canvasTT').css('display', 'block')
+      },
+      // 生成签字图
+      handleGenerate() {
+        console.info( this.$refs.esign
+          .generate() );
+        this.$refs.esign
+          .generate() // 使用生成器调用把签字的图片转换成为base64图片格式
+          .then((res) => {
+            this.signature.resultImg = res;
+            console.info(res)
+            let wj = this.dataURLtoBlob(res);
+            let param = new FormData();
+            param.append('file', wj)  // 通过append向form对象添加数据
+            param.append('id', this.form.id)
+            param.append('shyj', this.form.shyj)
+            this.$toast.loading({
+              message: "数据处理中",
+              forbidClick: true,
+              duration: 40000,
+            });
+            auditSign(param).then((r1) => {
+              this.$toast.clear();
+              // this.tEnforceSamplingGoodsList[index].attachement.push(r1.fileName);
+              this.$notify({type: 'success', message: '签字成功'});
+              this.showShqz = false;
+              this.showesign = false;
+              this.getSysFfb();
+              // this.mainImgArr.push(r1.fileName)
+            })
+            // let param = new FormData()  // 创建form对象
+            // param.append('file', wj)  // 通过append向form对象添加数据
+            // param.append('date', this.format(new Date(), 'yyyy-MM-dd'))  // 通过append向form对象添加数据
+            // zjddcSign(param, this.zjdzdxx.zjddm).then(response => {
+            //   this.$notify({type: 'success', message: '签字成功'});
+            //   this.showesign = false;
+            //   getZjdzd(this.zjdzdxx.id).then((response) => {
+            //     localStorage.setItem("zjdzdxxItem",JSON.stringify(response.data))
+            //     location.reload();
+            //   });
+
 
+            // });
+
+          })
+          .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>
@@ -77,6 +220,28 @@
     background-size: 100% 100%;
     border: none;
   }
+
+  .van-cell::after {
+    position: absolute;
+    box-sizing: border-box;
+    content: ' ';
+    pointer-events: none;
+    right: 0.426667rem;
+    bottom: 0;
+    left: 0.426667rem;
+    border:none;
+    -webkit-transform: scaleY(.5);
+    transform: scaleY(.5);
+  }
+
+  .signature-footer {
+    transform: rotate(90deg);
+    width: auto;
+    position: absolute;
+    top: 50%;
+    left: 0px;
+
+  }
 .home_wrapper{
     background: #e9e9e9;
     min-height: 100vh;

src/views/sunVillage_info/list_signature_pdf.vue

@@ -45,7 +45,6 @@
         this.$toast.loading({
           message: "正在加载文件",
           forbidClick: true,
-          duration: 20000,
         });
         loadingTask.promise.then(pdf => {
           this.numPages = pdf.numPages