index.vue 35 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124
  1. <style lang="less" scoped>
  2. .add_assess {
  3. h5 {
  4. padding: 30px 35px 0 35px;
  5. margin-bottom: 20px;
  6. font-size: 14px;
  7. span {
  8. color: #ff545b;
  9. margin-right: 3px;
  10. }
  11. }
  12. .table_map {
  13. border-bottom: 10px solid #dee2ea;
  14. .table_top_box {
  15. display: flex;
  16. align-items: center;
  17. justify-content: space-between;
  18. padding: 0 37px;
  19. .table_top_box_left {
  20. display: flex;
  21. flex-wrap: wrap;
  22. /deep/.el-input--mini .el-input__inner {
  23. width: 200px;
  24. }
  25. .num_box {
  26. margin-left: 50px;
  27. /deep/ .el-input__inner {
  28. width: 40px;
  29. text-align: center;
  30. }
  31. .num {
  32. display: flex;
  33. /deep/.el-form-item__error {
  34. width: 100px;
  35. margin-left: -20px;
  36. }
  37. }
  38. }
  39. }
  40. }
  41. .move_btn {
  42. font-size: 14px;
  43. margin-left: 10px;
  44. display: flex;
  45. div {
  46. width: 12px;
  47. height: 16px;
  48. margin-right: 8px;
  49. img {
  50. width: 100%;
  51. height: 100%;
  52. cursor: pointer;
  53. }
  54. }
  55. }
  56. }
  57. /deep/ .el-form-item--mini.el-form-item,
  58. .el-form-item--small.el-form-item {
  59. margin-bottom: 0;
  60. }
  61. .hint_msg {
  62. font-size: 12px;
  63. color: red;
  64. margin-top: 14px;
  65. }
  66. .change_table_btns {
  67. width: 100%;
  68. margin-top: 20px;
  69. display: flex;
  70. justify-content: center;
  71. padding: 10px;
  72. box-sizing: border-box;
  73. border-top: 10px solid #dee2ea;
  74. div {
  75. width: 80px;
  76. height: 30px;
  77. line-height: 30px;
  78. border-radius: 2px;
  79. border: 1px solid #21cbc7;
  80. color: #21cbc7;
  81. font-size: 14px;
  82. padding: 0 5px;
  83. margin: 0 30px;
  84. cursor: pointer;
  85. &:nth-child(1) {
  86. &:hover {
  87. background: rgba(97, 218, 215, 0.1);
  88. }
  89. }
  90. &:nth-child(2) {
  91. border-color: #ff5b5b;
  92. color: #ff5b5b;
  93. &:hover {
  94. background: rgba(255, 91, 91, 0.1);
  95. }
  96. }
  97. }
  98. }
  99. .rich_text {
  100. padding: 10px 37px;
  101. }
  102. }
  103. .rich_text {
  104. }
  105. .quill-editor.ql-editor {
  106. padding-left: 0 !important;
  107. }
  108. /**富文本编辑器样式修改***/
  109. .ql-snow .ql-picker.ql-size .ql-picker-label::before,
  110. .ql-snow .ql-picker.ql-size .ql-picker-item::before,
  111. .ql-snow .ql-picker.ql-header .ql-picker-label::before,
  112. it .ql-editor,
  113. .quill-editor {
  114. padding-top: 0px !important;
  115. margin-top: -8px;
  116. min-height: 48px;
  117. p {
  118. padding-top: 8px;
  119. }
  120. }
  121. .ql-editor.ql-blank::before {
  122. padding-top: 0px;
  123. }
  124. .btns {
  125. margin-top: 20px;
  126. }
  127. /deep/ .el-input--mini {
  128. font-size: 14px;
  129. }
  130. /deep/ .el-form-item.is-success .el-input__inner,
  131. .el-form-item.is-success .el-textarea__inner {
  132. border-color: #c9c9c9 !important;
  133. }
  134. /deep/ .el-form-item.is-success .el-textarea__inner {
  135. border-color: #c9c9c9 !important;
  136. }
  137. /deep/ .el-form-item.is-success .el-textarea__inner {
  138. border-color: #c9c9c9 !important;
  139. }
  140. </style>
  141. <template>
  142. <div class="add_assess">
  143. <el-form
  144. size="mini"
  145. :model="scaleData"
  146. label-position="left"
  147. ref="scaleFormRef"
  148. >
  149. <div
  150. class="table_map"
  151. v-for="(table, tableIndex) in scaleData.klScaleParent"
  152. :key="tableIndex"
  153. >
  154. <h5><span>*</span>量表内容:</h5>
  155. <div class="table_top_box">
  156. <div class="table_top_box_left">
  157. <el-form-item
  158. label="标题:"
  159. label-width="70px"
  160. :prop="`klScaleParent[${tableIndex}].content`"
  161. :rules="rules.title"
  162. >
  163. <el-input
  164. :prop="`klScaleParent[${tableIndex}].content`"
  165. maxlength="20"
  166. v-model.trim="table.content"
  167. />
  168. </el-form-item>
  169. <div style="margin: 0 20px">
  170. <el-form-item label="内容类型:" label-width="100px">
  171. <el-select
  172. v-model="table.textType"
  173. placeholder="请选择"
  174. @change="initializationTableData($event, tableIndex)"
  175. >
  176. <el-option label="问题选项" :value="11"> </el-option>
  177. <el-option label="概述文本" :value="12"> </el-option>
  178. </el-select>
  179. </el-form-item>
  180. <div class="hint_msg">
  181. 注:内容类型修改后已填的所在标题下的内容将会清空
  182. </div>
  183. </div>
  184. <div v-if="table.textType === 11">
  185. <el-form-item label="结果类型:" label-width="100px">
  186. <el-radio-group
  187. v-model="table.resultType"
  188. @change="initializationTableData($event, tableIndex)"
  189. >
  190. <el-radio :label="2">直接结果</el-radio>
  191. <el-radio :label="1">记分结果</el-radio>
  192. </el-radio-group>
  193. </el-form-item>
  194. <div class="hint_msg">
  195. 注:结果类型修改后已填的所在标题下的内容将会清空
  196. </div>
  197. </div>
  198. <div
  199. class="num_box"
  200. v-if="table.resultType === 1 && table.textType === 11"
  201. >
  202. <div class="num">
  203. <el-form-item
  204. label="系数:"
  205. label-width="70px"
  206. :prop="`klScaleParent[${tableIndex}].factor`"
  207. :ref="`klScaleParent[${tableIndex}].factor`"
  208. :rules="rules.tableFactor"
  209. >
  210. <el-input
  211. type="number"
  212. maxlength="6"
  213. v-model.number="table.factor"
  214. />
  215. </el-form-item>
  216. <el-form-item
  217. label="常数:"
  218. label-width="70px"
  219. style="margin-left: 10px"
  220. :prop="`klScaleParent[${tableIndex}].constant`"
  221. :rules="rules.tableConstant"
  222. >
  223. <el-input
  224. :ref="`klScaleParent[${tableIndex}].constant`"
  225. type="number"
  226. maxlength="6"
  227. v-model.number="table.constant"
  228. />
  229. </el-form-item>
  230. </div>
  231. <div class="hint_msg">
  232. 注:结果类型修改后已填的所在标题下的内容将会清空
  233. </div>
  234. </div>
  235. </div>
  236. <div class="move_btn" v-if="scaleData.klScaleParent.length > 1">
  237. <div
  238. @click="CHANGE_TABLE({ tableIndex, type: 'up' })"
  239. @mouseover="moveTopHover = true"
  240. @mouseout="moveTopHover = false"
  241. v-if="tableIndex"
  242. title="上移"
  243. >
  244. <img
  245. :src="
  246. moveTopHover
  247. ? require('@/images/icon_hover_top.png')
  248. : require('@/images/icon_default_top.png')
  249. "
  250. alt=""
  251. />
  252. </div>
  253. <div
  254. v-if="tableIndex !== scaleData.klScaleParent.length - 1"
  255. @click="CHANGE_TABLE({ tableIndex, type: 'down' })"
  256. @mouseover="moveBottomHover = true"
  257. @mouseout="moveBottomHover = false"
  258. title="下移"
  259. >
  260. <img
  261. :src="
  262. moveBottomHover
  263. ? require('@/images/icon_hover_down.png')
  264. : require('@/images/icon_default_down.png')
  265. "
  266. alt=""
  267. />
  268. </div>
  269. </div>
  270. </div>
  271. <ScaleTable
  272. v-if="table.textType === 11"
  273. :tableData="table.klScaleSaveGroup"
  274. :tableIndex="tableIndex"
  275. :tableResultType="table.resultType"
  276. @CHANGE_FORM_DATA="CHANGE_FORM_DATA"
  277. @CHANGE_TABLE_ROW="CHANGE_TABLE_ROW"
  278. @CHANGE_ISSUE_CONTENT="CHANGE_ISSUE_CONTENT"
  279. ref="ScaleTable"
  280. />
  281. <div class="rich_text" v-if="table.textType === 12">
  282. <el-form-item
  283. label="概述:"
  284. label-width="70px"
  285. :ref="`klScaleParent[${tableIndex}].klScaleSaveGroup[0].content`"
  286. :prop="`klScaleParent[${tableIndex}].klScaleSaveGroup[0].content`"
  287. :rules="rules.fwbContent"
  288. >
  289. <!-- klScaleParent[${tableIndex}].klScaleSaveGroup[${scope.$index}].content -->
  290. <quillEditor
  291. v-model="table.klScaleSaveGroup[0].content"
  292. :options="editorOption"
  293. class="ql-editor"
  294. ref="quillEditor"
  295. @change="onEditorChange($event)"
  296. ></quillEditor>
  297. </el-form-item>
  298. </div>
  299. <div class="change_table_btns">
  300. <div @click="CHANGE_TABLE({ tableIndex, type: 1 })">
  301. <i class="el-icon-plus"></i>
  302. 新增标题
  303. </div>
  304. <div
  305. v-if="scaleData.klScaleParent.length > 1"
  306. @click="CHANGE_TABLE({ tableIndex, type: -1 })"
  307. >
  308. <i class="el-icon-minus"></i>
  309. 删除标题
  310. </div>
  311. </div>
  312. </div>
  313. </el-form>
  314. <el-form
  315. size="mini"
  316. :model="scoreresults"
  317. label-position="left"
  318. ref="ScoreResultsRef"
  319. >
  320. <ScoreResultsTable
  321. ref="ScoreResultsTable"
  322. v-if="ScoreResultsShow"
  323. :list="scoreresults.scoreresultsdatas"
  324. @CHANEG_SCORE_RESULT="CHANEG_SCORE_RESULT"
  325. />
  326. </el-form>
  327. <!-- 暂时用的按钮 -->
  328. <!-- <button
  329. style="position: fixed; bottom: 20px; right: 20px; font-size: 16px"
  330. @click="assessCommitTest"
  331. >
  332. 暂时用的按钮
  333. </button> -->
  334. </div>
  335. </template>
  336. <script>
  337. import ScaleTable from "./scale-table.vue";
  338. import "quill/dist/quill.core.css";
  339. import "quill/dist/quill.snow.css";
  340. import "quill/dist/quill.bubble.css";
  341. import { quillEditor, Quill } from "vue-quill-editor";
  342. import config from "@api/config";
  343. import { container, ImageExtend, QuillWatch } from "quill-image-extend-module";
  344. Quill.register("modules/ImageExtend", ImageExtend);
  345. import ScoreResultsTable from "./ScoreResultsTable.vue";
  346. import rules from "./rules";
  347. const defaultDate = {
  348. groupId: new Date().valueOf().toString(),
  349. issueId: new Date().valueOf().toString() + "-" + new Date().valueOf(),
  350. two_constant: 0,
  351. two_content: "",
  352. two_factor: 1,
  353. two_orderNo: 0,
  354. two_remark: "",
  355. two_resultType: 0,
  356. two_ruleCode: "",
  357. two_score: 0,
  358. two_selectType: 21,
  359. two_status: 0,
  360. two_textType: 21,
  361. content: "",
  362. orderNo: 0,
  363. pushInfo: "",
  364. remark: "",
  365. result: "",
  366. ruleCode: "",
  367. score: null,
  368. status: 1,
  369. textType: 31
  370. };
  371. const defaultTable = {
  372. constant: 0,
  373. content: "",
  374. factor: 1,
  375. klScaleSaveGroup: [
  376. {
  377. ...defaultDate
  378. }
  379. ],
  380. orderNo: 0,
  381. remark: "string",
  382. resultType: 2,
  383. ruleCode: "string",
  384. score: null,
  385. status: 1,
  386. textType: 11
  387. };
  388. export default {
  389. components: { ScaleTable, quillEditor, ScoreResultsTable },
  390. props: {
  391. childScaleData: {
  392. default: null
  393. }
  394. },
  395. data() {
  396. return {
  397. rules: rules,
  398. moveTopHover: false,
  399. moveBottomHover: false,
  400. scaleData: {
  401. conceptId: 0,
  402. klScaleParent: [
  403. // 表格层
  404. {
  405. constant: 0,
  406. content: "",
  407. factor: 1,
  408. klScaleSaveGroup: [
  409. // 问题层+结果层(包括分组)
  410. {
  411. groupId: 0,
  412. issueId: 0,
  413. two_constant: 0,
  414. two_content: "",
  415. two_factor: 1,
  416. two_orderNo: 0,
  417. two_remark: "",
  418. two_resultType: 0,
  419. two_ruleCode: "",
  420. two_score: 0,
  421. two_selectType: 21,
  422. two_status: 1,
  423. two_textType: 21,
  424. content: "",
  425. orderNo: 0,
  426. pushInfo: "",
  427. remark: "",
  428. result: "",
  429. ruleCode: "",
  430. score: null,
  431. status: 1,
  432. textType: 31
  433. }
  434. ],
  435. orderNo: 0,
  436. remark: "string",
  437. resultType: 2,
  438. ruleCode: "string",
  439. score: "",
  440. status: 1,
  441. textType: 11
  442. }
  443. ],
  444. modifier: "0"
  445. },
  446. toolbars: [
  447. [
  448. ["bold", "underline", "strike"],
  449. [{ list: "ordered" }, { list: "bullet" }],
  450. [{ script: "sub" }, { script: "super" }],
  451. [{ color: [] }, { background: [] }],
  452. [{ align: [] }],
  453. ["image"]
  454. ]
  455. ],
  456. editorOption: {
  457. modules: {
  458. ImageExtend: {
  459. loading: true,
  460. name: "upfile",
  461. size: 1,
  462. sizeError: () => {
  463. this.$message({
  464. showClose: true,
  465. message: "请上传 1M 以内的图片!",
  466. type: "warning"
  467. });
  468. },
  469. action: config.urls.promptServer,
  470. response: (res) => {
  471. if (res.code == "0") {
  472. return config.imgHost + res.data.url;
  473. } else {
  474. this.$message({
  475. showClose: true,
  476. message: res.msg,
  477. type: "warning"
  478. });
  479. }
  480. }
  481. },
  482. toolbar: {
  483. container: container,
  484. handlers: {
  485. image: function () {
  486. QuillWatch.emit(this.quill.id);
  487. }
  488. }
  489. }
  490. }
  491. },
  492. toolbarMode: 0,
  493. scoreresults: {
  494. scoreresultsdatas: [
  495. // todo me: 最后处理数据记得将orderNo设不唯一的值
  496. {
  497. content: {
  498. max: null,
  499. min: null
  500. },
  501. orderNo: null,
  502. pushInfo: "",
  503. remark: null,
  504. result: "",
  505. ruleCode: null,
  506. score: null,
  507. status: 2,
  508. textType: 31
  509. }
  510. ]
  511. }
  512. };
  513. },
  514. methods: {
  515. CHANGE_ISSUE_CONTENT(data) {
  516. const { value, tableIndex, rowIndex, name } = data;
  517. console.log(value, tableIndex, rowIndex, name);
  518. const thisIssueId =
  519. this.scaleData.klScaleParent[tableIndex].klScaleSaveGroup[rowIndex]
  520. .issueId;
  521. console.log(thisIssueId);
  522. this.scaleData.klScaleParent[tableIndex].klScaleSaveGroup.forEach(
  523. (item) => {
  524. if (item.issueId === thisIssueId) item[name] = value;
  525. }
  526. );
  527. },
  528. onEditorChange(e) {
  529. e.quill.deleteText(1000, 4);
  530. // e.quill.getLength()>1000
  531. },
  532. assessCommitTest() {
  533. console.dir(this.formtParams());
  534. },
  535. formtParams() {
  536. // console.log("this.scaleData.klScaleParent");
  537. // console.dir(this.scaleData.klScaleParent);
  538. // 提交数据的处理 start....
  539. // 1. 新建一个整体对象
  540. const params = {
  541. conceptId: 0,
  542. klScaleParent: [],
  543. modifier: "0"
  544. };
  545. // 2. 遍历数据
  546. this.scaleData.klScaleParent.forEach((table, tableIndex) => {
  547. if (table.textType === 11) {
  548. // 3. 将第一层数据格式顺序放进新对象(对应一个表格的数据)
  549. params.klScaleParent.push({
  550. ...table,
  551. klScaleSaveGroup: []
  552. });
  553. // 4. 建立一个新数组 用于后边赋值 params.klScaleParent[tableIndex].klScaleSaveGroup = groupArr;
  554. let groupArr = [];
  555. // 5. 遍历数据 添加组、问题、以及选项。
  556. table.klScaleSaveGroup.forEach((group, groupIndex) => {
  557. const groupFindIndex = groupArr.findIndex((item) => {
  558. return item.groupNum === group.groupId;
  559. });
  560. // 6. 查看数组中有没有同组的,如果没有同组的,直接push
  561. if (groupFindIndex === -1) {
  562. groupArr.push({
  563. groupNum: group.groupId,
  564. klScaleSub: [
  565. {
  566. issueId: group.issueId,
  567. constant: group.two_constant,
  568. content: group.two_content,
  569. factor: group.two_factor,
  570. orderNo: 0,
  571. remark: group.two_remark,
  572. resultType: group.two_resultType,
  573. ruleCode: group.two_ruleCode,
  574. score: group.two_score,
  575. selectType: group.two_selectType,
  576. status: group.two_status,
  577. textType: group.two_textType,
  578. klScaleDetail: [
  579. {
  580. content: group.content,
  581. orderNo: 0,
  582. pushInfo: group.pushInfo,
  583. remark: group.remark,
  584. result: group.result,
  585. ruleCode: group.ruleCode,
  586. score: group.score,
  587. status: group.status,
  588. textType: group.textType
  589. }
  590. ]
  591. }
  592. ]
  593. });
  594. } else {
  595. // 7. 查看数组中有没有同组的,如果有,则判断同组的是否有issueId相同的
  596. const issueIdFindIndex = groupArr[
  597. groupFindIndex
  598. ].klScaleSub.findIndex(
  599. (issItem) => issItem.issueId === group.issueId
  600. );
  601. if (issueIdFindIndex === -1) {
  602. // 8. 如果没有相同的issueId,则在该组中添加当前项的问题
  603. groupArr[groupFindIndex].klScaleSub.push({
  604. issueId: group.issueId,
  605. constant: group.two_constant,
  606. content: group.two_content,
  607. factor: group.two_factor,
  608. orderNo: 0,
  609. remark: group.two_remark,
  610. resultType: group.two_resultType,
  611. ruleCode: group.two_ruleCode,
  612. score: group.two_score,
  613. selectType: group.two_selectType,
  614. status: group.two_status,
  615. textType: group.two_textType,
  616. klScaleDetail: [
  617. {
  618. content: group.content,
  619. orderNo: 0,
  620. pushInfo: group.pushInfo,
  621. remark: group.remark,
  622. result: group.result,
  623. ruleCode: group.ruleCode,
  624. score: group.score,
  625. status: group.status,
  626. textType: group.textType
  627. }
  628. ]
  629. });
  630. } else {
  631. // 9. 如果有相同的issueId,则在该组的该问题中,添加一个新的选项
  632. groupArr[groupFindIndex].klScaleSub[
  633. issueIdFindIndex
  634. ].klScaleDetail.push({
  635. content: group.content,
  636. orderNo: 0,
  637. pushInfo: group.pushInfo,
  638. remark: group.remark,
  639. result: group.result,
  640. ruleCode: group.ruleCode,
  641. score: group.score,
  642. status: group.status,
  643. textType: group.textType
  644. });
  645. }
  646. }
  647. });
  648. // 10. 将groupArr赋值到提交数据中
  649. params.klScaleParent[tableIndex].klScaleSaveGroup = groupArr;
  650. } else if (table.textType === 12) {
  651. // 文本类型单独处理
  652. // console.dir(table);
  653. params.klScaleParent.push({
  654. ...table,
  655. klScaleSaveGroup: [
  656. {
  657. groupNum: 0,
  658. klScaleSub: [
  659. {
  660. constant: 0,
  661. content: table.klScaleSaveGroup[0].content,
  662. factor: 0,
  663. orderNo: 0,
  664. remark: "string",
  665. resultType: 0,
  666. ruleCode: "string",
  667. score: null,
  668. selectType: 0,
  669. status: 1,
  670. textType: 21,
  671. klScaleDetail: []
  672. }
  673. ]
  674. }
  675. ]
  676. });
  677. }
  678. });
  679. // 11.将得分结果中的content转成字符串 max和min
  680. const scoreresultPatam = this.scoreresults.scoreresultsdatas.map(
  681. (item, index) => {
  682. return {
  683. ...item,
  684. orderNo: index,
  685. content: JSON.stringify(item.content)
  686. };
  687. }
  688. );
  689. // 12. 创建一个得分结果的表格 并将数据赋值上
  690. const table = {
  691. constant: 0,
  692. content: "得分结果",
  693. factor: 0,
  694. klScaleSaveGroup: [
  695. {
  696. groupNum: 0,
  697. klScaleSub: [
  698. {
  699. constant: 0,
  700. content: "得分范围",
  701. factor: 0,
  702. klScaleDetail: [...scoreresultPatam],
  703. orderNo: 0,
  704. remark: "string",
  705. resultType: 0,
  706. ruleCode: "string",
  707. score: null,
  708. selectType: 21,
  709. status: 2,
  710. textType: 21
  711. }
  712. ]
  713. }
  714. ],
  715. orderNo: 0,
  716. remark: "string",
  717. resultType: 0,
  718. ruleCode: "string",
  719. score: null,
  720. status: 2,
  721. textType: 13
  722. };
  723. // 13. 将得分结果加入到提交数据中
  724. if (this.ScoreResultsShow) {
  725. params.klScaleParent.push(table);
  726. }
  727. // 14 提交数据设置新的orderNo,删除issueId
  728. params.klScaleParent.forEach((tableItem, tableIndex) => {
  729. tableItem.orderNo = tableIndex;
  730. tableItem.klScaleSaveGroup.forEach((groupItem, groupIndex) => {
  731. groupItem.groupNum = groupIndex;
  732. groupItem.klScaleSub.forEach((issueItem, issueIndex) => {
  733. issueItem.orderNo = issueIndex;
  734. issueItem.issueId && delete issueItem.issueId;
  735. issueItem.klScaleDetail.forEach((optionItem, optionIndex) => {
  736. optionItem.orderNo = optionIndex;
  737. });
  738. });
  739. });
  740. });
  741. return params;
  742. // 提交数据的处理 end....
  743. },
  744. // 提交 (父级调用)
  745. assessCommit() {
  746. // new Promise((resolve))
  747. let valid1 = new Promise((resolve, reject) => {
  748. this.$refs["scaleFormRef"].validate((valid, object, err) => {
  749. if (valid) {
  750. resolve();
  751. } else {
  752. reject("c");
  753. console.log("valid", valid, object, err);
  754. let div = this.$refs["elscrollbar"];
  755. console.log("div", div);
  756. return false;
  757. }
  758. });
  759. });
  760. let valid2 = new Promise((resolve, reject) => {
  761. this.$refs["ScoreResultsRef"].validate((valid) => {
  762. if (valid) {
  763. resolve();
  764. } else {
  765. reject("c");
  766. return false;
  767. }
  768. });
  769. });
  770. if (this.ScoreResultsShow) {
  771. return [valid1, valid2];
  772. }
  773. return [valid1];
  774. },
  775. /**
  776. * 增/删/得分结果表格
  777. * @param type : 1:add 0:remove
  778. * @param index :当前行索引
  779. */
  780. CHANEG_SCORE_RESULT(type, index) {
  781. // 节流: 阻止用户频繁点击
  782. if (this.timer) return;
  783. this.timer = setTimeout(() => {
  784. clearTimeout(this.timer);
  785. this.timer = null;
  786. }, 500);
  787. if (type === 1) {
  788. this.scoreresults.scoreresultsdatas.splice(index + 1, 0, {
  789. content: {
  790. max: null,
  791. min: null
  792. },
  793. orderNo: null,
  794. pushInfo: "",
  795. remark: null,
  796. result: "",
  797. ruleCode: null,
  798. score: null,
  799. status: 2,
  800. textType: 31
  801. });
  802. } else {
  803. this.$delete(this.scoreresults.scoreresultsdatas, index);
  804. }
  805. },
  806. /**
  807. * 增/删/移动表格
  808. * @param tableIndex :当前表格
  809. * @param type :类型 1:新增;-1:删除;up:上移;down:下移
  810. */
  811. CHANGE_TABLE(val) {
  812. // 节流: 阻止用户频繁点击
  813. if (this.timer) return;
  814. this.timer = setTimeout(() => {
  815. clearTimeout(this.timer);
  816. this.timer = null;
  817. }, 500);
  818. const { tableIndex, type } = val;
  819. switch (type) {
  820. case 1:
  821. this.scaleData.klScaleParent.splice(
  822. tableIndex + 1,
  823. 0,
  824. JSON.parse(JSON.stringify(defaultTable))
  825. );
  826. break;
  827. case -1:
  828. this.$delete(this.scaleData.klScaleParent, tableIndex);
  829. break;
  830. case "up":
  831. const thisTable = this.scaleData.klScaleParent[tableIndex];
  832. const beforeTable = this.scaleData.klScaleParent[tableIndex - 1];
  833. this.$set(this.scaleData.klScaleParent, tableIndex - 1, thisTable);
  834. this.$set(this.scaleData.klScaleParent, tableIndex, beforeTable);
  835. break;
  836. case "down":
  837. const thisTable1 = this.scaleData.klScaleParent[tableIndex];
  838. const afterTable = this.scaleData.klScaleParent[tableIndex + 1];
  839. this.$set(this.scaleData.klScaleParent, tableIndex + 1, thisTable1);
  840. this.$set(this.scaleData.klScaleParent, tableIndex, afterTable);
  841. break;
  842. }
  843. },
  844. /**
  845. * 修改表格数据(添加、删除 :组、问题、选项)
  846. * @param type 类型:1/-1:新增/删除组; 2/-2:新增/删除问题; 3/-3:新增/删除选项
  847. * @param tableIndex 单个量表的index
  848. * @param rowIndex 表格 当前行的index
  849. * @param groupId 当前组id
  850. * @param issueId 当前问题id
  851. */
  852. CHANGE_TABLE_ROW(val) {
  853. // 节流: 阻止用户频繁点击
  854. if (this.timer) return;
  855. this.timer = setTimeout(() => {
  856. clearTimeout(this.timer);
  857. this.timer = null;
  858. }, 500);
  859. const { type, tableIndex, rowIndex, groupId, issueId } = val;
  860. const child = { ...defaultDate };
  861. switch (type) {
  862. case 1: //type 1: 添加组
  863. // 设置新的 groupId、issueId
  864. child.groupId = new Date().valueOf().toString();
  865. child.issueId = child.groupId + "-" + new Date().valueOf();
  866. // 使用当前的组id(groupId) 找到最后一个groupId为当前groupId的索引;
  867. let groupIndex;
  868. this.scaleData.klScaleParent[tableIndex].klScaleSaveGroup.forEach(
  869. (item, i) => {
  870. if (item.groupId === groupId) {
  871. groupIndex = i;
  872. }
  873. }
  874. );
  875. // 将新的组插入到当前组后边
  876. this.scaleData.klScaleParent[tableIndex].klScaleSaveGroup.splice(
  877. groupIndex + 1,
  878. 0,
  879. child
  880. );
  881. break;
  882. case 2: //type 2: 添加问题
  883. // 设置新的 groupId(相同的组id)、issueId
  884. child.groupId = groupId;
  885. child.issueId = child.groupId + "-" + new Date().valueOf();
  886. let issueIndex;
  887. // 使用当前的组id(issueId) 找到最后一个issueId为当前issueId的索引;
  888. this.scaleData.klScaleParent[tableIndex].klScaleSaveGroup.forEach(
  889. (item, i) => {
  890. if (item.issueId === issueId) {
  891. issueIndex = i;
  892. }
  893. }
  894. );
  895. // 将新的组插入到当前组后边
  896. this.scaleData.klScaleParent[tableIndex].klScaleSaveGroup.splice(
  897. issueIndex + 1,
  898. 0,
  899. child
  900. );
  901. break;
  902. case 3: //type 3: 添加选项
  903. // 设置新的 groupId(相同的组id)、issueId(相同的组问题id)
  904. child.groupId = groupId;
  905. child.issueId = issueId;
  906. // 添加相同问题的内容、常数、系数、选择
  907. const thisRowData =
  908. this.scaleData.klScaleParent[tableIndex].klScaleSaveGroup[rowIndex];
  909. child.two_content = thisRowData.content;
  910. child.two_factor = thisRowData.two_factor;
  911. child.two_constant = thisRowData.two_constant;
  912. child.two_selectType = thisRowData.two_selectType;
  913. // 将新的组插入到当前组后边
  914. this.scaleData.klScaleParent[tableIndex].klScaleSaveGroup.splice(
  915. rowIndex + 1,
  916. 0,
  917. child
  918. );
  919. break;
  920. case -1: //type -1: 删除组 => 删除所有组id为当前组id的数据
  921. const newTableBygroupId = this.scaleData.klScaleParent[
  922. tableIndex
  923. ].klScaleSaveGroup.filter((item) => item.groupId !== groupId);
  924. this.$set(
  925. this.scaleData.klScaleParent[tableIndex],
  926. "klScaleSaveGroup",
  927. newTableBygroupId
  928. );
  929. break;
  930. case -2: //type -2: 删除问题 => 删除所有问题id为当前问题id的数据
  931. const newTableByissueId = this.scaleData.klScaleParent[
  932. tableIndex
  933. ].klScaleSaveGroup.filter((item) => item.issueId !== issueId);
  934. this.$set(
  935. this.scaleData.klScaleParent[tableIndex],
  936. "klScaleSaveGroup",
  937. newTableByissueId
  938. );
  939. break;
  940. case -3: //type -3: 删除选项
  941. this.$delete(
  942. this.scaleData.klScaleParent[tableIndex].klScaleSaveGroup,
  943. rowIndex
  944. );
  945. break;
  946. }
  947. },
  948. CHANGE_FORM_DATA(tableIndex, rowIndex, name, val) {
  949. this.$set(
  950. this.scaleData.klScaleParent[tableIndex].klScaleSaveGroup[rowIndex],
  951. name,
  952. val
  953. );
  954. },
  955. // 清空选项
  956. initializationTableData(e, tableIndex) {
  957. this.$set(this.scaleData.klScaleParent[tableIndex], "klScaleSaveGroup", [
  958. { ...defaultDate }
  959. ]);
  960. },
  961. resizeTable() {
  962. this.$refs.ScaleTable.forEach((item) => {
  963. item.resizeTable();
  964. });
  965. this.$refs.ScoreResultsTable &&
  966. this.$refs.ScoreResultsTable.resizeTable();
  967. // this.$refs.ScaleTable.resizeTable();
  968. }
  969. },
  970. watch: {
  971. scaleData: {
  972. handler() {
  973. console.log("监听");
  974. },
  975. deep: true
  976. },
  977. childScaleData() {
  978. // console.log("child Mounted");
  979. // console.dir(this.childScaleData);
  980. if (this.childScaleData) {
  981. // 修改时的默认数据赋值 逻辑:遍历接口数据 赋值给结构体数据
  982. let obj = {
  983. ...this.data,
  984. klScaleParent: []
  985. };
  986. delete obj.klScaleDetail;
  987. let scoreresults = {
  988. scoreresultsdatas: []
  989. };
  990. this.childScaleData.klScaleDetail.forEach((table, tableIndex) => {
  991. console.log("?????");
  992. if (table.textType === 13) {
  993. // 计算结果
  994. scoreresults.scoreresultsdatas = table.subMenuList[0].subMenuList;
  995. scoreresults.scoreresultsdatas.forEach((item) => {
  996. item.content = JSON.parse(item.content);
  997. });
  998. console.log(
  999. "scoreresults.scoreresultsdatas",
  1000. scoreresults.scoreresultsdatas
  1001. );
  1002. } else if (table.textType === 11) {
  1003. // 选项
  1004. obj.klScaleParent.push({
  1005. constant: table.constant,
  1006. content: table.content,
  1007. factor: table.factor,
  1008. orderNo: table.orderNo,
  1009. remark: table.remark,
  1010. resultType: table.resultType,
  1011. ruleCode: table.ruleCode,
  1012. score: table.score,
  1013. status: table.status,
  1014. textType: table.textType,
  1015. klScaleSaveGroup: []
  1016. });
  1017. table.subMenuList.forEach((issueItem, issueIndex) => {
  1018. const arr = issueItem.subMenuList.map(
  1019. (optionItem, optionIndex) => {
  1020. return {
  1021. groupId: issueItem.groupNum,
  1022. issueId: optionItem.parentId,
  1023. two_constant: issueItem.constant,
  1024. two_content: issueItem.content,
  1025. two_factor: issueItem.factor,
  1026. two_orderNo: issueItem.orderNo,
  1027. two_remark: issueItem.remark,
  1028. two_resultType: issueItem.resultType,
  1029. two_ruleCode: issueItem.ruleCode,
  1030. two_score: issueItem.score,
  1031. two_selectType: issueItem.selectType,
  1032. two_status: issueItem.status,
  1033. two_textType: issueItem.textType,
  1034. content: optionItem.content,
  1035. orderNo: optionItem.orderNo,
  1036. pushInfo: optionItem.pushInfo,
  1037. remark: optionItem.remark,
  1038. result: optionItem.result,
  1039. ruleCode: optionItem.ruleCode,
  1040. score: optionItem.score,
  1041. status: optionItem.status,
  1042. textType: optionItem.textType
  1043. };
  1044. }
  1045. );
  1046. obj.klScaleParent[tableIndex].klScaleSaveGroup.push(...arr);
  1047. });
  1048. } else if (table.textType === 12) {
  1049. // 文本
  1050. obj.klScaleParent.push({
  1051. constant: table.constant,
  1052. content: table.content,
  1053. factor: table.factor,
  1054. orderNo: table.orderNo,
  1055. remark: table.remark,
  1056. resultType: table.resultType,
  1057. ruleCode: table.ruleCode,
  1058. score: table.score,
  1059. status: table.status,
  1060. textType: table.textType,
  1061. klScaleSaveGroup: [
  1062. {
  1063. two_constant: null,
  1064. two_content: null,
  1065. two_factor: null,
  1066. two_orderNo: null,
  1067. two_remark: null,
  1068. two_resultType: null,
  1069. two_ruleCode: null,
  1070. two_score: null,
  1071. two_selectType: null,
  1072. two_status: null,
  1073. two_textType: null,
  1074. content: table.subMenuList[0].content,
  1075. orderNo: table.subMenuList[0].groupNum,
  1076. pushInfo: table.subMenuList[0].pushInfo,
  1077. remark: table.subMenuList[0].remark,
  1078. result: table.subMenuList[0].result,
  1079. ruleCode: table.subMenuList[0].ruleCode,
  1080. score: table.subMenuList[0].score,
  1081. status: table.subMenuList[0].status,
  1082. textType: table.subMenuList[0].textType
  1083. }
  1084. ]
  1085. });
  1086. }
  1087. });
  1088. // console.dir(obj);
  1089. // console.dir(scoreresults);
  1090. this.scaleData = obj;
  1091. if (scoreresults.scoreresultsdatas.length)
  1092. this.scoreresults = scoreresults;
  1093. }
  1094. }
  1095. },
  1096. computed: {
  1097. // 判断是否需要得分结果
  1098. ScoreResultsShow() {
  1099. const index = this.scaleData.klScaleParent.findIndex(
  1100. (item) => item.resultType === 1
  1101. );
  1102. if (index === -1) {
  1103. return false;
  1104. }
  1105. return true;
  1106. }
  1107. },
  1108. created() {
  1109. this.editorOption.modules.toolbar.container =
  1110. this.toolbars[this.toolbarMode];
  1111. },
  1112. mounted() {}
  1113. };
  1114. </script>