From 6cfd78f30124f0ce2d9285827e20e951db919b65 Mon Sep 17 00:00:00 2001
From: song <srf428110@163.com>
Date: Fri, 10 Sep 2021 18:33:48 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=A4=9A=E5=A4=84=E7=BB=86?=
 =?UTF-8?q?=E8=8A=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/HeadNav/HeadNav.vue           |  18 ++-
 src/components/List/List.vue                 | 157 +++++++++++--------
 src/components/MemberPicker/MemberPicker.vue |   8 +-
 src/store/modules/home/actions.js            |   8 +
 src/store/modules/home/mutations.js          |   9 ++
 src/store/modules/home/state.js              |   1 +
 6 files changed, 131 insertions(+), 70 deletions(-)

diff --git a/src/components/HeadNav/HeadNav.vue b/src/components/HeadNav/HeadNav.vue
index ba8070b..15201a3 100644
--- a/src/components/HeadNav/HeadNav.vue
+++ b/src/components/HeadNav/HeadNav.vue
@@ -21,8 +21,22 @@
       </div>
     </div>
     <a-modal v-model="visible" @ok="handleOk" title="提示">
-      <p>静态小红点：审核人未审核你的打卡状态</p>
-      <p>动态小红点：某成员选择你为打卡人，需要你审核</p>
+      <div style="max-height: 250px; overflow-y: auto">
+        <!-- 打卡审核规则以及各种状态代表什么 -->
+        <p>打卡时需选择自己的项目经理为审核人，审核人未审核时显示小红点</p>
+        <p>自己的：打卡没审核时，显示静态小红点。已审核，没有小红点，文字变为蓝色。</p>
+        <p>
+          审核人：某成员选择你为打卡人，需要你审核，该成员的打卡时间上有动态小红点，确认或驳回后小红点消失。点击该时间，出现局部确认框，确认、驳回、修改、取消。
+        </p>
+        <p>其他人：不是自己也不是审核人。打开未审核，显示浅色小黄点</p>
+        <p>
+          审核人操作：<br />
+          确认，代表审核通过。通过后，小红点消失，文字变为绿色；<br />
+          驳回，代表该次打卡无效，成划线状态，灰色；<br />
+          修改，时间变为时间选择框，选择输入更新打卡时间，日期不变，时分变；<br />
+          取消，隐藏局部确认框
+        </p>
+      </div>
     </a-modal>
   </div>
 </template>
diff --git a/src/components/List/List.vue b/src/components/List/List.vue
index 953d769..270ee56 100644
--- a/src/components/List/List.vue
+++ b/src/components/List/List.vue
@@ -14,7 +14,10 @@
             <!-- 早 -->
             <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-if="record.morningStatus" class="daka" :class="record.morningStatus === 2 ? 'line-through' : ''"
+                  >{{ $moment(record.morning - 0).format('HH:mm') }}
+                  <div class="dian dian-yellow" v-if="record.morningStatus === 1"></div
+                ></span>
                 <span v-else>未打卡</span>
               </div>
 
@@ -24,12 +27,13 @@
                     {{ $moment(record.morning - 0).format('HH:mm') }}
                     <div class="dian"></div>
                   </span>
-                  <span v-else-if="record.morningStatus === 2" class="line-through text-red-500 font-bold">
+                  <span v-else-if="record.morningStatus === 2" class="line-through text-gray-400 font-bold">
                     {{ $moment(record.morning - 0).format('HH:mm') }}
                   </span>
                   <span v-else-if="record.morningStatus === 3" class="text-blue-500 font-bold">
                     {{ $moment(record.morning - 0).format('HH:mm') }}
                   </span>
+                  <span v-else-if="today !== list.dateTime">未打卡</span>
                   <a-button
                     v-else
                     type="primary"
@@ -42,17 +46,21 @@
                 </div>
 
                 <div v-if="record.isChecker">
