WholeProcessPlatform/frontend-sjgl/src/views/monitorData/FlowData/FlowDataSearch.vue

<template>
  <div class="approval-search">
    <BasicSearch
      ref="basicSearchRef"
      :searchList="searchList"
      :initial-values="initSearchData"
      :zhujianfujian="'fu'"
      @reset="handleResetWrapper"
      @finish="onSearchFinish"
      @values-change="onValuesChange"
      ><template #jcdt>
        <a-date-picker
          class="w-[160px]"
          v-model:value="jcdt.min"
          :format="timeFormat"
          value-format="YYYY-MM-DD HH:mm:ss"
          :allow-clear="false"
          :picker="timePicker"
          :showTime="timeShowTime"
          placeholder="起始时间"
          :showToday="false"
          :showNow="false"
        >
          <template #renderExtraFooter>
            <div class="flex items-center flex-wrap px-2">
              <span
                v-for="item in timeShortcutList"
                :key="item.label"
                @click="handleRangeClick(item)"
              >
                <a class="text-[#1890ff] mr-1"> {{ item.label }}</a>
              </span>
            </div>
          </template>
        </a-date-picker>
        至
        <a-form-item-rest>
          <a-date-picker
            class="w-[160px]"
            v-model:value="jcdt.max"
            :format="timeFormat"
            value-format="YYYY-MM-DD HH:mm:ss"
            :picker="timePicker"
            :allow-clear="false"
            :showTime="timeShowTime"
            :disabledDate="disabledEndDate"
            placeholder="结束时间"
            :showToday="false"
            :showNow="false"
          >
            <template #renderExtraFooter>
              <div class="flex items-center flex-wrap px-2">
                <span
                  v-for="item in timeShortcutList"
                  :key="item.label"
                  @click="handleRangeClick(item)"
                >
                  <a class="text-[#1890ff] mr-1"> {{ item.label }}</a>
                </span>
              </div>
            </template>
          </a-date-picker>
        </a-form-item-rest>
      </template>
      <template #actions>
        <a-button :loading="exportLoading" @click="exportBtn">导出</a-button>
      </template>
    </BasicSearch>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed, onMounted } from 'vue';
import BasicSearch from '@/components/BasicSearch/index.vue';
import { useTimeScale } from '@/store/composables/useTimeScale';

const emit = defineEmits<{
  (e: 'export-btn'): void;
  (e: 'reset', values: any): void;
  (e: 'search-finish', values: any): void;
}>();
const basicSearchRef = ref<any>();
const btnLoading = ref<boolean>(false);

const props = defineProps<{
  exportLoading?: boolean;
}>();

const initSearchData = {
  rvcd: 'all',
  rstcd: '008660306300000001',
  basin: null,
  ruleType: null,
  timeScale: 'tm'
};

const searchData = ref<any>({ ...initSearchData });

const {
  jcdt,
  currentTimeScale,
  timePicker,
  timeFormat,
  timeShowTime,
  timeShortcutList,
  handleRangeClick,
  disabledEndDate,
  handleSearchFinish,
  handleValuesChange,
  handleReset,
  init,
  setDefaultTimeRange
} = useTimeScale({
  defaultTimeScale: initSearchData.timeScale,
  onSearchFinish: values => emit('search-finish', values),
  onReset: () => emit('reset', initSearchData)
});

const searchList: any = computed(() => [
  {
    type: 'waterStation',
    name: 'rvcd',
    label: '流域',
    placeholder: '请输入流域名称',
    fieldProps: {
      allowClear: true
    },
    options: []
  },
  {
    type: 'Select',
    name: 'ruleType',
    label: '规则类型',
    width: 160,
    placeholder: '请选择规则类型',
    fieldProps: {
      allowClear: false
    },
    options: [
      { label: '全部', value: '' },
      { label: '环评要求', value: 'sfdb' },
      { label: '水利部要求', value: 'mwrSfdb' },
      { label: '多年平均流量10%', value: 'avqSfdb' },
      { label: '无生态流量要求', value: 'wstllyq' }
    ]
  },
  {
    type: 'Select',
    name: 'timeScale',
    label: '时间统计尺度',
    width: 80,
    placeholder: '请选择时间统计尺度',
    fieldProps: {
      allowClear: false
    },
    options: [
      {
        label: '小时',
        value: 'tm'
      },
      {
        label: '日',
        value: 'dt'
      },
      {
        label: '月',
        value: 'month'
      }
    ]
  },
  {
    type: 'custom',
    name: 'jcdt',
    label: '时间',
    fieldProps: {
      allowClear: false
    }
  }
]);

const onSearchFinish = (values: any) => {
  handleSearchFinish(values);
};

const exportBtn = () => {
  emit('export-btn');
};

const onValuesChange = (changedValues: any, allValues: any) => {
  handleValuesChange(changedValues, allValues);
  searchData.value = { ...searchData.value, ...allValues };
};

const handleResetWrapper = () => {
  // 手动重置内部状态，避免触发两次请求
  currentTimeScale.value = initSearchData.timeScale;
  setDefaultTimeRange(initSearchData.timeScale);
  // 触发搜索，确保包含 jcdt 等完整参数
  handleSearchFinish({
    ...initSearchData,
    timeScale: currentTimeScale.value
  });
};

defineExpose({
  btnLoading,
  searchData
});

onMounted(() => {
  init();
  handleSearchFinish({ ...initSearchData });
});
</script>

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