Skip to content

R
rs-cloud-platform-ui
Commit be09d5fe authored by lixy's avatar lixy
Browse files
Options

用户管理

parent 5b1f28d9
Hide whitespace changes
Inline Side-by-side
Showing with 567 additions and 3 deletions
index.html
View file @ be09d5fe
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit"> <meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>管理平台</title> <title>人民星云管理后台</title>
</head> </head>
<body> <body>
......
src/api/userManagement/index.js 0 → 100644
View file @ be09d5fe
import fetch from 'utils/fetch';
/**
* 用户列表
*/
export function appUsersManageList(query) {
return fetch({
url: '/api/admin/appUsersManage/findAll',
method: 'post',
data: query
});
}
/**
* 用户禁用、启用
*/
export function updateStatus(query) {
return fetch({
url: '/api/admin/appUsersManage/updateStatus',
method: 'post',
data: query
});
}
/**
* 发票列表
*/
export function userInvoiceList(query) {
return fetch({
url: '/api/website/userInvoice/getList',
method: 'get',
data: query
});
}
/**
* 用户地址列表
*/
export function userAddressList(query) {
return fetch({
url: '/api/website/userAddress/getList',
method: 'get',
data: query
});
}
src/router/index.js
View file @ be09d5fe
...@@ -123,6 +123,19 @@ export const asyncRouterMap = [{ ...@@ -123,6 +123,19 @@ export const asyncRouterMap = [{
authority: 'applicationCate' authority: 'applicationCate'
}], }],
}, },
{
path: '/userManagement',
component: Layout,
name: '用户管理',
icon: 'setting',
authority: 'userManagement',
children: [{
path: 'userList',
component: _import('userManagement/index'),
name: '用户列表',
authority: 'applicationList'
}]
},
{ {
path: '/webSiteManagement', path: '/webSiteManagement',
component: Layout, component: Layout,
...@@ -160,5 +173,6 @@ export const asyncRouterMap = [{ ...@@ -160,5 +173,6 @@ export const asyncRouterMap = [{
component: _import('webSiteManagement/aboutUs/index'), component: _import('webSiteManagement/aboutUs/index'),
name: '关于我们', name: '关于我们',
authority: 'aboutUs', authority: 'aboutUs',
}] }],
}];
\ No newline at end of file }];
src/views/userManagement/addressListDialog.vue 0 → 100644
View file @ be09d5fe
<template>
<div class="address-main">
<el-dialog :visible.sync="isVisible" title="查看地址" @close="closeDialog">
<el-scrollbar id="resultScroll" ref="myScrollbar" style="height: 400px;overflow-y:auto;overflow-x: hidden;">
<div class="addr-item" v-for="item in list" :key="item.id">
<div class="flex-aic-jcb addr-user-info">
<div class="flex-aic">
<span style="width: 200px;margin-right: 20px;" class="ellipsis">收货人：{{item.consigneeName}}</span>
<span style="width: 200px;">手机：{{item.consigneePhone}}</span>
</div>
<div v-if="item.label" style="color: #0A84FF;font-size: 12px;background: #D9EAFA;border-radius: 2px;padding: 2px 5px;">{{item.label}}</div>
</div>
<div class="flex-aic-jcb">
<span style="margin-top: 10px;" class="ellipsis-2">地址：{{item.province}}{{item.city}}{{item.town}}{{item.consigneeAddress}}</span>
</div>
</div>
<div style="color: #666;font-size: 12px;text-align: center;" v-if="finished">没有更多数据了</div>
</el-scrollbar>
</el-dialog>
</div>
</template>
<script type="javascript">
import { userAddressList } from 'api/userManagement/index'
export default {
name: 'userManagement',
components: {},
data() {
return {
list: [],
finished: false, // 是否已加载全部
isVisible: false,
listQuery: {
page: 1,
limit: 20,
},
}
},
mounted() {
this.isVisible = true
this.getAddressList()
// 监听滚动事件
this.$nextTick(() => {
$('#resultScroll')[0].addEventListener('scroll', this.handleScroll, true)
})
},
methods:{
/**
* 关闭弹窗
*/
closeDialog(){
this.$emit('addressEvent', false)
},
/**
* 滚动监听
*/
handleScroll(){
var that = this
var sh = that.$refs['myScrollbar'].$refs['wrap'].scrollHeight // 滚动条高度
var st = that.$refs['myScrollbar'].$refs['wrap'].scrollTop // 滚动条距离顶部的距离
var ch = that.$refs['myScrollbar'].$refs['wrap'].clientHeight // 滚动条外容器的高度
if (st + ch >= sh) {
//到底了-业务逻辑
console.log(st)
this.listQuery.page = this.listQuery.page + 1
if(!this.finished){
that.getAddressList()
}
}
},
/**
* 获取发票列表
*/
getAddressList(){
let _this = this
userAddressList(this.listQuery).then(response => {
if(response.status == 200){
let a = response.data.data
if (0 == a.length || _this.listQuery.page > response.data.totalPage) {
_this.finished = true;
return;
}
var e = _this.listQuery.page == 1 ? [] : _this.list;
a.map(function(item) {
e.push(item);
})
_this.list = e;
} else {
this.$notify({
title: '失败',
message: response.message,
type: 'error',
duration: 2000
})
}
})
},
}
}
</script>
<style lang="scss">
.address-main{
.el-scrollbar__wrap{
overflow-y: auto;
overflow-x: hidden;
}
.addr-item{
background: #f5f6fa;
border: 1px solid #f5f6fa;
padding: 16px;
margin-right: 25px;
color: #413434;
font-size: 13px;
margin-bottom: 24px;
}
}
</style>
src/views/userManagement/index.vue 0 → 100644
View file @ be09d5fe
<template>
<div class="user-list">
<!-- 头部 -->
<div class="head">
<div>用户列表</div>
<!-- <el-button type="primary" @click="addItem">添加banner</el-button>-->
</div>
<!-- 主体 -->
<div class="app-container calendar-list-container">
<!-- 条件搜索 -->
<div class="filter-container">
<el-form :inline="true" :model="listQuery" class="demo-form-inline">
<el-form-item label="昵称">
<el-input v-model="listQuery.realName" placeholder="请输入昵称"></el-input>
</el-form-item>
<el-form-item label="手机号">
<el-input v-model="listQuery.mobile" placeholder="请输入手机号"></el-input>
</el-form-item>
<el-form-item label="用户ID">
<el-input v-model="listQuery.userId" placeholder="请输入用户ID"></el-input>
</el-form-item>
<el-form-item label="创建时间">
<el-date-picker
v-model="times"
type="datetimerange"
value-format="timestamp"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
</el-form-item>
<el-form-item label="状态">
<el-select class="filter-item" v-model="listQuery.status" placeholder="请选择">
<el-option :key="undefined" label="全部" :value="undefined"></el-option>
<el-option :key="0" label="启用" :value="0"></el-option>
<el-option :key="1" label="禁用" :value="1"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" plain @click="handleSearch">搜索</el-button>
<el-button type="primary" plain @click="handleCleanSearch">清除搜索</el-button>
</el-form-item>
</el-form>
</div>
<!-- 数据列表 -->
<el-table :data="list" v-loading.body="listLoading" border fit highlight-current-row style="width: 100%">
<el-table-column align="center" label="用户ID" width="120">
<template slot-scope="scope">
{{scope.row.userId}}
</template>
</el-table-column>
<el-table-column align="center" label="昵称" prop="nickname"></el-table-column>
<el-table-column align="center" label="手机号" prop="username"></el-table-column>
<el-table-column align="center" label="头像">
<template slot-scope="scope">
<el-image style="width: 40px;height: 40px;border-radius: 50%;" :src="scope.row.headimgurl" :preview-src-list="[scope.row.headimgurl]"></el-image>
<!-- <img style="width: 40px;height: 40px;border-radius: 50%;" :src="scope.row.headimgurl" @click.stop="showPreview(scope.row.headimgurl)"/>-->
</template>
</el-table-column>
<el-table-column align="center" label="创建时间">
<template slot-scope="scope">
{{scope.row.crtTimeStr}}
</template>
</el-table-column>
<el-table-column align="center" label="状态">
<template slot-scope="scope">
<!-- 根据状态获取对应中文 -->
{{ getStatus(scope.row.status) }}
</template>
</el-table-column>
<el-table-column align="center" label="操作" width="300">
<template slot-scope="scope">
<el-button type="primary" size="mini" @click="handleInvoice(scope.row)">查看发票</el-button>
<el-button type="primary" size="mini" @click="handleAddress(scope.row)">查看地址</el-button>
<el-button :type="scope.row.status === 1 ? 'info': 'warning'" size="mini" @click="changeStatus(scope.row)">{{scope.row.status === 0 ? '禁用': '启用'}}</el-button>
</template>
</el-table-column>
</el-table>
<div v-show="!listLoading" class="pagination-container">
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
:current-page.sync="listQuery.page" :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit"
layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
</div>
</div>
<!-- 发票弹窗 -->
<invoice-list-dialog v-if="invoiceDialogVisible" v-on:invoiceEvent="invoiceEvent"></invoice-list-dialog>
<!-- 地址弹窗 -->
<address-list-dialog v-if="addressDialogVisible" v-on:addressEvent="addressEvent"></address-list-dialog>
</div>
</template>
<script type="javascript">
import { appUsersManageList, updateStatus } from 'api/userManagement/index'
import {timestamp2Date} from '@/utils/dateUtils';
import invoiceListDialog from "./invoiceListDialog";
import addressListDialog from "./addressListDialog";
export default {
name: 'userManagement',
components: {
invoiceListDialog,
addressListDialog
},
computed:{
getStatus(status) {
return (status) => {
let a = ""
switch(status) {
case 0: a = '启用'; break;
case 1: a = '禁用'; break;
default: a = '未知';break
}
return a
}
},
},
data() {
return {
times: [],
listLoading: false,
list: [], // 用户列表
total: 0, // 总条数
listQuery: {
page: 1,
limit: 20,
mobile: undefined, // 手机号
realName: undefined, // 真实姓名
userId: undefined, // 用户id
status: undefined, // 0：启用 1：禁用
registrationTimeBegin: undefined, // 开始时间
registrationTimeEnd: undefined // 结束时间
},
invoiceDialogVisible: false, // 查看发票弹窗
addressDialogVisible: false // 查看地址弹窗
}
},
created() {
this.getList()
},
methods:{
/**
* 搜索
*/
handleSearch(){
this.listQuery.page = 1
this.getList() // 获取用户列表
},
/**
* 查看发票-返回界面
*/
invoiceEvent(){
this.invoiceDialogVisible = false
},
/**
* 查看地址-返回界面
*/
addressEvent(){
this.addressDialogVisible = false
},
/**
* 启用、禁用
*/
changeStatus(row){
this.$confirm("是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(() => {
// 0、启用，1、禁用
updateStatus({id: row.userId, status: row.status == 1?0:1}).then((response) => {
if(response.status == 200){
this.$notify({
title: "成功",
message: "操作成功",
type: "success",
duration: 2000
});
this.getList()
} else {
this.$notify({
title: '失败',
message: response.message,
type: 'error',
duration: 2000
})
}
});
}).catch(()=>{})
},
/**
* 查看发票
*/
handleInvoice(){
this.invoiceDialogVisible = true
},
/**
* 查看地址
*/
handleAddress(){
this.addressDialogVisible = true
},
/**
* 清除搜索
*/
handleCleanSearch(){
this.listQuery = {
page: 1,
limit: 20,
mobile: undefined, // 手机号
realName: undefined, // 真实姓名
userId: undefined, // 用户id
status: undefined, // 0：启用 1：禁用
registrationTimeBegin: undefined, // 开始时间
registrationTimeEnd: undefined // 结束时间
}
this.times = []
this.getList() // 获取用户列表
},
/**
* 获取用户列表
*/
getList(){
if(this.times.length>0){
this.listQuery.registrationTimeBegin = this.times[0]
this.listQuery.registrationTimeEnd = this.times[1]
}
this.listLoading = true
appUsersManageList(this.listQuery).then(response => {
if(response.status == 200){
response.data.list.map(function(item){
item.crtTimeStr = timestamp2Date(item.createTime);
})
this.list = response.data.list;
this.total = response.data.total;
this.listLoading = false;
} else {
this.listLoading = false
this.$notify({
title: '失败',
message: response.message,
type: 'error',
duration: 2000
})
}
})
},
handleSizeChange(val) {
this.listQuery.limit = val;
this.getList();
},
handleCurrentChange(val) {
this.listQuery.page = val;
this.getList();
}
}
}
</script>
<style lang="scss">
.user-list {
.head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 20px;
width: 100%;
border-bottom: 1px solid #e6e6e6;
height: 57px;
}
}
</style>
src/views/userManagement/invoiceListDialog.vue 0 → 100644
View file @ be09d5fe
<template>
<div class="invoice-main">
<el-dialog :visible.sync="isVisible" title="查看发票" @close="closeDialog">
<el-scrollbar id="resultScroll" ref="myScrollbar" style="height: 400px;overflow-y:auto;overflow-x: hidden;">
<div class="invoice-item" v-for="item in list" :key="item.id">
<div class="flex-aic-jcb">
<div class="invoice-item-text">{{item.titleType==1?'公司名称':"个人名称"}}：{{item.titleName}}</div>
<div style="color: #0A84FF;font-size: 12px;background: #D9EAFA;border-radius: 2px;padding: 2px 5px;">{{item.type==1?'普通发票':'增值税专用发票'}}-{{item.titleType==1?'企业':'个人'}}</div>
</div>
<div class="invoice-item-text" v-if="item.titleType==1 && item.type == 2">地址：{{item.province}}{{item.city}}{{item.town}}{{item.address}}</div>
<div class="invoice-item-text" v-if="item.titleType==1 && item.type == 2">电话：{{item.phone}}</div>
<div class="invoice-item-text" v-if="item.titleType==1 && item.type == 2">开户行：{{item.openBank}}</div>
<div class="invoice-item-text" v-if="item.titleType==1 && item.type == 2">账号：{{item.account}}</div>
<div class="invoice-item-text" v-if="item.titleType==1">税号：{{item.taxCode}}</div>
</div>
<div style="color: #666;font-size: 12px;text-align: center;" v-if="finished">没有更多数据了</div>
</el-scrollbar>
</el-dialog>
</div>
</template>
<script type="javascript">
import { userInvoiceList } from 'api/userManagement/index'
export default {
name: 'userManagement',
components: {},
data() {
return {
list: [],
finished: false, // 是否已加载全部
isVisible: false,
listQuery: {
page: 1,
limit: 20,
},
}
},
mounted() {
this.isVisible = true
this.getInvoiceList()
// 监听滚动事件
this.$nextTick(() => {
$('#resultScroll')[0].addEventListener('scroll', this.handleScroll, true)
})
},
methods:{
/**
* 关闭弹窗
*/
closeDialog(){
this.$emit('invoiceEvent', false)
},
/**
* 滚动监听
*/
handleScroll(){
var that = this
var sh = that.$refs['myScrollbar'].$refs['wrap'].scrollHeight // 滚动条高度
var st = that.$refs['myScrollbar'].$refs['wrap'].scrollTop // 滚动条距离顶部的距离
var ch = that.$refs['myScrollbar'].$refs['wrap'].clientHeight // 滚动条外容器的高度
if (st + ch >= sh) {
//到底了-业务逻辑
console.log(st)
this.listQuery.page = this.listQuery.page + 1
if(!this.finished){
that.getInvoiceList()
}
}
},
/**
* 获取发票列表
*/
getInvoiceList(){
let _this = this
userInvoiceList(this.listQuery).then(response => {
if(response.status == 200){
let a = response.data.data
if (0 == a.length || _this.listQuery.page > response.data.totalPage) {
_this.finished = true;
return;
}
var e = _this.listQuery.page == 1 ? [] : _this.list;
a.map(function(item) {
e.push(item);
})
_this.list = e;
} else {
this.$notify({
title: '失败',
message: response.message,
type: 'error',
duration: 2000
})
}
})
},
}
}
</script>
<style lang="scss">
.invoice-main{
.el-scrollbar__wrap{
overflow-y: auto;
overflow-x: hidden;
}
.invoice-item{
background: #f5f6fa;
border: 1px solid #f5f6fa;
padding: 16px;
margin-right: 25px;
margin-bottom: 24px;
color: #413434;
font-size: 13px;
.invoice-item-text{
line-height: 26px;
}
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment