<template>
|
<Category :category="provinceList" @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 Category from './Category.vue';
|
import CategoryPane from './CategoryPane.vue';
|
import { reactive, computed, watch } from 'vue';
|
|
defineOptions({
|
name: 'PositionSelectView',
|
});
|
|
type Props = {
|
multiple?: boolean;
|
max?: number;
|
};
|
|
const props = withDefaults(defineProps<Props>(), {
|
multiple: true,
|
});
|
|
const model = defineModel<number[]>();
|
|
const state = reactive({
|
provinceIndex: 0,
|
});
|
|
const { areaTreeList } = useAllAreaList();
|
|
const provinceList = computed(() => areaTreeList.value.map((x) => ({ ...x, name: x.areaName })));
|
|
const categoryChild = computed(() => {
|
if (!provinceList.value.length) {
|
return [];
|
}
|
return provinceList.value[state.provinceIndex].children.map((x) => ({
|
...x,
|
name: x.areaName,
|
value: x.areaCode,
|
}));
|
});
|
|
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>
|
