qiushang hai 1 ano
pai
achega
222a5487c1
Modificáronse 1 ficheiros con 94 adicións e 172 borrados
  1. 94 172
      src/renderer/components/home.vue

+ 94 - 172
src/renderer/components/home.vue

@@ -38,19 +38,19 @@
 								<p class="cmenu-title" id="menuIndex1">常用转换</p>
 								<el-row :gutter="30">
 									<el-col :span="8">
-										<div class="citem-nav bg-linear3" @click="changeMenu('epub-pdf')">
+										<div class="citem-nav bg-linear3" @click="changeMenu('1-1')">
 											<img src="../assets/image/pdf-word.png" class="citem-img" />
 											<p>PDF转WORD</p>
 										</div>
 									</el-col>
 									<el-col :span="8">
-										<div class="citem-nav bg-linear1" @click="changeMenu('mobi-pdf')">
+										<div class="citem-nav bg-linear1" @click="changeMenu('2-4')">
 											<img src="../assets/image/img-pdf.png" class="citem-img" />
 											<p>图片转pdf</p>
 										</div>
 									</el-col>
 									<el-col :span="8">
-										<div class="citem-nav bg-linear2" @click="changeMenu('azw3-docx')">
+										<div class="citem-nav bg-linear2" @click="changeMenu('3-5')">
 											<img src="../assets/image/a-compress.png" class="citem-img" />
 											<p>PDF压缩</p>
 										</div>
@@ -62,25 +62,25 @@
 								<p class="cmenu-title" id="menuIndex2">文件转PDF</p>
 								<el-row :gutter="30">
 									<el-col :span="4">
-										<div class="citem-nav" @click="changeMenu('epub-docx')">
+										<div class="citem-nav" @click="changeMenu('2-1')">
 											<img src="../assets/image/word-pdf.png" class="citem-img" />
 											<p>WORD转PDF</p>
 										</div>
 									</el-col>
 									<el-col :span="4">
-										<div class="citem-nav" @click="changeMenu('azw3-docx')">
+										<div class="citem-nav" @click="changeMenu('2-2')">
 											<img src="../assets/image/ppt-pdf.png" class="citem-img" />
 											<p>PPT转PDF</p>
 										</div>
 									</el-col>
 									<el-col :span="4">
-										<div class="citem-nav" @click="changeMenu('mobi-docx')">
+										<div class="citem-nav" @click="changeMenu('2-3')">
 											<img src="../assets/image/excel-pdf.png" class="citem-img" />
 											<p>EXCEL转PDF</p>
 										</div>
 									</el-col>
 									<el-col :span="4">
-										<div class="citem-nav" @click="changeMenu('fb2-docx')">
+										<div class="citem-nav" @click="changeMenu('2-4')">
 											<img src="../assets/image/img-pdf.png" class="citem-img" />
 											<p>图片转PDF</p>
 										</div>
@@ -92,37 +92,37 @@
 								<p class="cmenu-title" id="menuIndex3">PDF转文件</p>
 								<el-row :gutter="30">
 									<el-col :span="4">
-										<div class="citem-nav" @click="changeMenu('epub-pdf')">
+										<div class="citem-nav" @click="changeMenu('1-1')">
 											<img src="../assets/image/pdf-word.png" class="citem-img" />
 											<p>PDF转WORD</p>
 										</div>
 									</el-col>
 									<el-col :span="4">
-										<div class="citem-nav" @click="changeMenu('azw3-pdf')">
+										<div class="citem-nav" @click="changeMenu('1-2')">
 											<img src="../assets/image/pdf-ppt.png" class="citem-img" />
 											<p>PDF转PPT</p>
 										</div>
 									</el-col>
 									<el-col :span="4">
-										<div class="citem-nav" @click="changeMenu('mobi-pdf')">
+										<div class="citem-nav" @click="changeMenu('1-3')">
 											<img src="../assets/image/pdf-excel.png" class="citem-img" />
 											<p>PDF转EXCEL</p>
 										</div>
 									</el-col>
 									<el-col :span="4">
-										<div class="citem-nav" @click="changeMenu('fb2-pdf')">
+										<div class="citem-nav" @click="changeMenu('1-4')">
 											<img src="../assets/image/pdf-txt.png" class="citem-img" />
 											<p>PDF转TXT</p>
 										</div>
 									</el-col>
 									<el-col :span="4">
