完善用户对话框
This commit is contained in:
parent
015bedceb7
commit
4e59a42044
@ -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>
|
||||
<script setup>
|
||||
</script>
|
||||
@ -367,7 +367,6 @@ const rowSelection = {
|
||||
console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
|
||||
},
|
||||
getCheckboxProps: record => ({
|
||||
disabled: record.role_name === 'Disabled User',
|
||||
// Column configuration not to be checked
|
||||
role_name: record.role_name,
|
||||
}),
|
||||
|
||||
@ -73,79 +73,99 @@
|
||||
v-model:open="EditDiaLog"
|
||||
title="修改用户"
|
||||
@on-ok="editOk"
|
||||
@on-cancel="editCancel">
|
||||
cancel-text="取消"
|
||||
ok-text="确定"
|
||||
style="width: 850px"
|
||||
@on-cancel="editCancel"
|
||||
>
|
||||
<a-form>
|
||||
<a-form-item style="margin-left: 15px">
|
||||
用户id：
|
||||
<a-input style="width: 250px" type="number"/>
|
||||
</a-form-item>
|
||||
<a-form-item style="margin-left: 15px">
|
||||
用户名：
|
||||
<a-input style="width: 250px"/>
|
||||
</a-form-item>
|
||||
<a-form-item style="margin-left: 15px">
|
||||
地址：
|
||||
<a-input style="width: 250px"/>
|
||||
</a-form-item>
|
||||
<a-form-item style="margin-left: 15px">
|
||||
手机号码：
|
||||
<a-input style="width: 250px"/>
|
||||
</a-form-item>
|
||||
<a-form-item style="margin-left: 15px">
|
||||
邮箱：
|
||||
<a-input style="width: 250px"/>
|
||||
</a-form-item>
|
||||
<a-form-item style="margin-left: 15px">
|
||||
年龄：
|
||||
<a-input style="width: 250px" type="number"/>
|
||||
</a-form-item>
|
||||
<a-form-item style="margin-left: 15px">
|
||||
签名：
|
||||
<a-input style="width: 250px"/>
|
||||
</a-form-item>
|
||||
<a-form-item style="margin-left: 15px">
|
||||
性别：
|
||||
<a-input style="width: 250px" type="number"/>
|
||||
</a-form-item>
|
||||
<a-form-item style="margin-left: 15px">
|
||||
头像：
|
||||
<a-input style="width: 250px"/>
|
||||
</a-form-item>
|
||||
<a-form-item style="margin-left: 15px">
|
||||
昵称：
|
||||
<a-input style="width: 250px"/>
|
||||
</a-form-item>
|
||||
<a-form-item style="margin-left: 15px">
|
||||
个人描述：
|
||||
<a-input style="width: 250px"/>
|
||||
</a-form-item>
|
||||
<a-form-item style="margin-left: 15px">
|
||||
用户是否启用：
|
||||
<a-input style="width: 250px" type="boolean"/>
|
||||
</a-form-item>
|
||||
<a-form-item style="margin-left: 15px">
|
||||
用户是否过期：
|
||||
<a-input style="width: 250px" type="boolean"/>
|
||||
</a-form-item>
|
||||
<a-form-item style="margin-left: 15px">
|
||||
密码是否过期：
|
||||
<a-input style="width: 250px" type="boolean"/>
|
||||
</a-form-item>
|
||||
<a-form-item style="margin-left: 15px">
|
||||
是否展示：
|
||||
<a-input style="width: 250px" type="boolean"/>
|
||||
</a-form-item>
|
||||
<a-form-item style="margin-left: 15px">
|
||||
用户是否被锁：
|
||||
<a-input style="width: 250px" type="boolean"/>
|
||||
</a-form-item>
|
||||
<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">
|
||||
<a-table :columns="columns" :dataSource="data" :row-selection="rowSelection">
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key==='id'">
|
||||
{{record.id}}
|
||||
@ -162,7 +182,7 @@
|
||||
</template>
|
||||
<template v-else-if="column.key==='action'">
|
||||
<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>
|
||||
</span>
|
||||
</template>
|
||||
@ -187,7 +207,7 @@ const DeleteId = ref(0);
|
||||
let dataSource = ref([]);
|
||||
let data = ref([]);
|
||||
const dataLoaded = ref(false);
|
||||
const token = "eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiIxNiIsImV4cCI6MTcwNjc4OTgwNH0.Cx4NOfPh3QXH-pYRCSHxpUjdeUxBZABVb5Z82gK8sfI"
|
||||
const token = "eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiIxNiIsImV4cCI6MTcwNjk0MjE1NH0.fDLQMglvD9MZtyrZgBFSM_sX17smhvODww8IUfpJeKg"
|
||||
const requestBody = {
|
||||
"page": null,
|
||||
"limit": null,
|
||||
@ -480,8 +500,7 @@ const rowSelection = {
|
||||
console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
|
||||
},
|
||||
getCheckboxProps: record => ({
|
||||
disabled: record.name === 'Disabled User',
|
||||
name: record.name,
|
||||
username: record.username,
|
||||
}),
|
||||
};
|
||||
|
||||
@ -494,7 +513,7 @@ async function fetchData() {
|
||||
search: null,
|
||||
role: null
|
||||
},
|
||||
"eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiIxIiwiZXhwIjoxNzA2ODU0Nzk1fQ.A5kh3jSxbkvHmfEyp9MTp9--N0HdoiEREkKdPgcfXOk"
|
||||
"eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiIxNiIsImV4cCI6MTcwNjk0MjE1NH0.fDLQMglvD9MZtyrZgBFSM_sX17smhvODww8IUfpJeKg"
|
||||
);
|
||||
console.log(queryData.data); // 访问数据
|
||||
dataSource.value = queryData.data.data;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
import {createRouter, createWebHistory} from 'vue-router'
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(import.meta.env.BASE_URL),
|
||||
@ -6,7 +6,12 @@ const router = createRouter({
|
||||
{
|
||||
path:'/',
|
||||
name:'app',
|
||||
component:()=>import('../App.vue')
|
||||
component:()=>import('../MainPage/Index.vue')
|
||||
},
|
||||
{
|
||||
path:'/login',
|
||||
name:'login',
|
||||
component:()=>import('../LoginRigester/Login.vue')
|
||||
},
|
||||
{
|
||||
path:'/Manager',
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user