调整打卡细节

rest/project.http

@@ -7,8 +7,8 @@ content-type: application/json;charset=utf-8
 {
   "client": 1,
   "data": {
-    "credential": "123456",
-	  "identifier": "zb"
+    "credential": "999999",
+	  "identifier": "song"
   },
   "scene": 0,
   "type": 3

src/App.vue

@@ -1,8 +1,10 @@
 <template>
+  <a-locale-provider :locale="zh_CN">
     <div id="app">
       <head-nav class="head-nav" />
       <router-view></router-view>
     </div>
+  </a-locale-provider>
 </template>
 
 <script>

src/components/List/List.vue

@@ -6,6 +6,7 @@
       <div class="table-head-item">晚</div>
       <div class="table-head-item" style="width: 30%">审核人</div>
     </div>
+    <div id="scrollTo">
       <div v-if="clockInfos && clockInfos.length">
         <div v-for="(list, listIndex) in clockInfos" :key="listIndex" class="teble-box">
           <div class="table-time px-2">{{ list.dateTime }}</div>
@@ -26,7 +27,8 @@
                     v-else
                     type="primary"
                     size="small"
-                  @click="checkTime(listIndex, index, 0, record.id, record.memberId, record.checkerId)"
+                    :loading="morningLoading"
+                    @click="checkTime(listIndex, index, 0, record.id, record.memberId, record.checkerId, list.dateTime)"
                   >
                     打卡
                   </a-button>
@@ -83,7 +85,8 @@
                     v-else
                     type="primary"
                     size="small"
-                  @click="checkTime(listIndex, index, 1, record.id, record.memberId, record.checkerId)"
+                    :loading="nightLoading"
+                    @click="checkTime(listIndex, index, 1, record.id, record.memberId, record.checkerId, list.dateTime)"
                   >
                     打卡
                   </a-button>
@@ -142,6 +145,7 @@
       </div>
       <a-empty class="mt-8 mb-8" description="暂无打卡信息" v-else />
     </div>
+  </div>
 </template>
 
 <script>
@@ -178,16 +182,26 @@ export default {
       showMorningTime: false,
       chooseTime: '',
       auditOptions: null,
+      morningLoading: false,
+      nightLoading: false,
+      startTime: '',
+      endTime: '',
     };
   },
 
   computed: mapState('home', ['projectId', 'members']),
 
   mounted() {
-    this.timer = setInterval(() => {
+    this.timer = setInterval(async () => {
       if (this.projectId) {
         clearInterval(this.timer);
-        this.setParams();
+        await this.setParams();
+
+        // 自动移动到目标位置
+        document.querySelector('#scrollTo').scrollIntoView({
+          behavior: 'smooth', // 平滑过渡
+          block: 'start', // 上边框与视窗顶部平齐。默认值
+        });
       }
     }, 300);
   },
@@ -196,10 +210,10 @@ export default {
     async setParams(options) {
       const { projectId } = this;
       const time = this.$moment(Date.now()).format('YYYY-MM-DD');
-      const startTime = (options && options.startTime) || this.$moment(`${time} 00:00`).format('x') - 0;
-      const endTime = (options && options.endTime) || this.$moment(`${time} 23:59`).format('x') - 0;
-      const memberIdList = (options && options.memberIdList) || this.memberIdList;
-      const params = { param: { projectId, memberIdList, startTime, endTime } };
+      this.startTime = (options && options.startTime) || this.$moment(`${time} 00:00`).format('x') - 0;
+      this.endTime = (options && options.endTime) || this.$moment(`${time} 23:59`).format('x') - 0;
+      this.memberIdList = (options && options.memberIdList) || [];
+      const params = { param: { projectId, memberIdList: this.memberIdList, startTime: this.startTime, endTime: this.endTime } };
       await this.getClockQuery(params);
     },
 
@@ -231,7 +245,7 @@ export default {
     },
 
     // 打卡
-    checkTime(listIndex, index, clockType, id, memberId, checkerId) {
+    checkTime(listIndex, index, clockType, id, memberId, checkerId, clockTime) {
       const time = Date.now();
       const selectTime = this.$moment(time).format('HH:mm');
       if (clockType === 0) {
@@ -239,7 +253,7 @@ export default {
       } else {
         this.clockInfos[listIndex].recordList[index].night = selectTime;
       }
-      const dateTime = this.$moment(time).format('x') - 0;
+      const dateTime = this.$moment(`${clockTime} ${selectTime}`).format('x') - 0;
       const params = { param: { checkerId: this.checkerId || checkerId || this.members[0].memberId, clockType, dateTime, id, memberId } };
       this.handleClockPunch(params);
     },
@@ -254,16 +268,32 @@ export default {
      */
     async handleClockPunch(params) {
       try {
+        if (params.param.clockType === 0) {
+          this.morningLoading = true;
+        } else {
+          this.nightLoading = true;
+        }
         const res = await clockPunch(params);
         const { code, msg } = res.data;
         if (code === 200) {
           this.$message.success('打卡成功');
-          this.setParams();
+          const options = { startTime: this.startTime, endTime: this.endTime, memberIdList: this.memberIdList };
+          this.setParams(options);
         } else {
           this.$message.error(msg || '打卡失败');
           throw msg;
         }
+        if (params.param.clockType === 0) {
+          this.morningLoading = false;
+        } else {
+          this.nightLoading = false;
+        }
       } catch (error) {
+        if (params.param.clockType === 0) {
+          this.morningLoading = false;
+        } else {
+          this.nightLoading = false;
+        }
         throw error || '打卡失败';
       }
     },
@@ -336,7 +366,8 @@ export default {
           this.showNightTime = false;
           this.showMorningTime = false;
           this.auditOptions = null;
-          this.setParams();
+          const options = { startTime: this.startTime, endTime: this.endTime, memberIdList: this.memberIdList };
+          this.setParams(options);
         } else {
           this.$message.error(msg || '审核失败');
           throw msg;
@@ -359,9 +390,10 @@ export default {
 }
 
 .table-time {
-  height: 36px;
-  line-height: 36px;
+  height: 30px;
+  line-height: 30px;
   border-bottom: 1px solid #e8e8e8;
+  background: #fafafa;
 }
 
 .table-head-item {

src/components/MemberPicker/MemberPicker.vue

@@ -22,7 +22,7 @@ export default {
       setTimeout(() => {
         const options = { memberIdList: value };
         this.$emit('changeTime', options);
-      }, 800);
+      }, 1000);
     },
   },
 };

src/components/TimePicker/TimePicker.vue

@@ -3,24 +3,36 @@
     <a-date-picker
       v-model="startValue"
       :disabled-date="disabledStartDate"
-      show-time
       allow-clear
       locale="zh-cn"
       :format="monthFormat"
       placeholder="起始时间"
       class="box box1"
+      :show-today="false"
+      :open="startOpen"
       @openChange="handleStartOpenChange"
-    />
+    >
+      <template slot="renderExtraFooter">
+        <a-button size="small" type="primary" ghost @click="setYesterday('startValue', 'startOpen')">昨天</a-button>
+        <a-button class="ml-3" size="small" type="primary" ghost @click="setToday('startValue', 'startOpen')">今天</a-button>
+      </template>
+    </a-date-picker>
     <a-date-picker
       v-model="endValue"
       :disabled-date="disabledEndDate"
       allow-clear
       :format="monthFormat"
       class="box box2"
+      :show-today="false"
       placeholder="截止时间"
       :open="endOpen"
       @openChange="handleEndOpenChange"
-    />
+    >
+      <template slot="renderExtraFooter">
+        <a-button size="small" type="primary" ghost @click="setYesterday('endValue', 'endOpen')">昨天</a-button>
+        <a-button class="ml-3" size="small" type="primary" ghost @click="setToday('endValue', 'endOpen')">今天</a-button>
+      </template>
+    </a-date-picker>
   </div>
 </template>
 
@@ -31,18 +43,42 @@ export default {
       monthFormat: 'YYYY-MM-DD',
       startValue: null,
       endValue: null,
+      startOpen: false,
       endOpen: false,
     };
   },
   watch: {
-    startValue(val) {
-      console.log('startValue', val);
-    },
     endValue(val) {
-      console.log('endValue', val);
+      if (!this.startValue) {
+        this.$message.error('请选择起始时间');
+        return;
+      }
+      if (this.startValue && val) {
+        const startTime = this.$moment(this.startValue).format('x');
+        const endTime = this.$moment(this.endValue).format('x');
+        const options = { startTime, endTime };
+        this.$emit('changeTime', options);
+      }
     },
   },
   methods: {
+    // 昨天
+    setYesterday(value, open) {
+      this[value] = this.$moment(new Date().getTime() - 24 * 60 * 60 * 1000).format('YYYY-MM-DD');
+      this[open] = false;
+      if (open === 'startOpen' && !this.startOpen) {
+        this.endOpen = true;
+      }
+    },
+
+    setToday(value, open) {
+      this[value] = this.$moment(new Date()).format('YYYY-MM-DD');
+      this[open] = false;
+      if (open === 'startOpen' && !this.startOpen) {
+        this.endOpen = true;
+      }
+    },
+
     disabledStartDate(startValue) {
       const endValue = this.endValue;
       if (!startValue || !endValue) {
@@ -58,20 +94,13 @@ export default {
       return startValue.valueOf() >= endValue.valueOf();
     },
     handleStartOpenChange(open) {
+      this.startOpen = open;
       if (!open) {
         this.endOpen = true;
       }
     },
     handleEndOpenChange(open) {
       this.endOpen = open;
-      if (!this.startValue) {
-        this.$message.error('请选择起始时间');
-      } else {
-        const startTime = this.$moment(this.startValue).format('x');
-        const endTime = this.$moment(this.endValue).format('x');
-        const options = { startTime, endTime };
-        this.$emit('changeTime', options);
-      }
     },
   },
 };

src/plugins/ant-design-vue.js

@@ -44,6 +44,7 @@ import {
   Skeleton,
   Drawer,
   TimePicker,
+  LocaleProvider,
 } from 'ant-design-vue';
 import { ConfigProvider } from 'ant-design-vue';
 Vue.component(ConfigProvider.name, ConfigProvider);
@@ -82,6 +83,7 @@ Vue.use(Card);
 Vue.use(Skeleton);
 Vue.use(Drawer);
 Vue.use(TimePicker);
+Vue.use(LocaleProvider);
 
 Vue.prototype.$message = message;
 Vue.prototype.$notification = notification;