feat: 个人设置
This commit is contained in:
wang_fan_w
parent
f6d39c5ba4
commit
94fb3b0796
3
src/hooks/useGlobalProperties.ts
Normal file
3
src/hooks/useGlobalProperties.ts
Normal file
@ -0,0 +1,3 @@
|
||||
// 用于全局使用globalProperties
|
||||
import { getCurrentInstance, ComponentInternalInstance } from "vue";
|
||||
export default () => (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties;
|
||||
@ -19,8 +19,10 @@ import i18n from "@/lang/index";
|
||||
import "@/assets/fonts/fonts.scss";
|
||||
// vchart-arco-theme 主题关联-黑暗模式
|
||||
import { initVChartArcoTheme } from "@visactor/vchart-arco-theme";
|
||||
|
||||
initVChartArcoTheme();
|
||||
const app = createApp(App);
|
||||
|
||||
app.use(ArcoVue, {
|
||||
componentPrefix: "arco"
|
||||
});
|
||||
|
||||
@ -242,6 +242,7 @@ export const dynamicRoutes: RouteRecordRaw[] = [
|
||||
{
|
||||
path: "/personal-center",
|
||||
name: "personal-center",
|
||||
redirect: "/personal-center/userinfo",
|
||||
meta: {
|
||||
title: "personal-center",
|
||||
link: "",
|
||||
|
||||
7
src/typings/arco.d.ts
vendored
Normal file
7
src/typings/arco.d.ts
vendored
Normal file
@ -0,0 +1,7 @@
|
||||
/* ArcoDesign命名空间 */
|
||||
declare namespace ArcoDesign {
|
||||
interface ArcoSubmit {
|
||||
values: Record<string, any>;
|
||||
errors: Record<string, any> | undefined;
|
||||
}
|
||||
}
|
||||
@ -161,12 +161,8 @@ const rules = ref({
|
||||
]
|
||||
});
|
||||
const formRef = ref();
|
||||
interface ISubmit {
|
||||
values: Record<string, any>;
|
||||
errors: Record<string, any> | undefined;
|
||||
}
|
||||
const handleSubmit = ({ values, errors }: ISubmit) => {
|
||||
console.log("values:", values, "\nerrors:", errors);
|
||||
|
||||
const handleSubmit = ({ errors }: ArcoDesign.ArcoSubmit) => {
|
||||
if (errors) return;
|
||||
if (currentStep.value == 3) return;
|
||||
if (currentStep.value == 2) {
|
||||
|
||||
@ -2,94 +2,112 @@
|
||||
<a-row align="center" :gutter="[0, 16]">
|
||||
<a-col :span="24">
|
||||
<a-card title="基本信息">
|
||||
<template #extra>
|
||||
<a-link>修改基本信息</a-link>
|
||||
</template>
|
||||
<a-form :model="form" :style="{ width: '600px' }">
|
||||
<a-form-item field="name" label="用户ID">
|
||||
<a-input v-model="form.name" placeholder="请输入用户昵称" disabled />
|
||||
<a-form :model="form" :rules="rules" :style="{ width: '600px' }" @submit="onSubmit">
|
||||
<a-form-item field="userId" label="用户ID">
|
||||
<a-input v-model="form.userId" disabled />
|
||||
</a-form-item>
|
||||
<a-form-item field="name" label="用户昵称">
|
||||
<a-input v-model="form.name" placeholder="请输入用户昵称" />
|
||||
<a-form-item field="username" label="用户名">
|
||||
<a-input v-model="form.username" placeholder="请输入用户名" allow-clear />
|
||||
</a-form-item>
|
||||
<a-form-item field="name" label="角色">
|
||||
<a-input v-model="form.name" placeholder="请选择角色" />
|
||||
<a-form-item field="nickname" label="用户昵称">
|
||||
<a-input v-model="form.nickname" placeholder="请输入用户昵称" allow-clear />
|
||||
</a-form-item>
|
||||
<a-form-item field="name" label="权限">
|
||||
<a-input v-model="form.name" placeholder="请选择权限" />
|
||||
<a-form-item field="role" label="角色">
|
||||
<a-select :style="{ width: '320px' }" v-model="form.role" placeholder="请选择角色" allow-clear>
|
||||
<a-option>系统管理员</a-option>
|
||||
<a-option>普通角色</a-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item field="name" label="注册时间">
|
||||
<a-input v-model="form.name" placeholder="请输入注册时间" />
|
||||
<a-form-item field="address" label="所在区域">
|
||||
<a-cascader
|
||||
v-model="form.address"
|
||||
:options="options"
|
||||
expand-trigger="hover"
|
||||
:style="{ width: '320px' }"
|
||||
placeholder="请选择所在区域"
|
||||
allow-clear
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item field="introduce" label="简介">
|
||||
<a-textarea placeholder="请输入简介" v-model="form.introduce" allow-clear />
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<a-button>提交</a-button>
|
||||
<a-space>
|
||||
<a-button type="primary" html-type="submit">提交</a-button>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-card title="个性信息">
|
||||
<template #extra>
|
||||
<a-link>修改个性信息</a-link>
|
||||
</template>
|
||||
<a-form :model="privateForm" layout="horizontal" :label-col-props="{ span: 8 }" :wrapper-col-props="{ span: 16 }">
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="8">
|
||||
<a-form-item field="name" label="我用语雀">
|
||||
<a-input v-model="privateForm.name" placeholder="请输入姓名" allow-clear />
|
||||
</a-form-item>
|
||||
<a-form-item field="name" label="个性性格">
|
||||
<a-input v-model="privateForm.name" placeholder="请输入姓名" allow-clear />
|
||||
</a-form-item>
|
||||
<a-form-item field="name" label="职业工作">
|
||||
<a-input v-model="privateForm.name" placeholder="请输入姓名" allow-clear />
|
||||
</a-form-item>
|
||||
<a-form-item field="name" label="现居城市">
|
||||
<a-input v-model="privateForm.name" placeholder="请输入姓名" allow-clear />
|
||||
</a-form-item>
|
||||
<a-form-item field="name" label="兴趣爱好">
|
||||
<a-input v-model="privateForm.name" placeholder="请输入姓名" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-form-item field="phone" label="邮箱">
|
||||
<a-input v-model="privateForm.name" placeholder="请输入手机号" allow-clear />
|
||||
</a-form-item>
|
||||
<a-form-item field="phone" label="微信">
|
||||
<a-input v-model="privateForm.name" placeholder="请输入手机号" allow-clear />
|
||||
</a-form-item>
|
||||
<a-form-item field="phone" label="思否">
|
||||
<a-input v-model="privateForm.name" placeholder="请输入手机号" allow-clear />
|
||||
</a-form-item>
|
||||
<a-form-item field="phone" label="掘金">
|
||||
<a-input v-model="privateForm.name" placeholder="请输入手机号" allow-clear />
|
||||
</a-form-item>
|
||||
<a-form-item field="phone" label="gitee">
|
||||
<a-input v-model="privateForm.name" placeholder="请输入手机号" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-form-item field="name" label="公众号">
|
||||
<a-input v-model="privateForm.name" placeholder="请输入姓名" allow-clear />
|
||||
</a-form-item>
|
||||
<a-form-item field="name" label="公众号二维码">
|
||||
<a-input v-model="privateForm.name" placeholder="请输入姓名" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import useGlobalProperties from "@/hooks/useGlobalProperties";
|
||||
const proxy = useGlobalProperties();
|
||||
const form = ref({
|
||||
name: ""
|
||||
});
|
||||
const privateForm = ref({
|
||||
name: ""
|
||||
userId: "1000001",
|
||||
username: "admin",
|
||||
nickname: "兔子先森",
|
||||
role: "系统管理员",
|
||||
address: "guanggu",
|
||||
introduce: ""
|
||||
});
|
||||
const rules = {
|
||||
userId: [
|
||||
{
|
||||
required: true,
|
||||
message: "用户ID不能为空"
|
||||
}
|
||||
],
|
||||
username: [
|
||||
{
|
||||
required: true,
|
||||
message: "用户名不能为空"
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
const options = ref([
|
||||
{
|
||||
value: "hubei",
|
||||
label: "湖北",
|
||||
children: [
|
||||
{
|
||||
value: "wuhan",
|
||||
label: "武汉",
|
||||
children: [
|
||||
{
|
||||
value: "guanggu",
|
||||
label: "光谷"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "xiaogan",
|
||||
label: "孝感"
|
||||
},
|
||||
{
|
||||
value: "jingzhou",
|
||||
label: "荆州"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "hunan",
|
||||
label: "湖南",
|
||||
children: [
|
||||
{
|
||||
value: "changsha",
|
||||
label: "长沙"
|
||||
}
|
||||
]
|
||||
}
|
||||
]);
|
||||
const onSubmit = ({ errors }: ArcoDesign.ArcoSubmit) => {
|
||||
if (errors) return;
|
||||
proxy.$message.success("修改基本信息");
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@ -1,32 +1,65 @@
|
||||
<template>
|
||||
<div>
|
||||
<a-form :model="form" :style="{ width: '600px' }">
|
||||
<a-form-item field="name" label="登录密码">
|
||||
<a-input v-model="form.name" placeholder="请输入登录密码" />
|
||||
</a-form-item>
|
||||
<a-form-item field="name" label="安全手机">
|
||||
<a-input v-model="form.name" placeholder="请输入安全手机" />
|
||||
</a-form-item>
|
||||
<a-form-item field="name" label="安全邮箱">
|
||||
<a-input v-model="form.name" placeholder="请输入安全邮箱" />
|
||||
</a-form-item>
|
||||
<a-form-item field="name" label="密保问题">
|
||||
<a-input v-model="form.name" placeholder="请输入密保问题" />
|
||||
</a-form-item>
|
||||
<a-form-item field="name" label="密保答案">
|
||||
<a-input v-model="form.name" placeholder="请输入密保答案" />
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<a-button>提交</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
<a-row align="center" :gutter="[0, 16]">
|
||||
<a-col :span="24">
|
||||
<a-card title="安全设置">
|
||||
<a-form :model="form" :rules="rules" :style="{ width: '600px' }" @submit="onSubmit">
|
||||
<a-form-item field="password" label="登录密码">
|
||||
<a-input-password v-model="form.password" placeholder="请输入登录密码" allow-clear />
|
||||
</a-form-item>
|
||||
<a-form-item field="phone" label="安全手机">
|
||||
<a-input v-model="form.phone" placeholder="请输入安全手机" allow-clear>
|
||||
<template #prepend> +86 </template>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
<a-form-item field="email" label="安全邮箱">
|
||||
<a-input v-model="form.email" placeholder="请输入安全邮箱" allow-clear />
|
||||
</a-form-item>
|
||||
<a-form-item field="question" label="密保问题">
|
||||
<a-input v-model="form.question" placeholder="请输入密保问题" allow-clear />
|
||||
</a-form-item>
|
||||
<a-form-item field="answer" label="密保答案">
|
||||
<a-input v-model="form.answer" placeholder="请输入密保答案" allow-clear />
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<a-button type="primary" html-type="submit">提交</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import useGlobalProperties from "@/hooks/useGlobalProperties";
|
||||
const proxy = useGlobalProperties();
|
||||
const form = ref({
|
||||
name: ""
|
||||
password: "123456",
|
||||
phone: "15888888888",
|
||||
email: "",
|
||||
question: "",
|
||||
answer: ""
|
||||
});
|
||||
const rules = {
|
||||
password: [
|
||||
{
|
||||
required: true,
|
||||
message: "登录密码不能为空"
|
||||
}
|
||||
],
|
||||
phone: [
|
||||
{
|
||||
required: true,
|
||||
message: "安全手机不能为空"
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
const onSubmit = ({ errors }: ArcoDesign.ArcoSubmit) => {
|
||||
if (errors) return;
|
||||
proxy.$message.success("修改基本信息");
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@ -45,8 +45,8 @@ import myImage from "@/assets/img/my-image.jpg";
|
||||
import BasicInfo from "@/views/personal-center/user-settings/components/basic-info.vue";
|
||||
import SecuritySettings from "@/views/personal-center/user-settings/components/security-settings.vue";
|
||||
import Accreditation from "@/views/personal-center/user-settings/components/accreditation.vue";
|
||||
import { getCurrentInstance } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
import useGlobalProperties from "@/hooks/useGlobalProperties";
|
||||
const proxy = useGlobalProperties();
|
||||
|
||||
const type = ref("rounded");
|
||||
const size = ref("medium");
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user