<el-form-item label="签名" class="manual-sign-area" v-if="bussinessInfo.needManuallySigned">
<template v-if="!form.sign">
<div class="code-area">
<canvas ref="manual_sign" id="manual_sign" class="manual-sign"></canvas>
<span class="expire" v-if="manualSignInfo.now >= manualSignInfo.total" @click="makeupQrcode">二维码已失效<br/>点击刷新</span>
</div>
<span class="manual-sign-hint">{{manualSignInfo.hint}}</span>
</template>
<template v-else>
<div class="code-area-sign">
<img class="sign-img" :src="`data:image/jpeg;base64,${form.sign}`"/>
</div>
<span class="sign-rewrite-handle" @click="rewriteHandler">重新输入</span>
</template>
</el-form-item>
<script>
import Types from 'vue-types';
import { mapState } from 'vuex';
import QRCode from 'qrcode';
import capticalUtil from '@c/utils/capital.js';
import { queryManualSign } from '@inv/services/bpm/flow/approvalDetail';
import md5 from 'js-md5';
export default {
components: {
MemberSelect: () => import('./select.vue'),
},
props: {
currentBussinessInfo:{
default:null,
},
buttonType: {
default:null
}
},
data() {
manualSignInfo:{
hint: '请在app上签名确认',
timeStamp: '',
intervalId: 0,
total: 1,
now: 0,
random: '',
},
}
},
computed: {
bussinessInfo() {
return this.currentBussinessInfo || {};
},
...mapState({
userName: state => state.user.firstName,
userId: state => state.user.userId,
tenantId: state => state.user.tenantId,
}),
},
methods: {
getId(length){
return Number(Math.random().toString().substr(3,length) + Date.now()).toString(36);
},
async verifyQrcode() {
this.manualSignInfo.now ++;
if(this.manualSignInfo.now >= this.manualSignInfo.total) {
clearInterval(this.manualSignInfo.intervalId);
return;
}
return
const res = await queryManualSign({
key: this.manualSignInfo.random
});
if(res.code == 0) {
if(res.result) {
this.form.sign = res.result;
this.manualSignInfo.hint = '签名成功';
clearInterval(this.manualSignInfo.intervalId);
}
} else {
kr.ui.error(res.message);
}
},
makeupQrcodeUrl() {
const isLocal = ['0.0.0.0', 'localhost', '127.0.0.1'].some((origin) => location.origin.includes('localhost'));
const origin = isLocal ? 'https://zkcx.jingdata.com': location.origin;
const md5Str = md5(this.tenantId.toString() + this.userId + origin);
this.manualSignInfo.timeStamp = +(new Date()) + 1000 * 5;
this.manualSignInfo.random = this.getId(12);
return JSON.stringify({
timeStamp: this.manualSignInfo.timeStamp,
encrypt: md5Str,
random: this.manualSignInfo.random,
});
},
makeupQrcode(){
const ref = this.$refs['manual_sign'];
if(this.currentBussinessInfo.needManuallySigned && ref) {
clearInterval(this.manualSignInfo.intervalId);
this.manualSignInfo.now = 0;
this.manualSignInfo.hint = '请在app上签名确认';
QRCode.toCanvas(ref,
this.makeupQrcodeUrl(),
{
margin: 0,
width: 150
},
(error) => {
if (error) {
kr.ui.error(error.message);
}
});
this.manualSignInfo.intervalId = setInterval(() => {
this.verifyQrcode();
}, 3000);
}
},
rewriteHandler() {
this.form = {
...this.form,
sign: null
};
async submit() {
const valid = await this.$refs[this.refName].validate();
if (valid) {
const data = JSON.parse(JSON.stringify(this.form));
Object.assign(data, this.dialogParams.additionalData);
this.$emit('confirmDialog', data);
this.$refs[this.refName].resetFields();
return data;
} else {
this.$message.warning('您还有未填写的信息');
}
},
},
mounted() {
this.$nextTick(() => {
if (this.currentBussinessInfo && this.currentBussinessInfo.needManuallySigned) {
this.makeupQrcode();
}
});
},
beforeDestroy() {
clearInterval(this.manualSignInfo.intervalId);
},
}
</script>