index.vue 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379
  1. <template>
  2. <div class="exercise">
  3. <div class="list">
  4. <el-button icon="el-icon-back" @click="back">返回练习管理</el-button>
  5. <div class="list-title">课上练习</div>
  6. <div class="exercise-list">
  7. <ul>
  8. <li v-for="(item, i) in index_list" :key="i" :class="['exercise-item', { active: i === curIndex }]">
  9. <SvgIcon icon-class="child" :size="20" />
  10. <span class="item-name nowrap-ellipsis" @click="selectExerciseItem(i)">
  11. {{ i + 1 }}. {{ exerciseNames[item.type] }}
  12. </span>
  13. <SvgIcon icon-class="copy" class="pointer" :size="10" @click="copy(i)" />
  14. </li>
  15. </ul>
  16. </div>
  17. <div class="list-operate">
  18. <!-- <el-button type="primary">批量导入</el-button> -->
  19. <el-button type="primary" @click="addQuestionToExercise('select', 'single')">新建</el-button>
  20. </div>
  21. </div>
  22. <CreateMain
  23. ref="createMain"
  24. :cur-index="curIndex"
  25. :index-list="index_list"
  26. @selectExerciseItem="selectExerciseItem"
  27. @setUp="setUp"
  28. @setPreview="setPreview"
  29. @deleteQuestion="deleteQuestion"
  30. @createNewQuestion="createNewQuestion"
  31. />
  32. <div class="preview" :style="{ minHeight: preview ? '300px' : 'auto' }">
  33. <div class="preview-header">
  34. <span class="quick-preview">快捷预览:</span>
  35. <div class="preview-right">
  36. <template v-if="preview">
  37. <span class="preview-button plain" @click="refreshPreviewData">
  38. <SvgIcon icon-class="loop" size="14" /><span>刷新</span>
  39. </span>
  40. <span class="preview-button"><SvgIcon icon-class="eye" /><span>完整预览</span></span>
  41. <span class="preview-button plain" @click="setPreview"><SvgIcon icon-class="close" />关闭预览</span>
  42. </template>
  43. <template v-else>
  44. <span class="preview-button" @click="setPreview"><SvgIcon icon-class="eye" />预览</span>
  45. </template>
  46. </div>
  47. </div>
  48. <div class="preview-content">
  49. <component :is="curPreviewPage" v-if="preview" :data="previewData" :child-preview-data="childPreviewData" />
  50. </div>
  51. </div>
  52. </div>
  53. </template>
  54. <script>
  55. import { exerciseNames } from '../data/common';
  56. import { AddQuestionToExercise, DeleteQuestion, GetExerciseQuestionIndexList, GetQuestionInfo } from '@/api/exercise';
  57. import CreateMain from './components/create.vue';
  58. import SelectPreview from '@/views/exercise_questions/preview/SelectPreview.vue';
  59. import JudgePreview from '@/views/exercise_questions/preview/JudgePreview.vue';
  60. import MatchingPreview from '@/views/exercise_questions/preview/MatchingPreview.vue';
  61. import ChinesePreview from '@/views/exercise_questions/preview/ChinesePreview.vue';
  62. import WritePreview from '../preview/WritePreview.vue';
  63. import FillPreview from '../preview/FillPreview.vue';
  64. import ReadAloudPreview from '../preview/ReadAloudPreview.vue';
  65. import DialoguePreview from '../preview/DialoguePreview.vue';
  66. import TalkPictruePreview from '../preview/TalkPictruePreview.vue';
  67. import ChooseTonePreview from '../preview/ChooseTonePreview.vue';
  68. import RepeatPreview from '../preview/RepeatPreview.vue';
  69. import ReadPreview from '../preview/ReadPreview.vue';
  70. import SortPreview from '../preview/SortPreview.vue';
  71. export default {
  72. name: 'CreateExercise',
  73. components: {
  74. CreateMain,
  75. SelectPreview,
  76. JudgePreview,
  77. MatchingPreview,
  78. ChinesePreview,
  79. WritePreview,
  80. FillPreview,
  81. ReadAloudPreview,
  82. DialoguePreview,
  83. TalkPictruePreview,
  84. ChooseTonePreview,
  85. RepeatPreview,
  86. ReadPreview,
  87. SortPreview,
  88. },
  89. provide() {
  90. return {
  91. isSetUp: () => this.isSetUp,
  92. updateCurQuestionType: this.updateCurQuestionType,
  93. exercise_id: this.id,
  94. refreshPreviewData: this.refreshPreviewData,
  95. };
  96. },
  97. data() {
  98. const { id } = this.$route.query;
  99. return {
  100. id, // 练习id
  101. curIndex: 0, // 当前练习索引
  102. index_list: [], // 练习列表
  103. exerciseNames, // 练习名称
  104. isSetUp: false, // 设置
  105. preview: false, // 预览显示
  106. previewData: {}, // 预览数据
  107. previewComponents: {
  108. select: SelectPreview,
  109. judge: JudgePreview,
  110. matching: MatchingPreview,
  111. chinese: ChinesePreview,
  112. write: WritePreview,
  113. fill: FillPreview,
  114. read_aloud: ReadAloudPreview,
  115. dialogue: DialoguePreview,
  116. talk_picture: TalkPictruePreview,
  117. choose_tone: ChooseTonePreview,
  118. repeat: RepeatPreview,
  119. read: ReadPreview,
  120. sort: SortPreview,
  121. },
  122. };
  123. },
  124. computed: {
  125. curPreviewPage() {
  126. if (this.index_list.length === 0) return '';
  127. return this.previewComponents[this.index_list[this.curIndex].type];
  128. },
  129. },
  130. watch: {
  131. curIndex() {
  132. if (this.index_list.length === 0) return;
  133. this.getQuestionInfo();
  134. },
  135. },
  136. created() {
  137. this.getExerciseQuestionIndexList(true);
  138. },
  139. methods: {
  140. // 返回练习管理
  141. back() {
  142. this.$router.push('/personal_question');
  143. },
  144. /**
  145. * 添加题目到练习
  146. * @param {string} type 题目类型
  147. * @param {string} additional_type 附加类型
  148. * @param {string} content 题目内容
  149. */
  150. addQuestionToExercise(type, additional_type, content = '') {
  151. AddQuestionToExercise({
  152. exercise_id: this.id,
  153. type,
  154. additional_type,
  155. content,
  156. })
  157. .then(() => {
  158. this.getExerciseQuestionIndexList();
  159. })
  160. .catch(() => {
  161. this.$message.error('添加失败');
  162. });
  163. },
  164. // 创建新题
  165. createNewQuestion() {
  166. if (this.index_list.length === 0) {
  167. this.addQuestionToExercise('select', 'single');
  168. return;
  169. }
  170. let { type, additional_type } = this.index_list[this.curIndex];
  171. this.addQuestionToExercise(type, additional_type);
  172. },
  173. /**
  174. * 获取练习题目索引列表
  175. */
  176. getExerciseQuestionIndexList(init) {
  177. GetExerciseQuestionIndexList({ exercise_id: this.id })
  178. .then(({ index_list }) => {
  179. this.index_list = index_list;
  180. if (!init) return;
  181. this.getQuestionInfo();
  182. })
  183. .catch((err) => {
  184. console.log(err);
  185. });
  186. },
  187. /**
  188. * 获取题目信息
  189. */
  190. getQuestionInfo() {
  191. if (this.index_list.length === 0) return;
  192. GetQuestionInfo({ question_id: this.index_list[this.curIndex].id })
  193. .then(({ question }) => {
  194. if (!question.content) return;
  195. this.$nextTick(() => {
  196. this.$refs.createMain.$refs.exercise?.[0].setQuestion(question);
  197. this.refreshPreviewData();
  198. });
  199. })
  200. .catch(() => {});
  201. },
  202. /**
  203. * 复制练习
  204. * @param {Number} index 练习索引
  205. */
  206. copy(index) {
  207. this.$confirm('是否复制当前题目', '提示', {
  208. confirmButtonText: '确定',
  209. cancelButtonText: '取消',
  210. type: 'warning',
  211. })
  212. .then(() => {
  213. GetQuestionInfo({ question_id: this.index_list[index].id }).then(
  214. ({ question: { type, additional_type, content } }) => {
  215. this.addQuestionToExercise(type, additional_type, content);
  216. },
  217. );
  218. })
  219. .catch(() => {});
  220. },
  221. /**
  222. * 选择练习
  223. * @param {Number} index 练习索引
  224. * @param {object} data 练习数据
  225. */
  226. selectExerciseItem(index, data) {
  227. if (index < 0 || index > this.index_list.length - 1) return;
  228. this.curIndex = index;
  229. this.$refs.createMain.resetSaveDate();
  230. this.$refs.createMain.saveQuestion(data);
  231. },
  232. // 设置
  233. setUp() {
  234. this.isSetUp = !this.isSetUp;
  235. },
  236. // 刷新预览数据
  237. refreshPreviewData() {
  238. this.previewData = this.$refs.createMain.$refs.exercise?.[0].data || {};
  239. this.childPreviewData = this.$refs.createMain.$refs.exercise?.[0].childPreviewData || [];
  240. },
  241. // 预览
  242. setPreview() {
  243. this.preview = !this.preview;
  244. this.refreshPreviewData();
  245. },
  246. // 删除练习
  247. deleteQuestion() {
  248. DeleteQuestion({ question_id: this.index_list[this.curIndex].id })
  249. .then(() => {
  250. this.curIndex = Math.max(0, this.curIndex - 1);
  251. this.getExerciseQuestionIndexList();
  252. this.$message.success('删除成功');
  253. })
  254. .catch(() => {
  255. this.$message.error('删除失败');
  256. });
  257. },
  258. /**
  259. * 修改当前题目类型
  260. * @param {Array} arr
  261. */
  262. updateCurQuestionType(arr) {
  263. let type = arr[arr.length - 1];
  264. this.index_list[this.curIndex].type = type;
  265. },
  266. },
  267. };
  268. </script>
  269. <style lang="scss" scoped>
  270. .exercise {
  271. display: grid;
  272. grid-template: 1fr auto / 224px 1fr;
  273. height: 100%;
  274. .list {
  275. display: flex;
  276. flex-direction: column;
  277. grid-area: 1 / 1 / -1;
  278. row-gap: 16px;
  279. padding: 16px 8px;
  280. background-color: #fff;
  281. border-right: 1px solid $border-color;
  282. &-title {
  283. font-weight: bold;
  284. }
  285. .exercise-list {
  286. max-height: calc(100% - 130px);
  287. overflow-y: auto;
  288. .exercise-item {
  289. display: flex;
  290. column-gap: 8px;
  291. align-items: center;
  292. padding: 4px 8px;
  293. color: #333;
  294. cursor: pointer;
  295. border-radius: 2px;
  296. &.active {
  297. color: $main-color;
  298. background-color: #f4f8ff;
  299. }
  300. .item-name {
  301. flex: 1;
  302. }
  303. }
  304. }
  305. &-operate {
  306. display: flex;
  307. > .el-button {
  308. flex: 1;
  309. }
  310. }
  311. }
  312. .preview {
  313. position: relative;
  314. max-height: 450px;
  315. padding: 16px 24px;
  316. overflow: auto;
  317. background-color: #eff1f5;
  318. border-top: 1px solid $border-color;
  319. .preview-header {
  320. display: flex;
  321. justify-content: space-between;
  322. width: 100%;
  323. .quick-preview {
  324. font-weight: bold;
  325. }
  326. .preview-right {
  327. display: flex;
  328. column-gap: 18px;
  329. align-items: center;
  330. .preview-button {
  331. display: flex;
  332. column-gap: 8px;
  333. align-items: center;
  334. color: #175dff;
  335. cursor: pointer;
  336. &.plain {
  337. color: #2f3742;
  338. }
  339. }
  340. }
  341. }
  342. &-content {
  343. width: 100%;
  344. height: calc(100% - 24px);
  345. overflow: auto;
  346. }
  347. }
  348. }
  349. </style>
  350. <style>
  351. .el-cascader-menu__wrap {
  352. height: 235px;
  353. }
  354. </style>