修改课件自定义名称

src/views/course_details/index.vue

@@ -34,67 +34,60 @@
               <span> {{ CourseData.end_date }} </span>
             </p>
 
-            <template v-if="invok_module !== 'GCLS-LC'">
-              <p v-if="backTime" class="tip">
-                {{ !is_buy ? $t('Key48') : ' ' }}
-              </p>
-              <div class="operation">
-                <template v-if="!is_buy">
-                  <div v-if="backTime" class="countdown">
-                    <div class="time">
-                      <div>
-                        <div class="time-num">
-                          {{ backTime.days }}
-                        </div>
-                        <div class="time-name">
-                          {{ $t('Key386') }}
-                        </div>
+            <p v-if="backTime" class="tip">
+              {{ !is_buy && invok_module !== 'GCLS-LC' ? $t('Key48') : ' ' }}
+            </p>
+            <div class="operation">
+              <template v-if="!is_buy && invok_module !== 'GCLS-LC'">
+                <div v-if="backTime" class="countdown">
+                  <div class="time">
+                    <div>
+                      <div class="time-num">
+                        {{ backTime.days }}
                       </div>
-                      <div>
-                        <div class="time-num">
-                          {{ backTime.hours }}
-                        </div>
-                        <div class="time-name">
-                          {{ $t('Key387') }}
-                        </div>
+                      <div class="time-name">
+                        {{ $t('Key386') }}
                       </div>
-                      <div>
-                        <div class="time-num">
-                          {{ backTime.minutes }}
-                        </div>
-                        <div class="time-name">
-                          {{ $t('Key388') }}
-                        </div>
+                    </div>
+                    <div>
+                      <div class="time-num">
+                        {{ backTime.hours }}
                       </div>
-                      <div>
-                        <div class="time-num">
-                          {{ backTime.seconds }}
-                        </div>
-                        <div class="time-name">
-                          {{ $t('Key321') }}
-                        </div>
+                      <div class="time-name">
+                        {{ $t('Key387') }}
+                      </div>
+                    </div>
+                    <div>
+                      <div class="time-num">
+                        {{ backTime.minutes }}
+                      </div>
+                      <div class="time-name">
+                        {{ $t('Key388') }}
+                      </div>
+                    </div>
+                    <div>
+                      <div class="time-num">
+                        {{ backTime.seconds }}
+                      </div>
+                      <div class="time-name">
+                        {{ $t('Key321') }}
                       </div>
                     </div>
                   </div>
-                  <div v-else>
-                    {{ $t('Key389') }}
-                  </div>
-                </template>
-                <div v-else></div>
-
-                <div v-if="!readonly && !(!is_buy && backTime === 0)">
-                  <span v-show="CourseData.price !== 0" class="price">
-                    ¥
-                    <span class="price_1" v-text="changePrice('1', CourseData.price)"></span>
-                    <span class="price_2" v-text="changePrice('2', CourseData.price)"></span>
-                  </span>
-                  <button class="get" @click="handleCourseStatus">{{ buttonName }}</button>
-                  <span class="collection" @click="addOrDeleteMyCollection">
-                    <svg-icon :icon-class="collection ? 'collection-solid' : 'collection'" />
-                  </span>
                 </div>
+                <div v-else>
+                  {{ $t('Key389') }}
+                </div>
+              </template>
+              <div v-else></div>
+
+              <div v-if="!readonly && !(!is_buy && backTime === 0)">
+                <button class="get" @click="handleCourseStatus">{{ buttonName }}</button>
+                <span class="collection" @click="addOrDeleteMyCollection">
+                  <svg-icon :icon-class="collection ? 'collection-solid' : 'collection'" />
+                </span>
               </div>
-            </template>
+            </div>
           </div>
         </div>
         <div v-if="CourseData.book_list.length > 0" class="more">
