后台前端修改

This commit is contained in:
linfeng 2022-10-20 15:23:42 +08:00
parent 824b51833f
commit 21500680bc
8 changed files with 386 additions and 885 deletions

View File

@ -1,6 +1,12 @@
===================================================================================================================================
_ _ __ _ _____ _____ __ _ _____ _____ _____ ___ ___ ___ ___ _ _ __ _ _ _____ __ __
| | | | | \ | | | ___| | ____| | \ | | / ___| / ___| / _ \ / |/ | / |/ | | | | | | \ | | | | |_ _| \ \ / /
| | | | | \| | | |__ | |__ | \| | | | | | | | | | / /| /| | / /| /| | | | | | | \| | | | | | \ \/ /
| | | | | |\ | | __| | __| | |\ | | | _ | | | | | | / / |__/ | | / / |__/ | | | | | | | |\ | | | | | \ /
| |___ | | | | \ | | | | |___ | | \ | | |_| | | |___ | |_| | / / | | / / | | | |_| | | | \ | | | | | / /
|_____| |_| |_| \_| |_| |_____| |_| \_| \_____/ \_____| \_____/ /_/ |_| /_/ |_| \_____/ |_| \_| |_| |_| /_/
==============================================================================================================================================
欢迎使用林风社交论坛项目开源版后端服务
演示站点: https://www.linfeng.tech
欢迎使用林风社交论坛项目开源版后端服务
官网: https://net.linfeng.tech
===================================================================================================================================
==============================================================================================================================================

Binary file not shown.

Before

Width:  |  Height:  |  Size: 142 KiB

After

Width:  |  Height:  |  Size: 95 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 95 KiB

View File

