index.vue 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245
  1. <template>
  2. <div class="template-textarea">
  3. <div class="rich-editor" v-html="replaceData(com.content)"></div>
  4. </div>
  5. </template>
  6. <script>
  7. // import CKEditor from "ckeditor4-vue";
  8. import { findData } from "@/api/sourceData";
  9. export default {
  10. name: "app",
  11. emits: ["onUpdateData"],
  12. compnents: {
  13. // ckeditor: CKEditor.component
  14. },
  15. props: {
  16. coms: {
  17. type: Array,
  18. default: () => {
  19. return [];
  20. },
  21. },
  22. currentIndex: {
  23. type: Number,
  24. default: 0,
  25. },
  26. com: {
  27. type: Object,
  28. default: null,
  29. },
  30. },
  31. watch: {
  32. com: {
  33. handler(val) {
  34. console.log("val", val);
  35. /* let _this = this;
  36. if (val == null) return;
  37. if (val.content == undefined || val.content == null) return;
  38. _this.replaceData(val.content).then((res) => {
  39. _this.content = res;
  40. _this.$emit("onUpdateData", this.currentIndex, res);
  41. }); */
  42. },
  43. immediate: true,
  44. deep: true,
  45. },
  46. },
  47. data() {
  48. return {
  49. content: "",
  50. };
  51. },
  52. methods: {
  53. replaceData(data) {
  54. for (var i = 0; i < this.com.attrs.length; i++) {
  55. let attrId = this.com.attrs[i].id;
  56. if (this.com.attrs[i].type == "variable") {
  57. //全局变量
  58. data = data.replace(
  59. "{{" + this.com.attrs[i].id + "}}",
  60. '<input type="text" class="text-input-box" value="' +
  61. this.com.attrs[i].content +
  62. '">'
  63. );
  64. } else if (this.com.attrs[i].type == "Directory") {
  65. //处理目录
  66. data = data.replace(
  67. "<p>{{" + attrId + "}}</p>",
  68. "<h1>" + this.com.attrs[i].content + "</h1>"
  69. );
  70. data = data.replace(
  71. "<div>{{" + attrId + "}}</div>",
  72. "<h1>" + this.com.attrs[i].content + "</h1>"
  73. );
  74. data = data.replace(
  75. "<span>{{" + attrId + "}}</span>",
  76. "<h1>" + this.com.attrs[i].content + "</h1>"
  77. );
  78. } else {
  79. data = data.replace(
  80. "{{" + this.com.attrs[i].id + "}}",
  81. this.com.attrs[i].content
  82. );
  83. }
  84. }
  85. return data;
  86. },
  87. /* async replaceData(data) {
  88. let _this = this;
  89. for (var i = 0; i < _this.com.attrs.length; i++) {
  90. let attrId = _this.com.attrs[i].id;
  91. if (_this.com.attrs[i].type == "formula") {
  92. let formula = await _this.analysisformula(_this.com.attrs[i]);
  93. formula = await _this.getRemote(formula);
  94. let evalResult = eval(formula);
  95. if (!isNaN(evalResult)) {
  96. data = data.replace("{{" + attrId + "}}", evalResult);
  97. }
  98. } else if (_this.com.attrs[i].type == "sourceData") {
  99. let result = await _this.getRemote1(_this.com.attrs[i].formula);
  100. if (!isNaN(result)) {
  101. data = data.replace("{{" + attrId + "}}", result);
  102. }
  103. } else if (_this.com.attrs[i].type == "Directory") {
  104. //处理目录
  105. data = data.replace(
  106. "<p>{{" + attrId + "}}</p>",
  107. "<h1>" + _this.com.attrs[i].content + "</h1>"
  108. );
  109. data = data.replace(
  110. "<div>{{" + attrId + "}}</div>",
  111. "<h1>" + _this.com.attrs[i].content + "</h1>"
  112. );
  113. data = data.replace(
  114. "<span>{{" + attrId + "}}</span>",
  115. "<h1>" + _this.com.attrs[i].content + "</h1>"
  116. );
  117. } else {
  118. data = data.replace("{{" + attrId + "}}", _this.com.attrs[i].content);
  119. }
  120. }
  121. return data;
  122. }, */
  123. //分析公式
  124. async analysisformula(attrs) {
  125. let _this = this;
  126. var pattern = /(\[.*?\]){3}/;
  127. var formula = attrs.formula;
  128. var reg = new RegExp(pattern);
  129. while (true) {
  130. var items = formula.match(reg);
  131. if (items == null) break;
  132. let itemName = items[0];
  133. let data = await _this.getformulaData(itemName);
  134. data = await _this.getRemote(data);
  135. formula = formula.replace(itemName, "(" + parseFloat(data) + ")");
  136. }
  137. return formula;
  138. },
  139. async getformulaData(formulaItem) {
  140. let _this = this;
  141. var pattern = /\[(.*?)\]\[(.*?)\]\[(.*?)\]/;
  142. var reg = new RegExp(pattern);
  143. let items = formulaItem.match(reg);
  144. let calResult = 0;
  145. if (items[1] == "T") {
  146. //表示本地模板数据
  147. calResult = await _this.getModuleData(items[2], items[3]);
  148. }
  149. return calResult;
  150. },
  151. async getRemote(formula) {
  152. let _this = this;
  153. var pattern = /\[(.*?)\]\[(.*?)\]\[(.*?)\]\[(.*?)\]/;
  154. var reg = new RegExp(pattern);
  155. while (true) {
  156. let items = formula.match(reg);
  157. if (items == null) break;
  158. if (items[1] == "R") {
  159. //表示获取远程数据
  160. var dataIndex = items[4];
  161. dataIndex = items[4].split(",");
  162. let calResult = await _this.getRemoteData(
  163. items[2],
  164. items[3],
  165. dataIndex[0],
  166. dataIndex[1]
  167. );
  168. let itemName = items[0];
  169. formula = formula.replace(
  170. itemName,
  171. "(" + parseFloat(calResult) + ")"
  172. );
  173. }
  174. }
  175. return formula;
  176. },
  177. async getRemote1(formula) {
  178. let _this = this;
  179. var pattern = /\[(.*?)\]\[(.*?)\]\[(.*?)\]\[(.*?)\]/;
  180. var reg = new RegExp(pattern);
  181. while (true) {
  182. let items = formula.match(reg);
  183. if (items == null) break;
  184. if (items[1] == "R") {
  185. //表示获取远程数据
  186. var dataIndex = items[4];
  187. dataIndex = items[4].split(",");
  188. let calResult = await _this.getRemoteData(
  189. items[2],
  190. items[3],
  191. dataIndex[0],
  192. dataIndex[1]
  193. );
  194. let itemName = items[0];
  195. formula = formula.replace(itemName, parseFloat(calResult));
  196. }
  197. }
  198. return formula;
  199. },
  200. //获取远程数据
  201. async getRemoteData(code, sheet, row, col) {
  202. debugger;
  203. let _this = this;
  204. let result = 0;
  205. let par = {
  206. code: code,
  207. sheetName: sheet,
  208. row: row,
  209. col: col,
  210. };
  211. let res = await findData(par);
  212. if (res.status == 200) {
  213. console.log("result:", res.data);
  214. let dataResult = parseFloat(res.data.result);
  215. if (!isNaN(dataResult)) {
  216. return dataResult;
  217. }
  218. }
  219. return 0;
  220. },
  221. //获取本地文档模块数据
  222. async getModuleData(code, attrName) {
  223. let _this = this;
  224. let item = _this.coms.filter((o) => o.code == code);
  225. if (item.length > 0) {
  226. let attr = item[0].attrs.filter((o) => o.name == attrName);
  227. if (attr.length > 0) {
  228. let content = parseFloat(attr[0].content);
  229. if (!isNaN(content)) {
  230. return content;
  231. }
  232. }
  233. }
  234. return 0;
  235. },
  236. },
  237. };
  238. </script>
  239. <style lang="scss">
  240. @import "./index.scss";
  241. </style>