@@ -679,8 +672,9 @@ onBeforeUnmount(() => {
 
         .operation {
           display: flex;
-          align-items: center;
+          align-items: flex-end;
           justify-content: space-between;
+          height: 125px;
 
           .countdown {
             > p {

src/views/live/teacher/CompleteList.vue

@@ -250,7 +250,7 @@ export default {
           }
           this.category = category;
 
-          if (category.value === 'OC' || category.value.length === 0 || category.value === 'AILP') {
+          if (category === 'OC' || category.length === 0 || category === 'AILP') {
             return this.$message.warning('该课件类型已被废弃');
           }
           if (category === 'NPC') {

src/views/new_live/teacher/components/CompleteList.vue

@@ -250,7 +250,7 @@ export default {
           }
           this.category = category;
 
-          if (category.value === 'OC' || category.value.length === 0 || category.value === 'AILP') {
+          if (category === 'OC' || category.length === 0 || category === 'AILP') {
             return this.$message.warning('该课件类型已被废弃');
           }
           if (category === 'NPC') {

src/views/task_details/ShowCourseware.vue

@@ -60,7 +60,7 @@ export default {
           return;
         }
         this.category = category;
-        if (category.value === 'OC' || category.value.length === 0 || category.value === 'AILP') {
+        if (category === 'OC' || category.length === 0 || category === 'AILP') {
           return this.$message.warning('该课件类型已被废弃');
         }
         if (category === 'NPC') {

src/views/teacher/create_course/step_four/CourseList.vue

@@ -1,47 +0,0 @@
-<template>
-  <div class="course-list">
-    <el-tag
-      v-for="({ courseware_id, courseware_name }, i) in courseList"
-      :key="courseware_id"
-      color="#fff"
-      closable
-      :title="courseware_name"
-      @close="closeCourse(i, 'live')"
-    >
-      <span>{{ courseware_name }}</span>
-      <svg-icon icon-class="write" class-name="write" />
-    </el-tag>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'CourseList'
-};
-</script>
-
-<script setup>
-defineProps({
-  courseList: {
-    type: Array,
-    required: true
-  }
-});
-</script>
-
-<style lang="scss" scoped>
-.course-list {
-  .el-tag {
-    margin-right: 16px;
-
-    > span {
-      display: inline-block;
-      max-width: 200px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      vertical-align: bottom;
-    }
-  }
-}
-</style>

src/views/teacher/create_course/step_four/NewTask.vue

@@ -27,7 +27,7 @@
           </el-select>
         </el-form-item>
         <el-form-item v-if="!is_template" :label="$t('Key370')">
-          <div class="tag-list">
+          <div class="student-list-wrap">
             <el-popover trigger="click" popper-class="select-student" placement="bottom-start">
               <div class="student-list">
                 <ul>
@@ -113,17 +113,15 @@
             <el-form :model="liveForm" label-width="100px" label-position="left">
               <el-form-item :label="$t('Key312')">
                 <el-button @click="dialogVisible = true"> <i class="el-icon-plus"></i> {{ $t('Key373') }} </el-button>
-                <div>
-                  <el-tag
+                <div class="tag-list">
+                  <CourseItem
                     v-for="({ courseware_id, courseware_name }, i) in liveForm.coursewareInfo"
                     :key="courseware_id"
-                    color="#fff"
-                    closable
-                    :title="courseware_name"
-                    @close="closeCourse(i, 'live')"
-                  >
-                    <span>{{ courseware_name }}</span>
-                  </el-tag>
+                    :courseware-id="courseware_id"
+                    :courseware-name="courseware_name"
+                    :change-course-name="curry(changeCourseName)(i)('live')"
+                    @closeCourse="closeCourse(i, 'live')"
+                  />
                 </div>
               </el-form-item>
 
@@ -131,16 +129,18 @@
                 <el-upload action="no" :http-request="upload" multiple :show-file-list="false" accept="*">
                   <el-button><svg-icon icon-class="upload" /> {{ $t('Key374') }}</el-button>
                 </el-upload>
-                <el-tag
-                  v-for="(item, i) in liveForm.file_info_list"
-                  :key="item.file_id"
-                  color="#fff"
-                  closable
-                  :title="item.file_name"
-                  @close="closeFile(i, liveForm.file_info_list)"
-                >
-                  <span>{{ item.file_name }}</span>
-                </el-tag>
+                <div class="tag-list">
+                  <el-tag
+                    v-for="({ file_id, file_name }, i) in liveForm.file_info_list"
+                    :key="file_id"
+                    color="#fff"
+                    closable
+                    :title="file_name"
+                    @close="closeFile(i, liveForm.file_info_list)"
+                  >
+                    <span>{{ file_name }}</span>
+                  </el-tag>
+                </div>
               </el-form-item>
 
               <el-form-item :label="$t('Key375')">
@@ -167,18 +167,15 @@
             <el-form :model="courseForm" label-width="100px" label-position="left">
               <el-form-item :label="$t('Key312')">
                 <el-button @click="dialogVisible = true"> <i class="el-icon-plus"></i> {{ $t('Key373') }} </el-button>
-                <!-- <CourseList :course-list="courseForm.coursewareInfo" /> -->
-                <div>
-                  <el-tag
+                <div class="tag-list">
+                  <CourseItem
                     v-for="({ courseware_id, courseware_name }, i) in courseForm.coursewareInfo"
                     :key="courseware_id"
-                    color="#fff"
-                    closable
-                    :title="courseware_name"
-                    @close="closeCourse(i, 'course')"
-                  >
-                    <span>{{ courseware_name }}</span>
-                  </el-tag>
+                    :courseware-id="courseware_id"
+                    :courseware-name="courseware_name"
+                    :change-course-name="curry(changeCourseName)(i)('course')"
+                    @closeCourse="closeCourse(i, 'course')"
+                  />
                 </div>
               </el-form-item>
 
@@ -205,16 +202,18 @@
                 <el-upload action="no" :http-request="upload" multiple :show-file-list="false" accept="*">
                   <el-button><svg-icon icon-class="upload" /> {{ $t('Key152') }}</el-button>
                 </el-upload>
-                <el-tag
-                  v-for="(item, i) in basicForm.file_info_list"
-                  :key="item.file_id"
-                  color="#fff"
-                  closable
-                  :title="item.file_name"
-                  @close="closeFile(i, basicForm.file_info_list)"
-                >
-                  <span>{{ item.file_name }}</span>
-                </el-tag>
+                <div class="tag-list">
+                  <el-tag
+                    v-for="({ file_id, file_name }, i) in basicForm.file_info_list"
+                    :key="file_id"
+                    color="#fff"
+                    closable
+                    :title="file_name"
+                    @close="closeFile(i, basicForm.file_info_list)"
+                  >
+                    <span>{{ file_name }}</span>
+                  </el-tag>
+                </div>
               </el-form-item>
 
               <el-form-item :label="$t('Key330')">
@@ -262,9 +261,10 @@ import { ref, provide, inject } from 'vue';
 import { AddTaskToCSItem, UpdateTask } from '@/api/course';
 import { useRoute, useRouter } from 'vue-router/composables';
 import { useForm, useInit, useCourse, basicForm, courseForm, liveForm } from './newTask';
+import { curry } from '@/utils/common';
 
 import SelectCourse from '@/components/select/SelectCourse.vue';
-import CourseList from './CourseList.vue';
+import CourseItem from './components/CourseItem.vue';
 
 const router = useRouter();
 const route = useRoute();
@@ -285,7 +285,7 @@ const { form, rules, closeFile, upload, custom_student_list, deleteStudentItem,
 const { cs_item_begin_time, cs_item_end_time, mode_list, teacher_list, time_type, type_list, hourArr, minuteArr } =
   useInit(form, student_list, custom_student_list);
 
-const { dialogVisible, closeCourse, dialogClose, selectCourse } = useCourse(form);
+const { dialogVisible, changeCourseName, closeCourse, dialogClose, selectCourse } = useCourse(form);
 
 let newTaskForm = ref();
 /**
@@ -327,6 +327,12 @@ function addTaskToCSItem() {
           return { courseware_id, group_id_selected_info };
         }
       );
+      // 当前自定义名称列表
+      data['courseware_custom_name_list'] = liveForm.value.coursewareInfo
+        .filter((item) => 'is_custom_name' in item && item.is_custom_name === 'true')
+        .map(({ courseware_id, courseware_name }) => {
+          return { courseware_id, name: courseware_name };
+        });
     }
 
     if (teaching_type === 11) {
@@ -338,6 +344,12 @@ function addTaskToCSItem() {
           return { courseware_id, group_id_selected_info: group_id_selected_info ?? '[]' };
         }
       );
+      // 当前自定义名称列表
+      data['courseware_custom_name_list'] = courseForm.value.coursewareInfo
+        .filter((item) => 'is_custom_name' in item && item.is_custom_name === 'true')
+        .map(({ courseware_id, courseware_name }) => {
+          return { courseware_id, name: courseware_name };
+        });
     }
 
     if (teaching_type === 12) {
@@ -428,7 +440,8 @@ function goBack() {
         width: 140px;
       }
 
-      .tag-list {
+      // 选择学生
+      .student-list-wrap {
         display: flex;
         flex-wrap: wrap;
 
@@ -480,9 +493,14 @@ function goBack() {
           margin: 20px 0;
         }
 
-        .el-tag {
-          margin-right: 16px;
+        .tag-list {
+          display: flex;
+          flex-wrap: wrap;
+          gap: 8px 16px;
+          padding-top: 8px;
+        }
 
+        .el-tag {
           > span {
             display: inline-block;
             max-width: 200px;

src/views/teacher/create_course/step_four/components/CourseItem.vue

@@ -0,0 +1,72 @@
+<template>
+  <el-tag :key="coursewareId" color="#fff" class="course-item" closable @close="$emit('closeCourse')">
+    <span v-show="!isEditor" :title="coursewareName">{{ coursewareName }}</span>
+    <input v-show="isEditor" ref="input" v-model="name" type="text" @keyup.enter="editorCourseName" />
+    <svg-icon icon-class="write" class-name="write" @click="editorCourseName" />
+  </el-tag>
+</template>
+
+<script>
+export default {
+  name: 'CourseItem'
+};
+</script>
+
+<script setup>
+import { ref } from 'vue';
+
+const props = defineProps({
+  coursewareId: {
+    type: String,
+    required: true
+  },
+  coursewareName: {
+    type: String,
+    required: true
+  },
+  changeCourseName: {
+    type: Function,
+    required: true
+  }
+});
+
+defineEmits(['closeCourse']);
+
+let input = ref();
+let isEditor = ref(false);
+let name = ref(props.coursewareName);
+function editorCourseName() {
+  isEditor.value = !isEditor.value;
+  if (isEditor.value) {
+    setTimeout(() => {
+      input.value.focus();
+    }, 0);
+  } else {
+    props.changeCourseName(name.value);
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.el-tag {
+  > span {
+    max-width: 200px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  input {
+    border: 1px solid #ccc;
+
+    &:focus-visible {
+      outline-color: #409eff;
+    }
+  }
+
+  svg.write {
+    margin-left: 12px;
+    cursor: pointer;
+  }
+}
+</style>

src/views/teacher/create_course/step_four/newTask.js

@@ -292,56 +292,58 @@ export function useForm() {
 export function useCourse(form) {
   const $t = inject('$t');
 
-  // 选择课件
   let dialogVisible = ref(false);
 
   function dialogClose() {
     dialogVisible.value = false;
   }
 
-  function getTreeNodeInfo_BookChapterStruct(id, type, previewGroupId) {
-    GetTreeNodeInfo_BookChapterStruct({ id }).then(({ name, id }) => {
-      if (type === 'live') {
-        liveForm.value.coursewareInfo.push({
-          courseware_id: id,
-          courseware_name: name,
-          group_id_selected_info: previewGroupId
-        });
-      }
-      if (type === 'course') {
-        courseForm.value.coursewareInfo.push({
-          courseware_id: id,
-          courseware_name: name,
-          group_id_selected_info: previewGroupId
-        });
-      }
-    });
-  }
-
+  /**
+   * 选择课件
+   * @param {String} course_id 课件id
+   * @param {String} previewGroupId 预览分组id
+   */
   function selectCourse(course_id, previewGroupId) {
     if (course_id.length === 0) {
       Message.warning($t('Key385'));
       return;
     }
+    dialogVisible.value = false;
 
-    const type = form.value.teaching_type;
-    if (type === 10) {
-      getTreeNodeInfo_BookChapterStruct(course_id, 'live', previewGroupId);
-    }
+    let _form = form.value.teaching_type === 10 ? liveForm : courseForm;
+    if (_form.value.coursewareInfo.some(({ courseware_id }) => courseware_id === course_id)) return;
+    GetTreeNodeInfo_BookChapterStruct({ id: course_id }).then(({ name, id }) => {
+      _form.value.coursewareInfo.push({
+        courseware_id: id,
+        courseware_name: name,
+        group_id_selected_info: previewGroupId
+      });
+    });
+  }
 
-    if (type === 11) {
-      getTreeNodeInfo_BookChapterStruct(course_id, 'course', previewGroupId);
-    }
-    dialogVisible.value = false;
+  /**
+   * 修改课件名称
+   * @param {Number} i
+   * @param {String} type
+   * @param {String} name
+   */
+  function changeCourseName(i, type, name) {
+    (type === 'live' ? liveForm.value : courseForm.value).coursewareInfo[i].courseware_name = name;
+    (type === 'live' ? liveForm.value : courseForm.value).coursewareInfo[i].is_custom_name = 'true';
   }
 
+  /**
+   * 删除课件
+   * @param {Number} i
+   * @param {String} type
+   */
   function closeCourse(i, type) {
-    const courseInfo = type === 'live' ? liveForm.value.coursewareInfo : courseForm.value.coursewareInfo;
-    courseInfo.splice(i, 1);
+    (type === 'live' ? liveForm.value : courseForm.value).coursewareInfo.splice(i, 1);
   }
 
   return {
     dialogVisible,
+    changeCourseName,
     dialogClose,
     selectCourse,
     closeCourse

src/views/teacher/create_course/step_one/CourseInfo.vue

@@ -180,7 +180,6 @@ const { formRules } = useForm();
 
         :deep .el-form-item__content {
           display: flex;
-          column-gap: 20px;
           align-items: center;
         }
 

src/views/teacher/create_course/step_one/courseInfo.js

@@ -2,7 +2,6 @@ import { ref, inject } from 'vue';
 import { getMyOrgList } from '@/api/list';
 import { CreateCourse, GetCourseInfo_ContainCSItem, UpdateCourse } from '@/api/course';
 import { useRoute, useRouter } from 'vue-router/composables';
-import { twoDecimal } from '@/utils/validate';
 import { GetUserListByIDList } from '@/api/user';
 import { fileUpload } from '@/api/app';
 import { Message } from 'element-ui';