转档功能开发

pages/converter.vue

@@ -1,29 +1,3 @@
-<!--
- * @Description: 
- * @Author: 欧阳承珺
- * @LastEditors: 欧阳承珺
- * @Date: 2022-10-19 17:25:48
- * @LastEditTime: 2022-11-08 09:28:05
--->
-<script>
-import { mapState } from 'vuex'
-export default {
-  middleware: 'user',
-  computed: {
-    ...mapState([
-      'userInfo'
-    ])
-  }
-}
-// $(function() {
-//   var number = $(".need-volume").find("span").eq(1).html()
-//   if(number === "券"){
-//     number = "0"+ number;
-//   $(".need-volume").find("span").eq(1).html(number);
-//   }
-// })
-</script>
-
 <template>
   <div class="page-converter">
     <div class="date-tips flex content-center justify-center py-6px">
@@ -61,7 +35,7 @@ export default {
               <a class="text-[#ff4f4f] no-underline leading-normal">充值</a>
             </span>
             <div class="need-volume float-right right-48px text-16px text-[#666] leading-48px mr-20px">
-              所需券：<span class="text-[#0dd299] text-16px">0券</span> / 剩余券：<span class="text-[#0dd299] text-16px">0券</span>
+              所需券：<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>
             </div>
           </div>
           <div class="transfer-panel">
@@ -99,18 +73,18 @@ export default {
                               <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">2</td>
+                            <td class="file-details-cell points">{{ item.price }}</td>
                             <td class="file-details-cell select w-106px">
-                              <select class="transfer-select appearance-none" v-model="item.outputType">
+                              <select 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>
-                                <option value="docx" selected>DOCX</option>
+                                <option value="docx">DOCX</option>
                                 <option value="txt">TXT</option>
                                 <option value="jpg">JPG</option>
                               </select>
                             </td>
-                            <td class="file-details-cell state text-14px text-[#878787]" state="">未转换</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-actions-cell w-50px p-0">
                               <div class="file-actions text-center">
@@ -133,10 +107,11 @@ export default {
                   </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 tabindex="500" class="btn btn-file" :class="{'btn-file-left':(fileList.length > 0)}">
+                      <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" v-on:change="handleFileUpload($event)" accept=".pdf" title="上传文件" type="file" multiple=""
+                        <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>
                   </div>
@@ -146,8 +121,9 @@ export default {
 
             <div class="transfer-btn mt-30px h-64px text-center">
               <div class="cursor-not-allowed inline-block">
-                <span @click="startChangeFile" :class="{'disabledBtn' : !checkbox}" class="btn transfer-start-btn bg-[#ff524f] text-20px py-0 px-150px rounded-4px h-60px w-386px text-white hover:bg-[#f34545]">
-                  <a class="text-white leading-60px">开始转换</a>
+                <span @click="createFileMission" :class="{'disabledBtn' : !checkbox || !changeFileFlag }" class="btn transfer-start-btn bg-[#ff524f] text-20px py-0 px-150px rounded-4px h-60px w-386px text-white hover:bg-[#f34545]">
+                  <a class="text-white leading-60px">{{ !changeFileFlag ? '转换中...' : '开始转换' }}</a>
+                  <span v-if="!changeFileFlag" class="loading"></span>
                 </span>
               </div>
               <span class="hide btn btn-down small w-240px h-60px bg-[#0dd299] rounded-4px text-20px ml-15px hover:bg-[#0fc993]"><a class="leading-60px text-white">下载全部</a></span>
@@ -155,8 +131,8 @@ export default {
           </div>
           <div class="transfer-remember mt-23px text-center">
             <div class="checkbox checkbox-danger relative block mt-10px mb-10px">
-              <label for="remember" class="text-12px font-normal text-[#999] min-h-20px pl-20px mb-0 cursor-pointer inline-block max-w-[100%]">
-                <input v-model="checkbox" type="checkbox" name="remember" class="remember_pass"/>确保上传的文档不涉及版权问题及违法内容
+              <label for="remember" class="text-12px font-normal text-[#999] min-h-20px pl-20px mb-0 inline-block max-w-[100%]">
+                <input v-model="checkbox" type="checkbox" name="remember" class="remember_pass cursor-pointer" :disabled="!changeFileFlag" :class="{'cursor-not-allowed' : !changeFileFlag }" />确保上传的文档不涉及版权问题及违法内容
               </label>
             </div>
           </div>
@@ -314,41 +290,72 @@ export default {
 </template>
 
 <script>
+import { mapState } from 'vuex'
 export default {
   data () {
     return {
       fileList: [],
-      fileObj: null,
-      checkbox: true
+      checkbox: true,
+      changeFileFlag: true
     }
   },
+  middleware: 'user',
+  computed: {
+    ...mapState([
+      'userInfo'
+    ]),
+    // 所需券数
+    requiredCoupon () {
+      let total = 0
+      for (let i = 0; i < this.fileList.length; i++) {
+        total += this.fileList[i].price
+      }
+      return total
+    }
+  },
+  created () {
+    console.log(this.userInfo)
+  },
   methods: {
-    // 获取文件
-    handleFileUpload(event){
+    // 添加文件
+    async addFile (event) {
       // 阻止发生默认行为
       event.preventDefault();
-      let formData = new FormData()
-      let file = this.$refs.file.files[0]
-      formData.append('file',file)
-      this.fileObj = formData.get('file')
-      console.log(this.fileObj)
-      if(this.fileObj){
-        this.fileList.push(this.fileObj)
+      const array = event.target.files
+      let defaultPrice = await this.getFilePrice('pdf', 'docx')
+      for (let i = 0; i < array.length; i++) {
+        let fileObj = {
+          name: array[i].name,
+          size: array[i].size,
+          price: defaultPrice,
+          input: 'pdf',
+          output: 'docx',
+          status: 0
+        }
+        this.fileList.push(fileObj)
       }
       console.log(this.fileList)
-      this.postUpload()
     },
-    // 上传文件
-    postUpload () {
-      const file = this.fileObj
-      console.log(file)
-      this.$axios.post('/17pdf-backend-core/missionFile/upload', {file}, {headers: {
-          'Content-Type': 'multipart/form-data'
-        }}).then((res) => {
-        if(res.code === 200 ) {
-          console.log('upload_success_response', res)
+    // 查询文件所需券数
+    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) {
+          price = res.result[0].price
         }
       })
+      return price
+    },
+    // 改变要转换的格式
+    async changeOutput (item, index) {
+      let price = await this.getFilePrice(item.input, item.output)
+      this.$set(this.fileList[index], 'price', price)
+      this.$set(this.fileList[index], 'output', item.output)
     },
     // 计算文件大小函数(保留两位小数),Size为字节大小
     getfilesize (size) {
@@ -374,26 +381,106 @@ export default {
     deleteFile (index) {
       this.fileList.splice(index,1)
     },
-    // 文件转换
-    startChangeFile () {
+    deleteAllFile () {
+      this.fileList = []
+    },
+    // 转档第一步，根据文件列表创建任务和插入文件信息
+    createFileMission () {
+      // if (this.fileList.length === 0) return
+      let points = this.userInfo.memberInfo.points
+      if (this.requiredCoupon > points) {
+        alert('券数不足')
+        return
+      }
       let fileArr = []
       for (let i = 0; i < this.fileList.length; i++) {
         let file = {}
         file['sourceType'] = 0
         file['size'] = this.fileList[i].size
         file['input'] = 'pdf'
-        file['output'] = this.fileList[i].outputType
+        file['output'] = this.fileList[i].output
         file['filename'] = this.fileList[i].name
         fileArr[i] = file;
       }
+      let arrLen = fileArr.length
       console.log(fileArr)
-      if (fileArr.length !== 0) {
-        this.$axios.post('/17pdf-backend-core/mission/create', fileArr).then((res) => {
-          if(res.code === 200 ) {
-            console.log('changeFile_success_response', res)
-          }
-        })
+      fileArr = JSON.stringify(fileArr)
+      console.log(fileArr)
+      this.changeFileFlag = false
+      this.changeFileStatus(arrLen, 1)
+      const config = {
+        method: 'post',
+        url: '/mission/create',
+        headers: {
+          'Accept': '*/*',
+          'Content-Type': 'application/json'
+        },
+        data: fileArr
+      }
+      this.$axios('/mission/create', config).then((res) => {
+        if(res.code === 200) {
+          console.log('changeFile_first', res)
+          // this.uploadFile(res.result.missionFilePoJos.missionId)
+        } else {
+          this.changeFileFlag = true
+          this.changeFileStatus(arrLen, 5)
+        }
+      })
+    },
+    // 修改文件状态
+    changeFileStatus (len, status) {
+      for (let i = 0; i < len; i++) {
+        this.fileList[i].status = status
+      }
+    },
+    // 文件状态: 0未转换，1上传中，2上传完成，3转换中，4转换成功，5转换失败
+    fileStatus (item, index) {
+      switch (item.status) {
+        case 0:
+          this.$set(this.fileList[index], 'status', 0)
+          return '未转换'
+        case 1:
+          this.$set(this.fileList[index], 'status', 1)
+          return '上传中'
+        case 2:
+          this.$set(this.fileList[index], 'status', 2)
+          return '上传完成'
+        case 3:
+          this.$set(this.fileList[index], 'status', 3)
+          return '转换中'
+        case 4:
+          this.$set(this.fileList[index], 'status', 4)
+          return '转换成功'
+        case 5:
+          this.$set(this.fileList[index], 'status', 5)
+          return '转换失败'
       }
+    },
+    // 转档第二步，上传文件
+    uploadFile (missionId) {
+      const file = this.fileObj
+      const formData = new FormData()
+      formData.append('file', file)
+      const config = {
+        headers: {
+          'Content-Type': 'multipart/form-data;boundary = ' + new Date().getTime()
+        }
+      }
+      console.log("文件存在"+file)
+      this.$axios.post('/missionFile/upload', formData, config).then((res) => {
+        if(res.code === 200) {
+          console.log('upload_success_response', res)
+          // this.convertFile(missionId)
+        }
+      })
+    },
+    // 转档第三步，开始转档
+    convertFile (missionId) {
+      this.$axios.post('/mission/convertFile', missionId).then((res) => {
+        if(res.code === 200) {
+          console.log('convertFile_success_response', res)
+        }
+      })
     }
   }
 }
@@ -485,6 +572,21 @@ export default {
     .recharge .recharge-btn:hover a {
       color: #fff;
     }
+    .transfer-btn .loading {
+      display: inline-block;
+      border: 3px solid #fff;
+      border-bottom: 3px solid #cccccc;
+      height: 35px;
+      width: 35px;
+      border-radius: 50%;
+      position: relative;
+      top: 10px;
+      left: 100px;
+      -webkit-animation: loading 1s infinite linear;
+      -moz-animation: loading 1s infinite linear;
+      -o-animation: loading 1s infinite linear;
+      animation: loading 1s infinite linear;
+    }
   }
   .table>caption+thead>tr:first-child>th, .table>caption+thead>tr:first-child>td, .table>colgroup+thead>tr:first-child>th, .table>colgroup+thead>tr:first-child>td, .table>thead:first-child>tr:first-child>th, .table>thead:first-child>tr:first-child>td {
     border-top: 0;
@@ -557,6 +659,7 @@ export default {
     box-shadow: none;
   }
   .btn-file {
+    display: flex !important;
     position: relative;
     overflow: hidden;
     margin: 0;
@@ -704,6 +807,7 @@ export default {
       font-size: 14px;
       color: #333333;
       img {
+        display: inline-block;
         width: 80px;
         height: 80px;
         margin-bottom: 20px;