修改对话框
This commit is contained in:
parent
a7246c4dbc
commit
43431482c4
|
|
@ -15,49 +15,38 @@
|
|||
</div>
|
||||
<div class="edit">
|
||||
<a-button class="query-button" @click="searchRole"><SearchOutlined />查询</a-button>
|
||||
<a-button class="add-button" @click="showAddDioLog"><PlusOutlined />新增角色</a-button>
|
||||
<a-button class="add-button" type="primary" @click="showAddDiaLog"><PlusOutlined />新增角色</a-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!--新增角色对话框-->
|
||||
<a-modal v-model:open="AddDioLog" cancel-text="取消" ok-text="确认" title="新增角色" @cancel="addCancel" @ok="addOk">
|
||||
<a-modal v-model:open="AddDiaLog" 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-input v-model="addData.displayName" style="width: 250px; margin-bottom: 10px;"/></div>
|
||||
</div>
|
||||
</a-modal>
|
||||
|
||||
<!--删除角色对话框-->
|
||||
<a-modal v-model:open="DeleteDioLog" cancel-text="取消" content="确认删除这条数据吗?" ok-text="确认" title="删除角色" @cancel="deleteCancel" @ok="deleteOk">
|
||||
<a-modal v-model:open="DeleteDiaLog" cancel-text="取消" content="确认删除这条数据吗?" ok-text="确认" title="删除角色" @cancel="deleteCancel" @ok="deleteOk">
|
||||
<p>确定删除改数据吗？</p>
|
||||
</a-modal>
|
||||
|
||||
<!--修改角色对话框-->
|
||||
<a-modal
|
||||
v-model="editDialog"
|
||||
title="编辑"
|
||||
v-model:open="editDiaLog"
|
||||
cancel-text="取消"
|
||||
@cancel="editCancel"
|
||||
@ok="editOk">
|
||||
ok-text="确定"
|
||||
title="修改角色"
|
||||
@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 style="margin-left: 15px; margin-bottom: 15px">角色id： <a-input v-model:value="roleid" style="width: 250px" type="number" /></div>
|
||||
<div style="margin-left: 15px; margin-bottom: 15px">角色名称：<a-input v-model="updateData.name" style="width: 250px" /></div>
|
||||
<div style="margin-left: 15px; margin-bottom: 15px">角色备注：<a-input v-model="updateData.displayName" style="width: 250px;" /></div>
|
||||
</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
|
|
@ -85,8 +74,8 @@
|
|||
</template>
|
||||
<template v-else-if="column.key === 'role_action'">
|
||||
<span style="margin-left: 10px">
|
||||
<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>
|
||||
<a-button class="button2" size="small" type="text" @click="showEditDiaLog"><EditOutlined />修改</a-button>
|
||||
<a-button class="button1" size="small" type="text" @click="showDeleteDiaLog"><DeleteOutlined />删除</a-button>
|
||||
</span>
|
||||
</template>
|
||||
</template>
|
||||
|
|
@ -105,9 +94,10 @@ import requests from '../../public/request.js';
|
|||
import axios from 'axios';
|
||||
|
||||
const value1 = ref('');
|
||||
const AddDioLog = ref(false);
|
||||
const DeleteDioLog = ref(false);
|
||||
const editDialog = ref(false)
|
||||
const roleid = ref('');
|
||||
const AddDiaLog = ref(false);
|
||||
const DeleteDiaLog = ref(false);
|
||||
const editDiaLog = ref(false)
|
||||
const token = window.localStorage.getItem('token')
|
||||
const states = reactive({
|
||||
data:[]
|
||||
|
|
@ -150,7 +140,7 @@ function getAll() {
|
|||
|
||||
|
||||
|
||||
/*新增用户*/
|
||||
/*新增角色*/
|
||||
const addData = reactive({
|
||||
// id:'',
|
||||
// roleName:'',
|
||||
|
|
@ -161,8 +151,8 @@ const addData = reactive({
|
|||
|
||||
})
|
||||
|
||||
function showAddDioLog(){
|
||||
AddDioLog.value = true;
|
||||
function showAddDiaLog(){
|
||||
AddDiaLog.value = true;
|
||||
}
|
||||
|
||||
function addOk () {
|
||||
|
|
@ -185,13 +175,13 @@ function addCancel () {
|
|||
|
||||
/*删除用户*/
|
||||
const deleteId = ref(0)
|
||||
function showDeleteDioLog(){
|
||||
DeleteDioLog.value = true
|
||||
function showDeleteDiaLog(){
|
||||
DeleteDiaLog.value = true
|
||||
deleteId.value = row.id
|
||||
}
|
||||
|
||||
function deleteOk() {
|
||||
DeleteDioLog.value = false;
|
||||
DeleteDiaLog.value = false;
|
||||
console.log(deleteId.value)
|
||||
requests.roleDelete(deleteId.value, token).then((res) => {
|
||||
console.log("deleteResult:", res)
|
||||
|
|
@ -204,13 +194,13 @@ function deleteOk() {
|
|||
}
|
||||
|
||||
function deleteCancel(){
|
||||
DeleteDioLog.value = false;
|
||||
DeleteDiaLog.value = false;
|
||||
message.info('取消删除')
|
||||
}
|
||||
|
||||
/*修改用户*/
|
||||
function showEditDioLog(){
|
||||
editDialog.value = true
|
||||
function showEditDiaLog(){
|
||||
editDiaLog.value = true
|
||||
updateData.id = row.id
|
||||
updateData.name = row.roleName
|
||||
updateData.displayName = row.displayName
|
||||
|
|
@ -219,7 +209,7 @@ function showEditDioLog(){
|
|||
|
||||
function editOk(){
|
||||
loadingTable.value = true
|
||||
editDialog.value = false;
|
||||
editDiaLog.value = false;
|
||||
requests.roleEdit(updateData,token).then((res)=>{
|
||||
console.log("editResult:",res)
|
||||
console.log("updateData:",updateData)
|
||||
|
|
@ -237,7 +227,7 @@ function editOk(){
|
|||
}
|
||||
|
||||
function editCancel(){
|
||||
editDialog.value = false;
|
||||
editDiaLog.value = false;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -451,17 +441,10 @@ const handleTableChange = (pag, filters, sorter) => {
|
|||
}
|
||||
|
||||
.query-button {
|
||||
background-color: dodgerblue;
|
||||
color:white;
|
||||
margin-left: 4vw;
|
||||
margin-right: 1vw;
|
||||
}
|
||||
|
||||
.add-button {
|
||||
background-color: limegreen;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.table {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
|
|
|
|||
|
|
@ -15,8 +15,7 @@
|
|||
</div>
|
||||
<div class="edit">
|
||||
<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>
|
||||
<a-button class="add-button" type="primary" @click="showAddDiaLog"><PlusOutlined />新增用户</a-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -53,10 +52,10 @@
|
|||
<div style="">
|
||||
<div style="margin-bottom: 10px">
|
||||
<span>
|
||||
用户名：<a-input v-model:value="updateData.username" placeholder="Enter something..." style="width: 180px" />
|
||||
用户名：<a-input v-model:value="updateData.username" style="width: 180px" />
|
||||
</span>
|
||||
<span style="margin-left: 20px">
|
||||
电话：<a-input v-model:value="updateData.phone" placeholder="Enter something..." style="width: 180px" />
|
||||
电话：<a-input v-model:value="updateData.phone" style="width: 180px" />
|
||||
</span>
|
||||
</div>
|
||||
<div style="margin-bottom: 10px">
|
||||
|
|
@ -74,9 +73,9 @@
|
|||
</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 style="margin-bottom: 10px">邮箱：<Input v-model="updateData.email" style="width: 435px" /></div>
|
||||
<div style="margin-bottom: 10px">地址：<Input v-model="updateData.address" style="width: 435px" /></div>
|
||||
<div style="margin-bottom: 10px">简介：<Input v-model="updateData.description" style="width: 435px" type="textarea" /></div>
|
||||
</div>
|
||||
</a-modal>
|
||||
|
||||
|
|
@ -91,8 +90,18 @@
|
|||
@change="handleTableChange"
|
||||
:rowClassName="setRowClassName"
|
||||
>
|
||||
<template #bodyCell="{ column, record, index, text }">
|
||||
<template v-if="column.dataIndex === 'id'">{{ text }}</template>
|
||||
<template #bodyCell="{ column, record, index }">
|
||||
<template v-if="column.key === 'user_state'">
|
||||
<span>
|
||||
<a-tag
|
||||
v-for="tag in record.role_state"
|
||||
:key="tag"
|
||||
:color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'"
|
||||
>
|
||||
{{ tag.toUpperCase() }}
|
||||
</a-tag>
|
||||
</span>
|
||||
</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>
|
||||
|
|
@ -203,21 +212,7 @@ onMounted(() => {
|
|||
})
|
||||
|
||||
|
||||
/*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
|
||||
|
|
@ -255,7 +250,7 @@ const showAddDiaLog = () => {
|
|||
addData.sex = 1;
|
||||
addData.age = '';
|
||||
};
|
||||
/*
|
||||
|
||||
function addOk () {
|
||||
if (sex.value === '男') {
|
||||
addData.sex = 1
|
||||
|
|
@ -274,54 +269,6 @@ function addOk () {
|
|||
}
|
||||
})
|
||||
}
|
||||
*/
|
||||
|
||||
|
||||
|
||||
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);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -453,14 +400,19 @@ const columns = [
|
|||
},
|
||||
{
|
||||
title: '用户状态',
|
||||
dataIndex: 'enabled',
|
||||
dataIndex: 'user_state',
|
||||
key: 'enabled',
|
||||
},
|
||||
{
|
||||
title: '更新时间',
|
||||
key: 'updatedAt',
|
||||
dataIndex: 'updatedAt'
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key:'user_action',
|
||||
dataIndex: 'user_action',
|
||||
},
|
||||
];
|
||||
|
||||
const rowSelection = {
|
||||
|
|
@ -562,15 +514,9 @@ console.log(dataSource)
|
|||
}
|
||||
|
||||
.query-button {
|
||||
background-color: dodgerblue;
|
||||
color:white;
|
||||
margin-left: 4vw;
|
||||
margin-right: 1vw;
|
||||
}
|
||||
|
||||
.add-button {
|
||||
background-color: limegreen;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.delete-button {
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user