|
|
@@ -1,7 +1,6 @@
|
|
|
<template>
|
|
|
- <HcCard style="height:20%">
|
|
|
- <div class="top-box">
|
|
|
- <div class="user-avatar-box">
|
|
|
+ <HcCardItem ui="hac-card-item mt-4" style="height:20%">
|
|
|
+ <div class="user-avatar-box">
|
|
|
<div class="user-avatar" v-loading="avatarLoading">
|
|
|
<img :src="userInfo['avatar'] || avatarPng" alt="" crossOrigin="anonymous"/>
|
|
|
<div class="user-avatar-upload">
|
|
|
@@ -17,83 +16,96 @@
|
|
|
<div class="user-name truncate">{{ userInfo['real_name'] || '游客' }}
|
|
|
<div class="el-upload__tip" style="margin-top: 27px;">支持.jpg 、png格式</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="btn_box">
|
|
|
+ </div>
|
|
|
+ <div class="btn_box">
|
|
|
<el-button type="primary" size="large" @click="updatePassword" v-if="!updatePasswordshow">
|
|
|
- <span>修改密码</span>
|
|
|
+ <span>修改信息</span>
|
|
|
</el-button>
|
|
|
<el-button type="primary" size="large" @click="submit">
|
|
|
- <span>提交</span>
|
|
|
+ <span>保存</span>
|
|
|
</el-button>
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
|
|
|
- </div>
|
|
|
- </HcCard>
|
|
|
- <HcCard style="height:77%;margin-top:1%">
|
|
|
- <div>
|
|
|
- <el-form ref="formUserRef" :model="formUserModel" :rules="formUserRules" size="large" label-position="left" v-if="!updatePasswordshow">
|
|
|
- <el-row :gutter="20">
|
|
|
- <el-col :span="12">
|
|
|
- <el-form-item label="用户姓名">
|
|
|
- <el-input v-model="formUserModel.real_name" />
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="12">
|
|
|
- <el-form-item label="身份证号">
|
|
|
- <el-input v-model="formUserModel.idNumber" placeholder="" />
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="12">
|
|
|
- <el-form-item label="手机号码" :prop="basicFormEdit?'phone':''">
|
|
|
- <el-input v-model="formUserModel.phone" placeholder="请输入绑定手机" />
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="12">
|
|
|
- <el-form-item label="所属岗位">
|
|
|
- <el-select v-model="formUserModel.phone" class="m-2" placeholder="Select" size="large">
|
|
|
- <el-option
|
|
|
- v-for="item in options"
|
|
|
- :key="item.value"
|
|
|
- :label="item.label"
|
|
|
- :value="item.value"
|
|
|
- />
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="12">
|
|
|
- <el-form-item label="登录账号">
|
|
|
- <el-input v-model="formUserModel.account" placeholder="" />
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
-
|
|
|
-
|
|
|
- <el-col :span="12">
|
|
|
- <el-form-item label="密码">
|
|
|
- <el-input v-model="formUserModel.password" placeholder="" />
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
-
|
|
|
-
|
|
|
- </el-row>
|
|
|
+
|
|
|
+ </HcCardItem>
|
|
|
+ <HcCardItem ui="hac-card-item mt-4" :class="updatePasswordshow ? 'half-height' : 'all-height'">
|
|
|
+ <template #header>
|
|
|
+ <div class="hac-card-title">基础信息</div>
|
|
|
+ </template>
|
|
|
+ <div>
|
|
|
+ <el-form ref="formUserRef" :model="formUserModel" :rules="formUserRules" size="large" label-position="left" >
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="用户姓名">
|
|
|
+ <el-input v-model="formUserModel.real_name" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="身份证号">
|
|
|
+ <el-input v-model="formUserModel.idNumber" placeholder="" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="手机号码" :prop="basicFormEdit?'phone':''">
|
|
|
+ <el-input v-model="formUserModel.phone" placeholder="请输入绑定手机" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="所属岗位">
|
|
|
+ <el-select v-model="formUserModel.phone" class="m-2" placeholder="Select" size="large">
|
|
|
+ <el-option
|
|
|
+ v-for="item in options"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="登录账号">
|
|
|
+ <el-input v-model="formUserModel.account" placeholder="" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="密码">
|
|
|
+ <el-input v-model="formUserModel.password" placeholder="" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+
|
|
|
+ </el-row>
|
|
|
</el-form>
|
|
|
- <el-form ref="formUserRef" :model="formUserModel" :rules="formUserRules" label-position="left" v-else
|
|
|
- size="large" >
|
|
|
- <el-form-item label="原密码" prop="oldPassword" >
|
|
|
- <el-input v-model="formUserModel.newPassword" placeholder="请输入原密码" autocomplete="new-password"
|
|
|
- show-password type="password"/>
|
|
|
- </el-form-item>
|
|
|
-
|
|
|
- <el-form-item label="新的密码" prop="newPassword" >
|
|
|
- <el-input v-model="formUserModel.newPassword" placeholder="请输入新的密码" autocomplete="new-password"
|
|
|
- show-password type="password"/>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="确认新密码" prop="newPassword1" >
|
|
|
- <el-input v-model="formUserModel.newPassword1" placeholder="请输入确认新密码" autocomplete="new-password"
|
|
|
- show-password type="password"/>
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
- </div>
|
|
|
- </HcCard>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </HcCardItem>
|
|
|
+
|
|
|
+ <HcCardItem ui="hac-card-item mt-4" style="height:38%" v-if="updatePasswordshow">
|
|
|
+ <template #header>
|
|
|
+ <div class="hac-card-title">修改密码</div>
|
|
|
+ </template>
|
|
|
+ <div>
|
|
|
+ <el-form ref="formUserRef" :model="formUserModel" :rules="formUserRules" label-position="left"
|
|
|
+ size="large" >
|
|
|
+ <el-form-item label="原密码" prop="oldPassword" >
|
|
|
+ <el-input v-model="formUserModel.newPassword" placeholder="请输入原密码" autocomplete="new-password"
|
|
|
+ show-password type="password"/>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="新的密码" prop="newPassword" >
|
|
|
+ <el-input v-model="formUserModel.newPassword" placeholder="请输入新的密码" autocomplete="new-password"
|
|
|
+ show-password type="password"/>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="确认新密码" prop="newPassword1" >
|
|
|
+ <el-input v-model="formUserModel.newPassword1" placeholder="请输入确认新密码" autocomplete="new-password"
|
|
|
+ show-password type="password"/>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ </HcCardItem>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
@@ -175,14 +187,14 @@ const submit=()=>{
|
|
|
display: flex;
|
|
|
position: relative;
|
|
|
text-align: left;
|
|
|
- padding: 24px;
|
|
|
+ // padding: 24px;
|
|
|
.user-avatar {
|
|
|
position: relative;
|
|
|
- height: 100px;
|
|
|
- width: 100px;
|
|
|
+ height: 80px;
|
|
|
+ width: 80px;
|
|
|
border-radius: 50%;
|
|
|
background: #d8d8d8;
|
|
|
- margin: 24px 0 0;
|
|
|
+ // margin: 24px 0 0;
|
|
|
border: 2px solid #ffffff;
|
|
|
box-shadow: 7px 7px 8px 0 rgba(54,92,167,0.15), -7px -7px 8px 0 #ffffff, 4px 4px 8px 0 rgba(54,92,167,0.15), -4px -4px 8px 0 #ffffff;
|
|
|
img {
|
|
|
@@ -214,7 +226,7 @@ const submit=()=>{
|
|
|
}
|
|
|
.user-name {
|
|
|
position: relative;
|
|
|
- margin-top: 38px;
|
|
|
+ margin-top: 20px;
|
|
|
font-weight: bold;
|
|
|
color: #1a1a1a;
|
|
|
font-size: 28px;
|
|
|
@@ -223,13 +235,23 @@ const submit=()=>{
|
|
|
}
|
|
|
.top-box{
|
|
|
display: flex;
|
|
|
- position: relative;
|
|
|
- .btn_box{
|
|
|
+ // position: relative;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ }
|
|
|
+ .btn_box{
|
|
|
+ float: right;
|
|
|
position: absolute;
|
|
|
- right: 0;
|
|
|
- bottom: 0;
|
|
|
+ bottom: 10px;
|
|
|
+ right: 0px;
|
|
|
+
|
|
|
+ }
|
|
|
+ .half-height{
|
|
|
+ height: 38%;
|
|
|
+ }
|
|
|
+ .all-height{
|
|
|
+ height: 78%;
|
|
|
}
|
|
|
- }
|
|
|
</style>
|
|
|
|
|
|
<style lang="scss">
|
