665 lines
17 KiB
Vue
665 lines
17 KiB
Vue
<template xmlns="">
|
||
<div class="main">
|
||
<div class="header">
|
||
<div class="input">
|
||
<a-input class="first-input" v-model:value="value1" addonBefore="关键字" placeholder="请输入用户账号或姓名" />
|
||
<a-input class="second-input" v-model:value="value2" addonBefore="手机号码" placeholder="请输入手机号码"/>
|
||
<a-select
|
||
placeholder="请选择状态"
|
||
ref="select"
|
||
style="width: 120px"
|
||
>
|
||
<a-select-option value="启用">启用</a-select-option>
|
||
<a-select-option value="禁用">禁用</a-select-option>
|
||
</a-select>
|
||
</div>
|
||
<div class="edit">
|
||
<a-button class="query-button" @click="searchUser"><SearchOutlined />查询</a-button>
|
||
<a-button class="add-button" type="primary" @click="showAddDiaLog"><PlusOutlined />新增用户</a-button>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!--新增用户对话框-->
|
||
<a-modal v-model:open="AddDiaLog" cancel-text="取消" ok-text="确认" title="新增用户" @cancel="addCancel" @ok="addOk">
|
||
<a-form>
|
||
<a-form-item style="margin-left: 15px;">
|
||
<span style="color:red; font-size: 20px">*</span>
|
||
用户名
|
||
<a-input v-model:value="addData.username" style="width: 250px"/>
|
||
</a-form-item>
|
||
<a-form-item style="margin-left: 15px">
|
||
<span style="color:red; font-size: 20px">*</span>
|
||
密码：
|
||
<a-input v-model:value="addData.password" style="width: 250px;" type="password"/>
|
||
</a-form-item>
|
||
<a-form-item style="margin-left: 15px">
|
||
<span style="color:red; font-size: 20px">*</span>
|
||
地址：
|
||
<a-input v-model:value="addData.address" style="width: 250px"/>
|
||
</a-form-item>
|
||
<a-form-item style="margin-left: 15px">
|
||
<span style="color:red; font-size: 20px">*</span>
|
||
电话：
|
||
<a-input v-model:value="addData.phone" style="width: 250px"/>
|
||
</a-form-item>
|
||
<a-form-item style="margin-left: 15px">
|
||
<span style="color:red; font-size: 20px">*</span>
|
||
邮箱：
|
||
<a-input v-model:value="addData.email" style="width: 250px"/>
|
||
</a-form-item>
|
||
<a-form-item style="margin-left: 15px">
|
||
<span style="color:red; font-size: 20px">*</span>
|
||
性别：
|
||
<a-radio-group v-model:value="addData.sex">
|
||
<a-radio :value="1">男</a-radio>
|
||
<a-radio :value="0">女</a-radio>
|
||
</a-radio-group>
|
||
</a-form-item>
|
||
<a-form-item style="margin-left: 15px">
|
||
<span style="color:red; font-size: 20px">*</span>
|
||
年龄：
|
||
<a-input v-model:value="addData.age" style="width: 250px" type="number" />
|
||
</a-form-item>
|
||
|
||
</a-form>
|
||
</a-modal>
|
||
|
||
<!--修改用户对话框-->
|
||
<a-modal
|
||
v-model:open="EditDiaLog"
|
||
title="修改用户"
|
||
@on-ok="editOk"
|
||
cancel-text="取消"
|
||
ok-text="确定"
|
||
style="width: 850px"
|
||
@on-cancel="editCancel"
|
||
>
|
||
<a-form>
|
||
<div style="display: flex; margin-top: 20px">
|
||
<a-form-item style="margin-left: 20px;">
|
||
用户id：
|
||
<a-input v-model:value="updateData.id" style="width: 250px; margin-left: 40px" type="number"/>
|
||
</a-form-item>
|
||
<a-form-item style="margin-left: 50px">
|
||
用户名：
|
||
<a-input v-model:value="updateData.username" style="width: 250px; margin-left: 40px"/>
|
||
</a-form-item>
|
||
</div>
|
||
<div style="display: flex">
|
||
<a-form-item style="margin-left: 20px">
|
||
地址：
|
||
<a-input v-model:value="updateData.address" style="width: 250px; margin-left: 54px"/>
|
||
</a-form-item>
|
||
<a-form-item style="margin-left: 50px">
|
||
手机号码：
|
||
<a-input v-model="updateData.phone" style="width: 250px; margin-left: 28px"/>
|
||
</a-form-item>
|
||
</div>
|
||
<div style="display: flex">
|
||
<a-form-item style="margin-left: 20px">
|
||
邮箱：
|
||
<a-input v-model="updateData.email" style="width: 250px; margin-left: 54px"/>
|
||
</a-form-item>
|
||
<a-form-item style="margin-left: 50px">
|
||
年龄：
|
||
<a-input v-model:value="updateData.age" style="width: 250px; margin-left: 57px" type="number"/>
|
||
</a-form-item>
|
||
</div>
|
||
<div style="display: flex">
|
||
<a-form-item style="margin-left: 20px">
|
||
签名：
|
||
<a-input v-model:value="updateData.signature" style="width: 250px; margin-left: 54px"/>
|
||
</a-form-item>
|
||
<a-form-item style="margin-left: 50px">
|
||
性别：
|
||
<a-input v-model:value="updateData.sex" style="width: 250px; margin-left: 57px" type="number"/>
|
||
</a-form-item>
|
||
</div>
|
||
<div style="display: flex">
|
||
<a-form-item style="margin-left: 20px">
|
||
头像：
|
||
<a-input v-model:value="updateData.avatar" style="width: 250px; margin-left: 56px"/>
|
||
</a-form-item>
|
||
<a-form-item style="margin-left: 50px">
|
||
昵称：
|
||
<a-input v-model:value="updateData.nickname" style="width: 250px; margin-left: 57px"/>
|
||
</a-form-item>
|
||
</div>
|
||
<div style="display: flex">
|
||
<a-form-item style="margin-left: 20px">
|
||
个人描述：
|
||
<a-input v-model:value="updateData.description" style="width: 250px; margin-left: 29px"/>
|
||
</a-form-item>
|
||
<a-form-item style="margin-left: 50px">
|
||
用户是否启用：
|
||
<a-input v-model:value="updateData.enabled" style="width: 250px" type="boolean"/>
|
||
</a-form-item>
|
||
</div>
|
||
<div style="display: flex">
|
||
<a-form-item style="margin-left: 20px">
|
||
用户是否过期：
|
||
<a-input v-model:value="updateData.isExpired" style="width: 250px; margin-left: 2px" type="boolean"/>
|
||
</a-form-item>
|
||
<a-form-item style="margin-left: 50px">
|
||
密码是否过期：
|
||
<a-input v-model:value="updateData.passwordExpired" style="width: 250px" type="boolean"/>
|
||
</a-form-item>
|
||
</div>
|
||
<div style="display: flex">
|
||
<a-form-item style="margin-left: 20px">
|
||
是否展示：
|
||
<a-input v-model:value="updateData.recommend" style="width: 250px; margin-left: 30px" type="boolean"/>
|
||
</a-form-item>
|
||
<a-form-item style="margin-left: 50px">
|
||
用户是否被锁：
|
||
<a-input v-model:value="updateData.isLocked" style="width: 250px" type="boolean"/>
|
||
</a-form-item>
|
||
</div>
|
||
</a-form>
|
||
</a-modal>
|
||
|
||
|
||
<!--表格内容-->
|
||
<div class="table">
|
||
<a-table :columns="columns" :dataSource="data" :row-selection="rowSelection" :rowKey="record => record.id">
|
||
<template #bodyCell="{ column, record }">
|
||
<template v-if="column.key==='id'">
|
||
{{record.id}}
|
||
</template>
|
||
<template v-else-if="column.key === 'enabled'">
|
||
<a-tag v-if="record.enabled === true" :bordered="false" color="success">启用</a-tag>
|
||
<a-tag v-if="record.enabled === false" :bordered="false" color="error">禁用</a-tag>
|
||
</template>
|
||
<template v-else-if="column.key==='createdAt'">
|
||
{{record.createdAt}}
|
||
</template>
|
||
<template v-else-if="column.key==='updateAt'">
|
||
{{record.updatedAt}}
|
||
</template>
|
||
<template v-else-if="column.key === 'isDelete'">
|
||
{{record.isDelete}}
|
||
</template>
|
||
<template v-else-if="column.key==='action'">
|
||
<span style="margin-left: 10px">
|
||
<a-button size="small" style="color: dodgerblue" type="text" @click="showEditDiaLog(record)"><EditOutlined />修改</a-button>
|
||
<a-button size="small" style="color: dodgerblue" type="text" @click="() => showDeleteConfirm(record)"><DeleteOutlined />删除</a-button>
|
||
</span>
|
||
</template>
|
||
</template>
|
||
</a-table>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import {createVNode, onMounted, reactive, ref} from 'vue';
|
||
import {
|
||
DeleteOutlined,
|
||
EditOutlined,
|
||
ExclamationCircleOutlined,
|
||
PlusOutlined,
|
||
SearchOutlined
|
||
} from '@ant-design/icons-vue';
|
||
import {message, Modal} from "ant-design-vue";
|
||
import requests from "@/public/request.js";
|
||
|
||
const value1 = ref('');
|
||
const value2 = ref('');
|
||
const AddDiaLog = ref(false);
|
||
const EditDiaLog = ref(false);
|
||
let dataSource = ref([]);
|
||
let data = ref([]);
|
||
const dataLoaded = ref(false);
|
||
const token = window.localStorage.getItem('token')
|
||
const requestBody = {
|
||
"page": null,
|
||
"limit": null,
|
||
"search": null,
|
||
"role": null
|
||
}
|
||
const AllUser = reactive({
|
||
page:1,
|
||
limit: 10,
|
||
search: null,
|
||
role: null
|
||
})
|
||
|
||
const loadingTable = ref(true)
|
||
const sex = ref('男')
|
||
|
||
|
||
const updateData = reactive({
|
||
id: '',
|
||
username: '',
|
||
address: '',
|
||
phone: '',
|
||
email: '',
|
||
age: '',
|
||
signature: '',
|
||
sex: '',
|
||
avatar: '',
|
||
nickname: '',
|
||
description: '',
|
||
enabled: true,
|
||
isExpired: false,
|
||
passwordExpired: false,
|
||
recommend: false,
|
||
isLocked: false,
|
||
createdAt:'',
|
||
updateAt:'',
|
||
isDelete:false,
|
||
})
|
||
|
||
|
||
const roleSingle = ref(1);
|
||
|
||
|
||
|
||
|
||
const userLock = reactive({
|
||
id: -1,
|
||
isLock: 1
|
||
})
|
||
|
||
|
||
function setRowClassName(record,index) {
|
||
return 'custom-row';
|
||
}
|
||
|
||
const states = reactive({
|
||
data:[],
|
||
role:[],
|
||
})
|
||
|
||
|
||
/**
|
||
* 配置代码
|
||
*/
|
||
message.config({
|
||
background: true
|
||
})
|
||
|
||
onMounted(() => {
|
||
getAll()
|
||
})
|
||
|
||
|
||
function getAll() {
|
||
requests.userAllCurrent(AllUser,token).then((res)=>{
|
||
console.log(res)
|
||
// states.data = res.data.data
|
||
// console.log(res.data.data)
|
||
loadingTable.value = false
|
||
for (let i = 0; i < res.data.data.length; i++) {
|
||
states.data[i] = res.data.data[i].user
|
||
states.role[i] = res.data.data[i].role.rid
|
||
}
|
||
console.log("getAll:",states.data.length)
|
||
})
|
||
}
|
||
|
||
|
||
|
||
/*新增用户*/
|
||
const addData = reactive({
|
||
username: '',
|
||
password: '',
|
||
address: '',
|
||
phone: '',
|
||
email: '',
|
||
sex:1,
|
||
age: ''
|
||
})
|
||
|
||
const showAddDiaLog = () => {
|
||
AddDiaLog.value = true;
|
||
addData.username = '';
|
||
addData.password = '';
|
||
addData.address = '';
|
||
addData.phone = '';
|
||
addData.email = '';
|
||
addData.sex = 1;
|
||
addData.age = '';
|
||
};
|
||
|
||
function addOk () {
|
||
if (sex.value === '男') {
|
||
addData.sex = 1
|
||
}else {
|
||
addData.sex = 0
|
||
}
|
||
requests.userAdd(addData, token).then((res)=>{
|
||
console.log(res.data)
|
||
if (res.data.code===200) {
|
||
message.success('新增成功')
|
||
getAll();
|
||
AddDiaLog.value = false;
|
||
}
|
||
else {
|
||
message.error('新增失败')
|
||
}
|
||
})
|
||
}
|
||
|
||
|
||
|
||
function addCancel () {
|
||
message.info('取消新增')
|
||
}
|
||
|
||
|
||
|
||
/*删除用户*/
|
||
const deleteId = reactive({
|
||
id: -1
|
||
})
|
||
|
||
const showDeleteConfirm = (record) => {
|
||
console.log("delete Dialog")
|
||
Modal.confirm({
|
||
title: '删除数据',
|
||
icon: createVNode(ExclamationCircleOutlined),
|
||
content: '确认删除这条数据吗',
|
||
okText: '确认',
|
||
cancelText: '取消',
|
||
onOk: () => {
|
||
|
||
deleteId.id = record.id
|
||
requests.userDelete(deleteId.id, token)
|
||
.then(response => {
|
||
console.log('删除成功');
|
||
message.success("删除成功")
|
||
getAll()
|
||
})
|
||
.catch(error => {
|
||
console.error('删除失败', error);
|
||
message.error("删除失败")
|
||
getAll()
|
||
})
|
||
|
||
}
|
||
|
||
});
|
||
|
||
};
|
||
|
||
|
||
|
||
|
||
|
||
/*编辑用户*/
|
||
function showEditDiaLog(record, index){
|
||
EditDiaLog.value = true
|
||
updateData.id = record.id
|
||
updateData.username = record.username
|
||
updateData.address = record.address
|
||
updateData.phone = record.phone
|
||
updateData.email = record.email
|
||
updateData.age = record.age
|
||
updateData.signature = record.signature
|
||
updateData.sex = record.sex
|
||
updateData.avatar = record.avatar
|
||
updateData.nickname = record.nickname
|
||
updateData.description = record.description
|
||
updateData.isDelete = record.isDelete
|
||
roleSingle.value = states.role[index]
|
||
if (record.sex === 1) {
|
||
sex.value = '男'
|
||
}else {
|
||
sex.value = '女'
|
||
}
|
||
}
|
||
function editOk(){
|
||
loadingTable.value = true
|
||
EditDiaLog.value = false
|
||
requests.userEdit(updateData,token).then((res)=>{
|
||
console.log("editResult:",res)
|
||
console.log("updateData:",updateData)
|
||
if (res.data.code === 200) {
|
||
getAll()
|
||
message.success('修改成功')
|
||
}
|
||
else {
|
||
loadingTable.value = false
|
||
message.error('修改失败')
|
||
|
||
}
|
||
})
|
||
|
||
}
|
||
function editCancel(){
|
||
EditDiaLog.value = false;
|
||
}
|
||
|
||
|
||
|
||
/*查询用户*/
|
||
const searchData = reactive({
|
||
username: '',
|
||
phone: ''
|
||
})
|
||
|
||
function searchUser(){
|
||
loadingTable.value = true
|
||
if (searchData.username === '' && searchData.phone === '') {
|
||
getAll()
|
||
}
|
||
else {
|
||
requests.userCurrent(searchData,token).then((res)=>{
|
||
loadingTable.value = false
|
||
console.log("searchResult:",res)
|
||
if (res.data.code === 200) {
|
||
states.data = []
|
||
states.data[0] = res.data.data.user
|
||
message.success('查询成功')
|
||
console.log(loadingTable.value)
|
||
}
|
||
else {
|
||
message.error(res.data.message)
|
||
}
|
||
})
|
||
}
|
||
}
|
||
|
||
const columns = [
|
||
{
|
||
title: '序号',
|
||
dataIndex: 'id',
|
||
key: 'id',
|
||
},
|
||
{
|
||
title: '用户名',
|
||
dataIndex: 'username',
|
||
key: 'username',
|
||
},
|
||
{
|
||
title: '电话',
|
||
key: 'phone',
|
||
dataIndex: 'phone',
|
||
},
|
||
{
|
||
title: '用户状态',
|
||
dataIndex: 'enabled',
|
||
key: 'enabled',
|
||
},
|
||
{
|
||
title:'创建时间',
|
||
key:'createdAt',
|
||
dataIndex: 'createdAt',
|
||
},
|
||
{
|
||
title: '更新时间',
|
||
key: 'updatedAt',
|
||
dataIndex: 'updatedAt'
|
||
},
|
||
{
|
||
title: '是否已被删除',
|
||
key:'isDelete',
|
||
dataIndex: 'isDelete'
|
||
},
|
||
{
|
||
title:'操作',
|
||
key:'action',
|
||
dataIndex: 'action'
|
||
},
|
||
];
|
||
|
||
const rowSelection = {
|
||
onChange: (selectedRowKeys, selectedRows) => {
|
||
console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
|
||
},
|
||
getCheckboxProps: (record) => ({
|
||
// 设置每行选择框的属性
|
||
checked: record.id
|
||
}),
|
||
};
|
||
|
||
|
||
/*async function fetchData() {
|
||
try {
|
||
const queryData = await requests.userAllCurrent(
|
||
{
|
||
page: null,
|
||
limit: null,
|
||
search: null,
|
||
role: null
|
||
},
|
||
window.localStorage.getItem('token')
|
||
);
|
||
console.log(queryData.data); // 访问数据
|
||
dataSource.value = queryData.data.data;
|
||
dataLoaded.value = true;
|
||
for (let i = 0; i <= dataSource.value.count; i++) {
|
||
if (dataSource.value.users[i].user.updatedAt === null) {
|
||
dataSource.value.users[i].user.updatedAt = "null"
|
||
}
|
||
data.value.push({
|
||
username: dataSource.value.users[i].user.username,
|
||
nickname: dataSource.value.users[i].user.nickname,
|
||
phone: dataSource.value.users[i].user.phone,
|
||
enabled: dataSource.value.users[i].user.enabled,
|
||
createdAt:dataSource.value.users[i].user.createdAt,
|
||
updatedAt: dataSource.value.users[i].user.updatedAt,
|
||
id:dataSource.value.users[i].user.id,
|
||
});
|
||
}
|
||
console.log(data.value);
|
||
} catch (error) {
|
||
console.error(error);
|
||
}
|
||
}
|
||
console.log(dataSource)
|
||
|
||
// 组件挂载时调用 fetchData
|
||
onMounted(() => {
|
||
fetchData();
|
||
});*/
|
||
|
||
|
||
async function fetchData() {
|
||
try {
|
||
const queryData = await requests.userAllCurrent(
|
||
{
|
||
page: null,
|
||
limit: null,
|
||
search: null,
|
||
role: null
|
||
},
|
||
window.localStorage.getItem('token')
|
||
);
|
||
console.log(queryData.data); // 访问数据
|
||
dataSource.value = queryData.data.data;
|
||
dataLoaded.value = true;
|
||
|
||
// 修正循环条件，确保我们不越界
|
||
for (let i = 0; i < dataSource.value.count; i++) {
|
||
const user = dataSource.value.users[i].user;
|
||
if (user.updatedAt === null) {
|
||
user.updatedAt = "null";
|
||
}
|
||
|
||
// 现在 'user' 已经定义，我们可以安全地访问它的属性
|
||
data.value.push({
|
||
username: user.username,
|
||
nickname: user.nickname,
|
||
phone: user.phone,
|
||
enabled: user.enabled,
|
||
createdAt: user.createdAt,
|
||
updatedAt: user.updatedAt,
|
||
id: user.id,
|
||
isDelete:user.isDelete,
|
||
});
|
||
}
|
||
console.log(data.value);
|
||
} catch (error) {
|
||
console.error(error);
|
||
}
|
||
}
|
||
|
||
console.log(dataSource)
|
||
|
||
// 组件挂载时调用 fetchData
|
||
onMounted(() => {
|
||
fetchData();
|
||
});
|
||
|
||
|
||
|
||
</script>
|
||
|
||
|
||
<style scoped>
|
||
.main {
|
||
display: flex;
|
||
flex-direction: column;
|
||
width: 100%;
|
||
height: auto;
|
||
}
|
||
|
||
.header {
|
||
display: flex;
|
||
}
|
||
|
||
.input {
|
||
width: 35vw;
|
||
margin-top: 2vh;
|
||
margin-bottom: 1vh;
|
||
display: flex;
|
||
flex-direction: row;
|
||
}
|
||
|
||
.first-input {
|
||
margin-right: 1vw;
|
||
margin-left: 1vw;
|
||
}
|
||
|
||
.second-input {
|
||
margin-right: 1vw;
|
||
}
|
||
|
||
.edit {
|
||
margin-top: 2vh;
|
||
width: 20vw;
|
||
display: flex;
|
||
}
|
||
|
||
.query-button {
|
||
margin-left: 4vw;
|
||
margin-right: 1vw;
|
||
|
||
}
|
||
|
||
.delete-button {
|
||
background-color: #CD5C5C;
|
||
color: white;
|
||
margin-left: 1vw;
|
||
}
|
||
|
||
.table {
|
||
width: 100%;
|
||
height: auto;
|
||
margin-top: 2vh;
|
||
}
|
||
</style>
|