add

src/renderer/assets/css/home.scss

@@ -142,17 +142,15 @@ div,p{
 
 .show-img {
   text-align: center;
-  width: 340px;
+  width: 100%;
   height: calc(100% - 37px);
   background: url(../assets/image/bgmini.png);
-  margin-bottom: 10px;
   display: flex;
   align-items: center;
 }
 
 .result-img {
-  max-width: 298px;
-  max-height: 200px;
+  max-width: 85%;
   align-items: center;
   margin: auto;
 }
@@ -252,7 +250,7 @@ div,p{
   justify-content: space-between;
   width: 100%;
   padding: 10px;
-  height: calc(100% - 250px);
+  height: calc(100% - 61px);
 }
 
 .img-footer-area{
@@ -287,12 +285,17 @@ div,p{
 }
 
 .content-left {
-  width: calc(100% - 350px);
+  width: 230px;
   background: #fff;
 }
 
+.content-center{
+	width: calc(100% - 600px);
+}
+
 .content-right {
-  width: 340px;
+	width: 340px;
+	background-color: #fff;
 }
 
 /* 底部 */

src/renderer/components/home.vue

@@ -53,6 +53,14 @@
 								</el-tabs>
 							</div>
 						</el-row>
+						<div >
+							<span>保存目录：</span>
+							<el-input :title="handleData.newPath" ref="upload-input" @focus="pickPath" placeholder="请选择输出目录" size="small" v-model="handleData.newPath" readonly style="width:180px;" prefix-icon="el-icon-folder"></el-input>
+							<el-popover placement="bottom" popper-class="popper-open" trigger="hover" content="打开保存目录">
+								<i class="el-icon-folder-opened" slot="reference" style="padding-left: 5px; cursor: pointer; font-size: 22px; vertical-align: middle;" @click="openFolder()"></i>
+							</el-popover>
+							<el-button type="danger" style="margin-left: 5px;" @click="exportFile()" :loading="exportLoading">开始处理</el-button>
+						</div>
 					</div>
 					
 					<div v-if="(menuIndex == '1' && imgList.length == 0) || (menuIndex == '2' && fileList.length == 0) || (menuIndex == '3' && videoList.length == 0)" class="upload-area">
@@ -71,23 +79,52 @@
 							<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}"
-									 :data="imgList" @cell-click="selectTabCrop">
+									border="outer" :data="imgList" @current-change="selectTab">
 									<vxe-column field="name" width="220" show-overflow>
 										<template #default="{ row, rowIndex }">
-											<div style="display: flex;flex-wrap: nowrap;justify-content: space-between; font-size: 14px;">
+											<div class="table-item">
 												<el-image style="width: 60px; height: 60px; background-color: #eee;" :src="row.path" fit="contain" :title="row.name"></el-image>
 												<div style="width: calc(100% - 60px);">
 													<p style="font-weight:600; padding: 0 5px; overflow: hidden;white-space: nowrap;text-overflow: ellipsis;" :title="row.name">{{row.name}}</p>
 													<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>
+											</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}"
+									border="outer" :data="fileList" @current-change="selectTab">
+									<vxe-column field="name" width="220" show-overflow>
+										<template #default="{ row, rowIndex }">
+											<div class="table-item">
+												<img src="../assets/image/w-pdf.png" style="width: 60px; height: 60px;"/>
+												<div style="width: calc(100% - 60px);">
+													<p style="font-weight:600; padding: 0 5px; overflow: hidden;white-space: nowrap;text-overflow: ellipsis;" :title="row.name">{{row.name}}</p>
+													<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>
+											</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}"
+									border="outer" :data="videoList" @current-change="selectTab">
+									<vxe-column field="name" width="220" show-overflow>
+										<template #default="{ row, rowIndex }">
+											<div class="table-item">
+												<img src="../assets/image/w-video.png" style="width: 60px; height: 60px;"/>
+												<div style="width: calc(100% - 60px);">
+													<p style="font-weight:600; padding: 0 5px; overflow: hidden;white-space: nowrap;text-overflow: ellipsis;" :title="row.name">{{row.name}}</p>
+													<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>
 											</div>
