前台页面

src/views/h5/form/index.vue

@@ -25,6 +25,11 @@
       :row-key="(row) => row._index"
       :table-item="table"
       :auths="[]"
+      :row-style="({ row }) => {
+        return {
+          'height': '44px'
+        }
+      }"
     >
     </xy-table>
 
@@ -50,7 +55,7 @@
           <el-form-item label="内容" required prop="content">
             <el-input
               type="textarea"
-              :autosize="{ minRows: 30 }"
+              :autosize="{ minRows: 15 }"
               v-model="form.content"
             ></el-input>
           </el-form-item>
@@ -86,7 +91,12 @@
       </div>
     </el-drawer>
 
-    <detail ref="show" @edit="editShow"></detail>
+    <detail ref="show"
+            @edit="editShow"
+            @destroyed="() => {
+              getCategories()
+              getStatics()
+            }"></detail>
   </div>
 </template>
 
@@ -98,7 +108,7 @@ export default {
   components: {
     detail
   },
-  inject: ['myInfo', 'statics'],
+  inject: ['myInfo', 'statics', 'getStatics'],
   data() {
     return {
       isShowDrawer: false,
@@ -156,11 +166,11 @@ export default {
           label: "填报要求",
           width: 240,
           customFn: row => {
-            return(<div>
+            return row._is_end ? (<div>
               {
                 row.rules.map(item => (<div>{item.start_at} ~ {item.end_at}不少于{item.quantity}条</div>))
               }
-            </div>)
+            </div>) : ''
           }
         },
         {
@@ -274,13 +284,18 @@ export default {
       })
       this.$integrateData(this.form, res)
       this.form.id = id
+      this.fileList = res?.files?.map(i => ({
+        name: i.original_name,
+        url: i.url,
+        response: i
+      })) || []
     },
 
     async editShow (id) {
       this.type = 'edit'
       await this.getDetail(id)
       let rule = this.pickRule.find(i => i.id === this.form.category_rule_id)
-      this.form._week = `${rule.start_at} ~ ${rule.end_at}`
+      this.form._week = `${rule?.start_at || ''} ~ ${rule?.end_at || ''}`
 
       this.isShowDrawer = true
     },
@@ -362,6 +377,7 @@ export default {
               });
               this.isShowDrawer = false;
               this.getCategories()
+              this.getStatics()
             });
           } else {
             save(this.form).then((res) => {

src/views/h5/form/show.vue

@@ -77,6 +77,7 @@ export default {
                                   message: '删除成功!'
                                 });
                                 _this.$refs['xyTable'].getTableData()
+                                this.$emit('destroyed')
                               })
                             })
                           }

src/views/h5/home/index.vue

@@ -7,10 +7,12 @@
           {{ descriptionLabel(key) }}
         </el-descriptions-item>
         <el-descriptions-item label="本年统计">
-          正常填报{{ static.count_normal }}，迟报{{ static.count_delayed }}，超期未报{{ static.count_missed }}
+          <div class="card__status">
+            正常填报<div class="cir1"></div>{{ static.count_normal }}，迟报<div class="cir2"></div>{{ static.count_delayed }}，超期未报<div class="cir3"></div>{{ static.count_missed }}
+          </div>
         </el-descriptions-item>
       </el-descriptions>
-      <Button type="primary" long @click="$router.push('/h5/form')">进入填报页面</Button>
+      <Button style="margin-top: 24px;height: 34px;" type="primary" long @click="$router.push('/h5/form')">进入填报页面</Button>
     </Card>
   </div>
 </template>
@@ -21,9 +23,9 @@ export default {
   data() {
     return {
       descriptions: {
-        "department.name": "市委",
-        "name": "姓名",
-        "position": "职位",
+        "department.name": "部\u3000\u3000门",
+        "name": "姓\u3000\u3000名",
+        "position": "职\u3000\u3000位",
         "start_at": "开始填报",
         "end_at": "结束填报"
       }
@@ -71,8 +73,29 @@ export default {
   top: calc(50% - #{$height} / 2);
 
   .title {
+    font-size: 24px;
     text-align: center;
     padding: 20px 0;
   }
+
+  &__status {
+    $color: #377e22,#f2a93c,#ea3423;
+    display: flex;
+    align-items: center;
+    font-size: 12px;
+
+    @mixin cir {
+      padding: 8px;
+      border-radius: 100%;
+
+      margin: 0 6px;
+    }
+    @for $i from 1 through length($color) {
+      .cir#{$i} {
+        @include cir;
+        background: nth($color, $i);
+      }
+    }
+  }
 }
 </style>

src/views/h5/index.vue

@@ -41,6 +41,7 @@ export default {
     return {
       myInfo: () => this.myInfo,
       statics: () => this.statics,
+      getStatics: this.getStatics,
     }
   },
   data() {
@@ -51,17 +52,35 @@ export default {
         count_normal: 0,
         count_delayed: 0,
         count_missed: 0
-      }
+      },
+      loadingInstance: null,
     }
   },
   methods: {
     async getStatics () {
       this.statics = await getYearStatistics(this.select);
     },
+    async getInfo () {
+      this.myInfo = await getBaseInfo()
+    },
 
     async logout() {
       await this.$store.dispatch('user/logout')
       this.$router.push(`/h5/login?redirect=${this.$route.fullPath}`)
+    },
+
+    loading () {
+      this.loadingInstance = this.$loading({
+        lock: true,
+        text: 'Loading',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.8)'
+      })
+    },
+    loaded () {
+      if (this.loadingInstance && this.loadingInstance.close) {
+        this.loadingInstance.close()
+      }
     }
   },
   computed: {
@@ -69,9 +88,14 @@ export default {
       return this.$route.path
     }
   },
-  created() {
-    this.getStatics();
-    getBaseInfo().then(res => (this.myInfo = res))
+  async created() {
+    try {
+      this.loading()
+      await Promise.all([this.getStatics(),this.getInfo()])
+      this.loaded()
+    } catch (e) {
+      this.loaded()
+    }
   }
 }
 </script>