Index.vue 28 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009
  1. <style lang="scss">
  2. .content{
  3. background-color: #f5eedb !important;
  4. }
  5. .content_div{
  6. display: flex;
  7. overflow: auto;
  8. min-width: 1200px;
  9. height: calc(100vh - 170px);
  10. overflow: auto;
  11. .left_div{
  12. width: 820px;
  13. background-color: gray;
  14. overflow: auto;
  15. height: 100%;
  16. position: relative;
  17. .page_div{
  18. height: 1140px;
  19. }
  20. .page_cell{
  21. top: 10px;
  22. left: 10.3px;
  23. width: 210mm;
  24. height: 297mm;
  25. position: absolute;
  26. background-color: #fff;
  27. border: 1px solid #000;
  28. *{
  29. box-sizing: content-box;
  30. font-family: 宋体, SimSun, 'STSong';
  31. }
  32. .obj{
  33. position:relative;border:solid 1px black;
  34. width: 100%;
  35. height: 100%;
  36. }
  37. .item{
  38. position: absolute;
  39. }
  40. .tm_id{
  41. width: 8mm;
  42. text-align: center;
  43. font-size: 3mm;
  44. height: 2.5mm;
  45. position: absolute;
  46. }
  47. .opLabel{
  48. padding:0mm 2mm;font-weight:bold; font-size:3mm;line-height:5mm;width:178mm;
  49. }
  50. .del{
  51. position: absolute;
  52. width: 20px;
  53. right: 5px;
  54. display: none;
  55. cursor: pointer;
  56. z-index: 999;
  57. }
  58. }
  59. .sub:hover .del{
  60. display: block !important;
  61. }
  62. .act{
  63. background-color: #000;
  64. }
  65. .tk{
  66. div{
  67. background-color: #666;
  68. position: absolute;
  69. }
  70. }
  71. .words{
  72. display: flex;
  73. flex-wrap: wrap;
  74. margin: 8mm auto;
  75. width: 170mm;
  76. border: 1px solid #333;
  77. border-right-width: 2px;
  78. border-bottom-width: 2px;
  79. li{
  80. box-sizing: border-box;
  81. list-style: none;
  82. width: 8.5mm;
  83. height: 8mm;
  84. border: 1px solid #333;
  85. margin-bottom: 1.5mm;
  86. border-right: none;
  87. position: relative;
  88. span{
  89. position: absolute;
  90. font-size: 2mm;
  91. top: 100%;
  92. left: 40%;
  93. }
  94. }
  95. }
  96. .english{
  97. padding: 0 5mm;
  98. li{
  99. list-style: none;
  100. height: 10mm;
  101. border-bottom: 1px solid #333;
  102. }
  103. }
  104. }
  105. .right_div{
  106. margin-left: 10px;
  107. width: 300px;
  108. height: 100%;
  109. overflow: auto;
  110. background-color: #fff;
  111. border-left: 1px solid #dadada;
  112. border-right: 1px solid #dadada;
  113. h3{
  114. background-color: #f3f3f3;
  115. border-top: 1px solid #dadada;
  116. border-bottom: 1px solid #dadada;
  117. font-size: 16px;
  118. font-weight: normal;
  119. padding: 10px;
  120. }
  121. .dtk_bs_list{
  122. padding: 10px;
  123. li{
  124. display: inline-block;
  125. width: 37px;
  126. height: 37px;
  127. margin: 0 7px;
  128. position: relative;
  129. cursor: pointer;
  130. img{
  131. width: 100%;
  132. height: 100%;
  133. }
  134. b{
  135. position: absolute;
  136. width: 100%;
  137. font-size: 12px;
  138. top: 100%;
  139. text-align: center;
  140. left: 0;
  141. padding: 5px 0;
  142. }
  143. &:hover{
  144. border: 2px solid #18a368;
  145. &::after{
  146. content: '';
  147. width: 18px;
  148. height: 18px;
  149. background-image: url(../../assets/correct_on.png);
  150. position: absolute;
  151. top: 0;
  152. bottom: 0;
  153. left: 0;
  154. right: 0;
  155. margin: auto;
  156. }
  157. }
  158. }
  159. .te_active{
  160. border: 2px solid #18a368;
  161. &::after{
  162. content: '';
  163. width: 18px;
  164. height: 18px;
  165. background-image: url(../../assets/correct_on.png);
  166. position: absolute;
  167. top: 0;
  168. bottom: 0;
  169. left: 0;
  170. right: 0;
  171. margin: auto;
  172. }
  173. }
  174. }
  175. .tips{
  176. font-size: 12px;
  177. color: #999;
  178. padding: 10px;
  179. }
  180. .btns{
  181. button{
  182. margin: 5px 5px 5px 0;
  183. width: 84px;
  184. text-align: center;
  185. }
  186. }
  187. }
  188. }
  189. .tm_list{
  190. height: 200px;
  191. overflow: auto;
  192. border: 1px solid #d9d9d9;
  193. margin-bottom: 10px;
  194. li{
  195. list-style: none;
  196. border-bottom: 1px solid #d9d9d9;
  197. padding: 5px 10px;
  198. min-height: 40px;
  199. span{
  200. display: inline-block;
  201. line-height: 30px;
  202. font-size: 18px;
  203. }
  204. div{
  205. float: right;
  206. font-weight: 600;
  207. input{
  208. width: 50px;
  209. height: 30px;
  210. margin-right: 5px;
  211. text-align: center;
  212. outline: none;
  213. font-size: 18px;
  214. }
  215. }
  216. }
  217. }
  218. .options{
  219. position: absolute;
  220. font-size: 2.5mm;
  221. border: 1px solid rgb(0, 0, 0);
  222. text-align: center;
  223. line-height: 1;
  224. }
  225. </style>
  226. <template>
  227. <section class="content">
  228. <div class="breadcrumb">
  229. <el-breadcrumb separator="/">
  230. <el-breadcrumb-item><a href="/">试卷管理</a></el-breadcrumb-item>
  231. <el-breadcrumb-item>答题卡制作</el-breadcrumb-item>
  232. </el-breadcrumb>
  233. </div>
  234. <div class="content_div">
  235. <div class="left_div">
  236. <div class="page_div">
  237. <div class="page_cell">
  238. <div style="top:11mm;left:6mm;width:5mm;height:5mm;position:absolute;background-color:black;display:block"></div>
  239. <div style="top:281mm;left:6mm;width:5mm;height:5mm;position:absolute;background-color:black;display:block"></div>
  240. <div style="top:11mm;left:199mm;width:5mm;height:5mm;position:absolute;background-color:black;display:block"></div>
  241. <!-- //试卷内容 -->
  242. <div style="top:20mm;left:15mm;width:180mm;height:257mm;position:absolute;">
  243. <textarea id="paperNameTextAreaTem" rows="3" cols="78" style="resize:none;width:100%;color:#000;font-size:20px;font-weight:600;height: 15mm;max-height:21mm;text-align: center;word-wrap: normal;line-height:15mm;overflow:hidden" placeholder="请输入试卷名称"></textarea>
  244. <div style="top:18mm;left:2mm;width:95mm;height:60mm;position:absolute;">
  245. <div style="line-height:6.6mm">
  246. <span style="font-weight: bold;font-size: 4mm;">姓名:</span>
  247. <span style="width:30mm;border-bottom: solid 1px black;display:inline-block">&nbsp;</span>
  248. <span style="font-weight: bold;font-size: 4mm;">班级:</span>
  249. <span style="width:30mm;border-bottom: solid 1px black; display: inline-block">&nbsp;</span>
  250. <br>
  251. <span style="font-weight: bold;font-size: 4mm;">考场号:</span>
  252. <span style="width:25mm;border-bottom: solid 1px black; display: inline-block">&nbsp;</span>
  253. <span style="font-weight: bold;font-size: 4mm;">座位号:</span>
  254. <span style="width:30mm;border-bottom: solid 1px black; display: inline-block">&nbsp;</span>
  255. </div>
  256. <div style="border:solid 1px black;margin-top: 2mm;padding:1mm;font-size: 3mm;line-height:4.5mm;">
  257. <p style="text-align: center;font-weight: bold;font-size: 4mm;line-height: 4mm;">注意事项</p>
  258. <p> 1.答题前,考生先将自己的姓名、班级、准考证号填写清楚。
  259. <br> 2.客观题答题,必须使用2B铅笔填涂,修改时,要用橡皮擦干净。
  260. <br> 3.主观题答题,必须使用0.5毫米的黑色墨水签字笔书写,要求字体工整、笔迹清晰。作图时,必须用2B铅笔,并描浓。
  261. <br> 4.必须在题号所对应的答题区域内作答,超出答题区域书写无效。
  262. <br>5.保持答卷清洁、完整。严禁折叠,严禁在答题卷上做任何标记,严禁使用涂改液、胶带纸和修正带。<br>
  263. </p>
  264. </div> <div style="border:solid 1px black;margin-top:2mm;line-height: 7mm"> <table style="width:100%;height:100%;"><tbody><tr> <td width="30%"> <span style="font-size: 3mm;font-weight: bold;">正确填涂</span></td><td width="25%"> <div style="border: solid 1px black;width:4mm;height: 2mm;background-color: black;">&nbsp;</div> </td> <td width="30%"> <span style="font-size: 3mm;font-weight: bold;">缺考标记</span> </td> <td width="25%">
  265. <div style="border:1px solid #000000;width:4mm;height: 2mm;"></div> </td> </tr></tbody></table></div></div>
  266. <div style="top:23mm;left:107mm;width:65mm;height:60mm;position:absolute;font-size:3mm;">
  267. <table v-if='data.khType == 2' cellpadding="0" cellspacing="0" style="border-collapse:collapse;text-align: center;width:100%;height:100%;line-height: 5mm">
  268. <tr height='6mm'>
  269. <td :colspan="data.khLength" style="width:30mm;border:solid 1px black;border-collapse:collapse;text-align:center;">准考证号</td>
  270. </tr>
  271. <tr height='6mm'>
  272. <th v-for='i in data.khLength' style="border:solid 1px #000000;border-collapse:collapse;">&nbsp;</th>
  273. </tr>
  274. <tr>
  275. <td v-for='i in data.khLength' align="center" style="border:solid 1px #000000;border-collapse:collapse;padding-top: 1mm;border-left-color: #000000;border-bottom-color: #000000">
  276. <div v-for='j in 10' style="border:1px solid #000000;width:4mm;height: 3.5mm;line-height: 1.2;text-align: center;margin: 6px 0">
  277. <span style="margin-top: -1.5px;display:block ">{{j-1}}</span>
  278. </div>
  279. </td>
  280. </tr>
  281. </table>
  282. <div v-else>
  283. <table style="border-collapse:collapse;text-align: center;width:100%;height:100%;line-height: 5mm" cellpadding="0" cellspacing="0">
  284. <tbody>
  285. <tr height="6mm"><td colspan="8" style="width:30mm;border-collapse:collapse;text-align:left;">准考证号:</td></tr>
  286. <tr height="6mm">
  287. <th v-for='i in 8' style="border:solid 1px #000000;border-collapse:collapse;">&nbsp;</th>
  288. </tr>
  289. </tbody>
  290. </table>
  291. <div style="top:25mm;left:0mm;width:65mm;height:27mm;position:absolute;">
  292. <div style="top:0mm;left:0mm;width:65mm;height:27mm;position:absolute;line-height:15mm;position:absolute;border: dashed 1px #000000;text-align: center;font-size: 6mm;color:grey;">贴条形码区<p>
  293. <span style="font-size: 2mm;line-height: 3mm">(正面朝上,切勿贴出虚线方框)</span>
  294. </p></div>
  295. </div>
  296. </div>
  297. </div>
  298. <!-- 选择题 -->
  299. <template v-if='paper.obj.list.length>0'>
  300. <!-- {{paper.obj}} -->
  301. <div class="sub" :style="{
  302. width: paper.objAnsPoints[0].w+'mm',
  303. height: paper.objAnsPoints[0].h+'mm',
  304. left: paper.objAnsPoints[0].x+'mm',
  305. top: (paper.objAnsPoints[0].y-5)+'mm',
  306. position:'absolute'
  307. }">
  308. <div class="opLabel">
  309. {{paper.obj.title}}
  310. </div>
  311. <img @click="delTm(0,1)" class="del" src="../../assets/delete.png" alt="">
  312. <div class="obj" >
  313. <div v-for='(item,index) in paper.obj.list'>
  314. <span class="tm_id" :style="{
  315. left:(item.points[0].x-8)+'mm',
  316. top:(item.points[0].y)+'mm'
  317. }">{{item.id}}</span>
  318. <span v-for='(opt,i) in item.points' class="options" :style="{
  319. width: opt.w+'mm',
  320. height: opt.h+'mm',
  321. left: opt.x+'mm',
  322. top: opt.y+'mm'
  323. }">
  324. <template v-if='item.type == 3'>
  325. {{pd[i]}}
  326. </template>
  327. <template v-else>
  328. {{options[i]}}
  329. </template>
  330. </span>
  331. </div>
  332. </div>
  333. </div>
  334. </template>
  335. <!-- 填空题 -->
  336. <template v-if='paper.sub.length>0'>
  337. <div class="sub" v-for='(item,i) in paper.stdSujQnoPoints' :style="{
  338. width: item.w+'mm',
  339. height: item.h+'mm',
  340. left: item.x+'mm',
  341. top: (item.y-5)+'mm',
  342. position:'absolute'
  343. }">
  344. <div class="opLabel">{{paper.sub[i].title}}</div>
  345. <img @click="delTm(i)" class="del" src="../../assets/delete.png" alt="">
  346. <div class="obj" v-if='paper.sub[i].title=="填空题"'>
  347. <div v-for='sub in paper.sub[i].list' class="tk">
  348. <span class="tm_id" :style="{
  349. left:(sub.x-6)+'mm',
  350. top:(sub.y-3)+'mm'
  351. }">{{sub.id}}.</span>
  352. <div :style="{
  353. width:sub.w+'mm',
  354. height:sub.h+'mm',
  355. left: sub.x+'mm',
  356. top: sub.y+'mm',
  357. }"></div>
  358. </div>
  359. </div>
  360. <div class="obj" v-else-if='paper.sub[i].type=="解答题"'>
  361. <span class="tm_id" style="top: 2.5mm;">{{paper.sub[i].option.id}}</span>
  362. </div>
  363. <div class="obj" v-else-if='paper.sub[i].title=="选做题"' style="padding: 1mm;font-size: 3mm;line-height: 5mm;">
  364. <span>请考生从<template v-for='(opt,i) in paper.sub[i].list'>{{opt.id}} </template>
  365. 题任选一题作答,作答时用2B铅笔在答题卡上把所选题目对应的选考标记涂黑,
  366. 不涂或多涂或填涂和作答不符,均不得分。</span><br>
  367. <span>我选择的题号为:</span>
  368. <span v-for='opt in paper.sub[i].list' class="options" :style="{
  369. width: opt.w+'mm',
  370. height: opt.h+'mm',
  371. left: opt.x+'mm',
  372. top: opt.y+'mm'
  373. }">{{opt.id}}</span>
  374. </div>
  375. <div class="obj" v-else-if='paper.sub[i].title=="语文作文题"'>
  376. <span class="tm_id" style="top: 2.5mm;">{{paper.sub[i].id}}.</span>
  377. <ul class="words">
  378. <li v-for='num in paper.sub[i].words'>
  379. <span v-if='num%100 == 0'>{{num}}</span>
  380. </li>
  381. </ul>
  382. </div>
  383. <div class="obj" v-else-if='paper.sub[i].title=="英语作文题"'>
  384. <span class="tm_id" style="top: 7mm;">{{paper.sub[i].id}}.</span>
  385. <ul class="english">
  386. <li v-for='num in paper.sub[i].rows'>
  387. </li>
  388. </ul>
  389. </div>
  390. </div>
  391. </template>
  392. </div>
  393. <!-- //试卷内容 -->
  394. <!-- 页码 -->
  395. <div style="top:281mm;left:15mm;position: absolute;">
  396. <div v-for='item in pages' :class="item==1?'act':''" style="border:1px solid #000000;width:4mm;height: 2.5mm;line-height: 1;text-align: center;margin: 6px 6px;display:inline-block">
  397. </div>
  398. </div>
  399. </div>
  400. </div>
  401. </div>
  402. <div class="right_div">
  403. <h3>选择答题卡布局</h3>
  404. <ul class="dtk_bs_list">
  405. <li v-for='i in 3' :class='data.layout == i ?"te_active":""' @click="data.layout = i">
  406. <div v-if='i==1'>
  407. <img src="../../assets/test01.png" alt="">
  408. <b>一栏</b>
  409. </div>
  410. <div v-if='i==2'>
  411. <img src="../../assets/test02.png" alt="">
  412. <b>两栏</b>
  413. </div>
  414. <div v-if='i==3'>
  415. <img src="../../assets/test03.png" alt="">
  416. <b>三栏</b>
  417. </div>
  418. </li>
  419. </ul>
  420. <div class="tips">
  421. <p v-if='data.layout==1'>一栏适用于A4、16K、B5纸张</p>
  422. <p v-if='data.layout==2'>两栏适用于A3、8K、B4纸张</p>
  423. <p v-if='data.layout==3'>三栏适用于A3、8K、B4纸张</p>
  424. </div>
  425. <h3>选择考号版式</h3>
  426. <div style="padding: 10px;">
  427. <el-radio v-model="data.khType" :label="1">条形码</el-radio>
  428. <el-radio v-model="data.khType" :label="2">准考证号</el-radio>
  429. <select v-model="data.khLength" style="width: 70px;">
  430. <option v-for="i in 12" v-if='i>=4' :value="i">{{i}}位</option>
  431. </select>
  432. </div>
  433. <h3>设置禁止作答区</h3>
  434. <div style="padding: 10px;">
  435. <el-radio v-model="data.noAnsArea" :label="1">启用</el-radio>
  436. <el-radio v-model="data.noAnsArea" :label="2">禁用</el-radio>
  437. </div>
  438. <h3>添加试题</h3>
  439. <div class="btns" style="padding: 10px;">
  440. <el-button @click="openAdd(1)" type="info" size="mini" plain icon="el-icon-plus">客观题</el-button>
  441. <el-button @click="openAdd(2)" type="info" size="mini" plain icon="el-icon-plus">填空题</el-button>
  442. <el-button @click="openAdd(3)" type="info" size="mini" plain icon="el-icon-plus">解答题</el-button>
  443. <el-button @click="openAdd(4)" type="info" size="mini" plain icon="el-icon-plus">选做题</el-button>
  444. <el-button @click="openAdd(5)" type="info" size="mini" plain icon="el-icon-plus">作文(语)</el-button>
  445. <el-button @click="openAdd(6)" type="info" size="mini" plain icon="el-icon-plus">作文(英)</el-button>
  446. </div>
  447. </div>
  448. </div>
  449. <el-dialog
  450. title="添加题目"
  451. :visible.sync="open"
  452. width="30%">
  453. <el-form size="small" :inline='true' label-width="80px" label-position="left">
  454. <el-form-item label="题目名称:" v-if='type <= 3'>
  455. <el-radio-group fill='#FA0A2F' v-model="addForm.type" v-if='type == 1'>
  456. <el-radio-button :label="1">单选题</el-radio-button>
  457. <el-radio-button :label="2">多选题</el-radio-button>
  458. <el-radio-button :label="3">判断题</el-radio-button>
  459. </el-radio-group>
  460. <el-input v-if='type == 2' value="填空题"></el-input>
  461. <el-input v-if='type == 3' value="解答题"></el-input>
  462. </el-form-item>
  463. <el-form-item label="题号:" v-if='type <= 3'>
  464. 从第 <el-input @input="createList" style="width:100px;" v-model="addForm.start"></el-input>
  465. 到第 <el-input @input="createList" style="width: 100px;" v-model="addForm.end"></el-input>
  466. </el-form-item>
  467. <el-form-item label="选项个数:" v-if='addForm.type != 3 && type == 1'>
  468. <el-input @input="numChange" v-model="addForm.num"></el-input>
  469. </el-form-item>
  470. <el-form-item label="每行空数:" v-if='type == 2'>
  471. <el-radio-group fill='#FA0A2F' v-model="addForm.count" >
  472. <el-radio-button v-for='i in 5' :label="i">{{i}}</el-radio-button>
  473. </el-radio-group>
  474. </el-form-item>
  475. <el-form-item label="选做规则:" v-if='type == 4'>
  476. <el-input style="width:100px;" v-model="addForm.chooseNum"></el-input>
  477. 选 <el-input style="width: 100px;" value="1" disabled></el-input>
  478. </el-form-item>
  479. <el-form-item label="作文格数:" v-if='type == 5'>
  480. <el-input v-model="addForm.words"></el-input>
  481. </el-form-item>
  482. <el-form-item label="作文栏数:" v-if='type == 6'>
  483. <el-input v-model="addForm.row"></el-input>
  484. </el-form-item>
  485. <ul class="tm_list" v-if='type == 1'>
  486. <li v-for="item in list">
  487. <span>{{item.id}}</span>
  488. <div v-if='addForm.type != 3'><input type="text" v-model="item.num">个选项</div>
  489. </li>
  490. </ul>
  491. <ul class="tm_list" v-if='type == 3'>
  492. <li v-for="item in list" v-if='list.length>0'>
  493. <span>{{item.id}}</span>
  494. <div @click="addLeaf(item,item.leaf)" style="cursor: pointer;">+</div>
  495. <div v-for="(item1,i1) in item.leaf" style="float: none;padding-left: 10px;">
  496. <span style="font-weight: 500;">{{item1.id}}</span>
  497. <div @click="item.leaf.splice(i1,1)" style="cursor: pointer;">-</div>
  498. <div @click="addLeaf(item1,item1.leaf)" style="cursor: pointer;">+</div>
  499. <div v-for="(item2,i2) in item1.leaf" style="float: none;padding-left: 10px;">
  500. <span style="font-weight: 500;">{{item2.id}}</span>
  501. <div @click="item1.leaf.splice(i2,1)" style="cursor: pointer;">-</div>
  502. <div @click="addLeaf(item2,item2.leaf)" style="cursor: pointer;">+</div>
  503. <div v-for="(item3,i3) in item2.leaf" style="float: none;padding-left: 10px;">
  504. <span style="font-weight: 500;">{{item3.id}}</span>
  505. <div @click="item2.leaf.splice(i3,1)" style="cursor: pointer;">-</div>
  506. </div>
  507. </div>
  508. </div>
  509. </li>
  510. </ul>
  511. </el-form>
  512. <!-- <p align='center' v-if="type == 1">
  513. <el-checkbox v-model="addForm.auto" >添加题目自动排版至顶端客观题区域</el-checkbox>
  514. </p> -->
  515. <span slot="footer" class="dialog-footer">
  516. <el-button @click="open = false">取 消</el-button>
  517. <el-button type="primary" @click="addPaper">添 加</el-button>
  518. </span>
  519. </el-dialog>
  520. </section>
  521. </template>
  522. <script>
  523. import Page from "../../components/Page";
  524. export default {
  525. components: {
  526. Page,
  527. },
  528. data() {
  529. return {
  530. loading: false,
  531. queryParams: {
  532. page: 1,
  533. },
  534. form: {},
  535. form1: {},
  536. form2: {},
  537. list: [{}, {}],
  538. total: 0,
  539. title: "新增用户",
  540. open: false,
  541. doctorList: [],
  542. rules: {},
  543. pages:1,
  544. size:[180,118],
  545. data:{
  546. layout:1,
  547. khType:1,
  548. khLength:8,
  549. noAnsArea:1
  550. },
  551. type:1,
  552. options:['A','B','C','D','E','F'],
  553. pd:['T','F'],
  554. addForm:{
  555. type:1,
  556. start:1,
  557. end:'',
  558. num:4,
  559. auto:true,
  560. count:2,
  561. chooseNum:3,
  562. words:900,
  563. row:10,
  564. col:5 //客观题一列几行
  565. },
  566. list:[
  567. ],
  568. paper:{
  569. obj:{
  570. title:'客观题',
  571. list:[]
  572. },
  573. sub:[], //主观题
  574. objAnsPoints:[
  575. ],
  576. stdSujQnoPoints:[
  577. ]
  578. },
  579. dft:{
  580. x:0,
  581. y:100,
  582. w:180,
  583. h:28
  584. }
  585. };
  586. },
  587. watch:{
  588. "paper.objAnsPoints":{
  589. handler(newvalue){
  590. var y
  591. if(newvalue.length>0){
  592. y=newvalue[0].y+newvalue[0].h+8
  593. }else{
  594. y=this.dft.y
  595. }
  596. var sub=this.paper.stdSujQnoPoints
  597. sub.forEach((item,index)=>{
  598. if(index > 0){
  599. item.y=item.y-height-8
  600. }else{
  601. item.y=y
  602. }
  603. })
  604. },
  605. deep:true
  606. }
  607. },
  608. methods: {
  609. decToBin4(decimalNumber) {
  610. return decimalNumber.toString(2).padStart(4, '0');
  611. },
  612. openAdd(type){
  613. this.type=type
  614. this.open=true
  615. },
  616. //选项个数变化
  617. numChange(){
  618. let list=this.list
  619. list.forEach(item=>{
  620. item.num=this.addForm.num
  621. })
  622. this.list=list
  623. },
  624. //添加小题
  625. addLeaf(item,leaf){
  626. var l=leaf.length
  627. leaf.push({
  628. id:item.id+'.'+(l+1),
  629. leaf:[]
  630. })
  631. },
  632. //删除主观题目
  633. delTm(i,flag){
  634. var sub=this.paper.stdSujQnoPoints,list=this.paper.sub
  635. if(flag){ //客观题
  636. this.paper.objAnsPoints=[]
  637. this.paper.obj.list=[]
  638. if(sub.length == 0){
  639. this.addForm.start=1
  640. }
  641. return
  642. }
  643. var height=sub[i].h,item={...list[i]}
  644. sub.splice(i,1)
  645. list.splice(i,1)
  646. sub.forEach((item,index)=>{
  647. if(index >= i){
  648. item.y=item.y-height-8
  649. }
  650. })
  651. if(i>=sub.length-1){
  652. if(item.title == '填空题'){
  653. this.addForm.start-=item.list.length
  654. }else{
  655. this.addForm.start--
  656. }
  657. }
  658. if(this.paper.objAnsPoints.length == 0 && this.paper.stdSujQnoPoints.length == 0){
  659. this.addForm.start=1
  660. }
  661. },
  662. createList(){
  663. let s=this.addForm.start,e=this.addForm.end
  664. let list=[]
  665. if(this.addForm.end >= this.addForm.start){
  666. for(let i=s;i<=e;i++){
  667. if(this.type == 1){
  668. // 客观题
  669. if(this.addForm.type == 3){ //判断题
  670. list.push({
  671. id:i,
  672. num:2
  673. })
  674. }else{
  675. list.push({
  676. id:i,
  677. num:this.addForm.num
  678. })
  679. }
  680. }else if(this.type == 2 || this.type == 3){
  681. // 填空题 解答题
  682. list.push({
  683. id:i,
  684. leaf:[]
  685. })
  686. }
  687. }
  688. }
  689. this.list=list
  690. },
  691. //添加题目
  692. addPaper(){
  693. switch(this.type){
  694. case 1: //客观题
  695. this.calcXY()
  696. break;
  697. case 2: //填空题
  698. let list=this.list
  699. let count=this.addForm.count
  700. var obj=this.paper.objAnsPoints,sub=this.paper.stdSujQnoPoints
  701. let h=Math.ceil(list.length/count)*12
  702. if(sub.length>0){
  703. let i=sub.length-1
  704. this.paper.stdSujQnoPoints.push({
  705. x:sub[i].x,
  706. y:sub[i].y+sub[i].h+8,
  707. w:sub[i].w,
  708. h:h
  709. })
  710. }
  711. else if(obj.length>0 ){
  712. let i=obj.length-1
  713. this.paper.stdSujQnoPoints.push({
  714. x:obj[i].x,
  715. y:obj[i].y+obj[i].h+8,
  716. w:obj[i].w,
  717. h:h
  718. })
  719. }else{
  720. let dft={...this.dft}
  721. dft.h=h
  722. this.paper.stdSujQnoPoints.push(dft)
  723. }
  724. list.forEach((item,index)=>{
  725. let row=parseInt(index/count),col=(index%count)
  726. item.w=parseInt(this.dft.w/count-10)
  727. item.h=0.1
  728. item.x=8+(8+item.w)*col
  729. item.y=8+row*10
  730. })
  731. this.paper.sub.push({
  732. title:'填空题',
  733. list:list,
  734. })
  735. this.list=[]
  736. console.log(this.paper)
  737. break;
  738. case 3: //解答题
  739. var _list=this.list,new_list=[]
  740. function searchLeaf(arr){
  741. arr.forEach(item=>{
  742. if(item.leaf.length == 0){
  743. new_list.push({
  744. id:item.id
  745. })
  746. }else{
  747. searchLeaf(item.leaf)
  748. }
  749. })
  750. }
  751. searchLeaf(_list)
  752. var obj=this.paper.objAnsPoints,sub=this.paper.stdSujQnoPoints
  753. if(sub.length>0){
  754. let i=sub.length-1
  755. this.paper.stdSujQnoPoints.push({
  756. x:sub[i].x,
  757. y:sub[i].y+sub[i].h+8,
  758. w:sub[i].w,
  759. h:50
  760. })
  761. }
  762. else if(obj.length>0 ){
  763. let i=obj.length-1
  764. this.paper.stdSujQnoPoints.push({
  765. x:obj[i].x,
  766. y:obj[i].y+obj[i].h+8,
  767. w:obj[i].w,
  768. h:50
  769. })
  770. }else{
  771. let dft={...this.dft}
  772. dft.h=50
  773. this.paper.stdSujQnoPoints.push(dft)
  774. }
  775. new_list.forEach((item,index)=>{
  776. if(index > 0){
  777. let i=sub.length-1
  778. let x=index==1?6:1
  779. this.paper.stdSujQnoPoints.push({
  780. x:sub[i].x,
  781. y:sub[i].y+sub[i].h+x,
  782. w:sub[i].w,
  783. h:50
  784. })
  785. }
  786. this.paper.sub.push({
  787. title:index==0?'解答题':'',
  788. option:item,
  789. type:'解答题'
  790. })
  791. })
  792. this.list=[]
  793. break;
  794. case 4:
  795. let chooseNum=this.addForm.chooseNum
  796. var obj=this.paper.objAnsPoints,sub=this.paper.stdSujQnoPoints
  797. if(sub.length>0){
  798. let i=sub.length-1
  799. this.paper.stdSujQnoPoints.push({
  800. x:sub[i].x,
  801. y:sub[i].y+sub[i].h+8,
  802. w:sub[i].w,
  803. h:50
  804. })
  805. }
  806. else if(obj.length>0 ){
  807. let i=obj.length-1
  808. this.paper.stdSujQnoPoints.push({
  809. x:obj[i].x,
  810. y:obj[i].y+obj[i].h+8,
  811. w:obj[i].w,
  812. h:50
  813. })
  814. }else{
  815. let dft={...this.dft}
  816. dft.h=50
  817. this.paper.stdSujQnoPoints.push(dft)
  818. }
  819. let start=this.addForm.start,end=Number(start)+Number(this.addForm.chooseNum)-1
  820. let tihao=[]
  821. for(let i=start;i<=end;i++){
  822. tihao.push({
  823. id:i,
  824. w:4,
  825. h:2.5,
  826. x:24+(i-start)*6,
  827. y:12
  828. })
  829. }
  830. this.paper.sub.push({
  831. title:'选做题',
  832. list:tihao
  833. })
  834. this.addForm.end=end
  835. break;
  836. case 5:
  837. let words=Number(this.addForm.words)
  838. var obj=this.paper.objAnsPoints,sub=this.paper.stdSujQnoPoints
  839. var row=Math.ceil(words/20)+1,height=row*9.5+30
  840. if(sub.length>0){
  841. let i=sub.length-1
  842. this.paper.stdSujQnoPoints.push({
  843. x:sub[i].x,
  844. y:sub[i].y+sub[i].h+8,
  845. w:sub[i].w,
  846. h:height
  847. })
  848. }
  849. else if(obj.length>0 ){
  850. let i=obj.length-1
  851. this.paper.stdSujQnoPoints.push({
  852. x:obj[i].x,
  853. y:obj[i].y+obj[i].h+8,
  854. w:obj[i].w,
  855. h:height
  856. })
  857. }else{
  858. let dft={...this.dft}
  859. dft.h=height
  860. this.paper.stdSujQnoPoints.push(dft)
  861. }
  862. this.paper.sub.push({
  863. title:'语文作文题',
  864. words:row*20,
  865. id:this.addForm.start
  866. })
  867. this.addForm.end=this.addForm.start
  868. break;
  869. case 6:
  870. let rows=Number(this.addForm.row)
  871. var obj=this.paper.objAnsPoints,sub=this.paper.stdSujQnoPoints
  872. var height=rows*10+10
  873. if(sub.length>0){
  874. let i=sub.length-1
  875. this.paper.stdSujQnoPoints.push({
  876. x:sub[i].x,
  877. y:sub[i].y+sub[i].h+8,
  878. w:sub[i].w,
  879. h:height
  880. })
  881. }
  882. else if(obj.length>0 ){
  883. let i=obj.length-1
  884. this.paper.stdSujQnoPoints.push({
  885. x:obj[i].x,
  886. y:obj[i].y+obj[i].h+8,
  887. w:obj[i].w,
  888. h:height
  889. })
  890. }else{
  891. let dft={...this.dft}
  892. dft.h=height
  893. this.paper.stdSujQnoPoints.push(dft)
  894. }
  895. this.paper.sub.push({
  896. title:'英语作文题',
  897. rows:rows,
  898. id:this.addForm.start
  899. })
  900. this.addForm.end=this.addForm.start
  901. console.log(this.paper)
  902. break;
  903. }
  904. this.addForm.start=Number(this.addForm.end)+1
  905. this.addForm.end=''
  906. this.open=false
  907. },
  908. calcXY(){
  909. function sum(arr,start,end) {
  910. arr=JSON.parse(JSON.stringify(arr))
  911. arr=arr.splice(start,end)
  912. return arr.reduce((acc, curr) => Number(acc) + Number(curr), 0);
  913. }
  914. let col=this.addForm.col
  915. let list=this.paper.obj.list,list1=this.list
  916. let x,y=2.5,max=[0,0,0,0,0,0,0,0,0,0]
  917. list1.forEach(item=>{
  918. item.type=this.addForm.type
  919. if(item.type == 3){
  920. item.num=2
  921. }
  922. list.push(item)
  923. })
  924. list.forEach((item,index)=>{
  925. let r=parseInt(index/25),i=parseInt(index/col)
  926. if(r>0){
  927. i=parseInt(index%(r*25)/col)
  928. }
  929. item.points=[]
  930. if(index>0)y=y+5
  931. if(index>0 && index%col == 0){
  932. y=2.5+27*r
  933. }
  934. x=8+35*i
  935. if(index>0 && (index%25 >= 0 && index%25 < 5)){
  936. x=8
  937. }
  938. for(let i=0;i<item.num;i++){
  939. if(i>0)x+=6
  940. item.points.push({
  941. x:x,
  942. y:y,
  943. w:4,
  944. h:2.5
  945. })
  946. }
  947. })
  948. var dft={...this.dft}
  949. dft.h=Math.ceil(list.length/25)*28
  950. if(this.paper.objAnsPoints.length>0){
  951. this.paper.objAnsPoints[0].h=dft.h
  952. }else{
  953. this.paper.objAnsPoints.push(dft)
  954. }
  955. this.list=[]
  956. console.log(dft)
  957. },
  958. },
  959. created() {
  960. this.pages=this.decToBin4(this.pages).split('')
  961. },
  962. };
  963. </script>