mirror of
https://gitee.com/log4j/pig-ui.git
synced 2024-12-23 05:40:20 +08:00
✨ Introducing new features. 完成用户信息修改保存
This commit is contained in:
aeizzz
parent
97d16c4f89
commit
66b3ca53db
@ -1,5 +1,5 @@
|
||||
import { ElMessage } from "element-plus";
|
||||
import other, { deepMerge } from "../utils/other";
|
||||
import other from "../utils/other";
|
||||
|
||||
export interface BasicTableProps {
|
||||
// 是否在创建页面时，调用数据列表接口
|
||||
|
||||
@ -25,25 +25,6 @@ const layouModules: any = import.meta.glob('../layout/routerView/*.{vue,tsx}');
|
||||
const viewsModules: any = import.meta.glob('../views/**/*.{vue,tsx}');
|
||||
const dynamicViewsModules: Record<string, Function> = Object.assign({}, { ...layouModules }, { ...viewsModules });
|
||||
|
||||
const home = [
|
||||
{
|
||||
path: '/home',
|
||||
name: 'home',
|
||||
component: () => import('/@/views/home/index.vue'),
|
||||
meta: {
|
||||
title: 'router.home',
|
||||
isLink: '',
|
||||
isHide: false,
|
||||
isKeepAlive: true,
|
||||
isAffix: true,
|
||||
isIframe: false,
|
||||
icon: 'iconfont icon-shouye',
|
||||
},
|
||||
},
|
||||
]
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* 后端控制路由：初始化方法，防止刷新时路由丢失
|
||||
* @method NextLoading 界面 loading 动画开始执行
|
||||
@ -67,7 +48,7 @@ export async function initBackEndControlRoutes() {
|
||||
// 存储接口原始路由（未处理component），根据需求选择使用
|
||||
useRequestOldRoutes().setRequestOldRoutes(JSON.parse(JSON.stringify(res.data)));
|
||||
// 处理路由（component），替换 dynamicRoutes（/@/router/route）第一个顶级 children 的路由
|
||||
dynamicRoutes[0].children = [...home,...await backEndComponent(res.data), ...staticConfigRoutes]
|
||||
dynamicRoutes[0].children = [...staticConfigRoutes,...await backEndComponent(res.data), ]
|
||||
// 添加动态路由
|
||||
await setAddRoute();
|
||||
// 设置路由到 pinia routesList 中（已处理成多级嵌套路由）及缓存多级嵌套数组处理后的一维数组
|
||||
|
||||
@ -99,6 +99,20 @@ export const notFoundAndNoPower = [
|
||||
* @returns 返回路由菜单数据
|
||||
*/
|
||||
export const staticConfigRoutes: Array<RouteRecordRaw> = [
|
||||
{
|
||||
path: '/home',
|
||||
name: 'home',
|
||||
component: () => import('/@/views/home/index.vue'),
|
||||
meta: {
|
||||
title: 'router.home',
|
||||
isLink: '',
|
||||
isHide: false,
|
||||
isKeepAlive: true,
|
||||
isAffix: true,
|
||||
isIframe: false,
|
||||
icon: 'iconfont icon-shouye',
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/personal',
|
||||
name: 'personal',
|
||||
|
||||
@ -2,12 +2,14 @@
|
||||
<div class="personal layout-pd">
|
||||
<el-row>
|
||||
<!-- 个人信息 -->
|
||||
<el-col :xs="24" :sm="16">
|
||||
<el-col :span="24">
|
||||
<el-card shadow="hover" header="个人信息">
|
||||
<div class="personal-user">
|
||||
<div class="personal-user-left">
|
||||
<el-upload class="h100 personal-user-left-upload" action="https://jsonplaceholder.typicode.com/posts/" multiple :limit="1">
|
||||
<img src="https://img2.baidu.com/it/u=1978192862,2048448374&fm=253&fmt=auto&app=138&f=JPEG?w=504&h=500" />
|
||||
<el-upload class="h100 personal-user-left-upload" action="/admin/sys-file/upload"
|
||||
:headers="headers"
|
||||
:on-success="handleAvatarSuccess" :limit="1">
|
||||
<img :src="formData.avatar" />
|
||||
</el-upload>
|
||||
</div>
|
||||
<div class="personal-user-right">
|
||||
@ -43,86 +45,56 @@
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<!-- 消息通知 -->
|
||||
<el-col :xs="24" :sm="8" class="pl15 personal-info">
|
||||
<el-card shadow="hover">
|
||||
<template #header>
|
||||
<span>消息通知</span>
|
||||
<span class="personal-info-more">更多</span>
|
||||
</template>
|
||||
<div class="personal-info-box">
|
||||
<ul class="personal-info-ul">
|
||||
<li v-for="(v, k) in state.newsInfoList" :key="k" class="personal-info-li">
|
||||
<a :href="v.link" target="_block" class="personal-info-li-title">{{ v.title }}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<!-- 营销推荐 -->
|
||||
<el-col :span="24">
|
||||
<el-card shadow="hover" class="mt15" header="营销推荐">
|
||||
<el-row :gutter="15" class="personal-recommend-row">
|
||||
<el-col :sm="6" v-for="(v, k) in state.recommendList" :key="k" class="personal-recommend-col">
|
||||
<div class="personal-recommend" :style="{ 'background-color': v.bg }">
|
||||
<SvgIcon :name="v.icon" :size="70" :style="{ color: v.iconColor }" />
|
||||
<div class="personal-recommend-auto">
|
||||
<div>{{ v.title }}</div>
|
||||
<div class="personal-recommend-msg">{{ v.msg }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<!-- 更新信息 -->
|
||||
<el-col :span="24">
|
||||
<el-card shadow="hover" class="mt15 personal-edit" header="更新信息">
|
||||
<div class="personal-edit-title">基本信息</div>
|
||||
<el-form :model="state.personalForm" size="default" label-width="40px" class="mt35 mb35">
|
||||
<el-form :model="formData" size="default" :rules="ruleForm" label-width="100px" class="mt35 mb35" ref="formdataRef">
|
||||
<el-row :gutter="35">
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="昵称">
|
||||
<el-input v-model="state.personalForm.name" placeholder="请输入昵称" clearable></el-input>
|
||||
<el-form-item label="用户名" prop="username">
|
||||
<el-input v-model="formData.username" clearable disabled></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="邮箱">
|
||||
<el-input v-model="state.personalForm.email" placeholder="请输入邮箱" clearable></el-input>
|
||||
<el-form-item label="手机" prop="phone">
|
||||
<el-input v-model="formData.phone" placeholder="请输入手机" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="邮箱" prop="email">
|
||||
<el-input v-model="formData.email" placeholder="请输入邮箱" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="签名">
|
||||
<el-input v-model="state.personalForm.autograph" placeholder="请输入签名" clearable></el-input>
|
||||
<el-form-item label="昵称" prop="nickname">
|
||||
<el-input v-model="formData.nickname" placeholder="请输入昵称" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="职业">
|
||||
<el-select v-model="state.personalForm.occupation" placeholder="请选择职业" clearable class="w100">
|
||||
<el-option label="计算机 / 互联网 / 通信" value="1"></el-option>
|
||||
<el-option label="生产 / 工艺 / 制造" value="2"></el-option>
|
||||
<el-option label="医疗 / 护理 / 制药" value="3"></el-option>
|
||||
</el-select>
|
||||
<el-form-item label="姓名" prop="name">
|
||||
<el-input v-model="formData.name" placeholder="请输入姓名" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="手机">
|
||||
<el-input v-model="state.personalForm.phone" placeholder="请输入手机" clearable></el-input>
|
||||
<el-form-item label="原密码" prop="password">
|
||||
<el-input v-model="formData.password" placeholder="请输入密码" clearable type="password"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="性别">
|
||||
<el-select v-model="state.personalForm.sex" placeholder="请选择性别" clearable class="w100">
|
||||
<el-option label="男" value="1"></el-option>
|
||||
<el-option label="女" value="2"></el-option>
|
||||
</el-select>
|
||||
<el-form-item label="新密码" prop="newpassword1">
|
||||
<el-input v-model="formData.newpassword1" clearable type="password"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="确认密码" prop="newpassword2">
|
||||
<el-input v-model="formData.newpassword2" clearable type="password"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
||||
<el-form-item>
|
||||
<el-button type="primary">
|
||||
<el-button type="primary" @click="handleSaveUser">
|
||||
<el-icon>
|
||||
<ele-Position />
|
||||
</el-icon>
|
||||
@ -132,51 +104,6 @@
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div class="personal-edit-title mb15">账号安全</div>
|
||||
<div class="personal-edit-safe-box">
|
||||
<div class="personal-edit-safe-item">
|
||||
<div class="personal-edit-safe-item-left">
|
||||
<div class="personal-edit-safe-item-left-label">账户密码</div>
|
||||
<div class="personal-edit-safe-item-left-value">当前密码强度：强</div>
|
||||
</div>
|
||||
<div class="personal-edit-safe-item-right">
|
||||
<el-button text type="primary">立即修改</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="personal-edit-safe-box">
|
||||
<div class="personal-edit-safe-item">
|
||||
<div class="personal-edit-safe-item-left">
|
||||
<div class="personal-edit-safe-item-left-label">密保手机</div>
|
||||
<div class="personal-edit-safe-item-left-value">已绑定手机：132****4108</div>
|
||||
</div>
|
||||
<div class="personal-edit-safe-item-right">
|
||||
<el-button text type="primary">立即修改</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="personal-edit-safe-box">
|
||||
<div class="personal-edit-safe-item">
|
||||
<div class="personal-edit-safe-item-left">
|
||||
<div class="personal-edit-safe-item-left-label">密保问题</div>
|
||||
<div class="personal-edit-safe-item-left-value">已设置密保问题，账号安全大幅度提升</div>
|
||||
</div>
|
||||
<div class="personal-edit-safe-item-right">
|
||||
<el-button text type="primary">立即设置</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="personal-edit-safe-box">
|
||||
<div class="personal-edit-safe-item">
|
||||
<div class="personal-edit-safe-item-left">
|
||||
<div class="personal-edit-safe-item-left-label">绑定QQ</div>
|
||||
<div class="personal-edit-safe-item-left-value">已绑定QQ：110****566</div>
|
||||
</div>
|
||||
<div class="personal-edit-safe-item-right">
|
||||
<el-button text type="primary">立即设置</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@ -186,22 +113,74 @@
|
||||
<script setup lang="ts" name="personal">
|
||||
import { reactive, computed } from 'vue';
|
||||
import { formatAxis } from '/@/utils/formatTime';
|
||||
import { newsInfoList, recommendList } from './mock';
|
||||
import { useUserInfo } from '/@/stores/userInfo';
|
||||
import { editInfo } from '/@/api/admin/user'
|
||||
import {useMessage} from "/@/hooks/message";
|
||||
import {Session} from "/@/utils/storage";
|
||||
|
||||
// 定义变量内容
|
||||
const state = reactive<PersonalState>({
|
||||
newsInfoList,
|
||||
recommendList,
|
||||
personalForm: {
|
||||
const formData = reactive({
|
||||
username: '',
|
||||
name: '',
|
||||
email: '',
|
||||
autograph: '',
|
||||
occupation: '',
|
||||
avatar: '',
|
||||
nickname: '',
|
||||
phone: '',
|
||||
sex: '',
|
||||
},
|
||||
password: '',
|
||||
newpassword1: '',
|
||||
newpassword2: ''
|
||||
});
|
||||
|
||||
const formdataRef = ref()
|
||||
|
||||
const ruleForm = reactive({
|
||||
password: [{ required: true, message: "密码不能为空", trigger: "blur" }],
|
||||
phone: [{ required: true, message: "手机号不能为空", trigger: "blur" }],
|
||||
nickname: [{ required: true, message: "昵称不能为空", trigger: "blur" }],
|
||||
email: [{ required: true, message: "邮箱不能为空", trigger: "blur" }],
|
||||
name: [{ required: true, message: "姓名不能为空", trigger: "blur" }]
|
||||
})
|
||||
|
||||
|
||||
const handleAvatarSuccess = (res: any) => {
|
||||
formData.avatar = res.data.url;
|
||||
}
|
||||
|
||||
|
||||
const headers = computed(() => {
|
||||
const tenantId = Session.get("tenantId")
|
||||
return {
|
||||
'Authorization': "Bearer " + Session.get("token"),
|
||||
'TENANT-ID': tenantId ? tenantId : '1'
|
||||
};
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
const data = useUserInfo().userInfos
|
||||
Object.assign(formData,data.user)
|
||||
formData.password = ''
|
||||
})
|
||||
|
||||
const handleSaveUser = () =>{
|
||||
formdataRef.value.validate((valid: boolean) => {
|
||||
if (!valid) {
|
||||
return false
|
||||
}
|
||||
editInfo(formData).then(() => {
|
||||
useMessage().success("修改成功")
|
||||
// 清除缓存/token等
|
||||
Session.clear();
|
||||
// 使用 reload 时，不需要调用 resetRoute() 重置路由
|
||||
window.location.reload();
|
||||
|
||||
}).catch(err => {
|
||||
useMessage().error(err.msg)
|
||||
})
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
|
||||
// 当前时间提示语
|
||||
const currentTime = computed(() => {
|
||||
return formatAxis(new Date());
|
||||
@ -216,7 +195,7 @@ const currentTime = computed(() => {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.personal-user-left {
|
||||
width: 100px;
|
||||
width: 180px;
|
||||
height: 130px;
|
||||
border-radius: 3px;
|
||||
:deep(.el-upload) {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user