-										<div class="citem-nav" @click="changeMenu('fb2-pdf')">
+										<div class="citem-nav" @click="changeMenu('1-5')">
 											<img src="../assets/image/pdf-img.png" class="citem-img" />
 											<p>PDF转图片</p>
 										</div>
 									</el-col>
 									<el-col :span="4">
-										<div class="citem-nav" @click="changeMenu('fb2-pdf')">
+										<div class="citem-nav" @click="changeMenu('1-6')">
 											<img src="../assets/image/pdf-html.png" class="citem-img" />
 											<p>PDF转HTML</p>
 										</div>
@@ -134,25 +134,25 @@
 								<p class="cmenu-title" id="menuIndex4">PDF文件功能</p>
 								<el-row :gutter="30">
 									<el-col :span="6">
-										<div class="citem-nav" @click="changeMenu('epub-docx')">
+										<div class="citem-nav" @click="changeMenu('3-3')">
 											<img src="../assets/image/a-jiami.png" class="citem-img" />
 											<p>PDF加密</p>
 										</div>
 									</el-col>
 									<el-col :span="6">
-										<div class="citem-nav" @click="changeMenu('azw3-docx')">
+										<div class="citem-nav" @click="changeMenu('3-4')">
 											<img src="../assets/image/a-jiemi.png" class="citem-img" />
 											<p>PDF解密</p>
 										</div>
 									</el-col>
 									<el-col :span="6">
-										<div class="citem-nav" @click="changeMenu('mobi-docx')">
+										<div class="citem-nav" @click="changeMenu('3-2')">
 											<img src="../assets/image/a-hebing.png" class="citem-img" />
 											<p>PDF合并</p>
 										</div>
 									</el-col>
 									<el-col :span="6">
-										<div class="citem-nav" @click="changeMenu('fb2-docx')">
+										<div class="citem-nav" @click="changeMenu('3-1')">
 											<img src="../assets/image/a-feige.png" class="citem-img" />
 											<p>PDF分割</p>
 										</div>
@@ -162,25 +162,25 @@
 							<div class="cmenu-item">
 								<el-row :gutter="30">
 									<el-col :span="6">
-										<div class="citem-nav" @click="changeMenu('epub-docx')">
+										<div class="citem-nav" @click="changeMenu('3-5')">
 											<img src="../assets/image/a-compress.png" class="citem-img" />
 											<p>PDF压缩</p>
 										</div>
 									</el-col>
 									<el-col :span="6">
-										<div class="citem-nav" @click="changeMenu('azw3-docx')">
+										<div class="citem-nav" @click="changeMenu('3-6')">
 											<img src="../assets/image/a-page.png" class="citem-img" />
 											<p>PDF提取页面</p>
 										</div>
 									</el-col>
 									<el-col :span="6">
-										<div class="citem-nav" @click="changeMenu('mobi-docx')">
+										<div class="citem-nav" @click="changeMenu('3-7')">
 											<img src="../assets/image/a-img.png" class="citem-img" />
 											<p>PDF提取图片</p>
 										</div>
 									</el-col>
 									<el-col :span="6">
-										<div class="citem-nav" @click="changeMenu('fb2-docx')">
+										<div class="citem-nav" @click="changeMenu('3-8')">
 											<img src="../assets/image/a-del.png" class="citem-img" />
 											<p>PDF页面删除</p>
 										</div>
@@ -197,31 +197,31 @@
 										icon="el-icon-s-home" circle @click="activeName=''"></el-button>
 								</el-col>
 								<el-col :span="23" style="padding: 0 15px;">
-									<el-tabs v-model="activeName" v-if="activeName.split('-')[1] == 'pdf'">
-										<el-tab-pane label="WORD转PDF" name="epub-pdf"></el-tab-pane>
-										<el-tab-pane label="PPT转PDF" name="azw3-pdf"></el-tab-pane>
-										<el-tab-pane label="EXCEL转PDF" name="mobi-pdf"></el-tab-pane>
-										<el-tab-pane label="图片转PDF" name="fb2-pdf"></el-tab-pane>
+									<el-tabs v-model="activeName" v-if="activeName.split('-')[0] == '2'">
+										<el-tab-pane label="WORD转PDF" name="2-1"></el-tab-pane>
+										<el-tab-pane label="PPT转PDF" name="2-2"></el-tab-pane>
+										<el-tab-pane label="EXCEL转PDF" name="2-3"></el-tab-pane>
+										<el-tab-pane label="图片转PDF" name="2-4"></el-tab-pane>
 									</el-tabs>
 
