公式配置优化布局修改

src/views/formula/editnew.vue

@@ -194,10 +194,10 @@
             <div class="box-dashed-1"  v-if="elementTbinfo">
             <span>
               <span
-                style="cursor: pointer;"
-                :class="{'span-select':item.selected}"
-                v-for="(item,index) in processFormula1" :key="index" 
-                :item="item" @click="equationClicksouce(item)"
+                style="cursor: pointer;font-size:20px"
+                v-bind:class="{'span-select':index===nowtitleIndex}"
+                v-for="(item,index) in processFormula" :key="index" 
+                :item="item" @click="equationClicksouce(item,index)"
                 :isShow="true"
               >
               {{item.name}}
@@ -209,13 +209,13 @@
             </div>
             <div class="box-dashed-1-tabinfo" v-if="istabinfo">
                 <div class="left_box">
-                    <el-descriptions class="margin-top"  :column="1" :size="small" border > 
+                    <el-descriptions class="margin-top"  :column="1" size="large" border > 
                       <el-descriptions-item>
                         <template slot="label">
                       
                           元素表名称
                         </template>
-                          <span style="color: rgba(64,149,229,1);font-weight:bold">  {{checkFormula[0]['initTableName']}}</span>
+                          <span style="color: rgba(64,149,229,1);font-weight:bold;cursor: pointer;">  {{checkFormula[0]['initTableName']}}</span>
                       </el-descriptions-item>
                       <el-descriptions-item>
                         <template slot="label">
@@ -240,63 +240,63 @@
                        {{checkFormula[0]['eLength']}}
                       </el-descriptions-item>
                     </el-descriptions>
-                    <span style="font-weight: bolder;font-size: large;"> 嵌套公式：</span>
-                      <el-collapse  style="margin-top:10px;height:250px;overflow-y:auto">
-                            <el-collapse-item>
-                              <template slot="title">
-                              （1） 日期向后移<i class="header-icon el-icon-info"></i>
-                              </template>
-                              <div  style="padding:10px;font-size:12px">
-                                   <component ref="dynamiccomponent" v-bind:is="'date-deviation'" :isShow="false" :formulainfo="item" :curele="equationSelectEle" :formulamap="formulaMap" @uncheck="unCheckEleComp" class="flex1"></component>
-                              </div>
-                                <div>
-                                    <el-descriptions class="margin-top"  :column="1" size="small" border > 
-                                    <el-descriptions-item>
-                                      <template slot="label">
-                                    
-                                        元素表名称
-                                      </template>
-                                        <span style=" font-size: 20px;color: rgba(64,149,229,1);font-weight:bold">xxxx表</span>
-                                    </el-descriptions-item>
-                                    <el-descriptions-item>
-                                      <template slot="label">
-                                    
-                                        元素名称
-                                      </template>
-                                    <span >xxxx</span>
-                                    </el-descriptions-item>
-                                    <el-descriptions-item>
-                                      <template slot="label">
-                                  
-                                        数据类型
-                                      </template>
-                                       {{resultFormula[0]['eType']}}
-                                    </el-descriptions-item>
-                          
-                                    <el-descriptions-item>
-                                      <template slot="label">
-                                      
-                                        长度
-                                      </template>
-                                      50 
-                                    </el-descriptions-item>
-                                  </el-descriptions>
+                  
+                           <div class="formula-title"> 嵌套公式：</div>
+                        <div class="formula-box">
+                            <div class="formula-list-box" v-for="(item,index) in innerFormulaList" :key="index"  @click="checkInnerList(item,index)">
+                                <span class="formula-list"  v-bind:class="{'span-select':index===nowIndex}"> {{'（'+Number(index+1)+')'}}{{item.title}}</span> 
+                                <div class="formula-detail"   v-if="index===nowIndex">
+                                      <!-- <component ref="dynamiccomponent" v-bind:is="componentMap[item.name]" :formulainfo="item" :curele="equationSelectEle" :formulamap="formulaMap" @uncheck="unCheckEleComp" class="flex1"></component> -->
+                                          <component 
+                                          ref="dynamiccomponent" 
+                                          v-bind:is="'date-deviation'" 
+                                          :formulainfo="item" 
+                                          :curele="equationSelectEle" 
+                                          :formulamap="formulaMap" 
+                                          @uncheck="unCheckEleComp" 
+                                          class="flex1">
+                                          </component>
+                                          <div class="formula-detail-element">
+                                              <el-descriptions class="margin-top"  :column="1" size="mini" border > 
+                                                  <el-descriptions-item>
+                                                    <template slot="label">
+                                                  
+                                                      元素表名称
+                                                    </template>
+                                                      <span style="color: rgba(64,149,229,1);font-weight:bold;cursor: pointer;">  {{checkFormula[0]['initTableName']}}</span>
+                                                  </el-descriptions-item>
+                                                  <el-descriptions-item>
+                                                    <template slot="label">
+                                                  
+                                                      元素名称
+                                                    </template>
+                                                  <span >{{checkFormula[0]['name']}}</span>
+                                                  </el-descriptions-item>
+                                                  <el-descriptions-item>
+                                                    <template slot="label">
+                                                
+                                                      数据类型
+                                                    </template>
+                                                      {{checkFormula[0]['eType']}}
+                                                  </el-descriptions-item>
+                                        
+                                                  <el-descriptions-item>
+                                                    <template slot="label">
+                                                    
+                                                      长度
+                                                    </template>
+                                                  {{checkFormula[0]['eLength']}}
+                                                  </el-descriptions-item>
+                                                </el-descriptions>
+                                          </div>
                                 </div>
