全局引入plus

src/main.js

@@ -3,8 +3,8 @@ import 'virtual:windi.css';
 
 import App from './App.vue'
 import router from './router/index';
-// import ElementPlus from 'element-plus';
-// import 'element-plus/dist/index.css'
+import ElementPlus from 'element-plus';
+import 'element-plus/dist/index.css'
 import { ElMessage } from 'element-plus'
 import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 const app = createApp(App)
@@ -15,5 +15,6 @@ for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
 }
 app.config.globalProperties.$message = ElMessage;
 app.provide('$message', ElMessage)
+app.use(ElementPlus)
 app.mount('#app')
 

src/pages/personal/components/MyCourse/xtbk-create.vue

@@ -20,12 +20,14 @@
         编辑课程
       </div>
       <div class="formContent" v-loading="loading" type="primary">
-        <el-form v-if="!loading" :model="formline" ref="formlineRef" :rules="rules" size="large" label-position="top" class="demo-ruleForm">
+        <el-form v-if="!loading" :model="formline" ref="formlineRef" :rules="rules" size="large" label-position="top"
+          class="demo-ruleForm">
           <div class="must">
             <div class="label">课程封面图</div>
             <div class="uploadDiv">
               <div style="display: flex">
-                <el-upload class="mainUpload" action="" accept=".png, .jpg, .jpeg" :auto-upload="false" list-type="picture-card" :on-change="handleMainChange" :file-list="fileList">
+                <el-upload class="mainUpload" action="" accept=".png, .jpg, .jpeg" :auto-upload="false"
+                  list-type="picture-card" :on-change="handleMainChange" :file-list="fileList">
                   <el-icon v-if="formline.zx_img == ''">
                     <Picture />
                   </el-icon>
@@ -50,21 +52,25 @@
           </el-form-item>
           <div class="type flex">
             <el-form-item label="年级" prop="grade_id">
-              <remote-select v-model:model-name="formline.grade_name" v-model="formline.grade_id" to="grade"></remote-select>
+              <remote-select v-model:model-name="formline.grade_name" v-model="formline.grade_id" to="grade">
+              </remote-select>
             </el-form-item>
             <el-form-item label="学科" prop="subject_id">
-              <remote-select v-model:model-name="formline.subject_name" v-model="formline.subject_id" to="subject"></remote-select>
+              <remote-select v-model:model-name="formline.subject_name" v-model="formline.subject_id" to="subject">
+              </remote-select>
             </el-form-item>
           </div>
           <div style="display: flex">
             <el-form-item style="flex: 1" label="开始时间" prop="zx_kssj">
               <el-config-provider :locale="local">
-                <el-date-picker v-model="formline.zx_kssj" type="datetime" placeholder="选择日期时间" value-format="YYYY-MM-DD HH:mm:ss"></el-date-picker>
+                <el-date-picker v-model="formline.zx_kssj" type="datetime" placeholder="选择日期时间"
+                  value-format="YYYY-MM-DD HH:mm:ss"></el-date-picker>
               </el-config-provider>
             </el-form-item>
             <el-form-item style="flex: 1; margin-left: 20px" label="结束时间" prop="zx_jssj">
               <el-config-provider :locale="local">
-                <el-date-picker v-model="formline.zx_jssj" value-format="YYYY-MM-DD HH:mm:ss" type="datetime" placeholder="选择日期时间"></el-date-picker>
+                <el-date-picker v-model="formline.zx_jssj" value-format="YYYY-MM-DD HH:mm:ss" type="datetime"
+                  placeholder="选择日期时间"></el-date-picker>
               </el-config-provider>
             </el-form-item>
           </div>
@@ -99,7 +105,8 @@
               </div>
               <div class="goupeTeacher flex">
                 <el-checkbox-group v-if="xtbkTeacher.length > 0" v-model="checkList">
-                  <el-checkbox @change="isCheckJs($event, t)" v-for="t in xtbkTeacher" :label="t.user_id" :key="t.user_id">{{ t.user_realname }}</el-checkbox>
+                  <el-checkbox @change="isCheckJs($event, t)" v-for="t in xtbkTeacher" :label="t.user_id"
+                    :key="t.user_id">{{ t.user_realname }}</el-checkbox>
                 </el-checkbox-group>
                 <div v-else>暂无数据</div>
               </div>
@@ -127,8 +134,8 @@
     </el-card>
   </div>
 </template>
