<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 { useDictionaryDataSelect, useGetDictionaryCategorySelect } from '@12333/hooks';
|
import Category from './Category.vue';
|
import CategoryPane from './CategoryPane.vue';
|
import { reactive, computed, watch } from 'vue';
|
import { CategoryCode } 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({
|
industryIndex: 0,
|
});
|
|
const { dictionaryDataList: industryList } = useDictionaryDataSelect({
|
categoryCode: CategoryCode.IndustryCategory,
|
});
|
|
const _industryList = computed(() =>
|
industryList.value.map((x) => ({
|
...x,
|
name: x.label,
|
id: x.value,
|
}))
|
);
|
|
const { dictionaryDataList: positionList } = useDictionaryDataSelect({
|
categoryCode: CategoryCode.Position,
|
});
|
|
const _positionList = computed(() =>
|
positionList.value.map((x) => ({
|
...x,
|
name: x.label,
|
id: x.value,
|
}))
|
);
|
|
const categoryChild = computed(() => {
|
if (!_industryList.value.length) {
|
return [];
|
}
|
return _positionList.value?.filter(
|
(x) => x.data.field1 === _industryList.value[state.industryIndex]?.code
|
);
|
});
|
|
const change = (index: number) => {
|
state.industryIndex = 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>
|
