添加操作界面

src/App.vue

@@ -42,9 +42,9 @@ body,
 }
 
 #app {
-  background: transparent;
+  /* background: transparent; */
 }
 body {
-  background: #f5f5f5 !important;
+  /* background: #f5f5f5 !important; */
 }
 </style>

src/common/portrait.styl

@@ -191,6 +191,10 @@
   margin-top: 32px;
 }
 
+.mb-0{
+  margin-bottom: 0px!important;
+}
+
 .mb-1{
   margin-bottom: 4px;
 }

src/components/List/List.vue

@@ -51,6 +51,18 @@
       </div>
     </div>
     <a-empty class="mt-8 mb-8" description="暂无打卡信息" v-else />
+    <a-drawer
+      placement="bottom"
+      :closable="false"
+      :mask-closable="false"
+      :visible="visible"
+      :after-visible-change="afterVisibleChange"
+      class="actions-box"
+    >
+      <p class="mb-1">修改</p>
+      <p class="mb-4">驳回</p>
+      <p class="mb-0" @click="onClose">取消</p>
+    </a-drawer>
   </div>
 </template>
 
@@ -81,6 +93,8 @@ export default {
       memberIdList: [],
       options: null,
       checkerId: undefined,
+      visible: false,
+      placement: 'left',
     };
   },
 
@@ -138,7 +152,6 @@ export default {
         this.clockInfos[listIndex].recordList[index].night = selectTime;
       }
       const dateTime = this.$moment(time).format('x') - 0;
-      // TODO:
       const params = { param: { checkerId: this.checkerId || checkerId, clockType, dateTime, id, memberId } };
       this.handleClockPunch(params);
     },
@@ -169,6 +182,15 @@ export default {
 
     showMenu(index) {
       console.log('展开菜单', index);
+      this.visible = true;
+    },
+
+    afterVisibleChange(val) {
+      console.log('visible', val);
+    },
+
+    onClose() {
+      this.visible = false;
     },
   },
 };
@@ -202,4 +224,23 @@ img {
 .teble-box >>> .ant-table-row-cell-break-word {
   padding: 8px 0 !important;
 }
+
+.actions-box >>> .ant-drawer-content-wrapper {
+  height: auto !important;
+}
+
+.actions-box >>> .ant-drawer-wrapper-body {
+  background: #f5f5f5;
+}
+
+.actions-box >>> .ant-drawer-body {
+  padding: 0 !important;
+}
+
+.actions-box >>> .ant-drawer-body p {
+  height: 40px;
+  line-height: 40px;
+  background: #fcfcfc;
+  text-align: center;
+}
 </style>

src/plugins/ant-design-vue.js

@@ -42,6 +42,7 @@ import {
   Divider,
   Card,
   Skeleton,
+  Drawer,
 } from 'ant-design-vue';
 import { ConfigProvider } from 'ant-design-vue';
 Vue.component(ConfigProvider.name, ConfigProvider);
@@ -78,6 +79,7 @@ Vue.use(Steps);
 Vue.use(Divider);
 Vue.use(Card);
 Vue.use(Skeleton);
+Vue.use(Drawer);
 
 Vue.prototype.$message = message;
 Vue.prototype.$notification = notification;