-  
-  <script>
+
+<script>
 import {
   grade_list,
   subject_list,
@@ -278,7 +285,7 @@ export default {
         );
         this.isCheckedTeacher.splice(index, 1);
       }
-      // console.log(this.isCheckedTeacher);
+      // // console.log(this.isCheckedTeacher);
       this.zx_bkjs = [];
       this.isCheckedTeacher.forEach((item) => {
         this.zx_bkjs.push({
@@ -288,7 +295,7 @@ export default {
         });
       });
       this.zx_bkjs_json = JSON.stringify(this.zx_bkjs);
-      // console.log(this.zx_bkjs_json);
+      // // console.log(this.zx_bkjs_json);
     },
     // 删除教师
     deleteJs(js) {
@@ -361,7 +368,7 @@ export default {
             } else {
               this.isCheckedTeacher = [];
             }
-            console.log("object :>> ", this.formline);
+            // console.log("object :>> ", this.formline);
             this.loading = false;
           }
         });
@@ -413,19 +420,19 @@ export default {
     },
     // 提交
     submitForm(formName) {
-      console.log("submitForm :>> ");
+      // console.log("submitForm :>> ");
       let id = this.$route.query.id;
       this.$refs[formName].validate((valid) => {
-        console.log(valid);
+        // console.log(valid);
         if (valid) {
-          console.log(111);
+          // console.log(111);
           if (this.formline.zx_img == "") {
-            console.log(2222222);
+            // console.log(2222222);
             this.mainTip = "请上传课程封面图";
             return;
           }
           if (this.isCheckedTeacher.length == 0) {
-            console.log(333);
+            // console.log(333);
             this.checkTip = "请选择教师";
             return;
           }
@@ -444,13 +451,14 @@ export default {
             },
           };
           if (id === undefined) {
+            // console.log("=== 1:>> ");
             this.$confirm("确认创建该课程?", "提示", {
               confirmButtonText: "确定",
               cancelButtonText: "取消",
               type: "warning",
             }).then(() => {
               xtbk_add(data).then((res) => {
-                console.log("res", res);
+                // console.log("res1", res);
                 this.$router.push("/personal/course-xtbk");
               });
             });
@@ -464,12 +472,12 @@ export default {
                 type: "warning",
               }).then(() => {
                 xtbk_edit(data).then((res) => {
-                  console.log(res);
+                  // console.log('res2', res);
                   this.$router.push("/personal/course-xtbk");
                 });
               });
             } catch (error) {
-              console.error(error);
+              // console.error('err:', error);
             }
           }
         } else {
@@ -494,54 +502,65 @@ export default {
   },
 };
 </script>
-  
+
 <style lang="scss" scoped>
 .flex {
   display: flex;
   flex-wrap: wrap;
 }
