From 84f543d6c9444d314669af4b9278bd0c9c561c30 Mon Sep 17 00:00:00 2001
From: song <srf428110@163.com>
Date: Thu, 2 Sep 2021 13:23:20 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E6=89=93=E5=8D=A1=E7=BB=86?=
 =?UTF-8?q?=E8=8A=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 rest/project.http                            |   4 +-
 src/App.vue                                  |  10 +-
 src/components/List/List.vue                 | 296 ++++++++++---------
 src/components/MemberPicker/MemberPicker.vue |   2 +-
 src/components/TimePicker/TimePicker.vue     |  59 +++-
 src/plugins/ant-design-vue.js                |   2 +
 6 files changed, 219 insertions(+), 154 deletions(-)

diff --git a/rest/project.http b/rest/project.http
index c69c535..48179b8 100644
--- a/rest/project.http
+++ b/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
diff --git a/src/App.vue b/src/App.vue
index bf8b36c..db464f1 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,8 +1,10 @@
 <template>
-  <div id="app">
-    <head-nav class="head-nav" />
-    <router-view></router-view>
-  </div>
+  <a-locale-provider :locale="zh_CN">
+    <div id="app">
+      <head-nav class="head-nav" />
+      <router-view></router-view>
+    </div>
+  </a-locale-provider>
 </template>
 
 <script>
diff --git a/src/components/List/List.vue b/src/components/List/List.vue
index a1dbce4..b0cc3d6 100644
--- a/src/components/List/List.vue
+++ b/src/components/List/List.vue
@@ -6,141 +6,145 @@
       <div class="table-head-item">晚</div>
       <div class="table-head-item" style="width: 30%">审核人</div>
     </div>
-    <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>
-        <a-table :pagination="false" :show-header="false" :columns="columns" :data-source="list.recordList">
-          <!-- 早 -->
-          <template slot="morning" slot-scope="text, record, index">
-            <div v-if="!record.isMine && !record.isChecker">
-              <span v-if="record.morningStatus">{{ $moment(record.morning - 0).format('HH:mm') }}</span>
-              <span v-else>未打卡</span>
-            </div>
-
-            <div v-else>
-              <div v-if="record.isMine">
-                <span v-if="record.morningStatus" class="baseColor font-bold">
-                  {{ $moment(record.morning - 0).format('HH:mm') }}
-                </span>
-                <a-button
-                  v-else
-                  type="primary"
-                  size="small"
-                  @click="checkTime(listIndex, index, 0, record.id, record.memberId, record.checkerId)"
-                >
-                  打卡
-                </a-button>
+    <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>
+          <a-table :pagination="false" :show-header="false" :columns="columns" :data-source="list.recordList">
+            <!-- 早 -->
+            <template slot="morning" slot-scope="text, record, index">
+              <div v-if="!record.isMine && !record.isChecker">
+                <span v-if="record.morningStatus">{{ $moment(record.morning - 0).format('HH:mm') }}</span>
+                <span v-else>未打卡</span>
               </div>
 
-              <div v-if="record.isChecker">
-                <div v-if="record.morningStatus && !showMorningTime">
-                  <a-popconfirm
-                    ok-text="取消"
-                    cancel-text="修改"
-                    ok-type=""
-                    @confirm="cancel"
-                    :visible="morningVisible"
-                    @cancel="changeStatus(record.id, 0, 'morning')"
+              <div v-else>
+                <div v-if="record.isMine">
+                  <span v-if="record.morningStatus" class="baseColor font-bold">
+                    {{ $moment(record.morning - 0).format('HH:mm') }}
+                  </span>
+                  <a-button
+                    v-else
+                    type="primary"
+                    size="small"
+                    :loading="morningLoading"
+                    @click="checkTime(listIndex, index, 0, record.id, record.memberId, record.checkerId, list.dateTime)"
                   >
-                    <a-icon slot="icon" type="" />
-                    <a-button slot="title" size="small" @click="rejectStatus(record.id, 1, 'morning', record.morning)">驳回</a-button>
-                    <span
-                      class="font-bold"
-                      :class="record.morningStatus === 2 ? 'line-through red--text' : 'green--text'"
-                      @click="changeVisible(record.morningStatus, 'morningVisible')"
+                    打卡
+                  </a-button>
+                </div>
+
+                <div v-if="record.isChecker">
+                  <div v-if="record.morningStatus && !showMorningTime">
+                    <a-popconfirm
+                      ok-text="取消"
+                      cancel-text="修改"
+                      ok-type=""
+                      @confirm="cancel"
+                      :visible="morningVisible"
+                      @cancel="changeStatus(record.id, 0, 'morning')"
                     >
