自动生成编码和修改表格

.eslintrc.js

@@ -13,6 +13,10 @@ module.exports = {
   },
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'semi': 0,
+    'prefer-const': 'off',
+    'no-irregular-whitespace': 'off',
+    'no-trailing-spaces': 'off'
   }
 }

package.json

@@ -4,7 +4,7 @@
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
+    "build": "vue-cli-service build --report",
     "lint": "vue-cli-service lint"
   },
   "dependencies": {

src/App.vue

@@ -5,8 +5,11 @@
       <button @click="cleanFlie">清空文件</button>
     </div>
     <div style="margin: 10px 0;">
-      <el-radio v-model="compete" label="1">选拔赛</el-radio>
-      <el-radio v-model="compete" label="2">决赛</el-radio>
+      <!-- <el-radio v-model="compete" label="1">选拔赛</el-radio>
+      <el-radio v-model="compete" label="2">决赛</el-radio> -->
+      赛事编码：<input type="text" v-model="event" />
+      年份：<input type="text" v-model="year" />
+      (导入文件前填写，不写的话，赛事默认为YIIC，年份默认今年)
     </div>
     <div style="margin: 10px 0;">
       <el-radio v-model="radio" label="1">团队</el-radio>
@@ -27,9 +30,9 @@
     <el-table :data="datalist" border stripe @selection-change="handleSelectionChange" id="out-table">
       <el-table-column type="selection" width="55">
       </el-table-column>
-      <el-table-column prop="bms" label="编码" width="180">
+      <el-table-column prop="front" label="前12位编码" width="120">
       </el-table-column>
-      <el-table-column prop="xh" label="序号" width="180">
+      <el-table-column prop="xh" label="序号" width="50">
       </el-table-column>
       <el-table-column prop="sdbh" label="赛队编号" width="180">
       </el-table-column>
@@ -47,11 +50,11 @@
       </el-table-column>
       <el-table-column prop="ssdq" label="所属赛区" width="180">
       </el-table-column>
-      <el-table-column prop="mc" label="奖项名次" width="100">
+      <el-table-column prop="lx" label="类型" width="80">
       </el-table-column>
-      <el-table-column prop="lx" label="类型" width="100">
+      <el-table-column prop="mc" label="奖项名次" width="100">
       </el-table-column>
-      <el-table-column prop="zsbh" label="证书编号" width="100">
+      <el-table-column prop="bms" label="证书编码" width="220">
       </el-table-column>
     </el-table>
     <div style="display: inline-block;position: absolute;top: -1000px;">
@@ -72,7 +75,7 @@ export default {
   data () {
     return {
       a: 1,
-      fileType: '1',
+      fileType: '2',
       compete: '1',
       datalist: [],
       bmText: '',
@@ -90,7 +93,10 @@ export default {
       fileName: '',
       sourceList: [],
       flag: 1,
-      zipName: ''
+      zipName: '',
+      event: '', // 赛事编写
+      year: '', // 年份,
+      load: null
       // xx: ''
     }
   },
@@ -124,8 +130,10 @@ export default {
         }
         console.log(fromTo, 1)
         // console.log(persons)
-        const Data = that.handleFzbm(persons)
-        that.datalist = that.handleBm(Data)
+        let Data = that.handleFzbm(persons)
+        Data = that.handleBm(Data)
+        that.datalist = that.autoCode(Data)
+        console.log(that.datalist, 89)
       }
 
       // 以二进制方式打开文件
@@ -208,7 +216,7 @@ export default {
             flag++
           }
         }
-        console.log(data)
+        // console.log(data)
         return data
       }
     },
