|
@@ -1,182 +1,224 @@
|
|
|
<template>
|
|
|
- <div class="template-textarea">
|
|
|
- <div class="rich-editor" v-html="content"></div>
|
|
|
- </div>
|
|
|
+ <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
|
|
|
+// 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 [];
|
|
|
},
|
|
|
- props:{
|
|
|
-
|
|
|
- coms:{
|
|
|
- type:Array,
|
|
|
- default:()=>{
|
|
|
- return [];
|
|
|
- }
|
|
|
- },
|
|
|
- currentIndex:{
|
|
|
- type:Number,
|
|
|
- default:0,
|
|
|
- },
|
|
|
- com:{
|
|
|
- type:Object,
|
|
|
- default:null,
|
|
|
- }
|
|
|
+ },
|
|
|
+ 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);
|
|
|
+ }); */
|
|
|
},
|
|
|
- watch:{
|
|
|
- 'com':{
|
|
|
- handler(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:{
|
|
|
+ immediate: true,
|
|
|
+ deep: true,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ content: "",
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ replaceData(data){
|
|
|
+ for(var i=0;i<this.com.attrs.length;i++){
|
|
|
+ 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+'">');
|
|
|
|
|
|
- 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);
|
|
|
- data=data.replace("{{"+attrId+"}}",eval(formula));
|
|
|
- }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"){
|
|
|
- //处理目录
|
|
|
- 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>");
|
|
|
- // data=data.replace("{{"+attrId+"}}","<h1 style='font-size:18px;'>"+_this.com.attrs[i].content+"</h1>");
|
|
|
- }else{
|
|
|
- data=data.replace("{{"+attrId+"}}",_this.com.attrs[i].content);
|
|
|
- }
|
|
|
+ }else{
|
|
|
+ data=data.replace("{{"+this.com.attrs[i].id+"}}",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)+")");
|
|
|
- }
|
|
|
+ /* 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);
|
|
|
}
|
|
|
- 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));
|
|
|
- }
|
|
|
+ } 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);
|
|
|
}
|
|
|
- return formula;
|
|
|
- },
|
|
|
+ } 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 getRemoteData(code,sheet,row,col){
|
|
|
- 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);
|
|
|
- return res.data.result;
|
|
|
- }
|
|
|
- return 0;
|
|
|
- },
|
|
|
+ //分析公式
|
|
|
+ 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){
|
|
|
- return parseFloat(attr[0].content);
|
|
|
- }
|
|
|
+ //获取本地文档模块数据
|
|
|
+ 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;
|
|
|
- },
|
|
|
-
|
|
|
-
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
+ return 0;
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
</script>
|
|
|
<style lang="scss">
|
|
|
-@import './index.scss';
|
|
|
+@import "./index.scss";
|
|
|
</style>
|