目录
echart统计
main.js import
mounted 获取数据
methods 画表
<script>
import {
http,
channellist,
articlebychannel
} from '../api/api.js'
export default {
mounted() {
this.getdata()
},
methods: {
viewtype(arr1, arr2) {
// 基于准备好的dom，初始化echarts实例
var myChart = this.$echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: '文章统计'
},
tooltip: {},
xAxis: {
data: arr1
},
yAxis: {},
textStyle: {
color: '#fff'
},
series: [{
name: '数量',
type: 'line',
data: arr2
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
},
getdata() {
//开启动画
const loading = this.$loading({
lock: true,
text: 'Loading',
background: 'rgba(0, 0, 0, 0.7)'
});
//获取文章信息
Promise.all([this.$http.get(http + channellist),
this.$http.get(http + articlebychannel)
]).then((data) => {
//分类数据
var typelisty = data[0].data.data
//文章数量
var num = data[1].data.data
//迭代新的数组
//分类数组
var typearr = typelisty.map((i) => {
return i.name
})
//数量数组
var newnum = num.map((i) => {
return i.articles
})
//生成统计图
this.viewtype(typearr, newnum)
//结束动画
setTimeout(() => {
loading.close();
}, 1000);
}, (err) => {
this.$message.error(err.data.message);
})
}
}
}
</script>
ques
var typearr = typelisty.map((i) => {
return i.name
})
//数量数组
var newnum = num.map((i) => {
return i.articles
})
viewtype(arr1, arr2) {
// 基于准备好的dom，初始化echarts实例
var myChart = this.$echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: '文章统计'
},
tooltip: {},
xAxis: {
data: arr1
},
yAxis: {},
textStyle: {
color: '#fff'
},
series: [{
name: '数量',
type: 'line',
data: arr2
}]
};
echarts 封装成了函数
用户管理
mkdir \componets\mgr\mgr.vue
app.vue 获取功能操作信息
api.js 调用
app.vue
//获取操作功能信息
getlist(){
this.$http.get(http + menulist).then((data) => {
var data = data.data.data
var json = {}
//循环父级
for(var i=0;i<data.length;i++){
var child = data[i].children
//循环子级
for(var a=0;a<child.length;a++){
this.$set(json,child[a].url,child[a].children)
}
}
//存储到vuex 中
this.$store.commit('setmenulist',json)
}, (err) => {
this.$message.error(err.data.message);
})
},
获取用户信息列表
el table 格式实例
//获取用户列表
getuserlist(page) {
//开启动画
const loading = this.$loading({
lock: true,
text: 'Loading',
background: 'rgba(0, 0, 0, 0.7)'
});
this.$http.get(http + userlist, {
params: {
page,
limit: 5,
name: this.names
}
}).then((data) => {
if (data.data.msg == '成功') {
this.tableData = data.data.data.records
this.total = data.data.data.total
} else {
this.$message.error(data.data.message);
}
//结束动画
setTimeout(() => {
loading.close();
}, 1000);
}, (err) => {
this.$message.error(err.data.message);
})
}
ques
promise
data meta params 区别
mounted
method
<el-table ref="singleTable" :data="tableData" style="width: 100%" height="300" @cell-click="celltable" :highlight-current-row="true">
<el-table-column type="expand">
<template slot-scope="props">
<el-form label-position="left" inline class="demo-table-expand">
<el-form-item label="昵称">
<span>{{ props.row.name}}</span>
</el-form-item>
<el-form-item label="账号">
<span>{{ props.row.account }}</span>
</el-form-item>
<el-form-item label="状态">
<span>{{ props.row.statusName }}</span>
</el-form-item>
<el-form-item label="部门">
<span>{{ props.row.deptName }}</span>
</el-form-item>
<el-form-item label="生日">
<span>{{ props.row.birthday}}</span>
</el-form-item>
<el-form-item label="创建时间">
<span>{{ props.row.createTime }}</span>
</el-form-item>
<el-form-item label="性别">
<span>{{ props.row.sexName }}</span>
</el-form-item>
<el-form-item label="手机号">
<span>{{ props.row.phone }}</span>
</el-form-item>
<el-form-item label="邮箱号">
<span>{{ props.row.email }}</span>
</el-form-item>
</el-form>
</template>
</el-table-column>
<el-table-column label="昵称" prop="name">
</el-table-column>
<el-table-column label="账号" prop="account">
</el-table-column>
<el-table-column label="状态" prop="statusName">
</el-table-column>
</el-table>
管理页分页
pagination
<div v-if="total">
<el-pagination background layout="prev, pager, next" :page-size="5" :total="total" @current-change="pagetype">
</el-pagination>
</div>
methods
//页码发生改变时触发
pagetype(page) {
this.page = page
this.getuserlist(page)
},
Form表单实现搜索
mgr.vue
<el-row id="" style="padding: 10px 0;">
<el-col :span="18">
<el-input v-model="names" placeholder="用户名字"></el-input>
</el-col>
<el-col :span="6" style="padding-left: 15px;">
<el-button type="primary" @click="getuserlist(1)">搜索</el-button>
<el-button type="primary" @click="clears">重置</el-button>
</el-col>
</el-row>
重置
//重置
clears() {
this.names = ''
this.getuserlist(1)
},
功能按钮管理验证
//点击选中的用户
celltable(row) {
this.tablerow = row
},
//对话框关闭回调
showbtn(type) {
this.buttontype[type] = false
this.getuserlist(this.page)
this.tablerow = ''
},
//统一管理按钮点击事件
btn(a) {
if (a == 'mgrAdd') {
this.buttontype[a] = true
} else {
if (this.tablerow == '') {
this.$message.error('请选择要操作的用户');
} else {
if (a == 'mgrFreeze') {
if (this.tablerow.statusName == '冻结') {
this.$message.error('当前用户已经是冻结状态哟');
} else {
this.buttontype[a] = true
}
} else if (a == 'mgrUnfreeze') {
if (this.tablerow.statusName == '启用') {
this.$message.error('当前用户已经是启用状态哟');
} else {
this.buttontype[a] = true
}
} else {
this.buttontype[a] = true
}
}
}
},
验证状态值，来决定是什么状态
添加用户组件
mgr 的子组件 mgradd.vue
<template>
<div>
<el-dialog title="添加用户" :visible.sync="thistype" @close="fun(tname)">
<el-form ref="form" :model="form" label-width="80px" v-if="deptidarr">
<!--账户-->
<el-form-item label="账号">
<el-input v-model="form.account"></el-input>
</el-form-item>
<!--密码-->
<el-form-item label="密码">
<el-input v-model="form.password"></el-input>
</el-form-item>
<!--昵称-->
<el-form-item label="昵称">
<el-input v-model="form.name"></el-input>
</el-form-item>
<!--生日-->
<el-form-item label="生日">
<el-date-picker type="date" placeholder="选择日期" v-model="form.birthday" style="width: 100%;"></el-date-picker>
</el-form-item>
<!--性别-->
<el-form-item label="性别">
<el-radio-group v-model="form.sex">
<el-radio label="1">男</el-radio>
<el-radio label="2">女</el-radio>
</el-radio-group>
</el-form-item>
<!--邮箱-->
<el-form-item label="邮箱">
<el-input v-model="form.email"></el-input>
</el-form-item>
<!--电话-->
<el-form-item label="电话">
<el-input v-model="form.phone"></el-input>
</el-form-item>
<!--部门-->
<el-form-item label="部门">
<el-cascader v-model="form.deptid" :options="deptidarr" :show-all-levels="false" :props="props"></el-cascader>
</el-form-item>
<!--状态-->
<el-form-item label="状态">
<el-radio-group v-model="form.status">
<el-radio label="1">启用</el-radio>
<el-radio label="2">禁用</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="upuser">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { http, deptlist, user } from '../../api/api.js'
export default {
props: ['type', 'fun', 'tname'],
data() {
return {
thistype: this.type, //模态框状态
form: { //数据
account: '', //账号
password: '', //密码
name: '', //昵称
birthday: '', //生日
sex: "1", //性别
email: '', //邮箱
phone: '', //电话
deptid: '', //部门id
status: "1", // 状态
},
deptidarr: '', //部门信息
props: { //连级选择配置
value: 'id',
label: 'simplename',
children: 'children'
}
}
},
mounted() {
this.getdeptlist()
},
methods: {
upuser() {
//添加用户
var type = true
for(var i in this.form) {
if(this.form[i] == '') {
type = false
}
}
if(type) {
this.form.deptid = this.form.deptid[this.form.deptid.length - 1]
this.form.birthday = this.settimes(this.form.birthday)
this.$http.post(http + user, this.form, {
emulateJSON: true
}).then((data) => {
console.log(data.data)
if(data.data.msg == '成功') {
this.thistype = false
for(var i in this.form) {
this.form[i] = ''
}
} else {
this.$message.error(data.data.msg);
}
}, (err) => {
this.$message.error(err.data.message);
// location.href = './login.html'
})
} else {
this.$message.error('请补全信息');
}
},
settimes(time) {
//处理时间格式类型
var time = new Date(time)
return time.getFullYear() + '-' + (time.getMonth() + 1) + '-' + time.getDate()
},
chilrennull(data) {
//处理部门信息
for(var i = 0; i < data.length; i++) {
if(data[i].children.length == 0) {
data[i].children = null
} else {
this.chilrennull(data[i].children)
}
}
return data
},
getdeptlist() {
//获取部门信息
this.$http.get(http + deptlist).then((data) => {
if(data.data.msg == '成功'){
this.deptidarr = this.chilrennull(data.data.data)
}else{
this.$message.error(data.data.msg);
}
// console.log()
}, (err) => {
this.$message.error(err.data.message);
})
}
},
watch: {
type() {
this.thistype = this.type
}
}
}
</script>
</div>
<!--功能组件-->
<mgradd :type="buttontype.mgrAdd" :fun="showbtn" tname="mgrAdd"></mgradd>
<mgredit :type="buttontype.mgrEdit" :fun="showbtn" tname="mgrEdit" :tablerow="tablerow"></mgredit>
<mgrdelete :type="buttontype.mgrDelete" :fun="showbtn" tname="mgrDelete" :tablerow="tablerow"></mgrdelete>
<setrole :type="buttontype.mgrSetRole" :fun="showbtn" tname="mgrSetRole" :tablerow="tablerow"></setrole>
</div>
//对话框关闭回调
showbtn(type) {
this.buttontype[type] = false
this.getuserlist(this.page)
this.tablerow = ''
},
添加用户数据
获取部门信息
Cascader 级联选择器
deptidarr: '', //部门信息
props: { //连级选择配置
value: 'id',
label: 'simplename',
children: 'children'
}
template
<!--部门-->
<el-form-item label="部门">
<el-cascader v-model="form.deptid" :options="deptidarr" :show-all-levels="false" :props="props"></el-cascader>
</el-form-item>
chilrennull(data) {
//处理部门信息
for(var i = 0; i < data.length; i++) {
if(data[i].children.length == 0) {
data[i].children = null
} else {
this.chilrennull(data[i].children)
}
}
return data
},
发送ajax创建用户
upuser() {
//添加用户
var type = true
for(var i in this.form) {
if(this.form[i] == '') {
type = false
}
}
if(type) {//ajax
this.form.deptid = this.form.deptid[this.form.deptid.length - 1]
this.form.birthday = this.settimes(this.form.birthday)
this.$http.post(http + user, this.form, {
emulateJSON: true
}).then((data) => {
console.log(data.data)
if(data.data.msg == '成功') {
this.thistype = false
for(var i in this.form) {
this.form[i] = ''
}
} else {
this.$message.error(data.data.msg);
}
}, (err) => {
this.$message.error(err.data.message);
// location.href = './login.html'
})
} else {
this.$message.error('请补全信息');
}
},
修改用户mgredit
选中用户
watch: {
type() {
this.thistype = this.type
},
tablerow(){
//浅拷贝变为深拷贝
var json = {}
for(var i in this.tablerow){
// this.tablerow[i] = this.tablerow[i].toString()
this.$set(json,i,this.tablerow[i].toString())
}
this.form = json
}
}
发送用户修改数据
问题
浅拷贝改深拷贝
深拷贝开辟一个新的栈，两个对象属完成相同，但是对应两个不同的地址，修改一个对象的属性，不会改变另一个对象的属性
常见的深拷贝方式有：
_.cloneDeep()
jQuery.extend()
JSON.stringify()
手写循环递归
#_.cloneDeep()
分配角色
不同的角色分配不同的权限
setrole
{{typerole}}
router 管理组件 在index.vue
api 管理 接口，获取后暴露出来 $http
store vuex 统一管理数据状态 user 和 menu $store.state.user.info
app.vue 为主业渲染
login.vue 为注册页渲染
<template>
<div>
<el-dialog title="分配角色" :visible.sync="thistype" @close="fun(tname)">
<el-form ref="form" :model="form" label-width="80px" v-if="typerole">
<!--账户-->
<el-form-item label="选择角色">
<el-select v-model="form.roleIds" placeholder="请选择">
<el-option v-for="item in typerole.treeData" :key="item.id" :label="item.name" :value="item.id">
</el-option>
</el-select>
<!-- <el-input v-model="form.account"></el-input>-->
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="upuser">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
watch
//当父级传入的值发生改变，修改对话框的状态
watch: {
type() {
this.thistype = this.type
},
tablerow(){
this.form.roleIds = this.tablerow.roleid
}
}
问题获取不到账号信息的角色 ，统一为id12 的角色
更新状态没用
v-model 绑定 双向的
点击确定修改后，通过相应用户的id，去ajax 请求修改后台数据，将form传过去
if(type) {
this.form.userId = this.tablerow.id
this.$http.get(http + setrole,{
params:this.form
}).then((data) => {
console.log(data.data)
if(data.data.msg == '成功') {
this.thistype = false
}else{
this.$message.error(data.data.msg);
}
}, (err) => {
this.$message.error(err.data.message);
// location.href = './login.html'
})
delete this.form.userId
发送完之后，delete form.userId ，不然会还存在，没能获取或设置，导致其他字段获取数据为空
删除用户
补充
//对话框关闭回调
showbtn(type) {
this.buttontype[type] = false
this.getuserlist(this.page)
this.tablerow = ''
},
对话框关闭后清空被选中状态，不然接下来在没有被选中的状态下，点击修改用户会出现，空的用户信息对话框。
mgrdelete
<template>
<div>
<el-dialog title="删除用户" :visible.sync="thistype" @close="fun(tname)">
<div style="text-align: center;">
你确定要删除用户
<span style="color: deepskyblue;">{{tablerow.name}}</span>
吗？
</div>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="mgrdelete">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import {http,user} from '../../api/api.js'
export default {
props: ['type', 'fun','tablerow','tname'],
data() {
return {
thistype: this.type, //模态框状态
}
},
methods:{
mgrdelete(){
this.$http.delete(http+user,{
params:{
userId:this.tablerow.id
}
}).then((data)=>{
if(data.data.msg == '成功'){
this.thistype = false
}else{
this.$message.error(data.data.msg);
}
},(err)=>{
this.$message.error(err.data.message);
})
}
},
watch: {
type() {
this.thistype = this.type
}
}
}
</script>
对后端请求删除
348
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