-									<el-tabs v-model="activeName" v-if="activeName.split('-')[1] == 'docx'">
-										<el-tab-pane label="PDF转WORD" name="epub-docx"></el-tab-pane>
-										<el-tab-pane label="PDF转PPT" name="azw3-docx"></el-tab-pane>
-										<el-tab-pane label="PDF转EXCEL" name="mobi-docx"></el-tab-pane>
-										<el-tab-pane label="PDF转TXT" name="fb2-docx"></el-tab-pane>
-										<el-tab-pane label="PDF转图片" name="lrf-docx"></el-tab-pane>
-										<el-tab-pane label="PDF转HTML" name="rtf-docx"></el-tab-pane>
+									<el-tabs v-model="activeName" v-if="activeName.split('-')[0] == '1'">
+										<el-tab-pane label="PDF转WORD" name="1-1"></el-tab-pane>
+										<el-tab-pane label="PDF转PPT" name="1-2"></el-tab-pane>
+										<el-tab-pane label="PDF转EXCEL" name="1-3"></el-tab-pane>
+										<el-tab-pane label="PDF转TXT" name="1-4"></el-tab-pane>
+										<el-tab-pane label="PDF转图片" name="1-5"></el-tab-pane>
+										<el-tab-pane label="PDF转HTML" name="1-6"></el-tab-pane>
 									</el-tabs>
 
-									<el-tabs v-model="activeName" v-if="activeName.split('-')[1] == 'txt'">
-										<el-tab-pane label="PDF加密" name="epub-txt"></el-tab-pane>
-										<el-tab-pane label="PDF解密" name="azw3-txt"></el-tab-pane>
-										<el-tab-pane label="PDF合并" name="mobi-txt"></el-tab-pane>
-										<el-tab-pane label="PDF分割" name="fb2-txt"></el-tab-pane>
-										<el-tab-pane label="PDF压缩" name="lrf-txt"></el-tab-pane>
-										<el-tab-pane label="PDF提取页面" name="rtf-txt"></el-tab-pane>
-										<el-tab-pane label="PDF提取图片" name="tcr-txt"></el-tab-pane>
-										<el-tab-pane label="PDF页面删除" name="lit-txt"></el-tab-pane>
+									<el-tabs v-model="activeName" v-if="activeName.split('-')[0] == '3'">
+										<el-tab-pane label="PDF加密" name="3-3"></el-tab-pane>
+										<el-tab-pane label="PDF解密" name="3-4"></el-tab-pane>
+										<el-tab-pane label="PDF合并" name="3-2"></el-tab-pane>
+										<el-tab-pane label="PDF分割" name="3-1"></el-tab-pane>
+										<el-tab-pane label="PDF压缩" name="3-5"></el-tab-pane>
+										<el-tab-pane label="PDF提取页面" name="3-6"></el-tab-pane>
+										<el-tab-pane label="PDF提取图片" name="3-7"></el-tab-pane>
+										<el-tab-pane label="PDF页面删除" name="3-8"></el-tab-pane>
 									</el-tabs>
 								</el-col>
 							</el-row>
@@ -245,26 +245,22 @@
 								</div>
 							</div>
 
-							<div v-if="this[activeName.split('-')[0]+'List'].length == 0" class="upload-area">
-								<div class="file-area" @click="pickFile()" id="drag-compress">
+							<div v-if="activeName && this[listStr+'List'].length == 0" class="upload-area">
+								<div class="file-area" @click="pickFile()" @dragover.prevent @drop="handleDrop">
 									<img src="../assets/image/upload.png" style="width: 220px;"/>
 									<p style="font-size: 16px;">点击添加文件或拖拽文件到此</p>
-									<p style="font-size: 12px; color: #999;margin-top:15px;">支持以下电子书格式</p>
-									<p style="font-size: 12px; color: #999;">
-										EPUB/AZW3/MOBI/FB2/PDF/LRF/RTF/TCR/TXTZ/LIT/CAJ</p>
 									<p style="font-size: 12px; color: #666;margin-top:15px; font-weight: 600;">不支持win7和win7以下系统</p>
 								</div>
 							</div>
 
 							<div class="soft-content" v-else>
-								<div class="content-left" style="width: calc(100% - 260px);">
+								<div class="content-left">
 									<p class="title">
 										<i class="el-icon-notebook-2"></i>
 										文件列表
 										<span style="color: #F22C40;">{{ loadingTips }}</span>
 									</p>