+
 .createCourse {
   .el-card {
     margin-bottom: 15px;
     background: #fff;
   }
+
   .pointer {
     cursor: pointer;
   }
+
   .title {
     font-size: 18px;
     color: #050026;
   }
+
   .subTitle {
     font-size: 14px;
     color: #949494;
     margin-left: 45px;
   }
+
   .formContent {
     width: 575px;
     margin: auto;
+
     .must {
       display: flex;
       align-items: center;
       margin-bottom: 22px;
+
       .label {
         color: #949494;
         font-size: 14px;
         margin-right: 15px;
+
         &::after {
           content: "*";
           color: #f35421;
           margin-left: 4px;
         }
       }
+
       .uploadDiv {
         flex: 1;
+
         .el-upload--picture-card {
           width: 180px;
           height: 96px;
         }
       }
     }
+
     .showType {
       width: 100%;
       height: 40px;
@@ -550,6 +569,7 @@ export default {
       display: flex;
       align-items: center;
       padding: 0 20px;
+
       .typeItem {
         color: #fff;
         font-size: 13px;
@@ -559,24 +579,30 @@ export default {
         line-height: 22px;
       }
     }
+
     .type {
       margin-bottom: 10px;
       justify-content: space-between;
+
       .el-form-item {
         width: 273px;
       }
+
       .flex {
         display: flex;
         align-items: baseline;
+
         .label {
           font-size: 13px;
           color: #333;
+
           &::after {
             content: "*";
             color: #f35421;
             margin-left: 4px;
           }
         }
+
         .valueDiv {
           margin-left: 15px;
           flex: 1;
@@ -586,10 +612,12 @@ export default {
           padding-bottom: 15px;
           font-weight: 400;
           font-size: 14px;
+
           .item {
             padding: 3px 5px;
             margin-right: 20px;
             margin-bottom: 5px;
+
             &.active {
               color: #00a3ff;
               border-radius: 6px;
@@ -599,9 +627,11 @@ export default {
         }
       }
     }
+
     .btnDiv {
       text-align: center;
       width: 100%;
+
       .el-button {
         background: #f4f4f4;
         border: none;
@@ -610,6 +640,7 @@ export default {
         color: #41387f;
         font-family: PingFangSC, PingFangSC-Semibold;
       }
+
       .el-button--primary {
         background: #00a3ff;
         margin-right: 80px;
@@ -618,6 +649,7 @@ export default {
     }
   }
 }
+
 .checkedjs {
   width: 100%;
   height: 44px;
@@ -627,17 +659,20 @@ export default {
   align-items: center;
   padding: 0 10px;
   box-sizing: border-box;
+
   .checkedEach {
     display: flex;
     height: 22px;
     line-height: 22px;
     margin-right: 5px;
+
     span {
       padding: 0 5px;
       border-radius: 6px;
       background-color: #00a3ff;
       color: #fff;
     }
+
     img {
       width: 15px;
       height: 15px;
@@ -647,6 +682,7 @@ export default {
     }
   }
 }
+
 .check {
   // width: 516px;
   width: 100%;
@@ -656,6 +692,7 @@ export default {
   box-sizing: border-box;
   border: 1px solid #e4e6e8;
   border-radius: 6px;
+
   .checkTop {
     width: 100%;
     justify-content: space-between;
@@ -667,6 +704,7 @@ export default {
       border-radius: 8px;
       overflow: hidden;
       position: relative;
+
       input {
         width: 100%;
         height: 100%;
@@ -675,6 +713,7 @@ export default {
         padding-left: 10px;
         background: #f6f8fa;
       }
+
       .searchBtn {
         width: 26px;
         height: 26px;
@@ -687,6 +726,7 @@ export default {
         text-align: center;
         vertical-align: middle;
         cursor: pointer;
+
         img {
           display: block;
           text-align: center;
@@ -694,10 +734,12 @@ export default {
         }
       }
     }
+
     .pages {
       width: 70px;
       justify-content: space-between;
       margin-top: 5px;
+
       .previous,
       .next {
         width: 32px;
@@ -711,6 +753,7 @@ export default {
       }
     }
   }
+
   .goupeTeacher {
     padding: 5px 10px;
     box-sizing: border-box;
@@ -720,6 +763,7 @@ export default {
       font-size: 16px;
       font-weight: 500;
       color: #949494;
+
       input {
         width: 17px;
         height: 17px;
@@ -731,12 +775,13 @@ export default {
   }
 }
 </style>
-  
-  <style lang="scss">
+
+<style lang="scss">
 .createCourse {
   .el-card {
     margin-bottom: 15px;
     background: #fff;
+
     .el-form {
       .el-form-item {
         &.is-required {
@@ -744,6 +789,7 @@ export default {
             &::before {
               display: none;
             }
+
             &::after {
               content: "*";
               color: #f35421;
@@ -751,22 +797,27 @@ export default {
             }
           }
         }
+
         .el-form-item__label {
           color: #949494;
           font-size: 14px;
           position: relative;
+
           &::after {
             content: "*";
             color: #f35421;
             margin-left: 4px;
           }
         }
+
         .el-form-item__content {
           .el-select {
             width: 100%;
           }
+
           .el-input {
             width: 100%;
+
             .el-input__wrapper {
               width: 100%;
               box-shadow: none;
@@ -774,6 +825,7 @@ export default {
               border-radius: 6px;
             }
           }
+
           .el-textarea {
             .el-textarea__inner {
               box-shadow: none;
@@ -782,26 +834,31 @@ export default {
               // color: #d0d0d0;
             }
           }
+
           .el-checkbox.read {
             .el-checkbox__inner {
               border-radius: 50%;
             }
           }
+
           .el-input__inner {
             // color: #d0d0d0;
           }
         }
       }
+
       .uploadDiv {
         .mainUpload {
           .el-upload--picture-card {
             width: 180px;
             height: 96px;
           }
+
           .el-upload-list--picture-card .el-upload-list__item {
             display: none;
           }
         }
+
         .attachUpload {
           .el-upload--picture-card {
             width: 65px;
@@ -812,4 +869,4 @@ export default {
     }
   }
 }
-</style>
+</style>