-											<!-- <vxe-button type="text" icon="vxe-icon-close" class="vxebtn-del" @click="delFile(rowIndex)"></vxe-button> -->
-											
-											<!-- <div class="img-mid-progress" v-if="row.percent > 0">
-												<el-progress :percentage="row.percent"></el-progress>
-											</div> -->
-											
 										</template>
 									</vxe-column>
 								</vxe-table>
@@ -116,7 +153,7 @@
 									</vxe-column>
 								</vxe-table> -->
 								
-								<vxe-table v-show="menuIndex == '2'"
+								<!-- <vxe-table v-show="menuIndex == '2'"
 									show-overflow class="img-table" max-height="100%" empty-text="没有更多数据了！" :loading="tabLoading"
 									:loading-config="{icon: 'vxe-icon-indicator roll', text: '文件加载中...'}" :row-config="{isHover: true}"
 									:edit-config="{trigger: 'click', mode: 'cell'}" :data="fileList" :scroll-y="{enabled: true}">
@@ -132,9 +169,9 @@
 											<i class="el-icon-delete cur-pointer" style="font-size: 20px;" @click="delFile(rowIndex)"></i>
 										</template>
 									</vxe-column>
-								</vxe-table>
+								</vxe-table> -->
 								
-								<vxe-table v-show="menuIndex == '3'"
+								<!-- <vxe-table v-show="menuIndex == '3'"
 									show-overflow class="img-table" max-height="100%" empty-text="没有更多数据了！" :loading="tabLoading"
 									:loading-config="{icon: 'vxe-icon-indicator roll', text: '文件加载中...'}" :row-config="{isHover: true}"
 									:edit-config="{trigger: 'click', mode: 'cell'}" :data="videoList" :scroll-y="{enabled: true}">
@@ -155,27 +192,25 @@
 											<i class="el-icon-delete cur-pointer" style="font-size: 20px;" @click="delVideoFile(rowIndex)"></i>
 										</template>
 									</vxe-column>
-								</vxe-table>
+								</vxe-table> -->
 								
 							</div>
 						</div>
 						
-						<div class="content-right">
-							<p class="title"><i class="iconfont icon-shezhi"></i>效果预览 <span style="color:red" v-if="menuIndex==2">仅作参考，请以实际为准！</span></p>
-							<div class="show-img" style="position:relative;overflow: hidden;">
-								<!-- <Spin v-if="imgLoading" fix>
-									<Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
-									<div>渲染中</div>
-								</Spin> -->
-								<img @click="menuIndex == 3 ? playVideo() : imgShow=true" class="result-img" :src="imgSrc" />
+						<div class="content-center">
+							<div class="title" style="position: relative;">
+								<i class="iconfont icon-shezhi"></i>效果预览 <span style="color: #F56C6C;" 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>
+							</div>
+							<div class="show-img" style="position:relative;overflow: hidden;" v-loading="imgLoading">
+								<img @click="menuIndex == '3' ? playVideo() : ''" class="result-img" :src="imgSrc" />
 							</div>
 						</div>
-					</div>
-					<!-- 底部设置区域 -->
-					<div class="img-footer-area" v-if="(menuIndex == '1' && imgList.length > 0) || (menuIndex == '2' && fileList.length > 0) || (menuIndex == '3' && videoList.length > 0)">
-						<div class="footer-line-between">
-							
-							<div class="handle-item">
+						
+						<div class="content-right">
+							<p class="title"><i class="iconfont icon-shezhi"></i>水印参数</p>
+							<div style="padding: 10px 15px; overflow: auto; height: calc(100% - 37px);">
 								<label class="handle-label">水印类型：</label>
 								<el-select size="small" v-model="handleData.watermarkType" style="width: 100px;">
 									<el-option value="1" label="文字水印"></el-option>
