centaline-data-driven 1.6.57 → 1.6.59

package/build/centaline/centaline.path.js

@@ -70,6 +70,7 @@ const paths = {
     "dynamicAppContainer": "./src/centaline/dynamicAppContainer/index.js", //
     "dynamicSteps": "./src/centaline/dynamicSteps/index.js", //步骤控件
     "dynamicLocation": "./src/centaline/dynamicLocation/index.js", //经纬度获取控件
+    "dynamicJsonViewer": "./src/centaline/dynamicJsonViewer/index.js", //json 数据查看控件
   },
   "plugs": {
     "api": "./src/centaline/api/index.js", //调用API插件

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "centaline-data-driven",
-  "version": "1.6.57",
+  "version": "1.6.59",
   "description": "ccai",
   "author": "hjc <3226136347@qq.com>",
   "private": false,
@@ -25,6 +25,7 @@
     "vue": "2.5.17",
     "vue-baidu-map": "^0.21.22",
     "vue-cropper": "^0.5.8",
+    "vue-json-viewer": "^2.2.22",
     "vue-ueditor-wrap": "^2.5.6",
     "vuedraggable": "^2.24.3"
   },

package/release-log.md

@@ -1,3 +1,29 @@
+# v1.6.59
+2025-12-09
+
+优化
+
+分片上传添加请求头传到API,添加action传到前端
+
+树界面右侧表单按钮样式调整
+
+# v1.6.58
+2025-12-01
+
+新增
+
+表单页面添加bottomTip，显示在页面底部并且悬停，支持html
+
+添加 json 数据查看控件
+
+优化
+
+敏感信息查看控件调整，请求参数添加支持直接获取
+
+表单界面的下部的操作按钮统一固定于界面底部
+
+表单页面分组水平布局时，是否固定 分组tab（默认 false）
+
 # v1.6.57
 2025-11-07
 

package/src/Form.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="form-app" class="data-driven" style="width:100%;height:100%;overflow:auto">
     <!-- <ct-form :source="formdata.content" :apiParam="apiParam"></ct-form> -->
-    <ct-form :api="'/api/third-dept-tran/transaction/edit'" :apiParam="apiParam" :topHeight="topHeight" :documentHeight="'600px'"></ct-form>
+    <ct-form :api="'/salemanage/ContractByPoint/readDetail'" :apiParam="apiParam" :topHeight="topHeight" :documentHeight="'600px'"></ct-form>
     <ct-dialog-list></ct-dialog-list>
   </div>  
 </template>
