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-03-01 16:00:33 +08:00
parent 8d6c73e8ce
commit 401138ffbb
3 changed files with 112 additions and 220 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
src/MainPage/Index.vue
View File

@ -1,4 +1,4 @@
<!--
<template> <template>
<div style="display: flex; background-color: #74abe3; height: 70px; width: auto; position: relative; justify-content: flex-end; padding: 0 20px;"> <div style="display: flex; background-color: #74abe3; height: 70px; width: auto; position: relative; justify-content: flex-end; padding: 0 20px;">
<a-button ghost style="border: none; font-size: 25px; font-weight: bold; display: flex; position: absolute; top: 20%; left: 20px;" @click="">LOGO</a-button> <a-button ghost style="border: none; font-size: 25px; font-weight: bold; display: flex; position: absolute; top: 20%; left: 20px;" @click="">LOGO</a-button>
@ -10,82 +10,6 @@
</div> </div>
</template> </template>
<script setup> <script setup>
</script>-->
<template>
<a-layout class="layout">
<a-layout-header>
<div class="header-content">
<div class="logo">LOGO</div>
<a-menu default-selected-keys="['1']" mode="horizontal" theme="dark">
<a-menu-item key="1">首页</a-menu-item>
<a-menu-item key="2">项目</a-menu-item>
<a-sub-menu title="关于">
<a-menu-item key="about:1">公司历史</a-menu-item>
<a-menu-item key="about:2">团队成员</a-menu-item>
<!-- 更多下拉菜单项 -->
</a-sub-menu>
<a-menu-item key="3">团队</a-menu-item>
<a-menu-item key="4">新闻</a-menu-item>
</a-menu>
<div class="auth-buttons">
<a-button type="link">登录</a-button>
<a-button type="primary">注册</a-button>
</div>
</div>
</a-layout-header>
</a-layout>
</template>
<script>
import {Button, Layout, Menu} from 'ant-design-vue';
export default {
name: 'NavigationBar',
components: {
'a-layout': Layout,
'a-layout-header': Layout.Header,
'a-menu': Menu,
'a-menu-item': Menu.Item,
'a-sub-menu': Menu.SubMenu,
'a-button': Button
}
};
</script> </script>
<style>
.layout {
height: 64px; /* 根据需要调整高度 */
}
.header-content {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
float: left;
width: 120px;
height: 31px;
margin: 16px 24px 16px 0;
background: rgba(255, 255, 255, 0.2);
color: white;
text-align: center;
line-height: 31px;
}
a-layout-header {
background-color: white; /* Ant Design 默认导航栏颜色 */
}
.auth-buttons {
float: right;
}
/* 修正下拉菜单的样式 */
a-sub-menu {
color: white !important; /* 确保使用白色文本 */
}
</style>

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