@@ -187,7 +222,9 @@
 									<el-option :value="3" v-if="this.menuIndex == '2' && this.handleData.watermarkType == '2'" label="多个"></el-option>
 								</el-select>
 								
+								<!-- 文字水印 -->
 								<template v-if="handleData.watermarkType == '1'">
+									<el-divider>水印样式</el-divider>
 									<div class="handle-item">
 										<label class="handle-label">文字内容：</label>
 										<el-input type="text" v-model="handleData.watermarkValue" size="small" placeholder="请输入文字水印内容" style="width:194px;" @blur="handleImg"></el-input>
@@ -199,196 +236,166 @@
 									</div>
 									<div class="handle-item">
 										<label class="handle-label">不透明度：</label>
-										<el-input-number size="small" v-model="handleData.watermarkImgOpactiy" @change="handleImg" :min="1" :max="100" :step="1" style="width: 120px;"></el-input-number> %
-									</div>
-								</template>
-								
-								<template v-if="handleData.watermarkType == '2'">
-									<div class="handle-item">
-										<label class="handle-label">上传图片：</label>
-										<el-upload :style="{display: 'inline-block'}" action="/" :before-upload="getImgPath">
-											<el-input type="text" readonly v-model="handleData.watermarkImgPath" size="small" style="width: 165px;" ></el-input>
-											<i class="el-icon-folder-opened open-folder" style="font-size:22px;"></i>
-										</el-upload>
-									</div>
-									<div class="handle-item">
-										<label class="handle-label">缩放比例：</label>
-										<el-input-number size="small" v-model="handleData.scaling" @change="handleImg" :step="1" :min="1" :max="200"></el-input-number>%
-									</div>
-									<div class="handle-item">
-										<label class="handle-label">不透明度：</label>
-										<el-input-number size="small" v-model="handleData.watermarkImgOpactiy" @change="handleImg" :step="1" :min="1" :max="100"></el-input-number>%
+										<el-input-number size="small" v-model="handleData.watermarkImgOpactiy" @change="handleImg" :min="1" :max="100" :step="1" style="width: 158px;"></el-input-number> %
 									</div>
-								</template>
-							</div>
-							
-							<!-- 第二列 -->
-							<div>
-								<!-- 文字水印 -->
-								<template v-if="handleData.watermarkType == '1'">
+									
 									<div class="handle-item" v-if="menuIndex != '3'">
 										<label class="handle-label">旋转角度：</label>
-										<el-input-number size="small" v-model="handleData.rotate" @change="handleImg" :step="1" style="width: 120px;"></el-input-number>
+										<el-input-number size="small" v-model="handleData.rotate" @change="handleImg" :step="1" style="width: 158px;"></el-input-number>
 									</div>
 									<div class="handle-item">
 										<label class="handle-label">文字字体：</label>
-										<el-select size="small" v-model="handleData.fonts" style="width:170px;" @change="handleImg">
+										<el-select size="small" v-model="handleData.fonts" style="width:158px;" @change="handleImg">
 											<el-option v-for="(item,key) in fonts" :value="item.path" :key="key" :label="item.name"></el-option>
 										</el-select>
 										<vxe-button type="text" status="info" icon="vxe-icon-info-circle-fill" @click="$message({message:'文字为中文时，请选择中文字体！', type:'warning'})"></vxe-button>
 									</div>
+									<el-divider>水印位置</el-divider>
 									<div class="handle-item">
 										<label class="handle-label">水印位置：</label>
 										<el-radio-group class="position-radio" v-model="handleData.watermarkPosition" :style="{width: '120px', color: '#fff'}" @change="handleImg">
 											<el-radio :disabled="handleData.watermarkStyle == 2 && handleData.watermarkType == '1'" :style="{margin: '2px 2px 2px 0', fontSize: 0}" v-for="key in watermarkPosition" :key="key" :label="key"></el-radio>
 										</el-radio-group>