@@ -12,7 +12,7 @@
     data() {
       return {
         apiParam:{
-          "originalTraId":"1913105048579919873","actionType":3,"pageStyle":2,"pageTitle":"修改成交单","pageOnly":true
+          "commissionMode":1,"contractId":"251120105528E09634DE592A4DF8A326","propertyId":"250522090514A8BF158FF92A43479EA6","searchFields":{"fields":[{"fieldName1":"CompanyPath","groupName":"CompanyPath","operation":1,"searchDataType":1,"searchValue1":"001"},{"fieldName1":"EmpID","groupName":"EmpID","operation":1,"searchDataType":1,"searchValue1":"20201030134831BAA0AC5CDC9344B21E"},{"fieldName1":"DeptPath","groupName":"DeptPath","operation":1,"searchDataType":1,"searchValue1":"001.200.063.001"},{"fieldName1":"type","groupName":"type","operation":1,"searchDataType":1,"searchValue1":"left"},{"fieldName1":"EstateID","groupName":"EstateID","operation":2,"searchDataType":3,"searchValue1":"2411211358417B58943C6E954B35BB56"}]},"pageAttribute":{"pageIndex":1},"columnName":"contractDate","actionType":3
         },
         topHeight:10,
       }

package/src/SearchList.vue

@@ -21,7 +21,9 @@
 
     <!-- CCES -->
     <!-- <ct-searchlist :apiParam="para" :searchConditionApi="'/salemattersmanage/agentuserlist/getLayoutOfSearch'"  :searchDataApi="'/salemattersmanage/agentuserlist/getList'"></ct-searchlist> -->
-    <!-- <ct-searchlist :apiParam="para" :searchConditionApi="'/contractmanage/ContractList/getLayoutOfSearch'"  :searchDataApi="'/contractmanage/ContractList/getList'"></ct-searchlist> -->
+    <!-- <ct-searchlist :apiParam="para" :searchConditionApi="'/buildinginfo/getLayoutOfSearch'"  :searchDataApi="'/buildinginfo/getList'"></ct-searchlist> -->
+    <!-- <ct-searchlist :apiParam="para" :searchConditionApi="'/roomtypelist/getLayoutOfSearch'"  :searchDataApi="'/roomtypelist/getList'"></ct-searchlist> -->
+    <ct-searchlist :apiParam="para" :searchConditionApi="'/contractmanage/ContractList/getLayoutOfSearch'"  :searchDataApi="'/contractmanage/ContractList/getList'"></ct-searchlist>
     <!-- <ct-searchlist :apiParam="para" :searchConditionApi="'/sunexpensemanage/sunexpenserecordlist/getLayoutOfSearch'"  :searchDataApi="'/sunexpensemanage/sunexpenserecordlist/getList'"></ct-searchlist> -->
     <!-- <ct-searchlist :apiParam="para" :searchConditionApi="'/workwxmanage/WorkWXApplicationList/getLayoutOfSearch'"  :searchDataApi="'/workwxmanage/WorkWXApplicationList/getList'"></ct-searchlist> -->
     <!-- <ct-searchlist :apiParam="para" :searchConditionApi="'/salemattersmanage/UrgentResponsiblePersonList/getLayoutOfSearch'"  :searchDataApi="'/salemattersmanage/UrgentResponsiblePersonList/getList'"></ct-searchlist> -->
@@ -33,17 +35,17 @@
     <!-- <ct-searchlist :apiParam="para" :searchConditionApi="'/customerquery/publiccustcalltaskreferrallist/getLayoutOfSearch'"  :searchDataApi="'/customerquery/publiccustcalltaskreferrallist/getList'"></ct-searchlist> -->
     <!-- <ct-searchlist :apiParam="para" :searchConditionApi="'/salemattersmanage/agentuserlist/getLayoutOfSearch'"  :searchDataApi="'/salemattersmanage/agentuserlist/getList'"></ct-searchlist> -->
     <!-- <ct-searchlist :apiParam="para" :searchConditionApi="'/salemattersmanage/EntranceNoticeInfoList/getLayoutOfSearch'"  :searchDataApi="'/salemattersmanage/EntranceNoticeInfoList/getList'"></ct-searchlist> -->
-    <ct-searchlist :apiParam="para" :searchConditionApi="'/salemattersmanage/squareuploadlist/getLayoutOfSearch'"  :searchDataApi="'/salemattersmanage/squareuploadlist/getList'"></ct-searchlist>
+    <!-- <ct-searchlist :apiParam="para" :searchConditionApi="'/salemattersmanage/squareuploadlist/getLayoutOfSearch'"  :searchDataApi="'/salemattersmanage/squareuploadlist/getList'"></ct-searchlist> -->
     <!-- <ct-searchlist :apiParam="para" :searchConditionApi="'/commissionquery/properformanceszjjbreport/getLayoutOfSearch'"  :searchDataApi="'/commissionquery/properformanceszjjbreport/getList'"></ct-searchlist> -->
     <!-- <ct-searchlist :apiParam="para" :searchConditionApi="'/employeelist/getLayoutOfSearch'"  :searchDataApi="'/employeelist/getList'"></ct-searchlist> -->
     <!-- <ct-searchlist :apiParam="para" :searchConditionApi="'/estatemanage/estatlist/getLayoutOfSearch'"  :searchDataApi="'/estatemanage/estatlist/getList'"></ct-searchlist> -->
     <!-- <ct-searchlist :apiParam="para" :searchConditionApi="'/system/AreaList/getLayoutOfSearch'"  :searchDataApi="'/system/AreaList/getList'"></ct-searchlist> -->
-    <!-- <ct-searchlist :apiParam="para" :searchConditionApi="'/roomtypelist/getLayoutOfSearch'"  :searchDataApi="'/roomtypelist/getList'"></ct-searchlist> -->
     <!-- <ct-searchlist :apiParam="para" :searchConditionApi="'/salemattersmanage/priceuploadlist/getLayoutOfSearch'"  :searchDataApi="'//salemattersmanage/priceuploadlist/getList'"></ct-searchlist> -->
     <!-- <ct-searchlist :apiParam="para" :searchConditionApi="'/app/workbenchdetails/getContractLayoutOfSearch'"  :searchDataApi="'/app/workbenchdetails/getContractList'"></ct-searchlist> -->
     <!-- <ct-searchlist :apiParam="para" :searchConditionApi="'/selectionactivitymanage/EvaluationActWorksList/getLayoutOfSearch'"  :searchDataApi="'/selectionactivitymanage/EvaluationActWorksList/getListOfSearchModel'"></ct-searchlist> -->
     <!-- <ct-searchlist :apiParam="para" :searchConditionApi="'/financesalemanage/finContractList/getLayoutOfSearch'"  :searchDataApi="'/financesalemanage/finContractList/getList'"></ct-searchlist> -->
     <!-- <ct-searchlist :apiParam="para" :searchConditionApi="'/financecommissionmanage/fincommissionapplylist/getLayoutOfSearch'"  :searchDataApi="'/financecommissionmanage/fincommissionapplylist/getList'"></ct-searchlist> -->
+    <!-- <ct-searchlist :apiParam="para" :searchConditionApi="'/customermanage/ProjectCustomerList/getLayoutOfSearch'"  :searchDataApi="'/customermanage/ProjectCustomerList/getList'"></ct-searchlist> -->
     <!-- CCES -->
 
     <!-- <ct-searchlist :apiParam="para"
@@ -127,6 +129,7 @@
 
     <!-- ibs -->
     <!-- <ct-searchlist :appRootUrl="appRootUrl" :searchConditionApi="'/EmployeeWorkLogList/ind/getLayoutOfSearch'" :searchDataApi="'/EmployeeWorkLogList/ind/getListOfSearchModel'"></ct-searchlist> -->
+    <!-- <ct-searchlist :appRootUrl="appRootUrl" :searchConditionApi="'/ApiAccessLogList/getLayoutOfSearch'" :searchDataApi="'/ApiAccessLogList/getListOfSearchModel'"></ct-searchlist> -->
     <ct-dialog-list></ct-dialog-list>
   </div>
 </template>
@@ -141,7 +144,7 @@
         // appRootUrl:'http://10.88.22.13:6060/onecard-api/',
         appRootUrl:'',
         para:{
-          
+          "type":"left"
         },
       }
     },

