EDFS-MCU/src/views/stationData/components/onLineTransferDlg.vue

<template>
  <EdfsDialog :title="isBatchTransfer ? '批量迁移' : '数据迁移'" :is-show="visible" width="580px" @on-close="close"
              :btnLoading="btnLoading"
    @on-save="onSave">
    <div class="flex-col gap-10 w-80% m-x-30px">
      <el-row>
        <div class="label">
          <span class="require">*</span>
          数据开始时间:
        </div>
        <el-date-picker v-model="startTime" value-format="YYYY-MM-DD HH:mm" format="YYYY-MM-DD HH:mm" class="flex-1"
          type="datetime" placeholder="请选择开始时间" :disabled-date="disabledDate" :disabled-time="disabledStartTime"
          @change="handleStartTimeChange" />
      </el-row>

      <el-row>
        <div class="label">
          <span class="require">*</span>
          数据结束时间:
        </div>
        <el-date-picker v-model="endTime" class="flex-1" value-format="YYYY-MM-DD HH:mm" format="YYYY-MM-DD HH:mm"
          type="datetime" placeholder="请选择结束时间" :disabled-date="disabledDate" :disabled-time="disabledEndTime"
          @change="handleEndTimeChange" />
      </el-row>
    </div>
  </EdfsDialog>
</template>

<script setup lang="ts">
import dayjs from 'dayjs'
import { getPubInitData, type PublishMsg } from '@/utils/zmq'
import type { IOnlineDevice } from '../type'
import { useMessage } from '@/composables/useMessage'
import { createTask, type TaskCreateParams } from '@/api/module/taks'
const message = useMessage()

const emit = defineEmits<{
  'on-save': []
}>()

const props = defineProps<{
  isBatchTransfer: boolean
}>()

const visible = ref(false)
const startTime = ref('')
const endTime = ref('')

const disabledDate = (time: Date) => {
  return dayjs(time).isAfter(dayjs())
}

const disabledStartTime = (date: Date) => {
  if (endTime.value) {
    const end = dayjs(endTime.value)
    const current = dayjs(date)
    if (current.isSame(end, 'day')) {
      return {
        hours: () => Array.from({ length: 24 }, (_, i) => i).filter(h => h > end.hour()),
        minutes: () => Array.from({ length: 60 }, (_, i) => i).filter(m => m > end.minute())
      }
    }
  }
  return {}
}

const disabledEndTime = (date: Date) => {
  if (startTime.value) {
    const start = dayjs(startTime.value)
    const current = dayjs(date)
    if (current.isSame(start, 'day')) {
      return {
        hours: () => Array.from({ length: 24 }, (_, i) => i).filter(h => h < start.hour()),
        minutes: () => Array.from({ length: 60 }, (_, i) => i).filter(m => m < start.minute())
      }
    }
  }
  return {}
}

function handleStartTimeChange(val: string) {
  if (val && endTime.value) {
    if (dayjs(val).isAfter(dayjs(endTime.value))) {
      message.warning('开始时间不能晚于结束时间')
      startTime.value = ''
    }
  }
}

function handleEndTimeChange(val: string) {
  if (val && startTime.value) {
    if (dayjs(val).isBefore(dayjs(startTime.value))) {
      message.warning('结束时间不能早于开始时间')
      endTime.value = ''
    }
  }
}

const paramsData = ref<TaskCreateParams>()

function open(parmas: TaskCreateParams) {
  paramsData.value = parmas
  visible.value = true
}
const btnLoading = ref(false)
async function onSave() {
  if (!verifyData()) return
  if (!paramsData.value) {
    message.error('任务参数未定义')
    return
  }
  const params = paramsData.value
  params.startTime = dayjs(startTime.value).format('YYYY-MM-DD HH:mm:ss')
  params.endTime = dayjs(endTime.value).format('YYYY-MM-DD HH:mm:ss')
  btnLoading.value = true
  const res = await createTask(params)
  if (res.code !== 0) {
    message.error(`任务创建失败`)
  } else {
    message.success('任务创建成功,请在任务列表中查看')
  }

  btnLoading.value = false
  emit('on-save')
  close()
}

function close() {
  startTime.value = ''
  endTime.value = ''
  visible.value = false
  paramsData.value = undefined
}

function verifyData() {
  if (!startTime.value) {
    message.error('请选择开始时间')
    return false
  }

  if (!endTime.value) {
    message.error('请选择结束时间')
    return false
  }

  return true
}

defineExpose({
  open,
})
</script>

<style lang="scss" scoped>
.el-row {
  @apply h-32px;
  column-gap: 8px;

  .label {
    color: var(--label-color);
    line-height: 33px;
    text-align: right;
    width: 110px;

    .require {
      color: red;
    }
  }
}
</style>