更新显示作业详情

src/views/classList/modals/TrainingDetails.tsx

@@ -1,238 +1,239 @@
-import {
-  NButton,
-  NSpace,
-  useMessage,
-  NForm,
-  NFormItem,
-  NSelect,
-  NImage,
-  NScrollbar,
-  NSpin,
-  NModal
-} from 'naive-ui';
-import { defineComponent, onMounted, reactive, ref } from 'vue';
-import { getTrainingStudentDetail } from '../api';
-import styles from '../index.module.less';
-import TrainType from '@/views/attend-class/model/train-type';
-import defultHeade from '@/components/layout/images/teacherIcon.png';
-import noSub from '../images/nosub.png';
-import qualified from '../images/qualified.png';
-import unqualified from '../images/unqualified.png';
-import { evaluateDifficult } from '/src/utils/contants';
-import dayjs from 'dayjs';
-import CommentWork from '../../studentList/modals/comment-work';
-export default defineComponent({
-  props: {
-    activeRow: {
-      type: Object,
-      default: () => ({ studentLessonTrainingId: '' })
-    },
-    total: {
-      type: Number,
-      default: 0
-    },
-    current: {
-      type: Number,
-      default: 0
-    }
-  },
-  name: 'TrainingDetails',
-  emits: ['close', 'next', 'pre'],
-
-  setup(props, { emit, expose }) {
-    const loading = ref(false);
-    const studnetInfo = ref({
-      studentName: '',
-      submitTime: '',
-      trainingStatus: '',
-      studentAvatar: '',
-      studentLessonTrainingDetails: [] as any
-    } as any);
-    const showModalMask = ref(false);
-    const message = useMessage();
-    const foemsRef = ref();
-    const typeFormat = (trainingType: string, configJson: any) => {
-      let tList: string[] = [];
-
-      if (trainingType === 'EVALUATION') {
-        tList = [
-          `${evaluateDifficult[configJson.evaluateDifficult]}`,
-          configJson.practiceChapterBegin || configJson.practiceChapterEnd
-            ? `${configJson.practiceChapterBegin}-${configJson.practiceChapterEnd}小节`
-            : '全部小节',
-          // `速度${configJson.evaluateSpeed}`,
-          `${configJson.trainingTimes}分合格`
-        ];
-        // console.log('configJson.evaluateDifficult--', tList);
-      } else {
-        tList = [
-          `${configJson.practiceChapterBegin}-${configJson.practiceChapterEnd}小节`,
-          `速度${configJson.practiceSpeed}`,
-          `${configJson.trainingTimes}分钟`
-        ];
-        // console.log('configJson.evaluateDifficult', tList);
-      }
-      return tList;
-    };
-    const getTrainingDetail = async (id: any) => {
-      loading.value = true;
-      try {
-        const res = await getTrainingStudentDetail({
-          studentLessonTrainingId: id
-        });
-        const arr = res.data.studentLessonTrainingDetails.map((item: any) => {
-          const tList = typeFormat(
-            item.trainingType,
-            JSON.parse(item.trainingContent)
-          );
-          return {
-            ...item,
-            coverImg: item.titleImg,
-            allTimes: JSON.parse(item.trainingContent).trainingTimes,
-            typeList: tList || []
-          };
-        });
-        studnetInfo.value = {
-          ...res.data,
-
-          studentLessonTrainingDetails: arr
-        };
-      } catch (e) {
-        console.log(e);
-      }
-      loading.value = false;
-    };
-    expose({ getTrainingDetail });
-    onMounted(() => {
-      getTrainingDetail(props.activeRow.studentLessonTrainingId);
-    });
-
-    return () => (
-      <div class={[styles.trainingDetails]}>
-        <NSpin show={loading.value}>
-          <div class={styles.studentList}>
-            <div class={styles.studentHeaderWrap}>
-              <div class={styles.studentHeader}>
-                <div class={styles.studentHeaderBorder}>
-                  <NImage
-                    class={styles.studentHeaderImg}
-                    src={
-                      studnetInfo.value.studentAvatar
-                        ? studnetInfo.value.studentAvatar
-                        : defultHeade
-                    }
-                    previewDisabled></NImage>
-                </div>
-              </div>
-
-              <div class={styles.workafterInfo}>
-                <h4>
-                  {studnetInfo.value.studentName}{' '}
-                  <div class={styles.workafterInfoDot}>学生</div>
-                </h4>
-                <p>
-                  提交时间：
-                  {studnetInfo.value.submitTime
-                    ? dayjs(new Date(studnetInfo.value.submitTime)).format(
-                        'YYYY-MM-DD'
-                      )
-                    : '--'}
-                </p>
-              </div>
-            </div>
-            {studnetInfo.value.trainingStatus == 'UNSUBMITTED' ? (
-              <NImage
-                previewDisabled
-                class={styles.workStatus}
-                src={noSub}></NImage>
-            ) : null}
-            {studnetInfo.value.trainingStatus == 'SUBMITTED' ? (
-              <NImage
-                previewDisabled
-                class={styles.workStatus}
-                src={unqualified}></NImage>
-            ) : null}
-            {studnetInfo.value.trainingStatus == 'TARGET' ? (
-              <NImage
-                previewDisabled
-                class={styles.workStatus}
-                src={qualified}></NImage>
-            ) : null}
-          </div>
-
-          {studnetInfo.value.trainingStatus !== 'UNSUBMITTED' && (
-            <NButton
-              onClick={() => (showModalMask.value = true)}
-              class={styles.commentBtnGroup}>
-              <div class={styles.text}>
-                <i class={studnetInfo.value.comment && styles.look}></i>
-
-                {studnetInfo.value.comment ? '查看评语' : '点评作业'}
-              </div>
-            </NButton>
-          )}
-          <NScrollbar style="max-height:400px" trigger="none">
-            <div class={styles.workList}>
-              {studnetInfo.value.studentLessonTrainingDetails.map(
-                (item: any) => (
-                  <TrainType
-                    style={{ marginBottom: '20px' }}
-                    isDisabled={true}
-                    isDelete={false}
-                    item={item}></TrainType>
-                )
-              )}
-            </div>
-          </NScrollbar>
-          <NSpace
-            class={[styles.btnGroups, styles.nextWrap]}
-            justify="space-between">
-            <div class={styles.allTotal}>
-              {props.current}/{props.total}名学生
-            </div>
-            <div>
-              <NSpace>
-                <NButton
-                  disabled={props.current <= 1}
-                  round
-                  type="primary"
-                  onClick={() => {
-                    emit('pre');
-                  }}>
-                  上一名
-                </NButton>
-                <NButton
-                  disabled={props.current >= props.total}
-                  round
-                  type="primary"
-                  onClick={() => {
-                    emit('next');
-                  }}>
-                  下一名
-                </NButton>
-              </NSpace>
-            </div>
-          </NSpace>
-        </NSpin>
-
-        <NModal v-model:show={showModalMask.value}>
-          <CommentWork
-            comment={studnetInfo.value.comment}
-            workInfo={{
-              isLook: studnetInfo.value.comment ? true : false,
-              studentAvatar: studnetInfo.value.studentAvatar,
-              studentName: studnetInfo.value.studentName,
-              submitTime: studnetInfo.value.submitTime,
-              studentLessonTrainingId: studnetInfo.value.studentLessonTrainingId
-            }}
-            onClose={() => (showModalMask.value = false)}
-            onConfrim={() => {
-              getTrainingDetail(props.activeRow.studentLessonTrainingId);
-              showModalMask.value = false;
-            }}
-          />
-        </NModal>
-      </div>
-    );
-  }
-});
+import {
+  NButton,
+  NSpace,
+  useMessage,
+  NForm,
+  NFormItem,
+  NSelect,
+  NImage,
+  NScrollbar,
+  NSpin,
+  NModal
+} from 'naive-ui';
+import { defineComponent, onMounted, reactive, ref } from 'vue';
+import { getTrainingStudentDetail } from '../api';
+import styles from '../index.module.less';
+import TrainType from '@/views/attend-class/model/train-type';
+import defultHeade from '@/components/layout/images/teacherIcon.png';
+import noSub from '../images/nosub.png';
+import qualified from '../images/qualified.png';
+import unqualified from '../images/unqualified.png';
+import { evaluateDifficult } from '/src/utils/contants';
+import dayjs from 'dayjs';
+import CommentWork from '../../studentList/modals/comment-work';
+export default defineComponent({
+  props: {
+    activeRow: {
+      type: Object,
+      default: () => ({ studentLessonTrainingId: '' })
+    },
+    total: {
+      type: Number,
+      default: 0
+    },
+    current: {
+      type: Number,
+      default: 0
+    }
+  },
+  name: 'TrainingDetails',
+  emits: ['close', 'next', 'pre'],
+
+  setup(props, { emit, expose }) {
+    const loading = ref(false);
+    const studnetInfo = ref({
+      studentName: '',
+      submitTime: '',
+      trainingStatus: '',
+      studentAvatar: '',
+      studentLessonTrainingDetails: [] as any
+    } as any);
+    const showModalMask = ref(false);
+    const message = useMessage();
+    const foemsRef = ref();
+    const typeFormat = (trainingType: string, configJson: any) => {
+      let tList: string[] = [];
+
+      if (trainingType === 'EVALUATION') {
+        tList = [
+          `${evaluateDifficult[configJson.evaluateDifficult]}`,
+          configJson.practiceChapterBegin || configJson.practiceChapterEnd
+            ? `${configJson.practiceChapterBegin}-${configJson.practiceChapterEnd}小节`
+            : '全部小节',
+          // `速度${configJson.evaluateSpeed}`,
+          `${configJson.trainingTimes}分合格`
+        ];
+        // console.log('configJson.evaluateDifficult--', tList);
+      } else {
+        tList = [
+          `${configJson.practiceChapterBegin}-${configJson.practiceChapterEnd}小节`,
+          `速度${configJson.practiceSpeed}`,
+          `${configJson.trainingTimes}分钟`
+        ];
+        // console.log('configJson.evaluateDifficult', tList);
+      }
+      return tList;
+    };
+    const getTrainingDetail = async (id: any) => {
+      loading.value = true;
+      try {
+        const res = await getTrainingStudentDetail({
+          studentLessonTrainingId: id
+        });
+        const arr = res.data.studentLessonTrainingDetails.map((item: any) => {
+          const tList = typeFormat(
+            item.trainingType,
+            JSON.parse(item.trainingContent)
+          );
+          return {
+            ...item,
+            coverImg: item.titleImg,
+            allTimes: JSON.parse(item.trainingContent).trainingTimes,
+            typeList: tList || []
+          };
+        });
+        studnetInfo.value = {
+          ...res.data,
+
+          studentLessonTrainingDetails: arr
+        };
+      } catch (e) {
+        console.log(e);
+      }
+      loading.value = false;
+    };
+    expose({ getTrainingDetail });
+    onMounted(() => {
+      getTrainingDetail(props.activeRow.studentLessonTrainingId);
+    });
+
+    return () => (
+      <div class={[styles.trainingDetails]}>
+        <NSpin show={loading.value}>
+          <div class={styles.studentList}>
+            <div class={styles.studentHeaderWrap}>
+              <div class={styles.studentHeader}>
+                <div class={styles.studentHeaderBorder}>
+                  <NImage
+                    class={styles.studentHeaderImg}
+                    src={
+                      studnetInfo.value.studentAvatar
+                        ? studnetInfo.value.studentAvatar
+                        : defultHeade
+                    }
+                    previewDisabled></NImage>
+                </div>
+              </div>
+
+              <div class={styles.workafterInfo}>
+                <h4>
+                  {studnetInfo.value.studentName}{' '}
+                  <div class={styles.workafterInfoDot}>学生</div>
+                </h4>
+                <p>
+                  提交时间：
+                  {studnetInfo.value.submitTime
+                    ? dayjs(new Date(studnetInfo.value.submitTime)).format(
+                        'YYYY-MM-DD'
+                      )
+                    : '--'}
+                </p>
+              </div>
+            </div>
+            {studnetInfo.value.trainingStatus == 'UNSUBMITTED' ? (
+              <NImage
+                previewDisabled
+                class={styles.workStatus}
+                src={noSub}></NImage>
+            ) : null}
+            {studnetInfo.value.trainingStatus == 'SUBMITTED' ? (
+              <NImage
+                previewDisabled
+                class={styles.workStatus}
+                src={unqualified}></NImage>
+            ) : null}
+            {studnetInfo.value.trainingStatus == 'TARGET' ? (
+              <NImage
+                previewDisabled
+                class={styles.workStatus}
+                src={qualified}></NImage>
+            ) : null}
+          </div>
+
+          {studnetInfo.value.trainingStatus !== 'UNSUBMITTED' && (
+            <NButton
+              onClick={() => (showModalMask.value = true)}
+              class={styles.commentBtnGroup}>
+              <div class={styles.text}>
+                <i class={studnetInfo.value.comment && styles.look}></i>
+
+                {studnetInfo.value.comment ? '查看评语' : '点评作业'}
+              </div>
+            </NButton>
+          )}
+          <NScrollbar style="max-height:400px" trigger="none">
+            <div class={styles.workList}>
+              {studnetInfo.value.studentLessonTrainingDetails.map(
+                (item: any) => (
+                  <TrainType
+                    style={{ marginBottom: '20px' }}
+                    isDisabled={true}
+                    isDelete={false}
+                    isCLassWork={false}
+                    item={item}></TrainType>
+                )
+              )}
+            </div>
+          </NScrollbar>
+          <NSpace
+            class={[styles.btnGroups, styles.nextWrap]}
+            justify="space-between">
+            <div class={styles.allTotal}>
+              {props.current}/{props.total}名学生
+            </div>
+            <div>
+              <NSpace>
+                <NButton
+                  disabled={props.current <= 1}
+                  round
+                  type="primary"
+                  onClick={() => {
+                    emit('pre');
+                  }}>
+                  上一名
+                </NButton>
+                <NButton
+                  disabled={props.current >= props.total}
+                  round
+                  type="primary"
+                  onClick={() => {
+                    emit('next');
+                  }}>
+                  下一名
+                </NButton>
+              </NSpace>
+            </div>
+          </NSpace>
+        </NSpin>
+
+        <NModal v-model:show={showModalMask.value}>
+          <CommentWork
+            comment={studnetInfo.value.comment}
+            workInfo={{
+              isLook: studnetInfo.value.comment ? true : false,
+              studentAvatar: studnetInfo.value.studentAvatar,
+              studentName: studnetInfo.value.studentName,
+              submitTime: studnetInfo.value.submitTime,
+              studentLessonTrainingId: studnetInfo.value.studentLessonTrainingId
+            }}
+            onClose={() => (showModalMask.value = false)}
+            onConfrim={() => {
+              getTrainingDetail(props.activeRow.studentLessonTrainingId);
+              showModalMask.value = false;
+            }}
+          />
+        </NModal>
+      </div>
+    );
+  }
+});