-                  <div v-if="record.morningStatus && !showMorningTime">
+                  <div v-if="record.morningStatus && !record.showMorningTime">
                     <a-popconfirm
                       ok-text="取消"
                       cancel-text="修改"
                       ok-type=""
-                      @confirm="cancel"
-                      :visible="morningVisible"
-                      @cancel="changeStatus(record.id, 0, 'morning')"
+                      @confirm="cancel(record, 'morningVisible')"
+                      :visible="record.morningVisible"
+                      @cancel="changeStatus(record.id, 0, record, 'morningVisible', 'showMorningTime')"
                     >
                       <a-icon slot="icon" type="" />
-                      <a-button class="okBtn" slot="title" size="small" @click="rejectStatus(record.id, 2, 'morning', record.morning)"
+                      <a-button
+                        class="okBtn"
+                        slot="title"
+                        size="small"
+                        @click="rejectStatus(record.id, 2, 'morning', record.morning, record, 'morningVisible')"
                         >确认</a-button
                       >
                       <a-button
@@ -60,14 +68,14 @@
                         class="ml-2"
                         slot="title"
                         size="small"
-                        @click="rejectStatus(record.id, 1, 'morning', record.morning)"
+                        @click="rejectStatus(record.id, 1, 'morning', record.morning, record, 'morningVisible')"
                       >
                         驳回
                       </a-button>
                       <span
                         class="font-bold daka"
-                        :class="record.morningStatus === 2 ? 'line-through text-red-500' : 'text-green-500'"
-                        @click="changeVisible(record.morningStatus, 'morningVisible')"
+                        :class="record.morningStatus === 2 ? 'line-through text-gray-400' : 'text-green-500'"
+                        @click="changeVisible(index, record.morningStatus, 'morningVisible')"
                       >
                         <div class="dian animate-ping" v-if="record.morningStatus === 1"></div>
                         <div class="dian" v-if="record.morningStatus === 1"></div>
@@ -75,16 +83,16 @@
                       </span>
                     </a-popconfirm>
                   </div>
-                  <div v-if="!record.morningStatus && !showMorningTime">未打卡</div>
+                  <div v-if="!record.morningStatus && !record.showMorningTime">未打卡</div>
                   <!-- 修改时间 -->
                   <a-time-picker
                     placeholder="请选择"
                     style="width: 100%"
-                    v-if="showMorningTime"
+                    v-if="record.showMorningTime"
                     format="HH:mm"
                     class="px-2"
                     @change="timeChange"
-                    @openChange="openChange($event, 'morning')"
+                    @openChange="openChange($event, record, 'showMorningTime', 'morning')"
                   />
                 </div>
               </div>
@@ -92,7 +100,10 @@
             <!-- 晚 -->
             <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-if="record.nightStatus" class="daka" :class="record.nightStatus === 2 ? 'line-through' : ''"
+                  >{{ $moment(record.night - 0).format('HH:mm') }}
+                  <div class="dian dian-yellow" v-if="record.nightStatus === 1"></div
+                ></span>
                 <span v-else>未打卡</span>
               </div>
 
@@ -102,12 +113,13 @@
                     {{ $moment(record.night - 0).format('HH:mm') }}
                     <div class="dian"></div>
                   </span>
-                  <span v-else-if="record.nightStatus === 2" class="line-through text-red-500 font-bold">
+                  <span v-else-if="record.nightStatus === 2" class="line-through text-gray-400 font-bold">
                     {{ $moment(record.night - 0).format('HH:mm') }}
                   </span>
                   <span v-else-if="record.nightStatus === 3" class="text-blue-500 font-bold">
                     {{ $moment(record.night - 0).format('HH:mm') }}
                   </span>
+                  <span v-else-if="today !== list.dateTime">未打卡</span>
                   <a-button
                     v-else
                     type="primary"
@@ -120,17 +132,21 @@
                 </div>
 
                 <div v-if="record.isChecker">
-                  <div v-if="record.nightStatus && !showNightTime">
+                  <div v-if="record.nightStatus && !record.showNightTime">
                     <a-popconfirm
                       ok-text="取消"
                       cancel-text="修改"
                       ok-type=""
-                      @confirm="cancel"
-                      :visible="visible"
-                      @cancel="changeStatus(record.id, 0, 'night')"
+                      @confirm="cancel(record, 'nightVisible')"
+                      :visible="record.nightVisible"
+                      @cancel="changeStatus(record.id, 0, record, 'nightVisible', 'showNightTime')"
                     >
                       <a-icon slot="icon" type="" />
-                      <a-button type="primary" slot="title" size="small" @click="rejectStatus(record.id, 2, 'night', record.night)"
+                      <a-button
+                        type="primary"
+                        slot="title"
+                        size="small"
+                        @click="rejectStatus(record.id, 2, 'night', record.night, record, 'nightVisible')"
                         >确认</a-button
                       >
                       <a-button
@@ -138,14 +154,14 @@
                         class="ml-2"
                         slot="title"
                         size="small"
-                        @click="rejectStatus(record.id, 1, 'night', record.night)"
+                        @click="rejectStatus(record.id, 1, 'night', record.night, record, 'nightVisible')"
                       >
                         驳回
                       </a-button>
                       <span
                         class="font-bold daka"
-                        :class="record.nightStatus === 2 ? 'line-through text-red-500' : 'text-green-500'"
-                        @click="changeVisible(record.nightStatus, 'visible')"
+                        :class="record.nightStatus === 2 ? 'line-through text-gray-400' : 'text-green-500'"
+                        @click="changeVisible(index, record.nightStatus, 'nightVisible')"
                       >
                         <div class="dian animate-ping" v-if="record.nightStatus === 1"></div>
                         <div class="dian" v-if="record.nightStatus === 1"></div>
@@ -153,16 +169,16 @@
                       </span>
                     </a-popconfirm>
                   </div>
-                  <div v-if="!record.nightStatus && !showNightTime">未打卡</div>
+                  <div v-if="!record.nightStatus && !record.showNightTime">未打卡</div>
                   <!-- 修改时间 -->
                   <a-time-picker
                     placeholder="请选择"
                     style="width: 100%"
-                    v-if="showNightTime"
+                    v-if="record.showNightTime"
                     format="HH:mm"
                     class="px-2"
                     @change="timeChange"
-                    @openChange="openChange($event, 'night')"
+                    @openChange="openChange($event, record, 'showNightTime', 'night')"
                   />
                 </div>
               </div>
@@ -170,16 +186,16 @@
             <!-- 审核人 -->
             <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 v-if="!record.isMine || (record.isMine && record.morningStatus && record.nightStatus) || today !== list.dateTime">
+                  {{ record.checkerName || checkers[0].name }}
                 </div>
                 <a-select
                   v-else
-                  :default-value="record.lastCheckerId ? record.lastCheckerId : record.checkerId ? record.checkerId : members[0].memberId"
+                  :default-value="record.lastCheckerId ? record.lastCheckerId : record.checkerId ? record.checkerId : checkers[0].memberId"
                   style="width: 100%"
                   @change="chooseChecker"
                 >
-                  <a-select-option :value="member.memberId" v-for="member in members" :key="member.memberId">
+                  <a-select-option :value="member.memberId" v-for="member in checkers" :key="member.memberId">
                     {{ member.name }}
                   </a-select-option>
                 </a-select>
@@ -218,20 +234,17 @@ export default {
       clockInfos: [],
       options: null,
       checkerId: undefined,
-      morningVisible: false,
-      visible: false,
       placement: 'left',
       timer: null,
-      showNightTime: false,
-      showMorningTime: false,
       chooseTime: '',
       auditOptions: null,
       morningLoading: false,
       nightLoading: false,
+      today: this.$moment(new Date()).format('YYYY-MM-DD'),
     };
   },
 
-  computed: mapState('home', ['projectId', 'members', 'startTime', 'endTime', 'memberIdList', 'roleId']),
+  computed: mapState('home', ['projectId', 'members', 'startTime', 'endTime', 'memberIdList', 'roleId', 'checkers']),
 
   mounted() {
     this.timer = setInterval(async () => {
@@ -277,7 +290,16 @@ export default {
         const res = await clockQuery(params);
         const { code, msg, data } = res.data;
         if (code === 200) {
-          this.clockInfos = data;
+          data.forEach(item => {
+            item.recordList.forEach(clcok => {
+              clcok.morningVisible = false;
+              clcok.nightVisible = false;
+              clcok.showNightTime = false;
+              clcok.showMorningTime = false;
+            });
+          });
+
+          this.clockInfos = [...data];
         } else {
           this.$message.error(msg || '获取失败');
           throw msg;
@@ -302,7 +324,7 @@ export default {
         this.clockInfos[listIndex].recordList[index].night = selectTime;
       }
       const dateTime = this.$moment(`${clockTime} ${selectTime}`).format('x') - 0;
-      const params = { param: { checkerId: this.checkerId || checkerId || this.members[0].memberId, clockType, dateTime, id, memberId } };
+      const params = { param: { checkerId: this.checkerId || checkerId || this.checkers[0].memberId, clockType, dateTime, id, memberId } };
       this.handleClockPunch(params);
     },
 
@@ -346,55 +368,57 @@ export default {
       }
     },
 
-    changeVisible(status, type) {
+    changeVisible(index, status, type) {
       if (status !== 0) {
-        this[type] = true;
+        this.clockInfos.forEach(item => {
+          item.recordList.forEach((clcok, i) => {
+            if (i === index && type === 'morningVisible') {
+              clcok.morningVisible = !clcok.morningVisible;
+              clcok.nightVisible = false;
+            } else if (i === index && type === 'nightVisible') {
+              clcok.morningVisible = false;
+              clcok.nightVisible = !clcok.nightVisible;
+            } else {
+              clcok.morningVisible = false;
+              clcok.nightVisible = false;
+            }
+          });
+        });
       }
     },
 
     // 修改
-    changeStatus(id, type, timeType) {
-      if (timeType === 'morning') {
-        this.morningVisible = false;
-        this.showMorningTime = true;
-      } else {
-        this.visible = false;
-        this.showNightTime = true;
-      }
+    changeStatus(id, type, record, visible, show) {
+      record[visible] = false;
+      record[show] = true;
       this.auditOptions = { id, type };
     },
     // 选择修改时间
     timeChange(time) {
       this.chooseTime = this.$moment(time).format('x');
     },
-    async openChange(open, timeType) {
+    async openChange(open, record, show, timeType) {
       if (!open && this.chooseTime) {
         this.auditOptions[timeType] = this.chooseTime;
         this.auditOptions.projectId = this.projectId;
         const params = { param: this.auditOptions };
-        await this.handleClockAudit(params);
+        await this.handleClockAudit(params, record, show);
       }
       if (!open && !this.chooseTime) {
-        this.showNightTime = false;
-        this.showMorningTime = false;
+        record[show] = false;
       }
     },
 
     // 驳回
-    async rejectStatus(id, type, timeType, time) {
-      if (timeType === 'morning') {
-        this.morningVisible = false;
-      } else {
-        this.visible = false;
-      }
+    async rejectStatus(id, type, timeType, time, record, show) {
+      record[show] = false;
       const params = { param: { id, type, [timeType]: time, projectId: this.projectId } };
-      await this.handleClockAudit(params);
+      await this.handleClockAudit(params, record, show);
     },
 
     // 取消
-    cancel() {
-      this.visible = false;
-      this.morningVisible = false;
+    cancel(record, type) {
+      record[type] = false;
     },
 
     /**
@@ -405,14 +429,13 @@ export default {
      * @param {string} projectId 项目id
      * @param {string} type 审批类型(0-修改,1-驳回,2-通过)
      */
-    async handleClockAudit(params) {
+    async handleClockAudit(params, record, show) {
       try {
         const res = await clockAudit(params);
         const { code, msg } = res.data;
         if (code === 200) {
           this.$message.success(params.param.type === 0 ? '修改成功' : params.param.type === 1 ? '驳回成功' : '审核通过');
-          this.showNightTime = false;
-          this.showMorningTime = false;
+          record[show] = false;
           this.auditOptions = null;
           const options = { startTime: this.startTime, endTime: this.endTime, memberIdList: this.memberIdList };
           this.setParams(options);
@@ -484,6 +507,7 @@ img {
 .daka {
   position: relative;
 }
+
 .dian {
   position: absolute;
   width: 6px;
@@ -493,6 +517,11 @@ img {
   top: 2px;
   right: -10px;
 }
+
+.dian-yellow {
+  background-color: rgb(253, 230, 138);
+}
+
 .okBtn {
   background-color: #10b981 !important;
   color: #fff;
diff --git a/src/components/MemberPicker/MemberPicker.vue b/src/components/MemberPicker/MemberPicker.vue
index 76351ad..c0100c8 100644
--- a/src/components/MemberPicker/MemberPicker.vue
+++ b/src/components/MemberPicker/MemberPicker.vue
@@ -6,7 +6,7 @@
       style="width: 100%"
       placeholder="请选择成员"
       @change="handleChange"
-      :default-value="memberIdList && memberIdList.length ? memberIdList : '全部'"
+      :value="memberIdList && memberIdList.length ? memberIdList : '全部'"
     >
       <a-select-option value=""> 全部 </a-select-option>
       <a-select-option :value="member.memberId" v-for="member in members" :key="member.memberId"> {{ member.name }} </a-select-option>
@@ -28,10 +28,10 @@ export default {
     ...mapMutations('home', ['setMemberIdList']),
 
     handleChange(value) {
-      console.log(value);
-      if (value) {
+      if (value[value.length - 1] === '') {
+        this.setMemberIdList();
+      } else if (value) {
         const index = value.findIndex(item => item === '全部');
-        console.log(index);
         if (index !== -1) {
           value.splice(index, 1);
         }
diff --git a/src/store/modules/home/actions.js b/src/store/modules/home/actions.js
index 71206be..c6025de 100644
--- a/src/store/modules/home/actions.js
+++ b/src/store/modules/home/actions.js
@@ -35,6 +35,14 @@ const actions = {
       const { code, msg, data } = res.data;
       if (code === 200) {
         commit('setMembers', data);
+        // 筛选审核人
+        let checkers = [];
+        data.forEach(item => {
+          if (item.userId && item.userId !== '0' && item.isMine !== 1) {
+            checkers.push(item);
+          }
+        });
+        commit('setCheckers', [...checkers]);
         return data;
       } else {
         message.error(msg || '查询失败');
diff --git a/src/store/modules/home/mutations.js b/src/store/modules/home/mutations.js
index 1cd958d..22a16d4 100644
--- a/src/store/modules/home/mutations.js
+++ b/src/store/modules/home/mutations.js
@@ -26,6 +26,15 @@ const mutations = {
     state.members = data;
   },
 
+  /**
+   * 设置审核人信息
+   * @param {object} state
+   * @param {Array} data
+   */
+  setCheckers(state, data) {
+    state.checkers = data;
+  },
+
   /**
    * 设置开始时间
    * @param {object} state
diff --git a/src/store/modules/home/state.js b/src/store/modules/home/state.js
index 2c637db..85a3d5d 100644
--- a/src/store/modules/home/state.js
+++ b/src/store/modules/home/state.js
@@ -13,6 +13,7 @@ const state = {
   endTime: null,
   memberIdList: [],
   roleId: '',
+  checkers: [], // 审核人列表
 };
 
 export default state;