人的資源中部台湾プロジェクト (day08)

汎用ツールバーをカプセル化します

目标: 誰もが使用できる共通のツールバーをカプセル化します。

共通ツールバーのコンポーネント構成

その後のビジネス開発では、カプセル化のためのパブリックコンポーネントとして、下図のようなツールバーがよく使用されます。

コンポーネントsrc/components/PageTools/index.vue

<テンプレート> 
  <el-card class="page-tools"> 
    <el-row type="flex" justify="space-between" align="middle"> 
      <el-col> 
        <div v-if="showBefore" " class="before"> 
          <i class="el-icon-info" /> 
          <!-- 定义先頭得插槽 --> 
          <slot name="before" /> 
        </div> 
      </el-col > 
      <el-col> 
        <el-row type="flex" justify="end"> 
           <!-- 後にスロットを定義します --> 
           <slot name="after" /> 
        </el-row> 
      </el-col> 
    </el-row> 
  </el-card> 
</template> 
<
script >
デフォルトのエクスポート { 
  props: { 
    showBefore: {
      タイプ: ブール値、
      デフォルト: false 
    } 
  }
 
} 
</script> 
<
style lang='scss'> 
 .page-tools { 
    margin: 10px 0; 
    .before {
      行の高さ: 34px; 
    i {
      マージン右: 5px; 
      色: #409eff; 
    表示
    : インラインブロック; 
    パディング: 0px 10px; 
    境界半径: 3px; 
    ボーダー: 1px ソリッド rgba(145, 213, 255, 1); 
    背景: rgba(230, 247, 255, 1); 
  } 
 } 
</スタイル>

コンポーネントの統合登録

便宜上、すべてのページがこのコンポーネントを参照する必要はなく、グローバルに登録できます。

登録エントリを提供するsrc/componets/index.js

// このファイルは、すべてのパブリック コンポーネントのグローバル登録を担当します Vue.use import 
PageTools from './PageTools' 
export default { 
  install(Vue) { 
    // グローバル共通バー コンポーネント オブジェクトを登録します
    Vue.component('PageTools',ページツール) 
  } 
}

入口で登録src/main.js

import Component from '@/components' 
Vue.use(Component) // 独自のプラグインを登録します

コードを送信する

本节任务: 汎用ツールバーをカプセル化します。

従業員リストページの基本的なレイアウトと構造

目标: 従業員リストページの基本的なレイアウトと構造を実装します。

構造コード src/employees/index.vue

<template> 
  <div class="dashboard-container"> 
    <div class="app-container"> 
      <page-tools :show-before="true"> 
        <span slot="before">共166条记录</ span> 
        <template slot="after"> 
          <el-button size="small" type="warning">导入</el-button> 
          <el-button size="small" type="danger">导出</ el-button> 
          <el-button size="small" type="primary">新增员工</el-button> 
        </template> 
      </page-tools> 
      <!-- テーブルの配置とページネーション --> 
      <el-card> 
        <el-table border> 
          <el-table-column label="シリアル番号" sortable="" />  
          <el-table-column label="name" sortable = "" />
          <el-table-column label="ジョブ番号"並べ替え可能 = "" /> 
          <el-table-column label="聘用形式" sortable="" /> 
          <el-table-column label="部门" sortable=" " /> 
          <el-table-column label="入职時間间" sortable="" /> 
          <el-table-column label="账户状態态" sortable="" /> 
          <el-table-column label="操作" sortable="" fix="right" width="280"> 
            <template> 
              <el-button type="text" size="small">閲覧</el-button> 
              <el-button type="text" size ="small">转正</el-button><el-button type="text" size="small">调岗</el-button> 
              <el-button type="text" size="small">离职</el-button> 
              <el-button type ="text" size="small">角色</el-button>
              <el-button type="text" size="small">删除</el-button>  
            </template>
          </el-table-column> 
        </el-table> 
        <!-- 分页组件 --> 
        <el-row type ="flex" justify="center" align="middle" style="height: 60px"> 
          <el-paginationlayout="prev, pager, next" /> 
        </el-row> 
      </el-card> 
    < /div> 
  </div> 
</template>

コードを送信する

本节任务: 従業員一覧ページの基本的なレイアウトと構造

従業員リストデータのリクエストとページネーションの読み込み

目标従業員データのロードとページネーションのリクエストを実装する

まず、従業員のロードリクエストをカプセル化します。src/api/employees.js

/** 
 * 従業員の包括的なリスト データを取得
 * ***/ 
export function getEmployeeList(params) { 
  return request({ 
    url: '/sys/user', 
    params 
  }) 
}

次に、データのロードとページネーションのロジックを実装します。

import { getEmployeeList } from '@/api/employees' 
export default { 
  data() { 
    return { 
      loading: false, 
      list: [], // 接データの
      page: { 
        page: 1, //現在の页码
        size: 10, 
        total: 0 // 总数
      } 
    }
 
  }、
  created() { 
    this.getEmployeeList() 
  }、
  メソッド: { 
    changePage(newPage) { 
      this.page.page = newPage 
      this.getEmployeeList() 
    }、
    async getEmployeeList() { 
      this .loading = true 
      const { total, rows } = await getEmployeeList(this.page)
      this.page.total = 合計
      this.list = 行
      this.loading = false 
    } 
  } 
}

バインドフォーム

      <el-card v-loading="loading"> 
        <el-table border :data="list"> 
          <el-table-column label="序号" sortable="" type="index" /> 
          <el-table-column label="姓名" sortable="" prop="ユーザー名" /> 
          <el-table-column label="工号" sortable="" prop="workNumber" /> 
          <el-table-column label="聘用形式" sortable="" prop="formOfEmployment" /> 
          <el-table -column label="部门" sortable="" prop="部署名" /> 
          <el-table-column label="入职時間间" sortable="" prop="timeOfEntry" /> < 
          el-table-column label="账户状態态" sortable="" prop="enableState"/ 
          > <el-table-column label="操作" sortable="" fix="right" width="280"> <
            テンプレート>
              <el-button type="text" size="small">查看</el-button> 
              <el-button type="text" size="small">转正</el-button> 
              <el-button type= "text" size="small">调岗</el-button> 
              <el-button type="text" size="small">离职</el-button> 
              <el-button type="text" size= "small">角色</el-button> 
              <el-button type="text" size="small">删除</el-button> 
            </template> 
          </el-table-column> 
        </el-table > 
        <!-- 分页组件 -- 
        > <el-row type="flex" justify="center" align="middle" style="height: 60px"> <el-paginationlayout 
          = 
            "prev, pager, next" 
            :page-サイズ="ページ.サイズ"
            :current-page="page.page" 
            :total="page.total" 
            @current-change="changePage" 
          /> 
        </el-row> 
      </el-card>

コードを送信する

本节任务従業員リストデータのリクエストとページネーションの読み込み

従業員リストのデータはフォーマットされています

目标: リストの内容をフォーマットします。

列の書式設定プロパティを利用してエンゲージメントフォームを処理する

前のセクションでは、リスト内の雇用形態/入力時刻とアカウントステータスを表示コンテンツとして処理する必要があります

それでは、雇用フォームの1 は何を意味しますか? これは実際に必要な列挙型データです。このデータの保存ファイル资源/枚举は、当社が提供するディレクトリにあります。src/api列挙型の下にフォルダーを置くことができます。

雇用形態については、el-table-columnのフォーマッタ属性を使用して設定できます。

  import EmployeeEnum from '@/api/constant/employees' 
    <!-- format雇用フォーム --> 
    <el-table-column label="employment form" sortable :formatter="formatEmployment" prop="formOfEmployment" /> / 
   /雇用フォームのフォーマット
    formatEmployment(row, column, cellValue,index) { 
      // 1 に対応する値を見つけるには
      const obj = EmployeeEnum.hireType.find(item => item.id === cellValue) 
      return obj ? obj .value : '不明' 
    }

フィルターは時間形式の処理に対応します

エントリー時には、スコープ指定されたスロットを処理に使用できます。

<el-table-column label="エントリ時間" sortable prop="timeOfEntry"> 
            <template slot-scope="obj"> 
              { 
  
  { 
                obj.row.timeOfEntry | filter 
              }} 
            </template> 
  </el-table -コラム>

問題は、フィルターがどこから来たのかということです。

では资源/过滤器、いくつかのツールメソッドが提供されており、それらをフィルタに変換できます。まずそれらを次の場所にコピーします。src

main.jsユーティリティメソッドをフィルタに変換する

import * as filters from '@/filters' // ツールクラスをインポート
// グローバルフィルターを登録
Object.keys(filters).forEach(key => { 
  // フィルターを登録
  Vue.filter(key, filters[key] ) 
})

さて、これでツールクラスのメソッドをフィルタとして快適に使用できるようになりました。

       <el-table-column label="エントリ時間" sortable="" align="center"> 
            <!-- スコープスロット--> 
            <template slot-scope="{ row }">{ 
  
  { row.timeOfEntry | formatDate }}</template> 
       </el-table-column>

最後の項目であるアカウントステータスは、スイッチコンポーネントスイッチで表示できます。

<el-table-column label="Account Status" align="center" sortable="" prop="enableState"> 
            <template slot-scope="{ row }"> 
              <!-- に従って開くかどうかを決定します。現在の状態 スイッチ --> 
              <el-switch :value="row.enableState === 1" /> 
            </template> 
    </el-table-column>

コードを送信する

本节任务従業員リストのデータはフォーマットされています

従業員削除機能

目标従業員を削除する機能を実装する

まず従業員を削除するリクエストをカプセル化します。

/** 
 * 従業員インターフェイスの削除
 * ****/ 
export
function delEmployee(id) { 
  return request({ 
    url: `/sys/user/${id}`, 
    method: 'delete' 
  }) 
}

削除機能

<template slot-scope="{ row }"> 
    <el-button type="text" size="small">查看</el-button> 
    <el-button type="text" size="small">转正</el-button> 
    <el-button type="text" size="small">调岗</el-button> 
    <el-button type="text" size="small">离职</el-button > 
    <el-button type="text" size="small">角色</el-button> 
    <el-button type="text" size="small" @click="deleteEmployee(row.id)">删除</el-button> 
</template>

// 従業員を削除します
    async deleteEmployee(id) { 
      try { 
        await this.$confirm('この従業員を削除してもよろしいですか') 
        await delEmployee(id) 
        // 最初のページではなく、要素が 1 つしかない場合、削除は成功しました。ページ番号 -1 を入力し、リストを再度取得する必要があります。
        if (this.list.length === 1 && this.page.page !== 1) { 
          this.page.page-- 
        } 
        this.getEmployeeList() 
        this.$message.success('従業員を正常に削除') 
      } catch (error) { 
        console.log(error) 
      } 
    }

コードを送信する

本节任务: 従業員の削除機能

従業員機能の追加 - ポップアップレイヤー - 検証 - 部門

目标：新規従業員追加機能を実現

新しい従業員ポップアップコンポーネントを作成する

クリックして従業員を追加する場合、同様のポップアップレイヤーが必要です

同様の组织架构コンポーネント、ポップアップレイヤーコンポーネントも作成しますsrc/views/employees/components/add-employee.vue

<template> 
  <el-dialog title="従業員の追加" :visible="showDialog"> 
    <!-- Form --> 
    <el-form label-width="120px"> 
      <el-form-item label=" 名前"> 
        <el-input style="width:50%" placeholder="名前を入力してください" /> 
      </el-form-item> 
      <el-form-item label="携帯電話"> 
        <el-input style = "width:50%" placeholder="電話番号を入力してください" /> 
      </el-form-item> 
      <el-form-item label="入力時間"> 
        <el-date-picker style="width:50%" placeholder="エントリー時間を選択してください" /> 
      </el-form-item> 
      <el-form-item label="採用フォーム"> 
        <el-select style="width:50%" placeholder="選択してください" /> 
      </el-form-item> 
      <el-form-item label="求人番号">
        <el-input style="width:50%" placeholder="求人番号を入力してください" /> 
      </el-form-item> 
      <el-form-item label="部門"> 
        <el-input style=" width :50%" placeholder="部門を選択してください" /> 
      </el-form-item> 
      <el-form-item label="時間を変換"> 
        <el-date-picker style="width:50%" placeholder= "正の時間を選択してください" /> 
      </el-form-item> 
    </el-form> 
    <!-- フッタースロット--> 
    <template v-slot:footer> 
      <el-row type="flex " justify ="center"> 
        <el-col:scan="6"> 
          <el-button size="small">取消</el-button> 
          <el-button type="primary" size="small">确定</el-button> 
        </el-col > 
      </el-row> 
    </template>
  </el-dialog> 
</template> 
<script>

デフォルトのエクスポート { 
  props: { 
    showDialog: { 
      type: ブール値、
      デフォルト: false 
    } 
  } 
} 
</script> 
<style>
 
</style>

ポップアップレイヤーを引用するには、ポップアップレイヤーをクリックします。

親コンポーネント、ポップアップレイヤーで参照される

'./components/add-employee' から AddEmployee をインポートします

//
データに showDialog を定義: false // ポップアップ レイヤーの表示制御変数

<!-- 新しいコンポーネントを配置します --> 
 <add-employee :show-dialog.sync="showDialog" /> 
 <!-- ボタン バインディング イベント --> 
 <el-button icon="plus" type="primary" size="small" @click="showDialog = true">新しい従業員を追加</el-button>

新入社員のフォーム検証

新入社員APIをカプセル化するsrc/api/employees.js

/** ** 
 * 新しい従業員を追加するためのインターフェイス
 * **/ 
export function addEmployee(data) { 
  return request({ 
    method: 'post', 
    url: '/sys/user', 
    data 
  }) 
}

従業員属性の検証ルールを追加する

import EmployeeEnum from '@/api/constant/employees' 
data
  () { 
    return { 
      EmployeeEnum, // data でデータを定義
      // form data 
      TreeData: [], // ツリー データを受け取る配列を定義
      showTree: false, / / コントロール ツリーの表示または非
      表示loading: false, // コントロール ツリーのプログレス バーの表示または非表示
      formData: { 
        username: '', 
        mobile: '', 
        formOfEmployment: '', 
        workNumber: '', 
        DepartmentName: '', 
        timeOfEntry: ' '、
        correctionTime: '' 
      }、
      ルール: {
        ユーザー名: [{ 必須: true、メッセージ: 'ユーザー名を空にすることはできません'、トリガー: 'ぼかし' }、{
          最小: 1、最大: 4、メッセージ: 'ユーザー名は 1 ～ 4 桁です'
        }]、
        モバイル: [{ 必須: true、メッセージ: '電話番号を空にすることはできません'、トリガー: 'ぼかし' }、{
          パターン: /^1[3-9]\d{9}$/、メッセージ: ' 携帯電話番号の形式が正しくありません'、トリガー: 'blur' 
        }]、
        formOfEmployment: [{ required: true、message: '雇用フォームを空にすることはできません'、トリガー: 'blur' }]、
        workNumber: [{ required: true、メッセージ: 'ジョブ番号を空にすることはできません'、トリガー: 'ぼかし' }]、
        部門名: [{ 必須: true、メッセージ: '部門を空にすることはできません'、トリガー: '変更' }]、
        timeOfEntry: [ { 必須: true、メッセージ: 'エントリ時間'、トリガー: 'ぼかし' }] 
      } 
    } 
  }

データのバインディングとルールの検証

    <el-form :model="formData" ref="addEmployee" :rules="rules" label-width="120px"> <el-form-item label="name" prop="username"> <el 
      - 
        input v-model="formData.username" style="width:50%" placeholder="名前を入力してください" /> 
      </el-form-item> 
      <el-form-item label="携帯電話" prop=" mobile" > 
        <el-input v-model="formData.mobile" style="width:50%" placeholder="電話番号を入力してください" /> 
      </el-form-item> 
      <el-form-item label ="エントリ時間" prop="timeOfEntry"> 
        <el-date-picker v-model="formData.timeOfEntry" style="width:50%" placeholder="日付を選択してください" /> 
      </el-form-item> 
      <el-form-item label="雇用フォーム" prop="formOfEmployment">
        <el-select v-model="formData.formOfEmployment" style="width:50%" placeholder="選択してください" /> 
      </el-form-item> 
      <el-form-item label="雇用番号" prop ="workNumber"> 
        <el-input v-model="formData.workNumber" style="width:50%" placeholder="作品番号を入力してください" /> </el-form-item> < 
      el 
      -form- item label="部門" prop="部門名"> 
        <el-input v-model="formData.部門名" style="width:50%" placeholder="部門を選択してください" /> 
      </el-form-item> 
      <el-form-item label="修正時間" prop="correctionTime"> 
        <el-date-picker v-model=" formData .correctionTime" style="width:50%" placeholder="日付を選択してください" /> 
      </el-form-item> 
    </el-form>

部門データをツリーにロードする

採用フォームと選考部門の処理

従業員の所属部署はツリー部署から選択します

部門データを取得してツリーを変換する

import { getDepartments } from '@/api/Departments' 
import { tranListToTreeData } from '@/utils' 
  data () { 
      return { 
             // フォーム データ
       TreeData: [], // ツリー データを受け取る配列を定義
       showTree: false, // コントロール ツリーの表示または非表示
       loading: false, // コントロール ツリーのプログレス バーの表示または非表示
      } 
  }、
  メソッド: { 
      async getDepartments() { 
          this.showTree = true 
          this.loading = true 
          const { depts } = await getDepartments () 
          // depts は配列ですがツリーではありません
          this.treeData = tranListToTreeData(depts, '') 
          this.loading = false 
    }, 
  }

部門割り当てフォームデータをクリックします

部門を選択し、フォームデータを割り当てます

<el-form-item label="部門" prop="部門名"> 
        <el-input v-model="formData.部門名" style="width:50%" placeholder="部門を選択してください" @focus=" getDepartments " /> 
        <!-- ツリー コンポーネントを配置します --> 
        <el-tree 
          v-if="showTree" 
          v-loading="loading" 
          :data="treeData" 
          default-expand-all="" 
          :props= " { label: 'name' }" 
          @node-click="selectNode" 
        /> 
      </el-form-item>

部門をクリックするとトリガーされます

    selectNode(node) { 
      this.formData.DepartmentName = ノード.名
      this.showTree = false 
    }

雇用形態

    <el-form-item label="雇用フォーム" prop="formOfEmployment"> 
        <el-select v-model="formData.formOfEmployment" style="width:50%" placeholder="選択してください"> <! 
          --トラバーサルはコンポーネント データのみをトラバースできます --> 
          <el-option v-for="item in EmployeeEnum.hireType" :key="item.id" :label="item.value" :value="item.id" / > 
        </el-select> 
      </el-form-item>

新入社員機能 - 確認 - キャンセル

OKイベントとCancelイベントのバインド

<el-button size="small" @click="btnCancel">取消</el-button> 
<el-button type="primary" size="small" @click="btnOK">确定</el-button >

新しいインターフェースを呼び出す

// インポートリクエストメソッド
import { addEmployee } from '@/api/employees'

    // OK がクリックされたときにフォーム全体を検証します
    async btnOK() { 
      try { 
        await this.$refs.addEmployee.validate() 
        // 新しいインターフェイスを呼び出します
        await addEmployee(this.formData) // 従業員を追加します
        // 従業員に通知します親コンポーネント データを更新します
        // this.$parent 親コンポーネントに直接呼び出すことができるインスタンスは実際には親コンポーネントです this // this. 
        $emit 
        this.$parent.getEmployeeList() 
        this.$parent.showDialog = false 
      } catch (error) { 
        console.log(error) 
      } 
    }, 
    btnCancel() { 
      // 元のデータをリセット
      this.formData = { 
        username: '', 
        mobile: '', 
        formOfEmployment: '', 
        workNumber: '',
        部門名: '', 
        timeOfEntry: '', 
        correctionTime: '' 
      } 
      this.$refs.addEmployee.resetFields() // 検証結果をリセット
      this.$emit('update:showDialog', false) 
    }

新しい従業員を追加する機能は、組織構造の機能と非常によく似ているため、ここでは詳しく説明しません。

コードを送信する

本节任务従業員機能とポップアップレイヤーを追加

従業員インポートコンポーネントパッケージ

目标: Excel データをインポートするファイルをカプセル化します。

まず、同様のコンポーネントをカプセル化します。最初に注意すべきことは、vue-element-admin がすでに同様の機能を提供していることです。コードアドレスを変更するだけで済みます。

同様の機能コンポーネントについては、その使用方法とカプセル化方法を知るだけで済みます。

Excelインポート機能はnpmパッケージを使用する必要があるためxlsx、xlsxプラグインをインストールする必要があります

$ npm i xlsx

vue-element-admin が提供するインポート関数を使用して新しいコンポーネントを作成します。場所は次のとおりです。src/components/UploadExcel

グローバルインポートExcelコンポーネントを登録する

import PageTools from './PageTools' 
import UploadExcel from './UploadExcel' 
export default { 
  install(Vue) { 
    Vue.component('PageTools', PageTools) // ツールバー コンポーネントを登録
    Vue.component('UploadExcel', UploadExcel) / / Excel コンポーネントのインポートを登録します
  } 
}

スタイルとレイアウトを変更する

<テンプレート> 
 <div class="upload-excel"> 
    <div class="btn-upload"> 
      <el-button :loading="loading" size="mini" type="primary" @click="handleUpload">
        点击上传
      </el-button> 
    </div> 
<
    input ref="excel-upload-input" class="excel-upload-input" type="file" accept=".xlsx, .xls" @change="handleClick"> 
    <div class="drop" @drop="handleDrop" @dragover="handleDragover" @dragenter="handleDragover"> <i class=" 
      el-icon-upload" /> 
      <span > 文章をここに移動します</span> 
    </div> 
  </div> 
</template> 
<stylescoped lang="scss"> 
.upload-excel { 
  display: flex; 
  justify-content: center;
   マージントップ: 100px; 
   .excel-upload-input{
       表示: なし; 
        z インデックス: -9999; 
   .btn-upload , .drop{ border 
     : 
      1px 破線 #bbb; 
      幅: 350ピクセル; 
      高さ: 160ピクセル; 
      テキスト整列: 中央; 
      行の高さ: 160px; 
   .drop 
   {
       行の高さ: 80px; 
       色: #bbb; 
      i {
        フォントサイズ: 60px; 
        表示ブロック; 
      } 
   } 
} 
</スタイル>

コードを送信する

本节任务: 従業員インポートコンポーネントパッケージ

従業員の輸入

目标：従業員の導入を実現

パブリックインポート用のページルートを作成する

新しいパブリックインポートページを作成し、ルートをマウントします。 src/router/index.js

{ 
    path: '/import', 
    Component: Layout, 
    hidden: true, // 左側のメニューの
    子に非表示: [{ 
      path: '', // セカンダリ ルーティング パスに何もない場合は、セカンダリのデフォルト ルーティング
      コンポーネントを意味します: () = > import('@/views/import') 
    }] 
  },

インポートルーティングコンポーネントを作成する src/views/import/index.vue

<template> 
  <!-- パブリック インポート コンポーネント --> 
  <upload-excel :on-success="success" /> 
</template>

Excel インポートコードを分析し、インターフェイスをカプセル化します。

従業員をインポートするための API インターフェイスをカプセル化する

/** * 
 * 従業員をインポートするためのインターフェイスをカプセル化します
 * 
 * ***/ 
export
function importEmployee(data) { 
  return request({ 
    url: '/sys/user/batch', 
    method: 'post', 
    data 
  }) 
}

Excelインポートを実装する

インポートされた Excel データの取得、Excel インターフェイスのインポート

    async success({ header, results }) { 
      // 従業員をインポートする場合
        const userRelations = { 
          'エントリの日付': 'エントリの時刻', 
          '携帯電話番号': 'モバイル', 
          '名前': 'ユーザー名', 
          'エントリの日付正規化' : '修正時間', 
          'ジョブ番号': '作業番号' 
        } 
        const arr = [] 
       results.forEach(item => { 
          const userInfo = {} 
          Object.keys(item).forEach(key => { 
            userInfo[userRelations [key ]] = item[key] 
          }) 
         arr.push(userInfo) 
        }) 
        await importEmployee(arr) // インポート インターフェイス
        this.$router を呼び出します。戻る() 
    }

このページがより多くのインポート機能を提供できるようにするために、ページ内のパラメータを使用して従業員をインポートするかどうかを判断できます。

data() { 
    return { 
      type: this.$route.query.type 
    } 
  },

Excelに日付形式がある場合、実際に変換される値は数値なので、変換するメソッドが必要です。

    formatDate(numb, format) { 
      const time = new Date((numb - 1) * 24 * 3600000 + 1) 
      time.setyear(time.getFull Year() - 70) 
      const year = time.getFull Year() + '' 
      const month = time.getMonth() + 1 + '' 
      const date = time.getDate() - 1 + '' 
      if (format && format.length === 1) { 
        return year + format + month + format + date 
      } 
      return year + (月 < 10 ? '0' + 月 : 月) + (日付 < 10 ? '0' + 日付 : 日付) 
    }

注意が必要です、导入的手机号不能和之前的存在的手机号重复

論理的な判断

async success({ header, results }) { 
      if (this.type === 'user') { 
        const userRelations = { 
          'エントリ日': 'エントリ時間', 
          '携帯電話番号': 'mobile', 
          '名前': ' username', 
          'Correct date': 'correctionTime', 
          'jobnumber': 'workNumber' 
        } 
        const arr = [] 
        // すべての配列を走査します
        results.forEach(item => { 
        // それぞれにアイテムを入れる必要があります)データの中国語は英語に置き換えられます
          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.getFull Year() - 70) 
      const year = time.getFull Year() + '' 
      const月 = 時間.getMonth() + 1 + ''
      const date = time.getDate() - 1 + '' 
      if (format && format.length === 1) { 
        return year + format + month + format + date 
      } 
      return year + (month < 10 ? '0' + month : 月) + (日付 < 10 ? '0' + 日付 : 日付) 
    }

スタッフページジャンプ

<el-button type="warning" size="small" @click="$router.push('/import?type=user')">导入
</el-button>

目标: 従業員のインポートを実装する

従業員エクスポートExcel機能

目標：従業員データのエクスポート機能の実現

日々のビジネスでよく目にするエクセルのエクスポート機能とその使い方

Excel のインポートとエクスポートはすべてjs-xlsxによって実装されます。

に基づいて、Export2Excel.js がjs-xlsxカプセル化され、データのエクスポートが容易になります。

Excel のインストールに必要な依存関係とオンデマンド読み込み

なぜなら、Export2Excelに依存するだけでなく、とにjs-xlsxも依存するからです。file-saverscript-loader

したがって、最初に次のコマンドをインストールする必要があります。

npm install xlsx ファイルセーバー -S 
npm install スクリプトローダー -S -D

js-xlsxボリュームがまだ非常に大きいため、エクスポート機能はあまり一般的な機能ではないため、使用する場合は遅延読み込みを使用することをお勧めします。使用方法は次のとおりです。

import('@/vendor/Export2Excel').then(excel => { 
  excel.export_json_to_excel({ 
    header: tHeader, // ヘッダーは必須
    データです, // 特定のデータは必須です
    filename: 'excel-list', // そうでないrequired 
    autoWidth: true, //必須ではありません
    bookType: 'xlsx' //必須ではありません
  }) 
})

Excel エクスポートパラメーターの概要

vue-element-admin は、エクスポートされた関数モジュールを提供します。これらは、コースの resource/excel エクスポートディレクトリの下の src ディレクトリに配置されます。

パラメータ

パラメータ	説明する	タイプ	オプションの値	デフォルト
ヘッダ	エクスポートされたデータのヘッダー	配列	/	[]
データ	特定のデータをエクスポートする	配列	/	[[]]
ファイル名	エクスポートファイル名	弦	/	エクセルリスト
autoWidth	セルを幅に適応させるかどうか	ブール値	真/偽	真実
本の種類	エクスポートファイルの種類	弦	xlsx、csv、txt、その他	xlsx

Excelエクスポートの基本構造

私たちにとって最も重要なことの 1 つは、テーブルのヘッダーとデータを対応させることです。

データのキーは英語であるため、エクスポートするヘッダーが中国語の場合は、中国語と英語を一致させる必要があります。

   const headers = { 
        '携帯電話番号': 'mobile', 
        '名前': 'ユーザー名', '
        入力日': 'timeOfEntry', 
        '雇用形態': 'formOfEmployment', 
        '変換日': 'correctionTime', 
        '雇用番号': '勤務番号', 
        '部門': '部門名' 
      }

次に、エクスポートコードを完成させます

    // Excel データをエクスポートします
    。exportData() { 
      // 操作を実行します。
      // ヘッダーの対応
      const headers = { 
        'name': 'username', 
        'mobilenumber': 'mobile', 
        'date ofentry': 'timeOfEntry', 
        ' 雇用Form': 'formOfEmployment', 
        'Conversion Date': 'correctionTime', 
        'Work Number': 'workNumber', 
        'Department': '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' 
}
        ) 
        // すべてのデータを取得
//
        Excel.export_json_to_excel({ 
        // header: ['name', 'salary'], 
        // データ: [['張三', 12000], ['李思', 5000]], // ファイル名
        : '従業員給与表', 
        // autoWidth: true, 
        // bookType: 'csv' 
        // } ) } 
      ) 
    }, 
    // このメソッドは配列を 2 次元配列に変換します
    formatJson(headers, rows) { 
      // まず配列を走査します
      // [{ username: 'Zhang San'},{},{ }] => [ ['Zhang San'],[],[]]
      は行を返します。マップ(アイテム => {
        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 : 'Unknown' 
          } 
          return item[headers[key]] 
        }) // => ["張三", "13811", "2018", "1", "2018", "10002 " ] 
      }) 
      // データを返します
      // 行を返します。
      map(item = > { // // item はオブジェクトです => 値のみの配列に変換 => 配列の値の順序はヘッダーに依存します {username: 'Zhang San' }
      // // Object.keys(headers) => ["名前", "電話番号",...] 
      // return Object.keys(headers).map(key => { 
      // return item[headers[key] ]] 
      // }) // / Get ['Zhang San', '129', 'dd', 'dd'] 
      // }) 
    }

エクスポート時刻フォーマット処理

    formatJson(headers, rows) { 
      return rows.map(item => { 
        // item はオブジェクトです { mobile: 132111, username: 'Zhang San' } 
        // ["携帯電話番号", "名前", "入力日" " ...] 
        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", 'Zhang San', '', '', ''d] 
      }) 
      // return rows.map(item => Object.keys(headers).map(key => item[headers[ key]])) 
      // 時刻形式の問題に対処する必要がある
    }

`扩展`複雑なヘッダーのエクスポート

複雑なヘッダーをエクスポートする必要がある場合、vue-element-admin はこのタイプの操作もサポートします

vue-element-adminが提供するエクスポートメソッドにはmultiHeaderおよびmergesパラメータがあります。

パラメータ	説明する	タイプ	オプションの値	デフォルト
マルチヘッダー	複雑なヘッダーの一部	配列	/	[[]]
マージします	結合する必要がある部分	配列	/	[]

multiHeader は 2 次元配列で、その中の 1 つの要素がヘッダーの行になっており、図のような構造を取得したいとします。

mutiHeader は次のように定義する必要があります

const multiHeader = [['名前', '主な情報', '', '', '', '', '部門']]

multiHeader の行のヘッダーのフィールドの数は、実際の列の数と同じである必要があります。列をまたがる場合は、余分なスペースを空の文字列として定義する必要があります

主に標準ヘッダーに対応

const header = ['名前', '携帯電話番号', '入社日', '雇用形態', '変換日', '雇用番号', '所属']

マージの効果を実現したい場合は、マージオプションを設定する必要があります。

const マージ = ['A1:A2', 'B1:F1', 'G1:G2']

これら 2 つのプロパティが設定されている限り、マージの順序は関係ありません。複雑なヘッダーを含む Excel をエクスポートできます。

  exportData() { 
      const headers = { 
        '名前': 'ユーザー名', 
        '携帯電話番号': 'モバイル', 
        'エントリー日': 'timeOfEntry', 
        '雇用フォーム': 'formOfEmployment', 
        '変換日': 'correctionTime ' ', 
        'ジョブ番号': '作業番号', 
        '部門': '部門名' 
      } 
      // Excel をエクスポート
      import('@/vendor/Export2Excel')。then(async Excel => { 
        // Excel はインポートされたファイルのエクスポート オブジェクトです
        // エクスポート ヘッダーはどこから来ますか
        // データはどこから来ますか
        // 現在、すべてのデータを取得するインターフェイスはありません
        // getインターフェイスのページの従業員数とページごとのアイテム数 100 1 10000 
        const { rows } = await getEmployeeList({ page: 1, size: this.page.total })
        const data = this.formatJson(headers, rows) // 返されたデータはエクスポートされる構造体です
        const multiHeader = [['name', 'main information', '', '', '', '', 'Department ' ]] 
        const merges = ['A1:A2', 'B1:F1', 'G1:G2'] 
        Excel.export_json_to_excel({ 
          header: Object.keys(headers), 
          data, 
          filename: '従業員情報テーブル', 
          multiHeader , // 複雑なヘッダーの
          マージ // マージ オプション
        }) 
//
        Excel.export_json_to_excel({ 
        // ヘッダー: ['名前', '給与'], 
        // データ: [['張三', 3000], [' Li Si', 5000]], 
        // ファイル名:'従業員給与表' 
        // }) 
        // [{ username: 'Zhang San',mobile: 13112345678 }] => [[]]
        // データ構造を変換するには、テーブルのヘッダーの順序に対応する必要があります。
        // 転送する必要があるタイトルは中国語です
      }) 
    }, 
    // ヘッダーのデータとデータに対応します
    // [{}] => [[]] 
    formatJson(headers, rows) { 
      return rows.map(item => { 
        // アイテムはオブジェクトです { mobile: 132111, username: 'Zhang San' } 
        // ["携帯電話番号", "名前", "エントリの日付" ...] 
        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 : 'Unknown' 
          } 
          return item[headers[key]] 
        }) 
        // [ "132", 'Zhang San', '', '', ''d] 
      }) 
      // return rows.map(item => Object.keys(headers).map(key => item[headers[key]] )) 
      // 時刻形式の問題に対処する必要がある
    }

コードを送信する