ngds-backend-ele/src/views/admin/role.vue

<template>
  <div v-loading="loading">
    <div class="white-box">
      <div class="filter-box">
        <filter-user
          :filter-types.sync="filterTypes"
          :filter-btn-name="$t('common.screen')"
          @select-value="handleFilterUser"
        />
      </div>
      <el-table :data="tableData" stripe style="width: 100%;" :height="tool.getTableHeight()" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="ROLE_NAME" :label="$t('Administrator.role')">
          <template slot-scope="scope">
            <el-tag type="warning" size="small" class="no-border">{{ scope.row.ROLE_NAME }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="REMARK" :label="$t('Administrator.remark')" />
        <el-table-column :label="$t('Administrator.creatUser')">
          <template slot-scope="scope">
            {{ scope.row.CREATE_ADMIN_NAME }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('Administrator.creatAt')">
          <template slot-scope="scope">
            {{ tool.formatDate(scope.row.CREATED_AT) }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('Administrator.updateUser')">
          <template slot-scope="scope">
            {{ scope.row.UPDATE_ADMIN_NAME }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('Administrator.updateAt')">
          <template slot-scope="scope">
            {{ tool.formatDate(scope.row.UPDATED_AT) }}
          </template>
        </el-table-column>
        <el-table-column :fixed="fixedColumn" :label="$t('table.actions')" width="180">
          <template slot-scope="scope">
            <el-dropdown v-if="scope.row.DONT_DEL==='0'&&(permission.hasPermission(`admin/role-permission`)||permission.hasPermission(`admin/role-edit`)||permission.hasPermission(`admin/role-delete`))" size="small" trigger="click" @command="handleRow" @click.stop="">
              <el-button type="primary" size="small">
                {{ $t('common.actionThisData') }}<i class="el-icon-arrow-down el-icon--right" />
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-if="permission.hasPermission(`admin/role-permission`)" :command="`permission|${scope.row.ID}`">{{ $t('permission.permission') }}</el-dropdown-item>
                <!--                <el-dropdown-item :command="`column|${scope.row.ID}`" v-if="permission.hasPermission(`admin/role-column`)">列表字段权限</el-dropdown-item>-->
                <el-dropdown-item v-if="permission.hasPermission(`admin/role-edit`)" :command="`edit|${scope.row.ID}`">{{ $t('table.edit') }}</el-dropdown-item>
                <el-dropdown-item v-if="permission.hasPermission(`admin/role-delete`)" :command="`delete|${scope.row.ID}`">{{ $t('table.delete') }}</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
      <div class="white-box-footer">
        <el-dropdown v-if="permission.hasPermission(`admin/role-delete`)" size="small" trigger="click" @command="muliDelHandle">
          <el-button type="primary" size="small">
            {{ $t('Administrator.selectData') }}<i class="el-icon-arrow-down el-icon--right" />
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="delete">{{ $t('table.delete') }}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-button v-if="permission.hasPermission(`admin/role-add`)" type="primary" size="small" icon="el-icon-plus" @click="onAdd">{{ $t('Administrator.addRole') }}</el-button>
        <pagination :total="totalCount" :page_size="pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
    </div>
  </div>
</template>

<script>
import { deleteRole, adminRole, batchDeleteRole } from '@/api/filter'
import tool from '@/utils/tool'
import FilterUser from '@/components/FilterUser'
import permission from '@/utils/permission'
import Pagination from '@/components/Pagination'
import filterHelper from '@/utils/filterHelper'
import {getOperatingSystem, getScreenWidth} from "@/utils"

export default {
  name: 'Role',
  components: { FilterUser, Pagination },
  data() {
    return {
      fixedColumn:false, // 固定,当手机端不固定,pc固定
      tableData: null,
      loading: true,
      multipleSelection: [],
      currentPage: 1,
      totalPages: 1,
      totalCount: 1,
      pageSize: 20,
      tool: tool,
      permission: permission,
      filterData: null,
      filterTypes: {
        'ROLE_NAME': { isUserTable: false, name: this.$t('Administrator.role') },
        'REMARK': { isUserTable: false, name: this.$t('Administrator.remark') },
        'CREATE_ADMIN_NAME': { isUserTable: false, name: this.$t('Administrator.creatUser') },
        'CREATED_AT': { isUserTable: false, name: this.$t('Administrator.creatAt'), other: 'date' },
        'UPDATE_ADMIN_NAME': { isUserTable: false, name: this.$t('Administrator.updateUser') },
        'UPDATED_AT': { isUserTable: false, name: this.$t('Administrator.updateAt'), other: 'date' }
      },
      filterModel: {}
    }
  },
  created() {

  },
  mounted() {
    this.getData()
    // let system =  getOperatingSystem()
    // if (system == "Android" || system == 'ios') {
    //   this.fixedColumn = false
    // } else {
    //   this.fixedColumn = 'right'
    // }
		this.fixedColumn = getScreenWidth() < 500 ? false : 'right'
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleCurrentChange(page) {
      this.getData(page, this.pageSize)
    },
    handleSizeChange(pageSize) {
      this.getData(this.currentPage, pageSize)
    },
    handleRow(command) {
      const re = command.split('|')
      this.handleCommand(re[0], re[1])
    },
    handleCommand(command, id) {
      if (command === 'edit') {
        this.$router.push({ path: `/admin/role-edit/${id}` })
      } else if (command === 'permission') {
        this.$router.push({ path: `/admin/role-permission/${id}` })
      } else if (command === 'column') {
        this.$router.push({ path: `/admin/role-column/${id}` })
      } else if (command === 'delete') {
        this.delHandle(this, id)
      }
    },
    onAdd() {
      this.$router.push({ path: `/admin/role-add` })
    },
    delHandle(obj, id) {
      obj.$confirm(this.$t('common.deleteTips'), this.$t('common.hint'), {
        confirmButtonText: this.$t('common.confirm'),
        cancelButtonText: this.$t('common.cancel'),
        type: 'warning'
      }).then(() => {
        deleteRole(id).then(response => {
          this.$message({
            message: response.data,
            type: 'success'
          })
          this.getData()
        }).catch(err => {
          console.log('err---------' + err)
        })
      })
    },
    muliDelHandle(command) {
      if (command === 'delete') {
        this.$confirm(this.$t('common.deleteTips'), this.$t('common.hint'), {
          confirmButtonText: this.$t('common.confirm'),
          cancelButtonText: this.$t('common.cancel'),
          type: 'warning'
        }).then(() => {
          const selectedIds = []
          for (const val of this.multipleSelection) {
            selectedIds.push(val.ID)
          }
          batchDeleteRole({
            selected: selectedIds
          }).then(response => {
            this.$message({
              message: response.data,
              type: 'success'
            })
            this.getData()
          }).catch(err => {
            console.log('err---------' + err)
          })
        })
      }
    },
    handleFilterUser(filterData) {
      filterHelper.handleFilterUser(this, filterData)
    },
    handleFilter() {
      this.getData()
    },
    getData(page, pageSize) {
      const filterData = this.filterModel
      const vueObj = this
      const paramsData = Object.assign({
        page: (page === null || page == undefined) ? 1 : page,
        pageSize: (pageSize === null || pageSize == undefined) ? vueObj.pageSize : pageSize
      }, filterData)
      adminRole(paramsData).then(response => {
        vueObj.tableData = response.data.list
        vueObj.currentPage = page
        vueObj.totalPages = parseInt(response.data.totalPages)
        vueObj.totalCount = parseInt(response.data.totalCount)
        vueObj.pageSize = pageSize
        this.loading = false
      }).catch(err => {
        console.log('err=============' + err)
        this.loading = false
      })
    }
  }
}
</script>

<style>
.el-table th > .cell {
  padding-left: 14px !important;
  padding-right: 14px !important;
}

.el-table__fixed-right-patch {
  width: 0px !important;
}
.pagination-container {
  float: right;
  padding: 0px 0px !important;
  margin: 0 0;
}
.white-box-footer .el-dropdown {
  margin-right: 10px;
}
</style>