index.tsx 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151
  1. import { defineComponent, reactive } from 'vue';
  2. import styles from './index.module.less';
  3. import {
  4. NAvatar,
  5. NButton,
  6. NCheckbox,
  7. NInput,
  8. NModal,
  9. NSpace,
  10. useMessage
  11. } from 'naive-ui';
  12. import commentBg from '../images/common-bg.png';
  13. import commentTop from '../images/common-top.png';
  14. import iconClose from '../images/icon-close-line.png';
  15. import defultHeade from '@/components/layout/images/teacherIcon.png';
  16. import { api_setComment } from '../../api';
  17. import dayjs from 'dayjs';
  18. import { storage } from '/src/utils/storage';
  19. export default defineComponent({
  20. name: 'commit-work',
  21. props: {
  22. /** 评语内容 */
  23. comment: {
  24. type: String,
  25. default: ''
  26. },
  27. workInfo: {
  28. type: Object,
  29. default: () => ({})
  30. }
  31. },
  32. emits: ['close', 'confrim'],
  33. setup(props, { emit }) {
  34. const message = useMessage();
  35. const state = reactive({
  36. removeVisiable1: false,
  37. comment: props.comment,
  38. btnLoading: false,
  39. commentRemind: true
  40. });
  41. const onSubmit = async () => {
  42. // const isCommentRemind = storage.get('isCommentRemind');
  43. // if (isCommentRemind != 1) {
  44. // state.removeVisiable1 = true;
  45. // return;
  46. // }
  47. state.btnLoading = true;
  48. try {
  49. await api_setComment({
  50. comment: state.comment,
  51. id: props.workInfo.studentLessonTrainingId
  52. });
  53. message.success('点评成功');
  54. emit('confrim');
  55. } catch {
  56. //
  57. }
  58. state.btnLoading = false;
  59. };
  60. const onSure = () => {
  61. if (state.commentRemind) {
  62. storage.set('isCommentRemind', 1);
  63. }
  64. state.removeVisiable1 = false;
  65. onSubmit();
  66. };
  67. return () => (
  68. <div class={styles.commonWork}>
  69. <img src={commentTop} class={styles.dingPng} alt="" />
  70. <img src={commentBg} class={styles.downMoveBg} alt="" />
  71. <img
  72. src={iconClose}
  73. class={styles.closeAble}
  74. onClick={() => {
  75. emit('close');
  76. }}
  77. alt=""
  78. />
  79. <h2>点评作业</h2>
  80. <div class={styles.header}>
  81. <NAvatar class={styles.navatar} round src={defultHeade} />
  82. <div class={styles.userInfo}>
  83. <h3>{props.workInfo.studentName}</h3>
  84. <p>
  85. 提交时间:{dayjs(props.workInfo.submitTime).format('YYYY-MM-DD')}
  86. </p>
  87. </div>
  88. </div>
  89. <NInput
  90. class={styles.textarea}
  91. type="textarea"
  92. rows={10}
  93. maxlength={500}
  94. showCount
  95. autosize={false}
  96. disabled={props.workInfo.isLook}
  97. v-model:value={state.comment}
  98. placeholder="请输入评语…"
  99. />
  100. {!props.workInfo.isLook && (
  101. <NSpace style={{ padding: '25px 0 0 0' }} justify="center">
  102. <NButton round type="default" onClick={() => emit('close')}>
  103. 取消
  104. </NButton>
  105. <NButton
  106. class={styles.submitAppBtn}
  107. round
  108. type="primary"
  109. loading={state.btnLoading}
  110. onClick={onSubmit}>
  111. 确定
  112. </NButton>
  113. </NSpace>
  114. )}
  115. <NModal
  116. v-model:show={state.removeVisiable1}
  117. preset="card"
  118. class={['modalTitle', styles.removeVisiable1]}
  119. title={'提交评语'}>
  120. <div class={styles.studentRemove}>
  121. <p>
  122. 评语提交后<span>不可修改或删除</span>,请确认是否提交
  123. </p>
  124. <div class={styles.selectBtn}>
  125. <NCheckbox v-model:checked={state.commentRemind}>
  126. 下次不再提醒
  127. </NCheckbox>
  128. </div>
  129. <NSpace class={styles.btnGroupModal} justify="center">
  130. <NButton round onClick={() => (state.removeVisiable1 = false)}>
  131. 取消
  132. </NButton>
  133. <NButton round type="primary" onClick={onSure}>
  134. 确定
  135. </NButton>
  136. </NSpace>
  137. </div>
  138. </NModal>
  139. </div>
  140. );
  141. }
  142. });