package/src/SearchTree.vue

@@ -1,8 +1,8 @@
 <template>
-  <div id="app-Tree" style="height:100%;position: fixed;width:100%">
+  <div id="app-Tree" style="height:100%;position: fixed;width:100%;background: #c8c8c8;padding: 10px;">
     <ct-treelist :flagsearch="true" :apiParam="apiParam" :leftWidth="'280'"
-                 :searchConditionApi="'/SystemParameterCatalogList/getLayoutOfSearch'"
-                 :searchDataApi="'/SystemParameterCatalogList/getListOfSearchModel'" @loaded="loaded"></ct-treelist>
+                 :searchConditionApi="'/system/menulist/getTreeLayoutOfSearch'"
+                 :searchDataApi="'/system/menulist/getTreeList'" @loaded="loaded"></ct-treelist>
     <ct-dialog-list></ct-dialog-list>
   </div>
 </template>

package/src/centaline/css/common.css

@@ -248,7 +248,7 @@ html {
      }
  
  .ct-form {
-   margin:10px;
+   /* margin:10px; */
  }
  
  .ct-iti.ct-iti-mini, .ct-date.ct-date-mini, .ct-mt-mini, .ct-so.ct-so-mini, .ct-tags.ct-tags-mini, .ct-Dtd.ct-Dtd-mini .el-input-group__prepend,

package/src/centaline/dynamicFile/src/dynamicFile.vue

