更改组件添加到报表的方式。新增组件维护界面

NoneDay · Feb 9, 2022 · 579dfec · 579dfec
1 parent b898870
commit 579dfec
Show file tree

Hide file tree

Showing 37 changed files with 1,650 additions and 1,581 deletions.
diff --git a/docs/zh/conf/base.md b/docs/zh/conf/base.md
@@ -192,4 +192,102 @@ if(_this.crisMobile)
 console.info(_this) //d打印_this的内容到控制台。这仅仅是测试，生产期间最好不要执行
 </script>
 ```
+::: warning
+如果在pc_form或mobile_form中也需要script，那么将form内的script改为dyn_script。否则正则匹配script将会匹配不正确从而导致脚本失效。
+:::
 
+## 前端动态模板
+- 在页面上添加的动态模板，内部脚本是经过简化的vue格式。主要区别是：script中定义的data、methods、computed会直接注入当前模板中，其他vue属性暂时不支持。
+- 由于是内置脚本模式，所以不支持import语句，不支持data使用函数返回（但和data函数的作用是一样的，都是只对实例模式，定义的属性不会被共享）。
+- style 将是scoped的，style的处理是将每个css前动态加上 了id名称，所以对模板外的其他网页部分没有影响。
+- 为避免data、methods中的名字和系统内部定义的名字冲突，最好将data、methods中的名字加上一个固定前缀，如： my_ 。
+- export default  用return替代
+
+``` html
+<template>
+<div class="cr-data-box">
+  <div class="item"  @click="my_sayHi2">
+    <div class="item-icon" style="background-color: rgb(49, 180, 141);">
+        <i class="el-icon-warning"></i>
+    </div> 
+    <div class="item-info">
+        <span class="title" style="color: rgb(49, 180, 141);">12,332</span>
+        <div class="info">{{my_test_computed}}错误日志{{my_t_data1 }}</div>
+    </div> 
+  </div>
+</div> 
+</template>
+<script>
+   return {
+     data:{
+       my_t_data1:'test_data1',
+       my_t_data2:'test_data2',
+       my_cnt:0,
+     },
+     computed:{
+       my_test_computed(){
+        return this.my_t_data1+'_'+this.my_cnt 
+       }
+     },
+     methods:{
+         my_sayHi2() { 
+            this.my_t_data1='test_'+this.my_cnt;
+            this.my_cnt++
+        },
+         my_sayHi3() { 
+            //console.info(this.context.clickedEle['test'])
+            console.log("Hi3333"); 
+        }
+     }
+   }
+</script>
+<style>
+.cr-data-box{
+  height: 100%;
+}
+.cr-data-box .item { 
+    position: relative;
+    margin: 0 auto 10px;
+    width: 96%;
+    display: flex;
+    height: 100%;
+    overflow: hidden;
+    border-radius: 5px;
+    box-sizing: border-box;
+    border: 1px solid gray
+}
+.cr-data-box .item-icon {
+    width: 100px;
+    height: 100%;
+    color: #fff;
+    text-align: center;
+    line-height: 100px;
+    align-items: center;
+    justify-content: center;
+    display: flex;
+}
+.cr-data-box .item-icon i {
+    font-size: 48px!important;
+}
+.cr-data-box .item-info {
+    border-radius: 0 5px 5px 0;
+    border: 1px solid #eee;
+    border-left: none;
+    background-color: #fff;
+    flex: 1;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+}
+.cr-data-box .item-info .title {
+    font-size: 30px;
+    line-height: 40px;
+    text-align: center;
+}
+.cr-data-box .item-info .info {
+    color: #999;
+    font-size: 14px; 
+    text-align: center;
+}
+</style>
+```