「キャンセル」ボタンを押して閉じる
// [OK] をクリックすると
btnOK()をトリガーします {
this.$refs.deptForm.validate(async isOK => {
if (isOK) {
// 送信できることを示します
await addDepartments({ ...this.formData, pid : this.treeNode.id }) // 新しいインターフェースを呼び出して親部門の ID を追加します
this.$emit('addDepts') // 新しいデータが正常に再プルされたことを親コンポーネントに伝えます
// update :props name
this.$emit(' update:showDialog', false)
}
})
}
キャンセル時にデータとチェックサムをリセット
btnCancel() {
this.$refs.deptForm.resetFields() // 検証フィールドをリセット
this.$emit('update:showDialog', false) // 閉じる
}
el-dialog で close イベントをリッスンする必要がある
<el-dialog title="部門を追加" :visible="showDialog" @close="btnCancel">
本节任务最新情報 - 送信 - キャンセル - 閉じる
データの書き戻しを実現する編集部門機能
目标：編集部機能の実現
クリックしてポップアップ レイヤーを編集し、現在のノードを記録します
編集部門機能は実際には新しいフォームで使用されるコンポーネントですが、新しいシーンを編集シーンに変更する必要があります
最初にクリックして部門を編集するときに、親コンポーネントの edit メソッドを呼び出します。 tree-tools.vue
this.$emit('editDepts', this.treeNode)
現在の編集ノードを割り当てる親コンポーネントのポップアップ レイヤー
<tree-tools slot-scope="obj" :tree-node="obj.data" @delDepts="getDepartments" @editDepts="editDepts" /// 部門ノードを編集 editDepts( node ) { // 最初のポップを
開き
ます
-上層
this.showDialog = true
this.node = node // 代入操作のノード
}
親コンポーネントは子コンポーネントの詳細の取得メソッドを呼び出します。
編集時には、クリックされた部門の情報を取得する必要があります
部門情報取得モジュールをカプセル化する src/api/departments.js
/** *
* 部門の詳細を取得
* ***/
export function getDepartDetail(id) {
return request({
url: `/company/Department/${id}`
})
}
部門の詳細はいつ取得されますか?
編集メソッドを 呼び出すことeditDeptsでインスタンス メソッドを呼び出すことができます。refadd-dept.vue
// 1. インポート メソッド
import { other content, getDepartDetail } from '@/api/Departments' // 2. 部門の詳細を取得するメソッド。
非同期 getDepartDetail(id)
を呼び出す外部親コンポーネントを提供します。 {
// 要求されたデータをエコーします。
this.formData = await getDepartDetail(id)を形成する
}
// 1. ref 属性をポップアップ レイヤー コンポーネントに追加します。値は addDept
<!-- 新しいポップアップ レイヤー コンポーネントを配置します -->
<add-dept ref="addDept" :show-dialog. sync="showDialog" :tree-node="node" @addDepts="getDepartments" />
// 2. 「編集」をクリックして親コンポーネントのメソッド
editDepts(node) {
this.showDialog = true // 新しいコンポーネントを表示しますコンポーネント ポップアップ レイヤー
this.node = node // 渡されたノード データを保存します
// この場所で子コンポーネントのメソッドを呼び出す必要があります
// 親コンポーネントは子コンポーネントのメソッドを呼び出し、$ を通じてコンポーネントを見つけますrefs.addDept はメソッドを呼び出し、データを渡します。
this.$refs .addDept.getDepartDetail(node.id) // サブコンポーネント内のメソッドを直接呼び出して ID を渡します
}
計算されたプロパティに基づいてコントロールのタイトルを表示します
表示されるタイトルは現在のシーンに応じて区別する必要があります
計算されたプロパティ
追加か編集かの判断方法
計算: {
showTitle() {
return this.formData.id ? '部門の編集' : '新しいサブ部門の追加'
}
},
同時に、el-formのresetFieldsは非formのデータをリセットできないことが判明したため、キャンセルされた位置のデータを強制的にリセットする必要があります
btnCancel() {
// リセットフィールドはフォーム上のデータのみをリセットできるため、データをリセットします。たとえば、編集中の ID はリセットできません。
this.formData = {
name: '',
code: '',
manager: '' ,
導入: ''
}
// ポップアップ レイヤーを閉じます
this.$emit('update:showDialog', false)
// 以前の検証をクリアしてデータをリセットします。データ
this.$refs で定義されたデータのみをリセットします。 deptForm .resetFields()
}
シーンの編集と追加を同時にサポート
カプセル化編集インターフェイス、シーンの保存と区別
次に、「OK」をクリックすると、部門の追加と部門の編集の 2 つのシナリオを同時にサポートする必要があります。formData に ID があるかどうかで区別できます。
パッケージ編集部インターフェース src/api/departments.js
/**
* 部門の編集
*
* ***/
export function updateDepartments(data) {
return request({
url: `/company/Department/${data.id}`,
method: 'put',
data
})
}
OKをクリックするとシーンが判別されます
// OK をクリックしたときに
btnOK()をトリガーする {
this.$refs.deptForm.validate(async isOK => {
if (isOK) {
// 編集するか追加するかを区別する
if (this.formData.id) {
/ /編集モードは編集インターフェイスを呼び出します
await updateDepartments(this.formData)
} else {
// 新しいモード
await addDepartments({ ...this.formData, pid: this.treeNode.id }) // 新しいインターフェイスを呼び出して親部門を追加しますid
}
// 送信できることを示します
this.$emit('addDepts') // 新しいデータを追加し、データを正常に再プルするように親コンポーネントに指示します
// update:props name
this.$emit('update: showDialog', false)
}
})
},
検証ルールはシナリオ編集時の検証をサポートします
また、当初の検証ルールが実際に編集部と矛盾していることが判明したため、さらなる処理が必要です
// 次に関数を定義します。この関数の目的は、同じレベルの部門の下に重複する部門名があるかどうかを調べることです。
const checkNameRepeat = async(rule, value, callback) => {
// まず最新の部門名を取得します組織構造データ
const { depts } = await getDepartments()
// 繰り返しルールのチェックでは 2 つの新しいモード/編集モードをサポートする必要があります
// depts はすべて部門データです
// 技術部門のすべての子ノードを見つける方法
let isRepeat = false
if ( this.formData. id) {
// ID を持つことは編集モードを意味します
// Zhang San => 私以外の検証ルールを編集します。Zhang San の
isRepeat = depts.filter(item => item.id !== this . formData.id && item.pid === this.treeNode.pid).some(item => item.name === value)
} else {
// ID なしは新しいモードです
isRepeat = depts.filter(item = > item.pid === this.treeNode.id).some(item => item.name === value)
}
isRepeat
? callback(new Error ( `同じレベルの部門の下にすでに ${value} 部門が存在します`)) : callback()
}
// チェックコードの繰り返し
const checkCodeRepeat = async(rule, value, callback) => {
// まず最新の組織構造データを取得します
// チェック繰り返しルールは 2 つの新しいモード/編集モードをサポートする必要があります
const { depts } = await getDepartments ()
let isRepeat = false
if (this.formData.id) {
// 編集モードでは自分自身をカウントできないため、編集モード
isRepeat = depts.some(item => item.id !== this.formData.id && item .code === value && value)
} else {
// 新しいモード
isRepeat = depts.some(item => item.code === value && value) // 私たちの部門には値がない可能性があるため、ここに値を追加しますcode
}
isRepeat
? callback(new Error(`${value} code を使用する部門が組織構造内にすでに存在します`)) : callback()
}
ここまでで、組織構造全体が完成しました。組織構造の読み取り/部門の追加/部門の削除/部門の編集
写真のように
コードを送信する
本节任务編集部門機能の実現
データ取得に読み込み進行状況バーを追加する
目标現在の組織構造に読み込み進行状況バーを追加します。
データの取得に遅延が発生するため、エクスペリエンスを向上させるために、ページに読み込み進行状況バーを追加し、要素コマンド ソリューションを使用できます。
読み込み変数を定義する
loading:false //進行状況ポップアップレイヤーの表示と非表示を制御するために使用されます
コマンドに変数を代入する
<div v-loading="loading" class="ダッシュボードコンテナ">
getメソッドの前後に変数を設定する
async getDepartments() {
this.loading = true
const result = await getDepartments()
this.Departs = transListToTreeData(result.depts, '')
this.company = { name: result.companyName, manager: '负责人', id: '' }
this.loading = false
}
会社の役割ページの基本構造を構築する
目标会社ページの基本構造を構築する
上記の構造に従って、element-ui コンポーネントの実装を使用します。
src/views/setting/index.vue
<template> <div class="dashboard-container"> <div class="app-container"> <el-card> <el-tabs> <!-- タブを配置 --> <el-tab-pane label = "役割管理"> <!-- 新しい役割ボタン --> <el-row style="height:60px"> <el-button icon="el-icon-plus" size="small" type="primary" >役割を追加</el-button> </el-row> <!-- テーブル --> <el-table border=""> <el-table-column label="シリアル番号" width="120" /> el-table-column label="ロール名" width="240" " /> <el-table-column label="描写" /> <el-table-column label="操作"> <el-button size="small" type="success"> 割り当て制限</el-button> <el -button size="small" type="primary">编辑</el-button> <el-button size="small" type="danger">删除</el-button> </el-table-column> </el-table> <!-- 分页组件 --> <el-row type="flex" justify="center" align="middle" style="height: 60px"> < !-- ページングコンポーネント --> <el-paginationlayout="prev,pager,next" /> </el-row> </el-tab-pane> <el-tab-pane label="会社情報"> <エルアラート title="会社名、会社住所、営業許可証、会社所在地の更新会社情報は再調査されますので、慎重に変更してください。」 type="info" show-icon :closable="false" /> <el-form label-width="120px" style="margin-top:50px"> <el-form-item label="公司名"> <el-inputdisabled style="width:400px" /> </el-form-item> <el-form-item label="公司地址"> <el-inputdisabled style="width:400px" /> < /el-form-item> <el-form-item label="邮箱"> <el-input 無効 style="width:400px" /> </el-form-item> <el-form-item label="备注"> <el-input type="textarea" :rows="3" hidden style="width:400px" /> </el-form-item> </el-form> </el-tab-pane> </el-tabs> </el-card> </div> </div> </template>
コードを送信する
本节任务会社ページの基本構造を構築する
会社の役割情報を読む
目标: 会社の役割リクエストをカプセル化し、会社の役割情報を読み取ります
キャラクターリストデータの読み込み
まず、ロールの情報を読み取るリクエストをカプセル化します。src/api/setting.js
/**
* ロールリストの取得
* ***/
export function getRoleList(params) {
return request({
url: '/sys/role',
params
})
}
params はクエリ パラメータであり、ページネーション情報を運ぶ必要があります。
次に、ページ内のインターフェイスを呼び出してデータを取得し、テーブル データをバインドします。src/views/setting/index.vue
import { getRoleList } from '@/api/setting'
import {
data() {
return {
list: [], // 配列を継承します
page: {
// ページ番号と関連データを配置します
page: 1,
pagesize: 10 ,
total: 0 // 総レコード数
}
}
},
created() {
this.getRoleList() // ロールリストを取得
},
メソッド: {
async getRoleList() {
const { total, rows } = await getRoleList(this.getRoleList() page)
this.page .total = total
this.list = rows
},
changePage(newPage) {
// newPage は現在クリックされているページ番号です
this.page.page = newPage // 現在のページ番号を現在の最新のページ番号に割り当てます
this.getRoleList()
}
}
}
フォームデータをバインドする
<el-table border="" :data="list"> <el-table-column align="center" type="index" label="序号" width="120" /> <el-table-column align= "center" prop="name" label="名前" width="240" /> <el-table-column align="center" prop="description" label="説明" /> <el-table-column align="center" label="操作"> <el-button size="small" type="success"> 割り当て权限</el-button> <el-button size="small" type="primary">编辑</el-button> <el- button size="small" type="danger">删除</el-button></el-table-column> </el-table>
ページングデータをバインドする
<!-- 放置分页组件 --> <el-row type="flex" justify="center" align="middle" style="height:60px"> < el-pagination :current-page="page.page" " :page-size="page.pagesize" :total="page.total" layout="前、ページャ、次" @current-change="changePage" /> </el-row>
会社情報データの読み込み
2 番目のタブページでもデータを読み取る必要があります
企業情報を読み取るための API をカプセル化するsrc/api/setting.js
/**
* 会社情報の取得
* **/
export function getCompanyInfo(companyId) {
return request({
url: `/company/${companyId}`
})
}
フォーム情報変数を設定する
data() {
return {
...,
formData: {} // // フォーム情報変数
}
}
会社フォームデータをバインドする
<el-form label-width="120px" style="margin-top:50px"> <el-form-item label="公司名"> <el-input v-model="formData.name" hidden style= "width:400px" /> </el-form-item> <el-form-item label="公司地址"> <el-input v-model="formData.companyAddress" hidden style="width:400px" / > </el-form-item> <el-form-item label="邮箱"> <el-input v-model="formData.mailbox" 無効な style="width:400px" /> </el-form-item> <el-form-item label="备注"> <el-input v-model="formData.remarks" type="textarea" :rows="3" 無効なスタイル="幅:400ピクセル" /> </el-form-item> </el-form>
リクエスト内の companyId はどこから来たのでしょうか? これはログイン成功後のユーザー プロファイルから取得されるため、このコンポーネントで vuex データを使用する必要があります
src/store/getters.js
companyId: state => state.user.userInfo.companyId // ユーザー モジュールの companyId へのクイック アクセスを作成します
ページコンポーネント内
import { mapGetters } from 'vuex' // インポート ヘルパー関数
の計算: {
...mapGetters(['companyId'])
},
初期化中にインターフェイスを呼び出す
// 企業情報を取得
async getCompanyInfo() {
this.formData = await getCompanyInfo(this.companyId)
}
created() {
this.getRoleList() // ロールリストを取得
this.getCompanyInfo()
},
コードを送信する
本节任务会社の役割情報を読む
ロール削除機能
目标ロール削除機能を実装
ロールの削除をカプセル化するための API
/** **
* ロールの削除
*
* ****/
export function deleteRole(id) {
return request({
url: `/sys/role/${id}`,
method: 'delete'
})
}
関数の実装を削除する
// ロールの削除イベント
async deleteRole(id) {
// プロンプト
try {
await this.$confirm('このロールを削除してもよろしいですか')
// [OK] をクリックした後でのみ、下部に入力できます
await deleteRole(id) //削除インターフェイスを呼び出します
// 最初のページではなく、要素が 1 つだけあり、削除が成功した場合は、ページ番号を -1 に設定し、リストを再度取得する必要があります。
if (this.list.length == = 1 && this.page.page !== 1) {
this.page.page--
}
this.getRoleList() // データをリロード
this.$message.success('ロールの削除に成功しました')
} catch (error) {
console.log(エラー)
}
},
削除ボタン登録イベント
<!-- 作用域插槽 -->
<template slot-scope="{ row }">
<el-button size="small" type="success"> 割り当て权制限</el-button>
<el-button size="small" type="primary">编辑</el-button>
<el-button size="small" type="danger" @click="deleteRole(row.id)">删除</el-button >
</テンプレート>
コードを送信する
役割編集機能
目标: ロール編集機能を実現
編集インターフェイスをカプセル化し、新しい編集レイヤーを作成します
ロール編集の機能 API をカプセル化します。
/** *
* ロールの変更
* ***/
export function updateRole(data) {
return request({
url: `/sys/role/${data.id}`,
data,
method: 'put'
})
}
/ **
* ロールの詳細を取得
* **/
export function getRoleDetail(id) {
return request({
url: `/sys/role/${id}`
})
}
ポップアップレイヤーデータの定義と編集
data(){
return{
..., // その他の変数
// ポップアップ表示変数
showDialog: false,
// 新しく追加または編集されたフォーム データを特別に受け取ります
roleForm: {},
// 検証ルール
rules: {
name : [ { 必須: true、メッセージ: 'ロール名を空にすることはできません'、トリガー: 'blur' }]
}
}
}
ポップアップ構造の編集
<el-dialog title="编辑弹层" :visible="showDialog" @close="btnCancel"> <el-form ref="roleForm" :model="roleForm" :rules="rules" label-width=" 120px"> <el-form-item label="角色名" prop="name"> <el-input v-model="roleForm.name" /> </el-form-item> <el-form-item label="角色描写"> <el-input v-model="roleForm.description" /> </el-form-item> </el-form> <!-- 底部 --> <el-row slot= "footer" type="flex" justify="center"> <el-col :scan="6"> <el-button size="small" @click="btnCancel">取消</el-button> <el-button size="small" type="primary" @click="btnOK">決定</el-button> </el-col> </el-row> </el-dialog>