WholeProcessPlatform/frontend/src/views/shuJuTianBao/shengPiJiLu/approvalDetailSearch.vue

<template>
  <div class="approval-detail-search">
    <BasicSearch  ref="basicSearchRef" :searchList="searchList" :initial-values="initSearchData" :zhujianfujian="'fu'" @reset="handleReset"
      @finish="onSearchFinish" @values-change="onValuesChange">
      <template #ftp="{ onChange }">
        <fishSearch v-model="localTypeDate" width="200px" @update:modelValue="onChange" />
      </template>
    </BasicSearch>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed, onMounted, watch } from "vue";
import dayjs from "dayjs";
import BasicSearch from "@/components/BasicSearch/index.vue";
import { DateSetting } from "@/utils/enumeration";
import fishSearch from "@/components/fishSearch/index.vue";
import { useShuJuTianBaoStore } from "@/store/modules/shuJuTianBao";

interface Props {
  direction: any[];
  guoyuStatus: any[];
}

const props = defineProps<Props>();

const emit = defineEmits<{
  (e: "reset", values: any): void;
  (e: "search-finish", values: any): void;
}>();

const shuJuTianBaoStore = useShuJuTianBaoStore();
const localTypeDate = ref<string>(null);
const basicSearchRef = ref<any>();

const initSearchData = {
  hbrvcd: "all",
  stcd: null,
  rstcd: null,
  ftp: null,
  direction: null,
  strdt: [
    dayjs().subtract(1, "month").startOf("month").format("YYYY-MM-DD"),
    dayjs().endOf("day").format("YYYY-MM-DD"),
  ],
};

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

const searchList: any = computed(() => [
  {
    type: "waterStation",
    name: "hbrvcd",
    label: "流域",
    fieldProps: {
      allowClear: true,
    },
    options: [],
  },
  {
    span: 12,
    type: "RangePicker",
    name: "strdt",
    label: "过鱼时间",
    picker: "month",
    fieldProps: {
      format: "YYYY-MM",
      valueFormat: "YYYY-MM",
      allowClear: false,
    },
    presets: DateSetting.RangeButton.month,
  },
]);

const onSearchFinish = (values: any) => {
  emit("search-finish", values);
};

const onValuesChange = (changedValues: any, allValues: any) => {
  searchData.value = { ...searchData.value, ...allValues };
  if (
    Object.keys(changedValues)[0] == "rstcd" ||
    Object.keys(changedValues)[0] == "hbrvcd"
  ) {
    const formInstance = basicSearchRef.value?.formData;
    formInstance.stcd = null;
  }
};

const handleReset = () => {
  localTypeDate.value = null;
  emit("reset", initSearchData);
};

watch(
  () => initSearchData.ftp,
  (newVal) => {
    localTypeDate.value = newVal || "";
  },
  { immediate: true }
);

onMounted(() => {
  emit("search-finish", initSearchData);
  shuJuTianBaoStore.getFpssOption("", "");
});
</script>

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