WxxyDeveloper/JSL_OrganizeInternalOAWeb
9
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

增加用户测试

Browse Source
This commit is contained in:
GUjiYN 2024-01-31 22:26:46 +08:00
parent eb00a230e2
commit f34fc10321
3 changed files with 613 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

249
src/Manager/components/Role.vue
View File

@ -14,18 +14,52 @@
</a-select>
</div>
<div class="edit">
<a-button class="query-button"><SearchOutlined />查询</a-button>
<a-button class="add-button" @click="showModal1"><PlusOutlined />新增角色</a-button>
<a-button class="query-button" @click="searchRole"><SearchOutlined />查询</a-button>
<a-button class="add-button" @click="showAddDioLog"><PlusOutlined />新增角色</a-button>
</div>
</div>
<!--新增、删除角色对话框-->
<a-modal v-model:open="open1" title="新增用户" @ok="handleOk" ok-text="确认" cancel-text="取消">
<p>新增</p>
<!--新增角色对话框-->
<a-modal v-model:open="AddDioLog" cancel-text="取消" ok-text="确认" title="新增角色" @cancel="addCancel" @ok="addOk">
<div>
<div>角色名称：<a-input v-model="addData.name" style="width: 250px; margin-bottom: 10px"/></div>
<div>显示名称：<a-input v-model="addData.displayName" style="width: 250px; margin-bottom: 10px;"/></div>
</div>
</a-modal>
<a-modal v-model:open="open2" title="删除用户" @ok="hideModal" ok-text="确认" cancel-text="取消">
<p>删除</p>
<!--删除角色对话框-->
<a-modal v-model:open="DeleteDioLog" cancel-text="取消" content="确认删除这条数据吗?" ok-text="确认" title="删除角色" @cancel="deleteCancel" @ok="deleteOk">
<p>确定删除改数据吗？</p>
</a-modal>
<!--修改角色对话框-->
<a-modal
v-model="editDialog"
title="编辑"
@cancel="editCancel"
@ok="editOk">
<div style="">
<div style="margin-bottom: 10px;">
<span>
角色名称：<Input v-model="updateData.name" placeholder="Enter something..." style="width: 250px;padding: 10px" />
</span>
<br>
<span style="margin-left: 20px">
<label>解释：</label><Input v-model="updateData.displayName" placeholder="Enter something..." style="width: 250px;margin-left: 8px;padding: 10px" />
</span>
<br>
</div>
<div style="margin-bottom: 10px">
<span style="margin-left: 18px">
状态：
<a-radio-group v-model="lock">
<a-radio label="正常"></a-radio>
<a-radio>="停用"></a-radio>
</a-radio-group>
</span>
</div>
</div>
</a-modal>
<div class="table">
@ -51,8 +85,8 @@
</template>
<template v-else-if="column.key === 'role_action'">
<span style="margin-left: 10px">
<a-button class="button2" type="text" @click="showModal1" size="small"><EditOutlined />修改</a-button>
<a-button class="button1" type="text" @click="showDeleteConfirm" size="small"><DeleteOutlined />删除</a-button>
<a-button class="button2" size="small" type="text" @click="showEditDioLog"><EditOutlined />修改</a-button>
<a-button class="button1" size="small" type="text" @click="showDeleteDioLog"><DeleteOutlined />删除</a-button>
</span>
</template>
</template>
@ -63,43 +97,180 @@
<script setup>
import {createVNode, ref, computed} from 'vue';
import {SearchOutlined, PlusOutlined, DeleteOutlined, ExclamationCircleOutlined, EditOutlined} from '@ant-design/icons-vue';
import {Modal} from "ant-design-vue";
import { usePagination } from 'vue-request';
import {computed, onMounted, reactive, ref} from 'vue';
import {DeleteOutlined, EditOutlined, PlusOutlined, SearchOutlined} from '@ant-design/icons-vue';
import {message} from "ant-design-vue";
import {usePagination} from 'vue-request';
import requests from '../../public/request.js';
import axios from 'axios';
const value1 = ref('');
const value2 = ref('');
const open1 = ref(false);
const AddDioLog = ref(false);
const DeleteDioLog = ref(false);
const editDialog = ref(false)
const token = window.localStorage.getItem('token')
const states = reactive({
data:[]
})
const updateData = reactive({
id: 0,
name: '',
displayName: '',
})
/**
* 配置代码
*/
message.config({
background: true
})
function setRowClassName(row, index) {
return 'custom-row';
}
onMounted(() => {
getAll()
})
const showModal1 = () => {
open1.value = true;
};
const handleOk = e => {
console.log(e);
open1.value = false;
};
function getAll() {
requests.roleGet(null,token).then((res)=>{
console.log(res)
states.data = res.data.data
// 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
}
console.log("getAll:",states.data)
})
}
/*新增用户*/
const addData = reactive({
// id:'',
// roleName:'',
name:'',
displayName:'',
// createdAt:'',
// updatedAt:'',
})
function showAddDioLog(){
AddDioLog.value = true;
}
function addOk () {
requests.roleAdd(addData, token).then((res)=>{
console.log(res.data)
if (res.data.code===200) {
message.success('新增成功')
getAll()
}
else {
message.error('新增失败')
}
})
}
function addCancel () {
message.info('取消新增')
}
/*删除用户*/
const deleteId = ref(0)
function showDeleteDioLog(){
DeleteDioLog.value = true
deleteId.value = row.id
}
function deleteOk() {
DeleteDioLog.value = false;
console.log(deleteId.value)
requests.roleDelete(deleteId.value, token).then((res) => {
console.log("deleteResult:", res)
if (res.data.code === 200) {
message.success('删除成功')
} else {
message.error('删除失败')
}
})
}
function deleteCancel(){
DeleteDioLog.value = false;
message.info('取消删除')
}
/*修改用户*/
function showEditDioLog(){
editDialog.value = true
updateData.id = row.id
updateData.name = row.roleName
updateData.displayName = row.displayName
}
function editOk(){
loadingTable.value = true
editDialog.value = false;
requests.roleEdit(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 searchRole(){
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 open2 = ref(false);
const showModal2 = () => {
open2.value = true;
};
const hideModal = () => {
open2.value = false;
};
const showDeleteConfirm = () => {
console.log("delete Dialog")
Modal.confirm({
title: 'Confirm',
icon: createVNode(ExclamationCircleOutlined),
content: '确认删除这条数据吗',
okText: '确认',
cancelText: '取消',
});
};
const columns = [
{

460
src/Manager/components/User.vue
View File

@ -8,96 +8,428 @@
placeholder="请选择状态"
ref="select"
style="width: 120px"
@focus="focus"
>
<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"><SearchOutlined />查询</a-button>
<a-button class="add-button" @click="showAddDialog"><PlusOutlined />新增用户</a-button>
<a-button class="delete-button" @click="showDelectDialog"><DeleteOutlined />删除用户</a-button>
<a-button class="query-button" @click="searchUser"><SearchOutlined />查询</a-button>
<a-button class="add-button" @click="showAddDiaLog"><PlusOutlined />新增用户</a-button>
<a-button class="delete-button" @click="showDeleteDiaLog"><DeleteOutlined />删除用户</a-button>
</div>
</div>
<!--新增、删除用户对话框-->
<a-modal v-model:open="open1" title="新增用户" @ok="handleOk" ok-text="确认" cancel-text="取消">
<p>新增</p>
</a-modal>
<a-modal v-model:open="open2" title="删除用户" @ok="hideModal" ok-text="确认" cancel-text="取消">
<p>删除</p>
</a-modal>
<div class="table">
<!--新增用户对话框-->
<a-modal v-model:open="AddDiaLog" cancel-text="取消" ok-text="确认" title="新增用户" @cancel="addCancel" @ok="addOk">
<div>
<div>用户名：<a-input v-model:value="addData.username" style="width: 250px; margin-bottom: 10px" /></div>
<div style="margin-left: 15px">密码：<a-input v-model:value="addData.password" style="width: 250px; margin-bottom: 10px" type="password"/></div>
<div style="margin-left: 15px">地址：<a-input v-model:value="addData.address" style="width: 250px; margin-bottom: 10px" /></div>
<div style="margin-left: 15px">电话：<a-input v-model:value="addData.phone" style="width: 250px; margin-bottom: 10px" /></div>
<div style="margin-left: 15px">邮箱：<a-input v-model:value="addData.email" style="width: 250px; margin-bottom: 10px" /></div>
<div style="margin-left: 15px">性别：
<a-radio-group v-model:value="addData.sex" style="margin-bottom: 10px">
<a-radio :value="1">男</a-radio>
<a-radio :value="0">女</a-radio>
</a-radio-group></div>
<div style="margin-left: 15px">年龄：<a-input v-model:value="addData.age" style="width: 250px" type="number" /></div>
</div>
</a-modal>
<!--删除用户对话框-->
<a-modal v-model:open="DeleteDiaLog" cancel-text="取消" ok-text="确认" title="删除用户" @cancel="deleteCancel" @ok="deleteOk">
<p>是否要删除xxx数据？</p>
</a-modal>
<!--修改用户对话框-->
<a-modal
v-model:open="EditDiaLog"
title="编辑"
@on-ok="editOk"
@on-cancel="editCancel">
<div style="">
<div style="margin-bottom: 10px">
<span>
用户名：<a-input v-model:value="updateData.username" placeholder="Enter something..." style="width: 180px" />
</span>
<span style="margin-left: 20px">
电话：<a-input v-model:value="updateData.phone" placeholder="Enter something..." style="width: 180px" />
</span>
</div>
<div style="margin-bottom: 10px">
<span>
性别：
<a-radio-group v-model="sex">
<a-radio label="男"></a-radio>
<a-radio label="女"></a-radio>
</a-radio-group>
</span>
<span style="margin-left: 98px">
角色：
<a-select v-model="roleSingle" style="width:200px">
<a-select-option v-for="item in roleList" :key="item.value" :value="item.value">{{ item.label }}</a-select-option>
</a-select>
</span>
</div>
<div style="margin-bottom: 10px">邮箱：<Input v-model="updateData.email" placeholder="Enter something..." style="width: 435px" /></div>
<div style="margin-bottom: 10px">地址：<Input v-model="updateData.address" placeholder="Enter something..." style="width: 435px" /></div>
<div style="margin-bottom: 10px">简介：<Input v-model="updateData.description" placeholder="Enter something..." style="width: 435px" type="textarea" /></div>
</div>
</a-modal>
<!--表格内容-->
<div class="table">
<a-table
:columns="columns"
:data-source="data"
:data-source="states.data"
:loading="loading"
:pagination="pagination"
:row-key="record => record.login.uuid"
@change="handleTableChange"
:rowClassName="setRowClassName"
>
<template #bodyCell="{ column, text }">
<template v-if="column.dataIndex === 'name'">{{ text.first }} {{ text.last }}</template>
<template #bodyCell="{ column, record, index, text }">
<template v-if="column.dataIndex === 'id'">{{ text }}</template>
<template v-else-if="column.dataIndex === 'user_action'">
<span style="margin-left: 10px">
<a-button class="button2" size="small" type="text" @click="showEditDiaLog(record, index)"><EditOutlined />修改</a-button>
<a-button class="button1" size="small" type="text" @click="showDeleteDiaLog(record, index)"><DeleteOutlined />删除</a-button>
</span>
</template>
</template>
</a-table>
</div>
</div>
</div>
</template>
<script setup>
import {computed, createVNode, ref} from 'vue';
import {DeleteOutlined, ExclamationCircleOutlined, PlusOutlined, SearchOutlined} from '@ant-design/icons-vue';
import {Modal} from "ant-design-vue";
import {computed, onMounted, reactive, ref} from 'vue';
import {DeleteOutlined, EditOutlined, PlusOutlined, SearchOutlined} from '@ant-design/icons-vue';
import {message} from "ant-design-vue";
import {usePagination} from 'vue-request';
import axios from 'axios';
import request from '@/public/request.js'
import requests from "@/public/request.js";
const value1 = ref('');
const value2 = ref('');
const open1 = ref(false);
const open2 = ref(false);
let data = null
const token = window.localStorage.getItem('token')
const AddDiaLog = ref(false);
const DeleteDiaLog = ref(false);
const EditDiaLog = ref(false);
const DeleteId = ref(0);
let dataSource = []
const token = "eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiIxNiIsImV4cCI6MTcwNjc4OTgwNH0.Cx4NOfPh3QXH-pYRCSHxpUjdeUxBZABVb5Z82gK8sfI"
const requestBody = {
"page": null,
"limit": null,
"search": null,
"role": null
}
const AllUser = reactive({
page:1,
limit: 10,
search: null,
role: null
})
const showAddDialog = () => {
open1.value = true;
};
const handleOk = e => {
console.log(e);
open1.value = false;
};
const loadingTable = ref(true)
const sex = ref('男')
const showDelectDialog = () => {
open2.value = true;
};
const hideModal = () => {
open2.value = false;
};
const showDeleteConfirm = () => {
console.log("delete Dialog")
Modal.confirm({
title: 'Confirm',
icon: createVNode(ExclamationCircleOutlined),
content: '确认删除这条数据吗',
okText: '确认',
cancelText: '取消',
const updateData = reactive({
id: 0,
username: '',
address: '',
phone: '',
email: '',
age: '',
signature: '',
sex: '',
avatar: '',
nickname: '',
description: '',
enabled: true,
isExpired: false,
passwordExpired: false,
recommend: false,
isLocked: false
})
const roleSingle = ref(1);
const roleList= reactive([
{
value: 1,
label: '管理员'
},
{
value: 2,
label: '老师'
},
{
value: 3,
label: '学生'
}
])
const userLock = reactive({
id: -1,
isLock: 1
})
const states = reactive({
data:[],
role:[],
})
/**
* 配置代码
*/
message.config({
background: true
})
function setRowClassName(record, index) {
return 'custom-record';
}
onMounted(() => {
getAll()
})
/*function getAll() {
requests.roleGet(null,token).then((res)=>{
console.log(res)
states.data = res.data.data
loadingTable.value = false
for (let i = 0; i < res.data.data.length; i++) {
states.data[i] = res.data.data[i].user
}
console.log("getAll:",states.data)
})
}*/
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 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('新增成功');
// 更新表格数据源
const newUser = {
id: res.data.data.id, // 根据实际返回的数据结构获取新增用户的id
username: addData.username,
phone: addData.phone,
enabled: true, // 根据实际需求设置用户状态
updatedAt: new Date().toISOString(), // 设置更新时间为当前时间
};
dataSource.push(newUser); // 将新增用户添加到数据源中
// 刷新表格
run({
results: pageSize.value,
page: current.value,
});
// 清空新增用户数据
addData.username = '';
addData.password = '';
addData.address = '';
addData.phone = '';
addData.email = '';
addData.sex = 1;
addData.age = '';
// 关闭新增用户对话框
AddDiaLog.value = false;
} else {
message.error('新增失败');
}
}).catch((error) => {
message.error('网络错误，请稍后重试');
console.error('Add user failed:', error);
});
}
function addCancel () {
message.info('取消新增')
}
/*删除用户*/
const showDeleteDiaLog = (record, index) => {
DeleteDiaLog.value = true;
DeleteId.value = record.id;
};
function deleteOk() {
DeleteDiaLog.value = false;
console.log(DeleteId.value)
requests.userDelete(DeleteId.value, token).then((res) => {
console.log("deleteResult:", res)
if (res.data.code === 200) {
message.success('删除成功')
} else {
message.error('删除失败')
}
})
}
function deleteCancel(){
DeleteDiaLog.value = false;
message.info('取消删除')
}
/*编辑用户*/
const 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
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: '序号',
@ -128,11 +460,7 @@ const columns = [
title: '更新时间',
key: 'updatedAt',
dataIndex: 'updatedAt'
},
{
title: '操作',
key: 'action',
},
}
];
const rowSelection = {
@ -150,9 +478,6 @@ const queryData = params => {
params,
});
};
request.userAllCurrent(requestBody, token).then((res) => {
data = res.data.data.users
})
const {
run,
loading,
@ -179,6 +504,25 @@ const handleTableChange = (pag, filters, sorter) => {
...filters,
});
};
requests.userAllCurrent(requestBody, token).then((res) => {
const getUserData = res.data.data.users
for (let i = 0; i < res.data.data.count; i++) {
dataSource[i] = {
id: i,
username: getUserData[i].user.username,
phone: getUserData[i].user.phone,
enabled: getUserData[i].user.enabled,
updatedAt: getUserData[i].user.updatedAt
}
}
})
console.log(dataSource)
</script>

2
src/public/request.js
View File

@ -132,7 +132,7 @@ const userAllCurrent = (data, token) => {
method: "post",
data: data,
headers: {
'Authorization':'Bearer '+token,
'Authorization':'Bearer ' + token,
'Content-Type': 'application/json;charset=utf-8',
'Timestamp': getCurrentTimestamp()
}