-                      {{ $moment(record.morning - 0).format('HH:mm') }}
-                    </span>
-                  </a-popconfirm>
+                      <a-icon slot="icon" type="" />
+                      <a-button slot="title" size="small" @click="rejectStatus(record.id, 1, 'morning', record.morning)">驳回</a-button>
+                      <span
+                        class="font-bold"
+                        :class="record.morningStatus === 2 ? 'line-through red--text' : 'green--text'"
+                        @click="changeVisible(record.morningStatus, 'morningVisible')"
+                      >
+                        {{ $moment(record.morning - 0).format('HH:mm') }}
+                      </span>
+                    </a-popconfirm>
+                  </div>
+                  <div v-if="!record.morningStatus && !showMorningTime">未打卡</div>
+                  <!-- 修改时间 -->
+                  <a-time-picker
+                    placeholder="请选择"
+                    style="width: 100%"
+                    v-if="showMorningTime"
+                    format="HH:mm"
+                    class="px-2"
+                    @change="timeChange"
+                    @openChange="openChange($event, 'morning')"
+                  />
                 </div>
-                <div v-if="!record.morningStatus && !showMorningTime">未打卡</div>
-                <!-- 修改时间 -->
-                <a-time-picker
-                  placeholder="请选择"
-                  style="width: 100%"
-                  v-if="showMorningTime"
-                  format="HH:mm"
-                  class="px-2"
-                  @change="timeChange"
-                  @openChange="openChange($event, 'morning')"
-                />
               </div>
-            </div>
-          </template>
-          <!-- 晚 -->
-          <template slot="night" slot-scope="text, record, index">
-            <div v-if="!record.isMine && !record.isChecker">
-              <span v-if="record.nightStatus">{{ $moment(record.night - 0).format('HH:mm') }}</span>
-              <span v-else>未打卡</span>
-            </div>
-
-            <div v-else>
-              <div v-if="record.isMine">
-                <span v-if="record.nightStatus" class="baseColor font-bold">
-                  {{ $moment(record.night - 0).format('HH:mm') }}
-                </span>
-                <a-button
-                  v-else
-                  type="primary"
-                  size="small"
-                  @click="checkTime(listIndex, index, 1, record.id, record.memberId, record.checkerId)"
-                >
-                  打卡
-                </a-button>
+            </template>
+            <!-- 晚 -->
+            <template slot="night" slot-scope="text, record, index">
+              <div v-if="!record.isMine && !record.isChecker">
+                <span v-if="record.nightStatus">{{ $moment(record.night - 0).format('HH:mm') }}</span>
+                <span v-else>未打卡</span>
               </div>
 
-              <div v-if="record.isChecker">
-                <div v-if="record.nightStatus && !showNightTime">
-                  <a-popconfirm
-                    ok-text="取消"
-                    cancel-text="修改"
-                    ok-type=""
-                    @confirm="cancel"
-                    :visible="visible"
-                    @cancel="changeStatus(record.id, 0, 'night')"
+              <div v-else>
+                <div v-if="record.isMine">
+                  <span v-if="record.nightStatus" class="baseColor font-bold">
+                    {{ $moment(record.night - 0).format('HH:mm') }}
+                  </span>
+                  <a-button
+                    v-else
+                    type="primary"
+                    size="small"
+                    :loading="nightLoading"
+                    @click="checkTime(listIndex, index, 1, record.id, record.memberId, record.checkerId, list.dateTime)"
                   >
-                    <a-icon slot="icon" type="" />
-                    <a-button slot="title" size="small" @click="rejectStatus(record.id, 1, 'night', record.night)">驳回</a-button>
-                    <span
-                      class="font-bold"
-                      :class="record.nightStatus === 2 ? 'line-through red--text' : 'green--text'"
-                      @click="changeVisible(record.nightStatus, 'visible')"
+                    打卡
+                  </a-button>
+                </div>
+
+                <div v-if="record.isChecker">
+                  <div v-if="record.nightStatus && !showNightTime">
+                    <a-popconfirm
+                      ok-text="取消"
+                      cancel-text="修改"
+                      ok-type=""
+                      @confirm="cancel"
+                      :visible="visible"
+                      @cancel="changeStatus(record.id, 0, 'night')"
                     >
