优化个人用户

This commit is contained in:
龙运模 2024-09-07 16:43:09 +08:00
parent e10239f7c7
commit dc52b1eb65

View File

@ -1,13 +1,17 @@
<template> <template>
<el-dialog :title="titleMap[mode]" v-model="visible" :width="500" draggable destroy-on-close @closed="$emit('closed')"> <el-dialog :title="titleMap[mode]" v-model="visible" :width="500" draggable destroy-on-close @closed="$emit('closed')">
<el-form :model="form" :rules="rules" :disabled="mode=='show'" ref="dialogForm" label-width="100px" label-position="right"> <el-form class="form" :model="form" :rules="rules" :disabled="mode=='show'" ref="dialogForm" label-width="100px" label-position="right">
<el-form-item label="头像" prop="avatar"> <div class="cardBoxForm">
<div class="comBox">
<el-form-item label="上传头像" prop="avatar">
<ossImgUpload @parentParams="parentParams" :url="form.avatar" /> <ossImgUpload @parentParams="parentParams" :url="form.avatar" />
<div class="el-form-item-msg">请将图片拖到此处或点击上传PNGJPEG</div>
</el-form-item> </el-form-item>
<el-form-item label="登录账号" prop="login_name"> </div>
<el-input v-model="form.login_name" placeholder="请填写登录账号" :disabled="mode!='add'?true:false" clearable></el-input> </div>
<p class="el-form-item-msg" v-if="mode == 'edit'">账号信息用于登录系统不允许修改</p> <div class="cardBoxForm">
</el-form-item> <div class="title">用户信息</div>
<div class="comBox">
<el-form-item label="姓名/工号" required> <el-form-item label="姓名/工号" required>
<el-row :gutter="24" justify="space-between"> <el-row :gutter="24" justify="space-between">
<el-col :span="12"> <el-col :span="12">
@ -22,23 +26,34 @@
</el-col> </el-col>
</el-row> </el-row>
</el-form-item> </el-form-item>
<el-form-item label="登录账号" prop="login_name">
<el-input v-model="form.login_name" placeholder="请填写登录账号" :disabled="mode!='add'?true:false" clearable></el-input>
<p class="el-form-item-msg" v-if="mode == 'edit'">账号信息用于登录系统不允许修改</p>
</el-form-item>
<el-form-item label="登录密码" prop="password" v-if="mode == 'add'">
<el-input type="password" v-model="form.password" placeholder="请填写密码" clearable show-password></el-input>
</el-form-item>
<el-form-item label="联系电话" prop="mobile"> <el-form-item label="联系电话" prop="mobile">
<el-input v-model="form.mobile" placeholder="请填写联系电话" clearable></el-input> <el-input v-model="form.mobile" placeholder="请填写联系电话" clearable></el-input>
</el-form-item> </el-form-item>
<el-form-item label="电子邮件" prop="email"> <el-form-item label="电子邮件" prop="email">
<el-input v-model="form.email" placeholder="请填写电子邮件" clearable></el-input> <el-input v-model="form.email" placeholder="请填写电子邮件" clearable></el-input>
</el-form-item> </el-form-item>
<el-form-item label="登录密码" prop="password" v-if="mode == 'add'"> </div>
<el-input type="password" v-model="form.password" placeholder="请填写密码" clearable show-password></el-input> </div>
</el-form-item> <div class="cardBoxForm">
<el-form-item label="所属部门" prop="dept_id"> <div class="title">角色和部门</div>
<el-cascader v-model="form.dept_id" :options="depts" :props="deptsProps" placeholder="请选择部门" clearable style="width: 100%;"></el-cascader> <div class="comBox">
</el-form-item> <el-form-item label="分配角色" prop="role_ids">
<el-form-item label="所属角色" prop="role_ids">
<el-select v-model="form.role_ids" multiple filterable placeholder="请选择角色" style="width: 100%"> <el-select v-model="form.role_ids" multiple filterable placeholder="请选择角色" style="width: 100%">
<el-option v-for="item in groups" :key="item.id" :label="item.label" :value="item.id"/> <el-option v-for="item in groups" :key="item.id" :label="item.label" :value="item.id"/>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="所属部门" prop="dept_id">
<el-cascader v-model="form.dept_id" :options="depts" :props="deptsProps" placeholder="请选择部门" clearable style="width: 100%;"></el-cascader>
</el-form-item>
</div>
</div>
</el-form> </el-form>
<template #footer> <template #footer>
<el-button @click="visible=false" > </el-button> <el-button @click="visible=false" > </el-button>
@ -196,5 +211,17 @@
} }
</script> </script>
<style> <style lang="scss" scoped>
.form{
.cardBoxForm{
border-bottom: 1px solid #f7f7f7;
.title{
padding: 15px 0 8px 18px;
font-weight: bold;
}
}
.cardBoxForm:last-child{
border-bottom: 0;
}
}
</style> </style>