新增钉钉考勤数据统计页面

src/views/dingding/components/detailDialog.vue

@@ -0,0 +1,146 @@
+<template>
+  <el-dialog title="查看详情" width="700px" v-model="visible" @closed="closedHandle">
+    <div class="content" v-loading="loading">
+      <div class="top">
+        <div class="row">
+          <div class="item">
+            姓名：{{ detail.attendanceSummary.name }}
+          </div>
+          <div class="item">
+            休息天数：{{ detail.attendanceSummary.restDays || '-' }}
+          </div>
+          <div class="item">
+            出勤天数：{{ detail.attendanceSummary.attendDays || '-' }}
+          </div>
+          <div class="item">
+            工作时长（分钟）：{{ detail.attendanceSummary.workDuration || '-' }}
+          </div>
+        </div>
+        <div class="row" style="margin-top: 30px;">
+          <div class="item">
+            迟到次数：{{ detail.attendanceSummary.lateCount || '-' }}
+          </div>
+          <div class="item">
+            迟到时长（分钟）：{{ detail.attendanceSummary.lateDuration || '-' }}
+          </div>
+          <div class="item">
+            旷工天数：{{ detail.attendanceSummary.absenceDays || '-' }}
+          </div>
+          <div class="item">
+            备注：无
+          </div>
+        </div>
+      </div>
+      <div class="btm">
+        <div class="btm_wrap">
+          <div class="item t1">日期</div>
+          <div class="item t1" v-for="(item, index) in detail.weekList" :key="index">{{ item.week }}</div>
+        </div>
+        <div class="btm_wrap">
+          <div class="item t2">
+            <span style="opacity: 0;">1</span>
+          </div>
+          <div class="item t2" v-for="(item, index) in detail.statusList">{{ item }}</div>
+        </div>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { attendanceDetail } from '@/api/coupon/index'
+
+const visible = ref(false)
+
+const detail = ref({
+  weekList: [],
+  statusList: [],
+  attendanceSummary: {}
+})
+
+function closedHandle() {
+  detail.value.weekList = []
+  detail.value.statusList = []
+  detail.value.attendanceSummary = {}
+}
+
+const row = ref(null)
+
+function show(obj) {
+  visible.value = true
+  row.value = { ...obj }
+  attendanceDetailAjax()
+}
+
+// 获取用户打卡详情
+const loading = ref(false)
+async function attendanceDetailAjax() {
+  try {
+    loading.value = true
+    const res = await attendanceDetail({
+      userId: row.value.userId
+    })
+    detail.value = res
+  } catch (error) {
+    console.log(error);
+  }
+  setTimeout(() => {
+    loading.value = false
+  }, 500);
+}
+
+defineExpose({
+  show
+})
+</script>
+
+<style scoped lang="scss">
+.content {
+  .top {
+    .row {
+      display: flex;
+
+      .item {
+        flex: 1;
+        font-size: 14px;
+        color: #333;
+      }
+    }
+  }
+
+  .btm {
+    --height: 100px;
+    width: 100%;
+    height: calc(var(--height) + 20px);
+    overflow-x: auto;
+    margin-top: 14px;
+
+
+    .btm_wrap {
+      white-space: nowrap;
+      height: calc(var(--height) / 2);
+    }
+
+    .item {
+      display: inline-block;
+      width: calc(var(--height));
+      height: calc(var(--height) / 2);
+      line-height: calc(var(--height) / 2);
+      font-size: 14px;
+      // display: flex;
+      // align-items: center;
+      padding-left: 14px;
+      border-bottom: 1px solid #ececec;
+
+      &.t1 {
+        color: #666;
+      }
+
+      &.t2 {
+        color: #333;
+      }
+    }
+  }
+}
+</style>