123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245 |
- <template>
- <div class="template-textarea">
- <div class="rich-editor" v-html="replaceData(com.content)"></div>
- </div>
- </template>
- <script>
- // import CKEditor from "ckeditor4-vue";
- import { findData } from "@/api/sourceData";
- export default {
- name: "app",
- emits: ["onUpdateData"],
- compnents: {
- // ckeditor: CKEditor.component
- },
- props: {
- coms: {
- type: Array,
- default: () => {
- return [];
- },
- },
- currentIndex: {
- type: Number,
- default: 0,
- },
- com: {
- type: Object,
- default: null,
- },
- },
- watch: {
- com: {
- handler(val) {
- console.log("val", val);
- /* let _this = this;
- if (val == null) return;
- if (val.content == undefined || val.content == null) return;
- _this.replaceData(val.content).then((res) => {
- _this.content = res;
- _this.$emit("onUpdateData", this.currentIndex, res);
- }); */
- },
- immediate: true,
- deep: true,
- },
- },
- data() {
- return {
- content: "",
- };
- },
- methods: {
- replaceData(data) {
- for (var i = 0; i < this.com.attrs.length; i++) {
- let attrId = this.com.attrs[i].id;
- if (this.com.attrs[i].type == "variable") {
- //全局变量
- data = data.replace(
- "{{" + this.com.attrs[i].id + "}}",
- '<input type="text" class="text-input-box" value="' +
- this.com.attrs[i].content +
- '">'
- );
- } else if (this.com.attrs[i].type == "Directory") {
- //处理目录
- data = data.replace(
- "<p>{{" + attrId + "}}</p>",
- "<h1>" + this.com.attrs[i].content + "</h1>"
- );
- data = data.replace(
- "<div>{{" + attrId + "}}</div>",
- "<h1>" + this.com.attrs[i].content + "</h1>"
- );
- data = data.replace(
- "<span>{{" + attrId + "}}</span>",
- "<h1>" + this.com.attrs[i].content + "</h1>"
- );
- } else {
- data = data.replace(
- "{{" + this.com.attrs[i].id + "}}",
- this.com.attrs[i].content
- );
- }
- }
- return data;
- },
- /* async replaceData(data) {
- let _this = this;
- for (var i = 0; i < _this.com.attrs.length; i++) {
- let attrId = _this.com.attrs[i].id;
- if (_this.com.attrs[i].type == "formula") {
- let formula = await _this.analysisformula(_this.com.attrs[i]);
- formula = await _this.getRemote(formula);
- let evalResult = eval(formula);
- if (!isNaN(evalResult)) {
- data = data.replace("{{" + attrId + "}}", evalResult);
- }
- } else if (_this.com.attrs[i].type == "sourceData") {
- let result = await _this.getRemote1(_this.com.attrs[i].formula);
- if (!isNaN(result)) {
- data = data.replace("{{" + attrId + "}}", result);
- }
- } else if (_this.com.attrs[i].type == "Directory") {
- //处理目录
- data = data.replace(
- "<p>{{" + attrId + "}}</p>",
- "<h1>" + _this.com.attrs[i].content + "</h1>"
- );
- data = data.replace(
- "<div>{{" + attrId + "}}</div>",
- "<h1>" + _this.com.attrs[i].content + "</h1>"
- );
- data = data.replace(
- "<span>{{" + attrId + "}}</span>",
- "<h1>" + _this.com.attrs[i].content + "</h1>"
- );
- } else {
- data = data.replace("{{" + attrId + "}}", _this.com.attrs[i].content);
- }
- }
- return data;
- }, */
- //分析公式
- async analysisformula(attrs) {
- let _this = this;
- var pattern = /(\[.*?\]){3}/;
- var formula = attrs.formula;
- var reg = new RegExp(pattern);
- while (true) {
- var items = formula.match(reg);
- if (items == null) break;
- let itemName = items[0];
- let data = await _this.getformulaData(itemName);
- data = await _this.getRemote(data);
- formula = formula.replace(itemName, "(" + parseFloat(data) + ")");
- }
- return formula;
- },
- async getformulaData(formulaItem) {
- let _this = this;
- var pattern = /\[(.*?)\]\[(.*?)\]\[(.*?)\]/;
- var reg = new RegExp(pattern);
- let items = formulaItem.match(reg);
- let calResult = 0;
- if (items[1] == "T") {
- //表示本地模板数据
- calResult = await _this.getModuleData(items[2], items[3]);
- }
- return calResult;
- },
- async getRemote(formula) {
- let _this = this;
- var pattern = /\[(.*?)\]\[(.*?)\]\[(.*?)\]\[(.*?)\]/;
- var reg = new RegExp(pattern);
- while (true) {
- let items = formula.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];
- formula = formula.replace(
- itemName,
- "(" + parseFloat(calResult) + ")"
- );
- }
- }
- return formula;
- },
- async getRemote1(formula) {
- let _this = this;
- var pattern = /\[(.*?)\]\[(.*?)\]\[(.*?)\]\[(.*?)\]/;
- var reg = new RegExp(pattern);
- while (true) {
- let items = formula.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];
- formula = formula.replace(itemName, parseFloat(calResult));
- }
- }
- return formula;
- },
- //获取远程数据
- async getRemoteData(code, sheet, row, col) {
- debugger;
- let _this = this;
- let result = 0;
- let par = {
- code: code,
- sheetName: sheet,
- row: row,
- col: col,
- };
- let res = await findData(par);
- if (res.status == 200) {
- console.log("result:", res.data);
- let dataResult = parseFloat(res.data.result);
- if (!isNaN(dataResult)) {
- return dataResult;
- }
- }
- return 0;
- },
- //获取本地文档模块数据
- async getModuleData(code, attrName) {
- let _this = this;
- let item = _this.coms.filter((o) => o.code == code);
- if (item.length > 0) {
- let attr = item[0].attrs.filter((o) => o.name == attrName);
- if (attr.length > 0) {
- let content = parseFloat(attr[0].content);
- if (!isNaN(content)) {
- return content;
- }
- }
- }
- return 0;
- },
- },
- };
- </script>
- <style lang="scss">
- @import "./index.scss";
- </style>
|