279 lines
7.4 KiB
Vue
279 lines
7.4 KiB
Vue
<template>
|
|
<div class="allUser-page">
|
|
<person-title>当前位置 :: 所有用户</person-title>
|
|
<div class="allUser-page-cont">
|
|
<div class="findOrder-search">
|
|
<el-form :inline="true" :model="selectData" class="user-findOrder">
|
|
<el-form-item label="用户类型">
|
|
<el-select v-model="selectData.identiyId"
|
|
size="small"
|
|
clearable placeholder="用户类型">
|
|
<el-option label="普通用户" :value="3"></el-option>
|
|
<el-option label="快递员" :value="2"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="请输入">
|
|
<el-input v-model="selectData.username"
|
|
size="small"
|
|
placeholder="用户名" clearable></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="请输入">
|
|
<el-input v-model="selectData.email"
|
|
size="small"
|
|
placeholder="电子邮箱" clearable></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="请输入">
|
|
<el-input v-model="selectData.phone"
|
|
size="small"
|
|
placeholder="手机号码" clearable></el-input>
|
|
</el-form-item>
|
|
<el-button type="primary" v-on:click="queryData()">查询</el-button>
|
|
</el-form>
|
|
</div>
|
|
<el-table
|
|
:data="theUserList"
|
|
class="userOrderList"
|
|
:default-sort="{prop: 'createTime', order: 'descending'}"
|
|
style="width: 100%">
|
|
<div class="emptyTip" slot="empty">
|
|
暂时没有用户信息 , 赶紧去拉人注册吧!
|
|
</div>
|
|
<el-table-column type="expand">
|
|
<template slot-scope="props">
|
|
<el-form label-position="left"
|
|
inline class="userTable demo-table-expand">
|
|
<el-form-item label="编号 :">
|
|
<span>{{ props.row.id }}</span>
|
|
</el-form-item>
|
|
<el-form-item label="用户名 :">
|
|
<span>{{ props.row.username }}</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-item label="性别 :">
|
|
<span>{{ props.row.sex === 1 ? '男' : '女' }}</span>
|
|
</el-form-item>
|
|
<el-form-item label="保密问题 :">
|
|
<span>{{ props.row.ncryptedProble }}</span>
|
|
</el-form-item>
|
|
<el-form-item label="注册时间 :">
|
|
<span v-text="timeChange(props.row.registrationTime)"></span>
|
|
</el-form-item>
|
|
<el-form-item label="生日 :">
|
|
<span>{{ props.row.birthday }}</span>
|
|
</el-form-item>
|
|
</el-form>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
v-for="item in titleList"
|
|
:key='item.id'
|
|
:sortable='item.sortable'
|
|
:label="item.columnTitle"
|
|
:prop="item.prop">
|
|
</el-table-column>
|
|
<el-table-column>
|
|
<template slot="header" slot-scope="scope">操作
|
|
</template>
|
|
<template slot-scope="scope">
|
|
<template v-if="scope.row.identityId==3">
|
|
<el-button
|
|
class="btn-cancel"
|
|
type='success'
|
|
size="medium"
|
|
v-on:click="changUser(scope.row)"
|
|
>设为快递员
|
|
</el-button>
|
|
<!-- handleSuccess(scope.$index, scope.row) -->
|
|
</template>
|
|
<template v-if="scope.row.identityId==2">
|
|
<el-button
|
|
size="medium"
|
|
v-on:click="changUser(scope.row)"
|
|
>设为普通用户
|
|
</el-button>
|
|
</template>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
<div class="pageination-oder">
|
|
<el-pagination
|
|
@size-change="handleSizeChange"
|
|
@current-change="handleCurrentChange"
|
|
:current-page="selectData.page"
|
|
:page-sizes="[10, 50, 80, 100]"
|
|
:page-size="selectData.size"
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
:total="totalOrder">
|
|
</el-pagination>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {getAllAccount, changIdentity} from '../../../api/user'
|
|
import {formData} from '../../../unit/formDate'
|
|
|
|
export default {
|
|
data () {
|
|
return {
|
|
theUserList: [],
|
|
titleList: [
|
|
{id: 1, columnTitle: '用户名', prop: 'username', sortable: true},
|
|
{id: 2, columnTitle: '电话', prop: 'phone', sortable: false},
|
|
{id: 3, columnTitle: '电子邮件', prop: 'email', sortable: false}
|
|
],
|
|
selectData: {
|
|
page: 1,
|
|
size: 10,
|
|
identiyId: '',
|
|
username: '',
|
|
email: '',
|
|
phone: '',
|
|
},
|
|
totalOrder: 0,
|
|
}
|
|
},
|
|
created () {
|
|
this.getAllUser()
|
|
},
|
|
methods: {
|
|
queryData () {
|
|
this.selectData.page = 1
|
|
this.selectData.size = 10
|
|
this.getAllUser()
|
|
},
|
|
changUser (row) {
|
|
let data = {
|
|
id: row.id,
|
|
identity: row.identityId === 2 ? 2 : 3
|
|
}
|
|
changIdentity(data).then(res => {
|
|
console.log(res)
|
|
})
|
|
},
|
|
timeChange (time) {
|
|
return formData(time, 'yyyy-MM-dd hh:mm:ss')
|
|
},
|
|
getAllUser () {
|
|
let loading = this.$loading({lock: true, text: '玩命加载中...'})
|
|
getAllAccount(this.selectData).then(res => {
|
|
loading.close()
|
|
let data = res.data
|
|
this.theUserList = data.data.list
|
|
console.log(data)
|
|
this.totalOrder = data.data.count
|
|
})
|
|
// if(res.status=='0'){
|
|
// this.theUserList = res.result;
|
|
// }else{
|
|
// console.log(res.msg);
|
|
// }
|
|
// }).catch(err=>{
|
|
// console.log(err);
|
|
//
|
|
// })
|
|
},
|
|
handleSizeChange (val) {
|
|
this.selectData.size = val
|
|
this.getAllUser()
|
|
},
|
|
handleCurrentChange (val) {
|
|
this.selectData.page = val
|
|
this.getAllUser()
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.allUser-page {
|
|
position: relative;
|
|
width: 100%;
|
|
}
|
|
|
|
.allUser-page-cont {
|
|
position: relative;
|
|
width: 100%;
|
|
}
|
|
|
|
.userOrderList {
|
|
.el-message {
|
|
top: 5rem;
|
|
}
|
|
|
|
.el-button {
|
|
width: 4.2rem;
|
|
height: 1.5rem;
|
|
line-height: 1.5rem;
|
|
padding: 0;
|
|
|
|
span {
|
|
font-size: 0.6rem;
|
|
}
|
|
}
|
|
|
|
//交易操作
|
|
.btn-cancel {
|
|
margin-right: 0.2rem;
|
|
margin-bottom: 0.3rem;
|
|
}
|
|
|
|
.btn-success {
|
|
/*background-color: #409eff;*/
|
|
/*color: #fff;*/
|
|
|
|
&:hover {
|
|
/*background-color: lighten(#409eff, 5%);*/
|
|
}
|
|
}
|
|
|
|
// 当前订单没有数据时候
|
|
.emptyTip a {
|
|
color: rgb(226, 137, 137);
|
|
|
|
&:hover {
|
|
color: rgb(214, 29, 29);
|
|
}
|
|
}
|
|
|
|
.el-button + .el-button {
|
|
margin-left: 0;
|
|
}
|
|
|
|
// 展开详情后文本 的span
|
|
.horder .el-form-item__content span,
|
|
.currentorder .el-form-item__content span {
|
|
margin-right: 0.5rem;
|
|
}
|
|
|
|
.demo-table-expand {
|
|
font-size: 0;
|
|
}
|
|
|
|
.demo-table-expand label {
|
|
width: 6.2rem;
|
|
color: #99a9bf;
|
|
}
|
|
|
|
.demo-table-expand .el-form-item {
|
|
margin-right: 0;
|
|
margin-bottom: 0;
|
|
width: 50%;
|
|
}
|
|
}
|
|
|
|
.el-button {
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.findOrder-search {
|
|
padding-top: 1rem;
|
|
}
|
|
</style>
|