航站视图表单修改

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

@@ -1,22 +1,24 @@
 <template>
   <el-form :model="formData" inline class="station-form">
-    <el-form-item :prop="formData.startDate" style="width: 160px">
+    <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: 160px">
+    <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"
         size="default"
+        :prefix-icon="datePreTitle('结束')"
         :clearable="false"
       />
     </el-form-item>
@@ -24,7 +26,7 @@
       <el-select
         v-model="formData.flightStatus"
         size="default"
-        placeholder="全部航班"
+        :clearable="false"
       >
         <el-option
           v-for="option in flightStatusOptions"
@@ -38,7 +40,7 @@
       <el-select
         v-model="formData.flightWarning"
         size="default"
-        placeholder="全部航班"
+        :clearable="false"
       >
         <el-option
           v-for="option in flightWarningOptions"
@@ -56,7 +58,7 @@
       <el-select
         v-model="formData.waybillType"
         size="default"
-        placeholder="运单类型"
+        :clearable="false"
       >
         <el-option
           v-for="option in waybillTypeOptions"
@@ -69,10 +71,8 @@
   </el-form>
 </template>
 
-<script setup lang="ts">
-import { SelectOption, SelectOptionQueryResult } from '~/common'
+<script setup lang="tsx">
 import { parseTime } from '@/utils/validate'
-import { Query } from '@/api/webApi'
 
 const props = defineProps({
   international: {
@@ -99,36 +99,56 @@ watchEffect(() => {
   emit('formDataChange', formData)
 })
 
-const flightStatusOptions = ref<SelectOption[]>([])
-const flightWarningOptions = ref<SelectOption[]>([])
-const waybillTypeOptions = ref<SelectOption[]>([])
-const getSelectOptions = async (id: number) => {
-  try {
-    const {
-      code,
-      returnData: { listValues },
-      message,
-    }: SelectOptionQueryResult = await Query({
-      id,
-      dataContent: [],
-    })
-    if (Number(code) !== 0) {
-      throw new Error(message ?? '失败')
-    }
-    const options = listValues.map(({ k, v, setlabel, setvalue }) => ({
-      k,
-      v,
-      setlabel,
-      setvalue,
-      [setlabel]: k,
-      [setvalue]: v,
-    }))
-    return options
-  } catch (error) {
-    console.error(error)
-    return []
-  }
+const datePreTitle = (title: string) => {
+  return <div class="date-pre-title">{title}:</div>
 }
+
+const flightStatusOptions = ref([
+  {
+    label: '全部航班',
+    value: null,
+  },
+  {
+    label: '已起飞',
+    value: 'hasTakenOff',
+  },
+  {
+    label: '未起飞',
+    value: 'hasNotTakenOff',
+  },
+])
+const flightWarningOptions = ref([
+  {
+    label: '全部航班',
+    value: null,
+  },
+  {
+    label: '正常航班',
+    value: 'normal',
+  },
+  {
+    label: '预警航班',
+    value: 'warning',
+  },
+  {
+    label: '告警航班',
+    value: 'alarm',
+  },
+])
+const waybillTypeOptions = ref([
+  {
+    label: '全部运单',
+    value: null,
+  },
+  {
+    label: '国际货物',
+    value: 'normal',
+  },
+  {
+    label: '国际快件',
+    value: 'fast',
+  },
+])
 </script>
 
 <style scoped lang="scss">
@@ -143,10 +163,20 @@ const getSelectOptions = async (id: number) => {
       font-size: 14px;
       font-family: Helvetica, Microsoft YaHei;
       color: #303133;
-      &::-webkit-input-placeholder {
-        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;
+        }
+      }
+      .el-input__suffix {
+        display: none;
       }
     }
   }