完善动态组件style的scoped方式

front/src/views/rpt_design/WidgetConfig.vue

@@ -92,6 +92,15 @@ export default {
       return prefix + result
     }
   },
+  watch:{
+    data(){
+      if(this.data.style==undefined)
+        this.data.style={}
+      if(this.data.style.height==undefined){
+        this.data.style.height="100%"
+      }
+    }
+  },
   data() {
     return {
       fields,

front/src/views/rpt_design/datasetManger2.vue

@@ -190,7 +190,6 @@
   </el-container>
           <span slot="footer" class="dialog-footer">
             <el-button @click="dialogVisible = false">取 消</el-button>
-            <el-button @click="print_json">print_json</el-button>
             <el-button type="primary" @click="handleSubmit">确 定</el-button>
         </span>
 </el-dialog>
@@ -246,7 +245,7 @@ export default {
         tableData(){
             if(this.action_target.report_result && getObjType(this.action_target.report_result)=="string")
                 this.action_target.report_result=JSON.parse(this.action_target.report_result)
-            let ret
+            let ret=[]
             try{
                 if(this.action_target._type=="csv" && this.action_target.get)
                 {
@@ -304,7 +303,7 @@ export default {
                         let data=JSON.parse( this.action_target.report_result.ds_dict[this.action_target.get])
                         ret=convert_array_to_json(data.data,0,-1,data.columns)
                     }
-                    else
+                    else if(this.action_target.report_result)
                         ret= json_by_path(this.action_target.report_result,this.action_target.get)
                     return ret
                 }

front/src/views/rpt_design/element/dyncTemplate.vue

@@ -1,5 +1,5 @@
 <template>
-	<div style="width:100%;height:100%"  v-if="old_content==cut_script_css_content" >
+	<div :id="'cr_dyn_id_'+context.mode+'_'+self.gridName" style="width:100%;height:100%"  v-if="old_content==cut_script_css_content" >
 		<RuntimeTemplateCompiler :template="cut_script_css_content" :parent="parentCompent"/>
 	</div>
 </template>

front/src/views/rpt_design/element/dyncTemplateMinxins.js

@@ -1,4 +1,4 @@
-import {seriesLoadScripts,load_css_js,extract_style_txt,extract_script_txt } from "../utils/util"
+import {seriesLoadScripts,load_css_js,insert_css_to_head,extract_style_txt,extract_script_txt,load_css_file } from "../utils/util"
 export default {
     provide(){
         let ret={
@@ -16,7 +16,7 @@ export default {
     data: () => ({
         parentCompent:this, 
         old_content:"",
-        cut_script_css_content:""
+        cut_script_css_content:"",
     }),
     mounted(){
         let _this=this
@@ -40,14 +40,29 @@ export default {
             return this.clickedEle
         }, 
     },
+    beforeDestroy(){
+        $("#"+this.self.gridName+"_css_"+this.context.mode).remove()
+    },
     methods:{
         refresh(){
             let _this=this 
-            let script_txt=load_css_js(_this.self.content,"cr_css_"+_this.self.gridName)
-            script_txt=script_txt.replace(/function\s*(\w+)\s*/,'_this.$1=_this.$options.methods.$1=function')
-            let style=extract_style_txt(_this.self.content)
+            let tmp=_this.self.content.replaceAll("dync_script>","script>")
+            let script_txt=extract_script_txt(tmp)
+            //https://github.com/JonWatkins/vue-runtime-template-compiler/blob/master/src/components/RuntimeTemplateCompiler.vue
+            script_txt=script_txt.replace(/function\s*(\w+)\s*/img,'_this.$1=_this.$options.methods.$1=function')
+            //^(\s*\.[-|\w]+\s*)((\s*\.[-|\w]+\s*)*\{[\s|\S]*?\})  '#cr_dyn_id_'+_this.self.gridName+' $1 $2'
+            let style=extract_style_txt(tmp).trim()
+            style=style.replace(/([^{]+)\{[\s|\S]*?\}/img,
+            function(t1,t2,t3,t4) {
+                return t2.trim().split(",").map(x=>'#cr_dyn_id_'+_this.context.mode+'_'+_this.self.gridName+" "+x).join() + t1.substring( t1.indexOf("{") ) +'\n'
+                //console.log(t1,t2,t3,t4)
+            }
+            ) 
             eval("(function(){\n"+script_txt+"\n})()")
-            _this.cut_script_css_content=_this.self.content.replace(/<script.*?>*?>([\s\S]*?)<\/script>/img,'')
+            if(style!=""){
+                insert_css_to_head(style,_this.self.gridName+"_css_"+_this.context.mode)
+            }
+            _this.cut_script_css_content=tmp.replace(/<script.*?>*?>([\s\S]*?)<\/script>/img,'')
                     .replace(/<style.*?>*?>([\s\S]*?)<\/style>/img,'')
             _this.old_content=''
             setTimeout(()=>{

front/src/views/rpt_design/manger.vue

@@ -155,7 +155,7 @@ export default {
                     {type: 'input',label: '标识', editDisabled:true,rules: [{required: true}],span: 12,formslot:true,display: true,prop: 'id'},
                     {type: 'input',label: '名称', rules: [{required: true}],span: 12,formslot:true,display: true,prop: 'name'},
                     {type: 'input',label: '管理员',editDisabled:this.userInfo.username!='admin', rules: [{required: true}],span: 12,formslot:true,display: true,prop: 'owner'},
-                    {type: 'input',label: '缺省页',editDisabled:this.userInfo.username!='admin', rules: [{required: true}],span: 12,formslot:true,display: true,prop: 'default_page'},
+                    {type: 'input',label: '缺省页',value:'default',editDisabled:this.userInfo.username!='admin', rules: [{required: true}],span: 12,formslot:true,display: true,prop: 'default_page'},
                     {type: 'input',label: '报表存放根路径',editDisabled:this.userInfo.username!='admin', rules: [{required: true}],span: 12,formslot:true,display: true,prop: 'report_path'},
                     {type: 'input',label: '协助管理人员', span: 12,formslot:true,display: true,prop: 'members'},
                     {type: 'input',label: '战报用户', span: 12,formslot:true,display: true,prop: 'zb_user'},
@@ -183,7 +183,7 @@ export default {
             login_tbl:[],
             user_obj:{},
             parsers:[],
-            data:{login_script:`var result=web_request({'url':'http://yzl.hn.clic/auth/user/login'  
+            data:{login_script:`var result=web_request({'url':'http://xxx.xxx.xxx/auth/user/login'  
             ,'method':'post','data':{'userid':userid,'password':password,'attrib':'mobile,phone,mail'} } );
 var json=eval('='+result);	
 return {'errcode':json.errcode,'message':json.errmsg, 'userid':json.userid,'username':json.username,'old_result':result};`,},

front/src/views/rpt_design/runApp.vue

@@ -13,8 +13,8 @@
     </el-popover>
 
     <div ref="form" v-if="!crisMobile && isShow && result.defaultsetting['show_form']=='true'"> 
-      <RuntimeTemplateCompiler  :template="result.pc_form"   v-if="result.pc_form" :parent="parentComponent">
-      </RuntimeTemplateCompiler>
+      <dyncTemplate  :self="{type:'pc_form',content:result.pc_form,gridName:'pc_form'}"  v-if="result.pc_form">
+      </dyncTemplate>
       <el-form :inline="true" v-else label-position="right" label-width="80px" >
         <input hidden v-for="one in result.form.filter(x=>x.hide=='True')" :key="one.name" v-model="queryForm[one.name]"/>
         <div style="display:inline;max-width:100px" v-for="one in result.form.filter(x=>x.hide=='False')" :key="one.name">
@@ -63,8 +63,8 @@
       </el-form>
     </div>
     <div  ref="form" v-if=" crisMobile && isShow && result.defaultsetting['show_form']=='true'"> 
-      <RuntimeTemplateCompiler  :template="result.mobile_form" v-if="result.mobile_form" :parent="parentComponent">
-      </RuntimeTemplateCompiler>
+      <dyncTemplate  :self="{type:'pc_form',content:result.mobile_form,gridName:'pc_form'}" v-if="result.mobile_form">
+      </dyncTemplate>
       <form v-else > 
         <input hidden v-for="one in result.form.filter(x=>x.hide=='True')" :key="one.name" v-model="queryForm[one.name]"/>
         <img src="img/battle_2021.jpg" style="height: 80px;width: 100%;" v-if="result.form.filter(x=>x.hide=='False').length<=1">
@@ -149,9 +149,10 @@ import {run_one} from "./api/report_api"
 import {convert_csv_to_json,convert_array_to_json,build_chart_data, deepClone,arrayToTree,seriesLoadScripts,load_css_file } from "./utils/util"
 import install_component from './install_component'
 import { RuntimeTemplateCompiler } from 'vue-runtime-template-compiler'
+import dyncTemplate from './element/dyncTemplate.vue'
 export default {
   name: 'App', //CellReportFormDesign
-  components:{widgetForm ,RuntimeTemplateCompiler},
+  components:{widgetForm ,RuntimeTemplateCompiler,dyncTemplate},
   mounted(){    
     let _this=this
     window.onresize=this.refresh_layout

front/src/views/rpt_design/styles/index.scss

@@ -270,7 +270,7 @@ $primary-background-color: #ecf8ff;
           }
 
           &__body {
-            min-height: 150px;
+            min-height: 20px;
             height: 100%;
             outline: 1px dashed #ccc;
             outline-offset: -1px;

front/src/views/rpt_design/utils/util.js

@@ -939,16 +939,19 @@ export function extract_script_txt(txt){
     }
     return ret
 }
+export function insert_css_to_head(css_result,id="report_back_css") {
+        document.getElementById(id)?.remove()
+        const css_node = document.createElement('style');
+        css_node.id = id;
+        css_node.type="text/css"
+        css_node.appendChild(document.createTextNode(css_result))
+        document.getElementsByTagName('head')[0].appendChild(css_node);    
+}
 export function load_css_js(txt,id="report_back_css") {
     if(txt){
         let css_result=extract_style_txt(txt)
         if(css_result!=""){
-            document.getElementById(id)?.remove()
-            const css_node = document.createElement('style');
-            css_node.id = id;
-            css_node.type="text/css"
-            css_node.appendChild(document.createTextNode(css_result))
-            document.getElementsByTagName('head')[0].appendChild(css_node);
+            insert_css_to_head(css_result,id)
         }
         let ret=extract_script_txt(txt)
         return ret