update

src/App.vue

@@ -11,7 +11,7 @@
 </template>
 
 <script>
-import { getConfig, removeToken } from '@/utils/auth';
+import { getConfig, getToken, removeToken } from '@/utils/auth';
 import Cookies from 'js-cookie';
 
 import ProgressBar from '@/common/progress_bar/index.vue';
@@ -36,19 +36,19 @@ export default {
   },
   created() {
     this.handleUserAgentRoot();
-    ['click', 'mousewheel', 'mousemove'].forEach((item) => {
-      window.addEventListener(item, () => {
-        sessionStorage.setItem('lastClickTime', new Date().getTime());
-      });
-    });
-  },
-  mounted() {
-    sessionStorage.setItem('lastClickTime', new Date().getTime());
-    this.isTimeout();
-  },
-  beforeDestroy() {
-    clearInterval(this.timeout);
+    // ['click', 'mousewheel', 'mousemove'].forEach((item) => {
+    //   window.addEventListener(item, () => {
+    //     sessionStorage.setItem('lastClickTime', new Date().getTime());
+    //   });
+    // });
   },
+  // mounted() {
+  //   sessionStorage.setItem('lastClickTime', new Date().getTime());
+  //   this.isTimeout();
+  // },
+  // beforeDestroy() {
+  //   clearInterval(this.timeout);
+  // },
   methods: {
     handleUserAgentRoot() {
       if (!sessionStorage.getItem('useragent_root_close') && navigator.userAgent.indexOf('Chrome') === -1) {
@@ -58,23 +58,23 @@ export default {
     handleClickUserAgent() {
       sessionStorage.setItem('useragent_root_close', true);
       this.userAgentTipShow = false;
-    },
-    isTimeout() {
-      clearInterval(this.timeout);
-      this.timeout = setInterval(() => {
-        let nowTime = new Date().getTime();
-        let { token } = getConfig();
-        let { user_connection_timeout_duration, sys_home_url } = token;
-        if (nowTime - Number(sessionStorage.getItem('lastClickTime')) > 1000 * user_connection_timeout_duration) {
-          clearInterval(this.timeout);
-          sessionStorage.removeItem('SysList');
-          removeToken();
-          Cookies.remove('JSESSIONID');
-          sessionStorage.removeItem('useragent_root_close');
-          window.location.href = sys_home_url;
-        }
-      }, 1000);
     }
+    // isTimeout() {
+    //   clearInterval(this.timeout);
+    //   this.timeout = setInterval(() => {
+    //     let nowTime = new Date().getTime();
+    //     let { token } = getConfig();
+    //     let { user_connection_timeout_duration, sys_home_url } = token;
+    //     if (nowTime - Number(sessionStorage.getItem('lastClickTime')) > 1000 * user_connection_timeout_duration) {
+    //       clearInterval(this.timeout);
+    //       sessionStorage.removeItem('SysList');
+    //       removeToken();
+    //       Cookies.remove('JSESSIONID');
+    //       sessionStorage.removeItem('useragent_root_close');
+    //       window.location.href = sys_home_url;
+    //     }
+    //   }, 1000);
+    // }
   }
 };
 </script>

src/common/progress_bar/index.vue

@@ -7,15 +7,19 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex';
-
 export default {
-  computed: {
-    ...mapGetters(['showProgress', 'percentage'])
-  }
+  name: 'ProgressBar'
 };
 </script>
 
+<script setup>
+import { computed } from 'vue';
+import store from '@/store';
+
+let showProgress = computed(() => store.getters.showProgress);
+let percentage = computed(() => store.getters.percentage);
+</script>
+
 <style lang="scss" scoped>
 .progress {
   position: fixed;

src/layouts/components/LayoutHeader.vue

@@ -138,7 +138,7 @@ export default {
       window.location.href = '/';
     },
     QuitLogin() {
-      removeToken();
+      this.$store.dispatch('user/signOut');
       sessionStorage.removeItem('useragent_root_close');
       this.userShow = false;
       this.userMessage = null;

src/store/modules/user.js

@@ -48,8 +48,7 @@ const mutations = {
 
 const actions = {
   // 登录
-  login({ commit }, userInfo) {
-    const { loginForm } = userInfo;
+  login({ commit }, loginForm) {
     return new Promise((reslove, reject) => {
       login(loginForm)
         .then((response) => {

src/views/login/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="login-container">
     <el-form
-      ref="loginForm"
+      ref="curForm"
       :model="loginForm"
       :rules="loginRules"
       class="login-form"
@@ -82,127 +82,128 @@
 </template>
 
 <script>
+export default {
+  name: 'LoginPage'
+};
+</script>
+
+<script setup>
+import { ref, inject } from 'vue';
 import { GetVerificationCodeImage } from '@/api/app';
 import { SendVerificationCode } from '@/api/user';
 import { getConfigInformation } from '@/utils/index';
+import { Message } from 'element-ui';
+import { useRouter } from 'vue-router/composables';
 import md5 from 'md5';
+import store from '@/store';
 
-export default {
-  data() {
-    const validateUsername = (rule, value, callback) => {
-      if (value.length <= 0) {
-        callback(new Error(this.$i18n.t('Key26')));
-      } else {
-        callback();
-      }
-    };
-    const validatePassword = (rule, value, callback) => {
-      if (value.length < 6) {
-        callback(new Error(this.$i18n.t('Key655')));
-      } else {
-        callback();
-      }
-    };
+const $t = inject('$t');
 
-    return {
-      loginForm: {
-        user_name: '',
-        password: '',
-        user_type: '',
-        is_password_md5: 'true',
-        verification_code_image_id: '',
-        verification_code_image_text: '',
-        dynamic_verification_type: 'EMAIL',
-        phone_or_email: '',
-        dynamic_verification_code: ''
-      },
-      loginRules: {
-        user_name: [{ trigger: 'blur', validator: validateUsername }],
-        password: [{ trigger: 'blur', validator: validatePassword }],
-        verification_code_image_text: [{ required: true, trigger: 'blur', message: '验证码不能为空' }]
-      },
-      loading: false,
-      redirect: null,
-      image_content_base64: '',
-      VerificationCodeShow: false,
-      time: 60
-    };
-  },
-  watch: {
-    $router: {
-      handler(router) {
-        this.redirect = router.query && router.query.redirect;
-      }
-    }
-  },
-  created() {
-    this.getConfig();
-    this.updateVerificationCode();
-  },
-  methods: {
-    async getConfig() {
-      await getConfigInformation();
-    },
+// 登录规则
+const validateUsername = (rule, value, callback) => {
+  if (value.length <= 0) {
+    callback(new Error($t('Key26')));
+  } else {
+    callback();
+  }
+};
+const validatePassword = (rule, value, callback) => {
+  if (value.length < 6) {
+    callback(new Error($t('Key655')));
+  } else {
+    callback();
+  }
+};
+let loginRules = ref({
+  user_name: [{ trigger: 'blur', validator: validateUsername }],
+  password: [{ trigger: 'blur', validator: validatePassword }],
+  verification_code_image_text: [{ required: true, trigger: 'blur', message: '验证码不能为空' }],
+  dynamic_verification_code: [{ required: true, trigger: 'blur', message: '邮箱验证码不能为空' }]
+});
 
-    updateVerificationCode() {
-      GetVerificationCodeImage().then(({ image_id, image_content_base64 }) => {
-        this.loginForm.verification_code_image_id = image_id;
-        this.image_content_base64 = image_content_base64;
-      });
-    },
+async function getConfig() {
+  await getConfigInformation();
+}
+getConfig();
 
-    getVerificationCode() {
-      if (this.time !== 60) return;
+// 图片验证码
+let image_content_base64 = ref('');
+function updateVerificationCode() {
+  GetVerificationCodeImage().then(({ image_id, image_content_base64: image }) => {
+    loginForm.value.verification_code_image_id = image_id;
+    image_content_base64.value = image;
+  });
+}
+updateVerificationCode();
 
-      if (!this.loginForm.user_name) {
-        this.$message.warning('请先输入邮箱或手机号码');
-        return;
-      }
-      this.VerificationCodeShow = true;
-      let timer = null;
-      timer = setInterval(() => {
-        this.time -= 1;
-        if (this.time === 0) {
-          this.VerificationCodeShow = false;
-          clearInterval(timer);
-          timer = null;
-          this.time = 60;
-        }
-      }, 1000);
-      SendVerificationCode({
-        verification_type: 'EMAIL',
-        phone_or_email: this.loginForm.user_name
-      }).catch(() => {
-        this.VerificationCodeShow = false;
-        clearInterval(timer);
-        timer = null;
-        this.time = 60;
-      });
-    },
+// 邮箱验证码
+let VerificationCodeShow = ref(false);
+let time = ref(60);
+function getVerificationCode() {
+  if (time.value !== 60) return;
 
-    handleLogin(user_type) {
-      this.$refs.loginForm.validate((valid) => {
-        if (!valid) return false;
+  if (!loginForm.value.user_name) {
+    Message.warning('请先输入邮箱或手机号码');
+    return;
+  }
+  VerificationCodeShow.value = true;
+  let timer = null;
+  timer = setInterval(() => {
+    time.value -= 1;
+    if (time.value === 0) {
+      VerificationCodeShow.value = false;
+      clearInterval(timer);
+      timer = null;
+      time.value = 60;
+    }
+  }, 1000);
+  SendVerificationCode({
+    verification_type: 'EMAIL',
+    phone_or_email: loginForm.value.user_name
+  }).catch(() => {
+    VerificationCodeShow.value = false;
+    clearInterval(timer);
+    timer = null;
+    time.value = 60;
+  });
+}
+
+// 登录
+const router = useRouter();
+let loading = ref(false);
+let curForm = ref();
+let loginForm = ref({
+  user_name: '',
+  password: '',
+  user_type: '',
+  is_password_md5: 'true',
+  verification_code_image_id: '',
+  verification_code_image_text: '',
+  dynamic_verification_type: 'EMAIL',
+  phone_or_email: '',
+  dynamic_verification_code: ''
+});
+function handleLogin(user_type) {
+  curForm.value.validate((valid) => {
+    if (!valid) return false;
 
-        this.loginForm.user_type = user_type;
-        this.loginForm.phone_or_email = this.loginForm.user_name;
-        this.loading = true;
-        const loginForm = { ...this.loginForm };
-        loginForm.password = md5(loginForm.password).toUpperCase();
-        this.$store
-          .dispatch('user/login', { loginForm })
-          .then(() => {
-            this.$router.push({ path: this.redirect || '/' });
-            this.loading = false;
-            this.$message.success(this.$t('Key442'));
-          })
-          .catch(() => {
-            this.loading = false;
-          });
+    loginForm.value.user_type = user_type;
+    loginForm.value.phone_or_email = loginForm.value.user_name;
+    loading.value = true;
+    const _form = { ...loginForm.value };
+    _form.password = md5(loginForm.value.password).toUpperCase();
+    store
+      .dispatch('user/login', _form)
+      .then(() => {
+        router.push('/');
+        loading.value = false;
+        Message.success($t('Key442'));
+      })
+      .catch(() => {
+        loading.value = false;
       });
-    }
-  }
-};
+  });
+}
 </script>
 
 <style lang="scss">

src/views/task_details/TaskTop.vue

@@ -60,32 +60,37 @@
 
 <script>
 export default {
-  props: {
-    itemInfo: {
-      type: Object,
-      required: true
-    },
-    type: {
-      type: String,
-      required: true
-    }
-  },
-  computed: {
-    contentUrl() {
-      const content = this.itemInfo.content;
-      if (!content) return '';
-      return content.replace(
-        new RegExp(/(https?:\/\/[\w-]+\.[\w-]+\.[\w-,@?^=%&:/~\\+#]+)/, 'g'),
-        '<a href="$1" target="_blank">$1</a>'
-      );
-    }
+  name: 'TaskTop'
+};
+</script>
+
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+  itemInfo: {
+    type: Object,
+    required: true
   },
-  methods: {
-    emitViewFile(fileName, fileId) {
-      this.$emit('viewFile', fileName, fileId);
-    }
+  type: {
+    type: String,
+    required: true
   }
-};
+});
+
+let contentUrl = computed(() => {
+  const content = props.itemInfo.content;
+  if (!content) return '';
+  return content.replace(
+    new RegExp(/(https?:\/\/[\w-]+\.[\w-]+\.[\w-,@?^=%&:/~\\+#]+)/, 'g'),
+    '<a href="$1" target="_blank">$1</a>'
+  );
+});
+
+const emits = defineEmits(['viewFile']);
+function emitViewFile(fileName, fileId) {
+  emits('viewFile', fileName, fileId);
+}
 </script>
 
 <style lang="scss" scoped>

src/views/task_details/student/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div v-loading="loading" class="task-detail">
-    <task-top :item-info="itemInfo" type="student" @viewFile="viewFile" />
+    <TaskTop :item-info="itemInfo" type="student" @viewFile="viewFile" />
 
     <div class="task-detail-main">
       <div class="time-type">{{ $t(timeType) }} {{ name }}</div>
@@ -141,7 +141,7 @@
       </template>
     </div>
 
-    <completion-view
+    <CompletionView
       :task-id="id"
       :cur-student-id="$store.state.user.user_code"
       :cur-courseware-id="curCoursewareId"
@@ -150,7 +150,7 @@
       @dialogClose="dialogClose_completion"
     />
 
-    <finish-courseware
+    <FinishCourseware
       :id="id"
       :courseware-id="coursewareId"
       :preview-group-id="previewGroupId"
@@ -163,250 +163,249 @@
 </template>
 
 <script>
-import TaskTop from '../TaskTop.vue';
-import FinishCourseware from '@/components/course/FinishCourseware.vue';
-import CompletionView from '@/components/course/CompletionView.vue';
-import ShowFile from '@/common/show_file/index.vue';
+export default {
+  name: 'TaskDetailsStudent'
+};
+</script>
+
+<script setup>
+import { ref, computed, inject } from 'vue';
 import { fileUpload, FileDownload } from '@/api/app';
 import { CreateEnterLiveRoomSession } from '@/api/live';
 import { GetTaskInfo, FillMyTaskExecuteInfo_Student } from '@/api/course';
 import { isAllowFileType, fileTypeSizeLimit } from '@/utils/validate';
+import { useRoute, useRouter } from 'vue-router/composables';
+import { Message } from 'element-ui';
 
-export default {
-  name: 'TaskDetailsStudent',
-  components: {
-    FinishCourseware,
-    TaskTop,
-    CompletionView,
-    ShowFile
-  },
-  data() {
-    return {
-      // 任务 ID
-      id: this.$route.params.id,
-      itemInfo: {
-        course_name: '',
-        cs_item_name: '',
-        cs_item_learning_material_list: [],
-        time_space_view_txt: ''
-      },
-      student_message: '',
-      name: '',
-      teaching_type: '',
-      time_type: '',
-      content: '',
-      task_mode: '',
-      time_space_view_txt: '',
-      courseware_list: [],
-      accessory_list: [],
-      file_list: [],
-      dialogVisible: false,
-      previewGroupId: '[]',
-      coursewareId: '',
-      curCoursewareId: '',
-      dialogVisible_completion: false,
-      my_execute_info: {},
-      student_remark: '',
-      student_score: 0,
-      loading: false,
-      visible: false,
-      showCurFileName: '',
-      showCurFileId: '',
-      // 开启课后评价
-      is_enable_KHPJ: false,
-      is_enable_homework: false,
-      is_enable_message: false
-    };
-  },
-  computed: {
-    timeType() {
-      switch (this.time_type) {
-        case 0:
-          return 'Key353';
-        case 1:
-          return 'Key354';
-        case 2:
-          return 'Key355';
-        default:
-          return '';
-      }
-    },
-    contentUrl() {
-      const content = this.content;
-      if (!content) return '';
-      return content.replace(
-        new RegExp(/((https?:\/\/)?[\w-]+\.[\w-]+\.[\w-,@?^=%&:/~\\+#]+)/, 'g'),
-        '<a href="$1" target="_blank">$1</a>'
-      );
+import TaskTop from '../TaskTop.vue';
+import FinishCourseware from '@/components/course/FinishCourseware.vue';
+import CompletionView from '@/components/course/CompletionView.vue';
+import ShowFile from '@/common/show_file/index.vue';
+
+const $t = inject('$t');
+const route = useRoute();
+const router = useRouter();
+// 任务 ID
+const id = route.params.id;
+let itemInfo = ref({
+  course_name: '',
+  cs_item_name: '',
+  cs_item_learning_material_list: [],
+  time_space_view_txt: ''
+});
+let student_message = ref('');
+let name = ref('');
+let teaching_type = ref('');
+let time_type = ref('');
+let content = ref('');
+let time_space_view_txt = ref('');
+let courseware_list = ref([]);
+let accessory_list = ref([]);
+let file_list = ref([]);
+let dialogVisible = ref(false);
+let previewGroupId = ref('[]');
+let coursewareId = ref('');
+let curCoursewareId = ref('');
+let dialogVisible_completion = ref(false);
+let my_execute_info = ref({});
+let student_remark = ref('');
+let student_score = ref(0);
+let loading = ref(true);
+let visible = ref(false);
+let showCurFileName = ref('');
+let showCurFileId = ref('');
+// 开启课后评价
+let is_enable_KHPJ = ref(false);
+let is_enable_homework = ref(false);
+let is_enable_message = ref(false);
+
+let timeType = computed(() => {
+  let val = '';
+  switch (time_type.value) {
+    case 0:
+      val = 'Key353';
+      break;
+    case 1:
+      val = 'Key354';
+      break;
+    case 2:
+      val = 'Key355';
+      break;
+    default:
+      break;
+  }
+  return val;
+});
+
+let contentUrl = computed(() => {
+  const con = content.value;
+  if (!con) return '';
+  return con.replace(
+    new RegExp(/((https?:\/\/)?[\w-]+\.[\w-]+\.[\w-,@?^=%&:/~\\+#]+)/, 'g'),
+    '<a href="$1" target="_blank">$1</a>'
+  );
+});
+
+GetTaskInfo({
+  id,
+  is_contain_cs_item_learning_material: true,
+  is_contain_my_execute_info: true
+})
+  .then(
+    ({
+      name: na,
+      teaching_type: teachingType,
+      time_type: timeType,
+      course_name,
+      cs_item_name,
+      courseware_list: courseList,
+      accessory_list: accList,
+      cs_item_learning_material_list,
+      content: con,
+      time_space_view_txt: view_txt,
+      my_execute_info: executeInfo,
+      is_enable_KHPJ: isKHPJ,
+      is_enable_homework: isHomework,
+      is_enable_message: isMessage,
+      cs_item_begin_time,
+      cs_item_end_time
+    }) => {
+      itemInfo.value = {
+        name,
+        time_space_view_txt: view_txt,
+        course_name,
+        cs_item_name,
+        cs_item_learning_material_list,
+        content,
+        cs_item_time: `${cs_item_begin_time} ~ ${cs_item_end_time}`
+      };
+
+      name.value = na;
+      content.value = con;
+      teaching_type.value = teachingType;
+      time_type.value = timeType;
+      courseware_list.value = courseList;
+      accessory_list.value = accList;
+      time_space_view_txt.value = view_txt;
+      my_execute_info.value = executeInfo;
+      is_enable_KHPJ.value = isKHPJ === 'true';
+      is_enable_homework.value = isHomework === 'true';
+      is_enable_message.value = isMessage === 'true';
     }
-  },
-  created() {
-    this.loading = true;
-    GetTaskInfo({
-      id: this.id,
-      is_contain_cs_item_learning_material: true,
-      is_contain_my_execute_info: true
-    })
-      .then(
-        ({
-          name,
-          teaching_type,
-          time_type,
-          course_name,
-          cs_item_name,
-          courseware_list,
-          accessory_list,
-          cs_item_learning_material_list,
-          task_mode,
-          content,
-          time_space_view_txt,
-          my_execute_info,
-          is_enable_KHPJ,
-          is_enable_homework,
-          is_enable_message,
-          cs_item_begin_time,
-          cs_item_end_time
-        }) => {
-          this.itemInfo = {
-            name,
-            time_space_view_txt,
-            course_name,
-            cs_item_name,
-            cs_item_learning_material_list,
-            content,
-            cs_item_time: `${cs_item_begin_time} ~ ${cs_item_end_time}`
-          };
-
-          this.name = name;
-          this.content = content;
-          this.teaching_type = teaching_type;
-          this.time_type = time_type;
-          this.courseware_list = courseware_list;
-          this.accessory_list = accessory_list;
-          this.task_mode = task_mode;
-          this.time_space_view_txt = time_space_view_txt;
-          this.my_execute_info = my_execute_info;
-          this.is_enable_KHPJ = is_enable_KHPJ === 'true';
-          this.is_enable_homework = is_enable_homework === 'true';
-          this.is_enable_message = is_enable_message === 'true';
-        }
-      )
-      .finally(() => {
-        this.loading = false;
-      });
-  },
-  methods: {
-    upload(file) {
-      const fileName = file.file.name;
-      if (!isAllowFileType(fileName)) {
-        this.$message.warning(`【${fileName}】${this.$i18n.t('Key335')}`);
-        return;
-      }
+  )
+  .finally(() => {
+    loading.value = false;
+  });
+
+function upload(file) {
+  const fileName = file.file.name;
+  if (!isAllowFileType(fileName)) {
+    Message.error(`【${fileName}】${$t('Key335')}`);
+    return;
+  }
 
-      if (fileTypeSizeLimit(file.file.name, file.file.size)) {
-        return this.$message.warning(`${fileName}文件大小超出限制`);
-      }
+  if (fileTypeSizeLimit(file.file.name, file.file.size)) {
+    return Message.error(`${fileName}文件大小超出限制`);
+  }
 
-      fileUpload('Open', file).then(({ file_info_list }) => {
-        if (file_info_list.length > 0) {
-          const { file_id, file_name, file_url } = file_info_list[0];
-          this.file_list.push({ file_id, file_name, file_url });
-        }
-      });
-    },
-
-    deleteFile(i) {
-      this.file_list.splice(i, 1);
-    },
-
-    download(FileID) {
-      FileDownload(FileID).then((data) => {
-        console.log(data);
-      });
-    },
-
-    viewFile(fileName, fileId) {
-      this.showCurFileName = fileName;
-      this.showCurFileId = fileId;
-      this.visible = true;
-    },
-
-    dialogShowFileClose() {
-      this.visible = false;
-      this.showCurFileName = '';
-      this.showCurFileId = '';
-    },
-
-    fillTaskExecuteInfo_Student() {
-      // 基础任务，必须提交作业
-      if (this.my_execute_info.is_finished === 'false' && this.teaching_type === 12 && this.file_list.length <= 0) {
-        return this.$message.warning('请先提交作业');
-      }
+  fileUpload('Open', file).then(({ file_info_list }) => {
+    if (file_info_list.length > 0) {
+      const { file_id, file_name, file_url } = file_info_list[0];
+      file_list.value.push({ file_id, file_name, file_url });
+    }
+  });
+}
 
-      const homework_file_id_list = [];
-      this.file_list.forEach((item) => {
-        homework_file_id_list.push(item.file_id);
-      });
-      FillMyTaskExecuteInfo_Student({
-        task_id: this.id,
-        homework_file_id_list,
-        student_message: this.student_message,
-        is_finished: true
-      }).then(() => {
-        this.$message.success(this.$i18n.t('Key337'));
-        this.$router.go(0);
-      });
-    },
-
-    fillTaskExecuteInfo_Student_live() {
-      FillMyTaskExecuteInfo_Student({
-        task_id: this.id,
-        is_finished: true,
-        student_remark: this.student_remark,
-        student_score: this.student_score
-      }).then(() => {
-        this.$message.success(this.$i18n.t('Key336'));
-        this.$router.go(0);
-      });
-    },
-
-    enterLive() {
-      CreateEnterLiveRoomSession({
-        task_id: this.id
-      }).then(({ live_room_sys_user_id, room_id, session_id, room_user_id }) => {
-        this.$router.push({
-          path: `/live/student`,
-          query: { live_room_sys_user_id, room_id, session_id, task_id: this.id, room_user_id }
-        });
-      });
-    },
-
-    // 完成任务
-    finishTask(id, is_finished, group_id_selected_info) {
-      if (this.my_execute_info.is_finished === 'true' && is_finished === 'false') {
-        return this.$message.warning(this.$i18n.t('Key338'));
-      }
-      this.previewGroupId = group_id_selected_info ?? '[]';
-      if (is_finished === 'true') {
-        this.dialogVisible_completion = true;
-        this.curCoursewareId = id;
-      } else {
-        this.dialogVisible = true;
-        this.coursewareId = id;
-      }
-    },
+function deleteFile(i) {
+  file_list.value.splice(i, 1);
+}
 
-    dialogClose() {
-      this.dialogVisible = false;
-      this.coursewareId = '';
-    },
+function download(FileID) {
+  FileDownload(FileID).then((data) => {
+    console.log(data);
+  });
+}
 
-    dialogClose_completion() {
-      this.dialogVisible_completion = false;
-      this.curCoursewareId = '';
-    }
+function viewFile(fileName, fileId) {
+  showCurFileName.value = fileName;
+  showCurFileId.value = fileId;
+  visible.value = true;
+}
+
+function dialogShowFileClose() {
+  visible.value = false;
+  showCurFileName.value = '';
+  showCurFileId.value = '';
+}
+
+function fillTaskExecuteInfo_Student() {
+  // 基础任务，必须提交作业
+  if (my_execute_info.value.is_finished === 'false' && teaching_type.value === 12 && file_list.value.length <= 0) {
+    return Message.error('请先提交作业');
   }
-};
+
+  const homework_file_id_list = [];
+  file_list.value.forEach((item) => {
+    homework_file_id_list.push(item.file_id);
+  });
+  FillMyTaskExecuteInfo_Student({
+    task_id: id,
+    homework_file_id_list,
+    student_message: student_message.value,
+    is_finished: true
+  }).then(() => {
+    Message.success($t('Key337'));
+    router.go(0);
+  });
+}
+
+function fillTaskExecuteInfo_Student_live() {
+  FillMyTaskExecuteInfo_Student({
+    task_id: id,
+    is_finished: true,
+    student_remark: student_remark.value,
+    student_score: student_score.value
+  }).then(() => {
+    Message.success($t('Key336'));
+    router.go(0);
+  });
+}
+
+function enterLive() {
+  CreateEnterLiveRoomSession({
+    task_id: id
+  }).then(({ live_room_sys_user_id, room_id, session_id, room_user_id }) => {
+    router.push({
+      path: `/live/student`,
+      query: { live_room_sys_user_id, room_id, session_id, task_id: id, room_user_id }
+    });
+  });
+}
+
+// 完成任务
+function finishTask(id, is_finished, group_id_selected_info) {
+  if (my_execute_info.value.is_finished === 'true' && is_finished === 'false') {
+    return Message.error($t('Key338'));
+  }
+  previewGroupId.value = group_id_selected_info ?? '[]';
+  if (is_finished === 'true') {
+    dialogVisible_completion.value = true;
+    curCoursewareId.value = id;
+  } else {
+    dialogVisible.value = true;
+    coursewareId.value = id;
+  }
+}
+
+function dialogClose() {
+  dialogVisible.value = false;
+  coursewareId.value = '';
+}
+
+function dialogClose_completion() {
+  dialogVisible_completion.value = false;
+  curCoursewareId.value = '';
+}
 </script>
 
 <style lang="scss" scoped>

src/views/task_details/teacher/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div v-loading="loading" class="teacher-task-detail">
-    <task-top :item-info="itemInfo" type="teacher" @viewFile="viewFile" />
+    <TaskTop :item-info="itemInfo" type="teacher" @viewFile="viewFile" />
 
     <div class="teacher-task-detail-main">
       <div class="student-finish-situation">
@@ -78,7 +78,7 @@
             <div>{{ curFinishDetail.student_message }}</div>
           </template>
 
-          <template v-if="teaching_type === 10 && is_enable_KHPJ">
+          <template v-if="teachingType === 10 && is_enable_KHPJ">
             <div class="title">
               {{ $t('Key316') }}
             </div>
@@ -101,14 +101,14 @@
               {{ $t('Key319') }}
             </el-button>
             <el-button v-if="student_list.length > 1" @click="next">
-              {{ buttonName() }} <i class="el-icon-right"></i>
+              {{ buttonName }} <i class="el-icon-right"></i>
             </el-button>
           </div>
         </div>
       </div>
     </div>
 
-    <completion-view
+    <CompletionView
       :task-id="id"
       :cur-student-id="curStudentId"
       :cur-courseware-id="curCoursewareId"
@@ -117,213 +117,196 @@
       @dialogClose="dialogClose"
     />
 
-    <show-file :visible="visible" :file-name="showCurFileName" :file-id="showCurFileId" @close="dialogShowFileClose" />
+    <ShowFile :visible="visible" :file-name="showCurFileName" :file-id="showCurFileId" @close="dialogShowFileClose" />
   </div>
 </template>
 
 <script>
+export default {
+  name: 'TaskDetailsTeacher'
+};
+</script>
+
+<script setup>
+import { ref, inject, nextTick, computed } from 'vue';
+import { GetTaskInfo, GetTaskStudentExecuteInfo, RemarkTaskStudentExecuteInfo_Teacher } from '@/api/course';
+import { useRoute } from 'vue-router/composables';
+import { Message } from 'element-ui';
+
 import CompletionView from '@/components/course/CompletionView.vue';
 import ShowFile from '@/common/show_file/index.vue';
 import TaskTop from '../TaskTop.vue';
-import { GetTaskInfo, GetTaskStudentExecuteInfo, RemarkTaskStudentExecuteInfo_Teacher } from '@/api/course';
 
-export default {
-  name: 'TaskDetailsTeacher',
-  components: { CompletionView, TaskTop, ShowFile },
-  data() {
-    return {
-      id: this.$route.params.id,
-      name: '',
-      teaching_type: '',
-      itemInfo: {
-        course_name: '',
-        cs_item_name: '',
-        cs_item_learning_material_list: [],
-        courseware_list: [],
-        time_space_view_txt: ''
-      },
-      time_type: '',
-      task_mode: '',
-      time_space_view_txt: '',
-      courseware_list: [],
-      accessory_list: [],
-      file_list: [],
-      student_list: [],
-      curStudentId: '',
-      // 当前学生完成详情
-      curFinishDetail: {
-        student_name: '',
-        student_image_url: '',
-        courseware_list: [],
-        homework_list: [],
-        student_message: '',
-        finish_time_view_txt: ''
-      },
-      teacher_remark: '',
-      teacher_score: 0,
-      student_remark: '',
-      student_score: 0,
-      dialogVisible: false,
-      curCoursewareId: '',
-      previewGroupId: '[]',
-      loading: false,
-      student_list_height: 490,
-      visible: false,
-      showCurFileName: '',
-      showCurFileId: '',
-      // 开启课后评价
-      is_enable_KHPJ: false,
-      is_enable_homework: false,
-      is_enable_message: false
-    };
-  },
-  created() {
-    this.loading = true;
-    GetTaskInfo({
-      id: this.id,
-      is_contain_cs_item_learning_material: true,
-      is_contain_student: true
-    })
-      .then(
-        ({
-          name,
-          teaching_type,
-          time_type,
-          course_name,
-          courseware_list,
-          cs_item_name,
-          accessory_list,
-          cs_item_learning_material_list,
-          task_mode,
-          time_space_view_txt,
-          student_list,
-          is_custom_student,
-          custom_student_list,
-          is_enable_KHPJ,
-          is_enable_homework,
-          is_enable_message,
-          content,
-          cs_item_begin_time,
-          cs_item_end_time
-        }) => {
-          this.itemInfo = {
-            name,
-            time_space_view_txt,
-            course_name,
-            cs_item_name,
-            cs_item_learning_material_list,
-            courseware_list,
-            content,
-            cs_item_time: `${cs_item_begin_time} ~ ${cs_item_end_time}`
-          };
-          this.name = name;
-          this.teaching_type = teaching_type;
-          this.time_type = time_type;
-          this.courseware_list = courseware_list;
-          this.accessory_list = accessory_list;
-          this.task_mode = task_mode;
-          this.time_space_view_txt = time_space_view_txt;
-          this.is_enable_KHPJ = is_enable_KHPJ === 'true';
-          this.is_enable_homework = is_enable_homework === 'true';
-          this.is_enable_message = is_enable_message === 'true';
-          this.student_list = is_custom_student === 'true' ? custom_student_list : student_list;
-          if (this.student_list.length > 0) this.getTaskStudentExecuteInfo(this.student_list[0].student_id);
-        }
-      )
-      .finally(() => {
-        this.loading = false;
-      });
-  },
-  methods: {
-    getTaskStudentExecuteInfo(student_id) {
-      GetTaskStudentExecuteInfo({
-        task_id: this.id,
-        student_id
-      }).then(
-        ({
-          courseware_list,
-          homework_list,
-          student_message,
-          student_name,
-          student_image_url,
-          finish_time_view_txt,
-          teacher_remark,
-          teacher_score,
-          student_remark,
-          student_score
-        }) => {
-          this.curStudentId = student_id;
-          this.teacher_remark = teacher_remark;
-          this.teacher_score = teacher_score;
-          this.student_remark = student_remark;
-          this.student_score = student_score;
-          this.curFinishDetail = {
-            courseware_list,
-            homework_list,
-            student_message,
-            student_name,
-            student_image_url,
-            finish_time_view_txt
-          };
-          this.$nextTick(() => {
-            this.student_list_height = this.$refs.situation.clientHeight;
-          });
-        }
-      );
-    },
-
-    showCompletionView(id, is_finished, group_id_selected_info) {
-      if (is_finished === 'false') return this.$message.warning(this.$i18n.t('Key338'));
-      this.previewGroupId = group_id_selected_info ?? '[]';
-      this.curCoursewareId = id;
-      this.dialogVisible = true;
-    },
-
-    dialogClose() {
-      this.curCoursewareId = '';
-      this.dialogVisible = false;
-    },
-
-    viewFile(fileName, fileId) {
-      this.showCurFileName = fileName;
-      this.showCurFileId = fileId;
-      this.visible = true;
-    },
-
-    dialogShowFileClose() {
-      this.visible = false;
-      this.showCurFileName = '';
-      this.showCurFileId = '';
-    },
-
-    buttonName() {
-      const list = this.student_list;
-      if (list.length <= 0) return '';
-      return list[list.length - 1].student_id === this.curStudentId ? this.$i18n.t('Key618') : this.$i18n.t('Key619');
-    },
-
-    remarkTaskStudentExecuteInfo_Teacher() {
-      RemarkTaskStudentExecuteInfo_Teacher({
-        task_id: this.id,
-        student_id: this.curStudentId,
-        teacher_score: this.teacher_score,
-        teacher_remark: this.teacher_remark
-      }).then(() => {
-        this.$message.success(this.$i18n.t('Key324'));
+const $t = inject('$t');
+const route = useRoute();
+let id = route.params.id;
+
+// 任务详情
+let itemInfo = ref({});
+let teachingType = ref('');
+let accessory_list = ref([]);
+let student_list = ref([]);
+let loading = ref(true);
+// 开启课后评价
+let is_enable_KHPJ = ref(false);
+let is_enable_homework = ref(false);
+let is_enable_message = ref(false);
+GetTaskInfo({
+  id,
+  is_contain_cs_item_learning_material: true,
+  is_contain_student: true
+})
+  .then(
+    ({
+      name,
+      teaching_type,
+      course_name,
+      courseware_list,
+      cs_item_name,
+      accessory_list: accList,
+      cs_item_learning_material_list,
+      time_space_view_txt,
+      student_list: stuList,
+      is_custom_student,
+      custom_student_list,
+      is_enable_KHPJ: isKHPJ,
+      is_enable_homework: isHomework,
+      is_enable_message: isMessage,
+      content,
+      cs_item_begin_time,
+      cs_item_end_time
+    }) => {
+      itemInfo.value = {
+        name,
+        time_space_view_txt,
+        course_name,
+        cs_item_name,
+        cs_item_learning_material_list,
+        courseware_list,
+        content,
+        cs_item_time: `${cs_item_begin_time} ~ ${cs_item_end_time}`
+      };
+      teachingType.value = teaching_type;
+      accessory_list.value = accList;
+      is_enable_KHPJ.value = isKHPJ === 'true';
+      is_enable_homework.value = isHomework === 'true';
+      is_enable_message.value = isMessage === 'true';
+      student_list.value = is_custom_student === 'true' ? custom_student_list : stuList;
+      if (student_list.value.length > 0) getTaskStudentExecuteInfo(student_list.value[0].student_id);
+    }
+  )
+  .finally(() => {
+    loading.value = false;
+  });
+
+const situation = ref();
+// 当前学生完成详情
+let curFinishDetail = ref({
+  student_name: '',
+  student_image_url: '',
+  courseware_list: [],
+  homework_list: [],
+  student_message: '',
+  finish_time_view_txt: ''
+});
+let curStudentId = ref('');
+let teacher_remark = ref('');
+let teacher_score = ref(0);
+let student_remark = ref('');
+let student_score = ref(0);
+let student_list_height = ref(490);
+function getTaskStudentExecuteInfo(student_id) {
+  GetTaskStudentExecuteInfo({
+    task_id: id,
+    student_id
+  }).then(
+    ({
+      courseware_list,
+      homework_list,
+      student_message,
+      student_name,
+      student_image_url,
+      finish_time_view_txt,
+      teacher_remark: tRemake,
+      teacher_score: tScore,
+      student_remark: sRemake,
+      student_score: stuScore
+    }) => {
+      curStudentId.value = student_id;
+      teacher_remark.value = tRemake;
+      teacher_score.value = tScore;
+      student_remark.value = sRemake;
+      student_score.value = stuScore;
+      curFinishDetail.value = {
+        courseware_list,
+        homework_list,
+        student_message,
+        student_name,
+        student_image_url,
+        finish_time_view_txt
+      };
+      nextTick(() => {
+        student_list_height.value = situation.value.clientHeight;
       });
-    },
-
-    next() {
-      const list = this.student_list;
-      if (list.length <= 0) {
-        return this.$message.warning(this.$i18n.t('Key325'));
-      }
-      const curIndex = list.findIndex((item) => item.student_id === this.curStudentId);
-      const nextList = list.length - 1 === curIndex ? list[curIndex - 1] : list[curIndex + 1];
-      if (nextList) this.getTaskStudentExecuteInfo(nextList.student_id);
     }
-  }
-};
+  );
+}
+
+let previewGroupId = ref('[]');
+let dialogVisible = ref(false);
+let curCoursewareId = ref('');
+function showCompletionView(id, is_finished, group_id_selected_info) {
+  if (is_finished === 'false') return Message.warning($t('Key338'));
+  previewGroupId.value = group_id_selected_info ?? '[]';
+  curCoursewareId.value = id;
+  dialogVisible.value = true;
+}
+
+function dialogClose() {
+  curCoursewareId.value = '';
+  dialogVisible.value = false;
+}
+
+let visible = ref(false);
+let showCurFileName = ref('');
+let showCurFileId = ref('');
+function viewFile(fileName, fileId) {
+  showCurFileName.value = fileName;
+  showCurFileId.value = fileId;
+  visible.value = true;
+}
+
+function dialogShowFileClose() {
+  visible.value = false;
+  showCurFileName.value = '';
+  showCurFileId.value = '';
+}
+
+function remarkTaskStudentExecuteInfo_Teacher() {
+  RemarkTaskStudentExecuteInfo_Teacher({
+    task_id: id,
+    student_id: curStudentId.value,
+    teacher_score: teacher_score.value,
+    teacher_remark: teacher_remark.value
+  }).then(() => {
+    Message.success($t('Key324'));
+  });
+}
+
+let buttonName = computed(() => {
+  const list = student_list.value;
+  if (list.length <= 0) return '';
+  return list[list.length - 1].student_id === curStudentId.value ? $t('Key618') : $t('Key619');
+});
+
+function next() {
+  const list = student_list.value;
+  if (list.length <= 0) return Message.warning($t('Key325'));
+
+  const curIndex = list.findIndex(({ student_id }) => student_id === curStudentId.value);
+  const nextStudentId = (list.length - 1 === curIndex ? list[curIndex - 1] : list[curIndex + 1]).student_id;
+  if (nextStudentId) getTaskStudentExecuteInfo(nextStudentId);
+}
 </script>
 
 <style lang="scss">

src/views/teacher/create_course/step_three/components/utils/file.js

@@ -72,10 +72,10 @@ export function useUploadFile(file, curTemplateData) {
 
   // 添加到文件列表
   function pushFiles(fileList) {
-    for (let i = 0; i < fileList.length; i++) {
+    for (const el of fileList) {
       files.value.push({
-        file: fileList[i],
-        status: allowFileFormat(getFileType(fileList[i].name)) ? fileStatusList[1] : fileStatusList[0]
+        file: el,
+        status: allowFileFormat(getFileType(el.name)) ? fileStatusList[1] : fileStatusList[0]
       });
     }
   }