|
@@ -30,6 +30,7 @@
|
|
<script>
|
|
<script>
|
|
// import CKEditor from "ckeditor4-vue";
|
|
// import CKEditor from "ckeditor4-vue";
|
|
import { findData } from "@/api/sourceData";
|
|
import { findData } from "@/api/sourceData";
|
|
|
|
+import { data } from "jquery";
|
|
export default {
|
|
export default {
|
|
name: "app",
|
|
name: "app",
|
|
emits: ["onUpdate", "onUpdateAttr", "onUpdateProdAttr"],
|
|
emits: ["onUpdate", "onUpdateAttr", "onUpdateProdAttr"],
|
|
@@ -85,11 +86,11 @@ export default {
|
|
if (val == null) return;
|
|
if (val == null) return;
|
|
if (val.content == undefined || val.content == null) return;
|
|
if (val.content == undefined || val.content == null) return;
|
|
try {
|
|
try {
|
|
- console.log("com",val);
|
|
|
|
let res = await _this.replaceData(val.content);
|
|
let res = await _this.replaceData(val.content);
|
|
_this.content = res;
|
|
_this.content = res;
|
|
_this.$nextTick(() => {
|
|
_this.$nextTick(() => {
|
|
_this.bindEvents();
|
|
_this.bindEvents();
|
|
|
|
+ _this.initializeInputWidths();
|
|
});
|
|
});
|
|
} catch (error) {
|
|
} catch (error) {
|
|
console.error("处理 com 时出错:", error);
|
|
console.error("处理 com 时出错:", error);
|
|
@@ -134,7 +135,11 @@ export default {
|
|
focusedInputId: null,
|
|
focusedInputId: null,
|
|
};
|
|
};
|
|
},
|
|
},
|
|
- mounted() {},
|
|
|
|
|
|
+ mounted() {
|
|
|
|
+ this.$nextTick(() => {
|
|
|
|
+ this.initializeInputWidths();
|
|
|
|
+ });
|
|
|
|
+ },
|
|
// 记得在组件销毁时移除事件监听器
|
|
// 记得在组件销毁时移除事件监听器
|
|
beforeDestroy() {
|
|
beforeDestroy() {
|
|
this.$el.removeEventListener("input", this.handleInputChange);
|
|
this.$el.removeEventListener("input", this.handleInputChange);
|
|
@@ -187,7 +192,7 @@ export default {
|
|
attrId +
|
|
attrId +
|
|
'" data-index="' +
|
|
'" data-index="' +
|
|
i +
|
|
i +
|
|
- '" class="text-input-box" value="' +
|
|
|
|
|
|
+ '" class="text-input-box auto-width" value="' +
|
|
_this.com.attrs[i].content +
|
|
_this.com.attrs[i].content +
|
|
'">'
|
|
'">'
|
|
);
|
|
);
|
|
@@ -244,10 +249,11 @@ export default {
|
|
//// console.log('attrs',_this.com.attrs[i]);
|
|
//// console.log('attrs',_this.com.attrs[i]);
|
|
//处理计算公式 不处理
|
|
//处理计算公式 不处理
|
|
let formual = await _this.analysisFormual(_this.com.attrs[i]);
|
|
let formual = await _this.analysisFormual(_this.com.attrs[i]);
|
|
-
|
|
|
|
|
|
+ let point= _this.com.attrs[i].data.point
|
|
formual = await _this.getRemote(formual);
|
|
formual = await _this.getRemote(formual);
|
|
- _this.com.attrs[i].content = eval(formual);
|
|
|
|
- data = data.replace("{{" + attrId + "}}", eval(formual));
|
|
|
|
|
|
+
|
|
|
|
+ _this.com.attrs[i].content = eval(formual).toFixed(point);
|
|
|
|
+ data = data.replace("{{" + attrId + "}}", eval(formual).toFixed(point));
|
|
|
|
|
|
/* let formual = await _this.analysisFormual(_this.com.attrs[i]);
|
|
/* let formual = await _this.analysisFormual(_this.com.attrs[i]);
|
|
formual = await _this.getRemote(formual);
|
|
formual = await _this.getRemote(formual);
|
|
@@ -276,17 +282,17 @@ export default {
|
|
const precedingTag = precedingText.match(/<([^>]+)>$/);
|
|
const precedingTag = precedingText.match(/<([^>]+)>$/);
|
|
const followingCloseTag = followingText.match(/^<\/([^>]+)>/);
|
|
const followingCloseTag = followingText.match(/^<\/([^>]+)>/);
|
|
|
|
|
|
- if (
|
|
|
|
|
|
+ // If it's inside matching tags, replace the entire element
|
|
|
|
+ return `<h1>${directoryContent}</h1>`;
|
|
|
|
+ /* if (
|
|
precedingTag &&
|
|
precedingTag &&
|
|
followingCloseTag &&
|
|
followingCloseTag &&
|
|
precedingTag[1] === followingCloseTag[1]
|
|
precedingTag[1] === followingCloseTag[1]
|
|
) {
|
|
) {
|
|
- // If it's inside matching tags, replace the entire element
|
|
|
|
- return `<h1>${directoryContent}</h1>`;
|
|
|
|
} else {
|
|
} else {
|
|
// Otherwise, just replace the placeholder
|
|
// Otherwise, just replace the placeholder
|
|
return directoryContent;
|
|
return directoryContent;
|
|
- }
|
|
|
|
|
|
+ } */
|
|
});
|
|
});
|
|
//处理目录
|
|
//处理目录
|
|
/* data = data.replace(
|
|
/* data = data.replace(
|
|
@@ -315,14 +321,40 @@ export default {
|
|
}
|
|
}
|
|
this.$nextTick(() => {
|
|
this.$nextTick(() => {
|
|
this.addInputListeners();
|
|
this.addInputListeners();
|
|
|
|
+ this.initializeInputWidths();
|
|
});
|
|
});
|
|
return data;
|
|
return data;
|
|
},
|
|
},
|
|
addInputListeners() {
|
|
addInputListeners() {
|
|
// 使用事件委托来处理所有的 .text-input-box 元素
|
|
// 使用事件委托来处理所有的 .text-input-box 元素
|
|
this.$el.addEventListener("blur", this.handleInputChange, true);
|
|
this.$el.addEventListener("blur", this.handleInputChange, true);
|
|
|
|
+ this.$el.addEventListener("input", this.adjustInputWidth, true);
|
|
|
|
+ },
|
|
|
|
+ initializeInputWidths() {
|
|
|
|
+ const inputs = this.$el.querySelectorAll(".text-input-box");
|
|
|
|
+ inputs.forEach((input) => this.adjustInputWidth({ target: input }));
|
|
},
|
|
},
|
|
|
|
|
|
|
|
+ adjustInputWidth(event) {
|
|
|
|
+ if (event.target.classList.contains("text-input-box")) {
|
|
|
|
+ const input = event.target;
|
|
|
|
+ const sizeCalculator = document.createElement("span");
|
|
|
|
+ sizeCalculator.className = "size-calculator";
|
|
|
|
+ sizeCalculator.textContent = input.value || input.placeholder || "0";
|
|
|
|
+ document.body.appendChild(sizeCalculator);
|
|
|
|
+
|
|
|
|
+ const styles = window.getComputedStyle(input);
|
|
|
|
+ sizeCalculator.style.font = styles.font;
|
|
|
|
+ sizeCalculator.style.fontSize = styles.fontSize;
|
|
|
|
+ sizeCalculator.style.fontWeight = styles.fontWeight;
|
|
|
|
+ sizeCalculator.style.letterSpacing = styles.letterSpacing;
|
|
|
|
+
|
|
|
|
+ const width = sizeCalculator.offsetWidth;
|
|
|
|
+ input.style.width = `${width + 10}px`; // Add some padding
|
|
|
|
+
|
|
|
|
+ document.body.removeChild(sizeCalculator);
|
|
|
|
+ }
|
|
|
|
+ },
|
|
handleInputChange(event) {
|
|
handleInputChange(event) {
|
|
if (event.target.classList.contains("text-input-box")) {
|
|
if (event.target.classList.contains("text-input-box")) {
|
|
const attrId = event.target.id;
|
|
const attrId = event.target.id;
|
|
@@ -392,7 +424,7 @@ export default {
|
|
let itemName = items[0];
|
|
let itemName = items[0];
|
|
// console.log("处理项:", itemName);
|
|
// console.log("处理项:", itemName);
|
|
try {
|
|
try {
|
|
- let data = await _this.getFormualData(itemName);
|
|
|
|
|
|
+ let data = await _this.getFormualData(itemName,attrs.data);
|
|
// console.log(`获取到的数据: ${itemName} = ${data}`);
|
|
// console.log(`获取到的数据: ${itemName} = ${data}`);
|
|
if (data === null || data === undefined || isNaN(data)) {
|
|
if (data === null || data === undefined || isNaN(data)) {
|
|
console.warn(`获取到的数据无效: ${itemName}`);
|
|
console.warn(`获取到的数据无效: ${itemName}`);
|
|
@@ -405,11 +437,11 @@ export default {
|
|
formual = formual.replace(itemName, "(0)");
|
|
formual = formual.replace(itemName, "(0)");
|
|
}
|
|
}
|
|
}
|
|
}
|
|
- // console.log("分析后的公式:", formual);
|
|
|
|
|
|
+ /* console.log("分析后的公式:", formual); */
|
|
return formual;
|
|
return formual;
|
|
},
|
|
},
|
|
|
|
|
|
- async getFormualData(formualItem) {
|
|
|
|
|
|
+ async getFormualData(formualItem,data) {
|
|
let _this = this;
|
|
let _this = this;
|
|
// console.log("开始获取公式数据:", formualItem);
|
|
// console.log("开始获取公式数据:", formualItem);
|
|
var pattern = /\[(.*?)\]\[(.*?)\]\[(.*?)\]/;
|
|
var pattern = /\[(.*?)\]\[(.*?)\]\[(.*?)\]/;
|
|
@@ -422,7 +454,7 @@ export default {
|
|
} else {
|
|
} else {
|
|
console.warn("无法解析公式项:", formualItem);
|
|
console.warn("无法解析公式项:", formualItem);
|
|
}
|
|
}
|
|
- // console.log("计算结果:", calResult);
|
|
|
|
|
|
+ /* console.log("计算结果:", formualItem,data); */
|
|
return calResult;
|
|
return calResult;
|
|
},
|
|
},
|
|
|
|
|
|
@@ -644,4 +676,19 @@ export default {
|
|
width: 80%; // Adjust as needed
|
|
width: 80%; // Adjust as needed
|
|
color: inherit; // Ensure the color remains unchanged
|
|
color: inherit; // Ensure the color remains unchanged
|
|
}
|
|
}
|
|
|
|
+.auto-width-wrapper {
|
|
|
|
+ display: inline-block;
|
|
|
|
+ position: relative;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.size-calculator {
|
|
|
|
+ position: absolute;
|
|
|
|
+ top: -9999px;
|
|
|
|
+ left: -9999px;
|
|
|
|
+ white-space: pre;
|
|
|
|
+ font-family: inherit;
|
|
|
|
+ font-size: inherit;
|
|
|
|
+ font-weight: inherit;
|
|
|
|
+ padding: 2px 4px;
|
|
|
|
+}
|
|
</style>
|
|
</style>
|