-										<div style="display: inline-block;float: right;">
-											<div style="padding: 6px 0;">
-												<label class="">水平边距</label>
-												<el-input-number size="small" style="width: 120px;" v-model="handleData.watermarkX" @change="handleImg" ></el-input-number>
-											</div>
-											<div>
-												<label class="">垂直边距</label>
-												<el-input-number size="small" style="width: 120px;" v-model="handleData.watermarkY" @change="handleImg" ></el-input-number>
-											</div>
-										</div>
+									</div>
+									<div class="handle-item">
+										<label class="handle-label">水平边距：</label>
+										<el-input-number size="small" style="width: 158px;" v-model="handleData.watermarkX" @change="handleImg" ></el-input-number>
+									</div>
+									<div class="handle-item">
+										<label class="handle-label">垂直边距：</label>
+										<el-input-number size="small" style="width: 158px;" v-model="handleData.watermarkY" @change="handleImg" ></el-input-number>
 									</div>
 									
 									<template v-if="handleData.watermarkStyle == 2 && menuIndex != '3'">
+										<el-divider>水印密度</el-divider>
 										<div class="handle-item" style="overflow: hidden;">
-											<label class="handle-label">水印密度：</label>
-											<div class="line-density">
-												<label class="density-label">行数</label>
-												<el-input-number size="small" style="width: 120px;margin-right: 4px;" v-model="handleData.watermarkDensityY" @change="handleImg" :step="1" :min="1"></el-input-number>
-												<label class="density-label">列数</label>
-												<el-input-number size="small" style="width: 120px;" v-model="handleData.watermarkDensityX" @change="handleImg" :step="1" :min="1"></el-input-number>
-											</div>
+											<label class="density-label">水印行数：</label>
+											<el-input-number size="small" style="width: 158px;margin-right: 4px;" v-model="handleData.watermarkDensityY" @change="handleImg" :step="1" :min="1"></el-input-number>
+										</div>
+										<div class="handle-item" style="overflow: hidden;">
+											<label class="density-label">水印列数：</label>
+											<el-input-number size="small" style="width: 158px;" v-model="handleData.watermarkDensityX" @change="handleImg" :step="1" :min="1"></el-input-number>
 										</div>
 									</template>
 									<template v-if="menuIndex == '3'">
-										<div class="handle-item" style="overflow: hidden;">
+										<div class="handle-item">
 											<label class="handle-label">动态滚动：</label>
-											<div class="line-density" style="vertical-align:middle">
-												<label class="density-label">方向</label>
-												<el-select size="small" v-model="handleData.direction" style="width:140px;" @change="handleImg">
-													<el-option value="0" label="无"></el-option>
-													<el-option value="left2right" label="从左往右"></el-option>
-													<el-option value="right2left" label="从右往左"></el-option>
-													<el-option value="top2bottom" label="从上往下"></el-option>
-													<el-option value="bottom2top" label="从下往上"></el-option>
-												</el-select>
-												<template v-if="handleData.direction != 0">
-													<div style="margin-top: 5px;">
-														<label class="density-label">速度</label>
-														<el-input-number size="small" v-model="handleData.speed" @change="handleImg" :step="1" :min="1" style="width: 60px;"></el-input-number>
-													</div>
-												</template>
-											</div>
+											<el-select size="small" v-model="handleData.direction" style="width: 158px;" @change="handleImg">
+												<el-option value="0" label="无"></el-option>
+												<el-option value="left2right" label="从左往右"></el-option>
+												<el-option value="right2left" label="从右往左"></el-option>
+												<el-option value="top2bottom" label="从上往下"></el-option>
+												<el-option value="bottom2top" label="从下往上"></el-option>
+											</el-select>
+										</div>
+										<div class="handle-item" v-if="handleData.direction != 0">
+											<label class="handle-label">滚动速度：</label>
+											<el-input-number size="small" v-model="handleData.speed" @change="handleImg" :step="1" :min="1" style="width: 158px;"></el-input-number>
 										</div>
 									</template>
 								</template>
 								
 								<!-- 图片水印 -->
 								<template v-if="handleData.watermarkType == '2'">