@ -35,8 +35,6 @@ const mainRoutes = {
// 提示: 如需要通过iframe嵌套展示内容, 但不通过tab打开, 请自行创建组件使用iframe处理!
{ path: '/home', component: _import('common/home'), name: 'home', meta: { title: '首页' } },
{ path: '/theme', component: _import('common/theme'), name: 'theme', meta: { title: '主题' } }
// { path: '/demo-echarts', component: _import('demo/echarts'), name: 'demo-echarts', meta: { title: 'demo-echarts', isTab: true } },
// { path: '/demo-ueditor', component: _import('demo/ueditor'), name: 'demo-ueditor', meta: { title: 'demo-ueditor', isTab: true } }
],
beforeEnter (to, from, next) {
let token = Vue.cookie.get('token')

View File

@ -4,16 +4,32 @@
<div class="site-content">
<div class="brand-info">
<h2 class="brand-info__text">林风社交论坛后台系统</h2>
<p class="brand-info__intro">基于Springboot MybatisPlus Shiro Jwt Vue Uniapp Redis MySQL构建的社交app平台</p>
<p class="brand-info__intro">
基于Springboot MybatisPlus Shiro Jwt Vue Uniapp Redis
MySQL构建的社交app平台
</p>
</div>
<div class="login-main">
<h3 class="login-title">管理员登录</h3>
<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" status-icon>
<el-form
:model="dataForm"
:rules="dataRule"
ref="dataForm"
@keyup.enter.native="dataFormSubmit()"
status-icon
>
<el-form-item prop="userName">
<el-input v-model="dataForm.userName" placeholder="帐号"></el-input>
<el-input
v-model="dataForm.userName"
placeholder="帐号"
></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input v-model="dataForm.password" type="password" placeholder="密码"></el-input>
<el-input
v-model="dataForm.password"
type="password"
placeholder="密码"
></el-input>
</el-form-item>
<el-form-item prop="captcha">
<el-row :gutter="20">
@ -22,12 +38,17 @@
</el-input>
</el-col>
<el-col :span="10" class="login-captcha">
<img :src="captchaPath" @click="getCaptcha()" alt="">
<img :src="captchaPath" @click="getCaptcha()" alt="" />
</el-col>
</el-row>
</el-form-item>
<el-form-item>
<el-button class="login-btn-submit" type="primary" @click="dataFormSubmit()">登录</el-button>
<el-button
class="login-btn-submit"
type="primary"
@click="dataFormSubmit()"
>登录</el-button
>
</el-form-item>
</el-form>
</div>
@ -37,142 +58,144 @@
</template>
<script>
import { getUUID } from '@/utils'
export default {
data () {
return {
dataForm: {
userName: 'admin',
password: '123456',
uuid: '',
captcha: ''
},
dataRule: {
userName: [
{ required: true, message: '帐号不能为空', trigger: 'blur' }
],
password: [
{ required: true, message: '密码不能为空', trigger: 'blur' }
],
captcha: [
{ required: true, message: '验证码不能为空', trigger: 'blur' }
]
},
captchaPath: ''
}
},
created () {
this.getCaptcha()
},
methods: {
//
dataFormSubmit () {
this.$refs['dataForm'].validate((valid) => {
if (valid) {
this.$http({
url: this.$http.adornUrl('/sys/login'),
method: 'post',
data: this.$http.adornData({
'username': this.dataForm.userName,
'password': this.dataForm.password,
'uuid': this.dataForm.uuid,
'captcha': this.dataForm.captcha
})
}).then(({data}) => {
if (data && data.code === 0) {
this.$cookie.set('token', data.token)
this.$router.replace({ name: 'home' })
} else {
this.getCaptcha()
this.$message.error(data.msg)
}
})
}
})
import { getUUID } from "@/utils";
export default {
data() {
return {
dataForm: {
userName: "admin",
password: "123456",
uuid: "",
captcha: "",
},
//
getCaptcha () {
this.dataForm.uuid = getUUID()
this.captchaPath = this.$http.adornUrl(`/captcha.jpg?uuid=${this.dataForm.uuid}`)
}
}
}
dataRule: {
userName: [
{ required: true, message: "帐号不能为空", trigger: "blur" },
],
password: [
{ required: true, message: "密码不能为空", trigger: "blur" },
],
captcha: [
{ required: true, message: "验证码不能为空", trigger: "blur" },
],
},
captchaPath: "",
};
},
created() {
this.getCaptcha();
},
methods: {
//
dataFormSubmit() {
this.$refs["dataForm"].validate((valid) => {
if (valid) {
this.$http({
url: this.$http.adornUrl("/sys/login"),
method: "post",
data: this.$http.adornData({
username: this.dataForm.userName,
password: this.dataForm.password,
uuid: this.dataForm.uuid,
captcha: this.dataForm.captcha,
}),
}).then(({ data }) => {
if (data && data.code === 0) {
this.$cookie.set("token", data.token);
this.$router.replace({ name: "home" });
} else {
this.getCaptcha();
this.$message.error(data.msg);
}
});
}
});
},
//
getCaptcha() {
this.dataForm.uuid = getUUID();
this.captchaPath = this.$http.adornUrl(
`/captcha.jpg?uuid=${this.dataForm.uuid}`
);
},
},
};
</script>
<style lang="scss">
.site-wrapper.site-page--login {
.site-wrapper.site-page--login {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(38, 50, 56, 0.6);
overflow: hidden;
&:before {
position: fixed;
top: 0;
left: 0;
z-index: -1;
width: 100%;
height: 100%;
content: "";
background-image: url(~@/assets/img/login_bg.jpg);
background-size: cover;
}
.site-content__wrapper {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(38, 50, 56, .6);
padding: 0;
margin: 0;
overflow-x: hidden;
overflow-y: auto;
background-color: transparent;
}
.site-content {
min-height: 100%;
padding: 30px 500px 30px 30px;
}
.brand-info {
margin: 220px 100px 0 90px;
color: #fff;
}
.brand-info__text {
margin: 0 0 22px 0;
font-size: 48px;
font-weight: 400;
text-transform: uppercase;
}
.brand-info__intro {
margin: 10px 0;
font-size: 16px;
line-height: 1.58;
opacity: 0.6;
}
.login-main {
position: absolute;
top: 0;
right: 0;
padding: 150px 60px 180px;
width: 470px;
min-height: 100%;
background-color: #fff;
}
.login-title {
font-size: 16px;
}
.login-captcha {
overflow: hidden;
&:before {
position: fixed;
top: 0;
left: 0;
z-index: -1;
> img {
width: 100%;
height: 100%;
content: "";
background-image: url(~@/assets/img/timg.jpg);
background-size: cover;
}
.site-content__wrapper {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 0;
margin: 0;
overflow-x: hidden;
overflow-y: auto;
background-color: transparent;
}
.site-content {
min-height: 100%;
padding: 30px 500px 30px 30px;
}
.brand-info {
margin: 220px 100px 0 90px;
color: #fff;
}
.brand-info__text {
margin: 0 0 22px 0;
font-size: 48px;
font-weight: 400;
text-transform : uppercase;
}
.brand-info__intro {
margin: 10px 0;
font-size: 16px;
line-height: 1.58;
opacity: .6;
}
.login-main {
position: absolute;
top: 0;
right: 0;
padding: 150px 60px 180px;
width: 470px;
min-height: 100%;
background-color: #fff;
}
.login-title {
font-size: 16px;
}
.login-captcha {
overflow: hidden;
> img {
width: 100%;
cursor: pointer;
}
}
.login-btn-submit {
width: 100%;
margin-top: 38px;
cursor: pointer;
}
}
.login-btn-submit {
width: 100%;
margin-top: 38px;
}
}
</style>

View File

@ -1,472 +0,0 @@
<template>
<div class="mod-demo-echarts">
<el-alert
title="提示:"
type="warning"
:closable="false">
<div slot-scope="description">
<p class="el-alert__description">1. 此Demo只提供ECharts官方使用文档入门部署和体验功能具体使用请参考http://echarts.baidu.com/index.html</p>
</div>
</el-alert>
<el-row :gutter="20">
<el-col :span="24">
<el-card>
<div id="J_chartLineBox" class="chart-box"></div>
</el-card>
</el-col>
<el-col :span="24">
<el-card>
<div id="J_chartBarBox" class="chart-box"></div>
</el-card>
</el-col>
<el-col :span="12">
<el-card>
<div id="J_chartPieBox" class="chart-box"></div>
</el-card>
</el-col>
<el-col :span="12">
<el-card>
<div id="J_chartScatterBox" class="chart-box"></div>
</el-card>
</el-col>
</el-row>
</div>
</template>
<script>
import echarts from 'echarts'
export default {
data () {
return {
chartLine: null,
chartBar: null,
chartPie: null,
chartScatter: null
}
},
mounted () {
this.initChartLine()
this.initChartBar()
this.initChartPie()
this.initChartScatter()
},
activated () {
// echartresize, resize, bug
if (this.chartLine) {
this.chartLine.resize()
}
if (this.chartBar) {
this.chartBar.resize()
}
if (this.chartPie) {
this.chartPie.resize()
}
if (this.chartScatter) {
this.chartScatter.resize()
}
},
methods: {
// 线
initChartLine () {
var option = {
'title': {
'text': '折线图堆叠'
},
'tooltip': {
'trigger': 'axis'
},
'legend': {
'data': [ '邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎' ]
},
'grid': {
'left': '3%',
'right': '4%',
'bottom': '3%',
'containLabel': true
},
'toolbox': {
'feature': {
'saveAsImage': { }
}
},
'xAxis': {
'type': 'category',
'boundaryGap': false,
'data': [ '周一', '周二', '周三', '周四', '周五', '周六', '周日' ]
},
'yAxis': {
'type': 'value'
},
'series': [
{
'name': '邮件营销',
'type': 'line',
'stack': '总量',
'data': [ 120, 132, 101, 134, 90, 230, 210 ]
},
{
'name': '联盟广告',
'type': 'line',
'stack': '总量',
'data': [ 220, 182, 191, 234, 290, 330, 310 ]
},
{
'name': '视频广告',
'type': 'line',
'stack': '总量',
'data': [ 150, 232, 201, 154, 190, 330, 410 ]
},
{
'name': '直接访问',
'type': 'line',
'stack': '总量',
'data': [ 320, 332, 301, 334, 390, 330, 320 ]
},
{
'name': '搜索引擎',
'type': 'line',
'stack': '总量',
'data': [ 820, 932, 901, 934, 1290, 1330, 1320 ]
}
]
}
this.chartLine = echarts.init(document.getElementById('J_chartLineBox'))
this.chartLine.setOption(option)
window.addEventListener('resize', () => {
this.chartLine.resize()
})
},
//
initChartBar () {
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎', '百度', '谷歌', '必应', '其他']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '直接访问',
type: 'bar',
data: [320, 332, 301, 334, 390, 330, 320]
},
{
name: '邮件营销',
type: 'bar',
stack: '广告',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '联盟广告',
type: 'bar',
stack: '广告',
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: '视频广告',
type: 'bar',
stack: '广告',
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: '搜索引擎',
type: 'bar',
data: [862, 1018, 964, 1026, 1679, 1600, 1570],
markLine: {
lineStyle: {
normal: {
type: 'dashed'
}
},
data: [
[{ type: 'min' }, { type: 'max' }]
]
}
},
{
name: '百度',
type: 'bar',
barWidth: 5,
stack: '搜索引擎',
data: [620, 732, 701, 734, 1090, 1130, 1120]
},
{
name: '谷歌',
type: 'bar',
stack: '搜索引擎',
data: [120, 132, 101, 134, 290, 230, 220]
},
{
name: '必应',
type: 'bar',
stack: '搜索引擎',
data: [60, 72, 71, 74, 190, 130, 110]
},
{
name: '其他',
type: 'bar',
stack: '搜索引擎',
data: [62, 82, 91, 84, 109, 110, 120]
}
]
}
this.chartBar = echarts.init(document.getElementById('J_chartBarBox'))
this.chartBar.setOption(option)
window.addEventListener('resize', () => {
this.chartBar.resize()
})
},
//
initChartPie () {
var option = {
backgroundColor: '#2c343c',
title: {
text: 'Customized Pie',
left: 'center',
top: 20,
textStyle: {
color: '#ccc'
}
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
visualMap: {
show: false,
min: 80,
max: 600,
inRange: {
colorLightness: [0, 1]
}
},
series: [
{
name: '访问来源',
type: 'pie',
radius: '55%',
center: ['50%', '50%'],
data: [
{ value: 335, name: '直接访问' },
{ value: 310, name: '邮件营销' },
{ value: 274, name: '联盟广告' },
{ value: 235, name: '视频广告' },
{ value: 400, name: '搜索引擎' }
].sort(function (a, b) { return a.value - b.value }),
roseType: 'radius',
label: {
normal: {
textStyle: {
color: 'rgba(255, 255, 255, 0.3)'
}
}
},
labelLine: {
normal: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.3)'
},
smooth: 0.2,
length: 10,
length2: 20
}
},
itemStyle: {
normal: {
color: '#c23531',
shadowBlur: 200,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
animationType: 'scale',
animationEasing: 'elasticOut',
animationDelay: function (idx) {
return Math.random() * 200
}
}
]
}
this.chartPie = echarts.init(document.getElementById('J_chartPieBox'))
this.chartPie.setOption(option)
window.addEventListener('resize', () => {
this.chartPie.resize()
})
},
//
initChartScatter () {
var option = {
backgroundColor: new echarts.graphic.RadialGradient(0.3, 0.3, 0.8, [
{ offset: 0, color: '#f7f8fa' },
{ offset: 1, color: '#cdd0d5' }
]),
title: {
text: '1990 与 2015 年各国家人均寿命与 GDP'
},
legend: {
right: 10,
data: ['1990', '2015']
},
xAxis: {
splitLine: {
lineStyle: {
type: 'dashed'
}
}
},
yAxis: {
splitLine: {
lineStyle: {
type: 'dashed'
}
},
scale: true
},
series: [
{
name: '1990',
data: [
[28604, 77, 17096869, 'Australia', 1990],
[31163, 77.4, 27662440, 'Canada', 1990],
[1516, 68, 1154605773, 'China', 1990],
[13670, 74.7, 10582082, 'Cuba', 1990],
[28599, 75, 4986705, 'Finland', 1990],
[29476, 77.1, 56943299, 'France', 1990],
[31476, 75.4, 78958237, 'Germany', 1990],
[28666, 78.1, 254830, 'Iceland', 1990],
[1777, 57.7, 870601776, 'India', 1990],
[29550, 79.1, 122249285, 'Japan', 1990],
[2076, 67.9, 20194354, 'North Korea', 1990],
[12087, 72, 42972254, 'South Korea', 1990],
[24021, 75.4, 3397534, 'New Zealand', 1990],
[43296, 76.8, 4240375, 'Norway', 1990],
[10088, 70.8, 38195258, 'Poland', 1990],
[19349, 69.6, 147568552, 'Russia', 1990],
[10670, 67.3, 53994605, 'Turkey', 1990],
[26424, 75.7, 57110117, 'United Kingdom', 1990],
[37062, 75.4, 252847810, 'United States', 1990]
],
type: 'scatter',
symbolSize: function (data) {
return Math.sqrt(data[2]) / 5e2
},
label: {
emphasis: {
show: true,
formatter: function (param) {
return param.data[3]
},
position: 'top'
}
},
itemStyle: {
normal: {
shadowBlur: 10,
shadowColor: 'rgba(120, 36, 50, 0.5)',
shadowOffsetY: 5,
color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
{ offset: 0, color: 'rgb(251, 118, 123)' },
{ offset: 1, color: 'rgb(204, 46, 72)' }
])
}
}
},
{
name: '2015',
data: [
[44056, 81.8, 23968973, 'Australia', 2015],
[43294, 81.7, 35939927, 'Canada', 2015],
[13334, 76.9, 1376048943, 'China', 2015],
[21291, 78.5, 11389562, 'Cuba', 2015],
[38923, 80.8, 5503457, 'Finland', 2015],
[37599, 81.9, 64395345, 'France', 2015],
[44053, 81.1, 80688545, 'Germany', 2015],
[42182, 82.8, 329425, 'Iceland', 2015],
[5903, 66.8, 1311050527, 'India', 2015],
[36162, 83.5, 126573481, 'Japan', 2015],
[1390, 71.4, 25155317, 'North Korea', 2015],
[34644, 80.7, 50293439, 'South Korea', 2015],
[34186, 80.6, 4528526, 'New Zealand', 2015],
[64304, 81.6, 5210967, 'Norway', 2015],
[24787, 77.3, 38611794, 'Poland', 2015],
[23038, 73.13, 143456918, 'Russia', 2015],
[19360, 76.5, 78665830, 'Turkey', 2015],
[38225, 81.4, 64715810, 'United Kingdom', 2015],
[53354, 79.1, 321773631, 'United States', 2015]
],
type: 'scatter',
symbolSize: function (data) {
return Math.sqrt(data[2]) / 5e2
},
label: {
emphasis: {
show: true,
formatter: function (param) {
return param.data[3]
},
position: 'top'
}
},
itemStyle: {
normal: {
shadowBlur: 10,
shadowColor: 'rgba(25, 100, 150, 0.5)',
shadowOffsetY: 5,
color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
{ offset: 0, color: 'rgb(129, 227, 238)' },
{ offset: 1, color: 'rgb(25, 183, 207)' }
])
}
}
}
]
}
this.chartPie = echarts.init(document.getElementById('J_chartScatterBox'))
this.chartPie.setOption(option)
window.addEventListener('resize', () => {
this.chartPie.resize()
})
}
}
}
</script>
<style lang="scss">
.mod-demo-echarts {
> .el-alert {
margin-bottom: 10px;
}
> .el-row {
margin-top: -10px;
margin-bottom: -10px;
.el-col {
padding-top: 10px;
padding-bottom: 10px;
}
}
.chart-box {
min-height: 400px;
}
}
</style>

