update

src/components/pages/pptEasy/addCourse2.vue

@@ -4,28 +4,44 @@
       <div class="right">
         <div style="width: 100%; height: 100%; overflow: auto" ref="stepBox">
           <div class="courseTop">
-            <div class="stepsNav" v-if="!gotype">
-              <el-breadcrumb separator-class="el-icon-arrow-right">
-                <el-breadcrumb-item :to="{
-                  path:
-                    '/course?userid=' +
-                    userid +
-                    '&oid=' +
-                    oid +
-                    '&org=' +
-                    org +
-                    '&role=' +
-                    role
-                }">课程管理</el-breadcrumb-item>
-                <el-breadcrumb-item>
-                  <span style="color: rgb(15, 126, 255)">添加课程</span>
-                </el-breadcrumb-item>
-              </el-breadcrumb>
+            <div class="new_btn_box">
+              <div class="stepsNav" v-if="!gotype">
+                <el-breadcrumb separator-class="el-icon-arrow-right">
+                  <!-- 给 el-breadcrumb-item 添加 click 事件需要加 to 或自定义样式，否则点击不会触发 -->
+                  <el-breadcrumb-item to="" @click.native="lastSteps()">课程管理</el-breadcrumb-item>
+                  <el-breadcrumb-item>
+                    <span style="color: rgb(15, 126, 255)">添加课程</span>
+                  </el-breadcrumb-item>
+                  </el-breadcrumb>
+              </div>
+              <div class="title">
+                <el-input 
+                  class="title-input" 
+                  ref="titleInputRef"
+                  v-model:value="titleValue" 
+                  @blur="handleUpdateTitle()" 
+                  v-if="editingTitle" 
+                ></el-input>
+                <div 
+                  class="title-text"
+                  @click="startEditTitle()"
+                  :title="courseName"
+                  v-else
+                >{{ courseName ? courseName : "暂未命名" }}</div>
+              </div>
             </div>
-            <div class="r_pub_button_retrun" @click="lastSteps()">返回</div>
+            <!-- <div class="r_pub_button_retrun" @click="lastSteps()">返回</div> -->
+             <div class="new_btn_box">
+                <button class="c_pub_button_return" @click="save">
+                  保存
+                </button>
+                <button class="c_pub_button_confirm" @click="dialogVisibleBasicInfo = true">
+                  发布
+                </button>
+             </div>
           </div>
           <div class="rightBox" style="padding: 0;" :style="{
-            height: 'calc(100% - 50px)'
+            height: 'calc(100% - 80px)'
           }" v-if="steps == 1">
             <div class="pptIframeArea">
               <iframe allow="camera *; microphone *;display-capture;midi;encrypted-media;clipboard-write;clipboard-read"
@@ -167,7 +183,7 @@
 
             </div>
 
-            <div class="info_btnBox3">
+            <div class="info_btnBox3" v-show="false">
               <button class="c_pub_button_return pub_btn_return_img" @click="lastSteps">
                 返回课程
               </button>
@@ -200,7 +216,7 @@
                         <input type="text" placeholder="请输入课程名称" class="binfo_input" v-model="courseName"
                           style="border: 1.5px solid rgb(202, 209, 220);margin: 0px 10px 0px 0px;border-radius: 5px;font-weight: 600;padding: 12px 14px 12px 71px;" />
                         <el-switch v-model="isTeacherSee" active-text="是否公开此课程"
-                          style="justify-content: center;width: 200px;"></el-switch>
+                          style="justify-content: center;width: 200px;" v-show="false"></el-switch>
                       </div>
                     </div>
                   </div>
@@ -1156,6 +1172,9 @@ export default {
         "d87b62d3-1b6d-11f0-a66a-005056924926",
         "c25ea59b-1b6d-11f0-a66a-005056924926",
       ],
