zhxy-jsd/src/components/BasicNjBjSelect

BasicNjBjSelect 年级班级选择组件

一个通用的年级班级树形选择组件，支持多选模式，提供友好的用户界面。

功能特性

• 🌳 树形结构：支持年级和班级的层级结构选择
• ✅ 多选模式：支持选择多个年级和班级
• 🔄 双向绑定：支持 v-model 双向数据绑定
• 🎨 自定义样式：支持自定义触发按钮样式
• 🚫 权限控制：支持选择是否使用权限控制接口
• 📱 响应式设计：适配移动端界面
• ⚡ 异步加载：支持异步加载年级班级数据
• 🔍 展开折叠：支持年级节点的展开和折叠

基本用法

<template>
  <view class="demo">
    <BasicNjBjSelect 
      v-model="selectedClass"
      placeholder="请选择年级班级"
      @change="onClassChange"
    />
  </view>
</template>

<script setup>
import { ref } from 'vue'
import BasicNjBjSelect from '@/components/BasicNjBjSelect/index.vue'

const selectedClass = ref(null)

const onClassChange = (result) => {
  console.log('选择的班级:', result)
}
</script>

Props

参数	类型	默认值	说明
modelValue	TreeSelectResult | null	null	双向绑定的值
defaultValue	TreeSelectResult | null	null	默认值
customStyle	any	{}	自定义样式
iconArrow	string	'bottom'	箭头图标类型
iconColor	string	'#666'	箭头颜色
placeholder	string	'选择年级班级'	占位符文本
disabled	boolean	false	是否禁用
title	string	'选择班级'	弹窗标题
useKzTree	boolean	false	是否使用不受权限控制的接口（true: 调用 findAllNjBjKzTreeApi，false: 调用 findAllNjBjTreeApi）
multiple	boolean	false	是否支持多选（true: 多选模式，false: 单选模式）

Events

事件名	参数	说明
change	(result: TreeSelectResult | null)	选择变化时触发
update:modelValue	(result: TreeSelectResult | null)	v-model 更新时触发

TreeSelectResult 数据结构

interface TreeSelectResult {
  selectedGrades: NjItem[]           // 选中的年级列表
  selectedClasses: BjItem[]          // 选中的班级列表
  allSelected: (NjItem | BjItem)[]   // 所有选中的项目
}

interface NjItem {
  key: string        // 年级ID
  title: string      // 年级名称
  njmcId: string     // 年级名称ID
  children: BjItem[] // 班级列表
  expanded?: boolean // 是否展开
}

interface BjItem {
  key: string        // 班级ID
  title: string      // 班级名称
}

权限配置

组件支持两种权限模式：

权限控制模式（默认）

• useKzTree: false（默认值）
• 调用 findAllNjBjTreeApi 接口
• 根据用户权限返回可访问的年级班级数据
• 适用于需要权限控制的场景

无权限控制模式

• useKzTree: true
• 调用 findAllNjBjKzTreeApi 接口
• 返回所有年级班级数据，不受权限限制
• 适用于管理员或需要查看全部数据的场景

选择模式

组件支持两种选择模式：

单选模式（默认）

• multiple: false（默认值）
• 使用 radio 按钮进行选择
• 只能选择一个年级或一个班级
• 选择班级时会自动选择对应的年级
• 适用于需要精确选择单个班级的场景

多选模式

• multiple: true
• 使用 checkbox 按钮进行选择
• 可以选择多个年级和多个班级
• 年级和班级可以独立选择
• 适用于需要批量选择的场景

方法

通过 ref 可以调用以下方法：

方法名	参数	说明
reset	-	重置选择
setValue	(grades: NjItem[], classes: BjItem[])	设置值
loadData	-	重新加载数据
openSelector	-	打开选择器
closeSelector	-	关闭选择器

使用示例

单选模式（默认）

<template>
  <BasicNjBjSelect 
    v-model="selectedData" 
    :multiple="false"
    :use-kz-tree="false"
    placeholder="请选择年级班级"
  />
</template>

<script setup>
import { ref } from 'vue'
import BasicNjBjSelect from '@/components/BasicNjBjSelect/index.vue'

const selectedData = ref(null)
</script>

多选模式

<template>
  <BasicNjBjSelect 
    v-model="selectedData" 
    :multiple="true"
    :use-kz-tree="false"
    placeholder="请选择年级班级"
  />
</template>

<script setup>
import { ref } from 'vue'
import BasicNjBjSelect from '@/components/BasicNjBjSelect/index.vue'

const selectedData = ref(null)
</script>

无权限控制（单选）

<template>
  <BasicNjBjSelect 
    v-model="selectedData" 
    :multiple="false"
    :use-kz-tree="true"
    title="选择年级班级（全部）"
    placeholder="选择全部年级班级"
  />
</template>

<script setup>
import { ref } from 'vue'
import BasicNjBjSelect from '@/components/BasicNjBjSelect/index.vue'

const selectedData = ref(null)
</script>

自定义样式

<template>
  <BasicNjBjSelect 
    v-model="selectedData"
    :custom-style="{ 
      backgroundColor: '#f0f9ff', 
      borderColor: '#0ea5e9' 
    }"
    placeholder="请选择年级班级"
  />
</template>

使用不受权限控制的接口

<template>
  <BasicNjBjSelect 
    v-model="selectedData"
    :use-kz-tree="true"
    title="选择年级班级（全部）"
  />
</template>

禁用状态

<template>
  <BasicNjBjSelect 
    v-model="selectedData"
    :disabled="true"
  />
</template>

监听选择变化

<template>
  <BasicNjBjSelect 
    v-model="selectedData"
    @change="onSelectionChange"
  />
</template>

<script setup>
const onSelectionChange = (result) => {
  if (result) {
    console.log('选中的年级数量:', result.selectedGrades.length)
    console.log('选中的班级数量:', result.selectedClasses.length)
    console.log('选中的年级:', result.selectedGrades)
    console.log('选中的班级:', result.selectedClasses)
  }
}
</script>

注意事项

1. 组件会自动加载年级班级数据，无需手动调用
2. 如果使用 useKzTree 为 true，将调用不受权限控制的接口
3. 组件支持 v-model 双向绑定
4. 选择结果包含完整的年级班级信息，便于后续处理
5. 年级节点支持展开/折叠，点击年级名称可以切换展开状态
6. 选择年级时，会自动选择该年级下的所有班级
7. 取消选择年级时，会同时取消选择该年级下的所有班级
8. 班级可以独立选择，不受年级选择状态影响