View File

@ -1,65 +0,0 @@
<template>
<div class="mod-demo-ueditor">
<el-alert
title="提示:"
type="warning"
:closable="false">
<div slot-scope="description">
<p class="el-alert__description">1. 此Demo只提供UEditor官方使用文档入门部署和体验功能具体使用请参考http://fex.baidu.com/ueditor/</p>
<p class="el-alert__description">2. 浏览器控制台报错请求后台配置项http错误上传功能将不能正常使用此错需要后台提供上传接口方法赋值给serverUrl属性</p>
</div>
</el-alert>
<script :id="ueId" class="ueditor-box" type="text/plain" style="width: 100%; height: 260px;">hello world!</script>
<!-- 获取内容 -->
<p><el-button @click="getContent()">获得内容</el-button></p>
<el-dialog
title="内容"
:visible.sync="dialogVisible"
:append-to-body="true">
{{ ueContent }}
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="dialogVisible = false"> </el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import ueditor from 'ueditor'
export default {
data () {
return {
ue: null,
ueId: `J_ueditorBox_${new Date().getTime()}`,
ueContent: '',
dialogVisible: false
}
},
mounted () {
this.ue = ueditor.getEditor(this.ueId, {
// serverUrl: '', //
zIndex: 3000
})
},
methods: {
getContent () {
this.dialogVisible = true
this.ue.ready(() => {
this.ueContent = this.ue.getContent()
})
}
}
}
</script>
<style lang="scss">
.mod-demo-ueditor {
position: relative;
z-index: 510;
> .el-alert {
margin-bottom: 10px;
}
}
</style>

