最近签到记录加载优化

resources/assets/js/pages/manage/setting/checkin.vue

@@ -2,7 +2,10 @@
     <div class="setting-item submit">
         <Form ref="formData" label-width="auto" @submit.native.prevent>
             <Divider orientation="left" style="margin-top:0">{{$L('签到记录')}}</Divider>
-            <Timeline class="setting-checkin-lately">
+            <div v-if="latelyLoad > 0" class="setting-checkin-load">
+                <Loading/>
+            </div>
+            <Timeline v-else class="setting-checkin-lately">
                 <TimelineItem
                     v-for="(item, key) in latelyData"
                     :key="key"
@@ -18,6 +21,7 @@
             <Alert>
                 {{$L('设备连接上指定路由器（WiFi）后自动签到。')}}
             </Alert>
+            <div class="setting-checkin-row">
                 <Row class="setting-template">
                     <Col span="12">{{$L('设备MAC地址')}}</Col>
                     <Col span="12">{{$L('备注')}}</Col>
@@ -35,6 +39,7 @@
                         <Input v-model="item.remark" :maxlength="100" :placeholder="$L('备注')"/>
                     </Col>
                 </Row>
+            </div>
             <Button type="default" icon="md-add" @click="addDatum">{{$L('添加设备')}}</Button>
         </Form>
         <div class="setting-footer">
@@ -68,6 +73,7 @@ export default {
                 'remark': '',
             },
 
+            latelyLoad: 0,
             latelyData: [],
 
             calendarShow: false,
@@ -152,6 +158,7 @@ export default {
         },
 
         getLately() {
+            this.latelyLoad++
             this.$store.dispatch("call", {
                 url: 'users/checkin/list',
                 data: {
@@ -159,6 +166,8 @@ export default {
                 }
             }).then(({data}) => {
                 this.latelyFormat(data)
+            }).finally(_ => {
+                this.latelyLoad--
             })
         },
 

resources/assets/sass/pages/page-setting.scss

@@ -163,6 +163,13 @@
             line-height: 32px;
             margin-bottom: -10px;
         }
+        .setting-checkin-load {
+            margin-bottom: 12px;
+            .common-loading {
+                width: 20px;
+                height: 20px;
+            }
+        }
         .setting-checkin-lately {
             > li {
                 padding-bottom: 8px;
@@ -175,6 +182,9 @@
                 }
             }
         }
+        .setting-checkin-row {
+            overflow: auto;
+        }
         .setting-checkin-button {
             padding-bottom: 4px;
             cursor: pointer;