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

ui/src/components/home/AffairsCard.vue

@@ -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>

ui/src/pages/home/Home.vue

@@ -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() {

ui/src/pages/profile/PersonalProfile.vue

@@ -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-form-item label="用户名" prop="username">
-                        <el-input v-model="form.userId" />
+                        <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-form-item label="性别" prop="gender">
-                                <el-select v-model="form.gender" size="default" style="width: 90%">
+                                <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="info" @click="resetForm">重置</el-button>
-                        <el-button type="primary">保存</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: '未知',
+                    label: '保密',
-                    value: '0'
+                    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() {