@@ -321,8 +321,13 @@ export default {
     };
   },
   computed: {
-    headers: function () {
-      return this.$common.getDataDrivenOpts().handler.getRequestHeaders();
+    headers: {
+      get() {
+        return this.$common.getDataDrivenOpts().handler.getRequestHeaders(this.model.action);
+      },
+      set(newValue) {
+        return newValue;
+      }
     },
     previewZIndex: function () {
       return this.$common.getDataDrivenOpts().zindex + 100;
@@ -501,6 +506,7 @@ export default {
     },
     //上传之前的钩子
     beforeUploadProcess(file) {
+      this.headers = this.$common.getDataDrivenOpts().handler.getRequestHeaders(this.model.action);
       return true;
     },
 

package/src/centaline/dynamicForm/src/dynamicForm.vue

@@ -1,12 +1,14 @@
 <template>
-  <div v-loading="loading" :style="{width:pageWidth?pageWidth+'px':'100%',margin:'auto','min-height': minHeight}">
-    <div v-if="model !== null && !loading" class="ct-form" :class="{'domDisabled':model.pageDisabled}" :key="formKey">
-      <div v-if="model.tip" class="tip-absolute" :style="{width:(tipWidth-20)+'px'}">
+  <div ref="formRef" v-loading="loading" :style="{width:pageWidth?pageWidth+'px':'100%',margin:'auto','min-height': minHeight,padding:'10px'}">
+    <div ref="fieldsRef" v-if="model !== null && !loading" class="ct-form" :class="{'domDisabled':model.pageDisabled}" :key="formKey">
+      <div ref="topTipRef" v-if="model.tip" class="tip-absolute">
         <span v-html="model.tip"></span>
       </div>
 
       <!--可根据场景判断显示el-card还是el-main-->
-      <component :is="model.showTitle?'el-main':'el-card'">
+      <component :is="model.showTitle?'el-main':'el-card'">        
+        <div v-if="(!this.model.isHorizontalLayout || this.flagScroll) && model.tip" :style="{'height': (model.tip ? 24:0) + 'px'}"></div>
+        
         <div slot="header" class="clearfix" v-if="typeof model.title !== 'undefined' && model.flagShowTitle">
           <span style="font-weight:bold">{{model.title}}</span>
         </div>
@@ -56,9 +58,12 @@
         </el-row>
 
         <!--tabs-->
-        <el-tabs v-if="model.isHorizontalLayout" v-model="activeName" @tab-click="tabClickHandler">
-          <el-tab-pane :label="item.label" :name="index.toString()" :lazy="item.lazyLoad"
-                       v-for="(item, index) in collapse" v-if="item.show !== false" :key="index">
+        <el-tabs ref="tabsRef" v-if="model.isHorizontalLayout" v-model="activeName" @tab-click="tabClickHandler">
+          <el-tab-pane :name="index.toString()" :lazy="item.lazyLoad"
+            v-for="(item, index) in collapse" v-if="item.show !== false" :key="index">
+            <template slot="label">
+              <span v-html="item.label"></span>
+            </template>
             <el-row>
               <template v-for="(col, index) in collapseFieldsRow[index + 1]">
                 <template v-if="col.show !== false && col.lineFeed">
@@ -87,6 +92,41 @@
               </template>
             </el-row>
           </el-tab-pane>
+          <template v-if="model.flagFixedTabOnHorizontalLayout">
+            <!--尾部元素-->
+            <el-row ref="independentRef" v-if="independentItem.length > 0" style="margin-top: 20px;">
+              <template v-for="(col, index) in independentItem">
+                <template v-if="col.show !== false && col.lineFeed">
+                  <div style="display: flex; flex: 0 0 100%;"></div>
+                  <el-col :key="index" v-if="col.show !== false" :span="col.colspan" style="padding:5px">
+                  <component ref="Fields" :is="col.is" :vmodel="col" :api="model.optionApi" :parentModel="model" v-bind="col.bindPara"
+                          :fileData="getFileData(col)" :from="'form'" :documentHeight="documentHeight" :documentWidth="documentWidth"
+                          @click="fieldClickHandler(col,$event)" @change="changeHandler(col,$event)" @enter="enterHandler(col,$event)"
+                          @input="inputHandler(col,$event)" @importComplete="importComplete" @blur="blurHandler(col,$event)"
+                          @popupSearchList="popupSearchListHandler" @flagNotificationParentAfterContentChanged="flagNotificationParentAfterContentChanged"
+                          @popupLocation="popupLocationHandler"
+                          @tableButtonClick="clickHandler"></component>
+                  </el-col>
+                </template>
+                <template v-else>
+                  <el-col :key="index" v-if="col.show !== false" :span="col.colspan" style="padding:5px">
+                    <component ref="Fields" :is="col.is" :vmodel="col" :api="model.optionApi" :parentModel="model" v-bind="col.bindPara"
+                            :fileData="getFileData(col)" :from="'form'" :documentHeight="documentHeight" :documentWidth="documentWidth"
+                            @click="fieldClickHandler(col,$event)" @change="changeHandler(col,$event)" @enter="enterHandler(col,$event)"
+                            @input="inputHandler(col,$event)" @importComplete="importComplete" @blur="blurHandler(col,$event)"
+                            @popupSearchList="popupSearchListHandler" @flagNotificationParentAfterContentChanged="flagNotificationParentAfterContentChanged"
+                            @popupLocation="popupLocationHandler"
+                            @tableButtonClick="clickHandler"></component>
+                  </el-col>
+                </template>
+              </template>
+            </el-row>
+            <el-row ref="linksRef" v-if="model.links.findIndex((v)=>{return v.show}) > -1" style="margin-top: 8px;">
+              <el-col :span="24" style="text-align:left">
+                <component v-for="(btn, index) in model.links" :key="index" :is="btn.is" :vmodel="btn" @click="clickHandler" v-if="btn.show"></component>
+              </el-col>
+            </el-row>
+          </template>
         </el-tabs>
 
         <!--分组-->
@@ -126,23 +166,13 @@
           </el-collapse-item>
         </el-collapse>
 
-        <!--尾部元素-->
-        <el-row v-if="independentItem.length > 0" style="margin-top: 20px;">
-          <template v-for="(col, index) in independentItem">
-            <template v-if="col.show !== false && col.lineFeed">
-              <div style="display: flex; flex: 0 0 100%;"></div>
-              <el-col :key="index" v-if="col.show !== false" :span="col.colspan" style="padding:5px">
-              <component ref="Fields" :is="col.is" :vmodel="col" :api="model.optionApi" :parentModel="model" v-bind="col.bindPara"
-                       :fileData="getFileData(col)" :from="'form'" :documentHeight="documentHeight" :documentWidth="documentWidth"
-                       @click="fieldClickHandler(col,$event)" @change="changeHandler(col,$event)" @enter="enterHandler(col,$event)"
-                       @input="inputHandler(col,$event)" @importComplete="importComplete" @blur="blurHandler(col,$event)"
-                       @popupSearchList="popupSearchListHandler" @flagNotificationParentAfterContentChanged="flagNotificationParentAfterContentChanged"
-                       @popupLocation="popupLocationHandler"
-                       @tableButtonClick="clickHandler"></component>
-              </el-col>
-            </template>
-            <template v-else>
-              <el-col :key="index" v-if="col.show !== false" :span="col.colspan" style="padding:5px">
+        <template v-if="!model.flagFixedTabOnHorizontalLayout">
+          <!--尾部元素-->
+          <el-row ref="independentRef" v-if="independentItem.length > 0" style="margin-top: 20px;">
+            <template v-for="(col, index) in independentItem">
+              <template v-if="col.show !== false && col.lineFeed">
+                <div style="display: flex; flex: 0 0 100%;"></div>
+                <el-col :key="index" v-if="col.show !== false" :span="col.colspan" style="padding:5px">
                 <component ref="Fields" :is="col.is" :vmodel="col" :api="model.optionApi" :parentModel="model" v-bind="col.bindPara"
                         :fileData="getFileData(col)" :from="'form'" :documentHeight="documentHeight" :documentWidth="documentWidth"
                         @click="fieldClickHandler(col,$event)" @change="changeHandler(col,$event)" @enter="enterHandler(col,$event)"
@@ -150,24 +180,42 @@
                         @popupSearchList="popupSearchListHandler" @flagNotificationParentAfterContentChanged="flagNotificationParentAfterContentChanged"
                         @popupLocation="popupLocationHandler"
                         @tableButtonClick="clickHandler"></component>
-              </el-col>
+                </el-col>
+              </template>
+              <template v-else>
+                <el-col :key="index" v-if="col.show !== false" :span="col.colspan" style="padding:5px">
+                  <component ref="Fields" :is="col.is" :vmodel="col" :api="model.optionApi" :parentModel="model" v-bind="col.bindPara"
+                          :fileData="getFileData(col)" :from="'form'" :documentHeight="documentHeight" :documentWidth="documentWidth"
+                          @click="fieldClickHandler(col,$event)" @change="changeHandler(col,$event)" @enter="enterHandler(col,$event)"
+                          @input="inputHandler(col,$event)" @importComplete="importComplete" @blur="blurHandler(col,$event)"
+                          @popupSearchList="popupSearchListHandler" @flagNotificationParentAfterContentChanged="flagNotificationParentAfterContentChanged"
+                          @popupLocation="popupLocationHandler"
+                          @tableButtonClick="clickHandler"></component>
+                </el-col>
+              </template>
             </template>
-          </template>
-        </el-row>
-        <el-row v-if="model.links.findIndex((v)=>{return v.show}) > -1" style="margin-top: 8px;">
-          <el-col :span="24" style="text-align:left">
-            <component v-for="(btn, index) in model.links" :key="index" :is="btn.is" :vmodel="btn" @click="clickHandler" v-if="btn.show"></component>
-          </el-col>
-        </el-row>
-        <el-row v-if="model.buttons.findIndex((v)=>{return v.show}) > -1" :class="isScroll?'ccai button-absolute':'button-initial'"
-                :style="{'max-width':pageWidth?(pageWidth-20)+'px':'100%'}">
-          <el-col :span="24" style="display: flex;align-items: center;justify-content: center;height: 40px ;padding-bottom: 1px;padding-left: 5px;padding-right: 5px;" class="btnPadBom">
-            <component v-for="(btn, index) in model.buttons" :key="index" :is="btn.is" :vmodel="btn" @click="clickHandler" v-if="btn.show"
-              :style="{'float':btn.isCheckbox ? btn.alignCss:''}"></component>
-          </el-col>
-        </el-row>
-        <div v-if="isScroll" style="height: 34px;"></div>
+          </el-row>
+          <el-row ref="linksRef" v-if="model.links.findIndex((v)=>{return v.show}) > -1" style="margin-top: 8px;">
+            <el-col :span="24" style="text-align:left">
+              <component v-for="(btn, index) in model.links" :key="index" :is="btn.is" :vmodel="btn" @click="clickHandler" v-if="btn.show"></component>
+            </el-col>
+          </el-row>
+        </template>
       </component>
+
+    <div v-if="model.bottomTip || (model.buttons.length>0 && model.buttons.findIndex((v)=>{return v.show}) > -1)" 
+        :style="{'height': (model.bottomTip ? 34:0) + (model.buttons.length>0 && model.buttons.findIndex((v)=>{return v.show}) > -1?34:0) + 'px'}"></div>
+    </div>    
+    <div ref="bottomTipRef" v-if="model && !loading && model.bottomTip" 
+    :class="(model.buttons.length>0 && model.buttons.findIndex((v)=>{return v.show}) > -1?'tip-bottom-absolute40':'tip-bottom-absolute')">
+      <span v-html="model.bottomTip"></span>
+    </div>
+    <div ref="buttonsRef" v-if="model && !loading && model.buttons.length>0 && model.buttons.findIndex((v)=>{return v.show}) > -1" 
+      :class="isScroll?'ccai button-absolute':'button-absolute'" :style="{'max-width':pageWidth?(pageWidth-20)+'px':'100%'}">
+      <el-col :span="24" style="display: flex;align-items: center;justify-content: center;height: 40px ;padding-bottom: 1px;padding-left: 5px;padding-right: 5px;" class="btnPadBom">
+        <component v-for="(btn, index) in model.buttons" :key="index" :is="btn.is" :vmodel="btn" @click="clickHandler" v-if="btn.show"
+          :style="{'float':btn.isCheckbox ? btn.alignCss:''}"></component>
+      </el-col>
     </div>
     <div style="min-height:200px" v-if="loading"></div>
     <iframe :src="downloadUrl" style="height:0px;width:0px;border-width: 0px;display: none;"> </iframe>
@@ -332,6 +380,7 @@
           this.model.scripts.formData.fieldsDic = this.model.fieldsDic;
         }
         this.loadFields();
+        this.loadTabs();
 
         if (this.model.onload) {
           let onloads = this.model.onload.split(';');
@@ -417,6 +466,36 @@
           }
         });
       },
