fe-manage/src/views/courselibrary/components/seeModal.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">
										{{ filterTxt(detail.name) }}
									</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 :src="detail.picUrl" alt="img" style="width: 100px; height: 100px" />
							</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">
										{{ filterTxt(detail.targetUser) }}
									</div>
								</div>
							</div>
							<div v-if="detail.meaning" class="mbl_items2">
								<div class="item_nam">
									<span style="margin-right: 14px">课程价值：</span>
								</div>
								<div class="item_inp">
									<div class="i1_input">
										{{ filterTxt(detail.meaning) }}
									</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">
										{{ filterClassTxt(detail.categoryId) }}
									</div>
								</div>
							</div>
							<div class="mbl_items" v-if="detail.sceneContent">
								<div class="item_nam">
									<span style="margin-right: 14px">场景：</span>
								</div>
								<div class="item_inp">
									<div class="select i7_input">
										{{ detail.sceneContent }}
									</div>
								</div>
							</div>
							<div class="mbl_items" v-if="detail.tips">
								<div class="item_nam">
									<span style="margin-right: 14px">内容标签：</span>
								</div>
								<div class="item_inp">
									{{ filterTxt(detail.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">
										{{ filterTxt(detail.teacher) }}
									</div>
								</div>
							</div>
							<div class="mbl_items2" v-if="detail.intro">
								<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="i10_textarea">
										{{ filterTxt(detail.intro) }}
									</div>
								</div>
							</div>
							<div class="mbl_items12">
								<div class="i12_box1" style="position: relative" v-for="(item, index) in detail.attach" :key="index">
									<div class="file_img">
										<img v-if="
	item.indexOf('jpg') !== -1 ||
	item.indexOf('jpeg') !== -1 ||
	item.indexOf('png') !== -1
" src="@/assets/images/coursewareManage/pngpic.png" />
										<div v-else>
											<img v-if="item.indexOf('doc') !== -1" src="@/assets/images/coursewareManage/docpic.png" />
											<div v-else>
												<img v-if="item.indexOf('xls') !== -1" src="@/assets/images/coursewareManage/xlspic.png" />
												<div v-else>
													<img v-if="item.indexOf('ppt') !== -1" src="@/assets/images/coursewareManage/pptpic.png" />
													<div v-else>
														<img v-if="item.indexOf('pdf') !== -1" src="@/assets/images/coursewareManage/pdfpic.png" />
														<div v-else>
															<img v-if="item.indexOf('zip') !== -1"
																src="@/assets/images/coursewareManage/zippic.png" />
															<img v-else src="@/assets/images/coursewareManage/docpic.png" />
														</div>
													</div>
												</div>
											</div>
										</div>
									</div>
									<div class="file_detail">
										<div class="file_name">
											<!-- http://111.231.196.214:12016/7.231.196.214:12016/7-1670486854017.jpg -->
											<span style="
                          color: #6f6f6f;
                          width: 200px;
                          display: block;
                          overflow: hidden;
                          white-space: nowrap;
                          text-overflow: ellipsis;
                          position: absolute;
                          top: 4px;
                          left: 72px;
                        ">
												{{
		item.indexOf("-") !== -1
			? item.slice(
				item.lastIndexOf("/") + 1,
				item.lastIndexOf("-")
			) + item.slice(item.lastIndexOf("."))
			: item
}}
											</span>
										</div>

										<div class="file_updata">
											<div class="updatabox">
												<div class="updatacolor"></div>
												<div class="updataxq" style="right: -62px">
													上传完成
												</div>
											</div>
											<div class="upjd">
												<span style="margin: auto 5px">100%</span>
											</div>
										</div>
									</div>
									<a :href="item.indexOf('http') !== -1 ? item : locationHref + item" style="margin-left: 5px">下载</a>
								</div>
							</div>
						</div>
					</div>
					<div class="m_footer" v-if="detail.outline !== '<p><br></p>'">
						<div class="fotnam">
							<span>课程大纲</span>
						</div>
						<div class="fotarea">
							<div style="border: 1px solid #ccc">
								<div v-html="detail.outline" />
							</div>
						</div>
					</div>
					<div class="m_btn">
						<div class="btn btn6" @click="handleCancel">
							<div class="btnText">确定</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</a-modal>
</template>
<script>
import { reactive, toRefs, defineComponent, ref } from "vue";
import * as api1 from "../../../api/index1";

export default defineComponent({
	props: {
		visible: {
			type: Boolean,
			default: false,
		},
		detail: {
			type: Object,
			default: () => { },
		},
	},
	setup(props, { emit }) {
		console.log("props", props);
		const state = reactive({
			imgList: [],
			options2222: [
				{
					title: '领导力',
					value: '100',
					children: [
						{
							title: '管理业务',
							value: '1001',
						},
						{
							title: '管理团队',
							value: '1002',
						},
						{
							title: '管理自我',
							value: '1003',
						},
					],
				},
				{
					title: '专业力',
					value: '200',
					children: [
						{
							title: '研发',
							value: '2001',
						},
						{
							title: '系统和解决方案',
							value: '2002',
						},
						{
							title: '生产技术与制造',
							value: '2003',
						},
						{
							title: '供应链',
							value: '2004',
						},
						{
							title: '营销',
							value: '2005',
						},
						{
							title: '品质',
							value: '2006',
						},
						{
							title: '专业职能',
							value: '2007',
							children: [
								{
									title: '战略与企划',
									value: '200701',
								},
								{
									title: '流程管理',
									value: '200702',
								},
								{
									title: '业绩管理',
									value: '200703',
								},
								{
									title: '项目管理',
									value: '200704',
								},
								{
									title: '信息技术',
									value: '200705',
								},
								{
									title: '环境与安全',
									value: '200706',
								},
								{
									title: '人力资源',
									value: '200707',
								},
								{
									title: '企业文化',
									value: '200708',
								},
								{
									title: '品牌',
									value: '200709',
								},
								{
									title: '财务',
									value: '200710',
								},
								{
									title: '法务',
									value: '200711',
								},
								{
									title: '风险控制',
									value: '200712',
								},
								{
									title: '行政',
									value: '200713'
								},
							]
						},
						{
							title: '医工',
							value: '2008',
						}
					],
				},
				{
					title: '通用力',
					value: '300',
					children: [
						{
							title: '职业操守与道德',
							value: '3001',
						},
						{
							title: '职业素养与技能',
							value: '3002',
						},
						{
							title: '规章制度',
							value: '3003',
						},
					],
				}
			],
			ceshi: "https://u-pre.boe.com/upload/测试下载ppt2-1671002026755.pptx",
			ceshi2: "http://111.231.196.214:12016/测试下载ppt3-1671001683026.pptx",
			locationHref: location.href.indexOf('http://') !== -1 ? 'http://111.231.196.214:12016/' : location.href.slice(0, location.href.indexOf('/m')) + '/upload/'
		});

		// item.slice(
		//                             item.lastIndexOf("/") + 1,
		//                             item.indexOf("-")
		//                           ) + item.slice(item.lastIndexOf("."))
		const filterTxt = (txt) => {
			if (txt) {
				return txt;
			} else {
				return "-";
			}
		};
		const filterClassTxt = (txt) => {
			let str = "-";
			if (txt) {
				for (let i = 0; i < options2.value.length; i++) {
					for (let j = 0; j < options2.value[i].children.length; j++) {
						str = changeTreeSelectValue(String(txt))
						// if (String(options2.value[i].children[j].value) === String(txt)) {
						// 	str = options2.value[i].children[j].title;
						// }
					}
				}
			}
			return str;
		};

		// 格式化树型结构选择数据
		const changeTreeSelectValue = (values) => {
			let data = state.options2222;
			console.log(values, data)
			let str = ''
			for (let i = 0; i < data.length; i++) {
				if (data[i].value == values) {
					str = data[i].title
				} else {
					for (let j = 0; j < data[i].children.length; j++) {
						if (data[i].children[j].value == values) {
							str = data[i].title + '/' + data[i].children[j].title
						} else {
							if (data[i].children[j].children) {
								for (let k = 0; k < data[i].children[j].children.length; k++) {
									if (data[i].children[j].children[k].value == values) {
										str = data[i].title + '/' + data[i].children[j].title + '/' + data[i].children[j].children[k].title
									}
								}
							}
						}
					}
				}
			}
			console.log('str-str-str-str', str)
			state.fen_lei1 = str;
			return str;
		}

		const filterSenceTxt = (txt) => {
			let str = "-";
			if (txt) {
				options3.value.forEach((item) => {
					if (item.value === String(txt)) {
						str = item.label;
					}
				});
			}
			return str;
		};
		const handleCancel = () => {
			emit("cancel");
		};

		//获取分类、场景-----------字典配置-------------------------------
		const options2 = ref([]);
		const options3 = ref([]);
		const getDictList = (param) => {
			let obj = {
				pageNo: 1,
				pageSize: 20,
				setCode: param,
			};
			api1
				.getDict(obj)
				.then((res) => {
					console.log("获取字典成功", res);
					if (res.data.code === 200) {
						if (param === "faceclassClass") {
							let arr = res.data.data.rows;
							let newArr = [];
							arr.forEach((item) => {
								newArr.push({
									value: item.dictCode,
									label: item.dictName,
								});
							});
							options2.value = state.options2222;
						}
						if (param === "faceclassScene") {
							let arr = res.data.data.rows;
							let newArr = [];
							arr.forEach((item) => {
								newArr.push({
									value: item.dictCode,
									label: item.dictName,
								});
							});
							options3.value = newArr;
						}
					}
				})
				.catch((err) => {
					console.log("获取字典失败", err);
				});
		};
		getDictList("faceclassClass");
		getDictList("faceclassScene");
		//获取分类、场景----------------字典配置---------------------------

		return {
			...toRefs(state),
			filterTxt,
			filterClassTxt,
			filterSenceTxt,
			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: #4ea6ff;
													border-radius: 3px;
												}

												.updataxq {
													position: absolute;
													right: -62px;
													top: -30px;
													color: #57c887;
												}

												.updataxq2 {
													position: absolute;
													right: -62px;
													top: -30px;
													color: #ff7474;
												}

												.updataxq3 {
													position: absolute;
													right: -62px;
													top: -30px;
													color: #4ea6ff;
												}
											}
										}
									}

									.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 {
							width: calc(100% - 150px);
							position: relative;

							img {
								max-width: 100%;
							}

							.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>