@@ -217,7 +225,8 @@ export default {
       if (!this.isOver) {
         data.forEach(element => {
           // element.bms = this.bmText + element.bm.toString().padStart(5, '0') + (element.fzbm === undefined ? '' : '-' + element.fzbm)
-          if (this.compete === '1') {
+          if (element.lx === '地市') {
+            console.log('地市')
             if (element.mc === '一等奖') {
               element.num = 1
               element.url = this.url
@@ -232,6 +241,7 @@ export default {
               element.url = this.urlFour
             }
           } else {
+            console.log('省赛')
             if (element.mc === '一等奖') {
               element.num = 1
               element.url = this.oUrl
@@ -252,8 +262,23 @@ export default {
       }
       return data
     },
+    // 自动生成编码
+    autoCode (data) {
+      data.forEach(item => {
+        item.front = this.generateEncode(this.event, this.year, item.lx, item.ssdq);
+        item.bms = this.generateEncode(this.event, this.year, item.lx, item.ssdq) + item.bms;
+      });
+      return data;
+    },
     // 生成导出的图片或者压缩包
     async toPdf () {
+      this.load = this.$loading({
+        lock: true, // lock的修改符--默认是false
+        text: 'Loading', // 显示在加载图标下方的加载文案
+        spinner: 'el-icon-loading', // 自定义加载图标类名
+        background: 'rgba(0, 0, 0, 0.7)', // 遮罩层颜色
+        target: document.querySelector('#table') // loadin覆盖的dom元素节点
+      })
       if (this.zipName === '') {
         // alert('请输入文件名')
         // return
@@ -271,13 +296,16 @@ export default {
       // console.log(this.sourceList, 8989)
       // this.downloadZip(this.sourceList, this.fileName)
     },
-
+    // 生成html
     createPdfElement (data) {
+      // console.log(data, 9090)
       const div = document.createElement('div')
       div.className = 'proBox'
-      if (this.compete === '1') {
+      // const url = window.URL.createObjectURL(data.url)
+      // 根据类型不同生成不同的html，选拔赛的图片多了一个地区
+      if (data.lx === '地市') {
         div.innerHTML = `
-        <img class="proBox-img" src="${data.url}?timestamp=${Date.now()}">
+        <img class="proBox-img" src="${data.url}">
         <p class="zs-bm">${data.bms}</p>
         <div class="zs-msg">
           <p class="zs-sxmc">${data.sx}</p>
@@ -289,7 +317,7 @@ export default {
         </div>`
       } else {
         div.innerHTML = `
-        <img class="proBox-img" src="${data.url}?timestamp=${Date.now()}">
+        <img class="proBox-img" src="${data.url}">
         <p class="zs-bm">${data.bms}</p>
         <div class="zs-msg">
           <p class="zs-sxmc">${data.sx}</p>
@@ -317,6 +345,7 @@ export default {
       }
       processNext()
     },
+    // 根据选择下载的文件类型导出文件
     dataToPdf (element, callback) {
       const that = this
       document.body.appendChild(element)
@@ -328,11 +357,12 @@ export default {
       }).then(canvas => {
         if (that.fileType === '1') {
           // const f = canvas.toDataURL('image/png', 1)
-          // console.log(f)
+          // console.log(f, 2)
           canvas.toBlob(blob => {
             FileSaver.saveAs(blob, `${element.querySelector('.zs-bm').textContent}.jpg`)
             document.body.removeChild(element)
             if (typeof callback === 'function') {
+              that.load.close()
               callback()
             }
           })
@@ -363,15 +393,28 @@ export default {
         return
       }
       this.datalist.forEach(item => {
-        item.bms = this.bmText + item.num + item.bm.toString().padStart(5, '0') + (item.fzbm === undefined ? '' : '-' + item.fzbm)
+        item.bms = item.front + this.bmText + item.num + item.bm.toString().padStart(5, '0') + (item.fzbm === undefined ? '' : '-' + item.fzbm)
       })
     },
     // 生成并导出excel文件
     exportExcel () {
       /* 从表生成工作簿对象 */
       const that = this
+      that.load = this.$loading({
+        lock: true, // lock的修改符--默认是false
+        text: 'Loading', // 显示在加载图标下方的加载文案
+        spinner: 'el-icon-loading', // 自定义加载图标类名
+        background: 'rgba(0, 0, 0, 0.7)', // 遮罩层颜色
+        target: document.querySelector('#table') // loadin覆盖的dom元素节点
+      })
       const wb = XLSX.utils.table_to_book(document.querySelector('#out-table'))
-      /* 获取二进制字符串作为输出 */
+      /* 将每一个t属性为n（number）的改成s 文本 */
+      for (let key in wb.Sheets.Sheet1) {
+        if (wb.Sheets.Sheet1[key].t && wb.Sheets.Sheet1[key].t === 'n') {
+          wb.Sheets.Sheet1[key].t = 's'
+          wb.Sheets.Sheet1[key].v = '' + wb.Sheets.Sheet1[key].v
+        }
+      }
       const wbout = XLSX.write(wb, {
         bookType: 'xlsx',
         bookSST: true,
@@ -387,9 +430,11 @@ export default {
           // 设置导出文件名称
           `${that.fileName === '' ? 'sheet' : that.fileName}.xlsx`
         )
+        that.load.close()
       } catch (e) {
         if (typeof console !== 'undefined') console.log(e, wbout)
       }
+      // that.show = true
       return wbout
     },
     // 清空上传的文件
@@ -401,7 +446,6 @@ export default {
       const zip = new JSZip()
       const fileFolder = zip.folder(zipName) // 创建 zipName 文件夹
       const fileList = []
-      debugger
       for (let i = 0; i < sourceList.length; i++) {
         const name = sourceList[i].picName // 注意: 每张图片的名称--需要对数据属性进行转换
         fileList.push({ name: name, img: sourceList[i].qrCode })
@@ -409,7 +453,7 @@ export default {
           if (fileList.length) {
             for (let k = 0; k < fileList.length; k++) {
               // 往文件夹中，添加每张图片数据
-              fileFolder.file(fileList[k].name + '.png', fileList[k].img.replace(/^data:image\/(png|jpg);base64,/, ''), {
+              fileFolder.file(fileList[k].name, fileList[k].img.replace(/^data:image\/(png|jpg);base64,/, ''), {
                 base64: true
               })
             }
@@ -419,6 +463,7 @@ export default {
           }
         }
       }
+      this.load.close()
     },
     // 没用到，将图片转成base64
     getImageBase64 (image) {
@@ -433,7 +478,135 @@ export default {
         .toLowerCase()
       // 某些图片 url 可能没有后缀名，默认是 png
       return canvas.toDataURL('image/' + extension, 1)
+    },
+    //  生成编码：
+    //  赛事编码（4位） + 年份（4位） + 赛事级别（2位） + 地区编码（2位）
+    //  YIIC + 2024 + -A(决赛)/-B(选拔赛) + 00（决赛）/ 行政代码（选拔赛）
+    //  选拔赛:
+    //  1.广州XX区的，前12位为“YIIC2024-B01”,
+    //  2.韶关的，前12位为“YIIC2024-B02”,
+    //  3.澳门的，前12位为“YIIC2024-B82”
+    //  总决赛:
+    //  前12位编码为：“YIIC2024-A00”开头
+    //  event 赛事编写 year 年份 level 赛事级别 region 地区
+    generateEncode (event, year, level, region) {
+      let Level;
+      let Region;
+      if (level === '省赛') {
+        Level = '-A'
+        Region = '00'
+      } else {
+        Level = '-B'
+        Region = this.getAdministrativeCode(region)
+      }
+      const Event = event === '' ? 'YIIC' : event;
+      const Year = year === '' ? new Date().getUTCFullYear() : year;
+      return Event + Year + Level + Region;
+    },
+    //  获取行政代码
+    getAdministrativeCode (region) {
+      let code;
+      if (region.indexOf('广州') !== -1) {
+        code = '01'
+      } else if (region.indexOf('韶关') !== -1) {
+        code = '02'
+      } else if (region.indexOf('深圳') !== -1) {
+        code = '03'
+      } else if (region.indexOf('珠海') !== -1) {
+        code = '04'
+      } else if (region.indexOf('汕头') !== -1) {
+        code = '05'
+      } else if (region.indexOf('佛山') !== -1) {
+        code = '06'
+      } else if (region.indexOf('江门') !== -1) {
+        code = '07'
+      } else if (region.indexOf('湛江') !== -1) {
+        code = '08'
+      } else if (region.indexOf('茂名') !== -1) {
+        code = '09'
+      } else if (region.indexOf('肇庆') !== -1) {
+        code = '12'
+      } else if (region.indexOf('惠州') !== -1) {
+        code = '13'
+      } else if (region.indexOf('梅州') !== -1) {
+        code = '14'
+      } else if (region.indexOf('汕尾') !== -1) {
+        code = '15'
+      } else if (region.indexOf('河源') !== -1) {
+        code = '16'
+      } else if (region.indexOf('阳江') !== -1) {
+        code = '17'
+      } else if (region.indexOf('清远') !== -1) {
+        code = '18'
+      } else if (region.indexOf('东莞') !== -1) {
+        code = '19'
+      } else if (region.indexOf('中山') !== -1) {
+        code = '20'
+      } else if (region.indexOf('潮州') !== -1) {
+        code = '51'
+      } else if (region.indexOf('揭阳') !== -1) {
+        code = '52'
+      } else if (region.indexOf('云浮') !== -1) {
+        code = '53'
+      } else if (region.indexOf('香港') !== -1) {
+        code = '81'
+      } else if (region.indexOf('澳门') !== -1) {
+        code = '82'
+      }
+      return code;
     }
+    // async init () {
+    //   const image = document.createElement('img');
+    //   image.src = this.url
+    //   console.log(image.src, 2)
+    //   let blob = new Blob([image.src], { type: 'image/png' });
+    //   const c = URL.createObjectURL(blob)
+    //   localStorage.setItem('url', blob);
+    //   const b = await this.blobToBase64(blob)
+    //   console.log(c, b)
+    //   this.url = await this.blobToBase64(blob)
+    //   image.src = this.urlTwo
+    //   blob = new Blob([image.src], { type: 'image/png' })
+    //   localStorage.setItem('urlTwo', blob);
+    //   this.urlTwo = await this.blobToBase64(blob)
+    //   image.src = this.urlThree
+    //   blob = new Blob([image.src], { type: 'image/png' })
+    //   localStorage.setItem('urlThree', blob);
+    //   this.urlThree = await this.blobToBase64(blob)
+    //   image.src = this.urlFour
+    //   blob = new Blob([image.src], { type: 'image/png' })
+    //   localStorage.setItem('urlFour', blob);
+    //   this.urlFour = await this.blobToBase64(blob)
+    //   image.src = this.oUrl
+    //   blob = new Blob([image.src], { type: 'image/png' })
+    //   localStorage.setItem('oUrl', blob);
+    //   this.oUrl = await this.blobToBase64(blob)
+    //   image.src = this.oUrlTwo
+    //   blob = new Blob([image.src], { type: 'image/png' })
+    //   localStorage.setItem('oUrlTwo', blob);
+    //   // this.oUrlTwo = await this.blobToBase64(blob)
+    //   image.src = this.oUrlThree
+    //   blob = new Blob([image.src], { type: 'image/png' })
+    //   // localStorage.setItem('oUrlThree', blob);
+    //   this.oUrlThree = await this.blobToBase64(blob)
+    //   image.src = this.oUrlFour
+    //   blob = new Blob([image.src], { type: 'image/png' })
+    //   localStorage.setItem('oUrlFour', blob);
+    //   // this.oUrlFour = await this.blobToBase64(blob)
+    // },
+    // blobToBase64 (blob) {
+    //   return new Promise((resolve, reject) => {
+    //     const fileReader = new FileReader()
+    //     fileReader.onload = (e) => {
+    //       resolve(e.target.result)
+    //     }
+    //     // readAsDataURL
+    //     fileReader.readAsDataURL(blob)
+    //     fileReader.onerror = () => {
+    //       reject(new Error('blobToBase64 error'))
+    //     }
+    //   })
+    // }
   }
 }
 </script>

src/main.js

@@ -1,10 +1,12 @@
 import Vue from 'vue'
 import App from './App.vue'
 import 'element-ui/lib/theme-chalk/index.css'
-import { Table, TableColumn, Radio } from 'element-ui'
+import { Table, TableColumn, Radio, Loading } from 'element-ui'
 Vue.use(Table)
 Vue.use(TableColumn)
 Vue.use(Radio)
+Vue.use(Loading.directive);
+Vue.prototype.$loading = Loading.service;
 
 Vue.config.productionTip = false