diff --git a/src/api/base/server.ts b/src/api/base/server.ts index 26c9c5d..cd47a4b 100644 --- a/src/api/base/server.ts +++ b/src/api/base/server.ts @@ -15,6 +15,10 @@ export const xqxjFindAllApi = async () => { export const findAllNjBjTreeApi = async () => { return await get("/api/nj/findAllNjBjTree"); }; +export const findAllNjBjKzTreeApi = async () => { + return await get("/api/nj/findAllNjBjKzTree"); +}; + export const kmFindAllApi = async () => { return await get("/api/km/findAll"); }; diff --git a/src/components/BasicForm/src/BasicComponent.vue b/src/components/BasicForm/src/BasicComponent.vue index 734402b..573f878 100644 --- a/src/components/BasicForm/src/BasicComponent.vue +++ b/src/components/BasicForm/src/BasicComponent.vue @@ -17,6 +17,7 @@ + @@ -24,6 +25,7 @@ +``` + +## 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 数据结构 + +```typescript +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 | - | 关闭选择器 | + +## 使用示例 + +### 单选模式(默认) + +```vue + + + +``` + +### 多选模式 + +```vue + + + +``` + +### 无权限控制(单选) + +```vue + + + +``` + +### 自定义样式 + +```vue + +``` + +### 使用不受权限控制的接口 + +```vue + +``` + +### 禁用状态 + +```vue + +``` + +### 监听选择变化 + +```vue + + + +``` + +## 注意事项 + +1. 组件会自动加载年级班级数据,无需手动调用 +2. 如果使用 `useKzTree` 为 true,将调用不受权限控制的接口 +3. 组件支持 v-model 双向绑定 +4. 选择结果包含完整的年级班级信息,便于后续处理 +5. 年级节点支持展开/折叠,点击年级名称可以切换展开状态 +6. 选择年级时,会自动选择该年级下的所有班级 +7. 取消选择年级时,会同时取消选择该年级下的所有班级 +8. 班级可以独立选择,不受年级选择状态影响 diff --git a/src/components/BasicNjBjSelect/demo.vue b/src/components/BasicNjBjSelect/demo.vue new file mode 100644 index 0000000..645dc27 --- /dev/null +++ b/src/components/BasicNjBjSelect/demo.vue @@ -0,0 +1,149 @@ + + + + + diff --git a/src/components/BasicNjBjSelect/index.vue b/src/components/BasicNjBjSelect/index.vue new file mode 100644 index 0000000..7213c5b --- /dev/null +++ b/src/components/BasicNjBjSelect/index.vue @@ -0,0 +1,639 @@ + + + + + diff --git a/src/pages/view/quantitativeAssessment/assessment/assessment.vue b/src/pages/view/quantitativeAssessment/assessment/assessment.vue index 60a7cdc..df977ff 100644 --- a/src/pages/view/quantitativeAssessment/assessment/assessment.vue +++ b/src/pages/view/quantitativeAssessment/assessment/assessment.vue @@ -105,7 +105,7 @@ import {onShow} from "@dcloudio/uni-app"; import {deptFindByPidApi, dicApi} from "@/api/system/dic"; import {useForm} from "@/components/BasicForm/hooks/useForm"; import {getUserViewApi} from "@/api/system/login"; -import {BasicNjBjPicker} from "@/components/BasicNjBjPicker"; +import BasicNjBjSelect from "@/components/BasicNjBjSelect/index.vue"; function setItemValue() { console.log(444,value.value) @@ -125,14 +125,18 @@ const [register, {getValue, setSchema, setValue}] = useForm({ { field: "classInfo", label: "年级班级", - component: "BasicNjBjPicker", + component: "BasicNjBjSelect", required: true, + defaultValue: null, componentProps: { placeholder: "请选择年级班级", + useKzTree: true, // 使用权限控制的接口 + multiple: false, // 单选模式 customStyle: { backgroundColor: '#fff', borderRadius: '8px', - padding: '12px 15px' + padding: '8px 12px', + minHeight: '36px' } } } @@ -167,14 +171,14 @@ function radioChange() { console.log(222, value.value) } -function changeRuleItem(e) { +function changeRuleItem(e: any) { value.value = e.detail.value; } async function getInspectItemData() { let res = await inspectItemFindAllsApi(); if (res && res.result && res.result.length > 0) { - inspectItemData.value = res.result.filter(item => authItemIds.value.includes(item.id)); + inspectItemData.value = res.result.filter((item: any) => authItemIds.value.includes(item.id)); avtion.value = 0; getFractionRuleData(); } else { @@ -182,7 +186,7 @@ async function getInspectItemData() { } } -function onavtion(item, index) { +function onavtion(item: any, index: number) { avtion.value = index; console.log(111, fractionRuleData.value) getFractionRuleData(); @@ -223,7 +227,7 @@ async function onavtionList(item: any, index: any) { showpopup.value = true; } - inspectItemData.value[avtion.value]._rulenum = fractionRuleData.value[avtion.value].filter(item => item.isSelect).length; + inspectItemData.value[avtion.value]._rulenum = fractionRuleData.value[avtion.value].filter((item: any) => item.isSelect).length; } @@ -254,16 +258,21 @@ async function submit() { return; } let values = await getValue(); + console.log('assessment.vue getValue:', values); // 处理 classInfo 数据,提取 bjId - if (values.classInfo && values.classInfo.bjId) { + if (values.classInfo && values.classInfo.selectedClasses && values.classInfo.selectedClasses.length > 0) { + // 单选模式:取第一个选中的班级 + const selectedClass = values.classInfo.selectedClasses[0]; + console.log('selectedClass:', selectedClass); await evaluationSaveApi({ itemList: itemList, - bjId: values.classInfo.bjId + bjId: selectedClass.key }); showToast({title: "操作成功"}); navigateBack({delta: 1}) } else { + console.log('classInfo:', values.classInfo); showToast({title: "请选择班级"}); } } diff --git a/src/pages/view/quantitativeAssessment/index/index.vue b/src/pages/view/quantitativeAssessment/index/index.vue index a94f244..9f672fa 100644 --- a/src/pages/view/quantitativeAssessment/index/index.vue +++ b/src/pages/view/quantitativeAssessment/index/index.vue @@ -34,7 +34,7 @@ {{ data.fullName }} {{ data.score }}分 - 本周得分{{ data.score ? (100 + parseFloat(data.score)) : 100 }} + 本周得分{{ data.score ? (300 + parseFloat(data.score)) : 300 }}