本文記錄在發布文章時，可以添加自己創建的面試官和面試記錄到文章中這一功能的實現。
前端
首先是在原本的界面的底部添加了兩個多選框（后期需要美化調整）
實現的代碼：
<el-col style="margin-top: 1rem;"><el-selectstyle="width: 100%; margin-bottom: 1rem;"v-model="selectedInterviewers"multiplefilterableplaceholder="請選擇面試官":loading="interviewersLoading"><el-optionv-for="item in interviewersList":key="item.interviewerId":label="item.name":value="item.interviewerId"><span>{{ item.name }}</span></el-option></el-select><el-selectstyle="width: 100%; margin-bottom: 1rem;"v-model="selectedInterviews"multiplefilterableplaceholder="請選擇面試記錄":loading="interviewsLoading"><el-optionv-for="item in interviewsList":key="item.chatId":label="item.topic":value="item.chatId"><span>{{ item.topic }}</span><!-- <span style="float: right; color: #8492a6; font-size: 13px">{{ item.topic }}</span> --></el-option></el-select></el-col>
然后是前端腳本，添加以下函數：
getInterviewers用來獲取該用戶創建的所有面試官。getInterviews用來獲取該用戶創建的所有面試記錄。
其次，在創建文章和保存文章時，也添加了兩個列表分別存儲面試官ID和面試記錄ID。
// 獲取用戶創建的面試官列表async getInterviewers() {let _ts = this;_ts.interviewersLoading = true;try {const res = await _ts.$axios.$get('/api/share/getUserInterviewers');if (res) {_ts.$set(_ts, 'interviewersList', res);console.log(res);}} catch (err) {_ts.$message.error('獲取面試官列表失敗');} finally {_ts.interviewersLoading = false;}}, // 獲取用戶創建的面試記錄列表async getInterviews() {let _ts = this;_ts.interviewsLoading = true;try {const res = await _ts.$axios.$get('/api/share/getUserChatRecords');if (res) {_ts.$set(_ts, 'interviewsList', res);console.log(res);}} catch (err) {_ts.$message.error('獲取面試記錄列表失敗');} finally {_ts.interviewsLoading = false;}}
后端接口
getUserInterviewers用來獲取該用戶創建的所有面試官。/getUserChatRecords用來獲取該用戶創建的所有面試記錄。
@GetMapping("/getUserInterviewers")public GlobalResult getUserInterviewers() {Long idUser = UserUtils.getCurrentUserByToken().getIdUser();List<Interviewer> interviewers = interviewerService.findInterviewers().stream().filter(interviewer -> interviewer.getUserId() != null && interviewer.getUserId().equals(idUser)).collect(Collectors.toList());return GlobalResultGenerator.genSuccessResult(interviewers);}@GetMapping("/getUserChatRecords")public GlobalResult getUserChatRecords() {Long idUser = UserUtils.getCurrentUserByToken().getIdUser();// 1. 查詢用戶的所有面試官List<Interviewer> interviewers = interviewerService.findInterviewers();// 2. 收集所有面試記錄List<ChatRecords> allRecords = new ArrayList<>();for (Interviewer interviewer : interviewers) {ChatRecords query = new ChatRecords();query.setUserId(idUser);query.setInterviewerId(interviewer.getInterviewerId());allRecords.addAll(chatService.getChatRecords(query));}return GlobalResultGenerator.genSuccessResult(allRecords);}問題記錄
- 前端發送的 JSON 中：
"chatRecordsList": [248], // 數字數組"interviewerList": ["680c96954b1d8a29c9e78e97"] // 字符串數組
- 后端 DTO 期望：
private List<ChatRecordsDto> chatRecordsList; // 需要對象而非數字private List<Interviewer> interviewerList; // 需要對象而非字符串
- FastJSON 無法直接將
248或字符串 ID 轉換為ChatRecordsDto/Interviewer對象。
解決方案
調整前端 JSON 結構
后端需要完整的對象而非 ID，前端發送嵌套對象：
{"chatRecordsList": [{"id": 248}], // 匹配 ChatRecordsDto 結構"interviewerList": [{"id": "680c96954b1d8a29c9e78e97"}] // 匹配 Interviewer 結構
}
具體修改：
let article = {idArticle: _ts.idArticle,articleTitle: _ts.articleTitle,articleContent: articleContent,articleContentHtml: articleContentHtml,articleTags: _ts.articleTags.join(","),articleStatus: 0,interviewerList: _ts.selectedInterviewers.map(id => ({interviewerId: id,name: null,userId: null,knowledgeBaseId: null,customPrompt: null,settingsList: null})),chatRecordsList: _ts.selectedInterviews.map(id => {const interview = _ts.interviewsList.find(item => item.chatId === id);return {interviewer: {interviewerId: interview ? interview.interviewerId : null,name: null,userId: null,knowledgeBaseId: null,customPrompt: null,settingsList: null},branch: null,chatId: id,userId: null,interviewerId: interview ? interview.interviewerId : null,createdAt: null,updatedAt: null,topic: null,};})};
