课程带富文本的弹窗抽离

This commit is contained in:
kclf
2022-12-07 23:56:59 +08:00
parent 18ae75da41
commit d54f451122
3 changed files with 8848 additions and 8076 deletions

View File

@@ -269,465 +269,10 @@
</a-modal>
<!-- 选择线上还是面授课弹窗 -->
<!-- 确定新建面授课弹窗 -->
<a-modal
v-model:visible="ft_hs"
title="Title"
@ok="handlePush"
:footer="null"
:closable="false"
wrapClassName="modalStyle facteachModal"
width="80%"
@cancel="ft_exit_1"
>
<div class="modalHeader">
<div class="headerLeft">
<img
style="width: 17px; height: 18px; margin-right: 8px"
src="../../assets/images/basicinfo/add.png"
/>
<span v-if="ft_eidt" class="headerLeftText">编辑面授课</span>
<span v-else class="headerLeftText">新建面授课</span>
</div>
<div style="margin-right: 57px; cursor: pointer">
<img
@click="ft_exit_1"
style="width: 22px; height: 22px"
src="../../assets/images/basicinfo/close22.png"
/>
</div>
</div>
<div class="modalMain">
<!-- 审核理由 -->
<div v-if="statusJuJue" class="statusJuJue">
<span>审核意见</span>
<span>{{auditDescription}}</span>
</div>
<div class="faceteach" :style="{ display: ft_hs ? 'block' : 'none' }">
<div class="ft_main">
<div class="m_title">课程信息</div>
<div class="m_body">
<div class="mb_left">
<div class="mbl_items">
<div class="item_nam">
<div class="asterisk_icon">
<img
src="@/assets/images/coursewareManage/asterisk.png"
alt=""
/>
</div>
<span style="margin-right: 14px">课程名称</span>
</div>
<div class="item_inp">
<div class="i1_input">
<a-input
v-model:value="qdms_inputV1"
maxlength="90"
style="width: 440px; height: 40px; border-radius: 8px"
placeholder="请输入课程名称"
/>
<div class="inp_num">
<span style="color: #c7cbd2">
{{ qdms_inputV1.length }}/90
</span>
</div>
</div>
</div>
</div>
<div class="i2_cz">
<div class="i2_top">
<div class="i2_left">
<span style="color: #999ba3">课程命名规则</span>
</div>
<div
class="i2_right"
@click="hideShow"
style="cursor: pointer"
>
<div
class="b_zk"
:style="{ display: hideshow ? 'block' : 'none' }"
>
<span style="color: #4ea6ff">收起</span>
</div>
<div
class="b_sq"
:style="{ display: hideshow ? 'none' : 'block' }"
>
<span style="color: #4ea6ff">展开</span>
</div>
<div class="b_icon"></div>
</div>
</div>
<div
class="i2_detail"
:style="{ display: hideshow ? 'block' : 'none' }"
>
<span style="color: #999ba3">
1课程名称统一不加书名号<br />
2项目名称属地等信息如需体现在课程名称中请放在课程名称信息
之后时间管理GROW180项目时间管理B*确保首先
看到的是课程内容主题<br />
3同一课程如先后有多个版本原则上仅开放最新版本旧版本应停用
版本如必须以年份标明请以沟通技巧2022的方式呈现
</span>
</div>
</div>
<div class="mbl_items2">
<div class="item_nam">
<div class="asterisk_icon">
<img
src="@/assets/images/coursewareManage/asterisk.png"
alt=""
/>
</div>
<span style="margin-right: 14px">封面图</span>
</div>
<div class="item_inp">
<a-select
:getPopupContainer="
(triggerNode) => {
return triggerNode.parentNode || document.body;
}
"
v-model:value="feng_mian_1"
dropdownClassName="dropdown-style"
style="width: 440px"
placeholder="请选择"
:options="optionsUrl"
allowClear
showSearch
></a-select>
<img
class="i_upload_img"
v-if="feng_mian_1"
:src="feng_mian_1"
alt="avatar"
/>
<!-- <a-upload
name="avatar"
list-type="picture-card"
class="avatar-uploader"
:show-upload-list="false"
:before-upload="beforeUpload"
disabled
>
<img
class="i_upload_img"
v-if="imageUrl"
:src="imageUrl"
alt="avatar"
/>
<div class="i_upload" v-else>
<div class="addimg">
<div class="heng"></div>
<div class="shu"></div>
</div>
</div>
</a-upload> -->
<div class="i_bottom">
<span style="color: #999ba3">
高宽比为16:9 (:800*450) png或jpg图片
</span>
</div>
</div>
</div>
<div class="mbl_items">
<div class="item_nam">
<div class="asterisk_icon">
<img
style="width: 10px; height: 10px"
src="@/assets/images/coursewareManage/asterisk.png"
alt=""
/>
</div>
<span style="margin-right: 14px">目标人群</span>
</div>
<div class="item_inp">
<div class="i1_input">
<a-input
v-model:value="qdms_inputV2"
maxlength="50"
style="width: 440px; height: 40px; border-radius: 8px"
placeholder="请输入目标人群"
/>
<div class="inp_num">
<span style="color: #c7cbd2">
{{ qdms_inputV2.length }}/50
</span>
</div>
</div>
</div>
</div>
<div class="mbl_items">
<div class="item_nam">
<span style="margin-right: 14px">课程价值</span>
</div>
<div class="item_inp">
<div class="i1_input">
<a-input
v-model:value="qdms_inputV3"
maxlength="200"
style="width: 440px; height: 40px; border-radius: 8px"
placeholder="请输入课程价值"
/>
<div class="inp_num">
<span style="color: #c7cbd2">
{{ qdms_inputV3.length }}/200
</span>
</div>
</div>
</div>
</div>
<div class="mbl_items">
<div class="item_nam">
<div class="asterisk_icon">
<img
src="@/assets/images/coursewareManage/asterisk.png"
alt=""
/>
</div>
<span style="margin-right: 14px">内容分类</span>
</div>
<div class="item_inp">
<div class="select i6_input">
<a-select
:getPopupContainer="
(triggerNode) => {
return triggerNode.parentNode || document.body;
}
"
v-model:value="fen_lei"
dropdownClassName="dropdown-style"
style="width: 440px"
placeholder="请选择"
:options="options2"
allowClear
showSearch
></a-select>
</div>
</div>
</div>
<div class="mbl_items">
<div class="item_nam">
<span style="margin-right: 14px">场景</span>
</div>
<div class="item_inp">
<div class="select i7_input">
<a-select
:getPopupContainer="
(triggerNode) => {
return triggerNode.parentNode || document.body;
}
"
v-model:value="chang_jin"
dropdownClassName="dropdown-style"
style="width: 440px"
placeholder="请选择"
:options="options3"
allowClear
showSearch
></a-select>
</div>
</div>
</div>
<div class="mbl_items">
<div class="item_nam">
<span style="margin-right: 14px">内容标签</span>
</div>
<div class="item_inp">
<!-- <a-select
:getPopupContainer="
(triggerNode) => {
return triggerNode.parentNode || document.body;
}
"
v-model:value="tags_val"
mode="tags"
style="width: 440px; height: 40px"
placeholder="请输入按回车键创建成功"
:options="tagsOptions"
></a-select> -->
<a-input
v-model:value="tags_val_single"
placeholder="请输入按回车键创建成功"
@pressEnter="handleTagChange"
/>
<div class="tag-content">
<a-tag
v-for="(item, index) in tags_val"
:key="index"
closable
@close="handleTagClose(index)"
>
{{ item }}
</a-tag>
</div>
</div>
</div>
</div>
<div class="mb_right">
<div class="mbl_items">
<div class="item_nam">
<div class="asterisk_icon">
<img
src="@/assets/images/coursewareManage/asterisk.png"
alt="asterisk"
/>
</div>
<!-- 授课教师1 -->
<span style="margin-right: 14px">授课教师</span>
</div>
<div class="item_inp">
<div class="i1_input">
<ProjectManager
v-model:value="member.value"
v-model:name="member.name"
></ProjectManager>
</div>
</div>
</div>
<div class="mbl_items2">
<div class="item_nam">
<span style="margin-right: 14px">课程简介</span>
</div>
<div class="item_inp">
<div class="i10_textarea">
<a-textarea
v-model:value="qdms_inputV6"
maxlength="150"
style="width: 440px; height: 100px; border-radius: 8px"
placeholder="请输入"
/>
<div class="inp_num">
<span style="color: #c7cbd2">
{{ qdms_inputV6.length }}/150
</span>
</div>
</div>
</div>
</div>
<div class="mbl_items">
<div class="item_nam">
<span style="margin-right: 10px">附件</span>
</div>
<div class="item_inp">
<a-upload
multiple
:show-upload-list="false"
:before-upload="beforeUpload2"
>
<div class="accessory" style="cursor: pointer">
<div class="accessory_icon">
<img
src="@/assets/images/coursewareManage/enclosure.png"
alt="enclosure"
/>
</div>
<span style="color: #4ea6ff">添加附件</span>
</div>
</a-upload>
<span>
支持.pdf,.ppt,.pptx,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png,.gif,.zip
</span>
</div>
</div>
<div class="mbl_items12">
<div
class="i12_box1"
v-for="(item, index) in imgList"
:key="index"
>
<div class="file_img"></div>
<div class="file_detail">
<!-- <div class="file_name">
<span style="color: #6f6f6f">{{ item.name }}</span>
</div> -->
<!-- 条件渲染 s -->
<!-- <div class="file_size">
<span style="color: #999ba3">{{ item.size }}</span>
</div> -->
<div class="file_updata">
<div class="updatabox">
<div class="updatacolor"></div>
<div class="updataxq">上传完成</div>
<!-- <div class="updatacolor2"></div>
<div class="updataxq2">上传失败</div> -->
<!-- <div class="updatacolor3"></div>
<div class="updataxq3">正在上传</div> -->
</div>
<div class="upjd">
<span style="margin: auto 5px">100%</span>
</div>
</div>
<!-- 条件渲染 e -->
</div>
<div class="file_operation">
<div class="fobox">
<span style="color: #4ea6ff" @click="handleDel(index)">
删除
</span>
</div>
<!-- <div class="fobox">
<span style="color: #4ea6ff">重传</span>
</div>
<div class="fobox">
<span style="color: #4ea6ff">取消</span>
</div> -->
<!-- <div class="fobox">
<span style="color: #4ea6ff; margin-right: 5px">
暂停
</span>
</div>
<div class="fobox">
<span style="color: #4ea6ff">取消</span>
</div> -->
</div>
</div>
</div>
</div>
</div>
<div class="m_footer">
<div class="fotnam">
<span>课程大纲</span>
</div>
<div class="fotarea">
<div style="border: 1px solid #ccc">
<Toolbar
style="border-bottom: 1px solid #ccc"
:editor="editorRef"
:defaultConfig="toolbarConfig"
:mode="mode"
/>
<Editor
style="height: 250px; overflow-y: hidden"
v-model="valueHtml"
:defaultConfig="editorConfig"
:mode="mode"
@onCreated="handleCreated"
/>
</div>
</div>
</div>
<div class="m_btn">
<div class="btn btn5" @click="ft_exit_1">
<div class="btnText">取消</div>
</div>
<div class="btn btn6" @click="handlePush">
<div class="btnText">保存</div>
</div>
<div
class="btn btn6"
v-if="statusTingQi == 1"
@click="reviewClick"
>
<div class="btnText">提交审核</div>
</div>
</div>
</div>
</div>
</div>
</a-modal>
<CourseModal
ref="CourseModalRef"
@visibleClose="closeOnlineCoursevisible"
/>
<!-- 查看面授课弹框 start -->
<a-modal
v-model:visible="lookMs"
@@ -3008,7 +2553,7 @@
<div class="btnText" @click="delete_exit1">取消</div>
</div>
<div class="del_btn btn2">
<div class="btnText" @click="handleDeleteExit">确定</div>
<div class="btnText" @click="handleDeleteExit">确定</div>
</div>
</div>
</div>
@@ -3137,6 +2682,7 @@ import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import ProjectManager from "@/components/project/ProjectManagerNew";
import SeeModal from "./components/seeModal.vue";
import CourseModal from "./courseModal.vue";
import * as moment from "moment";
//列表表格
@@ -3643,6 +3189,7 @@ export default defineComponent({
Editor,
Toolbar,
SeeModal,
CourseModal,
// StuAdd,
ProjectManager,
ProjOwnerShip,
@@ -3655,6 +3202,8 @@ export default defineComponent({
addOnlineCourse,
},
setup() {
const CourseModalRef = ref(null);
const state = reactive({
shipType: 1,
addLoading: false,
@@ -3662,7 +3211,7 @@ export default defineComponent({
teacherId: null,
teacher: null,
selectedRowKeys7: [],
auditDescription:"",
auditDescription: "",
isEdit: 0,
member: { name: "", value: "" },
//列表表格
@@ -4640,7 +4189,9 @@ export default defineComponent({
const createft = () => {
if (state.bs_hs == false && state.valueE1 != "") {
state.of_hs = false;
state.ft_hs = true;
// state.ft_hs = true;
CourseModalRef.value.visibleOpen(null);
state.valueE1 = "";
state.teacher = "";
state.teacherName = "";
@@ -4663,12 +4214,13 @@ export default defineComponent({
return count ? false : true;
};
const ft_exit_0 = () => {
state.ft_hs = false;
// state.ft_hs = false;
CourseModalRef.value.visibleClose();
};
const ft_exit_1 = () => {
state.ft_hs = false;
router.go(0);
// state.ft_hs = false;
CourseModalRef.value.visibleClose();
// router.go(0);
};
const ft_exit = () => {
state.ft_eidt = false;
@@ -5279,16 +4831,16 @@ export default defineComponent({
};
//编辑面授课
const handleEdit = async (itm, type) => {
// auditDescription
let obj={
offcourseId:itm.offcourseId,
pageNo:1,
pageSize:1,
type:2
}
api2.auditList(obj).then((res)=>{
state.auditDescription =res.data.data.rows[0].description;
})
// auditDescription
let obj = {
offcourseId: itm.offcourseId,
pageNo: 1,
pageSize: 1,
type: 2,
};
api2.auditList(obj).then((res) => {
state.auditDescription = res.data.data.rows[0].description;
});
console.log(45555);
console.log(itm);
@@ -5297,50 +4849,51 @@ export default defineComponent({
}
state.offcourseId = itm.offcourseId;
const item = await detail({
offcourseId: Number(state.offcourseId),
}).then((res) => {
if (res.data.code === 200) return res.data.data;
});
// const item = await detail({
// offcourseId: Number(state.offcourseId),
// }).then((res) => {
// if (res.data.code === 200) return res.data.data;
// });
state.statusJuJue = Number(item.auditStatus) === -1 ? 1 : 0;
// state.statusJuJue = Number(item.auditStatus) === -1 ? 1 : 0;
if (Number(item.auditStatus) === 2 && Number(item.status) === 1) {
state.statusTingQi = 1;
}
if (Number(item.auditStatus) === 2 && Number(item.status) === 0) {
state.statusTingQi = 0;
}
// if (Number(item.auditStatus) === 2 && Number(item.status) === 1) {
// state.statusTingQi = 1;
// }
// if (Number(item.auditStatus) === 2 && Number(item.status) === 0) {
// state.statusTingQi = 0;
// }
state.qdms_inputV1 = item.name;
// state.imageUrl = item.picUrl;
state.feng_mian_1 = item.picUrl;
state.qdms_inputV2 = item.targetUser;
state.qdms_inputV3 = item.meaning;
state.fen_lei = String(item.categoryId);
state.chang_jin = String(item.sceneId);
state.tags_val = item.tips ? item.tips.split(",") : [];
//state.qdms_inputV5 = item.teacherId;
state.teacher = item.teacher;
state.teacherId = item.teacherId;
state.qdms_inputV6 = item.intro;
state.member = { value: item.teacherId, name: item.teacher };
if (item.attach == "") {
state.imgList = [];
} else {
if (item.attach.indexOf(",")) {
const arr = item.attach.split(",");
arr.forEach((item) => {
state.imgList.push({ img: item });
});
} else {
state.imgList = [{ img: item.attach }];
}
}
// state.qdms_inputV1 = item.name;
// // state.imageUrl = item.picUrl;
// state.feng_mian_1 = item.picUrl;
// state.qdms_inputV2 = item.targetUser;
// state.qdms_inputV3 = item.meaning;
// state.fen_lei = String(item.categoryId);
// state.chang_jin = String(item.sceneId);
// state.tags_val = item.tips ? item.tips.split(",") : [];
// //state.qdms_inputV5 = item.teacherId;
// state.teacher = item.teacher;
// state.teacherId = item.teacherId;
// state.qdms_inputV6 = item.intro;
// state.member = { value: item.teacherId, name: item.teacher };
// if (item.attach == "") {
// state.imgList = [];
// } else {
// if (item.attach.indexOf(",")) {
// const arr = item.attach.split(",");
// arr.forEach((item) => {
// state.imgList.push({ img: item });
// });
// } else {
// state.imgList = [{ img: item.attach }];
// }
// }
valueHtml.value = item.outline;
// valueHtml.value = item.outline;
state.ft_hs = true;
// state.ft_hs = true;
CourseModalRef.value.visibleOpen(state.offcourseId);
state.ft_eidt = true;
getTea();
};
@@ -5701,8 +5254,11 @@ export default defineComponent({
console.log("执行");
getTableDate();
};
return {
...toRefs(state),
CourseModalRef,
getdateToDateFn,
moment,
getdateToTimeFn,