+      title: "",
+      titleValue: "",
+      editingTitle: false,
     };
   },
   directives: {
@@ -1238,6 +1257,31 @@ export default {
   watch: {
   },
   methods: {
+    startEditTitle() {
+      this.titleValue = this.courseName;
+      this.editingTitle = true;
+      this.$nextTick(() => {
+        if (this.$refs.titleInputRef) {
+          this.$refs.titleInputRef.focus();
+        }
+      });
+    },
+    handleUpdateTitle() {
+      if (this.titleValue.trim()) {
+        this.courseName = this.titleValue.trim();
+      }
+      this.editingTitle = false;
+      let _pptIframe = this.$refs.pptIframeRef;
+      if (
+        _pptIframe &&
+        _pptIframe.contentWindow &&
+        _pptIframe.contentWindow.window &&
+        typeof _pptIframe.contentWindow.window.setTitle === "function"
+      ) {
+        let _data = _pptIframe.contentWindow.window.setTitle(this.courseName);
+        resolve(_data);
+      } 
+    },
     closePan(tool) {
       if (tool == 15) {
         if (JSON.stringify(this.answerQ) == JSON.stringify(this.answerQ2)) {
@@ -1324,12 +1368,13 @@ export default {
         });
     },
     nextSteps() {
+      this.isTeacherSee = true
       if (this.cid == "" || this.cid == undefined) {
         if (this.courseName == "") {
           this.$message.error("请补充填写课程名称");
           return;
         } else {
-          this.addWork();
+          this.addWork(2);
         }
       } else {
         if (this.courseName == "") {
@@ -1339,7 +1384,7 @@ export default {
           console.log("修改课程");
           // if (this.userid != this.courseUserid && this.role != "1") {
           //   this.updateWork2();
-          this.updateWork();
+          this.updateWork(2);
         }
       }
       this.$refs.stepBox.scrollTop = 0;
@@ -1367,6 +1412,23 @@ export default {
     goTo(path) {
       this.$router.push(path);
     },
+    save(){
+      if (this.cid == "" || this.cid == undefined) {
+          if (this.courseName == "") {
+            this.$message.error("请补充填写课程名称");
+            return;
+          } else {
+            this.addWork();
+          }
+        } else {
+          if (this.courseName == "") {
+            this.$message.error("请补充填写课程名称");
+            return;
+          } else {
+            this.updateWork();
+          }
+        }
+    },
     lastSteps() {
       this.$confirm("是否保存已编辑内容？", "提示", {
         confirmButtonText: "保存",
@@ -1533,7 +1595,7 @@ export default {
         throw err;
       }
     },
-    async addWork() {
+    async addWork(type = 1) {
       if (this.$refs.pptIframeRef.contentWindow.window.pptLoading !== 2) return this.$message.info("ppt正在加载中，请稍等")
       if (this.uploadWorkLoading) return;
       this.uploadWorkLoading = true;
@@ -1601,7 +1663,9 @@ export default {
           this.cid = res.data.courseId;
           this.courseUserid = this.userid;
           this.islogin = true;
-          this.steps = 4;
+          if(type == 1){
+            this.steps = 4;
+          }
           this.uploadFile2(pptJsonFile, this.courseId);
           this.addOp3(
             "1",
@@ -1622,7 +1686,7 @@ export default {
           console.error(err);
         });
     },
-    async updateWork() {
+    async updateWork(type = 1) {
       if (this.$refs.pptIframeRef.contentWindow.window.pptLoading !== 2) return this.$message.info("ppt正在加载中，请稍等")
       if (this.uploadWorkLoading) return;
       this.uploadWorkLoading = true;
@@ -1687,7 +1751,9 @@ export default {
           // }
           this.number = this.nbOrder;
           this.courseId = this.cid;
-          this.steps = 4;
+          if(type == 1){
+            this.steps = 4;
+          }
           this.addOp3(
             "1",
             "",
@@ -2987,8 +3053,8 @@ export default {
 
 .pptIframeArea {
   width: 100%;
-  height: calc(100% - 80px);
-  margin: 10px 0;
+  height: calc(100%);
+  /* margin: 10px 0; */
   background-color: #fff;
   overflow: hidden;
   border-radius: 10px;
@@ -4269,4 +4335,34 @@ export default {
   object-fit: cover;
 }
 
+.new_btn_box{
+  display: flex;
+}
+
+.title {
+  margin-left: 20px;
+  display: flex;
+  align-items: center;
+}
+
+.title-text {
+  font-size: 16px;
+  font-weight: 600;
+  cursor: pointer;
+  padding: 8px 12px;
+  border-radius: 4px;
+  transition: background-color 0.3s;
+  max-width: 200px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.title-text:hover {
+  background-color: rgba(0, 0, 0, 0.05);
+}
+
+.title-input {
+  width: 200px;
+}
 </style>