BI大屏下钻和日期拆分

src/views/bigscreenDesigner/designer/components/dynamicForm.vue

@@ -13,8 +13,10 @@
           <el-form-item
             v-if="
               inputShow[item.name] &&
+              item.type != 'el-collapse'&&
               item.type != 'dycustComponents' &&
-              item.type != 'dynamic-add-table'
+              item.type != 'dynamic-add-table'&&
+              (item.name != 'is_drill_drown' || hideDrill === false)
             "
             :label="item.label"
             :prop="item.name"
@@ -155,7 +157,7 @@
                 <el-button type="primary" @click="saveData">确 定</el-button>
               </span>
             </el-dialog>
-
+       
             <el-dialog
               title="代码编辑"
               :visible.sync="methodsVisible"
@@ -173,6 +175,15 @@
               </span>
             </el-dialog>
           </el-form-item>
+          <el-collapse   v-if="inputShow[item.name] && item.type === 'el-collapse'">
+              <el-collapse-item
+                class="collapseItem1" 
+                :title="item.label"
+                @click.prevent.native="handleCollapse"
+                :name="item.label"
+                >
+              </el-collapse-item>
+          </el-collapse>
           <dynamicComponents
             v-if="item.type == 'dycustComponents' && inputShow[item.name]"
             v-model="formData[item.name]"
@@ -336,6 +347,7 @@
 <script>
 import ColorPicker from "./colorPicker.vue";
 import vueJsonEditor from "vue-json-editor";
+
 import "codemirror/lib/codemirror.css"; // 核心样式
 import "codemirror/theme/cobalt.css"; // 引入主题后还需要在 options 中指定主题才会生效
 // language
@@ -354,7 +366,7 @@ import componentLinkage from './componentLinkage';
 import imageSelect from './imageSelect';
 import multiIframeManager from './multiIframeManager.vue';
 export default {
-  name: "DynamicForm",
+  name: "dynamic-form",
   components: {
     imageSelect,
     ColorPicker,
@@ -390,6 +402,10 @@ export default {
     widgetIndex: {
       type: Number,
       default: -1
+    },
+    hideDrill:{
+      type: Boolean,
+      default:false,
     }
   },
   data() {
@@ -399,6 +415,8 @@ export default {
       dialogVisibleStaticData: false,
       methodsVisible: false,
       validationRules: "",
+     
+   
       optionsJavascript: {
         mode: "text/javascript",
         tabSize: 2, // 缩进格式
@@ -416,6 +434,7 @@ export default {
     value(newValue, oldValue) {
       this.formData = newValue || {};
     },
+    
     options(val) {
       this.setDefaultValue();
       this.isShowData();
@@ -427,6 +446,12 @@ export default {
   },
   mounted() {},
   methods: {
+    handleCollapse(){
+      this.$emit('handleCollapse',this.formData)
+    },
+    changeDrillData(val){
+      this.changed(val, 'drill_drown_setting')
+    },
     onJsonChange(val) {
       console.log(val);
     },
@@ -442,7 +467,6 @@ export default {
       } else {
         this.$set(this.formData, key, val);
       }
-
       this.$emit("onChanged", this.formData);
       // key为当前用户操作的表单组件
       for (let i = 0; i < this.options.length; i++) {
@@ -465,6 +489,7 @@ export default {
     handleClose() {
       this.dialogVisibleStaticData = false;
       this.methodsVisible = false;
+     
     },
     // 组件属性 数据是否展示动态还是静态数据
     isShowData() {
@@ -480,8 +505,9 @@ export default {
         }
       }
       data.forEach((el) => {
-        if (el.relactiveDomValue != currentData.value) {
+        if (el.relactiveDomValue != currentData.value&&el.name!=='drill_drown_setting') {
           this.inputShow[el.name] = false;
+          console.log(el.name)
         }
       });
     },
@@ -494,6 +520,9 @@ export default {
             this.formData[this.options[i].name] = this.deepClone(
               this.options[i].value
             );
+            if(this.options[i].name=="is_drill_drown"&&this.formData[this.options[i].name]){
+               this.inputShow['drill_drown_setting']=true
+            }
           } else if (Object.prototype.toString.call(obj) == "[object Array]") {
             for (let j = 0; j < obj.length; j++) {
               const list = obj[j].list;
@@ -515,6 +544,12 @@ export default {
 </script>
 
 <style lang="scss">
+.dialogDrillDrown.el-dialog__wrapper .el-dialog{
+  .el-dialog__body{
+    max-height:calc(100vh - 60px) !important;
+    overflow-y:hidden !important;
+  }
+}
 .el-form-item {
   margin-bottom: 5px;
 }
@@ -547,4 +582,9 @@ export default {
   background: transparent;
   padding-bottom: 0;
 }
+.collapseItem1 .el-collapse-item__arrow.is-active{
+  cursor:pointer;
+  color: #bcc9d4;
+  transform:rotate(0)
+}
 </style>