ngds/backendEle/src/views/admin/index.vue

<template>
  <div v-loading="loading">
    <div class="white-box">
      <div class="filter-box">
        <filter-user :filter-types.sync="filterTypes" filter-btn-name="Select"
                     @select-value="handleFilterUser"></filter-user>
      </div>
      <el-table :data="tableData" stripe style="width: 100%;" @selection-change="handleSelectionChange" :height="tool.getTableHeight()">
        <el-table-column type="selection" width="55" :selectable="checkSelectable"></el-table-column>
        <el-table-column label="登录账号" prop="ADMIN_NAME" width="150">
          <template slot-scope="scope">
            <el-tag type="" size="small" class="no-border">{{scope.row.ADMIN_NAME}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="姓名" prop="REAL_NAME" width="150">
          <template slot-scope="scope">
            {{scope.row.REAL_NAME}}
          </template>
        </el-table-column>
        <el-table-column label="备注" prop="REMARK" width="150">
          <template slot-scope="scope">
            {{scope.row.REMARK}}
          </template>
        </el-table-column>
        <el-table-column label="角色" prop="ROLE_NAME" width="150">
          <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 label="是否启用" prop="IS_ENABLE">
          <template slot-scope="scope">
            <el-tag :type="(scope.row.IS_ENABLE==1?'success':'danger')">{{(scope.row.IS_ENABLE==1?'是':'否')}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="登录次数" prop="LOGIN_NUMS">
          <template slot-scope="scope">
            {{scope.row.LOGIN_NUMS}}
          </template>
        </el-table-column>
        <el-table-column label="最后登录IP" prop="LAST_LOGIN_IP" width="150">
          <template slot-scope="scope">
            {{scope.row.LAST_LOGIN_IP}}
          </template>
        </el-table-column>
        <el-table-column label="最后登录时间" width="180">
          <template slot-scope="scope">
            {{tool.formatDate(scope.row.LAST_LOGIN_AT)}}
          </template>
        </el-table-column>
        <el-table-column label="绑定IP" width="250">
          <template slot-scope="scope">
            {{scope.row.BIND_IP}}
          </template>
        </el-table-column>
        <el-table-column label="创建人" width="150">
          <template slot-scope="scope">
            {{scope.row.CREATE_ADMIN_NAME}}
          </template>
        </el-table-column>
        <el-table-column label="创建时间" width="180">
          <template slot-scope="scope">
            {{tool.formatDate(scope.row.CREATED_AT)}}
          </template>
        </el-table-column>
        <el-table-column label="修改人" width="150">
          <template slot-scope="scope">
            {{scope.row.UPDATE_ADMIN_NAME}}
          </template>
        </el-table-column>
        <el-table-column label="修改时间" width="180">
          <template slot-scope="scope">
            {{tool.formatDate(scope.row.UPDATED_AT)}}
          </template>
        </el-table-column>

        <el-table-column fixed="right" label="操作" width="180">
          <template slot-scope="scope">
            <el-dropdown size="small" trigger="click" @command="handleRow" @click.stop="" v-if="scope.row.DONT_DEL!=='1'&&(permission.hasPermission(`admin/edit`)||permission.hasPermission(`admin/admin-delete`))">
              <el-button type="primary" size="small">
                Operate on this data<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item :command="`edit|${scope.row.ID}`" v-if="permission.hasPermission(`admin/edit`)">Edit</el-dropdown-item>
                <el-dropdown-item :command="`delete|${scope.row.ID}`" v-if="permission.hasPermission(`admin/admin-delete`)">Delete</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
      <div class="white-box-footer">
        <el-dropdown size="small" trigger="click" @command="handleMuliDel" v-if="permission.hasPermission(`admin/admin-delete`)">
          <el-button type="primary" size="small">
            Selected data<!--所选数据--><i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="delete">Delete</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-button type="primary" size="small" @click="handleAdd" icon="el-icon-plus" v-show="permission.hasPermission(`admin/add`)">添加管理员</el-button>
        <pagination :total="totalCount" :page_size="pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange"></pagination>
      </div>
    </div>
  </div>
</template>

<script>
    import Vue from 'vue'
    import network from '@/utils/network'
    import tool from '@/utils/tool'
    import store from '@/utils/vuexStore'
    import FilterUser from '@/components/FilterUser'
    import permission from '@/utils/permission'
    import Pagination from '@/components/Pagination'
    import filterHelper from '../../utils/filterHelper'

    export default {
        name: 'dec-level',
        components: {FilterUser,Pagination},
        created () {

        },
        mounted () {
            this.getData()
        },
        data () {
            return {
                tableData: null,
                loading: true,
                multipleSelection: [],
                currentPage: 1,
                totalPages: 1,
                totalCount: 1,
                pageSize: 20,
                tool: tool,
                permission: permission,
                filterData: null,
                filterTypes: {
                    'ADMIN_NAME': {isUserTable: false, name: '登录账号'},
                    'REAL_NAME': {isUserTable: false, name: '姓名'},
                    'REMARK': {isUserTable: false, name: '备注'},
                    'ROLE_NAME': {isUserTable: false, name: '角色'},
                    'IS_ENABLE': {isUserTable: false, name: '是否启用', other: 'yesOrNo'},
                    'LOGIN_NUMS': {isUserTable: false, name: '登录次数'},
                    'LAST_LOGIN_IP': {isUserTable: false, name: '最后登录IP'},
                    'LAST_LOGIN_AT': {isUserTable: false, name: '最后登录时间', other: 'date'},
                    'BIND_IP': {isUserTable: false, name: '绑定IP'},
                    'CREATE_ADMIN_NAME': {isUserTable: false, name: '创建人'},
                    'CREATED_AT': {isUserTable: false, name: '创建时间', other: 'date'},
                    'UPDATE_ADMIN_NAME': {isUserTable: false, name: '修改人'},
                    'UPDATED_AT': {isUserTable: false, name: '修改时间', other: 'date'},
                },
                filterModel: {},
            }
        },
        methods: {
            checkSelectable(row) {
                return row.DONT_DEL !== '1'
            },
            handleSelectionChange (val) {
                this.multipleSelection = val
            },
            handleCurrentChange (page) {
                this.getData(page, this.pageSize)
            },
            handleSizeChange (pageSize) {
                this.getData(this.currentPage, pageSize)
            },
            handleRow (command) {
                let re = command.split('|')
                this.handleCommand(re[0], re[1])
            },
            handleMuliDel (command) {
                if (command === 'delete') {
                    this.delData(this)
                }
            },
            handleAdd () {
                this.$router.push({path: `/admin/add`})
            },
            handleUpdate (row) {
                this.$router.push({path: `/admin/edit/${row.ID}`})
            },
            handleCommand (command, id) {
                if (command === 'edit') {
                    this.$router.push({path: `/admin/edit/${id}`})
                } else if (command === 'delete') {
                    this.delData(this, id)
                }
            },
            handleFilterUser(filterData) {
                filterHelper.handleFilterUser(this, filterData)
            },
            handleFilter() {
                this.getData()
            },
            getData(page, pageSize) {
                let filterData = this.filterModel
                let vueObj = this
                network.getPageData(this, 'admin/index', page, pageSize, filterData, function (response) {
                    vueObj.allData = response
                })
            },
            delData (obj, id = null) {
                obj.$confirm('确定删除选定的数据？', 'Notice', {
                    confirmButtonText: 'confirm', // 确定
                    cancelButtonText: 'cancel', // 取消
                    type: 'warning'
                }).then(() => {
                    let selectedIds = []
                    if (id === null) {
                        for (let val of obj.multipleSelection) {
                            selectedIds.push(val.ID)
                        }
                    } else {
                        selectedIds.push(id)
                    }

                    return network.postData(`admin/admin-delete`, {
                        selected: selectedIds
                    })
                }).then(response => {
                    obj.$message({
                        message: response,
                        type: 'success'
                    })
                    obj.getData()
                }).catch(response => {

                })
            }
        }
    }

</script>

<style scoped>

</style>