<template>
|
<div class="sys-userCenter-container h100">
|
<el-row :gutter="8" style="width: 100%" class="h100">
|
<el-col :span="8" :xs="24" class="h100">
|
<el-card shadow="hover" class="h100">
|
<div class="account-center-avatarHolder">
|
<el-avatar
|
:size="100"
|
:src="userInfos.photo"
|
@click="openCropperDialog"
|
v-loading="state.avatarLoading"
|
element-loading-spinner="el-icon-Upload"
|
element-loading-background="rgba(0, 0, 0, 0.2)"
|
@mouseenter="mouseEnterAvatar"
|
@mouseleave="mouseLeaveAvatar"
|
/>
|
<div class="username">{{ userInfos.realName }}</div>
|
</div>
|
<div class="account-center-org" style="display: flex; flex-direction: column; align-items: center">
|
<div>
|
<p class="user-simple-info">
|
<!-- 用户名 -->
|
<el-icon size="17"><ele-User /></el-icon> <span>{{ userInfos?.User?.Name ?? '---' }}</span>
|
</p>
|
<!-- 公司名 -->
|
<!-- <p class="user-simple-info">
|
<el-icon size="17"><ele-Briefcase /></el-icon> <span>{{ userInfos.SoftWare?.Project?.Corpration?.Name ?? '---' }}</span>
|
</p> -->
|
<p class="user-simple-info">
|
<!-- 账户类型名 -->
|
<el-icon size="17"><ele-CreditCard /></el-icon> <span>{{ userInfos?.User?.LoginAccount?.LoginType?.Name ?? '---' }}</span>
|
</p>
|
</div>
|
</div>
|
</el-card>
|
</el-col>
|
|
<el-col :span="16" :xs="24" class="h100" v-loading="state.loading">
|
<el-card shadow="hover" class="h100">
|
<el-tabs>
|
<el-tab-pane label="基础信息">
|
<el-form :model="state.ruleFormBase" ref="ruleFormBaseRef" label-width="80px">
|
<el-row :gutter="35">
|
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
<el-form-item label="用户名">
|
<el-input :model-value="userInfos?.User?.Name" placeholder="用户名" />
|
</el-form-item>
|
</el-col>
|
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
<el-form-item label="管理类型">
|
<el-input :model-value="ADMIN_TYPE_MAP?.[userInfos.User.AdminType]" placeholder="昵称管理类型" />
|
</el-form-item>
|
</el-col>
|
<!-- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
<el-form-item label="所属公司">
|
<el-input :model-value="userInfos.SoftWare?.Project?.Corpration?.Name" placeholder="所属公司" />
|
</el-form-item>
|
</el-col> -->
|
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
<el-form-item label="角色">
|
<el-select class="w100" multiple :model-value="userInfos?.roles?.map((item) => item.ID)">
|
<el-option v-for="item in userInfos?.roles" :key="item.ID" :value="item.ID" :label="item.Name"></el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
<el-form-item label="账户名">
|
<el-input :model-value="userInfos?.User?.LoginAccount?.Identifier" placeholder="账户名" />
|
</el-form-item>
|
</el-col>
|
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
<el-form-item label="账户类型">
|
<el-input :model-value="userInfos?.User?.LoginAccount?.LoginType?.Name" placeholder="账户类型" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
</el-tab-pane>
|
|
<el-tab-pane label="修改密码">
|
<el-form ref="ruleFormPasswordRef" :model="state.ruleFormPassword" label-width="80px">
|
<el-form-item label="新密码" prop="passwordNew" :rules="[{ required: true, message: '新密码不能为空', trigger: 'blur' }]">
|
<el-input v-model="state.ruleFormPassword.passwordNew" :type="state.showPasswdNew ? 'text' : 'password'" autocomplete="off">
|
<template #suffix>
|
<i
|
class="iconfont el-input__icon login-content-password"
|
:class="state.showPasswdNew ? 'icon-yincangmima' : 'icon-xianshimima'"
|
@click="state.showPasswdNew = !state.showPasswdNew"
|
>
|
</i>
|
</template>
|
</el-input>
|
</el-form-item>
|
<el-form-item label="确认密码" prop="passwordNew2" :rules="[{ validator: validatePassword, required: true, trigger: 'blur' }]">
|
<el-input :type="state.showPassWdNew2 ? 'text' : 'password'" v-model="state.passwordNew2" autocomplete="off">
|
<template #suffix>
|
<i
|
class="iconfont el-input__icon login-content-password"
|
:class="state.showPassWdNew2 ? 'icon-yincangmima' : 'icon-xianshimima'"
|
@click="state.showPassWdNew2 = !state.showPassWdNew2"
|
>
|
</i>
|
</template>
|
</el-input>
|
</el-form-item>
|
<el-form-item>
|
<el-button icon="ele-Refresh" @click="resetPassword">重 置</el-button>
|
<el-button icon="ele-SuccessFilled" type="primary" @click="submitPassword">确 定</el-button>
|
</el-form-item>
|
</el-form>
|
</el-tab-pane>
|
</el-tabs>
|
</el-card>
|
</el-col>
|
</el-row>
|
|
<CropperDialog ref="cropperDialogRef" :title="state.cropperTitle" @uploadCropperImg="uploadCropperImg" />
|
</div>
|
</template>
|
|
<script lang="ts" setup name="sysUserCenter">
|
import { onMounted, watch, reactive, ref } from 'vue';
|
import { storeToRefs } from 'pinia';
|
import { ElForm, ElMessage, ElMessageBox, genFileId } from 'element-plus';
|
import type { UploadInstance, UploadProps, UploadRawFile } from 'element-plus';
|
import { useUserInfo } from '/@/stores/userInfo';
|
// import { base64ToFile } from '/@/utils/base64Conver';
|
import CropperDialog from '/@/components/cropper/index.vue';
|
import VueGridLayout from 'vue-grid-layout';
|
import { ADMIN_TYPE_MAP } from '/@/views/types';
|
import { clearAccessTokens } from '/@/utils/request';
|
import { ResetSystemLoginPwd, UpdateSystemLoginPwd } from '/@/api/auth/userManage';
|
|
const stores = useUserInfo();
|
const { userInfos } = storeToRefs(stores);
|
const uploadSignRef = ref<UploadInstance>();
|
//const uploadAvatarRef = ref<UploadInstance>();
|
const signaturePadRef = ref<InstanceType<typeof VueGridLayout>>();
|
const ruleFormBaseRef = ref<InstanceType<typeof ElForm>>();
|
const ruleFormPasswordRef = ref<InstanceType<typeof ElForm>>();
|
const cropperDialogRef = ref<InstanceType<typeof CropperDialog>>();
|
const state = reactive({
|
loading: false,
|
avatarLoading: false,
|
signDialogVisible: false,
|
ruleFormBase: {},
|
ruleFormPassword: {} as any,
|
showPasswdNew: false,
|
showPassWdNew2: false,
|
signOptions: {
|
penColor: '#000000',
|
minWidth: 1.0,
|
onBegin: () => {
|
signaturePadRef.value.resizeCanvas();
|
},
|
},
|
signFileList: [] as any,
|
passwordNew2: '',
|
cropperTitle: '',
|
});
|
|
onMounted(async () => {
|
state.loading = true;
|
// var res = await getAPI(SysUserApi).apiSysUserBaseInfoGet();
|
// state.ruleFormBase = res.data.result ?? { account: '' };
|
state.loading = false;
|
});
|
|
watch(state.signOptions, () => {
|
signaturePadRef.value.signaturePad.penColor = state.signOptions.penColor;
|
signaturePadRef.value.signaturePad.minWidth = state.signOptions.minWidth;
|
});
|
|
// 上传头像图片
|
const uploadCropperImg = async (e: any) => {
|
// var res = await getAPI(SysFileApi).apiSysFileUploadAvatarPostForm(e.img);
|
// userInfos.value.avatar = res.data.result?.filePath + '/' + res.data.result?.name;
|
};
|
|
// 清空电子签名
|
const clearSign = () => {
|
signaturePadRef.value.clearSignature();
|
};
|
|
// 获得电子签名文件列表
|
const handleChangeSignFile = (_file: any, fileList: []) => {
|
state.signFileList = fileList;
|
};
|
|
// 密码验证
|
const validatePassword = (_rule: any, value: any, callback: any) => {
|
if (!state.ruleFormPassword.passwordNew) {
|
callback('请先输入新密码！');
|
} else if (state.passwordNew2 != state.ruleFormPassword.passwordNew) {
|
callback(new Error('两次密码不一致！'));
|
} else {
|
callback();
|
}
|
};
|
|
// 密码重置
|
const resetPassword = () => {
|
ElMessageBox.confirm('确定重置当前用户密码？', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning',
|
})
|
.then(async () => {
|
resetSystemLoginPwd();
|
})
|
.catch(() => {});
|
};
|
|
const confirmReLogin = () => {
|
// 退出系统
|
ElMessageBox.confirm('密码已修改，是否重新登录系统？', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning',
|
})
|
.then(async () => {
|
clearAccessTokens();
|
})
|
.catch(() => {});
|
};
|
|
const resetSystemLoginPwd = async () => {
|
const res = await ResetSystemLoginPwd({
|
ID: userInfos.value?.User?.LoginAccount?.ID,
|
});
|
|
if (res?.Code === 0) {
|
if (res.Data) {
|
confirmReLogin();
|
} else {
|
ElMessage.error('重置密码失败');
|
}
|
} else {
|
ElMessage.error('重置密码失败' + (res?.Message ? `，${JSON.stringify(res.Message)}` : ''));
|
}
|
};
|
|
// 密码提交
|
const submitPassword = () => {
|
ruleFormPasswordRef.value?.validate(async (valid: boolean) => {
|
if (!valid) return;
|
ElMessageBox.confirm('确定修改当前账户密码？', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning',
|
})
|
.then(async () => {
|
const res = await UpdateSystemLoginPwd({
|
ID: userInfos.value?.User?.LoginAccount?.ID,
|
LoginPwd: state.passwordNew2,
|
});
|
|
if (res?.Code === 0) {
|
if (res.Data) {
|
confirmReLogin();
|
} else {
|
ElMessage.error('修改密码失败');
|
}
|
} else {
|
ElMessage.error('修改密码失败' + (res?.Message ? `，${JSON.stringify(res.Message)}` : ''));
|
}
|
})
|
.catch(() => {});
|
});
|
};
|
|
// 打开裁剪弹窗
|
const openCropperDialog = () => {
|
// state.cropperTitle = '更换头像';
|
// cropperDialogRef.value?.openDialog(userInfos.value.avatar);
|
};
|
|
// 鼠标进入和离开头像时
|
const mouseEnterAvatar = () => {
|
state.avatarLoading = true;
|
};
|
|
const mouseLeaveAvatar = () => {
|
state.avatarLoading = false;
|
};
|
|
// 导出对象
|
defineExpose({ handleChangeSignFile });
|
</script>
|
|
<style lang="scss" scoped>
|
.login-content-password {
|
display: inline-block;
|
width: 20px;
|
cursor: pointer;
|
|
&:hover {
|
color: #909399;
|
}
|
}
|
.user-simple-info {
|
display: flex;
|
align-items: flex-start;
|
}
|
.account-center-avatarHolder {
|
text-align: center;
|
margin-bottom: 24px;
|
|
.username {
|
font-size: 20px;
|
line-height: 28px;
|
font-weight: 500;
|
margin-bottom: 4px;
|
}
|
}
|
.account-center-org {
|
margin-bottom: 8px;
|
position: relative;
|
p {
|
margin-top: 10px;
|
}
|
span {
|
padding-left: 17px;
|
}
|
}
|
.avatar {
|
margin: 0 auto;
|
width: 104px;
|
height: 104px;
|
margin-bottom: 20px;
|
border-radius: 50%;
|
overflow: hidden;
|
img {
|
height: 100%;
|
width: 100%;
|
}
|
}
|
|
.image-signature {
|
margin-top: 20px;
|
margin-bottom: 10px;
|
width: 100%;
|
height: 150px;
|
background-color: #fff;
|
text-align: center;
|
vertical-align: middle;
|
border: solid 1px var(--el-border-color);
|
}
|
</style>
|
