create.vue 32 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166
  1. <template>
  2. <div class="doc-container">
  3. <div class="editor-top">
  4. <div class="left">
  5. <div class="doc">
  6. <span>当前打开文档:</span
  7. >{{ docAttr.title == "" ? "新建文档" : docAttr.title }}
  8. </div>
  9. <div class="creator" v-if="userInfo != null">
  10. <span>创建者:</span>{{ userInfo.username }}
  11. </div>
  12. </div>
  13. <div class="right">
  14. <el-button type="primary" size="mini" @click="onSaveAs"
  15. >保存文档</el-button
  16. ><!-- v-if="docAttr.id > 0" -->
  17. <el-button
  18. type="primary"
  19. size="mini"
  20. @click="onSave"
  21. v-if="docAttr.is_template == 0 && docAttr.id > 0"
  22. >更新文档</el-button
  23. >
  24. <el-button
  25. type="primary"
  26. size="mini"
  27. v-if="$store.state.user.name == 'admin'"
  28. @click="onSaveUpload"
  29. >保存并更新模版</el-button
  30. >
  31. <el-button type="primary" size="mini" @click="onOpenView"
  32. >预览导出
  33. </el-button>
  34. <el-button type="primary" size="mini" @click="onClose">
  35. 关闭文档
  36. </el-button>
  37. </div>
  38. </div>
  39. <div class="editor-content">
  40. <div class="neary-doc">
  41. <div class="left-content">
  42. <div class="search">
  43. <el-input placeholder="搜索文档标题"></el-input>
  44. </div>
  45. <div class="new-article">
  46. <el-collapse
  47. v-model="activeNames"
  48. :accordion="true"
  49. @change="handleItemClick"
  50. >
  51. <el-collapse-item title="最新文档" name="-1" v-if="showView == 0">
  52. <div
  53. v-for="(it, index) in articleList"
  54. draggable
  55. :key="it.id"
  56. :data-index="index"
  57. data-type="article"
  58. class="sub-menus"
  59. >
  60. <div @click="onLoadArticle(it)">{{ it.title }}</div>
  61. </div>
  62. </el-collapse-item>
  63. <el-collapse-item title="模版列表" name="-2" v-if="showView == 0">
  64. <div
  65. v-for="(it, index) in templateList"
  66. draggable
  67. :key="it.id"
  68. :data-index="index"
  69. data-type="article"
  70. class="sub-menus"
  71. >
  72. <div @click="onTemplateInfo(it)">{{ it.title }}</div>
  73. </div>
  74. </el-collapse-item>
  75. <!-- <template v-for="(item, itemIndex) in categoryList">
  76. <div class="sub-title">{{ item.name }}</div>
  77. <template v-for="(subItem, subIndex) in item.children">
  78. <el-collapse-item :title="subItem.name" :name="subItem.id">
  79. <draggable
  80. v-model="subItem.dataList"
  81. :options="{
  82. group: { name: 'itxst', pull: 'clone' },
  83. sort: true,
  84. }"
  85. animation="300"
  86. >
  87. <transition-group>
  88. <div
  89. class="sub-menus"
  90. v-for="(it, index) in subItem.dataList"
  91. :key="index"
  92. >
  93. <div>{{ it.name }}</div>
  94. </div>
  95. </transition-group>
  96. </draggable>
  97. </el-collapse-item>
  98. </template>
  99. </template> -->
  100. <div v-if="showView == 1">
  101. <el-collapse-item
  102. v-for="(item, itemIndex) in categoryList"
  103. :key="itemIndex"
  104. :title="item.name"
  105. :name="item.id"
  106. >
  107. <el-collapse
  108. v-model="item.activeChildren"
  109. @change="handleItemVal"
  110. v-show="item.children"
  111. >
  112. <el-collapse-item
  113. v-for="(child, childIndex) in item.children"
  114. :key="childIndex"
  115. :title="child.name"
  116. :name="child.id"
  117. >
  118. <draggable
  119. v-model="child.dataList"
  120. :options="{
  121. group: { name: 'itxst', pull: 'clone' },
  122. sort: true,
  123. }"
  124. >
  125. <transition-group>
  126. <div
  127. class="sub-menus"
  128. v-for="(its, index) in child.dataList"
  129. :key="index"
  130. >
  131. <div>{{ its.name }}</div>
  132. </div>
  133. </transition-group>
  134. </draggable>
  135. </el-collapse-item>
  136. </el-collapse>
  137. <draggable
  138. v-model="item.dataList"
  139. :options="{
  140. group: { name: 'itxst', pull: 'clone' },
  141. sort: true,
  142. }"
  143. >
  144. <transition-group>
  145. <div
  146. class="sub-menus"
  147. v-for="(it, index) in item.dataList"
  148. :key="index"
  149. >
  150. <div>{{ it.name }}</div>
  151. </div>
  152. </transition-group>
  153. </draggable>
  154. </el-collapse-item>
  155. </div>
  156. </el-collapse>
  157. </div>
  158. </div>
  159. </div>
  160. <div class="right-sidebarew">
  161. <div
  162. class="sidebar-item"
  163. :class="showView == 0 ? 'active-item' : ''"
  164. @click="viewDocument"
  165. >
  166. 查看文档
  167. </div>
  168. <div
  169. class="sidebar-item"
  170. :class="showView == 1 ? 'active-item' : ''"
  171. @click="viewModule"
  172. >
  173. 查看模块
  174. </div>
  175. </div>
  176. <div class="editor-main">
  177. <div class="menus-box">
  178. <menus
  179. @onEvents="onInsert"
  180. @onVariable="uptadeVariable"
  181. :comArr="coms"
  182. ></menus>
  183. </div>
  184. <div class="editor-box" ref="tabHtml" v-loading="loading">
  185. <editor
  186. :coms="coms"
  187. :comIndex="comIndex"
  188. :isAdmin="isAdmin"
  189. :templateCate="categoryList"
  190. :insertCmd="insertCmd"
  191. @onSetActiveIndex="onSetActiveIndex"
  192. @onInsert="onInsert"
  193. @onLoadArticle="onLoadArticle"
  194. @onDelete="onRemove"
  195. @onRebuild="onRebuild"
  196. @onSetComs="onSetComs"
  197. ></editor>
  198. </div>
  199. </div>
  200. <div class="editor-option">
  201. <div class="editor-menu">
  202. <div
  203. class="item"
  204. @click="onSetActiveIndex(9999)"
  205. :class="comIndex == 9999 ? 'active-item' : ''"
  206. >
  207. <span class="name">文档属性</span>
  208. </div>
  209. <div
  210. class="item"
  211. @click="onSetActiveIndex(9998)"
  212. :class="comIndex == 9998 ? 'active-item' : ''"
  213. >
  214. <span class="name">模块管理</span>
  215. </div>
  216. <div
  217. class="item"
  218. @click="onCatalogIndex(9997)"
  219. :class="catalogIndex == 9997 ? 'active-item' : ''"
  220. >
  221. <span class="name">目录信息</span>
  222. </div>
  223. <div
  224. class="item"
  225. @click="onAttributeIndex(1)"
  226. :class="AttributeIndex == 1 ? 'active-item' : ''"
  227. >
  228. <span class="name">属性变量</span>
  229. </div>
  230. </div>
  231. <template v-if="comIndex == 9999">
  232. <docAttr :attrs="docAttr"></docAttr>
  233. </template>
  234. <template v-if="comIndex == 9998">
  235. <comList
  236. :coms="coms"
  237. @onRemove="onRemove"
  238. @onSetActive="onSetActiveIndex"
  239. @onRebuild="onRebuild"
  240. ></comList>
  241. </template>
  242. <template v-if="catalogIndex == 9997">
  243. <Directory :coms="coms" />
  244. </template>
  245. <!-- comIndex != 9999 && comIndex != 9998 && comIndex != 9997 AttributeIndex==1-->
  246. <template
  247. v-if="
  248. comIndex != 9999 &&
  249. comIndex != 9998 &&
  250. catalogIndex != 9997 &&
  251. AttributeIndex != 1
  252. "
  253. >
  254. <Attribute
  255. :com="coms[comIndex]"
  256. @onRefresh="initCategoryList"
  257. ></Attribute>
  258. </template>
  259. <template v-if="AttributeIndex == 1">
  260. <attributeVar
  261. :com="coms[comIndex]"
  262. @onRefresh="initCategoryList"
  263. ></attributeVar>
  264. </template>
  265. <!-- <Directory :coms="coms" /> -->
  266. </div>
  267. </div>
  268. <el-dialog
  269. :visible.sync="showViewForm"
  270. :close-on-click-modal="false"
  271. append-to-body
  272. v-el-drag-dialog
  273. width="850px"
  274. custom-class="prod-verify"
  275. title="文档预览"
  276. >
  277. <ViewForm :coms="coms" :docAttr="docAttr"></ViewForm>
  278. </el-dialog>
  279. <el-dialog
  280. :visible.sync="showProductAttr"
  281. append-to-body
  282. v-el-drag-dialog
  283. :close-on-click-modal="false"
  284. width="850px"
  285. custom-class="prod-verify"
  286. title="插入产品属性"
  287. >
  288. <ProductAttr
  289. :docAttr="docAttr"
  290. @onInsertProductAttr="onInsertProductAttr"
  291. ></ProductAttr>
  292. </el-dialog>
  293. </div>
  294. </template>
  295. <script>
  296. import utils from "@/utils/fun"; // 方法类
  297. import { searchDocument } from "@/api/document";
  298. import menus from "./com/menus";
  299. import editor from "./com/editor";
  300. import Attribute from "./com/components/Attribute";
  301. import attributeVar from "./com/components/Attribute/attributeVar/index.vue";
  302. import ProductAttr from "./com/components/ProductAttr";
  303. import {
  304. searchTemplateCategory,
  305. searchTemplate,
  306. getTemplateInfo,
  307. getAllCategory,
  308. } from "@/api/template";
  309. import docAttr from "./com/components/Attribute/docAttr";
  310. import comList from "./com/components/Attribute/comList";
  311. import Directory from "./com/components/Attribute/Directory";
  312. import { getCurrentUserInfo } from "@/api/api";
  313. import {
  314. createDocument,
  315. updateDocument,
  316. getDocumentInfo,
  317. exportDocument,
  318. } from "@/api/document";
  319. import ViewForm from "./com/view";
  320. import elDragDialog from "@/directive/el-drag-dialog";
  321. import draggable from "vuedraggable";
  322. import htmlDocx from "html-docx-js/dist/html-docx";
  323. import axios from "axios";
  324. // import htmlDocx from "htmlDocx";
  325. export default {
  326. name: "create",
  327. components: {
  328. menus,
  329. editor,
  330. Attribute,
  331. comList,
  332. docAttr,
  333. ViewForm,
  334. ProductAttr,
  335. Directory,
  336. draggable,
  337. attributeVar,
  338. },
  339. directives: {
  340. elDragDialog,
  341. },
  342. data() {
  343. return {
  344. activeNames: "-1",
  345. nestedActiveNames: [],
  346. articleList: [],
  347. templateList: [],
  348. categoryList: [],
  349. //组件相关
  350. coms: [],
  351. comIndex: 0, //当前组件索引
  352. showProductAttr: false,
  353. comList: [],
  354. //文档属性
  355. docAttr: {
  356. id: 0,
  357. category_id: "",
  358. title: "",
  359. content: "",
  360. status: 5,
  361. links: "",
  362. linkProduct: [],
  363. linkProject: [],
  364. projects: "",
  365. },
  366. insertCmd: null,
  367. showViewForm: false,
  368. isAdmin: 2, //1是管理员,2非管理员
  369. //当前选中表格
  370. tabExt: {
  371. row: 0,
  372. col: 0,
  373. },
  374. userInfo: null,
  375. articleId: 0,
  376. loading: false, // 增加 loading 状态
  377. showView: 0, //查看 文档/模块
  378. childrenList: "",
  379. value: [],
  380. AttributeIndex: 0,
  381. catalogIndex: 0, //目录信息
  382. };
  383. },
  384. watch: {
  385. coms: {
  386. handler(val) {
  387. // console.log("watch com val:",val);
  388. },
  389. immediate: true, //立即执行
  390. deep: true,
  391. },
  392. articleId: {
  393. handler(val) {
  394. if (val == null || val == undefined || val <= 0) return;
  395. this.loadArticle(val);
  396. },
  397. immediate: true,
  398. deep: true,
  399. },
  400. },
  401. async mounted() {
  402. let _this = this;
  403. this.searchArticle();
  404. await this.initCategoryList();
  405. await this.initCurrentUser();
  406. this.articleId = this.$route.query.articleId;
  407. let templateId = this.$route.query.templateId;
  408. if (templateId > 0) {
  409. _this.loadTemplateInfo(templateId);
  410. }
  411. _this.isAdmin = _this.userInfo.roleInfo.is_admin;
  412. },
  413. methods: {
  414. handleItemVal(value) {
  415. this.$forceUpdate();
  416. },
  417. async handleItemClick(item) {
  418. const category = this.categoryList.find((cat) => cat.id === item);
  419. if (!category) return;
  420. if (!category.children) {
  421. try {
  422. const res = await searchTemplateCategory({ parent_id: item });
  423. if (res.status != 200 || res.data.length == 0) return;
  424. category.children = res.data;
  425. for (let i = 0; i < category.children.length; i++) {
  426. category.children[i].dataList = await this.getTemplateList(
  427. category.children[i].id
  428. );
  429. }
  430. } catch (error) {
  431. console.error("Error fetching template categories:", error);
  432. }
  433. }
  434. // 触发视图更新
  435. this.$set(category, "activeChildren", category.activeChildren || []);
  436. },
  437. /* 切换标签 */
  438. viewDocument() {
  439. this.showView = 0;
  440. },
  441. viewModule() {
  442. this.showView = 1;
  443. },
  444. /* 更新变量 */
  445. uptadeVariable(value) {
  446. for (const item of this.coms) {
  447. for (const el of item.attrs) {
  448. if (el.type === "variable") {
  449. if (el.data.id == value.id) {
  450. el.content = value.value;
  451. }
  452. }
  453. }
  454. }
  455. },
  456. /* 更新检索内容 */
  457. async uptadeSearch() {
  458. for (const item of this.coms) {
  459. for (const el of item.attrs) {
  460. if (el.type === "ai") {
  461. // await this.retrieval(el);
  462. }
  463. }
  464. }
  465. },
  466. /* 初始化检索 */
  467. async retrieval(el) {
  468. this.loading = true; // 开始加载动画
  469. try {
  470. const response = await axios.post(
  471. "http://58.246.234.210:7860/api/v1/run/3f84a841-cefd-44b3-9555-568cc3b6c2d2?stream=false",
  472. {
  473. input_value: el.search,
  474. output_type: "chat",
  475. input_type: "chat",
  476. tweaks: {
  477. "ChatInput-em6qC": {},
  478. "ParseData-yO3YQ": {},
  479. "Prompt-Wj75b": {},
  480. "ChatOutput-zy9na": {},
  481. "SplitText-O1knk": {},
  482. "File-4j6Zd": {},
  483. "OllamaEmbeddings-xbYXX": {},
  484. "Chroma-OIejP": {},
  485. "OllamaModel-04mEO": {},
  486. "OllamaEmbeddings-UGvLP": {},
  487. "Chroma-HzukO": {},
  488. },
  489. },
  490. {
  491. headers: {
  492. "Content-Type": "application/json",
  493. },
  494. }
  495. );
  496. if (response.status === 200) {
  497. // 假设返回的数据在 response.data.outputs[0].outputs[0].results.message.data.text 中
  498. const resultText =
  499. response.data.outputs[0].outputs[0].results.message.data.text;
  500. // 将搜索词和生成的内容存储在 searchResult 对象中
  501. el.content = resultText; // 重新赋值给原数组的对应 content
  502. }
  503. } catch (error) {
  504. console.error("Error during retrieval:", error);
  505. this.$message.error("检索失败,请稍后重试");
  506. } finally {
  507. this.loading = false; // 结束加载动画
  508. }
  509. },
  510. loadTemplateInfo(e) {
  511. let _this = this;
  512. let par = {
  513. id: e,
  514. };
  515. getTemplateInfo(par).then((res) => {
  516. if (res.status != 200) return;
  517. res.data.attrs = JSON.parse(res.data.attrs);
  518. _this.coms = [res.data];
  519. });
  520. },
  521. onExport(e) {
  522. let _this = this;
  523. _this.comIndex = -1;
  524. let content = _this.$refs.tabHtml.innerHTML;
  525. },
  526. onOpenView(e) {
  527. this.showViewForm = true;
  528. },
  529. onClose() {
  530. window.close();
  531. },
  532. loadArticle(e) {
  533. let _this = this;
  534. getDocumentInfo({
  535. id: e,
  536. }).then((res) => {
  537. if (res.status != 200) return;
  538. _this.onLoadArticle(res.data);
  539. });
  540. },
  541. handleDragStart(e) {
  542. let data = {};
  543. if (e.target.dataset.type == "article") {
  544. let index = e.target.dataset.index;
  545. data = {
  546. optType: e.target.dataset.type,
  547. item: this.articleList[index],
  548. };
  549. } else {
  550. let index = e.target.dataset.index;
  551. let subIndex = e.target.dataset.subIndex;
  552. let item = this.categoryList[index].dataList[subIndex];
  553. delete item.category;
  554. data = {
  555. ...item,
  556. optType: e.target.dataset.type,
  557. key: "addNew",
  558. attrs: JSON.parse(item.attrs),
  559. };
  560. }
  561. e.dataTransfer.setData("item", JSON.stringify(data));
  562. this.operation = "drag";
  563. },
  564. onRebuild(e) {
  565. let _this = this;
  566. _this.coms = [...e];
  567. },
  568. //初始化当前用户信息
  569. async initCurrentUser() {
  570. let _this = this;
  571. let res = await getCurrentUserInfo();
  572. if (res.status != 200) return;
  573. _this.userInfo = res.data;
  574. },
  575. //加载文档信息
  576. onLoadArticle(e) {
  577. let _this = this;
  578. _this.docAttr = {
  579. id: e.id,
  580. category_id: e.category_id * 1,
  581. title: e.title,
  582. content: "",
  583. status: e.status,
  584. is_template: e.is_template,
  585. linkProduct: e.linkProduct,
  586. links: e.links,
  587. linkProject: e.linkProject,
  588. projects: e.projects,
  589. };
  590. _this.coms = JSON.parse(e.data);
  591. console.log(_this.coms);
  592. this.uptadeSearch();
  593. },
  594. /* 加载模版信息 */
  595. onTemplateInfo(e) {
  596. let _this = this;
  597. _this.docAttr = {
  598. id: e.id,
  599. category_id: e.category_id * 1,
  600. title: e.title,
  601. content: "",
  602. status: e.status,
  603. is_template: e.is_template,
  604. linkProduct: e.linkProduct,
  605. links: e.links,
  606. linkProject: e.linkProject,
  607. projects: e.projects,
  608. };
  609. _this.coms = JSON.parse(e.data);
  610. this.uptadeSearch();
  611. },
  612. onRemove(index) {
  613. this.coms.splice(index, 1);
  614. },
  615. /* 目录信息 */
  616. onCatalogIndex(e) {
  617. this.catalogIndex = e;
  618. if (
  619. this.comIndex == 9999 ||
  620. this.comIndex == 9998 ||
  621. this.AttributeIndex == 1
  622. ) {
  623. this.comIndex = 0;
  624. this.AttributeIndex = 0;
  625. }
  626. },
  627. //设置当前索引
  628. onSetActiveIndex(e) {
  629. this.comIndex = e;
  630. if (
  631. this.comIndex == 9999 ||
  632. this.comIndex == 9998 ||
  633. this.catalogIndex == 9997
  634. ) {
  635. this.catalogIndex = 0;
  636. this.AttributeIndex = 0;
  637. }
  638. },
  639. /* 属性变量 */
  640. onAttributeIndex(e) {
  641. this.AttributeIndex = e;
  642. if (
  643. this.comIndex == 9999 ||
  644. this.comIndex == 9998 ||
  645. this.catalogIndex == 9997
  646. ) {
  647. this.catalogIndex = 0;
  648. this.comIndex = 0;
  649. }
  650. },
  651. onSaveAs(e) {
  652. let _this = this;
  653. _this.docAttr.id = "";
  654. _this.onSave(e);
  655. },
  656. //保存文档
  657. onSave(e) {
  658. let _this = this;
  659. if (_this.coms.length <= 0) {
  660. _this.$alert("增加组件");
  661. return;
  662. }
  663. if (_this.docAttr.category_id == "" || _this.docAttr.category_id <= 0) {
  664. _this.$alert("请选择文档分类");
  665. return;
  666. }
  667. if (_this.docAttr.title == "") {
  668. _this.$alert("请填写文档标题");
  669. return;
  670. }
  671. _this.docAttr.links = JSON.stringify(_this.docAttr.linkProduct);
  672. _this.docAttr.projects = JSON.stringify(_this.docAttr.linkProject);
  673. _this.docAttr.data = JSON.stringify(_this.coms);
  674. _this.docAttr.is_template = 0;
  675. _this.docAttr.user_name = _this.$store.state.user.name;
  676. _this.docAttr.user_id = _this.$store.state.user.id;
  677. if (_this.docAttr.id > 0) {
  678. updateDocument(_this.docAttr).then((res) => {
  679. if (res.status != 200) return; //更新文档
  680. _this.docAttr.id = res.data;
  681. _this.$alert("文档更新成功");
  682. _this.searchArticle();
  683. });
  684. } else {
  685. createDocument(_this.docAttr).then((res) => {
  686. if (res.status != 200) return; //保存文档
  687. _this.docAttr.id = res.data;
  688. _this.$alert("文档保存成功");
  689. _this.searchArticle();
  690. });
  691. }
  692. },
  693. /* 保存并更新模版 */
  694. onSaveUpload(e) {
  695. let _this = this;
  696. if (_this.coms.length <= 0) {
  697. _this.$alert("增加组件");
  698. return;
  699. }
  700. if (_this.docAttr.category_id == "" || _this.docAttr.category_id <= 0) {
  701. _this.$alert("请选择分类");
  702. return;
  703. }
  704. if (_this.docAttr.title == "") {
  705. _this.$alert("请填写模版标题");
  706. return;
  707. }
  708. _this.docAttr.links = JSON.stringify(_this.docAttr.linkProduct);
  709. _this.docAttr.projects = JSON.stringify(_this.docAttr.linkProject);
  710. _this.docAttr.data = JSON.stringify(_this.coms);
  711. _this.docAttr.is_template = 1;
  712. _this.docAttr.user_name = _this.$store.state.user.name;
  713. _this.docAttr.user_id = _this.$store.state.user.id;
  714. if (_this.docAttr.id > 0) {
  715. updateDocument(_this.docAttr).then((res) => {
  716. if (res.status != 200) return; //更新文档
  717. _this.docAttr.id = res.data;
  718. _this.$alert("模版更新成功");
  719. _this.searchArticle();
  720. });
  721. } else {
  722. createDocument(_this.docAttr).then((res) => {
  723. if (res.status != 200) return; //保存文档
  724. _this.docAttr.id = res.data;
  725. _this.$alert("模版保存成功");
  726. _this.searchArticle();
  727. });
  728. }
  729. },
  730. //设置组件值
  731. onSetComs(e) {
  732. let _this = this;
  733. _this.coms = [...e];
  734. },
  735. onAddLayer(cateIndex, dataIndex) {
  736. let _this = this;
  737. let item = _this.categoryList[cateIndex].dataList[dataIndex];
  738. let data = {
  739. ...item,
  740. attrs: JSON.parse(item.attrs),
  741. };
  742. delete data.category;
  743. _this.coms.push(data);
  744. _this.comIndex = _this.coms.length - 1;
  745. },
  746. //处理插入事件
  747. onInsert(e) {
  748. let _this = this;
  749. switch (e.key) {
  750. case "article": //插入图文
  751. _this.insertArticle();
  752. break;
  753. case "table": //插入图表
  754. _this.insertTable();
  755. break;
  756. case "sourceData": //插入原数据
  757. _this.insertSourceData(e);
  758. break;
  759. case "formual": //插入公式
  760. _this.insertFormual(e);
  761. break;
  762. case "constant": //插入常量
  763. _this.insertConstant(e);
  764. break;
  765. case "variable": //插入变量
  766. _this.insertVariable(e);
  767. break;
  768. case "pager": //插入分页符
  769. _this.insertPager();
  770. break;
  771. case "attr":
  772. this.insertProductAttr();
  773. break;
  774. case "Directory": //插入主题
  775. _this.insertDirectory();
  776. break;
  777. case "addNew": //插入新记录
  778. _this.insertNew(e);
  779. break;
  780. case "ai": //插入ai
  781. _this.insertAI(e);
  782. break;
  783. }
  784. },
  785. /* 插入ai */
  786. insertAI(e) {
  787. let _this = this;
  788. if (_this.comIndex < 0) {
  789. _this.$alert("请选择插入图层");
  790. return false;
  791. }
  792. let com = _this.coms[_this.comIndex];
  793. let data = {
  794. type: "ai",
  795. id: "ai" + (com.attrs.length + 1),
  796. dataId: "",
  797. name: "AI",
  798. intro: "插入AI",
  799. content: e.content.result,
  800. search: e.content.searchTerm,
  801. };
  802. com.attrs.push(data);
  803. console.log(com.attrs);
  804. if (com.type == "TextArea") {
  805. //如果是图文,更新内容
  806. _this.insertCmd = {
  807. content: "{{" + data.id + "}}",
  808. };
  809. }
  810. },
  811. insertProductAttr() {
  812. if (this.docAttr.linkProduct.length <= 0) {
  813. this.$alert("请选择文档关联商品信息");
  814. return false;
  815. }
  816. this.showProductAttr = true;
  817. },
  818. //插入目录
  819. insertDirectory(e) {
  820. let _this = this;
  821. if (_this.comIndex < 0) {
  822. _this.$alert("请选择插入图层");
  823. return false;
  824. }
  825. console.log(e);
  826. let com = _this.coms[_this.comIndex];
  827. console.log("com:", com);
  828. let data = {
  829. type: "Directory",
  830. id: "Directory" + (com.attrs.length + 1),
  831. name: "目录信息",
  832. intor: "目录信息",
  833. content: "",
  834. };
  835. com.attrs.push(data);
  836. _this.insertCmd = {
  837. content: "<div>{{" + data.id + "}}</div>",
  838. };
  839. // com.content+='{{'+data.id+'}}';
  840. },
  841. onInsertProductAttr(e) {
  842. let _this = this;
  843. this.showProductAttr = false;
  844. if (_this.comIndex < 0) {
  845. _this.$alert("请选择插入图层");
  846. return false;
  847. }
  848. let com = _this.coms[_this.comIndex];
  849. let data = {
  850. type: "ProductAttr",
  851. id: "ProductAttr" + (com.attrs.length + 1),
  852. dataId: e.id,
  853. name: "商品属性",
  854. intor: "商品属性",
  855. content: "",
  856. attrs: e,
  857. };
  858. com.attrs.push(data);
  859. _this.insertCmd = {
  860. content: "{{" + data.id + "}}",
  861. };
  862. },
  863. //插入新记录
  864. insertNew(e) {
  865. let _this = this;
  866. _this.coms.push(e);
  867. },
  868. //插入分页
  869. insertPager() {
  870. let _this = this;
  871. if (_this.comIndex < 0) {
  872. _this.$alert("请选择插入图层");
  873. return false;
  874. }
  875. let com = _this.coms[_this.comIndex];
  876. let data = {
  877. type: "pager",
  878. id: "pager" + (com.attrs.length + 1),
  879. name: "分页符",
  880. intor: "强制分页",
  881. content: "",
  882. };
  883. com.attrs.push(data);
  884. if (com.type == "TextArea") {
  885. //如果是图文,更新内容
  886. _this.insertCmd = {
  887. content: "<div>{{" + data.id + "}}</div>",
  888. };
  889. }
  890. },
  891. //插入图文
  892. insertArticle() {
  893. let _this = this;
  894. _this.coms.push({
  895. type: "TextArea",
  896. lay_id: "textArea",
  897. code: "模块名",
  898. name: "图文",
  899. intro: "图文介绍",
  900. isEdit: 2,
  901. content: "请填写内容",
  902. attrs: [],
  903. });
  904. _this.comIndex = _this.coms.length - 1;
  905. },
  906. //插入表格
  907. insertTable() {
  908. let _this = this;
  909. _this.coms.push({
  910. type: "Table",
  911. lay_id: "Table",
  912. code: "模块名",
  913. name: "图表名称",
  914. intro: "图表介绍",
  915. isEdit: 2,
  916. tableHeader: this.initTableHeader(),
  917. tableData: [{}],
  918. htmlData: "",
  919. attrs: [],
  920. });
  921. _this.comIndex = _this.coms.length - 1;
  922. },
  923. initTableHeader() {
  924. var start = 65;
  925. var data = [];
  926. for (var i = start; i <= start + 25; i++) {
  927. data.push(String.fromCharCode(i));
  928. }
  929. return data;
  930. },
  931. //插入变量
  932. insertConstant(e) {
  933. let _this = this;
  934. // console.log("insertconstant");
  935. if (_this.comIndex < 0) {
  936. _this.$alert("请选择插入图层");
  937. return false;
  938. }
  939. let com = _this.coms[_this.comIndex];
  940. let data = {
  941. type: "constant",
  942. id: e.content.code + (com.attrs.length + 1),
  943. dataId: e.id,
  944. name: e.content.code,
  945. intro: e.content.intro,
  946. content: e.content.value,
  947. data: e.content,
  948. };
  949. com.attrs.push(data);
  950. if (com.type == "TextArea") {
  951. //如果是图文,更新内容
  952. _this.insertCmd = {
  953. content: "{{" + data.id + "}}",
  954. };
  955. } else {
  956. //仅对图表中插入有效
  957. if (_this.comIndex >= 0) {
  958. _this.setTableData(data.id);
  959. }
  960. }
  961. },
  962. //插入变量
  963. insertVariable(e) {
  964. let _this = this;
  965. if (_this.comIndex < 0) {
  966. _this.$alert("请选择插入图层");
  967. return false;
  968. }
  969. let com = _this.coms[_this.comIndex];
  970. let data = {
  971. type: "variable",
  972. id: e.content.code + (com.attrs.length + 1),
  973. dataId: e.id,
  974. name: e.content.code,
  975. intro: e.content.intro,
  976. content: e.content.value,
  977. data: e.content,
  978. };
  979. com.attrs.push(data);
  980. if (com.type == "TextArea") {
  981. //如果是图文,更新内容
  982. _this.insertCmd = {
  983. content: "{{" + data.id + "}}",
  984. };
  985. } else {
  986. //仅对图表中插入有效
  987. if (_this.comIndex >= 0) {
  988. debugger;
  989. _this.setTableData(data.id);
  990. }
  991. }
  992. },
  993. //插入原数据
  994. insertSourceData(e) {
  995. debugger;
  996. let _this = this;
  997. if (_this.comIndex < 0) {
  998. _this.$alert("请选择插入图层");
  999. return false;
  1000. }
  1001. let com = _this.coms[_this.comIndex];
  1002. let data = {
  1003. type: "sourceData",
  1004. id: "sourceData" + (com.attrs.length + 1),
  1005. dataId: "",
  1006. name: "源数据",
  1007. intro: "插入源数据",
  1008. formula:
  1009. "[R][" +
  1010. e.content.tb +
  1011. "][" +
  1012. e.content.sheet +
  1013. "][" +
  1014. e.content.r +
  1015. "," +
  1016. e.content.c +
  1017. "]",
  1018. content: e.content.value,
  1019. data: e.content,
  1020. };
  1021. com.attrs.push(data);
  1022. if (com.type == "TextArea") {
  1023. //如果是图文,更新内容
  1024. _this.insertCmd = {
  1025. content: "{{" + data.id + "}}",
  1026. };
  1027. }
  1028. },
  1029. //插入公式
  1030. insertFormual(e) {
  1031. let _this = this;
  1032. if (_this.comIndex < 0) {
  1033. _this.$alert("请选择插入图层");
  1034. return false;
  1035. }
  1036. let com = _this.coms[_this.comIndex];
  1037. let data = {
  1038. type: "formual",
  1039. id: "formual" + (com.attrs.length + 1),
  1040. dataId: e.id,
  1041. name: e.content.name,
  1042. intro: e.content.intro,
  1043. formula: e.content.formula,
  1044. content: 0,
  1045. data: e.content,
  1046. };
  1047. com.attrs.push(data);
  1048. if (com.type == "TextArea") {
  1049. //如果是图文,更新内容
  1050. _this.insertCmd = {
  1051. content: "{{" + data.id + "}}",
  1052. };
  1053. } else {
  1054. //仅对图表中插入有效
  1055. if (_this.comIndex >= 0) {
  1056. // _this.setTableData(data.id);
  1057. }
  1058. }
  1059. },
  1060. //获取模板分类信息
  1061. async initCategoryList() {
  1062. let _this = this;
  1063. /* let res = await getAllCategory({list:1 });
  1064. if(res.status!=200)return;
  1065. let dataList=res.data;
  1066. for(var i=0;i<dataList.length;i++){
  1067. for (var j=0;j<dataList[i].children.length;j++){
  1068. let dataId=dataList[i].children[j].id;
  1069. for(var k=0;k<dataList[i].children[j].dataList.length;k++){
  1070. dataList[i].children[j].dataList[k].attrs=JSON.parse(dataList[i].children[j].dataList[k].attrs)
  1071. }
  1072. // dataList[i].children[j].dataList=await _this.getTemplateList(dataId)
  1073. }
  1074. }
  1075. // console.log("dataList",dataList)
  1076. _this.categoryList=dataList; */
  1077. let res = await searchTemplateCategory({
  1078. page: 1,
  1079. pageSize: 99,
  1080. parent_id: 0,
  1081. status: 5,
  1082. });
  1083. if (res.status != 200) return;
  1084. _this.categoryList = res.data.dataList;
  1085. for (var i = 0; i < _this.categoryList.length; i++) {
  1086. _this.categoryList[i].dataList = await _this.getTemplateList(
  1087. _this.categoryList[i].id
  1088. );
  1089. }
  1090. },
  1091. //获取模板列表
  1092. async getTemplateList(categoryId) {
  1093. let _this = this;
  1094. let res = await searchTemplate({
  1095. page: 1,
  1096. pageSize: 999,
  1097. category_id: categoryId,
  1098. status: 5,
  1099. });
  1100. if (res.status != 200) return [];
  1101. let dataList = res.data.dataList.map((item) => {
  1102. item.attrs = JSON.parse(item.attrs);
  1103. return item;
  1104. });
  1105. return dataList;
  1106. },
  1107. //获取文档列表
  1108. searchArticle() {
  1109. let _this = this;
  1110. searchDocument({
  1111. page: 1,
  1112. pageSize: 99,
  1113. }).then((res) => {
  1114. if (res.status != 200) return;
  1115. _this.articleList = res.data.dataList.filter(
  1116. (el) => el.is_template == 0
  1117. );
  1118. _this.templateList = res.data.dataList.filter(
  1119. (el) => el.is_template == 1
  1120. );
  1121. });
  1122. },
  1123. },
  1124. };
  1125. </script>
  1126. <style lang="scss">
  1127. @import "./create.scss";
  1128. </style>