|
|
@@ -1,111 +1,110 @@
|
|
|
<template>
|
|
|
- <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">
|
|
|
- <el-upload class="upload-dom" :action="action" :accept="accept" :headers="getTokenHeader()" :data="upData" :show-file-list="false" :on-success="uploadFinish" :on-error="uploadError" :before-upload="beforeUpload">
|
|
|
+ <HcCard actionSize="lg" scrollbar>
|
|
|
+ <HcCardItem ui="hac-card-item mt-4" style="height:160px">
|
|
|
+ <div class="user-avatar-box">
|
|
|
+ <div class="user-avatar" v-loading="avatarLoading">
|
|
|
+ <img :src="userInfo['avatar'] || avatarPng" alt="" />
|
|
|
+ <div class="user-avatar-upload">
|
|
|
+ <el-upload class="upload-dom" :action="action" :accept="accept" :headers="getTokenHeader()" :data="upData" :show-file-list="false" :on-success="uploadFinish" :on-error="uploadError" :before-upload="beforeUpload">
|
|
|
+
|
|
|
+ <HcIcon name="camera" fill/>
|
|
|
+
|
|
|
+ </el-upload>
|
|
|
|
|
|
- <HcIcon name="camera" fill/>
|
|
|
-
|
|
|
- </el-upload>
|
|
|
-
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <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">
|
|
|
+ <el-button type="primary" size="large" @click="updatePassword" v-if="!updatePasswordshow">
|
|
|
+ <span>修改信息</span>
|
|
|
+ </el-button>
|
|
|
+ <el-button type="primary" size="large" @click="submit">
|
|
|
+ <span>保存</span>
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ </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-width="auto">
|
|
|
+ <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.position" class=" block" placeholder="请选择" size="large" disabled>
|
|
|
+ <el-option
|
|
|
+ v-for="item in posotionoptions"
|
|
|
+ :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="" disabled/>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
|
|
|
</div>
|
|
|
- <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">
|
|
|
- <el-button type="primary" size="large" @click="updatePassword" v-if="!updatePasswordshow">
|
|
|
- <span>修改信息</span>
|
|
|
- </el-button>
|
|
|
- <el-button type="primary" size="large" @click="submit">
|
|
|
- <span>保存</span>
|
|
|
- </el-button>
|
|
|
- </div>
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- </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="" />
|
|
|
+ </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-width="auto"
|
|
|
+ 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-col>
|
|
|
|
|
|
-
|
|
|
- <el-col :span="12">
|
|
|
- <el-form-item label="密码">
|
|
|
- <el-input v-model="formUserModel.password" placeholder="" />
|
|
|
+ <el-form-item label="新的密码:" prop="newPassword" >
|
|
|
+ <el-input v-model="formUserModel.newPassword" placeholder="请输入新的密码" autocomplete="new-password"
|
|
|
+ show-password type="password"/>
|
|
|
</el-form-item>
|
|
|
- </el-col>
|
|
|
-
|
|
|
-
|
|
|
- </el-row>
|
|
|
- </el-form>
|
|
|
-
|
|
|
- </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>
|
|
|
+ <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>
|
|
|
+ </HcCard>
|
|
|
+
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
@@ -117,7 +116,7 @@ const useAppState = useAppStore()
|
|
|
|
|
|
//全局变量信息
|
|
|
const userInfo = ref(useAppState.getUserInfo);
|
|
|
-
|
|
|
+const basicFormEdit = ref(false)
|
|
|
|
|
|
//上传组件参数
|
|
|
const action = '/api/blade-resource/oss/endpoint/put-file';
|
|
|
@@ -180,6 +179,9 @@ const updatePassword=()=>{
|
|
|
const submit=()=>{
|
|
|
updatePasswordshow.value=false
|
|
|
}
|
|
|
+const posotionoptions=ref([
|
|
|
+ {label:'总经理',value:'1'}
|
|
|
+])
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
@@ -190,13 +192,13 @@ const submit=()=>{
|
|
|
// padding: 24px;
|
|
|
.user-avatar {
|
|
|
position: relative;
|
|
|
- height: 80px;
|
|
|
- width: 80px;
|
|
|
+ height: 100px;
|
|
|
+ width: 100px;
|
|
|
border-radius: 50%;
|
|
|
background: #d8d8d8;
|
|
|
// 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;
|
|
|
+ // 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 {
|
|
|
display: block;
|
|
|
object-fit: cover;
|
|
|
@@ -247,10 +249,10 @@ const submit=()=>{
|
|
|
|
|
|
}
|
|
|
.half-height{
|
|
|
- height: 38%;
|
|
|
+ height: 50%;
|
|
|
}
|
|
|
.all-height{
|
|
|
- height: 78%;
|
|
|
+ height: 100%;
|
|
|
}
|
|
|
</style>
|
|
|
|