+      loadTabs(){
+        this.$nextTick(function () {
+          if(this.model.flagFixedTabOnHorizontalLayout && this.model.isHorizontalLayout && this.collapse.length > 0){
+            let h1 = this.$refs.formRef.parentElement.offsetHeight - 10 | 0;
+            let h2 = this.$refs.tabsRef.$el.children[1].offsetTop + 15 | 0;
+            let h3 = this.$refs.independentRef ? this.$refs.independentRef.$el.offsetHeight + 20 : 0;
+            let h4 = this.$refs.linksRef ? this.$refs.linksRef.$el.offsetHeight : 0;
+            let h5 = this.$refs.buttonsRef ? this.$refs.buttonsRef.children[0].offsetHeight : 0;
+            let h6 = this.$refs.bottomTipRef ? this.$refs.bottomTipRef.offsetHeight : 0;
+            let h7 = this.$refs.topTipRef ? this.$refs.topTipRef.offsetHeight : 0;
+            if(h5===0 && h6===0){
+              h1=h1-5;
+            }
+            let tabHeight = h1 - h2 - h5 - h6 - h7;
+            this.$refs.tabsRef.$el.children[1].style.height = tabHeight + 'px';
+            this.$refs.tabsRef.$el.children[1].style.overflow = 'auto';
+          }
+          else{
+            if(this.$refs.formRef && (!this.model.isHorizontalLayout || this.flagScroll)){
+              let h1 = this.$refs.formRef.parentElement.offsetHeight;
+              // let h5 = this.$refs.buttonsRef ? this.$refs.buttonsRef.children[0].offsetHeight : 0;
+              // let h6 = this.$refs.bottomTipRef ? this.$refs.bottomTipRef.offsetHeight : 0;
+              // let h7 = this.$refs.topTipRef ? this.$refs.topTipRef.offsetHeight : 0;
+              // let fieldsHeight = h1 - h5 - h6 - h7;
+              // this.$refs.fieldsRef.style.height = fieldsHeight + 'px';
+              this.minHeight = h1 + 'px';
+            }
+          }
+        })
+      },
       fieldClickHandler(field) {
         let submitData = null;
         var router = this.model.buttons.find((v) => {
@@ -1580,10 +1659,10 @@
 
   .el-collapse-saveLine .ct-collapse-item-title:last-child .el-collapse-item__wrap {
     border-bottom: none;
-  }
-
+  }  
+  
   .button-initial {
-    margin-top: 8px;
+    line-height: 34px;
   }
 
   .button-absolute {
@@ -1602,9 +1681,48 @@
   }
   
   .tip-absolute {
+    width:'100%';
     z-index: 100;
-    top: 10;
-    left: 10;
+    top: 0;
+    left: 0;
+    right: 0;
+    position: absolute;
+    line-height: 24px;
+    background-color:#ffe7cc;
+    color:#EC3D3D;
+    border-radius: 5px;
+    padding: 8px;
+    font-size: 12px;
+  }
+  
+  .tip-bottom {
+    line-height: 24px;
+    background-color:#ffe7cc;
+    color:#EC3D3D;
+    border-radius: 5px;
+    padding: 8px;
+    font-size: 12px;
+  }
+  .tip-bottom-absolute {
+    width:'100%';
+    z-index: 100;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    position: absolute;
+    line-height: 24px;
+    background-color:#ffe7cc;
+    color:#EC3D3D;
+    border-radius: 5px;
+    padding: 8px;
+    font-size: 12px;
+  }
+  .tip-bottom-absolute40 {
+    width:'100%';
+    z-index: 100;
+    bottom: 40px;
+    left: 0;
+    right: 0;
     position: absolute;
     line-height: 24px;
     background-color:#ffe7cc;

package/src/centaline/dynamicJsonViewer/index.js

@@ -0,0 +1,11 @@
+import dynamicJsonViewer from './src/dynamicJsonViewer'
+
+dynamicJsonViewer.install = function (Vue, options) {
+  Vue.component(dynamicJsonViewer.name, dynamicJsonViewer);
+}
+
+if (typeof window !== 'undefined' && window.Vue) {
+  window.Vue.use(dynamicJsonViewer);
+}
+
+export default dynamicJsonViewer;

package/src/centaline/dynamicJsonViewer/src/dynamicJsonViewer.vue

@@ -0,0 +1,144 @@
+<template>
+  <div class="field-top">
+    <div v-if="model !== null" class="ct-JsonViewer">
+      <div :class="[model.showLabel?'el-input-group el-input-group--prepend':'',!valid?'inputError':'']" style="display: inline-block;">
+        <div v-if="model.showLabel && model.label" :class="[model.labelClass]" style="text-align: left;padding-bottom: 5px;color: #303133;">
+          <h5>{{model.label}}</h5>
+        </div>
+        <div class="josnViewerBox" tabindex="-1" v-if="isRefresh" :style="{ height: model.height || 'auto','max-height':(listHeight?listHeight-130+'px':'calc(100vh - 130px)') }">
+          <JsonViewer :value="model.jsonData" copyable show-array-index show-double-quotes theme="light" :expanded="true"
+            :expand-depth="2" @onKeyClick="keyClick">
+            <template slot="copy">
+              <div class="btn-iocn">
+                <i class="el-icon-refresh" title="复原到初始状态" @click.stop="resetJSON">
+                </i>
+                <i class="el-icon-copy-document" title="复制JSON内容">
+                </i>
+              </div>
+            </template>
+          </JsonViewer>
+        </div>
+      </div>
+      <transition name="el-fade-in">
+        <span v-show="!valid" class="errorMessage">
+          {{validMessage}}
+        </span>
+      </transition>
+    </div>
+  </div>
+</template>
+<script>
+  import dynamicElement from '../../mixins/dynamicElement';
+  import JsonViewer from 'vue-json-viewer'
+  import 'vue-json-viewer/style.css'
+  export default {
+    name: 'ct-JsonViewer',
+    mixins: [dynamicElement],
+    components: {
+      'JsonViewer': JsonViewer
+    },
+    props: {
+      vmodel: Object,
+      api: String,
+      listHeight: {
+        type: Number,
+        default: null
+      },
+    },
+    data() {
+      return {
+        isRefresh:true,
+      };
+    },
+    mounted() {
+      var self = this;
+      this.$nextTick(function () {
+        if (self.vmodel) {
+          self.load(self.vmodel);
+        }
+        else if (typeof self.source !== 'undefined') {
+          self.loaderObj.JsonViewer(self.source, (data) => {
+            self.load(data);
+          });
+        }
+      });
+    },
+    destroyed (){
+      this.model=null;
+      this.$el=null;
+    },
+    methods: {
+      load(data) {
+        this.model = data;
+      },
+      resetJSON() {
+        this.isRefresh = false;
+        this.$nextTick(function () {
+          this.isRefresh = true;
+        });
+      },
+      keyClick(keyName) {
+        console.log(keyName, "it was click")
+      }
+    }
+  }
+</script>
+<style>
+.josnViewerBox {
+  overflow: auto; 
+  width: 100%;
+  border: 1px solid #eee;
+  border-radius: 4px;
+  padding: 2px;
+  box-sizing: border-box;
+  background-color: #ffffff;
+  line-height: normal;
+  
+.jv-container .jv-code{
+  padding: 0px !important;
+}
+.jv-container.light {
+    background: #fff;
+    white-space: nowrap;
+    color: #525252;
+    font-size: 14px;
+    font-family: Consolas, Menlo, Courier, monospace;
+}
+.jv-container.light .jv-button, .jv-container.jv-dark .jv-button {
+    color: #49b3ff;
+}
+.jv-container.light .jv-key {
+    color: #111;
+    margin-right: 4px;
+}
+.jv-container.light .jv-item.jv-string {
+    color: #42b983;
+    word-break: break-word;
+    white-space: normal;
+}
+.jv-container.light .jv-item.jv-number {
+    color: #fc1e70;
+}
+.jv-container.light .jv-item.jv-boolean {
+    color: #fc1e70;
+}
+.jv-tooltip {
+  position: sticky !important;
+  top: 0 !important;
+  right: 0 !important;
+  /* 新增：靠右定位 */
+  z-index: 10;
+  margin-left: auto;
+  /* 辅助：确保靠右 */
+ float: right;
+} 
+.btn-iocn {
+  display: flex;
+  gap: 10px; 
+}
+
+}
+.josnViewerBox:focus {
+  border: 1px solid #3D5ECC;
+}
+</style>