add

src/renderer/components/home.vue

@@ -46,7 +46,7 @@
 								<el-button style="margin-top: 8px;" type="danger" size="mini" icon="el-icon-s-home" circle @click="menuIndex=''"></el-button>
 							</div>
 							<div style="padding: 0 20px;">
-								<el-tabs v-model="menuIndex">
+								<el-tabs v-model="menuIndex" @tab-click="tabChange" :before-leave="tabBefore">
 									<el-tab-pane label="图片水印" name="1"></el-tab-pane>
 									<el-tab-pane label="PDF水印" name="2"></el-tab-pane>
 									<el-tab-pane label="视频水印" name="3"></el-tab-pane>
@@ -78,7 +78,7 @@
 						<div class="content-left">
 							<div class="table-scroll" @dragover.prevent @drop="handleDrop">
 								
-								<vxe-table fit v-show="menuIndex == '1'" show-overflow :show-header="false" align="center" height="100%" :row-config="{isCurrent: true, isHover: true, height: 100}"
+								<vxe-table ref="imgTable" fit v-show="menuIndex == '1'" show-overflow :show-header="false" align="center" height="100%" :row-config="{isCurrent: true, isHover: true, height: 100}"
 									border="outer" :data="imgList" @current-change="selectTab">
 									<vxe-column field="name" width="220" show-overflow>
 										<template #default="{ row, rowIndex }">
@@ -89,13 +89,13 @@
 													<p>大小:{{row.size}}</p>
 													<el-progress :percentage="row.percent"></el-progress>
 												</div>
-												<vxe-button style="position: absolute; top: 2px; right: -4px; display: none;" type="text" icon="vxe-icon-close" class="vxebtn-del" @click="delFile(rowIndex, $event)"></vxe-button>
+												<vxe-button type="text" icon="vxe-icon-close" class="vxebtn-del" @click="delFile(rowIndex, $event)"></vxe-button>
 											</div>
 										</template>
 									</vxe-column>
 								</vxe-table>
 								
-								<vxe-table fit v-show="menuIndex == '2'" show-overflow :show-header="false" align="center" height="100%" :row-config="{isCurrent: true, isHover: true, height: 100}"
+								<vxe-table ref="fileTable" fit v-show="menuIndex == '2'" show-overflow :show-header="false" align="center" height="100%" :row-config="{isCurrent: true, isHover: true, height: 100}"
 									border="outer" :data="fileList" @current-change="selectTab">
 									<vxe-column field="name" width="220" show-overflow>
 										<template #default="{ row, rowIndex }">
@@ -106,13 +106,13 @@
 													<p>大小:{{row.size}}</p>
 													<el-progress :percentage="row.percent"></el-progress>
 												</div>
-												<vxe-button style="position: absolute; top: 2px; right: -4px; display: none;" type="text" icon="vxe-icon-close" class="vxebtn-del" @click="delFile(rowIndex, $event)"></vxe-button>
+												<vxe-button type="text" icon="vxe-icon-close" class="vxebtn-del" @click="delFile(rowIndex, $event)"></vxe-button>
 											</div>
 										</template>
 									</vxe-column>
 								</vxe-table>
 								
-								<vxe-table fit v-show="menuIndex == '3'" show-overflow :show-header="false" align="center" height="100%" :row-config="{isCurrent: true, isHover: true, height: 100}"
+								<vxe-table ref="videoTable" fit v-show="menuIndex == '3'" show-overflow :show-header="false" align="center" height="100%" :row-config="{isCurrent: true, isHover: true, height: 100}"
 									border="outer" :data="videoList" @current-change="selectTab">
 									<vxe-column field="name" width="220" show-overflow>
 										<template #default="{ row, rowIndex }">
@@ -123,7 +123,7 @@
 													<p>大小:{{$utils.handleSize(row.size)}}</p>
 													<el-progress :percentage="row.percent"></el-progress>
 												</div>
