Skip to content

B
BCDH-APP
Commit 8941287e authored by 13841799530's avatar 13841799530
Browse files
Options

电子签名功能 

解润东
2021102802
parent 67ff0513
Hide whitespace changes
Inline Side-by-side
Showing with 136 additions and 9 deletions
package-lock.json
View file @ 8941287e
......@@ -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
View file @ 8941287e
......@@ -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
View file @ 8941287e
......@@ -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
View file @ 8941287e
......@@ -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
View file @ 8941287e
......@@ -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
View file @ 8941287e
......@@ -11,7 +11,7 @@
<template>
<div>
<LHeader v-bind:text="text"></LHeader>
<LHeader v-bind:text="text"></LHeader>
<van-tabs v-model="active" @click="tabClick">
<van-tab title="上报状态">
<table border="1" cellspacing="0">
......@@ -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 0 → 100644
View file @ 8941287e
<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
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment