From 8811f52da5a10cdd9cff484832b28a0d855de4a0 Mon Sep 17 00:00:00 2001
From: jarvis <2221237281@qq.com>
Date: Wed, 8 Sep 2021 18:19:59 +0800
Subject: [PATCH] =?UTF-8?q?=E6=89=93=E5=8D=A1=E7=95=8C=E9=9D=A2=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                  | 162 ++++++++++++++---------------
 src/App.vue                        |   4 +-
 src/components/HeadNav/HeadNav.vue |  51 ++++++++-
 src/components/List/List.vue       |  33 ++++--
 src/views/FirstPage/FirstPage.vue  |  26 ++++-
 5 files changed, 179 insertions(+), 97 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index db595cb..f535e35 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1808,16 +1808,6 @@
           "integrity": "sha1-/q7SVZc9LndVW4PbwIhRpsY1IPo=",
           "dev": true
         },
-        "ansi-styles": {
-          "version": "4.3.0",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
         "cacache": {
           "version": "13.0.1",
           "resolved": "https://registry.npm.taobao.org/cacache/download/cacache-13.0.1.tgz?cache=0&sync_timestamp=1594427999421&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcacache%2Fdownload%2Fcacache-13.0.1.tgz",
@@ -1850,34 +1840,6 @@
           "integrity": "sha1-48mzFWnhBoEd8kL3FXJaH0xJQyA=",
           "dev": true
         },
-        "chalk": {
-          "version": "4.1.2",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "color-convert": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "color-name": {
-          "version": "1.1.4",
-          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-          "dev": true,
-          "optional": true
-        },
         "css-loader": {
           "version": "3.6.0",
           "resolved": "https://registry.npm.taobao.org/css-loader/download/css-loader-3.6.0.tgz?cache=0&sync_timestamp=1604507107408&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcss-loader%2Fdownload%2Fcss-loader-3.6.0.tgz",
@@ -1931,13 +1893,6 @@
             "universalify": "^0.1.0"
           }
         },
-        "has-flag": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-          "dev": true,
-          "optional": true
-        },
         "icss-utils": {
           "version": "4.1.1",
           "resolved": "https://registry.npm.taobao.org/icss-utils/download/icss-utils-4.1.1.tgz?cache=0&sync_timestamp=1602527330977&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ficss-utils%2Fdownload%2Ficss-utils-4.1.1.tgz",
@@ -2052,16 +2007,6 @@
             "minipass": "^3.1.1"
           }
         },
-        "supports-color": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        },
         "terser-webpack-plugin": {
           "version": "2.3.8",
           "resolved": "https://registry.npm.taobao.org/terser-webpack-plugin/download/terser-webpack-plugin-2.3.8.tgz?cache=0&sync_timestamp=1603881757308&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fterser-webpack-plugin%2Fdownload%2Fterser-webpack-plugin-2.3.8.tgz",
@@ -2078,32 +2023,6 @@
             "terser": "^4.6.12",
             "webpack-sources": "^1.4.3"
           }
-        },
-        "vue-loader-v16": {
-          "version": "npm:vue-loader@16.5.0",
-          "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.5.0.tgz",
-          "integrity": "sha512-WXh+7AgFxGTgb5QAkQtFeUcHNIEq3PGVQ8WskY5ZiFbWBkOwcCPRs4w/2tVyTbh2q6TVRlO3xfvIukUtjsu62A==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "chalk": "^4.1.0",
-            "hash-sum": "^2.0.0",
-            "loader-utils": "^2.0.0"
-          },
-          "dependencies": {
-            "loader-utils": {
-              "version": "2.0.0",
-              "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
-              "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
-              "dev": true,
-              "optional": true,
-              "requires": {
-                "big.js": "^5.2.2",
-                "emojis-list": "^3.0.0",
-                "json5": "^2.1.2"
-              }
-            }
-          }
         }
       }
     },
@@ -12730,6 +12649,87 @@
         }
       }
     },
+    "vue-loader-v16": {
+      "version": "npm:vue-loader@16.5.0",
+      "resolved": "https://registry.nlark.com/vue-loader/download/vue-loader-16.5.0.tgz?cache=0&sync_timestamp=1628666727543&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fvue-loader%2Fdownload%2Fvue-loader-16.5.0.tgz",
+      "integrity": "sha1-CcTgcSRmiZ40uZpoZSTxkWX7KJI=",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "chalk": "^4.1.0",
+        "hash-sum": "^2.0.0",
+        "loader-utils": "^2.0.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.nlark.com/ansi-styles/download/ansi-styles-4.3.0.tgz?cache=0&sync_timestamp=1618995588464&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fansi-styles%2Fdownload%2Fansi-styles-4.3.0.tgz",
+          "integrity": "sha1-7dgDYornHATIWuegkG7a00tkiTc=",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.nlark.com/chalk/download/chalk-4.1.2.tgz?cache=0&sync_timestamp=1627646734234&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fchalk%2Fdownload%2Fchalk-4.1.2.tgz",
+          "integrity": "sha1-qsTit3NKdAhnrrFr8CqtVWoeegE=",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npm.taobao.org/color-convert/download/color-convert-2.0.1.tgz",
+          "integrity": "sha1-ctOmjVmMm9s68q0ehPIdiWq9TeM=",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npm.taobao.org/color-name/download/color-name-1.1.4.tgz",
+          "integrity": "sha1-wqCah6y95pVD3m9j+jmVyCbFNqI=",
+          "dev": true,
+          "optional": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.nlark.com/has-flag/download/has-flag-4.0.0.tgz?cache=0&sync_timestamp=1626716095603&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fhas-flag%2Fdownload%2Fhas-flag-4.0.0.tgz",
+          "integrity": "sha1-lEdx/ZyByBJlxNaUGGDaBrtZR5s=",
+          "dev": true,
+          "optional": true
+        },
+        "loader-utils": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npm.taobao.org/loader-utils/download/loader-utils-2.0.0.tgz",
+          "integrity": "sha1-5MrOW4FtQloWa18JfhDNErNgZLA=",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.nlark.com/supports-color/download/supports-color-7.2.0.tgz?cache=0&sync_timestamp=1626703400240&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fsupports-color%2Fdownload%2Fsupports-color-7.2.0.tgz",
+          "integrity": "sha1-G33NyzK4E4gBs+R4umpRyqiWSNo=",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
     "vue-quill-editor": {
       "version": "3.0.6",
       "resolved": "https://registry.npmjs.org/vue-quill-editor/-/vue-quill-editor-3.0.6.tgz",
diff --git a/src/App.vue b/src/App.vue
index db464f1..923ac55 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,10 +1,10 @@
 <template>
-  <a-locale-provider :locale="zh_CN">
+  <a-config-provider :locale="zh_CN">
     <div id="app">
       <head-nav class="head-nav" />
       <router-view></router-view>
     </div>
-  </a-locale-provider>
+  </a-config-provider>
 </template>
 
 <script>
diff --git a/src/components/HeadNav/HeadNav.vue b/src/components/HeadNav/HeadNav.vue
index 875710e..acef824 100644
--- a/src/components/HeadNav/HeadNav.vue
+++ b/src/components/HeadNav/HeadNav.vue
@@ -2,21 +2,35 @@
   <div class="d-flex justify-space-between align-center justify-center nav mb-4">
     <!-- <a-icon type="left" class="back" /> -->
     <div>考勤管理</div>
-    <a-button type="primary" size="small" class="export" @click="clockExport"> 导出 </a-button>
+    <div>
+      <a-button type="primary" icon="search" size="small" class="mr-3" @click="openSearch"> 搜索 </a-button>
+      <a-button type="primary" size="small" icon="export" @click="clockExport"> 导出 </a-button>
+    </div>
+    <div class="timer" v-if="show">
+      <!-- 时间选择 -->
+      <TimePicker @changeTime="changeTime" />
+      <!-- 成员选择 -->
+      <MemberPicker @changeTime="changeTime" />
+      <div class="btns mt-3">
+        <a-button class="btn" size="small"> 取消 </a-button>
+        <a-button class="btn" type="primary" size="small"> 确认 </a-button>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 import { mapState } from 'vuex';
 import { clockExport } from '@/config/api';
+import TimePicker from '@/components/TimePicker/TimePicker.vue';
+import MemberPicker from '@/components/MemberPicker/MemberPicker.vue';
 
 export default {
+  components: { TimePicker, MemberPicker },
   data() {
-    return {};
+    return { show: false };
   },
-
   computed: mapState('home', ['projectId', 'startTime', 'endTime', 'memberIdList']),
-
   methods: {
     /**
      * 导出考勤excel
@@ -42,6 +56,12 @@ export default {
         throw error || '导出失败';
       }
     },
+    changeTime() {
+      this.$refs.mychild.setParams();
+    },
+    openSearch() {
+      this.show = !this.show;
+    },
   },
 };
 </script>
@@ -49,13 +69,36 @@ export default {
 <style lang="less" scoped>
 .nav {
   position: relative;
+  // border-bottom: 1px solid #ccc;
 }
 .back {
   position: absolute;
   left: 0;
 }
+.search {
+  border: none;
+}
+.timer {
+  position: absolute;
+  width: 380px;
+  height: 150px;
+  // border: 1px solid black;
+  top: 50px;
+  margin-left: 50%;
+  transform: translate(-50%);
+  background-color: #fff;
+  color: black;
+  box-shadow: 0px 0px 5px #ccc;
+  z-index: 1;
+  padding: 26px 24px 24px 24px;
+}
+.btn {
+  margin-left: 80px;
+}
 .export {
   position: absolute;
+  top: 0;
   right: 0;
+  z-index: 2;
 }
 </style>
diff --git a/src/components/List/List.vue b/src/components/List/List.vue
index e48e248..3a30659 100644
--- a/src/components/List/List.vue
+++ b/src/components/List/List.vue
@@ -45,12 +45,16 @@
                       @cancel="changeStatus(record.id, 0, 'morning')"
                     >
                       <a-icon slot="icon" type="" />
-                      <a-button slot="title" size="small" @click="rejectStatus(record.id, 1, 'morning', record.morning)">驳回</a-button>
+                      <a-button slot="title" size="small">审核</a-button>
+                      <a-button class="ml-2" slot="title" size="small" @click="rejectStatus(record.id, 1, 'morning', record.morning)"
+                        >驳回</a-button
+                      >
                       <span
-                        class="font-bold"
+                        class="font-bold daka"
                         :class="record.morningStatus === 2 ? 'line-through red--text' : 'green--text'"
                         @click="changeVisible(record.morningStatus, 'morningVisible')"
                       >
+                        <div class="dian"></div>
                         {{ $moment(record.morning - 0).format('HH:mm') }}
                       </span>
                     </a-popconfirm>
@@ -103,12 +107,16 @@
                       @cancel="changeStatus(record.id, 0, 'night')"
                     >
                       <a-icon slot="icon" type="" />
-                      <a-button slot="title" size="small" @click="rejectStatus(record.id, 1, 'night', record.night)">驳回</a-button>
+                      <a-button slot="title" size="small">审核</a-button>
+                      <a-button class="ml-2" slot="title" size="small" @click="rejectStatus(record.id, 1, 'night', record.night)"
+                        >驳回</a-button
+                      >
                       <span
-                        class="font-bold"
+                        class="font-bold daka"
                         :class="record.nightStatus === 2 ? 'line-through red--text' : 'green--text'"
                         @click="changeVisible(record.nightStatus, 'visible')"
                       >
+                        <div class="dian"></div>
                         {{ $moment(record.night - 0).format('HH:mm') }}
                       </span>
                     </a-popconfirm>
@@ -345,7 +353,7 @@ export default {
         this.visible = false;
       }
       const params = { param: { id, type, [timeType]: time, projectId: this.projectId } };
-      await this.handleClockAudit(params);
+      // await this.handleClockAudit(params);
     },
 
     // 取消
@@ -441,7 +449,7 @@ img {
 
 <style>
 .ant-popover-inner {
-  width: 200px;
+  width: 250px;
 }
 
 .ant-popover-message {
@@ -449,4 +457,17 @@ img {
   left: 2px;
   top: 8px;
 }
+.daka {
+  position: relative;
+}
+.dian {
+  position: absolute;
+  width: 6px;
+  height: 6px;
+  background-color: red;
+  border-radius: 50%;
+  top: 2px;
+  right: -10px;
+  box-shadow: 0 0 6px red;
+}
 </style>
diff --git a/src/views/FirstPage/FirstPage.vue b/src/views/FirstPage/FirstPage.vue
index 9df60db..1e0bd33 100644
--- a/src/views/FirstPage/FirstPage.vue
+++ b/src/views/FirstPage/FirstPage.vue
@@ -1,9 +1,5 @@
 <template>
   <div>
-    <!-- 时间选择 -->
-    <TimePicker @changeTime="changeTime" />
-    <!-- 成员选择 -->
-    <MemberPicker @changeTime="changeTime" />
     <!-- 列表 -->
     <List ref="mychild" />
   </div>
@@ -33,4 +29,26 @@ export default {
 </script>
 
 <style lang="less" scoped>
+.timer {
+  position: fixed;
+  width: 380px;
+  height: 150px;
+  // border: 1px solid black;
+  margin-left: 50%;
+  transform: translate(-50%);
+  background-color: #fff;
+  color: black;
+  box-shadow: 0px 0px 5px #ccc;
+  z-index: 1;
+  padding: 26px 24px 24px 24px;
+}
+.btn {
+  margin-left: 80px;
+}
+.export {
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 2;
+}
 </style>