Merge remote-tracking branch 'origin/main'
This commit is contained in:
@@ -48,6 +48,7 @@
|
||||
"clipboard": "2.0.8",
|
||||
"core-js": "3.25.3",
|
||||
"dayjs": "^1.11.8",
|
||||
"dompurify": "^3.2.6",
|
||||
"echarts": "5.4.0",
|
||||
"echarts-gl": "^2.0.9",
|
||||
"element-china-area-data": "^6.1.0",
|
||||
@@ -63,6 +64,8 @@
|
||||
"jspdf": "^2.5.2",
|
||||
"lodash": "^4.17.21",
|
||||
"mapv-three": "^1.0.18",
|
||||
"markdown-it": "^13.0.2",
|
||||
"marked": "^4.3.0",
|
||||
"nprogress": "0.2.0",
|
||||
"print-js": "^1.6.0",
|
||||
"quill": "1.3.7",
|
||||
|
||||
110
src/api/aiChat/ai_index.js
Normal file
110
src/api/aiChat/ai_index.js
Normal file
@@ -0,0 +1,110 @@
|
||||
import request from '@/utils/ai_request'
|
||||
|
||||
/**
|
||||
* 获取聊天历史记录
|
||||
* @param {Object} params 请求参数
|
||||
* @param {string} params.conversationId 会话ID
|
||||
* @param {string} params.user 用户ID
|
||||
* @param {number} [params.limit=20] 返回记录数量
|
||||
* @param {string} [params.beforeId] 获取此ID之前的记录
|
||||
* @returns {Promise} 包含历史记录的Promise
|
||||
*/
|
||||
export const getHistory = ({
|
||||
conversationId,
|
||||
user,
|
||||
limit = 20,
|
||||
beforeId
|
||||
}) => {
|
||||
const params = {
|
||||
conversationId,
|
||||
user,
|
||||
limit
|
||||
}
|
||||
|
||||
// 如果有beforeId参数，添加到请求中（后端参数名为firstId）
|
||||
if (beforeId) {
|
||||
params.firstId = beforeId
|
||||
}
|
||||
|
||||
return request({
|
||||
url: '/aitutor/aichat/getMessagesToUser',
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 发送反馈（点赞/点踩）
|
||||
* @param {Object} params 请求参数
|
||||
* @param {string} params.messageId 消息ID
|
||||
* @param {number} params.action 1-点赞 0-点踩
|
||||
* @param {string} params.user 用户ID
|
||||
* @returns {Promise} 包含操作结果的Promise
|
||||
*/
|
||||
export const sendFeedback = ({
|
||||
messageId,
|
||||
action,
|
||||
user
|
||||
}) => {
|
||||
return request({
|
||||
url: '/aitutor/aichat/feedback',
|
||||
method: 'post',
|
||||
data: {
|
||||
message_id: messageId,
|
||||
rating: action === 1 ? 'like' : 'dislike',
|
||||
user
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 上传文件
|
||||
* @param {FormData} formData 包含文件的FormData
|
||||
* @param {string} user 用户ID
|
||||
* @returns {Promise} 包含文件URL的Promise
|
||||
*/
|
||||
export const uploadFile = (formData, user) => {
|
||||
formData.append('user', user)
|
||||
return request({
|
||||
url: '/aitutor/aichat/files/upload',
|
||||
method: 'post',
|
||||
data: formData,
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data'
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 创建新会话
|
||||
* @param {string} user 用户ID
|
||||
* @param {string} title 会话标题
|
||||
* @returns {Promise} 包含新会话ID的Promise
|
||||
*/
|
||||
export const createConversation = (user, title) => {
|
||||
return request({
|
||||
url: '/aitutor/aichat/conversation/create',
|
||||
method: 'post',
|
||||
data: {
|
||||
user,
|
||||
title
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除会话
|
||||
* @param {string} conversationId 会话ID
|
||||
* @param {string} user 用户ID
|
||||
* @returns {Promise} 包含操作结果的Promise
|
||||
*/
|
||||
export const deleteConversation = (conversationId, user) => {
|
||||
return request({
|
||||
url: '/aitutor/aichat/conversation/delete',
|
||||
method: 'post',
|
||||
data: {
|
||||
conversation_id: conversationId,
|
||||
user
|
||||
}
|
||||
})
|
||||
}
|
||||
10
src/api/aitutor/chat.js
Normal file
10
src/api/aitutor/chat.js
Normal file
@@ -0,0 +1,10 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 获取学生AI对话消息列表（管理员查看）
|
||||
export function getMessagesToAdmin(params) {
|
||||
return request({
|
||||
url: '/aitutor/aichat/getMessagesToAdmin',
|
||||
method: 'get',
|
||||
params: params
|
||||
})
|
||||
}
|
||||
83
src/api/routine/NotificationManagement.js
Normal file
83
src/api/routine/NotificationManagement.js
Normal file
@@ -0,0 +1,83 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 查询通知管理列表
|
||||
export function listNotificationManagement(query) {
|
||||
return request({
|
||||
url: '/routine/NotificationManagement/list',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 查询通知管理详细
|
||||
export function getNotificationManagement(id) {
|
||||
return request({
|
||||
url: '/routine/NotificationManagement/' + id,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 新增通知管理
|
||||
export function addNotificationManagement(data) {
|
||||
return request({
|
||||
url: '/routine/NotificationManagement/add',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 修改通知管理
|
||||
export function updateNotificationManagement(data) {
|
||||
return request({
|
||||
url: '/routine/NotificationManagement/update',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 删除通知管理
|
||||
export function delNotificationManagement(id) {
|
||||
return request({
|
||||
url: '/routine/NotificationManagement/' + id,
|
||||
method: 'post'
|
||||
})
|
||||
}
|
||||
|
||||
// 批量修改通知管理
|
||||
export function batchUpdateNotificationManagement(data) {
|
||||
return request({
|
||||
url: '/routine/NotificationManagement/batchUpdate',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 获取年级列表
|
||||
export function getGradeList() {
|
||||
return request({
|
||||
url: '/routine/NotificationManagement/gradeList',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 按年级发送通知
|
||||
export function sendNotificationByGrades(data) {
|
||||
return request({
|
||||
url: '/routine/NotificationManagement/sendByGrades',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 查询当前用户发送的通知列表
|
||||
export function listMySentNotifications(query) {
|
||||
return request({
|
||||
url: '/routine/NotificationManagement/my-sent',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -90,7 +90,23 @@ export function updateStuIdReissue(data) {
|
||||
// 删除学生证补办
|
||||
export function delStuIdReissue(id) {
|
||||
return request({
|
||||
url: '/routine/stuIdReissue/' + id,
|
||||
url: '/routine/stuIdReissue/cancel/' + id,
|
||||
method: 'post'
|
||||
})
|
||||
}
|
||||
|
||||
// 获取学生证补办审核状态
|
||||
export function getStuIdReissueStatus(stuNo) {
|
||||
return request({
|
||||
url: '/routine/stuIdReissue/getStatus/' + stuNo,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 完成制作
|
||||
export function completedStuIdReissue(id) {
|
||||
return request({
|
||||
url: '/routine/stuIdReissue/completed/' + id,
|
||||
method: 'post'
|
||||
})
|
||||
}
|
||||
|
||||
@@ -54,3 +54,13 @@ export function delStuMultiLevelReview(id) {
|
||||
method: 'post'
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
// 更新审核信息并同时更新学生证补办状态
|
||||
export function updateStuMultiLevelReviewWithStuIdReissue(data) {
|
||||
return request({
|
||||
url: '/routine/stuMultiLevelReview/updateWithStuIdReissue',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
@@ -45,3 +45,11 @@ export function delMsg(id) {
|
||||
method: 'post'
|
||||
})
|
||||
}
|
||||
|
||||
// 根据学号查询用户ID
|
||||
export function getUserIdByStuNo(stuNo) {
|
||||
return request({
|
||||
url: '/system/msg/getUserIdByStuNo/' + stuNo,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
BIN
src/assets/ai/AI.png
Normal file
BIN
src/assets/ai/AI.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
1
src/assets/ai/good.svg
Normal file
1
src/assets/ai/good.svg
Normal file
@@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1753693561642" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11887" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M64 483.04V872c0 37.216 30.144 67.36 67.36 67.36H192V416.32l-60.64-0.64A67.36 67.36 0 0 0 64 483.04zM857.28 344.992l-267.808 1.696c12.576-44.256 18.944-83.584 18.944-118.208 0-78.56-68.832-155.488-137.568-145.504-60.608 8.8-67.264 61.184-67.264 126.816v59.264c0 76.064-63.84 140.864-137.856 148L256 416.96v522.4h527.552a102.72 102.72 0 0 0 100.928-83.584l73.728-388.96a102.72 102.72 0 0 0-100.928-121.824z" p-id="11888" fill="#4F46E5"></path></svg>
|
||||
|
After Width: | Height: | Size: 782 B |
1
src/assets/ai/tread.svg
Normal file
1
src/assets/ai/tread.svg
Normal file
@@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1753693581732" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13840" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M611.188364 651.962182h226.56a93.090909 93.090909 0 0 0 91.834181-108.334546l-61.905454-372.689454A93.090909 93.090909 0 0 0 775.889455 93.090909H372.968727v558.871273c82.152727 81.338182 72.866909 210.571636 88.832 242.338909 15.941818 31.767273 47.616 36.119273 55.621818 36.608 39.703273 0 179.665455-32.395636 93.789091-278.946909zM313.832727 651.636364V93.090909H202.891636a93.090909 93.090909 0 0 0-92.997818 88.901818l-16.709818 372.363637A93.090909 93.090909 0 0 0 186.181818 651.636364h127.650909z" fill="#4F46E5" p-id="13841"></path></svg>
|
||||
|
After Width: | Height: | Size: 883 B |
BIN
src/assets/ai/yonghu.png
Normal file
BIN
src/assets/ai/yonghu.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
BIN
src/assets/ai_icon/AI.png
Normal file
BIN
src/assets/ai_icon/AI.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
1
src/assets/ai_icon/add.svg
Normal file
1
src/assets/ai_icon/add.svg
Normal file
@@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1754037771551" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8573" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M972.8 460.8H51.2c-28.16 0-51.2 23.04-51.2 51.2s23.04 51.2 51.2 51.2h921.6c28.16 0 51.2-23.04 51.2-51.2s-23.04-51.2-51.2-51.2z" fill="#4F46E5" p-id="8574"></path><path d="M512 0c-28.16 0-51.2 23.04-51.2 51.2v921.6c0 28.16 23.04 51.2 51.2 51.2s51.2-23.04 51.2-51.2V51.2c0-28.16-23.04-51.2-51.2-51.2z" fill="#4F46E5" p-id="8575"></path></svg>
|
||||
|
After Width: | Height: | Size: 673 B |
1
src/assets/ai_icon/good.svg
Normal file
1
src/assets/ai_icon/good.svg
Normal file
@@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1753693561642" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11887" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M64 483.04V872c0 37.216 30.144 67.36 67.36 67.36H192V416.32l-60.64-0.64A67.36 67.36 0 0 0 64 483.04zM857.28 344.992l-267.808 1.696c12.576-44.256 18.944-83.584 18.944-118.208 0-78.56-68.832-155.488-137.568-145.504-60.608 8.8-67.264 61.184-67.264 126.816v59.264c0 76.064-63.84 140.864-137.856 148L256 416.96v522.4h527.552a102.72 102.72 0 0 0 100.928-83.584l73.728-388.96a102.72 102.72 0 0 0-100.928-121.824z" p-id="11888" fill="#4F46E5"></path></svg>
|
||||
|
After Width: | Height: | Size: 782 B |
1
src/assets/ai_icon/history.svg
Normal file
1
src/assets/ai_icon/history.svg
Normal file
@@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1754032734502" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5374" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M0 505.135c0-0.723 0.723-2.168 0.723-2.89 3.613-18.79 13.007-33.243 29.628-42.637 7.227-4.336 15.176-5.782 23.125-6.504H961.13c20.234 0 35.41 8.672 46.973 24.57 8.671 12.285 12.285 25.293 10.84 40.469-2.891 23.124-18.79 43.359-42.637 49.14-6.504 1.445-13.008 2.168-20.234 2.168H58.535c-23.848 0-39.746-11.563-51.308-31.074-3.614-5.781-5.059-12.285-6.504-18.79 0-0.722-0.723-2.167-0.723-2.89v-11.562zM0 205.234c0-0.723 0.723-2.168 0.723-2.891 3.613-18.789 13.007-33.242 29.628-42.637 7.227-4.335 15.176-5.78 23.125-6.503H961.13c20.234 0 35.41 8.671 46.973 24.57 8.671 12.285 12.285 25.293 10.84 40.468-2.891 23.125-18.79 43.36-42.637 49.14-6.504 1.446-13.008 2.169-20.234 2.169H58.535c-23.848 0-39.746-11.563-51.308-31.074-3.614-5.782-5.059-12.285-6.504-18.79 0-1.445-0.723-2.89-0.723-3.613v-10.84zM51.308 862.848c-1.445 0-2.168-0.722-3.613-0.722-16.62-3.614-28.183-13.008-36.855-27.461-6.504-10.84-9.395-22.402-8.672-34.688 2.168-24.57 19.512-46.25 44.804-52.03 5.06-1.446 10.84-1.446 16.622-1.446h899.703c19.512 0 34.687 8.672 46.25 23.848 7.226 10.117 11.562 22.402 11.562 34.687 0 14.453-5.058 27.46-14.453 38.3-9.394 10.84-21.68 17.344-36.132 18.79-0.723 0-1.446 0-2.168 0.722H51.308zM1024 189.335c-0.723-2.168-0.723-5.058-1.445-7.226l1.445 7.226z" fill="#000000" p-id="5375"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
1
src/assets/ai_icon/newChat.svg
Normal file
1
src/assets/ai_icon/newChat.svg
Normal file
@@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1754032784723" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7240" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M275.413 810.667L85.333 960V170.667A42.667 42.667 0 0 1 128 128h768a42.667 42.667 0 0 1 42.667 42.667V768A42.667 42.667 0 0 1 896 810.667H275.413z m193.92-384h-128V512h128v128h85.334V512h128v-85.333h-128v-128h-85.334v128z" fill="#2c2c2c" p-id="7241"></path></svg>
|
||||
|
After Width: | Height: | Size: 596 B |
1
src/assets/ai_icon/search.svg
Normal file
1
src/assets/ai_icon/search.svg
Normal file
@@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1754534613016" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6268" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M948.48 833.92l-185.6-183.68c-3.84-3.84-8.32-6.4-13.44-7.68C801.28 580.48 832 501.76 832 416 832 221.44 674.56 64 480 64 285.44 64 128 221.44 128 416 128 610.56 285.44 768 480 768c85.76 0 163.84-30.72 225.28-81.28 1.92 4.48 4.48 8.96 8.32 12.8l185.6 183.68c14.08 13.44 35.84 13.44 49.92 0S962.56 847.36 948.48 833.92zM480 704C320.64 704 192 575.36 192 416 192 256.64 320.64 128 480 128 639.36 128 768 256.64 768 416 768 575.36 639.36 704 480 704z" p-id="6269"></path></svg>
|
||||
|
After Width: | Height: | Size: 806 B |
1
src/assets/ai_icon/send.svg
Normal file
1
src/assets/ai_icon/send.svg
Normal file
@@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1754040545229" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1872" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M24.649143 399.36L965.485714 7.314286a29.257143 29.257143 0 0 1 39.643429 34.084571l-234.349714 937.472a29.257143 29.257143 0 0 1-47.104 15.36l-203.483429-169.545143a29.257143 29.257143 0 0 0-39.424 1.828572l-104.374857 104.301714a29.257143 29.257143 0 0 1-49.883429-20.626286V689.737143a29.257143 29.257143 0 0 1 8.557715-20.699429l424.448-424.448-501.101715 375.881143a29.257143 29.257143 0 0 1-36.278857-0.950857L17.188571 448.804571a29.257143 29.257143 0 0 1 7.460572-49.444571z" p-id="1873" fill="#4F46E5"></path></svg>
|
||||
|
After Width: | Height: | Size: 857 B |
1
src/assets/ai_icon/tread.svg
Normal file
1
src/assets/ai_icon/tread.svg
Normal file
@@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1753693581732" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13840" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M611.188364 651.962182h226.56a93.090909 93.090909 0 0 0 91.834181-108.334546l-61.905454-372.689454A93.090909 93.090909 0 0 0 775.889455 93.090909H372.968727v558.871273c82.152727 81.338182 72.866909 210.571636 88.832 242.338909 15.941818 31.767273 47.616 36.119273 55.621818 36.608 39.703273 0 179.665455-32.395636 93.789091-278.946909zM313.832727 651.636364V93.090909H202.891636a93.090909 93.090909 0 0 0-92.997818 88.901818l-16.709818 372.363637A93.090909 93.090909 0 0 0 186.181818 651.636364h127.650909z" fill="#4F46E5" p-id="13841"></path></svg>
|
||||
|
After Width: | Height: | Size: 883 B |
1
src/assets/ai_icon/voice.svg
Normal file
1
src/assets/ai_icon/voice.svg
Normal file
@@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1753693546032" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9939" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M216.064 418.816c-50.176 0-91.136 40.96-91.136 91.136s40.96 91.136 91.136 91.136 91.136-40.96 91.136-91.136-40.96-91.136-91.136-91.136zM415.232 815.104c-21.504 0-42.496-8.704-57.344-25.6-27.648-31.744-24.064-79.36 7.168-107.52 50.176-43.52 78.848-106.496 78.848-172.032 0-64.512-27.648-125.952-75.776-168.96-31.232-28.16-33.792-76.288-5.632-107.52s76.288-33.792 107.52-5.632c79.36 71.68 125.44 174.592 125.44 281.6 0 109.568-47.616 214.016-130.56 286.208-14.336 13.312-31.744 19.456-49.664 19.456z" p-id="9940" fill="#4F46E5"></path><path d="M601.088 985.088c-30.208-29.184-31.232-77.312-2.048-107.52 95.744-99.328 148.48-229.888 148.48-367.616 0-136.192-51.2-265.216-144.896-364.544-28.672-30.72-27.648-78.848 3.072-107.52s78.848-27.648 107.52 3.072c120.32 126.976 186.368 293.888 186.368 468.48 0 177.664-67.584 345.6-190.464 473.088-14.848 15.36-35.328 23.04-54.784 23.04-19.456 1.024-38.4-6.144-53.248-20.48z" p-id="9941" fill="#4F46E5"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
BIN
src/assets/ai_icon/yonghu.png
Normal file
BIN
src/assets/ai_icon/yonghu.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
499
src/components/aiChat/HistoryDrawer.vue
Normal file
499
src/components/aiChat/HistoryDrawer.vue
Normal file
@@ -0,0 +1,499 @@
|
||||
<template>
|
||||
<!-- 抽屉容器，visible控制显示 -->
|
||||
<div v-if="visible" class="drawer-container" @touchmove.prevent>
|
||||
<!-- 遮罩层，点击关闭 -->
|
||||
<div class="drawer-mask" @click="closeDrawer"></div>
|
||||
|
||||
<!-- 抽屉内容区域 -->
|
||||
<div class="drawer-content">
|
||||
<!-- 标题区域 -->
|
||||
<div class="drawer-header">
|
||||
<span class="title">历史记录</span>
|
||||
<img src="@/assets/close.svg" class="close-icon" @click="closeDrawer" />
|
||||
</div>
|
||||
|
||||
<!-- 搜索栏 -->
|
||||
<div class="search-bar">
|
||||
<img src="@/assets/search.svg" class="search-icon" />
|
||||
<input v-model="searchKeyword" placeholder="搜索聊天记录..." class="search-input" @input="handleSearch" />
|
||||
<img v-if="searchKeyword" src="@/assets/clear.svg" class="clear-icon" @click="clearSearch" />
|
||||
</div>
|
||||
|
||||
<!-- 历史列表区域 -->
|
||||
<div class="history-list">
|
||||
<!-- 加载状态 -->
|
||||
<div v-if="loading" class="loading-tip">加载中...</div>
|
||||
|
||||
<!-- 分组渲染历史记录 -->
|
||||
<template v-else-if="filteredRecords.length > 0">
|
||||
<template v-for="(group, groupIndex) in filteredRecords" :key="groupIndex">
|
||||
<div class="group-title">{{ group.title }}</div>
|
||||
<div v-for="item in group.list" :key="item.id" class="history-item"
|
||||
@click="handleItemClick(item)">
|
||||
<!-- 日期时间显示 -->
|
||||
<div class="datetime">
|
||||
<span class="date">{{ item.date }}</span>
|
||||
<span class="time">{{ item.time }}</span>
|
||||
</div>
|
||||
|
||||
<!-- 消息内容 -->
|
||||
<div class="record">
|
||||
<span class="user-msg" v-html="highlightKeyword(item.content)"></span>
|
||||
<span class="ai-msg" v-html="highlightKeyword(item.reply)"></span>
|
||||
</div>
|
||||
|
||||
<div class="divider"></div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<!-- 空状态提示 -->
|
||||
<div v-else class="empty-tip">
|
||||
<span>{{ searchKeyword ? '没有找到匹配的记录' : '暂无聊天记录' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref, watch } from 'vue'
|
||||
import { getHistory } from '@/api/aiChat/ai_index'
|
||||
import { useToast } from '@/composables/useToast'
|
||||
|
||||
export default {
|
||||
name: 'HistoryDrawer',
|
||||
props: {
|
||||
/** 是否显示抽屉 */
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
emits: [
|
||||
/** 关闭抽屉事件 */
|
||||
'close',
|
||||
/** 点击历史记录项事件 */
|
||||
'item-click'
|
||||
],
|
||||
setup(props, { emit }) {
|
||||
// 工具函数
|
||||
const { showToast } = useToast()
|
||||
|
||||
// 响应式数据
|
||||
const historyRecords = ref([]) // 所有历史记录（分组后）
|
||||
const filteredRecords = ref([]) // 筛选后的历史记录
|
||||
const searchKeyword = ref('') // 搜索关键词
|
||||
const loading = ref(false) // 加载状态
|
||||
|
||||
// 监听抽屉显示状态，显示时加载数据，隐藏时清空搜索
|
||||
watch(
|
||||
() => props.visible,
|
||||
(isVisible) => {
|
||||
if (isVisible) {
|
||||
loadHistoryRecords()
|
||||
} else {
|
||||
clearSearch()
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
/**
|
||||
* 关闭抽屉
|
||||
*/
|
||||
const closeDrawer = () => {
|
||||
emit('close')
|
||||
}
|
||||
|
||||
/**
|
||||
* 加载历史记录
|
||||
*/
|
||||
const loadHistoryRecords = async () => {
|
||||
// 显示加载状态
|
||||
loading.value = true
|
||||
|
||||
try {
|
||||
// 获取用户标识
|
||||
const userNo = localStorage.getItem('stuNo')
|
||||
if (!userNo) {
|
||||
throw new Error('未获取到用户学号')
|
||||
}
|
||||
|
||||
// 调用API获取历史记录
|
||||
const response = await getHistory({
|
||||
user: userNo,
|
||||
conversationId: '',
|
||||
limit: 20
|
||||
})
|
||||
|
||||
// 处理获取到的数据
|
||||
const rawList = Array.isArray(response.data?.data) ? response.data.data : []
|
||||
const groupedRecords = groupRecordsByTime(rawList)
|
||||
|
||||
// 更新记录数据
|
||||
historyRecords.value = groupedRecords
|
||||
filteredRecords.value = [...groupedRecords]
|
||||
} catch (error) {
|
||||
console.error('加载历史记录失败:', error)
|
||||
showToast(`加载失败: ${error.message}`, 'error')
|
||||
historyRecords.value = []
|
||||
filteredRecords.value = []
|
||||
} finally {
|
||||
// 隐藏加载状态
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 将原始记录按时间分组
|
||||
* @param {Array} rawList - 原始记录列表
|
||||
* @returns {Array} 分组后的记录
|
||||
*/
|
||||
const groupRecordsByTime = (rawList) => {
|
||||
const groupMap = {}
|
||||
|
||||
rawList.forEach(item => {
|
||||
// 处理时间戳，兼容不同字段名
|
||||
const timestamp = item.created_at || item.create_time || item.timestamp || Date.now() / 1000
|
||||
const recordDate = new Date(timestamp * 1000)
|
||||
|
||||
// 格式化记录数据
|
||||
const record = {
|
||||
id: item.id || Math.random().toString(36).slice(2),
|
||||
date: formatDate(recordDate),
|
||||
time: formatTime(recordDate),
|
||||
content: item.query || item.content || '未知内容',
|
||||
reply: item.answer || item.reply || '暂无回复',
|
||||
timestamp: timestamp
|
||||
}
|
||||
|
||||
// 按时间分组
|
||||
const groupTitle = getGroupTitle(recordDate)
|
||||
if (!groupMap[groupTitle]) {
|
||||
groupMap[groupTitle] = []
|
||||
}
|
||||
groupMap[groupTitle].push(record)
|
||||
})
|
||||
|
||||
// 转换为数组并排序
|
||||
return Object.entries(groupMap)
|
||||
.map(([title, list]) => ({
|
||||
title,
|
||||
// 按时间倒序排列（最新的在前）
|
||||
list: list.sort((a, b) => b.timestamp - a.timestamp)
|
||||
}))
|
||||
// 按分组标题排序（今天、昨天、7天内、30天内、更早）
|
||||
.sort((a, b) => getGroupOrder(b.title) - getGroupOrder(a.title))
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取分组的排序优先级
|
||||
* @param {String} title - 分组标题
|
||||
* @returns {Number} 排序优先级（数字越大越靠前）
|
||||
*/
|
||||
const getGroupOrder = (title) => {
|
||||
const orderMap = {
|
||||
'今天': 5,
|
||||
'昨天': 4,
|
||||
'7天内': 3,
|
||||
'30天内': 2,
|
||||
'更早': 1
|
||||
}
|
||||
return orderMap[title] || 0
|
||||
}
|
||||
|
||||
/**
|
||||
* 处理搜索
|
||||
*/
|
||||
const handleSearch = () => {
|
||||
const keyword = searchKeyword.value.trim().toLowerCase()
|
||||
|
||||
// 关键词为空时显示所有记录
|
||||
if (!keyword) {
|
||||
filteredRecords.value = [...historyRecords.value]
|
||||
return
|
||||
}
|
||||
|
||||
// 根据关键词筛选记录
|
||||
filteredRecords.value = historyRecords.value
|
||||
.map(group => ({
|
||||
...group,
|
||||
list: group.list.filter(item =>
|
||||
item.content.toLowerCase().includes(keyword) ||
|
||||
item.reply.toLowerCase().includes(keyword)
|
||||
)
|
||||
}))
|
||||
.filter(group => group.list.length > 0)
|
||||
}
|
||||
|
||||
/**
|
||||
* 清空搜索
|
||||
*/
|
||||
const clearSearch = () => {
|
||||
searchKeyword.value = ''
|
||||
filteredRecords.value = [...historyRecords.value]
|
||||
}
|
||||
|
||||
/**
|
||||
* 高亮显示关键词
|
||||
* @param {String} text - 原始文本
|
||||
* @returns {String} 处理后的HTML文本
|
||||
*/
|
||||
const highlightKeyword = (text) => {
|
||||
if (!searchKeyword.value || !text) {
|
||||
return text
|
||||
}
|
||||
|
||||
const keyword = searchKeyword.value.trim()
|
||||
return text.replace(
|
||||
new RegExp(keyword, 'gi'),
|
||||
`<span class="highlight">${keyword}</span>`
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取记录的分组标题（今天、昨天等）
|
||||
* @param {Date} date - 记录日期
|
||||
* @returns {String} 分组标题
|
||||
*/
|
||||
const getGroupTitle = (date) => {
|
||||
const now = new Date()
|
||||
const today = new Date(now.setHours(0, 0, 0, 0))
|
||||
const yesterday = new Date(today)
|
||||
yesterday.setDate(today.getDate() - 1)
|
||||
const oneWeekAgo = new Date(today)
|
||||
oneWeekAgo.setDate(today.getDate() - 7)
|
||||
const oneMonthAgo = new Date(today)
|
||||
oneMonthAgo.setDate(today.getDate() - 30)
|
||||
|
||||
if (date >= today) return '今天'
|
||||
if (date >= yesterday) return '昨天'
|
||||
if (date >= oneWeekAgo) return '7天内'
|
||||
if (date >= oneMonthAgo) return '30天内'
|
||||
return '更早'
|
||||
}
|
||||
|
||||
/**
|
||||
* 格式化日期为YYYY-MM-DD
|
||||
* @param {Date} date - 日期对象
|
||||
* @returns {String} 格式化后的日期字符串
|
||||
*/
|
||||
const formatDate = (date) => {
|
||||
return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')
|
||||
}-${date.getDate().toString().padStart(2, '0')
|
||||
}`
|
||||
}
|
||||
|
||||
/**
|
||||
* 格式化时间为HH:MM
|
||||
* @param {Date} date - 日期对象
|
||||
* @returns {String} 格式化后的时间字符串
|
||||
*/
|
||||
const formatTime = (date) => {
|
||||
return `${date.getHours().toString().padStart(2, '0')
|
||||
}:${date.getMinutes().toString().padStart(2, '0')
|
||||
}`
|
||||
}
|
||||
|
||||
/**
|
||||
* 处理历史记录项点击
|
||||
* @param {Object} item - 记录项数据
|
||||
*/
|
||||
const handleItemClick = (item) => {
|
||||
// 移除HTML标签，避免传递富文本
|
||||
emit('item-click', {
|
||||
...item,
|
||||
content: item.content.replace(/<[^>]+>/g, ''),
|
||||
reply: item.reply.replace(/<[^>]+>/g, '')
|
||||
})
|
||||
closeDrawer()
|
||||
}
|
||||
|
||||
return {
|
||||
historyRecords,
|
||||
filteredRecords,
|
||||
searchKeyword,
|
||||
loading,
|
||||
closeDrawer,
|
||||
handleSearch,
|
||||
clearSearch,
|
||||
highlightKeyword,
|
||||
handleItemClick
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.drawer-container {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.drawer-mask {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.drawer-content {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 66.67%;
|
||||
height: 100vh;
|
||||
background-color: #fff;
|
||||
box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.drawer-header {
|
||||
padding: 15px 15px 10px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #eee;
|
||||
height: 50px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.close-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px 15px;
|
||||
background-color: #f5f5f5;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
flex: 1;
|
||||
height: 36px;
|
||||
background-color: #fff;
|
||||
border-radius: 18px;
|
||||
padding: 0 15px;
|
||||
font-size: 14px;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.clear-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-left: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.history-list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 10px 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.group-title {
|
||||
font-size: 14px;
|
||||
color: #888;
|
||||
padding: 12px 20px;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.history-item {
|
||||
padding: 15px 20px;
|
||||
background-color: #fff;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.history-item:hover {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
.datetime {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.date {
|
||||
font-size: 13px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.time {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.record {
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.user-msg {
|
||||
display: block;
|
||||
color: #333;
|
||||
margin-bottom: 6px;
|
||||
padding: 6px 10px;
|
||||
background-color: #f9f9f9;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.ai-msg {
|
||||
display: block;
|
||||
color: #333;
|
||||
padding: 6px 10px;
|
||||
background-color: #eef7ff;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
color: #ff4d4f;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.divider {
|
||||
height: 8px;
|
||||
background-color: #f9f9f9;
|
||||
margin-top: 10px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.empty-tip,
|
||||
.loading-tip {
|
||||
text-align: center;
|
||||
color: #999;
|
||||
font-size: 16px;
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
input::placeholder {
|
||||
color: #ccc;
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
17
src/composables/useToast.js
Normal file
17
src/composables/useToast.js
Normal file
@@ -0,0 +1,17 @@
|
||||
import { showToast, showSuccess, showError, showWarning, showInfo } from '@/utils/toast'
|
||||
|
||||
/**
|
||||
* Toast composable
|
||||
* 提供统一的消息提示功能
|
||||
*/
|
||||
export function useToast() {
|
||||
return {
|
||||
showToast,
|
||||
showSuccess,
|
||||
showError,
|
||||
showWarning,
|
||||
showInfo
|
||||
}
|
||||
}
|
||||
|
||||
export default useToast
|
||||
1413
src/layout/components/Aichat/ChatPopup.vue
Normal file
1413
src/layout/components/Aichat/ChatPopup.vue
Normal file
File diff suppressed because it is too large
Load Diff
@@ -1,3 +1,4 @@
|
||||
<!--E:\桌面\AI辅导员\学工系统\zhxg_pc\src\layout\index.vue-->
|
||||
<template>
|
||||
<div :class="classObj" class="app-wrapper" :style="{ '--current-color': theme }">
|
||||
<el-scrollbar>
|
||||
@@ -16,11 +17,19 @@
|
||||
</el-scrollbar>
|
||||
|
||||
<!-- ai悬停 -->
|
||||
<div class="ai-hover" @click="showAI()">
|
||||
<div class="ai-hover-content">
|
||||
<i class="el-icon-question" style="font-size: 30px;"></i>
|
||||
<div>
|
||||
<!-- 其他页面内容 -->
|
||||
<!-- 触发按钮，控制弹窗显示隐藏 -->
|
||||
<div class="ai-hover" @click="toggleAI">
|
||||
<span v-if="!showAI" style="font-size: 14px; font-weight: bold;">AI</span>
|
||||
<i v-else class="el-icon-close" style="font-size: 20px;"></i>
|
||||
</div>
|
||||
<!-- 聊天弹窗，通过 v-if 控制显隐 -->
|
||||
<transition name="chat-popup">
|
||||
<ChatPopup v-if="showAI" @close="showAI = false" />
|
||||
</transition>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -30,13 +39,15 @@ import { AppMain, Navbar, Settings, Sidebar, TagsView } from './components'
|
||||
import ResizeMixin from './mixin/ResizeHandler'
|
||||
import { mapState } from 'vuex'
|
||||
import variables from '@/assets/styles/variables.scss'
|
||||
import ChatPopup from '../layout/components/Aichat/ChatPopup.vue'
|
||||
|
||||
import {
|
||||
initCoze
|
||||
} from "@/utils/ai.js";
|
||||
} from '@/utils/ai.js'
|
||||
import {
|
||||
getAccessToken
|
||||
} from "@/api/aiJWT/aiJWT.js"
|
||||
} from '@/api/aiJWT/aiJWT.js'
|
||||
|
||||
export default {
|
||||
name: 'Layout',
|
||||
components: {
|
||||
@@ -45,9 +56,15 @@ export default {
|
||||
RightPanel,
|
||||
Settings,
|
||||
Sidebar,
|
||||
TagsView
|
||||
TagsView,
|
||||
ChatPopup // 注册ChatPopup组件
|
||||
},
|
||||
mixins: [ResizeMixin],
|
||||
data() {
|
||||
return {
|
||||
showAI: false // 控制AI弹窗显示/隐藏的变量
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
theme: state => state.settings.theme,
|
||||
@@ -70,42 +87,55 @@ export default {
|
||||
}
|
||||
},
|
||||
variables() {
|
||||
return variables;
|
||||
return variables
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClickOutside() {
|
||||
this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
|
||||
},
|
||||
async showAI() {
|
||||
let userInfo = {
|
||||
roleGroup: this.userInfo.roles[0].roleName || "student",
|
||||
nickName: this.userInfo.nickName,
|
||||
username: this.userInfo.userName,
|
||||
avater: this.avatar,
|
||||
user_token: this.token
|
||||
// 切换AI弹窗显示状态
|
||||
toggleAI() {
|
||||
// 使用明确的状态切换，避免与close事件冲突
|
||||
if (this.showAI) {
|
||||
this.showAI = false
|
||||
} else {
|
||||
this.showAI = true
|
||||
}
|
||||
console.log("请求AI的信息", userInfo)
|
||||
|
||||
//1.获取token
|
||||
userInfo.accessToken = (await this.getAccessToken()).access_token;
|
||||
userInfo.onRefreshToken = async () => (await this.getAccessToken()).accessToken;
|
||||
const sdk = await initCoze(userInfo);
|
||||
sdk.showChatBot();
|
||||
},
|
||||
// 原有AI初始化逻辑，保持注释状态
|
||||
async initializeAI() {
|
||||
// let userInfo = {
|
||||
// roleGroup: this.userInfo.roles[0].roleName || "student",
|
||||
// nickName: this.userInfo.nickName,
|
||||
// username: this.userInfo.userName,
|
||||
// avater: this.avatar,
|
||||
// user_token: this.token
|
||||
// }
|
||||
// console.log("请求AI的信息", userInfo)
|
||||
//
|
||||
// //1.获取token
|
||||
// userInfo.accessToken = (await this.getAccessToken()).access_token;
|
||||
// userInfo.onRefreshToken = async () => (await this.getAccessToken()).accessToken;
|
||||
// const sdk = await initCoze(userInfo);
|
||||
// sdk.showChatBot();
|
||||
},
|
||||
async getAccessToken() {
|
||||
const res = await getAccessToken(); // 调用请求函数
|
||||
const data = JSON.parse(res.data); // 解析数据
|
||||
return data; // ✅ 返回 data
|
||||
const res = await getAccessToken() // 调用请求函数
|
||||
const data = JSON.parse(res.data) // 解析数据
|
||||
return data // ✅ 返回 data
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "~@/assets/styles/mixin.scss";
|
||||
@import "~@/assets/styles/variables.scss";
|
||||
|
||||
//~@/assets/styles/variables.scss
|
||||
|
||||
.app-wrapper {
|
||||
@include clearfix;
|
||||
position: relative;
|
||||
@@ -178,4 +208,58 @@ export default {
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
//AI
|
||||
.ai-hover {
|
||||
position: fixed;
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
/* 和弹窗拉开距离 */
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: #409eff;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
z-index: 9999;
|
||||
transition: all 0.2s ease;
|
||||
box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
|
||||
}
|
||||
|
||||
.ai-hover:hover {
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0 6px 16px rgba(64, 158, 255, 0.4);
|
||||
}
|
||||
|
||||
/* 聊天弹窗动画 - 优化版本，避免闪烁 */
|
||||
.chat-popup-enter-active {
|
||||
transition: all 0.25s ease-out;
|
||||
}
|
||||
|
||||
.chat-popup-leave-active {
|
||||
transition: all 0.15s ease-in;
|
||||
}
|
||||
|
||||
.chat-popup-enter-from {
|
||||
opacity: 0;
|
||||
transform: translateY(15px) scale(0.95);
|
||||
}
|
||||
|
||||
.chat-popup-enter-to {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
|
||||
.chat-popup-leave-from {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
|
||||
.chat-popup-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(15px) scale(0.95);
|
||||
}
|
||||
</style>
|
||||
|
||||
54
src/utils/ai_request.js
Normal file
54
src/utils/ai_request.js
Normal file
@@ -0,0 +1,54 @@
|
||||
import axios from 'axios'
|
||||
import { getTokenKeySessionStorage } from './auth'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { showToast } from '@/utils/toast' // 请替换为你的Toast组件
|
||||
|
||||
// 创建axios实例
|
||||
const service = axios.create({
|
||||
baseURL: process.env.VUE_APP_API_BASE_URL || 'http://localhost:8088',
|
||||
timeout: 15000,
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
})
|
||||
|
||||
// 请求拦截器
|
||||
service.interceptors.request.use(
|
||||
config => {
|
||||
// 从本地存储获取token
|
||||
const token = getTokenKeySessionStorage()
|
||||
if (token) {
|
||||
config.headers.Authorization = `Bearer ${token}`
|
||||
}
|
||||
return config
|
||||
},
|
||||
error => {
|
||||
return Promise.reject(error)
|
||||
}
|
||||
)
|
||||
|
||||
// 响应拦截器
|
||||
service.interceptors.response.use(
|
||||
response => {
|
||||
// 对响应数据做处理
|
||||
return response.data
|
||||
},
|
||||
error => {
|
||||
const router = useRouter()
|
||||
|
||||
// 处理401未授权
|
||||
if (error.response?.status === 401) {
|
||||
showToast('登录已过期，请重新登录', 'error')
|
||||
router.push('/login')
|
||||
}
|
||||
|
||||
// 处理其他错误状态码
|
||||
if (error.response?.status === 500) {
|
||||
showToast('服务器错误，请稍后再试', 'error')
|
||||
}
|
||||
|
||||
return Promise.reject(error)
|
||||
}
|
||||
)
|
||||
|
||||
export default service
|
||||
115
src/utils/ai_stream.js
Normal file
115
src/utils/ai_stream.js
Normal file
@@ -0,0 +1,115 @@
|
||||
import { getTokenKeySessionStorage } from "@/utils/auth";
|
||||
|
||||
// 使用环境变量配置基础URL
|
||||
const BASE_URL = process.env.VUE_APP_API_BASE_URL || "http://localhost:8088";
|
||||
|
||||
/**
|
||||
* 创建聊天流式连接
|
||||
* @param {Object} params 请求参数
|
||||
* @param {string} params.prompt 用户输入
|
||||
* @param {string} params.userId 用户ID
|
||||
* @param {string} params.userName 用户名
|
||||
* @param {string} [params.conversationId] 会话ID
|
||||
* @returns {Object} 包含stream和cancel方法的对象
|
||||
*/
|
||||
export function createChatStream(params) {
|
||||
const requestId = `req-${Date.now()}-${Math.random()
|
||||
.toString(36)
|
||||
.slice(2, 8)}`;
|
||||
const url = `${BASE_URL}/aitutor/aichat/stream`;
|
||||
const token = getTokenKeySessionStorage();
|
||||
|
||||
if (!token) {
|
||||
throw new Error("请先登录");
|
||||
}
|
||||
|
||||
const controller = new AbortController();
|
||||
|
||||
const fetchPromise = fetch(url, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
Authorization: `Bearer ${token}`,
|
||||
"X-Request-ID": requestId,
|
||||
},
|
||||
body: JSON.stringify({
|
||||
query: params.prompt,
|
||||
user_id: params.userId,
|
||||
user_name: params.userName,
|
||||
user_token: params.user_token || "123",
|
||||
user_role: "student",
|
||||
conversation_id: params.conversationId || null,
|
||||
}),
|
||||
signal: controller.signal,
|
||||
}).then((response) => {
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP ${response.status}`);
|
||||
}
|
||||
if (!response.body) {
|
||||
throw new Error("Response body is null");
|
||||
}
|
||||
return {
|
||||
reader: response.body.getReader(),
|
||||
decoder: new TextDecoder("utf-8"),
|
||||
};
|
||||
});
|
||||
|
||||
return {
|
||||
stream: fetchPromise,
|
||||
cancel: (reason) => {
|
||||
if (!controller.signal.aborted) {
|
||||
controller.abort(reason);
|
||||
}
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 处理流式响应
|
||||
* @param {ReadableStreamDefaultReader} reader 读取器
|
||||
* @param {TextDecoder} decoder 文本解码器
|
||||
* @param {Function} onMessage 消息回调
|
||||
* @param {Function} onError 错误回调
|
||||
* @param {Function} onComplete 完成回调
|
||||
*/
|
||||
export async function processStream(
|
||||
reader,
|
||||
decoder,
|
||||
{ onMessage, onError, onComplete }
|
||||
) {
|
||||
let buffer = "";
|
||||
|
||||
try {
|
||||
while (true) {
|
||||
const { done, value } = await reader.read();
|
||||
if (done) break;
|
||||
|
||||
buffer += decoder.decode(value, { stream: true });
|
||||
const lines = buffer.split("\n");
|
||||
buffer = lines.pop() || "";
|
||||
|
||||
for (const line of lines) {
|
||||
if (!line.trim()) continue;
|
||||
|
||||
try {
|
||||
const data = JSON.parse(line);
|
||||
if (typeof onMessage === "function") {
|
||||
onMessage(data);
|
||||
}
|
||||
} catch (e) {
|
||||
console.warn("解析消息失败:", line, e);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (typeof onComplete === "function") {
|
||||
onComplete();
|
||||
}
|
||||
} catch (error) {
|
||||
if (error.name !== "AbortError" && typeof onError === "function") {
|
||||
onError(error);
|
||||
}
|
||||
} finally {
|
||||
reader.releaseLock();
|
||||
}
|
||||
}
|
||||
@@ -112,8 +112,31 @@ service.interceptors.response.use(res => {
|
||||
},
|
||||
error => {
|
||||
console.log('err' + error)
|
||||
|
||||
// 判断是否是请求取消错误
|
||||
const isCanceled = error && (
|
||||
error.code === 'ERR_CANCELED' ||
|
||||
error.code === 'ECONNABORTED' ||
|
||||
error.message === 'canceled' ||
|
||||
error.message === 'Cancel' ||
|
||||
error.__CANCEL__ === true ||
|
||||
(typeof error.message === 'string' && /cancel/i.test(error.message))
|
||||
);
|
||||
|
||||
// 如果是请求取消，直接返回，不显示错误消息
|
||||
if (isCanceled) {
|
||||
console.log('请求被取消，忽略该错误');
|
||||
return Promise.reject(error);
|
||||
}
|
||||
|
||||
let { message } = error;
|
||||
if (message == "Network Error") {
|
||||
// 进一步判断是否真的是网络错误，还是页面卸载导致的
|
||||
if (window.performance && window.performance.navigation.type === 1) {
|
||||
// 页面刷新导致的，忽略
|
||||
console.log('页面刷新导致的网络错误，已忽略');
|
||||
return Promise.reject(error);
|
||||
}
|
||||
message = "后端接口连接异常";
|
||||
Message({ message: message, type: 'error', duration: 5 * 1000 })
|
||||
} else if (message.includes("timeout")) {
|
||||
|
||||
48
src/utils/toast.js
Normal file
48
src/utils/toast.js
Normal file
@@ -0,0 +1,48 @@
|
||||
import { Message } from 'element-ui'
|
||||
|
||||
/**
|
||||
* 显示Toast消息
|
||||
* @param {string} message - 消息内容
|
||||
* @param {string} type - 消息类型: 'success', 'warning', 'info', 'error'
|
||||
* @param {number} duration - 显示时长，默认3000ms
|
||||
*/
|
||||
export function showToast(message, type = 'info', duration = 3000) {
|
||||
Message({
|
||||
message,
|
||||
type,
|
||||
duration,
|
||||
showClose: true
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 显示成功消息
|
||||
* @param {string} message - 消息内容
|
||||
*/
|
||||
export function showSuccess(message) {
|
||||
showToast(message, 'success')
|
||||
}
|
||||
|
||||
/**
|
||||
* 显示错误消息
|
||||
* @param {string} message - 消息内容
|
||||
*/
|
||||
export function showError(message) {
|
||||
showToast(message, 'error')
|
||||
}
|
||||
|
||||
/**
|
||||
* 显示警告消息
|
||||
* @param {string} message - 消息内容
|
||||
*/
|
||||
export function showWarning(message) {
|
||||
showToast(message, 'warning')
|
||||
}
|
||||
|
||||
/**
|
||||
* 显示信息消息
|
||||
* @param {string} message - 消息内容
|
||||
*/
|
||||
export function showInfo(message) {
|
||||
showToast(message, 'info')
|
||||
}
|
||||
@@ -8,57 +8,57 @@
|
||||
|
||||
<div class="text-list">
|
||||
<div>
|
||||
<div>姓名:</div>
|
||||
<div>姓名：</div>
|
||||
<div id="nickname">{{ user.nickName }}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>用户名称:</div>
|
||||
<div>用户名称：</div>
|
||||
<div>{{ user.userName }}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>手机号码:</div>
|
||||
<div>手机号码：</div>
|
||||
<div>{{ user.phonenumber }}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>用户邮箱:</div>
|
||||
<div>用户邮箱：</div>
|
||||
<div>{{ user.email }}</div>
|
||||
</div>
|
||||
<!-- <div>
|
||||
<div>所属部门:</div>
|
||||
<div>所属部门：</div>
|
||||
<div>{{ user.dept.deptName }} / {{ postGroup }}</div>
|
||||
</div> -->
|
||||
<div>
|
||||
<div>所属角色:</div>
|
||||
<div>所属角色：</div>
|
||||
<div>{{ displayRole(roleGroup) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div style="overflow: hidden;text-overflow: ellipsis">
|
||||
<div class="home-page-title">
|
||||
<div>我的消息</div>
|
||||
<div>更多 <span>></span></div>
|
||||
<div @click="showMessageDialog" style="cursor: pointer;">更多 <span>></span></div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="home-page-content">
|
||||
<div v-if="!isEmpty(msg_list)" v-for="(v, i) in msg_list" :key="i">
|
||||
<div v-if="!isEmpty(msg_list)" v-for="(v, i) in msg_list" :key="i" class="message-item" @click="showMessageDetail(v, i)">
|
||||
<div>{{ v.content }}</div>
|
||||
<!-- <div>2024-09-24</div>-->
|
||||
</div>
|
||||
<!-- <div v-else>
|
||||
</div>
|
||||
<div v-else>
|
||||
暂无消息
|
||||
</div> -->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div style="overflow: hidden;text-overflow: ellipsis">
|
||||
<div class="home-page-title">
|
||||
<div>公示栏</div>
|
||||
<div>更多 <span>></span></div>
|
||||
<div @click="showAnnouncementDialog" style="cursor: pointer;">更多 <span>></span></div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="home-page-content">
|
||||
<div v-for="(v, i) in comp_list.slice(0, 9)" :key="i">
|
||||
<div v-for="(v, i) in comp_list.slice(0, 9)" :key="i" class="announcement-item" @click="showAnnouncementDetail(v, i)">
|
||||
<div>{{ v.submitterName }}--{{ v.projectName }} -- 审核通过</div>
|
||||
<div>{{ formatTime(v.createTime) }}</div>
|
||||
</div>
|
||||
@@ -236,8 +236,107 @@
|
||||
<jwc-bottom v-if="checkPermi(['home:xg:undo1'])" v-hasPermi="['home:xg:undo1']" ref="child10" />
|
||||
<sjUndo v-if="checkPermi(['home:sj:undo1'])" v-hasPermi="['home:sj:undo1']" ref="child11" />
|
||||
</div>
|
||||
|
||||
<!-- 我的消息详情对话框 -->
|
||||
<el-dialog
|
||||
title="我的消息详情"
|
||||
:visible.sync="messageDialogVisible"
|
||||
width="80%"
|
||||
:show-close="true"
|
||||
:close-on-click-modal="false"
|
||||
:close-on-press-escape="false">
|
||||
<div class="message-dialog-content">
|
||||
<el-table :data="msg_list" style="width: 100%" max-height="400">
|
||||
<el-table-column prop="content" label="消息内容" min-width="200">
|
||||
<template slot-scope="scope">
|
||||
<div class="message-content clickable-row" @click="viewMessageDetail(scope.row)">{{ scope.row.content }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createTime" label="创建时间" width="180" align="center">
|
||||
<template slot-scope="scope">
|
||||
{{ formatTime(scope.row.createTime) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div v-if="isEmpty(msg_list)" class="empty-data">
|
||||
<i class="el-icon-info"></i>
|
||||
<p>暂无消息数据</p>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 公示栏详情对话框 -->
|
||||
<el-dialog
|
||||
title="公示栏详情"
|
||||
:visible.sync="announcementDialogVisible"
|
||||
width="80%"
|
||||
:show-close="true"
|
||||
:close-on-click-modal="false"
|
||||
:close-on-press-escape="false">
|
||||
<div class="announcement-dialog-content">
|
||||
<el-table :data="comp_list" style="width: 100%" max-height="400">
|
||||
<el-table-column prop="submitterName" label="提交人" width="120" align="center" />
|
||||
<el-table-column prop="projectName" label="项目名称" min-width="200">
|
||||
<template slot-scope="scope">
|
||||
<div class="project-name clickable-row" @click="viewAnnouncementDetail(scope.row)">{{ scope.row.projectName }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态" width="100" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-tag type="success" size="small">审核通过</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createTime" label="创建时间" width="180" align="center">
|
||||
<template slot-scope="scope">
|
||||
{{ formatTime(scope.row.createTime) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div v-if="isEmpty(comp_list)" class="empty-data">
|
||||
<i class="el-icon-info"></i>
|
||||
<p>暂无公示数据</p>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 消息详情模态框 -->
|
||||
<div v-if="messageDetailVisible" class="detail-modal-overlay" @click.self="hideMessageDetail">
|
||||
<div class="detail-modal-content">
|
||||
<div class="detail-modal-header">
|
||||
<h4>消息详情</h4>
|
||||
<div class="detail-time" v-if="currentMessageDetail.createTime">
|
||||
{{ formatTime(currentMessageDetail.createTime) }}
|
||||
</div>
|
||||
<button class="detail-close-btn" @click="hideMessageDetail">×</button>
|
||||
</div>
|
||||
<div class="detail-modal-body">
|
||||
<div class="detail-content-section">
|
||||
<div class="detail-content-text">{{ currentMessageDetail.content || '暂无内容' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 公示详情模态框 -->
|
||||
<div v-if="announcementDetailVisible" class="detail-modal-overlay" @click.self="hideAnnouncementDetail">
|
||||
<div class="detail-modal-content">
|
||||
<div class="detail-modal-header">
|
||||
<h4>公示详情</h4>
|
||||
<div class="detail-time" v-if="currentAnnouncementDetail.createTime">
|
||||
{{ formatTime(currentAnnouncementDetail.createTime) }}
|
||||
</div>
|
||||
<button class="detail-close-btn" @click="hideAnnouncementDetail">×</button>
|
||||
</div>
|
||||
<div class="detail-modal-body">
|
||||
<div class="detail-content-section">
|
||||
<div class="detail-content-text">{{ currentAnnouncementDetail.projectName || '暂无项目名称' }} - {{ currentAnnouncementDetail.submitterName || '暂无提交人' }} - 审核通过</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.home-main-box {
|
||||
padding: 20px;
|
||||
@@ -480,6 +579,191 @@
|
||||
.going:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* 对话框样式 */
|
||||
.message-dialog-content,
|
||||
.announcement-dialog-content {
|
||||
.message-content,
|
||||
.project-name {
|
||||
max-width: 300px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.clickable-row {
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
}
|
||||
|
||||
.empty-data {
|
||||
text-align: center;
|
||||
padding: 40px 0;
|
||||
color: #999;
|
||||
|
||||
i {
|
||||
font-size: 48px;
|
||||
margin-bottom: 16px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 对话框表格样式优化 */
|
||||
.el-dialog__body {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.el-table {
|
||||
.el-table__header-wrapper {
|
||||
th {
|
||||
background-color: #f5f7fa;
|
||||
color: #606266;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.el-table__row {
|
||||
&:hover {
|
||||
background-color: #f5f7fa;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 消息和公示项目的悬停样式 */
|
||||
.message-item,
|
||||
.announcement-item {
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 2px;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
transform: translateX(2px);
|
||||
}
|
||||
}
|
||||
|
||||
/* 详情模态框样式 */
|
||||
.detail-modal-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 9999;
|
||||
animation: fadeIn 0.3s ease-out;
|
||||
}
|
||||
|
||||
.detail-modal-content {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
|
||||
width: 90%;
|
||||
max-width: 800px;
|
||||
max-height: 70vh;
|
||||
overflow-y: auto;
|
||||
animation: slideInScale 0.3s ease-out;
|
||||
|
||||
.detail-modal-header {
|
||||
background: white;
|
||||
color: #333;
|
||||
padding: 10px 24px;
|
||||
border-bottom: 1px solid #eee;
|
||||
border-radius: 8px 8px 0 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
h4 {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.detail-time {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 24px;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.detail-close-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #666;
|
||||
font-size: 24px;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
background-color: #f5f5f5;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.detail-modal-body {
|
||||
padding: 24px;
|
||||
padding-top: 40px; // 为标题下方的时间留出空间
|
||||
.detail-content-section {
|
||||
.detail-content-text {
|
||||
font-size: 16px;
|
||||
line-height: 1.6;
|
||||
color: #333;
|
||||
word-break: break-word;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 模态框动画效果 */
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideInScale {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.9) translateY(-20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1) translateY(0);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
@@ -504,7 +788,6 @@ import sjUndo from "./comps/sj-undo.vue";
|
||||
|
||||
import { isEmpty } from "@/api/helpFunc";
|
||||
import { checkPermi } from "@/utils/permission";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
JwcUndo, XwUndo, FdyUndo, StuUndo,
|
||||
@@ -597,17 +880,68 @@ export default {
|
||||
}
|
||||
},
|
||||
async listMyMsg() {
|
||||
let res = await listMsg();
|
||||
// 获取当前登录用户的ID
|
||||
const userId = this.user.userId;
|
||||
console.log("userId", userId);
|
||||
let res = await listMsg({receiver: userId});
|
||||
if (res.rows.length > 0) {
|
||||
this.have_msg = true;
|
||||
this.msg_list = [...res.rows];
|
||||
}
|
||||
},
|
||||
|
||||
// 显示我的消息详情对话框
|
||||
showMessageDialog() {
|
||||
this.messageDialogVisible = true;
|
||||
},
|
||||
|
||||
// 查看消息详情 - 统一处理函数
|
||||
viewMessageDetail(row) {
|
||||
this.currentMessageDetail = row;
|
||||
this.messageDetailVisible = true;
|
||||
|
||||
},
|
||||
|
||||
// 显示消息详情 - 从首页点击进入
|
||||
showMessageDetail(messageData, index) {
|
||||
this.currentMessageDetail = messageData;
|
||||
this.currentMessageIndex = index;
|
||||
this.messageDetailVisible = true;
|
||||
},
|
||||
|
||||
// 隐藏消息详情
|
||||
hideMessageDetail() {
|
||||
this.messageDetailVisible = false;
|
||||
this.currentMessageDetail = {};
|
||||
this.currentMessageIndex = -1;
|
||||
},
|
||||
|
||||
// 显示公示详情 - 从首页点击进入
|
||||
showAnnouncementDetail(announcementData, index) {
|
||||
this.currentAnnouncementDetail = announcementData;
|
||||
this.currentAnnouncementIndex = index;
|
||||
this.announcementDetailVisible = true;
|
||||
},
|
||||
|
||||
// 隐藏公示详情
|
||||
hideAnnouncementDetail() {
|
||||
this.announcementDetailVisible = false;
|
||||
this.currentAnnouncementDetail = {};
|
||||
this.currentAnnouncementIndex = -1;
|
||||
},
|
||||
|
||||
// 显示公示栏详情对话框
|
||||
showAnnouncementDialog() {
|
||||
this.announcementDialogVisible = true;
|
||||
},
|
||||
|
||||
// 查看公示详情 - 统一处理函数
|
||||
viewAnnouncementDetail(row) {
|
||||
this.currentAnnouncementDetail = row;
|
||||
this.announcementDetailVisible = true;
|
||||
},
|
||||
},
|
||||
|
||||
|
||||
data() {
|
||||
return {
|
||||
isEmpty,
|
||||
@@ -623,6 +957,18 @@ export default {
|
||||
|
||||
avatar: null,
|
||||
|
||||
// 对话框可见性控制
|
||||
messageDialogVisible: false,
|
||||
announcementDialogVisible: false,
|
||||
|
||||
// 详情模态框控制
|
||||
messageDetailVisible: false,
|
||||
announcementDetailVisible: false,
|
||||
currentMessageDetail: {},
|
||||
currentAnnouncementDetail: {},
|
||||
currentMessageIndex: -1,
|
||||
currentAnnouncementIndex: -1,
|
||||
|
||||
tableData: [{
|
||||
date: '2016-05-03',
|
||||
name: '王小虎',
|
||||
@@ -655,5 +1001,4 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
920
src/views/aitutor/chathistory/index.vue
Normal file
920
src/views/aitutor/chathistory/index.vue
Normal file
@@ -0,0 +1,920 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<div class="search-form-container">
|
||||
<el-form :model="queryParams" ref="queryForm" size="small" v-show="showSearch" label-width="80px" class="search-form">
|
||||
<el-row :gutter="20">
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
|
||||
<el-form-item label="学号" prop="stuNo">
|
||||
<el-input v-model="queryParams.stuNo" placeholder="请输入学号" clearable @keyup.enter.native="handleQuery" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
|
||||
<el-form-item label="姓名" prop="name">
|
||||
<el-input v-model="queryParams.name" placeholder="请输入姓名" clearable @keyup.enter.native="handleQuery" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
|
||||
<el-form-item label="所属班级" prop="classId">
|
||||
<el-cascader placeholder="请选择班级" v-model="classVlue1" :show-all-levels="false"
|
||||
:options="ClassNameList" @change="handleChange1" clearable filterable style="width: 100%">
|
||||
<template slot-scope="{ node, data }">
|
||||
<span>{{ data.label }}</span>
|
||||
<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
|
||||
</template>
|
||||
</el-cascader>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
|
||||
<el-form-item label="学院" prop="deptId">
|
||||
<el-select v-model="queryParams.deptId" filterable clearable placeholder="请选择学院" style="width: 100%">
|
||||
<el-option v-for="item in dept_list" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
|
||||
<el-form-item label="辅导员" prop="cphName">
|
||||
<el-input v-model="queryParams.cphName" placeholder="请输入辅导员" clearable @keyup.enter.native="handleQuery" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
|
||||
<el-form-item label="年级" prop="gradeId">
|
||||
<el-select v-model="queryParams.gradeId" filterable clearable placeholder="请选择年级" style="width: 100%">
|
||||
<el-option v-for="item in grade_list" :key="item.gradeId" :label="item.gradeName" :value="item.gradeId">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
||||
<el-form-item class="search-buttons">
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="studentList" style="width: 100%">
|
||||
<el-table-column label="学号" align="center" prop="stuNo" min-width="120" />
|
||||
<el-table-column label="姓名" align="center" prop="name" min-width="100" />
|
||||
<el-table-column label="性别" align="center" prop="gender" min-width="80" />
|
||||
<el-table-column label="学院名称" align="center" prop="deptId" min-width="120">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.dept.deptName }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="专业名称" align="center" prop="majorId" min-width="200">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.srsMajors.majorName }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="班级名称" align="center" prop="classId" min-width="200">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.srsClass.className }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="辅导员" align="center" prop="cphName" min-width="100" />
|
||||
<el-table-column label="学生状态" align="center" prop="status" min-width="100">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.srs_stu_status" :value="scope.row.status" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" min-width="120">
|
||||
<template slot-scope="scope">
|
||||
<el-button size="mini" type="text" icon="el-icon-chat-dot-round" @click="viewConversations(scope.row)">查看会话列表</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize" @pagination="getList" />
|
||||
|
||||
<!-- AI对话记录弹出对话框 -->
|
||||
<el-dialog
|
||||
title="AI对话记录"
|
||||
:visible.sync="dialogVisible"
|
||||
width="80%"
|
||||
:before-close="closeChatHistory"
|
||||
class="chat-dialog"
|
||||
>
|
||||
<div class="dialog-header" v-if="currentStudent">
|
||||
<span class="student-info">学生：{{ currentStudent.name }}（{{ currentStudent.stuNo }}）</span>
|
||||
</div>
|
||||
|
||||
<div v-loading="chatLoading" class="chat-content">
|
||||
<div v-if="chatMessages.length === 0 && !chatLoading" class="no-chat">
|
||||
<el-empty description="暂无对话记录"></el-empty>
|
||||
</div>
|
||||
|
||||
<div v-for="message in chatMessages" :key="message.id" class="message-item">
|
||||
<div class="message-header">
|
||||
<span class="message-time">{{ parseTime(message.created_at * 1000, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
|
||||
</div>
|
||||
|
||||
<div class="message-content">
|
||||
<div class="user-message">
|
||||
<div class="message-label">学生提问：</div>
|
||||
<div class="message-text user-text">{{ message.query }}</div>
|
||||
</div>
|
||||
|
||||
<div class="ai-message">
|
||||
<div class="message-label">AI回答：</div>
|
||||
<div class="ai-message-wrapper" style="position: relative;">
|
||||
<div class="message-text ai-text ai-message-container" :class="{
|
||||
'feedback-like': message.feedback && message.feedback.rating === 'like',
|
||||
'feedback-dislike': message.feedback && message.feedback.rating === 'dislike'
|
||||
}" v-html="renderMarkdown(message.answer)"></div>
|
||||
|
||||
<!-- 反馈图标显示在右下角 -->
|
||||
<div v-if="message.feedback" class="feedback-icon" style="position: absolute; bottom: 8px; right: 8px; z-index: 10;">
|
||||
<!-- 点赞图标 -->
|
||||
<svg v-if="message.feedback.rating === 'like'" class="feedback-like-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" style="width: 16px; height: 16px; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));">
|
||||
<path d="M424.6 811.9c13.4 0 24.3-10.9 24.3-24.3V631c0-13.4-10.9-24.3-24.3-24.3s-24.3 10.9-24.3 24.3v156.6c-0.1 13.4 10.8 24.3 24.3 24.3z" fill="#FF4E7D"></path>
|
||||
<path d="M875.2 467.3c-12.4-16-31.1-25.2-51.3-25.2H598.8c-4.3 0-7.8-1.9-10-5.6-2.2-3.7-2.2-8.1-0.2-12 14.1-26 22.8-52 26-77.1 3.7-29.1 10.1-123.8-8.9-175.9-5.2-14.5-18.9-52.9-72.5-56.2h-0.7l-0.7 0.1c-25.2 1.9-44.5 11-57.5 27.1-10.5 13-13.9 27-15.6 33.8-2.1 8.3-4.2 17.9-6.4 28.1l-0.2 0.7c-8.5 38.7-20.1 91.8-40.5 127.3-32.9 57.5-103.8 98.1-127.1 110.2-1.1-0.1-2.2-0.1-3.3-0.1h-92.1c-28.6 0-52 23.3-52 52v364.3c0 28.6 23.3 52 52 52h92.1c0.8 0 1.7 0 2.6-0.1l455.8-0.4c27.5 0 51.5-18.6 58.5-45.3l88.4-341.6c5.2-19.7 1.1-40.1-11.3-56.1z m-546.4 6c35-20.9 93.6-61.7 125.1-116.8 24-42 36.6-99.3 45.8-141.1 2.4-10.9 4.4-19.8 6.3-27.6 2.8-11.3 5.4-21.9 26.8-23.8 19.1 1.5 22.5 10.9 28 26.4 12.1 33 11 108.9 5.6 150.9-2.4 19.1-9.4 39.4-20.6 60.1-10.3 19-9.8 41.5 1.2 60 10.9 18.4 30.3 29.3 51.8 29.3h225.1c5 0 9.7 2.3 12.8 6.3s4.1 9.1 2.8 14.1l-88.4 341.6c-1.3 5.2-6 8.8-11.4 8.8l-406.5 0.4c0.1-1.1 0.1-2.1 0.1-3.2V494.4c0-7.3-1.6-14.5-4.5-21.1z m-142.9 21.1c0-1.8 1.5-3.3 3.3-3.3h92.1c1.8 0 3.3 1.5 3.3 3.3v364.3c0 1.6-1.1 3-2.7 3.3h-11.5l-5 0.1h-76.2c-1.8 0-3.3-1.5-3.3-3.3V494.4z" fill="#4E30DC"></path>
|
||||
</svg>
|
||||
<!-- 点踩图标 -->
|
||||
<svg v-else-if="message.feedback.rating === 'dislike'" class="feedback-dislike-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" style="width: 16px; height: 16px; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));">
|
||||
<path d="M932.059429 689.005714c-39.350857 10.24-134.144 10.24-271.36 13.165715 5.851429 29.257143 7.314286 57.051429 7.314285 105.325714C669.549714 923.062857 586.459429 1024 512 1024c-52.516571 0-94.866286-42.422857-96.329143-95.085714-1.462857-64.365714-20.406857-175.542857-126.829714-232.594286-7.314286-4.388571-30.72-14.628571-33.645714-16.091429l1.462857-1.462857c-17.408 16.091429-40.813714 24.868571-64.146286 24.868572H96.256C43.739429 703.634286 0 661.211429 0 607.085714v-512C1.462857 43.885714 43.739429 0 97.718857 0h96.256c36.498286 0 70.070857 21.942857 84.626286 55.588571h1.462857l7.314286-1.462857h1.462857c19.017143-4.388571 53.906286-13.165714 129.828571-30.72 16.018286-4.388571 102.107429-21.942857 191.049143-21.942857h175.030857c52.516571 0 91.940571 20.48 113.810286 61.44C920.429714 99.474286 1024 299.885714 1024 580.754286c0 39.497143-29.184 90.697143-91.940571 108.251428z m-705.974858-592.457143c0-17.554286-14.628571-32.182857-32.109714-32.182857H97.718857c-17.554286 0-32.109714 14.628571-32.109714 32.182857v512c0 17.554286 14.628571 32.182857 32.182857 32.182858h96.182857c17.554286 0 32.109714-14.628571 32.109714-32.182858v-512z m732.233143 462.262858c-12.434286-304.859429-106.057143-450.925714-115.858285-465.408l-0.804572-1.243429c-10.24-17.554286-24.795429-27.794286-58.368-27.794286H609.718857c-87.552 0-175.030857 20.48-176.493714 20.48-69.046857 16.018286-104.155429 24.429714-122.953143 29.110857l-7.606857 1.828572c-10.971429 2.779429-13.897143 3.584-16.822857 4.169143l4.388571 469.577143 0.073143 16.310857c0.073143 8.923429 0.292571 14.262857 0.365714 17.334857v1.682286l-0.438857-0.219429c145.92 59.977143 189.659429 193.097143 191.122286 302.811429 0 17.554286 14.628571 32.182857 32.109714 32.182857 33.499429 0 93.330286-67.291429 93.330286-152.137143 0-76.068571-2.925714-89.234286-29.184-168.228572h60.928c207.872-0.512 247.954286-3.364571 269.897143-8.045714l3.803428-0.804571 3.657143-0.950857 3.657143-0.950858 3.730286-0.950857a49.737143 49.737143 0 0 0 37.961143-49.737143c-1.462857-10.24-1.462857-8.777143-2.925715-19.017142z" fill="#3B6FF4"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 加载更多按钮 -->
|
||||
<div class="load-more-container" v-if="chatMessages.length > 0">
|
||||
<el-button
|
||||
v-if="hasMoreMessages && !isLoadingMore"
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="loadMoreMessages"
|
||||
:loading="loadMoreLoading"
|
||||
class="load-more-btn"
|
||||
>
|
||||
加载更多历史消息
|
||||
</el-button>
|
||||
|
||||
<div v-if="!hasMoreMessages" class="no-more-messages">
|
||||
<el-divider>
|
||||
<span class="no-more-text">已经到底了</span>
|
||||
</el-divider>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listStudent, getClassName } from "@/api/stuCQS/basedata/student";
|
||||
import { getMessagesToAdmin } from "@/api/aitutor/chat";
|
||||
import { listGrade } from "@/api/stuCQS/basedata/grade";
|
||||
import { getDeptName } from "@/api/system/dept";
|
||||
import { marked } from 'marked';
|
||||
export default {
|
||||
name: "ChatHistory",
|
||||
dicts: ['srs_stu_status'],
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 学生信息表格数据
|
||||
studentList: [],
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
name: null,
|
||||
stuNo: null,
|
||||
deptId: null,
|
||||
classId: null,
|
||||
cphName: null,
|
||||
gradeId: null
|
||||
},
|
||||
// 班级名称列表
|
||||
ClassNameList: [],
|
||||
// 班级搜索选择
|
||||
classVlue1: [],
|
||||
// 学院列表
|
||||
dept_list: [],
|
||||
// 年级列表
|
||||
grade_list: [],
|
||||
// AI对话记录相关
|
||||
dialogVisible: false,
|
||||
chatMessages: [],
|
||||
chatLoading: false,
|
||||
currentStudent: null,
|
||||
// 分页加载相关
|
||||
loadMoreLoading: false,
|
||||
hasMoreMessages: true,
|
||||
isLoadingMore: false
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
this.getClassNameList();
|
||||
this.listDept();
|
||||
this.listGrade();
|
||||
},
|
||||
methods: {
|
||||
/** 查询学生信息列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
listStudent(this.queryParams).then(response => {
|
||||
console.log('学生列表API响应:', response);
|
||||
// 根据实际API响应结构调整数据获取方式
|
||||
if (response.data) {
|
||||
this.studentList = response.data.rows || response.data || [];
|
||||
this.total = response.data.total || response.total || 0;
|
||||
} else {
|
||||
this.studentList = response.rows || [];
|
||||
this.total = response.total || 0;
|
||||
}
|
||||
this.loading = false;
|
||||
}).catch(error => {
|
||||
console.error('获取学生列表失败:', error);
|
||||
this.$message.error('获取学生列表失败');
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
/** 获取班级名称列表 */
|
||||
getClassNameList() {
|
||||
getClassName().then(res => {
|
||||
this.ClassNameList = res.data;
|
||||
});
|
||||
},
|
||||
/** 获取学院列表 */
|
||||
async listDept() {
|
||||
try {
|
||||
let res = await getDeptName();
|
||||
this.dept_list = [...res.data];
|
||||
} catch (error) {
|
||||
console.error('获取学院列表失败:', error);
|
||||
}
|
||||
},
|
||||
/** 获取年级列表 */
|
||||
async listGrade() {
|
||||
try {
|
||||
let res = await listGrade();
|
||||
if (res.code == 200) {
|
||||
this.grade_list = [...res.rows];
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取年级列表失败:', error);
|
||||
}
|
||||
},
|
||||
/** 搜索班级选择 */
|
||||
handleChange1(value) {
|
||||
this.queryParams.classId = value[2];
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1;
|
||||
this.getList();
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm");
|
||||
this.classVlue1 = [];
|
||||
this.handleQuery();
|
||||
},
|
||||
/** 查看AI对话记录 */
|
||||
viewConversations(row) {
|
||||
this.currentStudent = row;
|
||||
this.dialogVisible = true;
|
||||
this.chatLoading = true;
|
||||
this.chatMessages = [];
|
||||
|
||||
// 重置分页状态
|
||||
this.hasMoreMessages = true;
|
||||
this.isLoadingMore = false;
|
||||
this.loadMoreLoading = false;
|
||||
|
||||
getMessagesToAdmin({
|
||||
user: row.stuNo,
|
||||
limit: 20
|
||||
}).then(response => {
|
||||
console.log('对话记录API响应:', response);
|
||||
|
||||
if (response.code === 200 && response.data && response.data.data) {
|
||||
// 按照created_at时间戳进行降序排序，最新的消息在最上面
|
||||
this.chatMessages = response.data.data.sort((a, b) => b.created_at - a.created_at);
|
||||
// 如果返回的消息数量少于20条，说明没有更多消息了
|
||||
if (response.data.data.length < 20) {
|
||||
this.hasMoreMessages = false;
|
||||
}
|
||||
} else {
|
||||
this.$modal.msgWarning(response.msg || '该学生暂无对话记录');
|
||||
}
|
||||
|
||||
this.chatLoading = false;
|
||||
}).catch(error => {
|
||||
console.error('获取对话记录失败:', error);
|
||||
this.$modal.msgError('获取对话记录失败');
|
||||
this.chatLoading = false;
|
||||
});
|
||||
},
|
||||
/** 关闭对话记录 */
|
||||
closeChatHistory() {
|
||||
this.dialogVisible = false;
|
||||
this.currentStudent = null;
|
||||
this.chatMessages = [];
|
||||
// 重置分页状态
|
||||
this.hasMoreMessages = true;
|
||||
this.isLoadingMore = false;
|
||||
this.loadMoreLoading = false;
|
||||
},
|
||||
/** 加载更多历史消息 */
|
||||
loadMoreMessages() {
|
||||
if (this.loadMoreLoading || !this.hasMoreMessages || this.chatMessages.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.loadMoreLoading = true;
|
||||
this.isLoadingMore = true;
|
||||
|
||||
// 获取当前消息列表中最早的消息ID（created_at最小的）
|
||||
const earliestMessage = this.chatMessages.reduce((earliest, current) => {
|
||||
return current.created_at < earliest.created_at ? current : earliest;
|
||||
});
|
||||
|
||||
getMessagesToAdmin({
|
||||
user: this.currentStudent.stuNo,
|
||||
limit: 50,
|
||||
firstId: earliestMessage.id
|
||||
}).then(response => {
|
||||
console.log('加载更多消息API响应:', response);
|
||||
|
||||
if (response.code === 200 && response.data && response.data.data) {
|
||||
const newMessages = response.data.data;
|
||||
|
||||
if (newMessages.length === 0) {
|
||||
// 没有更多消息了
|
||||
this.hasMoreMessages = false;
|
||||
this.$message.info('已经到底了');
|
||||
} else {
|
||||
// 将新消息按时间排序后添加到现有消息列表的底部
|
||||
const sortedNewMessages = newMessages.sort((a, b) => b.created_at - a.created_at);
|
||||
this.chatMessages = [...this.chatMessages, ...sortedNewMessages];
|
||||
|
||||
// 如果返回的消息数量少于50条，说明没有更多消息了
|
||||
if (newMessages.length < 50) {
|
||||
this.hasMoreMessages = false;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
this.$message.error('加载更多消息失败');
|
||||
}
|
||||
|
||||
this.loadMoreLoading = false;
|
||||
this.isLoadingMore = false;
|
||||
}).catch(error => {
|
||||
console.error('加载更多消息失败:', error);
|
||||
this.$message.error('加载更多消息失败');
|
||||
this.loadMoreLoading = false;
|
||||
this.isLoadingMore = false;
|
||||
});
|
||||
},
|
||||
/** 渲染Markdown内容 */
|
||||
renderMarkdown(content) {
|
||||
if (!content) return '';
|
||||
|
||||
// 配置marked选项
|
||||
marked.setOptions({
|
||||
breaks: true, // 支持换行
|
||||
gfm: true, // 支持GitHub风格的markdown
|
||||
sanitize: false // 允许HTML标签
|
||||
});
|
||||
|
||||
// 自定义渲染器，为链接添加新标签页打开属性和内联样式
|
||||
const renderer = new marked.Renderer();
|
||||
renderer.link = function(href, title, text) {
|
||||
const titleAttr = title ? ` title="${title}"` : '';
|
||||
// 直接使用内联样式来确保样式生效，绕过CSS优先级问题
|
||||
const inlineStyle = `
|
||||
color: #1890ff !important;
|
||||
background: linear-gradient(135deg, rgba(24, 144, 255, 0.1) 0%, rgba(64, 158, 255, 0.1) 100%) !important;
|
||||
border: 1px solid rgba(24, 144, 255, 0.3) !important;
|
||||
border-radius: 4px !important;
|
||||
padding: 2px 6px !important;
|
||||
text-decoration: none !important;
|
||||
display: inline-block !important;
|
||||
margin: 0 2px !important;
|
||||
transition: all 0.3s ease !important;
|
||||
position: relative !important;
|
||||
font-weight: 500 !important;
|
||||
`;
|
||||
return `<a href="${href}"${titleAttr} target="_blank" rel="noopener noreferrer" class="markdown-link" style="${inlineStyle}" onmouseover="this.style.background='linear-gradient(135deg, rgba(24, 144, 255, 0.2) 0%, rgba(64, 158, 255, 0.2) 100%)'; this.style.boxShadow='0 2px 8px rgba(24, 144, 255, 0.3)'; this.style.transform='translateY(-1px)';" onmouseout="this.style.background='linear-gradient(135deg, rgba(24, 144, 255, 0.1) 0%, rgba(64, 158, 255, 0.1) 100%)'; this.style.boxShadow='none'; this.style.transform='translateY(0)';">${text}</a>`;
|
||||
};
|
||||
|
||||
return marked(content, { renderer });
|
||||
},
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.app-container {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.mb8 {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.el-table .cell {
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
/* 搜索表单容器样式 */
|
||||
.search-form-container {
|
||||
background: #f8f9fa;
|
||||
border: 1px solid #e9ecef;
|
||||
border-radius: 0.5rem;
|
||||
padding: 1.25rem;
|
||||
margin-bottom: 1.25rem;
|
||||
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.05);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.search-form {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.search-form .el-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: 0 -0.625rem;
|
||||
}
|
||||
|
||||
.search-form .el-col {
|
||||
padding: 0 0.625rem;
|
||||
box-sizing: border-box;
|
||||
min-width: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.search-form .el-form-item {
|
||||
margin-bottom: 1rem;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.search-form .el-form-item__label {
|
||||
font-weight: 500;
|
||||
color: #606266;
|
||||
white-space: nowrap;
|
||||
min-width: 5rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.search-form .el-form-item__content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.search-form .el-input,
|
||||
.search-form .el-select,
|
||||
.search-form .el-cascader {
|
||||
width: 100%;
|
||||
min-width: 8rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.search-form .el-input__inner,
|
||||
.search-form .el-select .el-input__inner {
|
||||
box-sizing: border-box;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
/* 搜索按钮样式 */
|
||||
.search-buttons {
|
||||
text-align: center;
|
||||
margin-top: 0.625rem;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.search-buttons .el-button {
|
||||
margin: 0 0.5rem;
|
||||
padding: 0.5rem 1.25rem;
|
||||
border-radius: 0.25rem;
|
||||
font-weight: 500;
|
||||
box-sizing: border-box;
|
||||
min-width: 4rem;
|
||||
}
|
||||
|
||||
.search-buttons .el-button--primary {
|
||||
background: linear-gradient(135deg, #409eff 0%, #1890ff 100%);
|
||||
border: none;
|
||||
box-shadow: 0 0.125rem 0.25rem rgba(64, 158, 255, 0.3);
|
||||
}
|
||||
|
||||
.search-buttons .el-button--primary:hover {
|
||||
background: linear-gradient(135deg, #66b1ff 0%, #40a9ff 100%);
|
||||
box-shadow: 0 0.25rem 0.5rem rgba(64, 158, 255, 0.4);
|
||||
}
|
||||
|
||||
/* 缩放适配 - 针对110%等非标准缩放 */
|
||||
@media screen and (min-resolution: 1.1dppx) and (max-resolution: 1.3dppx) {
|
||||
.search-form-container {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.search-form .el-form-item {
|
||||
margin-bottom: 0.875rem;
|
||||
}
|
||||
|
||||
.search-form .el-form-item__label {
|
||||
min-width: 4.5rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.search-form .el-input,
|
||||
.search-form .el-select,
|
||||
.search-form .el-cascader {
|
||||
min-width: 7rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* 响应式调整 */
|
||||
@media (max-width: 768px) {
|
||||
.search-form-container {
|
||||
padding: 0.9375rem;
|
||||
}
|
||||
|
||||
.search-form .el-form-item {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.search-form .el-form-item__label {
|
||||
min-width: auto;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.search-buttons {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.search-buttons .el-button {
|
||||
margin: 0.25rem 0.5rem 0.25rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* 超小屏幕适配 */
|
||||
@media (max-width: 480px) {
|
||||
.search-form .el-col {
|
||||
flex: 0 0 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.search-form .el-form-item__label {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
/* 对话框样式 */
|
||||
.chat-dialog .el-dialog__body {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.dialog-header {
|
||||
background: #f8f9fa;
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid #e9ecef;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.student-info {
|
||||
color: #606266;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.chat-content {
|
||||
max-height: 500px;
|
||||
overflow-y: auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.no-chat {
|
||||
text-align: center;
|
||||
padding: 40px 0;
|
||||
}
|
||||
|
||||
.message-item {
|
||||
margin-bottom: 24px;
|
||||
border: 1px solid #e4e7ed;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.message-header {
|
||||
background: #f5f7fa;
|
||||
padding: 12px 16px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #e4e7ed;
|
||||
}
|
||||
|
||||
.message-time {
|
||||
color: #909399;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.feedback-status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.message-content {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.user-message,
|
||||
.ai-message {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.user-message:last-child,
|
||||
.ai-message:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.message-label {
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
margin-bottom: 8px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.message-text {
|
||||
padding: 12px 16px;
|
||||
border-radius: 6px;
|
||||
line-height: 1.6;
|
||||
font-size: 14px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.user-text {
|
||||
background: #f0f9ff;
|
||||
border: 1px solid #e1f5fe;
|
||||
color: #0277bd;
|
||||
}
|
||||
|
||||
.ai-text {
|
||||
background: #f8f9fa;
|
||||
border: 1px solid #e9ecef;
|
||||
color: #495057;
|
||||
}
|
||||
|
||||
.ai-text.feedback-like {
|
||||
background: #f0f9ff;
|
||||
border-color: #4caf50;
|
||||
box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.1);
|
||||
}
|
||||
|
||||
.ai-text.feedback-dislike {
|
||||
background: #fff5f5;
|
||||
border-color: #f56565;
|
||||
box-shadow: 0 0 0 2px rgba(245, 101, 101, 0.1);
|
||||
}
|
||||
|
||||
/* 滚动条样式 */
|
||||
.chat-content::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.chat-content::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.chat-content::-webkit-scrollbar-thumb {
|
||||
background: #c1c1c1;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.chat-content::-webkit-scrollbar-thumb:hover {
|
||||
background: #a8a8a8;
|
||||
}
|
||||
|
||||
/* Markdown样式 */
|
||||
.ai-text h1, .ai-text h2, .ai-text h3, .ai-text h4, .ai-text h5, .ai-text h6 {
|
||||
margin: 16px 0 8px 0;
|
||||
font-weight: 600;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.ai-text h1 {
|
||||
font-size: 1.5em;
|
||||
color: #303133;
|
||||
border-bottom: 2px solid #e4e7ed;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
.ai-text h2 {
|
||||
font-size: 1.3em;
|
||||
color: #409eff;
|
||||
}
|
||||
|
||||
.ai-text h3 {
|
||||
font-size: 1.2em;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.ai-text h4, .ai-text h5, .ai-text h6 {
|
||||
font-size: 1.1em;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.ai-text p {
|
||||
margin: 8px 0;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.ai-text code {
|
||||
background: #f5f5f5;
|
||||
border: 1px solid #e4e7ed;
|
||||
border-radius: 3px;
|
||||
padding: 2px 6px;
|
||||
font-family: 'Courier New', Consolas, monospace;
|
||||
font-size: 0.9em;
|
||||
color: #e74c3c;
|
||||
}
|
||||
|
||||
.ai-text pre {
|
||||
background: #2d3748;
|
||||
color: #e2e8f0;
|
||||
border-radius: 6px;
|
||||
padding: 16px;
|
||||
margin: 12px 0;
|
||||
overflow-x: auto;
|
||||
font-family: 'Courier New', Consolas, monospace;
|
||||
font-size: 0.9em;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.ai-text pre code {
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: 0;
|
||||
color: inherit;
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
.ai-text ul, .ai-text ol {
|
||||
margin: 8px 0;
|
||||
padding-left: 24px;
|
||||
}
|
||||
|
||||
.ai-text li {
|
||||
margin: 4px 0;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.ai-text ul li {
|
||||
list-style-type: disc;
|
||||
}
|
||||
|
||||
.ai-text ol li {
|
||||
list-style-type: decimal;
|
||||
}
|
||||
|
||||
.ai-text blockquote {
|
||||
border-left: 4px solid #409eff;
|
||||
background: #f8f9fa;
|
||||
margin: 12px 0;
|
||||
padding: 12px 16px;
|
||||
color: #606266;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.ai-text table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
margin: 12px 0;
|
||||
}
|
||||
|
||||
.ai-text th, .ai-text td {
|
||||
border: 1px solid #e4e7ed;
|
||||
padding: 8px 12px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.ai-text th {
|
||||
background: #f5f7fa;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.ai-text hr {
|
||||
border: none;
|
||||
border-top: 2px solid #e4e7ed;
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
.ai-text strong {
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.ai-text em {
|
||||
font-style: italic;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
/* 加载更多按钮样式 */
|
||||
.load-more-container {
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
border-top: 1px solid #e4e7ed;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.load-more-btn {
|
||||
background: linear-gradient(135deg, #409eff 0%, #1890ff 100%);
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
padding: 8px 24px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
box-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.load-more-btn:hover {
|
||||
background: linear-gradient(135deg, #66b1ff 0%, #40a9ff 100%);
|
||||
box-shadow: 0 4px 8px rgba(64, 158, 255, 0.4);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.no-more-messages {
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
.no-more-text {
|
||||
color: #909399;
|
||||
font-size: 14px;
|
||||
font-style: italic;
|
||||
padding: 0 16px;
|
||||
background: #f8f9fa;
|
||||
}
|
||||
|
||||
.el-divider--horizontal {
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* AI消息容器样式 */
|
||||
.ai-message-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 反馈图标样式 */
|
||||
.feedback-icon {
|
||||
position: absolute;
|
||||
bottom: 8px;
|
||||
right: 8px;
|
||||
z-index: 10;
|
||||
}
|
||||
.feedback-like-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
opacity: 0.8;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.feedback-like-icon:hover {
|
||||
opacity: 1;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.feedback-dislike-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
opacity: 0.8;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.feedback-dislike-icon:hover {
|
||||
opacity: 1;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
</style>
|
||||
671
src/views/aitutor/chattest/index.vue
Normal file
671
src/views/aitutor/chattest/index.vue
Normal file
@@ -0,0 +1,671 @@
|
||||
<!-- src/views/tool/ai-chat/index.vue -->
|
||||
|
||||
<template>
|
||||
<div class="ai-chat-container">
|
||||
<h3>AI 聊天助手</h3>
|
||||
<div class="conversation-controls">
|
||||
<el-button @click="toggleConversationList">
|
||||
{{ showConversationList ? '隐藏会话列表' : '显示会话列表' }}
|
||||
</el-button>
|
||||
<el-button @click="fetchHistoryMessages" :disabled="!conversationId || historyLoaded">获取历史消息</el-button>
|
||||
<el-button @click="createNewConversation" type="primary">新建会话</el-button>
|
||||
<el-button @click="fetchFeedbacks">获取反馈列表</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 会话列表 -->
|
||||
<div v-if="showConversationList" class="conversation-list">
|
||||
<h4>会话列表</h4>
|
||||
<el-scrollbar max-height="200px">
|
||||
<div v-for="conv in conversationList" :key="conv.id" class="conversation-item" :class="{ 'active': conv.id === conversationId }" @click="switchConversation(conv.id)">
|
||||
<div class="conv-title">{{ conv.title || '未命名会话' }}</div>
|
||||
<div class="conv-time">{{ formatDate(conv.updated_at) }}</div>
|
||||
<div class="conv-preview">{{ conv.preview || '无消息' }}</div>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
<el-button @click="fetchHistoryMessages" :disabled="!conversationId">获取历史消息</el-button>
|
||||
<div class="chat-box" ref="chatBox">
|
||||
<div v-for="(msg, index) in messages" :key="index" class="message-item">
|
||||
<!-- 用户消息 -->
|
||||
<div v-if="msg.type === 'user'" class="user-message">
|
||||
<el-avatar :size="30" style="background-color: #1890ff;">U</el-avatar>
|
||||
<div class="message-content user">{{ msg.content }}</div>
|
||||
</div>
|
||||
|
||||
<!-- AI 消息（带点赞/点踩） -->
|
||||
<div v-else class="ai-message">
|
||||
<el-avatar :size="30" style="background-color: #52c41a;">AI</el-avatar>
|
||||
<div class="message-content ai" v-html="msg.content"></div>
|
||||
|
||||
<!-- 引用和归属分段列表 -->
|
||||
<div v-if="msg.references && msg.references.length > 0" class="references-section">
|
||||
<h4 class="references-title">引用来源：</h4>
|
||||
<ul class="references-list">
|
||||
<li v-for="(ref, refIndex) in msg.references" :key="refIndex" class="reference-item">
|
||||
<span class="reference-source">{{ ref.source }}：</span>
|
||||
<span class="reference-content">{{ ref.content }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- 👍 点赞 / 👎 点踩 按钮 -->
|
||||
<div class="feedback-actions" v-if="msg.message_id">
|
||||
<el-button
|
||||
size="mini"
|
||||
:type="msg.feedback === 'like' ? 'primary' : 'default'"
|
||||
icon="el-icon-thumb"
|
||||
@click="submitFeedback(msg, 'like')"
|
||||
:loading="msg.feedbackLoading"
|
||||
>点赞</el-button
|
||||
>
|
||||
<el-button
|
||||
size="mini"
|
||||
:type="msg.feedback === 'dislike' ? 'danger' : 'default'"
|
||||
icon="el-icon-minus"
|
||||
@click="submitFeedback(msg, 'dislike')"
|
||||
:loading="msg.feedbackLoading"
|
||||
>点踩</el-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 流式输出中 -->
|
||||
<div v-if="isStreaming" class="ai-message">
|
||||
<el-avatar :size="30" style="background-color: #52c41a;">AI</el-avatar>
|
||||
<div class="message-content ai" v-html="currentText"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="input-area">
|
||||
<el-input
|
||||
v-model="inputText"
|
||||
placeholder="请输入你的问题... (回车发送)"
|
||||
@keyup.enter.native="send"
|
||||
@keydown.enter.native="handleEnterKey"
|
||||
clearable
|
||||
/>
|
||||
<el-button type="primary" @click="send" :loading="isStreaming">发送</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getConversationList, submitFeedback, getFeedbacks, getHistoryMessages } from "@/api/aitutor/chat";
|
||||
import { getTokenKeySessionStorage } from "@/utils/auth";
|
||||
|
||||
|
||||
export default {
|
||||
name: "AiChat",
|
||||
data() {
|
||||
return {
|
||||
inputText: "",
|
||||
messages: [],
|
||||
currentText: "",
|
||||
isStreaming: false,
|
||||
abortController: null,
|
||||
conversationId: null,
|
||||
userId: 2023429112,
|
||||
userName: "当前用户", // 添加用户名
|
||||
userRole: "我是学生", // 添加用户角色
|
||||
//userToken: getTokenKeySessionStorage(),
|
||||
userToken: "123",
|
||||
showConversationList: false,
|
||||
conversationList: [],
|
||||
loadingConversations: false,
|
||||
historyLoaded: false, // 新增：标记历史消息是否已加载
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
// 组件挂载时获取会话列表
|
||||
this.fetchConversationList();
|
||||
},
|
||||
methods: {
|
||||
// 处理回车键事件
|
||||
handleEnterKey(event) {
|
||||
// 阻止默认行为，避免表单提交
|
||||
event.preventDefault();
|
||||
this.send();
|
||||
},
|
||||
// 切换会话列表显示状态并获取数据
|
||||
toggleConversationList() {
|
||||
this.showConversationList = !this.showConversationList;
|
||||
this.fetchConversationList();
|
||||
},
|
||||
|
||||
// 获取会话列表
|
||||
async fetchConversationList() {
|
||||
if (this.loadingConversations) return;
|
||||
|
||||
this.loadingConversations = true;
|
||||
|
||||
try {
|
||||
const result = await getConversationList({ user: this.userId });
|
||||
|
||||
this.conversationList = result.data || [];
|
||||
console.log('会话列表接口返回数据:', result.data);
|
||||
// 自动选中第一个会话（如果有）
|
||||
if (this.conversationList.length > 0 && !this.conversationId) {
|
||||
this.switchConversation(this.conversationList[0].id);
|
||||
}
|
||||
} catch (err) {
|
||||
this.$message.error("网络错误：" + err.message);
|
||||
} finally {
|
||||
this.loadingConversations = false;
|
||||
}
|
||||
},
|
||||
|
||||
// 切换会话
|
||||
switchConversation(conversationId) {
|
||||
this.conversationId = conversationId;
|
||||
this.messages = []; // 清空当前消息
|
||||
this.historyLoaded = false; // 重置历史消息加载标志
|
||||
this.fetchHistoryMessages(); // 获取选中会话的历史消息
|
||||
},
|
||||
|
||||
// 新建会话
|
||||
createNewConversation() {
|
||||
this.conversationId = null;
|
||||
this.messages = [];
|
||||
this.currentText = "";
|
||||
this.historyLoaded = false;
|
||||
this.showConversationList = false;
|
||||
this.$message.info("已创建新会话，请先发送消息开始对话");
|
||||
},
|
||||
|
||||
// 格式化日期
|
||||
formatDate(dateString) {
|
||||
if (!dateString) return '';
|
||||
const date = new Date(dateString);
|
||||
return date.toLocaleString();
|
||||
},
|
||||
|
||||
async send() {
|
||||
const query = this.inputText.trim();
|
||||
if (!query || this.isStreaming) return;
|
||||
|
||||
this.messages.push({
|
||||
type: "user",
|
||||
content: query,
|
||||
});
|
||||
|
||||
this.currentText = "";
|
||||
this.isStreaming = true;
|
||||
this.inputText = "";
|
||||
|
||||
// 确保有会话ID
|
||||
if (!this.conversationId) {
|
||||
console.log('发送消息时conversationId为null，尝试创建新会话');
|
||||
if (this.conversationList.length > 0) {
|
||||
this.switchConversation(this.conversationList[0].id);
|
||||
} else {
|
||||
console.log('没有现有会话，将发送消息以创建新会话');
|
||||
}
|
||||
}
|
||||
console.log('发送消息时的conversationId:', this.conversationId);
|
||||
|
||||
// 创建请求体
|
||||
const requestBody = {
|
||||
query: query,
|
||||
conversation_id: this.conversationId || undefined,
|
||||
user: this.userId,
|
||||
user_id: this.userId,
|
||||
user_name: this.userName,
|
||||
user_role: this.userRole,
|
||||
user_token: this.userToken
|
||||
};
|
||||
|
||||
// 创建AbortController以支持取消请求
|
||||
this.abortController = new AbortController();
|
||||
|
||||
try {
|
||||
// 对于SSE请求，使用原生fetch而不是axios封装
|
||||
// Use the base API URL from environment configuration
|
||||
const baseUrl = process.env.VUE_APP_BASE_API || '';
|
||||
const response = await fetch(`${baseUrl}/aitutor/aichat/stream`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Accept': 'text/event-stream',
|
||||
'Authorization': `Bearer ${getTokenKeySessionStorage()}`
|
||||
},
|
||||
body: JSON.stringify(requestBody),
|
||||
signal: this.abortController.signal
|
||||
});
|
||||
|
||||
if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
|
||||
if (!response.body) throw new Error("No response body");
|
||||
|
||||
const reader = response.body.getReader();
|
||||
const decoder = new TextDecoder();
|
||||
let buffer = "";
|
||||
|
||||
while (true) {
|
||||
const { done, value } = await reader.read();
|
||||
if (done) break;
|
||||
|
||||
buffer += decoder.decode(value, { stream: true });
|
||||
const lines = buffer.split("\n");
|
||||
buffer = lines.pop();
|
||||
|
||||
for (const line of lines) {
|
||||
if (line.startsWith("data:")) {
|
||||
const data = line.slice(5).trim();
|
||||
if (data === "[DONE]") {
|
||||
await this.finalizeResponse();
|
||||
return;
|
||||
} else {
|
||||
try {
|
||||
const json = JSON.parse(data);
|
||||
const eventType = json.event;
|
||||
|
||||
switch (eventType) {
|
||||
case "message":
|
||||
this.currentText += json.answer || "";
|
||||
break;
|
||||
case "message_end":
|
||||
// ✅ 保存 conversation_id 和 message_id
|
||||
if (json.conversation_id) {
|
||||
this.conversationId = json.conversation_id;
|
||||
console.log("Conversation ID set to:", this.conversationId); // 添加调试信息
|
||||
}
|
||||
// 给最后一条 AI 消息添加 message_id 和引用数据
|
||||
// 处理引用数据 - 根据Dify文档，引用数据在retriever_resources字段中
|
||||
let refs = [];
|
||||
if (json.retriever_resources && Array.isArray(json.retriever_resources)) {
|
||||
refs = json.retriever_resources;
|
||||
console.log('引用数据来自retriever_resources字段:', refs);
|
||||
} else if (json.references && Array.isArray(json.references)) {
|
||||
refs = json.references;
|
||||
console.log('引用数据来自references字段:', refs);
|
||||
} else if (json.sources && Array.isArray(json.sources)) {
|
||||
refs = json.sources;
|
||||
console.log('引用数据来自sources字段:', refs);
|
||||
} else {
|
||||
console.log('未找到引用数据或格式不正确:', json);
|
||||
}
|
||||
|
||||
this.messages.push({
|
||||
type: "ai",
|
||||
content: this.currentText,
|
||||
message_id: json.id, // Dify 返回的消息 ID
|
||||
references: refs, // 引用数据
|
||||
feedback: null, // 初始无反馈
|
||||
feedbackLoading: false,
|
||||
});
|
||||
this.currentText = "";
|
||||
break;
|
||||
case "error":
|
||||
this.currentText += `<span style=\"color:red\">[AI错误] ${json.message || "未知错误"}</span>`;
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
} catch (e) {
|
||||
this.currentText += data;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
await this.finalizeResponse();
|
||||
} catch (err) {
|
||||
if (err.name !== "AbortError") {
|
||||
console.error("SSE Error:", err);
|
||||
this.$message.error("连接失败: " + err.message + ", 请检查后端服务是否正常运行");
|
||||
}
|
||||
this.isStreaming = false;
|
||||
}
|
||||
},
|
||||
|
||||
async finalizeResponse() {
|
||||
this.isStreaming = false;
|
||||
this.abortController = null;
|
||||
},
|
||||
|
||||
// ==================== 新增：提交点赞/点踩 ====================
|
||||
async submitFeedback(msg, rating) {
|
||||
// 防止重复提交
|
||||
if (msg.feedbackLoading) return;
|
||||
|
||||
// 构造请求体
|
||||
const payload = {
|
||||
message_id: msg.message_id,
|
||||
user_id: this.userId,
|
||||
user: this.userId, // 添加user参数，与user_id保持一致
|
||||
rating: rating, // 'like' 或 'dislike'
|
||||
content: null,
|
||||
};
|
||||
|
||||
// 更新 UI 状态
|
||||
msg.feedbackLoading = true;
|
||||
|
||||
try {
|
||||
const result = await submitFeedback(payload);
|
||||
console.log("提交反馈响应:", result);
|
||||
if (result.code === 200) {
|
||||
// 更新反馈状态（如果再次点击则撤销）
|
||||
if (msg.feedback === rating) {
|
||||
msg.feedback = null;
|
||||
this.$message.success("已撤销");
|
||||
} else {
|
||||
msg.feedback = rating;
|
||||
this.$message.success(rating === "like" ? "感谢点赞！" : "已提交点踩");
|
||||
}
|
||||
} else {
|
||||
this.$message.error("提交失败：" + (result.msg || result.message));
|
||||
}
|
||||
} catch (err) {
|
||||
this.$message.error("网络错误：" + err.message);
|
||||
} finally {
|
||||
msg.feedbackLoading = false;
|
||||
}
|
||||
},
|
||||
|
||||
// 获取反馈列表
|
||||
async fetchFeedbacks() {
|
||||
/* if (!this.conversationId) {
|
||||
this.$message.error("当前会话ID不存在，请先选择一个会话。");
|
||||
return;
|
||||
} */
|
||||
|
||||
try {
|
||||
// 调用API函数
|
||||
const data = await getFeedbacks({
|
||||
conversation_id: this.conversationId,
|
||||
user_id: this.userId
|
||||
});
|
||||
|
||||
// 处理响应数据
|
||||
if (data.code === 200) {
|
||||
// 检查data是否是数组，如果不是则尝试获取其content属性
|
||||
const feedbacks = Array.isArray(data.data) ? data.data : (data.data?.content || []);
|
||||
|
||||
// 创建一个反馈映射，方便快速查找
|
||||
const feedbackMap = {};
|
||||
feedbacks.forEach(feedback => {
|
||||
feedbackMap[feedback.message_id] = feedback.rating;
|
||||
});
|
||||
|
||||
// 更新消息列表中的反馈状态
|
||||
this.messages = this.messages.map(msg => {
|
||||
if (feedbackMap[msg.message_id] !== undefined) {
|
||||
return {
|
||||
...msg,
|
||||
feedback: feedbackMap[msg.message_id],
|
||||
};
|
||||
}
|
||||
return msg;
|
||||
});
|
||||
this.$message.success("获取反馈列表成功");
|
||||
} else {
|
||||
console.error('获取反馈失败: 响应格式不正确', data);
|
||||
this.$message.error("获取反馈列表失败：" + (data.msg || data.message));
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取反馈失败:', error);
|
||||
this.$message.error("网络错误：" + error.message);
|
||||
}
|
||||
},
|
||||
|
||||
// ==================== 新增：获取历史消息 ====================
|
||||
async fetchHistoryMessages() {
|
||||
if (!this.conversationId) {
|
||||
// 如果会话列表不为空但没有选中会话，自动选中第一个
|
||||
if (this.conversationList.length > 0) {
|
||||
this.switchConversation(this.conversationList[0].id);
|
||||
return;
|
||||
}
|
||||
this.$message.error("当前会话ID不存在，请先发起一次对话。");
|
||||
return;
|
||||
}
|
||||
|
||||
// 如果历史消息已加载，则不再重复加载
|
||||
if (this.historyLoaded) {
|
||||
this.$message.info("历史消息已加载");
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
// 调用API函数
|
||||
// 确保user参数是字符串类型并正确传递
|
||||
const data = await getHistoryMessages({
|
||||
conversation_id: this.conversationId,
|
||||
user_id: this.userId,
|
||||
user: String(this.userId)
|
||||
});
|
||||
|
||||
// 处理响应数据
|
||||
if (data.code === 200) {
|
||||
let historyData;
|
||||
try {
|
||||
// 尝试解析数据（如果是字符串形式的JSON）
|
||||
historyData = typeof data.data === 'string' ? JSON.parse(data.data) : data.data;
|
||||
} catch (e) {
|
||||
historyData = data.data;
|
||||
}
|
||||
|
||||
if (Array.isArray(historyData)) {
|
||||
// 格式化历史消息
|
||||
const historyMessages = [];
|
||||
historyData.forEach(msg => {
|
||||
// 如果有query字段，添加用户消息
|
||||
if (msg.query) {
|
||||
historyMessages.push({
|
||||
type: 'user',
|
||||
content: msg.query,
|
||||
message_id: msg.id + '-user', // 添加后缀以确保唯一性
|
||||
feedback: null,
|
||||
feedbackLoading: false,
|
||||
});
|
||||
}
|
||||
|
||||
// 如果有answer字段，添加AI消息
|
||||
if (msg.answer) {
|
||||
historyMessages.push({
|
||||
type: 'ai',
|
||||
content: msg.answer,
|
||||
message_id: msg.id,
|
||||
references: msg.references || msg.sources || [], // 引用数据，适配不同字段名
|
||||
feedback: msg.feedback || null,
|
||||
feedbackLoading: false,
|
||||
});
|
||||
}
|
||||
});
|
||||
// 将历史消息添加到现有消息列表的开头
|
||||
this.messages = [...historyMessages, ...this.messages];
|
||||
this.historyLoaded = true; // 标记历史消息已加载
|
||||
} else if (historyData && Array.isArray(historyData.messages)) {
|
||||
// 格式化历史消息
|
||||
const historyMessages = [];
|
||||
historyData.messages.forEach(msg => {
|
||||
if (msg.role === 'user') {
|
||||
historyMessages.push({
|
||||
type: 'user',
|
||||
content: msg.content,
|
||||
message_id: msg.id + '-user',
|
||||
feedback: null,
|
||||
feedbackLoading: false,
|
||||
});
|
||||
} else {
|
||||
historyMessages.push({
|
||||
type: 'ai',
|
||||
content: msg.content,
|
||||
message_id: msg.id,
|
||||
references: msg.references || [],
|
||||
feedback: null,
|
||||
feedbackLoading: false,
|
||||
});
|
||||
}
|
||||
});
|
||||
this.messages = [...historyMessages, ...this.messages];
|
||||
this.historyLoaded = true; // 标记历史消息已加载
|
||||
} else {
|
||||
console.error('获取历史消息失败: 响应格式不正确', historyData);
|
||||
this.$message.error("获取历史消息失败：响应格式不正确");
|
||||
}
|
||||
} else {
|
||||
console.error('获取历史消息失败:', data);
|
||||
this.$message.error("获取历史消息失败：" + (data.msg || data.message));
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取历史消息失败:', error);
|
||||
this.$message.error("网络错误：" + error.message);
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
beforeUnmount() {
|
||||
if (this.abortController) {
|
||||
this.abortController.abort();
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.ai-chat-container {
|
||||
padding: 20px;
|
||||
background-color: #f5f5f5;
|
||||
height: calc(100vh - 100px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.chat-box {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 10px;
|
||||
border: 1px solid #ebeef5;
|
||||
border-radius: 8px;
|
||||
background-color: white;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.message-item {
|
||||
margin-bottom: 15px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.message-content {
|
||||
max-width: 80%;
|
||||
padding: 8px 12px;
|
||||
border-radius: 18px;
|
||||
margin-left: 8px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.user-message .message-content {
|
||||
background-color: #1890ff;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.ai-message .message-content {
|
||||
background-color: #f0f2f5;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.references-section {
|
||||
margin-left: 40px;
|
||||
margin-top: 10px;
|
||||
padding: 10px;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.references-title {
|
||||
margin-bottom: 8px;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.references-list {
|
||||
list-style-type: none;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.reference-item {
|
||||
margin-bottom: 8px;
|
||||
padding-bottom: 8px;
|
||||
border-bottom: 1px dashed #e0e0e0;
|
||||
}
|
||||
|
||||
.reference-item:last-child {
|
||||
border-bottom: none;
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.reference-source {
|
||||
font-weight: bold;
|
||||
color: #1890ff;
|
||||
}
|
||||
|
||||
.reference-content {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* 点赞/点踩按钮样式 */
|
||||
.feedback-actions {
|
||||
margin-left: 40px;
|
||||
margin-top: 5px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.feedback-actions .el-button {
|
||||
padding: 4px 8px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.conversation-controls {
|
||||
margin-bottom: 15px;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.conversation-list {
|
||||
margin-bottom: 15px;
|
||||
padding: 10px;
|
||||
border: 1px solid #ebeef5;
|
||||
border-radius: 8px;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.conversation-item {
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.conversation-item:hover {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.conversation-item.active {
|
||||
background-color: #e6f7ff;
|
||||
border-left: 3px solid #1890ff;
|
||||
}
|
||||
|
||||
.conv-title {
|
||||
font-weight: bold;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.conv-time {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.conv-preview {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
</style>
|
||||
306
src/views/routine/NotificationManagement/index.vue
Normal file
306
src/views/routine/NotificationManagement/index.vue
Normal file
@@ -0,0 +1,306 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
||||
<el-form-item label="内容" prop="content">
|
||||
<el-input v-model="queryParams.content" placeholder="请输入通知内容" clearable @keyup.enter.native="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
|
||||
v-hasPermi="['routine:NotificationManagement:add']">新增</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate"
|
||||
v-hasPermi="['routine:NotificationManagement:edit']">修改</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"
|
||||
v-hasPermi="['routine:NotificationManagement:remove']">删除</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
|
||||
v-hasPermi="['routine:NotificationManagement:export']">导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="NotificationManagementList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="序号" type="index" align="center" prop="id" />
|
||||
<el-table-column label="年级" align="center" prop="gradeName" />
|
||||
<el-table-column label="标题" align="center" prop="title" />
|
||||
<el-table-column label="消息内容" align="center" prop="content" />
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||
<template slot-scope="scope">
|
||||
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
|
||||
v-hasPermi="['routine:NotificationManagement:edit']">修改</el-button>
|
||||
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
|
||||
v-hasPermi="['routine:NotificationManagement:remove']">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
|
||||
@pagination="getList" />
|
||||
|
||||
<!-- 添加或修改通知管理对话框 -->
|
||||
<el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
|
||||
<!-- 发送方式选择 -->
|
||||
<el-form-item label="发送方式" prop="sendType">
|
||||
<el-radio-group v-model="form.sendType" @change="handleSendTypeChange">
|
||||
<el-radio label="grade">按年级发送</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 年级多选 -->
|
||||
<el-form-item v-if="form.sendType === 'grade'" label="选择年级" prop="selectedGrades">
|
||||
<el-select v-model="form.selectedGrades" multiple placeholder="请选择年级" style="width: 100%">
|
||||
<el-option v-for="grade in gradeList" :key="grade.value" :label="grade.label" :value="grade.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="标题" prop="title">
|
||||
<el-input v-model="form.title" placeholder="请输入标题" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="消息内容" prop="content">
|
||||
<el-input v-model="form.content" type="textarea" :rows="4" placeholder="请输入消息内容" />
|
||||
</el-form-item>
|
||||
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">发送</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listMySentNotifications, getNotificationManagement, delNotificationManagement, addNotificationManagement, updateNotificationManagement, getGradeList, sendNotificationByGrades } from "@/api/routine/NotificationManagement";
|
||||
|
||||
export default {
|
||||
name: "NotificationManagement",
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 通知管理表格数据
|
||||
NotificationManagementList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 年级列表
|
||||
gradeList: [],
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
sender: null,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
sendType: [
|
||||
{ required: true, message: "请选择发送方式", trigger: "change" }
|
||||
],
|
||||
title: [
|
||||
{ required: true, message: "请输入标题", trigger: "blur" }
|
||||
],
|
||||
content: [
|
||||
{ required: true, message: "请输入消息内容", trigger: "blur" }
|
||||
]
|
||||
}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
this.getGradeList();
|
||||
},
|
||||
methods: {
|
||||
/** 查询当前用户通知管理列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
listMySentNotifications(this.queryParams).then(response => {
|
||||
this.NotificationManagementList = response.rows;
|
||||
this.total = response.total;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false;
|
||||
this.reset();
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: null,
|
||||
sender: null,
|
||||
receiver: null,
|
||||
title: null,
|
||||
content: null,
|
||||
sendType: 'user',
|
||||
selectedGrades: [],
|
||||
createBy: null,
|
||||
createTime: null,
|
||||
updateBy: null,
|
||||
updateTime: null
|
||||
};
|
||||
this.resetForm("form");
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1;
|
||||
this.getList();
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm");
|
||||
this.handleQuery();
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map(item => item.id)
|
||||
this.single = selection.length !== 1
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset();
|
||||
this.open = true;
|
||||
this.title = "添加通知管理";
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset();
|
||||
const id = row.id || this.ids
|
||||
getNotificationManagement(id).then(response => {
|
||||
this.form = response.data;
|
||||
this.open = true;
|
||||
this.title = "修改通知管理";
|
||||
});
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
// 验证发送方式对应的必填字段
|
||||
if (this.form.sendType === 'user' && !this.form.receiver) {
|
||||
this.$modal.msgError("请输入收信人用户学号");
|
||||
return;
|
||||
}
|
||||
if (this.form.sendType === 'grade' && (!this.form.selectedGrades || this.form.selectedGrades.length === 0)) {
|
||||
this.$modal.msgError("请选择年级");
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.form.id != null) {
|
||||
// 修改操作
|
||||
updateNotificationManagement(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
} else {
|
||||
// 新增操作
|
||||
// 新增操作
|
||||
if (this.form.sendType === 'grade') {
|
||||
// 按年级发送
|
||||
// 创建一个临时div来提取纯文本
|
||||
const tempDiv = document.createElement('div');
|
||||
tempDiv.innerHTML = this.form.content;
|
||||
const plainText = tempDiv.textContent || tempDiv.innerText || '';
|
||||
|
||||
// 提取标题的纯文本
|
||||
const titleDiv = document.createElement('div');
|
||||
titleDiv.innerHTML = this.form.title || '';
|
||||
const plainTitle = titleDiv.textContent || titleDiv.innerText || '';
|
||||
|
||||
const data = {
|
||||
title: plainTitle, // 添加标题字段
|
||||
content: plainText, // 使用纯文本
|
||||
selectedGrades: this.form.selectedGrades
|
||||
};
|
||||
sendNotificationByGrades(data).then(response => {
|
||||
this.$modal.msgSuccess("通知发送成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const ids = row.id || this.ids;
|
||||
this.$modal.confirm('是否确认删除通知管理编号为"' + ids + '"的数据项？').then(function () {
|
||||
return delNotificationManagement(ids);
|
||||
}).then(() => {
|
||||
this.getList();
|
||||
this.$modal.msgSuccess("删除成功");
|
||||
}).catch(() => { });
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('NotificationManagement/NotificationManagement/export', {
|
||||
...this.queryParams
|
||||
}, `NotificationManagement_${new Date().getTime()}.xlsx`)
|
||||
},
|
||||
|
||||
/** 获取年级列表 */
|
||||
getGradeList() {
|
||||
getGradeList().then(response => {
|
||||
// 假设后端返回的数据格式为 [{ gradeId: 1, gradeName: "2021级" }, ...]
|
||||
// 转换为下拉框需要的格式
|
||||
this.gradeList = response.data.map(item => ({
|
||||
value: item.gradeId || item.id,
|
||||
label: item.gradeName || item.name
|
||||
}));
|
||||
}).catch(() => {
|
||||
// 如果接口不存在，使用默认数据
|
||||
this.gradeList = [
|
||||
{ value: '2022', label: '2022级' },
|
||||
{ value: '2023', label: '2023级' },
|
||||
{ value: '2024', label: '2024级' }
|
||||
];
|
||||
});
|
||||
},
|
||||
|
||||
/** 发送方式改变时的处理 */
|
||||
handleSendTypeChange(value) {
|
||||
// 清空相关字段
|
||||
if (value === 'user') {
|
||||
this.form.selectedGrades = [];
|
||||
} else if (value === 'grade') {
|
||||
this.form.receiver = null;
|
||||
}
|
||||
|
||||
// 重新设置表单验证规则
|
||||
this.$nextTick(() => {
|
||||
this.$refs.form && this.$refs.form.clearValidate();
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -6,6 +6,7 @@
|
||||
<el-step title="辅导员审核" :description="changeActive(form.inspectionProgress)"></el-step>
|
||||
<el-step title="学工处理"
|
||||
:description="`${form.isPay === 0 ? '未缴费:' : '已缴费,备注:'}` + `${$route.query.jwcCmt ? $route.query.jwcCmt : '等待缴费,记录缴费金额'}`"></el-step>
|
||||
<el-step title="完成制作" :description="getCompletionDescription()"></el-step>
|
||||
</el-steps>
|
||||
</el-card>
|
||||
<el-card class="box-card" style="margin-top: 20px;">
|
||||
@@ -65,6 +66,14 @@
|
||||
</el-card>
|
||||
|
||||
<el-card class="box-card" style="margin-top: 20px;">
|
||||
<div class="titleNav">办理状态</div>
|
||||
<div style="margin-bottom: 20px;">
|
||||
<el-tag v-if="form.inspectionProgress >= 3" type="success">已完成制作</el-tag>
|
||||
<el-tag v-else-if="form.inspectionProgress >= 2" type="warning">学工处理中</el-tag>
|
||||
<el-tag v-else-if="form.inspectionProgress >= 1" type="primary">辅导员审核中</el-tag>
|
||||
<el-tag v-else-if="form.inspectionProgress === 0" type="info">待审核</el-tag>
|
||||
<el-tag v-else type="danger">申请被驳回</el-tag>
|
||||
</div>
|
||||
<div class="titleNav">办理信息</div>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="90px">
|
||||
<div class="formItem">
|
||||
@@ -109,20 +118,33 @@
|
||||
</el-form>
|
||||
</el-card>
|
||||
<div slot="footer" class="dialog-footer" style="text-align: right; margin-top: 20px;">
|
||||
<el-button v-if="active === 0" type="primary" @click="submitForm(1)">提交申请</el-button>
|
||||
<el-button v-if="finishStatus !== 'success' || form.inspectionProgress === 0" type="primary"
|
||||
<!-- 新申请时显示提交申请按钮 -->
|
||||
<el-button v-if="!form.id" type="primary" @click="submitForm(1)">提交申请</el-button>
|
||||
|
||||
<!-- 已有申请但未完成制作时显示修改提交申请按钮 -->
|
||||
<el-button v-if="form.id && form.inspectionProgress < 3" type="primary"
|
||||
@click="submitForm(1)">修改提交申请</el-button>
|
||||
|
||||
<!-- 已完成制作时显示继续提交申请按钮 -->
|
||||
<el-button v-if="form.id && form.inspectionProgress >= 3" type="primary"
|
||||
@click="submitNewApplication">继续提交申请</el-button>
|
||||
|
||||
<!-- 未完成制作时显示取消申请按钮 -->
|
||||
<el-button v-if="form.id && form.inspectionProgress < 3"
|
||||
type="danger" @click="cancelApplication">取消申请</el-button>
|
||||
|
||||
<!-- 已完成制作时显示取消申请按钮（不可点击） -->
|
||||
<el-button v-if="form.id && form.inspectionProgress >= 3"
|
||||
type="info" disabled @click="showCompletedMessage">当前审核已完成，不可取消</el-button>
|
||||
|
||||
<el-button type="primary" @click="printing">打印学生证申请表</el-button>
|
||||
<!-- <el-button v-if="active === 1 && showRole <= 3" type="primary"
|
||||
@click="auditInformation(2, '辅导员')">审核信息</el-button>
|
||||
<el-button v-if="active === 2 && showRole <= 2" type="primary" @click="payment(3, '学工')">登记缴费金额</el-button> -->
|
||||
<el-button @click="$router.push('/routine/sicr/stuIdReissueLIst')">返 回</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getStuIdReissue, addStuIdReissue, updateStuIdReissue, getStudentInfoByStuId } from "@/api/routine/stuIdReissue";
|
||||
import { getStuIdReissue, addStuIdReissue, updateStuIdReissue, getStudentInfoByStuId, getStuIdReissueStatus, delStuIdReissue } from "@/api/routine/stuIdReissue";
|
||||
import { listClass } from "@/api/stuCQS/basedata/class";
|
||||
import {
|
||||
pcaTextArr, // 省市区联动数据,纯汉字
|
||||
@@ -176,7 +198,7 @@ export default {
|
||||
]
|
||||
},
|
||||
// 申请进展
|
||||
active: 0,
|
||||
active: 1,
|
||||
showRole: 0,
|
||||
// 查询到的审核信息
|
||||
stuMultiLevelReview: {},
|
||||
@@ -196,7 +218,7 @@ export default {
|
||||
immediate: true,
|
||||
handler() {
|
||||
this.form = {}
|
||||
this.active = 0
|
||||
this.active = 1
|
||||
this.finishStatus = 'success'
|
||||
if (this.$route.query.id !== undefined) {
|
||||
this.handleUpdate()
|
||||
@@ -214,6 +236,7 @@ export default {
|
||||
this.isDisabled = false
|
||||
this.isDisabledStuNo = false
|
||||
this.finishStatus = 'success'
|
||||
this.active = 1
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -258,19 +281,61 @@ export default {
|
||||
className: this.form.className
|
||||
}).then(response => {
|
||||
// this.classList = response.rows;
|
||||
this.form.counsellorName = response.rows[0].teacher.name
|
||||
this.form.counsellorId = response.rows[0].teacher.teacherId
|
||||
if (response.rows && response.rows.length > 0 && response.rows[0].teacher) {
|
||||
this.form.counsellorName = response.rows[0].teacher.name
|
||||
this.form.counsellorId = response.rows[0].teacher.teacherId
|
||||
} else {
|
||||
console.warn('未找到班级信息或辅导员信息');
|
||||
}
|
||||
}).catch(error => {
|
||||
console.error('查询班级信息失败:', error);
|
||||
});
|
||||
});
|
||||
},
|
||||
// 进度变化时改变文字提示
|
||||
changeActive(active) {
|
||||
if (active === -1) {
|
||||
return '申请被驳回,备注:申请不通过,' + this.$route.query.fdyCmt
|
||||
} else if (active >= 1) {
|
||||
return '申请通过,备注:' + this.$route.query.fdyCmt
|
||||
const progress = Number(this.form.inspectionProgress);
|
||||
if (progress === -1) {
|
||||
return '申请被驳回,备注:申请不通过,' + this.$route.query.fdyCmt;
|
||||
} else if (progress === 0) {
|
||||
return '辅导员审核学生补办请求通不通过';
|
||||
} else if (progress === 1) {
|
||||
return '申请通过,备注:' + this.$route.query.fdyCmt;
|
||||
} else if (progress === 2) {
|
||||
return '学工处理中,备注:' + (this.$route.query.jwcCmt || '等待缴费,记录缴费金额');
|
||||
} else if (progress >= 3) {
|
||||
return '已完成制作,备注:学生证制作完成';
|
||||
} else {
|
||||
return '辅导员审核学生补办请求通不通过'
|
||||
return '辅导员审核学生补办请求通不通过';
|
||||
}
|
||||
},
|
||||
// 根据inspectionProgress确定当前步骤
|
||||
calculateActive() {
|
||||
const progress = Number(this.form.inspectionProgress);
|
||||
console.log('调试信息 - calculateActive中的progress:', progress, '类型:', typeof progress);
|
||||
if (progress >= 3) {
|
||||
console.log('调试信息 - 返回步骤4 (完成制作)');
|
||||
return 4; // 完成制作时返回4，对应步骤条的最后一个步骤
|
||||
} else if (progress >= 2) {
|
||||
console.log('调试信息 - 返回步骤3 (学工处理)');
|
||||
return 3; // 学工处理
|
||||
} else if (progress >= 1) {
|
||||
console.log('调试信息 - 返回步骤2 (辅导员审核)');
|
||||
return 2; // 辅导员审核
|
||||
} else {
|
||||
console.log('调试信息 - 返回步骤1 (学生申请)');
|
||||
return 1; // 学生申请
|
||||
}
|
||||
},
|
||||
// 获取完成制作步骤的动态描述
|
||||
getCompletionDescription() {
|
||||
const progress = Number(this.form.inspectionProgress);
|
||||
if (progress >= 3) {
|
||||
return '学生证制作已完成，请及时领取';
|
||||
} else if (progress >= 2) {
|
||||
return '等待学工完成学生证制作';
|
||||
} else {
|
||||
return '学工完成学生证制作';
|
||||
}
|
||||
},
|
||||
// 取消按钮
|
||||
@@ -291,7 +356,7 @@ export default {
|
||||
jg: null,
|
||||
hksz2: null
|
||||
};
|
||||
this.active = 0
|
||||
this.active = 1
|
||||
this.resetForm("form");
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
@@ -307,12 +372,27 @@ export default {
|
||||
this.form = response.data;
|
||||
this.form.studentName = this.form.stuName
|
||||
// this.form.stuName = this.form.studentName
|
||||
console.log('调试信息 - inspectionProgress:', response.data.inspectionProgress, '类型:', typeof response.data.inspectionProgress);
|
||||
console.log('调试信息 - calculateActive():', this.calculateActive());
|
||||
|
||||
if (response.data.inspectionProgress === -1) {
|
||||
this.active = 2
|
||||
this.active = 1; // 驳回时显示学生申请步骤
|
||||
this.finishStatus = 'error'
|
||||
} else {
|
||||
this.active = +response.data.inspectionProgress + 1
|
||||
// console.log(this.active);
|
||||
this.active = this.calculateActive();
|
||||
// 根据审核进度设置完成状态
|
||||
if (Number(response.data.inspectionProgress) >= 3) {
|
||||
this.finishStatus = 'success'
|
||||
} else if (Number(response.data.inspectionProgress) >= 0) {
|
||||
this.finishStatus = 'success'
|
||||
} else {
|
||||
this.finishStatus = 'error'
|
||||
}
|
||||
}
|
||||
console.log('调试信息 - active:', this.active, '类型:', typeof this.active);
|
||||
console.log('调试信息 - finishStatus:', this.finishStatus);
|
||||
console.log('调试信息 - 步骤条配置检查 - active值应为3时:', this.active === 3, 'finishStatus:', this.finishStatus);
|
||||
|
||||
// 地区转换
|
||||
this.form.nativePlace = this.form.jg !== null ? this.parseSelectedPath(this.form.jg) : '暂无填写'
|
||||
// 地区转换
|
||||
@@ -328,29 +408,100 @@ export default {
|
||||
if (valid) {
|
||||
if (this.form.id != null) {
|
||||
updateStuIdReissue(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功");
|
||||
this.active = active
|
||||
this.finishStatus = 'success'
|
||||
this.isDisabled = true
|
||||
// this.$router.replace({ inspectionProgress: this.form.inspectionProgress });
|
||||
// 修改成功后修改路上参数
|
||||
this.$router.push({ path: this.$route.path, query: { id: this.form.id, stuNo: this.form.stuNo, inspectionProgress: this.form.inspectionProgress } });
|
||||
this.$modal.closeLoading()
|
||||
console.log('修改响应:', response);
|
||||
if (response.code === 200) {
|
||||
this.$modal.msgSuccess("修改成功");
|
||||
this.active = active
|
||||
this.finishStatus = 'success'
|
||||
this.isDisabled = true
|
||||
// 修改成功后修改路由参数
|
||||
this.$router.push({ path: this.$route.path, query: { id: this.form.id, stuNo: this.form.stuNo, inspectionProgress: this.form.inspectionProgress } });
|
||||
}
|
||||
// 移除else分支，让全局拦截器处理所有非200的情况
|
||||
}).catch(error => {
|
||||
this.$modal.closeLoading()
|
||||
console.log('修改捕获到错误 - error:', error);
|
||||
// 如果error是字符串'error'，说明是全局拦截器返回的Promise.reject('error')
|
||||
// 这种情况下，全局拦截器已经显示了错误信息，这里不再重复显示
|
||||
if (error === 'error') {
|
||||
console.log('修改业务错误已由全局拦截器处理');
|
||||
return;
|
||||
}
|
||||
// 忽略由于路由跳转/刷新导致的请求取消错误，避免误报网络错误
|
||||
const isCanceled = error && (
|
||||
error.code === 'ERR_CANCELED' ||
|
||||
error.message === 'canceled' ||
|
||||
error.message === 'Cancel' ||
|
||||
error.__CANCEL__ === true ||
|
||||
(typeof error.message === 'string' && /cancel/i.test(error.message))
|
||||
);
|
||||
if (isCanceled) {
|
||||
console.log('请求被取消，已忽略该错误提示');
|
||||
return;
|
||||
}
|
||||
// 只处理真正的网络错误
|
||||
if (!error.response) {
|
||||
this.$modal.msgError("网络连接失败，请检查网络");
|
||||
}
|
||||
});
|
||||
} else {
|
||||
addStuIdReissue(this.form).then(response => {
|
||||
if (response.code === 500) {
|
||||
this.$modal.closeLoading()
|
||||
return
|
||||
}
|
||||
else {
|
||||
this.$modal.closeLoading()
|
||||
console.log('提交响应:', response);
|
||||
if (response.code === 200) {
|
||||
this.$modal.msgSuccess("提交申请成功");
|
||||
this.active = active
|
||||
// this.reset()
|
||||
this.$modal.closeLoading()
|
||||
this.finishStatus = 'success'
|
||||
this.isDisabled = true
|
||||
// 新增成功后跳转到详情页面
|
||||
console.log('提交成功，更新表单状态');
|
||||
this.form.inspectionProgress = 0;
|
||||
// 设置表单ID（如果后端返回了ID）
|
||||
if (response.data && response.data.id) {
|
||||
this.form.id = response.data.id;
|
||||
}
|
||||
// 更新路由参数，不刷新页面
|
||||
setTimeout(() => {
|
||||
this.$message.info('申请提交成功');
|
||||
// 使用replace更新路由，避免强制刷新
|
||||
if (this.form.id) {
|
||||
this.$router.replace({
|
||||
path: this.$route.path,
|
||||
query: {
|
||||
id: this.form.id,
|
||||
stuNo: this.form.stuNo,
|
||||
inspectionProgress: this.form.inspectionProgress
|
||||
}
|
||||
});
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
}).catch(error => {
|
||||
this.$modal.closeLoading()
|
||||
console.log('提交捕获到错误 - error:', error);
|
||||
// 如果error是字符串'error'，说明是全局拦截器返回的Promise.reject('error')
|
||||
// 这种情况下，全局拦截器已经显示了错误信息，这里不再重复显示
|
||||
if (error === 'error') {
|
||||
console.log('提交业务错误已由全局拦截器处理');
|
||||
return;
|
||||
}
|
||||
// 忽略由于路由跳转/刷新导致的请求取消错误
|
||||
const isCanceled = error && (
|
||||
error.code === 'ERR_CANCELED' ||
|
||||
error.message === 'canceled' ||
|
||||
error.message === 'Cancel' ||
|
||||
error.__CANCEL__ === true ||
|
||||
(typeof error.message === 'string' && /cancel/i.test(error.message))
|
||||
);
|
||||
if (!error.response) {
|
||||
this.$modal.msgError("网络连接失败，请检查网络");
|
||||
}
|
||||
});
|
||||
}
|
||||
} else {
|
||||
this.$modal.closeLoading()
|
||||
this.$modal.msgError("请完善必填信息");
|
||||
}
|
||||
});
|
||||
},
|
||||
@@ -388,6 +539,51 @@ export default {
|
||||
listId: this.form.id || null,
|
||||
},
|
||||
})
|
||||
},
|
||||
// 继续提交申请（已完成制作后可重新申请）
|
||||
submitNewApplication() {
|
||||
this.$confirm('您已完成制作，是否要重新提交新的申请？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
// 重置表单为新申请状态
|
||||
this.reset();
|
||||
this.isDisabled = false;
|
||||
this.isDisabledStuNo = false;
|
||||
this.finishStatus = 'success';
|
||||
this.active = 1;
|
||||
// 清除路由参数，进入新申请模式
|
||||
this.$router.push({ path: this.$route.path });
|
||||
this.$message.success('已重置为新申请状态，请填写申请信息');
|
||||
}).catch(() => {
|
||||
this.$message.info('已取消操作');
|
||||
});
|
||||
},
|
||||
// 取消申请
|
||||
cancelApplication() {
|
||||
this.$confirm('确认要取消此申请吗？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
// 调用删除接口
|
||||
this.$modal.loading('正在取消申请...');
|
||||
delStuIdReissue(this.form.id).then(response => {
|
||||
this.$modal.closeLoading();
|
||||
this.$modal.msgSuccess('申请已取消');
|
||||
// 返回列表页面
|
||||
this.$router.push('/routine/sicr/stuIdReissueLIst');
|
||||
}).catch(() => {
|
||||
this.$modal.closeLoading();
|
||||
});
|
||||
}).catch(() => {
|
||||
this.$message.info('已取消操作');
|
||||
});
|
||||
},
|
||||
// 显示已完成消息
|
||||
showCompletedMessage() {
|
||||
this.$message.info('当前审核已完成，不可取消');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@@ -15,6 +15,7 @@
|
||||
<el-option label="学生提交申请" value="0"></el-option>
|
||||
<el-option label="辅导员通过" value="1"></el-option>
|
||||
<el-option label="学工通过" value="2"></el-option>
|
||||
<el-option label="完成制作" value="3"></el-option>
|
||||
</el-select>
|
||||
<!-- <el-input v-model="queryParams.inspectionProgress" placeholder="请输入审核状态" clearable
|
||||
@keyup.enter.native="handleQuery" /> -->
|
||||
@@ -72,11 +73,13 @@
|
||||
<el-tag type="danger" v-if="scope.row.inspectionProgress === 0">未审核</el-tag>
|
||||
<el-tag type="success" v-else-if="scope.row.inspectionProgress === 1">辅导员通过</el-tag>
|
||||
<el-tag type="success" v-else-if="scope.row.inspectionProgress === 2">学工通过</el-tag>
|
||||
<el-tag type="success" v-else-if="scope.row.inspectionProgress === 3">完成制作</el-tag>
|
||||
<el-tag type="danger" v-else>辅导员驳回</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||
<template slot-scope="scope">
|
||||
|
||||
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
|
||||
v-hasPermi="['routine:stuIdReissue:edit']" v-if="showRole !== 4">修改</el-button>
|
||||
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
|
||||
@@ -122,6 +125,8 @@
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -177,7 +182,7 @@ export default {
|
||||
{ val: 1, name: '辅导员通过' },
|
||||
{ val: 2, name: '学工通过' }
|
||||
],
|
||||
showRole: '',
|
||||
showRole: ''
|
||||
};
|
||||
},
|
||||
created() {
|
||||
@@ -310,8 +315,8 @@ export default {
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const ids = row.id || this.ids;
|
||||
if (row.inspectionProgress > 0) {
|
||||
this.$message.error('正在审核中，无法取消')
|
||||
if (row.inspectionProgress >= 3) {
|
||||
this.$message.error('当前审核已完成，不可取消')
|
||||
return
|
||||
}
|
||||
this.$modal.confirm('是否确认取消学生证补办申请编号为"' + ids + '"的数据项？').then(function () {
|
||||
@@ -347,7 +352,9 @@ export default {
|
||||
} else {
|
||||
this.getList();
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -69,11 +69,14 @@
|
||||
<el-tag type="danger" v-if="scope.row.reviewerStatus === 0">未审核</el-tag>
|
||||
<el-tag type="success" v-else-if="scope.row.reviewerStatus === 1">辅导员通过</el-tag>
|
||||
<el-tag type="success" v-else-if="scope.row.reviewerStatus === 2">学工处通过</el-tag>
|
||||
<el-tag type="success" v-else-if="scope.row.reviewerStatus === 3">完成制作</el-tag>
|
||||
<el-tag type="danger" v-else>辅导员驳回</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="300">
|
||||
<template slot-scope="scope">
|
||||
<el-button size="mini" type="text" @click="handleCompleted(scope.row)"
|
||||
v-hasPermi="['routine:stuMultiLevelReview:completed']" v-if="scope.row.reviewerStatus === 2">完成制作</el-button>
|
||||
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
|
||||
v-hasPermi="['routine:stuMultiLevelReview:edit']">修改</el-button>
|
||||
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
|
||||
@@ -118,11 +121,32 @@
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 完成制作对话框 -->
|
||||
<el-dialog title="完成制作" :visible.sync="completedOpen" width="500px" append-to-body>
|
||||
<el-form ref="completedForm" :model="completedForm" :rules="completedRules" label-width="80px">
|
||||
<el-form-item label="学生姓名" prop="stuName">
|
||||
<el-input v-model="completedForm.stuName" :disabled="true" />
|
||||
</el-form-item>
|
||||
<el-form-item label="学生学号" prop="stuNo">
|
||||
<el-input v-model="completedForm.stuNo" :disabled="true" />
|
||||
</el-form-item>
|
||||
<el-form-item label="通知消息" prop="messageContent">
|
||||
<el-input v-model="completedForm.messageContent" type="textarea" placeholder="请输入发送给学生的通知消息" :rows="4" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitCompleted">确 定</el-button>
|
||||
<el-button @click="cancelCompleted">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listStuMultiLevelReview, getStuMultiLevelReview, delStuMultiLevelReview, addStuMultiLevelReview, updateStuMultiLevelReview } from "@/api/routine/stuMultiLevelReview";
|
||||
import { listStuMultiLevelReview, getStuMultiLevelReview, delStuMultiLevelReview, addStuMultiLevelReview, updateStuMultiLevelReviewWithStuIdReissue} from "@/api/routine/stuMultiLevelReview";
|
||||
import { getUserIdByStuNo, addMsg } from "@/api/stuCQS/process-center/msg";
|
||||
|
||||
import { getUserProfile } from "@/api/system/user"; // 获取当前用户接口
|
||||
export default {
|
||||
name: "StuMultiLevelReview",
|
||||
@@ -146,6 +170,8 @@ export default {
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 是否显示完成制作弹出层
|
||||
completedOpen: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
@@ -163,6 +189,13 @@ export default {
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 完成制作表单参数
|
||||
completedForm: {
|
||||
stuName: null,
|
||||
stuNo: null,
|
||||
reason: null,
|
||||
messageContent: "你申请办理的学生证制作完成，长堽校区前往xxx领取，里建校区前往xxx领取"
|
||||
},
|
||||
// 表单校验
|
||||
rules: {
|
||||
stuName: [
|
||||
@@ -175,6 +208,12 @@ export default {
|
||||
{ required: true, message: "申请原因不能为空", trigger: "blur" }
|
||||
],
|
||||
},
|
||||
// 完成制作表单校验
|
||||
completedRules: {
|
||||
messageContent: [
|
||||
{ required: true, message: "通知消息不能为空", trigger: "blur" }
|
||||
]
|
||||
},
|
||||
roleGroup: null
|
||||
};
|
||||
},
|
||||
@@ -296,6 +335,74 @@ export default {
|
||||
this.download('routine/stuMultiLevelReview/export', {
|
||||
...this.queryParams
|
||||
}, `stuMultiLevelReview_${new Date().getTime()}.xlsx`)
|
||||
},
|
||||
|
||||
/** 完成制作按钮操作 */
|
||||
handleCompleted(row) {
|
||||
this.resetCompleted();
|
||||
this.completedForm.stuName = row.stuName;
|
||||
this.completedForm.stuNo = row.stuNo;
|
||||
this.completedForm.reason = row.reason;
|
||||
this.completedForm.id = row.id;
|
||||
this.completedOpen = true;
|
||||
},
|
||||
|
||||
// 完成制作表单重置
|
||||
resetCompleted() {
|
||||
this.completedForm = {
|
||||
stuName: null,
|
||||
stuNo: null,
|
||||
reason: null,
|
||||
messageContent: "你申请办理的学生证制作完成，长堽校区前往xxx领取，里建校区前往xxx领取",
|
||||
id: null
|
||||
};
|
||||
this.resetForm("completedForm");
|
||||
},
|
||||
|
||||
// 完成制作取消按钮
|
||||
cancelCompleted() {
|
||||
this.completedOpen = false;
|
||||
this.resetCompleted();
|
||||
},
|
||||
|
||||
// 完成制作提交按钮
|
||||
submitCompleted() {
|
||||
this.$refs["completedForm"].validate(valid => {
|
||||
if (valid) {
|
||||
// 第一步：根据学号查询用户ID
|
||||
getUserIdByStuNo(this.completedForm.stuNo).then(response => {
|
||||
const receiverId = response.data;
|
||||
if (!receiverId) {
|
||||
throw new Error('未找到学生用户ID');
|
||||
}
|
||||
// 第二步：获取当前用户信息作为发送者
|
||||
return getUserProfile().then(userResponse => {
|
||||
const senderId = userResponse.data.userId;
|
||||
// 第三步：发送消息通知学生
|
||||
return addMsg({
|
||||
sender: senderId,
|
||||
receiver: receiverId,
|
||||
content: this.completedForm.messageContent
|
||||
});
|
||||
});
|
||||
}).then(() => {
|
||||
// 第四步：消息发送成功后，更新多级审核状态为3（完成制作）
|
||||
return getStuMultiLevelReview(this.completedForm.id);
|
||||
}).then(response => {
|
||||
const reviewData = response.data;
|
||||
reviewData.reviewerStatus = 3;
|
||||
// 将自定义消息内容存储到notes字段中，用于企业微信消息发送
|
||||
reviewData.notes = this.completedForm.messageContent;
|
||||
return updateStuMultiLevelReviewWithStuIdReissue(reviewData);
|
||||
}).then(() => {
|
||||
this.completedOpen = false;
|
||||
this.getUser();
|
||||
this.$modal.msgSuccess("完成制作成功并已发送通知消息");
|
||||
}).catch(error => {
|
||||
this.$modal.msgError(error.message || "操作失败");
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@@ -36,7 +36,7 @@ module.exports = {
|
||||
// detail: https://cli.vuejs.org/config/#devserver-proxy `http://124.70.202.11:8085` https://wap.wzzyhp.com
|
||||
[process.env.VUE_APP_BASE_API]: {
|
||||
// target: 'http://172.16.96.111:8585', //`http://zhxg.gxsdxy.cn`,`https://wap.wzzyhp.com`, http://localhost:8085 http://zhxgjava.gxsdxy.cn
|
||||
target: 'http://localhost:8085',// `http://zhxg.gxsdxy.cn`,`https://wap.wzzyhp.com`, http://localhost:8085 http://zhxgjava.gxsdxy.cn
|
||||
target: 'http://localhost:8088',// `http://zhxg.gxsdxy.cn`,`https://wap.wzzyhp.com`, http://localhost:8085 http://zhxgjava.gxsdxy.cn
|
||||
//target:`http://zhxg.gxsdxy.cn`,
|
||||
changeOrigin: true,
|
||||
pathRewrite: {
|
||||
|
||||
Reference in New Issue
Block a user