-									<div class="handle-item" v-if="handleData.watermarkType == '2' && menuIndex != '3'">
-										<label class="handle-label">旋转角度：</label>
-										<el-input-number size="small" v-model="handleData.rotate" @change="handleImg" :step="1"></el-input-number>
-									</div>
+									<el-divider>水印样式</el-divider>
 									<div class="handle-item">
-										<label class="handle-label">水印位置1：</label>
-										<el-radio-group class="position-radio" v-model="handleData.watermarkPosition" :style="{width: '120px', color: '#fff'}" @change="handleImg">
-											<el-radio :disabled="handleData.watermarkStyle == 2 && handleData.watermarkType == '1'" :style="{margin: '2px 2px 2px 0', fontSize: 0}" v-for="key in watermarkPosition" :key="key" :label="key"></el-radio>
-										</el-radio-group>
-										<div style="display: inline-block;float: right;">
-											<div style="padding: 6px 0;">
-												<label class="">水平边距</label>
-												<el-input-number size="small" style="width: 120px;" v-model="handleData.watermarkX" @change="handleImg" ></el-input-number>
-											</div>
-											<div>
-												<label class="">垂直边距</label>
-												<el-input-number size="small" style="width: 120px;" v-model="handleData.watermarkY" @change="handleImg" ></el-input-number>
-											</div>
-										</div>
-									</div>
-									
-									<template v-if="handleData.watermarkStyle == 2 && menuIndex != '3'">
-										<div class="handle-item">
-											<label class="handle-label">水印密度：</label>
-											<div class="line-density">
-												<label class="density-label">行数</label>
-												<el-input-number size="small" style="width: 120px;" v-model="handleData.watermarkDensityY" :step="1" :min="1" @change="handleImg" ></el-input-number>
-												<label class="density-label">列数</label>
-												<el-input-number size="small" style="width: 120px;" v-model="handleData.watermarkDensityX" :step="1" :min="1" @change="handleImg" ></el-input-number>
-											</div>
-										</div>
-									</template>
-								</template>
-								
-							</div>
-							
-							
-							
-							
-							<!-- 多个水印 -->
-							<template v-if="this.menuIndex == '2' && this.handleData.watermarkType == '2' && this.handleData.watermarkStyle == 3" >
-								<div v-for="(item, index) in watermarkImgList" :key="index">
-									<div class="handle-title">第{{index+2}}张水印信息 <Button size="small" type="error" @click="delWatermark(index)">删除</Button></div>
-									<div class="handle-item" @click="waterMoreIndex = index">
 										<label class="handle-label">上传图片：</label>
-										<el-upload :style="{display: 'inline-block'}" action="/" :before-upload="getImgPathMore">
-											<el-input type="text" readonly v-model="item.watermarkImgPath" size="small" style="width:140px;" ></el-input>
+										<el-upload :style="{display: 'inline-block'}" action="/" :before-upload="getImgPath">
+											<el-input type="text" readonly v-model="handleData.watermarkImgPath" size="small" style="width: 165px;" ></el-input>
 											<i class="el-icon-folder-opened open-folder" style="font-size:22px;"></i>
 										</el-upload>
 									</div>
 									<div class="handle-item">
 										<label class="handle-label">缩放比例：</label>
-										<el-input-number size="small" style="width: 120px;" v-model="item.scaling" @change="handleImg" :step="1" :min="1" :max="200"></el-input-number>%
+										<el-input-number size="small" style="width: 158px;" v-model="handleData.scaling" @change="handleImg" :step="1" :min="1" :max="200"></el-input-number> %
 									</div>
 									<div class="handle-item">
 										<label class="handle-label">不透明度：</label>
