|
@@ -9,6 +9,7 @@ import {
|
|
|
NImage,
|
|
|
NModal,
|
|
|
NSpace,
|
|
|
+ NSpin,
|
|
|
useMessage
|
|
|
} from 'naive-ui';
|
|
|
import SearchInput from '@/components/searchInput';
|
|
@@ -21,17 +22,34 @@ import { initCache, setCache } from '/src/hooks/use-async';
|
|
|
import { classArray, getgradeNumList } from '../classList/contants';
|
|
|
import teacherIcon from '@components/layout/images/teacherIcon.png';
|
|
|
import Pagination from '/src/components/pagination';
|
|
|
+import { api_trainingList } from './api';
|
|
|
+import TheEmpty from '/src/components/TheEmpty';
|
|
|
+import { getTimes } from '/src/utils';
|
|
|
+import dayjs from 'dayjs';
|
|
|
+import Train from '../prepare-lessons/components/lesson-main/train';
|
|
|
+import ResourceMain from '../prepare-lessons/components/resource-main';
|
|
|
+import { useResizeObserver } from '@vueuse/core';
|
|
|
+import { nextTick } from 'process';
|
|
|
+
|
|
|
+export const getCurrentMonth = () => {
|
|
|
+ return [dayjs().startOf('month').valueOf(), dayjs().endOf('month').valueOf()];
|
|
|
+};
|
|
|
export default defineComponent({
|
|
|
name: 'homework-record',
|
|
|
setup() {
|
|
|
const state = reactive({
|
|
|
+ workVisiable: false,
|
|
|
searchForm: {
|
|
|
keyword: null as any,
|
|
|
currentClass: '',
|
|
|
currentGradeNum: '',
|
|
|
subjectId: '',
|
|
|
gradeYear: '',
|
|
|
- gradeLevel: ''
|
|
|
+ gradeLevel: '',
|
|
|
+ homeworkObj: '',
|
|
|
+ status: '',
|
|
|
+ timer: getCurrentMonth() as any,
|
|
|
+ selfFlag: true
|
|
|
},
|
|
|
loading: false,
|
|
|
pagination: {
|
|
@@ -53,7 +71,7 @@ export default defineComponent({
|
|
|
const route = useRoute();
|
|
|
const search = () => {
|
|
|
state.pagination.page = 1;
|
|
|
- // getList();
|
|
|
+ getList();
|
|
|
setCache({ current: state.searchForm, saveKey: route.path });
|
|
|
};
|
|
|
state.gradeNumList = getgradeNumList();
|
|
@@ -64,7 +82,11 @@ export default defineComponent({
|
|
|
currentGradeNum: '' as any,
|
|
|
subjectId: '' as any,
|
|
|
gradeYear: '' as any,
|
|
|
- gradeLevel: ''
|
|
|
+ gradeLevel: '',
|
|
|
+ homeworkObj: '',
|
|
|
+ status: '',
|
|
|
+ timer: getCurrentMonth() as any,
|
|
|
+ selfFlag: true
|
|
|
};
|
|
|
if (state.popSelectYearList.length > 0) {
|
|
|
state.searchForm.gradeYear = state.popSelectYearList[1].id;
|
|
@@ -73,27 +95,59 @@ export default defineComponent({
|
|
|
setCache({ current: state.searchForm, saveKey: route.path });
|
|
|
};
|
|
|
|
|
|
+ const getModalHeight = () => {
|
|
|
+ useResizeObserver(
|
|
|
+ document.querySelector('#model-homework-height') as HTMLElement,
|
|
|
+ (entries: any) => {
|
|
|
+ const entry = entries[0];
|
|
|
+ const { height } = entry.contentRect;
|
|
|
+ document.documentElement.style.setProperty(
|
|
|
+ '--window-page-lesson-height',
|
|
|
+ height + 'px'
|
|
|
+ );
|
|
|
+ }
|
|
|
+ );
|
|
|
+ };
|
|
|
+
|
|
|
const getList = async () => {
|
|
|
// // classGroupList
|
|
|
- // state.loading = true;
|
|
|
- // try {
|
|
|
- // const res = await classGroupList({
|
|
|
- // ...state.searchForm,
|
|
|
- // ...state.pagination
|
|
|
- // });
|
|
|
- // state.tableList = res.data.rows;
|
|
|
- // state.pagination.pageTotal = res.data.total;
|
|
|
- // state.loading = false;
|
|
|
- // setTimeout(() => {
|
|
|
- // if (state.tableList.length > 0) {
|
|
|
- // showGuide.value = true;
|
|
|
- // }
|
|
|
- // }, 500);
|
|
|
- // } catch (e) {
|
|
|
- // state.loading = false;
|
|
|
- // console.log(e);
|
|
|
- // }
|
|
|
- // console.log('getList');
|
|
|
+ state.loading = true;
|
|
|
+ try {
|
|
|
+ const res = await api_trainingList({
|
|
|
+ ...state.searchForm,
|
|
|
+ ...state.pagination,
|
|
|
+ ...getTimes(
|
|
|
+ state.searchForm.timer,
|
|
|
+ ['startTime', 'endTime'],
|
|
|
+ 'YYYY-MM-DD'
|
|
|
+ )
|
|
|
+ });
|
|
|
+ const result = res.data.rows || [];
|
|
|
+ result.forEach((item: any) => {
|
|
|
+ let pTitle = '';
|
|
|
+ let eTitle = '';
|
|
|
+ if (
|
|
|
+ item.studentLessonTrainingDetails &&
|
|
|
+ item.studentLessonTrainingDetails.length > 0
|
|
|
+ ) {
|
|
|
+ item.studentLessonTrainingDetails.forEach((child: any) => {
|
|
|
+ if (child.trainingType === 'PRACTICE') {
|
|
|
+ pTitle += pTitle ? '、' + child.musicName : child.musicName;
|
|
|
+ } else {
|
|
|
+ eTitle += eTitle ? '、' + child.musicName : child.musicName;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ item.pTitle = pTitle;
|
|
|
+ item.eTitle = eTitle;
|
|
|
+ });
|
|
|
+ state.tableList = res.data.rows;
|
|
|
+ state.pagination.pageTotal = res.data.total;
|
|
|
+ state.loading = false;
|
|
|
+ } catch (e) {
|
|
|
+ state.loading = false;
|
|
|
+ console.log(e);
|
|
|
+ }
|
|
|
};
|
|
|
|
|
|
// 获取学年
|
|
@@ -148,6 +202,7 @@ export default defineComponent({
|
|
|
state.loading = true;
|
|
|
await getYearList();
|
|
|
await getLevelList();
|
|
|
+ await getList();
|
|
|
state.loading = false;
|
|
|
});
|
|
|
return () => (
|
|
@@ -166,6 +221,22 @@ export default defineComponent({
|
|
|
<NFormItem>
|
|
|
<CSelect
|
|
|
{...({
|
|
|
+ options: [
|
|
|
+ { id: '', name: '作业对象' },
|
|
|
+ { id: 'PERSON', name: '个人' },
|
|
|
+ { id: 'CLASS', name: '班级' }
|
|
|
+ ],
|
|
|
+ placeholder: '选择作业对象',
|
|
|
+ clearable: true,
|
|
|
+ inline: true,
|
|
|
+ labelField: 'name',
|
|
|
+ valueField: 'id'
|
|
|
+ } as any)}
|
|
|
+ v-model:value={state.searchForm.homeworkObj}></CSelect>
|
|
|
+ </NFormItem>
|
|
|
+ <NFormItem>
|
|
|
+ <CSelect
|
|
|
+ {...({
|
|
|
options: state.popSelectYearList,
|
|
|
placeholder: '选择学年',
|
|
|
clearable: true,
|
|
@@ -211,20 +282,23 @@ export default defineComponent({
|
|
|
<NFormItem>
|
|
|
<CSelect
|
|
|
{...({
|
|
|
- // options: state.subjectList,
|
|
|
+ options: [
|
|
|
+ { value: '', label: '全部状态' },
|
|
|
+ { value: 0, label: '进行中' },
|
|
|
+ { value: 1, label: '已结束' }
|
|
|
+ ],
|
|
|
placeholder: '选择状态',
|
|
|
clearable: true,
|
|
|
inline: true
|
|
|
} as any)}
|
|
|
- v-model:value={state.searchForm.subjectId}></CSelect>
|
|
|
+ v-model:value={state.searchForm.status}></CSelect>
|
|
|
</NFormItem>
|
|
|
<NFormItem>
|
|
|
<CDatePicker
|
|
|
class={styles.CDatePickerItem}
|
|
|
separator={'-'}
|
|
|
type="daterange"
|
|
|
- // timerValue={timer.value}
|
|
|
- ></CDatePicker>
|
|
|
+ timerValue={state.searchForm.timer}></CDatePicker>
|
|
|
</NFormItem>
|
|
|
<NFormItem>
|
|
|
<NSpace justify="end">
|
|
@@ -245,7 +319,12 @@ export default defineComponent({
|
|
|
<NButton
|
|
|
class={styles.addBtn}
|
|
|
type="primary"
|
|
|
- onClick={() => (state.showaddClass = true)}
|
|
|
+ onClick={() => {
|
|
|
+ state.workVisiable = true;
|
|
|
+ nextTick(() => {
|
|
|
+ getModalHeight();
|
|
|
+ });
|
|
|
+ }}
|
|
|
v-slots={{
|
|
|
icon: () => (
|
|
|
<>
|
|
@@ -259,78 +338,93 @@ export default defineComponent({
|
|
|
布置作业
|
|
|
</NButton>
|
|
|
<div class={styles.tableWrap}>
|
|
|
- <div class={styles.listSection}>
|
|
|
- {[1, 2, 3].map(() => (
|
|
|
- <div class={styles.item}>
|
|
|
- <div class={styles.header}>
|
|
|
- <NAvatar class={styles.navatar} round src={teacherIcon} />
|
|
|
- <div class={styles.userInfo}>
|
|
|
- <h2>孙忆枫</h2>
|
|
|
- <p>
|
|
|
- 布置时间:2022-10-08<span>|</span>
|
|
|
- <span>截止时间:2022-10-09</span>
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- <div class={styles.ing}>进行中</div>
|
|
|
- </div>
|
|
|
- <div class={styles.content}>
|
|
|
- <div>
|
|
|
- <div class={styles.homeTitle}>2024年01月17日-课后作业</div>
|
|
|
- <div class={styles.homeContent}>
|
|
|
- <span class={styles.title}>作业对象:</span>
|
|
|
- <span class={styles.text}>一年级1班、一年级2班</span>
|
|
|
+ <NSpin show={state.loading}>
|
|
|
+ <div class={styles.listSection}>
|
|
|
+ {state.tableList.map((item: any) => (
|
|
|
+ <div class={styles.item}>
|
|
|
+ <div class={styles.header}>
|
|
|
+ <NAvatar
|
|
|
+ class={styles.navatar}
|
|
|
+ round
|
|
|
+ src={item.teacherAvatar || teacherIcon}
|
|
|
+ />
|
|
|
+ <div class={styles.userInfo}>
|
|
|
+ <h2>{item.teacherName}</h2>
|
|
|
+ <p>
|
|
|
+ 布置时间:{dayjs(item.createTime).format('YYYY-MM-DD')}
|
|
|
+ <span>|</span>
|
|
|
+ <span>
|
|
|
+ 截止时间:
|
|
|
+ {dayjs(item.expireDate).format('YYYY-MM-DD')}
|
|
|
+ </span>
|
|
|
+ </p>
|
|
|
</div>
|
|
|
- <div class={[styles.homeContent, styles.homeworkText]}>
|
|
|
- <span class={styles.title}>作业内容:</span>
|
|
|
- <div class={styles.pSection}>
|
|
|
- <p class={[styles.text, styles.p1]}>
|
|
|
- 练习曲目《小星星》、《我和我的祖国》、《千与千寻》-课后作业
|
|
|
- 练习曲目《小星星》、《我和我的祖国》、《千与千寻》-课后作业
|
|
|
- </p>
|
|
|
- <p class={[styles.text, styles.p2]}>
|
|
|
- 练习曲目《小星星》、《我和我的祖国》、《千与千寻》-课后作业
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class={styles.homeSubmit}>
|
|
|
- <span class={styles.title}>已提交:</span>
|
|
|
- <span class={styles.text}>0/50人</span>
|
|
|
- <NDivider vertical />
|
|
|
- <span class={styles.title}>提交率:</span>
|
|
|
- <span class={styles.text}>60%</span>
|
|
|
- <NDivider vertical />
|
|
|
- <span class={styles.title}>合格人数:</span>
|
|
|
- <span class={styles.text}>20人</span>
|
|
|
- <NDivider vertical />
|
|
|
- <span class={styles.title}>合格率:</span>
|
|
|
- <span class={styles.text}>80%</span>
|
|
|
+ <div class={item.status === 1 ? styles.over : styles.ing}>
|
|
|
+ {item.status === 1 ? '已结束' : '进行中'}
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <div class={styles.content}>
|
|
|
+ <div>
|
|
|
+ <div class={styles.homeTitle}>{item.name}</div>
|
|
|
+ <div class={styles.homeContent}>
|
|
|
+ <span class={styles.title}>作业对象:</span>
|
|
|
+ <span class={styles.text}>{item.homeworkObjName}</span>
|
|
|
+ </div>
|
|
|
+ <div class={[styles.homeContent, styles.homeworkText]}>
|
|
|
+ <span class={styles.title}>作业内容:</span>
|
|
|
+ <div class={styles.pSection}>
|
|
|
+ <p class={[styles.text, styles.p1]}>{item.pTitle}</p>
|
|
|
+ <p class={[styles.text, styles.p2]}>{item.eTitle}</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class={styles.homeSubmit}>
|
|
|
+ <span class={styles.title}>已提交:</span>
|
|
|
+ <span class={styles.text}>
|
|
|
+ {item.trainingNum || 0}/{item.trainingNum || 0}人
|
|
|
+ </span>
|
|
|
+ <NDivider vertical />
|
|
|
+ <span class={styles.title}>提交率:</span>
|
|
|
+ <span class={styles.text}>
|
|
|
+ {item.trainingRate || 0}%
|
|
|
+ </span>
|
|
|
+ <NDivider vertical />
|
|
|
+ <span class={styles.title}>合格人数:</span>
|
|
|
+ <span class={styles.text}>
|
|
|
+ {item.standardNum || 0}人
|
|
|
+ </span>
|
|
|
+ <NDivider vertical />
|
|
|
+ <span class={styles.title}>合格率:</span>
|
|
|
+ <span class={styles.text}>
|
|
|
+ {item.qualifiedRate || 0}%
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
|
|
|
- <NButton class={styles.errorBtn} type="error" color="#F94D50">
|
|
|
- 撤回
|
|
|
- </NButton>
|
|
|
+ <NButton
|
|
|
+ class={styles.errorBtn}
|
|
|
+ type="error"
|
|
|
+ color="#F94D50">
|
|
|
+ 撤回
|
|
|
+ </NButton>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- ))}
|
|
|
- </div>
|
|
|
- {/* <NDataTable
|
|
|
- v-slots={{
|
|
|
- empty: () => <TheEmpty></TheEmpty>
|
|
|
- }}
|
|
|
- class={styles.classTable}
|
|
|
- loading={state.loading}
|
|
|
- columns={columns()}
|
|
|
- data={state.tableList}></NDataTable> */}
|
|
|
- <Pagination
|
|
|
- v-model:page={state.pagination.page}
|
|
|
- v-model:pageSize={state.pagination.rows}
|
|
|
- v-model:pageTotal={state.pagination.pageTotal}
|
|
|
- onList={getList}
|
|
|
- sync
|
|
|
- />
|
|
|
- </div>
|
|
|
+ ))}
|
|
|
+ </div>
|
|
|
+ {state.tableList.length <= 0 && (
|
|
|
+ <TheEmpty class={styles.nowEmpty} />
|
|
|
+ )}
|
|
|
+ </NSpin>
|
|
|
|
|
|
+ {state.tableList.length > 0 && (
|
|
|
+ <Pagination
|
|
|
+ v-model:page={state.pagination.page}
|
|
|
+ v-model:pageSize={state.pagination.rows}
|
|
|
+ v-model:pageTotal={state.pagination.pageTotal}
|
|
|
+ onList={getList}
|
|
|
+ sync
|
|
|
+ />
|
|
|
+ )}
|
|
|
+ </div>
|
|
|
{/* <NModal
|
|
|
v-model:show={state.removeVisiable}
|
|
|
preset="card"
|
|
@@ -352,6 +446,21 @@ export default defineComponent({
|
|
|
</NSpace>
|
|
|
</div>
|
|
|
</NModal> */}
|
|
|
+
|
|
|
+ <NModal
|
|
|
+ v-model:show={state.workVisiable}
|
|
|
+ preset="card"
|
|
|
+ class={['modalTitle background', styles.workVisiable]}
|
|
|
+ title={'作业详情'}>
|
|
|
+ <div id="model-homework-height" class={styles.workContainer}>
|
|
|
+ <div class={styles.workTrain}>
|
|
|
+ <Train />
|
|
|
+ </div>
|
|
|
+ <div class={styles.resourceMain}>
|
|
|
+ <ResourceMain cardType="homerowk-record" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </NModal>
|
|
|
</div>
|
|
|
);
|
|
|
}
|