群控系统服务端开发模式-应用开发-前端操作记录功能展示

一、创建操作记录展示视图

        在根目录下src文件夹下views文件夹下permission文件夹下创建token文件夹，在token文件夹下，新建index.vue文件，代码如下：

<template>
    <div class="app-container">
        <div class="filter-container" style="float:left;">
            <el-form :inline="true" :model="searchParams" class="demo-form-inline">
                <el-form-item>
                    <el-input v-model="searchParams.username" style="width: 160px;" placeholder="请输入账号名称" clearable />
                </el-form-item>
                <el-form-item>
                    <el-date-picker
                            v-model="searchParams.create_time"
                            type="date"
                            placeholder="请选择日期"
                            value-format="yyyy-MM-dd"
                    >
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-select
                            v-model="searchParams.token_type"
                            placeholder="请选择操作类型"
                    >
                        <el-option v-for="item in tokenType" :key="item.id" :label="item.title" :value="item.id"/>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button class="search-btn el-button--infoSearch" type="primary" @click="search()">搜索</el-button>
                    <el-button class="search-btn el-button--infoSearch" style="background:#F2F6FC;" @click="clearSearch">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="filter-container" style="float:right;">
            <el-button class="filter-item" style="margin-left: 10px;" @click="search(currentPage)">刷新</el-button>
        </div>
        <el-table
                ref="resTable"
                :data="list"
                row-key="id"
                highlight-current-row
                max-height="750"
                default-expand-all
                style="width: 100%;margin-top:10px;"
                border
                :default-sort="{prop: 'id', order: 'descending'}"
        >
            <el-table-column type="selection" width="50" align="center" />
            <el-table-column align="center" label="ID" sortable prop="id">
                <template slot-scope="{row}">
                    <span>{{ row.id }}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="具体操作">
                <template slot-scope="{row}">
                    <span>{{ row.menu_name }}{{ row.token_type }}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="操作账号">
                <template slot-scope="{row}">
                    <span>{{ row.username }}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="操作时间">
                <template slot-scope="{row}">
                    <span>{{ row.login_time }}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="操作">
                <template slot-scope="{row}">
                    <el-button v-if="$store.getters.butts.includes('ParamDepartmentIndexDetails')" size="mini" @click="handleDetails(row.id)" type="info">详情</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="block">
            <el-pagination
                    :hide-on-single-page="true"
                    :current-page="currentPage"
                    :page-sizes="pageSizes"
                    :page-size="currentSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="dataTotal"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
            />
        </div>
        <transition name="dialog-fade">
            <el-dialog :visible.sync="dialogDetails" title="详情" :close-on-click-modal="false" :close-on-press-escape="false">
                <el-form ref="resForm" :model="resTemp" label-position="right" label-width="100px">
                    <el-form-item label="操作账号">
                        <el-input v-model="resTemp.username" placeholder="请填写操作账号" disabled />
                    </el-form-item>
                    <el-form-item label="操作类型">
                        <el-input v-model="resTemp.token_menu_type" placeholder="请填写操作类型" disabled />
                    </el-form-item>
                    <el-form-item label="操作Token">
                        <el-input v-model="resTemp.token" placeholder="请填写操作Token" disabled />
                    </el-form-item>
                    <el-form-item label="登录时随机码">
                        <el-input v-model="resTemp.random_number" placeholder="请填写登录时随机码" disabled />
                    </el-form-item>
                    <el-form-item label="创建日期">
                        <el-input v-model="resTemp.create_time" placeholder="请填写创建日期" disabled />
                    </el-form-item>
                    <el-form-item label="创建时间">
                        <el-input v-model="resTemp.login_time" placeholder="请填写创建时间" disabled />
                    </el-form-item>
                    <el-form-item label="过期时间">
                        <el-input v-model="resTemp.expire_time" placeholder="请填写过期时间" disabled />
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogDetails=false">取消</el-button>
                </div>
            </el-dialog>
        </transition>
    </div>
