按部就班VUE+Element 前端應用開發(15）--- 用戶管理模塊的處理

時間 2020-07-18

標籤按部就班 vue+element vue element 前端應用開發用戶管理模塊處理简体版

原文原文鏈接

在前面隨筆介紹了ABP+Vue先後端的整合處理，包括介紹了ABP的後端設計，以及前端對ABP接口API的ES6的封裝，經過JS的繼承類處理，極大減小了重複臃腫的代碼，能夠簡化對後端API接口的封裝，並且前端使用Element組件，很好展現API得到的數據，經過在界面中展現樹狀列表，以及表格列表數據，能夠構建一個很好的列表展現界面，而常規的界面，經過也包括了新增、編輯、查看等展現場景，通常咱們經過對話框的方式進行展現處理。本篇隨筆以權限管理模塊中的用戶管理爲媒介，進行相關功能的介紹和界面設計的處理。html

一、權限管理模塊的設計

咱們知道，權限管理通常都會涉及到用戶、組織機構、角色，以及權限功能等方面的內容，ABP框架的基礎內容也是涉及到這幾方面的內容，其中它們之間的關係基本上是多對多的關係，它們的關係以下所示。前端

權限模塊裏面包含的一些主對象表和中間表，中間表主要用來存儲兩個對象之間的多對多關係，如角色包含多個用戶，用戶屬於多個機構，機構包含多個角色等等。vue

結合ABP後端提供的接口，Vue前端咱們要實現基礎的用戶、組織機構、角色、功能權限等內容的管理，以及維護它們之間的關係。Vue前端對於權限管理模塊的菜單列表以下所示。後端

上圖權限管理模塊中，包括用戶管理、機構管理、角色管理、菜單管理、功能管理、審計日誌、登陸日誌等內容模塊的管理。框架

其中用戶管理模塊，主要用來展現用戶信息列表，以及查看對應用戶權限、維護密碼等處理。函數

用戶列表界面以下所示，包括對應條件的查詢和列表展現、以及查看、添加、編輯、刪除、重置密碼等功能入口。post

用戶信息查看界面以下所示this

主要展現用戶基礎信息，和所屬的關係信息，其中權限部分列出對應用戶包含的功能點，用於界面按鈕等方面的控制處理。url

用戶添加界面，則主要用來處理錄入用戶基礎信息部分便可，以下界面所示。spa

用戶信息錄入，對用戶基礎表單數據進行校驗，符合格式要求才能錄入。

用戶編輯界面，基本上和上面的相似了，不在贅述。

另外，刪除用戶或者重置密碼，通常需對確認後再行操做，彈出一個對話框用戶確認再繼續。

ABP+Vue的框架參考的是已完成的ABP+Winform的功能界面進行開發，具體也能夠了解下Winform版本框架《ABP開發框架先後端開發系列---（14）基於Winform的ABP快速開發框架》

二、用戶管理界面功能

以上咱們介紹了權限管理模塊涉及的內容和關係，並着重介紹了用戶管理界面中的內容展現，下面介紹在Element中如何實現對上面界面的處理的。

首先咱們須要根據ABP後端的接口進行前端JS端的類的封裝處理，其中前面說過，常規的Get/GetAll/Create/Update/Delete/Count等接口，咱們放在BaseApi基類裏面定義，其餘子類繼承它便可。

權限模塊咱們涉及到的用戶管理、機構管理、角色管理、菜單管理、功能管理、審計日誌、登陸日誌等業務類，那麼這些類繼承BaseApi，就會具備相關的接口了，以下所示繼承關係。

咱們這裏以UserAPI的JS類定義介紹，以下所示。

咱們以其中一個接口爲例進行介紹實現代碼，能夠看到主要就是簡單封裝的調用便可。

  GetGrantedFunctionsByUser(id) { // 獲取用戶權限列表
    return request({
      url: this.baseurl + 'GetGrantedFunctionsByUser',
      method: 'get',
      params: { id }
    })
  }

有了這些業務類的準備，那麼咱們和後端ABP的API接口對接，就很容易了，以下圖所示。

剩下的就是對Vue + Element前端的界面處理事情了。

咱們先來看看查詢的處理，常規的查詢涉及日期區間的查詢處理，這裏咱們用一個一個查詢日期的處理操做，以下圖所示。

表單的界面代碼以下所示

    <el-form ref="searchForm" :model="searchForm" label-width="80" :inline="true">
      <el-form-item label="建立時間">
        <el-date-picker
          v-model="searchForm.creationTime"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="開始日期"
          end-placeholder="結束日期"
          :picker-options="pickerOptions"
        />
      </el-form-item>
      <el-form-item label="用戶名" prop="UserName">
        <el-input v-model="searchForm.UserName" />
      </el-form-item>
      <el-form-item label="手機" prop="PhoneNumber">
        <el-input v-model="searchForm.PhoneNumber" />
      </el-form-item>
    </el-form>

其中定義了一個pickerOptions 屬性，用於快速選擇日期的，在data裏面增長一個這樣的屬性便可。

      pickerOptions: {
        shortcuts: [{
          text: '最近一週',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一個月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三個月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },

在頁面裏面，咱們定義了一些分頁查詢的處理條件和對象，以下所示。

查詢表單則定義一個單獨的表單對象，以下代碼所示

      searchForm: { // 查詢表單
        UserName: '',
        PhoneNumber: '',
        creationTime: ''
      },

頁面加載準備好，咱們就調用獲取列表的數據便可。

  created() { // 頁面加載後，加載列表數據
    this.getlist()
  },

獲取列表的處理操做以下代碼所示，主要就是準備構建好對應的查詢參數，而後調用UserApi類的接口查詢列表便可。

    getlist() { // 列表數據獲取
      var CreationTimeStart = ''
      if (this.searchForm.creationTime && this.searchForm.creationTime.length > 0) {
        CreationTimeStart = this.parseTime(this.searchForm.creationTime[0], '{y}-{m}-{d}')
      }
      var CreationTimeEnd = ''
      if (this.searchForm.creationTime && this.searchForm.creationTime.length > 1) {
        CreationTimeEnd = this.parseTime(this.searchForm.creationTime[1], '{y}-{m}-{d}')
      }

      var param = { // 構造常規的分頁查詢條件
        SkipCount: (this.pageinfo.pageindex - 1) * this.pageinfo.pagesize,
        MaxResultCount: this.pageinfo.pagesize,
        // 過濾條件
        UserName: this.searchForm.UserName,
        PhoneNumber: this.searchForm.PhoneNumber,
        CreationTimeStart: CreationTimeStart,
        CreationTimeEnd: CreationTimeEnd
      };

      // 獲取列表，綁定到模型上，並修改分頁數量
      this.listLoading = true
      user.GetAll(param).then(data => {
        this.list = data.result.items
        this.pageinfo.total = data.result.totalCount
        this.listLoading = false
      })
    },
    search() { // 查詢列表處理
      this.pageinfo.pageindex = 1;// 重置爲第一頁=
      this.getlist()
    },

經過列表的查詢操做，咱們就能夠把數據獲取到，界面就會獲得及時的更新顯示了

      // 獲取列表，綁定到模型上，並修改分頁數量
      this.listLoading = true
      user.GetAll(param).then(data => {
        this.list = data.result.items
        this.pageinfo.total = data.result.totalCount
        this.listLoading = false
      })

而列表主要就是在界面使用el-table組件進行展現的了，以下圖所示代碼。

el-table綁定了對應的數據，並設置好顯示的格式以及選擇操做事件、行雙擊事件等操做。

而el-table裏面的顯示的列，須要根據咱們返回數據的屬性名稱進行顯示，以下代碼所示。

而若是咱們須要對屬性進行特殊的展現，咱們就須要使用v-if條件或者過濾器進行處理了。以下是根據不一樣內容，構建標籤顯示內容。

      <el-table-column align="center" label="帳號激活" width="80">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.isActive === true" type="success" effect="dark">已激活</el-tag>
          <el-tag v-else type="danger" effect="dark">未激活</el-tag>
        </template>
      </el-table-column>

而對於時間，咱們則能夠使用格式化函數或者過濾器規範顯示的格式內容。

<el-table-column align="center" label="建立時間" width="120" prop="creationTime" :formatter="dateFormat" />

其中 :formatter="dateFormat" 指定了對應的格式化處理函數。

    dateFormat(row, column, cellValue) {
      // this.parseTime是在main.js中的全局掛載函數
      return cellValue ? this.parseTime(cellValue, '{y}-{m}-{d}') : '' // 完整格式：{y}-{m}-{d} {h}-{i}-{s}
    },
    timeFormat(row, column, cellValue) {
      // this.parseTime是在main.js中的全局掛載函數
      return cellValue ? this.parseTime(cellValue, '{y}-{m}-{d} {h}:{i}:{s}') : '' // 完整格式：{y}-{m}-{d} {h}-{i}-{s}
    }

另外，操做列的代碼，主要就是構建一些方法操做的入口，並傳遞對應的變量，如ID值便可。

      <el-table-column align="center" label="操做" width="190">
        <template scope="scope">
          <el-row>
            <el-tooltip effect="light" content="查看" placement="top-start">
              <el-button icon="el-icon-search" type="success" circle size="mini" @click="showView(scope.row.id)" />
            </el-tooltip>
            <el-tooltip effect="light" content="編輯" placement="top-start">
              <el-button icon="el-icon-edit" type="primary" circle size="mini" @click="showEdit(scope.row.id)" />
            </el-tooltip>
            <el-tooltip effect="light" content="刪除" placement="top-start">
              <el-button icon="el-icon-delete" type="danger" circle size="mini" @click="showDelete(scope.row.id)" />
            </el-tooltip>
            <el-tooltip effect="light" content="重置密碼" placement="top-start">
              <el-button icon="el-icon-setting" type="warning" circle size="mini" @click="showSetPass(scope.row.id)" />
            </el-tooltip>
          </el-row>
        </template>
      </el-table-column>

列表的底部分頁處理，也是利用對應的屬性進行顯示便可，並處理分頁變化的事件。

    <div class="block" style="height:70px;">
      <el-pagination
        :current-page="pageinfo.pageindex"
        :page-size="pageinfo.pagesize"
        :total="pageinfo.total"
        :page-sizes="[10,20,30,40]"
        layout="total, sizes, prev, pager, next"
        @size-change="sizeChange"
        @current-change="currentChange"
      />
    </div>

最後完成列表界面代碼，顯示列表界面以下所示。

而對於查看、編輯、新增等對話框，通常咱們須要建立對應的表單屬性，用來承載對應的信息的，如咱們爲了查看信息的須要，建立一個viewForm的對象，以下所示。

      viewForm: { // 查看錶單
        id: '',
        userName: '',
        surname: '',
        name: '',
        emailAddress: '',
        phoneNumber: '',
        ouNames: ''
      },

在查看信息對話框裏面，咱們展現對應的用戶信息，包括基礎信息和相關的關係，以下界面代碼所示。

界面組件經過v-modal進行綁定對應的ViewForm屬性對象便可。

最後，咱們在觸發showView函數裏面，獲取對應的用戶信息，而後展現在界面上便可，showView函數代碼以下所示。

    showView(id) { // 顯示查看對話框處理
      var param = { id: id }
      user.Get(param).then(data => {
        // console.log(data.result)
        Object.assign(this.viewForm, data.result);

        this.getOuName(id).then(result => {
          this.viewForm.ouNames = result
        })
      })
      this.getFunctionsByUser(id)

      this.isView = true
    },

查看界面效果以下所示。

在新增或者編輯處理界面中，咱們修改了數據，都會提交到ABP後端進行錄入或者更新，所以就涉及到數據的回寫處理，而後提示客戶端狀態便可。

下面是保存編輯界面的內容操做。

    saveEdit() { // 保存數據處理
      this.$refs['editForm'].validate(valid => {
        if (valid) {
          // 保存數據
          const form = this.editForm
          user.Update(form).then(data => {
            // console.log(data)
            if (data.success) {
              // 提示信息
              this.msgSuccess('更新成功!')
              // 刷新數據
              this.getlist()
            } else {
              this.msgError('更新失敗：' + data.error)
            }

            this.$refs['editForm'].resetFields()
            // 重置窗口狀態
            this.closeDialog()
          })
        }
      })
    },