将create_course 全部改为 setup

src/views/new_task_view/components/teacher/index.vue

@@ -1,9 +1,14 @@
 <template>
-  <div></div>
+  <div class="teacher-view">
+    <ShowFile />
+  </div>
 </template>
 
 <script setup>
 import ShowFile from '@/common/show_file/index.vue';
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.teacher-view {
+}
+</style>

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

@@ -235,349 +235,353 @@
 </template>
 
 <script>
+export default {
+  name: 'NewTask'
+};
+</script>
+
+<script setup>
+import { ref, provide, inject } from 'vue';
 import { GetTaskTeachingTypeList, GetTaskModeList, GetTeacherListByCourseID, GetCourseStudentList } from '@/api/select';
 import { AddTaskToCSItem, GetTreeNodeInfo_BookChapterStruct, GetTaskInfo, UpdateTask, GetCSItem } from '@/api/course';
 import { fileUpload } from '@/api/app';
 import { fileTypeSizeLimit } from '@/utils/validate';
+import { useRoute, useRouter } from 'vue-router/composables';
+import { Message } from 'element-ui';
 
 import SelectCourse from '@/components/select/SelectCourse.vue';
 
-export default {
-  name: 'NewTask',
-  components: { SelectCourse },
-  provide() {
-    return {
-      cs_item_id: this.cs_item_id
-    };
-  },
-  data() {
-    const validateTeacher = (rule, value, callback) => {
-      if (this.form.teaching_type === 10 && !value && !this.is_template) {
-        callback(new Error(this.$i18n.t('Key382')));
-      } else {
-        callback();
-      }
-    };
-    const validateNmae = (rule, value, callback) => {
-      if (value.length <= 0) {
-        callback(new Error(this.$i18n.t('Key384')));
-      } else {
-        callback();
-      }
-    };
-    const { params, query } = this.$route;
-    const is_template = 'is_template' in query ? JSON.parse(query.is_template) : false;
-    return {
-      id: params.id,
-      task_id: query.task_id,
-      time_type: params.time_type,
-      cs_item_id: params.curItemID,
-      is_template,
-      // 任务所属课节
-      curItemID: params.curItemID,
-      dialogVisible: false,
-      cs_item_begin_time: '',
-      cs_item_end_time: '',
-      type_list: [],
-      teacher_list: [],
-      mode_list: [],
-      student_list: [],
-      custom_student_list: [],
-      form: {
-        name: '',
-        teacher_id: '',
-        begin_date: '',
-        begin_date_hour: '00',
-        begin_date_minute: '00',
-        end_date: '',
-        end_date_hour: '00',
-        end_date_minute: '00',
-        teaching_type: 12,
-        content: ''
-      },
-      hourArr: [],
-      minuteArr: [],
-      rules: {
-        name: { trigger: 'blur', validator: validateNmae },
-        teacher_id: { trigger: 'blur', validator: validateTeacher }
-      },
-      liveForm: {
-        coursewareInfo: [],
-        file_info_list: [],
-        courseware_visible_mode: 21,
-        zhibo_record_mode: 32
-      },
-      courseForm: {
-        coursewareInfo: [],
-        task_mode: 'PRACTICE',
-        is_enable_message: true
-      },
-      basicForm: {
-        file_info_list: [],
-        is_enable_homework: true,
-        is_enable_message: true
-      }
+const router = useRouter();
+const route = useRoute();
+const { params, query } = route;
+const is_template = 'is_template' in query ? JSON.parse(query.is_template) : false;
+
+const $t = inject('$t');
+const id = params.id;
+const time_type = ref(params.time_type);
+const cs_item_id = params.curItemID;
+provide('cs_item_id', cs_item_id);
+// 任务所属课节
+const curItemID = params.curItemID;
+
+let hourArr = ref([]);
+let minuteArr = ref([]);
+for (let i = 0; i < 60; i++) {
+  let item = String(i);
+  if (i < 10) item = `0${item}`;
+  if (i < 24) hourArr.value.push(item);
+  minuteArr.value.push(item);
+}
+
+let cs_item_begin_time = ref('');
+let cs_item_end_time = ref('');
+let form = ref({
+  name: '',
+  teacher_id: '',
+  begin_date: '',
+  begin_date_hour: '00',
+  begin_date_minute: '00',
+  end_date: '',
+  end_date_hour: '00',
+  end_date_minute: '00',
+  teaching_type: 12,
+  content: ''
+});
+
+const task_id = query.task_id;
+if (task_id) {
+  getTaskInfo();
+}
+
+const validateTeacher = (rule, value, callback) => {
+  if (form.value.teaching_type === 10 && !value && !is_template) {
+    callback(new Error($t('Key382')));
+  } else {
+    callback();
+  }
+};
+const validateNmae = (rule, value, callback) => {
+  if (value.length <= 0) {
+    callback(new Error($t('Key384')));
+  } else {
+    callback();
+  }
+};
+let rules = ref({
+  name: { trigger: 'blur', validator: validateNmae },
+  teacher_id: { trigger: 'blur', validator: validateTeacher }
+});
+
+let liveForm = ref({
+  coursewareInfo: [],
+  file_info_list: [],
+  courseware_visible_mode: 21,
+  zhibo_record_mode: 32
+});
+
+let courseForm = ref({
+  coursewareInfo: [],
+  task_mode: 'PRACTICE',
+  is_enable_message: true
+});
+
+let basicForm = ref({
+  file_info_list: [],
+  is_enable_homework: true,
+  is_enable_message: true
+});
+
+let type_list = ref([]);
+let teacher_list = ref([]);
+let mode_list = ref([]);
+let student_list = ref([]);
+function init() {
+  GetTaskTeachingTypeList().then(({ type_list: list }) => {
+    type_list.value = list;
+  });
+  if (!is_template) {
+    GetTeacherListByCourseID({ course_id: id }).then(({ teacher_list: list }) => {
+      teacher_list.value = list;
+    });
+  }
+  GetTaskModeList().then(({ mode_list: list }) => {
+    mode_list.value = list;
+  });
+  GetCSItem({ id: cs_item_id }).then(({ begin_time, end_time }) => {
+    cs_item_begin_time.value = begin_time;
+    cs_item_end_time.value = end_time;
+  });
+  if (!is_template) {
+    GetCourseStudentList({ course_id: id, audit_status_list: [1], pay_status: 1 }).then(({ student_list: list }) => {
+      student_list.value = list;
+    });
+  }
+}
+init();
+
+let newTaskForm = ref();
+function addTaskToCSItem() {
+  newTaskForm.value.validate((valid) => {
+    if (!valid) {
+      return false;
+    }
+    const teaching_type = form.value.teaching_type;
+    const data = {
+      cs_item_id,
+      name: form.value.name,
+      time_type: Number(time_type.value),
+      teaching_type,
+      begin_time:
+        form.value.begin_date.length > 0
+          ? `${form.value.begin_date} ${form.value.begin_date_hour}:${form.value.begin_date_minute}`
+          : cs_item_begin_time,
+      end_time:
+        form.value.end_date.length > 0
+          ? `${form.value.end_date} ${form.value.end_date_hour}:${form.value.end_date_minute}`
+          : cs_item_end_time,
+      teacher_id: form.value.teacher_id,
+      content: form.value.content,
+      custom_student_id_list: custom_student_list.value.map(({ student_id }) => student_id)
     };
-  },
-  created() {
-    for (let i = 0; i < 60; i++) {
-      let item = String(i);
-      if (i < 10) item = `0${item}`;
-      if (i < 24) this.hourArr.push(item);
-      this.minuteArr.push(item);
+
+    if (teaching_type === 10) {
+      data['courseware_id_list'] = liveForm.value.coursewareInfo.map(({ courseware_id }) => courseware_id);
+      data['file_id_list'] = liveForm.value.file_info_list.map(({ file_id }) => file_id);
+      data['courseware_visible_mode'] = liveForm.value.courseware_visible_mode;
+      data['zhibo_record_mode'] = liveForm.value.zhibo_record_mode;
+      data['courseware_group_selected_list'] = liveForm.value.coursewareInfo.map(
+        ({ courseware_id, group_id_selected_info }) => {
+          return { courseware_id, group_id_selected_info };
+        }
+      );
     }
 
-    this.init();
-    if (this.task_id) {
-      this.getTaskInfo();
+    if (teaching_type === 11) {
+      data['courseware_id_list'] = courseForm.value.coursewareInfo.map(({ courseware_id }) => courseware_id);
+      data['task_mode'] = courseForm.value.task_mode;
+      data['is_enable_message'] = courseForm.value.is_enable_message;
+      data['courseware_group_selected_list'] = courseForm.value.coursewareInfo.map(
+        ({ courseware_id, group_id_selected_info }) => {
+          return { courseware_id, group_id_selected_info: group_id_selected_info ?? '[]' };
+        }
+      );
     }
-  },
-  methods: {
-    init() {
-      GetTaskTeachingTypeList().then(({ type_list }) => {
-        this.type_list = type_list;
-      });
-      if (!this.is_template) {
-        GetTeacherListByCourseID({ course_id: this.id }).then(({ teacher_list }) => {
-          this.teacher_list = teacher_list;
-        });
-      }
-      GetTaskModeList().then(({ mode_list }) => {
-        this.mode_list = mode_list;
+
+    if (teaching_type === 12) {
+      data['file_id_list'] = basicForm.value.file_info_list.map(({ file_id }) => file_id);
+      data['is_enable_homework'] = basicForm.value.is_enable_homework;
+      data['is_enable_message'] = basicForm.value.is_enable_message;
+    }
+
+    if (task_id) {
+      data['id'] = task_id;
+      UpdateTask(data).then(() => {
+        goBack();
       });
-      GetCSItem({ id: this.cs_item_id }).then(({ begin_time, end_time }) => {
-        this.cs_item_begin_time = begin_time;
-        this.cs_item_end_time = end_time;
+    } else {
+      AddTaskToCSItem(data).then(() => {
+        goBack();
       });
-      if (!this.is_template) {
-        GetCourseStudentList({ course_id: this.id, audit_status_list: [1], pay_status: 1 }).then(({ student_list }) => {
-          this.student_list = student_list;
-        });
-      }
-    },
+    }
+  });
+}
 
-    addTaskToCSItem() {
-      this.$refs.newTaskForm.validate((valid) => {
-        if (!valid) {
-          return false;
-        }
-        const teaching_type = this.form.teaching_type;
-        const data = {
-          cs_item_id: this.cs_item_id,
-          name: this.form.name,
-          time_type: Number(this.time_type),
-          teaching_type,
-          begin_time:
-            this.form.begin_date.length > 0
-              ? `${this.form.begin_date} ${this.form.begin_date_hour}:${this.form.begin_date_minute}`
-              : this.cs_item_begin_time,
-          end_time:
-            this.form.end_date.length > 0
-              ? `${this.form.end_date} ${this.form.end_date_hour}:${this.form.end_date_minute}`
-              : this.cs_item_end_time,
-          teacher_id: this.form.teacher_id,
-          content: this.form.content,
-          custom_student_id_list: this.custom_student_list.map(({ student_id }) => student_id)
-        };
-
-        if (teaching_type === 10) {
-          data['courseware_id_list'] = this.liveForm.coursewareInfo.map(({ courseware_id }) => courseware_id);
-          data['file_id_list'] = this.liveForm.file_info_list.map(({ file_id }) => file_id);
-          data['courseware_visible_mode'] = this.liveForm.courseware_visible_mode;
-          data['zhibo_record_mode'] = this.liveForm.zhibo_record_mode;
-          data['courseware_group_selected_list'] = this.liveForm.coursewareInfo.map(
-            ({ courseware_id, group_id_selected_info }) => {
-              return { courseware_id, group_id_selected_info };
-            }
-          );
-        }
+let custom_student_list = ref([]);
+function selectStudent(i) {
+  const id = student_list.value[i].student_id;
+  const list = custom_student_list.value;
+  const index = list.findIndex(({ student_id }) => student_id === id);
+  index === -1 ? list.push(student_list.value[i]) : list.splice(index, 1);
+}
 
-        if (teaching_type === 11) {
-          data['courseware_id_list'] = this.courseForm.coursewareInfo.map(({ courseware_id }) => courseware_id);
-          data['task_mode'] = this.courseForm.task_mode;
-          data['is_enable_message'] = this.courseForm.is_enable_message;
-          data['courseware_group_selected_list'] = this.courseForm.coursewareInfo.map(
-            ({ courseware_id, group_id_selected_info }) => {
-              return { courseware_id, group_id_selected_info: group_id_selected_info ?? '[]' };
-            }
-          );
-        }
+function deleteStudentItem(id) {
+  custom_student_list.value.splice(
+    custom_student_list.value.findIndex(({ student_id }) => student_id === id),
+    1
+  );
+}
 
-        if (teaching_type === 12) {
-          data['file_id_list'] = this.basicForm.file_info_list.map(({ file_id }) => file_id);
-          data['is_enable_homework'] = this.basicForm.is_enable_homework;
-          data['is_enable_message'] = this.basicForm.is_enable_message;
-        }
+function goBack() {
+  router.push({
+    path: `/create_course_step_table/old_create_task/${id}?is_template=${is_template}&curItemID=${curItemID}`
+  });
+}
 
-        if (this.task_id) {
-          data['id'] = this.task_id;
-          UpdateTask(data).then(() => {
-            this.goBack();
-          });
-        } else {
-          AddTaskToCSItem(data).then(() => {
-            this.goBack();
-          });
-        }
-      });
-    },
-
-    selectStudent(i) {
-      const id = this.student_list[i].student_id;
-      const list = this.custom_student_list;
-      const index = list.findIndex(({ student_id }) => student_id === id);
-      index === -1 ? list.push(this.student_list[i]) : list.splice(index, 1);
-    },
-
-    deleteStudentItem(id) {
-      this.custom_student_list.splice(
-        this.custom_student_list.findIndex(({ student_id }) => student_id === id),
-        1
-      );
-    },
+function upload(file) {
+  if (fileTypeSizeLimit(file.file.name, file.file.size)) {
+    return Message.warning(`${file.file.name}文件大小超出限制`);
+  }
 
-    goBack() {
-      this.$router.push({
-        path: `/create_course_step_table/old_create_task/${this.id}?is_template=${this.is_template}&curItemID=${this.curItemID}`
-      });
-    },
+  fileUpload('Open', file).then(({ file_info_list }) => {
+    const type = form.value.teaching_type;
+    if (type === 10) {
+      liveForm.value.file_info_list = liveForm.value.file_info_list.concat(file_info_list);
+      return;
+    }
 
-    upload(file) {
-      if (fileTypeSizeLimit(file.file.name, file.file.size)) {
-        return this.$message.warning(`${file.file.name}文件大小超出限制`);
-      }
+    if (type === 12) {
+      basicForm.value.file_info_list = basicForm.value.file_info_list.concat(file_info_list);
+    }
+  });
+}
 
-      fileUpload('Open', file).then(({ file_info_list }) => {
-        const type = this.form.teaching_type;
-        if (type === 10) {
-          this.liveForm.file_info_list = this.liveForm.file_info_list.concat(file_info_list);
-          return;
-        }
+function closeFile(i, arr) {
+  arr.splice(i, 1);
+}
 
-        if (type === 12) {
-          this.basicForm.file_info_list = this.basicForm.file_info_list.concat(file_info_list);
-        }
-      });
-    },
+// 选择课件
+let dialogVisible = ref(false);
+function dialogClose() {
+  dialogVisible.value = false;
+}
 
-    closeFile(i, arr) {
-      arr.splice(i, 1);
-    },
+function selectCourse(course_id, previewGroupId) {
+  if (course_id.length === 0) {
+    Message.warning($t('Key385'));
+    return;
+  }
 
-    // 选择课件
-    dialogClose() {
-      this.dialogVisible = false;
-    },
+  const type = form.value.teaching_type;
+  if (type === 10) {
+    getTreeNodeInfo_BookChapterStruct(course_id, 'live', previewGroupId);
+  }
 
-    selectCourse(course_id, previewGroupId) {
-      if (course_id.length === 0) {
-        this.$message.warning(this.$t('Key385'));
-        return;
-      }
+  if (type === 11) {
+    getTreeNodeInfo_BookChapterStruct(course_id, 'course', previewGroupId);
+  }
+  dialogVisible.value = false;
+}
 
-      const type = this.form.teaching_type;
-      if (type === 10) {
-        this.getTreeNodeInfo_BookChapterStruct(course_id, 'live', previewGroupId);
-      }
+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
+      });
+    }
+  });
+}
 
-      if (type === 11) {
-        this.getTreeNodeInfo_BookChapterStruct(course_id, 'course', previewGroupId);
+function closeCourse(i, type) {
+  const courseInfo = type === 'live' ? liveForm.value.coursewareInfo : courseForm.value.coursewareInfo;
+  courseInfo.splice(i, 1);
+}
+
+function getTaskInfo() {
+  GetTaskInfo({ id: task_id }).then(
+    ({
+      begin_time,
+      end_time,
+      time_type: tType,
+      teaching_type,
+      name,
+      teacher_id,
+      content,
+      courseware_list,
+      accessory_list,
+      task_mode,
+      is_enable_homework,
+      is_enable_message,
+      courseware_visible_mode,
+      zhibo_record_mode,
+      cs_item_begin_time: csItemBTime,
+      cs_item_end_time: csItemETime,
+      is_custom_student,
+      custom_student_list: cusStudentList
+    }) => {
+      if (begin_time.length > 0) {
+        const begin = begin_time.split(' ');
+        form.value.begin_date = begin[0];
+        const bTime = begin[1].split(':');
+        form.value.begin_date_hour = bTime[0];
+        form.value.begin_date_minute = bTime[1];
+      }
+      if (end_time.length > 0) {
+        const end = end_time.split(' ');
+        form.value.end_date = end[0];
+        const eTime = end[1].split(':');
+        form.value.end_date_hour = eTime[0];
+        form.value.end_date_minute = eTime[1];
       }
-      this.dialogVisible = false;
-    },
-
-    getTreeNodeInfo_BookChapterStruct(id, type, previewGroupId) {
-      GetTreeNodeInfo_BookChapterStruct({ id }).then(({ name, id }) => {
-        if (type === 'live') {
-          this.liveForm.coursewareInfo.push({
-            courseware_id: id,
-            courseware_name: name,
-            group_id_selected_info: previewGroupId
-          });
-        }
-        if (type === 'course') {
-          this.courseForm.coursewareInfo.push({
-            courseware_id: id,
-            courseware_name: name,
-            group_id_selected_info: previewGroupId
-          });
-        }
-      });
-    },
-
-    closeCourse(i, type) {
-      const courseInfo = type === 'live' ? this.liveForm.coursewareInfo : this.courseForm.coursewareInfo;
-      courseInfo.splice(i, 1);
-    },
-
-    getTaskInfo() {
-      GetTaskInfo({ id: this.task_id }).then(
-        ({
-          begin_time,
-          end_time,
-          time_type,
-          teaching_type,
-          name,
-          teacher_id,
-          content,
-          courseware_list,
-          accessory_list,
-          task_mode,
-          is_enable_homework,
-          is_enable_message,
-          courseware_visible_mode,
-          zhibo_record_mode,
-          cs_item_begin_time,
-          cs_item_end_time,
-          is_custom_student,
-          custom_student_list
-        }) => {
-          if (begin_time.length > 0) {
-            const begin = begin_time.split(' ');
-            this.form.begin_date = begin[0];
-            const bTime = begin[1].split(':');
-            this.form.begin_date_hour = bTime[0];
-            this.form.begin_date_minute = bTime[1];
-          }
-          if (end_time.length > 0) {
-            const end = end_time.split(' ');
-            this.form.end_date = end[0];
-            const eTime = end[1].split(':');
-            this.form.end_date_hour = eTime[0];
-            this.form.end_date_minute = eTime[1];
-          }
 
-          this.cs_item_begin_time = cs_item_begin_time;
-          this.cs_item_end_time = cs_item_end_time;
-          this.time_type = time_type;
-          this.form.teaching_type = teaching_type;
-          this.form.name = name;
-          this.form.teacher_id = teacher_id;
-          this.form.content = content;
-          if (teaching_type === 10) {
-            this.liveForm.coursewareInfo = courseware_list;
-            this.liveForm.file_info_list = accessory_list;
-            this.liveForm.courseware_visible_mode = courseware_visible_mode;
-            this.liveForm.zhibo_record_mode = zhibo_record_mode;
-          }
+      cs_item_begin_time.value = csItemBTime;
+      cs_item_end_time.value = csItemETime;
+      time_type.value = tType;
+      form.value.teaching_type = teaching_type;
+      form.value.name = name;
+      form.value.teacher_id = teacher_id;
+      form.value.content = content;
+      if (teaching_type === 10) {
+        liveForm.value.coursewareInfo = courseware_list;
+        liveForm.value.file_info_list = accessory_list;
+        liveForm.value.courseware_visible_mode = courseware_visible_mode;
+        liveForm.value.zhibo_record_mode = zhibo_record_mode;
+      }
 
-          if (teaching_type === 11) {
-            this.courseForm.coursewareInfo = courseware_list;
-            this.courseForm.task_mode = task_mode;
-          }
+      if (teaching_type === 11) {
+        courseForm.value.coursewareInfo = courseware_list;
+        courseForm.value.task_mode = task_mode;
+      }
 
-          if (teaching_type === 12) {
-            this.basicForm.file_info_list = accessory_list;
-            this.basicForm.is_enable_homework = is_enable_homework === 'true';
-            this.basicForm.is_enable_message = is_enable_message === 'true';
-          }
+      if (teaching_type === 12) {
+        basicForm.value.file_info_list = accessory_list;
+        basicForm.value.is_enable_homework = is_enable_homework === 'true';
+        basicForm.value.is_enable_message = is_enable_message === 'true';
+      }
 
-          if (is_custom_student === 'true') this.custom_student_list = custom_student_list;
-        }
-      );
+      if (is_custom_student === 'true') custom_student_list.value = cusStudentList;
     }
-  }
-};
+  );
+}
 </script>
 
 <style lang="scss">

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

@@ -1,9 +1,9 @@
 <template>
   <div class="course-info">
-    <step-bar :step-number="0" />
+    <StepBar :step-number="0" />
     <div class="course-info-container">
       <el-form
-        ref="form"
+        ref="courseForm"
         :model="form"
         :rules="formRules"
         label-position="left"
@@ -110,7 +110,7 @@
     </div>
 
     <!-- 选择教师 -->
-    <select-teacher
+    <SelectTeacher
       :dialog-visible="dialogVisible"
       :org-id="form.org_id"
       @dialogClose="dialogClose"
@@ -120,208 +120,212 @@
 </template>
 
 <script>
+export default {
+  name: 'CourseInfo'
+};
+</script>
+
+<script setup>
+import { inject, ref } from 'vue';
 import { fileUpload } from '@/api/app';
 import { CreateCourse, GetCourseInfo_ContainCSItem, UpdateCourse } from '@/api/course';
 import { twoDecimal } from '@/utils/validate';
 import { getMyOrgList } from '@/api/list';
 import { GetUserListByIDList } from '@/api/user';
+import { useRoute, useRouter } from 'vue-router/composables';
+import { Message } from 'element-ui';
+import store from '@/store';
 
 import StepBar from '@/views/teacher/create_course/StepBar.vue';
 import SelectTeacher from '@/components/select/SelectTeacher.vue';
 
-export default {
-  name: 'CourseInfo',
-  components: { StepBar, SelectTeacher },
-  data() {
-    const validateName = (rule, value, callback) => {
-      if (value.length <= 0) {
-        callback(new Error(this.$i18n.t('Key345')));
-      } else {
-        callback();
-      }
-    };
-    const validateCountMax = (rule, value, callback) => {
-      if (value < 1 || value > 999) {
-        callback(new Error('学生数量最小为1，最大为999'));
-      } else {
-        callback();
+const $t = inject('$t');
+const route = useRoute();
+const query = route.query;
+const id = query.id;
+const is_template = 'is_template' in query ? query.is_template === 'true' : false;
+const is_use_template = 'is_use_template' in query ? query.is_use_template === 'true' : false;
+const template_id = query.template_id ?? '';
+
+const validateName = (rule, value, callback) => {
+  if (value.length <= 0) {
+    callback(new Error($t('Key345')));
+  } else {
+    callback();
+  }
+};
+const validateCountMax = (rule, value, callback) => {
+  if (value < 1 || value > 999) {
+    callback(new Error('学生数量最小为1，最大为999'));
+  } else {
+    callback();
+  }
+};
+const formRules = {
+  name: { trigger: 'blur', validator: validateName },
+  student_count_max: { trigger: 'blur', validator: validateCountMax }
+};
+
+let orgList = ref([]);
+getMyOrgList().then(({ org_list }) => {
+  orgList.value = org_list;
+});
+
+if (id || is_use_template) {
+  getCourseInfo_ContainCSItem(id ?? template_id);
+}
+// 创建课程时，默认授课教师是自己
+if (!id && !is_template) {
+  form.value.teacher_id_list.push(store.state.user.user_code);
+  getUserList();
+}
+
+let user_list = ref([]);
+let form = ref({
+  imageUrl: '',
+  picture_id: '',
+  name: '',
+  intro: '',
+  org_id: '',
+  teacher_id_list: [],
+  begin_date: '',
+  end_date: '',
+  student_count_max: 1,
+  is_auto_close: false,
+  student_enter_control_type: 0,
+  price: '0.00',
+  is_enable_KHPJ: false,
+  is_enable_XYZP: false
+});
+function getCourseInfo_ContainCSItem(id) {
+  GetCourseInfo_ContainCSItem({ id }).then(
+    ({
+      name,
+      org_id,
+      picture_id,
+      picture_url,
+      intro,
+      begin_date,
+      end_date,
+      student_count_max,
+      is_auto_close,
+      student_enter_control_type,
+      price,
+      is_enable_KHPJ,
+      is_enable_XYZP,
+      teacher_list,
+      teacher_id_list
+    }) => {
+      form.value.name = name;
+      form.value.org_id = org_id;
+      form.value.picture_id = picture_id;
+      form.value.imageUrl = picture_url;
+      form.value.intro = intro;
+      form.value.begin_date = begin_date;
+      form.value.end_date = end_date;
+      form.value.student_count_max = student_count_max;
+      form.value.is_auto_close = is_auto_close === 'true';
+      form.value.student_enter_control_type = student_enter_control_type;
+      form.value.price = price;
+      form.value.is_enable_KHPJ = is_enable_KHPJ === 'true';
+      form.value.is_enable_XYZP = is_enable_XYZP === 'true';
+      if (!is_template) {
+        form.value.teacher_id_list = teacher_id_list;
+        teacher_list.forEach((item) => {
+          user_list.value.push({ id: item.teacher_id, real_name: item.teacher_name });
+        });
       }
-    };
-
-    const query = this.$route.query;
-
-    return {
-      id: query.id,
-      is_template: 'is_template' in query ? query.is_template === 'true' : false,
-      is_use_template: 'is_use_template' in query ? query.is_use_template === 'true' : false,
-      template_id: 'template_id' in query ? query.template_id : '',
-      form: {
-        imageUrl: '',
-        picture_id: '',
-        name: '',
-        intro: '',
-        org_id: '',
-        teacher_id_list: [],
-        begin_date: '',
-        end_date: '',
-        student_count_max: 1,
-        is_auto_close: false,
-        student_enter_control_type: 0,
-        price: '0.00',
-        is_enable_KHPJ: false,
-        is_enable_XYZP: false
-      },
-      formRules: {
-        name: { trigger: 'blur', validator: validateName },
-        student_count_max: { trigger: 'blur', validator: validateCountMax }
-      },
-      orgList: [],
-      user_list: [],
-      dialogVisible: false
-    };
-  },
-  created() {
-    getMyOrgList().then(({ org_list }) => {
-      this.orgList = org_list;
-    });
-    if (this.id) {
-      this.getCourseInfo_ContainCSItem(this.id);
-    }
-    if (this.is_use_template) {
-      this.getCourseInfo_ContainCSItem(this.template_id);
-    }
-    // 创建课程时，默认授课教师是自己
-    if (!this.id && !this.is_template) {
-      this.form.teacher_id_list.push(this.$store.state.user.user_code);
-      this.getUserList();
     }
-  },
-  methods: {
-    nextStep() {
-      this.$refs.form.validate((valid) => {
-        if (valid) {
-          if (this.id) {
-            this.form.id = this.id;
-            UpdateCourse(this.form).then(() => {
-              this.$message.success(this.$i18n.t('Key346'));
-              this.$router.push({
-                path: `/create_course_step_table/select_book/${this.id}?is_template=${this.is_template}`
-              });
-            });
-          } else {
-            this.form.is_template = this.is_template;
-            this.form.is_use_template = this.is_use_template;
-            this.form.template_id = this.template_id;
-
-            CreateCourse(this.form).then((res) => {
-              this.$message.success(this.$i18n.t('Key347'));
-              this.$router.push({
-                path: `/create_course_step_table/select_book/${res.id}?is_template=${this.is_template}`
-              });
-            });
-          }
-        } else {
-          return false;
-        }
-      });
-    },
-    getCourseInfo_ContainCSItem(id) {
-      GetCourseInfo_ContainCSItem({ id }).then(
-        ({
-          name,
-          org_id,
-          picture_id,
-          picture_url,
-          intro,
-          begin_date,
-          end_date,
-          student_count_max,
-          is_auto_close,
-          student_enter_control_type,
-          price,
-          is_enable_KHPJ,
-          is_enable_XYZP,
-          teacher_list
-        }) => {
-          this.form.name = name;
-          this.form.org_id = org_id;
-          this.form.picture_id = picture_id;
-          this.form.imageUrl = picture_url;
-          this.form.intro = intro;
-          this.form.begin_date = begin_date;
-          this.form.end_date = end_date;
-          this.form.student_count_max = student_count_max;
-          this.form.is_auto_close = is_auto_close === 'true';
-          this.form.student_enter_control_type = student_enter_control_type;
-          this.form.price = price;
-          this.form.is_enable_KHPJ = is_enable_KHPJ === 'true';
-          this.form.is_enable_XYZP = is_enable_XYZP === 'true';
-          if (!this.is_template) {
-            teacher_list.forEach((item) => {
-              this.form.teacher_id_list.push(item.teacher_id);
-              this.user_list.push({ id: item.teacher_id, real_name: item.teacher_name });
-            });
-          }
-        }
-      );
-    },
-    beforeUpload(file) {
-      const isImage = /^image/.test(file.type);
-      if (!isImage) {
-        this.$message.error(this.$i18n.t('Key348'));
-      }
-      return isImage;
-    },
-    upload(file) {
-      if (file.file.size / 1048576 > 2) {
-        return this.$message.warning(`${file.file.name}文件大小超出限制`);
-      }
-      fileUpload('Open', file).then(({ file_info_list }) => {
-        if (file_info_list.length > 0) {
-          const { file_url, file_id } = file_info_list[0];
-          this.form.imageUrl = file_url;
-          this.form.picture_id = file_id;
-        }
+  );
+}
+
+const router = useRouter();
+let courseForm = ref();
+function nextStep() {
+  courseForm.value.validate((valid) => {
+    if (!valid) return false;
+    if (id) {
+      form.value.id = id;
+      UpdateCourse(form.value).then(() => {
+        Message.success($t('Key346'));
+        router.push({
+          path: `/create_course_step_table/select_book/${id}?is_template=${is_template}`
+        });
       });
-    },
-    price(val) {
-      this.form.price = twoDecimal(val);
-    },
-
-    changeStudent(val) {
-      this.form.student_count_max = val.length === 0 ? '' : Number(val.replace(/[^\d]/g, ''));
-    },
-
-    // 对话框方法
-    selectTeacher() {
-      if (this.form.org_id) {
-        this.dialogVisible = true;
-      } else {
-        this.$message.warning(this.$i18n.t('Key349'));
-      }
-    },
-    dialogClose() {
-      this.dialogVisible = false;
-    },
-    selectTeaher(teacherList) {
-      this.form.teacher_id_list = this.form.teacher_id_list.concat(teacherList);
-      this.dialogVisible = false;
-      this.getUserList();
-    },
-    getUserList() {
-      GetUserListByIDList({ id_list: this.form.teacher_id_list }).then(({ user_list }) => {
-        this.user_list = user_list;
+    } else {
+      form.value.is_template = is_template;
+      form.value.is_use_template = is_use_template;
+      form.value.template_id = template_id;
+
+      CreateCourse(form.value).then(({ id }) => {
+        Message.success($t('Key347'));
+        router.push({
+          path: `/create_course_step_table/select_book/${id}?is_template=${is_template}`
+        });
       });
-    },
-    // 授课教师 tag 删除事件
-    tagClose(id, index) {
-      this.user_list.splice(index, 1);
+    }
+  });
+}
+
+function beforeUpload(file) {
+  const isImage = /^image/.test(file.type);
+  if (!isImage) {
+    Message.error($t('Key348'));
+  }
+  return isImage;
+}
 
-      const teacherList = this.form.teacher_id_list;
-      teacherList.splice(teacherList.indexOf(id), 1);
+function upload(file) {
+  if (file.file.size / 1048576 > 2) {
+    return Message.warning(`${file.file.name}文件大小超出限制`);
+  }
+  fileUpload('Open', file).then(({ file_info_list }) => {
+    if (file_info_list.length > 0) {
+      const { file_url, file_id } = file_info_list[0];
+      form.value.imageUrl = file_url;
+      form.value.picture_id = file_id;
     }
+  });
+}
+
+function price(val) {
+  form.value.price = twoDecimal(val);
+}
+
+function changeStudent(val) {
+  form.value.student_count_max = val.length === 0 ? '' : Number(val.replace(/[^\d]/g, ''));
+}
+
+// 对话框方法
+let dialogVisible = ref(false);
+function selectTeacher() {
+  if (form.value.org_id) {
+    dialogVisible.value = true;
+  } else {
+    Message.warning($t('Key349'));
   }
-};
+}
+function dialogClose() {
+  dialogVisible.value = false;
+}
+function getUserList() {
+  GetUserListByIDList({ id_list: form.value.teacher_id_list }).then(({ user_list: list }) => {
+    user_list.value = list;
+  });
+}
+function selectTeaher(teacherList) {
+  form.value.teacher_id_list = form.value.teacher_id_list.concat(teacherList);
+  dialogVisible.value = false;
+  getUserList();
+}
+
+// 授课教师 tag 删除事件
+function tagClose(id, index) {
+  user_list.value.splice(index, 1);
+
+  const teacherList = form.value.teacher_id_list;
+  teacherList.splice(teacherList.indexOf(id), 1);
+}
 </script>
 
 <style lang="scss">

src/views/teacher/create_course/step_three_old/AddItem.vue

@@ -10,7 +10,7 @@
     :show-close="false"
     @close="dialogClose"
   >
-    <el-form ref="itemForm" :model="itemForm" :rules="itemRules" label-width="100px" label-position="left">
+    <el-form ref="curForm" :model="itemForm" :rules="itemRules" label-width="100px" label-position="left">
       <el-form-item :label="$t('Key270')" prop="name">
         <el-input v-model="itemForm.name" class="item-name" maxlength="30" />
       </el-form-item>
@@ -38,108 +38,115 @@
 import { AddCSItemToCourse, GetCSItem, UpdateCSItem } from '@/api/course';
 
 export default {
-  name: 'AddItem',
-  props: {
-    dialogVisible: {
-      default: false,
-      type: Boolean
-    },
-    courseId: {
-      default: '',
-      type: String
-    },
-    id: {
-      default: '',
-      type: String
-    },
-    type: {
-      default: 'add',
-      type: String
-    }
+  name: 'AddItem'
+};
+</script>
+
+<script setup>
+import { ref, watch, inject } from 'vue';
+
+const props = defineProps({
+  dialogVisible: {
+    default: false,
+    type: Boolean
   },
-  data() {
-    const validateName = (rule, value, callback) => {
-      if (value.length <= 0) {
-        callback(new Error(this.$i18n.t('Key359')));
-      } else {
-        callback();
-      }
-    };
-    return {
-      loading: false,
-      itemForm: {
-        name: '',
-        begin_time: '',
-        end_time: ''
-      },
-      itemRules: {
-        name: { trigger: 'blur', validator: validateName }
-      }
-    };
+  courseId: {
+    default: '',
+    type: String
   },
-  watch: {
-    type(newVal) {
-      if (newVal === 'edit') {
-        return this.getCSItem();
-      }
-      this.itemForm = { name: '', begin_time: '', end_time: '' };
-    }
+  id: {
+    default: '',
+    type: String
   },
-  methods: {
-    addCSItem() {
-      this.$refs.itemForm.validate((valid) => {
-        if (!valid) return false;
-
-        const data = {
-          name: this.itemForm.name,
-          begin_time: `${this.itemForm.begin_time} 00:00:00`,
-          end_time: `${this.itemForm.end_time} 23:59:59`
-        };
-        this.loading = true;
-
-        if (this.type === 'add') {
-          data.course_id = this.courseId;
-          AddCSItemToCourse(data)
-            .then(() => {
-              this.loading = false;
-              this.$emit('dialogConfirm', this.type);
-            })
-            .catch(() => {
-              this.loading = false;
-            });
-        }
-
-        if (this.type === 'edit') {
-          data.id = this.id;
-          UpdateCSItem(data)
-            .then(() => {
-              this.loading = false;
-              this.$emit('dialogConfirm', this.type);
-            })
-            .catch(() => {
-              this.loading = false;
-            });
-        }
-      });
-    },
+  type: {
+    default: 'add',
+    type: String
+  }
+});
+const emits = defineEmits(['dialogClose', 'dialogConfirm']);
+
+let itemForm = ref({
+  name: '',
+  begin_time: '',
+  end_time: ''
+});
+
+const $t = inject('$t');
+const validateName = (rule, value, callback) => {
+  if (value.length <= 0) {
+    callback(new Error($t('Key359')));
+  } else {
+    callback();
+  }
+};
+let itemRules = ref({
+  name: { trigger: 'blur', validator: validateName }
+});
+
+let loading = ref(false);
+let curForm = ref();
+function addCSItem() {
+  curForm.value.validate((valid) => {
+    if (!valid) return false;
+
+    const data = {
+      name: itemForm.value.name,
+      begin_time: `${itemForm.value.begin_time} 00:00:00`,
+      end_time: `${itemForm.value.end_time} 23:59:59`
+    };
+    loading.value = true;
+
+    if (props.type === 'add') {
+      data.course_id = props.courseId;
+      AddCSItemToCourse(data)
+        .then(() => {
+          loading.value = false;
+          emits('dialogConfirm', props.type);
+        })
+        .catch(() => {
+          loading.value = false;
+        });
+    }
 
-    getCSItem() {
-      GetCSItem({ id: this.id }).then(({ begin_time, end_time, name }) => {
-        if (begin_time.length > 0) {
-          this.itemForm.begin_time = begin_time.split(' ')[0];
-        }
-        if (end_time.length > 0) {
-          this.itemForm.end_time = end_time.split(' ')[0];
-        }
-        this.itemForm.name = name;
-      });
-    },
+    if (props.type === 'edit') {
+      data.id = props.id;
+      UpdateCSItem(data)
+        .then(() => {
+          loading.value = false;
+          emits('dialogConfirm', props.type);
+        })
+        .catch(() => {
+          loading.value = false;
+        });
+    }
+  });
+}
 
-    dialogClose() {
-      this.$emit('dialogClose');
+watch(
+  () => props.type,
+  (newVal) => {
+    if (newVal === 'edit') {
+      return getCSItem();
     }
+    itemForm.value = { name: '', begin_time: '', end_time: '' };
   }
-};
+);
+
+function getCSItem() {
+  GetCSItem({ id: props.id }).then(({ begin_time, end_time, name }) => {
+    if (begin_time.length > 0) {
+      itemForm.value.begin_time = begin_time.split(' ')[0];
+    }
+    if (end_time.length > 0) {
+      itemForm.value.end_time = end_time.split(' ')[0];
+    }
+    itemForm.value.name = name;
+  });
+}
+
+function dialogClose() {
+  emits('dialogClose');
+}
 </script>
 
 <style lang="scss">

src/views/teacher/create_course/step_three_old/CreateTask.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="task">
-    <step-bar :step-number="2" />
+    <StepBar :step-number="2" />
     <!-- 课程基本信息 -->
     <div class="task-course-info">
       <div class="cover">
@@ -310,10 +310,10 @@
     </div>
 
     <!-- 课节弹出页 -->
-    <add-item
+    <AddItem
       :id="itemId"
       :course-id="id"
-      :type="type"
+      :type="curType"
       :dialog-visible="dialogVisible"
       @dialogClose="dialogClose"
       @dialogConfirm="dialogConfirm"
@@ -322,8 +322,13 @@
 </template>
 
 <script>
-import StepBar from '@/views/teacher/create_course/StepBar.vue';
-import AddItem from './AddItem.vue';
+export default {
+  name: 'CreateTask'
+};
+</script>
+
+<script setup>
+import { ref, computed, watch, inject } from 'vue';
 import { fileUpload } from '@/api/app';
 import {
   GetCourseInfo_ContainCSItem,
@@ -334,200 +339,193 @@ import {
   DeleteTask
 } from '@/api/course';
 import { fileTypeSizeLimit } from '@/utils/validate';
+import { useRoute, useRouter } from 'vue-router/composables';
+import { Message, MessageBox } from 'element-ui';
 
-export default {
-  name: 'CreateTask',
-  components: {
-    StepBar,
-    AddItem
-  },
-  data() {
-    const query = this.$route.query;
-    const is_template = 'is_template' in query ? query.is_template === 'true' : false;
-
-    return {
-      id: this.$route.params.id,
-      is_template,
-      name: '',
-      closeLink: JSON.parse(is_template) ? '/main?tab=TemplateList' : '/create_course',
-      picture_url: '',
-      begin_date: '',
-      end_date: '',
-      cs_item_list: [],
-      curItemID: '',
-      dialogVisible: false,
-      type: 'add',
-      itemId: '',
-      itemInfoBox: {
-        name: '',
-        date: [],
-        pre_task_list: [],
-        mid_task_list: [],
-        after_task_list: [],
-        learning_material_list: []
-      }
-    };
-  },
-  computed: {
-    taskLength() {
-      return (
-        this.itemInfoBox.pre_task_list.length +
-        this.itemInfoBox.mid_task_list.length +
-        this.itemInfoBox.after_task_list.length
-      );
-    }
-  },
-  watch: {
-    curItemID() {
-      this.getCSItemInfoBox();
+import StepBar from '@/views/teacher/create_course/StepBar.vue';
+import AddItem from './AddItem.vue';
+
+const route = useRoute();
+const query = route.query;
+const $t = inject('$t');
+const is_template = 'is_template' in query ? query.is_template === 'true' : false;
+
+const id = route.params.id;
+const closeLink = JSON.parse(is_template) ? '/main?tab=TemplateList' : '/create_course';
+let name = ref('');
+let picture_url = ref('');
+let begin_date = ref('');
+let end_date = ref('');
+let cs_item_list = ref([]);
+
+let curItemID = ref('');
+watch(
+  () => curItemID.value,
+  () => {
+    getCSItemInfoBox();
+  }
+);
+
+let dialogVisible = ref(false);
+let curType = ref('add');
+let itemId = ref('');
+let itemInfoBox = ref({
+  name: '',
+  date: [],
+  pre_task_list: [],
+  mid_task_list: [],
+  after_task_list: [],
+  learning_material_list: []
+});
+let taskLength = computed(() => {
+  let { pre_task_list, mid_task_list, after_task_list } = itemInfoBox.value;
+  return pre_task_list.length + mid_task_list.length + after_task_list.length;
+});
+
+function getCourseInfo(isRefresh = false) {
+  GetCourseInfo_ContainCSItem({ id }).then(
+    ({ name: na, picture_url: pUrl, begin_date: bDate, end_date: eDate, cs_item_list: list }) => {
+      name.value = na;
+      picture_url.value = pUrl;
+      begin_date.value = bDate;
+      end_date.value = eDate;
+      cs_item_list.value = list;
+      if (cs_item_list.value.length <= 0) return;
+      if (isRefresh) return getCSItemInfoBox();
+      const cItemID = 'curItemID' in route.query ? route.query.curItemID : '';
+      curItemID.value = cItemID || cs_item_list.value[0].id;
     }
-  },
-  created() {
-    this.getCourseInfo();
-  },
-  methods: {
-    getCourseInfo(isRefresh = false) {
-      GetCourseInfo_ContainCSItem({ id: this.id }).then(({ name, picture_url, begin_date, end_date, cs_item_list }) => {
-        this.name = name;
-        this.picture_url = picture_url;
-        this.begin_date = begin_date;
-        this.end_date = end_date;
-        this.cs_item_list = cs_item_list;
-        if (cs_item_list.length <= 0) return;
-        if (isRefresh) return this.getCSItemInfoBox();
-        const curItemID = 'curItemID' in this.$route.query ? this.$route.query.curItemID : '';
-        this.curItemID = curItemID || cs_item_list[0].id;
-      });
-    },
+  );
+}
+getCourseInfo();
+
+const router = useRouter();
+function preStep() {
+  router.push({
+    path: `/create_course_step_table/select_book/${id}?is_template=${is_template}`
+  });
+}
 
-    preStep() {
-      this.$router.push({
-        path: `/create_course_step_table/select_book/${this.id}?is_template=${this.is_template}`
+// 课节处理
+function handleCSItem({ id, type }) {
+  if (type === 'delete') {
+    MessageBox.confirm($t('Key360'), $t('Key361'), {
+      confirmButtonText: $t('Key94'),
+      cancelButtonText: $t('Key83'),
+      type: 'warning'
+    }).then(() => {
+      DeleteCSItem({ id }).then(() => {
+        Message.success($t('Key362'));
+        getCourseInfo();
       });
-    },
-
-    // 课节处理
-    handleCSItem({ id, type }) {
-      if (type === 'delete') {
-        this.$confirm(this.$i18n.t('Key360'), this.$i18n.t('Key361'), {
-          confirmButtonText: this.$i18n.t('Key94'),
-          cancelButtonText: this.$i18n.t('Key83'),
-          type: 'warning'
-        }).then(() => {
-          DeleteCSItem({ id }).then(() => {
-            this.$message.success(this.$i18n.t('Key362'));
-            this.getCourseInfo();
-          });
-        });
-      }
+    });
+  }
 
-      if (type === 'edit') {
-        this.dialogVisible = true;
-        this.itemId = id;
-        this.type = 'edit';
-      }
+  if (type === 'edit') {
+    dialogVisible.value = true;
+    itemId.value = id;
+    curType.value = 'edit';
+  }
 
-      if (type === 'add') {
-        this.dialogVisible = true;
-        this.itemId = id;
-        this.type = 'add';
-      }
-    },
+  if (type === 'add') {
+    dialogVisible.value = true;
+    itemId.value = id;
+    curType.value = 'add';
+  }
+}
 
-    dialogConfirm(type) {
-      this.dialogVisible = false;
-      this.type = '';
-      if (type === 'add') {
-        this.getCourseInfo();
-      }
-      if (type === 'edit') {
-        this.getCourseInfo(true);
-      }
-    },
-
-    dialogClose() {
-      this.dialogVisible = false;
-      this.type = '';
-    },
-
-    getCSItemInfoBox() {
-      GetCSItemInfoBox({ id: this.curItemID }).then(
-        ({ name, begin_time, end_time, pre_task_list, mid_task_list, after_task_list, learning_material_list }) => {
-          this.itemInfoBox.name = name;
-          this.itemInfoBox.date = [begin_time.split(' ')[0], end_time.split(' ')[0]];
-          this.itemInfoBox.pre_task_list = pre_task_list;
-          this.itemInfoBox.mid_task_list = mid_task_list;
-          this.itemInfoBox.after_task_list = after_task_list;
-          this.itemInfoBox.learning_material_list = learning_material_list;
-        }
-      );
-    },
+function dialogConfirm(type) {
+  dialogVisible.value = false;
+  curType.value = '';
+  if (type === 'add') {
+    getCourseInfo();
+  }
+  if (type === 'edit') {
+    getCourseInfo(true);
+  }
+}
 
-    upload(file) {
-      if (fileTypeSizeLimit(file.file.name, file.file.size)) {
-        return this.$message.warning(`${file.file.name}文件大小超出限制`);
-      }
+function dialogClose() {
+  dialogVisible.value = false;
+  curType.value = '';
+}
 
-      fileUpload('Open', file).then(({ file_info_list }) => {
-        if (file_info_list.length > 0) {
-          AddLearningMaterialToCSItem({
-            cs_item_id: this.curItemID,
-            file_id: file_info_list[0].file_id
-          }).then(({ file_id, file_name, file_url }) => {
-            this.itemInfoBox.learning_material_list.push({ file_id, file_name, file_url });
-          });
-        }
-      });
-    },
-
-    deleteMaterialFile(i, file_id) {
-      this.$confirm(this.$i18n.t('Key363'), this.$i18n.t('Key361'), {
-        confirmButtonText: this.$i18n.t('Key94'),
-        cancelButtonText: this.$i18n.t('Key83'),
-        type: 'warning'
-      }).then(() => {
-        DeleteLearningMaterialFromCSItem({ cs_item_id: this.curItemID, file_id }).then(() => {
-          this.$message.success(this.$i18n.t('Key364'));
-          this.itemInfoBox.learning_material_list.splice(i, 1);
-        });
+function getCSItemInfoBox() {
+  GetCSItemInfoBox({ id: curItemID.value }).then(
+    ({ name, begin_time, end_time, pre_task_list, mid_task_list, after_task_list, learning_material_list }) => {
+      itemInfoBox.value.name = name;
+      itemInfoBox.value.date = [begin_time.split(' ')[0], end_time.split(' ')[0]];
+      itemInfoBox.value.pre_task_list = pre_task_list;
+      itemInfoBox.value.mid_task_list = mid_task_list;
+      itemInfoBox.value.after_task_list = after_task_list;
+      itemInfoBox.value.learning_material_list = learning_material_list;
+    }
+  );
+}
+
+function upload(file) {
+  if (fileTypeSizeLimit(file.file.name, file.file.size)) {
+    return Message.warning(`${file.file.name}文件大小超出限制`);
+  }
+
+  fileUpload('Open', file).then(({ file_info_list }) => {
+    if (file_info_list.length > 0) {
+      AddLearningMaterialToCSItem({
+        cs_item_id: curItemID.value,
+        file_id: file_info_list[0].file_id
+      }).then(({ file_id, file_name, file_url }) => {
+        itemInfoBox.value.learning_material_list.push({ file_id, file_name, file_url });
       });
-    },
+    }
+  });
+}
+
+function deleteMaterialFile(i, file_id) {
+  MessageBox.confirm($t('Key363'), $t('Key361'), {
+    confirmButtonText: $t('Key94'),
+    cancelButtonText: $t('Key83'),
+    type: 'warning'
+  }).then(() => {
+    DeleteLearningMaterialFromCSItem({ cs_item_id: curItemID.value, file_id }).then(() => {
+      Message.success($t('Key364'));
+      itemInfoBox.value.learning_material_list.splice(i, 1);
+    });
+  });
+}
 
-    // 任务处理
-    newTask(time_type) {
-      if (!this.curItemID) {
-        this.$message.warning(this.$i18n.t('Key365'));
-        return;
+// 任务处理
+function newTask(time_type) {
+  if (!curItemID.value) {
+    Message.warning($t('Key365'));
+    return;
+  }
+  router.push({
+    path: `/create_course_step_table/new_task/${time_type}/${id}/${curItemID.value}?is_template=${is_template}`
+  });
+}
+
+function handleTask({ id, type, time_type }) {
+  if (type === 'edit') {
+    router.push({
+      path: `/create_course_step_table/new_task/${time_type}/${id}/${curItemID.value}?is_template=${is_template}`,
+      query: {
+        task_id: id
       }
-      this.$router.push({
-        path: `/create_course_step_table/new_task/${time_type}/${this.id}/${this.curItemID}?is_template=${this.is_template}`
+    });
+  }
+  if (type === 'delete') {
+    MessageBox.confirm($t('Key636'), $t('Key361'), {
+      confirmButtonText: $t('Key94'),
+      cancelButtonText: $t('Key83'),
+      type: 'warning'
+    }).then(() => {
+      DeleteTask({ id }).then(() => {
+        Message.success($t('Key366'));
+        getCSItemInfoBox();
       });
-    },
-
-    handleTask({ id, type, time_type }) {
-      if (type === 'edit') {
-        this.$router.push({
-          path: `/create_course_step_table/new_task/${time_type}/${this.id}/${this.curItemID}?is_template=${this.is_template}`,
-          query: {
-            task_id: id
-          }
-        });
-      }
-      if (type === 'delete') {
-        this.$confirm(this.$i18n.t('Key636'), this.$i18n.t('Key361'), {
-          confirmButtonText: this.$i18n.t('Key94'),
-          cancelButtonText: this.$i18n.t('Key83'),
-          type: 'warning'
-        }).then(() => {
-          DeleteTask({ id }).then(() => {
-            this.$message.success(this.$i18n.t('Key366'));
-            this.getCSItemInfoBox();
-          });
-        });
-      }
-    }
+    });
   }
-};
+}
 </script>
 
 <style lang="scss" scoped>