Vue 3 表格时间监控与动态后端请求触发详解 附Demo展示

<el-table :data="tableData">
  <el-table-column label="还柜时间" prop="appointmentEndTime" />
  <el-table-column label="操作" />
</el-table>

const currentTime = new Date().getTime() // 获取当前时间的时间戳
const appointmentTime = new Date(item.appointmentEndTime).getTime() // 获取预约时间的时间戳

await GoodsStoragePlanApi.deleteGoodsStoragePlan(item.id)
  .then(response => { console.log("成功处理请求") })
  .catch(error => { console.error("请求失败") })

setInterval(() => {
  checkAppointmentTimes() // 每秒检查一次
}, 1000)

if (appointmentTime - currentTime <= 1000 && appointmentTime >= currentTime) {
  // 触发后端请求
}

<template>
  <el-table :data="Object.values(tableData)">
    <el-table-column label="还柜时间" prop="appointmentEndTime" />
    <el-table-column label="操作" />
  </el-table>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { GoodsStoragePlanApi } from '@/api'
const tableData = ref({
  data1: { id: 1, appointmentEndTime: '2024-09-21 15:00:00' },
  data2: { id: 2, appointmentEndTime: '2024-09-21 16:00:00' }
})
const checkAppointmentTimes = async () => {
  const currentTime = new Date().getTime()
  Object.values(tableData.value).forEach(async (item) => {
    if (item.appointmentEndTime) {
      const appointmentTime = new Date(item.appointmentEndTime).getTime()
      if (appointmentTime - currentTime <= 1000 && appointmentTime >= currentTime) {
        await GoodsStoragePlanApi.deleteGoodsStoragePlan(item.id)
      }
    }
  })
}
onMounted(() => {
  setInterval(() => {
    checkAppointmentTimes()
  }, 1000)
})
</script>

<template>
  <el-table :data="Object.values(productList)">
    <el-table-column label="到期时间" prop="expirationTime" />
    <el-table-column label="操作" />
  </el-table>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { ProductApi } from '@/api'
const productList = ref({
  product1: { id: 101, expirationTime: '2024-10-01 18:00:00' },
  product2: { id: 102, expirationTime: '2024-10-02 12:00:00' }
})
const checkExpirationTimes = async () => {
  const currentTime = new Date().getTime()
  Object.values(productList.value).forEach(async (item) => {
    if (item.expirationTime) {
      const expirationTime = new Date(item.expirationTime).getTime()
      if (expirationTime - currentTime <= 3600000 && expirationTime >= currentTime) { // 1小时内
        await ProductApi.sendReminder(item.id)
      }
    }
  })
}
onMounted(() => {
  setInterval(() => {
    checkExpirationTimes()
  }, 60000) // 每分钟检查一次
})
</script>

<template>
  <el-table :data="Object.values(meetingList)">
    <el-table-column label="会议开始时间" prop="meetingStartTime" />
    <el-table-column label="操作" />
  </el-table>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { MeetingApi } from '@/api'
const meetingList = ref({
  meeting1: { id: 201, meetingStartTime: '2024-09-25 09:00:00' },
  meeting2: { id: 202, meetingStartTime: '2024-09-26 11:00:00' }
})
const checkMeetingTimes = async () => {
  const currentTime = new Date().getTime()
  Object.values(meetingList.value).forEach(async (item) => {
    if (item.meetingStartTime) {
      const meetingTime = new Date(item.meetingStartTime).getTime()
      if (meetingTime - currentTime <= 600000 && meetingTime >= currentTime) { // 10分钟内
        await MeetingApi.sendMeetingReminder(item.id)
      }
    }
  })
}
onMounted(() => {
  setInterval(() => {
    checkMeetingTimes()
  }, 60000) // 每分钟检查一次
})
</script>