course_resource/src/components/dialog/selectTeachingClassDialog.vue

<template>
	<div class="opkDialogHeader">
		<el-dialog v-model="show" :show-close="false">
			<template #header>
				<div class="b_head">
					<span>添加班级</span>
					<svg
						@click="close()"
						t="1748587270371"
						class="icon"
						viewBox="0 0 1024 1024"
						version="1.1"
						xmlns="http://www.w3.org/2000/svg"
						p-id="5023"
						width="200"
						height="200"
					>
						<path
							d="M0 0h1024v1024H0z"
							fill="#FF0033"
							fill-opacity="0"
							p-id="5024"
						></path>
						<path
							d="M240.448 168l2.346667 2.154667 289.92 289.941333 279.253333-279.253333a42.666667 42.666667 0 0 1 62.506667 58.026666l-2.133334 2.346667-279.296 279.210667 279.274667 279.253333a42.666667 42.666667 0 0 1-58.005333 62.528l-2.346667-2.176-279.253333-279.253333-289.92 289.962666a42.666667 42.666667 0 0 1-62.506667-58.005333l2.154667-2.346667 289.941333-289.962666-289.92-289.92a42.666667 42.666667 0 0 1 57.984-62.506667z"
							fill="#fff"
							p-id="5025"
						></path>
					</svg>
				</div>
			</template>
			<div class="b_main" v-loading="loading">
					<template v-for="item in classList">
						<div
							class="b_m_classItem"
							:class="{ b_m_classItem_active: selectId == item.id }"
							:key="item.id"
							v-if="item.name"
						>
						<!-- @click="
								selectId == item.id ? (selectId = '') : (selectId = item.id)
							" -->
							<div>{{ item.name }}</div>
							<span v-if="item.studentNum >= 0"
								>{{ item.studentNum }} 名学生
							</span>
						</div>
					</template>

					<div
						class="b_m_classItem"
						@click="editClass"
					>
						<div>
							<span>+</span>
							<svg
								t="1756867649445"
								class="icon"
								viewBox="0 0 1024 1024"
								version="1.1"
								xmlns="http://www.w3.org/2000/svg"
								p-id="10274"
								width="200"
								height="200"
							>
								<path
									d="M417.664 921.6l317.184-824.32h-63.616L353.152 921.6z"
									fill="#999999"
									p-id="10275"
								></path>
							</svg>
							<span>-</span>
						</div>
						<div>添加或修改班级</div>
					</div>
				</div>
		</el-dialog>
		
	</div>
	<addClassDialog
			ref="addClassDialogRef"
			:courseDetail="courseDetail"
			@success="getCourseList"
		/>
</template>

<script setup>
import { ref } from "vue";
import { userInfoStore } from "../../stores/counter";
import addClassDialog from "./addClassDialog.vue";
const emit = defineEmits(["success", "changeClassList"]);
import axios from '@/services/config'


const courseDetail = ref({});
const loading = ref(false);
const show = ref(false);
const classList = ref([]);
const selectId = ref("");
const userInfo = userInfoStore();
const addClassDialogRef = ref(null);

const getClasslist = (options) => {
	courseDetail.value = JSON.parse(JSON.stringify(options));
	getCourseList();
	loading.value = true;
	show.value = true;
};
const getCourseList = () => {
	axios.get('https://pbl.cocorobo.cn/api/pbl/selectCourseDetail2',{
        params: { courseId: courseDetail.value.courseId }
    })
    .then(res => {
        console.log(res);
       
        classList.value = res[3]        
        loading.value = false
    })
    .catch(err=>{
        console.log(err);
        loading.value = false
    })
};

 const close = () => {
	show.value = false;
 }
const editClass = () => {
	addClassDialogRef.value.open({ classList: classList.value });
};

defineExpose({
	getClasslist,
});

</script>
<style scoped>
.opkDialogHeader >>> .el-dialog {
	width: 900px !important;
	border-radius: 8px;
	padding: 0;
	background-color: #fff;
	overflow: hidden;
	border-radius: 8px !important;
}
.opkDialogHeader >>> .el-dialog__body {
	padding: 0 !important;
	background: #fafafa !important;
}
.opkDialogHeader >>> .el-dialog__header {  /* 注意这里没有 :deep，因为是全局 */
  /* background: #2575fc !important; */
  padding: 0 !important;margin: 0 !important;
}
.box {
	width: 900px;
	height: auto;
	background: #fafafa;
	border-radius: 15px;
	box-shadow:
		0px 6px 30px 5px rgba(0, 0, 0, 0.05),
		0px 16px 24px 2px rgba(0, 0, 0, 0.04),
		0px 8px 10px -5px rgba(0, 0, 0, 0.08);
}

.b_head {
	width: 100%;
	height: 50px;
	/* border-radius: 15px 15px 0 0; */
	background: #1a1a1a;
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-sizing: border-box;
	padding: 0 20px;
	color: #fff;
}

.b_head > span {
	font-size: 18px;
	font-weight: bold;
	color: #fff;
}

.b_head > img {
	width: 20px;
	height: 20px;
	cursor: pointer;
}

.b_head > svg {
	width: 20px;
	height: 20px;
	cursor: pointer;
}

.b_main {
	width: 100%;
	height: 400px;
	background: #fafafa;
	padding: 20px 20px 20px 20px;
	box-sizing: border-box;
	overflow: auto;
}

.b_bottom {
	width: 100%;
	height: 70px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	box-sizing: border-box;
	padding: 0 20px;
}

.b_bottom > div {
	padding: 10px 25px;
	/* background: #fff; */
	color: #000;
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: solid 1px #eeeeee;
	margin-left: 15px;
	cursor: pointer;
	font-size: 16px;
}

.b_bottom > .b_b_submit {
	background: #1a1a1a;
	color: #d4d4d4;
	border-color: #1a1a1a;
}

.b_m_classItem {
	width: 32%;
	height: 85px;
	float: left;
	margin-bottom: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	background: #fff;
	box-shadow:
		0px 6px 30px 5px rgba(0, 0, 0, 0.05),
		0px 16px 24px 2px rgba(0, 0, 0, 0.04),
		0px 8px 10px -5px rgba(0, 0, 0, 0.08);
	border-radius: 12px;
	cursor: pointer;
	transition: 0.2s;
}

.b_m_classItem > div {
	color: #5f5f5f;
	font-size: 16px;
	margin: 4px 0;
	display: flex;
	flex-wrap: wrap;
	align-content: center;
}

.b_m_classItem > div > span {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 25px;
	height: 25px;
	border-radius: 4px;
	border: solid 1px #b0b0b0;
}

.b_m_classItem > div > svg {
	width: 20px;
	height: 25px;
	margin: 0 5px;
}

.b_m_classItem > span {
	color: #a3a3a3;
	font-size: 14px;
}

.b_main > div:nth-child(3n-1) {
	margin: 0 2%;
}

.b_m_classItem_active {
	box-shadow: 4px 4px 4px 0px rgba(138, 238, 138, 0.555);
}

.b_m_noClassMsg {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
</style>