recruitment-wechat-uniapp-241012/pages_order/contract/contractManageEdit.vue

<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;">
			<!-- 没有模板时的提示 -->
			<view v-if="!form.template || imageArr.length === 0" class="no-template-tip">
				<text>请先点击"导入合同"按钮上传PDF合同模板</text>
			</view>
			
			<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 || 40,
								h: a.h || 20,
								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 || 40,
								h: b.h || 20,
								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限制，改为后续检查文件类型
						success(res) {
							const file = res.tempFiles[0]
							const fileName = file.name || ''
							const fileExtension = fileName.toLowerCase().split('.').pop()
							
							// 检查文件类型
							if (fileExtension !== 'pdf') {
								uni.showToast({
									title: '只能上传PDF文件，请重新选择',
									icon: 'none',
									duration: 3000
								})
								error(new Error('文件类型不正确'))
								return
							}
							
							// 文件类型正确，继续上传
							success(that.$Oss.ossUpload(file.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;
			}
		}
		.no-template-tip {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 300rpx;
			background-color: #f8f9fa;
			border: 2rpx dashed #ddd;
			border-radius: 10rpx;
			margin-bottom: 20rpx;
			text {
				color: #999;
				font-size: 28rpx;
				text-align: center;
			}
		}
		.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>