</template>
<script>
    import { getInfo, getList } from '@/api/permission/token'
    export default {
        name: 'PermissionTokenIndex', // 名空间
        // 初始化数据
        data() {
            return {
                list: [], // 初始化管理员列表
                tokenType:[
                    {'id':1,'title':'登录'},
                    {'id':2,'title':'退出'},
                    {'id':3,'title':'自动退出'},
                    {'id':4,'title':'列表'},
                    {'id':5,'title':'所有'},
                    {'id':6,'title':'详情'},
                    {'id':7,'title':'保存'},
                    {'id':8,'title':'启禁用'},
                    {'id':9,'title':'删除'},
                    {'id':10,'title':'获取个人资料'},
                    {'id':11,'title':'修改个人资料'},
                    {'id':12,'title':'获取菜单权限'},
                    {'id':13,'title':'上传文件'}
                ], // 初始化操作类型
                pageSizes: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 200, 300, 400, 500],
                currentPage: 1, // 当前页数
                currentSize: 10, // 每页条数
                dataTotal: 0, // 总数据
                searchParams: {
                    username: '',
                    create_time: '',
                    token_type: ''
                },
                // 要提交数据
                resTemp: {
                    id: 0, // 0 添加 >0 编辑
                    token_menu_type: '',
                    token: '',
                    random_number: '',
                    create_time: '',
                    login_time: '',
                    expire_time: '',
                    username: ''
                },
                dialogDetails: false
            }
        },
        // 初始化执行的
        created() {
            this.getList()// 获取管理员数据
        },
        // 所有的方法都需要放到这个里面
        methods: {
            // 搜索
            search() {
                this.getList(1)
            },
            // 管理员数据 --异步
            async getList(page = 0) {
                const params = {
                    currentPage: page === 0 ? this.currentPage : page,
                    currentSize: this.currentSize,
                    ...this.searchParams
                }
                await getList(params).then(res => {
                    this.list = res.data.list
                    this.dataTotal = res.data.meat.total * 1
                })
            },
            // 清除搜索功能
            clearSearch() {
                this.searchParams = {
                    username: '',
                    create_time: '',
                    token_type: ''
                }
                this.getList()
            },
            // 详情
            handleDetails(id){
                getInfo({ id: id }).then(res => {
                    const row = res.data
                    this.resTemp = Object.assign({}, row)
                    this.resTemp.token_menu_type = row.menu_name + row.token_type
                    this.dialogDetails = true
                    this.$nextTick(() => {
                        this.$refs['resForm'].clearValidate()
                    })
                })
            },
            // 每页条数切换
            handleSizeChange(val) {
                this.currentSize = val
                this.getList()
            },
            // 页数切换
            handleCurrentChange(val) {
                this.currentPage = val
                this.getList()
            }
        }
    }
</script>
<style lang="scss" scoped>
    .app-container {
        padding:10px;
        .roles-table {
            margin-top: 30px;
        }
        .permission-tree {
            margin-bottom: 30px;
        }
    }
    .el-image-viewer__close{
        color: #fff;
    }
    .roleId .el-select{
        width:100%;
    }
</style>

二、创建操作记录API数据

        在根目录下src文件夹下api文件夹下permission文件夹下创建操作记录api文件并命名为token.js，代码如下：

import request from '@/utils/request'
// 列表
export function getList(params) {
    return request({
        url: '/permission/token/get_list',
        method: 'get',
        params:params
    })
}
// 所有
export function getAll() {
    return request({
        url: '/permission/token/get_all',
        method: 'post'
    })
}
// 获取
export function getInfo(data) {
    return request({
        url: '/permission/token/get_info',
        method: 'post',
        data
    })
}

三、提前说明

        明天将再新建一个版本，这个版本的后端管理框架，到此可以结束咯。下周一或者下周二进行一个总结。