-										<el-input-number size="small" style="width: 120px;" v-model="item.watermarkImgOpactiy" @change="handleImg" :step="1" :min="1" :max="100"></el-input-number>%
+										<el-input-number size="small" style="width: 158px;" v-model="handleData.watermarkImgOpactiy" @change="handleImg" :step="1" :min="1" :max="100"></el-input-number> %
 									</div>
-									
-									<div class="handle-item">
+									<div class="handle-item" v-if="handleData.watermarkType == '2' && menuIndex != '3'">
 										<label class="handle-label">旋转角度：</label>
-										<el-input-number size="small" v-model="item.rotate" @change="handleImg"></el-input-number>
+										<el-input-number size="small" style="width: 158px;" v-model="handleData.rotate" @change="handleImg" :step="1"></el-input-number>
 									</div>
+									
+									<el-divider>水印位置</el-divider>
 									<div class="handle-item">
 										<label class="handle-label">水印位置：</label>
-										<el-radio-group class="position-radio" v-model="item.watermarkPosition" :style="{width: '120px', color: '#fff'}" @change="handleImg">
-											<el-radio :style="{margin: '2px 2px 2px 0', fontSize: 0}" v-for="key in watermarkPosition" :key="key" :label="key"></el-radio>
+										<el-radio-group class="position-radio" v-model="handleData.watermarkPosition" :style="{width: '120px', color: '#fff'}" @change="handleImg">
+											<el-radio :disabled="handleData.watermarkStyle == 2 && handleData.watermarkType == '1'" :style="{margin: '2px 2px 2px 0', fontSize: 0}" v-for="key in watermarkPosition" :key="key" :label="key"></el-radio>
 										</el-radio-group>
