|
|
@@ -4,9 +4,9 @@
|
|
|
<img src="http://cn-file.17pdf.com/website/common/ic_notice.svg" class="align-middle">
|
|
|
<div class="text-container">
|
|
|
<span class="text">
|
|
|
- 转档后的文件支持在云端保留24小时，<span v-if="userInfo?.memberInfo.subscriberType === 1">会员尊享5G容量，</span>请在24小时内下载文件至本地永久保存
|
|
|
+ 转档后的文件支持在云端保留24小时，<span v-if="userInfo.memberInfo.subscriberType === 1">会员尊享5G容量，</span>请在24小时内下载文件至本地永久保存
|
|
|
</span>
|
|
|
- <span v-if="userInfo?.memberInfo.subscriberType === 1" class="vip tip">
|
|
|
+ <span v-if="userInfo.memberInfo.subscriberType === 1" class="vip tip">
|
|
|
<img src="http://cn-file.17pdf.com/website/common/ic_info.svg" alt="">
|
|
|
<div class="tip-text">
|
|
|
若已有文件大小超出5G，将按转档时间计算（从最近一次转档往过去推算），即保留最近的5G容量文件，超出部分文件将不再保留
|
|
|
@@ -32,7 +32,7 @@
|
|
|
</button>
|
|
|
<div class="recharge py-0 px-[10%] h-48px mx-0 mt-24px mb-14px absolute right-0 -top-70px z-2">
|
|
|
<span class="recharge-btn float-right bg-white border border-[#ff4f4f] boder-solid text-16px py-7px px-18px rounded-4px mt-4px cursor-pointer hover:bg-[#ff4f4f]">
|
|
|
- <a class="text-[#ff4f4f] no-underline leading-normal">充值</a>
|
|
|
+ <a class="text-[#ff4f4f] no-underline leading-normal" @click="handlerBuy('ticket')">充值</a>
|
|
|
</span>
|
|
|
<div class="need-volume float-right right-48px text-16px text-[#666] leading-48px mr-20px">
|
|
|
所需券：<span class="text-[#0dd299] text-16px" :class="{'text-red-500': requiredCoupon > userInfo.memberInfo.points}">{{ requiredCoupon }}券</span> / 剩余券：<span class="text-[#0dd299] text-16px">{{ userInfo.memberInfo.points }}券</span>
|
|
|
@@ -53,29 +53,25 @@
|
|
|
<table class="table table-hover w-[100%] max-w-[100%]" id="table-fileinput">
|
|
|
<thead v-show="fileList.length > 0">
|
|
|
<tr class="h-40px bg-[#eee]">
|
|
|
- <th></th>
|
|
|
- <th class="!text-left">文档名</th>
|
|
|
- <th>大小</th>
|
|
|
- <th>所需券</th>
|
|
|
- <th>转为</th>
|
|
|
- <th>状态</th>
|
|
|
- <th class="uploading_status hidden">状态</th>
|
|
|
- <th></th>
|
|
|
+ <th class="!w-[5.5%]"></th>
|
|
|
+ <th class="!text-left w-[26.5%]">文档名</th>
|
|
|
+ <th class="!w-[17%]">大小</th>
|
|
|
+ <th class="!w-[13%]">所需券</th>
|
|
|
+ <th class="!w-[9.5%]">转为</th>
|
|
|
+ <th class="!w-[23%]">状态</th>
|
|
|
+ <th class="!w-[4.5%]"></th>
|
|
|
</tr>
|
|
|
</thead>
|
|
|
<tbody v-show="fileList.length > 0" class="file-preview-thumbnails cursor-default">
|
|
|
<tr v-for="(item, index) in fileList" :key="index" class="file-preview-frame explorer-frame kv-preview-thumb w-100px h-38px hover:bg-[#f5f5f5]" id="preview-1668340925733-0" data-fileindex="0" data-template="pdf" title="test.pdf">
|
|
|
- <td class="kv-file-content hide">
|
|
|
- <embed class="kv-preview-data" src="blob:https://17pdf.com/324d1d91-3d7c-4ad7-ab0a-49a3ea411d9f" width="100px" height="38px" type="application/pdf">
|
|
|
- </td>
|
|
|
<td class="file-details-cell">{{ index+1 }}</td>
|
|
|
<td class="file-details-cell !text-left">
|
|
|
<div class="explorer-caption max-w-260px truncate block text-[#777]" title="test.pdf">{{ item.name }}</div>
|
|
|
</td>
|
|
|
<td class="file-details-cell text-[#999]">{{ getfilesize(item.size) }}</td>
|
|
|
- <td class="file-details-cell points">{{ item.price }}</td>
|
|
|
+ <td class="file-details-cell points">{{ userInfo.memberInfo.flag === 1 ? 0 : item.price }}</td>
|
|
|
<td class="file-details-cell select w-106px">
|
|
|
- <select class="transfer-select appearance-none" v-model="item.output" @change="changeOutput(item, index)">
|
|
|
+ <select v-if="item.status !== 6" class="transfer-select appearance-none" v-model="item.output" @change="changeOutput(item, index)">
|
|
|
<option value="png">PNG</option>
|
|
|
<option value="xlsx">XLSX</option>
|
|
|
<option value="pptx">PPTX</option>
|
|
|
@@ -83,9 +79,10 @@
|
|
|
<option value="txt">TXT</option>
|
|
|
<option value="jpg">JPG</option>
|
|
|
</select>
|
|
|
+ <span v-else>{{ item.output }}</span>
|
|
|
</td>
|
|
|
- <td class="file-details-cell state text-14px text-[#878787]" state="">{{ fileStatus(item, index) }}</td>
|
|
|
- <td class="file-details-cell upload_status hidden" data-space="13005282">未上传</td>
|
|
|
+ <td class="file-details-cell state text-14px text-[#878787]" v-html="fileStatus(item, index)"></td>
|
|
|
+ <!-- <td v-else class="file-details-cell state text-14px text-red-500">转换失败<img src="/converter/menu_ic_pdfconvert.png" @click="rechangeFile" /></td> -->
|
|
|
<td class="file-actions-cell w-50px p-0">
|
|
|
<div class="file-actions text-center">
|
|
|
<div class="file-footer-buttons" @click="deleteFile(index)">
|
|
|
@@ -106,13 +103,13 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="input-group file-caption-main w-[100%] -top-450px relative table border-separate">
|
|
|
- <div class="input-group-btn relative text-0px whitespace-nowrap">
|
|
|
+ <div class="input-group-btn relative text-0px whitespace-nowrap !flex">
|
|
|
<div tabindex="500" class="btn btn-file" :class="{'btn-file-left' : fileList.length > 0}">
|
|
|
<div class="add-file" :class="{'add-file-left':(fileList.length > 0)}">{{ fileList.length > 0 ? '添加文件' : '' }}</div>
|
|
|
<input name="file" id="fileinput-explorer" ref="file" @change="addFile($event)" accept=".pdf" title="上传文件" type="file" multiple=""
|
|
|
class="absolute top-0 right-0 p-0 m-0 min-w-[100%] h-[100%] w-90px text-right opacity-0 bg-none bg-repeat bg-scroll block outline-none border-0 cursor-pointer"/>
|
|
|
- <span v-if="fileList.length > 0" @click="deleteAllFile" class="relative bg-white border border-[#ff4f4f] boder-solid text-16px py-7px px-18px rounded-4px mt-4px cursor-pointer text-[#ff4f4f] leading-normal hover:bg-[#ff4f4f] hover:text-white">清空</span>
|
|
|
</div>
|
|
|
+ <div v-if="fileList.length > 0" @click="deleteAllFile" class="inline-block ml-30px bg-white border border-[#ff4f4f] boder-solid text-16px py-7px px-18px rounded-4px mt-4px cursor-pointer text-[#ff4f4f] leading-normal hover:bg-[#ff4f4f] hover:text-white">清空</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -173,17 +170,13 @@
|
|
|
</li>
|
|
|
<li>
|
|
|
<a href="/converter">
|
|
|
- <img
|
|
|
- src="/converter/ic_pdf_ppt.png"
|
|
|
- />
|
|
|
+ <img src="/converter/ic_pdf_ppt.png"/>
|
|
|
<span>PDF to PowerPoint</span>
|
|
|
</a>
|
|
|
</li>
|
|
|
<li>
|
|
|
<a href="/converter">
|
|
|
- <img
|
|
|
- src="/converter/ic_pdf_execl.png"
|
|
|
- />
|
|
|
+ <img src="/converter/ic_pdf_execl.png"/>
|
|
|
<span>PDF to EXCEL</span>
|
|
|
</a>
|
|
|
</li>
|
|
|
@@ -295,8 +288,13 @@ export default {
|
|
|
data () {
|
|
|
return {
|
|
|
fileList: [],
|
|
|
+ uniqFileArr: [],
|
|
|
checkbox: true,
|
|
|
- changeFileFlag: true
|
|
|
+ changeFileFlag: true,
|
|
|
+ uploadNum: 0,
|
|
|
+ getFileStatusTimer: null,
|
|
|
+ changeSucesssNumTotal: 0,
|
|
|
+ changeSucesssFileList: []
|
|
|
}
|
|
|
},
|
|
|
middleware: 'user',
|
|
|
@@ -313,10 +311,17 @@ export default {
|
|
|
return total
|
|
|
}
|
|
|
},
|
|
|
- created () {
|
|
|
- console.log(this.userInfo)
|
|
|
+ mounted () {
|
|
|
+ if (localStorage.getItem('file') !== null) {
|
|
|
+ this.fileList = JSON.parse(localStorage.getItem('file'))
|
|
|
+ }
|
|
|
},
|
|
|
methods: {
|
|
|
+ // 充值弹框
|
|
|
+ handlerBuy(type) {
|
|
|
+ this.$store.commit('OPEN_LOGIN', true)
|
|
|
+ this.$store.commit('SET_INTERFACE', type)
|
|
|
+ },
|
|
|
// 添加文件
|
|
|
async addFile (event) {
|
|
|
// 阻止发生默认行为
|
|
|
@@ -333,16 +338,13 @@ export default {
|
|
|
status: 0
|
|
|
}
|
|
|
this.fileList.push(fileObj)
|
|
|
+ this.uniqFileArr.push(array[i])
|
|
|
}
|
|
|
- console.log(this.fileList)
|
|
|
+ console.log('fileList:', this.fileList)
|
|
|
+ console.log('uniqFileArr:', this.uniqFileArr)
|
|
|
},
|
|
|
// 查询文件所需券数
|
|
|
async getFilePrice (input, output) {
|
|
|
- // let formData = new FormData()
|
|
|
- // for (const file of array) {
|
|
|
- // formData.append('file',file)
|
|
|
- // console.log(file)
|
|
|
- // }
|
|
|
let price = 0
|
|
|
await this.$axios.get(`/convertType/getConvertTypeList?input=${input}&output=${output}`).then((res) => {
|
|
|
if(res.code === 200) {
|
|
|
@@ -359,55 +361,71 @@ export default {
|
|
|
},
|
|
|
// 计算文件大小函数(保留两位小数),Size为字节大小
|
|
|
getfilesize (size) {
|
|
|
- if (!size) return ""
|
|
|
- var num = 1024.00 //byte
|
|
|
- if (size < num) {
|
|
|
- return size + "B"
|
|
|
- }
|
|
|
- if (size < Math.pow(num, 2)) {
|
|
|
- return (size / num).toFixed(2) + "K"
|
|
|
- }
|
|
|
- if (size < Math.pow(num, 3)) {
|
|
|
- return (size / Math.pow(num, 2)).toFixed(2) + "M"
|
|
|
- }
|
|
|
- if (size < Math.pow(num, 4)) {
|
|
|
- return (size / Math.pow(num, 3)).toFixed(2) + "G"
|
|
|
- }
|
|
|
- else {
|
|
|
- return (size / Math.pow(num, 4)).toFixed(2) + "T"
|
|
|
- }
|
|
|
+ if (!size) return ""
|
|
|
+ var num = 1024.00 //byte
|
|
|
+ if (size < num) {
|
|
|
+ return size + "B"
|
|
|
+ }
|
|
|
+ if (size < Math.pow(num, 2)) {
|
|
|
+ return (size / num).toFixed(2) + "K"
|
|
|
+ }
|
|
|
+ if (size < Math.pow(num, 3)) {
|
|
|
+ return (size / Math.pow(num, 2)).toFixed(2) + "M"
|
|
|
+ }
|
|
|
+ if (size < Math.pow(num, 4)) {
|
|
|
+ return (size / Math.pow(num, 3)).toFixed(2) + "G"
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ return (size / Math.pow(num, 4)).toFixed(2) + "T"
|
|
|
+ }
|
|
|
},
|
|
|
// 删除文件
|
|
|
deleteFile (index) {
|
|
|
- this.fileList.splice(index,1)
|
|
|
+ this.fileList.splice(index, 1)
|
|
|
+ this.uniqFileArr.splice(index-this.changeSucesssNumTotal, 1)
|
|
|
+ this.changeSucesssFileList = []
|
|
|
+ localStorage.removeItem('file')
|
|
|
+ this.fileList.forEach(item => {
|
|
|
+ if (item.status === 6) {
|
|
|
+ this.changeSucesssFileList.push(item)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ localStorage.setItem('file', JSON.stringify(this.changeSucesssFileList))
|
|
|
},
|
|
|
+ // 清空
|
|
|
deleteAllFile () {
|
|
|
this.fileList = []
|
|
|
+ this.uniqFileArr = []
|
|
|
+ this.changeFileStatus('all', 5)
|
|
|
+ this.changeSucesssFileList = []
|
|
|
+ localStorage.removeItem('file')
|
|
|
},
|
|
|
// 转档第一步，根据文件列表创建任务和插入文件信息
|
|
|
createFileMission () {
|
|
|
// if (this.fileList.length === 0) return
|
|
|
let points = this.userInfo.memberInfo.points
|
|
|
if (this.requiredCoupon > points) {
|
|
|
- alert('券数不足')
|
|
|
+ alert('券数不足，请充值')
|
|
|
return
|
|
|
}
|
|
|
+ let filterFileList = this.fileList.filter(function(item){
|
|
|
+ return item.status !== 6
|
|
|
+ })
|
|
|
+ console.log(filterFileList)
|
|
|
let fileArr = []
|
|
|
- for (let i = 0; i < this.fileList.length; i++) {
|
|
|
+ for (let i = 0; i < filterFileList.length; i++) {
|
|
|
let file = {}
|
|
|
file['sourceType'] = 0
|
|
|
- file['size'] = this.fileList[i].size
|
|
|
+ file['size'] = filterFileList[i].size
|
|
|
file['input'] = 'pdf'
|
|
|
- file['output'] = this.fileList[i].output
|
|
|
- file['filename'] = this.fileList[i].name
|
|
|
+ file['output'] = filterFileList[i].output
|
|
|
+ file['filename'] = filterFileList[i].name
|
|
|
fileArr[i] = file;
|
|
|
}
|
|
|
- let arrLen = fileArr.length
|
|
|
- console.log(fileArr)
|
|
|
fileArr = JSON.stringify(fileArr)
|
|
|
console.log(fileArr)
|
|
|
this.changeFileFlag = false
|
|
|
- this.changeFileStatus(arrLen, 1)
|
|
|
+ this.changeFileStatus('all', 1)
|
|
|
const config = {
|
|
|
method: 'post',
|
|
|
url: '/mission/create',
|
|
|
@@ -419,21 +437,35 @@ export default {
|
|
|
}
|
|
|
this.$axios('/mission/create', config).then((res) => {
|
|
|
if(res.code === 200) {
|
|
|
- console.log('changeFile_first', res)
|
|
|
- // this.uploadFile(res.result.missionFilePoJos.missionId)
|
|
|
+ let missionFiles = res.result.missionFilePoJos
|
|
|
+ console.log(missionFiles)
|
|
|
+ for (let i = 0; i < missionFiles.length; i++) {
|
|
|
+ this.changeFileStatus(missionFiles[i].fileName, 2)
|
|
|
+ this.uploadFile(this.uniqFileArr[i], missionFiles[i].id, res.result.id)
|
|
|
+ }
|
|
|
} else {
|
|
|
this.changeFileFlag = true
|
|
|
- this.changeFileStatus(arrLen, 5)
|
|
|
+ this.changeFileStatus('all', 5)
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
// 修改文件状态
|
|
|
- changeFileStatus (len, status) {
|
|
|
- for (let i = 0; i < len; i++) {
|
|
|
- this.fileList[i].status = status
|
|
|
+ changeFileStatus (fileName, status) {
|
|
|
+ if (fileName === 'all') {
|
|
|
+ this.fileList.forEach(item => {
|
|
|
+ if (item.status !== 6) {
|
|
|
+ this.$set(item, 'status', status)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.fileList.forEach(item => {
|
|
|
+ if (item.name === fileName) {
|
|
|
+ this.$set(item, 'status', status)
|
|
|
+ }
|
|
|
+ })
|
|
|
}
|
|
|
},
|
|
|
- // 文件状态: 0未转换，1上传中，2上传完成，3转换中，4转换成功，5转换失败
|
|
|
+ // 文件状态: 0未转换，1上传中，2上传完成，3转换中，4转换成功，5转换失败，6已转档
|
|
|
fileStatus (item, index) {
|
|
|
switch (item.status) {
|
|
|
case 0:
|
|
|
@@ -450,36 +482,98 @@ export default {
|
|
|
return '转换中'
|
|
|
case 4:
|
|
|
this.$set(this.fileList[index], 'status', 4)
|
|
|
- return '转换成功'
|
|
|
+ return '<span style="color: orange">转换成功</span>'
|
|
|
case 5:
|
|
|
this.$set(this.fileList[index], 'status', 5)
|
|
|
- return '转换失败'
|
|
|
+ return '<span style="color: red">转换失败</span>'
|
|
|
+ case 6:
|
|
|
+ this.$set(this.fileList[index], 'status', 6)
|
|
|
+ return `<a href="${item.path}" style="color: #0dd299">下载</a>`
|
|
|
}
|
|
|
},
|
|
|
// 转档第二步，上传文件
|
|
|
- uploadFile (missionId) {
|
|
|
- const file = this.fileObj
|
|
|
+ uploadFile (file, id, missionId) {
|
|
|
+ console.log(file)
|
|
|
const formData = new FormData()
|
|
|
formData.append('file', file)
|
|
|
+ formData.append('missionFileId', id)
|
|
|
const config = {
|
|
|
headers: {
|
|
|
'Content-Type': 'multipart/form-data;boundary = ' + new Date().getTime()
|
|
|
}
|
|
|
}
|
|
|
- console.log("文件存在"+file)
|
|
|
this.$axios.post('/missionFile/upload', formData, config).then((res) => {
|
|
|
+ console.log('上传文件')
|
|
|
if(res.code === 200) {
|
|
|
- console.log('upload_success_response', res)
|
|
|
- // this.convertFile(missionId)
|
|
|
+ this.changeFileStatus(file.name, 3)
|
|
|
+ this.uploadNum++
|
|
|
+ console.log(this.uploadNum)
|
|
|
+ if (this.uploadNum === this.uniqFileArr.length) {
|
|
|
+ this.convertFile(file.name, missionId)
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.changeFileFlag = true
|
|
|
+ this.changeFileStatus(file.name, 5)
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
// 转档第三步，开始转档
|
|
|
- convertFile (missionId) {
|
|
|
- this.$axios.post('/mission/convertFile', missionId).then((res) => {
|
|
|
+ convertFile (file, missionId) {
|
|
|
+ const formData = new FormData()
|
|
|
+ formData.append('missionId', missionId)
|
|
|
+ const config = {
|
|
|
+ headers: {
|
|
|
+ 'Content-Type': 'multipart/form-data;boundary = ' + new Date().getTime()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.$axios.post('/mission/convertFile', formData, config).then((res) => {
|
|
|
+ console.log('开始转档')
|
|
|
+ if(res.code === 200) {
|
|
|
+ this.changeFileStatus('all', 4)
|
|
|
+ this.getFileStatusTimer = window.setInterval(() => {
|
|
|
+ setTimeout(this.getFileStatus(formData, config), 0)
|
|
|
+ }, 3000)
|
|
|
+ } else {
|
|
|
+ this.uploadNum = 0
|
|
|
+ this.changeFileStatus('all', 5)
|
|
|
+ this.changeFileFlag = true
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 转档最后一步，轮询文件状态和下载链接
|
|
|
+ getFileStatus (formData, config) {
|
|
|
+ this.$axios.post('/mission/queryFileStatus', formData, config).then((res) => {
|
|
|
+ console.log('获取文件状态')
|
|
|
if(res.code === 200) {
|
|
|
- console.log('convertFile_success_response', res)
|
|
|
+ let getFileList = res.result[0].missionFilePoJos
|
|
|
+ console.log(getFileList)
|
|
|
+ let changeSucesssNum = 0
|
|
|
+ for (let i = 0; i < getFileList.length; i++) {
|
|
|
+ if (getFileList[i].status === 2) {
|
|
|
+ this.changeFileStatus(getFileList[i].fileName, 6)
|
|
|
+ changeSucesssNum++
|
|
|
+ this.fileList.forEach(item => {
|
|
|
+ if (item.name === getFileList[i].fileName) {
|
|
|
+ this.$set(item, 'path', getFileList[i].path)
|
|
|
+ this.changeSucesssFileList.push(item)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (changeSucesssNum === getFileList.length) {
|
|
|
+ clearInterval(this.getFileStatusTimer)
|
|
|
+ this.getFileStatusTimer = null
|
|
|
+ this.changeSucesssNumTotal += changeSucesssNum
|
|
|
+ this.uniqFileArr = []
|
|
|
+ }
|
|
|
+ console.log(this.fileList)
|
|
|
+ console.log('changeSucesssFileList:', this.changeSucesssFileList)
|
|
|
+ localStorage.setItem('file', JSON.stringify(this.changeSucesssFileList))
|
|
|
+ } else {
|
|
|
+ this.uploadNum = 0
|
|
|
+ this.changeFileStatus('all', 5)
|
|
|
}
|
|
|
+ this.changeFileFlag = true
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
@@ -621,7 +715,6 @@ export default {
|
|
|
white-space: nowrap;
|
|
|
}
|
|
|
.input-group-addon, .input-group-btn {
|
|
|
- width: 1%;
|
|
|
white-space: nowrap;
|
|
|
vertical-align: middle;
|
|
|
}
|
|
|
@@ -659,7 +752,6 @@ export default {
|
|
|
box-shadow: none;
|
|
|
}
|
|
|
.btn-file {
|
|
|
- display: flex !important;
|
|
|
position: relative;
|
|
|
overflow: hidden;
|
|
|
margin: 0;
|
|
|
@@ -883,5 +975,9 @@ export default {
|
|
|
.download_code {
|
|
|
box-shadow: 0px 1px 5px rgb(0 0 0 / 12%);
|
|
|
}
|
|
|
+ .file-details-cell.state img {
|
|
|
+ display: inline-block;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
