264 lines
7.5 KiB
Vue
264 lines
7.5 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-button type="button" :icon="Search" @click="initUserList" >搜索</el-button>
|
|
<el-button type="primary" :icon="DocumentAdd" @click="handleAddDialogValue()" >添加用户</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
|
|
v-model="scope.row.userStatus"
|
|
@change="updateSwtich(scope.row)"
|
|
style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
|
|
/>
|
|
<!-- <div v-if="scope.row.userStatus===0" style="color: red">-->
|
|
<!-- 禁用-->
|
|
<!-- </div>-->
|
|
<!-- <div style="color: lawngreen" v-else>-->
|
|
<!-- 启用-->
|
|
<!-- </div>-->
|
|
</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="createTime" label="注册日期" width="200">
|
|
<!-- <template v-slot="scope">-->
|
|
<!-- {{ parseTime(scope.row.createTime, "{y}-{m}-{d}") }}-->
|
|
<!-- </template>-->
|
|
</el-table-column>
|
|
<el-table-column prop="updateTime" label="最后登录日期" width="200"/>
|
|
<el-table-column prop="action" fixed="right" label="操作" min-width="220">
|
|
<template v-slot="scope" >
|
|
|
|
<el-button type="success" size="small" @click="handleDialogValue(scope.row.id)">
|
|
详情
|
|
</el-button>
|
|
<el-button type="primary" size="small" :icon="Edit" @click="handleUpdateDialogValue(scope.row.id)"></el-button>
|
|
<el-button type="danger" size="small" :icon="Delete" @click="handleDelete(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>
|
|
|
|
|
|
<Dialog v-model="UdialogVisible" :id="id" :dialogTitle="dialogTitle"
|
|
@initUserList="initUserList"></Dialog>
|
|
<AddDialog v-model="UdialogaddVisible" :dialogTitle="dialogTitle"
|
|
@initUserList="initUserList"></AddDialog>
|
|
<UpdateDialog v-model="UdialogUpdateVisible" :id="id" :dialogTitle="dialogTitle"
|
|
@initUserList="initUserList"></UpdateDialog>
|
|
|
|
</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 Dialog from '@/views/user/dialog/index.vue'
|
|
import AddDialog from '@/views/user/addDialog/index.vue'
|
|
import UpdateDialog from '@/views/user/updateDialog/index.vue'
|
|
import { ElMessage,ElMessageBox } from "element-plus";
|
|
import {parseTime} from "element-plus/es/components/time-select/src/utils";
|
|
|
|
|
|
const queryForm=ref({
|
|
username: '',
|
|
current:1,
|
|
pageSize:10
|
|
})
|
|
|
|
const id=ref('')
|
|
const dialogTitle=ref('');
|
|
const UdialogaddVisible=ref(false)
|
|
const UdialogVisible=ref(false)
|
|
const UdialogUpdateVisible=ref(false)
|
|
|
|
|
|
// watch(queryForm.value.userStatus,()=>{
|
|
//
|
|
// updateSwtich(queryForm.value.userStatus);
|
|
// },10000)
|
|
|
|
const tempUpdate=ref({
|
|
id: null,
|
|
phone: "",
|
|
username: "",
|
|
userStatus: null
|
|
|
|
})
|
|
const updateSwtich= async (item)=>{
|
|
tempUpdate.value.id=item.id
|
|
tempUpdate.value.phone=item.phone
|
|
tempUpdate.value.username=item.username
|
|
if (item.userStatus==false){
|
|
tempUpdate.value.userStatus=1
|
|
}
|
|
else {
|
|
tempUpdate.value.userStatus=0
|
|
}
|
|
//console.log("1341234"+JSON.stringify(tempUpdate.value))
|
|
let result = await axios.post("user/update", tempUpdate.value)
|
|
|
|
//console.log(result.data)
|
|
}
|
|
|
|
|
|
const handleDialogValue=(ids)=>{
|
|
|
|
id.value=ids;
|
|
dialogTitle.value="用户详情"
|
|
|
|
UdialogVisible.value=true
|
|
}
|
|
|
|
const handleUpdateDialogValue=(ids)=>{
|
|
|
|
id.value=ids;
|
|
|
|
dialogTitle.value="用户修改"
|
|
UdialogUpdateVisible.value=true
|
|
}
|
|
|
|
const handleAddDialogValue=()=>{
|
|
dialogTitle.value="用户添加"
|
|
UdialogaddVisible.value=true
|
|
}
|
|
|
|
|
|
|
|
|
|
//删除
|
|
|
|
const handleDelete=(id)=>{
|
|
// console.log(id)
|
|
ElMessageBox.confirm(
|
|
'您确定要删除这条记录吗？',
|
|
'系统提示',
|
|
{
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning',
|
|
}
|
|
)
|
|
.then(async() => {
|
|
let res=await axios.post('user/delete',{id:id})
|
|
if(res.data.code==0){
|
|
ElMessage({
|
|
type: 'success',
|
|
message: '删除成功',
|
|
})
|
|
initUserList();
|
|
}else{
|
|
ElMessage({
|
|
type: 'error',
|
|
message: res.data.description,
|
|
})
|
|
}
|
|
})
|
|
.catch(() => {
|
|
})
|
|
// initUserList();
|
|
}
|
|
|
|
|
|
|
|
const total=ref(0)
|
|
const tableData =ref([])
|
|
|
|
const initUserList=async()=>{
|
|
// // console.log(query)
|
|
// if (!query.value) {
|
|
// const res = await axios.post("user/list/page", queryForm.value);
|
|
// // console.log(res)
|
|
// tableData.value = res.data.data.records;
|
|
// //console.log(res.data.data)
|
|
// total.value = Number(res.data.data.total);
|
|
// }
|
|
// else{
|
|
// const res=await axios.get("user/getById", {id:query.value});
|
|
// // console.log(res.data.data)
|
|
// const temp=[];
|
|
// temp.push(res.data.data)
|
|
// tableData.value=temp;
|
|
// total.value=1;
|
|
// }
|
|
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> |