<template>
|
<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 { 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',
|
});
|
|
type Props = {
|
multiple?: boolean;
|
max?: number;
|
};
|
|
const props = withDefaults(defineProps<Props>(), {
|
multiple: true,
|
});
|
|
const model = defineModel<string[]>();
|
|
const state = reactive({
|
provinceIndex: 0,
|
});
|
|
const { allSearchSettingList: positionList } = useAllSearchSettingList({
|
searchType: SearchType.Position,
|
});
|
const { searchSettingTypeList: industryList } = useSearchSettingType({
|
searchType: SearchType.IndustryCategory,
|
});
|
|
const categoryChild = computed(() => {
|
if (!industryList.value.length) {
|
return [];
|
}
|
return positionList.value?.filter(
|
(x) => x.parentName === industryList.value[state.provinceIndex].name
|
);
|
});
|
|
const change = (index: number) => {
|
state.provinceIndex = index;
|
};
|
</script>
|
|
<style lang="scss">
|
@import '@/styles/common.scss';
|
|
.position-select-view {
|
.nut-category__cateList {
|
height: 100%;
|
|
& > .h5-div {
|
height: 100%;
|
overflow-y: auto;
|
}
|
|
.nut-category__cateList-scroll {
|
height: 100%;
|
width: auto;
|
}
|
}
|
|
.nut-category-pane {
|
height: 100%;
|
overflow-y: auto;
|
flex: 1;
|
min-width: 0;
|
}
|
}
|
</style>
|
