index.tsx 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431
  1. import { defineComponent, onMounted, reactive, ref } from 'vue';
  2. import styles from './index.module.less';
  3. import {
  4. NButton,
  5. NDataTable,
  6. NForm,
  7. NFormItem,
  8. NImage,
  9. NModal,
  10. NProgress,
  11. NSpace
  12. } from 'naive-ui';
  13. import SearchInput from '@/components/searchInput';
  14. import CSelect from '@/components/CSelect';
  15. import Pagination from '@/components/pagination';
  16. import { api_trainingDetail, api_trainingStudentList } from '../api';
  17. import { useRoute } from 'vue-router';
  18. import CBreadcrumb from '/src/components/CBreadcrumb';
  19. import defultHeade from '@/components/layout/images/teacherIcon.png';
  20. import { trainingStatusArray } from '@/utils/searchArray';
  21. import dayjs from 'dayjs';
  22. import TheEmpty from '/src/components/TheEmpty';
  23. import TrainingDetails from '../../classList/modals/TrainingDetails';
  24. export default defineComponent({
  25. name: 'homewrok-record-detail',
  26. setup() {
  27. const route = useRoute();
  28. const state = reactive({
  29. searchForm: {
  30. keyword: '',
  31. trainingStatus: '' as any,
  32. classGroupId: '' as any
  33. },
  34. loading: false,
  35. pagination: {
  36. page: 1,
  37. rows: 10,
  38. pageTotal: 4
  39. },
  40. studentClassList: [] as any,
  41. tableList: [] as any,
  42. workInfo: {} as any,
  43. detailVisiable: false,
  44. activeRow: null as any,
  45. index: 0
  46. });
  47. const TrainingDetailsRef = ref();
  48. const routerList = ref([
  49. { name: '作业', path: '/homework-record' },
  50. { name: route.query.name, path: '/homework-record-detail' }
  51. ] as any);
  52. const search = () => {
  53. state.pagination.page = 1;
  54. getList();
  55. };
  56. const onReset = () => {
  57. state.searchForm = {
  58. keyword: '',
  59. trainingStatus: '' as any,
  60. classGroupId: '' as any
  61. };
  62. search();
  63. };
  64. const getList = async () => {
  65. state.loading = true;
  66. try {
  67. const res = await api_trainingStudentList({
  68. trainingId: route.query.id,
  69. ...state.searchForm,
  70. ...state.pagination
  71. });
  72. state.tableList = res.data.rows;
  73. state.pagination.pageTotal = res.data.total;
  74. state.loading = false;
  75. } catch (e) {
  76. state.loading = false;
  77. console.log(e);
  78. }
  79. };
  80. const getWorkInfo = async () => {
  81. try {
  82. const res = await api_trainingDetail({ id: route.query.id });
  83. const result = res.data || {};
  84. // state.workInfo
  85. let pTitle = '';
  86. let eTitle = '';
  87. if (
  88. result.studentLessonTrainingDetails &&
  89. result.studentLessonTrainingDetails.length > 0
  90. ) {
  91. result.studentLessonTrainingDetails.forEach((child: any) => {
  92. // if (child.trainingType === 'PRACTICE' && child.musicName) {
  93. // pTitle += pTitle ? '、' + child.musicName : child.musicName;
  94. // }
  95. // if (child.trainingType === 'EVALUATION' && child.musicName) {
  96. // eTitle += eTitle ? '、' + child.musicName : child.musicName;
  97. // }
  98. if (child.trainingType === 'PRACTICE' && child.musicName) {
  99. pTitle += pTitle
  100. ? '、《' + child.musicName + '》'
  101. : '练习曲目《' + child.musicName + '》';
  102. }
  103. if (child.trainingType === 'EVALUATION' && child.musicName) {
  104. eTitle += eTitle
  105. ? '、《' + child.musicName + '》'
  106. : '评测曲目《' + child.musicName + '》';
  107. }
  108. });
  109. }
  110. result.pTitle = pTitle;
  111. result.eTitle = eTitle;
  112. state.workInfo = result;
  113. // 班级列表
  114. const classList = result.studentClassGroup || [];
  115. classList.forEach((item: any) => {
  116. state.studentClassList.push({
  117. label: item.name,
  118. value: item.id
  119. });
  120. });
  121. } catch (e) {
  122. console.log(e);
  123. }
  124. };
  125. const lookDetail = (row: any, index: number) => {
  126. console.log(index, 'index');
  127. state.index = index + 1;
  128. state.activeRow = row;
  129. state.detailVisiable = true;
  130. };
  131. onMounted(() => {
  132. getWorkInfo();
  133. getList();
  134. });
  135. const columns = () => {
  136. return [
  137. {
  138. title: '学生姓名',
  139. key: 'studentName'
  140. },
  141. {
  142. title: '最后提交时间',
  143. key: 'submitTime',
  144. render(row: any) {
  145. return row.submitTime
  146. ? dayjs(row.submitTime).format('YYYY-MM-DD')
  147. : '--';
  148. }
  149. },
  150. {
  151. title: '所属班级',
  152. key: 'classGroupName'
  153. },
  154. {
  155. title: '作业状态',
  156. key: 'sex',
  157. render(row: any) {
  158. return (
  159. <div>
  160. {row.trainingStatus == 'UNSUBMITTED' ? (
  161. <p class={styles.nosub}>未提交</p>
  162. ) : null}
  163. {row.trainingStatus == 'SUBMITTED' ? (
  164. <p class={styles.ison}>不合格</p>
  165. ) : null}
  166. {row.trainingStatus == 'TARGET' ? (
  167. <p class={styles.isok}>合格</p>
  168. ) : null}
  169. </div>
  170. );
  171. }
  172. },
  173. {
  174. title: '操作',
  175. key: 'id',
  176. render(row: any, index: number) {
  177. return (
  178. <NButton
  179. text
  180. type="primary"
  181. onClick={() => {
  182. lookDetail(row, index);
  183. }}>
  184. 详情
  185. </NButton>
  186. );
  187. }
  188. }
  189. ];
  190. };
  191. const goToNext = () => {
  192. ++state.index;
  193. state.activeRow = state.tableList[state.index - 1];
  194. TrainingDetailsRef.value.getTrainingDetail(
  195. state.activeRow.studentLessonTrainingId
  196. );
  197. };
  198. const gotoPre = () => {
  199. --state.index;
  200. state.activeRow = state.tableList[state.index - 1];
  201. TrainingDetailsRef.value.getTrainingDetail(
  202. state.activeRow.studentLessonTrainingId
  203. );
  204. };
  205. return () => (
  206. <div>
  207. <CBreadcrumb list={routerList.value}></CBreadcrumb>
  208. <div class={styles.listWrap}>
  209. <div class={styles.teacherSection}>
  210. <div class={styles.teacherList}>
  211. <div class={styles.tTemp}>
  212. <div class={styles.teacherHeader}>
  213. <div class={styles.teacherHeaderBorder}>
  214. <NImage
  215. class={styles.teacherHeaderImg}
  216. src={state.workInfo.teacherAvatar || defultHeade}
  217. previewDisabled></NImage>
  218. </div>
  219. </div>
  220. <div class={styles.workafterInfo}>
  221. <h4>{state.workInfo.teacherName}</h4>
  222. {state.workInfo.createTime && (
  223. <p>
  224. 布置时间:
  225. {state.workInfo.createTime &&
  226. dayjs(state.workInfo.createTime).format(
  227. 'YYYY-MM-DD HH:mm'
  228. )}{' '}
  229. |{' '}
  230. <span>
  231. 截止时间:
  232. {state.workInfo.expireDate &&
  233. dayjs(state.workInfo.expireDate).format(
  234. 'YYYY-MM-DD HH:mm'
  235. )}
  236. </span>
  237. </p>
  238. )}
  239. </div>
  240. </div>
  241. <div class={styles.infos}>
  242. <div class={styles.homeTitle}>{state.workInfo.name}</div>
  243. <div class={[styles.homeContent, styles.homeworkText]}>
  244. <div class={styles.pSection}>
  245. {state.workInfo.pTitle && (
  246. <p class={[styles.text, styles.p1]}>
  247. {state.workInfo.pTitle}
  248. </p>
  249. )}
  250. {state.workInfo.eTitle && (
  251. <p class={[styles.text, styles.p2]}>
  252. {state.workInfo.eTitle}
  253. </p>
  254. )}
  255. </div>
  256. </div>
  257. </div>
  258. </div>
  259. <div>
  260. <div class={styles.stitcTitle}>作业完成情况</div>
  261. <div class={styles.stitcConent}>
  262. <NSpace size={[38, 0]}>
  263. <NProgress
  264. percentage={state.workInfo.trainingRate || 0}
  265. // percentage={20}
  266. offset-degree={180}
  267. type="circle"
  268. strokeWidth={6}
  269. rail-color={'EDEFFA'}
  270. color={'#64A5FF'}>
  271. <div class={styles.contentRect}>
  272. <div class={styles.nums}>
  273. {state.workInfo.trainingNum || 0}
  274. <i>/</i>
  275. {state.workInfo.expectNum || 0}
  276. <span>人</span>
  277. </div>
  278. <div class={styles.text}>已提交</div>
  279. </div>
  280. </NProgress>
  281. <NProgress
  282. percentage={state.workInfo.trainingRate || 0}
  283. offset-degree={180}
  284. strokeWidth={6}
  285. type="circle"
  286. rail-color={'EDEFFA'}
  287. color={'#64A5FF'}>
  288. <div class={styles.contentRect}>
  289. <div class={styles.nums}>
  290. {state.workInfo.trainingRate || 0}%
  291. </div>
  292. <div class={styles.text}>提交率</div>
  293. </div>
  294. </NProgress>
  295. <NProgress
  296. percentage={state.workInfo.qualifiedRate || 0}
  297. offset-degree={180}
  298. strokeWidth={6}
  299. type="circle"
  300. rail-color={'EDEFFA'}
  301. color={'#40CEAE'}>
  302. <div class={styles.contentRect}>
  303. <div class={styles.nums}>
  304. {state.workInfo.standardNum || 0}
  305. <span>人</span>
  306. </div>
  307. <div class={styles.text}>合格人数</div>
  308. </div>
  309. </NProgress>
  310. <NProgress
  311. percentage={state.workInfo.qualifiedRate || 0}
  312. offset-degree={180}
  313. strokeWidth={6}
  314. type="circle"
  315. rail-color={'EDEFFA'}
  316. color={'#40CEAE'}>
  317. <div class={styles.contentRect}>
  318. <div class={styles.nums}>
  319. {state.workInfo.qualifiedRate || 0}%
  320. </div>
  321. <div class={styles.text}>合格率</div>
  322. </div>
  323. </NProgress>
  324. </NSpace>
  325. </div>
  326. </div>
  327. </div>
  328. <div class={styles.searchList}>
  329. <NForm label-placement="left" inline>
  330. <NFormItem>
  331. <SearchInput
  332. {...{ placeholder: '请输入学生姓名' }}
  333. class={styles.searchInput}
  334. searchWord={state.searchForm.keyword}
  335. onChangeValue={(val: string) =>
  336. (state.searchForm.keyword = val)
  337. }></SearchInput>
  338. </NFormItem>
  339. <NFormItem>
  340. <CSelect
  341. {...({
  342. options: [
  343. {
  344. label: '全部班级',
  345. value: ''
  346. },
  347. ...state.studentClassList
  348. ],
  349. placeholder: '全部班级',
  350. clearable: true,
  351. inline: true
  352. } as any)}
  353. v-model:value={state.searchForm.classGroupId}></CSelect>
  354. </NFormItem>
  355. <NFormItem>
  356. <CSelect
  357. {...({
  358. options: [
  359. {
  360. label: '全部状态',
  361. value: ''
  362. },
  363. ...trainingStatusArray
  364. ],
  365. placeholder: '作业状态',
  366. clearable: true,
  367. inline: true
  368. } as any)}
  369. v-model:value={state.searchForm.trainingStatus}></CSelect>
  370. </NFormItem>
  371. <NFormItem>
  372. <NSpace justify="end">
  373. <NButton type="primary" class="searchBtn" onClick={search}>
  374. 搜索
  375. </NButton>
  376. <NButton
  377. type="primary"
  378. ghost
  379. class="resetBtn"
  380. onClick={onReset}>
  381. 重置
  382. </NButton>
  383. </NSpace>
  384. </NFormItem>
  385. </NForm>
  386. </div>
  387. <div class={styles.tableWrap}>
  388. <NDataTable
  389. v-slots={{
  390. empty: () => <TheEmpty></TheEmpty>
  391. }}
  392. class={styles.classTable}
  393. loading={state.loading}
  394. columns={columns()}
  395. data={state.tableList}></NDataTable>
  396. <Pagination
  397. v-model:page={state.pagination.page}
  398. v-model:pageSize={state.pagination.rows}
  399. v-model:pageTotal={state.pagination.pageTotal}
  400. onList={getList}
  401. // sync
  402. />
  403. </div>
  404. </div>
  405. <NModal
  406. v-model:show={state.detailVisiable}
  407. preset="card"
  408. class={['modalTitle background', styles.wordDetailModel]}
  409. title={'作业详情'}>
  410. <TrainingDetails
  411. onNext={() => goToNext()}
  412. onPre={() => gotoPre()}
  413. ref={TrainingDetailsRef}
  414. onClose={() => (state.detailVisiable = false)}
  415. total={state.tableList.length}
  416. current={state.index}
  417. activeRow={state.activeRow}></TrainingDetails>
  418. </NModal>
  419. </div>
  420. );
  421. }
  422. });