160 lines
4.4 KiB
Vue
160 lines
4.4 KiB
Vue
<template>
|
|
<el-card>
|
|
<el-row :gutter="20" class="header">
|
|
<el-col :span="7">
|
|
<el-input placeholder="请输入用户昵称..." clearable v-model="queryForm.username"></el-input>
|
|
</el-col>
|
|
<el-col :span="4">
|
|
<el-select
|
|
v-model="queryForm.userRole"
|
|
size="default"
|
|
placeholder="用户角色"
|
|
style="width: 100%"
|
|
>
|
|
<el-option
|
|
v-for="(item,index) in options"
|
|
:key="item.indexOf()"
|
|
:label="item"
|
|
:value="index"
|
|
/>
|
|
</el-select>
|
|
</el-col>
|
|
<el-button type="button" :icon="Search" @click="initUserList" >搜索</el-button>
|
|
|
|
</el-row>
|
|
<el-table :data="tableData" stripe style="width: 100%;" showOverflowTooltip>
|
|
<el-table-column fixed prop="id" label="#ID" width="80" />
|
|
<el-table-column prop="username" label="用户昵称" width="150" />
|
|
<el-table-column prop="avatarUrl" label="头像" width="200">
|
|
<template v-slot="scope">
|
|
<el-popover
|
|
placement="right-start"
|
|
:width="200"
|
|
trigger="hover"
|
|
:content="scope.row.avatarUrl"
|
|
>
|
|
<template #reference>
|
|
<img :src="scope.row.avatarUrl" width="50" height="50"/>
|
|
</template>
|
|
</el-popover>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="openId" label="openId" />
|
|
<el-table-column prop="phone" label="电话" width="120"/>
|
|
<el-table-column prop="email" label="email" width="200"/>
|
|
<el-table-column prop="userStatus" label="用户状态" width="200">
|
|
<template v-slot="scope">
|
|
<el-switch
|
|
disabled
|
|
v-model="scope.row.userStatus"
|
|
style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
|
|
/>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="userRole" label="用户角色" width="200">
|
|
<template v-slot="scope">
|
|
<div v-if="scope.row.userRole===0">普通用户</div>
|
|
<div v-else-if="scope.row.userRole===1">管理员</div>
|
|
<div v-else-if="scope.row.userRole===2">商家</div>
|
|
<div v-else>美甲师</div>
|
|
</template>
|
|
</el-table-column>
|
|
|
|
<el-table-column prop="action" fixed="right" label="操作" min-width="100">
|
|
<template v-slot="scope" >
|
|
|
|
<el-button type="success" size="small" @click="handleValue(scope.row.id)">
|
|
上门预约
|
|
</el-button>
|
|
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<el-pagination
|
|
v-model:currentPage="queryForm.current"
|
|
v-model:page-size="queryForm.pageSize"
|
|
:page-sizes="[10, 20, 30, 40,50]"
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
:total="total"
|
|
@size-change="handleSizeChange"
|
|
@current-change="handleCurrentChange"
|
|
/>
|
|
<!-- {{total}}-->
|
|
</el-card>
|
|
|
|
</template>
|
|
<script setup>
|
|
import {Search,Delete,Edit,DocumentAdd,Close,Check} from '@element-plus/icons-vue'
|
|
import {ref, watch} from 'vue'
|
|
import axios from "@/util/axios";
|
|
|
|
import { ElMessage,ElMessageBox } from "element-plus";
|
|
import {useRouter} from "vue-router"
|
|
|
|
const router=useRouter();
|
|
|
|
|
|
const queryForm=ref({
|
|
userRole:'',
|
|
username: '',
|
|
current:1,
|
|
pageSize:10
|
|
})
|
|
|
|
|
|
const options = [ '普通用户', '管理员', '商家', '美甲师']
|
|
const dialogTitle=ref('');
|
|
|
|
|
|
|
|
const handleValue=(ids)=>{
|
|
router.push({path:'/orderReservation',query:{id: JSON.stringify(ids)}})
|
|
}
|
|
|
|
const total=ref(0)
|
|
const tableData =ref([])
|
|
|
|
const initUserList=async()=>{
|
|
|
|
const res = await axios.post("user/list/page", queryForm.value);
|
|
|
|
if (res.data.data) {
|
|
tableData.value = res.data.data.records;
|
|
tableData.value.map(item=>{
|
|
if(item.userStatus==0)
|
|
{
|
|
item.userStatus=true
|
|
}
|
|
else{
|
|
item.userStatus=false
|
|
}
|
|
})
|
|
//console.log(res.data.data)
|
|
total.value = Number(res.data.data.total);
|
|
}
|
|
else{
|
|
ElMessage.error(res.data.description);
|
|
}
|
|
}
|
|
initUserList();
|
|
const handleSizeChange = (pageSize) => {
|
|
queryForm.value.current=1;
|
|
queryForm.value.pageSize=pageSize;
|
|
initUserList();
|
|
}
|
|
const handleCurrentChange = (current1) => {
|
|
queryForm.value.current=current1;
|
|
initUserList();
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.header{
|
|
padding-bottom: 16px;
|
|
box-sizing: border-box;
|
|
|
|
}
|
|
.el-pagination{
|
|
padding-top: 15px;
|
|
box-sizing: border-box;
|
|
}
|
|
</style> |