Vueの+ ElementUI電子ビジネス管理システムインスタンス10ユーザリスト - 割り当てられた役割

1、ユーザーのリストページ、割り当て役割]ボタンをクリックし、ポップアップダイアログボックスを割り当てる役割に

イベントの役割、および現在の行の情報の送信を割り当てるには、[追加]ボタンをクリックします。

<！ - 分配角色按钮- > 
< EL-ツールチップのクラス= "項目" 効果= "濃い" 内容= "分配角色" 配置= "トップ" ：入力可= "false"に> 
      < EL-ボタンタイプ= "警告" サイズ="ミニ」アイコン= "EL-アイコン設定" @click = "setRole（scope.row）" > </ EL-ボタン> 
</ EL-ツールヒント>

setRoleイベント：

// ユーザの役割の割り当てダイアログ表示
{setRole（ユーザー情報）
       この = .setRoleDialogVisibleをtrueに
}

ダイアログ割り当ての役割を追加します。

<！ - ユーザの役割]ダイアログボックスを割り当てる- > 
< EL-ダイアログのタイトル= "割り当ての役割" ：visible.sync = "setRoleDialogVisible" 
      幅= "50％" > 
      <！ - コンテンツボディエリア- > 
      < divの> 
        < P >現在のユーザー：userInfo.username {{}} </ P > 
        < P >現在の役割：userInfo.role_name {{}} </ P > 
      </ DIV > 
      <！ - 底ボタン領域- > 
      < スパンスロット=「フッター」クラス= "ダイアログ・フッター」 > 
        <ボタン-EL @click = "= setRoleDialogVisible falseに" >キャンセル</ EL-ボタン> 
        < ELボタン-のタイプ= "プライマリ" @click = "editUserInfo" >決定</ EL-ボタン> 
      </ スパン> 
</ EL-ダイアログ> 

< スクリプト> 
エクスポートデフォルト{ 
  データ（）{ 
     リターン{ 
         setRoleDialogVisible：falseに、// コントロールのユーザー役割の割り当て]ダイアログボックスが表示され
         setRoleDialogVisible：falseに、//ユーザの役割の割り当て制御ダイアログが表示
         // 必要はユーザ情報の役割を割り当てられる
         ユーザー情報：{} 
     } 
  }、
  メソッド：{ 
     // ディスプレイユーザロール割当てダイアログ
    setRole（ユーザー情報）{
       // はconsole.log（ユーザー情報）
      この.userInfo = ユーザー情報
       この.setRoleDialogVisible =  真へ
    } 
  } 
} 
</ スクリプト>

その後、ボタンに割り当てられた役割をクリックして、効果がようです。

そして、すべてのロールのリストを取得し、rolesListアレイに渡さします：

RolesList：[] // すべてのロールのリスト配列

// 割り当てユーザーの役割にショーダイアログ
非同期setRole（のUserInfo）{
      // はconsole.log（のUserInfo）
     この .userInfo = のUserInfo 

     // すべてのロールのショーボックスの前に、取得リスト 
     データ{constの：RES =}待って、この。http.get $（ '役割' ）
      のIF（== 200はres.meta.statusです！）{
         返す これを Message.Errorアン$（ 'すべてのロールのリストが失敗したGET'。 ）
     } 
     、この = .rolesList res.data 

     この .setRoleDialogVisibleは= trueに
}

2、役割のドロップダウンメニューリストをレンダリング

それは特にない書き込み、element.jsに導入されたすべての役割、選択とオプションのリストを表示するコンポーネントを選択を使用する必要があります

ドロップダウンボックスのコードを追加します。

< P > 分配新角色：
      < エル・セレクトVモデル= "selectedRoleId" プレースホルダ= "请选择" > 
          < EL-オプション
               V-用= "rolesListの項目" 
              ：キーは= "item.id" 
              ：ラベル=」 item.roleName」
              ：値= "" item.id > 
          </ EL-オプション> 
     </ EL-選択> 
</ P > 

< スクリプト>
輸出のデフォルト{ 
  データ（）{ 
     リターン{ 
       selectedRoleId："  // 選択した文字のid値
     } 
  } 
} 
</ スクリプト>

ラベル：ラベルオプション、設定されていない場合はデフォルト値と同じ
値：オプションの値

3、割り当てられた役割の操作を完了し、OKボタンをクリックしてイベントを追加します

パスを要求するためのAPIユーザーの役割割り当て要求インタフェース：ユーザ/：ID /役割、リクエストメソッド：PUT、リクエストパラメータ：RIDロールID

OKボタンのクリックイベントを追加します。

< ELボタンタイプ= "プライマリ" @click = "editUserRole" >确定</ EL-ボタン>

editUserRoleイベント関数：

// [OK]をクリックし、ユーザーの役割が割り当てられた
editUserRole（）{非同期
       IF（！この{.selectedRoleId）を
         返す 。この $ Message.Errorアン（ '割り当てる役割を選択' ）
      } 
      RES}します。Const {データが待つ= これを $を。 http.put（ `ユーザ/} $ {this.userInfo.id / role`、{RID：この.selectedRoleId}）
       IF（== 200はres.meta.statusです！）{
         返す これを Message.Errorアン$（「ディストリビューション。ロール'失敗）
      } 
      これに成功。$のmessage.success（'割り当ての役割を！」）
       この.getUserList（）
       この .setRoleDialogVisible =偽
}

レンダリングが完了しました：

小さなバグ：ロールを割り当てるの完了後、再割り当て役割]ボタンをクリックし、ダイアログボックスのドロップダウンボックスの値はリセットされません。

colseイベントを追加する役割ダイアログボックスを割り当てるには：

<！ - ユーザーの役割ダイアログ割り当てる- > 
< EL-ダイアログのタイトル= "割り当ての役割" ：visible.syncを= "setRoleDialogVisible" 
      幅= "50％" @close = "setRoleDialogClosed" >

setRoleDialogClosed：

// ダイアログシャットダウンイベントモニタ割り当てられた役割
setRoleDialogClosed（）{
       この .selectedRoleId = ''
       この .userInfo = {} 
}

リモートネイティブコードへの送信：

最初の分岐を見ます

Gitのブランチ

もちろん、権利はブランチで見つかりました。

その後、ステージングエリアに提出

gitのアドオン。

現在の権利の枝に送信：

-m gitのコミット「の開発権限機能を完成します」

クラウドは、権利ブランチをプッシュ：

gitのプッシュ

権利がマスターに組み込まれました。

チェックアウトマスターはgitの
gitのマージ権利を

// リモートにプッシュ 
gitのプッシュ