|
@@ -25,18 +25,23 @@
|
|
<div class="py-15px">
|
|
<div class="py-15px">
|
|
<p class="text-[20px] leading-28px text-[#333]">我的转档</p>
|
|
<p class="text-[20px] leading-28px text-[#333]">我的转档</p>
|
|
<div class="mt-10px mb-16px">
|
|
<div class="mt-10px mb-16px">
|
|
- <button class="btn btn-download">下载</button>
|
|
|
|
- <button class="btn btn-delete">删除</button>
|
|
|
|
|
|
+ <button class="btn btn-download" @click="downloadFiles" :disabled="isDownload">下载</button>
|
|
|
|
+ <button class="btn btn-delete" @click="deleteChangeFileRecord" :disabled="isDelete">删除</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
- <el-table :data="tableData">
|
|
|
|
- <el-table-column type="selection" width="40"></el-table-column>
|
|
|
|
- <el-table-column label="格式转换" ></el-table-column>
|
|
|
|
- <el-table-column label="目标文件" ></el-table-column>
|
|
|
|
- <el-table-column label="文件大小" ></el-table-column>
|
|
|
|
- <el-table-column label="消耗券数" ></el-table-column>
|
|
|
|
- <el-table-column label="状态" ></el-table-column>
|
|
|
|
|
|
+ <el-table :data="tableData" @selection-change="handleSelectionChange">
|
|
|
|
+ <el-table-column type="selection" width="50"></el-table-column>
|
|
|
|
+ <el-table-column prop="format" label="格式转换" ></el-table-column>
|
|
|
|
+ <el-table-column prop="fileName" label="目标文件" ></el-table-column>
|
|
|
|
+ <el-table-column prop="size" label="文件大小" ></el-table-column>
|
|
|
|
+ <el-table-column prop="price" label="消耗券数" ></el-table-column>
|
|
|
|
+ <el-table-column prop="status" label="状态" width="120px"></el-table-column>
|
|
|
|
+ <el-table-column prop="path" label="" width="50px">
|
|
|
|
+ <template slot-scope="scope">
|
|
|
|
+ <a v-if="scope.row.path" :href="scope.row.path" class="downloadBtn"></a>
|
|
|
|
+ </template>
|
|
|
|
+ </el-table-column>
|
|
<!-- 表格无数据显示 -->
|
|
<!-- 表格无数据显示 -->
|
|
<div slot="empty">
|
|
<div slot="empty">
|
|
<div class="table-empty"></div>
|
|
<div class="table-empty"></div>
|
|
@@ -44,6 +49,13 @@
|
|
<p class="leading-20px mt-8px mb-100px text-14px" style="color:rgba(0,0,0,0.38)">每一分钱都花在了刀刃上</p>
|
|
<p class="leading-20px mt-8px mb-100px text-14px" style="color:rgba(0,0,0,0.38)">每一分钱都花在了刀刃上</p>
|
|
</div>
|
|
</div>
|
|
</el-table>
|
|
</el-table>
|
|
|
|
+ <el-pagination
|
|
|
|
+ class="text-center mt-50px"
|
|
|
|
+ background
|
|
|
|
+ layout="prev, pager, next"
|
|
|
|
+ :total="totalNum"
|
|
|
|
+ @current-change="handleCurrentChange">
|
|
|
|
+ </el-pagination>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
@@ -51,10 +63,29 @@
|
|
import { mapState } from 'vuex'
|
|
import { mapState } from 'vuex'
|
|
export default {
|
|
export default {
|
|
layout: 'userCenter',
|
|
layout: 'userCenter',
|
|
- middleware: ['auth'],
|
|
|
|
|
|
+ middleware: ['auth','user'],
|
|
|
|
+ head() {
|
|
|
|
+ return {
|
|
|
|
+ title: '17PDF Reader - 个人中心',
|
|
|
|
+ meta: [
|
|
|
|
+ {
|
|
|
|
+ name: 'keywords',
|
|
|
|
+ content: 'PDFReader,pdfreader,17PDF Reader,pdf软件,PDF阅读器,文件扫描'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ hid: 'description',
|
|
|
|
+ content: '17PDF Reader是行走的PDF阅读器和文件扫描仪,并提供免费的PDF文件格式转换工具,支持pdf转word,pdf转doc,pdf转ppt,pdf转图片等。17PDF Reader被用户誉为“亚洲的Adobe”,拥有自主产权的PDF核心技术,为商务精英、教育族群及企业提供全方位的PDF文件解决方案。'
|
|
|
|
+ },
|
|
|
|
+ ]
|
|
|
|
+ }
|
|
|
|
+ },
|
|
data() {
|
|
data() {
|
|
return {
|
|
return {
|
|
- tableData:[]
|
|
|
|
|
|
+ tableData:[],
|
|
|
|
+ tableDataSelection: [],
|
|
|
|
+ totalNum: 0,
|
|
|
|
+ isDownload: true,
|
|
|
|
+ isDelete: true
|
|
}
|
|
}
|
|
},
|
|
},
|
|
computed: {
|
|
computed: {
|
|
@@ -62,10 +93,108 @@ export default {
|
|
'userInfo',
|
|
'userInfo',
|
|
]),
|
|
]),
|
|
},
|
|
},
|
|
|
|
+ created () {
|
|
|
|
+ this.getChangeFileRecord(1)
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ // 用户转档记录分页查询
|
|
|
|
+ getChangeFileRecord (page) {
|
|
|
|
+ this.$axios.get(`/missionFile/page?page=${page}`).then((res) => {
|
|
|
|
+ if(res.code === 200) {
|
|
|
|
+ this.tableData = res.result.list
|
|
|
|
+ this.totalNum = res.result.total
|
|
|
|
+ for (let i = 0; i < this.tableData.length; i++) {
|
|
|
|
+ this.tableData[i].size = this.getfilesize(this.tableData[i].size)
|
|
|
|
+ this.tableData[i].status = this.getFileStatus(this.tableData[i].status)
|
|
|
|
+ this.$set(this.tableData[i], 'format', this.getFormat(this.tableData[i].inputType, this.tableData[i].outputType))
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ // 计算文件大小函数(保留两位小数),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"
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ // 判断文件状态
|
|
|
|
+ getFileStatus (status) {
|
|
|
|
+ switch (status) {
|
|
|
|
+ case 0:
|
|
|
|
+ return '转档中'
|
|
|
|
+ case 1:
|
|
|
|
+ return '转档中'
|
|
|
|
+ case 2:
|
|
|
|
+ return '转档成功'
|
|
|
|
+ case 3:
|
|
|
|
+ return '转档失败'
|
|
|
|
+ case 4:
|
|
|
|
+ return '转档成功'
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ // 格式转换
|
|
|
|
+ getFormat (input, output) {
|
|
|
|
+ return input.toUpperCase() + '-->' + output.toUpperCase()
|
|
|
|
+ },
|
|
|
|
+ handleSelectionChange(val) {
|
|
|
|
+ this.tableDataSelection = val
|
|
|
|
+ this.isDelete = false
|
|
|
|
+ for (const file of this.tableDataSelection) {
|
|
|
|
+ console.log(file.status)
|
|
|
|
+ if (file.status === '转档中' || file.status === '转档失败') {
|
|
|
|
+ this.isDownload = true
|
|
|
|
+ } else {
|
|
|
|
+ this.isDownload = false
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ // 删除转档记录
|
|
|
|
+ deleteChangeFileRecord () {
|
|
|
|
+ var data = new FormData()
|
|
|
|
+ for (const file of this.tableDataSelection) {
|
|
|
|
+ data.append('ids', file.id)
|
|
|
|
+ }
|
|
|
|
+ const config = {
|
|
|
|
+ headers: {
|
|
|
|
+ 'Content-Type': 'multipart/form-data;'
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ this.$axios.post('/missionFile/delete', data, config).then((res) => {
|
|
|
|
+ if(res.code === 200) {
|
|
|
|
+ this.getChangeFileRecord(1)
|
|
|
|
+ this.isDelete = true
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ handleCurrentChange(val) {
|
|
|
|
+ this.getChangeFileRecord(val)
|
|
|
|
+ },
|
|
|
|
+ downloadFiles () {
|
|
|
|
+ for (const file of this.tableDataSelection) {
|
|
|
|
+ if (file.status !== 2 || file.status !== 4) {
|
|
|
|
+ this.isDownload = true
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
}
|
|
}
|
|
</script>
|
|
</script>
|
|
|
|
|
|
-<style lang="scss">
|
|
|
|
|
|
+<style lang="scss" scoped>
|
|
.expenses-date-tips {
|
|
.expenses-date-tips {
|
|
display: flex;
|
|
display: flex;
|
|
align-items: center;
|
|
align-items: center;
|
|
@@ -149,4 +278,14 @@ export default {
|
|
height: 200px;
|
|
height: 200px;
|
|
background: url(http://cn-file.17pdf.com/website/members/pic_noconsumption.png) no-repeat center center;
|
|
background: url(http://cn-file.17pdf.com/website/members/pic_noconsumption.png) no-repeat center center;
|
|
}
|
|
}
|
|
|
|
+.el-table__row:hover .downloadBtn {
|
|
|
|
+ display: inline-block;
|
|
|
|
+ width: 13px;
|
|
|
|
+ height: 13px;
|
|
|
|
+ background: url(http://cn-file.17pdf.com/website/members/ic_download_gray.svg) center no-repeat;
|
|
|
|
+}
|
|
|
|
+.btn-download:disabled,.btn-delete:disabled {
|
|
|
|
+ opacity: 0.5;
|
|
|
|
+ pointer-events: none;
|
|
|
|
+}
|
|
</style>
|
|
</style>
|