shuhi-ui/src/views/data/universities/components/universities-search.vue

<!-- 搜索表单 -->
<template>
  <ele-card :body-style="{ paddingBottom: '8px' }">
    <ProSearch
      :items="formItems"
      ref="searchRef"
      @search="search"
      :initKeys="initKeys"
    ></ProSearch>
  </ele-card>
</template>

<script setup>
  import { reactive, ref, defineEmits } from 'vue';
  import ProSearch from '@/components/CommonPage/ProSearch2.vue';
  
  let { proxy } = getCurrentInstance();
  const emit = defineEmits(['search']);
  const provinceList = ref([]);
  const cityList = ref([]);
  const formItems = computed(() => {
    return [
      { type: 'input', label: '学校名称', prop: 'schoolName' },
      {
        type: 'select',
        label: '省份',
        prop: 'provinceId',
        options: provinceList.value.map((d) => {
          return { label: d.district, value: d.id };
        }),
        props: {
          filterable: true,
          onChange: (val) => {
            searchRef.value?.setData({ cityId: '' });
            getProviceList(val).then((res) => {
              cityList.value = res.data.data;
            });
          }
        }
      },
      {
        type: 'select',
        label: '所在市',
        prop: 'cityId',
        options: cityList.value.map((d) => {
          return { label: d.district, value: d.id };
        }),
        props: {
          filterable: true
        }
      },
      {
        type: 'dictSelect',
        label: '办学层次',
        prop: 'schoolLevel',
        props: {
          code: 'school_level'
        }
      },
      { type: 'input', label: '主管部门', prop: 'departmentName' },
      {
        type: 'dictSelect',
        label: '标记',
        prop: 'shcoolTag',
        props: {
          code: 'school_tag'
        }
      }
    ];
  });

  function getProviceList(id = 1) {
    return proxy.$http.get(`/baseinfo/districtInfo/findInfo/${id}`);
  }
  getProviceList().then((res) => {
    provinceList.value = res.data.data;
  });

  const initKeys = reactive({
    schoolName: '',
    provinceId: '',
    cityId: '',
    schoolLevel: '',
    departmentName: '',
    shcoolTag: ''
  });

  const searchRef = ref(null);
  /** 搜索 */
  const search = (data) => {
    emit('search', { ...data });
  };
</script>