WxxyDeveloper/Jsl-OA-Web-Re
9
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

我管理的删除项目完成

Browse Source
This commit is contained in:
“XCYH” 2024-04-19 18:23:11 +08:00
parent a4f4b16881
commit f9232ae6d0
8 changed files with 281 additions and 165 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
auto-imports.d.ts vendored
View File

@ -2,4 +2,5 @@
export {} export {}
declare global { declare global {
const ElMessage: typeof import('element-plus/es')['ElMessage'] const ElMessage: typeof import('element-plus/es')['ElMessage']
const ElMessageBox: typeof import('element-plus/es')['ElMessageBox']
} }

84
src/api/manage.js
View File

@ -50,16 +50,18 @@ export const getproject = (projectId, token) => {
/** /**
* 获取我管理页面的项目列表(接口有问题) * 获取我管理页面的项目列表(接口有问题)
* *
* @param pageSize 页面大小
* @param token 访问令牌 * @param token 访问令牌
* @returns {Promise<AxiosResponse<any>> | *} * @returns {Promise<AxiosResponse<any>> | *}
*/ */
export const getManageList = (token) => { export const getManageList = (params ,token ,) => {
const {pageSize ,is ,page} = params;
return axios({ return axios({
url: api +"/project/child/get" , url: `${api}/project/child/get?is=${is}&pageSize=${pageSize}&page=${page}` ,
method: "get", method: "get",
headers: { headers: {
'Authorization': 'Bearer ' + token, 'Authorization': 'Bearer ' + token,
'Timestamp': getCurrentTimestamp() 'Timestamp': getCurrentTimestamp()
@ -72,25 +74,7 @@ export const getManageList = (token) => {
// 我管理的所有接口 // 我管理的所有接口
/**
* 获取我管理的页面的搜索
*
* @param projectId 项目id
* @param token 访问令牌
* @returns {Promise<AxiosResponse<any>> | *}
*/
export const getManageListById = (projectId, token) => {
return axios({
url: api +'/project/get/' + projectId,
method: "get",
headers: {
'Authorization': 'Bearer ' + token,
'Timestamp': getCurrentTimestamp()
}
})
}
/** /**
* 获取我管理的页面的项目列表 * 获取我管理的页面的项目列表
* *
@ -116,24 +100,6 @@ export const getManageProjectList = (token) => {
/**
* 获取我管理的页面的子模块项目列表
*
* @param token 访问令牌
* @returns {Promise<AxiosResponse<any>> | *}
*/
export const getProjectList = (token) => {
return axios({
url: api +"/project/module/get" ,
method: "get",
headers: {
'Authorization': 'Bearer ' + token,
'Timestamp': getCurrentTimestamp()
}
})
}
/** /**
* 获取我管理的页面的子系统项目列表 * 获取我管理的页面的子系统项目列表
* @param projectId 项目id * @param projectId 项目id
@ -188,6 +154,46 @@ export const getProjectModDetail = (id,token) => {
}) })
} }
//功能接口
//删除项目
/**
* 选择项目删除
* @param id 项目id
* @param token 访问令牌
* @returns {Promise<AxiosResponse<any>> | *}
*/
export const deleteProject = (id,token) => {
return axios({
url: api +"/project/delete?id=" + id ,
method: "delete",
headers: {
'Authorization': 'Bearer ' + token,
'Timestamp': getCurrentTimestamp()
}
})
}
// 添加项目接口
/**
* 添加项目
* @param data 要添加的项目数据
* @returns {Promise<AxiosResponse<any>>} 返回API响应
*/
export const addProject = (data ,token) => {
return axios({
url: api + "/project/add", // 替换为实际的项目API端点
method: "post", // 使用POST方法添加项目
headers: {
'Authorization': 'Bearer ' + token,
'Timestamp': getCurrentTimestamp()
},
data: data // 将要添加的项目数据传递给API
});
}

2
src/utils/validate.ts
View File

@ -15,7 +15,7 @@ export function isExternal(path) {
* @returns {Boolean} * @returns {Boolean}
*/ */
export function validUsername(str) { export function validUsername(str) {
const valid_map = ['admin', 'editor', 'teacher_user', 'teacher_demo', 'demo', 'xiao_lfeng', 'yangna']; const valid_map = ['console_user', 'developer_user', 'principal_user'];
return valid_map.indexOf(str.trim()) >= 0; return valid_map.indexOf(str.trim()) >= 0;
} }

4
src/views/login/index.vue
View File

@ -113,8 +113,8 @@ export default defineComponent({
}; };
return { return {
loginForm: { loginForm: {
username: 'teacher_user', username: 'principal_user',
password: '123456' password: 'jsl_nbxt'
}, },
loginRules: { loginRules: {
username: [{ required: true, trigger: 'blur', validator: validateUsername }], username: [{ required: true, trigger: 'blur', validator: validateUsername }],

57
src/views/personal/project/childSystem/manage.vue
View File

@ -28,17 +28,17 @@
<template #default="{row}">{{ row.id }}</template> <template #default="{row}">{{ row.id }}</template>
</el-table-column> </el-table-column>
<el-table-column property="name" label="子系统名称" width="120" /> <el-table-column property="name" label="子系统名称" width="120" />
<el-table-column property="cycle" label="工作量" show-overflow-tooltip /> <el-table-column property="workLoad" label="工作量" show-overflow-tooltip />
<el-table-column property="workLoad" label="周期" /> <el-table-column property="cycle" label="周期" />
<el-table-column property="address" label="负责人" /> <el-table-column property="principalName" label="负责人" />
<el-table-column property="isFinish" label="状态" /> <el-table-column property="status" label="状态" />
<el-table-column property="description" label="子系统简介" > <el-table-column property="description" label="子系统简介" >
<template #default="{row}"> <template #default="{row}">
<span >{{ row.description.description }}</span> <span >{{ row.description.description }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column property="createdAt" label="截止时间" /> <el-table-column property="deadLine" label="截止时间" />
<el-table-column property="address" label="操作" #default="{row}"> <el-table-column property="address" label="操作" #default="{row}">
<el-button link style="color:deepskyblue" @click="toChildModel(row.id)">查看详情</el-button> <el-button link style="color:deepskyblue" @click="toChildModel(row.id)">查看详情</el-button>
</el-table-column> </el-table-column>
@ -64,21 +64,22 @@ import { getProjectSysList } from '@/api/manage';
const router = useRouter(); const router = useRouter();
const toChildModel = (id) => { const toChildModel = (id) => {
router.push({ name: 'ChildModManage' , query: { id: id } }) router.push({ name: 'ChildModManage' , query: { id: 3 } })
}; };
const input = ref(''); const input = ref('');
interface User { interface User {
id: number cycle:number
principalId: number deadLine:string
projectId: number description: {description :string}
name: string id:number
cycle: number isDelete:number
workLoad: number name:string
description: { description: string } principalName:string
isDelete: number projectId:number
createdAt: string status:string
workLoad:number
} }
const multipleTableRef = ref<InstanceType<typeof ElTable>>(); const multipleTableRef = ref<InstanceType<typeof ElTable>>();
@ -108,27 +109,29 @@ const initialTableData = ref<User[]>([]);
const description = JSON.parse(data.description); const description = JSON.parse(data.description);
return{ return{
id: data.id, cycle:data.cycle,
cycle: data.cycle, deadLine:data.deadLine,
description: description, description:description,
isDelete: data.isDelete, id:data.id,
isDelete:data.isDelete,
name: data.name, name:data.name,
principalId: data.principalId, principalName:data.principalName,
projectId: data.projectId, projectId:data.projectId,
workLoad: data.workLoad, status:data.status,
createdAt: data.createdAt workLoad:data.workLoad,
} }
} }
const fetchData = () => { const fetchData = () => {
const project = getProjectSysList(projectId,getToken());
const project = getProjectSysList( projectId ? Number(projectId) - 1 : 0,getToken());
//处理数据 //处理数据
project.then(res=>{ project.then(res=>{
const data = res.data.data const data = res.data.data
console.log(data);
// console.log(data)
if(data){ if(data){
const newData = data.map(item=>parseData(item)) const newData = data.map(item=>parseData(item))
console.log(newData); console.log(newData);

10
src/views/personal/project/childSystem/participate.vue
View File

@ -30,7 +30,7 @@
<el-table-column property="name" label="子系统名称" width="120" /> <el-table-column property="name" label="子系统名称" width="120" />
<el-table-column property="workLoad" label="工作量" show-overflow-tooltip /> <el-table-column property="workLoad" label="工作量" show-overflow-tooltip />
<el-table-column property="cycle" label="周期" /> <el-table-column property="cycle" label="周期" />
<el-table-column property="principalUser" label="负责人" /> <el-table-column property="principalName" label="负责人" />
<el-table-column property="status" label="状态" /> <el-table-column property="status" label="状态" />
<el-table-column property="description" label="子系统简介"> <el-table-column property="description" label="子系统简介">
<template #default="{ row }"> <template #default="{ row }">
@ -86,7 +86,7 @@ interface User {
projectId: number projectId: number
workLoad: number workLoad: number
status: string status: string
principalUser:string principalName:string
} }
const multipleTableRef = ref<InstanceType<typeof ElTable>>(); const multipleTableRef = ref<InstanceType<typeof ElTable>>();
@ -108,7 +108,7 @@ const tableData = ref<User[]>([
projectId: 1, projectId: 1,
workLoad: 1, workLoad: 1,
status: '待定', status: '待定',
principalUser: '等数据ing' principalName: '测试数据'
} }
]); ]);
const initialTableData = ref<User[]>([]); const initialTableData = ref<User[]>([]);
@ -129,8 +129,8 @@ const parseData = (data) => {
principalId: data.principalId, principalId: data.principalId,
projectId: data.projectId, projectId: data.projectId,
workLoad: data.workLoad, workLoad: data.workLoad,
status:"待定", status:data.status,
principalUser:"等数据ing" principalName:data.principalName
} }
} }

27
src/views/personal/project/childmodel/manage.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div style=" width:100%"> <div style=" width:100%">
<el-card style="max-width: 100vw;margin: 1.5vw;"> <el-card style="max-width: 100vw;margin: 1.5vw;">
<template #header><strong>子系统{{ id }}</strong></template> <template #header><strong>子系统{{ sysId }}</strong></template>
<div style="display:flex;flex-direction:row;justify-content: space-around "> <div style="display:flex;flex-direction:row;justify-content: space-around ">
<div> <div>
名称 名称
@ -22,7 +22,7 @@
<el-button text type=''>子模块列表</el-button> <el-button text type=''>子模块列表</el-button>
<div> <div>
<el-button type="primary" style="width:80px">新增</el-button> <el-button type="primary" style="width:80px">新增</el-button>
<el-button style="width:80px ;background-color: #bd3124;color: azure;">删除</el-button>
</div> </div>
</div> </div>
<el-table ref="multipleTableRef" :data="tableData" style="max-width: 100vw;" <el-table ref="multipleTableRef" :data="tableData" style="max-width: 100vw;"
@ -32,14 +32,14 @@
<template #default="{row}">{{row.id }}</template> <template #default="{row}">{{row.id }}</template>
</el-table-column> </el-table-column>
<el-table-column property="name" label="子模块名称" width="120" /> <el-table-column property="name" label="子模块名称" width="120" />
<el-table-column property="address" label="工作量" show-overflow-tooltip /> <el-table-column property="workLoad" label="工作量" show-overflow-tooltip />
<el-table-column property="address" label="周期" /> <el-table-column property="cycle" label="周期" />
<el-table-column property="principalUser" label="负责人" /> <el-table-column property="principalUser" label="负责人" />
<el-table-column property="address" label="状态" /> <el-table-column property="status" label="状态" />
<el-table-column property="address" label="子模块简介" #default="{row}" > <el-table-column property="description" label="子模块简介" #default="{row}" >
<span>{{row.description.description}}</span> <span>{{row.description.description}}</span>
</el-table-column> </el-table-column>
<el-table-column property="address" label="截止时间" /> <el-table-column property="deadLine" label="截止时间" />
<el-table-column property="address" label="操作" #default="{row}"> <el-table-column property="address" label="操作" #default="{row}">
<el-button link style="color:deepskyblue" @click="toDetail(row.id)">查看详情</el-button> <el-button link style="color:deepskyblue" @click="toDetail(row.id)">查看详情</el-button>
</el-table-column> </el-table-column>
@ -62,6 +62,8 @@ import { getToken } from '@/utils/auth';
const router = useRouter(); const router = useRouter();
// 路由跳转 // 路由跳转
const toDetail = (id) => { const toDetail = (id) => {
router.push({ name: 'ManageDetail' ,query: { id: id } }); // 跳转到子系统详情页面 router.push({ name: 'ManageDetail' ,query: { id: id } }); // 跳转到子系统详情页面
@ -74,7 +76,8 @@ interface User {
principalUser:string principalUser:string
workLoad: number workLoad: number
description: { description: string } description: { description: string }
status: boolean status: string
deadLine: string
} }
const multipleTableRef = ref<InstanceType<typeof ElTable>>(); const multipleTableRef = ref<InstanceType<typeof ElTable>>();
@ -96,7 +99,7 @@ const tableData = ref<User[]>([
//获取参数 //获取参数
const route = useRoute(); const route = useRoute();
const id = route.query.id; const sysId = route.query.id;
//处理接口方法 //处理接口方法
@ -111,7 +114,9 @@ const parseData = (data) => {
principalUser: data.principalUser, principalUser: data.principalUser,
workLoad: data.workLoad, workLoad: data.workLoad,
description: description, description: description,
status: data.status status: data.status,
deadLine: data.deadLine,
} }
} }
@ -119,7 +124,7 @@ const parseData = (data) => {
//接口处理 //接口处理
const fetchData = ()=>{ const fetchData = ()=>{
//请求数据 //请求数据
const project = getProjectModList(3,getToken()); const project = getProjectModList(sysId,getToken());
console.log(project); console.log(project);
//处理数据 //处理数据
project.then(res=>{ project.then(res=>{

257
src/views/personal/project/manage.vue
View File

@ -12,7 +12,7 @@
<el-input v-model="input2" style="width: 240px;margin-left:0.5vw" placeholder="请输入" /> <el-input v-model="input2" style="width: 240px;margin-left:0.5vw" placeholder="请输入" />
</div> </div>
<div> <div>
<el-button type="primary" style="width:80px" @click="search">查询</el-button> <el-button type="primary" style="width:80px">查询</el-button>
<el-button style="width:80px">重置</el-button> <el-button style="width:80px">重置</el-button>
</div> </div>
</div> </div>
@ -23,31 +23,40 @@
<div style="display:flex;flex-direction: row;justify-content: space-between"> <div style="display:flex;flex-direction: row;justify-content: space-between">
<el-button text type=''>项目列表</el-button> <el-button text type=''>项目列表</el-button>
<div style="text-align: right;"> <div style="text-align: right;">
<el-button type="primary" style="width:80px">新增</el-button> <el-button type="primary" style="width:80px" >编辑</el-button>
<el-button style="width:80px ;background-color: #bd3124;color: azure;">删除</el-button> <el-button style="width:80px ;background-color: #bd3124;color: azure;"
@click="handleDeleteProjects">删除</el-button>
</div> </div>
</div> </div>
<el-table ref="multipleTableRef" :data="tableData" style="max-width: 100vw;" <el-table ref="multipleTableRef" :data="tableData" style="max-width: 100vw;"
@selection-change="handleSelectionChange"> @selection-change="handleSelectionChange">
<!-- <el-table-column type="selection" width="55" />--> <el-table-column type="selection" width="55" />
<el-table-column label="序号" width="120"> <el-table-column label="序号" width="120">
<template v-slot="{ $index }">{{ $index + 1 }}</template> <template #default="{ row }">{{ row.id }}</template>
</el-table-column> </el-table-column>
<el-table-column property="name" label="项目名称" width="120" /> <el-table-column property="name" label="项目名称" width="120" />
<el-table-column property="workLoad" label="工作量" show-overflow-tooltip /> <el-table-column property="workLoad" label="工作量" show-overflow-tooltip />
<el-table-column property="cycle" label="周期" /> <el-table-column property="cycle" label="周期" />
<el-table-column property="principalUser" label="负责人" /> <el-table-column property="principalUser" label="负责人" />
<el-table-column property="isFinish" label="状态" /> <el-table-column property="status" label="状态" />
<el-table-column property="isFinish" label="文档（点击下载）"> <el-table-column property="isFinish" label="文档（点击下载）">
<el-button link style="color:deepskyblue">接口文档</el-button> <template #default="{ row }">
<el-button link style="color:deepskyblue">需求文档</el-button> <template v-if="row.files && row.files.URI">
<a :href="row.files.URI" target="_blank" style="color: deepskyblue">
下载文档
</a>
</template>
<template v-else>
无
</template>
</template>
</el-table-column> </el-table-column>
<el-table-column property="tags" label="标签"> <el-table-column property="tags" label="标签">
<template v-slot="{ row }"> <template #default="{ row }">
<span v-for="(tag, index) in row.tags" :key="index">{{ tag.toString() }} </span> <el-tag v-for="tag in row.tags" :key="tag">{{ tag.toString() }}</el-tag>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column property="description" label="项目简介"> <el-table-column property="description" label="项目简介">
@ -55,14 +64,16 @@
<span v-for="(des, index) in row.description" :key="index">{{ des.toString() }} </span> <span v-for="(des, index) in row.description" :key="index">{{ des.toString() }} </span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column property="dateline" label="截止时间" /> <el-table-column property="deadLine" label="截止时间" />
<el-table-column property="name" label="操作" #default="{row}"> <el-table-column property="name" label="操作" #default="{ row }">
<el-button link style="color:deepskyblue" @click="toChildSystem(row.id)">查看详情</el-button> <el-button link style="color:deepskyblue" @click="toChildSystem(row.id)">查看详情</el-button>
</el-table-column> </el-table-column>
</el-table> </el-table>
<el-pagination larger background layout="prev, pager, next" :total="40" class="mt-4" <el-pagination larger background layout="prev, pager, next" @current-change="handleCurrentChange"
:current-page="currentPage" :page-size="pageSize" :total="total"
style="display: flex;flex-direction: row;justify-content: center;margin-top:5vh" /> style="display: flex;flex-direction: row;justify-content: center;margin-top:5vh" />
</el-card> </el-card>
<el-alert> <el-alert>
<router-view /> <router-view />
</el-alert> </el-alert>
@ -71,27 +82,33 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref, onMounted } from 'vue'; import { ref, watch } from 'vue';
import { ElTable } from 'element-plus'; import { ElTable, ElTableColumn, ElPagination, ElButton, ElInput, ElTag, ElMessageBox, ElMessage } from 'element-plus';
import { getManageListById } from '@/api/manage.js';
import { getToken } from '@/utils/auth'; import { getToken } from '@/utils/auth';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import { getManageList } from '@/api/manage.js'; import { getManageList, deleteProject } from '@/api/manage.js';
const router = useRouter(); const router = useRouter();
const pageSize = ref(5); // 每页显示的条数
const currentPage = ref(1); // 当前页数
const total = ref(10); // 总条数
// 路由跳转 // 路由跳转
const toChildSystem = (id) => { const toChildSystem = (id) => {
router.push({ name: 'ChildSysManage' ,query: { id: id } }); // 跳转到子系统详情页面 router.push({ name: 'ChildSysManage', query: { id: 2 } }); // 跳转到子系统详情页面
}; };
//页面加载直接获取数据 //响应式
onMounted(() => { const tableData = ref<User[]>([]);
getAllProject();
});
const selectedIds = ref([]); // 存储被选中的项目的ID
@ -99,21 +116,16 @@ onMounted(() => {
interface User { interface User {
id: number id: number
total: number
cycle: number cycle: number
name: string name: string
description: Array<any> description: string
workLoad: number workLoad: number
status: string status: string
deadline: string deadLine: string
tags: Array<any> tags: Array<any>
files: Array<any> files: Array<any>
isDelete: boolean principalUser: string
principal_id: number
updatedAt: string
createdAt: string
completeTime: string
beginTime: string
} }
@ -128,49 +140,58 @@ const input1 = ref('');
const input2 = ref(''); const input2 = ref('');
const multipleTableRef = ref<InstanceType<typeof ElTable>>(); // const multipleTableRef = ref<InstanceType<typeof ElTable>>();
const multipleSelection = ref<User[]>([ // const multipleSelection = ref<User[]>([
]); // ]);
const handleSelectionChange = (val: User[]) => { // const handleSelectionChange = (val: User[]) => {
multipleSelection.value = val; // multipleSelection.value = val;
}; // };
// 在 Vue 组件中添加 parseData 函数 // 在 Vue 组件中添加 parseData 函数
const parseData = (data) => { const parseData = (data) => {
const description = JSON.parse(data.description);
const files = JSON.parse(data.files); const files = JSON.parse(data.files);
const tags = JSON.parse(data.tags); const tags = JSON.parse(data.tags);
return { return {
id: data.id, id: data.id,
total: 20,
cycle: data.cycle, cycle: data.cycle,
name: data.name, name: data.name,
description: description, description: data.description,
workLoad: data.workLoad, workLoad: data.workLoad,
status: data.status, status: data.status,
deadline: data.deadline, deadLine: data.deadLine,
tags: tags, tags: tags,
files: files, files: files,
isDelete: data.isDelete, principalUser: data.principalUser
principal_id: data.principalId,
updatedAt: data.updatedAt,
createdAt: data.createdAt,
completeTime: data.completeTime,
beginTime: data.beginTime
}; };
}; };
// 监听 currentPage 的变化，当 currentPage 变化时请求对应页的数据
watch(currentPage, () => {
fetchData();
});
//获取所有项目 //获取所有项目
const getAllProject = () => { const fetchData = () => {
const project = getManageList(getToken());
const params = {
page: currentPage.value, // 当前页码
pageSize: pageSize.value, // 每页显示的条数
is: 1
};
const project = getManageList(params, getToken());
// 处理接口数据 // 处理接口数据
project.then(res => { project.then(res => {
const data = res.data.data; const data = res.data.data.list;
console.log(data); console.log(data);
if (data) { if (data) {
const newData = data.map(item => parseData(item)); // 使用先前定义的函数处理数据 const newData = data.map(item => parseData(item)); // 使用先前定义的函数处理数据
@ -189,44 +210,68 @@ const getAllProject = () => {
}); });
} }
fetchData();
// 查询
const search = () => {
//获取数据
const project = getManageListById(input1.value, getToken());
// 处理接口数据 //翻页处理
project.then(res => { // 翻页事件处理函数
const handleCurrentChange = (page) => {
currentPage.value = page; // 更新 currentPage 的值
};
const data = res.data.data;
console.log(data);
if (data) {
const newData = parseData(data); // 使用先前定义的函数处理数据
// 使用 tableData.value 进行添加
tableData.value.push(newData); // 删除项目
console.log(tableData.value); // 这个方法将在表格的选择项发生变化时被调用
const handleSelectionChange = (selection) => {
selectedIds.value = selection.map(item => item.id); // 更新被选择的项目的ID数组
};
} else {
console.log("没有数据");
} // 弹窗设置
const confirmDelete = (selectedIds) => {
const message = `确定要删除ID为${selectedIds}的项目吗？`;
ElMessageBox.confirm(
message, {
confirmButtonText: '确认',
cancelButtonText: '取消',
// type: 'warning',
center: true,
}).then(async () => {
const token = getToken();
for (let id of selectedIds) {
await deleteProject(id, token)
.then(() => {
console.log("项目删除成功", id);
fetchData();
ElMessage.success('项目删除成功');
}) })
.catch(err => { .catch(error => {
console.log(err); console.error("删除失败", error);
ElMessage.error('删除操作失败');
}); });
}
}).catch(() => {
ElMessage.info('删除操作已取消');
});
};
} const handleDeleteProjects = async () => {
if (selectedIds.value.length === 0) {
ElMessage({
message: '请选择一个进行删除',
type: 'warning',
duration: 3000
});
return;
}
confirmDelete(selectedIds.value);
};
//响应式 //编辑功能
const tableData = ref<User[]>([
//测试用例
]);
@ -259,4 +304,60 @@ const tableData = ref<User[]>([
.my-autocomplete li .highlighted .addr { .my-autocomplete li .highlighted .addr {
color: #ddd; color: #ddd;
} }
/* 自定义弹窗样式 */
.el-message-box {
background-color: #fff;
/* 设置背景颜色 */
border: 2px solid #eee;
/* 设置边框样式 */
border-radius: 8px;
/* 设置边框圆角 */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
/* 添加阴影效果 */
}
.el-message-box__message {
color: #333;
/* 设置文本颜色 */
}
.el-message-box__btns {
display: flex;
justify-content: space-around;
/* 设置按钮水平居中 */
}
.el-message-box {
display: flex;
flex-direction: column;
justify-content: center;
/* 垂直居中 */
align-items: center;
/* 水平居中 */
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.el-message-box__message {
margin-bottom: 20px;
/* 设置文字与按钮之间的距离 */
}
.el-message-box__btns {
display: flex;
justify-content: center;
/* 水平居中 */
gap: 10px;
/* 设置按钮间隔 */
}
.el-message-box__close {
display: none;
/* 隐藏默认关闭按钮 */
}
</style> </style>