create.vue 73 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047204820492050205120522053205420552056205720582059206020612062206320642065206620672068206920702071207220732074207520762077207820792080208120822083208420852086208720882089209020912092209320942095209620972098209921002101210221032104210521062107210821092110211121122113211421152116211721182119212021212122212321242125212621272128212921302131213221332134213521362137213821392140214121422143214421452146214721482149215021512152215321542155215621572158215921602161216221632164216521662167216821692170217121722173217421752176217721782179218021812182218321842185218621872188218921902191219221932194219521962197219821992200220122022203220422052206220722082209221022112212221322142215221622172218221922202221222222232224222522262227222822292230223122322233223422352236223722382239224022412242224322442245224622472248224922502251225222532254225522562257225822592260226122622263226422652266226722682269227022712272227322742275227622772278227922802281228222832284228522862287228822892290229122922293229422952296229722982299230023012302230323042305230623072308230923102311231223132314231523162317231823192320232123222323232423252326232723282329233023312332233323342335233623372338233923402341234223432344234523462347234823492350235123522353235423552356235723582359236023612362236323642365236623672368236923702371
  1. <template>
  2. <div class="doc-container">
  3. <div class="editor-top">
  4. <div class="left">
  5. <div class="doc" v-if="type == 'document'">
  6. <span>当前打开文档:</span
  7. >{{ docAttr.title == "" ? "新建文档" : docAttr.title }}
  8. </div>
  9. <div class="doc" v-else-if="type == 'module'">
  10. <span>当前打开模块:</span
  11. >{{ coms[0].name == "" ? "新建模块" : coms[0].name }}
  12. </div>
  13. <div class="doc" v-else>
  14. <span>当前打开模版:</span
  15. >{{ docAttr.title == "" ? "新建模版" : docAttr.title }}
  16. </div>
  17. <div class="creator" v-if="userInfo != null">
  18. <span>创建者:</span>{{ userInfo && userInfo.username }}
  19. </div>
  20. </div>
  21. <div class="right">
  22. <el-button
  23. type="primary"
  24. size="mini"
  25. @click="onSaveAs"
  26. v-if="
  27. type !== 'module' && type == 'document' && articleId == undefined
  28. "
  29. >保存文档</el-button
  30. ><!-- v-if="docAttr.id > 0" -->
  31. <el-button
  32. type="primary"
  33. size="mini"
  34. @click="renew"
  35. v-if="
  36. articleId !== undefined && type !== 'module' && type == 'document'
  37. "
  38. >更新文档</el-button
  39. >
  40. <!-- <el-popover
  41. placement="bottom"
  42. trigger="click"
  43. v-if="type !== 'module' && type !== 'document'"
  44. > -->
  45. <el-button
  46. type="primary"
  47. v-if="
  48. $store.state.user.name == 'admin' &&
  49. type !== 'module' &&
  50. type !== 'document' &&
  51. !articleId
  52. "
  53. @click="onSaveUpload"
  54. >保存</el-button
  55. >
  56. <el-button
  57. type="primary"
  58. v-if="
  59. $store.state.user.name == 'admin' &&
  60. type !== 'module' &&
  61. type !== 'document' &&
  62. articleId
  63. "
  64. @click="onUpload"
  65. >更新</el-button
  66. >
  67. <!-- <el-button
  68. slot="reference"
  69. type="primary"
  70. size="mini"
  71. style="margin: 0 10px"
  72. v-if="$store.state.user.name == 'admin'"
  73. >保存并更新模版</el-button
  74. >
  75. </el-popover> -->
  76. <!-- <el-button
  77. type="primary"
  78. size="mini"
  79. v-if="$store.state.user.name == 'admin'"
  80. @click="onSaveUpload"
  81. >保存并更新模版</el-button
  82. > -->
  83. <el-button
  84. type="primary"
  85. size="mini"
  86. v-if="type !== 'module' && type == 'document'"
  87. @click="onOpenView"
  88. >预览导出
  89. </el-button>
  90. <el-button type="primary" size="mini" @click="onClose">
  91. 关闭文档
  92. </el-button>
  93. </div>
  94. </div>
  95. <div class="editor-content">
  96. <div class="neary-doc">
  97. <div class="left-content">
  98. <!-- <div class="search">
  99. <el-input placeholder="搜索文档标题"></el-input>
  100. </div> -->
  101. <div class="new-article">
  102. <div v-if="showView == 0 && type !== 'module'">
  103. <el-collapse v-model="activeNames">
  104. <el-collapse-item
  105. title="最新文档"
  106. name="-1"
  107. v-if="type == 'document'"
  108. >
  109. <div
  110. v-for="(it, index) in articleList"
  111. draggable
  112. :key="it.id"
  113. :data-index="index"
  114. data-type="article"
  115. class="sub-menus"
  116. >
  117. <div
  118. @click="onLoadArticle(it.id)"
  119. :title="it.title"
  120. style="
  121. cursor: pointer;
  122. white-space: nowrap;
  123. overflow: hidden; /* 隐藏超出部分 */
  124. text-overflow: ellipsis; /* 显示省略号 */
  125. max-width: 100%;
  126. "
  127. >
  128. {{ it.title }}
  129. </div>
  130. </div>
  131. </el-collapse-item>
  132. <el-collapse-item
  133. title="模版列表"
  134. name="-2"
  135. v-if="showView == 0"
  136. >
  137. <div
  138. v-for="(it, index) in templateList"
  139. draggable
  140. :key="it.id"
  141. :data-index="index"
  142. data-type="article"
  143. class="sub-menus"
  144. >
  145. <div
  146. @click="onTemplateInfo(it.id)"
  147. :title="it.title"
  148. style="
  149. cursor: pointer;
  150. white-space: nowrap;
  151. overflow: hidden; /* 隐藏超出部分 */
  152. text-overflow: ellipsis; /* 显示省略号 */
  153. width: 100%;
  154. "
  155. >
  156. {{ it.title }}
  157. </div>
  158. </div>
  159. </el-collapse-item>
  160. </el-collapse>
  161. </div>
  162. <div v-if="showView == 1" class="scrollable-container">
  163. <!-- <el-collapse
  164. v-model="activeModel"
  165. :accordion="true"
  166. @change="handleItemClick"
  167. class="borderless-collapse"
  168. >
  169. <el-collapse-item
  170. v-for="(item, itemIndex) in categoryList"
  171. :key="itemIndex"
  172. :title="item.name"
  173. :name="item.id"
  174. >
  175. <el-collapse
  176. v-if="item.children && item.children.length"
  177. v-model="item.activeChildren"
  178. @change="handleItemVal"
  179. v-show="item.children"
  180. class="borderless-collapse"
  181. >
  182. <el-collapse-item
  183. v-for="(child, childIndex) in item.children"
  184. :key="childIndex"
  185. :title="child.name"
  186. :name="child.id"
  187. >
  188. <draggable
  189. v-model="child.dataList"
  190. :options="{
  191. group: { name: 'itxst', pull: 'clone' },
  192. sort: true,
  193. }"
  194. :disabled="type == 'module'"
  195. >
  196. <transition-group>
  197. <div
  198. class="sub-menus"
  199. v-for="(its, index) in child.dataList"
  200. :key="index"
  201. >
  202. <div>{{ its.name }}</div>
  203. </div>
  204. </transition-group>
  205. </draggable>
  206. </el-collapse-item>
  207. </el-collapse>
  208. <draggable
  209. v-model="item.dataList"
  210. :options="{
  211. group: { name: 'itxst', pull: 'clone' },
  212. sort: true,
  213. }"
  214. :disabled="type == 'module'"
  215. >
  216. <transition-group>
  217. <div
  218. class="sub-menus"
  219. v-for="(it, index) in item.dataList"
  220. :key="index"
  221. >
  222. <div>{{ it.name }}</div>
  223. </div>
  224. </transition-group>
  225. </draggable>
  226. </el-collapse-item>
  227. </el-collapse> -->
  228. <el-collapse
  229. v-model="activeModel"
  230. :accordion="true"
  231. @change="handleItemClick"
  232. class="borderless-collapse"
  233. >
  234. <el-collapse-item
  235. v-for="(item, itemIndex) in categoryList"
  236. :key="itemIndex"
  237. :title="item.name"
  238. :name="item.id"
  239. class="min-width-content"
  240. >
  241. <el-collapse
  242. v-if="item.children && item.children.length"
  243. v-model="item.activeChildren"
  244. @change="handleItemVal"
  245. v-show="item.children"
  246. class="borderless-collapse"
  247. >
  248. <el-collapse-item
  249. v-for="(child, childIndex) in item.children"
  250. :key="childIndex"
  251. :title="child.name"
  252. :name="child.id"
  253. class="min-width-content"
  254. >
  255. <el-collapse
  256. v-if="child.children && child.children.length"
  257. v-model="child.activeChildren"
  258. @change="handleChildItemVal"
  259. v-show="child.children"
  260. class="borderless-collapse"
  261. >
  262. <el-collapse-item
  263. v-for="(
  264. grandChild, grandChildIndex
  265. ) in child.children"
  266. :key="grandChildIndex"
  267. :title="grandChild.name"
  268. :name="grandChild.id"
  269. class="min-width-content"
  270. >
  271. <el-collapse
  272. v-if="
  273. grandChild.children && grandChild.children.length
  274. "
  275. v-model="grandChild.activeChildren"
  276. @change="handleGrandChildItemVal"
  277. v-show="grandChild.children"
  278. class="borderless-collapse"
  279. >
  280. <el-collapse-item
  281. v-for="(
  282. greatGrandChild, greatGrandChildIndex
  283. ) in grandChild.children"
  284. :key="greatGrandChildIndex"
  285. :title="greatGrandChild.name"
  286. :name="greatGrandChild.id"
  287. class="min-width-content"
  288. >
  289. <el-collapse
  290. v-if="
  291. greatGrandChild.children &&
  292. greatGrandChild.children.length
  293. "
  294. v-model="greatGrandChild.activeChildren"
  295. @change="handlegreatGrandChildItemVal"
  296. v-show="greatGrandChild.children"
  297. class="borderless-collapse"
  298. >
  299. <el-collapse-item
  300. v-for="(
  301. fiveChild, fiveIndex
  302. ) in greatGrandChild.children"
  303. :key="fiveIndex"
  304. :title="fiveChild.name"
  305. :name="fiveChild.id"
  306. class="min-width-content"
  307. >
  308. <draggable
  309. v-model="fiveChild.dataList"
  310. :options="{
  311. group: { name: 'itxst', pull: 'clone' },
  312. sort: true,
  313. }"
  314. :disabled="type === 'module'"
  315. >
  316. <transition-group>
  317. <div
  318. class="sub-menus min-width-content"
  319. v-for="(
  320. fiveIts, fiveIndex
  321. ) in fiveChild.dataList"
  322. :key="fiveIndex"
  323. >
  324. <div
  325. :title="fiveIts.name"
  326. style="
  327. cursor: move;
  328. white-space: nowrap;
  329. overflow: hidden; /* 隐藏超出部分 */
  330. text-overflow: ellipsis; /* 显示省略号 */
  331. width: 100%;
  332. "
  333. >
  334. {{ fiveIts.name }}
  335. </div>
  336. </div>
  337. </transition-group>
  338. </draggable>
  339. </el-collapse-item>
  340. </el-collapse>
  341. <draggable
  342. v-model="greatGrandChild.dataList"
  343. :options="{
  344. group: { name: 'itxst', pull: 'clone' },
  345. sort: true,
  346. }"
  347. :disabled="type == 'module'"
  348. >
  349. <transition-group>
  350. <div
  351. class="sub-menus min-width-content"
  352. v-for="(
  353. its, index
  354. ) in greatGrandChild.dataList"
  355. :key="index"
  356. >
  357. <div
  358. :title="its.name"
  359. style="
  360. cursor: move;
  361. white-space: nowrap;
  362. overflow: hidden; /* 隐藏超出部分 */
  363. text-overflow: ellipsis; /* 显示省略号 */
  364. width: 100%;
  365. "
  366. >
  367. {{ its.name }}
  368. </div>
  369. </div>
  370. </transition-group>
  371. </draggable>
  372. </el-collapse-item>
  373. </el-collapse>
  374. <draggable
  375. v-model="grandChild.dataList"
  376. :options="{
  377. group: { name: 'itxst', pull: 'clone' },
  378. sort: true,
  379. }"
  380. :disabled="type == 'module'"
  381. >
  382. <transition-group>
  383. <div
  384. class="sub-menus min-width-content"
  385. v-for="(it, index) in grandChild.dataList"
  386. :key="index"
  387. >
  388. <div
  389. :title="it.name"
  390. style="
  391. cursor: move;
  392. white-space: nowrap;
  393. overflow: hidden; /* 隐藏超出部分 */
  394. text-overflow: ellipsis; /* 显示省略号 */
  395. width: 100%;
  396. "
  397. >
  398. {{ it.name }}
  399. </div>
  400. </div>
  401. </transition-group>
  402. </draggable>
  403. </el-collapse-item>
  404. </el-collapse>
  405. <draggable
  406. v-model="child.dataList"
  407. :options="{
  408. group: { name: 'itxst', pull: 'clone' },
  409. sort: true,
  410. }"
  411. :disabled="type == 'module'"
  412. >
  413. <transition-group>
  414. <div
  415. class="sub-menus min-width-content"
  416. v-for="(it, index) in child.dataList"
  417. :key="index"
  418. >
  419. <div
  420. :title="it.name"
  421. style="
  422. cursor: move;
  423. white-space: nowrap;
  424. overflow: hidden; /* 隐藏超出部分 */
  425. text-overflow: ellipsis; /* 显示省略号 */
  426. width: 100%;
  427. "
  428. >
  429. {{ it.name }}
  430. </div>
  431. </div>
  432. </transition-group>
  433. </draggable>
  434. </el-collapse-item>
  435. </el-collapse>
  436. <draggable
  437. v-model="item.dataList"
  438. :options="{
  439. group: { name: 'itxst', pull: 'clone' },
  440. sort: true,
  441. }"
  442. :disabled="type == 'module'"
  443. >
  444. <transition-group>
  445. <div
  446. class="sub-menus min-width-content"
  447. v-for="(it, index) in item.dataList"
  448. :key="index"
  449. >
  450. <div
  451. :title="it.name"
  452. style="
  453. cursor: move;
  454. white-space: nowrap;
  455. overflow: hidden; /* 隐藏超出部分 */
  456. text-overflow: ellipsis; /* 显示省略号 */
  457. width: 100%;
  458. "
  459. >
  460. {{ it.name }}
  461. </div>
  462. </div>
  463. </transition-group>
  464. </draggable>
  465. </el-collapse-item>
  466. </el-collapse>
  467. </div>
  468. </div>
  469. </div>
  470. <div class="right-sidebarew">
  471. <div
  472. v-if="type !== 'module'"
  473. class="sidebar-item"
  474. :class="showView == 0 ? 'active-item' : ''"
  475. @click="viewDocument"
  476. >
  477. <span v-if="type == 'document'">查看文档</span>
  478. <span v-else>查看模版</span>
  479. </div>
  480. <div
  481. v-if="type !== 'document'"
  482. class="sidebar-item"
  483. :class="showView == 1 ? 'active-item' : ''"
  484. @click="viewModule"
  485. >
  486. 模块列表
  487. </div>
  488. </div>
  489. </div>
  490. <div class="editor-main">
  491. <div class="menus-box">
  492. <menus
  493. @onEvents="onInsert"
  494. @onVariable="uptadeVariable"
  495. :comArr="coms"
  496. ></menus>
  497. </div>
  498. <div
  499. class="editor-box"
  500. ref="tabHtml"
  501. v-loading="loading"
  502. element-loading-text="加载中..."
  503. element-loading-spinner="el-icon-loading"
  504. >
  505. <editor
  506. :coms="coms"
  507. :comIndex="comIndex"
  508. :isAdmin="isAdmin"
  509. :templateCate="categoryList"
  510. :insertCmd="insertCmd"
  511. @onSetActiveIndex="onSetActiveIndex"
  512. @onInsert="onInsert"
  513. @onLoadArticle="onLoadArticle"
  514. @onRebuild="onRebuild"
  515. @onDelete="onRemove"
  516. @onSetComs="onSetComs"
  517. ></editor>
  518. </div>
  519. </div>
  520. <div class="editor-option">
  521. <div class="editor-menu">
  522. <div
  523. v-if="type !== 'module' && type !== 'document'"
  524. class="item"
  525. @click="onSetActiveIndexs(3)"
  526. :class="docuComIndex == 3 ? 'active-item' : ''"
  527. >
  528. <span class="name">模版属性</span>
  529. </div>
  530. <div
  531. v-if="type !== 'module'"
  532. class="item"
  533. @click="onSetActiveIndex(9998)"
  534. :class="comIndex == 9998 ? 'active-item' : ''"
  535. >
  536. <span class="name">模块管理</span>
  537. </div>
  538. <div
  539. class="item"
  540. @click="onCatalogIndex(9997)"
  541. :class="catalogIndex == 9997 ? 'active-item' : ''"
  542. >
  543. <span class="name">目录信息</span>
  544. </div>
  545. <div
  546. class="item"
  547. @click="onAttributeIndex(1)"
  548. :class="AttributeIndex == 1 ? 'active-item' : ''"
  549. >
  550. <span class="name">属性变量</span>
  551. </div>
  552. </div>
  553. <template
  554. v-if="docuComIndex == 3 && type !== 'module' && type !== 'document'"
  555. >
  556. <docAttr :attrs="docAttr"></docAttr>
  557. </template>
  558. <template v-if="comIndex == 9998">
  559. <comList
  560. :coms="coms"
  561. @onRemove="onRemove"
  562. @onSetActive="onSetActiveIndex"
  563. @onRebuild="onRebuild"
  564. ></comList>
  565. </template>
  566. <template v-if="catalogIndex == 9997">
  567. <Directory :coms="coms" />
  568. </template>
  569. <!-- comIndex != 9999 && comIndex != 9998 && comIndex != 9997 AttributeIndex==1-->
  570. <!-- <template
  571. v-if="
  572. comIndex != 9999 &&
  573. comIndex != 9998 &&
  574. catalogIndex != 9997 &&
  575. AttributeIndex != 1
  576. "
  577. >
  578. <Attribute
  579. :com="coms[comIndex]"
  580. @onRefresh="initCategoryList"
  581. ></Attribute>
  582. </template> -->
  583. <template v-if="AttributeIndex == 1">
  584. <attributeVar
  585. :com="coms[comIndex]"
  586. @onRefresh="initCategoryList"
  587. ></attributeVar>
  588. </template>
  589. <!-- <Directory :coms="coms" /> -->
  590. </div>
  591. </div>
  592. <el-dialog
  593. :visible.sync="showViewForm"
  594. :close-on-click-modal="false"
  595. append-to-body
  596. v-el-drag-dialog
  597. width="850px"
  598. custom-class="prod-verify"
  599. title="文档预览"
  600. >
  601. <ViewForm :coms="coms" :docAttr="docAttr"></ViewForm>
  602. </el-dialog>
  603. <el-dialog
  604. :visible.sync="showProductAttr"
  605. append-to-body
  606. v-el-drag-dialog
  607. :close-on-click-modal="false"
  608. width="850px"
  609. custom-class="prod-verify"
  610. title="插入产品属性"
  611. >
  612. <ProductAttr
  613. :docAttr="docAttr"
  614. @onInsertProductAttr="onInsertProductAttr"
  615. ></ProductAttr>
  616. </el-dialog>
  617. <el-dialog
  618. :visible.sync="docVisible"
  619. append-to-body
  620. v-el-drag-dialog
  621. :close-on-click-modal="false"
  622. width="500px"
  623. custom-class="prod-verify"
  624. title="文档信息"
  625. >
  626. <el-form
  627. :model="docForm"
  628. :rules="docRules"
  629. ref="docRef"
  630. label-position="left"
  631. label-width="100"
  632. >
  633. <el-form-item label="文档名称:" prop="title">
  634. <el-input
  635. v-model="docForm.title"
  636. style="width: 60%"
  637. class="input-item"
  638. placeholder="请填写文档名称"
  639. :disabled="docAttr.id > 0"
  640. />
  641. </el-form-item>
  642. <el-form-item label="文档分类:" prop="category_id">
  643. <el-select
  644. v-model="docForm.category_id"
  645. style="width: 60%"
  646. placeholder="请选择所属分类"
  647. :disabled="docAttr.id > 0"
  648. >
  649. <el-option
  650. v-for="(item, index) in articleCategoryList"
  651. :key="index"
  652. :label="item.name"
  653. :value="item.id"
  654. />
  655. </el-select>
  656. </el-form-item>
  657. <el-form-item label="创建人:">
  658. {{ userInfo && userInfo.username }}
  659. </el-form-item>
  660. </el-form>
  661. <span slot="footer" class="dialog-footer">
  662. <el-button @click="closeDoc">取 消</el-button>
  663. <el-button type="primary" @click="submitDoc">确 定</el-button>
  664. </span>
  665. </el-dialog>
  666. </div>
  667. </template>
  668. <script>
  669. import { findData } from "@/api/sourceData";
  670. import utils from "@/utils/fun"; // 方法类
  671. import { searchDocument, pageDocument } from "@/api/document";
  672. import menus from "./com/menus";
  673. import editor from "./com/editor";
  674. import Attribute from "./com/components/Attribute";
  675. import attributeVar from "./com/components/Attribute/attributeVar/index.vue";
  676. import ProductAttr from "./com/components/ProductAttr";
  677. import {
  678. searchTemplateCategory,
  679. searchTemplate,
  680. getTemplateInfo,
  681. getAllCategory,
  682. } from "@/api/template";
  683. import docAttr from "./com/components/Attribute/docAttr";
  684. import comList from "./com/components/Attribute/comList";
  685. import Directory from "./com/components/Attribute/Directory";
  686. import { getCurrentUserInfo } from "@/api/api";
  687. import {
  688. createDocument,
  689. updateDocument,
  690. getDocumentInfo,
  691. exportDocument,
  692. searchDocumentCategory,
  693. } from "@/api/document";
  694. import ViewForm from "./com/view";
  695. import elDragDialog from "@/directive/el-drag-dialog";
  696. import draggable from "vuedraggable";
  697. import htmlDocx from "html-docx-js/dist/html-docx";
  698. import { searchFormula } from "@/api/formula";
  699. import axios from "axios";
  700. import settings from "@/settings";
  701. // import htmlDocx from "htmlDocx";
  702. export default {
  703. name: "create",
  704. components: {
  705. menus,
  706. editor,
  707. Attribute,
  708. comList,
  709. docAttr,
  710. ViewForm,
  711. ProductAttr,
  712. Directory,
  713. draggable,
  714. attributeVar,
  715. },
  716. directives: {
  717. elDragDialog,
  718. },
  719. data() {
  720. return {
  721. activeNames: "-1",
  722. nestedActiveNames: [],
  723. articleList: [],
  724. activeModel: "",
  725. templateList: [],
  726. categoryList: [],
  727. //组件相关
  728. coms: [],
  729. comIndex: 9999, //当前组件索引
  730. showProductAttr: false,
  731. comList: [],
  732. //文档属性
  733. docAttr: {
  734. id: 0,
  735. category_id: "",
  736. title: "",
  737. content: "",
  738. status: 5,
  739. links: "",
  740. linkProduct: [],
  741. linkProject: [],
  742. projects: "",
  743. document_type: "",
  744. },
  745. insertCmd: null,
  746. showViewForm: false,
  747. isAdmin: 2, //1是管理员,2非管理员
  748. //当前选中表格
  749. tabExt: {
  750. row: 0,
  751. col: 0,
  752. },
  753. userInfo: null,
  754. articleId: 0,
  755. loading: false, // 增加 loading 状态
  756. showView: 0, //查看 文档/模块
  757. childrenList: "",
  758. value: [],
  759. AttributeIndex: 0,
  760. catalogIndex: 0, //目录信息
  761. docuComIndex: 3,
  762. type: "",
  763. docVisible: false,
  764. docForm: {
  765. title: "",
  766. category_id: "",
  767. },
  768. docRules: {
  769. title: [{ required: true, message: "请输文档名称", trigger: "blur" }],
  770. category_id: [
  771. { required: true, message: "请选择文档分类", trigger: "change" },
  772. ],
  773. },
  774. articleCategoryList: [],
  775. };
  776. },
  777. watch: {
  778. coms: {
  779. handler(newComs, oldComs) {
  780. this.updateAttrs(newComs, oldComs);
  781. },
  782. immediate: true, //立即执行
  783. deep: true,
  784. },
  785. articleId: {
  786. handler(val) {
  787. if (val == null || val == undefined || val <= 0) return;
  788. if (this.$route.query.type == "document") {
  789. this.loadArticle(val);
  790. } else {
  791. this.onTemplateInfo(val);
  792. }
  793. //
  794. },
  795. immediate: true,
  796. deep: true,
  797. },
  798. },
  799. async mounted() {
  800. console.log(this.$store.state.user);
  801. this.articleId = this.$route.query.articleId;
  802. this.type = this.$route.query.type;
  803. if (this.type == "module") {
  804. this.showView = 1;
  805. }
  806. this.searchArticle();
  807. await this.initCategoryList();
  808. await this.initCurrentUser();
  809. let templateId = this.$route.query.templateId;
  810. if (templateId > 0) {
  811. this.loadTemplateInfo(templateId);
  812. }
  813. this.isAdmin = this.userInfo ? this.userInfo.roleInfo.is_admin : 2;
  814. this.initArticleCategoryList();
  815. if (this.type !== "module" && this.type !== "document") {
  816. document.title = "新建模版-" + settings.title;
  817. }
  818. if (
  819. this.type !== "module" &&
  820. this.type !== "document" &&
  821. this.articleId !== undefined
  822. ) {
  823. document.title = this.docAttr.title + settings.title;
  824. }
  825. this.$nextTick(() => {
  826. const arrows = document.querySelectorAll(".el-collapse-item__arrow");
  827. arrows.forEach((arrow) => {
  828. arrow.style.margin = "0";
  829. });
  830. });
  831. },
  832. methods: {
  833. handleItemVal(value) {
  834. this.$forceUpdate();
  835. this.loadChildren(value);
  836. },
  837. handleChildItemClick(child) {
  838. if (!child.children) {
  839. this.loadChildren(child);
  840. }
  841. },
  842. handleChildItemVal(value) {
  843. this.$forceUpdate();
  844. this.loadChildren(value);
  845. },
  846. handleGrandChildItemClick(grandChild) {
  847. if (!grandChild.children) {
  848. this.loadChildren(grandChild);
  849. }
  850. },
  851. handleGrandChildItemVal(value) {
  852. this.loadChildren(value);
  853. this.$forceUpdate();
  854. },
  855. handlegreatGrandChildItemVal(greatGrandChild) {
  856. this.loadChildren(greatGrandChild);
  857. this.$forceUpdate();
  858. },
  859. async loadChildren(category) {
  860. const category_id = category[category.length - 1];
  861. try {
  862. const res = await searchTemplateCategory({ parent_id: category_id });
  863. if (res.status != 200 || res.data.length == 0) return;
  864. const newChildren = res.data;
  865. for (let i = 0; i < newChildren.length; i++) {
  866. newChildren[i].dataList = await this.getTemplateList(
  867. newChildren[i].id
  868. );
  869. }
  870. this.insertChildrenById(this.categoryList, category_id, newChildren);
  871. console.log(this.categoryList);
  872. this.$forceUpdate(); // Force Vue to re-render the component
  873. } catch (error) {
  874. console.error("Error fetching template categories:", error);
  875. }
  876. },
  877. insertChildrenById(list, id, newChildren) {
  878. for (let item of list) {
  879. if (item.id === id) {
  880. this.$set(item, "children", newChildren); // Use Vue.set to ensure reactivity
  881. return true; // Stop searching once the item is found
  882. }
  883. if (item.children && item.children.length > 0) {
  884. const found = this.insertChildrenById(item.children, id, newChildren);
  885. if (found) return true; // Stop searching if the item is found in deeper levels
  886. }
  887. }
  888. return false; // Continue searching
  889. },
  890. /* 取消新增 */
  891. closeDoc() {
  892. this.docVisible = false;
  893. this.docForm = {
  894. title: "",
  895. category_id: "",
  896. };
  897. },
  898. /* 确定新增模块*/
  899. submitDoc() {
  900. this.$refs.docRef.validate((valid) => {
  901. if (valid) {
  902. this.docAttr.title = this.docForm.title;
  903. this.docAttr.category_id = this.docForm.category_id;
  904. this.onSave();
  905. }
  906. });
  907. },
  908. //加载文档分类
  909. initArticleCategoryList() {
  910. let _this = this;
  911. searchDocumentCategory({ page: 1, pageSize: 99, status: 5 }).then(
  912. (res) => {
  913. if (res.status != 200) return;
  914. _this.articleCategoryList = res.data.dataList;
  915. }
  916. );
  917. },
  918. updateAttrs(newComs, oldComs) {
  919. console.log(newComs);
  920. newComs.forEach((newCom, comIndex) => {
  921. const oldCom = oldComs[comIndex];
  922. if (oldCom) {
  923. newCom.attrs.forEach((newAttr, attrIndex) => {
  924. const oldAttr = oldCom.attrs[attrIndex];
  925. if (oldAttr && newAttr.content !== oldAttr.content) {
  926. // 内容发生变化,进行全局更新
  927. this.updateGlobalAttr(newAttr.name, newAttr.content);
  928. }
  929. });
  930. }
  931. });
  932. },
  933. updateGlobalAttr(attrId, newContent) {
  934. // 遍历所有组件,更新匹配的属性
  935. this.coms.forEach((com) => {
  936. com.attrs.forEach((attr) => {
  937. // 只更新非 variableNull 类型的属性
  938. if (attr.name === attrId && attr.type !== "variableNull") {
  939. attr.content = newContent;
  940. }
  941. });
  942. // 如果是文本区域,更新内容中的占位符
  943. if (com.type === "TextArea") {
  944. com.content = com.content.replace(
  945. new RegExp(`{{${attrId}}}`, "g"),
  946. (match) => {
  947. const attr = com.attrs.find((a) => a.id === attrId);
  948. if (attr && attr.type !== "variableNull") {
  949. return newContent;
  950. }
  951. return match; // 保留 variableNull 类型的原始占位符
  952. }
  953. );
  954. }
  955. });
  956. // 触发视图更新
  957. this.replaceData(this.coms);
  958. this.$forceUpdate();
  959. },
  960. async replaceData(data) {
  961. for (let item of this.coms) {
  962. for (let el of item.attrs) {
  963. let attrId = el.id;
  964. if (el.type === "formual") {
  965. try {
  966. let formual = await this.analysisFormual(el);
  967. formual = await this.getRemote(formual);
  968. el.content = eval(formual);
  969. } catch (error) {
  970. console.error("处理公式时出错:", error);
  971. }
  972. } else if (el.type === "variableNull") {
  973. // 保留 variableNull 类型的原始内容
  974. el.content = el.content || "请输入";
  975. }
  976. }
  977. }
  978. return data;
  979. },
  980. //分析公式
  981. async analysisFormual(attrs) {
  982. let _this = this;
  983. // console.log("开始分析公式:", attrs.formula);
  984. var pattern = /(\[.*?\]){3}/;
  985. var formual = attrs.formula;
  986. var reg = new RegExp(pattern);
  987. while (true) {
  988. var items = formual.match(reg);
  989. if (items == null) break;
  990. let itemName = items[0];
  991. // console.log("处理项:", itemName);
  992. try {
  993. let data = await _this.getFormualData(itemName);
  994. // console.log(`获取到的数据: ${itemName} = ${data}`);
  995. if (data === null || data === undefined || isNaN(data)) {
  996. console.warn(`获取到的数据无效: ${itemName}`);
  997. formual = formual.replace(itemName, "(0)");
  998. } else {
  999. formual = formual.replace(itemName, `(${parseFloat(data)})`);
  1000. }
  1001. } catch (error) {
  1002. console.error(`处理 ${itemName} 时出错:`, error);
  1003. formual = formual.replace(itemName, "(0)");
  1004. }
  1005. }
  1006. // console.log("分析后的公式:", formual);
  1007. return formual;
  1008. },
  1009. async getFormualData(formualItem) {
  1010. let _this = this;
  1011. // console.log("开始获取公式数据:", formualItem);
  1012. var pattern = /\[(.*?)\]\[(.*?)\]\[(.*?)\]/;
  1013. var reg = new RegExp(pattern);
  1014. let items = formualItem.match(reg);
  1015. // console.log("解析结果:", items);
  1016. let calResult = 0;
  1017. if (items && items[1] == "T") {
  1018. calResult = await _this.getModuleData(items[2], items[3]);
  1019. } else {
  1020. console.warn("无法解析公式项:", formualItem);
  1021. }
  1022. // console.log("计算结果:", calResult);
  1023. return calResult;
  1024. },
  1025. //获取本地文档模块数据
  1026. async getModuleData(code, attrName) {
  1027. let _this = this;
  1028. // console.log(`尝试获取模块数据: code=${code}, attrName=${attrName}`);
  1029. // console.log("当前 coms:", _this.coms);
  1030. let item = _this.coms.filter((o) => o.name == code);
  1031. // console.log(`找到的模块:`, item);
  1032. if (item.length > 0) {
  1033. let attr = item[0].attrs.filter((o) => o.name == attrName);
  1034. // console.log(`找到的属性:`, attr);
  1035. if (attr.length > 0) {
  1036. // console.log(`返回的值:`, attr[0].content);
  1037. return parseFloat(attr[0].content);
  1038. }
  1039. }
  1040. // console.log("未找到匹配的模块或属性,返回 0");
  1041. return 0;
  1042. },
  1043. async getRemote(formual) {
  1044. let _this = this;
  1045. var pattern = /\[(.*?)\]\[(.*?)\]\[(.*?)\]\[(.*?)\]/;
  1046. var reg = new RegExp(pattern);
  1047. while (true) {
  1048. let items = formual.match(reg);
  1049. if (items == null) break;
  1050. if (items[1] == "R") {
  1051. //表示获取远程数据
  1052. var dataIndex = items[4];
  1053. dataIndex = items[4].split(",");
  1054. let calResult = await _this.getRemoteData(
  1055. items[2],
  1056. items[3],
  1057. dataIndex[0],
  1058. dataIndex[1]
  1059. );
  1060. let itemName = items[0];
  1061. // 检查calResult是否为数字
  1062. if (!isNaN(calResult)) {
  1063. formual = formual.replace(
  1064. itemName,
  1065. "(" + parseFloat(calResult) + ")"
  1066. );
  1067. } else {
  1068. formual = formual.replace(itemName, `"${calResult}"`);
  1069. }
  1070. formual = formual.replace(
  1071. itemName,
  1072. "(" + parseFloat(calResult) + ")"
  1073. );
  1074. }
  1075. }
  1076. return formual;
  1077. },
  1078. async getRemoteData(code, sheet, row, col) {
  1079. let _this = this;
  1080. let result = 0;
  1081. let par = {
  1082. code: code,
  1083. sheetName: sheet,
  1084. row: row,
  1085. col: col,
  1086. };
  1087. /* if (!this.isEditing) {
  1088. this.loading = true;
  1089. this.progress = 0;
  1090. try {
  1091. const updateProgress = setInterval(() => {
  1092. if (this.progress < 90) {
  1093. this.progress += 10;
  1094. }
  1095. }, 100);
  1096. let res = await findData(par);
  1097. if (res.status == 200) {
  1098. result = res.data.result;
  1099. }
  1100. this.progress = 100;
  1101. clearInterval(updateProgress);
  1102. } catch (error) {
  1103. console.error("Error fetching remote data:", error);
  1104. } finally {
  1105. setTimeout(() => {
  1106. this.loading = false;
  1107. this.progress = 0;
  1108. }, 1000);
  1109. }
  1110. } else { */
  1111. // 如果正在编辑,直接获取数据而不显示进度条
  1112. try {
  1113. let res = await findData(par);
  1114. if (res.status == 200) {
  1115. result = res.data.result;
  1116. // 添加数据类型检查和转换
  1117. if (typeof result === "string" && !isNaN(result)) {
  1118. result = parseFloat(result);
  1119. }
  1120. }
  1121. } catch (error) {
  1122. console.error("获取远程数据错误:", error);
  1123. }
  1124. /* } */
  1125. return result;
  1126. },
  1127. /*
  1128. handleItemVal(value) {
  1129. console.log(value);
  1130. this.$forceUpdate();
  1131. }, */
  1132. async handleItemClick(item) {
  1133. const category = this.categoryList.find((cat) => cat.id === item);
  1134. if (!category) return;
  1135. if (!category.children) {
  1136. try {
  1137. const res = await searchTemplateCategory({ parent_id: item });
  1138. if (res.status != 200 || res.data.length == 0) return;
  1139. category.children = res.data;
  1140. for (let i = 0; i < category.children.length; i++) {
  1141. category.children[i].dataList = await this.getTemplateList(
  1142. category.children[i].id
  1143. );
  1144. }
  1145. } catch (error) {
  1146. console.error("Error fetching template categories:", error);
  1147. }
  1148. }
  1149. // 触发视图更新
  1150. this.$set(category, "activeChildren", category.activeChildren || []);
  1151. },
  1152. /* 切换标签 */
  1153. viewDocument() {
  1154. this.showView = 0;
  1155. },
  1156. viewModule() {
  1157. this.showView = 1;
  1158. },
  1159. /* 更新变量 */
  1160. /* uptadeVariable(value) {
  1161. for (const item of this.coms) {
  1162. for (const el of item.attrs) {
  1163. if (el.type === "variable") {
  1164. if (el.data.id == value.id) {
  1165. el.content = value.value;
  1166. el.data = value;
  1167. }
  1168. } else if (el.type === "constant") {
  1169. if (el.data.id == value.id) {
  1170. el.content = value.value;
  1171. el.data = value;
  1172. }
  1173. }
  1174. }
  1175. }
  1176. } */
  1177. uptadeVariable(value) {
  1178. const { id, value: newValue } = value;
  1179. this.coms.forEach((item) => {
  1180. item.attrs.forEach((el) => {
  1181. if (
  1182. (el.type === "variable" || el.type === "constant") &&
  1183. el.data.id === id
  1184. ) {
  1185. el.content = newValue;
  1186. el.data = value;
  1187. }
  1188. });
  1189. });
  1190. },
  1191. /* 更新检索内容 */
  1192. async uptadeSearch() {
  1193. for (const item of this.coms) {
  1194. for (const el of item.attrs) {
  1195. if (el.type === "ai") {
  1196. // await this.retrieval(el);
  1197. }
  1198. }
  1199. }
  1200. },
  1201. /* 初始化检索 */
  1202. async retrieval(el) {
  1203. this.loading = true; // 开始加载动画
  1204. try {
  1205. const response = await axios.post(
  1206. "http://58.246.234.210:7860/api/v1/run/3f84a841-cefd-44b3-9555-568cc3b6c2d2?stream=false",
  1207. {
  1208. input_value: el.search,
  1209. output_type: "chat",
  1210. input_type: "chat",
  1211. tweaks: {
  1212. "ChatInput-em6qC": {},
  1213. "ParseData-yO3YQ": {},
  1214. "Prompt-Wj75b": {},
  1215. "ChatOutput-zy9na": {},
  1216. "SplitText-O1knk": {},
  1217. "File-4j6Zd": {},
  1218. "OllamaEmbeddings-xbYXX": {},
  1219. "Chroma-OIejP": {},
  1220. "OllamaModel-04mEO": {},
  1221. "OllamaEmbeddings-UGvLP": {},
  1222. "Chroma-HzukO": {},
  1223. },
  1224. },
  1225. {
  1226. headers: {
  1227. "Content-Type": "application/json",
  1228. },
  1229. }
  1230. );
  1231. if (response.status === 200) {
  1232. // 假设返回的数据在 response.data.outputs[0].outputs[0].results.message.data.text 中
  1233. const resultText =
  1234. response.data.outputs[0].outputs[0].results.message.data.text;
  1235. // 将搜索词和生成的内容存储在 searchResult 对象中
  1236. el.content = resultText; // 重新赋值给原数组的对应 content
  1237. }
  1238. } catch (error) {
  1239. console.error("Error during retrieval:", error);
  1240. this.$message.error("检索失败,请稍后重试");
  1241. } finally {
  1242. this.loading = false; // 结束加载动画
  1243. }
  1244. },
  1245. async loadTemplateInfo(id) {
  1246. try {
  1247. // 获取模板信息
  1248. const { data } = await getTemplateInfo({ id });
  1249. // 设置默认值
  1250. if (!data.attrs || !data.type) {
  1251. Object.assign(data, {
  1252. attrs: "[]",
  1253. content: "请填写内容",
  1254. lay_id: "textArea",
  1255. type: "TextArea",
  1256. });
  1257. }
  1258. // 设置文档标题
  1259. document.title = data.name
  1260. ? `${data.name}-${settings.title}`
  1261. : "新建模块-" + settings.title;
  1262. // 解析属性
  1263. data.attrs = JSON.parse(data.attrs);
  1264. // 获取公式并更新属性
  1265. const {
  1266. data: { dataList },
  1267. } = await searchFormula({ page: 1, pageSize: 999 });
  1268. console.log(data);
  1269. data.attrs = data.attrs.map((item) => {
  1270. const formula = dataList.find((el) => el.id === item.id);
  1271. return formula
  1272. ? { ...item, formula: formula.formula, data: formula }
  1273. : item;
  1274. });
  1275. // 从 content 中提取 {{}} 包裹的 ID
  1276. const contentIds = (data.content.match(/{{([^}]+)}}/g) || []).map(
  1277. (match) => match.slice(2, -2).trim()
  1278. );
  1279. // 过滤 attrs,只保留在 content 中出现的 ID
  1280. data.attrs = data.attrs.filter((item) => contentIds.includes(item.id));
  1281. this.coms = [data];
  1282. } catch (error) {
  1283. console.error("加载模板信息失败:", error);
  1284. }
  1285. },
  1286. onExport(e) {
  1287. let _this = this;
  1288. _this.comIndex = -1;
  1289. let content = _this.$refs.tabHtml.innerHTML;
  1290. },
  1291. onOpenView(e) {
  1292. console.log("this.coms", this.coms);
  1293. this.showViewForm = true;
  1294. },
  1295. onClose() {
  1296. /* this.$router.back(); */
  1297. window.close();
  1298. },
  1299. loadArticle(e) {
  1300. let _this = this;
  1301. _this.onLoadArticle(e);
  1302. /* getDocumentInfo({
  1303. id: e,
  1304. }).then((res) => {
  1305. if (res.status != 200) return;
  1306. _this.onLoadArticle(res.data);
  1307. }); */
  1308. },
  1309. handleDragStart(e) {
  1310. let data = {};
  1311. if (e.target.dataset.type == "article") {
  1312. let index = e.target.dataset.index;
  1313. data = {
  1314. optType: e.target.dataset.type,
  1315. item: this.articleList[index],
  1316. };
  1317. } else {
  1318. let index = e.target.dataset.index;
  1319. let subIndex = e.target.dataset.subIndex;
  1320. let item = this.categoryList[index].dataList[subIndex];
  1321. delete item.category;
  1322. data = {
  1323. ...item,
  1324. optType: e.target.dataset.type,
  1325. key: "addNew",
  1326. attrs: JSON.parse(item.attrs),
  1327. };
  1328. }
  1329. e.dataTransfer.setData("item", JSON.stringify(data));
  1330. this.operation = "drag";
  1331. },
  1332. onRebuild(updatedComList) {
  1333. this.coms = [...updatedComList];
  1334. this.$nextTick(() => {
  1335. this.$forceUpdate();
  1336. });
  1337. },
  1338. //初始化当前用户信息
  1339. async initCurrentUser() {
  1340. let _this = this;
  1341. let res = await getCurrentUserInfo();
  1342. if (res.status != 200) return;
  1343. _this.userInfo = res.data;
  1344. },
  1345. //加载文档信息
  1346. async onLoadArticle(id) {
  1347. try {
  1348. this.loading = true;
  1349. const res = await getDocumentInfo({ id });
  1350. if (res.status !== 200) {
  1351. throw new Error("Invalid response status");
  1352. }
  1353. this.docAttr = {
  1354. id: res.data.id,
  1355. category_id: Number(res.data.category_id),
  1356. title: res.data.title,
  1357. content: "",
  1358. status: res.data.status,
  1359. is_template: res.data.is_template,
  1360. linkProduct: res.data.linkProduct,
  1361. links: res.data.links,
  1362. linkProject: res.data.linkProject,
  1363. projects: res.data.projects,
  1364. };
  1365. const templateData =
  1366. typeof res.data.data === "string"
  1367. ? JSON.parse(res.data.data)
  1368. : res.data.data;
  1369. const updatedComs = await Promise.all(
  1370. templateData.map(async (el) => {
  1371. /* let templateInfo = { data: {} };
  1372. if (this.type !== "document") {
  1373. templateInfo = await getTemplateInfo({ id: el.id });
  1374. } */
  1375. const formulaData = await searchFormula({ page: 1, pageSize: 999 });
  1376. const attrs = el.attrs;
  1377. /* typeof templateInfo.data.attrs === "string"
  1378. ? JSON.parse(templateInfo.data.attrs)
  1379. : templateInfo.data.attrs || []; // Add a fallback empty array */
  1380. attrs.forEach((item) => {
  1381. if (item && item.data && item.data.id) {
  1382. const matchedFormula = formulaData.data.dataList.find(
  1383. (ite) => ite.id === item.data.id
  1384. );
  1385. if (matchedFormula) {
  1386. item.data = matchedFormula;
  1387. item.formula = matchedFormula.formula;
  1388. }
  1389. }
  1390. });
  1391. return { ...el /* , ...templateInfo.data, attrs */ };
  1392. })
  1393. );
  1394. this.coms = updatedComs;
  1395. console.log("coms", updatedComs);
  1396. if (this.type === "document" && this.articleId !== undefined) {
  1397. document.title = `${this.docAttr.title}-${settings.title}`;
  1398. }
  1399. this.uptadeSearch();
  1400. } catch (error) {
  1401. console.error("Error in onLoadArticle:", error);
  1402. } finally {
  1403. this.loading = false;
  1404. }
  1405. },
  1406. /* 加载模版信息 */
  1407. async onTemplateInfo(id) {
  1408. try {
  1409. this.loading = true;
  1410. // 获取文档信息
  1411. const res = await getDocumentInfo({ id });
  1412. if (res.status !== 200 || !res.data) {
  1413. throw new Error("无效的响应或未收到数据");
  1414. }
  1415. // 设置文档属性
  1416. this.docAttr = {
  1417. id: this.docAttr.id,
  1418. category_id: Number(this.docAttr.category_id),
  1419. title: res.data.title,
  1420. content: "",
  1421. status: res.data.status,
  1422. is_template: res.data.is_template,
  1423. linkProduct: res.data.linkProduct || [],
  1424. links: res.data.links || "",
  1425. linkProject: res.data.linkProject || [],
  1426. projects: res.data.projects || "",
  1427. document_type: res.data.document_type || "",
  1428. };
  1429. // 解析文档数据
  1430. const documentData = res.data.data ? JSON.parse(res.data.data) : [];
  1431. const updatedComs = await Promise.all(
  1432. documentData.map(async (docEl) => {
  1433. if (!docEl || !docEl.id) {
  1434. console.warn("无效的文档项:", docEl);
  1435. return null;
  1436. }
  1437. // 获取模板信息
  1438. const templateInfo = await getTemplateInfo({ id: docEl.id });
  1439. // 获取公式数据
  1440. const formulaData = await searchFormula({ page: 1, pageSize: 999 });
  1441. // 使用模板的 content 作为基础
  1442. let content = templateInfo.data.content;
  1443. // 使用模板的 attrs 作为基础,但排除 Directory 类型
  1444. let attrs = templateInfo.data.attrs
  1445. ? JSON.parse(templateInfo.data.attrs).filter(
  1446. (attr) => attr.type !== "Directory"
  1447. )
  1448. : [];
  1449. // 从文档数据中提取所有 Directory 类型的属性
  1450. const docDirectories = docEl.attrs.filter(
  1451. (attr) => attr.type === "Directory"
  1452. );
  1453. // 将文档中的 Directory 属性添加到 attrs 中
  1454. attrs = [...attrs, ...docDirectories];
  1455. // 解析 content 中的所有项
  1456. const contentItems = (content.match(/{{([^}]+)}}/g) || []).map(
  1457. (match) => match.slice(2, -2)
  1458. );
  1459. console.log("contentItems", contentItems);
  1460. // 确保 content 中引用的所有 Directory 项都存在于 attrs 中
  1461. contentItems.forEach((itemId) => {
  1462. if (
  1463. itemId.startsWith("Directory_") &&
  1464. !attrs.some((attr) => attr.id === itemId)
  1465. ) {
  1466. const [, moduleIndex, level] = itemId.split("_");
  1467. attrs.push({
  1468. type: "Directory",
  1469. id: itemId,
  1470. name: "目录信息",
  1471. intro: "目录信息",
  1472. number: "",
  1473. content: "",
  1474. level: parseInt(level),
  1475. moduleIndex: parseInt(moduleIndex),
  1476. });
  1477. }
  1478. });
  1479. // 更新公式数据
  1480. attrs = attrs.map((item) => {
  1481. if (item.type === "formual" && item.data && item.data.id) {
  1482. const matchedFormula = formulaData.data.dataList.find(
  1483. (ite) => ite.id === item.data.id
  1484. );
  1485. if (matchedFormula) {
  1486. return {
  1487. ...item,
  1488. data: matchedFormula,
  1489. formula: matchedFormula.formula,
  1490. };
  1491. }
  1492. }
  1493. return item;
  1494. });
  1495. // 返回更新后的数据,以模板信息为主,但 Directory 项完全使用文档信息
  1496. return { ...templateInfo.data, attrs, content };
  1497. })
  1498. );
  1499. // 过滤掉无效的组件
  1500. this.coms = updatedComs.filter(Boolean);
  1501. console.log("组件", this.coms);
  1502. console.log("模版", this.docAttr);
  1503. if (this.articleId !== undefined) {
  1504. document.title = `${this.docAttr.title}-${settings.title}`;
  1505. }
  1506. this.uptadeSearch();
  1507. } catch (error) {
  1508. console.error("加载模板信息时出错:", error);
  1509. this.$message.error("加载模板信息时出错,请稍后重试");
  1510. } finally {
  1511. this.loading = false;
  1512. }
  1513. },
  1514. onRemove(index) {
  1515. this.coms.splice(index, 1);
  1516. },
  1517. /* 目录信息 */
  1518. onCatalogIndex(e) {
  1519. this.catalogIndex = e;
  1520. if (
  1521. (this.docuComIndex =
  1522. 3 || this.comIndex == 9998 || this.AttributeIndex == 1)
  1523. ) {
  1524. this.comIndex = 0;
  1525. this.AttributeIndex = 0;
  1526. this.docuComIndex = 0;
  1527. }
  1528. this.$nextTick(() => {
  1529. this.$forceUpdate();
  1530. });
  1531. },
  1532. onSetActiveIndexs(e) {
  1533. this.docuComIndex = e;
  1534. if (
  1535. this.AttributeIndex == 1 ||
  1536. this.comIndex == 9998 ||
  1537. this.catalogIndex == 9997
  1538. ) {
  1539. this.catalogIndex = 0;
  1540. this.AttributeIndex = 0;
  1541. this.comIndex = 0;
  1542. }
  1543. },
  1544. //设置当前索引
  1545. onSetActiveIndex(e) {
  1546. this.comIndex = e;
  1547. if (
  1548. this.AttributeIndex == 1 ||
  1549. this.docuComIndex == 3 ||
  1550. this.catalogIndex == 9997
  1551. ) {
  1552. this.catalogIndex = 0;
  1553. this.docuComIndex = 0;
  1554. }
  1555. },
  1556. /* 属性变量 */
  1557. onAttributeIndex(e) {
  1558. this.AttributeIndex = e;
  1559. if (
  1560. (this.docuComIndex =
  1561. 3 || this.comIndex == 9998 || this.catalogIndex == 9997)
  1562. ) {
  1563. this.catalogIndex = 0;
  1564. this.comIndex = 0;
  1565. this.docuComIndex = 0;
  1566. }
  1567. },
  1568. /* 更新 */
  1569. renew() {
  1570. let _this = this;
  1571. _this.docVisible = true;
  1572. this.docForm.title = _this.docAttr.title;
  1573. this.docForm.category_id = _this.docAttr.category_id;
  1574. },
  1575. /* 保存 */
  1576. onSaveAs(e) {
  1577. let _this = this;
  1578. if (_this.coms.length <= 0) {
  1579. _this.$alert("请填写内容");
  1580. return;
  1581. }
  1582. _this.docAttr.id = "";
  1583. _this.docVisible = true;
  1584. this.docForm.title = _this.docAttr.title;
  1585. this.docForm.category_id = _this.docAttr.category_id;
  1586. },
  1587. //保存文档
  1588. onSave(e) {
  1589. let _this = this;
  1590. if (_this.coms.length <= 0) {
  1591. _this.$alert("增加组件");
  1592. return;
  1593. }
  1594. if (_this.docAttr.category_id == "" || _this.docAttr.category_id <= 0) {
  1595. _this.$alert("请选择文档分类");
  1596. return;
  1597. }
  1598. if (_this.docAttr.title == "") {
  1599. _this.$alert("请填写文档标题");
  1600. return;
  1601. }
  1602. _this.docAttr.links = JSON.stringify(_this.docAttr.linkProduct);
  1603. _this.docAttr.projects = JSON.stringify(_this.docAttr.linkProject);
  1604. _this.docAttr.data = JSON.stringify(_this.coms);
  1605. _this.docAttr.is_template = 0;
  1606. _this.docAttr.user_name = _this.$store.state.user.name;
  1607. _this.docAttr.user_id = _this.$store.state.user.id;
  1608. if (_this.docAttr.id > 0) {
  1609. updateDocument(_this.docAttr).then((res) => {
  1610. if (res.status != 200) return; //更新文档
  1611. _this.docAttr.id = res.data;
  1612. _this.$alert("文档更新成功");
  1613. _this.docVisible = false;
  1614. _this.docForm = {
  1615. title: "",
  1616. category_id: "",
  1617. };
  1618. _this.searchArticle();
  1619. });
  1620. } else {
  1621. createDocument(_this.docAttr).then((res) => {
  1622. if (res.status != 200) return; //保存文档
  1623. _this.docAttr.id = res.data;
  1624. _this.articleId = res.data;
  1625. _this.$alert("文档保存成功");
  1626. _this.docVisible = false;
  1627. _this.docForm = {
  1628. title: "",
  1629. category_id: "",
  1630. };
  1631. _this.searchArticle();
  1632. });
  1633. }
  1634. },
  1635. /*更新 */
  1636. onUpload() {
  1637. let _this = this;
  1638. if (_this.coms.length <= 0) {
  1639. _this.$alert("增加组件");
  1640. return;
  1641. }
  1642. if (_this.docAttr.document_type == "") {
  1643. _this.$alert("请选择分类");
  1644. return;
  1645. }
  1646. if (_this.docAttr.title == "") {
  1647. _this.$alert("请填写模版标题");
  1648. return;
  1649. }
  1650. _this.docAttr.links = JSON.stringify(_this.docAttr.linkProduct);
  1651. _this.docAttr.projects = JSON.stringify(_this.docAttr.linkProject);
  1652. _this.docAttr.data = JSON.stringify(_this.coms);
  1653. _this.docAttr.is_template = 1;
  1654. _this.docAttr.id = this.$route.query.articleId;
  1655. _this.docAttr.user_name = _this.$store.state.user.name;
  1656. _this.docAttr.user_id = _this.$store.state.user.id;
  1657. updateDocument(_this.docAttr).then((res) => {
  1658. if (res.status != 200) return; //更新文档
  1659. _this.docAttr.id = res.data;
  1660. _this.$alert("模版更新成功");
  1661. _this.searchArticle();
  1662. });
  1663. },
  1664. /* 保存并更新模版 */
  1665. onSaveUpload(e) {
  1666. let _this = this;
  1667. if (_this.coms.length <= 0) {
  1668. _this.$alert("增加组件");
  1669. return;
  1670. }
  1671. if (_this.docAttr.document_type == "") {
  1672. _this.$alert("请选择分类");
  1673. return;
  1674. }
  1675. if (_this.docAttr.title == "") {
  1676. _this.$alert("请填写模版标题");
  1677. return;
  1678. }
  1679. _this.docAttr.links = JSON.stringify(_this.docAttr.linkProduct);
  1680. _this.docAttr.projects = JSON.stringify(_this.docAttr.linkProject);
  1681. _this.docAttr.data = JSON.stringify(_this.coms);
  1682. _this.docAttr.is_template = 1;
  1683. _this.docAttr.user_name = _this.$store.state.user.name;
  1684. _this.docAttr.user_id = _this.$store.state.user.id;
  1685. /* if (_this.docAttr.id > 0) {
  1686. updateDocument(_this.docAttr).then((res) => {
  1687. if (res.status != 200) return; //更新文档
  1688. _this.docAttr.id = res.data;
  1689. _this.$alert("模版更新成功");
  1690. _this.searchArticle();
  1691. });
  1692. } else { */
  1693. createDocument(_this.docAttr).then((res) => {
  1694. if (res.status != 200) return; //保存文档
  1695. _this.docAttr.id = res.data;
  1696. _this.articleId = res.data;
  1697. _this.$alert("模版保存成功");
  1698. _this.searchArticle();
  1699. });
  1700. /* } */
  1701. },
  1702. //设置组件值
  1703. onSetComs(e) {
  1704. let _this = this;
  1705. _this.coms = [...e];
  1706. },
  1707. onAddLayer(cateIndex, dataIndex) {
  1708. let _this = this;
  1709. let item = _this.categoryList[cateIndex].dataList[dataIndex];
  1710. let data = {
  1711. ...item,
  1712. attrs: JSON.parse(item.attrs),
  1713. };
  1714. delete data.category;
  1715. _this.coms.push(data);
  1716. _this.comIndex = _this.coms.length - 1;
  1717. },
  1718. //处理插入事件
  1719. onInsert(e) {
  1720. let _this = this;
  1721. switch (e.key) {
  1722. case "article": //插入图文
  1723. _this.insertArticle();
  1724. break;
  1725. case "table": //插入图表
  1726. _this.insertTable();
  1727. break;
  1728. case "sourceData": //插入原数据
  1729. _this.insertSourceData(e);
  1730. break;
  1731. case "formual": //插入公式
  1732. _this.insertFormual(e);
  1733. break;
  1734. case "constant": //插入常量
  1735. _this.insertConstant(e);
  1736. break;
  1737. case "variable": //插入变量
  1738. _this.insertVariable(e);
  1739. break;
  1740. case "pager": //插入分页符
  1741. _this.insertPager();
  1742. break;
  1743. case "attr":
  1744. this.insertProductAttr();
  1745. break;
  1746. case "Directory": //插入主题
  1747. _this.insertDirectory(e);
  1748. break;
  1749. case "addNew": //插入新记录
  1750. _this.insertNew(e);
  1751. break;
  1752. case "InsertNull":
  1753. _this.insertVal();
  1754. break;
  1755. case "ai": //插入ai
  1756. _this.insertAI(e);
  1757. break;
  1758. }
  1759. },
  1760. /* 插入空值 */
  1761. insertVal() {
  1762. let _this = this;
  1763. if (_this.comIndex < 0) {
  1764. _this.$alert("请选择插入图层");
  1765. return false;
  1766. }
  1767. let com = _this.coms[_this.comIndex];
  1768. let uniqueId = "val" + Date.now(); // 使用时间戳创建唯一ID
  1769. let data = {
  1770. type: "variableNull",
  1771. id: uniqueId,
  1772. dataId: "",
  1773. name: "非变量",
  1774. intro: "",
  1775. content: "请输入",
  1776. data: "",
  1777. };
  1778. com.attrs.push(data);
  1779. if (com.type == "TextArea") {
  1780. //如果是图文,更新内容
  1781. _this.insertCmd = {
  1782. content: "{{" + data.id + "}}",
  1783. };
  1784. } else {
  1785. //仅对图表中插入有效
  1786. if (_this.comIndex >= 0) {
  1787. _this.setTableData(data.id);
  1788. }
  1789. }
  1790. },
  1791. /* 插入ai */
  1792. insertAI(e) {
  1793. let _this = this;
  1794. if (_this.comIndex < 0) {
  1795. _this.$alert("请选择插入图层");
  1796. return false;
  1797. }
  1798. let com = _this.coms[_this.comIndex];
  1799. let data = {
  1800. type: "ai",
  1801. id: "ai" + (com.attrs.length + 1),
  1802. dataId: "",
  1803. name: "AI",
  1804. intro: "插入AI",
  1805. content: e.content.result,
  1806. search: e.content.searchTerm,
  1807. };
  1808. com.attrs.push(data);
  1809. if (com.type == "TextArea") {
  1810. //如果是图文,更新内容
  1811. _this.insertCmd = {
  1812. content: "{{" + data.id + "}}",
  1813. };
  1814. }
  1815. },
  1816. insertProductAttr() {
  1817. if (this.docAttr.linkProduct.length <= 0) {
  1818. this.$alert("请选择文档关联商品信息");
  1819. return false;
  1820. }
  1821. this.showProductAttr = true;
  1822. },
  1823. //插入目录
  1824. insertDirectory(e) {
  1825. let _this = this;
  1826. if (_this.comIndex < 0) {
  1827. _this.$alert("请选择插入图层");
  1828. return false;
  1829. }
  1830. let com = _this.coms[_this.comIndex];
  1831. let uniqueId = `Directory_${_this.comIndex}_${com.attrs.length + 1}`;
  1832. // 获取当前层级
  1833. let currentLevel = e.content.level || 1;
  1834. // 生成带有模块索引和层级的内容
  1835. let { number, content } = this.generateNumberedContent(
  1836. _this.comIndex,
  1837. currentLevel
  1838. );
  1839. let data = {
  1840. type: "Directory",
  1841. id: uniqueId,
  1842. name: "目录信息",
  1843. intro: "目录信息",
  1844. number: number,
  1845. content: content,
  1846. level: currentLevel,
  1847. moduleIndex: _this.comIndex,
  1848. };
  1849. // 使用 $set 来确保响应式更新
  1850. this.$set(com.attrs, com.attrs.length, data);
  1851. // 强制更新视图
  1852. this.$forceUpdate();
  1853. // 使用 nextTick 确保 DOM 更新后再检查
  1854. this.$nextTick(() => {
  1855. if (!com.attrs[com.attrs.length - 1].content) {
  1856. this.$set(com.attrs[com.attrs.length - 1], "content", content);
  1857. this.$forceUpdate();
  1858. }
  1859. });
  1860. // 使用新的唯一 ID 在插入命令中
  1861. _this.insertCmd = {
  1862. content: `{{${uniqueId}}}`,
  1863. };
  1864. },
  1865. generateNumberedContent(moduleIndex, level) {
  1866. let number = this.generateLevelPrefix(moduleIndex, level);
  1867. let content = this.coms[moduleIndex].type === "TextArea" ? "" : "";
  1868. return { number, content };
  1869. },
  1870. generateLevelPrefix(moduleIndex, level) {
  1871. let prefix = [];
  1872. let currentModule = this.coms[moduleIndex];
  1873. // 获取当前模块中已存在的目录项
  1874. let existingDirectories = currentModule.attrs.filter(
  1875. (attr) => attr.type === "Directory"
  1876. );
  1877. // 计算当前层级的序号
  1878. let currentLevelCount =
  1879. existingDirectories.filter((dir) => dir.level === level).length + 1;
  1880. // 构建多级序号
  1881. for (let i = 1; i <= level; i++) {
  1882. if (i === 1) {
  1883. prefix.push(moduleIndex + 1);
  1884. } else if (i === level) {
  1885. prefix.push(currentLevelCount);
  1886. } else {
  1887. // 对于中间层级,找到最近的上级目录项
  1888. let parentLevel = existingDirectories
  1889. .filter((dir) => dir.level === i - 1)
  1890. .pop();
  1891. prefix.push(parentLevel ? parentLevel.number.split(".")[i - 1] : 1);
  1892. }
  1893. }
  1894. return prefix.join(".");
  1895. },
  1896. onInsertProductAttr(e) {
  1897. let _this = this;
  1898. this.showProductAttr = false;
  1899. if (_this.comIndex < 0) {
  1900. _this.$alert("请选择插入图层");
  1901. return false;
  1902. }
  1903. let com = _this.coms[_this.comIndex];
  1904. let data = {
  1905. type: "ProductAttr",
  1906. id: "ProductAttr" + (com.attrs.length + 1),
  1907. dataId: e.id,
  1908. name: "商品属性",
  1909. intor: "商品属性",
  1910. content: "",
  1911. attrs: e,
  1912. };
  1913. com.attrs.push(data);
  1914. _this.insertCmd = {
  1915. content: "{{" + data.id + "}}",
  1916. };
  1917. },
  1918. //插入新记录
  1919. insertNew(e) {
  1920. let _this = this;
  1921. _this.coms.push(e);
  1922. },
  1923. //插入分页
  1924. insertPager() {
  1925. let _this = this;
  1926. if (_this.comIndex < 0) {
  1927. _this.$alert("请选择插入图层");
  1928. return false;
  1929. }
  1930. let com = _this.coms[_this.comIndex];
  1931. let data = {
  1932. type: "pager",
  1933. id: "pager" + (com.attrs.length + 1),
  1934. name: "分页符",
  1935. intor: "强制分页",
  1936. content: "",
  1937. };
  1938. com.attrs.push(data);
  1939. if (com.type == "TextArea") {
  1940. //如果是图文,更新内容
  1941. _this.insertCmd = {
  1942. content: "<div>{{" + data.id + "}}</div>",
  1943. };
  1944. }
  1945. },
  1946. //插入图文
  1947. insertArticle() {
  1948. /* let _this = this;
  1949. _this.coms.push({
  1950. type: "TextArea",
  1951. lay_id: "textArea",
  1952. code: "模块名",
  1953. name: "图文",
  1954. intro: "图文介绍",
  1955. isEdit: 2,
  1956. content: "请填写内容",
  1957. attrs: [],
  1958. });
  1959. _this.comIndex = _this.coms.length - 1; */
  1960. let _this = this;
  1961. let newArticle = {
  1962. type: "TextArea",
  1963. lay_id: "textArea",
  1964. code: "模块名",
  1965. name: "图文",
  1966. intro: "图文介绍",
  1967. isEdit: 2,
  1968. content: "请填写内容",
  1969. attrs: [],
  1970. };
  1971. _this.coms.push(newArticle);
  1972. _this.comIndex = _this.coms.length - 1;
  1973. // 添加一些日志来帮助调试
  1974. console.log("New article added:", newArticle);
  1975. console.log("Current coms:", _this.coms);
  1976. console.log("New comIndex:", _this.comIndex);
  1977. },
  1978. //插入表格
  1979. insertTable() {
  1980. let _this = this;
  1981. _this.coms.push({
  1982. type: "Table",
  1983. lay_id: "Table",
  1984. code: "模块名",
  1985. name: "图表名称",
  1986. intro: "图表介绍",
  1987. isEdit: 2,
  1988. tableHeader: this.initTableHeader(),
  1989. tableData: [{}],
  1990. htmlData: "",
  1991. attrs: [],
  1992. });
  1993. _this.comIndex = _this.coms.length - 1;
  1994. },
  1995. initTableHeader() {
  1996. var start = 65;
  1997. var data = [];
  1998. for (var i = start; i <= start + 25; i++) {
  1999. data.push(String.fromCharCode(i));
  2000. }
  2001. return data;
  2002. },
  2003. //插入变量
  2004. insertConstant(e) {
  2005. let _this = this;
  2006. // console.log("insertconstant");
  2007. if (_this.comIndex < 0) {
  2008. _this.$alert("请选择插入图层");
  2009. return false;
  2010. }
  2011. let com = _this.coms[_this.comIndex];
  2012. let data = {
  2013. type: "constant",
  2014. id: e.content.code + (com.attrs.length + 1),
  2015. dataId: e.id,
  2016. name: e.content.code,
  2017. intro: e.content.intro,
  2018. content: e.content.value,
  2019. data: e.content,
  2020. };
  2021. com.attrs.push(data);
  2022. if (com.type == "TextArea") {
  2023. //如果是图文,更新内容
  2024. _this.insertCmd = {
  2025. content: "{{" + data.id + "}}",
  2026. };
  2027. } else {
  2028. //仅对图表中插入有效
  2029. if (_this.comIndex >= 0) {
  2030. _this.setTableData(data.id);
  2031. }
  2032. }
  2033. },
  2034. //插入变量
  2035. insertVariable(e) {
  2036. let _this = this;
  2037. if (_this.comIndex < 0) {
  2038. _this.$alert("请选择插入图层");
  2039. return false;
  2040. }
  2041. let com = _this.coms[_this.comIndex];
  2042. let data = {
  2043. type: "variable",
  2044. id: e.content.code + (com.attrs.length + 1),
  2045. dataId: e.id,
  2046. name: e.content.code,
  2047. intro: e.content.intro,
  2048. content: e.content.value,
  2049. data: e.content,
  2050. };
  2051. com.attrs.push(data);
  2052. if (com.type == "TextArea") {
  2053. //如果是图文,更新内容
  2054. _this.insertCmd = {
  2055. content: "{{" + data.id + "}}",
  2056. };
  2057. } else {
  2058. //仅对图表中插入有效
  2059. if (_this.comIndex >= 0) {
  2060. _this.setTableData(data.id);
  2061. }
  2062. }
  2063. },
  2064. //插入原数据
  2065. insertSourceData(e) {
  2066. let _this = this;
  2067. if (_this.comIndex < 0) {
  2068. _this.$alert("请选择插入图层");
  2069. return false;
  2070. }
  2071. let com = _this.coms[_this.comIndex];
  2072. let data = {
  2073. type: "sourceData",
  2074. id: "sourceData" + (com.attrs.length + 1),
  2075. dataId: "",
  2076. name: "源数据",
  2077. intro: "插入源数据",
  2078. formula:
  2079. "[R][" +
  2080. e.content.tb +
  2081. "][" +
  2082. e.content.sheet +
  2083. "][" +
  2084. e.content.r +
  2085. "," +
  2086. e.content.c +
  2087. "]",
  2088. content: e.content.value,
  2089. data: e.content,
  2090. };
  2091. com.attrs.push(data);
  2092. if (com.type == "TextArea") {
  2093. //如果是图文,更新内容
  2094. _this.insertCmd = {
  2095. content: "{{" + data.id + "}}",
  2096. };
  2097. }
  2098. },
  2099. //插入公式
  2100. insertFormual(e) {
  2101. let _this = this;
  2102. if (_this.comIndex < 0) {
  2103. _this.$alert("请选择插入图层");
  2104. return false;
  2105. }
  2106. let com = _this.coms[_this.comIndex];
  2107. let data = {
  2108. type: "formual",
  2109. id: "formual" + (com.attrs.length + 1),
  2110. dataId: e.id,
  2111. name: e.content.name,
  2112. intro: e.content.intro,
  2113. formula: e.content.formula,
  2114. content: 0,
  2115. data: e.content,
  2116. };
  2117. com.attrs.push(data);
  2118. if (com.type == "TextArea") {
  2119. //如果是图文,更新内容
  2120. _this.insertCmd = {
  2121. content: "{{" + data.id + "}}",
  2122. };
  2123. } else {
  2124. //仅对图表中插入有效
  2125. if (_this.comIndex >= 0) {
  2126. _this.setTableData(data.id);
  2127. }
  2128. }
  2129. },
  2130. //获取模版分类信息
  2131. async initCategoryList() {
  2132. let _this = this;
  2133. /* let res = await getAllCategory({list:1 });
  2134. if(res.status!=200)return;
  2135. let dataList=res.data;
  2136. for(var i=0;i<dataList.length;i++){
  2137. for (var j=0;j<dataList[i].children.length;j++){
  2138. let dataId=dataList[i].children[j].id;
  2139. for(var k=0;k<dataList[i].children[j].dataList.length;k++){
  2140. dataList[i].children[j].dataList[k].attrs=JSON.parse(dataList[i].children[j].dataList[k].attrs)
  2141. }
  2142. // dataList[i].children[j].dataList=await _this.getTemplateList(dataId)
  2143. }
  2144. }
  2145. // console.log("dataList",dataList)
  2146. _this.categoryList=dataList; */
  2147. let res = await searchTemplateCategory({
  2148. page: 1,
  2149. pageSize: 99,
  2150. parent_id: 0,
  2151. status: 5,
  2152. });
  2153. if (res.status != 200) return;
  2154. _this.categoryList = res.data.dataList;
  2155. for (var i = 0; i < _this.categoryList.length; i++) {
  2156. _this.categoryList[i].dataList = await _this.getTemplateList(
  2157. _this.categoryList[i].id
  2158. );
  2159. }
  2160. },
  2161. //获取模版列表
  2162. async getTemplateList(categoryId) {
  2163. let _this = this;
  2164. let res = await searchTemplate({
  2165. page: 1,
  2166. pageSize: 999,
  2167. category_id: categoryId,
  2168. status: 5,
  2169. });
  2170. if (res.status != 200) return [];
  2171. let dataList = res.data.dataList.map((item) => {
  2172. // 添加空值检查
  2173. if (!item.attrs) {
  2174. item.attrs = "[]";
  2175. }
  2176. if (!item.content) {
  2177. item.content = "";
  2178. }
  2179. try {
  2180. // 解析 attrs,添加错误处理
  2181. item.attrs =
  2182. typeof item.attrs === "string"
  2183. ? JSON.parse(item.attrs)
  2184. : item.attrs;
  2185. // 从 content 中提取所有 {{}} 包裹的 ID,添加空值检查
  2186. const contentIds = (
  2187. (item.content || "").match(/{{([^}]+)}}/g) || []
  2188. ).map((match) => match.slice(2, -2).trim());
  2189. // 确保 attrs 是数组
  2190. item.attrs = Array.isArray(item.attrs) ? item.attrs : [];
  2191. // 过滤 attrs,只保留在 content 中出现的 ID
  2192. item.attrs = item.attrs.filter(
  2193. (attr) => attr && attr.id && contentIds.includes(attr.id)
  2194. );
  2195. } catch (error) {
  2196. console.error("Error processing template item:", error);
  2197. item.attrs = [];
  2198. }
  2199. return item;
  2200. });
  2201. return dataList;
  2202. },
  2203. //获取文档列表
  2204. searchArticle() {
  2205. let _this = this;
  2206. pageDocument({
  2207. page: 1,
  2208. pageSize: 99,
  2209. }).then((res) => {
  2210. if (res.status != 200) return;
  2211. _this.articleList = res.data.dataList.filter(
  2212. (el) => el.is_template == 0
  2213. );
  2214. _this.templateList = res.data.dataList.filter(
  2215. (el) => el.is_template == 1
  2216. );
  2217. });
  2218. },
  2219. },
  2220. };
  2221. </script>
  2222. <style lang="scss">
  2223. @import "./create.scss";
  2224. .el-collapse,
  2225. .el-collapse-item__wrap {
  2226. border: none;
  2227. }
  2228. .el-collapse,
  2229. .el-collapse-item__header {
  2230. border: none;
  2231. .el-collapse-item__arrow {
  2232. margin: 0;
  2233. }
  2234. }
  2235. .borderless-collapse {
  2236. border: none;
  2237. ::v-deep .el-collapse-item__header,
  2238. ::v-deep .el-collapse-item__wrap,
  2239. ::v-deep .el-collapse-item__content,
  2240. ::v-deep .el-collapse-item {
  2241. border: none;
  2242. }
  2243. ::v-deep .el-collapse-item__wrap {
  2244. border-bottom: none !important;
  2245. }
  2246. }
  2247. .scrollable-container {
  2248. overflow-x: auto;
  2249. white-space: nowrap;
  2250. width: 350px;
  2251. padding-bottom: 10px;
  2252. }
  2253. .min-width-content {
  2254. /* display: inline-block;
  2255. vertical-align: top; */
  2256. min-width: 150px;
  2257. white-space: normal;
  2258. }
  2259. /*.el-collapse-item {
  2260. display: inline-block;
  2261. vertical-align: top;
  2262. } */
  2263. </style>