You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
283 lines
7.9 KiB
283 lines
7.9 KiB
<template>
|
|
<view class="sign">
|
|
<!-- v-show="!signFlag" -->
|
|
<view style="position: relative;background-color: #fff;z-index:9;">
|
|
<navbar title="签字验收" :isCenter="true" :back="true"></navbar>
|
|
<u-parse :content="html"></u-parse>
|
|
|
|
|
|
<view class="submit" @click="gosign" v-if="signNum!=3">
|
|
签署
|
|
</view>
|
|
<view class="submit" @click="getReport" v-if="signNum==3">
|
|
查看报告
|
|
</view>
|
|
</view>
|
|
|
|
<view class="signContainer" :style="{zIndex:signFlag?999:-1,right:signFlag?0:'-9999rpx'}">
|
|
<view style="width:100%;height: calc(100vh - 100rpx);">
|
|
<l-signature disableScroll
|
|
backgroundColor="#fff"
|
|
ref="signatureRef"
|
|
:penColor="penColor"
|
|
:penSize="penSize"
|
|
:landscape="false"
|
|
:openSmooth="openSmooth" ></l-signature>
|
|
</view>
|
|
<view class="btnGroup">
|
|
<button @click="toolHandle('clear')">清空</button>
|
|
<button @click="toolHandle('undo')">撤消</button>
|
|
<button @click="toolHandle('save')">保存</button>
|
|
<button @click="signFlag=false">返回</button>
|
|
<!-- <button @click="toolHandle('openSmooth')">压感{{openSmooth?'开':'关'}}</button> -->
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import navbar from '@/components/navbar.vue';
|
|
import {getAcceptance,setSing} from '@/common/api.js'
|
|
import {getToken} from '@/common/auth.js'
|
|
|
|
export default {
|
|
components:{navbar},
|
|
data() {
|
|
return {
|
|
html:``,
|
|
list: [
|
|
|
|
],
|
|
id:null,
|
|
|
|
//签名
|
|
penColor:'#000000',
|
|
penSize:2,
|
|
openSmooth:true,
|
|
url:'',
|
|
signFlag:false,
|
|
signNum:0,
|
|
url1:null,
|
|
url2:null,
|
|
url3:null,
|
|
pdfUrl:''
|
|
}
|
|
},
|
|
methods:{
|
|
//签名
|
|
toolHandle(type) {
|
|
if(type == 'openSmooth') {
|
|
this.openSmooth = !this.openSmooth
|
|
return
|
|
}
|
|
if (type == 'save') {
|
|
this.$refs.signatureRef.canvasToTempFilePath({
|
|
success: (res) => {
|
|
// 是否为空画板 无签名
|
|
console.log(res.isEmpty)
|
|
// 生成图片的临时路径
|
|
// H5 生成的是base64
|
|
let url = res.tempFilePath;
|
|
uni.uploadFile({
|
|
url: this.baseUrl+'/api/common/upload', // 仅为示例，非真实的接口地址
|
|
filePath: url,
|
|
name: 'file',
|
|
formData: {
|
|
user: 'test',
|
|
token:getToken()
|
|
},
|
|
success: (res) => {
|
|
console.log(res,"uuu")
|
|
let urlInfo = JSON.parse(res.data)
|
|
let url = urlInfo.data.fullurl;
|
|
this.signNum++;
|
|
this.toolHandle('clear')
|
|
this.signFlag = false;
|
|
|
|
this.$nextTick(()=>{
|
|
if(this.signNum==1){
|
|
this.url1=url
|
|
this.setHtml(this.url1,this.url2,this.url3)
|
|
}else if(this.signNum==2){
|
|
this.url2=url
|
|
this.setHtml(this.url1,this.url2,this.url3)
|
|
}else{
|
|
this.url3=url
|
|
this.setHtml(this.url1,this.url2,this.url3)
|
|
}
|
|
// console.log(this.$refs,this.$refs[`sign${this.signNum}`])
|
|
// let url = `<img src="${this.url}" red="sign2"></img>`
|
|
|
|
// const query = uni.createSelectorQuery().in(this);
|
|
// query.select(`#sign${this.signNum}`).boundingClientRect(data => {
|
|
// console.log("得到布局位置信息" + JSON.stringify(data));
|
|
// }).exec();
|
|
// this.$refs[`sign${this.signNum}`].src=this.url;
|
|
|
|
// document.getElementById('sign'+signNum).src=this.url
|
|
})
|
|
},
|
|
fail: (res) => {
|
|
console.log(res,"rrr")
|
|
}
|
|
});
|
|
}
|
|
})
|
|
return
|
|
}
|
|
if (this.$refs.signatureRef)
|
|
this.$refs.signatureRef[type]()
|
|
},
|
|
getReport(){
|
|
uni.navigateTo({
|
|
url:'/pages/webview/webview?url='+this.pdfUrl
|
|
})
|
|
},
|
|
gosign(){
|
|
uni.pageScrollTo({
|
|
selector: ".cart-box",
|
|
scrollTop: 0
|
|
})
|
|
this.signFlag=true;
|
|
|
|
this.toolHandle('clear')
|
|
},
|
|
getAcceptance(){
|
|
getAcceptance({id:this.id,custom: { auth: true }}).then(res=>{
|
|
console.log(res,"55555")
|
|
this.list = res.data;
|
|
this.setHtml()
|
|
})
|
|
},
|
|
setHtml(img1,img2,img3){
|
|
let temp=`
|
|
${this.list.map((item,index)=>{
|
|
let intro = `${item.intro.map((p,i)=>{
|
|
return `<div>
|
|
<label :for="${p.name+i}">${p.name}</label>
|
|
<input type="checkbox" :checked="${p.checked}" :id="${p.name+i}">
|
|
</div>`
|
|
})}`
|
|
let result = `${item.result.map((m,n)=>{
|
|
return `<div>
|
|
<label :for="${m.name+n}">换热介质无腐蚀性,达标</label>
|
|
<input type="checkbox" :checked="${m.checked}" :id="${m.name+n}">
|
|
</div>`
|
|
})}`
|
|
let info;
|
|
if(index==0){
|
|
info = `<td style="text-align:center;" rowspan="${this.list.length}">
|
|
1、验收内容由审核人员勾选；2、照片由施工单位、供货单位提供，同时照片自动显示上传时间和地点；3、验收结果由验收审核人员填写
|
|
</td>`
|
|
}else{
|
|
info=``
|
|
}
|
|
|
|
return `
|
|
<tr>
|
|
<td style="text-align:center;">${index+1}</td>
|
|
<td style="text-align:center">${item.title}</td>
|
|
<td style="text-align:center;display: flex;flex-wrap: wrap;width:100px">
|
|
${intro}
|
|
</td>
|
|
<td style="text-align:center">
|
|
${result}
|
|
</td>
|
|
${info}
|
|
</tr>`
|
|
}).join('')}`
|
|
let html = `
|
|
<table id="example" cellspacing="0" width="100%" border="1">
|
|
<thead>
|
|
<tr>
|
|
<td style="text-align:center" colspan="6">“中科福德”热泵产品安装施工质量控制、验收报告</td>
|
|
</td>
|
|
</thead>
|
|
<tr>
|
|
<td style="text-align:center;width:30px">序号</td>
|
|
<td style="text-align:center">验收项</td>
|
|
<td style="text-align:center">验收内容</td>
|
|
<td style="text-align:center">审核评估结果</td>
|
|
<td style="text-align:center">说明</td>
|
|
</tr>
|
|
${temp}
|
|
<tr>
|
|
<td style="text-align:center" rowspan="3">10</td>
|
|
<td style="text-align:center;width:20%" colspan="2">调试人员签字</td>
|
|
<td style="text-align:center;width:30%">安装或者供货单位签字</td>
|
|
<td style="text-align:center;width:30%">审核验收人员签字</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="text-align:center;width:20%;" colspan="2"></td>
|
|
<td style="text-align:center;width:30%;height:100px"></td>
|
|
<td style="text-align:center;width:30%;height:100px">
|
|
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="text-align:center" colspan="4">日期和地理位置自动确认</td>
|
|
</tr>
|
|
</table>
|
|
<img class="td" style="position:absolute;bottom:120px;left:50px" src="${img1}" alt="14" height="50" width="100"/>
|
|
<img class="td" style="position:absolute;bottom:120px;left:180px" src="${img2}" alt="14" height="50" width="100"/>
|
|
<img class="td" style="position:absolute;bottom:120px;right:0px" src="${img3}" alt="14" height="50" width="100"/>`
|
|
this.html = html;
|
|
if(img1||img2||img3){
|
|
setSing({id:this.id,content:this.html}).then(res=>{
|
|
console.log(res,"55555")
|
|
this.pdfUrl = res.data.acceptance_file
|
|
|
|
})
|
|
|
|
}
|
|
},
|
|
|
|
},
|
|
onLoad(option){
|
|
console.log(option)
|
|
|
|
this.id = option.id;
|
|
this.getAcceptance()
|
|
},
|
|
/**
|
|
* 用户点击右上角分享
|
|
*/
|
|
onShareAppMessage: function () {
|
|
|
|
}
|
|
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.submit{
|
|
height: 98rpx;
|
|
background: #8EC31F;
|
|
line-height: 98rpx;
|
|
border-radius: 10rpx;
|
|
font-size: 30rpx;
|
|
font-family: Alibaba PuHuiTi;
|
|
font-weight: 400;
|
|
color: #FFFFFF;
|
|
text-align: center;
|
|
margin-top:40rpx;
|
|
}
|
|
.sign{
|
|
position:relative;
|
|
overflow: hidden;
|
|
.signContainer{
|
|
position: absolute;
|
|
bottom:0;
|
|
right:-9999rpx;
|
|
z-index:999;
|
|
width:100%;
|
|
height:100%;
|
|
background-color: #ffffff;
|
|
}
|
|
}
|
|
.btnGroup{
|
|
display: flex;
|
|
background-color: #ffffff;
|
|
height: 100rpx;
|
|
}
|
|
</style> |