@ -2,16 +2,7 @@
<div class="main"> <div class="main">
<div class="header"> <div class="header">
<div class="input"> <div class="input">
<a-input class="first-input" v-model:value="value1" addonBefore="角色名称" placeholder="请输入角色名称" /> <a-input v-model:value="searchData.id" addonBefore="角色id" class="first-input" placeholder="请输入角色id" />
<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>
<div class="edit"> <div class="edit">
<a-button class="query-button" @click="searchRole"><SearchOutlined />查询</a-button> <a-button class="query-button" @click="searchRole"><SearchOutlined />查询</a-button>
@ -44,9 +35,9 @@
> >
<div style=""> <div style="">
<div style="margin-bottom: 10px;"> <div style="margin-bottom: 10px;">
<div style="margin-left: 15px; margin-bottom: 15px">角色id(原始id)： <a-input v-model:value="updateData.id" style="width: 250px" type="number" /></div> <div style="margin-left: 15px; margin-bottom: 15px">角色id(原始id)： <a-input v-model:value="updateData.id" style="width:10vw" type="number" /></div>
<div style="margin-left: 15px; margin-bottom: 15px">角色名称：<a-input v-model:value="updateData.name" style="width: 250px" /></div> <div style="margin-left: 15px; margin-bottom: 15px">角色名称：<a-input v-model:value="updateData.name" style="width: 10vw; margin-left: 2vw" /></div>
<div style="margin-left: 15px; margin-bottom: 15px">角色备注：<a-input v-model:value="updateData.displayName" style="width: 250px;" /></div> <div style="margin-left: 15px; margin-bottom: 15px">角色备注：<a-input v-model:value="updateData.displayName" style="width: 10vw; margin-left: 2vw" /></div>
</div> </div>
</div> </div>
</a-modal> </a-modal>
@ -73,7 +64,7 @@
</template> </template>
<template v-else-if="column.key === 'role_action'"> <template v-else-if="column.key === 'role_action'">
<span style="margin-left: 10px"> <span style="margin-left: 10px">
<a-button class="button2" size="small" type="text" @click="showEditDiaLog"><EditOutlined />修改</a-button> <a-button class="button2" size="small" type="text" @click="() => showEditDiaLog(record)"><EditOutlined />修改</a-button>
<a-button class="button1" size="small" type="text" @click="() => showDeleteConfirm(record)"><DeleteOutlined />删除</a-button> <a-button class="button1" size="small" type="text" @click="() => showDeleteConfirm(record)"><DeleteOutlined />删除</a-button>
</span> </span>
</template> </template>
@ -98,7 +89,6 @@ import {usePagination} from 'vue-request';
import requests from '../../public/request.js'; import requests from '../../public/request.js';
import axios from 'axios'; import axios from 'axios';
const value1 = ref('');
const roleid = ref(''); const roleid = ref('');
const AddDiaLog = ref(false); const AddDiaLog = ref(false);
const DeleteDiaLog = ref(false); const DeleteDiaLog = ref(false);
@ -108,7 +98,7 @@ const states = reactive({
data:[] data:[]
}); });
const updateData = reactive({ const updateData = reactive({
id: 0, id: '',
name: '', name: '',
displayName: '', displayName: '',
@ -168,6 +158,7 @@ function addOk () {
console.log(res.data) console.log(res.data)
if (res.data.code===200) { if (res.data.code===200) {
message.success('新增成功') message.success('新增成功')
AddDiaLog.value = false;
getAll() getAll()
} }
else { else {
@ -217,13 +208,22 @@ const showDeleteConfirm = (record) => {
/*修改角色*/ /*修改角色*/
function showEditDiaLog(record){ /*function showEditDiaLog(record){
editDiaLog.value = true editDiaLog.value = true
updateData.id = record.id updateData.id = record.id
updateData.name = record.role_name updateData.name = record.role_name
updateData.displayName = record.displayName updateData.displayName = record.displayName
} }*/
const showEditDiaLog = (record) => {
console.log("record:",record)
editDiaLog.value = true
updateData.id = record.id
updateData.name = record.roleName
updateData.displayName = record.displayName
};
function editOk(){ function editOk(){
loadingTable.value = true loadingTable.value = true
@ -246,27 +246,27 @@ function editOk(){
function editCancel(){ function editCancel(){
editDiaLog.value = false; editDiaLog.value = false;
message.info('取消修改')
} }
/*查询用户*/ /*查询用户*/
const searchData = reactive({ const searchData = reactive({
username: '', id:'',
phone: ''
}) })
function searchRole(){ function searchRole(){
loadingTable.value = true loadingTable.value = true
if (searchData.username === '' && searchData.phone === '') { if (searchData.id === '') {
getAll() getAll()
} }
else { else {
requests.userCurrent(searchData,token).then((res)=>{ requests.roleGet(searchData,token).then((res)=>{
loadingTable.value = false loadingTable.value = false
console.log("searchResult:",res) console.log("searchResult:",res)
if (res.data.code === 200) { if (res.data.code === 200) {
states.data = [] states.data = []
states.data[0] = res.data.data.user states.data = res.data.data
message.success('查询成功') message.success('查询成功')
console.log(loadingTable.value) console.log(loadingTable.value)
} }
@ -372,19 +372,13 @@ const handleTableChange = (pag, filters, sorter) => {
} }
.input { .input {
width: 20vw; width: 10vw;
margin-top: 2vh; margin-top: 2vh;
margin-bottom: 1vh; margin-bottom: 1vh;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
} }
.first-input {
margin-right: 1vw;
margin-left: 1vw;
}
.edit { .edit {
margin-top: 2vh; margin-top: 2vh;
width: 20vw; width: 20vw;
@ -392,7 +386,7 @@ const handleTableChange = (pag, filters, sorter) => {
} }
.query-button { .query-button {
margin-left: 4vw; margin-left: 1vw;
margin-right: 1vw; margin-right: 1vw;
} }

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

@ -2,16 +2,7 @@
<div class="main"> <div class="main">
<div class="header"> <div class="header">
<div class="input"> <div class="input">
<a-input class="first-input" v-model:value="value1" addonBefore="关键字" placeholder="请输入用户账号或姓名" /> <a-input v-model:value="searchData.id" addonBefore="关键字" class="first-input" placeholder="请输入用户id" />
<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>
<div class="edit"> <div class="edit">
<a-button class="query-button" @click="searchUser"><SearchOutlined />查询</a-button> <a-button class="query-button" @click="searchUser"><SearchOutlined />查询</a-button>
@ -61,7 +52,6 @@
年龄： 年龄：
<a-input v-model:value="addData.age" style="width: 250px" type="number" /> <a-input v-model:value="addData.age" style="width: 250px" type="number" />
</a-form-item> </a-form-item>
</a-form> </a-form>
</a-modal> </a-modal>
@ -69,91 +59,48 @@
<a-modal <a-modal
v-model:open="EditDiaLog" v-model:open="EditDiaLog"
title="修改用户" title="修改用户"
@on-ok="editOk" @cancel="editCancel"
cancel-text="取消" cancel-text="取消"
ok-text="确定" ok-text="确定"
style="width: 850px" style="width: 850px"
@on-cancel="editCancel" @ok="editOk"
> >
<a-form> <a-form>
<div style="display: flex; margin-top: 20px"> <div style="display: flex; margin-top: 1vw">
<a-form-item style="margin-left: 20px;"> <a-form-item label="用户名" style="margin-left: 1vw">
用户id： <a-input v-model:value="updateData.username" style="width: 12vw; margin-left: 1.2vw"/>
<a-input v-model:value="updateData.id" style="width: 250px; margin-left: 40px" type="number"/>
</a-form-item> </a-form-item>
<a-form-item style="margin-left: 50px"> <a-form-item label="手机号码" style="margin-left: 3vw">
用户名： <a-input v-model:value="updateData.phone" style="width: 12vw; margin-left: 2vw"/>
<a-input v-model:value="updateData.username" style="width: 250px; margin-left: 40px"/>
</a-form-item> </a-form-item>
</div> </div>
<div style="display: flex"> <div style="display: flex">
<a-form-item style="margin-left: 20px"> <a-form-item label="地址" style="margin-left: 1vw">
地址： <a-input v-model:value="updateData.address" style="width: 12vw; margin-left: 2vw"/>
<a-input v-model:value="updateData.address" style="width: 250px; margin-left: 54px"/>
</a-form-item> </a-form-item>
<a-form-item style="margin-left: 50px"> <a-form-item label="邮箱" style="margin-left: 3vw">
手机号码： <a-input v-model:value="updateData.email" style="width: 12vw; margin-left: 3.6vw"/>
<a-input v-model="updateData.phone" style="width: 250px; margin-left: 28px"/>
</a-form-item> </a-form-item>
</div> </div>
<div style="display: flex"> <div style="display: flex">
<a-form-item style="margin-left: 20px"> <a-form-item label="年龄" style="margin-left: 1vw">
邮箱： <a-input v-model:value="updateData.age" style="width: 12vw; margin-left:2vw" type="number"/>
<a-input v-model="updateData.email" style="width: 250px; margin-left: 54px"/>
</a-form-item> </a-form-item>
<a-form-item style="margin-left: 50px"> <a-form-item label="性别" style="margin-left: 3vw">
年龄： <a-input v-model:value="updateData.sex" style="width: 12vw; margin-left: 3.6vw" type="number"/>
<a-input v-model:value="updateData.age" style="width: 250px; margin-left: 57px" type="number"/>
</a-form-item> </a-form-item>
</div> </div>
<div style="display: flex"> <div style="display: flex">
<a-form-item style="margin-left: 20px"> <a-form-item label="头像地址" style="margin-left: 1vw">
签名： <a-input v-model:value="updateData.avatar" style="width: 12vw; margin-left: 0.5vw"/>
<a-input v-model:value="updateData.signature" style="width: 250px; margin-left: 54px"/>
</a-form-item> </a-form-item>
<a-form-item style="margin-left: 50px"> <a-form-item label="用户是否可用" style="margin-left: 3vw">
性别： <a-input v-model:value="updateData.enabled" style="width: 12vw; margin-left: 0.5vw" type="boolean"/>
<a-input v-model:value="updateData.sex" style="width: 250px; margin-left: 57px" type="number"/>
</a-form-item> </a-form-item>
</div> </div>
<div style="display: flex"> <div style="display: flex">
<a-form-item style="margin-left: 20px"> <a-form-item label="用户是否被推荐" style="margin-left: 1vw">
头像： <a-input v-model:value="updateData.recommend" style="width: 9.6vw; margin-left: 0.5vw" type="boolean"/>
<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> </a-form-item>
</div> </div>
</a-form> </a-form>
@ -204,8 +151,6 @@ import {
import {message, Modal} from "ant-design-vue"; import {message, Modal} from "ant-design-vue";
import requests from "@/public/request.js"; import requests from "@/public/request.js";
const value1 = ref('');
const value2 = ref('');
const AddDiaLog = ref(false); const AddDiaLog = ref(false);
const EditDiaLog = ref(false); const EditDiaLog = ref(false);
let dataSource = ref([]); let dataSource = ref([]);
@ -230,25 +175,25 @@ const sex = ref('男')
const updateData = reactive({ const updateData = reactive({
id: '', //id: '',
username: '', username: '',
address: '', address: '',
phone: '', phone: '',
email: '', email: '',
age: '', age: '',
signature: '', //signature: '',
sex: '', sex: '',
avatar: '', avatar: '',
nickname: '', //nickname: '',
description: '', description: '',
enabled: true, enabled: true,
isExpired: false, //isExpired: false,
passwordExpired: false, //passwordExpired: false,
recommend: false, recommend: false,
isLocked: false, //isLocked: false,
createdAt:'', // createdAt:'',
updateAt:'', //updateAt:'',
isDelete:false, //isDelete:false,
}) })
@ -286,7 +231,7 @@ onMounted(() => {
function getAll() { function getAll() {
requests.userAllCurrent(AllUser,token).then((res)=>{ requests.userAllCurrent(null,token).then((res)=>{
console.log(res) console.log(res)
// states.data = res.data.data // states.data = res.data.data
// console.log(res.data.data) // console.log(res.data.data)
@ -300,6 +245,25 @@ function getAll() {
} }
/*
function getAll() {
requests.userAllCurrent(AllUser, token).then((res) => {
console.log(res);
loadingTable.value = false;
// 直接更新整个数组来确保响应性
states.data = res.data.data.map(item => item.user);
states.role = res.data.data.map(item => item.role.rid);
console.log("getAll:", states.data.length);
});
}
*/
/*新增用户*/ /*新增用户*/
const addData = reactive({ const addData = reactive({
@ -333,8 +297,8 @@ function addOk () {
console.log(res.data) console.log(res.data)
if (res.data.code===200) { if (res.data.code===200) {
message.success('新增成功') message.success('新增成功')
getAll();
AddDiaLog.value = false; AddDiaLog.value = false;
getAll();
} }
else { else {
message.error('新增失败') message.error('新增失败')
@ -389,20 +353,22 @@ const showDeleteConfirm = (record) => {
/*编辑用户*/ /*编辑用户*/
function showEditDiaLog(record, index){ function showEditDiaLog(record){
EditDiaLog.value = true EditDiaLog.value = true
updateData.id = record.id //updateData.id = record.id
updateData.username = record.username updateData.username = record.username
updateData.address = record.address updateData.address = record.address
updateData.phone = record.phone updateData.phone = record.phone
updateData.email = record.email updateData.email = record.email
updateData.age = record.age updateData.age = record.age
updateData.signature = record.signature //updateData.signature = record.signature
updateData.sex = record.sex updateData.sex = record.sex
updateData.avatar = record.avatar updateData.avatar = record.avatar
updateData.nickname = record.nickname //updateData.nickname = record.nickname
updateData.description = record.description //updateData.description = record.description
updateData.isDelete = record.isDelete //updateData.isDelete = record.isDelete
updateData.recommend = record.recommend
updateData.enabled = record.enabled
roleSingle.value = states.role[index] roleSingle.value = states.role[index]
if (record.sex === 1) { if (record.sex === 1) {
sex.value = '男' sex.value = '男'
@ -412,12 +378,12 @@ function showEditDiaLog(record, index){
} }
function editOk(){ function editOk(){
loadingTable.value = true loadingTable.value = true
EditDiaLog.value = false
requests.userEdit(updateData,token).then((res)=>{ requests.userEdit(updateData,token).then((res)=>{
console.log("editResult:",res) console.log("editResult:",res)
console.log("updateData:",updateData) console.log("updateData:",updateData)
if (res.data.code === 200) { if (res.data.code === 200) {
getAll() getAll()
EditDiaLog.value = false
message.success('修改成功') message.success('修改成功')
} }
else { else {
@ -436,22 +402,23 @@ function editCancel(){
/*查询用户*/ /*查询用户*/
const searchData = reactive({ const searchData = reactive({
username: '', id:'',
phone: ''
}) })
function searchUser(){ function searchUser(){
loadingTable.value = true loadingTable.value = true
if (searchData.username === '' && searchData.phone === '') { if (searchData.id === '') {
getAll() getAll()
} }
else { else {
requests.userCurrent(searchData,token).then((res)=>{ requests.userAllCurrent(searchData, token).then((res)=>{
loadingTable.value = false loadingTable.value = false
console.log("searchResult:",res) console.log("searchResult:",res)
if (res.data.code === 200) { if (res.data.code === 200) {
states.data = [] states.data = []
states.data[0] = res.data.data.user states.data = res.data.data.user
states.role = []
states.role = res.data.data.role
message.success('查询成功') message.success('查询成功')
console.log(loadingTable.value) console.log(loadingTable.value)
} }
@ -468,6 +435,11 @@ const columns = [
dataIndex: 'id', dataIndex: 'id',
key: 'id', key: 'id',
}, },
{
title:'角色id',
dataIndex: 'rid',
key:'rid',
},
{ {
title: '用户名', title: '用户名',
dataIndex: 'username', dataIndex: 'username',
@ -516,7 +488,8 @@ const rowSelection = {
}; };
/*async function fetchData() { /*
async function fetchData() {
try { try {
const queryData = await requests.userAllCurrent( const queryData = await requests.userAllCurrent(
{ {
@ -554,7 +527,8 @@ console.log(dataSource)
// 组件挂载时调用 fetchData // 组件挂载时调用 fetchData
onMounted(() => { onMounted(() => {
fetchData(); fetchData();
});*/ });
*/
async function fetchData() { async function fetchData() {
@ -575,6 +549,7 @@ async function fetchData() {
// 修正循环条件，确保我们不越界 // 修正循环条件，确保我们不越界
for (let i = 0; i < dataSource.value.count; i++) { for (let i = 0; i < dataSource.value.count; i++) {
const user = dataSource.value.users[i].user; const user = dataSource.value.users[i].user;
const role = dataSource.value.users[i].role;
if (user.updatedAt === null) { if (user.updatedAt === null) {
user.updatedAt = "null"; user.updatedAt = "null";
} }
@ -589,6 +564,13 @@ async function fetchData() {
updatedAt: user.updatedAt, updatedAt: user.updatedAt,
id: user.id, id: user.id,
isDelete:user.isDelete, isDelete:user.isDelete,
rid:role.rid,
address:user.address,
sex:user.sex,
age:user.age,
email:user.email,
avatar:user.avatar,
recommend:user.recommend
}); });
} }
console.log(data.value); console.log(data.value);
@ -622,21 +604,13 @@ onMounted(() => {
} }
.input { .input {
width: 35vw; width: 10vw;
margin-top: 2vh; margin-top: 2vh;
margin-bottom: 1vh; margin-bottom: 1vh;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
} }
.first-input {
margin-right: 1vw;
margin-left: 1vw;
}
.second-input {
margin-right: 1vw;
}
.edit { .edit {
margin-top: 2vh; margin-top: 2vh;
@ -645,7 +619,7 @@ onMounted(() => {
} }
.query-button { .query-button {
margin-left: 4vw; margin-left: 1vw;
margin-right: 1vw; margin-right: 1vw;
} }