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-02-02 21:21:56 +08:00
parent 015bedceb7
commit 4e59a42044
4 changed files with 108 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/MainPage/Index.vue
View File

@ -1,3 +1,12 @@
<template> <template>
这是主页 <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>
<div style="display: flex; position: absolute; right: 20px; top: 50%; transform: translateY(-50%)">
<a-button style="color: white" type="text">登陆</a-button>
<a-button style="color: white" type="text">注册</a-button>
</div>
</div>
</template> </template>
<script setup>
</script>

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

@ -367,7 +367,6 @@ const rowSelection = {
console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows); console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
}, },
getCheckboxProps: record => ({ getCheckboxProps: record => ({
disabled: record.role_name === 'Disabled User',
// Column configuration not to be checked // Column configuration not to be checked
role_name: record.role_name, role_name: record.role_name,
}), }),

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

@ -73,79 +73,99 @@
v-model:open="EditDiaLog" v-model:open="EditDiaLog"
title="修改用户" title="修改用户"
@on-ok="editOk" @on-ok="editOk"
@on-cancel="editCancel"> cancel-text="取消"
ok-text="确定"
style="width: 850px"
@on-cancel="editCancel"
>
<a-form> <a-form>
<a-form-item style="margin-left: 15px"> <div style="display: flex; margin-top: 20px">
用户id： <a-form-item style="margin-left: 20px;">
<a-input style="width: 250px" type="number"/> 用户id：
</a-form-item> <a-input v-model:value="updateData.id" style="width: 250px; margin-left: 40px" type="number"/>
<a-form-item style="margin-left: 15px"> </a-form-item>
用户名： <a-form-item style="margin-left: 50px">
<a-input style="width: 250px"/> 用户名：
</a-form-item> <a-input v-model:value="updateData.username" style="width: 250px; margin-left: 40px"/>
<a-form-item style="margin-left: 15px"> </a-form-item>
地址： </div>
<a-input style="width: 250px"/> <div style="display: flex">
</a-form-item> <a-form-item style="margin-left: 20px">
<a-form-item style="margin-left: 15px"> 地址：
手机号码： <a-input v-model:value="updateData.address" style="width: 250px; margin-left: 54px"/>
<a-input style="width: 250px"/> </a-form-item>
</a-form-item> <a-form-item style="margin-left: 50px">
<a-form-item style="margin-left: 15px"> 手机号码：
邮箱： <a-input v-model="updateData.phone" style="width: 250px; margin-left: 28px"/>
<a-input style="width: 250px"/> </a-form-item>
</a-form-item> </div>
<a-form-item style="margin-left: 15px"> <div style="display: flex">
年龄： <a-form-item style="margin-left: 20px">
<a-input style="width: 250px" type="number"/> 邮箱：
</a-form-item> <a-input v-model="updateData.email" style="width: 250px; margin-left: 54px"/>
<a-form-item style="margin-left: 15px"> </a-form-item>
签名： <a-form-item style="margin-left: 50px">
<a-input style="width: 250px"/> 年龄：
</a-form-item> <a-input v-model:value="updateData.age" style="width: 250px; margin-left: 57px" type="number"/>
<a-form-item style="margin-left: 15px"> </a-form-item>
性别： </div>
<a-input style="width: 250px" type="number"/> <div style="display: flex">
</a-form-item> <a-form-item style="margin-left: 20px">
<a-form-item style="margin-left: 15px"> 签名：
头像： <a-input v-model:value="updateData.signature" style="width: 250px; margin-left: 54px"/>
<a-input style="width: 250px"/> </a-form-item>
</a-form-item> <a-form-item style="margin-left: 50px">
<a-form-item style="margin-left: 15px"> 性别：
昵称： <a-input v-model:value="updateData.sex" style="width: 250px; margin-left: 57px" type="number"/>
<a-input style="width: 250px"/> </a-form-item>
</a-form-item> </div>
<a-form-item style="margin-left: 15px"> <div style="display: flex">
个人描述： <a-form-item style="margin-left: 20px">
<a-input style="width: 250px"/> 头像：
</a-form-item> <a-input v-model:value="updateData.avatar" style="width: 250px; margin-left: 56px"/>
<a-form-item style="margin-left: 15px"> </a-form-item>
用户是否启用： <a-form-item style="margin-left: 50px">
<a-input style="width: 250px" type="boolean"/> 昵称：
</a-form-item> <a-input v-model:value="updateData.nickname" style="width: 250px; margin-left: 57px"/>
<a-form-item style="margin-left: 15px"> </a-form-item>
用户是否过期： </div>
<a-input style="width: 250px" type="boolean"/> <div style="display: flex">
</a-form-item> <a-form-item style="margin-left: 20px">
<a-form-item style="margin-left: 15px"> 个人描述：
密码是否过期： <a-input v-model:value="updateData.description" style="width: 250px; margin-left: 29px"/>
<a-input style="width: 250px" type="boolean"/> </a-form-item>
</a-form-item> <a-form-item style="margin-left: 50px">
<a-form-item style="margin-left: 15px"> 用户是否启用：
是否展示： <a-input v-model:value="updateData.enabled" style="width: 250px" type="boolean"/>
<a-input style="width: 250px" type="boolean"/> </a-form-item>
</a-form-item> </div>
<a-form-item style="margin-left: 15px"> <div style="display: flex">
用户是否被锁： <a-form-item style="margin-left: 20px">
<a-input style="width: 250px" type="boolean"/> 用户是否过期：
</a-form-item> <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-form>
</a-modal> </a-modal>
<!--表格内容--> <!--表格内容-->
<div class="table"> <div class="table">
<a-table :columns="columns" :dataSource="data"> <a-table :columns="columns" :dataSource="data" :row-selection="rowSelection">
<template #bodyCell="{ column, record }"> <template #bodyCell="{ column, record }">
<template v-if="column.key==='id'"> <template v-if="column.key==='id'">
{{record.id}} {{record.id}}
@ -162,7 +182,7 @@
</template> </template>
<template v-else-if="column.key==='action'"> <template v-else-if="column.key==='action'">
<span style="margin-left: 10px"> <span style="margin-left: 10px">
<a-button size="small" style="color: dodgerblue" type="text" @click="showEditDiaLog"><EditOutlined />修改</a-button> <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="showDeleteDiaLog"><DeleteOutlined />删除</a-button> <a-button size="small" style="color: dodgerblue" type="text" @click="showDeleteDiaLog"><DeleteOutlined />删除</a-button>
</span> </span>
</template> </template>
@ -187,7 +207,7 @@ const DeleteId = ref(0);
let dataSource = ref([]); let dataSource = ref([]);
let data = ref([]); let data = ref([]);
const dataLoaded = ref(false); const dataLoaded = ref(false);
const token = "eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiIxNiIsImV4cCI6MTcwNjc4OTgwNH0.Cx4NOfPh3QXH-pYRCSHxpUjdeUxBZABVb5Z82gK8sfI" const token = "eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiIxNiIsImV4cCI6MTcwNjk0MjE1NH0.fDLQMglvD9MZtyrZgBFSM_sX17smhvODww8IUfpJeKg"
const requestBody = { const requestBody = {
"page": null, "page": null,
"limit": null, "limit": null,
@ -480,8 +500,7 @@ const rowSelection = {
console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows); console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
}, },
getCheckboxProps: record => ({ getCheckboxProps: record => ({
disabled: record.name === 'Disabled User', username: record.username,
name: record.name,
}), }),
}; };
@ -494,7 +513,7 @@ async function fetchData() {
search: null, search: null,
role: null role: null
}, },
"eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiIxIiwiZXhwIjoxNzA2ODU0Nzk1fQ.A5kh3jSxbkvHmfEyp9MTp9--N0HdoiEREkKdPgcfXOk" "eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiIxNiIsImV4cCI6MTcwNjk0MjE1NH0.fDLQMglvD9MZtyrZgBFSM_sX17smhvODww8IUfpJeKg"
); );
console.log(queryData.data); // 访问数据 console.log(queryData.data); // 访问数据
dataSource.value = queryData.data.data; dataSource.value = queryData.data.data;

9
src/router/index.js
View File

@ -1,4 +1,4 @@
import { createRouter, createWebHistory } from 'vue-router' import {createRouter, createWebHistory} from 'vue-router'
const router = createRouter({ const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL), history: createWebHistory(import.meta.env.BASE_URL),
@ -6,7 +6,12 @@ const router = createRouter({
{ {
path:'/', path:'/',
name:'app', name:'app',
component:()=>import('../App.vue') component:()=>import('../MainPage/Index.vue')
},
{
path:'/login',
name:'login',
component:()=>import('../LoginRigester/Login.vue')
}, },
{ {
path:'/Manager', path:'/Manager',