centaline-data-driven 1.1.51 → 1.1.55

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

@@ -1,536 +1,564 @@
-<template>
-  <div v-loading="loading" style="width:100%">
-    <div v-if="model !== null && !loading" class="ct-form"  :class="{'domDisabled':model.pageDisabled}">
-      <!--可根据场景判断显示el-card还是el-main-->
-      <component :is="model.showTitle?'el-main':'el-card'">
-        <div slot="header" class="clearfix" v-if="typeof model.title !== 'undefined' && model.flagShowTitle">
-          <span style="font-weight:bold">{{model.title}}</span>
-        </div>
-        <!--头部元素-->
-        <el-row v-if="collapseFieldsRow.length > 0">
-          <el-col v-for="(col, index) in collapseFieldsRow[0]" :key="index" v-if="col.show !== false" :span="col.colspan" style="padding:5px">
-            <component ref="Fields" :is="col.is" :vmodel="col" :api="model.optionApi" v-bind="col.bindPara"
-                       @click="fieldClickHandler(col,$event)" @change="changeHandler(col,$event)"
-                       @input="inputHandler(col,$event)"
-                       @popupSearchList="popupSearchListHandler"
-                       @tableButtonClick="clickHandler"></component>
-          </el-col>
-        </el-row>
-        <!--tabs-->
-        <el-tabs v-if="model.isHorizontalLayout" v-model="activeName">
-          <el-tab-pane :label="item.label" :name="index.toString()"
-                       v-for="(item, index) in collapse" v-if="item.show !== false" :key="index">
-            <el-row>
-              <el-col v-for="(col, index) in collapseFieldsRow[index + 1]" :key="index" :span="col.colspan" v-if="col.show !== false" style="padding:5px">
-                <component ref="Fields" :is="col.is" :vmodel="col" :api="model.optionApi" v-bind="col.bindPara"
-                           @click="fieldClickHandler(col,$event)" @change="changeHandler(col,$event)"
-                           @input="inputHandler(col,$event)"
-                           @popupSearchList="popupSearchListHandler"
-                           @tableButtonClick="clickHandler"></component>
-              </el-col>
-            </el-row>
-          </el-tab-pane>
-        </el-tabs>
-        <!--分组-->
-        <el-collapse v-else v-model="collapseActiveNames" @change="collapseHandleChange">
-          <el-collapse-item v-for="(item, index) in collapse" v-if="item.show !== false" :key="index" :title="item.label" :name="index">
-            <template slot="title">
-              <i class="sign"></i>
-              {{item.label}}
-            </template>
-            <el-row>
-              <el-col v-for="(col, index) in collapseFieldsRow[index + 1]" :key="index" :span="col.colspan" v-if="col.show !== false" style="padding:5px">
-                <component ref="Fields" :is="col.is" :vmodel="col" :api="model.optionApi" v-bind="col.bindPara"
-                           @click="fieldClickHandler(col,$event)" @change="changeHandler(col,$event)"
-                           @input="inputHandler(col,$event)"
-                           @popupSearchList="popupSearchListHandler"
-                           @tableButtonClick="clickHandler"></component>
-              </el-col>
-            </el-row>
-          </el-collapse-item>
-        </el-collapse>
-        <!--尾部元素-->
-        <el-row v-if="independentItem.length > 0" style="margin-top: 20px;">
-          <el-col v-for="(col, index) in independentItem" :key="index" v-if="col.show !== false" :span="col.colspan" style="padding:5px">
-            <component ref="Fields" :is="col.is" :vmodel="col" :api="model.optionApi" v-bind="col.bindPara"
-                       @click="fieldClickHandler(col,$event)" @change="changeHandler(col,$event)"
-                       @input="inputHandler(col,$event)"
-                       @popupSearchList="popupSearchListHandler"
-                       @tableButtonClick="clickHandler"></component>
-          </el-col>
-        </el-row>
-        <el-row v-if="model.links.length > -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" style="margin-top: 8px;">
-          <el-col :span="24" style="text-align:center">
-            <component v-for="(btn, index) in model.buttons" :key="index" :is="btn.is" :vmodel="btn" @click="clickHandler" v-if="btn.show"></component>
-          </el-col>
-        </el-row>
-      </component>
-    </div>
-    <div style="min-height:200px" v-if="loading"></div>
-  </div>
-</template>
-<script>
-  import dynamicElement from '../../mixins/dynamicElement'
-  import dynamicFormListTalbe from './dynamicFormListTable'
-  import { setTimeout } from 'timers';
-  //import dynamicFormList from './dynamicFormList'
-  export default {
-    name: 'ct-form',
-    mixins: [dynamicElement],
-    components: {
-      'ct-form-list-table': dynamicFormListTalbe
-    },
-    props: {
-      api: String,
-      vmodel: Object,
-      source: Object,
-      apiParam: Object,
-      parentModel: Object,
-      showTitle: {
-        type: Boolean,
-        default: false
-      }
-    },
-    data() {
-      var self = this;
-      return {
-        loading: true,
-        activeName: '0',
-        collapse: [],//分组数组
-        collapseActiveNames: [],//默认展开的分组name
-        collapseFieldsRow: [],//分组数组对应的行列布局
-        independentItem: []//最后一个独立分组的行列布局
-      };
-    },
-    mounted() {
-      this.init();
-    },
-    methods: {
-      init() {
-        var self = this;
-        //初始化
-        this.loading = true;
-        this.collapse.splice(0, this.collapse.length);
-        this.collapseActiveNames.splice(0, this.collapseActiveNames.length);
-        this.collapseFieldsRow.splice(0, this.collapseFieldsRow.length);
-        this.independentItem.splice(0, this.independentItem.length);
-
-        this.$nextTick(function () {
-          if (typeof self.api !== 'undefined') {
-            self.loaderObj.Form(self.api, self.load, this.apiParam, self.failLoad);
-          }
-          else if (typeof self.source !== 'undefined') {
-            self.load(self.loaderObj.Form(self.source));
-          }
-          else if (self.vmodel) {
-            self.load(self.vmodel);
-          }
-        });
-      },
-      failLoad() {
-        this.$emit('failLoad', this.model);
-      },
-      load(data) {
-        this.$set(this, 'model', data);
-        this.model.self = this;
-        if (typeof this.model.scripts !== 'undefined') {
-          this.model.scripts.formData = this.model.formData;
-          this.model.scripts.formData.form = this.model;
-          this.model.scripts.formData.excuteData = this.model.fields;
-          this.model.scripts.formData.fieldsDic = this.model.fieldsDic;
-        }
-        this.loadFields();
-        this.loading = false;
-        //通知父组件加载完成
-        this.$emit('loaded', this.model);
-      },
-      loadFields() {
-        var self = this;
-
-        var collapseItemArr = [];//分组对应元素二维数组
-        var collapseItem = [];//分组对应元素数组
-        let realCollapseActiveNames = [];//真实的默认展开的分组name
-        let isIndependent = false;
-        self.model.fields.forEach((v, index) => {
-          v.index = index;
-          if (v.is === 'ct-independentGroup') {
-            isIndependent = true;
-            return true; //continue 
-          }
-          if (isIndependent) {
-            this.independentItem.push(v);
-          }
-          else if (v.is === 'ct-group') {
-            self.collapse.push(v);
-            if (v.isExpand) {
-              realCollapseActiveNames.push(self.collapse.length - 1);
-            }
-            self.collapseActiveNames.push(self.collapse.length - 1);
-
-            collapseItemArr.push(collapseItem);
-            v.collapseName = collapseItemArr.length - 1;
-            collapseItem = [];
-          }
-          else {
-            v.collapseName = collapseItemArr.length - 1;
-            collapseItem.push(v);
-          }
-        });
-        if (collapseItem.length > 0) {
-          collapseItemArr.push(collapseItem);
-        }
-
-        //遍历分组里的组件，计算行列布局
-        for (var i = 0; i < collapseItemArr.length; i++) {
-          var myFilter = collapseItemArr[i];
-
-          self.collapseFieldsRow.push(myFilter);
-        }
-
-        //因有一些子组件需要计算宽度及高度，故要先全部展开在缩起来
-        //也可采用方案二：子组件中，找不到高度，产生一个定时器，找到为止
-        //方案三：在显示分组时，主动触发resize方法
-        self.$nextTick(() => {
-          self.$set(self, 'collapseActiveNames', realCollapseActiveNames);
-        });
-
-        //联动组件处理 todo:去掉，使用form方式
-        var hasParent = self.model.fields.filter((v) => {
-          return typeof v.parentName !== 'undefined';
-        });
-        hasParent.forEach((v, index) => {
-          var parent = self.model.fields.find((v1) => {
-            return v1.id === v.parentName;
-          });
-          if (parent) {
-            parent.child = v;
-            v.parent = parent;
-          }
-        });
-      },
-      fieldClickHandler(field) {
-        var router = this.model.buttons.find((v) => {
-          return v.id === field.id;
-        });
-        this.clickHandler(router);
-      },
-      clickHandler(field, submitData) {
-        var self = this;
-        this.model.scripts.$fd = field.id;
-        this.model.scripts.$result = [];
-        
-        var clickAcion = function (field) {  
-          if (field.isSubmit) {
-            let verified = true;
-            if (self.validExcute()) {
-              if (typeof field.onClick !== 'undefined') {
-                verified = self.$common.excute.call(self.model.scripts, field.onClick);
-              }
-
-              if (verified) {
-                //action有值，提交到后台
-                if (field.action) {
-                  field.disabled = true;//提交按钮禁用
-                  self.model.pageDisabled= true;
-                  field.doAction(self.getFormObj(), (data) => {
-                    if (data.rtnCode === 200) {
-                      if (self.model.flagAlertClose) {
-                        self.$common.confirm('操作成功，是否关闭本页面?', '提示', {
-                          confirmButtonText: '确定',
-                          cancelButtonText: '取消',
-                          type: 'warning'
-                        }).then(() => {
-                          //如果没有弹框 则关闭tab页
-                          if (self.$common.dialogList && self.$common.dialogList.List.length === 0) {
-                            if (typeof self.$common.getDataDrivenOpts().handler.closeTab === 'function') {
-                              self.$common.getDataDrivenOpts().handler.closeTab();
-                            }
-                          }
-                          self.$emit('submit', { formData: self.model, responseData: data });
-                        }).catch(() => {
-                          self.init();
-                        });
-                      }
-                      else {
-                        self.$emit('submit', { formData: self.model, responseData: data });
-                      }
-                      if (self.parentModel) {
-                        self.parentModel.$vue.closeTabThen(data);
-                      }
-                    }
-                    field.disabled = false;                    
-                    self.model.pageDisabled= false;
-                  });
-                }
-                //无值，触发submit事件
-                else {
-                  self.$emit('submit', { formData: self.model, responseData: {} });
-                }
-              }
-            }
-          }
-          else {
-            if (typeof field.onClick !== 'undefined') {
-              verified = self.$common.excute.call(self.model.scripts, field.onClick);
-            }
-
-            if (!submitData) {
-              submitData = {};
-              var tempFormData = self.model.getFormObj();
-              field.submitFormField.forEach((v) => {
-                submitData[v] = tempFormData[v];
-              });
-            }
-
-            if (field.isOpenForm) {
-              var dialogOption = {
-                title: field.pageTitle,
-                pane: self.$common.getParentPane(self),
-                content: [{
-                  component: 'ct-form',
-                  attrs: {
-                    //ssource: data.content,
-                    api: field.action,
-                    apiParam: field.getActionPara(submitData).para,
-                    showTitle: false,
-                    width: field.dialogWidth + 'px',
-                    height: field.dialogHeight + 'px'
-                  },
-                  on: {
-                    submit(ev) {
-                      self.model.updateFields(ev, () => {
-                        self.$refs.Fields.forEach((fd) => {
-                          fd.$forceUpdate();
-                        });
-                      });
-                      self.$common.closeDialog(dialogOption.dialog);
-                    }
-                  }
-                }]
-              };
-              self.$common.openDialog(dialogOption);
-            }
-            else if (field.isOpenList) {
-              var dialogOption = {
-                title: field.pageTitle,
-                pane: self.$common.getParentPane(self),
-                content: [{
-                  component: 'ct-searchlist',
-                  attrs: {
-                    searchConditionApi: field.actionForSearchLayout,
-                    searchDataApi: field.actionForSearch,
-                    apiParam: submitData,
-                    width: field.dialogWidth + 'px',
-                    height: field.dialogHeight + 'px'
-                  },
-                  on: {
-                    submit(ev) {
-                      self.model.updateFields(ev, () => {
-                        self.$refs.Fields.forEach((fd) => {
-                          fd.$forceUpdate();
-                        });
-                      });
-                      self.$common.closeDialog(dialogOption.dialog);
-                    }
-                  }
-                }]
-              };
-              self.$common.openDialog(dialogOption);
-            }
-            else if (field.isFormPageInTab || field.isSearchPageInTab) {// 外部框架tab页打开
-              submitData = field.getActionPara(submitData).para;
-              self.$common.getDataDrivenOpts().handler.openTab(field.action, submitData, field.pageTitle);
-            }
-            else if (field.isBrowserNewTab) {// 浏览器打开
-              submitData = field.getActionPara(submitData).para;
-              let query = self.$common.objectToQueryStr(submitData);
-              window.open(field.action + query, "_blank");
-            }
-          }
-        }
-
-        if (field.isSubmit && !self.validExcute()) {
-          return;
-        }
-
-        if (field.alert) {
-          self.$common.confirm(field.alertMsg, field.alertCaption, {
-            confirmButtonText: field.alertOKButtonText,
-            cancelButtonText: field.alertCancelButtonText,
-            //type: 'warning'
-            center: field.alertCenter
-          }).then(() => {
-            clickAcion(field);
-          }).catch(() => {
-          });
-        }
-        else {
-          clickAcion(field);
-        }
-      },
-      changeHandler(field) {
-        var self = this;
-        if (typeof field.change !== 'undefined') {
-          if (typeof this.model.scripts !== 'undefined') {
-            this.model.scripts.formData.setExcuteListData(this.model.fields);
-          }
-          this.model.scripts.$fd = field.id;
-          this.$common.excute.call(this.model.scripts, field.change);
-        }
-
-        self.model.isChanged = true;
-        self.model.hiddenHandle(field);
-        self.model.requiredHandle(field);
-        //self.model.validMrf(field);
-        self.$forceUpdate();
-      },
-      changeCallBackHandler(field, callBackFunName, callBackPara) {
-        var self = this;
-        if(callBackFunName){
-          this.model.scripts.$fd = field.id;
-          this.$common.excuteFunStr.call(this.model.scripts, callBackFunName, callBackPara);
-        }
-        self.$forceUpdate();
-      },
-      inputHandler(field) {
-        if (typeof field.input !== 'undefined') {
-          if (typeof this.model.scripts !== 'undefined') {
-            this.model.scripts.formData.setExcuteListData(this.model.fields);
-          }
-          this.model.scripts.$fd = field.id;
-          this.$common.excute.call(this.model.scripts, field.input);
-        }
-      },
-      popupSearchListHandler(singleSelectio, field, router, callBack) {
-        var self = this;
-        var submitData = {};
-        var tempFormData = self.model.getFormObj();
-
-        var check = true;
-        var checkMsg;
-        router.submitFormField.forEach((v) => {
-          submitData[v] = tempFormData[v];
-          if (typeof tempFormData[v] === "undefined") {
-            if (self.model.fieldsDic[v]) {
-              checkMsg = "请先录入" + self.model.fieldsDic[v].label;
-            }
-            else {
-              checkMsg = "未配置：" + v;
-            }
-            check = false;
-          }
-        });
-
-        if (!check) {
-          self.$message.warning(checkMsg);
-          return;
-        }
-
-        var dialogOption = {
-          title: router.pageTitle,
-          pane: self.$common.getParentPane(self),
-          content: [{
-            component: 'ct-popupSearchList',
-            attrs: {
-              searchFormApi: router.actionForSearchLayout,
-              searchDataApi: router.actionForSearch,
-              apiParam: submitData,
-              singleSelectio: singleSelectio,
-              width: router.dialogWidth + 'px',
-              height: (router.dialogHeight || 500) + 'px'
-            },
-            on: {
-              submit(option) {
-                if (typeof callBack === "function" && !router.callBackFunName) {
-                  callBack(option);
-                }
-
-                self.changeCallBackHandler(field, router.changeCallBackFunName, option);
-              }
-            }
-          }]
-        };
-        this.$common.openDialog(dialogOption);
-      },
-      validExcute() {
-        var self = this;
-        var rtnBool = true;
-        var jump = false;
-        self.$refs.Fields.forEach((f) => {
-          if (f.model && typeof f.validExcute !== 'undefined') {
-            if (!f.validExcute()) {
-              if (!jump) {
-                if (this.model.isHorizontalLayout) {//水平布局
-                  this.activeName = f.model.collapseName.toString();
-                  jump = true;
-                }
-                else {//垂直布局
-                  let timeOut = 0;
-                  //展开折叠
-                  if (f.collapseName != -1 && self.collapseActiveNames.indexOf(f.model.collapseName) == -1) {
-                    self.collapseActiveNames.push(f.model.collapseName);
-                    timeOut = 300;//展开折叠有个时间并影响滚动条位置，故需要延迟
-                  }
-
-                  setTimeout(function () {
-                    if (f.$el.offsetParent && f.$el.offsetParent.offsetParent) {
-                      let total = f.$el.offsetParent.offsetParent.offsetTop;
-                      //this.$common.setScrollTop(total);
-
-                      if (f.$el.offsetParent.offsetParent.offsetParent === null || f.$el.offsetParent.offsetParent.classList[0] === 'app-main') {
-                        total = f.$el.offsetParent.offsetTop;
-                        this.$common.setScrollTop(total);
-                      }
-                      else if (f.$el.offsetParent.offsetParent.offsetParent.localName === "body") {
-                        this.$common.setScrollTop(total);
-                      }
-                      else {
-                        f.$el.offsetParent.offsetParent.offsetParent.scrollTop = total;
-                      }
-                    }
-                    //let input = f.$el.querySelector('input');
-                    //if (input) {
-                    //  input.focus();
-                    //}
-                  }, timeOut);
-                  jump = true;
-                }
-              }
-              rtnBool = false;
-            }
-          }
-        });
-        return rtnBool;
-      },
-      collapseHandleChange(itemArr) {
-        let fieldTarget = this.model.fields.filter((v) => {
-          return itemArr.indexOf(v.collapseName) > 0;
-        });
-        fieldTarget.forEach((f) => {
-          if (f.self && f.self.resize) {
-            f.self.resize();
-          }
-        });
-      },
-      getFormObj(){
-        let formData=this.model.getFormObj();
-        if(this.$route && this.$route.query && this.$route.query.pageStyle)
-        {
-           return Object.assign(formData,{'pageStyle':this.$route.query.pageStyle});
-        }
-        return formData;
-      },
-     
-    }
-  }
-</script>
-<style scoped>
-.el-collapse{
-  border-top: none;
-}
-</style>
+<template>
+  <div v-loading="loading" style="width:100%">
+    <div v-if="model !== null && !loading" class="ct-form"  :class="{'domDisabled':model.pageDisabled}">
+      <!--可根据场景判断显示el-card还是el-main-->
+      <component :is="model.showTitle?'el-main':'el-card'">
+        <div slot="header" class="clearfix" v-if="typeof model.title !== 'undefined' && model.flagShowTitle">
+          <span style="font-weight:bold">{{model.title}}</span>
+        </div>
+        <!--头部元素-->
+        <el-row v-if="collapseFieldsRow.length > 0">
+          <el-col v-for="(col, index) in collapseFieldsRow[0]" :key="index" v-if="col.show !== false" :span="col.colspan" style="padding:5px">
+            <component ref="Fields" :is="col.is" :vmodel="col" :api="model.optionApi" v-bind="col.bindPara"
+                       @click="fieldClickHandler(col,$event)" @change="changeHandler(col,$event)"
+                       @input="inputHandler(col,$event)"
+                       @popupSearchList="popupSearchListHandler"
+                       @tableButtonClick="clickHandler"></component>
+          </el-col>
+        </el-row>
+        <!--tabs-->
+        <el-tabs v-if="model.isHorizontalLayout" v-model="activeName">
+          <el-tab-pane :label="item.label" :name="index.toString()"
+                       v-for="(item, index) in collapse" v-if="item.show !== false" :key="index">
+            <el-row>
+              <el-col v-for="(col, index) in collapseFieldsRow[index + 1]" :key="index" :span="col.colspan" v-if="col.show !== false" style="padding:5px">
+                <component ref="Fields" :is="col.is" :vmodel="col" :api="model.optionApi" v-bind="col.bindPara"
+                           @click="fieldClickHandler(col,$event)" @change="changeHandler(col,$event)"
+                           @input="inputHandler(col,$event)"
+                           @popupSearchList="popupSearchListHandler"
+                           @tableButtonClick="clickHandler"></component>
+              </el-col>
+            </el-row>
+          </el-tab-pane>
+        </el-tabs>
+        <!--分组-->
+        <el-collapse v-else v-model="collapseActiveNames" @change="collapseHandleChange">
+          <el-collapse-item v-for="(item, index) in collapse" v-if="item.show !== false" :key="index" :title="item.label" :name="index" :disabled="item.lock">
+            <template slot="title">
+              <i class="sign"></i>
+              {{item.label}}
+            </template>
+            <el-row>
+              <el-col v-for="(col, index) in collapseFieldsRow[index + 1]" :key="index" :span="col.colspan" v-if="col.show !== false" style="padding:5px">
+                <component ref="Fields" :is="col.is" :vmodel="col" :api="model.optionApi" v-bind="col.bindPara"
+                           @click="fieldClickHandler(col,$event)" @change="changeHandler(col,$event)"
+                           @input="inputHandler(col,$event)"
+                           @popupSearchList="popupSearchListHandler"
+                           @tableButtonClick="clickHandler"></component>
+              </el-col>
+            </el-row>
+          </el-collapse-item>
+        </el-collapse>
+        <!--尾部元素-->
+        <el-row v-if="independentItem.length > 0" style="margin-top: 20px;">
+          <el-col v-for="(col, index) in independentItem" :key="index" v-if="col.show !== false" :span="col.colspan" style="padding:5px">
+            <component ref="Fields" :is="col.is" :vmodel="col" :api="model.optionApi" v-bind="col.bindPara"
+                       @click="fieldClickHandler(col,$event)" @change="changeHandler(col,$event)"
+                       @input="inputHandler(col,$event)"
+                       @popupSearchList="popupSearchListHandler"
+                       @tableButtonClick="clickHandler"></component>
+          </el-col>
+        </el-row>
+        <el-row v-if="model.links.length > -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" style="margin-top: 8px;">
+          <el-col :span="24" style="text-align:center">
+            <component v-for="(btn, index) in model.buttons" :key="index" :is="btn.is" :vmodel="btn" @click="clickHandler" v-if="btn.show"></component>
+          </el-col>
+        </el-row>
+      </component>
+    </div>
+    <div style="min-height:200px" v-if="loading"></div>
+  </div>
+</template>
+<script>
+  import dynamicElement from '../../mixins/dynamicElement'
+  import dynamicFormListTalbe from './dynamicFormListTable'
+  import { setTimeout } from 'timers';
+  //import dynamicFormList from './dynamicFormList'
+  export default {
+    name: 'ct-form',
+    mixins: [dynamicElement],
+    components: {
+      'ct-form-list-table': dynamicFormListTalbe
+    },
+    props: {
+      api: String,
+      vmodel: Object,
+      source: Object,
+      apiParam: Object,
+      parentModel: Object,
+      showTitle: {
+        type: Boolean,
+        default: false
+      }
+    },
+    data() {
+      var self = this;
+      return {
+        loading: true,
+        activeName: '0',
+        collapse: [],//分组数组
+        collapseActiveNames: [],//默认展开的分组name
+        collapseFieldsRow: [],//分组数组对应的行列布局
+        independentItem: []//最后一个独立分组的行列布局
+      };
+    },
+    mounted() {
+      this.init();
+    },
+    methods: {
+      init() {
+        var self = this;
+        //初始化
+        this.loading = true;
+        this.collapse.splice(0, this.collapse.length);
+        this.collapseActiveNames.splice(0, this.collapseActiveNames.length);
+        this.collapseFieldsRow.splice(0, this.collapseFieldsRow.length);
+        this.independentItem.splice(0, this.independentItem.length);
+
+        this.$nextTick(function () {
+          if (typeof self.api !== 'undefined') {
+            self.loaderObj.Form(self.api, self.load, this.apiParam, self.failLoad);
+          }
+          else if (typeof self.source !== 'undefined') {
+            self.load(self.loaderObj.Form(self.source));
+          }
+          else if (self.vmodel) {
+            self.load(self.vmodel);
+          }
+        });
+      },
+      failLoad() {
+        this.$emit('failLoad', this.model);
+      },
+      load(data) {
+        this.$set(this, 'model', data);
+        this.model.self = this;
+        if (typeof this.model.scripts !== 'undefined') {
+          this.model.scripts.formData = this.model.formData;
+          this.model.scripts.formData.form = this.model;
+          this.model.scripts.formData.excuteData = this.model.fields;
+          this.model.scripts.formData.fieldsDic = this.model.fieldsDic;
+        }
+        this.loadFields();
+        this.loading = false;
+        //通知父组件加载完成
+        this.$emit('loaded', this.model);
+      },
+      loadFields() {
+        var self = this;
+
+        var collapseItemArr = [];//分组对应元素二维数组
+        var collapseItem = [];//分组对应元素数组
+        let realCollapseActiveNames = [];//真实的默认展开的分组name
+        let isIndependent = false;
+        self.model.fields.forEach((v, index) => {
+          v.index = index;
+          if (v.is === 'ct-independentGroup') {
+            isIndependent = true;
+            return true; //continue 
+          }
+          if (isIndependent) {
+            this.independentItem.push(v);
+          }
+          else if (v.is === 'ct-group') {
+            self.collapse.push(v);
+            if (v.lock || v.isExpand) {
+              realCollapseActiveNames.push(self.collapse.length - 1);
+            }
+            self.collapseActiveNames.push(self.collapse.length - 1);
+
+            collapseItemArr.push(collapseItem);
+            v.collapseName = collapseItemArr.length - 1;
+            collapseItem = [];
+          }
+          else {
+            v.collapseName = collapseItemArr.length - 1;
+            collapseItem.push(v);
+          }
+        });
+        if (collapseItem.length > 0) {
+          collapseItemArr.push(collapseItem);
+        }
+
+        //遍历分组里的组件，计算行列布局
+        for (var i = 0; i < collapseItemArr.length; i++) {
+          var myFilter = collapseItemArr[i];
+
+          self.collapseFieldsRow.push(myFilter);
+        }
+
+        //因有一些子组件需要计算宽度及高度，故要先全部展开在缩起来
+        //也可采用方案二：子组件中，找不到高度，产生一个定时器，找到为止
+        //方案三：在显示分组时，主动触发resize方法
+        self.$nextTick(() => {
+          self.$set(self, 'collapseActiveNames', realCollapseActiveNames);
+        });
+
+        //联动组件处理 todo:去掉，使用form方式
+        var hasParent = self.model.fields.filter((v) => {
+          return typeof v.parentName !== 'undefined';
+        });
+        hasParent.forEach((v, index) => {
+          var parent = self.model.fields.find((v1) => {
+            return v1.id === v.parentName;
+          });
+          if (parent) {
+            parent.child = v;
+            v.parent = parent;
+          }
+        });
+      },
+      fieldClickHandler(field) {
+        var router = this.model.buttons.find((v) => {
+          return v.id === field.id;
+        });
+        if(router==undefined){
+            router = this.model.links.find((v) => {
+            return v.id === field.id;
+          });
+        }
+        if(router==undefined){
+            router = this.model.actionRouters.find((v) => {
+            return v.id === field.id;
+          });
+        }
+        this.clickHandler(router);
+      },
+      clickHandler(field, submitData) {
+        var self = this;
+        this.model.scripts.$fd = field.id;
+        this.model.scripts.$result = [];
+        
+        var clickAcion = function (field) {
+          //若不是客户端方法，则直接访问接口
+          if (!field.isClientFuntion) {
+            if (field.isSubmit) {
+              let verified = true;
+              if (self.validExcute()) {
+                if (typeof field.onClick !== 'undefined') {
+                  verified = self.$common.excute.call(self.model.scripts, field.onClick);
+                }
+
+                if (verified) {
+                  //action有值，提交到后台
+                  if (field.action) {
+                    field.disabled = true;//提交按钮禁用
+                    self.model.pageDisabled= true;
+                    field.doAction(self.getFormObj(), (data) => {
+                      if (data.rtnCode === 200) {
+                        if (self.model.flagAlertClose) {
+                          self.$common.confirm('操作成功，是否关闭本页面?', '提示', {
+                            confirmButtonText: '确定',
+                            cancelButtonText: '取消',
+                            type: 'warning'
+                          }).then(() => {
+                            //如果没有弹框 则关闭tab页
+                            if (self.$common.dialogList && self.$common.dialogList.List.length === 0) {
+                              if (typeof self.$common.getDataDrivenOpts().handler.closeTab === 'function') {
+                                self.$common.getDataDrivenOpts().handler.closeTab();
+                              }
+                            }
+                            self.$emit('submit', { formData: self.model, responseData: data });
+                          }).catch(() => {
+                            self.init();
+                          });
+                        }
+                        else {
+                          self.$emit('submit', { formData: self.model, responseData: data });
+                        }
+                        if (self.parentModel) {
+                          self.parentModel.$vue.closeTabThen(data);
+                        }
+                      }
+                      field.disabled = false;                    
+                      self.model.pageDisabled= false;
+                    });
+                  }
+                  //无值，触发submit事件
+                  else {
+                    self.$emit('submit', { formData: self.model, responseData: {} });
+                  }
+                }
+              }
+            }
+            else {
+              if (typeof field.onClick !== 'undefined') {
+                verified = self.$common.excute.call(self.model.scripts, field.onClick);
+              }
+
+              if (!submitData) {
+                submitData = {};
+                var tempFormData = self.model.getFormObj();
+                field.submitFormField.forEach((v) => {
+                  submitData[v] = tempFormData[v];
+                });
+              }
+
+              if (field.isOpenForm) {
+                var dialogOption = {
+                  title: field.pageTitle,
+                  pane: self.$common.getParentPane(self),
+                  content: [{
+                    component: 'ct-form',
+                    attrs: {
+                      //ssource: data.content,
+                      api: field.action,
+                      apiParam: field.getActionPara(submitData).para,
+                      showTitle: false,
+                      width: field.dialogWidth + 'px',
+                      height: field.dialogHeight + 'px'
+                    },
+                    on: {
+                      submit(ev) {
+                        self.model.updateFields(ev, () => {
+                          self.$refs.Fields.forEach((fd) => {
+                            fd.$forceUpdate();
+                          });
+                        });
+                        self.$common.closeDialog(dialogOption.dialog);
+                      }
+                    }
+                  }]
+                };
+                self.$common.openDialog(dialogOption);
+              }
+              else if (field.isOpenList) {
+                var dialogOption = {
+                  title: field.pageTitle,
+                  pane: self.$common.getParentPane(self),
+                  content: [{
+                    component: 'ct-searchlist',
+                    attrs: {
+                      searchConditionApi: field.actionForSearchLayout,
+                      searchDataApi: field.actionForSearch,
+                      apiParam: submitData,
+                      width: field.dialogWidth + 'px',
+                      height: field.dialogHeight + 'px'
+                    },
+                    on: {
+                      submit(ev) {
+                        self.model.updateFields(ev, () => {
+                          self.$refs.Fields.forEach((fd) => {
+                            fd.$forceUpdate();
+                          });
+                        });
+                        self.$common.closeDialog(dialogOption.dialog);
+                      }
+                    }
+                  }]
+                };
+                self.$common.openDialog(dialogOption);
+              }
+              else if (field.isFormPageInTab || field.isSearchPageInTab) {// 外部框架tab页打开
+                submitData = field.getActionPara(submitData).para;
+                self.$common.getDataDrivenOpts().handler.openTab(field.action, submitData, field.pageTitle);
+              }
+              else if (field.isBrowserNewTab) {// 浏览器打开
+                submitData = field.getActionPara(submitData).para;
+                let query = self.$common.objectToQueryStr(submitData);
+                window.open(field.action + query, "_blank");
+              }
+            }
+          }
+          //执行客户端脚本
+          else {
+            if (!submitData) {
+              submitData = {};
+              var tempFormData = self.model.getFormObj();
+              field.submitFormField.forEach((v) => {
+                submitData[v] = tempFormData[v];
+              });
+            }
+            submitData = field.getActionPara(submitData).para;
+            let title=field.pageTitle==undefined ?field.label:field.pageTitle;
+            submitData.actionType=field.actionType;
+            var fun =self.$common.getDataDrivenOpts().handler[field.action];
+            fun(submitData,title,self.model);
+          }
+        }
+
+        if (field.isSubmit && !self.validExcute()) {
+          return;
+        }
+
+        if (field.alert) {
+          self.$common.confirm(field.alertMsg, field.alertCaption, {
+            confirmButtonText: field.alertOKButtonText,
+            cancelButtonText: field.alertCancelButtonText,
+            //type: 'warning'
+            center: field.alertCenter
+          }).then(() => {
+            clickAcion(field);
+          }).catch(() => {
+          });
+        }
+        else {
+          clickAcion(field);
+        }
+      },
+      changeHandler(field) {
+        var self = this;
+        if (typeof field.change !== 'undefined') {
+          if (typeof this.model.scripts !== 'undefined') {
+            this.model.scripts.formData.setExcuteListData(this.model.fields);
+          }
+          this.model.scripts.$fd = field.id;
+          this.$common.excute.call(this.model.scripts, field.change);
+        }
+
+        self.model.isChanged = true;
+        self.model.hiddenHandle(field);
+        self.model.requiredHandle(field);
+        //self.model.validMrf(field);
+        self.$forceUpdate();
+      },
+      changeCallBackHandler(field, callBackFunName, callBackPara) {
+        var self = this;
+        if(callBackFunName){
+          this.model.scripts.$fd = field.id;
+          this.$common.excuteFunStr.call(this.model.scripts, callBackFunName, callBackPara);
+        }
+        self.$forceUpdate();
+      },
+      inputHandler(field) {
+        if (typeof field.input !== 'undefined') {
+          if (typeof this.model.scripts !== 'undefined') {
+            this.model.scripts.formData.setExcuteListData(this.model.fields);
+          }
+          this.model.scripts.$fd = field.id;
+          this.$common.excute.call(this.model.scripts, field.input);
+        }
+      },
+      popupSearchListHandler(singleSelectio, field, router, callBack) {
+        var self = this;
+        var submitData = {};
+        var tempFormData = self.model.getFormObj();
+
+        var check = true;
+        var checkMsg;
+        router.submitFormField.forEach((v) => {
+          submitData[v] = tempFormData[v];
+          if (typeof tempFormData[v] === "undefined") {
+            if (self.model.fieldsDic[v]) {
+              checkMsg = "请先录入" + self.model.fieldsDic[v].label;
+            }
+            else {
+              checkMsg = "未配置：" + v;
+            }
+            check = false;
+          }
+        });
+
+        if (!check) {
+          self.$message.warning(checkMsg);
+          return;
+        }
+
+        var dialogOption = {
+          title: router.pageTitle,
+          pane: self.$common.getParentPane(self),
+          content: [{
+            component: 'ct-popupSearchList',
+            attrs: {
+              searchFormApi: router.actionForSearchLayout,
+              searchDataApi: router.actionForSearch,
+              apiParam: submitData,
+              singleSelectio: singleSelectio,
+              width: router.dialogWidth + 'px',
+              height: (router.dialogHeight || 500) + 'px'
+            },
+            on: {
+              submit(option) {
+                if (typeof callBack === "function" && !router.callBackFunName) {
+                  callBack(option);
+                }
+
+                self.changeCallBackHandler(field, router.changeCallBackFunName, option);
+              }
+            }
+          }]
+        };
+        this.$common.openDialog(dialogOption);
+      },
+      validExcute() {
+        var self = this;
+        var rtnBool = true;
+        var jump = false;
+        self.$refs.Fields.forEach((f) => {
+          if (f.model && typeof f.validExcute !== 'undefined') {
+            if (!f.validExcute()) {
+              if (!jump) {
+                if (this.model.isHorizontalLayout) {//水平布局
+                  this.activeName = f.model.collapseName.toString();
+                  jump = true;
+                }
+                else {//垂直布局
+                  let timeOut = 0;
+                  //展开折叠
+                  if (f.collapseName != -1 && self.collapseActiveNames.indexOf(f.model.collapseName) == -1) {
+                    self.collapseActiveNames.push(f.model.collapseName);
+                    timeOut = 300;//展开折叠有个时间并影响滚动条位置，故需要延迟
+                  }
+
+                  setTimeout(function () {
+                    if (f.$el.offsetParent && f.$el.offsetParent.offsetParent) {
+                      let total = f.$el.offsetParent.offsetParent.offsetTop;
+                      //this.$common.setScrollTop(total);
+
+                      if (f.$el.offsetParent.offsetParent.offsetParent === null || f.$el.offsetParent.offsetParent.classList[0] === 'app-main') {
+                        total = f.$el.offsetParent.offsetTop;
+                        this.$common.setScrollTop(total);
+                      }
+                      else if (f.$el.offsetParent.offsetParent.offsetParent.localName === "body") {
+                        this.$common.setScrollTop(total);
+                      }
+                      else {
+                        f.$el.offsetParent.offsetParent.offsetParent.scrollTop = total;
+                      }
+                    }
+                    //let input = f.$el.querySelector('input');
+                    //if (input) {
+                    //  input.focus();
+                    //}
+                  }, timeOut);
+                  jump = true;
+                }
+              }
+              rtnBool = false;
+            }
+          }
+        });
+        return rtnBool;
+      },
+      collapseHandleChange(itemArr) {
+        let fieldTarget = this.model.fields.filter((v) => {
+          return itemArr.indexOf(v.collapseName) > 0;
+        });
+        fieldTarget.forEach((f) => {
+          if (f.self && f.self.resize) {
+            f.self.resize();
+          }
+        });
+      },
+      getFormObj(){
+        let formData=this.model.getFormObj();
+        if(this.$route && this.$route.query && this.$route.query.pageStyle)
+        {
+           return Object.assign(formData,{'pageStyle':this.$route.query.pageStyle});
+        }
+        return formData;
+      },
+     
+    }
+  }
+</script>
+<style scoped>
+.el-collapse{
+  border-top: none;
+}
+</style>