create.vue 136 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047204820492050205120522053205420552056205720582059206020612062206320642065206620672068206920702071207220732074207520762077207820792080208120822083208420852086208720882089209020912092209320942095209620972098209921002101210221032104210521062107210821092110211121122113211421152116211721182119212021212122212321242125212621272128212921302131213221332134213521362137213821392140214121422143214421452146214721482149215021512152215321542155215621572158215921602161216221632164216521662167216821692170217121722173217421752176217721782179218021812182218321842185218621872188218921902191219221932194219521962197219821992200220122022203220422052206220722082209221022112212221322142215221622172218221922202221222222232224222522262227222822292230223122322233223422352236223722382239224022412242224322442245224622472248224922502251225222532254225522562257225822592260226122622263226422652266226722682269227022712272227322742275227622772278227922802281228222832284228522862287228822892290229122922293229422952296229722982299230023012302230323042305230623072308230923102311231223132314231523162317231823192320232123222323232423252326232723282329233023312332233323342335233623372338233923402341234223432344234523462347234823492350235123522353235423552356235723582359236023612362236323642365236623672368236923702371237223732374237523762377237823792380238123822383238423852386238723882389239023912392239323942395239623972398239924002401240224032404240524062407240824092410241124122413241424152416241724182419242024212422242324242425242624272428242924302431243224332434243524362437243824392440244124422443244424452446244724482449245024512452245324542455245624572458245924602461246224632464246524662467246824692470247124722473247424752476247724782479248024812482248324842485248624872488248924902491249224932494249524962497249824992500250125022503250425052506250725082509251025112512251325142515251625172518251925202521252225232524252525262527252825292530253125322533253425352536253725382539254025412542254325442545254625472548254925502551255225532554255525562557255825592560256125622563256425652566256725682569257025712572257325742575257625772578257925802581258225832584258525862587258825892590259125922593259425952596259725982599260026012602260326042605260626072608260926102611261226132614261526162617261826192620262126222623262426252626262726282629263026312632263326342635263626372638263926402641264226432644264526462647264826492650265126522653265426552656265726582659266026612662266326642665266626672668266926702671267226732674267526762677267826792680268126822683268426852686268726882689269026912692269326942695269626972698269927002701270227032704270527062707270827092710271127122713271427152716271727182719272027212722272327242725272627272728272927302731273227332734273527362737273827392740274127422743274427452746274727482749275027512752275327542755275627572758275927602761276227632764276527662767276827692770277127722773277427752776277727782779278027812782278327842785278627872788278927902791279227932794279527962797279827992800280128022803280428052806280728082809281028112812281328142815281628172818281928202821282228232824282528262827282828292830283128322833283428352836283728382839284028412842284328442845284628472848284928502851285228532854285528562857285828592860286128622863286428652866286728682869287028712872287328742875287628772878287928802881288228832884288528862887288828892890289128922893289428952896289728982899290029012902290329042905290629072908290929102911291229132914291529162917291829192920292129222923292429252926292729282929293029312932293329342935293629372938293929402941294229432944294529462947294829492950295129522953295429552956295729582959296029612962296329642965296629672968296929702971297229732974297529762977297829792980298129822983298429852986298729882989299029912992299329942995299629972998299930003001300230033004300530063007300830093010301130123013301430153016301730183019302030213022302330243025302630273028302930303031303230333034303530363037303830393040304130423043304430453046304730483049305030513052305330543055305630573058305930603061306230633064306530663067306830693070307130723073307430753076307730783079308030813082308330843085308630873088308930903091309230933094309530963097309830993100310131023103310431053106310731083109311031113112311331143115311631173118311931203121312231233124312531263127312831293130313131323133313431353136313731383139314031413142314331443145314631473148314931503151315231533154315531563157315831593160316131623163316431653166316731683169317031713172317331743175317631773178317931803181318231833184318531863187318831893190319131923193319431953196319731983199320032013202320332043205320632073208320932103211321232133214321532163217321832193220322132223223322432253226322732283229323032313232323332343235323632373238323932403241324232433244324532463247324832493250325132523253325432553256325732583259326032613262326332643265326632673268326932703271327232733274327532763277327832793280328132823283328432853286328732883289329032913292329332943295329632973298329933003301330233033304330533063307330833093310331133123313331433153316331733183319332033213322332333243325332633273328332933303331333233333334333533363337333833393340334133423343334433453346334733483349335033513352335333543355335633573358335933603361336233633364336533663367336833693370337133723373337433753376337733783379338033813382338333843385338633873388338933903391339233933394339533963397339833993400340134023403340434053406340734083409341034113412341334143415341634173418341934203421342234233424342534263427342834293430343134323433343434353436343734383439344034413442344334443445344634473448344934503451345234533454345534563457345834593460346134623463346434653466346734683469347034713472347334743475347634773478347934803481348234833484348534863487348834893490349134923493349434953496349734983499350035013502350335043505350635073508350935103511351235133514351535163517351835193520352135223523352435253526352735283529353035313532353335343535353635373538353935403541354235433544354535463547354835493550355135523553355435553556355735583559356035613562356335643565356635673568356935703571357235733574357535763577357835793580358135823583358435853586358735883589359035913592359335943595359635973598359936003601360236033604360536063607360836093610361136123613361436153616361736183619362036213622362336243625362636273628362936303631363236333634363536363637363836393640364136423643364436453646364736483649365036513652365336543655365636573658365936603661366236633664366536663667366836693670367136723673367436753676367736783679368036813682368336843685368636873688368936903691369236933694369536963697369836993700370137023703370437053706370737083709371037113712371337143715371637173718371937203721372237233724372537263727372837293730373137323733373437353736373737383739374037413742374337443745374637473748374937503751375237533754375537563757375837593760376137623763376437653766376737683769377037713772377337743775377637773778377937803781378237833784378537863787378837893790379137923793379437953796379737983799380038013802380338043805380638073808380938103811381238133814381538163817381838193820382138223823382438253826382738283829383038313832383338343835383638373838383938403841384238433844384538463847384838493850385138523853385438553856385738583859386038613862386338643865386638673868386938703871387238733874387538763877387838793880388138823883388438853886388738883889389038913892389338943895389638973898389939003901390239033904390539063907390839093910391139123913391439153916391739183919392039213922392339243925392639273928392939303931393239333934393539363937393839393940394139423943394439453946394739483949395039513952395339543955395639573958395939603961396239633964396539663967396839693970397139723973397439753976397739783979398039813982398339843985398639873988398939903991399239933994399539963997399839994000400140024003400440054006400740084009401040114012401340144015401640174018401940204021402240234024402540264027402840294030403140324033403440354036403740384039404040414042404340444045404640474048404940504051405240534054405540564057405840594060406140624063406440654066406740684069407040714072407340744075407640774078407940804081408240834084408540864087408840894090409140924093409440954096409740984099410041014102410341044105410641074108410941104111411241134114411541164117411841194120412141224123412441254126412741284129413041314132413341344135413641374138413941404141414241434144414541464147414841494150415141524153415441554156415741584159416041614162416341644165416641674168416941704171417241734174417541764177417841794180418141824183418441854186418741884189419041914192419341944195419641974198419942004201420242034204420542064207420842094210421142124213421442154216421742184219422042214222422342244225422642274228422942304231423242334234423542364237423842394240424142424243424442454246424742484249425042514252425342544255425642574258425942604261426242634264426542664267426842694270427142724273427442754276427742784279428042814282428342844285428642874288428942904291429242934294429542964297429842994300430143024303430443054306430743084309431043114312431343144315431643174318431943204321432243234324432543264327432843294330433143324333433443354336433743384339434043414342434343444345434643474348434943504351435243534354435543564357435843594360436143624363436443654366436743684369437043714372437343744375437643774378437943804381438243834384438543864387438843894390439143924393439443954396439743984399440044014402440344044405440644074408440944104411441244134414441544164417441844194420442144224423442444254426442744284429443044314432443344344435443644374438443944404441444244434444444544464447444844494450445144524453445444554456445744584459446044614462446344644465446644674468446944704471447244734474447544764477447844794480448144824483448444854486448744884489449044914492449344944495449644974498449945004501450245034504450545064507450845094510451145124513451445154516451745184519452045214522452345244525452645274528452945304531453245334534453545364537453845394540454145424543454445454546454745484549455045514552455345544555455645574558455945604561456245634564456545664567456845694570457145724573457445754576457745784579458045814582458345844585458645874588458945904591459245934594459545964597459845994600460146024603460446054606460746084609461046114612461346144615461646174618
  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">
  18. <span>创建者:</span
  19. ><!-- {{ userInfo && userInfo.username }} -->
  20. </div>
  21. </div>
  22. <div class="right">
  23. <el-button
  24. type="primary"
  25. size="mini"
  26. @click="onSaveAs"
  27. v-if="
  28. type !== 'module' && type == 'document' && articleId == undefined
  29. "
  30. >保存文档</el-button
  31. ><!-- v-if="docAttr.id > 0" -->
  32. <el-button
  33. type="primary"
  34. size="mini"
  35. @click="renew"
  36. v-if="
  37. articleId !== undefined && type !== 'module' && type == 'document'
  38. "
  39. >更新文档</el-button
  40. >
  41. <!-- <el-popover
  42. placement="bottom"
  43. trigger="click"
  44. v-if="type !== 'module' && type !== 'document'"
  45. > -->
  46. <el-button
  47. type="primary"
  48. v-if="type !== 'module' && type !== 'document' && !articleId"
  49. @click="onSaveUpload"
  50. >保存</el-button
  51. >
  52. <el-button
  53. type="primary"
  54. v-if="type !== 'module' && type !== 'document' && articleId"
  55. @click="onUpload"
  56. >更新</el-button
  57. >
  58. <!-- <el-button
  59. slot="reference"
  60. type="primary"
  61. size="mini"
  62. style="margin: 0 10px"
  63. v-if="$store.state.user.name == 'admin'"
  64. >保存并更新模版</el-button
  65. >
  66. </el-popover> -->
  67. <!-- <el-button
  68. type="primary"
  69. size="mini"
  70. v-if="$store.state.user.name == 'admin'"
  71. @click="onSaveUpload"
  72. >保存并更新模版</el-button
  73. > -->
  74. <el-button
  75. type="primary"
  76. size="mini"
  77. v-if="type !== 'module' && type == 'document'"
  78. @click="onOpenView"
  79. >预览导出
  80. </el-button>
  81. <el-button type="primary" size="mini" @click="onClose">
  82. 关闭文档
  83. </el-button>
  84. </div>
  85. </div>
  86. <div class="editor-content">
  87. <!-- 文档选择面板 -->
  88. <div
  89. class="left_scheme"
  90. v-if="type !== 'module'"
  91. :class="{ collapsed: isSchemeCollapsed }"
  92. >
  93. <div class="scheme-header">
  94. <div class="title">
  95. 请选择文档
  96. <i class="el-icon-menu" @click="toggleSchemePanel"></i>
  97. </div>
  98. <div class="search">
  99. <el-input
  100. v-model="searchKey"
  101. placeholder="请输入搜索"
  102. prefix-icon="el-icon-search"
  103. clearable
  104. @keyup.enter.native="handleSearch"
  105. @clear="handleClear"
  106. >
  107. </el-input>
  108. </div>
  109. <!-- <div class="action-btns">
  110. <el-button type="primary" size="small" @click="createScheme"
  111. >新建方案</el-button
  112. >
  113. <el-button type="primary" size="small" @click="createCategory"
  114. >新建分类</el-button
  115. >
  116. </div> -->
  117. <div class="current-scheme">
  118. 当前文档: {{ currentScheme || "已选择方案三" }}
  119. </div>
  120. </div>
  121. <div class="scheme-content" v-show="!isSchemeCollapsed">
  122. <el-tree
  123. :data="schemeData"
  124. :props="defaultProps"
  125. @node-click="handleNodeClick"
  126. :default-expanded-keys="expandedKeys"
  127. node-key="id"
  128. ref="documentTree"
  129. >
  130. <span class="custom-tree-node" slot-scope="{ node, data }">
  131. <span @click="onLoadArticle(data.id)">
  132. <i class="el-icon-folder" v-if="data.children"></i>
  133. <i class="el-icon-document" v-else></i>
  134. {{ node.label }}
  135. </span>
  136. </span>
  137. </el-tree>
  138. </div>
  139. </div>
  140. <!-- 资源面板 -->
  141. <div class="natural" :class="{ collapsed: isResourceCollapsed }">
  142. <div class="resource-header-title">
  143. <div class="title-left">
  144. <span>请选择模块</span>
  145. </div>
  146. <i class="el-icon-menu" @click="toggleResourcePanel"></i>
  147. </div>
  148. <div class="resource-container" v-show="!isResourceCollapsed">
  149. <div class="resource-header">
  150. <el-input
  151. v-model="templateSearchKey"
  152. placeholder="请输入选择"
  153. prefix-icon="el-icon-search"
  154. clearable
  155. @keyup.enter.native="handleTemplateSearch"
  156. @clear="handleResourceClear"
  157. >
  158. </el-input>
  159. <!-- <div class="action-btns">
  160. <el-button type="primary" @click="createResource"
  161. >新建资源</el-button
  162. >
  163. <el-button type="primary" @click="createResourceCategory"
  164. >新建资源分类</el-button
  165. >
  166. </div> -->
  167. </div>
  168. <!-- <div class="resource-status">
  169. 已打开1个资源,已选择3个资源
  170. <el-button size="small" plain @click="refreshResources"
  171. >更新</el-button
  172. >
  173. </div> -->
  174. <div class="resource-content">
  175. <el-collapse v-model="activeCategories">
  176. <el-collapse-item
  177. v-for="(category, index) in categoryList"
  178. :key="index"
  179. :title="category.name"
  180. :name="category.id"
  181. >
  182. <template slot="title">
  183. <span>{{ category.name }}</span>
  184. </template>
  185. <div class="resource-list">
  186. <draggable
  187. v-model="category.templates"
  188. :options="{
  189. group: { name: 'itxst', pull: 'clone' },
  190. sort: true,
  191. }"
  192. :disabled="type == 'module'"
  193. @end="handleDragEnd"
  194. >
  195. <transition-group>
  196. <div
  197. v-for="template in category.templates"
  198. :key="template.dcb_id || template.name"
  199. class="resource-item"
  200. :data-template-id="template.dcb_id"
  201. >
  202. <el-checkbox
  203. v-model="template.selected"
  204. @change="
  205. (val) =>
  206. handleTemplateSelect(category, template, val)
  207. "
  208. :disabled="isTemplateUsed(template)"
  209. >
  210. {{ template.dcb_name }}
  211. </el-checkbox>
  212. </div>
  213. </transition-group>
  214. </draggable>
  215. </div>
  216. </el-collapse-item>
  217. </el-collapse>
  218. </div>
  219. </div>
  220. </div>
  221. <!-- <div class="neary-doc">
  222. <div class="left-content">
  223. <div class="new-article">
  224. <div v-if="showView == 0 && type !== 'module'">
  225. <el-collapse v-model="activeNames">
  226. <el-collapse-item
  227. title="最新文档"
  228. name="-1"
  229. v-if="type == 'document'"
  230. >
  231. <div
  232. v-for="(it, index) in articleList"
  233. draggable
  234. :key="it.id"
  235. :data-index="index"
  236. data-type="article"
  237. class="sub-menus"
  238. >
  239. <div @click="onLoadArticle(it.id)" style="cursor: pointer">
  240. {{ it.title }}
  241. </div>
  242. </div>
  243. </el-collapse-item>
  244. <el-collapse-item
  245. title="模版列表"
  246. name="-2"
  247. v-if="showView == 0"
  248. >
  249. <div
  250. v-for="(it, index) in templateList"
  251. draggable
  252. :key="it.id"
  253. :data-index="index"
  254. data-type="article"
  255. class="sub-menus"
  256. >
  257. <div @click="onTemplateInfo(it.id)" style="cursor: pointer">
  258. {{ it.title }}
  259. </div>
  260. </div>
  261. </el-collapse-item>
  262. </el-collapse>
  263. </div>
  264. <div v-if="showView == 1" class="scrollable-container">
  265. <el-collapse
  266. v-model="activeModel"
  267. :accordion="true"
  268. @change="handleItemClick"
  269. class="borderless-collapse"
  270. >
  271. <el-collapse-item
  272. v-for="(item, itemIndex) in categoryList"
  273. :key="itemIndex"
  274. :title="item.name"
  275. :name="item.id"
  276. class="min-width-content"
  277. >
  278. <el-collapse
  279. v-if="item.children && item.children.length"
  280. v-model="item.activeChildren"
  281. @change="handleItemVal"
  282. v-show="item.children"
  283. class="borderless-collapse"
  284. >
  285. <el-collapse-item
  286. v-for="(child, childIndex) in item.children"
  287. :key="childIndex"
  288. :title="child.name"
  289. :name="child.id"
  290. class="min-width-content"
  291. >
  292. <el-collapse
  293. v-if="child.children && child.children.length"
  294. v-model="child.activeChildren"
  295. @change="handleChildItemVal"
  296. v-show="child.children"
  297. class="borderless-collapse"
  298. >
  299. <el-collapse-item
  300. v-for="(
  301. grandChild, grandChildIndex
  302. ) in child.children"
  303. :key="grandChildIndex"
  304. :title="grandChild.name"
  305. :name="grandChild.id"
  306. class="min-width-content"
  307. >
  308. <el-collapse
  309. v-if="
  310. grandChild.children && grandChild.children.length
  311. "
  312. v-model="grandChild.activeChildren"
  313. @change="handleGrandChildItemVal"
  314. v-show="grandChild.children"
  315. class="borderless-collapse"
  316. >
  317. <el-collapse-item
  318. v-for="(
  319. greatGrandChild, greatGrandChildIndex
  320. ) in grandChild.children"
  321. :key="greatGrandChildIndex"
  322. :title="greatGrandChild.name"
  323. :name="greatGrandChild.id"
  324. class="min-width-content"
  325. >
  326. <el-collapse
  327. v-if="
  328. greatGrandChild.children &&
  329. greatGrandChild.children.length
  330. "
  331. v-model="greatGrandChild.activeChildren"
  332. @change="handlegreatGrandChildItemVal"
  333. v-show="greatGrandChild.children"
  334. class="borderless-collapse"
  335. >
  336. <el-collapse-item
  337. v-for="(
  338. fiveChild, fiveIndex
  339. ) in greatGrandChild.children"
  340. :key="fiveIndex"
  341. :title="fiveChild.name"
  342. :name="fiveChild.id"
  343. class="min-width-content"
  344. >
  345. <draggable
  346. v-model="fiveChild.dataList"
  347. :options="{
  348. group: { name: 'itxst', pull: 'clone' },
  349. sort: true,
  350. }"
  351. :disabled="type === 'module'"
  352. >
  353. <transition-group>
  354. <div
  355. class="sub-menus min-width-content"
  356. v-for="(
  357. fiveIts, fiveIndex
  358. ) in fiveChild.dataList"
  359. :key="fiveIndex"
  360. >
  361. <div style="cursor: move">
  362. {{ fiveIts.name }}
  363. </div>
  364. </div>
  365. </transition-group>
  366. </draggable>
  367. </el-collapse-item>
  368. </el-collapse>
  369. <draggable
  370. v-model="greatGrandChild.dataList"
  371. :options="{
  372. group: { name: 'itxst', pull: 'clone' },
  373. sort: true,
  374. }"
  375. :disabled="type == 'module'"
  376. >
  377. <transition-group>
  378. <div
  379. class="sub-menus min-width-content"
  380. v-for="(
  381. its, index
  382. ) in greatGrandChild.dataList"
  383. :key="index"
  384. >
  385. <div style="cursor: move">
  386. {{ its.name }}
  387. </div>
  388. </div>
  389. </transition-group>
  390. </draggable>
  391. </el-collapse-item>
  392. </el-collapse>
  393. <draggable
  394. v-model="grandChild.dataList"
  395. :options="{
  396. group: { name: 'itxst', pull: 'clone' },
  397. sort: true,
  398. }"
  399. :disabled="type == 'module'"
  400. >
  401. <transition-group>
  402. <div
  403. class="sub-menus min-width-content"
  404. v-for="(it, index) in grandChild.dataList"
  405. :key="index"
  406. >
  407. <div style="cursor: move">{{ it.name }}</div>
  408. </div>
  409. </transition-group>
  410. </draggable>
  411. </el-collapse-item>
  412. </el-collapse>
  413. <draggable
  414. v-model="child.dataList"
  415. :options="{
  416. group: { name: 'itxst', pull: 'clone' },
  417. sort: true,
  418. }"
  419. :disabled="type == 'module'"
  420. >
  421. <transition-group>
  422. <div
  423. class="sub-menus min-width-content"
  424. v-for="(it, index) in child.dataList"
  425. :key="index"
  426. >
  427. <div style="cursor: move">{{ it.name }}</div>
  428. </div>
  429. </transition-group>
  430. </draggable>
  431. </el-collapse-item>
  432. </el-collapse>
  433. <draggable
  434. v-model="item.dataList"
  435. :options="{
  436. group: { name: 'itxst', pull: 'clone' },
  437. sort: true,
  438. }"
  439. :disabled="type == 'module'"
  440. >
  441. <transition-group>
  442. <div
  443. class="sub-menus min-width-content"
  444. v-for="(it, index) in item.dataList"
  445. :key="index"
  446. >
  447. <div style="cursor: move">{{ it.name }}</div>
  448. </div>
  449. </transition-group>
  450. </draggable>
  451. </el-collapse-item>
  452. </el-collapse>
  453. </div>
  454. </div>
  455. </div>
  456. <div class="right-sidebarew">
  457. <div
  458. v-if="type !== 'module'"
  459. class="sidebar-item"
  460. :class="showView == 0 ? 'active-item' : ''"
  461. @click="viewDocument"
  462. >
  463. <span v-if="type == 'document'">查看文档</span>
  464. <span v-else>查看模版</span>
  465. </div>
  466. <div
  467. v-if="type !== 'document'"
  468. class="sidebar-item"
  469. :class="showView == 1 ? 'active-item' : ''"
  470. @click="viewModule"
  471. >
  472. 模块列表
  473. </div>
  474. </div>
  475. </div> -->
  476. <div class="leftContent">
  477. <div class="catalog-content">
  478. <!-- 目录内容展示区域 -->
  479. <el-tree
  480. :data="catalogData"
  481. :props="catalogProps"
  482. default-expand-all
  483. @node-click="handleCatalogClick"
  484. draggable
  485. :allow-drop="allowDrop"
  486. :allow-drag="allowDrag"
  487. @node-drag-end="handleDragEnd"
  488. >
  489. <span class="custom-tree-node" slot-scope="{ data }">
  490. <span v-if="data.isEditing">
  491. <el-input
  492. v-model="data.editingContent"
  493. size="mini"
  494. @blur="handleEditComplete(data)"
  495. @keyup.enter.native="handleEditComplete(data)"
  496. ref="editInput"
  497. ></el-input>
  498. </span>
  499. <span v-else @dblclick="handleStartEdit(data)">
  500. {{ data.label }}
  501. </span>
  502. </span>
  503. </el-tree>
  504. </div>
  505. </div>
  506. <div class="editor-main">
  507. <!-- 添加tab页导航 -->
  508. <div class="editor-tabs">
  509. <el-tabs v-model="activeTab" type="card" @tab-click="handleClick">
  510. <el-tab-pane label="目录" name="catalog">
  511. <div class="catalog-content">
  512. <!-- 目录内容展示区域 -->
  513. <el-tree
  514. v-if="activeTab === 'catalog'"
  515. :data="catalogData"
  516. :props="{ children: 'children', label: 'label' }"
  517. node-key="id"
  518. draggable
  519. @node-drag-end="handleDirectoryDragEnd"
  520. >
  521. <span class="custom-tree-node" slot-scope="{ node, data }">
  522. <template v-if="data.isEditing">
  523. <el-input
  524. v-model="data.content"
  525. :ref="`directory-input-${data.id}`"
  526. size="mini"
  527. @blur="handleDirectorySave(data)"
  528. @keyup.enter.native="handleDirectorySave(data)"
  529. />
  530. </template>
  531. <template v-else>
  532. <span @dblclick="handleDirectoryEdit(data)">{{
  533. data.label
  534. }}</span>
  535. <span class="directory-actions">
  536. <el-button
  537. type="text"
  538. size="mini"
  539. @click="handleDirectoryEdit(data)"
  540. >
  541. 编辑
  542. </el-button>
  543. </span>
  544. </template>
  545. </span>
  546. </el-tree>
  547. </div>
  548. </el-tab-pane>
  549. <el-tab-pane label="模板内容" name="template">
  550. <div class="template-content">
  551. <!-- <div class="search-box">
  552. <el-input
  553. v-model="templateSearchKey"
  554. placeholder="搜索模板"
  555. @keyup.enter="handleTemplateSearch"
  556. clearable
  557. @clear="handleTemplateClear"
  558. >
  559. <i slot="prefix" class="el-input__icon el-icon-search"></i>
  560. </el-input>
  561. </div> -->
  562. <!-- 原有的menus和editor内容 -->
  563. <div class="menus-box">
  564. <menus
  565. @onEvents="onInsert"
  566. @onVariable="uptadeVariable"
  567. :comArr="coms"
  568. ></menus>
  569. </div>
  570. <div
  571. class="editor-box"
  572. ref="tabHtml"
  573. v-loading="loading"
  574. element-loading-text="加载中..."
  575. element-loading-spinner="el-icon-loading"
  576. >
  577. <editor
  578. ref="editor"
  579. :coms="coms"
  580. :comIndex="comIndex"
  581. :isAdmin="isAdmin"
  582. :templateCate="categoryList"
  583. :insertCmd="insertCmd"
  584. @onSetActiveIndex="onSetActiveIndex"
  585. @onInsert="onInsert"
  586. @onLoadArticle="onLoadArticle"
  587. @onRebuild="onRebuild"
  588. @onDelete="onRemove"
  589. @onSetComs="onSetComs"
  590. ></editor>
  591. </div>
  592. </div>
  593. </el-tab-pane>
  594. </el-tabs>
  595. </div>
  596. </div>
  597. <div class="module-list-container">
  598. <draggable
  599. v-model="coms"
  600. @add="onAdd"
  601. @update="onDragEnd"
  602. @end="onDragComplete"
  603. group="itxst"
  604. animation="300"
  605. handle=".drag-handle"
  606. :scroll="true"
  607. :scrollSensitivity="100"
  608. :scrollSpeed="20"
  609. >
  610. <transition-group style="display: block">
  611. <template v-for="(it, index) in coms">
  612. <div
  613. :key="index"
  614. class="module-item"
  615. :class="comIndex == index ? 'active-module' : ''"
  616. >
  617. <div class="drag-handle">
  618. <img
  619. src="@/icons/svg/drag.svg"
  620. style="width: 20px"
  621. icon-class="drag"
  622. />
  623. </div>
  624. <div class="module-info">
  625. <div class="module-content">
  626. <div class="module-category">
  627. <span class="label">模块分类:</span>
  628. <span class="value">{{
  629. getCategory(it.category_id)
  630. }}</span>
  631. </div>
  632. <div class="module-name">
  633. <span class="label">模块名称:</span>
  634. <span class="value">{{ it.dcb_name }}</span>
  635. </div>
  636. </div>
  637. </div>
  638. <div class="module-actions">
  639. <el-button
  640. v-if="type !== 'document'"
  641. type="text"
  642. size="mini"
  643. @click="onSaveTemplate(it)"
  644. >
  645. <i class="el-icon-document-add"></i> 保存
  646. </el-button>
  647. <el-button
  648. type="text"
  649. size="mini"
  650. @click="onEdit(index, it.isEdit !== 1 ? 1 : 2)"
  651. >
  652. <i :class="it.isEdit !== 1 ? 'el-icon-edit' : 'el-icon-view'"></i>
  653. {{ it.isEdit !== 1 ? "编辑" : "预览" }}
  654. </el-button>
  655. <el-button
  656. type="text"
  657. size="mini"
  658. @click="onRemove(index)"
  659. >
  660. <i class="el-icon-delete"></i> 删除
  661. </el-button>
  662. </div>
  663. </div>
  664. </template>
  665. </transition-group>
  666. </draggable>
  667. </div>
  668. </div>
  669. <!-- 新增资源选择弹框 -->
  670. <!-- <el-dialog
  671. title="请选择可用的资源"
  672. :visible.sync="resourceDialogVisible"
  673. width="800px"
  674. custom-class="resource-dialog"
  675. >
  676. <div class="resource-container">
  677. <div class="resource-header">
  678. <el-input
  679. v-model="resourceSearchKey"
  680. placeholder="请输入选择"
  681. prefix-icon="el-icon-search"
  682. clearable
  683. >
  684. </el-input>
  685. <div class="action-btns">
  686. <el-button type="primary" @click="createResource"
  687. >新建资源</el-button
  688. >
  689. <el-button type="primary" @click="createResourceCategory"
  690. >新建资源分类</el-button
  691. >
  692. </div>
  693. </div>
  694. <div class="resource-status">
  695. 已打开1个资源,已选择3个资源
  696. <el-button size="small" plain @click="refreshResources"
  697. >更新</el-button
  698. >
  699. </div>
  700. <div class="resource-content">
  701. <el-collapse v-model="activeCategories">
  702. <el-collapse-item name="dlp">
  703. <template slot="title">
  704. <span>DLP产品</span>
  705. <i class="el-icon-arrow-up"></i>
  706. </template>
  707. <div class="resource-list">
  708. <div
  709. v-for="item in dlpProducts"
  710. :key="item.id"
  711. class="resource-item"
  712. >
  713. <el-checkbox v-model="item.selected">
  714. {{ item.name }}
  715. </el-checkbox>
  716. <i class="el-icon-menu"></i>
  717. </div>
  718. </div>
  719. </el-collapse-item>
  720. <el-collapse-item name="led">
  721. <template slot="title">
  722. <span>LED产品系列</span>
  723. <i class="el-icon-arrow-up"></i>
  724. </template>
  725. <div class="resource-list">
  726. <div
  727. v-for="item in ledProducts"
  728. :key="item.id"
  729. class="resource-item"
  730. >
  731. <el-checkbox v-model="item.selected">
  732. {{ item.name }}
  733. </el-checkbox>
  734. <i class="el-icon-menu"></i>
  735. </div>
  736. </div>
  737. </el-collapse-item>
  738. <el-collapse-item name="processor">
  739. <template slot="title">
  740. <span>处理器</span>
  741. <i class="el-icon-arrow-up"></i>
  742. </template>
  743. <div class="resource-list">
  744. <div
  745. v-for="item in processors"
  746. :key="item.id"
  747. class="resource-item"
  748. >
  749. <el-checkbox v-model="item.selected">
  750. {{ item.name }}
  751. </el-checkbox>
  752. <i class="el-icon-menu"></i>
  753. </div>
  754. </div>
  755. </el-collapse-item>
  756. <el-collapse-item name="service">
  757. <template slot="title">
  758. <span>售后服务</span>
  759. <i class="el-icon-arrow-up"></i>
  760. </template>
  761. <div class="resource-list">
  762. <div
  763. v-for="item in services"
  764. :key="item.id"
  765. class="resource-item"
  766. >
  767. <el-checkbox v-model="item.selected">
  768. {{ item.name }}
  769. </el-checkbox>
  770. <i class="el-icon-menu"></i>
  771. </div>
  772. </div>
  773. </el-collapse-item>
  774. </el-collapse>
  775. </div>
  776. </div>
  777. </el-dialog> -->
  778. <el-dialog
  779. :visible.sync="showViewForm"
  780. :close-on-click-modal="false"
  781. append-to-body
  782. v-el-drag-dialog
  783. width="850px"
  784. custom-class="prod-verify"
  785. title="文档预览"
  786. >
  787. <ViewForm :coms="coms" :docAttr="docAttr"></ViewForm>
  788. </el-dialog>
  789. <el-dialog
  790. :visible.sync="showProductAttr"
  791. append-to-body
  792. v-el-drag-dialog
  793. :close-on-click-modal="false"
  794. width="850px"
  795. custom-class="prod-verify"
  796. title="插入产品属性"
  797. >
  798. <ProductAttr
  799. :docAttr="docAttr"
  800. @onInsertProductAttr="onInsertProductAttr"
  801. ></ProductAttr>
  802. </el-dialog>
  803. <el-dialog
  804. :visible.sync="docVisible"
  805. append-to-body
  806. v-el-drag-dialog
  807. :close-on-click-modal="false"
  808. width="500px"
  809. custom-class="prod-verify"
  810. title="文档信息"
  811. >
  812. <el-form
  813. :model="docForm"
  814. :rules="docRules"
  815. ref="docRef"
  816. label-width="120px"
  817. >
  818. <el-form-item label="文档标题:" prop="dcm_title">
  819. <el-input
  820. v-model="docForm.dcm_title"
  821. style="width: 60%"
  822. class="input-item"
  823. placeholder="请填写文档标题"
  824. :disabled="docAttr.id > 0"
  825. />
  826. </el-form-item>
  827. <el-form-item label="文档模板类别:" prop="dcm_type">
  828. <el-select
  829. v-model="docForm.dcm_type"
  830. style="width: 60%"
  831. placeholder="请选择文档模板类别"
  832. :disabled="docAttr.id > 0"
  833. >
  834. <!-- <el-option
  835. v-for="(item, index) in articleCategoryList"
  836. :key="index"
  837. :label="item.name"
  838. :value="item.id"
  839. /> -->
  840. <el-option label="官方模板" :value="1" />
  841. <el-option label="私有模板" :value="2" />
  842. <el-option label="共享模板" :value="3" />
  843. </el-select>
  844. </el-form-item>
  845. <el-form-item label="文档分类:">
  846. <el-select
  847. v-model="docForm.dcm_category_id"
  848. style="width: 60%"
  849. placeholder="请选择文档模板类别"
  850. :disabled="docAttr.id > 0"
  851. ><el-option
  852. v-for="(item, index) in articleCategoryList"
  853. :key="index"
  854. :label="item.name"
  855. :value="item.id"
  856. />
  857. </el-select>
  858. <!-- {{ userInfo && userInfo.username }} -->
  859. </el-form-item>
  860. </el-form>
  861. <span slot="footer" class="dialog-footer">
  862. <el-button @click="closeDoc">取 消</el-button>
  863. <el-button type="primary" @click="submitDoc">确 定</el-button>
  864. </span>
  865. </el-dialog>
  866. </div>
  867. </template>
  868. <script>
  869. import { findData } from "@/api/sourceData";
  870. /* import utils from "@/utils/fun"; // 方法类 */
  871. import { searchDocument, pageDocument } from "@/api/document";
  872. import menus from "./com/menus";
  873. import editor from "./com/editor";
  874. import Attribute from "./com/components/Attribute";
  875. import attributeVar from "./com/components/Attribute/attributeVar/index.vue";
  876. import ProductAttr from "./com/components/ProductAttr";
  877. import {
  878. searchTemplateCategory,
  879. searchTemplate,
  880. getTemplateInfo,
  881. getAllCategory,
  882. createTemplate,
  883. updateTemplate,
  884. } from "@/api/template";
  885. import docAttr from "./com/components/Attribute/docAttr";
  886. import comList from "./com/components/Attribute/comList";
  887. import Directory from "./com/components/Attribute/Directory";
  888. import { getCurrentUserInfo } from "@/api/api";
  889. import {
  890. createDocument,
  891. updateDocument,
  892. getDocumentInfo,
  893. exportDocument,
  894. searchDocumentCategory,
  895. } from "@/api/document";
  896. import ViewForm from "./com/view";
  897. import elDragDialog from "@/directive/el-drag-dialog";
  898. import draggable from "vuedraggable";
  899. import htmlDocx from "html-docx-js/dist/html-docx";
  900. import { searchFormula } from "@/api/formula";
  901. import axios from "axios";
  902. import settings from "@/settings";
  903. // import htmlDocx from "htmlDocx";
  904. export default {
  905. name: "create",
  906. components: {
  907. menus,
  908. editor,
  909. Attribute,
  910. comList,
  911. docAttr,
  912. ViewForm,
  913. ProductAttr,
  914. Directory,
  915. draggable,
  916. attributeVar,
  917. },
  918. directives: {
  919. elDragDialog,
  920. },
  921. data() {
  922. return {
  923. activeNames: "-1",
  924. nestedActiveNames: [],
  925. articleList: [],
  926. activeModel: "",
  927. templateList: [],
  928. categoryList: [],
  929. //组件相关
  930. coms: [],
  931. comIndex: 9999, //当前组件索引
  932. showProductAttr: false,
  933. comList: [],
  934. //文档属性
  935. docAttr: {
  936. id: 0,
  937. dcm_category_id: "",
  938. title: "",
  939. content: "",
  940. status: 5,
  941. links: "",
  942. linkProduct: [],
  943. linkProject: [],
  944. projects: "",
  945. },
  946. insertCmd: null,
  947. showViewForm: false,
  948. isAdmin: 2, //1是管理员,2非管理员
  949. //当前选中表格
  950. tabExt: {
  951. row: 0,
  952. col: 0,
  953. },
  954. userInfo: null,
  955. articleId: 0,
  956. loading: false, // 增加 loading 状态
  957. showView: 0, //查看 文档/模块
  958. childrenList: "",
  959. value: [],
  960. AttributeIndex: 0,
  961. catalogIndex: 0, //目录信息
  962. docuComIndex: 3,
  963. type: "",
  964. docVisible: false,
  965. docForm: {
  966. dcm_title: "",
  967. dcm_type: "",
  968. dcm_category_id: "",
  969. },
  970. docRules: {
  971. dcm_title: [
  972. { required: true, message: "请输文档名称", trigger: "blur" },
  973. ],
  974. dcm_type: [
  975. { required: true, message: "请选择文档模板分类", trigger: "change" },
  976. ],
  977. dcm_category_id: [
  978. { required: true, message: "请选择文档分类", trigger: "change" },
  979. ],
  980. },
  981. articleCategoryList: [],
  982. //方案
  983. searchKey: "",
  984. currentScheme: "",
  985. expandedKeys: [], // 默认展开的节点
  986. schemeData: [],
  987. defaultProps: {
  988. children: "children",
  989. label: "label",
  990. },
  991. /* 资源 */
  992. resourceDialogVisible: false,
  993. resourceSearchKey: "",
  994. activeCategories: ["dlp", "led", "processor", "service"],
  995. dlpProducts: [
  996. { id: 1, name: "产品选型/DLP/单元/", selected: false },
  997. { id: 2, name: "产品选型/DLP/机芯/", selected: true },
  998. { id: 3, name: "产品选型/DLP/控制盒/", selected: true },
  999. ],
  1000. ledProducts: [
  1001. { id: 4, name: "产品选型/LED/黄河系/", selected: false },
  1002. { id: 5, name: "产品选型/LED/华夏系/", selected: true },
  1003. { id: 6, name: "产品选型/LED/黄河单元/", selected: false },
  1004. ],
  1005. processors: [
  1006. { id: 7, name: "产品选型/处理器/D301/", selected: false },
  1007. { id: 8, name: "产品选型/处理器/IPWH300/", selected: false },
  1008. { id: 9, name: "产品选型/处理器/IPWD400/", selected: false },
  1009. ],
  1010. services: [
  1011. { id: 10, name: "产品选型/处理器/IPWH300/", selected: false },
  1012. { id: 11, name: "产品选型/处理器/IPWH301/", selected: false },
  1013. { id: 12, name: "产品选型/处理器/IPWD400/", selected: false },
  1014. ],
  1015. /* 目录/模板 */
  1016. activeTab: "template", // 默认显示模板内容tab
  1017. catalogData: [], // 目录数据
  1018. catalogProps: {
  1019. children: "children",
  1020. label: "label",
  1021. },
  1022. templateSearchKey: "", // 添加模板搜索关键字
  1023. originalTemplateList: [], // 保存原始模板列表
  1024. isSaving: false,
  1025. saveAs: false,
  1026. isSchemeCollapsed: false,
  1027. isResourceCollapsed: false,
  1028. };
  1029. },
  1030. watch: {
  1031. coms: {
  1032. handler(newComs, oldComs) {
  1033. this.updateAttrs(newComs, oldComs);
  1034. },
  1035. immediate: true, //立即执行
  1036. deep: true,
  1037. },
  1038. articleId: {
  1039. handler(val) {
  1040. if (val == null || val == undefined || val <= 0) return;
  1041. if (this.$route.query.type == "document") {
  1042. this.loadArticle(val);
  1043. } else {
  1044. this.onTemplateInfo(val);
  1045. }
  1046. //
  1047. },
  1048. immediate: true,
  1049. deep: true,
  1050. },
  1051. coms: {
  1052. handler(newComs) {
  1053. this.updateCatalog(newComs);
  1054. },
  1055. deep: true,
  1056. },
  1057. comIndex: {
  1058. handler(newIndex) {
  1059. // 高亮当前选中模块对应的目录项
  1060. this.$nextTick(() => {
  1061. this.highlightCurrentCatalogItem(newIndex);
  1062. });
  1063. },
  1064. },
  1065. },
  1066. async mounted() {
  1067. this.articleId = this.$route.query.articleId;
  1068. this.type = this.$route.query.type;
  1069. if (this.type == "module") {
  1070. this.showView = 1;
  1071. }
  1072. this.searchArticle();
  1073. await this.initCategoryList();
  1074. await this.initCurrentUser();
  1075. let templateId = this.$route.query.templateId;
  1076. if (templateId > 0) {
  1077. this.loadTemplateInfo(templateId);
  1078. }
  1079. this.isAdmin = 2; //this.userInfo ? this.userInfo.roleInfo.is_admin : 2;
  1080. this.initArticleCategoryList();
  1081. if (this.type !== "module" && this.type !== "document") {
  1082. document.title = "新建模版-" + settings.title;
  1083. }
  1084. if (
  1085. this.type !== "module" &&
  1086. this.type !== "document" &&
  1087. this.articleId !== undefined
  1088. ) {
  1089. document.title = this.docAttr.title + settings.title;
  1090. }
  1091. this.$nextTick(() => {
  1092. const arrows = document.querySelectorAll(".el-collapse-item__arrow");
  1093. arrows.forEach((arrow) => {
  1094. arrow.style.margin = "0";
  1095. });
  1096. });
  1097. this.initTemplateSelection();
  1098. this.expandedKeys = []; // 初始化展开节点数组
  1099. //this.initCatalog(); // 初始化目录
  1100. },
  1101. methods: {
  1102. /* 切换目录/模板 */
  1103. handleClick(val) {
  1104. if (val.name === "catalog") {
  1105. this.updateCatalog(this.coms);
  1106. }
  1107. },
  1108. // 更新目录数据
  1109. updateCatalog(modules) {
  1110. let catalogData = [];
  1111. modules.forEach((module, moduleIndex) => {
  1112. // 获取并排序目录类型的属性
  1113. const directoryAttrs = module.attrs
  1114. .filter((attr) => attr.type === "Directory")
  1115. .sort((a, b) => {
  1116. // 首先按层级排序
  1117. if (a.level !== b.level) return a.level - b.level;
  1118. // 同层级按编号自然排序
  1119. return a.number.localeCompare(b.number, undefined, {
  1120. numeric: true,
  1121. });
  1122. });
  1123. directoryAttrs.forEach((attr) => {
  1124. const catalogItem = {
  1125. id: attr.id,
  1126. label: `${attr.number} ${attr.content}`,
  1127. level: attr.level,
  1128. moduleIndex: moduleIndex,
  1129. content: attr.content,
  1130. number: attr.number,
  1131. children: [],
  1132. isEditing: false,
  1133. };
  1134. // 根据level确定目录层级
  1135. if (attr.level === 1) {
  1136. catalogData.push(catalogItem);
  1137. } else {
  1138. // 查找父级目录并添加为子项
  1139. const parent = this.findParentDirectory(catalogData, attr.number);
  1140. if (parent) {
  1141. parent.children.push(catalogItem);
  1142. }
  1143. }
  1144. });
  1145. });
  1146. this.catalogData = catalogData;
  1147. this.$nextTick(() => this.$forceUpdate());
  1148. },
  1149. // 添加 findParentDirectory 辅助方法
  1150. findParentDirectory(catalogData, number) {
  1151. const parentNumber = number.split(".").slice(0, -1).join(".");
  1152. const findInChildren = (items) => {
  1153. for (let item of items) {
  1154. if (item.label.startsWith(parentNumber + " ")) {
  1155. return item;
  1156. }
  1157. if (item.children) {
  1158. const found = findInChildren(item.children);
  1159. if (found) return found;
  1160. }
  1161. }
  1162. return null;
  1163. };
  1164. return findInChildren(catalogData);
  1165. },
  1166. /* 方案点击 */
  1167. handleNodeClick(data) {
  1168. console.log(data);
  1169. this.currentScheme = data.label;
  1170. this.resourceDialogVisible = true; // 点击方案时打开资选择弹框
  1171. },
  1172. createScheme() {
  1173. // 实现新建方案逻辑
  1174. this.$message.success("新建方案");
  1175. },
  1176. createCategory() {
  1177. // 实现新建分类逻辑
  1178. this.$message.success("新建分类");
  1179. },
  1180. /* 资源 */
  1181. createResource() {
  1182. this.$message.success("新建资源");
  1183. },
  1184. createResourceCategory() {
  1185. this.$message.success("新建资源分类");
  1186. },
  1187. refreshResources() {
  1188. this.$message.success("刷新资源列表");
  1189. },
  1190. /* 目录模板 */
  1191. handleCatalogClick(data) {
  1192. // 如果正在编辑,不触发其他操作
  1193. if (data.isEditing) return;
  1194. // 其他点击处理逻辑...
  1195. console.log("点击的目录项:", data);
  1196. },
  1197. handleItemVal(value) {
  1198. this.$forceUpdate();
  1199. this.loadChildren(value);
  1200. },
  1201. handleChildItemClick(child) {
  1202. if (!child.children) {
  1203. this.loadChildren(child);
  1204. }
  1205. },
  1206. handleChildItemVal(value) {
  1207. this.$forceUpdate();
  1208. this.loadChildren(value);
  1209. },
  1210. handleGrandChildItemClick(grandChild) {
  1211. if (!grandChild.children) {
  1212. this.loadChildren(grandChild);
  1213. }
  1214. },
  1215. handleGrandChildItemVal(value) {
  1216. this.loadChildren(value);
  1217. this.$forceUpdate();
  1218. },
  1219. handlegreatGrandChildItemVal(greatGrandChild) {
  1220. this.loadChildren(greatGrandChild);
  1221. this.$forceUpdate();
  1222. },
  1223. async loadChildren(category) {
  1224. const category_id = category[category.length - 1];
  1225. try {
  1226. const res = await searchTemplateCategory({ parent_id: category_id });
  1227. if (res.status != 200 || res.data.length == 0) return;
  1228. const newChildren = res.data;
  1229. for (let i = 0; i < newChildren.length; i++) {
  1230. newChildren[i].dataList = await this.getTemplateList(
  1231. newChildren[i].id
  1232. );
  1233. }
  1234. this.insertChildrenById(this.categoryList, category_id, newChildren);
  1235. console.log(this.categoryList);
  1236. this.$forceUpdate(); // Force Vue to re-render the component
  1237. } catch (error) {
  1238. console.error("Error fetching template categories:", error);
  1239. }
  1240. },
  1241. insertChildrenById(list, id, newChildren) {
  1242. for (let item of list) {
  1243. if (item.id === id) {
  1244. this.$set(item, "children", newChildren); // Use Vue.set to ensure reactivity
  1245. return true; // Stop searching once the item is found
  1246. }
  1247. if (item.children && item.children.length > 0) {
  1248. const found = this.insertChildrenById(item.children, id, newChildren);
  1249. if (found) return true; // Stop searching if the item is found in deeper levels
  1250. }
  1251. }
  1252. return false; // Continue searching
  1253. },
  1254. /* 取消新增 */
  1255. closeDoc() {
  1256. this.docVisible = false;
  1257. this.docForm = {
  1258. dcm_title: "",
  1259. dcm_type: "",
  1260. dcm_category_id: "",
  1261. };
  1262. },
  1263. /* 确定新增模块*/
  1264. submitDoc() {
  1265. this.$refs.docRef.validate((valid) => {
  1266. if (valid) {
  1267. this.docAttr.dcm_title = this.docForm.dcm_title;
  1268. this.docAttr.dcm_type = this.docForm.dcm_type;
  1269. this.docAttr.dcm_category_id = this.docForm.dcm_category_id;
  1270. this.onSave();
  1271. }
  1272. });
  1273. },
  1274. //加载文档分类
  1275. initArticleCategoryList() {
  1276. let _this = this;
  1277. searchDocumentCategory({ page: 1, pageSize: 99, status: 5 }).then(
  1278. (res) => {
  1279. if (res.status != 200) return;
  1280. _this.articleCategoryList = res.data.dataList;
  1281. }
  1282. );
  1283. },
  1284. updateAttrs(newComs, oldComs) {
  1285. newComs.forEach((newCom, comIndex) => {
  1286. const oldCom = oldComs[comIndex];
  1287. console.log("oldCom:", oldCom, "newCom:", newCom);
  1288. if (oldCom) {
  1289. newCom.attrs.forEach((newAttr, attrIndex) => {
  1290. const oldAttr = oldCom.attrs[attrIndex];
  1291. if (oldAttr && newAttr.content !== oldAttr.content) {
  1292. // 内容发生变化,进行全局更新
  1293. this.updateGlobalAttr(newAttr.name, newAttr.content);
  1294. }
  1295. });
  1296. }
  1297. });
  1298. },
  1299. updateGlobalAttr(attrId, newContent) {
  1300. // 遍历所有组件,更新匹配的属性
  1301. this.coms.forEach((com) => {
  1302. console.log(com);
  1303. com.attrs.forEach((attr) => {
  1304. // 只更新非 variableNull 类型的属性
  1305. if (attr.name === attrId && attr.type !== "variableNull") {
  1306. attr.content = newContent;
  1307. }
  1308. });
  1309. // 如果是文本区域,更新内容中的占位符
  1310. if (com.dcb_type === "TextArea") {
  1311. com.content = com.content.replace(
  1312. new RegExp(`{{${attrId}}}`, "g"),
  1313. (match) => {
  1314. const attr = com.attrs.find((a) => a.id === attrId);
  1315. if (attr && attr.type !== "variableNull") {
  1316. return newContent;
  1317. }
  1318. return match; // 保留 variableNull 类型的原始占位符
  1319. }
  1320. );
  1321. }
  1322. });
  1323. // 触发视图更新
  1324. this.replaceData(this.coms);
  1325. this.$forceUpdate();
  1326. },
  1327. async replaceData(data) {
  1328. for (let item of this.coms) {
  1329. for (let el of item.attrs) {
  1330. let attrId = el.id;
  1331. if (el.type === "formual") {
  1332. try {
  1333. let formual = await this.analysisFormual(el);
  1334. formual = await this.getRemote(formual);
  1335. el.content = eval(formual);
  1336. } catch (error) {
  1337. console.error("处理公式时出错:", error);
  1338. }
  1339. } else if (el.type === "variableNull") {
  1340. // 保留 variableNull 类型的原始内容
  1341. el.content = el.content || "请输入";
  1342. }
  1343. }
  1344. }
  1345. return data;
  1346. },
  1347. //分析公式
  1348. async analysisFormual(attrs) {
  1349. let _this = this;
  1350. // console.log("开始分析公式:", attrs.formula);
  1351. var pattern = /(\[.*?\]){3}/;
  1352. var formual = attrs.formula;
  1353. var reg = new RegExp(pattern);
  1354. while (true) {
  1355. var items = formual.match(reg);
  1356. if (items == null) break;
  1357. let itemName = items[0];
  1358. // console.log("处理项:", itemName);
  1359. try {
  1360. let data = await _this.getFormualData(itemName);
  1361. // console.log(`获取到的数据: ${itemName} = ${data}`);
  1362. if (data === null || data === undefined || isNaN(data)) {
  1363. console.warn(`获取到的数据无效: ${itemName}`);
  1364. formual = formual.replace(itemName, "(0)");
  1365. } else {
  1366. formual = formual.replace(itemName, `(${parseFloat(data)})`);
  1367. }
  1368. } catch (error) {
  1369. console.error(`处理 ${itemName} 时出错:`, error);
  1370. formual = formual.replace(itemName, "(0)");
  1371. }
  1372. }
  1373. // console.log("分析后的公式:", formual);
  1374. return formual;
  1375. },
  1376. async getFormualData(formualItem) {
  1377. let _this = this;
  1378. // console.log("开始获取公式数据:", formualItem);
  1379. var pattern = /\[(.*?)\]\[(.*?)\]\[(.*?)\]/;
  1380. var reg = new RegExp(pattern);
  1381. let items = formualItem.match(reg);
  1382. // console.log("解析结果:", items);
  1383. let calResult = 0;
  1384. if (items && items[1] == "T") {
  1385. calResult = await _this.getModuleData(items[2], items[3]);
  1386. } else {
  1387. console.warn("无法解析公式项:", formualItem);
  1388. }
  1389. // console.log("计算结果:", calResult);
  1390. return calResult;
  1391. },
  1392. //获取本地文档模块数据
  1393. async getModuleData(code, attrName) {
  1394. let _this = this;
  1395. // console.log(`尝试获取模块数据: code=${code}, attrName=${attrName}`);
  1396. // console.log("当前 coms:", _this.coms);
  1397. let item = _this.coms.filter((o) => o.name == code);
  1398. // console.log(`找到的模块:`, item);
  1399. if (item.length > 0) {
  1400. let attr = item[0].attrs.filter((o) => o.name == attrName);
  1401. // console.log(`找到的属性:`, attr);
  1402. if (attr.length > 0) {
  1403. // console.log(`返回的值:`, attr[0].content);
  1404. return parseFloat(attr[0].content);
  1405. }
  1406. }
  1407. // console.log("未找到匹配的模块或属性,返回 0");
  1408. return 0;
  1409. },
  1410. async getRemote(formual) {
  1411. let _this = this;
  1412. var pattern = /\[(.*?)\]\[(.*?)\]\[(.*?)\]\[(.*?)\]/;
  1413. var reg = new RegExp(pattern);
  1414. while (true) {
  1415. let items = formual.match(reg);
  1416. if (items == null) break;
  1417. if (items[1] == "R") {
  1418. //表示获取远程数据
  1419. var dataIndex = items[4];
  1420. dataIndex = items[4].split(",");
  1421. let calResult = await _this.getRemoteData(
  1422. items[2],
  1423. items[3],
  1424. dataIndex[0],
  1425. dataIndex[1]
  1426. );
  1427. let itemName = items[0];
  1428. // 检查calResult是否为数字
  1429. if (!isNaN(calResult)) {
  1430. formual = formual.replace(
  1431. itemName,
  1432. "(" + parseFloat(calResult) + ")"
  1433. );
  1434. } else {
  1435. formual = formual.replace(itemName, `"${calResult}"`);
  1436. }
  1437. formual = formual.replace(
  1438. itemName,
  1439. "(" + parseFloat(calResult) + ")"
  1440. );
  1441. }
  1442. }
  1443. return formual;
  1444. },
  1445. async getRemoteData(code, sheet, row, col) {
  1446. let _this = this;
  1447. let result = 0;
  1448. let par = {
  1449. code: code,
  1450. sheetName: sheet,
  1451. row: row,
  1452. col: col,
  1453. };
  1454. /* if (!this.isEditing) {
  1455. this.loading = true;
  1456. this.progress = 0;
  1457. try {
  1458. const updateProgress = setInterval(() => {
  1459. if (this.progress < 90) {
  1460. this.progress += 10;
  1461. }
  1462. }, 100);
  1463. let res = await findData(par);
  1464. if (res.status == 200) {
  1465. result = res.data.result;
  1466. }
  1467. this.progress = 100;
  1468. clearInterval(updateProgress);
  1469. } catch (error) {
  1470. console.error("Error fetching remote data:", error);
  1471. } finally {
  1472. setTimeout(() => {
  1473. this.loading = false;
  1474. this.progress = 0;
  1475. }, 1000);
  1476. }
  1477. } else { */
  1478. // 如果正在编辑,直接获取数据而不显示进度条
  1479. try {
  1480. let res = await findData(par);
  1481. if (res.status == 200) {
  1482. result = res.data.result;
  1483. // 添加数据类型检查和转换
  1484. if (typeof result === "string" && !isNaN(result)) {
  1485. result = parseFloat(result);
  1486. }
  1487. }
  1488. } catch (error) {
  1489. console.error("获取远程数据错误:", error);
  1490. }
  1491. /* } */
  1492. return result;
  1493. },
  1494. /*
  1495. handleItemVal(value) {
  1496. console.log(value);
  1497. this.$forceUpdate();
  1498. }, */
  1499. async handleItemClick(item) {
  1500. const category = this.categoryList.find((cat) => cat.id === item);
  1501. if (!category) return;
  1502. if (!category.children) {
  1503. try {
  1504. const res = await searchTemplateCategory({ parent_id: item });
  1505. if (res.status != 200 || res.data.length == 0) return;
  1506. category.children = res.data;
  1507. for (let i = 0; i < category.children.length; i++) {
  1508. category.children[i].dataList = await this.getTemplateList(
  1509. category.children[i].id
  1510. );
  1511. }
  1512. } catch (error) {
  1513. console.error("Error fetching template categories:", error);
  1514. }
  1515. }
  1516. // 触发视图更新
  1517. this.$set(category, "activeChildren", category.activeChildren || []);
  1518. },
  1519. /* 切换标签 */
  1520. viewDocument() {
  1521. this.showView = 0;
  1522. },
  1523. viewModule() {
  1524. this.showView = 1;
  1525. },
  1526. /* 更新变 */
  1527. /* uptadeVariable(value) {
  1528. for (const item of this.coms) {
  1529. for (const el of item.attrs) {
  1530. if (el.type === "variable") {
  1531. if (el.data.id == value.id) {
  1532. el.content = value.value;
  1533. el.data = value;
  1534. }
  1535. } else if (el.type === "constant") {
  1536. if (el.data.id == value.id) {
  1537. el.content = value.value;
  1538. el.data = value;
  1539. }
  1540. }
  1541. }
  1542. }
  1543. } */
  1544. uptadeVariable(value) {
  1545. const { id, value: newValue } = value;
  1546. this.coms.forEach((item) => {
  1547. item.attrs.forEach((el) => {
  1548. if (
  1549. (el.type === "variable" || el.type === "constant") &&
  1550. el.data.id === id
  1551. ) {
  1552. el.content = newValue;
  1553. el.data = value;
  1554. }
  1555. });
  1556. });
  1557. },
  1558. /* 更新检索内容 */
  1559. async uptadeSearch() {
  1560. for (const item of this.coms) {
  1561. for (const el of item.attrs) {
  1562. if (el.type === "ai") {
  1563. // await this.retrieval(el);
  1564. }
  1565. }
  1566. }
  1567. },
  1568. /* 初始化检索 */
  1569. async retrieval(el) {
  1570. this.loading = true; // 开始加载动画
  1571. try {
  1572. const response = await axios.post(
  1573. "http://58.246.234.210:7860/api/v1/run/3f84a841-cefd-44b3-9555-568cc3b6c2d2?stream=false",
  1574. {
  1575. input_value: el.search,
  1576. output_type: "chat",
  1577. input_type: "chat",
  1578. tweaks: {
  1579. "ChatInput-em6qC": {},
  1580. "ParseData-yO3YQ": {},
  1581. "Prompt-Wj75b": {},
  1582. "ChatOutput-zy9na": {},
  1583. "SplitText-O1knk": {},
  1584. "File-4j6Zd": {},
  1585. "OllamaEmbeddings-xbYXX": {},
  1586. "Chroma-OIejP": {},
  1587. "OllamaModel-04mEO": {},
  1588. "OllamaEmbeddings-UGvLP": {},
  1589. "Chroma-HzukO": {},
  1590. },
  1591. },
  1592. {
  1593. headers: {
  1594. "Content-Type": "application/json",
  1595. },
  1596. }
  1597. );
  1598. if (response.status === 200) {
  1599. // 假设返回的数据在 response.data.outputs[0].outputs[0].results.message.data.text 中
  1600. const resultText =
  1601. response.data.outputs[0].outputs[0].results.message.data.text;
  1602. // 将搜索词和生成的内容存在 searchResult 对象中
  1603. el.content = resultText; // 重新赋值给原数组对应 content
  1604. }
  1605. } catch (error) {
  1606. console.error("Error during retrieval:", error);
  1607. this.$message.error("检索失败,请稍后重试");
  1608. } finally {
  1609. this.loading = false; // 结束加载动画
  1610. }
  1611. },
  1612. async loadTemplateInfo(id) {
  1613. try {
  1614. // 获取模板信息
  1615. const { data } = await getTemplateInfo(id);
  1616. console.log(!data.dcb_attrs || !data.dcb_type);
  1617. // 设置默认值
  1618. if (!data.dcb_attrs || !data.dcb_type) {
  1619. Object.assign(data, {
  1620. dcb_attrs: "[]",
  1621. dcb_nr: "请填写内容",
  1622. lay_id: "textArea",
  1623. dcb_type: "TextArea",
  1624. });
  1625. }
  1626. // 设置文档标题
  1627. document.title = data.name
  1628. ? `${data.name}-${settings.title}`
  1629. : "新建模块-" + settings.title;
  1630. // 解析属性
  1631. data.dcb_attrs = JSON.parse(data.dcb_attrs);
  1632. data.content = data.dcb_nr;
  1633. data.type = data.dcb_type;
  1634. data.name = data.dcb_name;
  1635. data.attrs = data.dcb_attrs;
  1636. // 获取公式并更新属性
  1637. const {
  1638. data: { dataList },
  1639. } = await searchFormula({ page: 1, pageSize: 999 });
  1640. console.log(data);
  1641. data.dcb_attrs = data.dcb_attrs.map((item) => {
  1642. const formula = dataList.find((el) => el.id === item.id);
  1643. return formula
  1644. ? { ...item, formula: formula.formula, data: formula }
  1645. : item;
  1646. });
  1647. // 从 content 中提取 {{}} 包裹的 ID
  1648. const contentIds = (data.dcb_nr.match(/{{([^}]+)}}/g) || []).map(
  1649. (match) => match.slice(2, -2).trim()
  1650. );
  1651. // 过滤 attrs,只保留在 content 中出的 ID
  1652. data.dcb_attrs = data.dcb_attrs.filter((item) =>
  1653. contentIds.includes(item.id)
  1654. );
  1655. this.coms = [data];
  1656. } catch (error) {
  1657. console.error("加载模板信息失败:", error);
  1658. }
  1659. },
  1660. onExport(e) {
  1661. let _this = this;
  1662. _this.comIndex = -1;
  1663. let content = _this.$refs.tabHtml.innerHTML;
  1664. },
  1665. onOpenView(e) {
  1666. console.log("this.coms", this.coms);
  1667. this.showViewForm = true;
  1668. },
  1669. onClose() {
  1670. this.$confirm("是否要关闭文档?", "提示", {
  1671. confirmButtonText: "确定",
  1672. cancelButtonText: "取消",
  1673. type: "warning",
  1674. })
  1675. .then(() => {
  1676. this.$router.back();
  1677. })
  1678. .catch(() => {
  1679. this.$message({
  1680. type: "info",
  1681. message: "已取消",
  1682. });
  1683. });
  1684. },
  1685. loadArticle(e) {
  1686. let _this = this;
  1687. _this.onLoadArticle(e);
  1688. /* getDocumentInfo({
  1689. id: e,
  1690. }).then((res) => {
  1691. if (res.status != 200) return;
  1692. _this.onLoadArticle(res.data);
  1693. }); */
  1694. },
  1695. handleDragStart(e) {
  1696. let data = {};
  1697. if (e.target.dataset.type == "article") {
  1698. let index = e.target.dataset.index;
  1699. data = {
  1700. optType: e.target.dataset.type,
  1701. item: this.articleList[index],
  1702. };
  1703. } else {
  1704. let index = e.target.dataset.index;
  1705. let subIndex = e.target.dataset.subIndex;
  1706. let item = this.categoryList[index].dataList[subIndex];
  1707. delete item.category;
  1708. data = {
  1709. ...item,
  1710. optType: e.target.dataset.type,
  1711. key: "addNew",
  1712. attrs: JSON.parse(item.attrs),
  1713. };
  1714. }
  1715. e.dataTransfer.setData("item", JSON.stringify(data));
  1716. this.operation = "drag";
  1717. },
  1718. onRebuild(comList) {
  1719. try {
  1720. // 深拷贝以避免引用问题
  1721. const newComList = JSON.parse(JSON.stringify(comList));
  1722. // 确保每个组件的属性都被正确处理
  1723. newComList.forEach((com) => {
  1724. // 确保 dcb_attrs 是数组
  1725. if (!Array.isArray(com.dcb_attrs)) {
  1726. com.dcb_attrs = [];
  1727. }
  1728. // 确保 attrs 是数组
  1729. if (!Array.isArray(com.attrs)) {
  1730. com.attrs = [];
  1731. }
  1732. // 处理其他必要的属性
  1733. com.content = com.content || com.dcb_nr || "";
  1734. com.dcb_nr = com.content || com.dcb_nr || "";
  1735. com.type = com.dcb_type || com.type;
  1736. com.name = com.dcb_name || com.name;
  1737. });
  1738. // 更新组件列表
  1739. this.coms = newComList;
  1740. // 保存到本地存储
  1741. this.saveToLocalStorage();
  1742. } catch (error) {
  1743. console.error("重建组件时出错:", error);
  1744. this.$message.error("重建组件失败:" + error.message);
  1745. }
  1746. },
  1747. // 添加一个保存到本地存储的方法
  1748. saveToLocalStorage() {
  1749. try {
  1750. localStorage.setItem("document_coms", JSON.stringify(this.coms));
  1751. } catch (error) {
  1752. console.warn("保存到本地存储失败:", error);
  1753. }
  1754. },
  1755. //初始化当前用户信息
  1756. async initCurrentUser() {
  1757. let _this = this;
  1758. let res = await getCurrentUserInfo();
  1759. if (res.status != 200) return;
  1760. _this.userInfo = res.data;
  1761. },
  1762. //加载文档信息
  1763. async onLoadArticle(id) {
  1764. try {
  1765. this.loading = true;
  1766. // 在加载文档前重置所有模板状态
  1767. this.resetAllTemplateSelections();
  1768. const res = await getDocumentInfo(id);
  1769. if (res.status !== 200) {
  1770. throw new Error("Invalid response status");
  1771. }
  1772. this.docAttr = {
  1773. dcm_id: res.data.dcm_id,
  1774. dcm_type: Number(res.data.dcm_type),
  1775. dcm_category_id: res.data.dcm_category_id,
  1776. dcm_title: res.data.dcm_title,
  1777. content: "",
  1778. status: res.data.status,
  1779. is_template: res.data.is_template,
  1780. linkProduct: res.data.linkProduct,
  1781. links: res.data.links,
  1782. linkProject: res.data.linkProject,
  1783. projects: res.data.projects,
  1784. };
  1785. // 同时更新 docForm
  1786. this.docForm = {
  1787. dcm_title: res.data.dcm_title,
  1788. dcm_type: Number(res.data.dcm_type),
  1789. dcm_category_id: res.data.dcm_category_id, // 确保这个字段也被设置
  1790. };
  1791. const templateData =
  1792. typeof res.data.dcm_data === "string"
  1793. ? JSON.parse(res.data.dcm_data)
  1794. : res.data.dcm_data;
  1795. const updatedComs = await Promise.all(
  1796. templateData.map(async (el) => {
  1797. /* let templateInfo = { data: {} };
  1798. if (this.type !== "document") {
  1799. templateInfo = await getTemplateInfo({ id: el.id });
  1800. } */
  1801. const formulaData = await searchFormula({ page: 1, pageSize: 999 });
  1802. const attrs = el.attrs;
  1803. /* typeof templateInfo.data.attrs === "string"
  1804. ? JSON.parse(templateInfo.data.attrs)
  1805. : templateInfo.data.attrs || []; // Add a fallback empty array */
  1806. attrs.forEach((item) => {
  1807. if (item && item.data && item.data.id) {
  1808. const matchedFormula = formulaData.data.dataList.find(
  1809. (ite) => ite.id === item.data.id
  1810. );
  1811. if (matchedFormula) {
  1812. item.data = matchedFormula;
  1813. item.formula = matchedFormula.formula;
  1814. }
  1815. }
  1816. });
  1817. return { ...el /* , ...templateInfo.data, attrs */ };
  1818. })
  1819. );
  1820. this.coms = updatedComs;
  1821. console.log("coms", updatedComs);
  1822. if (this.type === "document" && this.articleId !== undefined) {
  1823. document.title = `${this.docAttr.title}-${settings.title}`;
  1824. }
  1825. this.uptadeSearch();
  1826. this.initTemplateSelection();
  1827. } catch (error) {
  1828. console.error("Error in onLoadArticle:", error);
  1829. } finally {
  1830. this.loading = false;
  1831. }
  1832. },
  1833. /* 加载模版信息 */
  1834. async onTemplateInfo(id) {
  1835. try {
  1836. this.loading = true;
  1837. // 在加载模板前重置所有模板状态
  1838. this.resetAllTemplateSelections();
  1839. // 获取文档信息
  1840. const res = await getDocumentInfo({ id });
  1841. if (res.status !== 200 || !res.data) {
  1842. throw new Error("无效的响应或未收到数据");
  1843. }
  1844. // 设置文档属性
  1845. this.docAttr = {
  1846. id: this.docAttr.id,
  1847. category_id: Number(this.docAttr.category_id),
  1848. title: res.data.title,
  1849. content: "",
  1850. status: res.data.status,
  1851. is_template: res.data.is_template,
  1852. linkProduct: res.data.linkProduct || [],
  1853. links: res.data.links || "",
  1854. linkProject: res.data.linkProject || [],
  1855. projects: res.data.projects || "",
  1856. };
  1857. // 解析文档数据
  1858. const documentData = res.data.data ? JSON.parse(res.data.data) : [];
  1859. console.log(documentData);
  1860. const updatedComs = await Promise.all(
  1861. documentData.map(async (docEl) => {
  1862. if (!docEl || !docEl.id) {
  1863. console.warn("无效的文档项:", docEl);
  1864. return null;
  1865. }
  1866. // 获取模板信息
  1867. const templateInfo = await getTemplateInfo({ id: docEl.id });
  1868. // 获取公式数据
  1869. const formulaData = await searchFormula({ page: 1, pageSize: 999 });
  1870. // 使用模板的 content 作为基础
  1871. let content = templateInfo.data.content;
  1872. // 使用模板的 attrs 作为基础,排除 Directory 类型
  1873. let attrs = templateInfo.data.attrs
  1874. ? JSON.parse(templateInfo.data.attrs).filter(
  1875. (attr) => attr.type !== "Directory"
  1876. )
  1877. : [];
  1878. // 从文档数据中提取所有 Directory 类型的属性
  1879. const docDirectories = docEl.attrs.filter(
  1880. (attr) => attr.type === "Directory"
  1881. );
  1882. // 将文档中的 Directory 属性添加到 attrs 中
  1883. attrs = [...attrs, ...docDirectories];
  1884. // 解析 content 中的所有项
  1885. const contentItems = (content.match(/{{([^}]+)}}/g) || []).map(
  1886. (match) => match.slice(2, -2)
  1887. );
  1888. console.log("contentItems", contentItems);
  1889. // 确保 content 中引用的所有 Directory 项都存在于 attrs 中
  1890. contentItems.forEach((itemId) => {
  1891. if (
  1892. itemId.startsWith("Directory_") &&
  1893. !attrs.some((attr) => attr.id === itemId)
  1894. ) {
  1895. const [, moduleIndex, level] = itemId.split("_");
  1896. attrs.push({
  1897. type: "Directory",
  1898. id: itemId,
  1899. name: "目录信息",
  1900. intro: "目录信息",
  1901. number: "",
  1902. content: "",
  1903. level: parseInt(level),
  1904. moduleIndex: parseInt(moduleIndex),
  1905. });
  1906. }
  1907. });
  1908. // 更新公式数据
  1909. attrs = attrs.map((item) => {
  1910. if (item.type === "formual" && item.data && item.data.id) {
  1911. const matchedFormula = formulaData.data.dataList.find(
  1912. (ite) => ite.id === item.data.id
  1913. );
  1914. if (matchedFormula) {
  1915. return {
  1916. ...item,
  1917. data: matchedFormula,
  1918. formula: matchedFormula.formula,
  1919. };
  1920. }
  1921. }
  1922. return item;
  1923. });
  1924. // 返回更新后的数据,以模板信息为主,但 Directory 项完全使用文档信息
  1925. return { ...templateInfo.data, attrs, content };
  1926. })
  1927. );
  1928. // 过滤掉无效的组件
  1929. this.coms = updatedComs.filter(Boolean);
  1930. console.log("组件", this.coms);
  1931. console.log("模版", this.docAttr);
  1932. if (this.articleId !== undefined) {
  1933. document.title = `${this.docAttr.title}-${settings.title}`;
  1934. }
  1935. this.uptadeSearch();
  1936. this.initTemplateSelection();
  1937. } catch (error) {
  1938. console.error("加载模板信息时出错:", error);
  1939. this.$message.error("加载模板信息时出错,请稍后重试");
  1940. } finally {
  1941. this.loading = false;
  1942. }
  1943. },
  1944. onRemove(index) {
  1945. const removedComponent = this.coms[index];
  1946. // 移除组件
  1947. this.coms.splice(index, 1);
  1948. // 如果是从模板创建的组件,更新对应模板的选中状态
  1949. if (removedComponent.dcb_id) {
  1950. const template = this.categoryList
  1951. .flatMap((category) => category.templates || [])
  1952. .find((t) => t.dcb_id === removedComponent.dcb_id);
  1953. if (template) {
  1954. this.updateTemplateSelection(template, false);
  1955. }
  1956. }
  1957. },
  1958. /* 目录信息 */
  1959. onCatalogIndex(e) {
  1960. this.catalogIndex = e;
  1961. if (
  1962. (this.docuComIndex =
  1963. 3 || this.comIndex == 9998 || this.AttributeIndex == 1)
  1964. ) {
  1965. this.comIndex = 0;
  1966. this.AttributeIndex = 0;
  1967. this.docuComIndex = 0;
  1968. }
  1969. this.$nextTick(() => {
  1970. this.$forceUpdate();
  1971. });
  1972. },
  1973. onSetActiveIndexs(e) {
  1974. this.docuComIndex = e;
  1975. if (
  1976. this.AttributeIndex == 1 ||
  1977. this.comIndex == 9998 ||
  1978. this.catalogIndex == 9997
  1979. ) {
  1980. this.catalogIndex = 0;
  1981. this.AttributeIndex = 0;
  1982. this.comIndex = 0;
  1983. }
  1984. },
  1985. //设置当前索引
  1986. onSetActiveIndex(e) {
  1987. this.comIndex = e;
  1988. if (
  1989. this.AttributeIndex == 1 ||
  1990. this.docuComIndex == 3 ||
  1991. this.catalogIndex == 9997
  1992. ) {
  1993. this.catalogIndex = 0;
  1994. this.docuComIndex = 0;
  1995. }
  1996. },
  1997. /* 属性变量 */
  1998. onAttributeIndex(e) {
  1999. this.AttributeIndex = e;
  2000. if (
  2001. (this.docuComIndex =
  2002. 3 || this.comIndex == 9998 || this.catalogIndex == 9997)
  2003. ) {
  2004. this.catalogIndex = 0;
  2005. this.comIndex = 0;
  2006. this.docuComIndex = 0;
  2007. }
  2008. },
  2009. /* 更新 */
  2010. renew() {
  2011. let _this = this;
  2012. _this.docVisible = true;
  2013. this.docForm.dcm_title = _this.docAttr.dcm_title;
  2014. this.docForm.dcm_type = _this.docAttr.dcm_type;
  2015. },
  2016. /* 保存 */
  2017. onSaveAs(e) {
  2018. let _this = this;
  2019. if (_this.coms.length <= 0) {
  2020. _this.$alert("请填写内容");
  2021. return;
  2022. }
  2023. _this.docAttr.dcm_id = "";
  2024. _this.docVisible = true;
  2025. this.docForm.dcm_title = _this.docAttr.dcm_title;
  2026. this.docForm.dcm_type = _this.docAttr.dcm_type;
  2027. },
  2028. //保存文档
  2029. onSave(e) {
  2030. let _this = this;
  2031. if (_this.coms.length <= 0) {
  2032. _this.$alert("增加组件");
  2033. return;
  2034. }
  2035. if (_this.docAttr.dcm_type == "" || _this.docAttr.dcm_type <= 0) {
  2036. _this.$alert("请选择文档分类");
  2037. return;
  2038. }
  2039. if (_this.docAttr.dcm_title == "") {
  2040. _this.$alert("请填写文档标题");
  2041. return;
  2042. }
  2043. _this.docAttr.links = JSON.stringify(_this.docAttr.linkProduct);
  2044. _this.docAttr.projects = JSON.stringify(_this.docAttr.linkProject);
  2045. _this.docAttr.dcm_data = JSON.stringify(_this.coms);
  2046. _this.docAttr.is_template = 0;
  2047. /* _this.docAttr.user_name = _this.$store.state.user.name;
  2048. _this.docAttr.user_id = _this.$store.state.user.id; 获取用户id,名称 */
  2049. if (_this.docAttr.dcm_id > 0) {
  2050. updateDocument(_this.docAttr).then((res) => {
  2051. if (res.status !== 200) return; //更新文档
  2052. _this.docAttr.id = res.data;
  2053. _this.$alert("文档更新成功");
  2054. _this.docVisible = false;
  2055. _this.docForm = {
  2056. dcm_title: "",
  2057. dcm_type: "",
  2058. dcm_category_id: "",
  2059. };
  2060. _this.searchArticle();
  2061. });
  2062. } else {
  2063. createDocument(_this.docAttr).then((res) => {
  2064. if (res.status !== 200) return; //保存文档
  2065. _this.docAttr.id = res.data;
  2066. _this.articleId = res.data;
  2067. _this.$alert("文档保存成功");
  2068. _this.docVisible = false;
  2069. _this.docForm = {
  2070. dcm_title: "",
  2071. dcm_type: "",
  2072. dcm_category_id: "",
  2073. };
  2074. _this.searchArticle();
  2075. });
  2076. }
  2077. },
  2078. /*更新 */
  2079. onUpload() {
  2080. let _this = this;
  2081. if (_this.coms.length <= 0) {
  2082. _this.$alert("增加组件");
  2083. return;
  2084. }
  2085. /* if (_this.docAttr.category_id == "" || _this.docAttr.category_id <= 0) {
  2086. _this.$alert("请选择分类");
  2087. return;
  2088. } */
  2089. if (_this.docAttr.title == "") {
  2090. _this.$alert("请填写模版标题");
  2091. return;
  2092. }
  2093. _this.docAttr.links = JSON.stringify(_this.docAttr.linkProduct);
  2094. _this.docAttr.projects = JSON.stringify(_this.docAttr.linkProject);
  2095. _this.docAttr.data = JSON.stringify(_this.coms);
  2096. _this.docAttr.is_template = 1;
  2097. _this.docAttr.id = this.$route.query.articleId;
  2098. /* _this.docAttr.user_name = _this.$store.state.user.name;
  2099. _this.docAttr.user_id = _this.$store.state.user.id; 获取用户id,名称*/
  2100. updateDocument(_this.docAttr).then((res) => {
  2101. if (res.status != 200) return; //更新文档
  2102. _this.docAttr.id = res.data;
  2103. _this.$alert("模版更新成功");
  2104. _this.searchArticle();
  2105. });
  2106. },
  2107. /* 保存并更新版 */
  2108. onSaveUpload(e) {
  2109. let _this = this;
  2110. if (_this.coms.length <= 0) {
  2111. _this.$alert("增加组件");
  2112. return;
  2113. }
  2114. /* if (_this.docAttr.category_id == "" || _this.docAttr.category_id <= 0) {
  2115. _this.$alert("请选择分类");
  2116. return;
  2117. } */
  2118. if (_this.docAttr.title == "") {
  2119. _this.$alert("请填写模版标题");
  2120. return;
  2121. }
  2122. _this.docAttr.links = JSON.stringify(_this.docAttr.linkProduct);
  2123. _this.docAttr.projects = JSON.stringify(_this.docAttr.linkProject);
  2124. _this.docAttr.data = JSON.stringify(_this.coms);
  2125. _this.docAttr.is_template = 1;
  2126. /* _this.docAttr.user_name = _this.$store.state.user.name;
  2127. _this.docAttr.user_id = _this.$store.state.user.id; 获取用户id,名称*/
  2128. /* if (_this.docAttr.id > 0) {
  2129. updateDocument(_this.docAttr).then((res) => {
  2130. if (res.status != 200) return; //更新文档
  2131. _this.docAttr.id = res.data;
  2132. _this.$alert("模版更新成功");
  2133. _this.searchArticle();
  2134. });
  2135. } else { */
  2136. createDocument(_this.docAttr).then((res) => {
  2137. if (res.status != 200) return; //保存文档
  2138. _this.docAttr.id = res.data;
  2139. _this.articleId = res.data;
  2140. _this.$alert("模版保存成功");
  2141. _this.searchArticle();
  2142. });
  2143. /* } */
  2144. },
  2145. //设置组件值
  2146. onSetComs(e) {
  2147. let _this = this;
  2148. _this.coms = [...e];
  2149. },
  2150. onAddLayer(cateIndex, dataIndex) {
  2151. let _this = this;
  2152. let item = _this.categoryList[cateIndex].dataList[dataIndex];
  2153. let data = {
  2154. ...item,
  2155. attrs: JSON.parse(item.attrs),
  2156. };
  2157. delete data.category;
  2158. _this.coms.push(data);
  2159. _this.comIndex = _this.coms.length - 1;
  2160. },
  2161. //处理插入事件
  2162. onInsert(e) {
  2163. let _this = this;
  2164. switch (e.key) {
  2165. case "article": //插入图文
  2166. _this.insertArticle();
  2167. break;
  2168. case "table": //插入图表
  2169. _this.insertTable();
  2170. break;
  2171. case "sourceData": //插入原数据
  2172. _this.insertSourceData(e);
  2173. break;
  2174. case "formual": //插入公式
  2175. _this.insertFormual(e);
  2176. break;
  2177. case "constant": //插入常量
  2178. _this.insertConstant(e);
  2179. break;
  2180. case "variable": //插入变量
  2181. _this.insertVariable(e);
  2182. break;
  2183. case "pager": //插入分页符
  2184. _this.insertPager();
  2185. break;
  2186. case "attr":
  2187. // 直接调用插入逻辑,不再检查 linkProduct
  2188. let com = _this.coms[_this.comIndex];
  2189. if (com && e.content) {
  2190. let data = {
  2191. type: "ProductAttr",
  2192. id: e.content.id,
  2193. dataId: "",
  2194. name: "商品属性",
  2195. intro: "商品属性",
  2196. content: e.content.content || "",
  2197. attrs: e.content.attrs,
  2198. };
  2199. com.attrs.push(data);
  2200. _this.insertCmd = {
  2201. content: "{{" + data.id + "}}",
  2202. };
  2203. // 可选:将产品信息添加到文档关联商品
  2204. if (e.content.attrs.productInfo) {
  2205. const productInfo = e.content.attrs.productInfo;
  2206. if (!_this.docAttr.linkProduct) {
  2207. _this.docAttr.linkProduct = [];
  2208. }
  2209. // 避免重复添加
  2210. if (
  2211. !_this.docAttr.linkProduct.some(
  2212. (p) => p.dcp_p_no === productInfo.dcp_p_no
  2213. )
  2214. ) {
  2215. _this.docAttr.linkProduct.push(productInfo);
  2216. }
  2217. }
  2218. }
  2219. break;
  2220. case "Directory": //插入主题
  2221. _this.insertDirectory(e);
  2222. break;
  2223. case "addNew": //插入新记录
  2224. _this.insertNew(e);
  2225. break;
  2226. case "InsertNull":
  2227. _this.insertVal();
  2228. break;
  2229. case "ai": //插入ai
  2230. _this.insertAI(e);
  2231. break;
  2232. }
  2233. },
  2234. /* 插入空值 */
  2235. insertVal() {
  2236. let _this = this;
  2237. if (_this.comIndex < 0) {
  2238. _this.$alert("请选择插入图层");
  2239. return false;
  2240. }
  2241. let com = _this.coms[_this.comIndex];
  2242. let uniqueId = "val" + Date.now(); // 使用时间戳创建唯一ID
  2243. let data = {
  2244. type: "variableNull",
  2245. id: uniqueId,
  2246. dataId: "",
  2247. name: "非变量",
  2248. intro: "",
  2249. content: "请输入",
  2250. data: "",
  2251. };
  2252. com.attrs.push(data);
  2253. if (com.type == "TextArea") {
  2254. //如果是图文,更新内容
  2255. _this.insertCmd = {
  2256. content: "{{" + data.id + "}}",
  2257. };
  2258. } else {
  2259. //仅对图表中插入有效
  2260. if (_this.comIndex >= 0) {
  2261. _this.setTableData(data.id);
  2262. }
  2263. }
  2264. },
  2265. /* 插入ai */
  2266. insertAI(e) {
  2267. let _this = this;
  2268. if (_this.comIndex < 0) {
  2269. _this.$alert("请选择插入图层");
  2270. return false;
  2271. }
  2272. let com = _this.coms[_this.comIndex];
  2273. let data = {
  2274. type: "ai",
  2275. id: "ai" + (com.attrs.length + 1),
  2276. dataId: "",
  2277. name: "AI",
  2278. intro: "插入AI",
  2279. content: e.content.result,
  2280. search: e.content.searchTerm,
  2281. };
  2282. com.attrs.push(data);
  2283. if (com.type == "TextArea") {
  2284. //如果是图文,更新内容
  2285. _this.insertCmd = {
  2286. content: "{{" + data.id + "}}",
  2287. };
  2288. }
  2289. },
  2290. insertProductAttr() {
  2291. let _this = this;
  2292. if (_this.comIndex < 0) {
  2293. _this.$alert("请选择插入图层");
  2294. return false;
  2295. }
  2296. let com = _this.coms[_this.comIndex];
  2297. if (!com) {
  2298. _this.$alert("请先添加文档内容");
  2299. return false;
  2300. }
  2301. // 允许直接插入产品属性,移除原有的限制检查
  2302. this.showProductAttr = true;
  2303. },
  2304. //插入目录
  2305. insertDirectory(e) {
  2306. if (this.comIndex < 0) {
  2307. this.$message.warning("请选择插入图层");
  2308. return;
  2309. }
  2310. const com = this.coms[this.comIndex];
  2311. const currentLevel = e.content.level || 1;
  2312. try {
  2313. // 生成目录编号和内容
  2314. const { number, content } = this.generateDirectoryItem(
  2315. this.comIndex,
  2316. currentLevel
  2317. );
  2318. console.log(number);
  2319. const directoryItem = {
  2320. type: "Directory",
  2321. id: `Directory_${this.comIndex}_${currentLevel}_${Date.now()}`,
  2322. name: "目录信息",
  2323. intro: "目录信息",
  2324. number,
  2325. content: content || "新建目录项",
  2326. level: currentLevel,
  2327. moduleIndex: this.comIndex,
  2328. };
  2329. com.attrs.push(directoryItem);
  2330. // 更新文本内容
  2331. this.insertCmd = {
  2332. content: `{{${directoryItem.id}}}`,
  2333. };
  2334. // 更新目录树
  2335. this.updateCatalog(this.coms);
  2336. // 强制更新视图
  2337. this.$nextTick(() => {
  2338. this.$forceUpdate();
  2339. });
  2340. } catch (error) {
  2341. console.error("Error inserting directory:", error);
  2342. this.$message.error("插入目录失败,请重试");
  2343. }
  2344. },
  2345. // 添加 findParentNumber 方法
  2346. findParentNumber(moduleIndex, level) {
  2347. if (level <= 1) {
  2348. return (moduleIndex + 1).toString();
  2349. }
  2350. const module = this.coms[moduleIndex];
  2351. if (!module || !module.attrs) return "";
  2352. // 获取所有目录类型的属性并按编号排序
  2353. const directories = module.attrs
  2354. .filter((attr) => attr.type === "Directory" && attr.level < level)
  2355. .sort((a, b) => {
  2356. const aNum = a.number.split(".").map(Number);
  2357. const bNum = b.number.split(".").map(Number);
  2358. for (let i = 0; i < Math.min(aNum.length, bNum.length); i++) {
  2359. if (aNum[i] !== bNum[i]) return aNum[i] - bNum[i];
  2360. }
  2361. return aNum.length - bNum.length;
  2362. });
  2363. // 找到最近的上级目录
  2364. const parentDir = directories[directories.length - 1];
  2365. return parentDir ? parentDir.number : (moduleIndex + 1).toString();
  2366. },
  2367. // 修改 generateDirectoryItem 方法
  2368. generateDirectoryItem(moduleIndex, level) {
  2369. const module = this.coms[moduleIndex];
  2370. const existingDirs = module.attrs.filter(
  2371. (attr) => attr.type === "Directory" && attr.level === level
  2372. );
  2373. const parentNumber = this.findParentNumber(moduleIndex, level);
  2374. const siblingCount = existingDirs.length;
  2375. let number;
  2376. if (level === 1) {
  2377. number = (moduleIndex + 1).toString();
  2378. } else {
  2379. number = `${parentNumber}.${siblingCount + 1}`;
  2380. }
  2381. return {
  2382. number,
  2383. content: `第${number}章`, // 默认内容
  2384. };
  2385. },
  2386. // 插入新记录
  2387. insertNew(e) {
  2388. this.coms.push(e);
  2389. // 如果是从模板拖拽的,更新模板选中状态
  2390. if (e.dcb_id) {
  2391. const template = this.categoryList
  2392. .flatMap((category) => category.templates || [])
  2393. .find((t) => t.dcb_id === e.dcb_id);
  2394. if (template) {
  2395. this.updateTemplateSelection(template, true);
  2396. }
  2397. }
  2398. },
  2399. //插入分页
  2400. insertPager() {
  2401. let _this = this;
  2402. if (_this.comIndex < 0) {
  2403. _this.$alert("请选择插入图层");
  2404. return false;
  2405. }
  2406. let com = _this.coms[_this.comIndex];
  2407. let data = {
  2408. type: "pager",
  2409. id: "pager" + (com.attrs.length + 1),
  2410. name: "分页符",
  2411. intor: "强制分页",
  2412. content: "",
  2413. };
  2414. com.attrs.push(data);
  2415. if (com.type == "TextArea") {
  2416. //如果是图文,更新内容
  2417. _this.insertCmd = {
  2418. content: "<div>{{" + data.id + "}}</div>",
  2419. };
  2420. }
  2421. },
  2422. //插入图文
  2423. insertArticle() {
  2424. /* let _this = this;
  2425. _this.coms.push({
  2426. type: "TextArea",
  2427. lay_id: "textArea",
  2428. code: "模块名",
  2429. name: "图文",
  2430. intro: "图文介绍",
  2431. isEdit: 2,
  2432. content: "请填写内容",
  2433. attrs: [],
  2434. });
  2435. _this.comIndex = _this.coms.length - 1; */
  2436. let _this = this;
  2437. let newArticle = {
  2438. type: "TextArea",
  2439. lay_id: "textArea",
  2440. code: "模块名",
  2441. name: "图文",
  2442. intro: "图文介绍",
  2443. isEdit: 2,
  2444. content: "请填写内容",
  2445. attrs: [],
  2446. };
  2447. _this.coms.push(newArticle);
  2448. _this.comIndex = _this.coms.length - 1;
  2449. // 添加一些日志来帮助调试
  2450. console.log("New article added:", newArticle);
  2451. console.log("Current coms:", _this.coms);
  2452. console.log("New comIndex:", _this.comIndex);
  2453. },
  2454. //插入表格
  2455. insertTable() {
  2456. let _this = this;
  2457. _this.coms.push({
  2458. type: "Table",
  2459. lay_id: "Table",
  2460. code: "模块名",
  2461. name: "图表名称",
  2462. intro: "图表介绍",
  2463. isEdit: 2,
  2464. tableHeader: this.initTableHeader(),
  2465. tableData: [{}],
  2466. htmlData: "",
  2467. attrs: [],
  2468. });
  2469. _this.comIndex = _this.coms.length - 1;
  2470. },
  2471. initTableHeader() {
  2472. var start = 65;
  2473. var data = [];
  2474. for (var i = start; i <= start + 25; i++) {
  2475. data.push(String.fromCharCode(i));
  2476. }
  2477. return data;
  2478. },
  2479. //插入变量
  2480. insertConstant(e) {
  2481. let _this = this;
  2482. // console.log("insertconstant");
  2483. if (_this.comIndex < 0) {
  2484. _this.$alert("请选择插入图层");
  2485. return false;
  2486. }
  2487. let com = _this.coms[_this.comIndex];
  2488. let data = {
  2489. type: "constant",
  2490. id: e.content.code + (com.attrs.length + 1),
  2491. dataId: e.id,
  2492. name: e.content.code,
  2493. intro: e.content.intro,
  2494. content: e.content.value,
  2495. data: e.content,
  2496. };
  2497. com.attrs.push(data);
  2498. if (com.type == "TextArea") {
  2499. //如果是图文,更新内容
  2500. _this.insertCmd = {
  2501. content: "{{" + data.id + "}}",
  2502. };
  2503. } else {
  2504. //仅对图表中插入有效
  2505. if (_this.comIndex >= 0) {
  2506. _this.setTableData(data.id);
  2507. }
  2508. }
  2509. },
  2510. //插入变量
  2511. insertVariable(e) {
  2512. let _this = this;
  2513. if (_this.comIndex < 0) {
  2514. _this.$alert("请选择插入图层");
  2515. return false;
  2516. }
  2517. let com = _this.coms[_this.comIndex];
  2518. let data = {
  2519. type: "variable",
  2520. id: e.content.code + (com.attrs.length + 1),
  2521. dataId: e.id,
  2522. name: e.content.code,
  2523. intro: e.content.intro,
  2524. content: e.content.value,
  2525. data: e.content,
  2526. };
  2527. com.attrs.push(data);
  2528. if (com.type == "TextArea") {
  2529. //如果是图文,更新内容
  2530. _this.insertCmd = {
  2531. content: "{{" + data.id + "}}",
  2532. };
  2533. } else {
  2534. //仅对图表中插入有效
  2535. if (_this.comIndex >= 0) {
  2536. _this.setTableData(data.id);
  2537. }
  2538. }
  2539. },
  2540. //插入原数据
  2541. insertSourceData(e) {
  2542. let _this = this;
  2543. if (_this.comIndex < 0) {
  2544. _this.$alert("请选择插入图层");
  2545. return false;
  2546. }
  2547. let com = _this.coms[_this.comIndex];
  2548. let data = {
  2549. type: "sourceData",
  2550. id: "sourceData" + (com.attrs.length + 1),
  2551. dataId: "",
  2552. name: "源数据",
  2553. intro: "插入源数据",
  2554. formula:
  2555. "[R][" +
  2556. e.content.tb +
  2557. "][" +
  2558. e.content.sheet +
  2559. "][" +
  2560. e.content.r +
  2561. "," +
  2562. e.content.c +
  2563. "]",
  2564. content: e.content.value,
  2565. data: e.content,
  2566. };
  2567. com.attrs.push(data);
  2568. if (com.type == "TextArea") {
  2569. //如果是图文,更新内容
  2570. _this.insertCmd = {
  2571. content: "{{" + data.id + "}}",
  2572. };
  2573. }
  2574. },
  2575. //插入公式
  2576. insertFormual(e) {
  2577. let _this = this;
  2578. if (_this.comIndex < 0) {
  2579. _this.$alert("请选择插入图层");
  2580. return false;
  2581. }
  2582. let com = _this.coms[_this.comIndex];
  2583. let data = {
  2584. type: "formual",
  2585. id: "formual" + (com.attrs.length + 1),
  2586. dataId: e.id,
  2587. name: e.content.name,
  2588. intro: e.content.intro,
  2589. formula: e.content.formula,
  2590. content: 0,
  2591. data: e.content,
  2592. };
  2593. com.attrs.push(data);
  2594. if (com.type == "TextArea") {
  2595. //如果是图文,更新内容
  2596. _this.insertCmd = {
  2597. content: "{{" + data.id + "}}",
  2598. };
  2599. } else {
  2600. //仅对图表中插入有效
  2601. if (_this.comIndex >= 0) {
  2602. _this.setTableData(data.id);
  2603. }
  2604. }
  2605. },
  2606. //获取模版分类信息
  2607. async initCategoryList() {
  2608. let _this = this;
  2609. try {
  2610. let res = await searchTemplateCategory({
  2611. page: 1,
  2612. pageSize: 99,
  2613. parent_id: 0,
  2614. status: 5,
  2615. });
  2616. if (res.status != 200) return;
  2617. // 处理分类数据
  2618. _this.categoryList = await Promise.all(
  2619. res.data.dataList.map(async (category) => {
  2620. // 获取该分类下的模板列表
  2621. const templates = await _this.getTemplateList(category.id);
  2622. // 只保留category_id与当前分类id匹配的模板
  2623. const filteredTemplates = templates.filter(
  2624. (template) => template.category_id === category.id
  2625. );
  2626. return {
  2627. ...category,
  2628. templates: filteredTemplates.map((template) => ({
  2629. ...template,
  2630. selected: false, // 添加选中状态
  2631. })),
  2632. };
  2633. })
  2634. );
  2635. // 过滤掉没有模板的分类
  2636. _this.categoryList = _this.categoryList.filter(
  2637. (category) => category.templates && category.templates.length > 0
  2638. );
  2639. console.log("处理后的分类数据:", _this.categoryList);
  2640. } catch (error) {
  2641. console.error("初始化分类列表失败:", error);
  2642. }
  2643. },
  2644. //获取模版列表
  2645. async getTemplateList(categoryId) {
  2646. let _this = this;
  2647. let res = await searchTemplate({
  2648. page: 1,
  2649. pageSize: 999,
  2650. category_id: categoryId,
  2651. status: 5,
  2652. });
  2653. if (res.status != 200) return [];
  2654. let dataList = res.data.dataList.map((item) => {
  2655. try {
  2656. // 处理属性值
  2657. if (item.dcb_attrs) {
  2658. // 如果存在 dcb_attrs,优先使用它并确保正确解析
  2659. item.attrs =
  2660. typeof item.dcb_attrs === "string"
  2661. ? JSON.parse(item.dcb_attrs)
  2662. : item.dcb_attrs;
  2663. } else if (!item.attrs) {
  2664. // 如果既没有 dcb_attrs 也没有 attrs,设置为空数组
  2665. item.attrs = [];
  2666. } else {
  2667. // 如果有 attrs 但是是字符串,解析它
  2668. item.attrs =
  2669. typeof item.attrs === "string"
  2670. ? JSON.parse(item.attrs)
  2671. : item.attrs;
  2672. }
  2673. // 确保 content 存在
  2674. item.content = item.dcb_nr || item.content || "";
  2675. // 从 content 中提取所有 {{}} 包裹的 ID
  2676. const contentIds = (item.content.match(/{{([^}]+)}}/g) || []).map(
  2677. (match) => match.slice(2, -2).trim()
  2678. );
  2679. // 只在有 contentIds 时进行过滤
  2680. if (contentIds.length > 0) {
  2681. item.attrs = Array.isArray(item.attrs)
  2682. ? item.attrs.filter(
  2683. (attr) => attr && attr.id && contentIds.includes(attr.id)
  2684. )
  2685. : [];
  2686. }
  2687. // 确保 attrs 是数组
  2688. if (!Array.isArray(item.attrs)) {
  2689. item.attrs = [];
  2690. }
  2691. } catch (error) {
  2692. console.error("Error processing template item:", error, item);
  2693. item.attrs = [];
  2694. }
  2695. return item;
  2696. });
  2697. console.log("处理后的数据列表:", dataList);
  2698. return dataList;
  2699. },
  2700. //获取文档模板列表
  2701. async searchArticle() {
  2702. try {
  2703. // 获取文档分类
  2704. const categoryRes = await searchDocumentCategory({
  2705. page: 1,
  2706. pageSize: 999,
  2707. });
  2708. if (categoryRes.status !== 200) return;
  2709. // 获取文档列表
  2710. const documentRes = await pageDocument({
  2711. page: 1,
  2712. pageSize: 99,
  2713. isContentShow: true,
  2714. });
  2715. if (documentRes.status !== 200) return;
  2716. // 处理数据为树形结构
  2717. this.schemeData = categoryRes.data.dataList.map((category) => ({
  2718. label: category.name,
  2719. id: category.id,
  2720. children: documentRes.data.dataList
  2721. .filter((doc) => doc.dcm_category_id === category.id)
  2722. .map((doc) => ({
  2723. label: doc.dcm_title,
  2724. id: doc.dcm_id,
  2725. type: "document",
  2726. })),
  2727. }));
  2728. // 更新默认展开的节点 - 展开所有分类
  2729. this.expandedKeys = this.schemeData.map((category) => category.id);
  2730. console.log("Processed schemeData:", this.schemeData);
  2731. } catch (error) {
  2732. console.error("Error processing document data:", error);
  2733. this.$message.error("获取文档数据失败");
  2734. }
  2735. },
  2736. // 添加模板选择处理方法
  2737. /* handleTemplateSelect(category, template, value) {
  2738. template.selected = value;
  2739. console.log("Selected template:", {
  2740. category: category.name,
  2741. template: template.dcb_name,
  2742. selected: value,
  2743. });
  2744. // 这里可以添加其他选择逻辑
  2745. }, */
  2746. // 检查模板是否已被使用
  2747. isTemplateUsed(template) {
  2748. const isUsed = this.coms.some((com) => com.dcb_id === template.dcb_id);
  2749. if (isUsed) {
  2750. // 如果模板被使用,设置 selected 为 true
  2751. template.selected = true;
  2752. // 同步其他分类中相同模板的选中状态
  2753. this.categoryList.forEach((category) => {
  2754. const sameTemplate = category.templates?.find(
  2755. (t) => t.dcb_id === template.dcb_id
  2756. );
  2757. if (sameTemplate) {
  2758. sameTemplate.selected = true;
  2759. }
  2760. });
  2761. }
  2762. /* return isUsed; */
  2763. },
  2764. // 处理模板选择
  2765. handleTemplateSelect(category, template, isSelected) {
  2766. // 更新模板选中状态
  2767. template.selected = isSelected;
  2768. if (isSelected) {
  2769. // 如果是选中,添加到组件列表
  2770. /* const newComponent = {
  2771. ...template,
  2772. type: template.dcb_type || "TextArea",
  2773. lay_id: template.lay_id || "textArea",
  2774. content: template.dcb_nr || "",
  2775. attrs:
  2776. typeof template.dcb_attrs === "string"
  2777. ? JSON.parse(template.dcb_attrs)
  2778. : template.dcb_attrs || [],
  2779. };
  2780. this.coms.push(newComponent); */
  2781. } else {
  2782. // 如果取消选中,从组件列表中移除
  2783. const index = this.coms.findIndex(
  2784. (com) => com.dcb_id === template.dcb_id
  2785. );
  2786. if (index !== -1) {
  2787. this.coms.splice(index, 1);
  2788. }
  2789. }
  2790. // 同步其他分类中相同模板的选中状态
  2791. this.categoryList.forEach((cat) => {
  2792. if (cat.id !== category.id) {
  2793. const sameTemplate = cat.templates?.find(
  2794. (t) => t.dcb_id === template.dcb_id
  2795. );
  2796. if (sameTemplate) {
  2797. sameTemplate.selected = isSelected;
  2798. }
  2799. }
  2800. });
  2801. },
  2802. // 初始化模板选中状态
  2803. initTemplateSelection() {
  2804. // 先重置所有选中状态
  2805. this.resetAllTemplateSelections();
  2806. // 然后根据已渲染组件更新选中状态
  2807. this.coms.forEach((com) => {
  2808. this.categoryList.forEach((category) => {
  2809. const template = category.templates?.find(
  2810. (t) => t.dcb_id === com.dcb_id
  2811. );
  2812. if (template) {
  2813. template.selected = true;
  2814. }
  2815. });
  2816. });
  2817. },
  2818. // 修改后的 handleDragEnd 方法
  2819. handleDragEnd(evt) {
  2820. // 检查是否是克隆操作
  2821. if (!evt || !evt.item || evt.pullMode !== "clone") {
  2822. return;
  2823. }
  2824. // 获取拖拽的数据
  2825. const draggedData = evt.item.dataset;
  2826. if (!draggedData) {
  2827. return;
  2828. }
  2829. // 从拖拽的DOM元素中获取模板ID
  2830. const templateId = evt.item.getAttribute("data-template-id");
  2831. if (!templateId) {
  2832. return;
  2833. }
  2834. // 查找对应的模板
  2835. const draggedTemplate = this.categoryList
  2836. .flatMap((category) => category.templates || [])
  2837. .find((template) => template.dcb_id === templateId);
  2838. if (draggedTemplate) {
  2839. this.updateTemplateSelection(draggedTemplate, true);
  2840. }
  2841. },
  2842. // 更新模板选中状态的通用方法
  2843. updateTemplateSelection(template, isSelected) {
  2844. // 更新所有分类中相同模板的选中状态
  2845. this.categoryList.forEach((category) => {
  2846. const sameTemplate = category.templates?.find(
  2847. (t) => t.dcb_id === template.dcb_id
  2848. );
  2849. if (sameTemplate) {
  2850. sameTemplate.selected = isSelected;
  2851. }
  2852. });
  2853. },
  2854. // 添加重置所有模板选中状态的方法
  2855. resetAllTemplateSelections() {
  2856. this.categoryList.forEach((category) => {
  2857. if (category.templates) {
  2858. category.templates.forEach((template) => {
  2859. template.selected = false;
  2860. });
  2861. }
  2862. });
  2863. },
  2864. // 处理搜索
  2865. async handleSearch() {
  2866. if (!this.searchKey.trim()) {
  2867. return;
  2868. }
  2869. try {
  2870. this.loading = true;
  2871. const res = await pageDocument({
  2872. page: 1,
  2873. pageSize: 999,
  2874. dcm_title: this.searchKey.trim(),
  2875. });
  2876. if (res.status === 200) {
  2877. // 更新树形数据
  2878. const searchResults = res.data.dataList.map((doc) => ({
  2879. id: doc.dcm_id,
  2880. label: doc.dcm_title,
  2881. children: null,
  2882. }));
  2883. const searchResultNode = {
  2884. id: "search-result", // 为搜索结果节点添加唯一ID
  2885. label: "搜索结果",
  2886. children: searchResults,
  2887. };
  2888. // 更新树形数据
  2889. this.schemeData = [
  2890. searchResultNode,
  2891. /* ...this.schemeData.filter(item => item.label !== "搜索结果") */
  2892. ];
  2893. // 更新需要展开的节点keys
  2894. this.expandedKeys = [
  2895. "search-result", // 展开搜索结果分类
  2896. ...searchResults.map((item) => item.id), // 展开所有搜索结果项
  2897. ];
  2898. // 强制更新树形组件
  2899. this.$nextTick(() => {
  2900. if (this.$refs.documentTree) {
  2901. this.$refs.documentTree.store.defaultExpandedKeys =
  2902. this.expandedKeys;
  2903. this.$refs.documentTree.updateKeyChildren();
  2904. }
  2905. });
  2906. // 如果没有搜索结果,显示提示
  2907. if (searchResults.length === 0) {
  2908. this.$message.info("未找到匹配的文档");
  2909. }
  2910. }
  2911. } catch (error) {
  2912. console.error("搜索文档失败:", error);
  2913. this.$message.error("搜索失败,请重试");
  2914. } finally {
  2915. this.loading = false;
  2916. }
  2917. },
  2918. // 修改清空处理方法
  2919. async handleClear() {
  2920. this.searchKey = "";
  2921. this.expandedKeys = []; // 清空展开的节点
  2922. await this.searchArticle();
  2923. // 重置树形组件的展开状态
  2924. this.$nextTick(() => {
  2925. if (this.$refs.documentTree) {
  2926. this.$refs.documentTree.store.defaultExpandedKeys = [];
  2927. this.$refs.documentTree.updateKeyChildren();
  2928. }
  2929. });
  2930. },
  2931. // 添加搜索处理方法
  2932. async handleResourceSearch() {
  2933. /* const searchKey = this.resourceSearchKey.toLowerCase().trim();
  2934. // 遍历所有分类
  2935. this.categoryList.forEach(category => {
  2936. if (category.templates) {
  2937. // 过滤模板列表
  2938. const filteredTemplates = category.templates.filter(template =>
  2939. template.dcb_name.toLowerCase().includes(searchKey)
  2940. );
  2941. // 使用 Vue.set 确保响应式更新
  2942. this.$set(category, 'templates', filteredTemplates);
  2943. }
  2944. }); */
  2945. if (!this.templateSearchKey.trim()) {
  2946. return;
  2947. }
  2948. try {
  2949. // 调用搜索模板接口
  2950. const res = await searchTemplate({
  2951. page: 1,
  2952. pageSize: 999,
  2953. dcb_name: this.templateSearchKey.trim(),
  2954. });
  2955. if (res.status === 200) {
  2956. // 保存当前分类的原始模板
  2957. this.originalTemplateList = [...this.categoryList];
  2958. // 处理搜索结果
  2959. const searchResults = res.data.dataList.map((template) => {
  2960. // 确保模板数据格式正确
  2961. if (!template.attrs) {
  2962. template.attrs = "[]";
  2963. }
  2964. try {
  2965. template.attrs =
  2966. typeof template.attrs === "string"
  2967. ? JSON.parse(template.attrs)
  2968. : template.attrs;
  2969. } catch (error) {
  2970. console.error("Error parsing template attrs:", error);
  2971. template.attrs = [];
  2972. }
  2973. return template;
  2974. });
  2975. // 更新分类列表,将搜索结果放在一个特殊分类下
  2976. this.categoryList = [
  2977. {
  2978. id: "search-results",
  2979. name: "搜索结果",
  2980. templates: searchResults.map((template) => ({
  2981. ...template,
  2982. selected: this.coms.some(
  2983. (com) => com.dcb_id === template.dcb_id
  2984. ),
  2985. })),
  2986. },
  2987. ];
  2988. }
  2989. } catch (error) {
  2990. console.error("搜索模板失败:", error);
  2991. this.$message.error("搜索失败,请重试");
  2992. }
  2993. },
  2994. // 添加清除搜索处理方法
  2995. handleResourceClear() {
  2996. // 重置搜索并恢复原始列表
  2997. this.resourceSearchKey = "";
  2998. this.initCategoryList();
  2999. },
  3000. // 处理模板搜索
  3001. async handleTemplateSearch() {
  3002. /* if (!this.templateSearchKey.trim()) {
  3003. return;
  3004. } */
  3005. console.log(12);
  3006. try {
  3007. // 调用搜索模板接口
  3008. const res = await searchTemplate({
  3009. page: 1,
  3010. pageSize: 999,
  3011. dcb_name: this.templateSearchKey.trim(),
  3012. });
  3013. if (res.status === 200) {
  3014. // 保存当前分类的原始模板
  3015. this.originalTemplateList = [...this.categoryList];
  3016. // 处理搜索结果
  3017. const searchResults = res.data.dataList.map((template) => {
  3018. // 确保模板数据格式正确
  3019. if (!template.attrs) {
  3020. template.attrs = "[]";
  3021. }
  3022. try {
  3023. template.attrs =
  3024. typeof template.attrs === "string"
  3025. ? JSON.parse(template.attrs)
  3026. : template.attrs;
  3027. } catch (error) {
  3028. console.error("Error parsing template attrs:", error);
  3029. template.attrs = [];
  3030. }
  3031. return template;
  3032. });
  3033. // 更新分类列表,将搜索结果放在一个特殊分类下
  3034. this.categoryList = [
  3035. {
  3036. id: "search-results",
  3037. name: "搜索结果",
  3038. templates: searchResults.map((template) => ({
  3039. ...template,
  3040. selected: this.coms.some(
  3041. (com) => com.dcb_id === template.dcb_id
  3042. ),
  3043. })),
  3044. },
  3045. ];
  3046. }
  3047. } catch (error) {
  3048. console.error("搜索模板失败:", error);
  3049. this.$message.error("搜索失败,请重试");
  3050. }
  3051. },
  3052. // 清空搜索
  3053. async handleTemplateClear() {
  3054. this.templateSearchKey = "";
  3055. // 如果有保存的原始列表,恢复它
  3056. if (this.originalTemplateList.length > 0) {
  3057. this.categoryList = [...this.originalTemplateList];
  3058. } else {
  3059. // 否则重新初始化分类列表
  3060. await this.initCategoryList();
  3061. }
  3062. },
  3063. // 添加一个用于检查产品是否已关联的方法
  3064. isProductLinked(dcp_p_no) {
  3065. return (
  3066. this.docAttr.linkProduct &&
  3067. this.docAttr.linkProduct.some((p) => p.dcp_p_no === dcp_p_no)
  3068. );
  3069. },
  3070. // 修改文档属性更新方法
  3071. updateDocAttr() {
  3072. // ... 其他代码保持不变 ...
  3073. if (this.docAttr.linkProduct && this.docAttr.linkProduct.length > 0) {
  3074. this.docAttr.links = JSON.stringify(this.docAttr.linkProduct);
  3075. }
  3076. // ... 其他代码保持不变 ...
  3077. },
  3078. // 添加或修改以下方法
  3079. getCategory(categoryId) {
  3080. // 处理数组格式的categoryId
  3081. if (Array.isArray(categoryId)) {
  3082. categoryId = categoryId[categoryId.length - 1]; // 获取数组最后一个值
  3083. }
  3084. // 如果没有categoryId,直接返回空字符串
  3085. if (!categoryId) return "";
  3086. const findCategory = (list) => {
  3087. if (!list || !Array.isArray(list)) return null;
  3088. for (const category of list) {
  3089. // 确保进行数字比较
  3090. if (
  3091. Number(category.id) === Number(categoryId) ||
  3092. Number(category.dcb_category_id) === Number(categoryId)
  3093. ) {
  3094. return category.name || category.dcb_name;
  3095. }
  3096. // 检查templates
  3097. if (category.templates) {
  3098. const template = category.templates.find(
  3099. (t) =>
  3100. Number(t.dcb_category_id) === Number(categoryId) ||
  3101. Number(t.category_id) === Number(categoryId)
  3102. );
  3103. if (template) {
  3104. return category.name;
  3105. }
  3106. }
  3107. // 递归检查子分类
  3108. if (category.children) {
  3109. const found = findCategory(category.children);
  3110. if (found) return found;
  3111. }
  3112. }
  3113. return null;
  3114. };
  3115. // 在分类列表中查找
  3116. const categoryName = findCategory(this.categoryList);
  3117. // 如果找到分类名称则返回,否则返回格式化后的分类ID
  3118. return categoryName || (categoryId ? String(categoryId) : "");
  3119. },
  3120. // 添加目录编号更新方法
  3121. updateDirectoryNumbers() {
  3122. this.coms.forEach((com, moduleIndex) => {
  3123. if (com.attrs) {
  3124. // 获取当前模块中的所有目录类型属性
  3125. const directoryAttrs = com.attrs.filter(
  3126. (attr) => attr.type === "Directory"
  3127. );
  3128. // 更新每个目录的编号
  3129. directoryAttrs.forEach((dir, index) => {
  3130. // 生成新的编号
  3131. const number = this.generateLevelPrefix(moduleIndex, dir.level);
  3132. // 更新目录编号
  3133. this.$set(dir, "number", number);
  3134. });
  3135. }
  3136. });
  3137. },
  3138. // 简化拖拽完成处理
  3139. onDragComplete() {
  3140. this.$nextTick(() => {
  3141. // 只在存在目录类型的属性时才更新编号
  3142. if (
  3143. this.coms.some(
  3144. (com) =>
  3145. com.attrs && com.attrs.some((attr) => attr.type === "Directory")
  3146. )
  3147. ) {
  3148. this.updateDirectoryNumbers();
  3149. }
  3150. // 触发重建事件
  3151. this.$emit("onRebuild", this.coms);
  3152. });
  3153. },
  3154. // 简化拖拽结束处理
  3155. onDragEnd() {
  3156. // 可以添加其他拖拽结束后的处理逻辑
  3157. this.$forceUpdate();
  3158. },
  3159. // 简化添加处理
  3160. onAdd(evt) {
  3161. console.log("Added new module:", evt.added);
  3162. this.$nextTick(() => {
  3163. if (
  3164. this.coms.some(
  3165. (com) =>
  3166. com.attrs && com.attrs.some((attr) => attr.type === "Directory")
  3167. )
  3168. ) {
  3169. this.updateDirectoryNumbers();
  3170. }
  3171. this.$emit("onRebuild", this.coms);
  3172. });
  3173. },
  3174. // 保存模板
  3175. async onSaveTemplate(item) {
  3176. let data = {};
  3177. // 遍历原始对象,只保留 dcb_ 开头的属性
  3178. Object.keys(item).forEach((key) => {
  3179. if (key.startsWith("dcb_")) {
  3180. data[key] = item[key];
  3181. }
  3182. });
  3183. // 特殊字段映射
  3184. data.dcb_nr = item.content;
  3185. data.dcb_attrs = JSON.stringify(item.attrs);
  3186. data.dcb_type = item.type;
  3187. data.dcb_name = item.name;
  3188. // 处理分类ID
  3189. if (Array.isArray(item.category_id)) {
  3190. data.category_id = item.category_id[item.category_id.length - 1];
  3191. } else {
  3192. data.category_id = item.category_id;
  3193. }
  3194. data.status = 5;
  3195. try {
  3196. if (!item.dcb_id || this.saveAs) {
  3197. const res = await createTemplate(data);
  3198. if (res.code === 200) {
  3199. item.id = res.data;
  3200. this.$alert("模块信息保存成功");
  3201. this.saveAs = false;
  3202. }
  3203. } else {
  3204. const res = await updateTemplate(data);
  3205. if (res.code === 200) {
  3206. this.$alert("模块信息更新成功");
  3207. }
  3208. }
  3209. item.selDisabled = false;
  3210. item.valDisabled = false;
  3211. this.$forceUpdate();
  3212. } catch (error) {
  3213. console.error("保存模板失败:", error);
  3214. this.$message.error("保存失败:" + error.message);
  3215. }
  3216. },
  3217. // 编辑/预览切换
  3218. async onEdit(index, state) {
  3219. try {
  3220. if (this.isSaving) return;
  3221. this.isSaving = true;
  3222. // 保存当前组件的完整数据
  3223. const currentCom = JSON.parse(JSON.stringify(this.coms[index]));
  3224. if (state === 2) {
  3225. // 从编辑切换到预览
  3226. const componentRef = this.$refs[`textArea${index}`];
  3227. if (componentRef && componentRef[0]) {
  3228. await componentRef[0].save();
  3229. }
  3230. }
  3231. // 更新编辑状态
  3232. this.coms = this.coms.map((it, idx) => {
  3233. if (idx === index) {
  3234. return {
  3235. ...currentCom, // 保持原有属性
  3236. isEdit: state,
  3237. attrs: currentCom.attrs || [], // 确保attrs不会丢失
  3238. dcb_attrs: currentCom.dcb_attrs || [], // 确保dcb_attrs不会丢失
  3239. };
  3240. }
  3241. return {
  3242. ...it,
  3243. isEdit: 2,
  3244. };
  3245. });
  3246. // 更新当前索引
  3247. this.comIndex = index;
  3248. // 触发重建
  3249. await this.onRebuild(this.coms);
  3250. } catch (error) {
  3251. /* console.error("切换模式失败:", error);
  3252. this.$message.error("切换模式失败:" + error.message); */
  3253. } finally {
  3254. this.isSaving = false;
  3255. }
  3256. },
  3257. // 删除模块
  3258. onRemove(index) {
  3259. console.log(index);
  3260. this.$confirm("此操作将删除该模块, 是否继续?", "提示", {
  3261. confirmButtonText: "确定",
  3262. cancelButtonText: "取消",
  3263. type: "warning",
  3264. })
  3265. .then(() => {
  3266. this.coms.splice(index, 1);
  3267. this.$emit("onRebuild", this.coms);
  3268. })
  3269. .catch(() => {
  3270. this.$message({
  3271. type: "info",
  3272. message: "已取消删除",
  3273. });
  3274. });
  3275. },
  3276. // 过滤属性
  3277. filterAttrs(item) {
  3278. if (!item.content && !item.dcb_nr) return;
  3279. // 保存原始属性
  3280. const originalAttrs = item.attrs || [];
  3281. const originalDcbAttrs = item.dcb_attrs || [];
  3282. // 从内容中提取ID
  3283. const contentIds = (
  3284. (item.content || item.dcb_nr).match(/{{([^}]+)}}/g) || []
  3285. ).map((match) => match.slice(2, -2).trim());
  3286. if (contentIds.length > 0) {
  3287. // 只过滤掉确实不存在的ID
  3288. item.attrs = originalAttrs.filter(
  3289. (attr) =>
  3290. attr &&
  3291. (contentIds.includes(attr.id) ||
  3292. attr.type === "ProductAttr" || // 保留特殊类型属性
  3293. attr.type === "variableNull")
  3294. );
  3295. if (item.dcb_attrs) {
  3296. item.dcb_attrs = originalDcbAttrs.filter(
  3297. (attr) =>
  3298. attr &&
  3299. (contentIds.includes(attr.id) ||
  3300. attr.type === "ProductAttr" ||
  3301. attr.type === "variableNull")
  3302. );
  3303. }
  3304. }
  3305. },
  3306. handleDragStart(event, data) {
  3307. // 只允许拖拽一级目录
  3308. if (data.level !== 1) {
  3309. event.preventDefault();
  3310. return;
  3311. }
  3312. // 存储被拖拽的目录项和对应的模块索引
  3313. event.dataTransfer.setData(
  3314. "text/plain",
  3315. JSON.stringify({
  3316. moduleIndex: data.moduleIndex,
  3317. label: data.label,
  3318. })
  3319. );
  3320. },
  3321. handleDrop(event, targetData) {
  3322. event.preventDefault();
  3323. try {
  3324. const dragData = JSON.parse(event.dataTransfer.getData("text/plain"));
  3325. const sourceIndex = dragData.moduleIndex;
  3326. const targetIndex = targetData.moduleIndex;
  3327. // 确保是不同位置的拖放
  3328. if (sourceIndex === targetIndex) {
  3329. return;
  3330. }
  3331. // 1. 移动模块
  3332. const movedModule = this.coms.splice(sourceIndex, 1)[0];
  3333. this.coms.splice(targetIndex, 0, movedModule);
  3334. // 2. 更新所有模块的目录编号
  3335. this.updateDirectoryNumbers();
  3336. // 3. 重新生成目录数据
  3337. this.handleClick({ name: "catalog" });
  3338. } catch (error) {
  3339. console.error("Drop handling error:", error);
  3340. }
  3341. },
  3342. updateDirectoryNumbers() {
  3343. this.coms.forEach((module, moduleIndex) => {
  3344. const directoryAttrs = module.attrs.filter(
  3345. (attr) => attr.type === "Directory"
  3346. );
  3347. directoryAttrs.forEach((attr) => {
  3348. // 更新目录的模块索引
  3349. attr.moduleIndex = moduleIndex;
  3350. // 更新目录编号
  3351. const numbers = attr.number.split(".");
  3352. numbers[0] = (moduleIndex + 1).toString();
  3353. attr.number = numbers.join(".");
  3354. // 更新显示的标签
  3355. attr.content = attr.content.replace(/^\d+/, moduleIndex + 1);
  3356. });
  3357. });
  3358. },
  3359. allowDrop(draggingNode, dropNode, type) {
  3360. // 只允许同级之间的拖放,不允许嵌套
  3361. return type !== "inner";
  3362. },
  3363. allowDrag(draggingNode) {
  3364. return draggingNode.level === 1;
  3365. },
  3366. handleDragEnd(event) {
  3367. // 处理拖拽结束事件
  3368. console.log("Drag end:", event);
  3369. },
  3370. // 处理拖拽结束事件
  3371. handleDragEnd(draggingNode, dropNode, dropType) {
  3372. if (!dropNode || !dropType) {
  3373. console.log("无效的拖放操作");
  3374. return;
  3375. }
  3376. console.log("拖拽节点:", draggingNode.data);
  3377. console.log("目标节点:", dropNode.data);
  3378. console.log("放置类型:", dropType);
  3379. // 获取源模块和目标模块的索引
  3380. const sourceIndex = draggingNode.data.moduleIndex;
  3381. const targetIndex = dropNode.data.moduleIndex;
  3382. if (typeof sourceIndex !== "number" || typeof targetIndex !== "number") {
  3383. console.error("无法确定模块索引");
  3384. return;
  3385. }
  3386. // 计算最终目标位置
  3387. let finalTargetIndex = targetIndex;
  3388. // 根据放置类型调整目标位置
  3389. if (dropType === "next") {
  3390. finalTargetIndex++;
  3391. }
  3392. // 如果源位置在目标位置之前,需要调整目标位置
  3393. if (sourceIndex < finalTargetIndex) {
  3394. finalTargetIndex--;
  3395. }
  3396. console.log("移动模块:", {
  3397. from: sourceIndex,
  3398. to: finalTargetIndex,
  3399. type: dropType,
  3400. });
  3401. // 执行模块移动
  3402. const [movedModule] = this.coms.splice(sourceIndex, 1);
  3403. this.coms.splice(finalTargetIndex, 0, movedModule);
  3404. // 更新所有模块的编号和目录结构
  3405. this.$nextTick(() => {
  3406. this.updateModulesAndDirectories();
  3407. // 强制更新视图
  3408. this.$forceUpdate();
  3409. });
  3410. },
  3411. // 改进的查找模块索引方法
  3412. findModuleIndex(nodeData) {
  3413. console.log("查找模块索引:", nodeData);
  3414. // 首先尝试使用直接的moduleIndex
  3415. if (typeof nodeData.moduleIndex === "number") {
  3416. return nodeData.moduleIndex;
  3417. }
  3418. // 然后尝试从编号中获取索引
  3419. if (nodeData.number) {
  3420. const moduleNumber = parseInt(nodeData.number.split(".")[0]);
  3421. if (!isNaN(moduleNumber)) {
  3422. // 因为编号是从1开始的,所以需要减1来获取索引
  3423. return moduleNumber - 1;
  3424. }
  3425. }
  3426. // 最后尝试在coms数组中查找匹配的模块
  3427. return this.coms.findIndex((module) => {
  3428. const directoryAttr = module.attrs?.find((attr) => {
  3429. if (attr.type !== "Directory") return false;
  3430. if (attr.level !== 1) return false;
  3431. // 尝试多种匹配方式
  3432. if (attr.id === nodeData.id) return true;
  3433. if (attr.moduleIndex === nodeData.moduleIndex) return true;
  3434. if (attr.number && nodeData.number && attr.number === nodeData.number)
  3435. return true;
  3436. return false;
  3437. });
  3438. return !!directoryAttr;
  3439. });
  3440. },
  3441. // 更新模块和目录结构
  3442. updateModulesAndDirectories() {
  3443. console.log("开始更新模块和目录结构");
  3444. console.log("更新前的模块列表:", JSON.parse(JSON.stringify(this.coms)));
  3445. this.coms.forEach((module, moduleIndex) => {
  3446. if (!module.attrs) return;
  3447. const directoryAttrs = module.attrs.filter(
  3448. (attr) => attr.type === "Directory"
  3449. );
  3450. directoryAttrs.forEach((attr) => {
  3451. // 更新模块索引
  3452. attr.moduleIndex = moduleIndex;
  3453. // 更新编号
  3454. const numbers = attr.number.split(".");
  3455. numbers[0] = (moduleIndex + 1).toString();
  3456. const newNumber = numbers.join(".");
  3457. // 更新属性
  3458. attr.number = newNumber;
  3459. // 更新内容
  3460. if (attr.content) {
  3461. const contentParts = attr.content.split(" ");
  3462. contentParts[0] = newNumber;
  3463. attr.content = contentParts.join(" ");
  3464. }
  3465. });
  3466. });
  3467. console.log("更新后的模块列表:", JSON.parse(JSON.stringify(this.coms)));
  3468. // 重新生成目录树
  3469. this.$nextTick(() => {
  3470. this.handleClick({ name: "catalog" });
  3471. });
  3472. },
  3473. // 生成目录树数据
  3474. generateCatalogData() {
  3475. // 这里应该是你原有的生成目录数据的逻辑
  3476. // 确保调用正确的方法来更新目录视图
  3477. this.handleClick({ name: "catalog" });
  3478. },
  3479. toggleSchemePanel() {
  3480. this.isSchemeCollapsed = !this.isSchemeCollapsed;
  3481. },
  3482. toggleResourcePanel() {
  3483. this.isResourceCollapsed = !this.isResourceCollapsed;
  3484. },
  3485. // 更新目录结构
  3486. updateCatalog(coms) {
  3487. try {
  3488. if (!Array.isArray(coms) || coms.length === 0) {
  3489. this.catalogData = [];
  3490. return;
  3491. }
  3492. let catalogData = [];
  3493. coms.forEach((item, moduleIndex) => {
  3494. if (!item || !item.attrs) return;
  3495. // 获取所有Directory类型的属性并排序
  3496. const directoryAttrs = item.attrs
  3497. .filter((attr) => attr && attr.type === "Directory")
  3498. .sort((a, b) => {
  3499. if (!a || !b) return 0;
  3500. return (a.number || "").localeCompare(b.number || "", undefined, {
  3501. numeric: true,
  3502. });
  3503. });
  3504. directoryAttrs.forEach((attr) => {
  3505. if (!attr) return;
  3506. // 确保目录内容正确显示
  3507. const content = attr.content || attr.name || "";
  3508. const number = this.generateDirectoryNumber(
  3509. moduleIndex,
  3510. attr.level
  3511. );
  3512. const catalogItem = {
  3513. id: `${moduleIndex}-${attr.id || ""}`,
  3514. label: `${number} ${content}`.trim(),
  3515. level: attr.level || 1,
  3516. moduleIndex: moduleIndex,
  3517. number: number,
  3518. children: [],
  3519. };
  3520. // 更新原始属性的编号和内容
  3521. attr.number = number;
  3522. attr.content = content;
  3523. // 根据level确定目录层级
  3524. if (attr.level === 1) {
  3525. catalogData.push(catalogItem);
  3526. } else {
  3527. const parent = this.findParentDirectory(catalogData, number);
  3528. if (parent) {
  3529. parent.children = parent.children || [];
  3530. parent.children.push(catalogItem);
  3531. }
  3532. }
  3533. });
  3534. });
  3535. // 更新目录数据
  3536. this.catalogData = this.sortCatalogData(catalogData);
  3537. // 更新原始组件中的目录信息
  3538. this.updateComponentDirectories(coms);
  3539. } catch (error) {
  3540. console.error("Error updating catalog:", error);
  3541. this.catalogData = [];
  3542. }
  3543. },
  3544. // 生成目录编号
  3545. generateDirectoryNumber(moduleIndex, level) {
  3546. let number = "";
  3547. if (level === 1) {
  3548. // 一级标题使用模块序号
  3549. number = (moduleIndex + 1).toString();
  3550. } else {
  3551. // 查找父级目录编号
  3552. const parentNumber = this.findParentNumber(moduleIndex, level);
  3553. // 获取当前级别的计数
  3554. const siblings = this.getSiblingDirectories(
  3555. moduleIndex,
  3556. level,
  3557. parentNumber
  3558. );
  3559. const currentCount = siblings.length + 1;
  3560. // 组合编号
  3561. number = `${parentNumber}.${currentCount}`;
  3562. }
  3563. return number;
  3564. },
  3565. // 获取同级目录项
  3566. getSiblingDirectories(moduleIndex, level, parentNumber) {
  3567. const siblings = [];
  3568. // 遍历所有模块查找同级目录
  3569. for (let i = 0; i < moduleIndex; i++) {
  3570. const module = this.coms[i];
  3571. if (module.attrs) {
  3572. module.attrs.forEach((attr) => {
  3573. if (
  3574. attr.type === "Directory" &&
  3575. attr.level === level &&
  3576. attr.number.startsWith(parentNumber)
  3577. ) {
  3578. siblings.push(attr);
  3579. }
  3580. });
  3581. }
  3582. }
  3583. return siblings;
  3584. },
  3585. // 更新组件中的目录信息
  3586. updateComponentDirectories(coms) {
  3587. coms.forEach((com, moduleIndex) => {
  3588. if (!com.attrs) return;
  3589. com.attrs.forEach((attr) => {
  3590. if (attr.type === "Directory") {
  3591. // 更新目录编号
  3592. const number = this.generateDirectoryNumber(
  3593. moduleIndex,
  3594. attr.level
  3595. );
  3596. attr.number = number;
  3597. // 确保内容正确显示
  3598. if (!attr.content || attr.content.includes("未命名目录")) {
  3599. attr.content = attr.name || `第${number}章`;
  3600. }
  3601. // 更新moduleIndex
  3602. attr.moduleIndex = moduleIndex;
  3603. }
  3604. });
  3605. });
  3606. },
  3607. // 处理拖拽结束后的更新
  3608. handleDragEnd(draggingNode, dropNode, dropType) {
  3609. if (!dropNode || !dropType) {
  3610. console.log("无效的拖放操作");
  3611. return;
  3612. }
  3613. // 获取源模块和目标模块的索引
  3614. const sourceIndex = this.findModuleIndex(draggingNode.data);
  3615. const targetIndex = this.findModuleIndex(dropNode.data);
  3616. if (typeof sourceIndex !== "number" || typeof targetIndex !== "number") {
  3617. console.error("无法确定模块索引");
  3618. return;
  3619. }
  3620. // 计算最终目标位置
  3621. let finalTargetIndex = targetIndex;
  3622. if (dropType === "next") {
  3623. finalTargetIndex++;
  3624. }
  3625. if (sourceIndex < finalTargetIndex) {
  3626. finalTargetIndex--;
  3627. }
  3628. // 执行模块移动
  3629. const [movedModule] = this.coms.splice(sourceIndex, 1);
  3630. this.coms.splice(finalTargetIndex, 0, movedModule);
  3631. // 更新目录结构
  3632. this.$nextTick(() => {
  3633. this.updateCatalog(this.coms);
  3634. this.$forceUpdate();
  3635. });
  3636. },
  3637. // 改进的查找父目录方法
  3638. findParentDirectory(catalogData, number) {
  3639. if (!number || !number.includes(".")) return null;
  3640. const parentNumber = number.split(".").slice(0, -1).join(".");
  3641. const findInItems = (items) => {
  3642. for (let item of items) {
  3643. if (item.number === parentNumber) {
  3644. return item;
  3645. }
  3646. if (item.children && item.children.length > 0) {
  3647. const found = findInItems(item.children);
  3648. if (found) return found;
  3649. }
  3650. }
  3651. return null;
  3652. };
  3653. return findInItems(catalogData);
  3654. },
  3655. // 高亮当前选中的目录项
  3656. highlightCurrentCatalogItem(moduleIndex) {
  3657. if (!this.$refs.catalogTree) return;
  3658. const findNode = (data) => {
  3659. for (let item of data) {
  3660. if (item.moduleIndex === moduleIndex) {
  3661. this.$refs.catalogTree.setCurrentKey(item.id);
  3662. return true;
  3663. }
  3664. if (item.children && item.children.length) {
  3665. if (findNode(item.children)) return true;
  3666. }
  3667. }
  3668. return false;
  3669. };
  3670. findNode(this.catalogData);
  3671. },
  3672. // 处理目录项点击
  3673. handleCatalogClick(data) {
  3674. // 如果正在编辑,不触发其他操作
  3675. if (data.isEditing) return;
  3676. // 其他点击处理逻辑...
  3677. console.log("点击的目录项:", data);
  3678. },
  3679. // 处理组件内容更新
  3680. onSetComs(newComs) {
  3681. this.coms = newComs;
  3682. this.updateCatalog(newComs);
  3683. },
  3684. // 处理拖拽结束后的目录更新
  3685. handleDragEnd() {
  3686. this.$nextTick(() => {
  3687. this.updateCatalog(this.coms);
  3688. });
  3689. },
  3690. // 添加 sortCatalogData 方法
  3691. sortCatalogData(catalogData) {
  3692. if (!Array.isArray(catalogData)) {
  3693. return [];
  3694. }
  3695. // 递归排序函数
  3696. const sortItems = (items) => {
  3697. return items
  3698. .sort((a, b) => {
  3699. // 按照编号进行数字排序
  3700. const aNum = a.number.split(".").map(Number);
  3701. const bNum = b.number.split(".").map(Number);
  3702. // 比较每一级的编号
  3703. for (let i = 0; i < Math.min(aNum.length, bNum.length); i++) {
  3704. if (aNum[i] !== bNum[i]) {
  3705. return aNum[i] - bNum[i];
  3706. }
  3707. }
  3708. // 如果前面的编号都相同,较短的编号在前
  3709. return aNum.length - bNum.length;
  3710. })
  3711. .map((item) => {
  3712. // 递归排序子目录
  3713. if (item.children && item.children.length > 0) {
  3714. item.children = sortItems(item.children);
  3715. }
  3716. return item;
  3717. });
  3718. };
  3719. // 对顶层目录进行排序
  3720. return sortItems(catalogData);
  3721. },
  3722. // 添加允许拖拽和放置的方法
  3723. allowDrag(node) {
  3724. // 允许所有节点拖拽
  3725. return true;
  3726. },
  3727. allowDrop(draggingNode, dropNode, type) {
  3728. // 不允许跨级拖拽,只允许同级拖拽
  3729. return draggingNode.data.level === dropNode.data.level;
  3730. },
  3731. handleDragEnd(draggingNode, dropNode, dropType, ev) {
  3732. if (!dropNode) return;
  3733. // 获取拖拽节点和目标节点的模块索引
  3734. const dragModuleIndex = draggingNode.data.moduleIndex;
  3735. const dropModuleIndex = dropNode.data.moduleIndex;
  3736. // 如果是同一级目录的拖拽
  3737. if (draggingNode.data.level === dropNode.data.level) {
  3738. // 更新模块顺序
  3739. const dragModule = this.coms[dragModuleIndex];
  3740. this.coms.splice(dragModuleIndex, 1);
  3741. // 根据放置类型确定插入位置
  3742. const targetIndex =
  3743. dropType === "before" ? dropModuleIndex : dropModuleIndex + 1;
  3744. this.coms.splice(targetIndex, 0, dragModule);
  3745. // 重新生成目录编号
  3746. this.updateDirectoryNumbers();
  3747. }
  3748. },
  3749. // 更新目录编号的方法
  3750. updateDirectoryNumbers() {
  3751. this.coms.forEach((module, moduleIndex) => {
  3752. const directories = module.attrs.filter(
  3753. (attr) => attr.type === "Directory"
  3754. );
  3755. directories.forEach((dir) => {
  3756. const { level } = dir;
  3757. const { number, content } = this.generateNumberedContent(
  3758. moduleIndex,
  3759. level
  3760. );
  3761. dir.number = number;
  3762. // 只更新编号部分,保留原有内容
  3763. dir.content = dir.content.replace(/^[\d.]+/, number);
  3764. });
  3765. });
  3766. // 强制更新视图
  3767. this.$nextTick(() => {
  3768. this.updateCatalog(this.coms);
  3769. this.$forceUpdate();
  3770. });
  3771. },
  3772. // 开始编辑目录
  3773. handleStartEdit(data) {
  3774. // 设置编辑状态和临时编辑内容
  3775. this.$set(data, "isEditing", true);
  3776. this.$set(
  3777. data,
  3778. "editingContent",
  3779. data.label.split(" ").slice(1).join(" ")
  3780. ); // 只编辑内容部分,保留编号
  3781. // 等待DOM更新后聚焦输入框
  3782. this.$nextTick(() => {
  3783. if (this.$refs.editInput && this.$refs.editInput[0]) {
  3784. this.$refs.editInput[0].focus();
  3785. }
  3786. });
  3787. },
  3788. // 完成编辑
  3789. handleEditComplete(data) {
  3790. if (!data.isEditing) return;
  3791. // 获取原始编号
  3792. const number = data.label.split(" ")[0];
  3793. // 更新目录树节点的显示文本
  3794. data.label = `${number} ${data.editingContent}`;
  3795. // 更新对应模块的目录属性
  3796. const { moduleIndex } = data;
  3797. const module = this.coms[moduleIndex];
  3798. if (module) {
  3799. const directoryAttr = module.attrs.find(
  3800. (attr) => attr.type === "Directory" && attr.number === number
  3801. );
  3802. if (directoryAttr) {
  3803. directoryAttr.content = data.editingContent;
  3804. }
  3805. }
  3806. // 清除编辑状态
  3807. this.$delete(data, "isEditing");
  3808. this.$delete(data, "editingContent");
  3809. // 强制更新视图
  3810. this.$forceUpdate();
  3811. },
  3812. // 添加新方法:更新目录显示
  3813. updateDirectoryDisplay(com) {
  3814. // 按级别和编号排序目录
  3815. const directories = com.attrs
  3816. .filter((attr) => attr.type === "Directory")
  3817. .sort((a, b) => {
  3818. if (a.level !== b.level) return a.level - b.level;
  3819. return a.number.localeCompare(b.number, undefined, { numeric: true });
  3820. });
  3821. // 更新每个目录的显示内容
  3822. directories.forEach((dir) => {
  3823. const pattern = new RegExp(`{{${dir.id}}}`, "g");
  3824. com.content = com.content.replace(
  3825. pattern,
  3826. `${dir.number} {{${dir.id}}}`
  3827. );
  3828. });
  3829. },
  3830. handleDirectoryDragEnd(event, data) {
  3831. // 处理拖拽结束事件
  3832. console.log("Drag end:", event);
  3833. this.handleDirectorySave(data);
  3834. },
  3835. // ... existing code ...
  3836. /* 插入产品属性 */
  3837. onInsertProductAttr(e) {
  3838. if (this.comIndex < 0) {
  3839. this.$message.warning("请选择插入图层");
  3840. return false;
  3841. }
  3842. const com = this.coms[this.comIndex];
  3843. if (!com) {
  3844. this.$message.warning("请先添加文档内容");
  3845. return false;
  3846. }
  3847. // 生成唯一ID
  3848. const attrId = `ProductAttr_${Date.now()}`;
  3849. const data = {
  3850. type: "ProductAttr",
  3851. id: attrId,
  3852. name: "商品属性",
  3853. intro: "商品属性",
  3854. content: e.content || "",
  3855. attrs: e.attrs || {},
  3856. };
  3857. // 添加到组件属性中
  3858. com.attrs.push(data);
  3859. // 更新文本内容
  3860. this.insertCmd = {
  3861. content: `{{${attrId}}}`,
  3862. };
  3863. // 如果有产品信息,添加到文档关联商品
  3864. if (e.productInfo) {
  3865. if (!this.docAttr.linkProduct) {
  3866. this.docAttr.linkProduct = [];
  3867. }
  3868. // 避免重复添加
  3869. if (
  3870. !this.docAttr.linkProduct.some(
  3871. (p) => p.dcp_p_no === e.productInfo.dcp_p_no
  3872. )
  3873. ) {
  3874. this.docAttr.linkProduct.push(e.productInfo);
  3875. }
  3876. }
  3877. // 关闭产品属性选择框(如果有的话)
  3878. this.showProductAttr = false;
  3879. // 强制更新视图
  3880. this.$nextTick(() => {
  3881. this.$forceUpdate();
  3882. });
  3883. return true;
  3884. },
  3885. // 添加一个解析目录内容的方法
  3886. parseDirectoryContent(content) {
  3887. if (!content) return "";
  3888. // 匹配 {{Directory_x_x_xxxxxxxxxx}} 格式的内容
  3889. const directoryPattern = /{{(Directory_\d+_\d+_\d+)}}/g;
  3890. return content.replace(directoryPattern, (match, directoryId) => {
  3891. // 遍历所有组件查找对应的目录项
  3892. for (const com of this.coms) {
  3893. const directoryAttr = com.attrs.find(
  3894. (attr) => attr.type === "Directory" && attr.id === directoryId
  3895. );
  3896. if (directoryAttr) {
  3897. // 返回格式化的目录内容:编号 + 内容
  3898. return `${directoryAttr.number} ${directoryAttr.content}`;
  3899. }
  3900. }
  3901. return match; // 如果找不到对应的目录项,保持原样
  3902. });
  3903. },
  3904. // 修改预览处理方法
  3905. handlePreview() {
  3906. this.showViewForm = true;
  3907. // 处理预览内容
  3908. const previewContent = this.coms.map((com) => {
  3909. // 深拷贝以避免修改原始数据
  3910. const previewCom = JSON.parse(JSON.stringify(com));
  3911. // 如果有内容字段,处理目录内容
  3912. if (previewCom.content) {
  3913. previewCom.content = this.parseDirectoryContent(previewCom.content);
  3914. }
  3915. // 处理属性中的目录内容
  3916. if (previewCom.attrs) {
  3917. previewCom.attrs = previewCom.attrs.map((attr) => {
  3918. if (attr.type === "Directory") {
  3919. return {
  3920. ...attr,
  3921. content: `${attr.number} ${attr.content}`,
  3922. };
  3923. }
  3924. return attr;
  3925. });
  3926. }
  3927. return previewCom;
  3928. });
  3929. // 更新预览数据
  3930. this.previewData = previewContent;
  3931. },
  3932. // 在 ViewForm 组件中添加内容解析
  3933. // 确保 ViewForm 组件接收并正确处理目录内容
  3934. },
  3935. };
  3936. </script>
  3937. <style lang="scss">
  3938. @import "./create.scss";
  3939. .el-collapse,
  3940. .el-collapse-item__wrap {
  3941. border: none;
  3942. }
  3943. .el-collapse,
  3944. .el-collapse-item__header {
  3945. border: none;
  3946. .el-collapse-item__arrow {
  3947. margin: 0;
  3948. }
  3949. }
  3950. .borderless-collapse {
  3951. border: none;
  3952. ::v-deep .el-collapse-item__header,
  3953. ::v-deep .el-collapse-item__wrap,
  3954. ::v-deep .el-collapse-item__content,
  3955. ::v-deep .el-collapse-item {
  3956. border: none;
  3957. }
  3958. ::v-deep .el-collapse-item__wrap {
  3959. border-bottom: none !important;
  3960. }
  3961. }
  3962. .scrollable-container {
  3963. overflow-x: auto;
  3964. white-space: nowrap;
  3965. width: 350px;
  3966. padding-bottom: 10px;
  3967. }
  3968. .min-width-content {
  3969. /* display: inline-block;
  3970. vertical-align: top; */
  3971. min-width: 150px;
  3972. white-space: normal;
  3973. }
  3974. // 树节点样式调整
  3975. ::v-deep .el-tree-node__content {
  3976. height: 32px;
  3977. &:hover {
  3978. background-color: #f5f7fa;
  3979. }
  3980. }
  3981. ::v-deep .el-tree-node.is-current > .el-tree-node__content {
  3982. background-color: #f0f7ff;
  3983. color: #409eff;
  3984. }
  3985. /*.el-collapse-item {
  3986. display: inline-block;
  3987. vertical-align: top;
  3988. } */
  3989. .resource-list {
  3990. .resource-category {
  3991. margin-bottom: 10px;
  3992. .category-title {
  3993. font-weight: bold;
  3994. margin-bottom: 5px;
  3995. color: #606266;
  3996. }
  3997. .resource-items {
  3998. padding-left: 20px;
  3999. .resource-item {
  4000. margin: 5px 0;
  4001. .el-checkbox {
  4002. display: flex;
  4003. align-items: center;
  4004. }
  4005. }
  4006. }
  4007. }
  4008. }
  4009. .template-content {
  4010. .search-box {
  4011. padding: 10px;
  4012. border-bottom: 1px solid #ebeef5;
  4013. .el-input {
  4014. width: 300px;
  4015. }
  4016. }
  4017. }
  4018. .module-list-container {
  4019. width: 320px;
  4020. margin-top: 110px;
  4021. /* position: absolute;
  4022. top: 135px;
  4023. right: 111px; */
  4024. /* border: 1px solid #dcdfe6; */
  4025. border-radius: 4px;
  4026. padding: 10px;
  4027. .module-item {
  4028. display: flex;
  4029. align-items: center;
  4030. padding: 10px;
  4031. border-bottom: 1px solid #ebeef5;
  4032. &:last-child {
  4033. border-bottom: none;
  4034. }
  4035. &.active-module {
  4036. background-color: #f5f7fa;
  4037. }
  4038. .drag-handle {
  4039. cursor: move;
  4040. margin-right: 15px;
  4041. }
  4042. .module-info {
  4043. flex: 1;
  4044. .module-category,
  4045. .module-name {
  4046. display: flex;
  4047. align-items: center;
  4048. margin-bottom: 5px;
  4049. &:last-child {
  4050. margin-bottom: 0;
  4051. }
  4052. .label {
  4053. color: #606266;
  4054. margin-right: 10px;
  4055. min-width: 70px;
  4056. }
  4057. .value {
  4058. color: #303133;
  4059. }
  4060. }
  4061. }
  4062. }
  4063. }
  4064. .custom-tree-node {
  4065. cursor: move;
  4066. user-select: none;
  4067. }
  4068. .custom-tree-node[draggable="false"] {
  4069. cursor: default;
  4070. }
  4071. /* 拖拽时的视觉反馈 */
  4072. .is-drop-inner {
  4073. border: 2px dashed #409eff;
  4074. }
  4075. .left_scheme,
  4076. .natural {
  4077. transition: width 0.3s;
  4078. overflow: hidden;
  4079. &.collapsed {
  4080. width: 50px !important;
  4081. .scheme-header,
  4082. .resource-header-title {
  4083. padding: 10px;
  4084. .title,
  4085. .title-left {
  4086. display: none;
  4087. }
  4088. .el-icon-menu {
  4089. margin-left: 0;
  4090. }
  4091. }
  4092. }
  4093. .el-icon-menu {
  4094. cursor: pointer;
  4095. padding: 5px;
  4096. transition: transform 0.3s;
  4097. &:hover {
  4098. color: #409eff;
  4099. }
  4100. }
  4101. &.collapsed .el-icon-menu {
  4102. transform: rotate(180deg);
  4103. }
  4104. }
  4105. .catalog-content {
  4106. .el-tree {
  4107. background: transparent;
  4108. .el-tree-node__content {
  4109. height: auto;
  4110. padding: 8px 0;
  4111. &:hover {
  4112. background-color: rgba(64, 158, 255, 0.1);
  4113. }
  4114. }
  4115. .custom-tree-node {
  4116. flex: 1;
  4117. display: flex;
  4118. align-items: center;
  4119. padding-right: 8px;
  4120. font-size: 14px;
  4121. i {
  4122. margin-right: 5px;
  4123. }
  4124. }
  4125. }
  4126. }
  4127. // 添加模块高亮动画
  4128. @keyframes highlight-pulse {
  4129. 0% {
  4130. background-color: transparent;
  4131. }
  4132. 50% {
  4133. background-color: rgba(64, 158, 255, 0.2);
  4134. }
  4135. 100% {
  4136. background-color: transparent;
  4137. }
  4138. }
  4139. .highlight {
  4140. animation: highlight-pulse 2s ease-in-out;
  4141. }
  4142. /* 添加到组件的 <style> 部分 */
  4143. .leftContent {
  4144. .el-tree {
  4145. .el-tree-node {
  4146. position: relative;
  4147. /* 为每个节点添加左侧垂直线 */
  4148. &:before {
  4149. content: "";
  4150. position: absolute;
  4151. left: 8px; /* 调整线条位置 */
  4152. top: 0;
  4153. bottom: 0;
  4154. width: 2px;
  4155. background-color: #1aad19; /* 线条颜色 */
  4156. z-index: 1;
  4157. }
  4158. /* 移除最后一个子节点的垂直线延伸 */
  4159. &:last-child:before {
  4160. height: 20px; /* 调整到节点中心位置 */
  4161. }
  4162. /* 为每个节点添加水平连接线 */ /* 与垂直线对齐 */ /* 水平线长度 */
  4163. /* .el-tree-node__content:before {
  4164. content: "";
  4165. position: absolute;
  4166. left: 8px;
  4167. top: 50%;
  4168. width: 16px;
  4169. height: 2px;
  4170. background-color: #1aad19;
  4171. z-index: 1;
  4172. } */
  4173. }
  4174. /* 移除根节点的垂直线 */
  4175. & > .el-tree-node:before {
  4176. display: none;
  4177. }
  4178. /* 移除第一层节点的连接线 */
  4179. & > .el-tree-node > .el-tree-node__content:before {
  4180. display: none;
  4181. }
  4182. /* 调整节点内容的位置,为线条留出空间 */
  4183. .el-tree-node__content {
  4184. position: relative;
  4185. /* 调整缩进 */
  4186. }
  4187. /* 确保展开箭头在正确位置 */
  4188. .el-tree-node__expand-icon {
  4189. padding: 6px;
  4190. margin-left: 10px;
  4191. }
  4192. }
  4193. }
  4194. /* 自定义树节点样式 */
  4195. .custom-tree-node {
  4196. flex: 1;
  4197. display: flex;
  4198. align-items: center;
  4199. padding: 0 8px;
  4200. font-size: 14px;
  4201. /* 编辑输入框样式 */
  4202. .el-input {
  4203. margin-left: -4px;
  4204. }
  4205. }
  4206. .custom-tree-node {
  4207. flex: 1;
  4208. display: flex;
  4209. align-items: center;
  4210. justify-content: space-between;
  4211. padding-right: 8px;
  4212. }
  4213. .directory-actions {
  4214. opacity: 0;
  4215. transition: opacity 0.2s;
  4216. }
  4217. .custom-tree-node:hover .directory-actions {
  4218. opacity: 1;
  4219. }
  4220. .module-actions {
  4221. display: flex;
  4222. gap: 8px; /* 按钮之间的间距 */
  4223. align-items: center;
  4224. white-space: nowrap;
  4225. flex-direction: column;
  4226. }
  4227. .module-actions .el-button {
  4228. padding: 3px 0;
  4229. margin-left: 0;
  4230. }
  4231. </style>