-										<div style="display: inline-block;float: right;">
-											<div style="padding: 6px 0;">
-												<label class="">水平边距</label>
-												<el-input-number size="small" style="width: 120px;" v-model="item.watermarkX" @change="handleImg"></el-input-number>
-											</div>
-											<div>
-												<label class="">垂直边距</label>
-												<el-input-number size="small" style="width: 120px;" v-model="item.watermarkY" @change="handleImg"></el-input-number>
-											</div>
+									</div>
+									<div class="handle-item">
+										<label class="handle-label">水平边距：</label>
+										<el-input-number size="small" style="width: 158px;" v-model="handleData.watermarkX" @change="handleImg" ></el-input-number>
+									</div>
+									<div class="handle-item">
+										<label class="handle-label">垂直边距：</label>
+										<el-input-number size="small" style="width: 158px;" v-model="handleData.watermarkY" @change="handleImg" ></el-input-number>
+									</div>
+									
+									<template v-if="handleData.watermarkStyle == 2 && menuIndex != '3'">
+										<el-divider>水印密度</el-divider>
+										<div class="handle-item">
+											<label class="handle-label">水印列数：</label>
+											<el-input-number size="small" style="width: 158px;" v-model="handleData.watermarkDensityX" :step="1" :min="1" @change="handleImg" ></el-input-number>
+										</div>
+										<div class="handle-item">
+											<label class="handle-label">水印行数：</label>
+											<el-input-number size="small" style="width: 158px;" v-model="handleData.watermarkDensityY" :step="1" :min="1" @change="handleImg" ></el-input-number>
+										</div>
+									</template>
+								</template>
+								
+								<!-- 多个水印 -->
+								<template v-if="this.menuIndex == '2' && this.handleData.watermarkType == '2' && this.handleData.watermarkStyle == 3" >
+									<div v-for="(item, index) in watermarkImgList" :key="index">
+										<div class="handle-title">第{{index+2}}张水印信息 <Button size="small" type="error" @click="delWatermark(index)">删除</Button></div>
+										<div class="handle-item" @click="waterMoreIndex = index">
+											<label class="handle-label">上传图片：</label>
+											<el-upload :style="{display: 'inline-block'}" action="/" :before-upload="getImgPathMore">
+												<el-input type="text" readonly v-model="item.watermarkImgPath" size="small" style="width:140px;" ></el-input>
+												<i class="el-icon-folder-opened open-folder" style="font-size:22px;"></i>
+											</el-upload>
+										</div>
+										<div class="handle-item">
+											<label class="handle-label">缩放比例：</label>
+											<el-input-number size="small" style="width: 158px;" v-model="item.scaling" @change="handleImg" :step="1" :min="1" :max="200"></el-input-number>%
+										</div>
+										<div class="handle-item">
+											<label class="handle-label">不透明度：</label>
+											<el-input-number size="small" style="width: 158px;" v-model="item.watermarkImgOpactiy" @change="handleImg" :step="1" :min="1" :max="100"></el-input-number>%
+										</div>
+										<div class="handle-item">
+											<label class="handle-label">旋转角度：</label>
+											<el-input-number size="small" v-model="item.rotate" @change="handleImg"></el-input-number>
+										</div>
+										
+										<div class="handle-item">
+											<label class="handle-label">水印位置：</label>
+											<el-radio-group class="position-radio" v-model="item.watermarkPosition" :style="{width: '120px', color: '#fff'}" @change="handleImg">
+												<el-radio :style="{margin: '2px 2px 2px 0', fontSize: 0}" v-for="key in watermarkPosition" :key="key" :label="key"></el-radio>
+											</el-radio-group>
+										</div>
+										<div class="handle-item">
+											<label class="">水平边距</label>
+											<el-input-number size="small" style="width: 158px;" v-model="item.watermarkX" @change="handleImg"></el-input-number>
+										</div>
+										<div class="handle-item">
+											<label class="">垂直边距</label>
+											<el-input-number size="small" style="width: 158px;" v-model="item.watermarkY" @change="handleImg"></el-input-number>
 										</div>
 									</div>
-								</div>
+									
+									<div style="text-align: center; margin: 10px 0;">
+										<el-button @click="moreImgWater()">添加一张水印图片</el-button>
+									</div>
+								</template>
 								
-								<div style="text-align: center; margin: 10px 0;">
-									<el-button @click="moreImgWater()">添加一张水印图片</el-button>
-								</div>
-							</template>
-							
-
-							<div>
-								<span>保存目录：</span>
-								<el-input :title="handleData.newPath" ref="upload-input" @focus="pickPath" placeholder="请选择输出目录" size="small" v-model="handleData.newPath" readonly style="width:180px;" prefix-icon="el-icon-folder"></el-input>
-								<el-popover placement="bottom" popper-class="popper-open" trigger="hover" content="打开保存目录">
-									<i class="el-icon-folder-opened" slot="reference" style="padding-left: 5px; cursor: pointer; font-size: 22px; vertical-align: middle;" @click="openFolder()"></i>
-								</el-popover>
-								<div>
-									<el-button type="danger" style="margin-left: 20px;" @click="exportFile()" :loading="exportLoading">开始处理</el-button>
-								</div>
 							</div>
 						</div>
 					</div>
+					
 				</template>
 				
 				<!-- 合并进度 -->
@@ -511,6 +518,9 @@ export default {
 			watermarkPosition:['NorthWest','North','NorthEast','West','Center','East','SouthWest','South','SouthEast'],
 			watermarkImgList: [], // pdf多张水印图片
 			waterMoreIndex: -1,
+			sysDefaultTmpPath:'', // 系统水印路径
+			previewTmpPath:'', // 预览图片路径
+			imgLoading: false,
 
 			dowloadModel: false,
 			finishModel: false,
@@ -533,6 +543,11 @@ export default {
  			this.downloadDir = __dirname + separator + "Downloads"
 		}
 		this.handleData.newPath = this.downloadDir;
+		this.previewTmpPath = os.tmpdir()+separator+'preview.png';
+		
+		document.addEventListener("mousemove", e => {
+			e.preventDefault()
+		});
 
 		// 打开浏览器
 		const links = document.querySelectorAll('a[href]');
@@ -583,6 +598,25 @@ export default {
 			}
 			electronApi.call('showItemInfolder',[path+'\\xy.xy'])
 		},
