完善功能

src/components/FontIcon/index.vue

@@ -0,0 +1,17 @@
+<template>
+  <i class="fa" :class="`${name}`" aria-hidden="true"></i>
+</template>
+
+<script>
+import './font-awesome-4.7.0/css/font-awesome.min.css'
+export default {
+  name: 'FontIcon',
+  props: {
+    name: {
+      type: String,
+      required: false,
+      default: 'font-awesome'
+    }
+  }
+}
+</script>

src/store/modules/user.js

@@ -24,6 +24,12 @@ const actions = {
             })
             resolve()
         })
+    },
+    logout(context) {
+        context.commit('setData', {
+            token: null,
+            userInfo: null
+        })
     }
 }
 

src/views/form/statistics.vue

@@ -1,21 +1,28 @@
 <template>
     <div class="statistics-container">
         <div class="filter-table-view">
-            <el-form :inline="true" class="demo-form-inline">
-                <el-form-item label="审批人">
-                    <el-input placeholder="审批人"></el-input>
-                </el-form-item>
-                <el-form-item label="活动区域">
-
+            <el-form :inline="true"  class="demo-form-inline" ref="filterForm">
+                <el-form-item label="提交时间" prop="endDateTime">
+                    <el-date-picker
+                        v-model="queryConditions.beginDateTime"
+                        type="datetime"
+                        placeholder="开始时间">
+                    </el-date-picker>
+                    <span> 至 </span>
+                    <el-date-picker
+                        v-model="queryConditions.endDateTime"
+                        type="datetime"
+                        placeholder="结束时间">
+                    </el-date-picker>
                 </el-form-item>
                 <el-form-item>
-                    <el-button type="primary">查询</el-button>
+                    <el-button type="primary" @click="queryProjectResult">查询</el-button>
                 </el-form-item>
             </el-form>
         </div>
         <div class="result-table-view">
             <el-table
-                stripe :header-cell-style="{background:'#184F7D'}"
+                stripe :header-cell-style="{background:'#2466a0'}"
                 :data="projectResultList">
                 <el-table-column
                     type="selection"
@@ -107,7 +114,9 @@ export default {
             projectItemColumns: {},
             //查询条件
             queryConditions: {
-                projectKey: ''
+                projectKey: '',
+                beginDateTime: '',
+                endDateTime: ''
             }
         }
     }, methods: {
@@ -118,7 +127,7 @@ export default {
         },
         queryProjectResult() {
             this.$api.post(`/user/project/result/query`, this.queryConditions).then(res => {
-                this.projectResultList = res.data
+                this.projectResultList = res.data.records
             })
         },
         saveStatisticsCheckedColumns() {

src/views/form/write.vue

@@ -1,8 +1,12 @@
 <template>
     <div class="write-container">
         <div v-if="writeStatus==0">
+            <div style="display: flex;justify-content: center">
+                <div class="icon-view" style="background-color: red">
+                    <i class="el-icon-check success-icon"/>
+                </div>
+            </div>
             <p style="text-align: center" v-if="writeNotStartPrompt">
-                <i class="el-icon-check"/>
                 <span v-if="writeNotStartPrompt">{{ writeNotStartPrompt }}</span>
             </p>
         </div>
@@ -19,8 +23,13 @@
                     :src="userProjectSetting.submitPromptImg"
                     fit="cover"></el-image>
             </div>
+            <div style="display: flex;justify-content: center">
+                <div class="icon-view">
+                    <i class="el-icon-check success-icon"/>
+                </div>
+            </div>
             <p style="text-align: center">
-                <i class="el-icon-check"/>
+
                 <span v-if="userProjectSetting.submitPromptText">{{ userProjectSetting.submitPromptText }}</span>
                 <span v-else>{{ globalDefaultValue.projectSubmitPromptText }}</span>
             </p>
@@ -46,7 +55,7 @@ export default {
                 preview: false,
                 showBtns: true
             },
-            writeStatus: 1,
+            writeStatus: 3,
             writeNotStartPrompt: '',
             userProjectSetting: {
                 submitPromptText: ''
@@ -220,4 +229,21 @@ export default {
     margin: 0;
     padding: 0;
 }
+.icon-view {
+    width: 59px;
+    height: 59px;
+    border-radius: 100px;
+    background-color: #0076FF;
+    display: flex;
+    align-items: center;
+    align-content: center;
+    justify-items: center;
+    justify-content: center;
+}
+
+.success-icon {
+    text-align: center;
+    color: white;
+    font-size: 30px;
+}
 </style>

src/views/home/index.vue

@@ -36,9 +36,40 @@
                     <el-link href="https://element.eleme.io" target="_blank">帮助</el-link>
                 </el-col>
                 <el-col :span="3">
-                    <div style="display: flex; align-items: center; justify-content: center;">
-                        <img :src="getUserInfo.avatar" style="width: 50px; height: 50px; border-radius: 100px;">
-                    </div>
+                    <el-popover
+                        placement="bottom-end"
+                        width="200"
+                        trigger="click"
+                    >
+                        <div class="user-person-menu">
+                            <div>
+                                <p class="nick-name">{{ getUserInfo.name }}</p>
+                            </div>
+                            <div class="person-menu-divider" />
+                            <div>
+                                <p class="person-menu-item">
+                                    <font-icon class="fab fa-get-pocket" />
+                                    我的账户
+                                </p>
+                                <p class="person-menu-item">
+                                    <font-icon class="fas fa-envelope" />
+                                    站内信
+                                </p>
+                                <p class="person-menu-item">
+                                    <font-icon class="fas fa-user-circle" />
+                                    联系人
+                                </p>
+                                <div class="person-menu-divider" />
+                                <p class="person-menu-item" @click="logoutHandle">
+                                    <font-icon class="fas fa-sign-out" />
+                                    退出登录
+                                </p>
+                            </div>
+                        </div>
+                        <div slot="reference" style="display: flex; align-items: center; justify-content: center;">
+                            <img :src="getUserInfo.avatar" style="width: 50px; height: 50px; border-radius: 100px;">
+                        </div>
+                    </el-popover>
                 </el-col>
             </el-row>
         </el-header>
@@ -49,9 +80,12 @@
 </template>
 <script>
 import store from '@/store/index.js'
+import FontIcon from '@/components/FontIcon'
+import router from '@/router'
 
 export default {
     name: 'Home',
+    components: {FontIcon},
     data() {
         return {
             menuIndex: null,
@@ -90,6 +124,16 @@ export default {
     methods: {
         activeMenuHandle(routerPath) {
             this.menuIndex = routerPath
+        },
+        logoutHandle() {
+            this.$store.dispatch('user/logout').then(() => {
+                router.push({
+                    path: '/login',
+                    query: {
+                        redirect: router.currentRoute.fullPath
+                    }
+                })
+            })
         }
     }
 }
@@ -122,5 +166,26 @@ export default {
         float: left;
     }
 }
+.user-person-menu {
+    .nick-name {
+        height: 16px;
+        color: rgba(70, 70, 70, 86);
+        font-size: 14px;
+        line-height: 16px;
+        text-align: left;
+    }
+    .person-menu-item {
+        color: rgba(70, 70, 70, 86);
+        font-size: 14px;
+        text-align: left;
+    }
+    .person-menu-item:hover {
+        cursor: pointer;
+    }
+    .person-menu-divider {
+        background-color: rgba(210, 210, 210, 78);
+        border: 1px solid rgba(210, 210, 210, 78);
+    }
+}
 
 </style>