-									<div class="table-scroll" id="drag-compress">
-										
+									<div class="table-scroll" @dragover.prevent @drop="handleDrop">
 										<vxe-table
 											show-overflow
 											class="img-table"
@@ -272,7 +268,7 @@
 											empty-text="没有更多数据了!"
 											:row-config="{isHover: true}"
 											:edit-config="{trigger: 'click', mode: 'cell'}"
-											:data="this[activeName.split('-')[0]+'List']"
+											:data="this[listStr + 'List']"
 											:scroll-y="{enabled: true}">
 											<vxe-column field="name" title="文件名"></vxe-column>
 											<vxe-column field="size" title="大小" width="120"></vxe-column>
@@ -290,79 +286,6 @@
 										
 									</div>
 								</div>
-								<div class="content-right" style="width: 250px;">
-									<div class="setting-area">
-										<p class="title">
-											<i class="el-icon-set-up"></i>  信息
-										</p>
-										<div class="img-handle">
-											<div class="handle-item" v-if="ebookInfo.name">
-												<label class="handle-label">文件:</label>
-												<label class="handle-desc">{{ ebookInfo.name}}</label>
-											</div>
-											<div class="handle-item"
-												v-if="ebookInfo.resInfo && ebookInfo.resInfo['title']">
-												<label class="handle-label">书名:</label>
-												<label
-													class="handle-desc">{{ ebookInfo.resInfo && ebookInfo.resInfo['title']}}</label>
-											</div>
-											<div class="handle-item" v-if="ebookInfo.type">
-												<label class="handle-label">格式:</label>
-												<label class="handle-desc">{{ ebookInfo.type }}</label>
-											</div>
-											<div class="handle-item" v-if="ebookInfo.size">
-												<label class="handle-label">大小:</label>
-												<label class="handle-desc">{{ ebookInfo.size }}</label>
-											</div>
-											<div class="handle-item"
-												v-if="ebookInfo.resInfo && ebookInfo.resInfo['author']">
-												<label class="handle-label">作者:</label>
-												<label
-													class="handle-desc">{{ ebookInfo.resInfo && ebookInfo.resInfo['author'] }}</label>
-											</div>
-											<div class="handle-item"
-												v-if="ebookInfo.resInfo && ebookInfo.resInfo['bookProducer']">
-												<label class="handle-label">出版商:</label>
-												<label
-													class="handle-desc">{{ ebookInfo.resInfo && ebookInfo.resInfo['bookProducer'] }}</label>
-											</div>
-											<div class="handle-item"
-												v-if="ebookInfo.resInfo && ebookInfo.resInfo['published']">
-												<label class="handle-label">出版时间:</label>
-												<label
-													class="handle-desc">{{ebookInfo.resInfo && ebookInfo.resInfo['published']}}</label>
-											</div>
-											<div class="handle-item"
-												v-if="ebookInfo.resInfo && ebookInfo.resInfo['languages']">
-												<label class="handle-label">语言:</label>
-												<label
-													class="handle-desc">{{ ebookInfo.resInfo && ebookInfo.resInfo['languages'] }}
-												</label>
-											</div>
-											<div class="handle-item"
-												v-if="ebookInfo.resInfo && ebookInfo.resInfo['comments']">
-												<label class="handle-label">评分:</label>
-												<label
-													class="handle-desc">{{ ebookInfo.resInfo && ebookInfo.resInfo['comments'] }}
-												</label>
-											</div>
-											<div class="handle-item"
-												v-if="ebookInfo.resInfo && ebookInfo.resInfo['tags']">
-												<label class="handle-label">标签:</label>
-												<label
-													class="handle-desc">{{ ebookInfo.resInfo && ebookInfo.resInfo['tags'] }}
-												</label>
-											</div>
-											<div class="handle-item"
-												v-if="ebookInfo.resInfo && ebookInfo.resInfo['identifiers']">
-												<label class="handle-label">标识符:</label>
-												<label
-													class="handle-desc">{{ ebookInfo.resInfo && ebookInfo.resInfo['identifiers'] }}
-												</label>
-											</div>
-										</div>
-									</div>
-								</div>
 							</div>
 						</template>
 
@@ -407,23 +330,15 @@
 				imgUrl: this.$api.imgUrl,
 				imgSrc: '',
 
-				fileList: [],
 				activeName: '',
