#博學谷IT學習技術支持#
目錄
1.實現(xiàn)excel導入
2.實現(xiàn)excel導出
1.實現(xiàn)excel導入
async success({ header, results }) {
? ? ? // 如果是導入員工
? ? ? ? const userRelations = {
? ? ? ? ? '入職日期': 'timeOfEntry',
? ? ? ? ? '手機號': 'mobile',
? ? ? ? ? '姓名': 'username',
? ? ? ? ? '轉(zhuǎn)正日期': 'correctionTime',
? ? ? ? ? '工號': 'workNumber'
? ? ? ? }
? ? ? ? const arr = []
? ? ? results.forEach(item => {
? ? ? ? ? const userInfo = {}
? ? ? ? ? Object.keys(item).forEach(key => {
? ? ? ? ? ? userInfo[userRelations[key]] = item[key]
? ? ? ? ? })
? ? ? ? arr.push(userInfo)
? ? ? ? })
? ? ? ? await importEmployee(arr) // 調(diào)用導入接口
? ? ? ? this.$router.back()
? ? }
邏輯判斷
async success({ header, results }) {
? ? ? if (this.type === 'user') {
? ? ? ? const userRelations = {
? ? ? ? ? '入職日期': 'timeOfEntry',
? ? ? ? ? '手機號': 'mobile',
? ? ? ? ? '姓名': 'username',
? ? ? ? ? '轉(zhuǎn)正日期': 'correctionTime',
? ? ? ? ? '工號': 'workNumber'
? ? ? ? }
? ? ? ? const arr = []
? ? ? ? // 遍歷所有的數(shù)組
? ? ? ? results.forEach(item => {
? ? ? ? // 需要將每一個條數(shù)據(jù)里面的中文都換成英文
? ? ? ? ? const userInfo = {}
? ? ? ? ? Object.keys(item).forEach(key => {
? ? ? ? ? // key是當前的中文名 找到對應的英文名
? ? ? ? ? ? if (userRelations[key] === 'timeOfEntry' || userRelations[key] === 'correctionTime') {
? ? ? ? ? ? ? userInfo[userRelations[key]] = new Date(this.formatDate(item[key], '/')) // 只有這樣, 才能入庫
? ? ? ? ? ? ? return
? ? ? ? ? ? }
? ? ? ? ? ? userInfo[userRelations[key]] = item[key]
? ? ? ? ? })
? ? ? ? ? // 最終userInfo變成了全是英文
? ? ? ? ? arr.push(userInfo)
? ? ? ? })
? ? ? ? await importEmployee(arr)
? ? ? ? this.$message.success('導入成功')
? ? ? }
? ? ? this.$router.back() // 回到上一頁
? ? },
? ? formatDate(numb, format) {
? ? ? const time = new Date((numb - 1) * 24 * 3600000 + 1)
? ? ? time.setYear(time.getFullYear() - 70)
? ? ? const year = time.getFullYear() + ''
? ? ? const month = time.getMonth() + 1 + ''
? ? ? const date = time.getDate() - 1 + ''
? ? ? if (format && format.length === 1) {
? ? ? ? return year + format + month + format + date
? ? ? }
? ? ? return year + (month < 10 ? '0' + month : month) + (date < 10 ? '0' + date : date)
? ? }
2.實現(xiàn)excel導出
首先安裝依賴
npm install xlsx file-saver -S
npm install script-loader -S -D
由于js-xlsx體積還是很大的，導出功能也不是一個非常常用的功能，所以使用的時候建議使用懶加載。使用方法如下：
import('@/vendor/Export2Excel').then(excel => {
? excel.export_json_to_excel({
? ? header: tHeader, //表頭 必填
? ? data, //具體數(shù)據(jù) 必填
? ? filename: 'excel-list', //非必填
? ? autoWidth: true, //非必填
? ? bookType: 'xlsx' //非必填
? })
})
excel導出參數(shù)的介紹
vue-element-admin提供了導出的功能模塊，在課程資源/excel導出目錄下，放置到src目錄下
excel導出基本的結(jié)構(gòu)
因為數(shù)據(jù)中的key是英文，想要導出的表頭是中文的話，需要將中文和英文做對應
// 導出excel數(shù)據(jù)
? ? exportData() {
? ? ? //? 做操作
? ? ? // 表頭對應關系
? ? ? const headers = {
? ? ? ? '姓名': 'username',
? ? ? ? '手機號': 'mobile',
? ? ? ? '入職日期': 'timeOfEntry',
? ? ? ? '聘用形式': 'formOfEmployment',
? ? ? ? '轉(zhuǎn)正日期': 'correctionTime',
? ? ? ? '工號': 'workNumber',
? ? ? ? '部門': 'departmentName'
? ? ? }
? ? ? // 懶加載
? ? ? import('@/vendor/Export2Excel').then(async excel => {
? ? ? ? const { rows } = await getEmployeeList({ page: 1, size: this.page.total })
? ? ? ? const data = this.formatJson(headers, rows)
? ? ? ? excel.export_json_to_excel({
? ? ? ? ? header: Object.keys(headers),
? ? ? ? ? data,
? ? ? ? ? filename: '員工信息表',
? ? ? ? ? autoWidth: true,
? ? ? ? ? bookType: 'xlsx'
? ? ? ? })
? ? ? ? // 獲取所有的數(shù)據(jù)
? ? ? ? // excel.export_json_to_excel({
? ? ? ? //? header: ['姓名', '薪資'],
? ? ? ? //? data: [['張三', 12000], ['李四', 5000]],
? ? ? ? //? filename: '員工薪資表',
? ? ? ? //? autoWidth: true,
? ? ? ? //? bookType: 'csv'
? ? ? ? // })
? ? ? })
? ? },
? ? // 該方法負責將數(shù)組轉(zhuǎn)化成二維數(shù)組
? ? formatJson(headers, rows) {
? ? ? // 首先遍歷數(shù)組
? ? ? // [{ username: '張三'},{},{}]? => [[’張三'],[],[]]
? ? ? return rows.map(item => {
? ? ? ? return Object.keys(headers).map(key => {
? ? ? ? ? if (headers[key] === 'timeOfEntry' || headers[key] === 'correctionTime') {
? ? ? ? ? ? return formatDate(item[headers[key]]) // 返回格式化之前的時間
? ? ? ? ? } else if (headers[key] === 'formOfEmployment') {
? ? ? ? ? ? var en = EmployeeEnum.hireType.find(obj => obj.id === item[headers[key]])
? ? ? ? ? ? return en ? en.value : '未知'
? ? ? ? ? }
? ? ? ? ? return item[headers[key]]
? ? ? ? }) // => ["張三", "13811"，"2018","1", "2018", "10002"]
? ? ? })
? ? ? // return data
? ? ? // return rows.map(item => {
? ? ? //? // item是對象? => 轉(zhuǎn)化成只有值的數(shù)組 => 數(shù)組值的順序依賴headers? {username: '張三'? }
? ? ? //? // Object.keys(headers)? => ["姓名", "手機號",...]
? ? ? //? return Object.keys(headers).map(key => {
? ? ? //? ? return item[headers[key]]
? ? ? //? }) // /? 得到 ['張三'，’129‘，’dd‘,'dd']
? ? ? // })
? ? }
導出時間格式的處理
formatJson(headers, rows) {
? ? ? return rows.map(item => {
? ? ? ? // item是一個對象? { mobile: 132111,username: '張三'? }
? ? ? ? // ["手機號", "姓名", "入職日期" 。。]
? ? ? ? return Object.keys(headers).map(key => {
? ? ? ? ? // 需要判斷 字段
? ? ? ? ? if (headers[key] === 'timeOfEntry' || headers[key] === 'correctionTime') {
? ? ? ? ? ? // 格式化日期
? ? ? ? ? ? return formatDate(item[headers[key]])
? ? ? ? ? } else if (headers[key] === 'formOfEmployment') {
? ? ? ? ? ? const obj = EmployeeEnum.hireType.find(obj => obj.id === item[headers[key]])
? ? ? ? ? ? return obj ? obj.value : '未知'
? ? ? ? ? }
? ? ? ? ? return item[headers[key]]
? ? ? ? })
? ? ? ? // ["132", '張三’， ‘’，‘’，‘’d]
? ? ? })
? ? ? // return rows.map(item => Object.keys(headers).map(key => item[headers[key]]))
? ? ? // 需要處理時間格式問題
? ? }
