AuthorityManagement.vue

<template>
  <div id="main" class="h-all">
    <el-container class="h-all">
      <el-header height = "auto">
        <!-- 条件筛选工具栏 -->
        <div class="header-button-box">
          <el-button v-if="createUserGroupCommand.visible" size = 'mini' icon="el-icon-circle-plus-outline" type="primary"
                     @click="createUserGroup">{{$t("common.createBtn")}}</el-button>
<!--          <el-button v-if="updateUserGroupCommand.visible" size = "mini" class="el-icon-edit" type="primary"-->
<!--                     @click="updateClick">{{$t("common.updateBtn")}}</el-button>-->
          <el-button v-if="deleteUserGroupCommand.visible" size = "mini" class="el-icon-delete" type="danger"
                     @click="deleteClick">{{$t("common.deleteBtn")}}</el-button>
        </div>
      </el-header>
      <!-- table数据表格 -->
      <el-main class="adapt-height-box">
        <el-table
          :empty-text="$t('common.noData')"
          ref="multipleTable"
          :data="userGroupList"
          header-row-class-name="table-header"
          cell-class-name="table-cell"
          class="adapt-height"
          height="auto"
          border
          stripe
          tooltip-effect="dark"
          :highlight-current-row="true"
          @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            :selectable='checkboxDisabled'
            width="28">
          </el-table-column>
          <el-table-column
            prop="usergroupName"
            :label="$t('Security.userGroupName')"
            width="200"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
            prop="description"
            :label="$t('Security.userGroupDescription')"
            width="200"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
            prop="authority"
            :label="$t('Security.functionAuthority')"
            :formatter="authorityFormatter"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
            prop="subnetKey"
            :label="$t('Security.administrativeDomain')"
            :formatter="subnetFormatter"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
            width="60px"
            v-if="updateUserGroupCommand.visible"
            :label="$t('common.operation')">
            <template slot-scope="scope">
              <el-button
                v-if="scope.row.usergroupKey === '1' ? false : true"
                size="mini"
                style="background: #008000"
                :title="$t('common.updateBtn')"
                @click="updateClick(scope.row)">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-bianji"></use>
                </svg>
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
    </el-container>
    <CommandExecuteContext v-bind:commands="commandContext"></CommandExecuteContext>
  </div>
</template>

<script>
import CommandExecuteContext from '../../commands/CommandExecuteContext'
import UserGroupCommands from '../../commands/UserGroupCommands'
import UserGroupService from '../../domain/services/UserGroupService'
import HelperUtil from '../../utils/HelperUtil'
import SubnetService from '../../domain/services/SubnetService'

let curThis = null

