pbl-student-table/src/components/dialog/selectTeachingClassDialog.vue

<template>
	<div>
		<el-dialog
			:center="true"
			:visible.sync="show"
			:close-on-click-modal="true"
			:modal="true"
			width="auto"
			height="auto"
			:append-to-body="true"
			class="dialog"
		>
			<div class="box">
				<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>
				<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" v-if="courseDetail.userid == userId">
              <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>
				<div class="b_bottom">
					<div @click="close()">取消</div>
          <div class="b_b_submit" @click="submit()">{{selectId ? '确定' : '直接进入'}}</div>
				</div>
			</div>
		</el-dialog>
    <addClassDialog ref="addClassDialogRef" @success="addClassSuccess"/>
	</div>
</template>

<script>
import addClassDialog from './addClassDialog.vue';
export default {
  props:{
    courseDetail:{
      type:Object,
      default:()=>{return {}}
    },
    userId:{
      type:String,
      default:""
    }
  },
  components:{
    addClassDialog
  },
	data() {
		return {
			loading: false,
			show: false,
			data: null,
      classList:[],
      selectId:"",
		};
	},
	computed: {},
	methods: {
		open(data) {
			this.data = JSON.parse(JSON.stringify(data));
      this.classList = this.data.classList;
			this.loading = false;
			this.show = true;
		},
		close() {
			this.show = false;
			this.init();
		},
		init() {
			this.data = null;
      this.classList = [];
      this.selectId = "";
			this.loading = false;
		},
    submit(){
      // console.log(this.selectId)
      this.$emit("success",this.selectId)
    },
    editClass(){
      this.$refs.addClassDialogRef.open({classList:this.classList});
    },
    addClassSuccess(data){
      this.classList = data;
      this.$emit("changeClassList",this.classList);
      this.$refs.addClassDialogRef.close();

    },
	},
};
</script>

<style scoped>
.dialog >>> .el-dialog {
	width: 900px !important;
	border-radius: 8px;
	padding: 0;
	background-color: #fff;
	overflow: hidden;
}

.dialog >>> .el-dialog__body {
	width: 900px !important;
	height: auto;
	flex-shrink: 0;
	padding: 0;
	box-sizing: border-box;
	overflow: auto;
}

.dialog >>> .el-dialog__header {
	display: none !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: .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);
}
</style>