mohのAI正在绞尽脑汁想思路ING···
mohのAI摘要
mohのAI-Lite

前端篇

文件上传组件

1、上传附件 返回附件的url
属性值

uploadMode: 可以指定上传模式，默认为file; 其中可选 file || video || drag || image

1
2
3
4
5
6
7
8
9
	<a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
    <a-form-item label="封面" name="workCoverUrl">
        <xn-upload
                v-model:value="formData.workCoverUrl"
                uploadMode="image"
                uploadText="上传封面"
        />
    </a-form-item>
</a-col>
2、附件上传获取附件返回的详情信息
注意

下面是获取附件上传返回的详情信息 如文件上传名称、文件格式、文件大小等信息 通过@onSuccessful的函数进行赋值
注意: :uploadNumber=1 是指定文件上传数量

1
2
3
4
5
6
7
8
<a-form-item label="附件上传">
	<xn-upload 
		v-model:value="fileData" 
		uploadResultCategory="array" 
		:uploadNumber=1
		@onSuccessful="handleUploadSuccess"
	/>
</a-form-item>
1
2
3
4
5
6
7
8
9
// 上传成功后的处理
const handleUploadSuccess = (data) => {
    if (data && data.length > 0) {
            formData.value.fileUrl = data[0].response?.data || data[0].url || ''
            formData.value.fileName = data[0].name || ''
            formData.value.fileType = data[0].name ? data[0].name.split('.').pop() : ''
            formData.value.fileSize = data[0].size ? formatFileSize(data[0].size) : ''
    }
}

下拉框

1、字典类型的下拉框
属性值

注意: EDU_LEVEL 替换成对应的字典值

1
import tool from '@/utils/tool'
1
2
3
const gradeLevelNameOptions = ref([]);

const gradeLevelNameOptions = tool.dictList('EDU_LEVEL')
1
2
3
4
<a-select 
    v-model:value="searchFormState.gradeLevelName" 
    placeholder="请选择学段" 
    :options="gradeLevelNameOptions" />

示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<a-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
    <a-form-item label="学段" name="gradeLevelName">
        <a-select v-model:value="formData.gradeLevelName" placeholder="请选择学段" :options="gradeLevelNameOptions" allow-clear />
    </a-form-item>
</a-col>
<a-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
    <a-form-item label="年级" name="gradeName">
        <a-select v-model:value="formData.gradeName" placeholder="请选择年级" :options="gradeNameOptions" allow-clear />
    </a-form-item>
</a-col>
<a-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
    <a-form-item label="学科" name="subjectName">
        <a-select v-model:value="formData.subjectName" placeholder="请选择学科" :options="subjectNameOptions" allow-clear />
    </a-form-item>
</a-col>
1
2
3
4
5
6
7
8
9
10
11

// 字典选项
const gradeLevelNameOptions = ref([])
const gradeNameOptions = ref([])
const subjectNameOptions = ref([])

const initOptions = () => {
    gradeLevelNameOptions.value = tool.dictList('EDU_LEVEL')
    gradeNameOptions.value = tool.dictList('YEAR_PERIOD')
    subjectNameOptions.value = tool.dictList('SUBJECT')
}
2、自定义key和value的下拉框
属性值

这里就是将后端返回的值都赋值给了itemTypeData 后面通过:field-names属性指定key和value进行复制
这里的 @change="handleItemTypeChange" 是来监听下拉框的change事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
    <a-form-item label="作品类型" name="itemTypeId">
        <a-select
                v-model:value="formData.itemTypeId"
                show-search
                style="width: 100%"
                placeholder="请选择作品类型"
                allow-clear
                :options="itemTypeData"
                :field-names="{ value: 'itemTypeId', label: 'itemTypeName' }"
                @change="handleItemTypeChange"
        >
        </a-select>
    </a-form-item>
</a-col>

1
2
3
4
5
6
7
8
9
10
// 加载作品类型数据
const loadItemTypeData = () => {
    trfrontProjectApi.itemTypeListByProjectId({ projectId: projectId.value }).then((res) => {
        console.log('作品类型数据:', res)
        itemTypeData.value = res || []
    }).catch((error) => {
        console.error('获取作品类型失败:', error)
        itemTypeData.value = []
    })
}
1
2
3
4
5
6
7
// 处理作品类型选择变化
const handleItemTypeChange = (value) => {
    const selectedItem = itemTypeData.value.find(item => item.itemTypeId === value)
    if (selectedItem) {
        formData.value.itemTypeName = selectedItem.itemTypeName
    }
}

后端篇

将实体类列表转换为map列表

属性值

通过BeanUtil.beanToMap(实体类) 转换为map的形式

1
2
3
4
5
6
7
8
public List<Map<String, Object>> itemTypeListByProjectId(String projectId) {
    List<Map<String, Object>> result = new ArrayList<>();
    List<TrcProjectItemType> list = trcProjectItemTypeService.list(new LambdaQueryWrapper<TrcProjectItemType>().eq(TrcProjectItemType::getProjectId, projectId));
    for (TrcProjectItemType project : list) {
        result.add(BeanUtil.beanToMap(project));
    }
    return result;
}