|
|
@@ -0,0 +1,303 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <el-dialog
|
|
|
+ :center="true"
|
|
|
+ :visible.sync="show"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ :modal="true"
|
|
|
+ width="auto"
|
|
|
+ height="auto"
|
|
|
+ :append-to-body="true"
|
|
|
+ class="dialog"
|
|
|
+ >
|
|
|
+ <div class="box">
|
|
|
+ <div class="b_head">
|
|
|
+ <span>{{ lang.ssSelectTeachingClass }}</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">{{ lang.ssStudentNum.replace(/\*/g, 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>{{ lang.ssAddOrModifyClass }}</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="b_m_noClassMsg" v-if="classList.length<=0 && courseDetail.userid != userId">
|
|
|
+ <span>{{ lang.ssCreatorNotAddedClass }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="b_bottom">
|
|
|
+ <!-- <div @click="close()">{{ lang.ssCancel }}</div> -->
|
|
|
+ <div class="b_b_submit" @click="submit()">{{selectId ? lang.ssConfirm : lang.ssEnterDirectly}}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ <addClassDialog ref="addClassDialogRef" @success="addClassSuccess" :courseDetail="courseDetail"/>
|
|
|
+ </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, tcid2) {
|
|
|
+ console.log(data, tcid2);
|
|
|
+
|
|
|
+ this.data = JSON.parse(JSON.stringify(data));
|
|
|
+ this.classList = this.data.classList;
|
|
|
+ if(this.classList.length>0){
|
|
|
+ this.selectId = this.classList[0].id;
|
|
|
+ }
|
|
|
+ this.loading = false;
|
|
|
+ this.selectId = tcid2 ? tcid2 : this.selectId;
|
|
|
+ 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); */
|
|
|
+ background: #fccf00;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #000;
|
|
|
+}
|
|
|
+
|
|
|
+.b_m_noClassMsg{
|
|
|
+ width:100%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+</style>
|