-                      {{ $moment(record.night - 0).format('HH:mm') }}
-                    </span>
-                  </a-popconfirm>
+                      <a-icon slot="icon" type="" />
+                      <a-button slot="title" size="small" @click="rejectStatus(record.id, 1, 'night', record.night)">驳回</a-button>
+                      <span
+                        class="font-bold"
+                        :class="record.nightStatus === 2 ? 'line-through red--text' : 'green--text'"
+                        @click="changeVisible(record.nightStatus, 'visible')"
+                      >
+                        {{ $moment(record.night - 0).format('HH:mm') }}
+                      </span>
+                    </a-popconfirm>
+                  </div>
+                  <div v-if="!record.nightStatus && !showNightTime">未打卡</div>
+                  <!-- 修改时间 -->
+                  <a-time-picker
+                    placeholder="请选择"
+                    style="width: 100%"
+                    v-if="showNightTime"
+                    format="HH:mm"
+                    class="px-2"
+                    @change="timeChange"
+                    @openChange="openChange($event, 'night')"
+                  />
                 </div>
-                <div v-if="!record.nightStatus && !showNightTime">未打卡</div>
-                <!-- 修改时间 -->
-                <a-time-picker
-                  placeholder="请选择"
-                  style="width: 100%"
-                  v-if="showNightTime"
-                  format="HH:mm"
-                  class="px-2"
-                  @change="timeChange"
-                  @openChange="openChange($event, 'night')"
-                />
               </div>
-            </div>
-          </template>
-          <!-- 审核人 -->
-          <template slot="checkerName" slot-scope="text, record">
-            <div class="px-2">
-              <div v-if="!record.isMine || (record.isMine && record.morningStatus && record.nightStatus)">
-                {{ record.checkerName || members[0].name }}
+            </template>
+            <!-- 审核人 -->
+            <template slot="checkerName" slot-scope="text, record">
+              <div class="px-2">
+                <div v-if="!record.isMine || (record.isMine && record.morningStatus && record.nightStatus)">
+                  {{ record.checkerName || members[0].name }}
+                </div>
+                <a-select v-else :default-value="record.checkerId || members[0].memberId" style="width: 100%" @change="chooseChecker">
+                  <a-select-option :value="member.memberId" v-for="member in members" :key="member.memberId">
+                    {{ member.name }}
+                  </a-select-option>
+                </a-select>
               </div>
-              <a-select v-else :default-value="record.checkerId || members[0].memberId" style="width: 100%" @change="chooseChecker">
-                <a-select-option :value="member.memberId" v-for="member in members" :key="member.memberId">
-                  {{ member.name }}
-                </a-select-option>
-              </a-select>
-            </div>
-          </template>
-        </a-table>
+            </template>
+          </a-table>
+        </div>
       </div>
+      <a-empty class="mt-8 mb-8" description="暂无打卡信息" v-else />
     </div>
-    <a-empty class="mt-8 mb-8" description="暂无打卡信息" v-else />
   </div>
 </template>
 
@@ -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 {
diff --git a/src/components/MemberPicker/MemberPicker.vue b/src/components/MemberPicker/MemberPicker.vue
index 93adbb5..a3d5398 100644
--- a/src/components/MemberPicker/MemberPicker.vue
+++ b/src/components/MemberPicker/MemberPicker.vue
@@ -22,7 +22,7 @@ export default {
       setTimeout(() => {
         const options = { memberIdList: value };
         this.$emit('changeTime', options);
-      }, 800);
+      }, 1000);
     },
   },
 };
diff --git a/src/components/TimePicker/TimePicker.vue b/src/components/TimePicker/TimePicker.vue
index e6a825e..dc94d01 100644
--- a/src/components/TimePicker/TimePicker.vue
+++ b/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);
-      }
     },
   },
 };
diff --git a/src/plugins/ant-design-vue.js b/src/plugins/ant-design-vue.js
index e62b9ec..229ade3 100644
--- a/src/plugins/ant-design-vue.js
+++ b/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;