purpose

Add multiple member information at one time, this time you need to develop a batch import function: import the file in advance in Excel format into in advance.

Steps

1. A rear end provides an Excel template file

2. Users fill in this Excel template file

3. Upload this file to achieve bulk import functionality

Program

1: Back end lead (a lot of work in the backend)

2: Front-end lead (front end read the Excel file, adjust the data to the backend)

usevue-admin-elementImporting scheme (front end)

1: Install the plugin NPM Install XLSX -S

2: Copy the components provided by Vue-Element-Admin in to our own project

src/components/UploadExcel Under the file, register in mian.js and import in the target page

import PageTools from './PageTools'
import UploadExcel from './UploadExcel'

export default {
     // Initialization of the plugin, the plugin gives you the global functionality, you can configure here
  install(Vue) {
         / / Global registration for components
         Vue.component ('PageTools', PageTools) // Register Toolbar Components
         Vue.component ('UPLoadExcel', UPLoadExcel) / / Register Import Excel Components
  }
}

data processing

Click to upload the event triggered

handleSuccess({ header, results }) {
      // HEADER title
             // ['Name', 'Mobile number']
             // RESULTS Excel form
             // [{'Name': 'Xiao Zhang', 'Mobile Number': '13712345678'}, {.....}]
      console.log(header, results)
    }

Data processing (title)

  transExcel(results) {
 // The title of the back end is English here to convert the title.
      const mapInfo = {
                 'Introduction Date': 'TimeOfentry',
                 'Mobile number': 'Mobile',
                 'Name': 'UserName',
                 'Turn the date': 'CorrectionTime',
                 'Work number': 'Worknumber',
                 'Department': 'DEPARTMENTNAME',
                 'Hiring form': 'formofemployment'
      }
      return results.map(zhObj => {
        const enObj = {}
                 Const enkeys = Object.keys (zhobj) // ['Name ",' mobile phone number ']

        zhKeys.forEach(zhKey => {
          const enKey = mapInfo[zhKey]

          enObj[enKey] = zhObj[zhKey]
        })

        return enObj
      })
    }

Time processing (incoming time format is a problem with a separate conversion)

// Transfer the content of the date format in the Excel file into standard time
// https://blog.csdn.net/qq_15054679/article/details/107712966
export function formatExcelDate(numb, format = '/') {
  const time = new Date((numb - 25567) * 24 * 3600000 - 5 * 60 * 1000 - 43 * 1000 - 24 * 3600000 - 8 * 3600000)
  time.setYear(time.getFullYear())
  const year = time.getFullYear() + ''
  const month = time.getMonth() + 1 + ''
  const date = time.getDate() + ''
  if (format && format.length === 1) {
    return year + format + month + format + date
  }
  return year + (month < 10 ? '0' + month : month) + (date < 10 ? '0' + date : date)
}

Send request after processing data