123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004200520062007200820092010201120122013201420152016201720182019202020212022202320242025202620272028202920302031203220332034203520362037203820392040204120422043204420452046204720482049205020512052205320542055205620572058205920602061206220632064206520662067206820692070207120722073207420752076207720782079208020812082208320842085208620872088208920902091209220932094209520962097209820992100210121022103210421052106210721082109211021112112211321142115211621172118211921202121212221232124212521262127212821292130213121322133213421352136213721382139214021412142214321442145214621472148214921502151215221532154215521562157215821592160216121622163216421652166216721682169217021712172217321742175217621772178217921802181218221832184218521862187218821892190219121922193219421952196219721982199220022012202220322042205220622072208220922102211221222132214221522162217221822192220222122222223222422252226222722282229223022312232223322342235223622372238223922402241224222432244224522462247224822492250225122522253225422552256225722582259226022612262226322642265226622672268226922702271227222732274227522762277227822792280228122822283228422852286228722882289229022912292229322942295229622972298229923002301230223032304230523062307230823092310231123122313231423152316231723182319232023212322232323242325232623272328232923302331233223332334233523362337233823392340234123422343234423452346234723482349235023512352235323542355235623572358235923602361236223632364236523662367236823692370237123722373237423752376237723782379238023812382238323842385238623872388238923902391239223932394239523962397239823992400240124022403240424052406240724082409241024112412241324142415241624172418241924202421242224232424242524262427242824292430243124322433243424352436243724382439244024412442244324442445244624472448244924502451245224532454245524562457245824592460246124622463246424652466246724682469247024712472247324742475247624772478247924802481248224832484248524862487248824892490249124922493249424952496249724982499250025012502250325042505250625072508250925102511251225132514251525162517251825192520252125222523252425252526252725282529253025312532253325342535253625372538253925402541254225432544254525462547254825492550255125522553255425552556255725582559256025612562256325642565256625672568256925702571257225732574257525762577257825792580258125822583258425852586258725882589259025912592259325942595259625972598259926002601260226032604260526062607260826092610261126122613261426152616261726182619262026212622262326242625262626272628262926302631263226332634263526362637263826392640264126422643264426452646264726482649265026512652265326542655265626572658265926602661266226632664266526662667266826692670 |
- <template>
- <div class="doc-container">
- <div class="editor-top">
- <div class="left">
- <div class="doc" v-if="type == 'document'">
- <span>当前打开文档:</span
- >{{ docAttr.title == "" ? "新建文档" : docAttr.title }}
- </div>
- <div class="doc" v-else-if="type == 'module'">
- <span>当前打开模块:</span
- >{{ coms[0].name == "" ? "新建模块" : coms[0].name }}
- </div>
- <div class="doc" v-else>
- <span>当前打开模版:</span
- >{{ docAttr.title == "" ? "新建模版" : docAttr.title }}
- </div>
- <div class="creator">
- <span>创建者:</span
- ><!-- {{ userInfo && userInfo.username }} -->
- </div>
- </div>
- <div class="right">
- <el-button
- type="primary"
- size="mini"
- @click="onSaveAs"
- v-if="
- type !== 'module' && type == 'document' && articleId == undefined
- "
- >保存文档</el-button
- ><!-- v-if="docAttr.id > 0" -->
- <el-button
- type="primary"
- size="mini"
- @click="renew"
- v-if="
- articleId !== undefined && type !== 'module' && type == 'document'
- "
- >更新文档</el-button
- >
- <!-- <el-popover
- placement="bottom"
- trigger="click"
- v-if="type !== 'module' && type !== 'document'"
- > -->
- <el-button
- type="primary"
- v-if="type !== 'module' && type !== 'document' && !articleId"
- @click="onSaveUpload"
- >保存</el-button
- >
- <el-button
- type="primary"
- v-if="type !== 'module' && type !== 'document' && articleId"
- @click="onUpload"
- >更新</el-button
- >
- <!-- <el-button
- slot="reference"
- type="primary"
- size="mini"
- style="margin: 0 10px"
- v-if="$store.state.user.name == 'admin'"
- >保存并更新模版</el-button
- >
- </el-popover> -->
- <!-- <el-button
- type="primary"
- size="mini"
- v-if="$store.state.user.name == 'admin'"
- @click="onSaveUpload"
- >保存并更新模版</el-button
- > -->
- <el-button
- type="primary"
- size="mini"
- v-if="type !== 'module' && type == 'document'"
- @click="onOpenView"
- >预览导出
- </el-button>
- <el-button type="primary" size="mini" @click="onClose">
- 关闭文档
- </el-button>
- </div>
- </div>
- <div class="editor-content">
- <div class="left_scheme">
- <div class="scheme-header">
- <div class="title">
- 请选择可用的方案
- <span class="count">[方案数量:47]</span>
- <i class="el-icon-menu"></i>
- </div>
- <div class="search">
- <el-input
- v-model="searchKey"
- placeholder="请输入搜索"
- prefix-icon="el-icon-search"
- clearable
- >
- </el-input>
- </div>
- <div class="action-btns">
- <el-button type="primary" size="small" @click="createScheme"
- >新建方案</el-button
- >
- <el-button type="primary" size="small" @click="createCategory"
- >新建分类</el-button
- >
- </div>
- <div class="current-scheme">
- 当前方案: {{ currentScheme || "已选择方案三" }}
- </div>
- </div>
- <div class="scheme-content">
- <el-tree
- :data="schemeData"
- :props="defaultProps"
- @node-click="handleNodeClick"
- :default-expanded-keys="expandedKeys"
- >
- <span class="custom-tree-node" slot-scope="{ node, data }">
- <span>
- <i class="el-icon-folder" v-if="data.children"></i>
- <i class="el-icon-document" v-else></i>
- {{ node.label }}
- </span>
- </span>
- </el-tree>
- </div>
- </div>
- <!-- 资源 -->
- <div class="natural">
- <div class="resource-header-title">
- <div class="title-left">
- <span>请选择可用的资源</span>
- <span class="resource-count">[资源明细] 资源数量:474</span>
- </div>
- <i class="el-icon-menu"></i>
- </div>
- <div class="resource-container">
- <div class="resource-header">
- <el-input
- v-model="resourceSearchKey"
- placeholder="请输入选择"
- prefix-icon="el-icon-search"
- clearable
- >
- </el-input>
- <div class="action-btns">
- <el-button type="primary" @click="createResource"
- >新建资源</el-button
- >
- <el-button type="primary" @click="createResourceCategory"
- >新建资源分类</el-button
- >
- </div>
- </div>
- <div class="resource-status">
- 已打开1个资源,已选择3个资源
- <el-button size="small" plain @click="refreshResources"
- >更新</el-button
- >
- </div>
- <div class="resource-content">
- <el-collapse v-model="activeCategories">
- <!-- DLP产品 -->
- <el-collapse-item name="dlp">
- <template slot="title">
- <span>DLP产品</span>
- <!-- <i class="el-icon-arrow-up" :class="{ 'is-active': activeCategories.includes('dlp') }"></i> -->
- </template>
- <div class="resource-list">
- <div
- v-for="item in dlpProducts"
- :key="item.id"
- class="resource-item"
- >
- <el-checkbox v-model="item.selected">
- {{ item.name }}
- </el-checkbox>
- <!-- <i class="el-icon-menu"></i> -->
- </div>
- </div>
- </el-collapse-item>
- <!-- LED产品系列 -->
- <el-collapse-item name="led">
- <template slot="title">
- <span>LED产品系列</span>
- <!-- <i class="el-icon-arrow-up"></i> -->
- </template>
- <div class="resource-list">
- <div
- v-for="item in ledProducts"
- :key="item.id"
- class="resource-item"
- >
- <el-checkbox v-model="item.selected">
- {{ item.name }}
- </el-checkbox>
- <i class="el-icon-menu"></i>
- </div>
- </div>
- </el-collapse-item>
- <!-- 处理器 -->
- <el-collapse-item name="processor">
- <template slot="title">
- <span>处理器</span>
- <!-- <i class="el-icon-arrow-up"></i> -->
- </template>
- <div class="resource-list">
- <div
- v-for="item in processors"
- :key="item.id"
- class="resource-item"
- >
- <el-checkbox v-model="item.selected">
- {{ item.name }}
- </el-checkbox>
- <i class="el-icon-menu"></i>
- </div>
- </div>
- </el-collapse-item>
- <!-- 售后服务 -->
- <el-collapse-item name="service">
- <template slot="title">
- <span>售后服务</span>
- <!-- <i class="el-icon-arrow-up"></i> -->
- </template>
- <div class="resource-list">
- <div
- v-for="item in services"
- :key="item.id"
- class="resource-item"
- >
- <el-checkbox v-model="item.selected">
- {{ item.name }}
- </el-checkbox>
- <i class="el-icon-menu"></i>
- </div>
- </div>
- </el-collapse-item>
- </el-collapse>
- </div>
- </div>
- </div>
- <!-- <div class="neary-doc">
- <div class="left-content">
- <div class="new-article">
- <div v-if="showView == 0 && type !== 'module'">
- <el-collapse v-model="activeNames">
- <el-collapse-item
- title="最新文档"
- name="-1"
- v-if="type == 'document'"
- >
- <div
- v-for="(it, index) in articleList"
- draggable
- :key="it.id"
- :data-index="index"
- data-type="article"
- class="sub-menus"
- >
- <div @click="onLoadArticle(it.id)" style="cursor: pointer">
- {{ it.title }}
- </div>
- </div>
- </el-collapse-item>
- <el-collapse-item
- title="模版列表"
- name="-2"
- v-if="showView == 0"
- >
- <div
- v-for="(it, index) in templateList"
- draggable
- :key="it.id"
- :data-index="index"
- data-type="article"
- class="sub-menus"
- >
- <div @click="onTemplateInfo(it.id)" style="cursor: pointer">
- {{ it.title }}
- </div>
- </div>
- </el-collapse-item>
- </el-collapse>
- </div>
- <div v-if="showView == 1" class="scrollable-container">
- <el-collapse
- v-model="activeModel"
- :accordion="true"
- @change="handleItemClick"
- class="borderless-collapse"
- >
- <el-collapse-item
- v-for="(item, itemIndex) in categoryList"
- :key="itemIndex"
- :title="item.name"
- :name="item.id"
- class="min-width-content"
- >
- <el-collapse
- v-if="item.children && item.children.length"
- v-model="item.activeChildren"
- @change="handleItemVal"
- v-show="item.children"
- class="borderless-collapse"
- >
- <el-collapse-item
- v-for="(child, childIndex) in item.children"
- :key="childIndex"
- :title="child.name"
- :name="child.id"
- class="min-width-content"
- >
- <el-collapse
- v-if="child.children && child.children.length"
- v-model="child.activeChildren"
- @change="handleChildItemVal"
- v-show="child.children"
- class="borderless-collapse"
- >
- <el-collapse-item
- v-for="(
- grandChild, grandChildIndex
- ) in child.children"
- :key="grandChildIndex"
- :title="grandChild.name"
- :name="grandChild.id"
- class="min-width-content"
- >
- <el-collapse
- v-if="
- grandChild.children && grandChild.children.length
- "
- v-model="grandChild.activeChildren"
- @change="handleGrandChildItemVal"
- v-show="grandChild.children"
- class="borderless-collapse"
- >
- <el-collapse-item
- v-for="(
- greatGrandChild, greatGrandChildIndex
- ) in grandChild.children"
- :key="greatGrandChildIndex"
- :title="greatGrandChild.name"
- :name="greatGrandChild.id"
- class="min-width-content"
- >
- <el-collapse
- v-if="
- greatGrandChild.children &&
- greatGrandChild.children.length
- "
- v-model="greatGrandChild.activeChildren"
- @change="handlegreatGrandChildItemVal"
- v-show="greatGrandChild.children"
- class="borderless-collapse"
- >
- <el-collapse-item
- v-for="(
- fiveChild, fiveIndex
- ) in greatGrandChild.children"
- :key="fiveIndex"
- :title="fiveChild.name"
- :name="fiveChild.id"
- class="min-width-content"
- >
- <draggable
- v-model="fiveChild.dataList"
- :options="{
- group: { name: 'itxst', pull: 'clone' },
- sort: true,
- }"
- :disabled="type === 'module'"
- >
- <transition-group>
- <div
- class="sub-menus min-width-content"
- v-for="(
- fiveIts, fiveIndex
- ) in fiveChild.dataList"
- :key="fiveIndex"
- >
- <div style="cursor: move">
- {{ fiveIts.name }}
- </div>
- </div>
- </transition-group>
- </draggable>
- </el-collapse-item>
- </el-collapse>
- <draggable
- v-model="greatGrandChild.dataList"
- :options="{
- group: { name: 'itxst', pull: 'clone' },
- sort: true,
- }"
- :disabled="type == 'module'"
- >
- <transition-group>
- <div
- class="sub-menus min-width-content"
- v-for="(
- its, index
- ) in greatGrandChild.dataList"
- :key="index"
- >
- <div style="cursor: move">
- {{ its.name }}
- </div>
- </div>
- </transition-group>
- </draggable>
- </el-collapse-item>
- </el-collapse>
- <draggable
- v-model="grandChild.dataList"
- :options="{
- group: { name: 'itxst', pull: 'clone' },
- sort: true,
- }"
- :disabled="type == 'module'"
- >
- <transition-group>
- <div
- class="sub-menus min-width-content"
- v-for="(it, index) in grandChild.dataList"
- :key="index"
- >
- <div style="cursor: move">{{ it.name }}</div>
- </div>
- </transition-group>
- </draggable>
- </el-collapse-item>
- </el-collapse>
- <draggable
- v-model="child.dataList"
- :options="{
- group: { name: 'itxst', pull: 'clone' },
- sort: true,
- }"
- :disabled="type == 'module'"
- >
- <transition-group>
- <div
- class="sub-menus min-width-content"
- v-for="(it, index) in child.dataList"
- :key="index"
- >
- <div style="cursor: move">{{ it.name }}</div>
- </div>
- </transition-group>
- </draggable>
- </el-collapse-item>
- </el-collapse>
- <draggable
- v-model="item.dataList"
- :options="{
- group: { name: 'itxst', pull: 'clone' },
- sort: true,
- }"
- :disabled="type == 'module'"
- >
- <transition-group>
- <div
- class="sub-menus min-width-content"
- v-for="(it, index) in item.dataList"
- :key="index"
- >
- <div style="cursor: move">{{ it.name }}</div>
- </div>
- </transition-group>
- </draggable>
- </el-collapse-item>
- </el-collapse>
- </div>
- </div>
- </div>
- <div class="right-sidebarew">
- <div
- v-if="type !== 'module'"
- class="sidebar-item"
- :class="showView == 0 ? 'active-item' : ''"
- @click="viewDocument"
- >
- <span v-if="type == 'document'">查看文档</span>
- <span v-else>查看模版</span>
- </div>
- <div
- v-if="type !== 'document'"
- class="sidebar-item"
- :class="showView == 1 ? 'active-item' : ''"
- @click="viewModule"
- >
- 模块列表
- </div>
- </div>
- </div> -->
- <div class="editor-main">
- <!-- 添加tab页导航 -->
- <div class="editor-tabs">
- <el-tabs v-model="activeTab" type="card" @tab-click="handleClick">
- <el-tab-pane label="目录" name="catalog">
- <div class="catalog-content">
- <!-- 目录内容展示区域 -->
- <el-tree
- :data="catalogData"
- :props="catalogProps"
- default-expand-all
- @node-click="handleCatalogClick"
- >
- <span class="custom-tree-node" slot-scope="{ data }"
- ><!-- node, -->
- <span>{{ data.label }}</span>
- <span v-if="data.children" class="expand-icon">
- <i class="el-icon-arrow-right"></i>
- </span>
- </span>
- </el-tree>
- </div>
- </el-tab-pane>
- <el-tab-pane label="模板内容" name="template">
- <div class="template-content">
- <!-- 原有的menus和editor内容 -->
- <div class="menus-box">
- <menus
- @onEvents="onInsert"
- @onVariable="uptadeVariable"
- :comArr="coms"
- ></menus>
- </div>
- <div
- class="editor-box"
- ref="tabHtml"
- v-loading="loading"
- element-loading-text="加载中..."
- element-loading-spinner="el-icon-loading"
- >
- <editor
- :coms="coms"
- :comIndex="comIndex"
- :isAdmin="isAdmin"
- :templateCate="categoryList"
- :insertCmd="insertCmd"
- @onSetActiveIndex="onSetActiveIndex"
- @onInsert="onInsert"
- @onLoadArticle="onLoadArticle"
- @onRebuild="onRebuild"
- @onDelete="onRemove"
- @onSetComs="onSetComs"
- ></editor>
- </div>
- </div>
- </el-tab-pane>
- </el-tabs>
- </div>
- </div>
- </div>
- <!-- 新增资源选择弹框 -->
- <!-- <el-dialog
- title="请选择可用的资源"
- :visible.sync="resourceDialogVisible"
- width="800px"
- custom-class="resource-dialog"
- >
- <div class="resource-container">
- <div class="resource-header">
- <el-input
- v-model="resourceSearchKey"
- placeholder="请输入选择"
- prefix-icon="el-icon-search"
- clearable
- >
- </el-input>
- <div class="action-btns">
- <el-button type="primary" @click="createResource"
- >新建资源</el-button
- >
- <el-button type="primary" @click="createResourceCategory"
- >新建资源分类</el-button
- >
- </div>
- </div>
- <div class="resource-status">
- 已打开1个资源,已选择3个资源
- <el-button size="small" plain @click="refreshResources"
- >更新</el-button
- >
- </div>
- <div class="resource-content">
- <el-collapse v-model="activeCategories">
-
- <el-collapse-item name="dlp">
- <template slot="title">
- <span>DLP产品</span>
- <i class="el-icon-arrow-up"></i>
- </template>
- <div class="resource-list">
- <div
- v-for="item in dlpProducts"
- :key="item.id"
- class="resource-item"
- >
- <el-checkbox v-model="item.selected">
- {{ item.name }}
- </el-checkbox>
- <i class="el-icon-menu"></i>
- </div>
- </div>
- </el-collapse-item>
-
- <el-collapse-item name="led">
- <template slot="title">
- <span>LED产品系列</span>
- <i class="el-icon-arrow-up"></i>
- </template>
- <div class="resource-list">
- <div
- v-for="item in ledProducts"
- :key="item.id"
- class="resource-item"
- >
- <el-checkbox v-model="item.selected">
- {{ item.name }}
- </el-checkbox>
- <i class="el-icon-menu"></i>
- </div>
- </div>
- </el-collapse-item>
-
- <el-collapse-item name="processor">
- <template slot="title">
- <span>处理器</span>
- <i class="el-icon-arrow-up"></i>
- </template>
- <div class="resource-list">
- <div
- v-for="item in processors"
- :key="item.id"
- class="resource-item"
- >
- <el-checkbox v-model="item.selected">
- {{ item.name }}
- </el-checkbox>
- <i class="el-icon-menu"></i>
- </div>
- </div>
- </el-collapse-item>
-
- <el-collapse-item name="service">
- <template slot="title">
- <span>售后服务</span>
- <i class="el-icon-arrow-up"></i>
- </template>
- <div class="resource-list">
- <div
- v-for="item in services"
- :key="item.id"
- class="resource-item"
- >
- <el-checkbox v-model="item.selected">
- {{ item.name }}
- </el-checkbox>
- <i class="el-icon-menu"></i>
- </div>
- </div>
- </el-collapse-item>
- </el-collapse>
- </div>
- </div>
- </el-dialog> -->
- <el-dialog
- :visible.sync="showViewForm"
- :close-on-click-modal="false"
- append-to-body
- v-el-drag-dialog
- width="850px"
- custom-class="prod-verify"
- title="文档预览"
- >
- <ViewForm :coms="coms" :docAttr="docAttr"></ViewForm>
- </el-dialog>
- <el-dialog
- :visible.sync="showProductAttr"
- append-to-body
- v-el-drag-dialog
- :close-on-click-modal="false"
- width="850px"
- custom-class="prod-verify"
- title="插入产品属性"
- >
- <ProductAttr
- :docAttr="docAttr"
- @onInsertProductAttr="onInsertProductAttr"
- ></ProductAttr>
- </el-dialog>
- <el-dialog
- :visible.sync="docVisible"
- append-to-body
- v-el-drag-dialog
- :close-on-click-modal="false"
- width="500px"
- custom-class="prod-verify"
- title="文档信息"
- >
- <el-form
- :model="docForm"
- :rules="docRules"
- ref="docRef"
- label-position="left"
- label-width="100"
- >
- <el-form-item label="文档名称:" prop="title">
- <el-input
- v-model="docForm.title"
- style="width: 60%"
- class="input-item"
- placeholder="请填写文档名称"
- :disabled="docAttr.id > 0"
- />
- </el-form-item>
- <el-form-item label="文档分类:" prop="category_id">
- <el-select
- v-model="docForm.category_id"
- style="width: 60%"
- placeholder="请选择所属分类"
- :disabled="docAttr.id > 0"
- >
- <el-option
- v-for="(item, index) in articleCategoryList"
- :key="index"
- :label="item.name"
- :value="item.id"
- />
- </el-select>
- </el-form-item>
- <el-form-item label="创建人:">
- {{ userInfo && userInfo.username }}
- </el-form-item>
- </el-form>
- <span slot="footer" class="dialog-footer">
- <el-button @click="closeDoc">取 消</el-button>
- <el-button type="primary" @click="submitDoc">确 定</el-button>
- </span>
- </el-dialog>
- </div>
- </template>
- <script>
- import { findData } from "@/api/sourceData";
- /* import utils from "@/utils/fun"; // 方法类 */
- import { searchDocument, pageDocument } from "@/api/document";
- import menus from "./com/menus";
- import editor from "./com/editor";
- import Attribute from "./com/components/Attribute";
- import attributeVar from "./com/components/Attribute/attributeVar/index.vue";
- import ProductAttr from "./com/components/ProductAttr";
- import {
- searchTemplateCategory,
- searchTemplate,
- getTemplateInfo,
- getAllCategory,
- } from "@/api/template";
- import docAttr from "./com/components/Attribute/docAttr";
- import comList from "./com/components/Attribute/comList";
- import Directory from "./com/components/Attribute/Directory";
- import { getCurrentUserInfo } from "@/api/api";
- import {
- createDocument,
- updateDocument,
- getDocumentInfo,
- exportDocument,
- searchDocumentCategory,
- } from "@/api/document";
- import ViewForm from "./com/view";
- import elDragDialog from "@/directive/el-drag-dialog";
- import draggable from "vuedraggable";
- import htmlDocx from "html-docx-js/dist/html-docx";
- import { searchFormula } from "@/api/formula";
- import axios from "axios";
- import settings from "@/settings";
- // import htmlDocx from "htmlDocx";
- export default {
- name: "create",
- components: {
- menus,
- editor,
- Attribute,
- comList,
- docAttr,
- ViewForm,
- ProductAttr,
- Directory,
- draggable,
- attributeVar,
- },
- directives: {
- elDragDialog,
- },
- data() {
- return {
- activeNames: "-1",
- nestedActiveNames: [],
- articleList: [],
- activeModel: "",
- templateList: [],
- categoryList: [],
- //组件相关
- coms: [],
- comIndex: 9999, //当前组件索引
- showProductAttr: false,
- comList: [],
- //文档属性
- docAttr: {
- id: 0,
- category_id: "",
- title: "",
- content: "",
- status: 5,
- links: "",
- linkProduct: [],
- linkProject: [],
- projects: "",
- },
- insertCmd: null,
- showViewForm: false,
- isAdmin: 2, //1是管理员,2非管理员
- //当前选中表格
- tabExt: {
- row: 0,
- col: 0,
- },
- userInfo: null,
- articleId: 0,
- loading: false, // 增加 loading 状态
- showView: 0, //查看 文档/模块
- childrenList: "",
- value: [],
- AttributeIndex: 0,
- catalogIndex: 0, //目录信息
- docuComIndex: 3,
- type: "",
- docVisible: false,
- docForm: {
- title: "",
- category_id: "",
- },
- docRules: {
- title: [{ required: true, message: "请输文档名称", trigger: "blur" }],
- category_id: [
- { required: true, message: "请选择文档分类", trigger: "change" },
- ],
- },
- articleCategoryList: [],
- //方案
- searchKey: "",
- currentScheme: "",
- expandedKeys: [], // 默认展开的节点
- schemeData: [
- {
- label: "LED项目",
- children: [],
- },
- {
- label: "LCD项目",
- children: [],
- },
- {
- label: "集成项目",
- children: [
- {
- label: "方案一",
- },
- {
- label: "方案二",
- },
- {
- label: "方案三",
- },
- ],
- },
- ],
- defaultProps: {
- children: "children",
- label: "label",
- },
- /* 资源 */
- resourceDialogVisible: false,
- resourceSearchKey: "",
- activeCategories: ["dlp", "led", "processor", "service"],
- dlpProducts: [
- { id: 1, name: "产品选型/DLP/单元/", selected: false },
- { id: 2, name: "产品选型/DLP/机芯/", selected: true },
- { id: 3, name: "产品选型/DLP/控制盒/", selected: true },
- ],
- ledProducts: [
- { id: 4, name: "产品选型/LED/黄河系/", selected: false },
- { id: 5, name: "产品选型/LED/华夏系/", selected: true },
- { id: 6, name: "产品选型/LED/黄河单元/", selected: false },
- ],
- processors: [
- { id: 7, name: "产品选型/处理器/D301/", selected: false },
- { id: 8, name: "产品选型/处理器/IPWH300/", selected: false },
- { id: 9, name: "产品选型/处理器/IPWD400/", selected: false },
- ],
- services: [
- { id: 10, name: "产品选型/处理器/IPWH300/", selected: false },
- { id: 11, name: "产品选型/处理器/IPWH301/", selected: false },
- { id: 12, name: "产品选型/处理器/IPWD400/", selected: false },
- ],
- /* 目录/模板 */
- activeTab: "template", // 默认显示模板内容tab
- catalogData: [
- {
- label: "1. 概述 4",
- children: [
- {
- label: "1.1. 强大的显示功能",
- children: [
- { label: "1.1.1. 计算机信号显示" },
- { label: "1.1.2. 视频信号显示" },
- { label: "1.1.3. 海量流媒体信号接入" },
- { label: "1.1.4. 网络信号显示" },
- { label: "1.1.5. 信号综合处理" },
- { label: "1.1.6. 显示效果及图像拼接" },
- ],
- },
- { label: "1.2. 任意开窗漫游显示" },
- { label: "1.3. 信号混合显示" },
- { label: "1.4. 全数字连接" },
- ],
- },
- {
- label: "2. 系统设计",
- children: [
- { label: "2.1. 设计标准及规范" },
- { label: "2.2. 系统规模及尺寸" },
- ],
- },
- ],
- catalogProps: {
- children: "children",
- label: "label",
- },
- };
- },
- watch: {
- coms: {
- handler(newComs, oldComs) {
- this.updateAttrs(newComs, oldComs);
- },
- immediate: true, //立即执行
- deep: true,
- },
- articleId: {
- handler(val) {
- if (val == null || val == undefined || val <= 0) return;
- if (this.$route.query.type == "document") {
- this.loadArticle(val);
- } else {
- this.onTemplateInfo(val);
- }
- //
- },
- immediate: true,
- deep: true,
- },
- },
- async mounted() {
- this.articleId = this.$route.query.articleId;
- this.type = this.$route.query.type;
- if (this.type == "module") {
- this.showView = 1;
- }
- this.searchArticle();
- await this.initCategoryList();
- await this.initCurrentUser();
- let templateId = this.$route.query.templateId;
- if (templateId > 0) {
- this.loadTemplateInfo(templateId);
- }
- this.isAdmin = 2; //this.userInfo ? this.userInfo.roleInfo.is_admin : 2;
- this.initArticleCategoryList();
- if (this.type !== "module" && this.type !== "document") {
- document.title = "新建模版-" + settings.title;
- }
- if (
- this.type !== "module" &&
- this.type !== "document" &&
- this.articleId !== undefined
- ) {
- document.title = this.docAttr.title + settings.title;
- }
- this.$nextTick(() => {
- const arrows = document.querySelectorAll(".el-collapse-item__arrow");
- arrows.forEach((arrow) => {
- arrow.style.margin = "0";
- });
- });
- },
- methods: {
- /* 切换目录/模板 */
- handleClick(val) {
- if (val.name === "catalog") {
- // 初始化目录数据
- let catalogData = [];
- this.coms.forEach((item, moduleIndex) => {
- // 获取所有Directory类型的属性并排序
- const directoryAttrs = item.attrs
- .filter((attr) => attr.type === "Directory")
- .sort((a, b) => {
- // 首先按level排序
- if (a.level !== b.level) {
- return a.level - b.level;
- }
- // level相同时按number排序
- return a.number.localeCompare(b.number, undefined, {
- numeric: true,
- });
- });
- directoryAttrs.forEach((attr) => {
- const catalogItem = {
- label: `${attr.number} ${attr.content}`,
- level: attr.level,
- moduleIndex: moduleIndex,
- children: [],
- };
- // 根据level确定目录层级
- if (attr.level === 1) {
- // 一级目录直接添加到根
- catalogData.push(catalogItem);
- } else {
- // 查找父级目录
- let parent = this.findParentDirectory(catalogData, attr.number);
- if (parent) {
- parent.children.push(catalogItem);
- }
- }
- });
- });
- console.log(catalogData);
- // 更新目录数据
- this.catalogData = catalogData;
- // 强制更新视图
- this.$nextTick(() => {
- this.$forceUpdate();
- });
- }
- },
- // 查找父级目录的辅助方法
- findParentDirectory(catalogData, number) {
- const parentNumber = number.split(".").slice(0, -1).join(".");
- const findInChildren = (items) => {
- for (let item of items) {
- if (item.label.startsWith(parentNumber + " ")) {
- return item;
- }
- if (item.children) {
- const found = findInChildren(item.children);
- if (found) return found;
- }
- }
- return null;
- };
- return findInChildren(catalogData);
- },
- /* 方案点击 */
- handleNodeClick(data) {
- this.currentScheme = data.label;
- this.resourceDialogVisible = true; // 点击方案时打开资源选择弹框
- },
- createScheme() {
- // 实现新建方案逻辑
- this.$message.success("新建方案");
- },
- createCategory() {
- // 实现新建分类逻辑
- this.$message.success("新建分类");
- },
- /* 资源 */
- createResource() {
- this.$message.success("新建资源");
- },
- createResourceCategory() {
- this.$message.success("新建资源分类");
- },
- refreshResources() {
- this.$message.success("刷新资源列表");
- },
- /* 目录模板 */
- handleCatalogClick(data) {
- // 处理目录点击事件
- console.log("点击的目录项:", data);
- },
- handleItemVal(value) {
- this.$forceUpdate();
- this.loadChildren(value);
- },
- handleChildItemClick(child) {
- if (!child.children) {
- this.loadChildren(child);
- }
- },
- handleChildItemVal(value) {
- this.$forceUpdate();
- this.loadChildren(value);
- },
- handleGrandChildItemClick(grandChild) {
- if (!grandChild.children) {
- this.loadChildren(grandChild);
- }
- },
- handleGrandChildItemVal(value) {
- this.loadChildren(value);
- this.$forceUpdate();
- },
- handlegreatGrandChildItemVal(greatGrandChild) {
- this.loadChildren(greatGrandChild);
- this.$forceUpdate();
- },
- async loadChildren(category) {
- const category_id = category[category.length - 1];
- try {
- const res = await searchTemplateCategory({ parent_id: category_id });
- if (res.status != 200 || res.data.length == 0) return;
- const newChildren = res.data;
- for (let i = 0; i < newChildren.length; i++) {
- newChildren[i].dataList = await this.getTemplateList(
- newChildren[i].id
- );
- }
- this.insertChildrenById(this.categoryList, category_id, newChildren);
- console.log(this.categoryList);
- this.$forceUpdate(); // Force Vue to re-render the component
- } catch (error) {
- console.error("Error fetching template categories:", error);
- }
- },
- insertChildrenById(list, id, newChildren) {
- for (let item of list) {
- if (item.id === id) {
- this.$set(item, "children", newChildren); // Use Vue.set to ensure reactivity
- return true; // Stop searching once the item is found
- }
- if (item.children && item.children.length > 0) {
- const found = this.insertChildrenById(item.children, id, newChildren);
- if (found) return true; // Stop searching if the item is found in deeper levels
- }
- }
- return false; // Continue searching
- },
- /* 取消新增 */
- closeDoc() {
- this.docVisible = false;
- this.docForm = {
- title: "",
- category_id: "",
- };
- },
- /* 确定新增模块*/
- submitDoc() {
- this.$refs.docRef.validate((valid) => {
- if (valid) {
- this.docAttr.title = this.docForm.title;
- this.docAttr.category_id = this.docForm.category_id;
- this.onSave();
- }
- });
- },
- //加载文档分类
- initArticleCategoryList() {
- let _this = this;
- searchDocumentCategory({ page: 1, pageSize: 99, status: 5 }).then(
- (res) => {
- if (res.status != 200) return;
- _this.articleCategoryList = res.data.dataList;
- }
- );
- },
- updateAttrs(newComs, oldComs) {
- console.log(newComs);
- newComs.forEach((newCom, comIndex) => {
- const oldCom = oldComs[comIndex];
- if (oldCom) {
- newCom.attrs.forEach((newAttr, attrIndex) => {
- const oldAttr = oldCom.attrs[attrIndex];
- if (oldAttr && newAttr.content !== oldAttr.content) {
- // 内容发生变化,进行全局更新
- this.updateGlobalAttr(newAttr.name, newAttr.content);
- }
- });
- }
- });
- },
- updateGlobalAttr(attrId, newContent) {
- // 遍历所有组件,更新匹配的属性
- this.coms.forEach((com) => {
- com.attrs.forEach((attr) => {
- // 只更新非 variableNull 类型的属性
- if (attr.name === attrId && attr.type !== "variableNull") {
- attr.content = newContent;
- }
- });
- // 如果是文本区域,更新内容中的占位符
- if (com.type === "TextArea") {
- com.content = com.content.replace(
- new RegExp(`{{${attrId}}}`, "g"),
- (match) => {
- const attr = com.attrs.find((a) => a.id === attrId);
- if (attr && attr.type !== "variableNull") {
- return newContent;
- }
- return match; // 保留 variableNull 类型的原始占位符
- }
- );
- }
- });
- // 触发视图更新
- this.replaceData(this.coms);
- this.$forceUpdate();
- },
- async replaceData(data) {
- for (let item of this.coms) {
- for (let el of item.attrs) {
- let attrId = el.id;
- if (el.type === "formual") {
- try {
- let formual = await this.analysisFormual(el);
- formual = await this.getRemote(formual);
- el.content = eval(formual);
- } catch (error) {
- console.error("处理公式时出错:", error);
- }
- } else if (el.type === "variableNull") {
- // 保留 variableNull 类型的原始内容
- el.content = el.content || "请输入";
- }
- }
- }
- return data;
- },
- //分析公式
- async analysisFormual(attrs) {
- let _this = this;
- // console.log("开始分析公式:", attrs.formula);
- var pattern = /(\[.*?\]){3}/;
- var formual = attrs.formula;
- var reg = new RegExp(pattern);
- while (true) {
- var items = formual.match(reg);
- if (items == null) break;
- let itemName = items[0];
- // console.log("处理项:", itemName);
- try {
- let data = await _this.getFormualData(itemName);
- // console.log(`获取到的数据: ${itemName} = ${data}`);
- if (data === null || data === undefined || isNaN(data)) {
- console.warn(`获取到的数据无效: ${itemName}`);
- formual = formual.replace(itemName, "(0)");
- } else {
- formual = formual.replace(itemName, `(${parseFloat(data)})`);
- }
- } catch (error) {
- console.error(`处理 ${itemName} 时出错:`, error);
- formual = formual.replace(itemName, "(0)");
- }
- }
- // console.log("分析后的公式:", formual);
- return formual;
- },
- async getFormualData(formualItem) {
- let _this = this;
- // console.log("开始获取公式数据:", formualItem);
- var pattern = /\[(.*?)\]\[(.*?)\]\[(.*?)\]/;
- var reg = new RegExp(pattern);
- let items = formualItem.match(reg);
- // console.log("解析结果:", items);
- let calResult = 0;
- if (items && items[1] == "T") {
- calResult = await _this.getModuleData(items[2], items[3]);
- } else {
- console.warn("无法解析公式项:", formualItem);
- }
- // console.log("计算结果:", calResult);
- return calResult;
- },
- //获取本地文档模块数据
- async getModuleData(code, attrName) {
- let _this = this;
- // console.log(`尝试获取模块数据: code=${code}, attrName=${attrName}`);
- // console.log("当前 coms:", _this.coms);
- let item = _this.coms.filter((o) => o.name == code);
- // console.log(`找到的模块:`, item);
- if (item.length > 0) {
- let attr = item[0].attrs.filter((o) => o.name == attrName);
- // console.log(`找到的属性:`, attr);
- if (attr.length > 0) {
- // console.log(`返回的值:`, attr[0].content);
- return parseFloat(attr[0].content);
- }
- }
- // console.log("未找到匹配的模块或属性,返回 0");
- return 0;
- },
- async getRemote(formual) {
- let _this = this;
- var pattern = /\[(.*?)\]\[(.*?)\]\[(.*?)\]\[(.*?)\]/;
- var reg = new RegExp(pattern);
- while (true) {
- let items = formual.match(reg);
- if (items == null) break;
- if (items[1] == "R") {
- //表示获取远程数据
- var dataIndex = items[4];
- dataIndex = items[4].split(",");
- let calResult = await _this.getRemoteData(
- items[2],
- items[3],
- dataIndex[0],
- dataIndex[1]
- );
- let itemName = items[0];
- // 检查calResult是否为数字
- if (!isNaN(calResult)) {
- formual = formual.replace(
- itemName,
- "(" + parseFloat(calResult) + ")"
- );
- } else {
- formual = formual.replace(itemName, `"${calResult}"`);
- }
- formual = formual.replace(
- itemName,
- "(" + parseFloat(calResult) + ")"
- );
- }
- }
- return formual;
- },
- async getRemoteData(code, sheet, row, col) {
- let _this = this;
- let result = 0;
- let par = {
- code: code,
- sheetName: sheet,
- row: row,
- col: col,
- };
- /* if (!this.isEditing) {
- this.loading = true;
- this.progress = 0;
- try {
- const updateProgress = setInterval(() => {
- if (this.progress < 90) {
- this.progress += 10;
- }
- }, 100);
- let res = await findData(par);
- if (res.status == 200) {
- result = res.data.result;
- }
- this.progress = 100;
- clearInterval(updateProgress);
- } catch (error) {
- console.error("Error fetching remote data:", error);
- } finally {
- setTimeout(() => {
- this.loading = false;
- this.progress = 0;
- }, 1000);
- }
- } else { */
- // 如果正在编辑,直接获取数据而不显示进度条
- try {
- let res = await findData(par);
- if (res.status == 200) {
- result = res.data.result;
- // 添加数据类型检查和转换
- if (typeof result === "string" && !isNaN(result)) {
- result = parseFloat(result);
- }
- }
- } catch (error) {
- console.error("获取远程数据错误:", error);
- }
- /* } */
- return result;
- },
- /*
- handleItemVal(value) {
- console.log(value);
- this.$forceUpdate();
- }, */
- async handleItemClick(item) {
- const category = this.categoryList.find((cat) => cat.id === item);
- if (!category) return;
- if (!category.children) {
- try {
- const res = await searchTemplateCategory({ parent_id: item });
- if (res.status != 200 || res.data.length == 0) return;
- category.children = res.data;
- for (let i = 0; i < category.children.length; i++) {
- category.children[i].dataList = await this.getTemplateList(
- category.children[i].id
- );
- }
- } catch (error) {
- console.error("Error fetching template categories:", error);
- }
- }
- // 触发视图更新
- this.$set(category, "activeChildren", category.activeChildren || []);
- },
- /* 切换标签 */
- viewDocument() {
- this.showView = 0;
- },
- viewModule() {
- this.showView = 1;
- },
- /* 更新变量 */
- /* uptadeVariable(value) {
- for (const item of this.coms) {
- for (const el of item.attrs) {
- if (el.type === "variable") {
- if (el.data.id == value.id) {
- el.content = value.value;
- el.data = value;
- }
- } else if (el.type === "constant") {
- if (el.data.id == value.id) {
- el.content = value.value;
- el.data = value;
- }
- }
- }
- }
- } */
- uptadeVariable(value) {
- const { id, value: newValue } = value;
- this.coms.forEach((item) => {
- item.attrs.forEach((el) => {
- if (
- (el.type === "variable" || el.type === "constant") &&
- el.data.id === id
- ) {
- el.content = newValue;
- el.data = value;
- }
- });
- });
- },
- /* 更新检索内容 */
- async uptadeSearch() {
- for (const item of this.coms) {
- for (const el of item.attrs) {
- if (el.type === "ai") {
- // await this.retrieval(el);
- }
- }
- }
- },
- /* 初始化检索 */
- async retrieval(el) {
- this.loading = true; // 开始加载动画
- try {
- const response = await axios.post(
- "http://58.246.234.210:7860/api/v1/run/3f84a841-cefd-44b3-9555-568cc3b6c2d2?stream=false",
- {
- input_value: el.search,
- output_type: "chat",
- input_type: "chat",
- tweaks: {
- "ChatInput-em6qC": {},
- "ParseData-yO3YQ": {},
- "Prompt-Wj75b": {},
- "ChatOutput-zy9na": {},
- "SplitText-O1knk": {},
- "File-4j6Zd": {},
- "OllamaEmbeddings-xbYXX": {},
- "Chroma-OIejP": {},
- "OllamaModel-04mEO": {},
- "OllamaEmbeddings-UGvLP": {},
- "Chroma-HzukO": {},
- },
- },
- {
- headers: {
- "Content-Type": "application/json",
- },
- }
- );
- if (response.status === 200) {
- // 假设返回的数据在 response.data.outputs[0].outputs[0].results.message.data.text 中
- const resultText =
- response.data.outputs[0].outputs[0].results.message.data.text;
- // 将搜索词和生成的内容存储在 searchResult 对象中
- el.content = resultText; // 重新赋值给原数组的对应 content
- }
- } catch (error) {
- console.error("Error during retrieval:", error);
- this.$message.error("检索失败,请稍后重试");
- } finally {
- this.loading = false; // 结束加载动画
- }
- },
- async loadTemplateInfo(id) {
- try {
- // 获取模板信息
- const { data } = await getTemplateInfo({ id });
- // 设置默认值
- if (!data.attrs || !data.type) {
- Object.assign(data, {
- attrs: "[]",
- content: "请填写内容",
- lay_id: "textArea",
- type: "TextArea",
- });
- }
- // 设置文档标题
- document.title = data.name
- ? `${data.name}-${settings.title}`
- : "新建模块-" + settings.title;
- // 解析属性
- data.attrs = JSON.parse(data.attrs);
- // 获取公式并更新属性
- const {
- data: { dataList },
- } = await searchFormula({ page: 1, pageSize: 999 });
- console.log(data);
- data.attrs = data.attrs.map((item) => {
- const formula = dataList.find((el) => el.id === item.id);
- return formula
- ? { ...item, formula: formula.formula, data: formula }
- : item;
- });
- // 从 content 中提取 {{}} 包裹的 ID
- const contentIds = (data.content.match(/{{([^}]+)}}/g) || []).map(
- (match) => match.slice(2, -2).trim()
- );
- // 过滤 attrs,只保留在 content 中出现的 ID
- data.attrs = data.attrs.filter((item) => contentIds.includes(item.id));
- this.coms = [data];
- } catch (error) {
- console.error("加载模板信息失败:", error);
- }
- },
- onExport(e) {
- let _this = this;
- _this.comIndex = -1;
- let content = _this.$refs.tabHtml.innerHTML;
- },
- onOpenView(e) {
- console.log("this.coms", this.coms);
- this.showViewForm = true;
- },
- onClose() {
- this.$router.back();
- },
- loadArticle(e) {
- let _this = this;
- _this.onLoadArticle(e);
- /* getDocumentInfo({
- id: e,
- }).then((res) => {
- if (res.status != 200) return;
- _this.onLoadArticle(res.data);
- }); */
- },
- handleDragStart(e) {
- let data = {};
- if (e.target.dataset.type == "article") {
- let index = e.target.dataset.index;
- data = {
- optType: e.target.dataset.type,
- item: this.articleList[index],
- };
- } else {
- let index = e.target.dataset.index;
- let subIndex = e.target.dataset.subIndex;
- let item = this.categoryList[index].dataList[subIndex];
- delete item.category;
- data = {
- ...item,
- optType: e.target.dataset.type,
- key: "addNew",
- attrs: JSON.parse(item.attrs),
- };
- }
- e.dataTransfer.setData("item", JSON.stringify(data));
- this.operation = "drag";
- },
- onRebuild(updatedComList) {
- this.coms = [...updatedComList];
- this.$nextTick(() => {
- this.$forceUpdate();
- });
- },
- //初始化当前用户信息
- async initCurrentUser() {
- let _this = this;
- let res = await getCurrentUserInfo();
- if (res.status != 200) return;
- _this.userInfo = res.data;
- },
- //加载文档信息
- async onLoadArticle(id) {
- try {
- this.loading = true;
- const res = await getDocumentInfo({ id });
- if (res.status !== 200) {
- throw new Error("Invalid response status");
- }
- this.docAttr = {
- id: res.data.id,
- category_id: Number(res.data.category_id),
- title: res.data.title,
- content: "",
- status: res.data.status,
- is_template: res.data.is_template,
- linkProduct: res.data.linkProduct,
- links: res.data.links,
- linkProject: res.data.linkProject,
- projects: res.data.projects,
- };
- const templateData =
- typeof res.data.data === "string"
- ? JSON.parse(res.data.data)
- : res.data.data;
- const updatedComs = await Promise.all(
- templateData.map(async (el) => {
- /* let templateInfo = { data: {} };
- if (this.type !== "document") {
- templateInfo = await getTemplateInfo({ id: el.id });
- } */
- const formulaData = await searchFormula({ page: 1, pageSize: 999 });
- const attrs = el.attrs;
- /* typeof templateInfo.data.attrs === "string"
- ? JSON.parse(templateInfo.data.attrs)
- : templateInfo.data.attrs || []; // Add a fallback empty array */
- attrs.forEach((item) => {
- if (item && item.data && item.data.id) {
- const matchedFormula = formulaData.data.dataList.find(
- (ite) => ite.id === item.data.id
- );
- if (matchedFormula) {
- item.data = matchedFormula;
- item.formula = matchedFormula.formula;
- }
- }
- });
- return { ...el /* , ...templateInfo.data, attrs */ };
- })
- );
- this.coms = updatedComs;
- console.log("coms", updatedComs);
- if (this.type === "document" && this.articleId !== undefined) {
- document.title = `${this.docAttr.title}-${settings.title}`;
- }
- this.uptadeSearch();
- } catch (error) {
- console.error("Error in onLoadArticle:", error);
- } finally {
- this.loading = false;
- }
- },
- /* 加载模版信息 */
- async onTemplateInfo(id) {
- try {
- this.loading = true;
- // 获取文档信息
- const res = await getDocumentInfo({ id });
- if (res.status !== 200 || !res.data) {
- throw new Error("无效的响应或未收到数据");
- }
- // 设置文档属性
- this.docAttr = {
- id: this.docAttr.id,
- category_id: Number(this.docAttr.category_id),
- title: res.data.title,
- content: "",
- status: res.data.status,
- is_template: res.data.is_template,
- linkProduct: res.data.linkProduct || [],
- links: res.data.links || "",
- linkProject: res.data.linkProject || [],
- projects: res.data.projects || "",
- };
- // 解析文档数据
- const documentData = res.data.data ? JSON.parse(res.data.data) : [];
- console.log(documentData);
- const updatedComs = await Promise.all(
- documentData.map(async (docEl) => {
- if (!docEl || !docEl.id) {
- console.warn("无效的文档项:", docEl);
- return null;
- }
- // 获取模板信息
- const templateInfo = await getTemplateInfo({ id: docEl.id });
- // 获取公式数据
- const formulaData = await searchFormula({ page: 1, pageSize: 999 });
- // 使用模板的 content 作为基础
- let content = templateInfo.data.content;
- // 使用模板的 attrs 作为基础,但排除 Directory 类型
- let attrs = templateInfo.data.attrs
- ? JSON.parse(templateInfo.data.attrs).filter(
- (attr) => attr.type !== "Directory"
- )
- : [];
- // 从文档数据中提取所有 Directory 类型的属性
- const docDirectories = docEl.attrs.filter(
- (attr) => attr.type === "Directory"
- );
- // 将文档中的 Directory 属性添加到 attrs 中
- attrs = [...attrs, ...docDirectories];
- // 解析 content 中的所有项
- const contentItems = (content.match(/{{([^}]+)}}/g) || []).map(
- (match) => match.slice(2, -2)
- );
- console.log("contentItems", contentItems);
- // 确保 content 中引用的所有 Directory 项都存在于 attrs 中
- contentItems.forEach((itemId) => {
- if (
- itemId.startsWith("Directory_") &&
- !attrs.some((attr) => attr.id === itemId)
- ) {
- const [, moduleIndex, level] = itemId.split("_");
- attrs.push({
- type: "Directory",
- id: itemId,
- name: "目录信息",
- intro: "目录信息",
- number: "",
- content: "",
- level: parseInt(level),
- moduleIndex: parseInt(moduleIndex),
- });
- }
- });
- // 更新公式数据
- attrs = attrs.map((item) => {
- if (item.type === "formual" && item.data && item.data.id) {
- const matchedFormula = formulaData.data.dataList.find(
- (ite) => ite.id === item.data.id
- );
- if (matchedFormula) {
- return {
- ...item,
- data: matchedFormula,
- formula: matchedFormula.formula,
- };
- }
- }
- return item;
- });
- // 返回更新后的数据,以模板信息为主,但 Directory 项完全使用文档信息
- return { ...templateInfo.data, attrs, content };
- })
- );
- // 过滤掉无效的组件
- this.coms = updatedComs.filter(Boolean);
- console.log("组件", this.coms);
- console.log("模版", this.docAttr);
- if (this.articleId !== undefined) {
- document.title = `${this.docAttr.title}-${settings.title}`;
- }
- this.uptadeSearch();
- } catch (error) {
- console.error("加载模板信息时出错:", error);
- this.$message.error("加载模板信息时出错,请稍后重试");
- } finally {
- this.loading = false;
- }
- },
- onRemove(index) {
- this.coms.splice(index, 1);
- },
- /* 目录信息 */
- onCatalogIndex(e) {
- this.catalogIndex = e;
- if (
- (this.docuComIndex =
- 3 || this.comIndex == 9998 || this.AttributeIndex == 1)
- ) {
- this.comIndex = 0;
- this.AttributeIndex = 0;
- this.docuComIndex = 0;
- }
- this.$nextTick(() => {
- this.$forceUpdate();
- });
- },
- onSetActiveIndexs(e) {
- this.docuComIndex = e;
- if (
- this.AttributeIndex == 1 ||
- this.comIndex == 9998 ||
- this.catalogIndex == 9997
- ) {
- this.catalogIndex = 0;
- this.AttributeIndex = 0;
- this.comIndex = 0;
- }
- },
- //设置当前索引
- onSetActiveIndex(e) {
- this.comIndex = e;
- if (
- this.AttributeIndex == 1 ||
- this.docuComIndex == 3 ||
- this.catalogIndex == 9997
- ) {
- this.catalogIndex = 0;
- this.docuComIndex = 0;
- }
- },
- /* 属性变量 */
- onAttributeIndex(e) {
- this.AttributeIndex = e;
- if (
- (this.docuComIndex =
- 3 || this.comIndex == 9998 || this.catalogIndex == 9997)
- ) {
- this.catalogIndex = 0;
- this.comIndex = 0;
- this.docuComIndex = 0;
- }
- },
- /* 更新 */
- renew() {
- let _this = this;
- _this.docVisible = true;
- this.docForm.title = _this.docAttr.title;
- this.docForm.category_id = _this.docAttr.category_id;
- },
- /* 保存 */
- onSaveAs(e) {
- let _this = this;
- if (_this.coms.length <= 0) {
- _this.$alert("请填写内容");
- return;
- }
- _this.docAttr.id = "";
- _this.docVisible = true;
- this.docForm.title = _this.docAttr.title;
- this.docForm.category_id = _this.docAttr.category_id;
- },
- //保存文档
- onSave(e) {
- let _this = this;
- if (_this.coms.length <= 0) {
- _this.$alert("增加组件");
- return;
- }
- if (_this.docAttr.category_id == "" || _this.docAttr.category_id <= 0) {
- _this.$alert("请选择文档分类");
- return;
- }
- if (_this.docAttr.title == "") {
- _this.$alert("请填写文档标题");
- return;
- }
- _this.docAttr.links = JSON.stringify(_this.docAttr.linkProduct);
- _this.docAttr.projects = JSON.stringify(_this.docAttr.linkProject);
- _this.docAttr.data = JSON.stringify(_this.coms);
- _this.docAttr.is_template = 0;
- /* _this.docAttr.user_name = _this.$store.state.user.name;
- _this.docAttr.user_id = _this.$store.state.user.id; 获取用户id,名称 */
- if (_this.docAttr.id > 0) {
- updateDocument(_this.docAttr).then((res) => {
- if (res.status != 200) return; //更新文档
- _this.docAttr.id = res.data;
- _this.$alert("文档更新成功");
- _this.docVisible = false;
- _this.docForm = {
- title: "",
- category_id: "",
- };
- _this.searchArticle();
- });
- } else {
- createDocument(_this.docAttr).then((res) => {
- if (res.status != 200) return; //保存文档
- _this.docAttr.id = res.data;
- _this.articleId = res.data;
- _this.$alert("文档保存成功");
- _this.docVisible = false;
- _this.docForm = {
- title: "",
- category_id: "",
- };
- _this.searchArticle();
- });
- }
- },
- /*更新 */
- onUpload() {
- let _this = this;
- if (_this.coms.length <= 0) {
- _this.$alert("增加组件");
- return;
- }
- /* if (_this.docAttr.category_id == "" || _this.docAttr.category_id <= 0) {
- _this.$alert("请选择分类");
- return;
- } */
- if (_this.docAttr.title == "") {
- _this.$alert("请填写模版标题");
- return;
- }
- _this.docAttr.links = JSON.stringify(_this.docAttr.linkProduct);
- _this.docAttr.projects = JSON.stringify(_this.docAttr.linkProject);
- _this.docAttr.data = JSON.stringify(_this.coms);
- _this.docAttr.is_template = 1;
- _this.docAttr.id = this.$route.query.articleId;
- /* _this.docAttr.user_name = _this.$store.state.user.name;
- _this.docAttr.user_id = _this.$store.state.user.id; 获取用户id,名称*/
- updateDocument(_this.docAttr).then((res) => {
- if (res.status != 200) return; //更新文档
- _this.docAttr.id = res.data;
- _this.$alert("模版更新成功");
- _this.searchArticle();
- });
- },
- /* 保存并更新模版 */
- onSaveUpload(e) {
- let _this = this;
- if (_this.coms.length <= 0) {
- _this.$alert("增加组件");
- return;
- }
- /* if (_this.docAttr.category_id == "" || _this.docAttr.category_id <= 0) {
- _this.$alert("请选择分类");
- return;
- } */
- if (_this.docAttr.title == "") {
- _this.$alert("请填写模版标题");
- return;
- }
- _this.docAttr.links = JSON.stringify(_this.docAttr.linkProduct);
- _this.docAttr.projects = JSON.stringify(_this.docAttr.linkProject);
- _this.docAttr.data = JSON.stringify(_this.coms);
- _this.docAttr.is_template = 1;
- /* _this.docAttr.user_name = _this.$store.state.user.name;
- _this.docAttr.user_id = _this.$store.state.user.id; 获取用户id,名称*/
- /* if (_this.docAttr.id > 0) {
- updateDocument(_this.docAttr).then((res) => {
- if (res.status != 200) return; //更新文档
- _this.docAttr.id = res.data;
- _this.$alert("模版更��成功");
- _this.searchArticle();
- });
- } else { */
- createDocument(_this.docAttr).then((res) => {
- if (res.status != 200) return; //保存文档
- _this.docAttr.id = res.data;
- _this.articleId = res.data;
- _this.$alert("模版保存成功");
- _this.searchArticle();
- });
- /* } */
- },
- //设置组件值
- onSetComs(e) {
- let _this = this;
- _this.coms = [...e];
- },
- onAddLayer(cateIndex, dataIndex) {
- let _this = this;
- let item = _this.categoryList[cateIndex].dataList[dataIndex];
- let data = {
- ...item,
- attrs: JSON.parse(item.attrs),
- };
- delete data.category;
- _this.coms.push(data);
- _this.comIndex = _this.coms.length - 1;
- },
- //处理插入事件
- onInsert(e) {
- let _this = this;
- switch (e.key) {
- case "article": //插入图文
- _this.insertArticle();
- break;
- case "table": //插入图表
- _this.insertTable();
- break;
- case "sourceData": //插入原数据
- _this.insertSourceData(e);
- break;
- case "formual": //插入公式
- _this.insertFormual(e);
- break;
- case "constant": //插入常量
- _this.insertConstant(e);
- break;
- case "variable": //插入变量
- _this.insertVariable(e);
- break;
- case "pager": //插入分页符
- _this.insertPager();
- break;
- case "attr":
- this.insertProductAttr();
- break;
- case "Directory": //插入主题
- _this.insertDirectory(e);
- break;
- case "addNew": //插入新记录
- _this.insertNew(e);
- break;
- case "InsertNull":
- _this.insertVal();
- break;
- case "ai": //插入ai
- _this.insertAI(e);
- break;
- }
- },
- /* 插入空值 */
- insertVal() {
- let _this = this;
- if (_this.comIndex < 0) {
- _this.$alert("请选择插入图层");
- return false;
- }
- let com = _this.coms[_this.comIndex];
- let uniqueId = "val" + Date.now(); // 使用时间戳创建唯一ID
- let data = {
- type: "variableNull",
- id: uniqueId,
- dataId: "",
- name: "非变量",
- intro: "",
- content: "请输入",
- data: "",
- };
- com.attrs.push(data);
- if (com.type == "TextArea") {
- //如果是图文,更新内容
- _this.insertCmd = {
- content: "{{" + data.id + "}}",
- };
- } else {
- //仅对图表中插入有效
- if (_this.comIndex >= 0) {
- _this.setTableData(data.id);
- }
- }
- },
- /* 插入ai */
- insertAI(e) {
- let _this = this;
- if (_this.comIndex < 0) {
- _this.$alert("请选择插入图层");
- return false;
- }
- let com = _this.coms[_this.comIndex];
- let data = {
- type: "ai",
- id: "ai" + (com.attrs.length + 1),
- dataId: "",
- name: "AI",
- intro: "插入AI",
- content: e.content.result,
- search: e.content.searchTerm,
- };
- com.attrs.push(data);
- if (com.type == "TextArea") {
- //如果是图文,更新内容
- _this.insertCmd = {
- content: "{{" + data.id + "}}",
- };
- }
- },
- insertProductAttr() {
- if (this.docAttr.linkProduct.length <= 0) {
- this.$alert("请选择文档关联商品信息");
- return false;
- }
- this.showProductAttr = true;
- },
- //插入目录
- insertDirectory(e) {
- let _this = this;
- if (_this.comIndex < 0) {
- _this.$alert("请选择插入图层");
- return false;
- }
- let com = _this.coms[_this.comIndex];
- let uniqueId = `Directory_${_this.comIndex}_${com.attrs.length + 1}`;
- // 获取当前层级
- let currentLevel = e.content.level || 1;
- // 生成带有模块索引和层级的内容
- let { number, content } = this.generateNumberedContent(
- _this.comIndex,
- currentLevel
- );
- let data = {
- type: "Directory",
- id: uniqueId,
- name: "目录信息",
- intro: "目录信息",
- number: number,
- content: content,
- level: currentLevel,
- moduleIndex: _this.comIndex,
- };
- // 使用 $set 来确保响应式更新
- this.$set(com.attrs, com.attrs.length, data);
- // 强制更新视图
- this.$forceUpdate();
- // 使用 nextTick 确保 DOM 更新后再检查
- this.$nextTick(() => {
- if (!com.attrs[com.attrs.length - 1].content) {
- this.$set(com.attrs[com.attrs.length - 1], "content", content);
- this.$forceUpdate();
- }
- });
- // 使用新的唯一 ID 在插入命令中
- _this.insertCmd = {
- content: `{{${uniqueId}}}`,
- };
- },
- generateNumberedContent(moduleIndex, level) {
- let number = this.generateLevelPrefix(moduleIndex, level);
- let content = this.coms[moduleIndex].type === "TextArea" ? "" : "";
- return { number, content };
- },
- generateLevelPrefix(moduleIndex, level) {
- let prefix = [];
- let currentModule = this.coms[moduleIndex];
- // 获取当前模块中已存在的目录项
- let existingDirectories = currentModule.attrs.filter(
- (attr) => attr.type === "Directory"
- );
- // 计算当前层级的序号
- let currentLevelCount =
- existingDirectories.filter((dir) => dir.level === level).length + 1;
- // 构建多级序号
- for (let i = 1; i <= level; i++) {
- if (i === 1) {
- prefix.push(moduleIndex + 1);
- } else if (i === level) {
- prefix.push(currentLevelCount);
- } else {
- // 对于中间层级,找到最近的上级目录项
- let parentLevel = existingDirectories
- .filter((dir) => dir.level === i - 1)
- .pop();
- prefix.push(parentLevel ? parentLevel.number.split(".")[i - 1] : 1);
- }
- }
- return prefix.join(".");
- },
- onInsertProductAttr(e) {
- let _this = this;
- this.showProductAttr = false;
- if (_this.comIndex < 0) {
- _this.$alert("请选择插入图层");
- return false;
- }
- let com = _this.coms[_this.comIndex];
- let data = {
- type: "ProductAttr",
- id: "ProductAttr" + (com.attrs.length + 1),
- dataId: e.id,
- name: "商品属性",
- intor: "商品属性",
- content: "",
- attrs: e,
- };
- com.attrs.push(data);
- _this.insertCmd = {
- content: "{{" + data.id + "}}",
- };
- },
- //插入新记录
- insertNew(e) {
- let _this = this;
- _this.coms.push(e);
- },
- //插入分页
- insertPager() {
- let _this = this;
- if (_this.comIndex < 0) {
- _this.$alert("请选择插入图层");
- return false;
- }
- let com = _this.coms[_this.comIndex];
- let data = {
- type: "pager",
- id: "pager" + (com.attrs.length + 1),
- name: "分页符",
- intor: "强制分页",
- content: "",
- };
- com.attrs.push(data);
- if (com.type == "TextArea") {
- //如果是图文,更新内容
- _this.insertCmd = {
- content: "<div>{{" + data.id + "}}</div>",
- };
- }
- },
- //插入图文
- insertArticle() {
- /* let _this = this;
- _this.coms.push({
- type: "TextArea",
- lay_id: "textArea",
- code: "模块名",
- name: "图文",
- intro: "图文介绍",
- isEdit: 2,
- content: "请填写内容",
- attrs: [],
- });
- _this.comIndex = _this.coms.length - 1; */
- let _this = this;
- let newArticle = {
- type: "TextArea",
- lay_id: "textArea",
- code: "模块名",
- name: "图文",
- intro: "图文介绍",
- isEdit: 2,
- content: "请填写内容",
- attrs: [],
- };
- _this.coms.push(newArticle);
- _this.comIndex = _this.coms.length - 1;
- // 添加一些日志来帮助调试
- console.log("New article added:", newArticle);
- console.log("Current coms:", _this.coms);
- console.log("New comIndex:", _this.comIndex);
- },
- //插入表格
- insertTable() {
- let _this = this;
- _this.coms.push({
- type: "Table",
- lay_id: "Table",
- code: "模块名",
- name: "图表名称",
- intro: "图表介绍",
- isEdit: 2,
- tableHeader: this.initTableHeader(),
- tableData: [{}],
- htmlData: "",
- attrs: [],
- });
- _this.comIndex = _this.coms.length - 1;
- },
- initTableHeader() {
- var start = 65;
- var data = [];
- for (var i = start; i <= start + 25; i++) {
- data.push(String.fromCharCode(i));
- }
- return data;
- },
- //插入变量
- insertConstant(e) {
- let _this = this;
- // console.log("insertconstant");
- if (_this.comIndex < 0) {
- _this.$alert("请选择插入图层");
- return false;
- }
- let com = _this.coms[_this.comIndex];
- let data = {
- type: "constant",
- id: e.content.code + (com.attrs.length + 1),
- dataId: e.id,
- name: e.content.code,
- intro: e.content.intro,
- content: e.content.value,
- data: e.content,
- };
- com.attrs.push(data);
- if (com.type == "TextArea") {
- //如果是图文,更新内容
- _this.insertCmd = {
- content: "{{" + data.id + "}}",
- };
- } else {
- //仅对图表中插入有效
- if (_this.comIndex >= 0) {
- _this.setTableData(data.id);
- }
- }
- },
- //插入变量
- insertVariable(e) {
- let _this = this;
- if (_this.comIndex < 0) {
- _this.$alert("请选择插入图层");
- return false;
- }
- let com = _this.coms[_this.comIndex];
- let data = {
- type: "variable",
- id: e.content.code + (com.attrs.length + 1),
- dataId: e.id,
- name: e.content.code,
- intro: e.content.intro,
- content: e.content.value,
- data: e.content,
- };
- com.attrs.push(data);
- if (com.type == "TextArea") {
- //如果是图文,更新内容
- _this.insertCmd = {
- content: "{{" + data.id + "}}",
- };
- } else {
- //仅对图表中插入有效
- if (_this.comIndex >= 0) {
- _this.setTableData(data.id);
- }
- }
- },
- //插入原数据
- insertSourceData(e) {
- let _this = this;
- if (_this.comIndex < 0) {
- _this.$alert("请选择插入图层");
- return false;
- }
- let com = _this.coms[_this.comIndex];
- let data = {
- type: "sourceData",
- id: "sourceData" + (com.attrs.length + 1),
- dataId: "",
- name: "源数据",
- intro: "插入源数据",
- formula:
- "[R][" +
- e.content.tb +
- "][" +
- e.content.sheet +
- "][" +
- e.content.r +
- "," +
- e.content.c +
- "]",
- content: e.content.value,
- data: e.content,
- };
- com.attrs.push(data);
- if (com.type == "TextArea") {
- //如果是图文,更新内容
- _this.insertCmd = {
- content: "{{" + data.id + "}}",
- };
- }
- },
- //插入公式
- insertFormual(e) {
- let _this = this;
- if (_this.comIndex < 0) {
- _this.$alert("请选择插入图层");
- return false;
- }
- let com = _this.coms[_this.comIndex];
- let data = {
- type: "formual",
- id: "formual" + (com.attrs.length + 1),
- dataId: e.id,
- name: e.content.name,
- intro: e.content.intro,
- formula: e.content.formula,
- content: 0,
- data: e.content,
- };
- com.attrs.push(data);
- if (com.type == "TextArea") {
- //如果是图文,更新内容
- _this.insertCmd = {
- content: "{{" + data.id + "}}",
- };
- } else {
- //仅对图表中插入有效
- if (_this.comIndex >= 0) {
- _this.setTableData(data.id);
- }
- }
- },
- //获取模版分类信息
- async initCategoryList() {
- let _this = this;
- /* let res = await getAllCategory({list:1 });
- if(res.status!=200)return;
- let dataList=res.data;
- for(var i=0;i<dataList.length;i++){
- for (var j=0;j<dataList[i].children.length;j++){
- let dataId=dataList[i].children[j].id;
- for(var k=0;k<dataList[i].children[j].dataList.length;k++){
- dataList[i].children[j].dataList[k].attrs=JSON.parse(dataList[i].children[j].dataList[k].attrs)
- }
- // dataList[i].children[j].dataList=await _this.getTemplateList(dataId)
- }
- }
- // console.log("dataList",dataList)
- _this.categoryList=dataList; */
- let res = await searchTemplateCategory({
- page: 1,
- pageSize: 99,
- parent_id: 0,
- status: 5,
- });
- if (res.status != 200) return;
- _this.categoryList = res.data.dataList;
- for (var i = 0; i < _this.categoryList.length; i++) {
- _this.categoryList[i].dataList = await _this.getTemplateList(
- _this.categoryList[i].id
- );
- }
- },
- //获取模版列表
- async getTemplateList(categoryId) {
- let _this = this;
- let res = await searchTemplate({
- page: 1,
- pageSize: 999,
- category_id: categoryId,
- status: 5,
- });
- if (res.status != 200) return [];
- let dataList = res.data.dataList.map((item) => {
- // 添加空值检查
- if (!item.attrs) {
- item.attrs = "[]";
- }
- if (!item.content) {
- item.content = "";
- }
- try {
- // 解析 attrs,添加错误处理
- item.attrs =
- typeof item.attrs === "string"
- ? JSON.parse(item.attrs)
- : item.attrs;
- // 从 content 中提取所有 {{}} 包裹的 ID,添加空值检查
- const contentIds = (
- (item.content || "").match(/{{([^}]+)}}/g) || []
- ).map((match) => match.slice(2, -2).trim());
- // 确保 attrs 是数组
- item.attrs = Array.isArray(item.attrs) ? item.attrs : [];
- // 过滤 attrs,只保留在 content 中出现的 ID
- item.attrs = item.attrs.filter(
- (attr) => attr && attr.id && contentIds.includes(attr.id)
- );
- } catch (error) {
- console.error("Error processing template item:", error);
- item.attrs = [];
- }
- return item;
- });
- return dataList;
- },
- //获取文档列表
- searchArticle() {
- let _this = this;
- pageDocument({
- page: 1,
- pageSize: 99,
- }).then((res) => {
- if (res.status != 200) return;
- _this.articleList = res.data.dataList.filter(
- (el) => el.is_template == 0
- );
- _this.templateList = res.data.dataList.filter(
- (el) => el.is_template == 1
- );
- });
- },
- },
- };
- </script>
- <style lang="scss">
- @import "./create.scss";
- .el-collapse,
- .el-collapse-item__wrap {
- border: none;
- }
- .el-collapse,
- .el-collapse-item__header {
- border: none;
- .el-collapse-item__arrow {
- margin: 0;
- }
- }
- .borderless-collapse {
- border: none;
- ::v-deep .el-collapse-item__header,
- ::v-deep .el-collapse-item__wrap,
- ::v-deep .el-collapse-item__content,
- ::v-deep .el-collapse-item {
- border: none;
- }
- ::v-deep .el-collapse-item__wrap {
- border-bottom: none !important;
- }
- }
- .scrollable-container {
- overflow-x: auto;
- white-space: nowrap;
- width: 350px;
- padding-bottom: 10px;
- }
- .min-width-content {
- /* display: inline-block;
- vertical-align: top; */
- min-width: 150px;
- white-space: normal;
- }
- // 树节点样式调整
- ::v-deep .el-tree-node__content {
- height: 32px;
- &:hover {
- background-color: #f5f7fa;
- }
- }
- ::v-deep .el-tree-node.is-current > .el-tree-node__content {
- background-color: #f0f7ff;
- color: #409eff;
- }
- /*.el-collapse-item {
- display: inline-block;
- vertical-align: top;
- } */
- </style>
|