WholeProcessPlatform/frontend-sjgl/src/views/conventionalHydropower/shuiShengShengTaiDiaoCha/WeSearch.vue

<template>
  <BasicSearch
    ref="basicSearchRef"
    :searchList="searchList"
    :initial-values="initSearchData"
    :zhujianfujian="'fu'"
    @reset="handleReset"
    @finish="onSearchFinish"
  >
    <template #actions>
      <a-button @click="hideBtn">{{ isHide ? '展开' : '隐藏' }}</a-button>
      <a-button type="primary" @click="handleAdd">新增</a-button>
      <a-button type="primary" @click="seeEdit">查看修改</a-button>
    </template>
  </BasicSearch>
</template>

<script lang="ts" setup>
import { ref, computed, onMounted } from 'vue';
import BasicSearch from '@/components/BasicSearch/index.vue';
import { sttpGetKendoList } from '@/api/system/map/ConfigManagement';

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

const basicSearchRef = ref();
const isHide = ref<boolean>(false);
const sttpOption = ref([]);

const initSearchData = {
  baseId: 'all',
  rstcd: null,
  stnm: null,
  sttp: null
};

const searchList: any = computed(() => [
  {
    type: 'jidiData',
    name: 'baseId',
    label: '水电基地',
    placeholder: '请输入水电基地名称',
    fieldProps: {
      allowClear: true
    },
    options: []
  },
  {
    type: 'Input',
    name: 'stnm',
    label: '断面名称',
    placeholder: '请输入断面名称',
    width: 160,
    fieldProps: {
      allowClear: true
    }
  },
  {
    col: isHide.value ? 0 : null,
    type: 'Select',
    name: 'sttp',
    label: '测站类型',
    width: 160,
    fieldProps: {
      allowClear: true,
      placeholder: '请选择测站类型'
    },
    options: sttpOption.value
  }
]);

const getBaseList = async () => {
  let params = {
    "filter": {
      "logic": "and",
      "filters": [
        {
          "field": "sttpCode",
          "operator": "in",
          "dataType": "string",
          "value": ["WE"]
        }
      ]
    }
  };
  const res = await sttpGetKendoList(params);
  sttpOption.value = res.data.data.map(item => {
    return {
      label: item.sttpName,
      value: item.sttpCode
    };
  });
};

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

const hideBtn = () => {
  isHide.value = !isHide.value;
};

const handleReset = () => {
  emit('reset', initSearchData);
};

const handleAdd = () => {
  emit('add');
};

const seeEdit = () => {
  emit('seeEdit');
};

onMounted(() => {
  getBaseList();
  emit('search-finish', { ...initSearchData });
});

defineExpose({
  basicSearchRef
});
</script>