|
@@ -1,11 +1,11 @@
|
|
|
<template>
|
|
|
<div class="template-textarea">
|
|
|
- <div class="rich-editor" v-html="replaceData(com.content)" @input="handleInput"></div>
|
|
|
+ <div class="rich-editor" v-html="processedContent"></div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-// import CKEditor from "ckeditor4-vue";
|
|
|
+import CKEditor from "ckeditor4-vue"; //@input="handleInput"
|
|
|
import { findData } from "@/api/sourceData";
|
|
|
export default {
|
|
|
name: "app",
|
|
@@ -32,7 +32,9 @@ export default {
|
|
|
watch: {
|
|
|
com: {
|
|
|
handler(val) {
|
|
|
- console.log("val", val);
|
|
|
+ if (val && val.content) {
|
|
|
+ this.updateProcessedContent();
|
|
|
+ }
|
|
|
/* let _this = this;
|
|
|
if (val == null) return;
|
|
|
if (val.content == undefined || val.content == null) return;
|
|
@@ -48,44 +50,203 @@ export default {
|
|
|
data() {
|
|
|
return {
|
|
|
content: "",
|
|
|
+ processedContent: "",
|
|
|
};
|
|
|
},
|
|
|
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}" @input="updateContent('${this.com.attrs[i].id}', $event)" id="${this.com.attrs[i].id}">`
|
|
|
- );
|
|
|
- } 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>"
|
|
|
- );
|
|
|
+ async updateProcessedContent() {
|
|
|
+ this.processedContent = await this.replaceData(this.com.content);
|
|
|
+ },
|
|
|
+ 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 == "variable") {
|
|
|
+ let item = _this.com.attrs[i];
|
|
|
+ if (item.data.value_type == 2) {
|
|
|
+ //多选
|
|
|
+ let dataItem = item.data.value_item.split(",");
|
|
|
+ let selectHtml =
|
|
|
+ '<select id="' +
|
|
|
+ attrId +
|
|
|
+ '" data-index="' +
|
|
|
+ i +
|
|
|
+ '" class="text-input-box">';
|
|
|
+ for (var l = 0; l < dataItem.length; l++) {
|
|
|
+ if (item.content == dataItem[l]) {
|
|
|
+ selectHtml +=
|
|
|
+ '<option value="' +
|
|
|
+ dataItem[l] +
|
|
|
+ '" selected>' +
|
|
|
+ dataItem[l] +
|
|
|
+ "</option>";
|
|
|
+ } else {
|
|
|
+ selectHtml +=
|
|
|
+ '<option value="' +
|
|
|
+ dataItem[l] +
|
|
|
+ '">' +
|
|
|
+ dataItem[l] +
|
|
|
+ "</option>";
|
|
|
+ }
|
|
|
+ }
|
|
|
+ selectHtml += "</select>";
|
|
|
+ data = data.replace("{{" + item.id + "}}", selectHtml);
|
|
|
+ } else {
|
|
|
+ //文本
|
|
|
+ data = data.replace(
|
|
|
+ "{{" + attrId + "}}",
|
|
|
+ /* `<input type="text" class="text-input-box" data-index="${i}" value="${_this.com.attrs[i].content}" @input="updateContent('${_this.com.attrs[i].id}', $event)" id="${attrId}">`, */
|
|
|
+ '<input type="text" ref="input_' +
|
|
|
+ attrId +
|
|
|
+ '" name="' +
|
|
|
+ _this.com.attrs[i].name +
|
|
|
+ '" id="' +
|
|
|
+ attrId +
|
|
|
+ '" data-index="' +
|
|
|
+ i +
|
|
|
+ '" class="text-input-box" value="' +
|
|
|
+ _this.com.attrs[i].content +
|
|
|
+ '">'
|
|
|
+ );
|
|
|
+ }
|
|
|
+ } else if (_this.com.attrs[i].type == "ProductAttr") {
|
|
|
+ //处理产品属性值
|
|
|
+ let item = _this.com.attrs[i];
|
|
|
+ let prodAttrId = item.id + "_" + i;
|
|
|
+ if (item.content == "") {
|
|
|
+ item.content = item.attrs.value;
|
|
|
+ }
|
|
|
+ if (item.attrs.type == 1) {
|
|
|
+ //输入框
|
|
|
+ data = data.replace(
|
|
|
+ "{{" + item.id + "}}",
|
|
|
+ '<input type="text" id="' +
|
|
|
+ prodAttrId +
|
|
|
+ '" data-index="' +
|
|
|
+ i +
|
|
|
+ '" class="text-input-box" value="' +
|
|
|
+ item.content +
|
|
|
+ '">'
|
|
|
+ );
|
|
|
+ } else {
|
|
|
+ //选择框
|
|
|
+ let dataItem = item.attrs.valueItems.split(",");
|
|
|
+ let selectHtml =
|
|
|
+ '<select id="' +
|
|
|
+ prodAttrId +
|
|
|
+ '" data-index="' +
|
|
|
+ i +
|
|
|
+ '" class="text-input-box">';
|
|
|
+ for (var l = 0; l < dataItem.length; l++) {
|
|
|
+ if (item.content == dataItem[l]) {
|
|
|
+ selectHtml +=
|
|
|
+ '<option value="' +
|
|
|
+ dataItem[l] +
|
|
|
+ '" selected>' +
|
|
|
+ dataItem[l] +
|
|
|
+ "</option>";
|
|
|
+ } else {
|
|
|
+ selectHtml +=
|
|
|
+ '<option value="' +
|
|
|
+ dataItem[l] +
|
|
|
+ '">' +
|
|
|
+ dataItem[l] +
|
|
|
+ "</option>";
|
|
|
+ }
|
|
|
+ }
|
|
|
+ selectHtml += "</select>";
|
|
|
+ data = data.replace("{{" + item.id + "}}", selectHtml);
|
|
|
+ }
|
|
|
+ } else if (_this.com.attrs[i].type == "formual") {
|
|
|
+ //// console.log('attrs',_this.com.attrs[i]);
|
|
|
+ //处理计算公式 不处理
|
|
|
+ let formual = await _this.analysisFormual(_this.com.attrs[i]);
|
|
|
+
|
|
|
+ formual = await _this.getRemote(formual);
|
|
|
+ _this.com.attrs[i].content = eval(formual);
|
|
|
+ data = data.replace("{{" + attrId + "}}", eval(formual));
|
|
|
+ } else if (_this.com.attrs[i].type == "sourceData") {
|
|
|
+ let result = await _this.getRemote1(_this.com.attrs[i].formula);
|
|
|
+ data = data.replace("{{" + attrId + "}}", result);
|
|
|
+ } else if (_this.com.attrs[i].type == "Directory") {
|
|
|
+ const directoryContent = _this.com.attrs[i].content;
|
|
|
+ const attrId = _this.com.attrs[i].id;
|
|
|
+
|
|
|
+ // Create a more flexible regex pattern
|
|
|
+ const directoryRegex = new RegExp(`{{\\s*${attrId}\\s*}}`, "g");
|
|
|
+
|
|
|
+ // Replace the content, preserving surrounding HTML tags
|
|
|
+ data = data.replace(directoryRegex, (match, offset, string) => {
|
|
|
+ // Check if the match is inside a tag
|
|
|
+ const precedingText = string.substring(0, offset);
|
|
|
+ const followingText = string.substring(offset + match.length);
|
|
|
+ const precedingTag = precedingText.match(/<([^>]+)>$/);
|
|
|
+ const followingCloseTag = followingText.match(/^<\/([^>]+)>/);
|
|
|
+
|
|
|
+ if (
|
|
|
+ precedingTag &&
|
|
|
+ followingCloseTag &&
|
|
|
+ precedingTag[1] === followingCloseTag[1]
|
|
|
+ ) {
|
|
|
+ // If it's inside matching tags, replace the entire element
|
|
|
+ return `<h1>${directoryContent}</h1>`;
|
|
|
+ } else {
|
|
|
+ // Otherwise, just replace the placeholder
|
|
|
+ return directoryContent;
|
|
|
+ }
|
|
|
+ });
|
|
|
} else {
|
|
|
- data = data.replace(
|
|
|
- "{{" + this.com.attrs[i].id + "}}",
|
|
|
- this.com.attrs[i].content
|
|
|
- );
|
|
|
+ //处理常量及其它
|
|
|
+ data = data.replace("{{" + attrId + "}}", _this.com.attrs[i].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)");
|
|
|
+ }
|
|
|
+ }
|
|
|
+ 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;
|
|
|
+ },
|
|
|
updateContent(id, event) {
|
|
|
- console.log(id,event);
|
|
|
- const attr = this.com.attrs.find(attr => attr.id === id);
|
|
|
+ const attr = this.com.attrs.find((attr) => attr.id === id);
|
|
|
if (attr) {
|
|
|
attr.content = event.target.value;
|
|
|
}
|
|
@@ -230,16 +391,22 @@ export default {
|
|
|
//获取本地文档模块数据
|
|
|
async getModuleData(code, attrName) {
|
|
|
let _this = this;
|
|
|
- let item = _this.coms.filter((o) => o.code == code);
|
|
|
+ // 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) {
|
|
|
- let content = parseFloat(attr[0].content);
|
|
|
- if (!isNaN(content)) {
|
|
|
- return content;
|
|
|
- }
|
|
|
+ // console.log(`返回的值:`, attr[0].content);
|
|
|
+ return parseFloat(attr[0].content);
|
|
|
}
|
|
|
}
|
|
|
+ // console.log("未找到匹配的模块或属性,返回 0");
|
|
|
return 0;
|
|
|
},
|
|
|
},
|