ai功能静态

This commit is contained in:
sunli_tydic
2025-11-19 16:27:07 +08:00
parent 986a47f22a
commit 003fece291
8 changed files with 3326 additions and 2171 deletions

View File

@@ -64,97 +64,101 @@
</div>
</div>
<el-row :gutter="20" style="margin-top:10px">
<el-col :span="4">
<!-- <el-button icon="el-icon-folder" type="primary" size="small">导出</el-button> -->
<el-button class="Create-coures" type="primary" @click="addNewCourse()" icon="el-icon-plus">新建课程</el-button>
<el-col :span="24">
<!-- <el-button icon="el-icon-folder" type="primary" size="small">导出</el-button> -->
<el-button class="Create-coures" type="primary" @click="addNewCourse()" icon="el-icon-plus">新建课程</el-button>
<el-button type="primary" @click="setLanguage()" icon="el-icon-connection" :disabled="selectedCourses.length === 0">设置语种</el-button>
<el-button type="primary" @click="enableAI()" icon="el-icon-switch-button" :disabled="selectedCourses.length === 0">开启AI处理</el-button>
</el-col >
</el-row>
</div>
<div style="margin-right:30px;">
<el-table style="margin:10px 32px 10px 22px;" :data="pageData" border stripe>
<el-table-column label="序号" type="index" width="50"></el-table-column>
<el-table-column v-if="forChoose" label="选择" width="80">
<template slot-scope="scope" v-if="scope.row.published">
<el-button type="default" size="mini" @click="handleChoose(scope.row)">选择</el-button>
</template>
</el-table-column>
<el-table-column label="名称" prop="name" width="200" show-overflow-tooltip>
<template slot-scope="scope">
<span class="previewStyle" @click="viewTopic(scope.row)">{{ scope.row.name }}</span>
</template>
</el-table-column>
<el-table-column label="内容分类" prop="sysType" sortable width="240px">
<template slot-scope="scope">
<span>{{sysTypeName(scope.row.sysType1)}}</span>
<span v-if="scope.row.sysType2 !=''">/{{sysTypeName(scope.row.sysType2)}}</span>
<span v-if="scope.row.sysType3 !=''">/{{sysTypeName(scope.row.sysType3)}}</span>
</template>
</el-table-column>
<el-table-column label="关键字" :show-overflow-tooltip="true" prop="name" width="200px">
<template slot-scope="scope">
{{ scope.row.keywords }}
</template>
</el-table-column>
<!-- <el-table-column label="资源归属" sortable prop="author" width="240px">
<template slot-scope="scope">
<span>{{resOwnerName(scope.row.resOwner1)}}</span>
<span v-if="scope.row.resOwner2 != ''">/{{resOwnerName(scope.row.resOwner2)}}</span>
<span v-if="scope.row.resOwner3 != ''">/{{resOwnerName(scope.row.resOwner3)}}</span>
</template>
</el-table-column> -->
<!-- <el-table-column label="授课方式" prop="type" width="120px">
<template slot-scope="scope">
{{ courseType(scope.row.type)}}
</template>
</el-table-column> -->
<el-table-column label="状态" prop="status" width="120px">
<template slot-scope="scope">
<!-- 1未提交 2.已提交 = 未审核 5 已审核 -->
<span v-if="scope.row.status == 1">未提交</span>
<span v-if="scope.row.status == 2">待审核</span>
<span v-if="scope.row.status == 5">审核</span>
<span v-if="scope.row.status == 3">审核未通过</span>
</template>
</el-table-column>
<el-table-column label="是否发布" width="130px">
<template slot-scope="scope">
{{ scope.row.published == true ? '已发布' : '未发布' }}
</template>
</el-table-column>
<el-table-column label="创建人" prop="sysCreateBy"></el-table-column>
<el-table-column label="创建时间" prop="sysCreateTime" width="230px" show-overflow-tooltip></el-table-column>
<el-table-column label="是否停用" width="130px">
<template slot-scope="scope">
{{ scope.row.enabled == true ? '启用' : '停用' }}
</template>
</el-table-column>
<el-table-column label="是否置顶" width="130px">
<template slot-scope="scope">
{{ scope.row.isTop == true ? '置顶' : '未置顶' }}
</template>
</el-table-column>
<el-table-column label="操作" width="180px" fixed="right">
<template slot-scope="scope" class="btn-gl">
<!-- 20240621 修改scope.row.isPermission = fasle 时不展示操作按钮-->
<el-button type="text" size="mini" v-if="scope.row.isPermission && scope.row.status == 5 && !scope.row.published" @click="releaseData(scope.row)">发布</el-button>
<el-button v-if="scope.row.isPermission && pageManage && scope.row.published" @click="showStudent(scope.row)" type="text" size="mini">学员</el-button>
<el-button v-if="scope.row.isPermission && !forChoose && scope.row.published" @click="showManageStudy(scope.row)" type="text" size="mini">管理</el-button>
<el-button v-if="scope.row.isPermission && !forChoose && scope.row.status == 2" @click="withdraw(scope.row)" type="text" size="mini">撤回</el-button>
<el-button v-if="scope.row.isPermission && scope.row.status != 2" type="text" size="mini" @click="editCurriculum(scope.row)">编辑</el-button>
<el-button v-if="scope.row.isPermission && (scope.row.status != 2 && !scope.row.published) || scope.row.isPermission &&!scope.row.enabled" type="text" size="mini" @click="delItem(scope.row)">删除</el-button>
<el-dropdown v-if="scope.row.isPermission && scope.row.published" type="text" size="mini" style="margin-left:10px">
<el-button type="text" size="mini">更多<i class="el-icon-arrow-down el-icon--right"></i></el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item @click.native="copyCourse(scope.row)">复制</el-dropdown-item>
<el-dropdown-item v-if="scope.row.published" @click.native="isDisable(scope.row)">{{scope.row.enabled? '停用':'启用'}}</el-dropdown-item>
<el-dropdown-item v-if="scope.row.published" @click.native="showQrimage(scope.row)">二维码</el-dropdown-item><!--发布之后才可以查看二维码-->
<el-dropdown-item v-if="scope.row.published" @click.native="setTop(scope.row)">{{scope.row.isTop? '取消置顶':'置顶'}}</el-dropdown-item>
<el-table style="margin:10px 32px 10px 22px;" :data="pageData" border stripe @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column label="序号" type="index" width="50"></el-table-column>
<el-table-column v-if="forChoose" label="选择" width="80">
<template slot-scope="scope" v-if="scope.row.published">
<el-button type="default" size="mini" @click="handleChoose(scope.row)">选择</el-button>
</template>
</el-table-column>
<el-table-column label="名称" prop="name" width="200" show-overflow-tooltip>
<template slot-scope="scope">
<span class="previewStyle" @click="viewTopic(scope.row)">{{ scope.row.name }}</span>
</template>
</el-table-column>
<el-table-column label="内容分类" prop="sysType" sortable width="240px">
<template slot-scope="scope">
<span>{{sysTypeName(scope.row.sysType1)}}</span>
<span v-if="scope.row.sysType2 !=''">/{{sysTypeName(scope.row.sysType2)}}</span>
<span v-if="scope.row.sysType3 !=''">/{{sysTypeName(scope.row.sysType3)}}</span>
</template>
</el-table-column>
<el-table-column label="关键字" :show-overflow-tooltip="true" prop="name" width="200px">
<template slot-scope="scope">
{{ scope.row.keywords }}
</template>
</el-table-column>
<!-- <el-table-column label="资源归属" sortable prop="author" width="240px">
<template slot-scope="scope">
<span>{{resOwnerName(scope.row.resOwner1)}}</span>
<span v-if="scope.row.resOwner2 != ''">/{{resOwnerName(scope.row.resOwner2)}}</span>
<span v-if="scope.row.resOwner3 != ''">/{{resOwnerName(scope.row.resOwner3)}}</span>
</template>
</el-table-column> -->
<!-- <el-table-column label="授课方式" prop="type" width="120px">
<template slot-scope="scope">
{{ courseType(scope.row.type)}}
</template>
</el-table-column> -->
<el-table-column label="状态" prop="status" width="120px">
<template slot-scope="scope">
<!-- 1未提交 2.已提交 = 未审核 5 已审核 -->
<span v-if="scope.row.status == 1">未提交</span>
<span v-if="scope.row.status == 2">审核</span>
<span v-if="scope.row.status == 5">审核</span>
<span v-if="scope.row.status == 3">审核未通过</span>
</template>
</el-table-column>
<el-table-column label="是否发布" width="130px">
<template slot-scope="scope">
{{ scope.row.published == true ? '已发布' : '未发布' }}
</template>
</el-table-column>
<el-table-column label="创建" prop="sysCreateBy"></el-table-column>
<el-table-column label="创建时间" prop="sysCreateTime" width="230px" show-overflow-tooltip></el-table-column>
<el-table-column label="是否停用" width="130px">
<template slot-scope="scope">
{{ scope.row.enabled == true ? '启用' : '停用' }}
</template>
</el-table-column>
<el-table-column label="是否置顶" width="130px">
<template slot-scope="scope">
{{ scope.row.isTop == true ? '置顶' : '未置顶' }}
</template>
</el-table-column>
<el-table-column label="操作" width="180px" fixed="right">
<template slot-scope="scope" class="btn-gl">
<!-- 20240621 修改scope.row.isPermission = fasle 时不展示操作按钮-->
<el-button v-if="scope.row.isPermission && scope.row.status != 2" type="text" size="mini" @click="setAI(scope.row)">AI设置</el-button>
<el-button type="text" size="mini" v-if="scope.row.isPermission && scope.row.status == 5 && !scope.row.published" @click="releaseData(scope.row)">发布</el-button>
<el-button v-if="scope.row.isPermission && pageManage && scope.row.published" @click="showStudent(scope.row)" type="text" size="mini">学员</el-button>
<el-button v-if="scope.row.isPermission && !forChoose && scope.row.published" @click="showManageStudy(scope.row)" type="text" size="mini">管理</el-button>
<el-button v-if="scope.row.isPermission && !forChoose && scope.row.status == 2" @click="withdraw(scope.row)" type="text" size="mini">撤回</el-button>
<el-button v-if="scope.row.isPermission && scope.row.status != 2" type="text" size="mini" @click="editCurriculum(scope.row)">编辑</el-button>
<el-button v-if="scope.row.isPermission && (scope.row.status != 2 && !scope.row.published) || scope.row.isPermission &&!scope.row.enabled" type="text" size="mini" @click="delItem(scope.row)">删除</el-button>
<el-dropdown v-if="scope.row.isPermission && scope.row.published" type="text" size="mini" style="margin-left:10px">
<el-button type="text" size="mini">更多<i class="el-icon-arrow-down el-icon--right"></i></el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item @click.native="copyCourse(scope.row)">复制</el-dropdown-item>
<el-dropdown-item v-if="scope.row.published" @click.native="isDisable(scope.row)">{{scope.row.enabled? '停用':'启用'}}</el-dropdown-item>
<el-dropdown-item v-if="scope.row.published" @click.native="showQrimage(scope.row)">二维码</el-dropdown-item><!--发布之后才可以查看二维码-->
<el-dropdown-item v-if="scope.row.published" @click.native="setTop(scope.row)">{{scope.row.isTop? '取消置顶':'置顶'}}</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</template>
</el-table-column>
</el-table>
</el-dropdown-menu>
</el-dropdown>
</template>
</el-table-column>
</el-table>
</div>
@@ -287,6 +291,204 @@
<div>
<course-form ref="courseForm" @submitSuccess="searchData" @close="searchData"></course-form>
</div>
<!-- 设置语种弹框 -->
<el-dialog
title="AI翻译"
:visible.sync="languageSetting.dlgShow"
width="500px"
:close-on-click-modal="false"
>
<div style="margin-bottom: 20px;">
<div style="margin-bottom: 15px;">请选择课程所支持语种</div>
<el-select
v-model="languageSetting.selectedLanguages"
multiple
placeholder="请选择语种"
style="width: 100%;"
>
<el-option
v-for="lang in selectAllLang"
:key="lang.srclang"
:label="lang.label"
:value="lang.srclang"
></el-option>
</el-select>
</div>
<div style="color: #ff4d4f; font-size: 12px;">
仅支持对已开启AI处理的课程进行批量语种设置所选的课程中已超过X个未开启AI处理的课程以上配置仅对X个已开启AI处理的课程生效
</div>
<template #footer>
<el-button @click="languageSetting.dlgShow = false">取消</el-button>
<el-button type="primary" @click="confirmLanguageSetting">确认</el-button>
</template>
</el-dialog>
<!-- 开启AI处理弹框 -->
<el-dialog
title="开启AI处理"
:visible.sync="aiProcessSetting.dlgShow"
width="500px"
>
<div class="ai-process-dialog">
<!-- AI处理状态 -->
<div class="form-item">
<span class="form-label">
<el-tooltip class="item" effect="dark" content="是否将课程进行AI处理" placement="top">
<i class="el-icon-question"></i>
</el-tooltip>
AI处理状态</span>
<span class="status-text">
{{ aiProcessSetting.aiSet === '1' ? '已开启' : '已关闭' }}
</span>
<el-switch
v-model="aiProcessSetting.aiSet"
active-value="1"
inactive-value="0"
></el-switch>
</div>
<div>
<!-- 是否生成AI摘要 -->
<div class="form-item">
<span class="form-label">是否需要生成AI摘要</span>
<el-radio-group v-model="aiProcessSetting.aiAbstract" class="radio-group">
<el-radio label="1"></el-radio>
<el-radio label="0"></el-radio>
</el-radio-group>
</div>
<!-- 是否生成AI文稿 -->
<div class="form-item">
<span class="form-label">是否需要生成AI文稿</span>
<el-radio-group v-model="aiProcessSetting.aiDraft" class="radio-group">
<el-radio label="1"></el-radio>
<el-radio label="0"></el-radio>
</el-radio-group>
</div>
<!-- 课程支持语种选择 -->
<div class="form-item" style="flex-flow: column;align-items: baseline;">
<span class="form-label">请选择该课程所支持语种</span>
<el-select
v-model="aiProcessSetting.languageCode"
multiple
style="width: calc(100% - 135px);"
placeholder="请选择语种"
>
<el-option
v-for="lang in selectAllLang"
:key="lang.srclang"
:label="lang.label"
:value="lang.srclang"
></el-option>
</el-select>
</div>
</div>
<!-- 提示信息 -->
<div class="tips">
<span>已跳过x个已开启AI处理的课程仅更新剩余x个</span>
</div>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="aiProcessSetting.dlgShow = false">取消</el-button>
<el-button type="primary" @click="confirmAiProcess">确认</el-button>
</span>
</el-dialog>
<!-- AI设置弹框 -->
<el-dialog
title="AI设置"
:visible.sync="aiSetting.dlgShow"
width="500px"
>
<div class="ai-setting-dialog">
<!-- AI功能状态 -->
<div class="form-item">
<span class="form-label">
<el-tooltip class="item" effect="dark" content="是否将课程进行AI处理" placement="top">
<i class="el-icon-question"></i>
</el-tooltip>
AI功能状态
</span>
<span class="status-text">
{{ aiSetting.aiSet === '1' ? '已开放' : '未开放' }}
</span>
<el-switch
v-model="aiSetting.aiSet"
active-value="1"
inactive-value="0"
></el-switch>
</div>
<!-- AI摘要状态 -->
<div class="form-item">
<span class="form-label">AI摘要状态</span>
<span class="status-badge" :class="{'status-badge--active': aiSetting.aiAbstract === '1'}">
{{ aiSetting.aiAbstract === '1' ? '已上架' : '已下架' }}
</span>
<div class="action-buttons">
<el-button type="text" @click="aiSetting.aiAbstract = '0'">
{{ aiSetting.aiAbstract === '0' ? '上架' : '下架' }}
</el-button>
<el-button type="text" >编辑</el-button>
</div>
</div>
<!-- AI文稿状态 -->
<div class="form-item">
<span class="form-label">AI文稿状态</span>
<span class="status-badge" :class="{'status-badge--active': aiSetting.aiDraft === '1'}">
{{ aiSetting.aiDraft === '1' ? '已上架' : '已下架' }}
</span>
<div class="action-buttons">
<el-button type="text" @click="aiSetting.aiDraft = '0'">
{{ aiSetting.aiDraft === '0' ? '上架' : '下架' }}
</el-button>
</div>
</div>
<!-- AI翻译状态 -->
<div class="form-item">
<span class="form-label">AI翻译状态</span>
<span class="status-badge" :class="{'status-badge--active': aiSetting.aiTranslate === '1'}">
{{ aiSetting.aiTranslate === '1' ? '已上架' : '已下架' }}
</span>
<div class="action-buttons">
<el-button type="text" @click="aiSetting.aiTranslate = '0'">
{{ aiSetting.aiTranslate === '0' ? '上架' : '下架' }}
</el-button>
<el-button type="text" >编辑</el-button>
</div>
</div>
<!-- 支持语种 -->
<div class="form-item">
<span class="form-label">支持语种</span>
<div class="languages-list">
<div class="language-tag">
中文
<span class="status-badge">已下架</span>
</div>
<div class="language-tag">
英语
<span class="status-badge">生成中</span>
</div>
<div class="language-tag">
越南语
<span class="status-badge status-badge--active">已上架</span>
</div>
</div>
</div>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="aiSetting.dlgShow = false">取消</el-button>
<el-button type="primary" @click="confirmAISetting">确认</el-button>
</span>
</el-dialog>
</div>
</template>
@@ -308,7 +510,7 @@ export default {
name: 'manageCourse',
components: {courseForm, manager, auditCourse1, auditCourse2,adminPage},
computed: {
...mapGetters(['resOwnerMap','sysTypeMap','userInfo']),
...mapGetters(['resOwnerMap','sysTypeMap','userInfo', 'selectAllLang']),
},
data() {
return {
@@ -392,6 +594,27 @@ export default {
},
extendRefId:'',
extendRefType:'',
selectedCourses: [], //已选课程
languageSetting: {
dlgShow: false,
languageCode: ['zh-CN', 'en-US'] // 默认选中的语种
},
aiProcessSetting: {
dlgShow: false,
aiSet: '1',
aiAbstract: '1',
aiDraft: '1',
languageCode: ['zh-CN', 'en-US'] // 默认选中的语种
},
aiSetting: {
dlgShow: false,
courseId: '',
aiSet: '1',
aiAbstract: '1', // 1:上架 0:下架
aiDraft: '1', // 1:上架 0:下架
aiTranslate: '1', // 1:上架 0:下架
languageCode: ['zh-CN', 'en-US', 'vi-VN'] // 支持的语种
}
};
},
mounted() {
@@ -438,6 +661,9 @@ export default {
//出现学员管理
window.parent.openSelectStu(row);
},
handleSelectionChange(val){
this.selectedCourses = val;
},
handleChoose(row){ //选择课程
window.parent.selectCourse(row);
},
@@ -449,6 +675,32 @@ export default {
inputOn() {
this.$forceUpdate();
},
// AI设置
setAI(row) {
this.aiSetting.courseId = row.id;
// 这里可以添加获取当前课程AI设置的逻辑
this.aiSetting.dlgShow = true;
},
// 确认AI设置
confirmAISetting() {
const { courseId, aiSet, aiAbstract, aiDraft, aiTranslate } = this.aiSetting;
// 这里可以添加保存AI设置的API调用
console.log('保存AI设置', {
courseId,
aiSet,
aiAbstract,
aiDraft,
aiTranslate
});
// 模拟成功保存
this.$message.success('AI设置保存成功');
this.aiSetting.dlgShow = false;
// 可以选择是否刷新列表数据
},
// 置顶
setTop(row) {
let params = {
@@ -837,6 +1089,92 @@ export default {
// }
// this.$message({ message: msg, type: 'success', offset: 50 });
// },
setLanguage() {
if (this.selectedCourses.length > 0) {
this.languageSetting.dlgShow = true;
}
},
enableAI() {
// 开启AI处理按钮点击事件
if (this.selectedCourses.length > 0) {
this.aiProcessSetting.dlgShow = true;
}
},
async confirmLanguageSetting() {
try {
// 收集选中的课程ID
const courseIds = this.selectedCourses.map(course => course.id).join(',');
// 获取选择的语种
const languages = this.languageSetting.selectedLanguages.join(',');
// 这里可以根据实际需求调用API进行语种设置
console.log('批量设置课程语种', { courseIds, languages });
// 显示成功提示
this.$message({
type: 'success',
message: `已成功为${this.selectedCourses.length}个课程设置语种`,
offset: 50
});
// 关闭弹框
this.languageSetting.dlgShow = false;
// 刷新数据(如果需要)
// this.searchData();
} catch (error) {
console.error('设置语种失败', error);
this.$message({
type: 'error',
message: '设置语种失败,请稍后重试',
offset: 50
});
}
},
async confirmAiProcess() {
try {
// 收集选中的课程ID
const courseIds = this.selectedCourses.map(course => course.id).join(',');
// 获取AI处理配置
const { aiSet, aiAbstract, aiDraft, selectedLanguages } = this.aiProcessSetting;
// 这里可以根据实际需求调用API进行AI处理设置
console.log('批量开启AI处理', {
courseIds,
aiSet,
aiAbstract,
aiDraft,
languages: selectedLanguages.join(',')
});
// 模拟计算跳过和更新的课程数量
const totalCourses = this.selectedCourses.length;
const skippedCount = Math.floor(totalCourses * 0.2); // 假设20%的课程已开启AI处理
const updatedCount = totalCourses - skippedCount;
// 显示成功提示
this.$message({
type: 'success',
message: `已跳过${skippedCount}个已开启AI处理的课程成功为${updatedCount}个课程更新AI处理设置`,
offset: 50
});
// 关闭弹框
this.aiProcessSetting.dlgShow = false;
// 刷新数据
this.searchData();
} catch (error) {
console.error('开启AI处理失败', error);
this.$message({
type: 'error',
message: '开启AI处理失败请稍后重试',
offset: 50
});
}
},
delItem(row) {
this.$confirm('您确定要删除所选课程吗?', '删除提示', {
confirmButtonText: '确定',
@@ -953,4 +1291,38 @@ export default {
.el-dialog__body {
overflow: hidden;
}
.form-item{
margin-bottom: 15px;
display: flex;
align-items: center;
gap: 5px;
}
.tips {
color: #f56c6c;
font-size: 12px;
margin: 10px 0;
line-height: 1.5;
}
.status-badge{
display: inline-block;
padding: 3px 13px;
border-radius: 20px;
font-size: 12px;
background: rgba(254, 249, 195, 1);
color: rgba(133, 77, 14, 1);
font-size: 12px;
font-weight: 500;
line-height: 17px;
letter-spacing: 0px;
}
.status-badge--active{
background: rgba(220, 252, 231, 1);
color: rgba(22, 101, 52, 1);
}
.languages-list{
display: flex;
flex-wrap: wrap;
gap: 20px;
}
</style>