优化

src/views/reports/ClockinData.vue

@@ -57,98 +57,84 @@
   </page-layer>
 </template>
 
-<script>
+<script setup>
 import { computed, reactive, ref } from 'vue'
 import { clockinShortcuts } from '@/data/shortcuts'
 import { getClockinDataFromDb } from '@/api/clockin'
 import { ElMessage } from 'element-plus'
 import store from '@/store'
 import { downloadExcel } from '@/utils/excel'
-import { formatDate } from '@/utils/date'
+import {getDateRangeFormatDate} from '@/utils/date'
 import PageLayer from "@/layout/PageLayer";
 
-export default {
-  components: {PageLayer},
-  setup() {
-    const datePeriod = ref(null)
-    const windowSize = store.state.app.windowSize
-    const tableHeight = windowSize.h - 50
-    const data = reactive({
-      list: [],
-      totalSize: 0,
-    })
-    const currentPage = ref(1)
-    const handlePageChange = (val) => {
-      currentPage.value = val
-      fetchData()
-    }
+const datePeriod = ref(null)
+const windowSize = store.state.app.windowSize
+const tableHeight = windowSize.h - 50
+const data = reactive({
+  list: [],
+  totalSize: 0,
+})
+const currentPage = ref(1)
+const handlePageChange = (val) => {
+  currentPage.value = val
+  fetchData()
+}
+
+const disableExport = computed(() => {
+  return data.list.length === 0
+})
 
-    const disableExport = computed(() => {
-      return data.list.length === 0
+const fetchData = () => {
+  if (!datePeriod.value) {
+    ElMessage({
+      message: '请先选择时间范围！',
+      type: 'warning',
+      duration: 2000,
+      showClose: true,
     })
+    return
+  }
 
-    const fetchData = () => {
-      if (!datePeriod.value) {
-        ElMessage({
-          message: '请先选择时间范围！',
-          type: 'warning',
-          duration: 2000,
-          showClose: true,
-        })
-        return
-      }
-      const param = {
-        start: datePeriod.value[0],
-        end: datePeriod.value[1],
-        currentPage: currentPage.value,
-        pageSize: 30,
-      }
-      getClockinDataFromDb(param).then((res) => {
-        data.list = res.list
-        data.totalSize = res.totalSize
-      })
-    }
-    const exportExcel = () => {
-      if (!datePeriod.value) {
-        ElMessage({
-          message: '请先选择时间范围！',
-          type: 'warning',
-          duration: 2000,
-          showClose: true,
-        })
-        return
-      }
-      const data = {
-        param: {
-          start: datePeriod.value[0],
-          end: datePeriod.value[1],
-          currentPage: 1,
-          pageSize: -1,
-        },
-        url: '/clockin/exportExcel',
-        fileName: '全院打卡数据（' + formatDate(datePeriod.value[0]) + ' - ' + formatDate(datePeriod.value[1]) + '）.xlsx',
-      }
-      setTimeout(() => {
-        downloadExcel(data)
-      }, 100)
-    }
+  const dtrge = getDateRangeFormatDate(datePeriod.value)
+  const param = {
+    start: dtrge.startTime,
+    end: dtrge.endTime,
+    currentPage: currentPage.value,
+    pageSize: 30,
+  }
+  getClockinDataFromDb(param).then((res) => {
+    data.list = res.list
+    data.totalSize = res.totalSize
+  })
+}
 
-    return {
-      datePeriod,
-      tableHeight,
-      clockinShortcuts,
-      fetchData,
-      data,
-      currentPage,
-      handlePageChange,
-      textColor,
-      exportExcel,
-      disableExport,
-    }
-  },
+const exportExcel = () => {
+  if (!datePeriod.value) {
+    ElMessage({
+      message: '请先选择时间范围！',
+      type: 'warning',
+      duration: 2000,
+      showClose: true,
+    })
+    return
+  }
+  const dtrge = getDateRangeFormatDate(datePeriod.value)
+  const data = {
+    param: {
+      start: dtrge.startTime,
+      end: dtrge.endTime,
+      currentPage: 1,
+      pageSize: -1,
+    },
+    url: '/clockin/exportExcel',
+    fileName: '全院打卡数据（' + formatDate(datePeriod.value[0]) + ' - ' + formatDate(datePeriod.value[1]) + '）.xlsx',
+  }
+  setTimeout(() => {
+    downloadExcel(data)
+  }, 100)
 }
 
-function textColor(val) {
+const textColor = (val) => {
   if (val !== '正常') return { color: 'red' }
 }
 </script>