-                                  </el-collapse-item>
-                                  <el-collapse-item title="反馈 Feedback">
-                                    <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
-                                    <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
-                                  </el-collapse-item>
-                                  <el-collapse-item title="效率 Efficiency">
-                                    <div>简化流程：设计简洁直观的操作流程；</div>
-                                    <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>
-                                    <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>
-                                  </el-collapse-item>
-                                  <el-collapse-item title="可控 Controllability">
-                                    <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>
-                                    <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>
-                                  </el-collapse-item>
-                      </el-collapse>
+                              
+                            </div>
+                   
+                    </div>
+               
+                    
+                      
                 </div>
                 <div class="right_box">
                   
@@ -558,13 +558,10 @@ import draggable from 'vuedraggable'
 export default {
   components: {
     draggable,
-
     formulaItem,
     formulaItemCopy,
     formulaTemplate,
-
     editor: require('vue2-ace-editor'),
-
     dateDeviation,
     dateFormat,
     datasRepeat,
@@ -644,7 +641,7 @@ export default {
 
       resultFormula:[],//=等号左边的数组
       processFormula:[],//=等号右边的数组
-      processFormula1:[],//=等号右边的数组
+    
       processType:'',//选中的元素在等号哪边
       processSelectIndex:0,//选中的索引
       actiFunIndex:0,//元素下挂载的计算式的索引
@@ -695,6 +692,14 @@ export default {
      stringTypeList:[],
      checkFormula:[],
      checkid:'',
+     nowIndex:'',
+     innerFormulaList:[
+       {title:'公式配置',selected:false},
+       {title:'公式配置',selected:false},
+       {title:'公式配置',selected:false},
+     ],
+     isShowDetail:false,
+     nowtitleIndex:''
     };
   },
   computed: {
@@ -1173,17 +1178,13 @@ export default {
       }
     },
   //点选公式溯源公式
-  equationClicksouce(item){
+  equationClicksouce(item,index){
     console.log(item,'item');
+    this.nowtitleIndex=index;
+    this.istabinfo=true;
     this.checkid=item.id
-    this.getEleDeatilList(this.checkid)
+    this.getEleDeatilList()
    
-      this.processFormula1.forEach((item)=>{
-        
-        item.selected=false
-      })
-      item.selected = !item.selected;
-      this.istabinfo=true
     
   },
     //在等式模式下点选计算式
@@ -1811,6 +1812,13 @@ export default {
               });
          
       },
+      checkInnerList(item,index){
+        this.nowIndex=index
+        // this.innerFormulaList.forEach((item)=>{
+        //   item.selected=false
+        // })
+        item.selected=!item.selected;
+      }
   }
 };
 </script>
@@ -1908,4 +1916,33 @@ export default {
     height: 100%;
   }
 }
+.formula-title{
+  font-weight: bolder;
+  font-size: large;
+  margin-top:10px
+}
+.formula-box{
+  height: 280px;
+  overflow-y: auto;
+}
+.formula-list-box{
+  margin-top: 10px;
+
+}
+.formula-list{
+  color: white;
+  font-weight: bold;
+  cursor: pointer;
+}
+.formula-list-checked{
+  color: blue !important;
+  
+ }
+ .formula-detail{
+   margin-top: 10px;
+ }
+ .formula-detail-element{
+   margin-top: 10px;
+ }
+
 </style>