hz/fe-manage
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git synced 2025-12-18 23:36:46 +08:00
Code Issues Packages Projects Releases Wiki Activity

课程带富文本的弹窗抽离

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

586
src/views/courselibrary/CoursewareManage.vue
View File

@@ -269,465 +269,10 @@
</a-modal> </a-modal>
<!-- 选择线上还是面授课弹窗 --> <!-- 选择线上还是面授课弹窗 -->
<!-- 确定新建面授课弹窗 --> <!-- 确定新建面授课弹窗 -->
<a-modal <CourseModal
v-model:visible="ft_hs" ref="CourseModalRef"
title="Title" @visibleClose="closeOnlineCoursevisible"
@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>
<!-- 查看面授课弹框 start --> <!-- 查看面授课弹框 start -->
<a-modal <a-modal
v-model:visible="lookMs" v-model:visible="lookMs"
@@ -3008,7 +2553,7 @@
<div class="btnText" @click="delete_exit1">取消</div> <div class="btnText" @click="delete_exit1">取消</div>
</div> </div>
<div class="del_btn btn2"> <div class="del_btn btn2">
<div class="btnText" @click="handleDeleteExit">确定</div> <div class="btnText" @click="handleDeleteExit">确定</div>
</div> </div>
</div> </div>
</div> </div>
@@ -3137,6 +2682,7 @@ import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import ProjectManager from "@/components/project/ProjectManagerNew"; import ProjectManager from "@/components/project/ProjectManagerNew";
import SeeModal from "./components/seeModal.vue"; import SeeModal from "./components/seeModal.vue";
import CourseModal from "./courseModal.vue";
import * as moment from "moment"; import * as moment from "moment";
//列表表格 //列表表格
@@ -3643,6 +3189,7 @@ export default defineComponent({
Editor, Editor,
Toolbar, Toolbar,
SeeModal, SeeModal,
CourseModal,
// StuAdd, // StuAdd,
ProjectManager, ProjectManager,
ProjOwnerShip, ProjOwnerShip,
@@ -3655,6 +3202,8 @@ export default defineComponent({
addOnlineCourse, addOnlineCourse,
}, },
setup() { setup() {
const CourseModalRef = ref(null);
const state = reactive({ const state = reactive({
shipType: 1, shipType: 1,
addLoading: false, addLoading: false,
@@ -3662,7 +3211,7 @@ export default defineComponent({
teacherId: null, teacherId: null,
teacher: null, teacher: null,
selectedRowKeys7: [], selectedRowKeys7: [],
auditDescription:"", auditDescription: "",
isEdit: 0, isEdit: 0,
member: { name: "", value: "" }, member: { name: "", value: "" },
//列表表格 //列表表格
@@ -4640,7 +4189,9 @@ export default defineComponent({
const createft = () => { const createft = () => {
if (state.bs_hs == false && state.valueE1 != "") { if (state.bs_hs == false && state.valueE1 != "") {
state.of_hs = false; state.of_hs = false;
state.ft_hs = true; // state.ft_hs = true;
CourseModalRef.value.visibleOpen(null);
state.valueE1 = ""; state.valueE1 = "";
state.teacher = ""; state.teacher = "";
state.teacherName = ""; state.teacherName = "";
@@ -4663,12 +4214,13 @@ export default defineComponent({
return count ? false : true; return count ? false : true;
}; };
const ft_exit_0 = () => { const ft_exit_0 = () => {
state.ft_hs = false; // state.ft_hs = false;
CourseModalRef.value.visibleClose();
}; };
const ft_exit_1 = () => { const ft_exit_1 = () => {
state.ft_hs = false; // state.ft_hs = false;
router.go(0); CourseModalRef.value.visibleClose();
// router.go(0);
}; };
const ft_exit = () => { const ft_exit = () => {
state.ft_eidt = false; state.ft_eidt = false;
@@ -5279,16 +4831,16 @@ export default defineComponent({
}; };
//编辑面授课 //编辑面授课
const handleEdit = async (itm, type) => { const handleEdit = async (itm, type) => {
// auditDescription // auditDescription
let obj={ let obj = {
offcourseId:itm.offcourseId, offcourseId: itm.offcourseId,
pageNo:1, pageNo: 1,
pageSize:1, pageSize: 1,
type:2 type: 2,
} };
api2.auditList(obj).then((res)=>{ api2.auditList(obj).then((res) => {
state.auditDescription =res.data.data.rows[0].description; state.auditDescription = res.data.data.rows[0].description;
}) });
console.log(45555); console.log(45555);
console.log(itm); console.log(itm);
@@ -5297,50 +4849,51 @@ export default defineComponent({
} }
state.offcourseId = itm.offcourseId; state.offcourseId = itm.offcourseId;
const item = await detail({ // const item = await detail({
offcourseId: Number(state.offcourseId), // offcourseId: Number(state.offcourseId),
}).then((res) => { // }).then((res) => {
if (res.data.code === 200) return res.data.data; // 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) { // if (Number(item.auditStatus) === 2 && Number(item.status) === 1) {
state.statusTingQi = 1; // state.statusTingQi = 1;
} // }
if (Number(item.auditStatus) === 2 && Number(item.status) === 0) { // if (Number(item.auditStatus) === 2 && Number(item.status) === 0) {
state.statusTingQi = 0; // state.statusTingQi = 0;
} // }
state.qdms_inputV1 = item.name; // state.qdms_inputV1 = item.name;
// state.imageUrl = item.picUrl; // // state.imageUrl = item.picUrl;
state.feng_mian_1 = item.picUrl; // state.feng_mian_1 = item.picUrl;
state.qdms_inputV2 = item.targetUser; // state.qdms_inputV2 = item.targetUser;
state.qdms_inputV3 = item.meaning; // state.qdms_inputV3 = item.meaning;
state.fen_lei = String(item.categoryId); // state.fen_lei = String(item.categoryId);
state.chang_jin = String(item.sceneId); // state.chang_jin = String(item.sceneId);
state.tags_val = item.tips ? item.tips.split(",") : []; // state.tags_val = item.tips ? item.tips.split(",") : [];
//state.qdms_inputV5 = item.teacherId; // //state.qdms_inputV5 = item.teacherId;
state.teacher = item.teacher; // state.teacher = item.teacher;
state.teacherId = item.teacherId; // state.teacherId = item.teacherId;
state.qdms_inputV6 = item.intro; // state.qdms_inputV6 = item.intro;
state.member = { value: item.teacherId, name: item.teacher }; // state.member = { value: item.teacherId, name: item.teacher };
if (item.attach == "") { // if (item.attach == "") {
state.imgList = []; // state.imgList = [];
} else { // } else {
if (item.attach.indexOf(",")) { // if (item.attach.indexOf(",")) {
const arr = item.attach.split(","); // const arr = item.attach.split(",");
arr.forEach((item) => { // arr.forEach((item) => {
state.imgList.push({ img: item }); // state.imgList.push({ img: item });
}); // });
} else { // } else {
state.imgList = [{ img: item.attach }]; // 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; state.ft_eidt = true;
getTea(); getTea();
}; };
@@ -5701,8 +5254,11 @@ export default defineComponent({
console.log("执行"); console.log("执行");
getTableDate(); getTableDate();
}; };
return { return {
...toRefs(state), ...toRefs(state),
CourseModalRef,
getdateToDateFn, getdateToDateFn,
moment, moment,
getdateToTimeFn, getdateToTimeFn,

8356
src/views/courselibrary/CoursewareManage_Old.vue Normal file
View File

File diff suppressed because it is too large Load Diff

7982
src/views/courselibrary/courseModal.vue
View File

File diff suppressed because it is too large Load Diff