View File

@ -1,61 +1,56 @@
<template>
<div class="mod-config">
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
<!-- <el-form-item>
<el-input v-model="dataForm.key" placeholder="参数名" clearable></el-input>
</el-form-item>
<el-form-item>
<el-button @click="getDataList()">查询</el-button>
<el-button v-if="isAuth('admin:user:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
<el-button v-if="isAuth('admin:user:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
</el-form-item> -->
<el-form
:inline="true"
:model="dataForm"
@keyup.enter.native="getDataList()"
>
</el-form>
<el-table
:data="dataList"
border
v-loading="dataListLoading"
@selection-change="selectionChangeHandle"
style="width: 100%;">
style="width: 100%"
>
<el-table-column
type="selection"
header-align="center"
align="center"
width="50">
width="50"
>
</el-table-column>
<el-table-column
prop="uid"
header-align="center"
align="center"
label="用户id">
label="用户id"
>
</el-table-column>
<el-table-column
prop="username"
header-align="center"
align="center"
label="用户名">
label="用户名"
>
</el-table-column>
<!-- <el-table-column
prop="groupId"
header-align="center"
align="center"
label="用户组">
</el-table-column> -->
<el-table-column
prop="avatar"
header-align="center"
align="center"
label="头像"
width="100">
<template slot-scope="scope">
<img style="width: 40px; height: 40px" :src="scope.row.avatar" />
width="100"
>
<template slot-scope="scope">
<img style="width: 40px; height: 40px" :src="scope.row.avatar" />
</template>
</el-table-column>
<el-table-column
prop="gender"
header-align="center"
align="center"
label="性别">
label="性别"
>
<template slot-scope="scope">
<div>
<el-tag v-if="scope.row.gender == 1" type="success"></el-tag>
@ -63,42 +58,41 @@
<el-tag v-else type="danger"></el-tag>
</div>
</template>
</el-table-column>
<!-- <el-table-column
prop="province"
header-align="center"
align="center"
label="省份">
</el-table-column> -->
<el-table-column
prop="city"
header-align="center"
align="center"
label="城市">
label="城市"
>
</el-table-column>
<el-table-column
prop="mobile"
header-align="center"
align="center"
label="手机号">
label="手机号"
>
</el-table-column>
<el-table-column
prop="openid"
header-align="center"
align="center"
width="150"
label="小程序openid">
label="小程序openid"
>
</el-table-column>
<el-table-column
prop="status"
header-align="center"
align="center"
label="状态">
label="状态"
>
<template slot-scope="scope">
<div>
<el-tag v-if="scope.row.status == 0" type="success">正常</el-tag>
<el-tag v-else-if="scope.row.status == 1" type="warning">禁用</el-tag>
<el-tag v-else-if="scope.row.status == 1" type="warning"
>禁用</el-tag
>
</div>
</template>
</el-table-column>
@ -106,64 +100,72 @@
prop="intro"
header-align="center"
align="center"
label="个性签名">
</el-table-column>
<!-- <el-table-column
prop="integral"
header-align="center"
align="center"
label="积分">
</el-table-column> -->
<el-table-column
prop="lastLoginIp"
header-align="center"
align="center"
label="最后登录ip">
label="个性签名"
>
</el-table-column>
<el-table-column
prop="tagStr"
header-align="center"
align="center"
label="用户标签">
label="用户标签"
>
</el-table-column>
<el-table-column
prop="type"
header-align="center"
align="center"
label="用户类型">
label="用户类型"
>
<template slot-scope="scope">
<div>
<el-tag v-if="scope.row.type == 1" type="success">官方账号</el-tag>
<el-tag v-else-if="scope.row.type == 0">普通用户</el-tag>
<el-tag v-else type="danger">马甲虚拟用户</el-tag>
<el-tag v-else type="danger">虚拟用户</el-tag>
</div>
</template>
</el-table-column>
<el-table-column
prop="updateTime"
header-align="center"
align="center"
label="更新时间">
label="更新时间"
>
</el-table-column>
<el-table-column
prop="createTime"
header-align="center"
align="center"
label="创建时间">
label="创建时间"
>
</el-table-column>
<el-table-column
fixed="right"
header-align="center"
align="center"
width="150"
label="操作">
label="操作"
>
<template slot-scope="scope">
<el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.uid)">修改</el-button>
<el-button v-if="scope.row.status == 0" type="text" size="small" @click="banHandle(scope.row.uid)">禁用</el-button>
<el-button v-if="scope.row.status == 1" type="text" size="small" @click="openBanHandle(scope.row.uid)">解禁</el-button>
<!-- <el-button type="text" size="small" @click="deleteHandle(scope.row.uid)">删除</el-button> -->
<el-button
type="text"
size="small"
@click="addOrUpdateHandle(scope.row.uid)"
>修改</el-button
>
<el-button
v-if="scope.row.status == 0"
type="text"
size="small"
@click="banHandle(scope.row.uid)"
>禁用</el-button
>
<el-button
v-if="scope.row.status == 1"
type="text"
size="small"
@click="openBanHandle(scope.row.uid)"
>解禁</el-button
>
</template>
</el-table-column>
</el-table>
@ -174,168 +176,177 @@
:page-sizes="[10, 20, 50, 100]"
:page-size="pageSize"
:total="totalPage"
layout="total, sizes, prev, pager, next, jumper">
layout="total, sizes, prev, pager, next, jumper"
>
</el-pagination>
<!-- 弹窗, 新增 / 修改 -->
<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
<add-or-update
v-if="addOrUpdateVisible"
ref="addOrUpdate"
@refreshDataList="getDataList"
></add-or-update>
</div>
</template>
<script>
import AddOrUpdate from './user-add-or-update'
export default {
data () {
return {
dataForm: {
key: ''
},
dataList: [],
pageIndex: 1,
pageSize: 10,
totalPage: 0,
dataListLoading: false,
dataListSelections: [],
addOrUpdateVisible: false
}
import AddOrUpdate from "./user-add-or-update";
export default {
data() {
return {
dataForm: {
key: "",
},
dataList: [],
pageIndex: 1,
pageSize: 10,
totalPage: 0,
dataListLoading: false,
dataListSelections: [],
addOrUpdateVisible: false,
};
},
components: {
AddOrUpdate,
},
activated() {
this.getDataList();
},
methods: {
//
getDataList() {
this.dataListLoading = true;
this.$http({
url: this.$http.adornUrl("/admin/user/list"),
method: "get",
params: this.$http.adornParams({
page: this.pageIndex,
limit: this.pageSize,
key: this.dataForm.key,
}),
}).then(({ data }) => {
if (data && data.code === 0) {
this.dataList = data.page.list;
this.totalPage = data.page.totalCount;
} else {
this.dataList = [];
this.totalPage = 0;
}
this.dataListLoading = false;
});
},
components: {
AddOrUpdate
//
sizeChangeHandle(val) {
this.pageSize = val;
this.pageIndex = 1;
this.getDataList();
},
activated () {
this.getDataList()
//
currentChangeHandle(val) {
this.pageIndex = val;
this.getDataList();
},
methods: {
//
getDataList () {
this.dataListLoading = true
//
selectionChangeHandle(val) {
this.dataListSelections = val;
},
// /
addOrUpdateHandle(id) {
this.addOrUpdateVisible = true;
this.$nextTick(() => {
this.$refs.addOrUpdate.init(id);
});
},
//
deleteHandle(id) {
var ids = id
? [id]
: this.dataListSelections.map((item) => {
return item.uid;
});
this.$confirm(
`确定对[id=${ids.join(",")}]进行[${id ? "删除" : "批量删除"}]操作?`,
"提示",
{
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}
).then(() => {
this.$http({
url: this.$http.adornUrl('/admin/user/list'),
method: 'get',
params: this.$http.adornParams({
'page': this.pageIndex,
'limit': this.pageSize,
'key': this.dataForm.key
})
}).then(({data}) => {
url: this.$http.adornUrl("/admin/user/delete"),
method: "post",
data: this.$http.adornData(ids, false),
}).then(({ data }) => {
if (data && data.code === 0) {
this.dataList = data.page.list
this.totalPage = data.page.totalCount
this.$message({
message: "操作成功",
type: "success",
duration: 1500,
onClose: () => {
this.getDataList();
},
});
} else {
this.dataList = []
this.totalPage = 0
this.$message.error(data.msg);
}
this.dataListLoading = false
})
},
//
sizeChangeHandle (val) {
this.pageSize = val
this.pageIndex = 1
this.getDataList()
},
//
currentChangeHandle (val) {
this.pageIndex = val
this.getDataList()
},
//
selectionChangeHandle (val) {
this.dataListSelections = val
},
// /
addOrUpdateHandle (id) {
this.addOrUpdateVisible = true
this.$nextTick(() => {
this.$refs.addOrUpdate.init(id)
})
},
//
deleteHandle (id) {
var ids = id ? [id] : this.dataListSelections.map(item => {
return item.uid
})
this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$http({
url: this.$http.adornUrl('/admin/user/delete'),
method: 'post',
data: this.$http.adornData(ids, false)
}).then(({data}) => {
if (data && data.code === 0) {
this.$message({
message: '操作成功',
type: 'success',
duration: 1500,
onClose: () => {
this.getDataList()
}
})
} else {
this.$message.error(data.msg)
}
})
})
},
//
banHandle (id) {
this.$confirm(`确定对该用户禁用操作?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$http({
url: this.$http.adornUrl(`/admin/user/ban/${id}`),
method: 'get',
params: this.$http.adornParams()
}).then(({data}) => {
if (data && data.code === 0) {
this.$message({
message: '操作成功',
type: 'success',
duration: 1500,
onClose: () => {
this.getDataList()
}
})
} else {
this.$message.error(data.msg)
}
})
})
},
});
});
},
//
banHandle(id) {
this.$confirm(`确定对该用户禁用操作?`, "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}).then(() => {
this.$http({
url: this.$http.adornUrl(`/admin/user/ban/${id}`),
method: "get",
params: this.$http.adornParams(),
}).then(({ data }) => {
if (data && data.code === 0) {
this.$message({
message: "操作成功",
type: "success",
duration: 1500,
onClose: () => {
this.getDataList();
},
});
} else {
this.$message.error(data.msg);
}
});
});
},
//
openBanHandle (id) {
this.$confirm(`确定对该用户解除禁用操作?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$http({
url: this.$http.adornUrl(`/admin/user/openBan/${id}`),
method: 'get',
params: this.$http.adornParams()
}).then(({data}) => {
if (data && data.code === 0) {
this.$message({
message: '操作成功',
type: 'success',
duration: 1500,
onClose: () => {
this.getDataList()
}
})
} else {
this.$message.error(data.msg)
}
})
})
},
}
}
//
openBanHandle(id) {
this.$confirm(`确定对该用户解除禁用操作?`, "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}).then(() => {
this.$http({
url: this.$http.adornUrl(`/admin/user/openBan/${id}`),
method: "get",
params: this.$http.adornParams(),
}).then(({ data }) => {
if (data && data.code === 0) {
this.$message({
message: "操作成功",
type: "success",
duration: 1500,
onClose: () => {
this.getDataList();
},
});
} else {
this.$message.error(data.msg);
}
});
});
},
},
};
</script>