电子签名功能

解润东
2021102802

package-lock.json

@@ -11632,6 +11632,14 @@
       "resolved": "https://registry.npm.taobao.org/vue/download/vue-2.6.10.tgz",
       "integrity": "sha1-pysaQqTYKnIepDjRtr9V5mGVxjc="
     },
+    "vue-esign": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/vue-esign/-/vue-esign-1.0.5.tgz",
+      "integrity": "sha512-XwJWnV3YJfilT1qIU8CbJgPRdUltONuv6fjCaMAbvkt6Juidm2m9g73H+2FhPbn7nEliB2q7kZEnQXhbWP4mCw==",
+      "requires": {
+        "vue": "^2.5.11"
+      }
+    },
     "vue-eslint-parser": {
       "version": "5.0.0",
       "resolved": "https://registry.npm.taobao.org/vue-eslint-parser/download/vue-eslint-parser-5.0.0.tgz",

package.json

@@ -19,6 +19,7 @@
     "s": "^1.0.0",
     "vant": "^2.12.30",
     "vue": "^2.6.10",
+    "vue-esign": "^1.0.5",
     "vue-router": "^3.0.7",
     "vue2-verify": "^1.1.5",
     "vuex": "^3.1.2"

src/main.js

@@ -18,7 +18,8 @@ import { prefix } from '@/common/js/utils'
 import { Divider, Popup, Overlay, Loading, Dialog, ContactCard, Form, AddressEdit, AddressList, Field, CellGroup, Cell, SwipeCell, Icon, Stepper, Card, Checkbox, CheckboxGroup, Button, Swipe, SwipeItem, PullRefresh, List, Tab, Tabs, GoodsAction, GoodsActionIcon, GoodsActionButton, SubmitBar, Toast ,Search,Picker,Uploader,Notify ,ContactList,Calendar,Radio,RadioGroup,Tag,Tabbar,TabbarItem,Sticky, Grid, GridItem,Skeleton,Col,Row,  Image as VanImage, Badge,NoticeBar,DatetimePicker,
 Step, Steps  } from 'vant'
 import 'lib-flexible/flexible'
-
+import vueEsign from 'vue-esign'
+Vue.use(vueEsign)
 Vue.use(Divider).use(Popup).use(Overlay).use(Loading).use(Dialog).use(Toast).use(ContactCard).use(Form).use(AddressEdit).use(AddressList).use(Field).use(CellGroup).use(Cell).use(SwipeCell).use(Icon).use(Stepper).use(Card).use(Button).use(Swipe).use(SwipeItem).use(PullRefresh).use(List).use(Tab).use(Tabs).use(GoodsAction).use(GoodsActionIcon).use(GoodsActionButton).use(SubmitBar).use(Checkbox).use(CheckboxGroup).use(Search).use(Picker).use(Uploader).use(Notify)
 .use(ContactList).use(Calendar).use(Radio).use(RadioGroup).use(Tag).use(Tabbar).use(TabbarItem).use(Sticky)
 .use(Grid).use(GridItem).use(Skeleton).use(Col).use(Row).use(VanImage).use(Badge).use(NoticeBar).use(DatetimePicker).use(Step).use(Steps)

src/router/index.js

@@ -216,6 +216,15 @@ const routes = [
     },
     component: () => import(/* webpackChunkName: "create-order" */ '../views/notice/noticeList'),
   },