-												<vxe-button style="position: absolute; top: 2px; right: -4px; display: none;" type="text" icon="vxe-icon-close" class="vxebtn-del" @click="delFile(rowIndex, $event)"></vxe-button>
+												<vxe-button type="text" icon="vxe-icon-close" class="vxebtn-del" @click="delFile(rowIndex, $event)"></vxe-button>
 											</div>
 										</template>
 									</vxe-column>
@@ -202,7 +202,7 @@
 								<i class="iconfont icon-shezhi"></i>效果预览 
 								<span style="color: #F56C6C; float: right;" v-if="menuIndex == '2'">仅作参考，请以实际为准！</span>
 								<el-button size="mini" type="info" style="position: absolute; right: 10px; top: 5px;" 
-								 @click="refreshVideo()" v-if="menuIndex == '3'">点击刷新预览</el-button>
+								 @click="refreshVideo()" v-if="menuIndex == '3'">刷新预览水印</el-button>
 							</div>
 							<div class="show-img" style="position:relative;overflow: hidden;" v-loading="imgLoading">
 								<img v-if="menuIndex == '3'" @click="playVideo()" src="../assets/image/play.png" class="play-icon" />
@@ -249,9 +249,12 @@
 									</div>
 									<div class="handle-item">
 										<label class="handle-label">文字字体：</label>
-										<el-select size="small" v-model="handleData.fonts" style="width:158px;" @change="handleImg">
+										<el-select size="small" v-model="handleData.fonts" style="width:128px;" @change="handleImg">
 											<el-option v-for="(item,key) in fonts" :value="item.path" :key="key" :label="item.name"></el-option>
 										</el-select>
+										<el-upload :style="{display: 'inline-block'}" action="/" :before-upload="getFontPath">
+											<vxe-button icon="vxe-icon-add" circle size="mini" title="导入自定义字体"></vxe-button>
+										</el-upload>
 										<vxe-button type="text" status="info" icon="vxe-icon-info-circle-fill" @click="$message({message:'文字为中文时，请选择中文字体！', type:'warning'})"></vxe-button>
 									</div>
 									<el-divider>水印位置</el-divider>
@@ -535,6 +538,7 @@ export default {
 
 			loadingTips: '',
 			execLimit: 5,
+			isChange: false,
 		};
 	},
 	mounted() {
@@ -681,7 +685,31 @@ export default {
 			}).catch(err => {
 				spinLoad.close();
 			});
