shangyun/Web/src/pages/page-web/projects/trajectory/components/Search.vue

<template>
  <a-row style="margin-bottom: 20px;" justify="end">
    <a-col>
      <a-form ref="formRef" layout="inline" :model="formModel" :colon="false">
        <a-form-item name="rangeDate">
          <a-range-picker style="width: 250px;" v-model:value="formModel.rangeDate" />
        </a-form-item>
        <a-form-item name="template_type">
          <a-select style="width: 200px;" placeholder="任务类型" v-model:value="formModel.template_type">
            <a-select-option value="waypoint">
              航点航线
            </a-select-option>
            <a-select-option value="mapping2d">
              二维正射
            </a-select-option>
            <a-select-option value="mapping3d">
              倾斜摄影
            </a-select-option>
            <a-select-option value="mappingStrip">
              带状航线
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item name="payload">
          <a-select style="width: 200px;" placeholder="拍摄负载" v-model:value="formModel.payload">
            <a-select-option v-for="item in state.payloadList" :value="item.value">
              {{ item.label }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item name="search_info">
          <a-input style="width: 200px;" placeholder="计划名称" v-model:value="formModel.search_info" />
        </a-form-item>
        <a-form-item>
          <a-button style="margin-right: 10px;" @click="handleClickSearch">
            <template #icon>
              <SearchOutlined />
            </template>
          </a-button>
          <a-button @click="handleClickReset">
            <template #icon>
              <ReloadOutlined />
            </template>
          </a-button>
        </a-form-item>
      </a-form>
    </a-col>
  </a-row>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue';
import { SearchOutlined, ReloadOutlined } from '@ant-design/icons-vue';
import { apis } from '/@/api/custom';
import moment from 'moment';

interface Props {
  onClickSearch: (query: any) => Promise<any>,
  onClickReset: (query: any) => Promise<any>,
};

const props = withDefaults(defineProps<Props>(), {

});

const formRef = ref();

const formModel = reactive({
  rangeDate: [],
  template_type: undefined,
  payload: undefined,
  search_info: undefined,
})

interface State {
  payloadList: {
    value: string,
    label: string,
  }[],
};

const state: State = reactive({
  payloadList: [],
})

onMounted(async () => {
  try {
    const res = await apis.fetchPayloadList();
    const list = res.data.map((item: any) => {
      return {
        value: item.payload_name,
        label: item.payload_name,
      }
    })
    state.payloadList = list;
  } catch (e) {
    console.error(e);
  }
})

// 点击查询
const handleClickSearch = async () => {
  const values = formRef.value?.getFieldsValue();
  const data = {
    ...values,
  };
  delete data.rangeDate;
  if (values.rangeDate?.length === 2) {
    data.begin_time = moment(values.rangeDate[0]).valueOf();
    data.end_time = moment(values.rangeDate[1]).valueOf();
  }
  await props.onClickSearch(data);
}

// 点击重置
const handleClickReset = async () => {
  formRef.value?.resetFields();
  const values = formRef.value?.getFieldsValue();
  const data = {
    ...values,
  };
  delete data.rangeDate;
  await props.onClickReset(data);
}
</script>

<style lang="scss" scoped></style>