adultInput3.vue 41 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194
  1. <!-- -->
  2. <template>
  3. <div class="Big-Book-container adult-book-input-sty">
  4. <Header />
  5. <div class="Big-Book-content">
  6. <div class="content-tree">
  7. <Catelog
  8. :book-id="bookId"
  9. :book-level="bookLevel"
  10. :book-node-index="bookIndex"
  11. :change-id="changeId"
  12. />
  13. </div>
  14. <div class="Book-content" v-if="currentTreeID">
  15. <div class="Big-Book-save">
  16. <el-button type="primary" @click="onSave">保 存</el-button>
  17. <el-button type="danger" @click="onPreview" plain>预 览</el-button>
  18. </div>
  19. <el-tabs
  20. v-model="editableTabsValue"
  21. type="card"
  22. editable
  23. @edit="handleTabsEdit"
  24. @tab-click="tabClick"
  25. >
  26. <el-tab-pane
  27. v-for="(item, index) in question_list"
  28. :key="item.name"
  29. :label="item.title"
  30. :name="item.name"
  31. >
  32. <div class="createTable">
  33. <el-input
  34. maxlength="1"
  35. style="width: 50px"
  36. v-model="row"
  37. type="text"
  38. @input="rowLine('row')"
  39. />*<el-input
  40. style="width: 50px"
  41. v-model="line"
  42. type="text"
  43. maxlength="1"
  44. @input="rowLine('line')"
  45. />
  46. <el-button
  47. @click="createTable"
  48. style="margin-left: 10px"
  49. type="primary"
  50. >增加题</el-button
  51. >
  52. </div>
  53. <div
  54. v-for="(topic, toindex) in item.cur_fn_data"
  55. :key="'topic' + toindex + index"
  56. >
  57. <p>第{{ toindex + 1 }}题</p>
  58. <div class="adult-book-input-item">
  59. <span class="adult-book-lable">正标题</span>
  60. <el-input
  61. class="adult-book-input"
  62. :autosize="{ minRows: 2 }"
  63. type="textarea"
  64. placeholder="请输入正标题"
  65. v-model="topic.z_title"
  66. @blur="onBlur(topic, 'z_title')"
  67. ></el-input>
  68. </div>
  69. <div class="adult-book-input-item">
  70. <span class="adult-book-lable">副标题</span>
  71. <el-input
  72. class="adult-book-input"
  73. :autosize="{ minRows: 2 }"
  74. type="textarea"
  75. placeholder="请输入副标题"
  76. v-model="topic.f_title"
  77. @blur="onBlur(topic, 'f_title')"
  78. ></el-input>
  79. </div>
  80. <div class="adult-book-input-item">
  81. <span>是否有背景色:</span>
  82. <el-radio-group v-model="topic.is_bg">
  83. <el-radio :label="true">有</el-radio>
  84. <el-radio :label="false">无</el-radio>
  85. </el-radio-group>
  86. </div>
  87. <div class="adult-book-input-item">
  88. <span>是否有背景图:</span>
  89. <el-radio-group v-model="topic.is_layout">
  90. <el-radio :label="true">有</el-radio>
  91. <el-radio :label="false">无</el-radio>
  92. </el-radio-group>
  93. </div>
  94. <div
  95. v-for="(rowItem, rowIndex) in topic.table_list"
  96. :key="'row' + rowIndex + index"
  97. >
  98. <div
  99. v-for="(topicIitem, lineIndex) in rowItem"
  100. :key="lineIndex"
  101. >
  102. <p>{{ topicIitem.text }}</p>
  103. <div>
  104. <template
  105. v-if="
  106. topicIitem.type == 'article_chs' ||
  107. (topicIitem.data &&
  108. topicIitem.data.type == 'article_chs')
  109. "
  110. >
  111. <template v-if="topicIitem.is_edit">
  112. <ArticleTemChs
  113. :curQue="topicIitem.data"
  114. :changeCurQue="changeCurQue"
  115. />
  116. </template>
  117. <template v-else>
  118. <ArticleView :curQue="topicIitem.data" />
  119. </template>
  120. </template>
  121. <template v-if="topicIitem.type == 'sentence_segword_chs'">
  122. <template v-if="topicIitem.is_edit">
  123. <SentenceSegwordChs
  124. :curQue="topicIitem.data"
  125. :changeCurQue="changeCurQue"
  126. />
  127. </template>
  128. <template v-else>
  129. <ArticleView :curQue="topicIitem.data" />
  130. </template>
  131. </template>
  132. <template
  133. v-if="
  134. topicIitem.type == 'dialog_article_chs' ||
  135. (topicIitem.data &&
  136. topicIitem.data.type == 'dialog_article_chs')
  137. "
  138. >
  139. <template v-if="topicIitem.is_edit">
  140. <DialogueArticleChs
  141. :curQue="topicIitem.data"
  142. :changeCurQue="changeCurQue"
  143. />
  144. </template>
  145. <template v-else>
  146. <!-- <ArticleView :curQue="topicIitem.que" /> -->
  147. </template>
  148. </template>
  149. <template v-if="topicIitem.type == 'NewWord_chs'">
  150. <template v-if="topicIitem.is_edit">
  151. <Neword
  152. :curQue="topicIitem.data"
  153. :changeCurQue="changeCurQue"
  154. />
  155. </template>
  156. <template v-else>
  157. <NewordPhraseview :curQue="topicIitem.data" />
  158. </template>
  159. </template>
  160. <template v-if="topicIitem.type == 'notes_chs'">
  161. <template v-if="topicIitem.is_edit">
  162. <Notes
  163. :curQue="topicIitem.data"
  164. :changeCurQue="changeCurQue"
  165. />
  166. </template>
  167. <template v-else>
  168. <NewordPhraseview :curQue="topicIitem.data" />
  169. </template>
  170. </template>
  171. <template v-if="topicIitem.type == 'input_record_chs'">
  172. <template v-if="topicIitem.is_edit">
  173. <InputRecord
  174. :curQue="topicIitem.data"
  175. :fn_data="fn_data"
  176. :changeCurQue="changeCurQue"
  177. />
  178. </template>
  179. <template v-else> </template>
  180. </template>
  181. <template
  182. v-if="
  183. topicIitem.type == 'recordHZ_inputPY_chs' ||
  184. topicIitem.type == 'inputItem_chs' ||
  185. topicIitem.type == 'sentence_input_chs' ||
  186. topicIitem.type == 'sentence_judge_chs' ||
  187. topicIitem.type == 'sentence_record_chs' ||
  188. topicIitem.type == 'sentence_input_record_chs' ||
  189. topicIitem.type == 'sentence_listen_read_chs'
  190. "
  191. >
  192. <template v-if="topicIitem.is_edit">
  193. <Sentence
  194. :curQue="topicIitem.data"
  195. :type="topicIitem.type"
  196. :fn_data="fn_data"
  197. :changeCurQue="changeCurQue"
  198. />
  199. </template>
  200. <template v-else> </template>
  201. </template>
  202. <template
  203. v-if="
  204. topicIitem.type == 'upload_control_chs' ||
  205. topicIitem.type == 'upload_control_preview_chs'
  206. "
  207. >
  208. <template v-if="topicIitem.is_edit">
  209. <UploadControl
  210. :curQue="topicIitem.data"
  211. :type="topicIitem.type"
  212. :fn_data="fn_data"
  213. :changeCurQue="changeCurQue"
  214. />
  215. </template>
  216. <template v-else>
  217. <UploadControlView
  218. :type="topicIitem.type"
  219. :curQue="topicIitem.data"
  220. :fn_data="fn_data"
  221. />
  222. </template>
  223. </template>
  224. <template v-if="topicIitem.type == 'sudoku_chs'">
  225. <template v-if="topicIitem.is_edit">
  226. <Sudoku
  227. :curQue="topicIitem.data"
  228. :type="topicIitem.type"
  229. :fn_data="fn_data"
  230. :changeCurQue="changeCurQue"
  231. />
  232. </template>
  233. <template v-else> </template>
  234. </template>
  235. <template v-if="topicIitem.type == 'NumberCombination_chs'">
  236. <template v-if="topicIitem.is_edit">
  237. <NumberCombination
  238. :curQue="topicIitem.data"
  239. :type="topicIitem.type"
  240. :fn_data="fn_data"
  241. :changeCurQue="changeCurQue"
  242. />
  243. </template>
  244. <template v-else> </template>
  245. </template>
  246. <template v-if="topicIitem.type == 'toneSelect_chs'">
  247. <template v-if="topicIitem.is_edit">
  248. <ToneSelect
  249. :curQue="topicIitem.data"
  250. :type="topicIitem.type"
  251. :fn_data="fn_data"
  252. :changeCurQue="changeCurQue"
  253. />
  254. </template>
  255. <template v-else> </template>
  256. </template>
  257. <template v-if="topicIitem.type == 'ligature_chs'">
  258. <template v-if="topicIitem.is_edit">
  259. <Ligature
  260. :curQue="topicIitem.data"
  261. :fn_data="fn_data"
  262. :changeCurQue="changeCurQue"
  263. />
  264. </template>
  265. <template v-else>
  266. <Ligatureview :curQue="topicIitem.data" />
  267. </template>
  268. </template>
  269. <template
  270. v-if="topicIitem.type == 'image_question_input_record'"
  271. >
  272. <template v-if="topicIitem.is_edit">
  273. <ImageQuestion
  274. :curQue="topicIitem.data"
  275. :type="topicIitem.type"
  276. :fn_data="fn_data"
  277. :changeCurQue="changeCurQue"
  278. />
  279. </template>
  280. <template v-else> </template>
  281. </template>
  282. <template
  283. v-if="
  284. topicIitem.type == 'single_chs' ||
  285. topicIitem.type == 'checkbox_chs' ||
  286. topicIitem.type == 'listen_record_single_chs'
  287. "
  288. >
  289. <template v-if="topicIitem.is_edit">
  290. <Single
  291. :curQue="topicIitem.data"
  292. :type="topicIitem.type"
  293. :fn_data="fn_data"
  294. :changeCurQue="changeCurQue"
  295. />
  296. </template>
  297. <template v-else> </template>
  298. </template>
  299. <template
  300. v-if="
  301. topicIitem.type == 'text_problem_chs' ||
  302. topicIitem.type == 'newWord_preview_chs' ||
  303. topicIitem.type == 'listen_record_single_syllable_chs'
  304. "
  305. >
  306. <template v-if="topicIitem.is_edit">
  307. <PurePreview
  308. :curQue="topicIitem.data"
  309. :type="topicIitem.type"
  310. :fn_data="fn_data"
  311. :changeCurQue="changeCurQue"
  312. />
  313. </template>
  314. <template v-else> </template>
  315. </template>
  316. <template
  317. v-if="topicIitem.type == 'zi_transverse_line_chs'"
  318. >
  319. <template v-if="topicIitem.is_edit">
  320. <ZiLine
  321. :curQue="topicIitem.data"
  322. :type="topicIitem.type"
  323. :fn_data="fn_data"
  324. :changeCurQue="changeCurQue"
  325. />
  326. </template>
  327. <template v-else> </template>
  328. </template>
  329. <template v-if="topicIitem.type == 'select_input_chs'">
  330. <template v-if="topicIitem.is_edit">
  331. <SelectInpue
  332. :curQue="topicIitem.data"
  333. :type="topicIitem.type"
  334. :fn_data="fn_data"
  335. :changeCurQue="changeCurQue"
  336. />
  337. </template>
  338. <template v-else> </template>
  339. </template>
  340. <template v-if="topicIitem.type == 'play_input_record_chs'">
  341. <template v-if="topicIitem.is_edit">
  342. <PlayInputReacord
  343. :curQue="topicIitem.data"
  344. :type="topicIitem.type"
  345. :fn_data="fn_data"
  346. :changeCurQue="changeCurQue"
  347. />
  348. </template>
  349. <template v-else> </template>
  350. </template>
  351. <template
  352. v-if="
  353. topicIitem.type == 'imgage_image' ||
  354. topicIitem.type == 'image_checkBox' ||
  355. topicIitem.type == 'image_judge' ||
  356. topicIitem.type == 'image_single' ||
  357. topicIitem.type == 'image_dobleinput' ||
  358. topicIitem.type == 'image_gdcy' ||
  359. topicIitem.type == 'image_wordInput'
  360. "
  361. >
  362. <template v-if="topicIitem.is_edit">
  363. <Picture
  364. :curQue="topicIitem.data"
  365. :type="topicIitem.type"
  366. :fn_data="fn_data"
  367. :changeCurQue="changeCurQue"
  368. />
  369. </template>
  370. <template v-else> </template>
  371. </template>
  372. <template v-if="topicIitem.type == 'drag_chs'">
  373. <template v-if="topicIitem.is_edit">
  374. <Drag
  375. :curQue="topicIitem.data"
  376. :type="topicIitem.type"
  377. :fn_data="fn_data"
  378. :changeCurQue="changeCurQue"
  379. />
  380. </template>
  381. <template v-else> </template>
  382. </template>
  383. <template
  384. v-if="topicIitem.type == 'checkbox_self_assessment_chs'"
  385. >
  386. <template v-if="topicIitem.is_edit">
  387. <SelfAssessment
  388. :curQue="topicIitem.data"
  389. :type="topicIitem.type"
  390. :fn_data="fn_data"
  391. :changeCurQue="changeCurQue"
  392. />
  393. </template>
  394. <template v-else> </template>
  395. </template>
  396. <template v-if="topicIitem.type == 'sort_chs'">
  397. <template v-if="topicIitem.is_edit">
  398. <Sort
  399. :curQue="topicIitem.data"
  400. :type="topicIitem.type"
  401. :fn_data="fn_data"
  402. :changeCurQue="changeCurQue"
  403. />
  404. </template>
  405. <template v-else> </template>
  406. </template>
  407. </div>
  408. <div
  409. class="addoption"
  410. v-if="topicIitem.data && topicIitem.is_edit"
  411. @click="
  412. remoeModule(toindex, rowIndex, lineIndex, topicIitem)
  413. "
  414. >
  415. 删除模板
  416. </div>
  417. <div
  418. v-else-if="
  419. TopicIndex == toindex &&
  420. RowIndex == rowIndex &&
  421. lineIndex == LineIndex
  422. "
  423. class="addoption"
  424. >
  425. 选择模板
  426. </div>
  427. <div
  428. v-if="!topicIitem.data && topicIitem.is_add_module"
  429. class="addoption"
  430. @click="addModule(toindex, rowIndex, lineIndex, topicIitem)"
  431. >
  432. 添加模板
  433. </div>
  434. <template v-if="topicIitem.data">
  435. <div class="Big-Book-save" v-if="topicIitem.is_edit">
  436. <el-button
  437. type="success"
  438. size="small"
  439. @click="onSure(topicIitem)"
  440. >确定</el-button
  441. >
  442. </div>
  443. <div class="Big-Book-save" v-else>
  444. <el-button
  445. type="primary"
  446. size="small"
  447. @click.stop="editCurQue(topicIitem)"
  448. >编辑</el-button
  449. >
  450. </div>
  451. </template>
  452. </div>
  453. </div>
  454. </div>
  455. </el-tab-pane>
  456. </el-tabs>
  457. </div>
  458. <div class="Book-function" v-if="currentTreeID">
  459. <ul class="function-list">
  460. <li
  461. v-for="(item, index) in fn_data"
  462. :key="'fn' + index"
  463. @click="selectedFnType(item, index)"
  464. >
  465. <el-dropdown v-if="item.list">
  466. <span class="fn-name">
  467. {{ item.name }}<i class="el-icon-arrow-down el-icon--right"></i>
  468. </span>
  469. <el-dropdown-menu slot="dropdown" trigger="click">
  470. <el-dropdown-item
  471. @click.native="selectSmallModule(item, child, index, i)"
  472. v-for="(child, i) in item.list"
  473. :key="i"
  474. >{{ child.name }}</el-dropdown-item
  475. >
  476. </el-dropdown-menu>
  477. </el-dropdown>
  478. <span v-else class="fn-name">{{ item.name }}</span>
  479. </li>
  480. </ul>
  481. </div>
  482. </div>
  483. <el-dialog
  484. :visible.sync="previewVisible"
  485. title="预览"
  486. top="0"
  487. width="100%"
  488. @close="handleClosePre"
  489. >
  490. <div class="chooseCon">
  491. <Preview
  492. :context="context"
  493. :que-index="queIndex"
  494. :fatherName="fatherName"
  495. />
  496. </div>
  497. <span slot="footer" class="dialog-footer">
  498. <el-button @click="handleClosePre">关 闭</el-button>
  499. </span>
  500. </el-dialog>
  501. </div>
  502. </template>
  503. <script>
  504. import Header from "@/components/Header.vue";
  505. import Catelog from "@/components/Adult/inputModules/Catelog";
  506. import ArticleTemChs from "@/components/Adult/inputModules/ArticleTemChs/index.vue";
  507. import SentenceSegwordChs from "@/components/Adult/inputModules/SentenceSegwordChs/index.vue";
  508. import DialogueArticleChs from "@/components/Adult/inputModules/DialogueArticleChs/index.vue";
  509. import Single from "@/components/Adult/inputModules/Single.vue";
  510. import Judge from "@/components/Adult/inputModules/Judge.vue";
  511. import Dialogue from "@/components/Adult/inputModules/Dialogue.vue";
  512. import MatrixSingle from "@/components/Adult/inputModules/MatrixSingle.vue";
  513. import MultiRowInput from "@/components/Adult/inputModules/MultiRowInput.vue";
  514. import Ligature from "@/components/Adult/inputModules/Ligature.vue";
  515. import Neword from "@/components/Adult/inputModules/Neword.vue";
  516. import Notes from "@/components/Adult/inputModules/Notes.vue";
  517. import InputRecord from "@/components/Adult/inputModules/InputRecord.vue";
  518. import AudioControl from "@/components/Adult/inputModules/AudioControl.vue";
  519. import SuitchControl from "@/components/Adult/inputModules/SuitchControl.vue";
  520. import BgControl from "@/components/Adult/inputModules/BgControl.vue";
  521. import UploadControl from "@/components/Adult/inputModules/UploadControl.vue";
  522. import TextItem from "@/components/Adult/inputModules/TextItem.vue";
  523. import Sentence from "@/components/Adult/inputModules/Sentence.vue";
  524. import Sudoku from "@/components/Adult/inputModules/Sudoku.vue";
  525. import ToneSelect from "@/components/Adult/inputModules/ToneSelect.vue";
  526. import NumberCombination from "@/components/Adult/inputModules/NumberCombination.vue";
  527. import ImageQuestion from "@/components/Adult/inputModules/ImageQuestion.vue";
  528. import PurePreview from "@/components/Adult/inputModules/PurePreview.vue";
  529. import ZiLine from "@/components/Adult/inputModules/ZiLine.vue";
  530. import SelectInpue from "@/components/Adult/inputModules/SelectInpue.vue";
  531. import PlayInputReacord from "@/components/Adult/inputModules/PlayInputReacord.vue";
  532. import Drag from "@/components/Adult/inputModules/Drag.vue";
  533. import SelfAssessment from "@/components/Adult/inputModules/SelfAssessment.vue";
  534. import Sort from "@/components/Adult/inputModules/Sort.vue";
  535. import Textdes from "@/components/Adult/inputModules/Textdes.vue";
  536. import Record from "@/components/Adult/inputModules/Record.vue";
  537. import Hanzi from "@/components/Adult/inputModules/Hanzi.vue";
  538. import Picture from "@/components/Adult/inputModules/Picture.vue";
  539. import Singleview from "@/components/Adult/preview/Single.vue";
  540. import Judgeview from "@/components/Adult/preview/Judge.vue";
  541. import Textdesview from "@/components/Adult/preview/Textdes.vue";
  542. import Hanziview from "@/components/Adult/preview/Hanzi.vue";
  543. import Pictureview from "@/components/Adult/preview/Picture.vue";
  544. import Dialogueview from "@/components/Adult/preview/Dialogue.vue";
  545. import MatrixSingleview from "@/components/Adult/preview/MatrixSingle.vue";
  546. import MultiRowInputview from "@/components/Adult/preview/MultiRowInput.vue";
  547. import Ligatureview from "@/components/Adult/preview/Ligature.vue";
  548. import InputRecordview from "@/components/Adult/preview/InputRecord.vue";
  549. import BgControlview from "@/components/Adult/preview/BgControl.vue";
  550. import NewordPhraseview from "@/components/Adult/preview/WordPhrase.vue";
  551. import UploadControlView from "@/components/Adult/preview/UploadControlView.vue";
  552. import Preview from "@/components/Adult/Preview.vue";
  553. import fn from "@/components/Adult/common/data3.js";
  554. import { getContent, getStaticContent } from "@/api/ajax";
  555. export default {
  556. components: {
  557. Header,
  558. Catelog,
  559. Single,
  560. Textdes,
  561. Record,
  562. Singleview,
  563. Textdesview,
  564. Hanziview,
  565. Pictureview,
  566. Preview,
  567. Hanzi,
  568. Picture,
  569. Judge,
  570. Judgeview,
  571. Dialogue,
  572. Dialogueview,
  573. MatrixSingle,
  574. MatrixSingleview,
  575. MultiRowInput,
  576. MultiRowInputview,
  577. Ligature,
  578. Ligatureview,
  579. Neword,
  580. Notes,
  581. InputRecord,
  582. ArticleTemChs,
  583. SentenceSegwordChs,
  584. DialogueArticleChs,
  585. AudioControl,
  586. SuitchControl,
  587. BgControl,
  588. InputRecordview,
  589. BgControlview,
  590. NewordPhraseview,
  591. UploadControl,
  592. TextItem,
  593. Sentence,
  594. UploadControlView,
  595. Sudoku,
  596. NumberCombination,
  597. ToneSelect,
  598. ImageQuestion,
  599. PurePreview,
  600. ZiLine,
  601. SelectInpue,
  602. PlayInputReacord,
  603. Drag,
  604. SelfAssessment,
  605. Sort,
  606. },
  607. data() {
  608. return {
  609. bookId: 1,
  610. bookLevel: "",
  611. bookIndex: "",
  612. fn_data: [],
  613. fn_type: "",
  614. cur_fn_data: null, //当前模块的数据结构
  615. cur_page_queIsEdit: [], //当前页数的某个题
  616. question_list: [
  617. {
  618. name: "tab1",
  619. title: "第1页",
  620. cur_fn_data: [],
  621. },
  622. ], //总的数据列表
  623. cur_page_que_index: 0,
  624. editableTabsValue: "tab1",
  625. tabIndex: 0,
  626. previewVisible: false,
  627. context: [],
  628. queIndex: 0,
  629. currentTreeID: null,
  630. row: null, //行
  631. line: null, //列
  632. TopicIndex: null, //第几题的索引
  633. RowIndex: null, //第几行
  634. LineIndex: null, //第几列
  635. bgControlX: null, // 背景图插入模板的 x
  636. bgControlY: null, // 背景图插入模板的 y
  637. bgControlIndex: null, //插入第几个
  638. DeletebgControlIndex: null, //删除第几个
  639. fatherName: "",
  640. module_type: "",
  641. tmInde: "",
  642. };
  643. },
  644. computed: {
  645. getCurrentQuestionView() {
  646. const function_type = this.fn_type;
  647. switch (function_type) {
  648. case "single":
  649. return Single;
  650. case "text":
  651. return Textdes;
  652. case "record":
  653. return Record;
  654. }
  655. },
  656. },
  657. watch: {},
  658. //方法集合
  659. methods: {
  660. // 随意插入模板获取位置
  661. changeSite(x, y) {
  662. this.bgControlX = x;
  663. this.bgControlY = y;
  664. },
  665. // 插入索引
  666. changebgControlIndex(index) {
  667. this.bgControlIndex = index;
  668. },
  669. // 删除索引
  670. changeDeletebgControlIndex(index) {
  671. this.DeletebgControlIndex = index;
  672. },
  673. rowLine(value) {
  674. this[value] = this[value].match(/^\d*(\.?\d{0,2})/g)[0] || "";
  675. },
  676. createTable() {
  677. if (this.row && this.line) {
  678. let arr = {
  679. z_title: "",
  680. f_title: "",
  681. is_bg: false, //是否有背景色
  682. is_layout: false, // 是不是按背景图布局
  683. table_list: [],
  684. };
  685. for (let i = 0; i < this.row; i++) {
  686. let rowArr = [];
  687. for (let j = 0; j < this.line; j++) {
  688. let obj = {
  689. text: `第${i + 1}行,第${j + 1}列`,
  690. is_add_module: true,
  691. is_edit: true,
  692. };
  693. rowArr.push(obj);
  694. }
  695. arr.table_list.push(rowArr);
  696. }
  697. this.question_list[this.tabIndex].cur_fn_data.push(arr);
  698. this.row = null;
  699. this.line = null;
  700. } else {
  701. this.$message.warning("请输入行和列");
  702. }
  703. },
  704. // 添加模板
  705. addModule(topicIndex, rowindex, lineIndex, item) {
  706. this.TopicIndex = topicIndex;
  707. this.RowIndex = rowindex;
  708. this.LineIndex = lineIndex;
  709. this.question_list.forEach((page) => {
  710. page.cur_fn_data.forEach((pic) => {
  711. pic.table_list.forEach((row) => {
  712. row.forEach((col) => {
  713. col.is_add_module = true;
  714. });
  715. });
  716. });
  717. });
  718. item.is_add_module = false;
  719. },
  720. // 删除模板
  721. remoeModule(topicIndex, rowindex, lineIndex, item) {
  722. item.type = "";
  723. item.data = null;
  724. this.TopicIndex = null;
  725. this.RowIndex = null;
  726. this.LineIndex = null;
  727. item.is_add_module = true;
  728. },
  729. handleClosePre() {
  730. if (window.stopAudioVoice) window.stopAudioVoice();
  731. if (window.stopAudioAudio) window.stopAudioAudio();
  732. if (window.stopAudioSound) window.stopAudioSound();
  733. this.previewVisible = false;
  734. },
  735. onBlur(item, field) {
  736. item[field] = item[field] ? item[field].trim() : "";
  737. },
  738. // 当前目录id name 父级name/当前 name
  739. changeId(id, name, fatherName) {
  740. this.TopicIndex = null;
  741. this.RowIndex = null;
  742. this.LineIndex = null;
  743. this.fatherName = fatherName;
  744. this.currentTreeID = id;
  745. // 根据当前目录切换题
  746. let MethodName = "book-courseware_manager-GetCoursewareContent";
  747. let data = {
  748. id,
  749. };
  750. getContent(MethodName, data)
  751. .then((res) => {
  752. if (res.content) {
  753. this.question_list = JSON.parse(res.content);
  754. this.cur_page_que_index =
  755. this.question_list[this.tabIndex].cur_fn_data.length - 1;
  756. } else {
  757. this.question_list = [
  758. {
  759. name: "tab1",
  760. title: "第1页",
  761. cur_fn_data: [],
  762. },
  763. ];
  764. }
  765. })
  766. .catch((error) => {});
  767. },
  768. handleTabsEdit(targetName, action) {
  769. if (action === "add") {
  770. let leg = this.question_list.length;
  771. let obj = {
  772. name: `tab${leg + 1}`,
  773. title: `第${leg + 1}页`,
  774. cur_fn_data: [],
  775. };
  776. this.question_list.push(obj);
  777. }
  778. if (action === "remove") {
  779. let tabs = JSON.parse(JSON.stringify(this.question_list));
  780. let activeName = this.editableTabsValue;
  781. if (activeName === targetName) {
  782. tabs.forEach((tab, index) => {
  783. if (tab.name === targetName) {
  784. let nextTab = tabs[index + 1] || tabs[index - 1];
  785. if (nextTab) {
  786. activeName = nextTab.name;
  787. }
  788. }
  789. });
  790. }
  791. this.editableTabsValue = activeName;
  792. let question_list = tabs.filter((tab) => tab.name !== targetName);
  793. question_list.map((item, index) => {
  794. item.name = `tab${index + 1}`;
  795. item.title = `第${index + 1}页`;
  796. return item;
  797. });
  798. this.question_list = question_list;
  799. this.TopicIndex = null;
  800. this.RowIndex = null;
  801. this.LineIndex = null;
  802. }
  803. },
  804. tabClick(tab) {
  805. this.tabIndex = tab.index;
  806. },
  807. // 大模板
  808. selectedFnType(item, index) {
  809. if (item.list) {
  810. return;
  811. }
  812. if (
  813. Object.prototype.toString.call(this.TopicIndex).indexOf("Number") ==
  814. -1 &&
  815. Object.prototype.toString.call(this.LineIndex).indexOf("Number") == -1
  816. ) {
  817. this.$message.warning("请先选择添加模板的位置");
  818. return;
  819. }
  820. if (
  821. this.question_list[this.tabIndex].cur_fn_data[this.TopicIndex]
  822. .table_list[this.RowIndex][this.LineIndex].data
  823. ) {
  824. this.$message.warning("每列只能添加一个模板");
  825. } else {
  826. console.log("不存在");
  827. this.$set(
  828. this.question_list[this.tabIndex].cur_fn_data[this.TopicIndex]
  829. .table_list[this.RowIndex][this.LineIndex],
  830. "type",
  831. item.type
  832. );
  833. this.$set(
  834. this.question_list[this.tabIndex].cur_fn_data[this.TopicIndex]
  835. .table_list[this.RowIndex][this.LineIndex],
  836. "data",
  837. null
  838. );
  839. console.log(this.question_list);
  840. }
  841. },
  842. changeCurQue(data_stru) {
  843. console.log(data_stru);
  844. console.log(this.RowIndex, this.LineIndex);
  845. this.$set(
  846. this.question_list[this.tabIndex].cur_fn_data[this.TopicIndex]
  847. .table_list[this.RowIndex][this.LineIndex],
  848. "data",
  849. JSON.parse(JSON.stringify(data_stru))
  850. );
  851. console.log(this.question_list);
  852. },
  853. // 小模板
  854. selectSmallModule(item, child, itemIndex, childIndex) {
  855. console.log("选择了小模版");
  856. if (
  857. Object.prototype.toString.call(this.TopicIndex).indexOf("Number") ==
  858. -1 &&
  859. Object.prototype.toString.call(this.LineIndex).indexOf("Number") == -1
  860. ) {
  861. this.$message.warning("请先选择添加模板的位置");
  862. return;
  863. }
  864. if (
  865. this.question_list[this.tabIndex].cur_fn_data[this.TopicIndex]
  866. .table_list[this.RowIndex][this.LineIndex].data
  867. ) {
  868. this.$message.warning("每列只能添加一个模板");
  869. } else {
  870. this.$set(
  871. this.question_list[this.tabIndex].cur_fn_data[this.TopicIndex]
  872. .table_list[this.RowIndex][this.LineIndex],
  873. "type",
  874. child.type
  875. );
  876. this.$set(
  877. this.question_list[this.tabIndex].cur_fn_data[this.TopicIndex]
  878. .table_list[this.RowIndex][this.LineIndex],
  879. "data",
  880. null
  881. );
  882. }
  883. },
  884. //删除某页中一个部分
  885. deleteCurQue(item, queIndex) {
  886. item.queList.splice(queIndex, 1);
  887. },
  888. saveNewwordAndSentences() {
  889. let question_list = this.question_list;
  890. let sentence_list = [],
  891. new_word_list = [];
  892. question_list.forEach((item) => {
  893. item.cur_fn_data.forEach((curItem) => {
  894. curItem.table_list.forEach((tabItem) => {
  895. tabItem.forEach((topicIitem) => {
  896. if (topicIitem.type == "article_chs") {
  897. topicIitem.data.detail.forEach((item) => {
  898. sentence_list = sentence_list.concat(item.sentences);
  899. });
  900. } else if (topicIitem.type == "NewWord_chs") {
  901. new_word_list = topicIitem.data.option;
  902. }
  903. });
  904. });
  905. });
  906. });
  907. return {
  908. new_word_list: new_word_list,
  909. sentence_list: sentence_list,
  910. };
  911. },
  912. onSave() {
  913. let question_list_str = JSON.stringify(this.question_list);
  914. console.log(this.question_list);
  915. localStorage.setItem("question_list", question_list_str);
  916. let result = this.saveNewwordAndSentences();
  917. this.$message.success("保存成功");
  918. const MethodName = "book-courseware_manager-SaveCoursewareContent";
  919. let data = {
  920. id: this.currentTreeID,
  921. content: JSON.stringify(this.question_list),
  922. new_word_list: result.new_word_list,
  923. sentence_list: result.sentence_list,
  924. };
  925. getContent(MethodName, data)
  926. .then((res) => {
  927. this.$message.success("保存成功!");
  928. })
  929. .catch((error) => {});
  930. },
  931. async onPreview() {
  932. let _this = this;
  933. let question_data = null;
  934. if (_this.question_list) {
  935. debugger;
  936. const question2 = JSON.parse(JSON.stringify(_this.question_list));
  937. question_data = await _this.getFileUrl_preview(question2);
  938. _this.previewVisible = true;
  939. _this.context = question_data;
  940. console.log("预览数据");
  941. console.log(this.question_list);
  942. } else {
  943. _this.$message.warning("还没有录入数据");
  944. }
  945. },
  946. getFileUrl_preview(question) {
  947. let questionStr = JSON.stringify(question);
  948. const reg = /\[FID##(.*?)##FID\]/g;
  949. let regConArr = [];
  950. if (reg.test(questionStr)) {
  951. regConArr = questionStr.match(reg);
  952. }
  953. if (regConArr.length > 0) {
  954. regConArr = regConArr.map((item) => {
  955. item = item.replace("[FID##", "").replace("##FID]", "");
  956. return item;
  957. });
  958. }
  959. return new Promise((resolve, reject) => {
  960. const MethodName = "file_store_manager-GetFileURLMap";
  961. const data = {
  962. file_id_list: regConArr,
  963. };
  964. getStaticContent(MethodName, data).then((res) => {
  965. const backData = res.url_map;
  966. for (const key in backData) {
  967. const url = backData[key];
  968. if (questionStr.indexOf(key) > -1) {
  969. const d = `\\[FID##${key}##FID\\]`;
  970. const regD = new RegExp(d, "g");
  971. questionStr = questionStr.replace(regD, url);
  972. }
  973. }
  974. const question3 = JSON.parse(questionStr);
  975. resolve(question3);
  976. });
  977. });
  978. },
  979. onSure(curItem) {
  980. this.TopicIndex = null;
  981. this.RowIndex = null;
  982. this.LineIndex = null;
  983. curItem.is_edit = false;
  984. },
  985. onDel(item, curIndex) {
  986. item.cur_fn_data.splice(curIndex, 1);
  987. if (this.question_list[this.tabIndex].cur_fn_data.length > 0) {
  988. this.cur_page_que_index =
  989. this.question_list[this.tabIndex].cur_fn_data.length - 1;
  990. } else {
  991. this.cur_page_que_index = 0;
  992. }
  993. // let question_list_str = JSON.stringify(this.question_list);
  994. // localStorage.setItem("question_list", question_list_str);
  995. },
  996. //编辑当前题型
  997. editCurQue(curItem) {
  998. curItem.is_edit = true;
  999. // if (!curItem.isEdit) {
  1000. // let count = 0;
  1001. // let tabIndex = this.tabIndex;
  1002. // let leg = this.question_list[tabIndex].cur_fn_data.length;
  1003. // this.question_list[tabIndex].cur_fn_data.forEach((item) => {
  1004. // if (item.isEdit) {
  1005. // count++;
  1006. // }
  1007. // });
  1008. // if (count == 0) {
  1009. // if (!curItem.isEdit) {
  1010. // curItem.isEdit = true;
  1011. // }
  1012. // } else {
  1013. // this.$message.warning("有题目未保存");
  1014. // }
  1015. // }
  1016. },
  1017. },
  1018. //生命周期 - 创建完成(可以访问当前this实例)
  1019. created() {
  1020. this.fn_data = fn.fnData;
  1021. },
  1022. //生命周期 - 挂载完成(可以访问DOM元素)
  1023. mounted() {
  1024. console.log(this.question_list);
  1025. // let question_list_str = localStorage.getItem("question_list");
  1026. // if (question_list_str) {
  1027. // this.question_list = JSON.parse(question_list_str);
  1028. // this.cur_page_que_index =
  1029. // this.question_list[this.tabIndex].cur_fn_data.length - 1;
  1030. // }
  1031. },
  1032. beforeCreate() {}, //生命周期 - 创建之前
  1033. beforeMount() {}, //生命周期 - 挂载之前
  1034. beforeUpdate() {}, //生命周期 - 更新之前
  1035. updated() {}, //生命周期 - 更新之后
  1036. beforeDestroy() {}, //生命周期 - 销毁之前
  1037. destroyed() {}, //生命周期 - 销毁完成
  1038. activated() {}, //如果页面有keep-alive缓存功能,这个函数会触发
  1039. };
  1040. </script>
  1041. <style lang='scss' scoped>
  1042. //@import url(); 引入公共css类
  1043. .Big-Book-container {
  1044. width: 100%;
  1045. min-height: 100vh;
  1046. .Big-Book-content {
  1047. padding: 26px 0;
  1048. display: flex;
  1049. justify-content: flex-start;
  1050. align-items: flex-start;
  1051. }
  1052. .content-tree {
  1053. width: 280px;
  1054. }
  1055. .Book-content {
  1056. flex: 1;
  1057. box-sizing: border-box;
  1058. padding: 30px;
  1059. height: 859px;
  1060. overflow-y: auto;
  1061. &-inner {
  1062. // width: 860px;
  1063. }
  1064. .addoption {
  1065. width: 148px;
  1066. height: 40px;
  1067. background: #f3f3f3;
  1068. border: 1px dashed rgba(0, 0, 0, 0.15);
  1069. box-sizing: border-box;
  1070. border-radius: 4px;
  1071. text-align: center;
  1072. line-height: 40px;
  1073. cursor: pointer;
  1074. font-size: 14px;
  1075. color: #000000;
  1076. margin-top: 20px;
  1077. }
  1078. .createTable {
  1079. }
  1080. }
  1081. .Big-Book-save {
  1082. width: 860px;
  1083. display: flex;
  1084. justify-content: flex-end;
  1085. padding: 0 0 20px 0;
  1086. }
  1087. .Big-Book {
  1088. &-add {
  1089. position: absolute;
  1090. top: -40px;
  1091. right: 0;
  1092. z-index: 1;
  1093. width: 73px;
  1094. height: 40px;
  1095. background: #f7f7f7;
  1096. border: 1px solid #d9d9d9;
  1097. line-height: 40px;
  1098. text-align: center;
  1099. font-weight: bold;
  1100. font-size: 18px;
  1101. text-align: center;
  1102. color: #000000;
  1103. }
  1104. &-name {
  1105. display: flex;
  1106. justify-content: flex-start;
  1107. align-items: center;
  1108. margin-bottom: 10px;
  1109. > p {
  1110. font-size: 14px;
  1111. }
  1112. }
  1113. &-delete {
  1114. width: 16px;
  1115. height: 16px;
  1116. margin-left: 15px;
  1117. cursor: pointer;
  1118. }
  1119. &-curPage {
  1120. margin-bottom: 20px;
  1121. &.Big-Book-curPage-edit {
  1122. border-top: 1px solid #e0e0e0;
  1123. border-bottom: 1px solid #e0e0e0;
  1124. background-color: #fafafa;
  1125. }
  1126. &.Big-Book-curPage-preview {
  1127. border-top: 1px solid #fff;
  1128. border-bottom: 1px solid #fff;
  1129. display: flex;
  1130. justify-content: flex-start;
  1131. align-items: flex-start;
  1132. &:hover {
  1133. background-color: #fafafa;
  1134. border-top: 1px solid #e0e0e0;
  1135. border-bottom: 1px solid #e0e0e0;
  1136. }
  1137. }
  1138. }
  1139. &-queBox {
  1140. padding: 10px 0;
  1141. }
  1142. }
  1143. .Book-function {
  1144. width: 204px;
  1145. background: #f7f7f7;
  1146. box-sizing: border-box;
  1147. padding: 30px 16px;
  1148. height: 859px;
  1149. overflow-y: auto;
  1150. .function-list {
  1151. width: 100%;
  1152. > li {
  1153. width: 100%;
  1154. width: 172px;
  1155. height: 40px;
  1156. background: #ffffff;
  1157. border: 1px solid rgba(0, 0, 0, 0.15);
  1158. box-sizing: border-box;
  1159. border-radius: 4px;
  1160. cursor: pointer;
  1161. margin-bottom: 5px;
  1162. display: flex;
  1163. justify-content: center;
  1164. align-items: center;
  1165. > span {
  1166. font-weight: normal;
  1167. font-size: 16px;
  1168. line-height: 150%;
  1169. color: #000000;
  1170. }
  1171. }
  1172. }
  1173. }
  1174. .Big-Book-top {
  1175. margin-top: 20px;
  1176. display: flex;
  1177. align-items: center;
  1178. span {
  1179. margin-right: 10px;
  1180. }
  1181. }
  1182. }
  1183. </style>