一、创建操作记录展示视图
在根目录下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-pickerv-model="searchParams.create_time"type="date"placeholder="请选择日期"value-format="yyyy-MM-dd"></el-date-picker></el-form-item><el-form-item><el-selectv-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-tableref="resTable":data="list"row-key="id"highlight-current-rowmax-height="750"default-expand-allstyle="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.listthis.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.datathis.resTemp = Object.assign({}, row)this.resTemp.token_menu_type = row.menu_name + row.token_typethis.dialogDetails = truethis.$nextTick(() => {this.$refs['resForm'].clearValidate()})})},// 每页条数切换handleSizeChange(val) {this.currentSize = valthis.getList()},// 页数切换handleCurrentChange(val) {this.currentPage = valthis.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})
}三、提前说明
明天将再新建一个版本，这个版本的后端管理框架，到此可以结束咯。下周一或者下周二进行一个总结。
和端口映射)