-				epubList: [],
-				azw3List: [],
-				mobiList: [],
-				fb2List: [],
-				lrfList: [],
-				rtfList: [],
-				tcrList: [],
-				litList: [],
-				txtzList: [],
-				cajList: [],
-
-				ebookFormat: ['EPUB', 'AZW3', 'MOBI', 'FB2', 'LRF', 'RTF', 'TCR', 'LIT', 'TXTZ', 'CAJ'],
+				fileList: [], // 文件列表
+				wordList: [],
+				pptxList: [],
+				xlsxList: [],
+				imgList: [],
+				pdfList: [], //pdf压缩列表
 
 				ebookInfo: '',
-				fileFormat: ['EPUB', 'AZW3', 'MOBI', 'FB2', 'PDF', 'LRF', 'RTF', 'TCR', 'TXT', 'TXTZ', 'LIT'],
 
 				downloadDir: '', // 默认下载目录
 				handleData: {
@@ -450,6 +365,28 @@
 				exportLoading: false,
 			};
 		},
+		computed: {
+			listStr: function(){
+				let str = 'pdf';
+				if(this.activeName && this.activeName.split('-')[0] == '2'){
+					switch(this.activeName.split('-')[1]){
+						case '1':
+							str = 'word';
+							break;
+						case '2':
+							str = 'pptx';
+							break;
+						case '3':
+							str = 'xlsx';
+							break;
+						case '4':
+							str = 'img';
+							break;
+					}
+				}
+				return str;
+			}
+		},
 		async mounted() {
 			
 			this.tempPath = os.tmpdir();
@@ -481,27 +418,16 @@
 		},
 		methods: {
 			// 加载拖拽监听事件
-			initDrop() {
-				const dragWrapper = document.getElementById("drag-compress");
-				let domArr = [dragWrapper];
-				domArr.map(item => {
-					//添加拖拽事件监听器
-					item.addEventListener("drop", (e) => {
-						//阻止默认行为
-						e.preventDefault();
-						//获取文件列表
-						let files = e.dataTransfer.files;
-						let pathArr = [];
-						for (let i = 0; i < files.length; i++) {
-							pathArr.push(files[i].path);
-						}
-						this.pushFileToList(pathArr);
-					})
-					//阻止拖拽结束事件默认行为
-					item.addEventListener("dragover", (e) => {
-						e.preventDefault();
-					})
-				})
+			handleDrop() {
+				//阻止默认行为
+				e.preventDefault();
+				//获取文件列表
+				let files = e.dataTransfer.files;
+				let pathArr = [];
+				for(let i = 0; i < files.length; i++){
+					pathArr.push(files[i].path);
+				}
+				this.pushFileToList(pathArr);
 			},
 			// 删除列表文件
 			delFile(index){
@@ -528,10 +454,6 @@
 			},
 			changeMenu(name) {
 				this.activeName = name;
-				setTimeout(() => {
-					// 加载拖拽监听事件
-					this.initDrop();
-				}, 500)
 			},
 			// 选择目录
 			pickPath() {
@@ -592,7 +514,7 @@
 			// 添加文件
 			async pickFile(){
 				let str = 'pdf';
-				if(this.openNames[0] == '1' || this.openNames[0] == '3'){
+				if(this.activeName.split('-')[0] == '1' || this.activeName.split('-')[0] == '3'){
 					str = 'pdf';
 				} else {
 					switch(this.activeName){
@@ -611,19 +533,23 @@
 					}
 				}
 				
-				this.$Spin.show();
+				const spinLoad = this.$loading();
 				await electronApi.call('pickFile', [str, true]).then(async(files) =>{
 					if(files.length > 0){
 						this.pushFileToList(files);
 					}
-					this.$Spin.hide();
+					spinLoad.close();
+				}).catch(err => {
+					spinLoad.close();
 				});
 			},
 			async pickDir(){
-				this.$Spin.show();
+				const spinLoad = this.$loading();
 				await electronApi.call('pickDir', [os.userInfo().homedir]).then((path) =>{
 					this.dealDir(path);
-					this.$Spin.hide();
+					spinLoad.close();
+				}).catch(err => {
+					spinLoad.close();
 				});
 			},
 			dealDir(currentDirPath){
@@ -1534,10 +1460,6 @@
 		font-size: 12px;
 	}
 
-	.soft-content {
-		height: calc(100% - 118px);
-	}
-
 	.handle-label {
 		vertical-align: top;
 	}