SZYGM1.0/src/views/realTime/components/AirportView/AirportForm.vue

<template>
  <el-form :model="formData" inline class="airport-form">
    <el-form-item :prop="formData.startDate" style="width: 172px">
      <el-date-picker
        v-model="formData.startDate"
        type="datetime"
        format="YYYY-MM-DD HH:mm"
        value-format="YYYY-MM-DD HH:mm"
        size="default"
        :prefix-icon="datePreTitle('开始')"
        :clearable="false"
      />
    </el-form-item>
    <el-form-item :prop="formData.endDate" style="width: 172px">
      <el-date-picker
        v-model="formData.endDate"
        type="datetime"
        format="YYYY-MM-DD HH:mm"
        value-format="YYYY-MM-DD HH:mm"
        :default-time="new Date('2000-01-01 23:59:59')"
        :disabled-date="disabledEndTime"
        size="default"
        :prefix-icon="datePreTitle('结束')"
        :clearable="false"
      />
    </el-form-item>
    <el-form-item :prop="formData.flightStatus" style="width: 104px">
      <el-select
        v-model="formData.flightStatus"
        size="default"
        :clearable="false"
      >
        <el-option
          v-for="option in flightStatusOptions"
          :key="option.value"
          :label="option.label"
          :value="option.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item :prop="formData.flightWarning" style="width: 104px">
      <el-select
        v-model="formData.flightWarning"
        size="default"
        :clearable="false"
      >
        <el-option
          v-for="option in flightWarningOptions"
          :key="option.value"
          :label="option.label"
          :value="option.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item
      v-if="name.includes('International')"
      :prop="formData.waybillType"
      style="width: 104px"
    >
      <el-select
        v-model="formData.waybillType"
        size="default"
        :clearable="false"
      >
        <el-option
          v-for="option in waybillTypeOptions"
          :key="option.value"
          :label="option.label"
          :value="option.value"
        />
      </el-select>
    </el-form-item>
  </el-form>
</template>

<script setup lang="tsx">
import { parseTime } from '@/utils/validate'
import { ElMessage } from 'element-plus'
import { CommonData } from '~/common'

const props = defineProps({
  name: {
    type: String,
    required: true,
  },
})

const emit = defineEmits(['formDataChange'])

const defaultStartTime = `${parseTime(new Date(), '{y}-{m}-{d}')} 00:00`
const defaultEndTime = `${parseTime(new Date(), '{y}-{m}-{d}')} 23:59`
const formData = reactive({
  startDate: defaultStartTime,
  endDate: defaultEndTime,
  flightStatus: '',
  flightWarning: '',
  waybillType: '',
})
watchEffect(() => {
  if (!formData.startDate || !formData.endDate) {
    return
  }
  const start = new Date(formData.startDate + ':00').getTime()
  const end = new Date(formData.endDate + ':59').getTime()
  if (start > end) {
    ElMessage.warning('开始时间不能晚于结束时间')
    formData.endDate = ''
    return
  }
  if (start <= end - 2 * 24 * 60 * 60 * 1000) {
    ElMessage.warning('间隔不能超过2天')
    formData.endDate = ''
    return
  }
  const formattedFormData: CommonData = {}
  Object.entries(formData).forEach(([key, value]) => {
    formattedFormData[key] = value === '' ? null : value
  })
  formattedFormData.startDate = formData.startDate + ':00'
  formattedFormData.endDate = formData.endDate + ':59'
  emit('formDataChange', formattedFormData)
})

const disabledEndTime = endDate => {
  const start = new Date(formData.startDate + ':00').getTime()
  const end = new Date(endDate + ':59').getTime()
  return start > end || start <= end - 2 * 24 * 60 * 60 * 1000
}

const datePreTitle = (title: string) => {
  return <div class="date-pre-title">{title}：</div>
}

const flightStatusOptions = ref([
  {
    label: '全部航班',
    value: '',
  },
  {
    label: '已起飞',
    value: 'hasTakenOff',
  },
  {
    label: '未起飞',
    value: 'hasNotTakenOff',
  },
  {
    label: '取消',
    value: 'canceled',
  },
])
const flightWarningOptions = ref([
  {
    label: '全部航班',
    value: '',
  },
  {
    label: '正常航班',
    value: 'normal',
  },
  {
    label: '预警航班',
    value: 'warning',
  },
  {
    label: '告警航班',
    value: 'alarm',
  },
])
const waybillTypeOptions = ref([
  {
    label: '全部运单',
    value: '',
  },
  {
    label: '国际货物',
    value: 'normal',
  },
  {
    label: '国际快件',
    value: 'fast',
  },
])
</script>

<style scoped lang="scss">
.airport-form :deep {
  .el-form-item {
    margin: 0;
    &:not(:last-of-type) {
      margin-right: 8px;
    }

    .el-input__inner {
      font-size: 14px;
      font-family: Helvetica, Microsoft YaHei;
      color: #303133;
    }
    .el-date-editor {
      .el-input__prefix {
        flex-basis: 28px;
        padding: 0 8px;
        .date-pre-title {
          font-style: normal;
          font-size: 14px;
          font-family: Microsoft YaHei;
          color: #303133;
        }
      }
    }
  }
}
</style>