create.vue 137 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004200520062007200820092010201120122013201420152016201720182019202020212022202320242025202620272028202920302031203220332034203520362037203820392040204120422043204420452046204720482049205020512052205320542055205620572058205920602061206220632064206520662067206820692070207120722073207420752076207720782079208020812082208320842085208620872088208920902091209220932094209520962097209820992100210121022103210421052106210721082109211021112112211321142115211621172118211921202121212221232124212521262127212821292130213121322133213421352136213721382139214021412142214321442145214621472148214921502151215221532154215521562157215821592160216121622163216421652166216721682169217021712172217321742175217621772178217921802181218221832184218521862187218821892190219121922193219421952196219721982199220022012202220322042205220622072208220922102211221222132214221522162217221822192220222122222223222422252226222722282229223022312232223322342235223622372238223922402241224222432244224522462247224822492250225122522253225422552256225722582259226022612262226322642265226622672268226922702271227222732274227522762277227822792280228122822283228422852286228722882289229022912292229322942295229622972298229923002301230223032304230523062307230823092310231123122313231423152316231723182319232023212322232323242325232623272328232923302331233223332334233523362337233823392340234123422343234423452346234723482349235023512352235323542355235623572358235923602361236223632364236523662367236823692370237123722373237423752376237723782379238023812382238323842385238623872388238923902391239223932394239523962397239823992400240124022403240424052406240724082409241024112412241324142415241624172418241924202421242224232424242524262427242824292430243124322433243424352436243724382439244024412442244324442445244624472448244924502451245224532454245524562457245824592460246124622463246424652466246724682469247024712472247324742475247624772478247924802481248224832484248524862487248824892490249124922493249424952496249724982499250025012502250325042505250625072508250925102511251225132514251525162517251825192520252125222523252425252526252725282529253025312532253325342535253625372538253925402541254225432544254525462547254825492550255125522553255425552556255725582559256025612562256325642565256625672568256925702571257225732574257525762577257825792580258125822583258425852586258725882589259025912592259325942595259625972598259926002601260226032604260526062607260826092610261126122613261426152616261726182619262026212622262326242625262626272628262926302631263226332634263526362637263826392640264126422643264426452646264726482649265026512652265326542655265626572658265926602661266226632664266526662667266826692670267126722673267426752676267726782679268026812682268326842685268626872688268926902691269226932694269526962697269826992700270127022703270427052706270727082709271027112712271327142715271627172718271927202721272227232724272527262727272827292730273127322733273427352736273727382739274027412742274327442745274627472748274927502751275227532754275527562757275827592760276127622763276427652766276727682769277027712772277327742775277627772778277927802781278227832784278527862787278827892790279127922793279427952796279727982799280028012802280328042805280628072808280928102811281228132814281528162817281828192820282128222823282428252826282728282829283028312832283328342835283628372838283928402841284228432844284528462847284828492850285128522853285428552856285728582859286028612862286328642865286628672868286928702871287228732874287528762877287828792880288128822883288428852886288728882889289028912892289328942895289628972898289929002901290229032904290529062907290829092910291129122913291429152916291729182919292029212922292329242925292629272928292929302931293229332934293529362937293829392940294129422943294429452946294729482949295029512952295329542955295629572958295929602961296229632964296529662967296829692970297129722973297429752976297729782979298029812982298329842985298629872988298929902991299229932994299529962997299829993000300130023003300430053006300730083009301030113012301330143015301630173018301930203021302230233024302530263027302830293030303130323033303430353036303730383039304030413042304330443045304630473048304930503051305230533054305530563057305830593060306130623063306430653066306730683069307030713072307330743075307630773078307930803081308230833084308530863087308830893090309130923093309430953096309730983099310031013102310331043105310631073108310931103111311231133114311531163117311831193120312131223123312431253126312731283129313031313132313331343135313631373138313931403141314231433144314531463147314831493150315131523153315431553156315731583159316031613162316331643165316631673168316931703171317231733174317531763177317831793180318131823183318431853186318731883189319031913192319331943195319631973198319932003201320232033204320532063207320832093210321132123213321432153216321732183219322032213222322332243225322632273228322932303231323232333234323532363237323832393240324132423243324432453246324732483249325032513252325332543255325632573258325932603261326232633264326532663267326832693270327132723273327432753276327732783279328032813282328332843285328632873288328932903291329232933294329532963297329832993300330133023303330433053306330733083309331033113312331333143315331633173318331933203321332233233324332533263327332833293330333133323333333433353336333733383339334033413342334333443345334633473348334933503351335233533354335533563357335833593360336133623363336433653366336733683369337033713372337333743375337633773378337933803381338233833384338533863387338833893390339133923393339433953396339733983399340034013402340334043405340634073408340934103411341234133414341534163417341834193420342134223423342434253426342734283429343034313432343334343435343634373438343934403441344234433444344534463447344834493450345134523453345434553456345734583459346034613462346334643465346634673468346934703471347234733474347534763477347834793480348134823483348434853486348734883489349034913492349334943495349634973498349935003501350235033504350535063507350835093510351135123513351435153516351735183519352035213522352335243525352635273528352935303531353235333534353535363537353835393540354135423543354435453546354735483549355035513552355335543555355635573558355935603561356235633564356535663567356835693570357135723573357435753576357735783579358035813582358335843585358635873588358935903591359235933594359535963597359835993600360136023603360436053606360736083609361036113612361336143615361636173618361936203621362236233624362536263627362836293630363136323633363436353636363736383639364036413642364336443645364636473648364936503651365236533654365536563657365836593660366136623663366436653666366736683669367036713672367336743675367636773678367936803681368236833684368536863687368836893690369136923693369436953696369736983699370037013702370337043705370637073708370937103711371237133714371537163717371837193720372137223723372437253726372737283729373037313732373337343735373637373738373937403741374237433744374537463747374837493750375137523753375437553756375737583759376037613762376337643765376637673768376937703771377237733774377537763777377837793780378137823783378437853786378737883789379037913792379337943795379637973798379938003801380238033804380538063807380838093810381138123813381438153816381738183819382038213822382338243825382638273828382938303831383238333834383538363837383838393840384138423843384438453846384738483849385038513852385338543855385638573858385938603861386238633864386538663867386838693870387138723873387438753876387738783879388038813882388338843885388638873888388938903891389238933894389538963897389838993900390139023903390439053906390739083909391039113912391339143915391639173918391939203921392239233924392539263927392839293930393139323933393439353936393739383939394039413942394339443945394639473948394939503951395239533954395539563957395839593960396139623963396439653966396739683969397039713972397339743975397639773978397939803981398239833984398539863987398839893990399139923993399439953996399739983999400040014002400340044005400640074008400940104011401240134014401540164017401840194020402140224023402440254026402740284029403040314032403340344035403640374038403940404041404240434044404540464047404840494050405140524053405440554056405740584059406040614062406340644065406640674068406940704071407240734074407540764077407840794080408140824083408440854086408740884089409040914092409340944095409640974098409941004101410241034104410541064107410841094110411141124113411441154116411741184119412041214122412341244125412641274128412941304131413241334134413541364137413841394140414141424143414441454146414741484149415041514152415341544155415641574158415941604161416241634164416541664167416841694170417141724173417441754176417741784179418041814182418341844185418641874188418941904191419241934194419541964197419841994200420142024203420442054206420742084209421042114212421342144215421642174218421942204221422242234224422542264227422842294230423142324233423442354236423742384239424042414242424342444245424642474248424942504251425242534254425542564257425842594260426142624263426442654266426742684269427042714272427342744275427642774278427942804281428242834284428542864287428842894290429142924293429442954296429742984299430043014302430343044305430643074308430943104311431243134314431543164317431843194320432143224323432443254326432743284329433043314332433343344335433643374338433943404341434243434344434543464347434843494350435143524353435443554356435743584359436043614362436343644365436643674368436943704371437243734374437543764377437843794380438143824383438443854386438743884389439043914392439343944395439643974398439944004401440244034404440544064407440844094410441144124413441444154416441744184419442044214422442344244425442644274428442944304431443244334434443544364437443844394440444144424443444444454446444744484449445044514452445344544455445644574458445944604461446244634464446544664467446844694470447144724473447444754476447744784479448044814482448344844485448644874488448944904491449244934494449544964497449844994500450145024503450445054506450745084509451045114512451345144515451645174518451945204521452245234524452545264527452845294530453145324533453445354536453745384539454045414542454345444545454645474548454945504551455245534554455545564557455845594560456145624563456445654566456745684569457045714572457345744575457645774578457945804581458245834584458545864587458845894590459145924593459445954596459745984599460046014602460346044605460646074608460946104611461246134614461546164617461846194620462146224623462446254626462746284629463046314632463346344635
  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="onRemoveMdel(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. onRemoveMdel(index) {
  3259. const removedComponent = this.coms[index];
  3260. this.$confirm('确认删除该模块?', '提示', {
  3261. confirmButtonText: '确定',
  3262. cancelButtonText: '取消',
  3263. type: 'warning'
  3264. }).then(() => {
  3265. // 从组件数组中移除
  3266. this.coms.splice(index, 1);
  3267. // 如果删除的组件来自模板,更新对应模板的选中状态
  3268. if (removedComponent.dcb_id) {
  3269. // 遍历所有分类查找对应的模板
  3270. this.categoryList.forEach(category => {
  3271. const template = (category.templates || []).find(t => t.dcb_id === removedComponent.dcb_id);
  3272. if (template) {
  3273. // 取消模板的选中状态
  3274. this.updateTemplateSelection(template, false);
  3275. template.selected = false;
  3276. }
  3277. });
  3278. }
  3279. this.$message({
  3280. type: 'success',
  3281. message: '删除成功!'
  3282. });
  3283. }).catch(() => {
  3284. this.$message({
  3285. type: 'info',
  3286. message: '已取消删除'
  3287. });
  3288. });
  3289. },
  3290. // 过滤属性
  3291. filterAttrs(item) {
  3292. if (!item.content && !item.dcb_nr) return;
  3293. // 保存原始属性
  3294. const originalAttrs = item.attrs || [];
  3295. const originalDcbAttrs = item.dcb_attrs || [];
  3296. // 从内容中提取ID
  3297. const contentIds = (
  3298. (item.content || item.dcb_nr).match(/{{([^}]+)}}/g) || []
  3299. ).map((match) => match.slice(2, -2).trim());
  3300. if (contentIds.length > 0) {
  3301. // 只过滤掉确实不存在的ID
  3302. item.attrs = originalAttrs.filter(
  3303. (attr) =>
  3304. attr &&
  3305. (contentIds.includes(attr.id) ||
  3306. attr.type === "ProductAttr" || // 保留特殊类型属性
  3307. attr.type === "variableNull")
  3308. );
  3309. if (item.dcb_attrs) {
  3310. item.dcb_attrs = originalDcbAttrs.filter(
  3311. (attr) =>
  3312. attr &&
  3313. (contentIds.includes(attr.id) ||
  3314. attr.type === "ProductAttr" ||
  3315. attr.type === "variableNull")
  3316. );
  3317. }
  3318. }
  3319. },
  3320. handleDragStart(event, data) {
  3321. // 只允许拖拽一级目录
  3322. if (data.level !== 1) {
  3323. event.preventDefault();
  3324. return;
  3325. }
  3326. // 存储被拖拽的目录项和对应的模块索引
  3327. event.dataTransfer.setData(
  3328. "text/plain",
  3329. JSON.stringify({
  3330. moduleIndex: data.moduleIndex,
  3331. label: data.label,
  3332. })
  3333. );
  3334. },
  3335. handleDrop(event, targetData) {
  3336. event.preventDefault();
  3337. try {
  3338. const dragData = JSON.parse(event.dataTransfer.getData("text/plain"));
  3339. const sourceIndex = dragData.moduleIndex;
  3340. const targetIndex = targetData.moduleIndex;
  3341. // 确保是不同位置的拖放
  3342. if (sourceIndex === targetIndex) {
  3343. return;
  3344. }
  3345. // 1. 移动模块
  3346. const movedModule = this.coms.splice(sourceIndex, 1)[0];
  3347. this.coms.splice(targetIndex, 0, movedModule);
  3348. // 2. 更新所有模块的目录编号
  3349. this.updateDirectoryNumbers();
  3350. // 3. 重新生成目录数据
  3351. this.handleClick({ name: "catalog" });
  3352. } catch (error) {
  3353. console.error("Drop handling error:", error);
  3354. }
  3355. },
  3356. updateDirectoryNumbers() {
  3357. this.coms.forEach((module, moduleIndex) => {
  3358. const directoryAttrs = module.attrs.filter(
  3359. (attr) => attr.type === "Directory"
  3360. );
  3361. directoryAttrs.forEach((attr) => {
  3362. // 更新目录的模块索引
  3363. attr.moduleIndex = moduleIndex;
  3364. // 更新目录编号
  3365. const numbers = attr.number.split(".");
  3366. numbers[0] = (moduleIndex + 1).toString();
  3367. attr.number = numbers.join(".");
  3368. // 更新显示的标签
  3369. attr.content = attr.content.replace(/^\d+/, moduleIndex + 1);
  3370. });
  3371. });
  3372. },
  3373. allowDrop(draggingNode, dropNode, type) {
  3374. // 只允许同级之间的拖放,不允许嵌套
  3375. return type !== "inner";
  3376. },
  3377. allowDrag(draggingNode) {
  3378. return draggingNode.level === 1;
  3379. },
  3380. handleDragEnd(event) {
  3381. // 处理拖拽结束事件
  3382. console.log("Drag end:", event);
  3383. },
  3384. // 处理拖拽结束事件
  3385. handleDragEnd(draggingNode, dropNode, dropType) {
  3386. if (!dropNode || !dropType) {
  3387. console.log("无效的拖放操作");
  3388. return;
  3389. }
  3390. console.log("拖拽节点:", draggingNode.data);
  3391. console.log("目标节点:", dropNode.data);
  3392. console.log("放置类型:", dropType);
  3393. // 获取源模块和目标模块的索引
  3394. const sourceIndex = draggingNode.data.moduleIndex;
  3395. const targetIndex = dropNode.data.moduleIndex;
  3396. if (typeof sourceIndex !== "number" || typeof targetIndex !== "number") {
  3397. console.error("无法确定模块索引");
  3398. return;
  3399. }
  3400. // 计算最终目标位置
  3401. let finalTargetIndex = targetIndex;
  3402. // 根据放置类型调整目标位置
  3403. if (dropType === "next") {
  3404. finalTargetIndex++;
  3405. }
  3406. // 如果源位置在目标位置之前,需要调整目标位置
  3407. if (sourceIndex < finalTargetIndex) {
  3408. finalTargetIndex--;
  3409. }
  3410. console.log("移动模块:", {
  3411. from: sourceIndex,
  3412. to: finalTargetIndex,
  3413. type: dropType,
  3414. });
  3415. // 执行模块移动
  3416. const [movedModule] = this.coms.splice(sourceIndex, 1);
  3417. this.coms.splice(finalTargetIndex, 0, movedModule);
  3418. // 更新所有模块的编号和目录结构
  3419. this.$nextTick(() => {
  3420. this.updateModulesAndDirectories();
  3421. // 强制更新视图
  3422. this.$forceUpdate();
  3423. });
  3424. },
  3425. // 改进的查找模块索引方法
  3426. findModuleIndex(nodeData) {
  3427. console.log("查找模块索引:", nodeData);
  3428. // 首先尝试使用直接的moduleIndex
  3429. if (typeof nodeData.moduleIndex === "number") {
  3430. return nodeData.moduleIndex;
  3431. }
  3432. // 然后尝试从编号中获取索引
  3433. if (nodeData.number) {
  3434. const moduleNumber = parseInt(nodeData.number.split(".")[0]);
  3435. if (!isNaN(moduleNumber)) {
  3436. // 因为编号是从1开始的,所以需要减1来获取索引
  3437. return moduleNumber - 1;
  3438. }
  3439. }
  3440. // 最后尝试在coms数组中查找匹配的模块
  3441. return this.coms.findIndex((module) => {
  3442. const directoryAttr = module.attrs?.find((attr) => {
  3443. if (attr.type !== "Directory") return false;
  3444. if (attr.level !== 1) return false;
  3445. // 尝试多种匹配方式
  3446. if (attr.id === nodeData.id) return true;
  3447. if (attr.moduleIndex === nodeData.moduleIndex) return true;
  3448. if (attr.number && nodeData.number && attr.number === nodeData.number)
  3449. return true;
  3450. return false;
  3451. });
  3452. return !!directoryAttr;
  3453. });
  3454. },
  3455. // 更新模块和目录结构
  3456. updateModulesAndDirectories() {
  3457. console.log("开始更新模块和目录结构");
  3458. console.log("更新前的模块列表:", JSON.parse(JSON.stringify(this.coms)));
  3459. this.coms.forEach((module, moduleIndex) => {
  3460. if (!module.attrs) return;
  3461. const directoryAttrs = module.attrs.filter(
  3462. (attr) => attr.type === "Directory"
  3463. );
  3464. directoryAttrs.forEach((attr) => {
  3465. // 更新模块索引
  3466. attr.moduleIndex = moduleIndex;
  3467. // 更新编号
  3468. const numbers = attr.number.split(".");
  3469. numbers[0] = (moduleIndex + 1).toString();
  3470. const newNumber = numbers.join(".");
  3471. // 更新属性
  3472. attr.number = newNumber;
  3473. // 更新内容
  3474. if (attr.content) {
  3475. const contentParts = attr.content.split(" ");
  3476. contentParts[0] = newNumber;
  3477. attr.content = contentParts.join(" ");
  3478. }
  3479. });
  3480. });
  3481. console.log("更新后的模块列表:", JSON.parse(JSON.stringify(this.coms)));
  3482. // 重新生成目录树
  3483. this.$nextTick(() => {
  3484. this.handleClick({ name: "catalog" });
  3485. });
  3486. },
  3487. // 生成目录树数据
  3488. generateCatalogData() {
  3489. // 这里应该是你原有的生成目录数据的逻辑
  3490. // 确保调用正确的方法来更新目录视图
  3491. this.handleClick({ name: "catalog" });
  3492. },
  3493. toggleSchemePanel() {
  3494. this.isSchemeCollapsed = !this.isSchemeCollapsed;
  3495. },
  3496. toggleResourcePanel() {
  3497. this.isResourceCollapsed = !this.isResourceCollapsed;
  3498. },
  3499. // 更新目录结构
  3500. updateCatalog(coms) {
  3501. try {
  3502. if (!Array.isArray(coms) || coms.length === 0) {
  3503. this.catalogData = [];
  3504. return;
  3505. }
  3506. let catalogData = [];
  3507. coms.forEach((item, moduleIndex) => {
  3508. if (!item || !item.attrs) return;
  3509. // 获取所有Directory类型的属性并排序
  3510. const directoryAttrs = item.attrs
  3511. .filter((attr) => attr && attr.type === "Directory")
  3512. .sort((a, b) => {
  3513. if (!a || !b) return 0;
  3514. return (a.number || "").localeCompare(b.number || "", undefined, {
  3515. numeric: true,
  3516. });
  3517. });
  3518. directoryAttrs.forEach((attr) => {
  3519. if (!attr) return;
  3520. // 确保目录内容正确显示
  3521. const content = attr.content || attr.name || "";
  3522. const number = this.generateDirectoryNumber(
  3523. moduleIndex,
  3524. attr.level
  3525. );
  3526. const catalogItem = {
  3527. id: `${moduleIndex}-${attr.id || ""}`,
  3528. label: `${number} ${content}`.trim(),
  3529. level: attr.level || 1,
  3530. moduleIndex: moduleIndex,
  3531. number: number,
  3532. children: [],
  3533. };
  3534. // 更新原始属性的编号和内容
  3535. attr.number = number;
  3536. attr.content = content;
  3537. // 根据level确定目录层级
  3538. if (attr.level === 1) {
  3539. catalogData.push(catalogItem);
  3540. } else {
  3541. const parent = this.findParentDirectory(catalogData, number);
  3542. if (parent) {
  3543. parent.children = parent.children || [];
  3544. parent.children.push(catalogItem);
  3545. }
  3546. }
  3547. });
  3548. });
  3549. // 更新目录数据
  3550. this.catalogData = this.sortCatalogData(catalogData);
  3551. // 更新原始组件中的目录信息
  3552. this.updateComponentDirectories(coms);
  3553. } catch (error) {
  3554. console.error("Error updating catalog:", error);
  3555. this.catalogData = [];
  3556. }
  3557. },
  3558. // 生成目录编号
  3559. generateDirectoryNumber(moduleIndex, level) {
  3560. let number = "";
  3561. if (level === 1) {
  3562. // 一级标题使用模块序号
  3563. number = (moduleIndex + 1).toString();
  3564. } else {
  3565. // 查找父级目录编号
  3566. const parentNumber = this.findParentNumber(moduleIndex, level);
  3567. // 获取当前级别的计数
  3568. const siblings = this.getSiblingDirectories(
  3569. moduleIndex,
  3570. level,
  3571. parentNumber
  3572. );
  3573. const currentCount = siblings.length + 1;
  3574. // 组合编号
  3575. number = `${parentNumber}.${currentCount}`;
  3576. }
  3577. return number;
  3578. },
  3579. // 获取同级目录项
  3580. getSiblingDirectories(moduleIndex, level, parentNumber) {
  3581. const siblings = [];
  3582. // 遍历所有模块查找同级目录
  3583. for (let i = 0; i < moduleIndex; i++) {
  3584. const module = this.coms[i];
  3585. if (module.attrs) {
  3586. module.attrs.forEach((attr) => {
  3587. if (
  3588. attr.type === "Directory" &&
  3589. attr.level === level &&
  3590. attr.number.startsWith(parentNumber)
  3591. ) {
  3592. siblings.push(attr);
  3593. }
  3594. });
  3595. }
  3596. }
  3597. return siblings;
  3598. },
  3599. // 更新组件中的目录信息
  3600. updateComponentDirectories(coms) {
  3601. coms.forEach((com, moduleIndex) => {
  3602. if (!com.attrs) return;
  3603. com.attrs.forEach((attr) => {
  3604. if (attr.type === "Directory") {
  3605. // 更新目录编号
  3606. const number = this.generateDirectoryNumber(
  3607. moduleIndex,
  3608. attr.level
  3609. );
  3610. attr.number = number;
  3611. // 确保内容正确显示
  3612. if (!attr.content || attr.content.includes("未命名目录")) {
  3613. attr.content = attr.name || `第${number}章`;
  3614. }
  3615. // 更新moduleIndex
  3616. attr.moduleIndex = moduleIndex;
  3617. }
  3618. });
  3619. });
  3620. },
  3621. // 处理拖拽结束后的更新
  3622. handleDragEnd(draggingNode, dropNode, dropType) {
  3623. if (!dropNode || !dropType) {
  3624. console.log("无效的拖放操作");
  3625. return;
  3626. }
  3627. // 获取源模块和目标模块的索引
  3628. const sourceIndex = this.findModuleIndex(draggingNode.data);
  3629. const targetIndex = this.findModuleIndex(dropNode.data);
  3630. if (typeof sourceIndex !== "number" || typeof targetIndex !== "number") {
  3631. console.error("无法确定模块索引");
  3632. return;
  3633. }
  3634. // 计算最终目标位置
  3635. let finalTargetIndex = targetIndex;
  3636. if (dropType === "next") {
  3637. finalTargetIndex++;
  3638. }
  3639. if (sourceIndex < finalTargetIndex) {
  3640. finalTargetIndex--;
  3641. }
  3642. // 执行模块移动
  3643. const [movedModule] = this.coms.splice(sourceIndex, 1);
  3644. this.coms.splice(finalTargetIndex, 0, movedModule);
  3645. // 更新目录结构
  3646. this.$nextTick(() => {
  3647. this.updateCatalog(this.coms);
  3648. this.$forceUpdate();
  3649. });
  3650. },
  3651. // 改进的查找父目录方法
  3652. findParentDirectory(catalogData, number) {
  3653. if (!number || !number.includes(".")) return null;
  3654. const parentNumber = number.split(".").slice(0, -1).join(".");
  3655. const findInItems = (items) => {
  3656. for (let item of items) {
  3657. if (item.number === parentNumber) {
  3658. return item;
  3659. }
  3660. if (item.children && item.children.length > 0) {
  3661. const found = findInItems(item.children);
  3662. if (found) return found;
  3663. }
  3664. }
  3665. return null;
  3666. };
  3667. return findInItems(catalogData);
  3668. },
  3669. // 高亮当前选中的目录项
  3670. highlightCurrentCatalogItem(moduleIndex) {
  3671. if (!this.$refs.catalogTree) return;
  3672. const findNode = (data) => {
  3673. for (let item of data) {
  3674. if (item.moduleIndex === moduleIndex) {
  3675. this.$refs.catalogTree.setCurrentKey(item.id);
  3676. return true;
  3677. }
  3678. if (item.children && item.children.length) {
  3679. if (findNode(item.children)) return true;
  3680. }
  3681. }
  3682. return false;
  3683. };
  3684. findNode(this.catalogData);
  3685. },
  3686. // 处理目录项点击
  3687. handleCatalogClick(data) {
  3688. // 如果正在编辑,不触发其他操作
  3689. if (data.isEditing) return;
  3690. // 其他点击处理逻辑...
  3691. console.log("点击的目录项:", data);
  3692. },
  3693. // 处理组件内容更新
  3694. onSetComs(newComs) {
  3695. this.coms = newComs;
  3696. this.updateCatalog(newComs);
  3697. },
  3698. // 处理拖拽结束后的目录更新
  3699. handleDragEnd() {
  3700. this.$nextTick(() => {
  3701. this.updateCatalog(this.coms);
  3702. });
  3703. },
  3704. // 添加 sortCatalogData 方法
  3705. sortCatalogData(catalogData) {
  3706. if (!Array.isArray(catalogData)) {
  3707. return [];
  3708. }
  3709. // 递归排序函数
  3710. const sortItems = (items) => {
  3711. return items
  3712. .sort((a, b) => {
  3713. // 按照编号进行数字排序
  3714. const aNum = a.number.split(".").map(Number);
  3715. const bNum = b.number.split(".").map(Number);
  3716. // 比较每一级的编号
  3717. for (let i = 0; i < Math.min(aNum.length, bNum.length); i++) {
  3718. if (aNum[i] !== bNum[i]) {
  3719. return aNum[i] - bNum[i];
  3720. }
  3721. }
  3722. // 如果前面的编号都相同,较短的编号在前
  3723. return aNum.length - bNum.length;
  3724. })
  3725. .map((item) => {
  3726. // 递归排序子目录
  3727. if (item.children && item.children.length > 0) {
  3728. item.children = sortItems(item.children);
  3729. }
  3730. return item;
  3731. });
  3732. };
  3733. // 对顶层目录进行排序
  3734. return sortItems(catalogData);
  3735. },
  3736. // 添加允许拖拽和放置的方法
  3737. allowDrag(node) {
  3738. // 允许所有节点拖拽
  3739. return true;
  3740. },
  3741. allowDrop(draggingNode, dropNode, type) {
  3742. // 不允许跨级拖拽,只允许同级拖拽
  3743. return draggingNode.data.level === dropNode.data.level;
  3744. },
  3745. handleDragEnd(draggingNode, dropNode, dropType, ev) {
  3746. if (!dropNode) return;
  3747. // 获取拖拽节点和目标节点的模块索引
  3748. const dragModuleIndex = draggingNode.data.moduleIndex;
  3749. const dropModuleIndex = dropNode.data.moduleIndex;
  3750. // 如果是同一级目录的拖拽
  3751. if (draggingNode.data.level === dropNode.data.level) {
  3752. // 更新模块顺序
  3753. const dragModule = this.coms[dragModuleIndex];
  3754. this.coms.splice(dragModuleIndex, 1);
  3755. // 根据放置类型确定插入位置
  3756. const targetIndex =
  3757. dropType === "before" ? dropModuleIndex : dropModuleIndex + 1;
  3758. this.coms.splice(targetIndex, 0, dragModule);
  3759. // 重新生成目录编号
  3760. this.updateDirectoryNumbers();
  3761. }
  3762. },
  3763. // 更新目录编号的方法
  3764. updateDirectoryNumbers() {
  3765. this.coms.forEach((module, moduleIndex) => {
  3766. const directories = module.attrs.filter(
  3767. (attr) => attr.type === "Directory"
  3768. );
  3769. directories.forEach((dir) => {
  3770. const { level } = dir;
  3771. const { number, content } = this.generateNumberedContent(
  3772. moduleIndex,
  3773. level
  3774. );
  3775. dir.number = number;
  3776. // 只更新编号部分,保留原有内容
  3777. dir.content = dir.content.replace(/^[\d.]+/, number);
  3778. });
  3779. });
  3780. // 强制更新视图
  3781. this.$nextTick(() => {
  3782. this.updateCatalog(this.coms);
  3783. this.$forceUpdate();
  3784. });
  3785. },
  3786. // 开始编辑目录
  3787. handleStartEdit(data) {
  3788. // 设置编辑状态和临时编辑内容
  3789. this.$set(data, "isEditing", true);
  3790. this.$set(
  3791. data,
  3792. "editingContent",
  3793. data.label.split(" ").slice(1).join(" ")
  3794. ); // 只编辑内容部分,保留编号
  3795. // 等待DOM更新后聚焦输入框
  3796. this.$nextTick(() => {
  3797. if (this.$refs.editInput && this.$refs.editInput[0]) {
  3798. this.$refs.editInput[0].focus();
  3799. }
  3800. });
  3801. },
  3802. // 完成编辑
  3803. handleEditComplete(data) {
  3804. if (!data.isEditing) return;
  3805. // 获取原始编号
  3806. const number = data.label.split(" ")[0];
  3807. // 更新目录树节点的显示文本
  3808. data.label = `${number} ${data.editingContent}`;
  3809. // 更新对应模块的目录属性
  3810. const { moduleIndex } = data;
  3811. const module = this.coms[moduleIndex];
  3812. if (module) {
  3813. const directoryAttr = module.attrs.find(
  3814. (attr) => attr.type === "Directory" && attr.number === number
  3815. );
  3816. if (directoryAttr) {
  3817. directoryAttr.content = data.editingContent;
  3818. }
  3819. }
  3820. // 清除编辑状态
  3821. this.$delete(data, "isEditing");
  3822. this.$delete(data, "editingContent");
  3823. // 强制更新视图
  3824. this.$forceUpdate();
  3825. },
  3826. // 添加新方法:更新目录显示
  3827. updateDirectoryDisplay(com) {
  3828. // 按级别和编号排序目录
  3829. const directories = com.attrs
  3830. .filter((attr) => attr.type === "Directory")
  3831. .sort((a, b) => {
  3832. if (a.level !== b.level) return a.level - b.level;
  3833. return a.number.localeCompare(b.number, undefined, { numeric: true });
  3834. });
  3835. // 更新每个目录的显示内容
  3836. directories.forEach((dir) => {
  3837. const pattern = new RegExp(`{{${dir.id}}}`, "g");
  3838. com.content = com.content.replace(
  3839. pattern,
  3840. `${dir.number} {{${dir.id}}}`
  3841. );
  3842. });
  3843. },
  3844. handleDirectoryDragEnd(event, data) {
  3845. // 处理拖拽结束事件
  3846. console.log("Drag end:", event);
  3847. this.handleDirectorySave(data);
  3848. },
  3849. // ... existing code ...
  3850. /* 插入产品属性 */
  3851. onInsertProductAttr(e) {
  3852. if (this.comIndex < 0) {
  3853. this.$message.warning("请选择插入图层");
  3854. return false;
  3855. }
  3856. const com = this.coms[this.comIndex];
  3857. if (!com) {
  3858. this.$message.warning("请先添加文档内容");
  3859. return false;
  3860. }
  3861. // 生成唯一ID
  3862. const attrId = `ProductAttr_${Date.now()}`;
  3863. const data = {
  3864. type: "ProductAttr",
  3865. id: attrId,
  3866. name: "商品属性",
  3867. intro: "商品属性",
  3868. content: e.content || "",
  3869. attrs: e.attrs || {},
  3870. };
  3871. // 添加到组件属性中
  3872. com.attrs.push(data);
  3873. // 更新文本内容
  3874. this.insertCmd = {
  3875. content: `{{${attrId}}}`,
  3876. };
  3877. // 如果有产品信息,添加到文档关联商品
  3878. if (e.productInfo) {
  3879. if (!this.docAttr.linkProduct) {
  3880. this.docAttr.linkProduct = [];
  3881. }
  3882. // 避免重复添加
  3883. if (
  3884. !this.docAttr.linkProduct.some(
  3885. (p) => p.dcp_p_no === e.productInfo.dcp_p_no
  3886. )
  3887. ) {
  3888. this.docAttr.linkProduct.push(e.productInfo);
  3889. }
  3890. }
  3891. // 关闭产品属性选择框(如果有的话)
  3892. this.showProductAttr = false;
  3893. // 强制更新视图
  3894. this.$nextTick(() => {
  3895. this.$forceUpdate();
  3896. });
  3897. return true;
  3898. },
  3899. // 添加一个解析目录内容的方法
  3900. parseDirectoryContent(content) {
  3901. if (!content) return "";
  3902. // 匹配 {{Directory_x_x_xxxxxxxxxx}} 格式的内容
  3903. const directoryPattern = /{{(Directory_\d+_\d+_\d+)}}/g;
  3904. return content.replace(directoryPattern, (match, directoryId) => {
  3905. // 遍历所有组件查找对应的目录项
  3906. for (const com of this.coms) {
  3907. const directoryAttr = com.attrs.find(
  3908. (attr) => attr.type === "Directory" && attr.id === directoryId
  3909. );
  3910. if (directoryAttr) {
  3911. // 返回格式化的目录内容:编号 + 内容
  3912. return `${directoryAttr.number} ${directoryAttr.content}`;
  3913. }
  3914. }
  3915. return match; // 如果找不到对应的目录项,保持原样
  3916. });
  3917. },
  3918. // 修改预览处理方法
  3919. handlePreview() {
  3920. this.showViewForm = true;
  3921. // 处理预览内容
  3922. const previewContent = this.coms.map((com) => {
  3923. // 深拷贝以避免修改原始数据
  3924. const previewCom = JSON.parse(JSON.stringify(com));
  3925. // 如果有内容字段,处理目录内容
  3926. if (previewCom.content) {
  3927. previewCom.content = this.parseDirectoryContent(previewCom.content);
  3928. }
  3929. // 处理属性中的目录内容
  3930. if (previewCom.attrs) {
  3931. previewCom.attrs = previewCom.attrs.map((attr) => {
  3932. if (attr.type === "Directory") {
  3933. return {
  3934. ...attr,
  3935. content: `${attr.number} ${attr.content}`,
  3936. };
  3937. }
  3938. return attr;
  3939. });
  3940. }
  3941. return previewCom;
  3942. });
  3943. // 更新预览数据
  3944. this.previewData = previewContent;
  3945. },
  3946. // 在 ViewForm 组件中添加内容解析
  3947. // 确保 ViewForm 组件接收并正确处理目录内容
  3948. },
  3949. };
  3950. </script>
  3951. <style lang="scss">
  3952. @import "./create.scss";
  3953. .el-collapse,
  3954. .el-collapse-item__wrap {
  3955. border: none;
  3956. }
  3957. .el-collapse,
  3958. .el-collapse-item__header {
  3959. border: none;
  3960. .el-collapse-item__arrow {
  3961. margin: 0;
  3962. }
  3963. }
  3964. .borderless-collapse {
  3965. border: none;
  3966. ::v-deep .el-collapse-item__header,
  3967. ::v-deep .el-collapse-item__wrap,
  3968. ::v-deep .el-collapse-item__content,
  3969. ::v-deep .el-collapse-item {
  3970. border: none;
  3971. }
  3972. ::v-deep .el-collapse-item__wrap {
  3973. border-bottom: none !important;
  3974. }
  3975. }
  3976. .scrollable-container {
  3977. overflow-x: auto;
  3978. white-space: nowrap;
  3979. width: 350px;
  3980. padding-bottom: 10px;
  3981. }
  3982. .min-width-content {
  3983. /* display: inline-block;
  3984. vertical-align: top; */
  3985. min-width: 150px;
  3986. white-space: normal;
  3987. }
  3988. // 树节点样式调整
  3989. ::v-deep .el-tree-node__content {
  3990. height: 32px;
  3991. &:hover {
  3992. background-color: #f5f7fa;
  3993. }
  3994. }
  3995. ::v-deep .el-tree-node.is-current > .el-tree-node__content {
  3996. background-color: #f0f7ff;
  3997. color: #409eff;
  3998. }
  3999. /*.el-collapse-item {
  4000. display: inline-block;
  4001. vertical-align: top;
  4002. } */
  4003. .resource-list {
  4004. .resource-category {
  4005. margin-bottom: 10px;
  4006. .category-title {
  4007. font-weight: bold;
  4008. margin-bottom: 5px;
  4009. color: #606266;
  4010. }
  4011. .resource-items {
  4012. padding-left: 20px;
  4013. .resource-item {
  4014. margin: 5px 0;
  4015. .el-checkbox {
  4016. display: flex;
  4017. align-items: center;
  4018. }
  4019. }
  4020. }
  4021. }
  4022. }
  4023. .template-content {
  4024. .search-box {
  4025. padding: 10px;
  4026. border-bottom: 1px solid #ebeef5;
  4027. .el-input {
  4028. width: 300px;
  4029. }
  4030. }
  4031. }
  4032. .module-list-container {
  4033. width: 320px;
  4034. margin-top: 110px;
  4035. /* position: absolute;
  4036. top: 135px;
  4037. right: 111px; */
  4038. /* border: 1px solid #dcdfe6; */
  4039. border-radius: 4px;
  4040. padding: 10px;
  4041. .module-item {
  4042. display: flex;
  4043. align-items: center;
  4044. padding: 10px;
  4045. border-bottom: 1px solid #ebeef5;
  4046. &:last-child {
  4047. border-bottom: none;
  4048. }
  4049. &.active-module {
  4050. background-color: #f5f7fa;
  4051. }
  4052. .drag-handle {
  4053. cursor: move;
  4054. margin-right: 15px;
  4055. }
  4056. .module-info {
  4057. flex: 1;
  4058. .module-category,
  4059. .module-name {
  4060. display: flex;
  4061. align-items: center;
  4062. margin-bottom: 5px;
  4063. &:last-child {
  4064. margin-bottom: 0;
  4065. }
  4066. .label {
  4067. color: #606266;
  4068. margin-right: 10px;
  4069. min-width: 70px;
  4070. }
  4071. .value {
  4072. color: #303133;
  4073. }
  4074. }
  4075. }
  4076. }
  4077. }
  4078. .custom-tree-node {
  4079. cursor: move;
  4080. user-select: none;
  4081. }
  4082. .custom-tree-node[draggable="false"] {
  4083. cursor: default;
  4084. }
  4085. /* 拖拽时的视觉反馈 */
  4086. .is-drop-inner {
  4087. border: 2px dashed #409eff;
  4088. }
  4089. .left_scheme,
  4090. .natural {
  4091. transition: width 0.3s;
  4092. overflow: hidden;
  4093. &.collapsed {
  4094. width: 50px !important;
  4095. .scheme-header,
  4096. .resource-header-title {
  4097. padding: 10px;
  4098. .title,
  4099. .title-left {
  4100. display: none;
  4101. }
  4102. .el-icon-menu {
  4103. margin-left: 0;
  4104. }
  4105. }
  4106. }
  4107. .el-icon-menu {
  4108. cursor: pointer;
  4109. padding: 5px;
  4110. transition: transform 0.3s;
  4111. &:hover {
  4112. color: #409eff;
  4113. }
  4114. }
  4115. &.collapsed .el-icon-menu {
  4116. transform: rotate(180deg);
  4117. }
  4118. }
  4119. .catalog-content {
  4120. .el-tree {
  4121. background: transparent;
  4122. .el-tree-node__content {
  4123. height: auto;
  4124. padding: 8px 0;
  4125. &:hover {
  4126. background-color: rgba(64, 158, 255, 0.1);
  4127. }
  4128. }
  4129. .custom-tree-node {
  4130. flex: 1;
  4131. display: flex;
  4132. align-items: center;
  4133. padding-right: 8px;
  4134. font-size: 14px;
  4135. i {
  4136. margin-right: 5px;
  4137. }
  4138. }
  4139. }
  4140. }
  4141. // 添加模块高亮动画
  4142. @keyframes highlight-pulse {
  4143. 0% {
  4144. background-color: transparent;
  4145. }
  4146. 50% {
  4147. background-color: rgba(64, 158, 255, 0.2);
  4148. }
  4149. 100% {
  4150. background-color: transparent;
  4151. }
  4152. }
  4153. .highlight {
  4154. animation: highlight-pulse 2s ease-in-out;
  4155. }
  4156. /* 添加到组件的 <style> 部分 */
  4157. .leftContent {
  4158. .el-tree {
  4159. .el-tree-node {
  4160. position: relative;
  4161. /* 为每个节点添加左侧垂直线 */
  4162. &:before {
  4163. content: "";
  4164. position: absolute;
  4165. left: 8px; /* 调整线条位置 */
  4166. top: 0;
  4167. bottom: 0;
  4168. width: 2px;
  4169. background-color: #1aad19; /* 线条颜色 */
  4170. z-index: 1;
  4171. }
  4172. /* 移除最后一个子节点的垂直线延伸 */
  4173. &:last-child:before {
  4174. height: 20px; /* 调整到节点中心位置 */
  4175. }
  4176. /* 为每个节点添加水平连接线 */ /* 与垂直线对齐 */ /* 水平线长度 */
  4177. /* .el-tree-node__content:before {
  4178. content: "";
  4179. position: absolute;
  4180. left: 8px;
  4181. top: 50%;
  4182. width: 16px;
  4183. height: 2px;
  4184. background-color: #1aad19;
  4185. z-index: 1;
  4186. } */
  4187. }
  4188. /* 移除根节点的垂直线 */
  4189. & > .el-tree-node:before {
  4190. display: none;
  4191. }
  4192. /* 移除第一层节点的连接线 */
  4193. & > .el-tree-node > .el-tree-node__content:before {
  4194. display: none;
  4195. }
  4196. /* 调整节点内容的位置,为线条留出空间 */
  4197. .el-tree-node__content {
  4198. position: relative;
  4199. /* 调整缩进 */
  4200. }
  4201. /* 确保展开箭头在正确位置 */
  4202. .el-tree-node__expand-icon {
  4203. padding: 6px;
  4204. margin-left: 10px;
  4205. }
  4206. }
  4207. }
  4208. /* 自定义树节点样式 */
  4209. .custom-tree-node {
  4210. flex: 1;
  4211. display: flex;
  4212. align-items: center;
  4213. padding: 0 8px;
  4214. font-size: 14px;
  4215. /* 编辑输入框样式 */
  4216. .el-input {
  4217. margin-left: -4px;
  4218. }
  4219. }
  4220. .custom-tree-node {
  4221. flex: 1;
  4222. display: flex;
  4223. align-items: center;
  4224. justify-content: space-between;
  4225. padding-right: 8px;
  4226. }
  4227. .directory-actions {
  4228. opacity: 0;
  4229. transition: opacity 0.2s;
  4230. }
  4231. .custom-tree-node:hover .directory-actions {
  4232. opacity: 1;
  4233. }
  4234. .module-actions {
  4235. display: flex;
  4236. gap: 8px; /* 按钮之间的间距 */
  4237. align-items: center;
  4238. white-space: nowrap;
  4239. flex-direction: column;
  4240. }
  4241. .module-actions .el-button {
  4242. padding: 3px 0;
  4243. margin-left: 0;
  4244. }
  4245. </style>