SZYGM1.0/src/views/realTime/components/StationForm/index.vue

<template>
  <el-form :model="formData" inline class="station-form">
    <el-form-item :prop="formData.startDate" style="width: 160px">
      <el-date-picker
        v-model="formData.startDate"
        type="datetime"
        format="YYYY-MM-DD HH:mm"
        value-format="YYYY-MM-DD hh:mm"
        size="default"
        :clearable="false"
      />
    </el-form-item>
    <el-form-item :prop="formData.endDate" style="width: 160px">
      <el-date-picker
        v-model="formData.endDate"
        type="datetime"
        format="YYYY-MM-DD HH:mm"
        value-format="YYYY-MM-DD hh:mm"
        size="default"
        :clearable="false"
      />
    </el-form-item>
    <el-form-item :prop="formData.flightStatus" style="width: 104px">
      <el-select
        v-model="formData.flightStatus"
        size="default"
        placeholder="全部航班"
      >
        <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"
        placeholder="全部航班"
      >
        <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="international"
      :prop="formData.waybillType"
      style="width: 104px"
    >
      <el-select
        v-model="formData.waybillType"
        size="default"
        placeholder="运单类型"
      >
        <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="ts">
import { parseTime } from '@/utils/validate'
import type { selectOptions } from '../../type'

const props = defineProps({
  international: {
    type: Boolean,
    default: false,
  },
})

const emit = defineEmits(['formDataChange'])

const formData = reactive({
  startDate: parseTime(new Date(), '{y}-{m}-{d} {h}:{i}'),
  endDate: parseTime(new Date(), '{y}-{m}-{d} {h}:{i}'),
  flightStatus: '',
  flightWarning: '',
  waybillType: '',
})
watchEffect(() => {
  emit('formDataChange', formData)
})

const flightStatusOptions = ref<selectOptions>([])
const flightWarningOptions = ref<selectOptions>([])
const waybillTypeOptions = ref<selectOptions>([])
const getFlightStatusOptions = async () => {}
const getFlightWarningOptions = async () => {}
const getWaybillTypeOptions = async () => {}
const getSelectOptions = () => {
  getFlightStatusOptions()
  getFlightWarningOptions()
  getWaybillTypeOptions()
}
onMounted(() => {
  getSelectOptions()
})
</script>

<style scoped lang="scss">
.station-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;
      &::-webkit-input-placeholder {
        font-size: 14px;
        font-family: Helvetica, Microsoft YaHei;
        color: #303133;
      }
    }
  }
}
</style>