Vue で Excel インポート機能を実装する詳細な手順

'./PageTools' から PageTools をインポートします
'./UploadExcel' から UploadExcel をインポートします。
 
エクスポートデフォルト{
  // プラグインの初期化。プラグインが提供するグローバル関数はここで設定できます。install(Vue) {
    // コンポーネントのグローバル登録 Vue.component('PageTools', PageTools) // ツールバー コンポーネントを登録 Vue.component('UploadExcel', UploadExcel) // インポートされた Excel コンポーネントを登録 }
} 

/**
     * 結果 Excel テーブルの内容 // [ {'名前': 'Xiao Zhang', '携帯電話番号': '13712345678'}, {.....} ]
      // ターゲット // [ {'username': 'Xiao Zhang', 'mobile': '13712345678'}, {.....} ]
     */
    transExcel(結果) {
      定数ユーザーリレーション = {
        「求人エントリー日」: 「timeOfEntry」、
        「携帯電話番号」: 「携帯電話」,
        '名前': 'ユーザー名',
        「訂正日」: 「訂正時刻」,
        '作業番号': 'workNumber',
        '部門': '部門名',
        「雇用形態」: 「formOfEmployment」
      }
      結果を返します。map(item => {
        定数オブジェクト = {}
        // 1. このオブジェクトのすべての属性名を取得します: ['name', 'phone number']
        // 2. この配列を走査し、中国語名を通じて userRelations 内の対応する英語名を見つけ、値を保存します。const zhKeys = Object.keys(item)
        zhKeys.forEach(zhKey => {
          定数 enKey = ユーザーリレーション[zhKey]
          // 時間形式の場合は変換します if (enKey === 'correctionTime' || enKey === 'timeOfEntry') {
            obj[enKey] = 新しい日付(formatExcelDate(item[zhKey]))
          } それ以外 {
            obj[enKey] = アイテム[zhKey]
          }
        })
 
        オブジェクトを返す
      })
    }
 
handleSuccess({ 結果、ヘッダー }) {
    
  console.log('現在の Excel ファイルから読み取られた内容は', results)
  // 結果: [{参加日: 44502、名前: xxxx}]
  // ターゲット:
  // 結果: [{timeOfEntry: 44502, ユーザー名: xxxx}]
  // Excel から読み取ったフォーマットを処理する const arr = this.transExcel(results)
  console.log('変換後のフォーマットは', arr)
})

// Excel ファイルの日付形式を標準時間に戻す // https://blog.csdn.net/qq_15054679/article/details/107712966
エクスポート関数formatExcelDate(numb, format = '/') {
  const time = new Date((数値 - 25567) * 24 * 3600000 - 5 * 60 * 1000 - 43 * 1000 - 24 * 3600000 - 8 * 3600000)
  時間.setYear(時間.getFullYear())
  定数年 = time.getFullYear() + ''
  定数月 = time.getMonth() + 1 + ''
  定数日付 = time.getDate() + ''
  if (format && format.length === 1) {
    年 + 形式 + 月 + 形式 + 日付を返す
  }
  年 + (月 < 10 ? '0' + 月 : 月) + (日 < 10 ? '0' + 日付 : 日) を返します
}

'@/api/employees' から { importEmployee } をインポートします。
エクスポートデフォルト{
  名前: 'インポート'、
  メソッド: {
    非同期handleSuccess({ 結果、ヘッダー }) {
      試す {
        console.log('現在の Excel ファイルから読み取られた内容は', results)
        // 結果: [{参加日: 44502、名前: xxxx}]
        // ターゲット:
        // 結果: [{timeOfEntry: 44502, ユーザー名: xxxx}]
        const arr = this.transExcel(結果)
        console.log('変換後のフォーマットは', arr)
        //アップロードインターフェースを呼び出し、
        const rs = importEmployee(arr) を待機します
        console.log('アップロードインターフェースを呼び出す', rs)
        // アップロードが成功したら、前のページに戻ります this.$router.back()
        this.$message.success('操作は成功しました')
      } キャッチ (エラー) {
        this.$message.error(err.message)
      }
    }
}