业务

coderljw 2024-10-13

Vue
业务

小于 1 分钟

# 1. JSON 导出为 Excel

import { export_json_to_excel as exportJsonToExcel } from '@/plugins/Export2Excel'

exportExcel (row) {
  const excelData = [
    ['疫情报送表'],
    ['年龄', '性别', '姓名'],
    [18, '男', 'jack'],
    [17, '男', 'pony'],
    [16, '男', 'coderljw'],
    [''],
    ['互联网报表'],
    ['年龄', '性别', '姓名'],
    [18, '男', 'jack'],
    [17, '男', 'pony'],
    [16, '男', 'coderljw'],
    [''],
  ]
  exportJsonToExcel(excelData, row.name)
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

Export2Excel.js (opens new window)、Blob.js (opens new window)

# 2. 导出压缩文件

import { downloadFile, fileBlob } from '@/common/downloadFile'
import FileSaver from 'file-saver'
import JSZip from 'jszip'

async batchDownload () {
  const { fileList, row, $message } = this
  const zip = new JSZip()
  $message.loading({
    content: '加载中',
    duration: 0
  })
  const blobList = await Promise.all(fileList.map(item => fileBlob(item)))
  blobList.forEach((blob, index) =>
    zip.file(`${index + 1}-${fileList[index].name}`, blob, {
      binary: true
    })
  )
  zip
    .generateAsync({
      type: 'blob'
    })
    .then(content => FileSaver.saveAs(content, `${row.name}.zip`))
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# 3. JSON 美化

<div class="log-params">{{ logParams }}</div>

this.logParams = JSON.stringify(JSON.parse(row.ParamInfo), null, 4)

.log-params {
  white-space: pre-wrap;
  font-family: monospace;
  word-wrap: break-word;
}

1
2
3
4
5

# 4. 检索关键字

const { searchValue, treeData } = this

const matchAry = []
const regStr = searchValue
  .split('')
  .map(item => `(${item})([\\s\\S]*)`)
  .join('')
const reg = new RegExp(regStr)

// 递归查询匹配项
const recursion = ary =>
  ary.forEach(item => {
    if (reg.test(item.name)) matchAry.push({ ...item })
    if (item.childDepartments?.length) recursion(item.childDepartments)
  })

recursion(treeData)
this.matchAry = matchAry

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

Utils Config