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-01 15:05:22 +08:00
parent a7246c4dbc
commit 43431482c4
2 changed files with 56 additions and 127 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -15,49 +15,38 @@
</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>
<a-button class="add-button" @click="showAddDioLog"><PlusOutlined />新增角色</a-button> <a-button class="add-button" type="primary" @click="showAddDiaLog"><PlusOutlined />新增角色</a-button>
</div> </div>
</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>
<div>角色名称：<a-input v-model="addData.name" style="width: 250px; margin-bottom: 10px"/></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> </div>
</a-modal> </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> <p>确定删除改数据吗？</p>
</a-modal> </a-modal>
<!--修改角色对话框--> <!--修改角色对话框-->
<a-modal <a-modal
v-model="editDialog" v-model:open="editDiaLog"
title="编辑" cancel-text="取消"
@cancel="editCancel" @cancel="editCancel"
@ok="editOk"> ok-text="确定"
title="修改角色"
@ok="editOk"
>
<div style=""> <div style="">
<div style="margin-bottom: 10px;"> <div style="margin-bottom: 10px;">
<span> <div style="margin-left: 15px; margin-bottom: 15px">角色id： <a-input v-model:value="roleid" style="width: 250px" type="number" /></div>
角色名称：<Input v-model="updateData.name" placeholder="Enter something..." style="width: 250px;padding: 10px" /> <div style="margin-left: 15px; margin-bottom: 15px">角色名称：<a-input v-model="updateData.name" style="width: 250px" /></div>
</span> <div style="margin-left: 15px; margin-bottom: 15px">角色备注：<a-input v-model="updateData.displayName" style="width: 250px;" /></div>
<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>
</div> </div>
</a-modal> </a-modal>
@ -85,8 +74,8 @@
</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="showEditDioLog"><EditOutlined />修改</a-button> <a-button class="button2" size="small" type="text" @click="showEditDiaLog"><EditOutlined />修改</a-button>
<a-button class="button1" size="small" type="text" @click="showDeleteDioLog"><DeleteOutlined />删除</a-button> <a-button class="button1" size="small" type="text" @click="showDeleteDiaLog"><DeleteOutlined />删除</a-button>
</span> </span>
</template> </template>
</template> </template>
@ -105,9 +94,10 @@ import requests from '../../public/request.js';
import axios from 'axios'; import axios from 'axios';
const value1 = ref(''); const value1 = ref('');
const AddDioLog = ref(false); const roleid = ref('');
const DeleteDioLog = ref(false); const AddDiaLog = ref(false);
const editDialog = ref(false) const DeleteDiaLog = ref(false);
const editDiaLog = ref(false)
const token = window.localStorage.getItem('token') const token = window.localStorage.getItem('token')
const states = reactive({ const states = reactive({
data:[] data:[]
@ -150,7 +140,7 @@ function getAll() {
/*新增用户*/ /*新增角色*/
const addData = reactive({ const addData = reactive({
// id:'', // id:'',
// roleName:'', // roleName:'',
@ -161,8 +151,8 @@ const addData = reactive({
}) })
function showAddDioLog(){ function showAddDiaLog(){
AddDioLog.value = true; AddDiaLog.value = true;
} }
function addOk () { function addOk () {
@ -185,13 +175,13 @@ function addCancel () {
/*删除用户*/ /*删除用户*/
const deleteId = ref(0) const deleteId = ref(0)
function showDeleteDioLog(){ function showDeleteDiaLog(){
DeleteDioLog.value = true DeleteDiaLog.value = true
deleteId.value = row.id deleteId.value = row.id
} }
function deleteOk() { function deleteOk() {
DeleteDioLog.value = false; DeleteDiaLog.value = false;
console.log(deleteId.value) console.log(deleteId.value)
requests.roleDelete(deleteId.value, token).then((res) => { requests.roleDelete(deleteId.value, token).then((res) => {
console.log("deleteResult:", res) console.log("deleteResult:", res)
@ -204,13 +194,13 @@ function deleteOk() {
} }
function deleteCancel(){ function deleteCancel(){
DeleteDioLog.value = false; DeleteDiaLog.value = false;
message.info('取消删除') message.info('取消删除')
} }
/*修改用户*/ /*修改用户*/
function showEditDioLog(){ function showEditDiaLog(){
editDialog.value = true editDiaLog.value = true
updateData.id = row.id updateData.id = row.id
updateData.name = row.roleName updateData.name = row.roleName
updateData.displayName = row.displayName updateData.displayName = row.displayName
@ -219,7 +209,7 @@ function showEditDioLog(){
function editOk(){ function editOk(){
loadingTable.value = true loadingTable.value = true
editDialog.value = false; editDiaLog.value = false;
requests.roleEdit(updateData,token).then((res)=>{ requests.roleEdit(updateData,token).then((res)=>{
console.log("editResult:",res) console.log("editResult:",res)
console.log("updateData:",updateData) console.log("updateData:",updateData)
@ -237,7 +227,7 @@ function editOk(){
} }
function editCancel(){ function editCancel(){
editDialog.value = false; editDiaLog.value = false;
} }
@ -451,17 +441,10 @@ const handleTableChange = (pag, filters, sorter) => {
} }
.query-button { .query-button {
background-color: dodgerblue;
color:white;
margin-left: 4vw; margin-left: 4vw;
margin-right: 1vw; margin-right: 1vw;
} }
.add-button {
background-color: limegreen;
color: white;
}
.table { .table {
width: 100%; width: 100%;
height: auto; height: auto;

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

@ -15,8 +15,7 @@
</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>
<a-button class="add-button" @click="showAddDiaLog"><PlusOutlined />新增用户</a-button> <a-button class="add-button" type="primary" @click="showAddDiaLog"><PlusOutlined />新增用户</a-button>
<a-button class="delete-button" @click="showDeleteDiaLog"><DeleteOutlined />删除用户</a-button>
</div> </div>
</div> </div>
@ -53,10 +52,10 @@
<div style=""> <div style="">
<div style="margin-bottom: 10px"> <div style="margin-bottom: 10px">
<span> <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>
<span style="margin-left: 20px"> <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> </span>
</div> </div>
<div style="margin-bottom: 10px"> <div style="margin-bottom: 10px">
@ -74,9 +73,9 @@
</a-select> </a-select>
</span> </span>
</div> </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.email" 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.address" 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.description" style="width: 435px" type="textarea" /></div>
</div> </div>
</a-modal> </a-modal>
@ -91,8 +90,18 @@
@change="handleTableChange" @change="handleTableChange"
:rowClassName="setRowClassName" :rowClassName="setRowClassName"
> >
<template #bodyCell="{ column, record, index, text }"> <template #bodyCell="{ column, record, index }">
<template v-if="column.dataIndex === 'id'">{{ text }}</template> <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'"> <template v-else-if="column.dataIndex === 'user_action'">
<span style="margin-left: 10px"> <span style="margin-left: 10px">
<a-button class="button2" size="small" type="text" @click="showEditDiaLog(record, index)"><EditOutlined />修改</a-button> <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() { function getAll() {
requests.userAllCurrent(AllUser,token).then((res)=>{ requests.userAllCurrent(AllUser,token).then((res)=>{
console.log(res) console.log(res)
// states.data = res.data.data // states.data = res.data.data
@ -255,7 +250,7 @@ const showAddDiaLog = () => {
addData.sex = 1; addData.sex = 1;
addData.age = ''; addData.age = '';
}; };
/*
function addOk () { function addOk () {
if (sex.value === '男') { if (sex.value === '男') {
addData.sex = 1 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: '用户状态', title: '用户状态',
dataIndex: 'enabled', dataIndex: 'user_state',
key: 'enabled', key: 'enabled',
}, },
{ {
title: '更新时间', title: '更新时间',
key: 'updatedAt', key: 'updatedAt',
dataIndex: 'updatedAt' dataIndex: 'updatedAt'
} },
{
title: '操作',
key:'user_action',
dataIndex: 'user_action',
},
]; ];
const rowSelection = { const rowSelection = {
@ -562,15 +514,9 @@ console.log(dataSource)
} }
.query-button { .query-button {
background-color: dodgerblue;
color:white;
margin-left: 4vw; margin-left: 4vw;
margin-right: 1vw; margin-right: 1vw;
}
.add-button {
background-color: limegreen;
color: white;
} }
.delete-button { .delete-button {