按部就班VUE+Element 前端應用開發(16）--- 組織機構和角色管理模塊的處理

時間 2020-07-18

標籤按部就班 vue+element vue element 前端應用開發組織機構角色管理模塊處理简体版

原文原文鏈接

在前面隨筆《按部就班VUE+Element 前端應用開發(15）--- 用戶管理模塊的處理》中介紹了用戶管理模塊的內容，包括用戶列表的展現，各類查看、編輯、新增對話框的界面處理和後臺數據處理操做，本篇隨筆繼續深化Vue + Element權限管理模塊管理的內容，介紹組織機構和角色管理模塊的處理，經過組織機構和角色管理模塊的介紹，使得咱們瞭解界面組件化模塊的開發思路和作法，提升咱們界面設計的技巧，並減小代碼的複雜性，提升界面代碼的可讀性，同時也是利用組件的複用管理。html

一、組織機構管理模塊界面

組織機構管理模塊界面以下所示，包括組織機構的成員管理和角色管理，在ABP基礎領域裏面，組織機構能夠包含0到多個成員，也能夠包含0到多個角色，所以界面設計以下所示。前端

在對象UML的圖例中，應該是以下所示的效果圖，組織機構包含組織成員和角色的內容。後端

在界面上，組織成員還須要添加成員的功能，同理角色也須要添加角色的處理，以下UML圖示。app

因爲添加成員也是一個界面功能，通常狀況下，若是咱們放在一個頁面裏面，可能會增長代碼量，增長代碼維護難度和下降可讀性，所以咱們能夠考慮把這些添加成員、添加角色的操做放在一個獨立的組件模塊裏面進行設計，而後在主頁面中引用組件便可。框架

組織機構添加成員的界面是彈出一個對話框，而後在其中查詢選擇系統用戶列表，確認便可完成添加成員操做。模塊化

對於添加角色操做，也是相似的處理，把它們的邏輯和界面處理，封裝爲一個獨立的界面組件，這個在Vue+Element是很是方便的，也是經常使用隱藏複雜性的作法。添加角色界面效果以下所示，彈出對話框中選擇系統角色，確認添加到對應的組織機構便可。函數

二、角色管理界面

角色管理首先也是以列表展現系統角色的內容，以下界面所示。組件化

其中每一個角色，除了包含基本信息外，還會包含擁有的權限（功能控制點）、包含用戶，以及擁有的菜單，其中權限是用來控制界面元素，如操做按鈕的顯示的，而擁有的菜單，則是用戶以指定帳號登陸系統後，得到對應角色的菜單，而後構建對應的訪問入口的。post

角色界面模塊UML類圖以下所示。 ui

那麼對應界面元素上，咱們就應該以不一樣的Tab來展現這些信息，以下所示。其中能夠看到不一樣的Tab顯示不一樣的內容。

角色包含的權限以下所示

其中擁有的菜單也是一個樹形列表，和權限相似，以下界面所示。

上面幾個圖是查看界面的內容，而添加或者編輯角色，則須要對樹形列表進行勾選操做，以便爲角色選擇對應的權限和擁有的菜單權限。

咱們以菜單權限爲例，編輯角色信息的時候，對應的樹形列表應該能夠勾選，確認後把勾選的用戶選擇提交到後臺保存處理。

三、界面模塊化的處理

上面模塊中，涉及到多個頁面內容的處理，若是把全部的內容所有放在一個頁面裏面，頁面內容和JS的邏輯代碼將會比較臃腫，難以維護，增長編輯界面代碼的難度。

其實界面設計，也是能夠以UML的類圖爲規則，一個業務界面一個組件的方式來構建界面，而界面組件能夠在多個地方重用，有時候能夠設計不一樣的屬性來區分便可。

咱們回到組織機構裏面添加成員和添加角色的操做UML圖。

其中添加成員、添加角色，涉及界面的列表數據展現以及對應的添加展現操做，獨立一個界面仍是比較方便的，並且添加成員，在角色維護模塊裏面也須要用到，那麼能夠兼容兩個場景來設計組件模塊。

完成添加成員、添加角色的界面組件後，咱們就能夠在組織機構界面裏面引入使用。

接着加入對應的組件集合裏面便可。

而後在界面部分加入對應的組件呈現代碼，以下所示。

有了這些準備，咱們就能夠在須要觸發界面顯示的時候，調用代碼展現對應的對話框界面組件便可。

    addUser() { // 顯示添加成員對話框
      var ouid = this.searchForm.OrganizationUnitId
      if (!ouid || typeof (ouid) === 'undefined') {
        this.msgError('請先選擇組織機構!')
        return
      }
      this.$refs.selectuser.show()
    },

    addRole() { // 顯示添加成員對話框
      var ouid = this.searchForm.OrganizationUnitId
      if (!ouid || typeof (ouid) === 'undefined') {
        this.msgError('請先選擇組織機構!')
        return
      }
      this.$refs.selectrole.show()
    },

對於角色模塊也是相似，咱們儘量設計更多能夠重用的界面模塊，減小主模塊頁面代碼，並提升組件的複用率。

以前介紹過，角色界面模塊UML類圖以下所示。

咱們也能夠依據這個來對模塊的內容進行劃分，不一樣業務設計不一樣的界面組件，最後整合一塊兒使用便可。

這樣咱們查看角色詳細信息的時候，界面代碼就能夠減小不少，只須要引入對應的界面組件便可，以下代碼所示。

    <el-dialog title="查看信息" :visible="isView" :modal-append-to-body="false" @close="closeDialog">
      <el-col>
        <el-tabs value="basicPage" type="border-card">
          <el-tab-pane name="basicPage" label="基本信息">
            <el-form ref="viewForm" :model="viewForm" label-width="120px">
              <el-form-item label="角色名">
                <el-input v-model="viewForm.name" disabled />
              </el-form-item>
              <el-form-item label="角色顯示名">
                <el-input v-model="viewForm.displayName" disabled />
              </el-form-item>
              <el-form-item label="角色描述">
                <el-input v-model="viewForm.description" type="textarea" disabled />
              </el-form-item>
            </el-form>
          </el-tab-pane>

          <el-tab-pane name="permitPage" label="權限">
            <rolefunction ref="rolefunction" :role-id="selectRoleId" />
          </el-tab-pane>

          <el-tab-pane name="userPage" label="用戶">
            <roleuser ref="roleuser" :role-id="selectRoleId" :can-add="false" :can-delete="false" />
          </el-tab-pane>

          <el-tab-pane name="menuPage" label="菜單">
            <rolemenu ref="rolemenu" :role-id="selectRoleId" />
          </el-tab-pane>
        </el-tabs>
      </el-col>
      <div slot="footer" class="dialog-footer">
        <el-button type="success" @click="closeDialog">關閉</el-button>
      </div>
    </el-dialog>

上面着重部分就是引入對應的界面組件，這樣在編輯界面裏面，咱們依舊能夠重用這部分的界面組件，界面組件的界面內容展現控制是內處理的，咱們在主界面不用管理，很是方便。

角色查看詳細界面效果以下所示。

角色的編輯界面代碼以下所示。

    <el-dialog title="編輯信息" :visible="isEdit" :modal-append-to-body="false" @close="closeDialog">
      <el-col>
        <el-tabs value="basicPage2" type="border-card">
          <el-tab-pane name="basicPage2" label="基本信息">
            <el-form ref="editForm" :rules="rules" :model="editForm" label-width="120px">
              <el-form-item label="角色名">
                <el-input v-model="editForm.name" />
              </el-form-item>
              <el-form-item label="角色顯示名">
                <el-input v-model="editForm.displayName" />
              </el-form-item>
              <el-form-item label="角色描述">
                <el-input v-model="editForm.description" type="textarea" />
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane name="permitPage2" label="權限">
            <rolefunction ref="rolefunction2" :showcheck="true" :role-id="selectRoleId" />
          </el-tab-pane>

          <el-tab-pane name="userPage2" label="用戶">
            <roleuser ref="roleuser2" :role-id="selectRoleId" :can-add="true" :can-delete="true" />
          </el-tab-pane>

          <el-tab-pane name="menuPage2" label="菜單">
            <rolemenu ref="rolemenu2" :showcheck="true" :role-id="selectRoleId" />
          </el-tab-pane>
        </el-tabs>
      </el-col>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="saveEdit()">肯定</el-button>
        <el-button type="success" @click="closeDialog">關閉</el-button>
      </div>
    </el-dialog>
  </div>