src/views/classList/modals/classTrainingDetails.tsx

@@ -1,168 +1,168 @@
-import {
-  NButton,
-  NSpace,
-  useMessage,
-  NForm,
-  NFormItem,
-  NSelect,
-  NImage,
-  NScrollbar,
-  NSpin
-} from 'naive-ui';
-import { defineComponent, onMounted, reactive, ref } from 'vue';
-import { getTrainingClassDetail } from '../api';
-import styles from '../index.module.less';
-import TrainType from '@/views/attend-class/model/train-type';
-import defultHeade from '@/components/layout/images/teacherIcon.png';
-import noSub from '../images/nosub.png';
-import qualified from '../images/qualified.png';
-import unqualified from '../images/unqualified.png';
-import { evaluateDifficult } from '/src/utils/contants';
-import dayjs from 'dayjs';
-export default defineComponent({
-  props: {
-    activeRow: {
-      type: Object,
-      default: () => ({ id: '' })
-    },
-    total: {
-      type: Number,
-      default: 0
-    },
-    current: {
-      type: Number,
-      default: 0
-    }
-  },
-  name: 'classTrainingDetails',
-  emits: ['close'],
-
-  setup(props, { emit, expose }) {
-    const loading = ref(false);
-    const teacherInfo = ref({
-      teacherName: '',
-      createTime: '',
-      expireDate: '',
-      teacherAvatar: '',
-      studentLessonTrainingDetails: [] as any
-    } as any);
-    const typeFormat = (trainingType: string, configJson: any) => {
-      let tList: string[] = [];
-
-      if (trainingType === 'EVALUATION') {
-        tList = [
-          `${evaluateDifficult[configJson.evaluateDifficult]}`,
-          configJson.practiceChapterBegin || configJson.practiceChapterEnd
-            ? `${configJson.practiceChapterBegin}-${configJson.practiceChapterEnd}小节`
-            : '全部小节',
-          // `速度${configJson.evaluateSpeed}`,
-          `${configJson.trainingTimes}分合格`
-        ];
-      } else {
-        tList = [
-          `${configJson.practiceChapterBegin}-${configJson.practiceChapterEnd}小节`,
-          `速度${configJson.practiceSpeed}`,
-          `${configJson.trainingTimes}分钟`
-        ];
-      }
-      return tList;
-    };
-    const getTrainingDetail = async (id: any) => {
-      loading.value = true;
-      try {
-        const res = await getTrainingClassDetail({
-          trainingId: id
-        });
-        const arr = res.data.studentLessonTrainingDetails.map((item: any) => {
-          const tList = typeFormat(
-            item.trainingType,
-            JSON.parse(item.trainingContent)
-          );
-          return {
-            ...item,
-            coverImg: item.titleImg,
-            allTimes: JSON.parse(item.trainingContent).trainingTimes,
-            typeList: tList || []
-          };
-        });
-        teacherInfo.value = {
-          ...res.data,
-
-          studentLessonTrainingDetails: arr
-        };
-      } catch (e) {
-        console.log(e);
-      }
-      loading.value = false;
-    };
-    expose({ getTrainingDetail });
-    onMounted(() => {
-      getTrainingDetail(props.activeRow.id);
-    });
-
-    return () => (
-      <div class={[styles.trainingDetails]}>
-        <NSpin show={loading.value}>
-          <div class={styles.studentList}>
-            <div class={styles.studentHeaderWrap}>
-              <div class={styles.studentHeader}>
-                <div class={styles.studentHeaderBorder}>
-                  <NImage
-                    class={styles.studentHeaderImg}
-                    src={
-                      teacherInfo.value.teacherAvatar
-                        ? teacherInfo.value.teacherAvatar
-                        : defultHeade
-                    }
-                    previewDisabled></NImage>
-                </div>
-              </div>
-
-              <div class={styles.workafterInfo}>
-                <h4>
-                  {teacherInfo.value.teacherName}{' '}
-                  <div
-                    class={[
-                      styles.workafterInfoDot,
-                      styles.workafterTeacherInfoDot
-                    ]}>
-                    老师
-                  </div>
-                </h4>
-                <p>
-                  开始时间：
-                  {teacherInfo.value.createTime
-                    ? dayjs(new Date(teacherInfo.value.createTime)).format(
-                        'YYYY-MM-DD'
-                      )
-                    : '--'}{' '}
-                  | 结束时间：
-                  {teacherInfo.value.expireDate
-                    ? dayjs(new Date(teacherInfo.value.expireDate)).format(
-                        'YYYY-MM-DD'
-                      )
-                    : '--'}
-                </p>
-              </div>
-            </div>
-          </div>
-          <NScrollbar style="max-height:400px" trigger="none">
-            <div class={styles.workList}>
-              {teacherInfo.value.studentLessonTrainingDetails.map(
-                (item: any) => (
-                  <TrainType
-                    style={{ marginBottom: '20px' }}
-                    isDisabled={true}
-                    isDelete={false}
-                    isLarge
-                    isCLassWork={true}
-                    item={item}></TrainType>
-                )
-              )}
-            </div>
-          </NScrollbar>
-        </NSpin>
-      </div>
-    );
-  }
-});
+import {
+  NButton,
+  NSpace,
+  useMessage,
+  NForm,
+  NFormItem,
+  NSelect,
+  NImage,
+  NScrollbar,
+  NSpin
+} from 'naive-ui';
+import { defineComponent, onMounted, reactive, ref } from 'vue';
+import { getTrainingClassDetail } from '../api';
+import styles from '../index.module.less';
+import TrainType from '@/views/attend-class/model/train-type';
+import defultHeade from '@/components/layout/images/teacherIcon.png';
+import noSub from '../images/nosub.png';
+import qualified from '../images/qualified.png';
+import unqualified from '../images/unqualified.png';
+import { evaluateDifficult } from '/src/utils/contants';
+import dayjs from 'dayjs';
+export default defineComponent({
+  props: {
+    activeRow: {
+      type: Object,
+      default: () => ({ id: '' })
+    },
+    total: {
+      type: Number,
+      default: 0
+    },
+    current: {
+      type: Number,
+      default: 0
+    }
+  },
+  name: 'classTrainingDetails',
+  emits: ['close'],
+
+  setup(props, { emit, expose }) {
+    const loading = ref(false);
+    const teacherInfo = ref({
+      teacherName: '',
+      createTime: '',
+      expireDate: '',
+      teacherAvatar: '',
+      studentLessonTrainingDetails: [] as any
+    } as any);
+    const typeFormat = (trainingType: string, configJson: any) => {
+      let tList: string[] = [];
+
+      if (trainingType === 'EVALUATION') {
+        tList = [
+          `${evaluateDifficult[configJson.evaluateDifficult]}`,
+          configJson.practiceChapterBegin || configJson.practiceChapterEnd
+            ? `${configJson.practiceChapterBegin}-${configJson.practiceChapterEnd}小节`
+            : '全部小节',
+          // `速度${configJson.evaluateSpeed}`,
+          `${configJson.trainingTimes}分合格`
+        ];
+      } else {
+        tList = [
+          `${configJson.practiceChapterBegin}-${configJson.practiceChapterEnd}小节`,
+          `速度${configJson.practiceSpeed}`,
+          `${configJson.trainingTimes}分钟`
+        ];
+      }
+      return tList;
+    };
+    const getTrainingDetail = async (id: any) => {
+      loading.value = true;
+      try {
+        const res = await getTrainingClassDetail({
+          trainingId: id
+        });
+        const arr = res.data.studentLessonTrainingDetails.map((item: any) => {
+          const tList = typeFormat(
+            item.trainingType,
+            JSON.parse(item.trainingContent)
+          );
+          return {
+            ...item,
+            coverImg: item.titleImg,
+            allTimes: JSON.parse(item.trainingContent).trainingTimes,
+            typeList: tList || []
+          };
+        });
+        teacherInfo.value = {
+          ...res.data,
+
+          studentLessonTrainingDetails: arr
+        };
+      } catch (e) {
+        console.log(e);
+      }
+      loading.value = false;
+    };
+    expose({ getTrainingDetail });
+    onMounted(() => {
+      getTrainingDetail(props.activeRow.id);
+    });
+
+    return () => (
+      <div class={[styles.trainingDetails]}>
+        <NSpin show={loading.value}>
+          <div class={styles.studentList}>
+            <div class={styles.studentHeaderWrap}>
+              <div class={styles.studentHeader}>
+                <div class={styles.studentHeaderBorder}>
+                  <NImage
+                    class={styles.studentHeaderImg}
+                    src={
+                      teacherInfo.value.teacherAvatar
+                        ? teacherInfo.value.teacherAvatar
+                        : defultHeade
+                    }
+                    previewDisabled></NImage>
+                </div>
+              </div>
+
+              <div class={styles.workafterInfo}>
+                <h4>
+                  {teacherInfo.value.teacherName}{' '}
+                  <div
+                    class={[
+                      styles.workafterInfoDot,
+                      styles.workafterTeacherInfoDot
+                    ]}>
+                    老师
+                  </div>
+                </h4>
+                <p>
+                  开始时间：
+                  {teacherInfo.value.createTime
+                    ? dayjs(new Date(teacherInfo.value.createTime)).format(
+                      'YYYY-MM-DD'
+                    )
+                    : '--'}{' '}
+                  | 结束时间：
+                  {teacherInfo.value.expireDate
+                    ? dayjs(new Date(teacherInfo.value.expireDate)).format(
+                      'YYYY-MM-DD'
+                    )
+                    : '--'}
+                </p>
+              </div>
+            </div>
+          </div>
+          <NScrollbar style="max-height:400px" trigger="none">
+            <div class={styles.workList}>
+              {teacherInfo.value.studentLessonTrainingDetails.map(
+                (item: any) => (
+                  <TrainType
+                    style={{ marginBottom: '20px' }}
+                    isDisabled={true}
+                    isDelete={false}
+                    isLarge
+                    isCLassWork={false}
+                    item={item}></TrainType>
+                )
+              )}
+            </div>
+          </NScrollbar>
+        </NSpin>
+      </div>
+    );
+  }
+});