export default {
  name: 'AuthorityManagement',
  components: {
    CommandExecuteContext
  },

  // 创建期间
  beforeCreate () {
  },
  // vue加载初始化函数，加载数据
  created: function () {
    curThis = this
    this.getAllUserGroups()
    this.getAllSubnetAuthority()
  },
  mounted () {
  },

  data () {
    return {
      // 命令
      commandContext: {},

      // table参数
      tableHeight: window.innerHeight * 0.7,
      multipleSelection: [],

      // 修改初始化
      updateInitList: [],

      // 删除初始化
      deleteInitList: [],

      // 用户组列表
      userGroupList: [],
      userGroupCollection: {},

      // 全部子网
      subnetList: [],
      subnetCollection: {}
    }
  },

  methods: {
    /**
     * @Description  : handleSelectionChange
     * @author       : ls
     * @date         : 2020/12/22 14:47
     * @param        :
     * @return       :
     */
    handleSelectionChange (val) {
      this.multipleSelection = val
    },

    /**
     * @Description  : clickRow
     * @author       : ls
     * @date         : 2020/12/24 17:20
     * @param        :
     * @return       :
     */
    clickRow (val) {
      let currentRow
      for (let i = 0; i < this.userGroupList.length; i++) {
        if (val.usergroupKey === this.userGroupList[i].usergroupKey) {
          currentRow = i
        }
      }
      if (this.userGroupList[currentRow].editFlag !== 1) {
        this.$refs.multipleTable.toggleRowSelection(val)
      }
    },

    /* ---------------------------界面初始化--------------------------- */

    /***
       * @Description  : 获取全部用户组
       * @author       : zf
       * @date         : 2019/03/21 20:03
       */
    getAllUserGroups: function () {
      let _this = this
      UserGroupService.getAllUserGroups().then(result => {
        // 成功
        _this.userGroupList = Object.values(result)
        _this.userGroupCollection = result
      }).catch(err => {
        // 失败
        _this.InfoTip.errorTip(_this, err)
      })
    },

    /***
       * @Description  : 获取全部管辖范围权限List
       * @author       : zf
       * @date         : 2019/03/14 15:54
       */
    getAllSubnetAuthority: function () {
      let _this = this
      SubnetService.getAllSubnetCollection().then(result => {
        // 成功
        _this.subnetList = Object.values(result)
        _this.subnetCollection = result
      }).catch(err => {
        // 失败
        _this.InfoTip.errorTip(_this, err)
      })
    },

    /* ---------------------------页面显示--------------------------- */

    /***
       * @Description  : 超级用户组权限不能被删除修改
       * @author       : zf
       * @date         : 2019/04/01 15:09
       */
    checkboxDisabled: function (row, rowIndex) {
      let currentIndex
      for (let i = 0; i < this.userGroupList.length; i++) {
        if (this.userGroupList[i].editFlag === 1) {
          currentIndex = i
        }
      }
      if (rowIndex === currentIndex) {
        return false
      } else {
        return true
      }
    },

    /***
       * @Description  : 功能权限过滤
       * @author       : zf
       * @date         : 2019/04/29 14:56
       */
    authorityFormatter: function (row, columns) {
      let result = ''
      if (row.menuFlag === 1) {
        result = this.$t('Security.fullAuthority')
      } else {
        if (row.authority !== null) {
          for (let i = 0; i < row.authority.length; i++) {
            result = result + row.authority[i].authorityNameZH
            if (row.authority[i].editFlag === 0) {
              result = result + '（' + this.$t('Security.editable') + '）'
            }
            if (i !== row.authority.length - 1) {
              result = result + '；'
            }
          }
        }
      }
      return result
    },
    /**
     * @Description  : 子网过滤
     * @author       : ls
     * @date         : 2020/12/28 11:08
     * @param        :
     * @return       :
     */
    subnetFormatter: function (row, columns) {
      let result = ''
      if (row.domainFlag === 1) {
        result = this.$t('Security.fullAuthority')
      } else {
        if (row.subnetKey !== null) {
          for (let i = 0; i < row.subnetKey.length; i++) {
            let flag = 0
            for (let j = 0; j < this.subnetList.length; j++) {
              if (row.subnetKey[i] === this.subnetList[j].subnetKey) {
                result = result + this.subnetList[j].subnetName
                flag = 1
              }
            }
            if (flag === 0) {
              result = result + row.subnetKey[i]
            }
            if (i !== row.subnetKey.length - 1) {
              result = result + '；'
            }
          }
        }
      }
      return result
    },

    /* ---------------------------创建用户组--------------------------- */

    /***
       * @Description  : 点击创建按钮
       * @author       : zf
       * @date         : 2019/03/13 17:37
       */
    createUserGroup: function () {
      // 初始化表单
      this.createUserGroupCommand.execute()
    },
    /* ---------------------------删除用户组--------------------------- */

    /***
       * @Description  : 点击删除按钮
       * @author       : zf
       * @date         : 2019/03/13 17:49
       */
    deleteClick () {
      if (this.multipleSelection.length === 0) {
        this.InfoTip.warningTip(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.DELETE_SELECT_CODE))
      } else {
        this.deleteInitList = []
        for (let i = 0; i < this.multipleSelection.length; i++) {
          // this.deleteInitList.push(this.multipleSelection[i]["usergroupKey"])
          var obj = {'usergroupKey': this.multipleSelection[i]['usergroupKey']}
          this.deleteInitList.push(obj)
        }
        this.deleteUserGroupCommand.execute()
      }
    },

    /* ---------------------------修改选择--------------------------- */
    /**
     * @Description  : updateClick
     * @author       : ls
     * @date         : 2020/12/24 16:07
     * @param        :
     * @return       :
     */
    updateClick (row) {
      this.updateInitList = row
      this.updateUserGroupCommand.execute()
    }
  },

  computed: {
    createUserGroupCommand () {
      return UserGroupCommands.createUserGroupCommand(this.commandContext)
    },
    deleteUserGroupCommand () {
      return UserGroupCommands.deleteUserGroupCommand(this.deleteInitList, this.commandContext)
    },
    updateUserGroupCommand () {
      return UserGroupCommands.updateUserGroupCommand(this.updateInitList, this.commandContext)
    }
  },

  watch: {
    commandContext (newVal, oldVal) {
      if (JSON.stringify(newVal) === '{}') {
        this.getAllUserGroups()
        this.$refs.multipleTable.clearSelection()
      }
      deep: true
    }
  }
}
</script>

<style scoped>

</style>