mirror of
https://github.com/FatttSnake/Pinnacle-OA.git
synced 2026-04-05 23:11:24 +08:00
Added personal profile interface form verification, and added home interface affairs card
This commit is contained in:
ggb
76
ui/src/components/home/AffairsCard.vue
Normal file
76
ui/src/components/home/AffairsCard.vue
Normal file
@@ -0,0 +1,76 @@
|
||||
<template>
|
||||
<el-card shadow="hover" class="homeCard">
|
||||
<template #header>
|
||||
<div class="card-header" style="height: 20px">
|
||||
<h2>公告</h2>
|
||||
<el-button class="button" text @click="pushTodo">查看更多</el-button>
|
||||
</div>
|
||||
</template>
|
||||
<div v-for="item in tableData" :key="item" class="card-text card-item">
|
||||
<el-row :gutter="10">
|
||||
<el-col :xs="0" :sm="4" :md="4" :lg="3" :xl="2" style="justify-content: center">
|
||||
<el-avatar style="background-color: #529b2e" :size="32">
|
||||
<el-icon color="white" :size="22" style="vertical-align: center">
|
||||
<icon-pinnacle-notice-item />
|
||||
</el-icon>
|
||||
</el-avatar>
|
||||
</el-col>
|
||||
<el-col :xs="5" :sm="5" :md="5" :lg="8" :xl="10"
|
||||
><el-text size="large" style="color: black; line-height: 32px" truncated>{{
|
||||
item.title
|
||||
}}</el-text>
|
||||
</el-col>
|
||||
<el-col :xs="15" :sm="11" :md="12" :lg="10" :xl="10" style="text-align: right"
|
||||
><el-text type="info" style="line-height: 32px">{{
|
||||
formatDate(item.createTime)
|
||||
}}</el-text></el-col
|
||||
>
|
||||
<el-col :xs="4" :sm="4" :md="3" :lg="3" :xl="2" style="text-align: right"
|
||||
><el-text type="info" style="line-height: 32px">{{
|
||||
item.status
|
||||
}}</el-text></el-col
|
||||
>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
props: {
|
||||
tableData: {
|
||||
type: Array
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
formatDate(time) {
|
||||
return new Date(time).toLocaleString()
|
||||
},
|
||||
pushTodo() {
|
||||
this.$router.push('/notice/view/all')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.card-text {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.card-item {
|
||||
margin-bottom: 5px;
|
||||
height: calc(((100vh - 56px - 40px - 20px) / 2 - 56px - 40px) / 5);
|
||||
min-height: 32px;
|
||||
}
|
||||
.homeCard {
|
||||
height: calc((100vh - 56px - 40px - 20px) / 2);
|
||||
min-height: calc((500px - 56px - 40px - 20px) / 2);
|
||||
}
|
||||
</style>
|
||||
@@ -10,7 +10,7 @@
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<work-card :tableData="works" />
|
||||
<affairs-card :tableData="affairs" />
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<work-card :tableData="works" />
|
||||
@@ -21,13 +21,16 @@
|
||||
|
||||
<script lang="ts">
|
||||
import request from '@/services'
|
||||
import AffairsCard from '@/components/home/AffairsCard.vue'
|
||||
|
||||
export default {
|
||||
name: 'HomePage',
|
||||
components: { AffairsCard },
|
||||
data() {
|
||||
return {
|
||||
works: [],
|
||||
notices: []
|
||||
notices: [],
|
||||
affairs: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
@@ -48,6 +51,14 @@ export default {
|
||||
.catch((reportError) => {
|
||||
console.log(reportError)
|
||||
})
|
||||
request
|
||||
.get('/affair/personal_affairs_limit')
|
||||
.then((response) => {
|
||||
this.affairs = response.data.data
|
||||
})
|
||||
.catch((reportError) => {
|
||||
console.log(reportError)
|
||||
})
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
@@ -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,30 +100,65 @@ 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: {
|
||||
getFormData() {
|
||||
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() {
|
||||
|
||||
Reference in New Issue
Block a user