FatttSnake/Pinnacle-OA
1
0
Fork 0
mirror of https://github.com/FatttSnake/Pinnacle-OA.git synced 2026-04-05 23:11:24 +08:00
Code Packages Releases Activity

Added personal profile interface form verification, and added home interface affairs card

Browse Source
This commit is contained in:
ggb
2023-06-04 17:20:02 +08:00
parent 300252a49f
commit 83ccc0b651
3 changed files with 161 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
ui/src/pages/profile/PersonalProfile.vue
View File

@@ -1,31 +1,36 @@
<template>
<div class="profile">
<el-form :model="form" label-width="72px" label-position="top">
<el-form :model="form" :rules="rules" ref="form" label-width="72px" label-position="top">
<el-row :gutter="40">
<el-col :span="12" style="text-align: center">
<el-avatar :size="128" style="margin-bottom: 20px" />
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="名字">
<el-form-item label="名字" prop="firstName">
<el-input v-model="form.firstName" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="姓氏">
<el-form-item label="姓氏" prop="lastName">
<el-input v-model="form.lastName" />
</el-form-item>
</el-col>
</el-row>
<el-form-item label="用户ID">
<el-input v-model="form.userId" />
<el-form-item label="用户名" prop="username">
<el-input v-model="form.username" disabled />
</el-form-item>
<el-link type="default" size="default" style="float: right">修改密码</el-link>
</el-col>
<el-col :span="12">
<el-row>
<el-col :span="12">
<el-form-item label="性别">
<el-select v-model="form.gender" size="default" style="width: 90%">
<el-form-item label="性别" prop="gender">
<el-select
v-model="form.gender"
size="default"
style="width: 90%"
value-key="value"
>
<el-option
v-for="gender in genders"
:key="gender.value"
@@ -36,7 +41,7 @@
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="生日">
<el-form-item label="生日" prop="birth">
<el-date-picker
v-model="form.birth"
size="default"
@@ -45,18 +50,18 @@
</el-form-item>
</el-col>
</el-row>
<el-form-item label="邮箱">
<el-form-item label="邮箱" prop="email">
<el-input v-model="form.email" />
</el-form-item>
<el-form-item label="手机号码">
<el-form-item label="手机号码" prop="tel">
<el-input v-model="form.tel" />
</el-form-item>
<el-form-item label="联系地址">
<el-form-item label="联系地址" prop="address">
<el-input v-model="form.address" />
</el-form-item>
<el-form-item style="float: right">
<el-button type="info">重置</el-button>
<el-button type="primary">保存</el-button>
<el-button type="info" @click="resetForm">重置</el-button>
<el-button type="primary" @click="onSubmit(form)">保存</el-button>
</el-form-item>
</el-col>
</el-row>
@@ -65,13 +70,25 @@
</template>
<script lang="ts">
import _ from 'lodash'
import request from '@/services'
export default {
data() {
return {
form: {
userId: '',
username: '',
passwd: '',
firstName: '',
lastName: '',
gender: '',
birth: '',
email: '',
tel: '',
address: ''
},
staff: {
username: '',
passwd: '',
firstName: '',
lastName: '',
@@ -83,18 +100,38 @@ export default {
},
genders: [
{
label: '未知',
value: '0'
label: '保密',
value: 0
},
{
label: '男',
value: '1'
value: 1
},
{
label: '女',
value: '2'
value: 2
}
]
],
rules: {
firstName: [
{
required: true,
message: '请输入名字'
}
],
lastName: [
{
required: true,
message: '请输入姓氏'
}
],
gender: [
{
required: true,
message: '请选择性别'
}
]
}
}
},
methods: {
@@ -102,11 +139,26 @@ export default {
request
.get('/user/info')
.then((response) => {
this.form = response.data.data.staff
this.staff = response.data.data.staff
this.staff.username = response.data.data.username
this.form = _.cloneDeep(this.staff)
})
.catch((reportError) => {
console.log(reportError)
})
},
onSubmit(form) {
// 表单校验
this.$refs.form.validate((value) => {
if (value) {
console.log('submit!')
} else {
console.log('fault!')
}
})
},
resetForm() {
this.form = _.cloneDeep(this.staff)
}
},
created() {