WholeProcessPlatform/frontend-sjgl/src/views/monitorData/FishRelease/FishReleaseSearch.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="YYYY"
          value-format="YYYY-MM-DD HH:mm:ss"
          picker="year"
          :showTime="timeShowTime"
          placeholder="起始时间"
          :showToday="false"
        >
          <template #renderExtraFooter>
            <div class="flex items-center flex-wrap px-2">
              <span
                v-for="item in timeDateList"
                :key="item"
                @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="YYYY"
            value-format="YYYY-MM-DD HH:mm:ss"
            picker="year"
            :showTime="timeShowTime"
            :disabledDate="disabledEndDate"
            placeholder="结束时间"
            :showToday="false"
          >
            <template #renderExtraFooter>
              <div class="flex items-center flex-wrap px-2">
                <span
                  v-for="item in DateSetting.RangeButton.days1"
                  :key="item"
                  @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 type="primary" @click="seeEdit">查看修改</a-button>
        <a-button :loading="exportLoading" @click="exportBtn">导出</a-button>
      </template>
    </BasicSearch>
  </div>
</template>

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

const timeDateList = ref([
  {
    label: '一年',
    value: [dayjs().startOf('year'), dayjs().endOf('year')] // 范围
  },
  {
    label: '两年',
    value: [dayjs().subtract(1, 'year').startOf('year'), dayjs().endOf('year')] // 范围
  },
  {
    label: '三年',
    value: [dayjs().subtract(2, 'year').startOf('year'), dayjs().endOf('year')] // 范围
  },
  {
    label: '五年',
    value: [
      dayjs().subtract(4, 'year').startOf('year'),
      dayjs().startOf('year')
    ] // 范围
  }
]);
const emit = defineEmits<{
  (e: 'export-btn'): void;
  (e: 'reset', values: any): void;
  (e: 'search-finish', values: any): void;
  (e: 'seeEdit'): void;
}>();

const basicSearchRef = ref<any>();
const btnLoading = ref<boolean>(false);

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

const initSearchData = {
  rvcd: 'all',
  rstcd: null,
  stcd: null
};

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

const {
  jcdt,
  currentTimeScale,
  timeShowTime,
  handleRangeClick,
  disabledEndDate,
  handleSearchFinish,
  handleValuesChange,
  init
} = 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: 'custom',
    name: 'jcdt',
    label: '时间',
    fieldProps: {
      allowClear: false
    }
  }
]);

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

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

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

const handleResetWrapper = () => {
  // 手动重置内部状态，避免触发两次请求
  currentTimeScale.value = initSearchData.timeScale;
  // 设置默认年份：前一年到当前年
  const now = dayjs();
  jcdt.value = {
    min: `${now
      .subtract(1, 'year')
      .startOf('year')
      .format('YYYY-MM-DD')} 00:00:00`,
    max: `${now.endOf('year').format('YYYY-MM-DD')} 23:59:59`
  };
  // 触发搜索，使用当前状态而非 initSearchData
  handleSearchFinish({
    ...initSearchData
  });
};

defineExpose({
  btnLoading,
  searchData
});

onMounted(() => {
  init();
  // 设置默认年份：前一年到当前年
  const now = dayjs();
  jcdt.value = {
    min: `${now
      .subtract(1, 'year')
      .startOf('year')
      .format('YYYY-MM-DD')} 00:00:00`,
    max: `${now.endOf('year').format('YYYY-MM-DD')} 23:59:59`
  };
  // 使用 handleSearchFinish 确保包含 jcdt 等完整参数
  handleSearchFinish({ ...initSearchData });
});
</script>

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