| | |
| | | <template> |
| | | <Category :category="provinceList" @change="change" class="position-select-view"> |
| | | <Category :category="industryList" @change="change" class="position-select-view"> |
| | | <CategoryPane :max="max" :categoryChild="categoryChild" :multiple="multiple" v-model="model"> |
| | | </CategoryPane> |
| | | </Category> |
| | | </template> |
| | | |
| | | <script setup lang="ts"> |
| | | import { useAllAreaList } from '@12333/hooks'; |
| | | import { useAllSearchSettingList, useSearchSettingType } from '@12333/hooks'; |
| | | import Category from './Category.vue'; |
| | | import CategoryPane from './CategoryPane.vue'; |
| | | import { reactive, computed, watch } from 'vue'; |
| | | import { SearchType } from '@12333/constants'; |
| | | |
| | | defineOptions({ |
| | | name: 'PositionSelectView', |
| | |
| | | multiple: true, |
| | | }); |
| | | |
| | | const model = defineModel<number[]>(); |
| | | const model = defineModel<string[]>(); |
| | | |
| | | const state = reactive({ |
| | | provinceIndex: 0, |
| | | }); |
| | | |
| | | const { areaTreeList } = useAllAreaList(); |
| | | |
| | | const provinceList = computed(() => areaTreeList.value.map((x) => ({ ...x, name: x.areaName }))); |
| | | const { allSearchSettingList: positionList } = useAllSearchSettingList({ |
| | | searchType: SearchType.Position, |
| | | }); |
| | | const { searchSettingTypeList: industryList } = useSearchSettingType({ |
| | | searchType: SearchType.IndustryCategory, |
| | | }); |
| | | |
| | | const categoryChild = computed(() => { |
| | | if (!provinceList.value.length) { |
| | | if (!industryList.value.length) { |
| | | return []; |
| | | } |
| | | return provinceList.value[state.provinceIndex].children.map((x) => ({ |
| | | ...x, |
| | | name: x.areaName, |
| | | value: x.areaCode, |
| | | })); |
| | | return positionList.value?.filter( |
| | | (x) => x.parentName === industryList.value[state.provinceIndex].name |
| | | ); |
| | | }); |
| | | |
| | | const change = (index: number) => { |