mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git
synced 2025-12-15 13:56:45 +08:00
746 lines
22 KiB
Vue
746 lines
22 KiB
Vue
<!-- 课件管理页面 -->
|
||
<template>
|
||
<!-- 预览弹窗 -->
|
||
<a-modal
|
||
:visible="visible"
|
||
title="查看"
|
||
:footer="null"
|
||
:closable="false"
|
||
wrapClassName="modalStyle lookCourseModal"
|
||
width="80%"
|
||
@cancel="handleCancel"
|
||
@ok="handleCancel"
|
||
>
|
||
<div class="modalHeader">
|
||
<div class="headerLeft">
|
||
<img
|
||
style="width: 17px; height: 18px; margin-right: 8px"
|
||
src="@/assets/images/basicinfo/add.png"
|
||
/>
|
||
<span class="headerLeftText">预览</span>
|
||
</div>
|
||
<div style="margin-right: 57px; cursor: pointer">
|
||
<img
|
||
@click="handleCancel"
|
||
style="width: 22px; height: 22px"
|
||
src="@/assets/images/basicinfo/close22.png"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div class="modalMain">
|
||
<div class="faceteach">
|
||
<div class="ft_main">
|
||
<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="img"
|
||
/>
|
||
</div>
|
||
<span style="margin-right: 14px">课程名称：</span>
|
||
</div>
|
||
<div class="item_inp">
|
||
<div class="i1_input">
|
||
<!-- {{ faceDetailObj !== null ? faceDetailObj.name : "" }} -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- <div class="i2_cz">
|
||
<div class="i2_top">
|
||
<div
|
||
class="i2_right"
|
||
@click="hideShow"
|
||
style="cursor: pointer"
|
||
>
|
||
<div class="b_icon"></div>
|
||
</div>
|
||
</div>
|
||
</div> -->
|
||
<div class="mbl_items2">
|
||
<div class="item_nam">
|
||
<div class="asterisk_icon">
|
||
<img
|
||
src="@/assets/images/coursewareManage/asterisk.png"
|
||
alt="img"
|
||
/>
|
||
</div>
|
||
<span style="margin-right: 14px">封面图：</span>
|
||
</div>
|
||
<img
|
||
ref="heroImg"
|
||
alt="img"
|
||
style="width: 100px; height: 100px"
|
||
/>
|
||
<!-- <div class="item_inp"></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="img"
|
||
/>
|
||
</div>
|
||
<span style="margin-right: 14px">目标人群：</span>
|
||
</div>
|
||
<div class="item_inp">
|
||
<div class="i1_input">
|
||
<!-- {{
|
||
faceDetailObj !== null ? faceDetailObj.targetUser : ""
|
||
}} -->
|
||
</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">
|
||
<!-- {{ faceDetailObj !== null ? faceDetailObj.meaning : "" }} -->
|
||
</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">{{ faceDetailObj !== null ? faceDetailObj.projectId : "" }}</div>
|
||
</div>
|
||
</div> -->
|
||
<div class="mbl_items">
|
||
<div class="item_nam">
|
||
<div class="asterisk_icon">
|
||
<img
|
||
src="@/assets/images/coursewareManage/asterisk.png"
|
||
alt="img"
|
||
/>
|
||
</div>
|
||
<span style="margin-right: 14px">内容分类：</span>
|
||
</div>
|
||
<div class="item_inp">
|
||
<!-- <div class="select i6_input">{{ faceDetailObj !== null ? faceDetailObj.categoryId : "" }}</div> -->
|
||
<div class="select i6_input">
|
||
<!-- {{
|
||
faceDetailObj !== null
|
||
? contentList11.find(
|
||
(e) => e.dictCode == faceDetailObj.categoryId
|
||
)?.dictValue
|
||
: ""
|
||
}} -->
|
||
</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">{{ faceDetailObj !== null ? faceDetailObj.sceneId : "" }}</div> -->
|
||
<div class="select i7_input">
|
||
<!-- {{
|
||
faceDetailObj !== null
|
||
? sceneist11.find(
|
||
(e) => e.dictCode == faceDetailObj.sceneId
|
||
)?.dictValue
|
||
: ""
|
||
}} -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="mbl_items">
|
||
<div class="item_nam">
|
||
<span style="margin-right: 14px">内容标签：</span>
|
||
</div>
|
||
<div class="item_inp">
|
||
<!-- {{ faceDetailObj !== null ? faceDetailObj.tips : "" }} -->
|
||
</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>
|
||
<span style="margin-right: 14px">授课教师：</span>
|
||
</div>
|
||
<div class="item_inp">
|
||
<div class="i1_input">
|
||
<!-- {{ faceDetailObj !== null ? faceDetailObj.teacher : "" }} -->
|
||
</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">
|
||
<!-- {{ faceDetailObj !== null ? faceDetailObj.intro : "" }} -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="mbl_items">
|
||
<!-- <div v-if="attachMap.length > 0" class="item_nam">
|
||
<span style="margin-right: 10px">附件</span>
|
||
</div> -->
|
||
<!-- <div
|
||
class="item_inp"
|
||
v-for="(value, index) in attachMap"
|
||
:key="index"
|
||
>
|
||
<a>
|
||
{{
|
||
[
|
||
"附件一",
|
||
"附件二",
|
||
"附件三",
|
||
"附件四",
|
||
"附件五",
|
||
"附件六",
|
||
][index]
|
||
}}
|
||
</a>
|
||
<a style="margin-left: 120px" :src="value" :href="value">
|
||
查看
|
||
</a>
|
||
</div>-->
|
||
<!-- <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 class="mbl_items12">
|
||
<div
|
||
class="i12_box1"
|
||
v-for="(item, index) in imgList"
|
||
:key="index"
|
||
>
|
||
<div class="file_img">
|
||
<img :src="item.img" />
|
||
</div>
|
||
<div class="file_detail">
|
||
<div class="file_name">
|
||
<span style="color: #6f6f6f">{{ item.name }}</span>
|
||
</div>
|
||
|
||
<div class="file_updata">
|
||
<div class="updatabox">
|
||
<div class="updatacolor"></div>
|
||
<div class="updataxq">上传完成</div>
|
||
</div>
|
||
<div class="upjd">
|
||
<span style="margin: auto 5px">100%</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- <div class="file_operation">
|
||
<div class="fobox">
|
||
<span style="color: #4ea6ff" @click="handleDel(index)">
|
||
删除
|
||
</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;width:900px;height: 300px;" :defaultConfig="toolbarConfig"
|
||
:mode="mode" /> -->
|
||
<!-- <Editor
|
||
@focus="onEditorFocus"
|
||
style="
|
||
border-bottom: 1px solid #ccc;
|
||
width: 900px;
|
||
height: 300px;
|
||
"
|
||
v-model="valueHtml"
|
||
:defaultConfig="editorConfig"
|
||
:mode="mode"
|
||
@onCreated="handleCreated"
|
||
/> -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="m_btn">
|
||
<!-- <div class="btn btn5" @click="handleCancel">
|
||
<div class="btnText">取消</div>
|
||
</div> -->
|
||
<div class="btn btn6" @click="handleCancel">
|
||
<div class="btnText">确定</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</a-modal>
|
||
</template>
|
||
<script>
|
||
import { reactive, toRefs, defineComponent, toRef, watch } from "vue";
|
||
|
||
export default defineComponent({
|
||
props: {
|
||
visible: {
|
||
type: Boolean,
|
||
default: false,
|
||
},
|
||
detail: {
|
||
type: Object,
|
||
default: () => {},
|
||
},
|
||
},
|
||
setup(props, { emit }) {
|
||
console.log(props);
|
||
const detailWatch = toRef(props, "detail");
|
||
const state = reactive({
|
||
imgList: [],
|
||
});
|
||
watch(
|
||
() => detailWatch,
|
||
(newValue) => {
|
||
console.log(78787878);
|
||
console.log(newValue);
|
||
},
|
||
{ deep: true }
|
||
);
|
||
|
||
const filterTxt = (txt) => {
|
||
if (txt) {
|
||
return txt;
|
||
} else {
|
||
return "-";
|
||
}
|
||
};
|
||
const handleCancel = () => {
|
||
emit("cancel");
|
||
};
|
||
|
||
return {
|
||
...toRefs(state),
|
||
filterTxt,
|
||
handleCancel,
|
||
};
|
||
},
|
||
});
|
||
</script>
|
||
<style lang="scss">
|
||
.lookCourseModal {
|
||
.ant-modal {
|
||
.ant-modal-content {
|
||
// width:1358px !important;
|
||
.ant-modal-body {
|
||
.modalHeader {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.headerLeft {
|
||
margin-left: 27px;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.headerLeftText {
|
||
font-size: 16px;
|
||
font-weight: 400;
|
||
color: #000000;
|
||
line-height: 36px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.modalMain {
|
||
.m_title {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.m_body {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
|
||
.mb_left {
|
||
width: 50%;
|
||
|
||
.mbl_items {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
margin-bottom: 10px;
|
||
|
||
.item_nam {
|
||
width: 100px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
white-space: nowrap;
|
||
|
||
.asterisk_icon {
|
||
width: 10px;
|
||
height: 10px;
|
||
margin-right: 5px;
|
||
margin-top: -15px;
|
||
}
|
||
}
|
||
|
||
.item_inp {
|
||
flex: 1;
|
||
position: relative;
|
||
|
||
.inp_num {
|
||
position: absolute;
|
||
left: 398px;
|
||
top: 10px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.mbl_items2 {
|
||
display: flex;
|
||
align-items: start;
|
||
margin-top: 10px;
|
||
margin-bottom: 10px;
|
||
|
||
.item_nam {
|
||
width: 100px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
white-space: nowrap;
|
||
|
||
.asterisk_icon {
|
||
width: 10px;
|
||
height: 10px;
|
||
margin-right: 5px;
|
||
margin-top: -15px;
|
||
}
|
||
}
|
||
|
||
.item_inp {
|
||
flex: 1;
|
||
|
||
.i_upload_img {
|
||
width: 100px;
|
||
height: 100px;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
.i_upload {
|
||
width: 100px;
|
||
height: 100px;
|
||
border: 1px solid #4ea6ff;
|
||
border-radius: 8px;
|
||
text-align: center;
|
||
align-items: center;
|
||
cursor: pointer;
|
||
|
||
.addimg {
|
||
position: relative;
|
||
|
||
.heng {
|
||
position: absolute;
|
||
top: 50px;
|
||
left: 25px;
|
||
width: 50px;
|
||
border: 1px solid #4ea6ff;
|
||
}
|
||
|
||
.shu {
|
||
position: absolute;
|
||
top: 25px;
|
||
left: 50px;
|
||
height: 50px;
|
||
border: 1px solid #4ea6ff;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.i2_cz {
|
||
width: 440px;
|
||
margin-left: 100px;
|
||
|
||
.i2_top {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
}
|
||
|
||
.i8_bottom {
|
||
display: flex;
|
||
width: 440px;
|
||
margin-left: 100px;
|
||
}
|
||
}
|
||
|
||
.mb_right {
|
||
width: 50%;
|
||
|
||
.mbl_items {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
justify-content: flex-end;
|
||
margin-bottom: 10px;
|
||
|
||
.item_nam {
|
||
width: 100px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
white-space: nowrap;
|
||
|
||
.asterisk_icon {
|
||
width: 10px;
|
||
height: 10px;
|
||
margin-top: -15px;
|
||
margin-right: 5px;
|
||
}
|
||
}
|
||
|
||
.item_inp {
|
||
flex: 1;
|
||
}
|
||
|
||
.accessory {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.accessory_icon {
|
||
width: 16px;
|
||
height: 16px;
|
||
margin-top: -8px;
|
||
margin-right: 5px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.mbl_items2 {
|
||
display: flex;
|
||
align-items: start;
|
||
margin-bottom: 10px;
|
||
|
||
.item_nam {
|
||
width: 100px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
white-space: nowrap;
|
||
|
||
.asterisk_icon {
|
||
width: 10px;
|
||
height: 10px;
|
||
margin-right: 5px;
|
||
margin-top: -15px;
|
||
}
|
||
}
|
||
|
||
.item_inp {
|
||
flex: 1;
|
||
position: relative;
|
||
|
||
.inp_num {
|
||
position: absolute;
|
||
left: 395px;
|
||
bottom: 10px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.mbl_items12 {
|
||
width: 440px;
|
||
margin-left: 100px;
|
||
|
||
.i12_box1 {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 17px 0px 17px 21px;
|
||
border: 1px solid #eff4fc;
|
||
border-radius: 8px;
|
||
margin-bottom: 10px;
|
||
|
||
.file_img {
|
||
width: 27px;
|
||
height: 32px;
|
||
// background-image: url(@/assets/images/coursewareManage/imgs.png);
|
||
margin-right: 22px;
|
||
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.file_detail {
|
||
width: 250px;
|
||
margin-right: 21px;
|
||
|
||
.file_updata {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.updatabox {
|
||
position: relative;
|
||
width: 230px;
|
||
height: 5px;
|
||
background-color: rgba(192, 192, 192, 0.25);
|
||
border-radius: 3px;
|
||
|
||
.updatacolor {
|
||
position: absolute;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 5px;
|
||
background-color: #57c887;
|
||
border-radius: 3px;
|
||
}
|
||
|
||
.updatacolor2 {
|
||
position: absolute;
|
||
left: 0;
|
||
width: 80%;
|
||
height: 5px;
|
||
background-color: #ff7474;
|
||
border-radius: 3px;
|
||
}
|
||
|
||
.updatacolor3 {
|
||
position: absolute;
|
||
left: 0;
|
||
width: 60%;
|
||
height: 5px;
|
||
background-color: #388be1;
|
||
border-radius: 3px;
|
||
}
|
||
|
||
.updataxq {
|
||
position: absolute;
|
||
right: 2px;
|
||
top: -30px;
|
||
color: #57c887;
|
||
}
|
||
|
||
.updataxq2 {
|
||
position: absolute;
|
||
right: 2px;
|
||
top: -30px;
|
||
color: #ff7474;
|
||
}
|
||
|
||
.updataxq3 {
|
||
position: absolute;
|
||
right: 2px;
|
||
top: -30px;
|
||
color: #388be1;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.file_operation {
|
||
display: flex;
|
||
|
||
.fobox {
|
||
margin-right: 5px;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.m_footer {
|
||
display: flex;
|
||
margin: 20px 0;
|
||
|
||
.fotnam {
|
||
width: 100px;
|
||
display: flex;
|
||
justify-content: end;
|
||
padding-right: 15px;
|
||
}
|
||
|
||
.fotarea {
|
||
position: relative;
|
||
|
||
.fuwenben {
|
||
width: 90%;
|
||
height: 20px;
|
||
background-color: rgb(95, 95, 95);
|
||
position: absolute;
|
||
left: 50%;
|
||
transform: translate(-50%, 0);
|
||
top: 3px;
|
||
z-index: 9999;
|
||
}
|
||
}
|
||
}
|
||
|
||
.m_btn {
|
||
width: 100%;
|
||
margin-top: 25px;
|
||
margin-bottom: 20px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-content: center;
|
||
|
||
.btn {
|
||
width: 100px;
|
||
height: 40px;
|
||
background: rgba(64, 158, 255, 0);
|
||
border-radius: 8px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-right: 14px;
|
||
flex-shrink: 0;
|
||
cursor: pointer;
|
||
|
||
.btnText {
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
line-height: 40px;
|
||
}
|
||
}
|
||
|
||
.btn5 {
|
||
border: 1px solid rgba(64, 158, 255, 1);
|
||
color: #4ea6ff;
|
||
}
|
||
|
||
.btn6 {
|
||
background-color: #4ea6ff;
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|