这是一张用户管理的页面
给后来者留了删除和同意的列表
下面是几个注意点
1.在跳转页面的时候,用router来跳转 使用了路径所以用query的方式来传参数
2.在接受页面接收数据时候是要用route(少一个R)来接受的,如果没有注意就会有undefind的问题
/**
* 用户菜单 用户管理 userList
*/
<template>
<div>
<!-- 面包屑导航 -->
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>用户管理</el-breadcrumb-item>
</el-breadcrumb>
<!-- 搜索筛选 -->
<el-form :inline="true" :model="formInline" class="user-search">
<el-form-item label="搜索:">
<el-input size="small" v-model="formInline.deptName" placeholder="输入用户名称"></el-input>
</el-form-item>
<el-form-item>
<el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
<el-button size="small" type="primary" icon="el-icon-plus" @click="handleEdit()">添加</el-button>
</el-form-item>
</el-form>
<!--列表-->
<el-table size="small" :data="listData" highlight-current-row v-loading="loading" border element-loading-text="拼命加载中" style="width: 100%;">
<el-table-column align="center" type="selection" width="60">
</el-table-column>
<el-table-column sortable prop="userid" label="用户序号id" width="110">
</el-table-column>
<el-table-column sortable prop="openid" label="微信账号" width="100">
</el-table-column>
<el-table-column sortable prop="nickname" label="昵称" width="200">
</el-table-column>
<el-table-column sortable prop="signature" label="个性签名" width="200">
</el-table-column>
<el-table-column align="center" label="操作" min-width="300">
<template slot-scope="scope">
<!-- <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button> -->
<el-button size="mini" type="warning" @click="jump(scope.row.id)">查看</el-button>
<el-button size="mini" type="danger" @click="deleteUser(scope.$index, scope.row)">撤销</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页组件 -->
<!-- <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination> -->
<!-- 编辑界面 -->
<!-- <el-dialog :title="title" :visible.sync="editFormVisible" width="30%" @click="closeDialog">
<el-form label-width="120px" :model="editForm" :rules="rules" ref="editForm">
<el-form-item label="部门名称" prop="deptName">
<el-input size="small" v-model="editForm.deptName" auto-complete="off" placeholder="请输入部门名称"></el-input>
</el-form-item>
<el-form-item label="部门代码" prop="deptNo">
<el-input size="small" v-model="editForm.deptNo" auto-complete="off" placeholder="请输入部门代码"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button size="small" @click="closeDialog">取消</el-button>
<el-button size="small" type="primary" :loading="loading" class="title" @click="submitForm('editForm')">保存</el-button>
</div>
</el-dialog> -->
</div>
</template>
<script>
import { deptList, deptSave, deptDelete } from '../../api/userMG'
import Pagination from '../../components/Pagination'
export default {
data() {
return {
nshow: true, //switch开启
fshow: false, //switch关闭
loading: false, //是显示加载
editFormVisible: false, //控制编辑页面显示与隐藏
title: '添加',
editForm: {
deptId: '',
deptName: '',
deptNo: '',
token: localStorage.getItem('logintoken')
},
// rules表单验证
// rules: {
// deptName: [
// { required: true, message: '请输入部门名称', trigger: 'blur' }
// ],
// deptNo: [{ required: true, message: '请输入部门代码', trigger: 'blur' }]
// },
formInline: {
page: 1,
limit: 10,
varLable: '',
varName: '',
token: localStorage.getItem('logintoken')
},
// 删除部门
seletedata: {
ids: '',
token: localStorage.getItem('logintoken')
},
userparm: [], //搜索权限
listData: [], //用户数据
// 分页参数
pageparm: {
currentPage: 1,
pageSize: 10,
total: 11
}
}
},
// 注册组件
components: {
Pagination
},
/**
* 数据发生改变
*/
/**
* 创建完毕
*/
created() {
this.getdata(this.formInline)
},
/**
* 里面的方法只有被调用才会执行
*/
methods: {
// 获取公司列表
getdata(parameter) {
this.loading = true
// 模拟数据开始
let res = {
code: 0,
msg: null,
count: 20,
data: [
{
userid:1,
openid:1,
nickname:"奥特曼",
signature: "no signature"
},
{
userid:2,
openid:2,
nickname:"怪兽",
signature: "no signature"
},
{
userid:3,
openid:4,
nickname:"超人",
signature: "no signature"
},
{
userid:5,
openid:5,
nickname:"蝙蝠侠",
signature: "no signature"
},
{
userid:100,
openid:120,
nickname:"小丑",
signature: "no signature"
}
]
}
this.loading = false
this.listData = res.data
this.pageparm.currentPage = this.formInline.page
this.pageparm.pageSize = this.formInline.limit
this.pageparm.total = res.count
// 模拟数据结束
/***
* 调用接口,注释上面模拟数据 取消下面注释
*/
// deptList(parameter)
// .then(res => {
// this.loading = false
// if (res.success == false) {
// this.$message({
// type: 'info',
// message: res.msg
// })
// } else {
// this.listData = res.data
// // 分页赋值
// this.pageparm.currentPage = this.formInline.page
// this.pageparm.pageSize = this.formInline.limit
// this.pageparm.total = res.count
// }
// })
// .catch(err => {
// this.loading = false
// this.$message.error('菜单加载失败,请稍后再试!')
// })
},
// 分页插件事件
callFather(parm) {
this.formInline.page = parm.currentPage
this.formInline.limit = parm.pageSize
this.getdata(this.formInline)
},
// 搜索事件
search() {
this.getdata(this.formInline)
},
//删除公司
deleteUser(index,row){
this.$confirm('是否确认删除该人员','提示',{
confirmButtonText:'确定',
cancelButtonText:'取消',
type:'warning'
}).then(() =>{
console.log(index);
this.$message({
type:'success',
message:'删除了该人员'
});
}).catch(() =>{
this.$message({
type:'info',
message:'已取消删除该人员'
})
})
},
jump(userId){
this.$router.push({path:"/User/userDetail", query:{userId:userId}})
}
}
}
</script>
<style scoped>
.user-search {
margin-top: 20px;
}
.userRole {
width: 100%;
}
</style>
下面是用户详情页面
/**
- 用户菜单 个人详情页面
*/
首页 个人详情页面
用户序号:
1
用户昵称:
Coding_ni
微信序号:
1123423123134
个性签名:
1
<el-table size="small" :data="listData" highlight-current-row v-loading="loading" border element-loading-text="拼命加载中" style="width: 100%;" class="partActivity">
<el-table-column align="center" type="selection" width="60">
</el-table-column>
<el-table-column sortable prop="id" label="参与活动序号" width="130">
</el-table-column>
<el-table-column sortable prop="image" label="图片" width="100">
</el-table-column>
<el-table-column sortable prop="originator__nickname" label="发起者昵称" width="200">
</el-table-column>
<el-table-column sortable prop="originator__portrait" label="发起者头像" width="200">
</el-table-column>
</el-table>
<!-- 发起活动列表 -->
<el-table size="small" :data="listData" highlight-current-row v-loading="loading" border element-loading-text="拼命加载中" style="width: 100%;" class="partActivity">
<el-table-column align="center" type="selection" width="60">
</el-table-column>
<el-table-column sortable prop="id" label="发起活动序号" width="130">
</el-table-column>
<el-table-column sortable prop="image" label="图片" width="100">
</el-table-column>
<el-table-column sortable prop="originator__nickname" label="发起者昵称" width="200">
</el-table-column>
<el-table-column sortable prop="originator__portrait" label="发起者头像" width="200">
</el-table-column>
</el-table>