taoge_xiaodi/td_official
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style:修改用户弹窗样式

Browse Source
This commit is contained in:
shi
2025-09-05 17:28:00 +08:00
parent 78dd437746
commit db20b45f78
3 changed files with 60 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/views/system/user/comm/editInfo.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="p-2 editInfo">
<el-form label-position="top" ref="userFormRef" :model="form" :rules="rules" label-width="80px">
<el-form label-position="top" ref="userFormRef" :model="form" :rules="rules" label-width="80px" size="large">
<el-row>
<el-col :span="10">
<el-form-item label="用户昵称" prop="nickName">
@ -70,15 +70,15 @@
</el-col>
<el-col :span="24">
<el-form-item label="备注">
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
<el-input v-model="form.remark" type="textarea" :autosize="{ minRows: 3, maxRows: 3 }" placeholder="请输入内容"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
<!-- <div class="box_submit">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel()">取 消</el-button>
</div> -->
<div class="box_submit">
<el-button size="large" @click="cancel()">取 消</el-button>
<el-button size="large" type="primary" @click="submitForm">确 定</el-button>
</div>
</div>
</template>
@ -247,12 +247,12 @@ defineExpose({ open, getInfoForm });
</script>
<style lang="scss" scoped>
.editInfo {
position: relative;
height: 100%;
display: flex;
flex-direction: column;
.box_submit {
position: absolute;
right: 10px;
bottom: 10px;
align-self: flex-end;
display: flex;
gap: 10px;
}
}
</style>

35
src/views/system/user/comm/roleInfo.vue
View File

@ -11,7 +11,7 @@
</el-table>
</div>
</div>
<div class="title_detail" style="margin-top: 20px">
<div class="title_detail" style="margin-top: 10px">
<span>选择或修改当前角色信息</span>
<div style="margin-top: 10px" class="box_detail">
<!-- 项目列表选择区 -->
@ -34,7 +34,7 @@
</div>
<!-- 角色分配区 -->
<div class="post_list">
<span>关联项目角色分配</span>
<div class="list_title">关联项目角色分配</div>
<div v-if="selectedProjects.length === 0" class="no-selection">请从左侧选择项目进行角色分配</div>
<div v-for="(project, index) in selectedProjects" :key="project.id" class="project-role-container">
<div class="project-header">
@ -64,8 +64,8 @@
</div>
</div>
<div class="box_submit">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel()">取 消</el-button>
<el-button size="large" @click="cancel()">取 消</el-button>
<el-button size="large" type="primary" @click="submitForm">保存角色信息</el-button>
</div>
</div>
</template>
@ -328,10 +328,12 @@ defineExpose({ open });
<style lang="scss">
.roleInfo {
position: relative;
height: 100%;
padding-bottom: 60px;
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 12px;
.title_detail {
> span {
@ -359,7 +361,7 @@ defineExpose({ open });
.project_list {
width: 320px;
background-color: #fff;
border: 1px solid #eee;
.project-items {
margin-top: 10px;
@ -374,8 +376,7 @@ defineExpose({ open });
border: 1px solid #eee;
&:hover {
background-color: #f5f7fa;
border-color: #e4e7ed;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.project-item-content {
@ -403,7 +404,11 @@ defineExpose({ open });
.post_list {
flex: 1;
background-color: #fff;
border: 1px solid #eee;
.list_title {
margin-bottom: 10px;
}
.no-selection {
height: 100%;
@ -417,9 +422,9 @@ defineExpose({ open });
.project-role-container {
padding: 15px;
margin-bottom: 15px;
background-color: #f9f9f9;
// background-color: #f9f9f9;
border-radius: 4px;
border: 1px solid #f0f0f0;
border: 1px solid rgb(229 231 235);
.project-header {
display: flex;
@ -445,7 +450,9 @@ defineExpose({ open });
.role-assignment {
.role-group {
margin-bottom: 15px;
display: flex;
flex-direction: column;
margin-bottom: 10px;
.role-label {
display: inline-block;
@ -471,9 +478,7 @@ defineExpose({ open });
}
.box_submit {
position: absolute;
right: 20px;
bottom: 0px;
align-self: flex-end;
display: flex;
gap: 10px;
}

39
src/views/system/user/index.vue
View File

@ -154,11 +154,17 @@
</el-row>
<!-- 添加或修改用户配置对话框 -->
<el-dialog draggable ref="formDialogRef" v-model="dialog.visible" :title="dialog.title" width="1300px" append-to-body @close="closeDialog">
<el-dialog draggable ref="formDialogRef" style="background: rgb(249,250,251);" v-model="dialog.visible" :title="dialog.title" width="1300px" append-to-body @close="closeDialog">
<div class="boxDetial">
<div class="tab_info">
<span @click="onTab(1)" :class="{ active: type == 1 }">基本资料</span>
<span @click="onTab(2)" :class="{ active: type == 2 }">角色信息</span>
<div class="tab_item" @click="onTab(1)" :class="{ active: type == 1 }">
<Avatar style="width: 1em; height: 1em; margin-right: 8px" :style="{color: type == 1 ? '#1890ff' : '#000'}" />
<span>基本资料</span>
</div>
<div class="tab_item" @click="onTab(2)" :class="{ active: type == 2 }">
<Key style="width: 1em; height: 1em; margin-right: 8px" :style="{color: type == 2 ? '#1890ff' : '#000'}" />
<span>角色信息</span>
</div>
</div>
<div class="tab_content" v-show="type == 1">
<editInfo ref="editInfoRef" @close="dialog.visible = false" @submit="getList" @setDeptId="setDeptId"></editInfo>
@ -232,6 +238,7 @@ import ShuttleFrame from '../../project/projectRelevancy/component/ShuttleFrame.
import { listProject } from '@/api/project/project';
import editInfo from './comm/editInfo.vue';
import roleInfo from './comm/roleInfo.vue';
import { color } from 'echarts';
const router = useRouter();
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { sys_normal_disable, sys_user_sex } = toRefs<any>(proxy?.useDict('sys_normal_disable', 'sys_user_sex'));
@ -690,7 +697,7 @@ const uploadCert = async () => {
certDialog.value = false;
proxy?.$modal.msgSuccess('上传证书目录成功');
};
const onTab = (val) => {
const onTab = (val: number) => {
type.value = val;
if (val == 2) {
let obj = editInfoRef.value?.getInfoForm();
@ -706,21 +713,32 @@ const onTab = (val) => {
.boxDetial {
display: flex;
justify-content: space-between;
align-items: center;
align-items: start;
height: 680px;
gap: 20px;
.tab_info {
height: 100%;
height: 40%;
width: 200px;
background: #f0f2f5;
padding: 10px;
background: #fff;
padding: 30px 10px;
text-align: center;
display: flex;
flex-direction: column;
border-radius: 0.5rem;
font-size: 18px;
> span {
.tab_item {
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
margin-bottom: 10px;
padding: 5px 0;
cursor: pointer;
}
.tab_item:hover {
background-color: rgb(249, 250, 251);
}
.active {
color: #1890ff;
}
@ -729,7 +747,8 @@ const onTab = (val) => {
height: 100%;
width: calc(100% - 200px);
padding: 20px 10px;
background: #ccc;
background: #fff;
border-radius: 0.5rem;
}
}
</style>