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.
469 lines
11 KiB
469 lines
11 KiB
<template>
|
|
<view class="page">
|
|
<navbar title="编辑模板" leftClick @leftClick="$utils.navigateBack" />
|
|
|
|
<view class="title">
|
|
<input type="text" placeholder="请输入标题" v-model="form.title"/>
|
|
</view>
|
|
|
|
<view style="padding: 25rpx;background-color: #fff;">
|
|
<canvas-drag ref="canvasRef"
|
|
id="canvas-drag" :graph="graph"
|
|
:width="width" :height="height"
|
|
@onDrawArrChange="onDrawArrChange"
|
|
enableUndo="true"></canvas-drag>
|
|
</view>
|
|
|
|
<view class="btn-list" v-if="imageArr.length > 0">
|
|
<view class="uni-color-btn" @tap="pro">上一页</view>
|
|
<view>{{ imagesIndex + 1 }}/{{ imageArr.length }}</view>
|
|
<view class="uni-color-btn" @tap="next">下一页</view>
|
|
</view>
|
|
<view class="btn-list">
|
|
<!-- <view class="uni-color-btn" @tap="onAddImage">新建签名</view> -->
|
|
<view class="uni-color-btn" @tap="onChangeBgImage">导入合同</view>
|
|
<view class="uni-color-btn" @tap="onUndo">后退</view>
|
|
<!-- <view class="uni-color-btn" @tap="onClearCanvas">清空</view> -->
|
|
<view class="uni-color-btn" @tap="submit">保存</view>
|
|
<!-- <view class="uni-color-btn" @tap="onExportJSON">导出模板</view> -->
|
|
<!-- <view class="uni-color-btn" @tap="onAddText">添加文字</view> -->
|
|
<view class="uni-color-btn" @tap="previewContract" v-if="form.template">预览合同</view>
|
|
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import canvasDrag from "../components/canvas-drag/index";
|
|
import setData from "../components/canvas-drag/setData.js";
|
|
import wxBase64src from '@/utils/wxBase64src.js'
|
|
export default {
|
|
components: {
|
|
canvasDrag
|
|
},
|
|
mixins : [setData],
|
|
data() {
|
|
return {
|
|
height: 750,
|
|
width: 700,
|
|
drawArr : {},
|
|
form : {
|
|
template : '',
|
|
employeePage : 0,//求职者(乙方)签字页码
|
|
employeePosition : '',//求职者(乙方)签字坐标
|
|
bossPage : 0,//招聘者(甲方)签字页码
|
|
bossPosition : '',//招聘者(甲方)签字坐标
|
|
title : '',
|
|
},
|
|
imagesIndex : 0,
|
|
imageArr : [],
|
|
id : 0,
|
|
}
|
|
},
|
|
onLoad({id}) {
|
|
// uni.request({
|
|
// url : 'http://192.168.1.5:5173/arr',
|
|
// method: 'GET',
|
|
// success : res => {
|
|
// this.imageArr = res.data
|
|
// this.onChangeBgImage()
|
|
// }
|
|
// })
|
|
|
|
this.id = id
|
|
this.getDetail()
|
|
},
|
|
mounted() {
|
|
console.log("mounted mounted mounted");
|
|
},
|
|
methods: {
|
|
// async pro(){
|
|
// if(this.imagesIndex == 0){
|
|
// uni.showToast({
|
|
// title: '已经是第一页了'
|
|
// })
|
|
// return
|
|
// }
|
|
// this.imagesIndex--
|
|
// await wxBase64src.unlink()
|
|
// this.changeBgImage()
|
|
// },
|
|
// async next(){
|
|
// if(this.imagesIndex == this.imageArr.length - 1){
|
|
// uni.showToast({
|
|
// title: '已经是最后一页了'
|
|
// })
|
|
// return
|
|
// }
|
|
// this.imagesIndex++
|
|
// await wxBase64src.unlink()
|
|
// this.changeBgImage()
|
|
// },
|
|
async pro(){
|
|
if(this.imagesIndex == 0){
|
|
uni.showToast({
|
|
title: '已经是第一页了'
|
|
})
|
|
return
|
|
}
|
|
this.imagesIndex--
|
|
await wxBase64src.unlink()
|
|
// 强制重新渲染canvas
|
|
this.$nextTick(async () => {
|
|
await this.changeBgImage()
|
|
})
|
|
},
|
|
async next(){
|
|
if(this.imagesIndex == this.imageArr.length - 1){
|
|
uni.showToast({
|
|
title: '已经是最后一页了'
|
|
})
|
|
return
|
|
}
|
|
this.imagesIndex++
|
|
await wxBase64src.unlink()
|
|
// 强制重新渲染canvas
|
|
this.$nextTick(async () => {
|
|
await this.changeBgImage()
|
|
})
|
|
},
|
|
// 预览合同
|
|
previewContract(){
|
|
uni.downloadFile({
|
|
url : this.form.template,
|
|
success : res => {
|
|
uni.openDocument({
|
|
filePath: res.tempFilePath,
|
|
})
|
|
}
|
|
})
|
|
},
|
|
// 签名位置更新时
|
|
onDrawArrChange(arr){
|
|
console.log(arr);
|
|
this.drawArr = arr
|
|
},
|
|
/**
|
|
* 添加签名位置
|
|
*/
|
|
onAddImage() {
|
|
// wx.chooseImage({
|
|
// success: res => {
|
|
// this.setData({
|
|
// graph: {
|
|
// w: 100,
|
|
// h: 50,
|
|
// type: 'image',
|
|
// url: res.tempFilePaths[0]
|
|
// }
|
|
// });
|
|
// }
|
|
// });
|
|
|
|
|
|
let a = {}
|
|
let b = {}
|
|
|
|
if(this.id){
|
|
a = JSON.parse(this.form.bossPosition)
|
|
b = JSON.parse(this.form.employeePosition)
|
|
|
|
for(let ak in a){
|
|
a[ak] = this.$utils.screenSystemInfoInt(a[ak]) - 0
|
|
}
|
|
for(let bk in b){
|
|
b[bk] = this.$utils.screenSystemInfoInt(b[bk]) - 0
|
|
}
|
|
|
|
console.log(a, b);
|
|
}
|
|
|
|
uni.getImageInfo({
|
|
src: this.configList.config_sign_a,
|
|
// src: 'https://img.teyizhao.com/2025-02-07/3d837c0e-91f4-4682-82d9-a04c2af737e8.png',
|
|
success : res => {
|
|
this.setData({
|
|
graph: {
|
|
id : 'a',
|
|
w: a.w || 100,
|
|
h: a.h || 50,
|
|
x: a.x || 30,
|
|
y: a.y || 30,
|
|
type: 'image',
|
|
url : res.path
|
|
}
|
|
});
|
|
},
|
|
fail(e) {
|
|
console.log(e);
|
|
}
|
|
})
|
|
|
|
uni.getImageInfo({
|
|
src: this.configList.config_sign_b,
|
|
// src: 'https://img.teyizhao.com/2025-02-07/af4786c0-7b62-4a86-a090-9f28eca3674a.png',
|
|
success : res => {
|
|
this.setData({
|
|
graph: {
|
|
id : 'b',
|
|
w: b.w || 100,
|
|
h: b.h || 50,
|
|
x: b.x || 160,
|
|
y: b.y || 30,
|
|
type: 'image',
|
|
url : res.path
|
|
}
|
|
});
|
|
},
|
|
fail(e) {
|
|
console.log(e);
|
|
}
|
|
})
|
|
|
|
},
|
|
|
|
/**
|
|
* 导入合同
|
|
*/
|
|
async onChangeBgImage() {
|
|
let self = this
|
|
|
|
let pdfUrl = await self.loadFDP()
|
|
|
|
this.form.template = pdfUrl
|
|
|
|
await this.pdf2imagebase64()
|
|
|
|
this.changeBgImage()
|
|
|
|
},
|
|
// async changeBgImage(){
|
|
// let self = this
|
|
|
|
// let src = await wxBase64src.base64src(this.imageArr[this.imagesIndex])
|
|
|
|
// uni.getImageInfo({
|
|
// src,
|
|
// success: image => {
|
|
// console.log(image);
|
|
|
|
// let allwh = image.height + image.width
|
|
// let imgw = (image.width / allwh).toFixed(2)
|
|
// let imgh = (image.height / allwh).toFixed(2)
|
|
|
|
// self.height = imgh * Math.ceil(this.width / imgw)
|
|
|
|
// self.$nextTick(() => {
|
|
// uni.hideLoading()
|
|
// this.$refs.canvasRef.changeBgImage(image.path)
|
|
// })
|
|
// },
|
|
// fail(err) {
|
|
// wxBase64src.unlink()
|
|
// console.log(err);
|
|
// }
|
|
// })
|
|
// },
|
|
async changeBgImage(){
|
|
let self = this
|
|
|
|
try {
|
|
uni.showLoading({
|
|
title: '加载中...'
|
|
})
|
|
|
|
let src = await wxBase64src.base64src(this.imageArr[this.imagesIndex])
|
|
|
|
const imageInfo = await new Promise((resolve, reject) => {
|
|
uni.getImageInfo({
|
|
src,
|
|
success: resolve,
|
|
fail: reject
|
|
})
|
|
})
|
|
|
|
let allwh = imageInfo.height + imageInfo.width
|
|
let imgw = (imageInfo.width / allwh).toFixed(2)
|
|
let imgh = (imageInfo.height / allwh).toFixed(2)
|
|
|
|
self.height = imgh * Math.ceil(this.width / imgw)
|
|
|
|
// 确保DOM更新后再更新canvas
|
|
await this.$nextTick()
|
|
// 先清空画布再设置新图片
|
|
// await this.$refs.canvasRef.clearCanvas()
|
|
await this.$refs.canvasRef.changeBgImage(imageInfo.path)
|
|
|
|
// 重新添加签名位置
|
|
// this.onAddImage()
|
|
|
|
} catch(err) {
|
|
console.error('changeBgImage error:', err)
|
|
wxBase64src.unlink()
|
|
} finally {
|
|
uni.hideLoading()
|
|
}
|
|
},
|
|
loadFDP(){
|
|
let that = this
|
|
return new Promise((success, error) => {
|
|
uni.chooseMessageFile({
|
|
count: 1, //一次可以上传多少个
|
|
type: 'file',
|
|
extension: ['.pdf'], //文件类型
|
|
success(res) {
|
|
// that.$Oss.ossUpload(res.tempFiles[0].path)
|
|
success(that.$Oss.ossUpload(res.tempFiles[0].path))
|
|
},
|
|
fail: (err) => {
|
|
error(err)
|
|
console.log(err, 'err');
|
|
}
|
|
});
|
|
})
|
|
},
|
|
// 后退
|
|
onUndo(event) {
|
|
this.$refs.canvasRef.undo();
|
|
},
|
|
/**
|
|
* 导出当前画布为模板
|
|
*/
|
|
onExportJSON() {
|
|
this.$refs.canvasRef.exportFun().then(imgArr => {
|
|
console.log(imgArr);
|
|
uni.previewImage({
|
|
urls: [imgArr],
|
|
current: 0,
|
|
})
|
|
}).catch(e => {
|
|
console.error(e);
|
|
});
|
|
},
|
|
/**
|
|
* 添加文本
|
|
*/
|
|
onAddText() {
|
|
this.setData({
|
|
graph: {
|
|
type: 'text',
|
|
text: 'helloworld'
|
|
}
|
|
});
|
|
},
|
|
|
|
onClearCanvas(event) {
|
|
let _this = this;
|
|
_this.setData({
|
|
canvasBg: null
|
|
});
|
|
this.$refs.canvasRef.clearCanvas();
|
|
},
|
|
async submit() {
|
|
|
|
if(this.$utils.verificationAll(this.form, {
|
|
title : '请输入标题',
|
|
})){
|
|
return
|
|
}
|
|
|
|
let bossPosition = {
|
|
// ...this.drawArr.a,
|
|
x : this.$utils.rpxSystemInfoInt(this.drawArr.a.x),
|
|
y : this.$utils.rpxSystemInfoInt(this.drawArr.a.y),
|
|
w : this.$utils.rpxSystemInfoInt(this.drawArr.a.w),
|
|
h : this.$utils.rpxSystemInfoInt(this.drawArr.a.h),
|
|
}
|
|
let employeePosition = {
|
|
// ...this.drawArr.b,
|
|
x : this.$utils.rpxSystemInfoInt(this.drawArr.b.x),
|
|
y : this.$utils.rpxSystemInfoInt(this.drawArr.b.y),
|
|
w : this.$utils.rpxSystemInfoInt(this.drawArr.b.w),
|
|
h : this.$utils.rpxSystemInfoInt(this.drawArr.b.h),
|
|
}
|
|
|
|
this.form.bossPosition = JSON.stringify(bossPosition)
|
|
this.form.employeePosition = JSON.stringify(employeePosition)
|
|
|
|
this.form.bossPage = this.imagesIndex
|
|
this.form.employeePage = this.imagesIndex
|
|
|
|
this.$api(this.id ? 'updateContractTemplate' :
|
|
'addContractTemplate', this.form).then(res => {
|
|
if(res.code == 200){
|
|
uni.navigateBack(-1)
|
|
}
|
|
})
|
|
},
|
|
// pdf转图片base64
|
|
async pdf2imagebase64(){
|
|
uni.showLoading({
|
|
title: '解析文档中...'
|
|
})
|
|
let res = await this.$api('pdf2imagebase64', {
|
|
pdfPath : this.form.template
|
|
})
|
|
this.imageArr = []
|
|
for(let key in res.result){
|
|
this.imageArr.push(res.result[key])
|
|
}
|
|
},
|
|
getDetail(){
|
|
if(!this.id){
|
|
this.onAddImage()
|
|
return
|
|
}
|
|
this.$api('queryContractTemplateById', {
|
|
contractTemplateId : this.id
|
|
}).then(async (res) => {
|
|
if(res.code == 200){
|
|
this.form = res.result
|
|
|
|
this.imagesIndex = this.form.employeePage
|
|
|
|
delete this.form.createBy
|
|
delete this.form.createTime
|
|
delete this.form.updateBy
|
|
delete this.form.updateTime
|
|
|
|
this.onAddImage()
|
|
|
|
await this.pdf2imagebase64()
|
|
|
|
this.changeBgImage()
|
|
}
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.page {
|
|
padding-bottom: 100rpx;
|
|
.title{
|
|
padding: 10rpx 30rpx;
|
|
background-color: #fff;
|
|
margin-bottom: 10rpx;
|
|
input{
|
|
padding: 20rpx;
|
|
background-color: rgba($uni-color, 0.1);
|
|
color: $uni-color;
|
|
border: 1rpx solid $uni-color;
|
|
border-radius: 10rpx;
|
|
}
|
|
}
|
|
.btn-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
padding: 20rpx;
|
|
gap: 30rpx;
|
|
justify-content: center;
|
|
.uni-color-btn {
|
|
margin: 0;
|
|
border-radius: 10rpx;
|
|
}
|
|
}
|
|
}
|
|
</style>
|