create.vue 29 KB

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