-			
+		},
+		tabBefore(newName, oldName){
+			this.isChange = true;
+		},
+		// 菜单切换
+		tabChange(e){
+			if(this.isChange){
+				if(e.name == '1'){
+					if(this.imgList.length > 0){
+						this.$refs.imgTable.setCurrentRow(this.imgList[0]);
+						this.setDefaultImgInfo(this.imgList[0], 0);
+					}
+				}else if(e.name == '2'){
+					if(this.fileList.length > 0){
+						this.$refs.fileTable.setCurrentRow(this.fileList[0]);
+						this.setDefaultImgInfo(this.fileList[0], 0);
+					}
+				}else{
+					if(this.videoList.length > 0){
+						this.$refs.videoTable.setCurrentRow(this.videoList[0]);
+						this.setDefaultImgInfo(this.videoList[0], 0);
+					}
+				}
+				this.isChange = false;
+			}
 		},
 		async pickDir(){
 			const spinLoad = this.$loading();
@@ -750,17 +778,20 @@ export default {
 			setTimeout(() => {
 				if(this.menuIndex == '1'){
 					if(this.imgList[0]){
-						this.setDefaultImgInfo(this.imgList[0], 0)
+						this.$refs.imgTable.setCurrentRow(this.imgList[0]);
+						this.setDefaultImgInfo(this.imgList[0], 0);
 					}
 				}else if(this.menuIndex == '2'){
 					// 设置第一个为默认图片
 					if(this.fileList[0]){
-						this.setDefaultImgInfo(this.fileList[0], 0)
+						this.$refs.fileTable.setCurrentRow(this.fileList[0]);
+						this.setDefaultImgInfo(this.fileList[0], 0);
 					}
 				}else if(this.menuIndex == '3'){
 					// 设置第一个为默认图片
 					if(this.videoList[0]){
-						this.setDefaultImgInfo(this.videoList[0], 0)
+						this.$refs.videoTable.setCurrentRow(this.videoList[0]);
+						this.setDefaultImgInfo(this.videoList[0], 0);
 					}
 				}
 			}, 1000);
@@ -794,6 +825,8 @@ export default {
 		// 设置默认的图片
 		async setDefaultImgInfo(info, index){
 			let imgPath = info.path;
+			this.imgSrc = '';
+			this.imgLoading = true;
 			
 			if(this.menuIndex == '1'){
 				this.imgInfo = info;
@@ -1104,6 +1137,22 @@ export default {
 				electronApi.call('showItemInfolder',[newPath])
 			}
 		},
+		// 选择自定义字体
+		getFontPath(e){
+			if(e){
+				if(/[\u4e00-\u9fa5]/.test(e.path)){
+					this.$message({message: '字体路径中不能包含中文字符！', type: 'warning'});
+				}else{
+					this.$message({message: '自定义字体导入成功！', type: 'success'});
+					this.fonts.push({
+						name: e.name,
+						path: e.path
+					});
+					this.handleData.fonts = e.path;
+					this.handleImg();
+				}
+			}
+		},
 		// 选择水印图片
 		getImgPath(e) {
 		    if (e) {
@@ -1156,9 +1205,7 @@ export default {
 				this.dealImg();
 			}
 		},
-		// ############################################
-		// ############## pdf水印 ######################
-		// #############################################
+		//  pdf水印 
 		async dealPdf(index, pdf, path){
 			let buffer = await electronApi.fileStream(pdf.path);
 			
@@ -1171,6 +1218,8 @@ export default {
 				// 获取pdf第一页宽和高
 				pdf.width = pages[0].getWidth();
 				pdf.height = pages[0].getHeight();
+				
+				console.log(pdf.width, pdf.height);
 						
 				let task = '';
 				if (this.handleData.watermarkType == '1') { // 文字水印
@@ -1282,7 +1331,7 @@ export default {
 						// 系统水印
 						if (this.$refs.headerRef.authority.isAuthority) {
 						}else{ // 系统水印
-							let from = 'from:https://www.xingyousoft.com';
+							let from = 'https://www.xingyousoft.com';
 							item.drawText(from, {
 								x: pdfInfo.width/2 - (from.length*0.5*20)/2, // 出现的 x 轴坐标
 								y: pdfInfo.height/2, // 出现的 y 轴坐标
@@ -1358,7 +1407,7 @@ export default {
 						// 系统水印
 						if (this.$refs.headerRef.authority.isAuthority) {
 						}else{ // 系统水印
-							let from = 'from:https://www.xingyousoft.com';
+							let from = 'https://www.xingyousoft.com';
 							item.drawText(from, {
 								x: pdfInfo.width/2 - (from.length*0.5*20)/2, // 出现的 x 轴坐标
 								y: pdfInfo.height/2, // 出现的 y 轴坐标
@@ -2094,7 +2143,7 @@ export default {
 					fontSize,
 					'-background',
 					'none',
-					'label:from:https://www.xingyousoft.com',
+					'label:https://www.xingyousoft.com',
 					sysDefaultTmpPath
 				];
 		
@@ -2368,4 +2417,11 @@ export default {
 	.el-upload-list{
 		display: none;
 	}
+	
+	.vxebtn-del{
+		position: absolute !important;  
+		top: 2px; 
+		right: -4px; 
+		display: none;
+	}
 </style>