+		// 删除列表文件
+		delFile(index, event){
+			event.$event.stopPropagation();
+			this.$confirm('确认删除此文件吗?', '提示', {
+				confirmButtonText: '确定',
+				cancelButtonText: '取消',
+				type: 'warning'
+			}).then(() => {
+				if(this.menuIndex == '1'){
+					this.imgList.splice(index, 1);
+				}else if(this.menuIndex == '2'){
+					this.fileList.splice(index, 1);
+				}else{
+					this.videoList.splice(index, 1);
+				}
+			}).catch(() => {
+					  
+			});
+		},
 		// 清除列表
 		clearList() {
 			if(this.menuIndex == '1'){
@@ -751,9 +785,9 @@ export default {
 				// this.imgInfo.path = imgPath;
 			}else if(this.menuIndex == '2'){
 				// 背景路径
-				let bgPath = __dirname + '/../../../app.asar.unpacked/bin/pdf-bg.png';
+				let bgPath = pathMod.join(__dirname, '/../../../app.asar.unpacked/bin/pdf-bg.png');
 				if(process.env.NODE_ENV == "development"){ // 开发运行
-					bgPath = __dirname + '/../../../bin/pdf-bg.png';
+					bgPath = pathMod.join(__dirname, '/../../../bin/pdf-bg.png');
 				}
 				
 				this.imgInfo = {
@@ -766,19 +800,24 @@ export default {
 		
 				this.dealImg(index);
 			}
-		
-			electronApi.fileStream(imgPath).then(buffer => {
+			
+			await electronApi.fileStream(imgPath).then(buffer => {
 				this.imgSrc = "data:image/png;base64,"+buffer.toString('base64');
 				this.imgLoading = false;
 			}).catch(err => {
 				this.imgLoading = false;
 			})
 		},
+		refreshVideo(){
+			this.imgLoading = true;
+			let index = this.currentRowIndex ? this.currentRowIndex : 0;
+			this.setDefaultImgInfo(this.videoList[index], index);
+		},
 		// 选择列表
-		async selectTab(currentRow, index) {
-			this.currentRowIndex = index;
+		selectTab({row, rowIndex}) {
+			this.currentRowIndex = rowIndex;
 			this.imgLoading = true;
-			this.setDefaultImgInfo(currentRow,index);
+			this.setDefaultImgInfo(row, rowIndex);
 		},
 		inputPdf(fileInfo){
 			if(!fileInfo.type){
@@ -2256,4 +2295,31 @@ export default {
 			margin: 8px 20px 8px 0 !important;
 		}
 	}
+	
+	.table-item{
+		position: relative;
+		display: flex;
+		flex-wrap: nowrap;
+		justify-content: space-between; 
+		font-size: 14px;
+		padding: 10px 0; 
+		border:1px solid #eee;
+		background: #fff !important; 
+		border-radius: 5px;
+	}
+	
+	.row--hover{
+		.table-item{
+			border: 2px solid #409EFF;
+		}
+		.vxebtn-del{
+			display: block !important;
+		}
+	}
+	
+	.row--current{
+		.table-item{
+			border: 2px solid #409EFF;
+		}
+	}
 </style>

src/renderer/utils/electronApi.js

@@ -118,6 +118,7 @@ window.electron_api = {
         });
     },
     fileStream(path) {
+		console.log(path);
         let bufferArr = [];
         let rs = fs.createReadStream(path);