+  {
+    path: '/sign',
+    name: 'sign',
+    meta: {
+        title:'电子签名',
+        index: 3
+    },
+    component: () => import(/* webpackChunkName: "create-order" */ '../views/notice/noticeList/sign'),
+  },
   // 登录页
   {
     path: '/login2',

src/views/notice/index.vue

@@ -58,6 +58,7 @@ export default {
         },
         cardLocation(item){
             sessionStorage.setItem('finish',item.finish)
+            sessionStorage.setItem('id',item.id)
             this.$router.push({
                 name:'noticeList',
                 query:{

src/views/notice/noticeList/index.vue

@@ -57,7 +57,7 @@
                     @click="calendarOpen"
                     />
                 <van-calendar v-model="showCalendar" @confirm="onConfirm" />
-                <div class="sign"><span>检查组负责人签字确认：</span><van-tag color="#ffe1e1" :disabled="finish=='true'?true:false">电子签字</van-tag></div>
+                <div class="sign"><span>检查组负责人签字确认：</span><van-tag color="#ffe1e1" :disabled="finish=='true'?true:false"><p v-show="istext" @click="sign" >电子签字</p><img  class="sign-img" v-show="isImg" :src="resultImg" alt=""></van-tag></div>
                 <div class="page-footer-button">
                     <van-button round type="info" size="large" @click="commit" :disabled="finish=='true'?true:false">生成整改通知单</van-button>
                     <van-button round type="defult" size="large" @click="cancel" :disabled="finish=='true'?true:false">取消</van-button>
@@ -77,6 +77,9 @@ export default {
     },
     data() {
         return {
+            istext:true,//是否显示文字
+            isImg:false,//是否显示图片
+            resultImg:'',//电子签名图片
             noticeQuestionList:[],//整改通知问题记录列表
             active: 0,//tab选中状态
             checkedAll:false,//全选状态
@@ -93,14 +96,25 @@ export default {
         
     },
     mounted() {
-        if(this.$route.query.id){
-            this.id=this.$route.query.id
+        //获取检查id
+        if(sessionStorage.getItem('id')){
+            this.id=sessionStorage.getItem('id')
         }
+        //获取检查状态
         if(sessionStorage.getItem('finish')){
             this.finish=sessionStorage.getItem('finish')
         }
         this.init()
-        // this.$toast.clear()
+        //从session中获取签名生成的图片
+        if(sessionStorage.getItem('resultImg')){
+            console.log(sessionStorage.getItem('resultImg'))
+            this.resultImg=sessionStorage.getItem('resultImg')
+        }
+        //获取图片是否显示的布尔值
+        if(this.$route.query.isImg){
+            this.istext=false
+            this.isImg=true
+        }
     },
     methods: {
         /* 同步请求上报状态列表问题记录列表 */
@@ -163,7 +177,8 @@ export default {
         },
         /* 时间戳转换 */
         onConfirm(date) {
-            this.value = `${date.getMonth() + 1}/${date.getDate()}`;
+            this.value = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
+            console.log(this.value)
             this.showCalendar = false;
         },
         cancel(){
@@ -185,6 +200,12 @@ export default {
                 }
             }
         },
+        //电子签名
+        sign(){
+            if(this.finish=='false'){
+                this.$router.push('/sign')
+            }
+        },
         //提交问题记录
         commit(){
             var checkedList=[]
@@ -196,6 +217,12 @@ export default {
                     }
                 })
             })
+            var obj={
+                planId:this.id,
+                troubleIds:checkedList,
+                finishTime:this.value,
+                leaderSign:this.resultImg
+            }
             this.$dialog.confirm({
                 title: '提示',
                 message: '确定提交检查问题？',
@@ -206,14 +233,14 @@ export default {
                     loadingType: 'spinner',
                     duration: 0
                 })
-                postFun('check/notify/trouble',{planId:this.id,troubleIds:checkedList,date:this.value}).then((Response)=>{
+                postFun('check/notify/trouble',obj).then((Response)=>{
                     this.$toast.clear()
                     this.$toast.success('提交成功')
+                    this.$router.push('/notice')
                 }).catch(()=>{
                     this.$toast.clear()
                     this.$toast.fail('提交失败,请稍后再试')
                 })
-                // this.$router.push('/correct')
             })
         }
     }
@@ -246,6 +273,10 @@ export default {
         text-align: center;
     }
     .sign{
+        width: 90%;
+        height: 2rem;
+        display: flex;
+        align-items: center;
         margin-top: 0.5rem;
         margin-left:0.4rem ;
         font-size: 0.37333rem;
@@ -253,4 +284,8 @@ export default {
     .van-tag{
         color: #323233
     }
+    .sign-img{
+        width: 2rem;
+        height: 1rem;
+    }
 </style>

src/views/notice/noticeList/sign/index.vue

+<template>
+    <div>
+        <LHeader v-bind:text="text"></LHeader>
+        <div style="border: 2px solid #E6E6E6 ;background-color: white">
+            <vue-esign ref="esign" :width="800" :height="300" :isCrop="isCrop" :lineWidth="lineWidth"  :lineColor="lineColor" :bgColor.sync="bgColor" />
+        </div>
+        <div class="page-footer">
+            <p>请在上方空白处书写您的签字</p>
+            <van-button round type="primary" size="large" @click="handleReset">清空画板</van-button> 
+            <van-button round type="info" size="large" @click="handleGenerate">生成图片</van-button>
+        </div>
+        
+    </div>
+</template>
+
+<script>
+import LHeader from '@/components/header.vue'
+export default {
+    name: 'sign',
+    components: {
+        "LHeader":LHeader
+    },
+    data() {
+        return {
+            text:'电子签名',
+            lineWidth: 6,
+            lineColor: 'red',
+            bgColor: '',
+            resultImg: '',
+            isCrop: false
+        };
+    },
+    methods: {
+    handleReset () {
+
+      this.$refs.esign.reset()
+
+    },
+    // 生成base64格式
+    handleGenerate () {
+        this.$refs.esign.generate().then(res => {
+            this.resultImg = res //把base64赋给img
+            //生成图片后存储到session中并跳转把图片是否显示的boolean带过去
+            this.$router.push({name:'noticeList',query:{isImg:true}})
+            sessionStorage.setItem('resultImg',this.resultImg)
+        }).catch(err => {
+            // 画布没有签字时会执行这里
+            this.$dialog.alert({
+                title: '提示',
+                message: '不签名就想提交？做梦！',
+                theme: 'round-button',
+            })
+        })
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="less" scoped>
+    .van-button{
+        width: 90%;
+        margin-top: 0.3rem;
+    }
+    .page-footer{
+        text-align: center;
+    }
+    .page-footer p{
+        font-size: 0.3rem;
+        font-weight: bolder;
+    }
+</style>
\ No newline at end of file