<template>
    <div style="height: 100%;width: 100%;padding: 5px 0;overflow-y: auto">
        <el-form :model="optFormData" :rules = "rules"
                 label-width="120px" class="form-class" size="medium" v-if="loadDataSuccess">
            <el-row style="display:flex;flex-wrap:wrap">
                <spcp-form-wrapper v-for="(item,index) in formConstructor" v-show="!(bindProperties[item.fieldId] || {}).hideComponent"
                                   :key="index" v-bind:wrapper-props="item.wrapperProps" :field-id="item.fieldId">
                    <component :is="item.spcpComponent" :dataConstructor="item" :spcpFormData="optFormData"
                               :id="item.fieldId + '_component'" :fieldId="item.fieldId" :style="(bindProperties[item.fieldId] || {}).spcpCss"
                    ></component>
                </spcp-form-wrapper>
            </el-row>
        </el-form>
    </div>
</template>
<script>
import spcpFormWrapper from './spcpFormWrapper.vue';
import {AjaxUtil, Replace} from "sasp-base";
import tableFormMixin  from "../js/tableFormMixin";
export default {
    name: "form-view",
    mixins: [tableFormMixin],
    props:{
        tableviewId:{type:String,default:'f81fca26b66c11eea6ac1923521be5eb'},
    },
    components: {spcpFormWrapper},
    data(){
        return {
            formConstructor: [{
                spcpComponent:'spcp-input',
                wrapperProps:{}
            },{
                spcpComponent:'spcp-input',
                wrapperProps:{}
            }],
            bindFieldEvent: {}, // fieldId对应的事件方法
            bindProperties: {}, // 所有控件对应的配置信息
        }
    },
    provide:function(){
        return {
            bindProperties: this.bindProperties
        }
    },

    computed:{

    },

    watch:{
        optFormData:{
            handler:function() {
                if(this.loadDataSuccess && this.delayWatchData){
                    this.getVisiableByCondition();
                }
                if(this.loadDataSuccess){
                    //加载表单隐藏条件
                    this.initFormBtnVisible();
                    this.makeSettingInfo(); // 当表单的值变化后，需要重新渲染组件的配置信息，甚至包括组件的类型
                }
            },
            deep: true
        },
        formOperate(){
            this.operate = this.formOperate;
        },
        compositeObj:{
            handler:function() {
                //刷新复合视图

            },
            deep: true
        },
        bindFieldEvent:{
            handler:function() {
                if(this.loadDataSuccess){
                    this.$nextTick().then(() => {
                        this.bindEvent();
                    })
                }
            },
            deep: true
        },
        dataAllObj:{
            handler:function() {
                if(this.loadDataSuccess){
                    this.makeSettingInfo(); // 当表单的配置信息变化后，需要重新渲染组件的配置信息，甚至包括组件的类型
                }
            },
            deep: true
        },
        loadDataSuccess(){
            if(this.loadDataSuccess){
                this.$nextTick().then(() => {
                    this.bindEvent();
                })
            }
        }
    },

    beforeDestroy() {
        this.bindEvent("remove");
    },

    created() {
      window.currentDataSourceKey = "09ecd1f931be42b2896f3cc9270d2011";
      this.initData2();
    },
    methods:{
        bindEvent(type){
            Object.keys(this.bindFieldEvent).forEach(fieldId => {
                let $on = this.bindFieldEvent[fieldId];
                Object.keys($on || {}).forEach(key => {
                    let comp = document.getElementById(fieldId + '_component');
                    if(comp){
                        if(type === "remove"){
                            comp.removeEventListener(key,$on[key]);
                        }else{
                            comp.addEventListener(key,$on[key]);
                        }
                    }
                })
            })
        },
        /**
         * 覆盖mixin中的方法，在这里处理数据结构等
         * @returns {Promise<unknown>}
         */
        loadFormRenderData2() {
            return new Promise(resolve => {
                this.FORM_GLOBAL.getControlConfig(this.tableviewId,this.loginUser.userType).then(resData =>{
                    this.groupFieldObj = {};
                    this.tabsFieldObj = {};
                    this.inGroupFieldIdArr = [];
                    this.inTabsFieldIdArr = [];
                    (resData || []).forEach(item => {
                        if(typeof(item.specialSet) == 'string'){
                            item.specialSet = JSON.parse(item.specialSet || "{}");
                        }
                        let objTd = {};
                        (item.colCss || "").split(";").forEach(item => {
                            let tempArrTd = item.split(":");
                            if (tempArrTd.length === 2) {
                                objTd[tempArrTd[0]] = tempArrTd[1];
                            }
                        });
                        this.$set(item, 'td-style', objTd);
                        Object.keys(item.specialSet).forEach(key => {
                            if (Object.keys(item).indexOf(key) == -1) {
                                item[key] = item.specialSet[key];
                            }
                        });
                        if (item.controlType === "editList") {
                            this.editTableFormId.push(item.linkFormId);
                        }
                        if (item.isUserBackfill && item.isUserBackfill === "1"){
                            this.userBackfillArr.push(item);
                        }
                        if(item.groupField){
                            this.inGroupFieldIdArr.push(item.code);
                            if(!this.groupFieldObj[item.groupField]){
                                this.groupFieldObj[item.groupField] = [];
                            }
                            this.groupFieldObj[item.groupField].push(item);
                        }
                        if(item.tabsField){
                            this.inTabsFieldIdArr.push(item.code);
                            if(!this.tabsFieldObj[item.tabsField]){
                                this.tabsFieldObj[item.tabsField] = [];
                            }
                            this.tabsFieldObj[item.tabsField].push(item);
                        }
                        if (item.controlType === 'mapManagement' || item.controlType === 'regionalContour') {
                            this.plMapModuleArr.push(item);
                        }
                        item.spcpComponent = this.getComponentName(item.controlType);
                        let $on = this.bindViewsEvent(item.fieldId);//组件动态绑定事件
                        let $nativeOn = this.bindTableViewsEvent(item.fieldId); //动态绑定事件规则
                        let bindEvent = Object.assign($on,$nativeOn);
                        if(bindEvent && Object.keys(bindEvent).length > 0){
                            this.bindFieldEvent[item.fieldId] = bindEvent;
                        }
                        this.dataAllObj[item.fieldId] = item;

                    });
                    this.makeSettingInfo(); // 解析组件配置属性
                    // resData.push({
                    //     spcpComponent: "spcp-group",
                    //     hideShowName:"false",
                    //     name:"分组",
                    //     wrapperProps: {
                    //         spcpCols: 24,
                    //         spcpLabel:"分组",
                    //         closeFormItem: true
                    //     },
                    //     children:[
                    //         {
                    //             spcpComponent: "spcp-input",
                    //             wrapperProps: {
                    //                 spcpCols: 12,
                    //                 spcpLabel:"输入框",
                    //             }
                    //         },
                    //         {
                    //             spcpComponent: "spcp-select",
                    //             wrapperProps: {
                    //                 spcpCols: 12,
                    //                 spcpLabel:"下拉框",
                    //             }
                    //         },
                    //         {
                    //             spcpComponent: "spcp-select",
                    //             wrapperProps: {
                    //                 spcpCols: 12,
                    //                 spcpLabel:"下拉框",
                    //             }
                    //         }
                    //     ]
                    // })
                    this.formConstructor = resData || [];
                    this.contentArr = resData || [];
                    // let result = new commonRender().renderTrs(this.contentArr,'pc',this.inGroupFieldIdArr,this.operate,this.inTabsFieldIdArr);
                    // this.renderArr = result[0];
                    // this.dataAllObj = result[1];
                    this.oldDataAllObj = JSON.parse(JSON.stringify(this.dataAllObj)); //拷贝一份
                    //初始化验证
                    if (this.operate !== 'view'){
                        // (this.renderArr || []).forEach((tr, trIndex) => {
                        //     (tr["tds"] || []).forEach((td, tdIndex) => {
                        //         this.buidRules(td, trIndex, tdIndex);
                        //     });
                        // });
                        if(this.isGroup){
                            (this.groupArr || []).forEach((tr,trIndex) =>{
                                (tr["tds"] || []).forEach((td,tdIndex) =>{
                                    this.buidRules(td,trIndex,tdIndex);
                                });
                            });
                        }else if(this.isTabs){
                            (this.tabsArr || []).forEach((tr,trIndex) =>{
                                (tr["tds"] || []).forEach((td,tdIndex) =>{
                                    this.buidRules(td,trIndex,tdIndex);
                                });
                            });
                        }else{
                            (this.renderArr || []).forEach((tr,trIndex) =>{
                                (tr["tds"] || []).forEach((td,tdIndex) =>{
                                    this.buidRules(td,trIndex,tdIndex);
                                });
                            });
                        }
                    }
                    resolve();
                });
            });
        },

        /**
         * 解析组件配置信息
         */
        makeSettingInfo(){
            Object.keys(this.dataAllObj).forEach(fieldId => {
                let dataSetting = this.dataAllObj[fieldId];
                this.buidRules(dataSetting); // 验证规则
                let labelName = dataSetting.showName; // 显示名称
                let hideShowName = dataSetting.hideShowName; //隐藏标题
                dataSetting.wrapperProps = {
                    spcpCols: Number(dataSetting.fieldInclue),
                    spcpLabel: dataSetting.showName,
                    render: true,
                    hideShowName: hideShowName,
                    labelName: hideShowName === "是" ? "":labelName // 如果是隐藏标题显示名称为空
                };
                let field = dataSetting.fieldId;
                let flowFieldStatus = this.flowFieldStatus[field];
                if(this.isFlow && flowFieldStatus === "hide"){
                    dataSetting.wrapperProps.render = false;
                    return;
                }
                let disabled = dataSetting.editable !== 'true'; // 内部的变量参数都要提取出来，在这里操作
                if(this.isFlow && flowFieldStatus !== "edit" && flowFieldStatus !== "hide"){
                    disabled = true;
                }else if(this.isFlow && flowFieldStatus === "edit"){
                    disabled = false;
                }
                if(dataSetting.editable === "false"){ // 智能建表不可编辑工作流可编辑以智能建表为准
                    disabled = true;
                }
                let formSize = this.tableviewsData.formSize;
                let placeholder = dataSetting.placeholder;
                let hideComponent = !dataSetting.visible || dataSetting.visible === "false";
                let bindProps = {spcpComponent: this.getComponentName(dataSetting.controlType),
                                 placeholder:placeholder,disabled:disabled,hideComponent:hideComponent};
                dataSetting.bindProps = bindProps;
                let controlWidth = dataSetting.controlWidth;
                if(controlWidth){
                    bindProps.spcpCss = "width:" + controlWidth + ";";
                }else{
                    bindProps.spcpCss = "width:100%;";
                }
                if(dataSetting.controlCss){
                    bindProps.spcpCss += ";" + dataSetting.controlCss;
                }
                this.$set(this.bindProperties, field , bindProps); // 所有控件对应的配置信息
                let muliti =  dataSetting.muliti;//是否多选
                let measurement = dataSetting.measurement;//计量单位
                let measurementShow = false;
                let measurementId="measurement"+field;
                //计算单位宽度
                if (measurement !== undefined && measurement !== "") {
                  measurementShow = true;
                }

                // 解析组件的配置信息
                switch (dataSetting.controlType){
                    case "input":
                    case "password":
                    case "textarea":
                        if(dataSetting.controlType === "textarea" && dataSetting.editor === "true") { // 富文本编辑器
                            this.$set(this.plUeditorObj,field,true);
                            Object.assign(bindProps,{
                                editor: true,
                                editable: dataSetting.editable,
                                config:{'height':(Number(dataSetting.editorRows) || 3) * 28}
                            })
                        }else{
                            let autoSizeObj = {};
                            let minRowsTmp = Number(dataSetting["minRows"]);
                            if(!minRowsTmp){
                                minRowsTmp = 1;
                            }
                            autoSizeObj["minRows"] = minRowsTmp;
                            let maxRowsTmp = Number(dataSetting["maxRows"]);
                            if(maxRowsTmp){
                                autoSizeObj["maxRows"] = maxRowsTmp;
                            }
                            if(dataSetting.autoSize){
                                delete autoSizeObj["maxRows"];
                            }
                            let replaceText = this.optFormData[field];
                            if(this.optFormData[field] == null || this.optFormData[field] === undefined){
                                replaceText = '';
                            }
                            let val = Replace.text(null,replaceText);
                            this.$set(this.optFormData,field,val);
                            if(this.isEditTableForm) {
                                this.$set(this.parentOptTableData,field,val);
                                this.$set(this.parentOptTableData,"editTable_"+field,val);
                            }
                            Object.assign(bindProps,{
                                autosize:autoSizeObj,
                                type: dataSetting.controlType,
                                "show-password": dataSetting.controlType === "password",
                                "auto-complete":"new-password"
                            })
                        }
                        break;
                    case "select":
                        if(this.isEditTableForm) {
                            this.$set(this.parentOptTableData,field,this.optFormData[field] || '');
                            this.$set(this.parentOptTableData,"editTable_"+field,this.optFormData[field] || '');
                        }
                        let filterable = (!dataSetting.filterable || dataSetting.filterable === 'true');
                        let allowCreate = ((!dataSetting.filterable || dataSetting.filterable === 'true') && dataSetting.alloCreate === 'true');
                        Object.assign(bindProps,{
                            filterable: filterable,
                            allowCreate: allowCreate,
                            rememberSysDataObj:this.rememberSysDataObj,
                            multiple:muliti === 'true',
                            selectType: dataSetting.selectType
                        })
                        if(dataSetting.selectType === "remote"){ // 链接远程加载

                            function changeUlr(url,vm){
                                if(url.indexOf("${parentOptFormData.") > -1){
                                    let param =  url.substring(url.indexOf("${parentOptFormData.")+20,url.indexOf('}'));
                                    let value = "";
                                    if(param ){
                                        value = vm.parentOptFormData[param]||"";
                                        param = "${parentOptFormData." + param + "}";
                                        url = vm.platStringUtil.replaceAll(url,param,value);
                                    }
                                    return changeUlr(url,vm);
                                }else if(url.indexOf("${optFormData.") > -1){
                                    let param =  url.substring(url.indexOf("${optFormData.")+14,url.indexOf('}'));
                                    let value = "";
                                    if(param ){
                                        value = vm.optFormData[param]||"";
                                        param = "${optFormData." + param + "}";
                                        url = vm.platStringUtil.replaceAll(url,param,value);
                                    }
                                    return changeUlr(url,vm);
                                }else{
                                    return url;
                                }
                            }
                            let params = "";
                            if ((dataSetting.reqUrlParams || []).length > 0) {
                                (dataSetting.reqUrlParams || []).forEach((item) => {
                                    if (item.type === 'form')  {
                                        params += "&" + item.label + '=' + this.optFormData[item.value];
                                    } else {
                                        params += "&" + item.label + '=' + item.value;
                                    }
                                });
                            }
                            if (params) {
                                params = "?" + params.substring(1);
                            }
                            let reqUrl = changeUlr(dataSetting.reqUrl + params,this);
                            Object.assign(bindProps,{
                                reqUrl: reqUrl,
                                typeId: "",
                                field: field,
                                labelField:dataSetting.textField ,
                                valueField:dataSetting.valueField,
                                defultValue:dataSetting.defaultVal,
                                displayColFieIds: dataSetting.displayColFieIds,
                                backfillSetting: dataSetting.backfillSetting,
                                formData:this.optFormData,
                                listOutParam:this.listOutParam,
                                isTreeData:dataSetting.isTreeData,
                                treeDataType:dataSetting.treeDataType,
                                backParentName:dataSetting.backParentName,
                                changeField:this.changeField,
                                skinType: this.skinType
                            })
                        }else if(dataSetting.selectType === "form"){ // 智能表单加载
                            Object.assign(bindProps,{
                                dataFormId: dataSetting.dataFormId || '',
                                field:field,
                                labelField:dataSetting.textField ,
                                valueField:dataSetting.valueField,
                                value:this.optFormData[field],
                                skinType: this.skinType
                            })
                        }else if(dataSetting.selectType === "sysData"){ // 数据字典加载
                            Object.assign(bindProps,{
                                typeId: dataSetting.dataDic || '',
                                field:field,
                                parentId:dataSetting.parentId,
                                value:this.optFormData[field],
                                skinType: this.skinType
                            })
                        }else if(dataSetting.selectType === 'select'){  //自定义下拉框
                            let obj = {};
                            (dataSetting.optionSetting||[]).forEach(item => {
                                obj[item.value] = item.label;
                            });
                            Object.assign(bindProps,{
                                filterable: true,
                                optionSetting: dataSetting.optionSetting || [],
                                skinType: this.skinType
                            })
                            this.rememberSysDataObj(field,obj);
                        }
                        break;
                    case "radio":
                        Object.assign(bindProps,{
                            radioType: dataSetting.radioType
                        })
                        if(dataSetting.radioType === "sysData"){
                            Object.assign(bindProps,{
                                typeId: dataSetting.dataDic || '',
                                field:field,
                                rememberSysDataObj: this.rememberSysDataObj
                            })
                        }else if(dataSetting.radioType === "radio"){
                            Object.assign(bindProps,{
                                optionSetting: dataSetting.optionSetting || []
                            })
                            let obj = {};
                            (dataSetting.optionSetting||[]).forEach(item => {
                                obj[item.label] = item.label;
                            });
                            this.rememberSysDataObj(field,obj);
                        }
                        break;
                    case "checkbox":
                        Object.assign(bindProps,{
                            checkboxType: dataSetting.checkboxType
                        })
                        if(dataSetting.checkboxType === "sysData"){
                            Object.assign(bindProps,{
                                typeId: dataSetting.dataDic || '',
                                field:field,
                                rememberSysDataObj: this.rememberSysDataObj
                            })
                        }else{
                            Object.assign(bindProps,{
                                checkboxArr: dataSetting.optionSetting || []
                            })
                            let obj = {};
                            (dataSetting.optionSetting||[]).forEach(item => {
                                obj[item.label] = item.value || item.label;
                            });
                            this.rememberSysDataObj(field,obj);
                        }
                        break;
                    case "time":
                        let startTime = ""; //开始时间
                        let endTime = "";  //结束时间
                        let startTimeArr = []; //开始时间数组
                        let endTimeArr = []; //结束时间数组
                        //计算结束时间(取最小日期 系统时间、比较字段,自定义时间)
                        if((dataSetting.maxDate || "").includes('自定义时间')){
                            endTime = dataSetting.diyTimeMax; //自定义最大时间
                        }
                        if((dataSetting.maxDate || "").includes('系统时间')){
                            endTime = this.viewDateFormat(new Date(),dataSetting.displayFormatter || 'yyyy-MM-dd');
                        }
                        if((dataSetting.maxDate || "").includes('参考表单字段')){
                            (dataSetting.referFieldMax || []).forEach(refField =>{
                                if(this.optFormData[refField]){
                                    let maxTime = this.optFormData[refField];
                                    if(isNaN(maxTime) && !isNaN(Date.parse(maxTime))){
                                        endTime =   this.viewDateFormat(maxTime,dataSetting.displayFormatter || 'yyyy-MM-dd');
                                    }
                                }
                            });
                        }
                        if(endTime){
                            endTimeArr.push(endTime);//最大时间
                        }
                        if((dataSetting.minDate || "").includes('自定义时间')){
                            startTime = dataSetting.diyTimeMin; //自定义最小时间
                        }
                        if((dataSetting.minDate || "").includes('系统时间')){
                            startTime = this.viewDateFormat(new Date(),dataSetting.displayFormatter || 'yyyy-MM-dd');
                        }
                        if((dataSetting.minDate || "").includes('参考表单字段')){
                            (dataSetting.referFieldMin || []).forEach(refField =>{
                                if(this.optFormData[refField]){
                                    let minTime = this.optFormData[refField];
                                    if(isNaN(minTime) && !isNaN(Date.parse(minTime))){
                                        startTime =   this.viewDateFormat(minTime,dataSetting.displayFormatter || 'yyyy-MM-dd');
                                    }
                                }
                            });
                        }
                        if(startTime){
                            startTimeArr.push(startTime);//最大时间
                        }
                        //获取最大时间数组中最的最小值
                        let endDate =  this.getMinDateInMaxDateArr(endTimeArr);
                        let startDate = this.getMaxDateInMinDateArr(startTimeArr);

                        Object.assign(bindProps,{
                            'type':this.formatterDateType(dataSetting.displayFormatter),
                            'valueFormat':(dataSetting.displayFormatter || 'yyyy-MM-dd'),
                            'format':(dataSetting.displayFormatter || 'yyyy-MM-dd'),
                            'maxDate':endDate,
                            'minDate':startDate,
                            'editable': !disabled,
                            'isContainsMaxDate':dataSetting.isContainsMaxDate || '1',
                            'isContainsMinDate':dataSetting.isContainsMinDate || '1',
                            'skinType': this.skinType,
                        })

            break;
          case "currency":
            let autoSizeObj = {};
            let minRowsTmp = Number(dataSetting["minRows"]);
            if(!minRowsTmp){
              minRowsTmp = 1;
            }
            autoSizeObj["minRows"] = minRowsTmp;
            let maxRowsTmp = Number(dataSetting["maxRows"]);
            if(maxRowsTmp){
              autoSizeObj["maxRows"] = maxRowsTmp;
            }
            if(dataSetting.autoSize){
              delete autoSizeObj["maxRows"];
            }
            let replaceText = this.optFormData[field];
            if(this.optFormData[field] == null || this.optFormData[field] === undefined){
              replaceText = '';
            }
            let val = Replace.text(null,replaceText);
            this.$set(this.optFormData,field,val);
            let currencyType = "";
            if(dataSetting.currencyType === "yuan") {
              currencyType = "¥";
            }else if(dataSetting.currencyType === "dollar") {
              currencyType = "$";
            }
            if(this.isEditTableForm) {
              this.$set(this.parentOptTableData,field,val);
              this.$set(this.parentOptTableData,"editTable_"+field,val);
            }
            Object.assign(bindProps,{
              currencyType: currencyType,
            });
            break;
          case "contactParty":
            if(this.isEditTableForm) {
              this.$set(this.parentOptTableData,field,this.optFormData[field] || '');
              this.$set(this.parentOptTableData,"editTable_"+field,this.optFormData[field] || '');
            }
            Object.assign(bindProps,{
              prop: field,
              checkType: muliti === '是' ? 'checkbox' : 'radio',
              contactType: dataSetting.contactType,
              backfillField: dataSetting.callbackField,
              showName: dataSetting.showName,
              buttonName:dataSetting.buttonName,
              buttonIcon:dataSetting.buttonIcon,
              ignoreUper:true,
              value: this.optFormData,
              contactValue:this.optFormData[field],
              outOtherUserItem:this.listOutParam.OTHER_USER_ITEM || '',
            });
            break;
          case "enclosure"://附件
            let plFileType = dataSetting.fileType || [];//附件上传类型
            let type = "";
            if(typeof plFileType == 'string'){
              plFileType = plFileType.split(",");
            }
            plFileType.forEach(fileType => {
              type += "," + this.objFileTypeImgs[fileType].join(",");
            });
            let limitNum = dataSetting.limitNum;//上传附件数量
            let candownload = dataSetting.candownload||true;
            candownload = candownload !== "false";
            let props;
            let downInstructions = dataSetting.downInstructions && dataSetting.downInstructions === '1';

            let singleFileSize = dataSetting.singleFileSize;
            let singleFileSizeType = dataSetting.singleFileSizeType;
            let totalFileSize = dataSetting.fileSize;
            let totalFileSizeType = dataSetting.fileSizeType;
            if(singleFileSize){
              if(singleFileSizeType === "KB"){
                singleFileSize = Number(singleFileSize)/1024;
              }
              if(singleFileSizeType === "GB"){
                singleFileSize = Number(singleFileSize)*1024;
              }
            }
            if(totalFileSize){
              if(totalFileSizeType === "KB"){
                totalFileSize = Number(totalFileSize)/1024;
              }
              if(totalFileSizeType === "GB"){
                totalFileSize = Number(totalFileSize)*1024;
              }
            }

            if(this.isEditTableForm) {
              this.$set(this.parentOptTableData,field,this.optFormData[field] || '');
              this.$set(this.parentOptTableData,"editTable_"+field,this.optFormData[field] || '');
            }

            Object.assign(bindProps,{
              fkId: this.uploadFkInfo[field],
              plFileType: type.substring(1),
              field: field,
              size: formSize,
              extraPath: this.extraPath,
              tempRemoveFile:this.tempRemoveUploadFile,
              uploadFileRecord:this.uploadFileRecord,
              isView: disabled,
              candownload:candownload,
              downInstructions:downInstructions,
              totalFileSize:totalFileSize,
              singleFileSize:singleFileSize
            });
            if(limitNum){
              Object.assign(bindProps,{
                limit:Number(limitNum)
              });
            }
            break;
          case "enclosureButton"://附件按钮
            let description = "可上传";
            let types = "";
            dataSetting.fileType.forEach(type => {
              types += "/" + this.objFileTypeImgs[type].join("/");
            });
            description += types.substring(1) + "类型的文件";
            Object.assign(bindProps,{
              buttonName: dataSetting.buttonName,
              description: description,
              fileType: types.substring(1),
              extraPath: this.extraPath
            });
            break;
          case "enclosureView"://附件展示框
            Object.assign(bindProps,{
              enclosureType: dataSetting.enclosureType
            });
            if(dataSetting.enclosureType === 'enclosure'){
              // 将组件改为pl-upload
              dataSetting.spcpComponent = "pl-upload";
              Object.assign(bindProps,{
                fkId: this.uploadFkInfo[dataSetting.fieldId] || '',
                isView:true,
                extraPath:this.extraPath
              });
            }else{
              // 将组件改为pl-image
              dataSetting.spcpComponent = "plImage";
              Object.assign(bindProps,{
                fkid: this.uploadFkInfo[field] || '',
                title:dataSetting.title,
                isDisabled:true,
                imgHeight:Number(dataSetting.controlHeight) || 80,
                imgWidth:Number(dataSetting.pictureWidth) || 80,
                maxSize:Number(dataSetting.picSize),
                unit:dataSetting.picSizeType,
                size:formSize
              });
            }
            break;
          case "iframeLink"://iframe
            let width = "100%";
            let height = "100px";
            if(dataSetting.controlWidth.indexOf("%") > -1){
              this.$set(dataSetting,'controlWidth',dataSetting.controlWidth.split("%")[0]);
            }else if(dataSetting.controlWidth.indexOf("px") > -1){
              this.$set(dataSetting,'controlWidth',dataSetting.controlWidth.split("px")[0]);
            }
            width = dataSetting.controlWidth + dataSetting.controlWidthUnit;
            height = dataSetting.controlHeight + dataSetting.controlHeightUnit;
            let url = dataSetting.url;
            let param = dataSetting.param || "";
            if(param){
              url += "?" + param;
            }
            Object.assign(bindProps,{
              src: url,
              name: dataSetting.title,
              frameBorder: dataSetting.border === '显示' ? 1 : 0,
              styleMap: {'width':width,'height':height}
            });
            break;
          case "pictureSet"://图片
            Object.assign(bindProps,{
              fkid: this.uploadFkInfo[field] || '',
              title:dataSetting.title,
              imgHeight:Number(dataSetting.controlHeight),
              imgWidth:Number(dataSetting.pictureWidth) || 80,
              plFileType:dataSetting.picType || '', //图片上传类型
              maxSize:Number(dataSetting.picSize),
              unit:dataSetting.picSizeType,
              size:formSize
            });
            break;
          case "titleBox"://标题栏
            // if(dataSetting.virtualRequire === "1"){
            //   virtualStar = <span attrs={{style: 'color: red; position: absolute;right:2px;' +
            //         'line-height:25px;height: 20px;margin: auto;top: 0;bottom: 0;font-weight:normal'}}>*</span>;
            // }
            //
            let titleStyle = dataSetting["td-style"] || {};
            let titleStyleStr = '';
            Object.keys(titleStyle).forEach(key => {
              titleStyleStr += key + ":" + titleStyle[key] + ";";
            })
            let textAlignText = 'center';
            if(dataSetting.titlePos){
              if(dataSetting.titlePos !== 'main'){
                textAlignText = dataSetting.titlePos;
              } else {
                textAlignText = this.tableviewsData.viewAlign;
              }
            } else {
              textAlignText = 'center';
            }
            bindProps.spcpCss = 'text-align:' + textAlignText + ';' + dataSetting.controlCss + ";" + dataSetting.colCss;
            // content.push(
            //     <pl-title-box  attrs={{style:controlCss,class:'title-box-style',id:field}}
            //                    ref={'title_'+field} nativeOn={$nativeOn}
            //                    props={{virtualVerLine:dataSetting.virtualVerLine == '1'}}
            //     >
            //       {dataSetting.title}
            //       {virtualStar}
            //     </pl-title-box>
            // );
            Object.assign(dataSetting.wrapperProps, {
              labelName: "",
              // closeFormItem: true,
            });
            Object.assign(bindProps,{
              virtualVerLine: dataSetting.virtualVerLine === '1',
              virtualRequire: dataSetting.virtualRequire === '1',
              title: dataSetting.title
            });
            break;
          case "addComments"://追加意见
            //panelHeight为number类型，则截取 controlHeight后缀
            let panelHeight = dataSetting.controlHeight || '';
            if(panelHeight.indexOf("px") > -1){
              panelHeight =  panelHeight.substring(0,panelHeight.indexOf("px"));
            }else if(panelHeight.indexOf("%")> -1){
              panelHeight =  panelHeight.substring(0,panelHeight.indexOf("%"));
            }
            if(this.isEditTableForm) {
              this.$set(this.parentOptTableData,field,this.optFormData[field] || '');
              this.$set(this.parentOptTableData,"editTable_"+field,this.optFormData[field] || '');
            }

            Object.assign(bindProps,{
              width: dataSetting.controlWidth || "100%",
              panelHeight: Number(panelHeight) || 0,
              isWatch: false
            });
            break;
          case "displayBox"://展示框
            // let $domProps={};
            // dataSetting.defaultVal = Replace.textToHTML(dataSetting.defaultVal || '');
            // $domProps = {
            //   innerHTML: dataSetting.defaultVal
            // };
            // if(dataSetting.virtualRequire == "1"){
            //   virtualStar = <span attrs={{style: 'color: red; position: absolute;right:2px;' +
            //         'line-height:25px;height: 20px;margin: auto;top: 0;bottom: 0;font-weight:normal'}}>*</span>;
            // }
            // controlCss = 'padding:0 5px;box-sizing:border-box;min-height:45px;line-height:45px;' + controlCss;
            // content.push(
            //     <div attrs={{style:controlCss,class:'display-box-style'}}>
            //       <span domProps={$domProps}></span>
            //       {virtualStar}
            //     </div>
            // );
            Object.assign(bindProps, {
              title: dataSetting.defaultVal
            });
            break;
            //分割线
          case "dividingLine":
            Object.assign(bindProps,{
              content:dataSetting.content,
              contentPosition:dataSetting.contentPosition,
              icon:dataSetting.icon
            });
            break;
          case "group"://分组
            let result = new commonRender().renderTrs(this.groupFieldObj[dataSetting.code],'pc',[],this.operate);
            if(this.groupRefs.indexOf(field) === -1){
              this.groupRefs.push(field);
            }
            Object.assign(bindProps,{
              name:dataSetting.showName,
              dataSetting:dataSetting,
              groupArr:result[0],
              isEditData:true,
              uploadFkInfo:this.uploadFkInfo,
              tableviewEventArr:this.tableviewEventArr,
              conditionEventRuleArr:this.conditionEventRuleArr,
              newConditionEventRuleArr:this.newConditionEventRuleArr,
              tableviewsData:this.tableviewsData,
              addCommentsFields:this.addCommentsFields,
              relationId:this.relationId,
              newControlEventObj:this.newControlEventObj,
              controlEventObj:this.controlEventObj,
              isFlow:this.isFlow,
              flowFieldStatus:this.flowFieldStatus,
              fieldSysDataObj:this.fieldSysDataObj,
              // spcpFormData:this.optFormData,
              dataAllObj:this.dataAllObj,
              formOperate:this.operate
            });
            break;
          case "tabs"://分组
            Object.assign(bindProps,{
              name:dataSetting.showName,
              dataSetting:dataSetting,
              tabsArr:this.tabsFieldObj[dataSetting.code],
              isEditData:true,
              uploadFkInfo:this.uploadFkInfo,
              tableviewEventArr:this.tableviewEventArr,
              conditionEventRuleArr:this.conditionEventRuleArr,
              newConditionEventRuleArr:this.newConditionEventRuleArr,
              tableviewsData:this.tableviewsData,
              addCommentsFields:this.addCommentsFields,
              relationId:this.relationId,
              newControlEventObj:this.newControlEventObj,
              controlEventObj:this.controlEventObj,
              isFlow:this.isFlow,
              flowFieldStatus:this.flowFieldStatus,
              fieldSysDataObj:this.fieldSysDataObj,
              // spcpFormData:this.optFormData,
              dataAllObj:this.dataAllObj,
              formOperate:this.operate
            });
            break;
          case "blankLine"://空行
            // content.push(
            //     <el-row ref={field} nativeOn={$nativeOn}>
            //       <el-col span={24}   style={{'height':dataSetting.controlHeight}}  >
            //       </el-col>
            //     </el-row>
            // );
              Object.assign(bindProps,{
                height:dataSetting.controlHeight
              });
            break;

          case "blankCol"://空列
            // content.push(
            //     <el-row ref={field} nativeOn={$nativeOn}>
            //       <el-col span={Number(dataSetting.fieldInclue)} style={{'height':dataSetting.controlHeight}}
            //               attrs={{style:controlCss}}>
            //       </el-col>
            //     </el-row>
            // );
            break;
          case "hyperlink"://超链接
            Object.assign(bindProps,{
              id:field,
              linkContent:dataSetting.linkTitle,
              width:dataSetting.dialogWidth,
              height:dataSetting.dialogHeight,
              linkStyle:dataSetting.controlCss,
              showName:dataSetting.showName,
              linkUrl:dataSetting.url,
              linkType:dataSetting.openType,
              size:formSize
            });
            break;
          case "cascadeSelect"://级联下拉框（多下拉框）
            let disabledCas = "";//是否只读
            let cascadeRules = {};//校验规则
            // let cascadeSetArr = [];
            let cascadeSetArr = dataSetting.cascadeSetArr || [];
            // if(cascadeSpecial){
            //     cascadeSetArr = cascadeSpecial.cascadeSetArr || [];
            // }
            let flowDisable = false;
            if(this.isFlow && flowFieldStatus !== "edit" && flowFieldStatus !== "hide"){
              flowDisable = true;
            }
            cascadeSetArr.forEach(setObj => {
              if(!this.optFormData[setObj.fieldId]){
                this.$set(this.optFormData,setObj.fieldId,setObj.defaultValue);
              }
              disabledCas += "," + (setObj.readOnly === '1' || flowDisable);
              if(setObj.isNull === '1' && setObj.readOnly !== '1'){
                cascadeRules[setObj.fieldId] = {required: true, message: '必填'};
              }
            });
            if(disabledCas){
              disabledCas = disabledCas.substring(1);
            }
            Object.assign(bindProps,{
              formData: this.optFormData,
              field: field,
              typeId: dataSetting.dataTypeId || '',
              parentId:dataSetting.parentId,
              hasParentJudge: dataSetting.parentId ? "true":"false",
              size:formSize,
              disabled: disabledCas,
              rules:cascadeRules,
              rememberSysDataObj:this.rememberSysDataObj,
              skinType: this.skinType
            });
            break;
          case "cascadeSelectOne"://级联下拉框(单下拉框)
            Object.assign(bindProps,{
              dataTypeId:dataSetting.dataTypeId,
              parentId:dataSetting.parentId,
              fieldId:field,
              formData:this.optFormData,
              isMuliti:muliti === 'true',
              rememberSysDataObj:this.rememberSysDataObj,
              defaultValue:dataSetting.defaultValue,
              optionSetting: dataSetting.optionSetting,
              skinType: this.skinType
            });
            break;
          case "ejectData"://弹出数据表
            Object.assign(bindProps,{
              buttonName:dataSetting.buttonName,
              title:dataSetting.title,
              formId:dataSetting.linkFormId,
              lViewId:dataSetting.linkLastListViewId || dataSetting.linkListViewId,
              callfillFieldArr:dataSetting.callfillParamArr,
              linkTreeViewId:dataSetting.linkTreeViewId,
              formData:this.optFormData,
              conditionId:dataSetting.conditionId,
              acceptMultiple:dataSetting.acceptMultiple,
              acceptAdd:dataSetting.acceptAdd,
              conditionFormArr:dataSetting.conditionFormArr,
              sourceType:dataSetting.sourceType,
              diySourceId:dataSetting.diySourceId,
              width:(dataSetting.dialogWidth || "80%"),
              height:(dataSetting.dialogHeight || "80%"),
              size:formSize,
              skinType: this.skinType
            });
            break;
          case "mapManagement"://打点坐标
            Object.assign(bindProps,{
              buttonName:dataSetting.buttonName,
              title:dataSetting.title,
              optFormData: this.optFormData,
              acceptMultiple:dataSetting.acceptMultiple,
              diySourceId:dataSetting.diySourceId,
              specialSet:dataSetting.specialSet,
              fieldId:dataSetting.fieldId,
              formId:this.formId,
              width:(dataSetting.dialogWidth || "80%"),
              height:(dataSetting.dialogHeight || "80%"),
              size:formSize
            });
            break;
          case "regionalContour"://区域轮廓
            Object.assign(bindProps,{
              buttonName:dataSetting.buttonName,
              title:dataSetting.title,
              optFormData: this.optFormData,
              acceptMultiple:dataSetting.acceptMultiple,
              diySourceId:dataSetting.diySourceId,
              specialSet:dataSetting.specialSet,
              fieldId:dataSetting.fieldId,
              formId:this.formId,
              operate:this.operate,
              width:(dataSetting.dialogWidth || "80%"),
              height:(dataSetting.dialogHeight || "80%"),
              size:formSize
            });
            break;
          case "viewList"://查看列表
            let viewListHeight = dataSetting.controlHeight || '';
            let viewMinHeight = dataSetting.openMinHeight || '0';
            let controlMinHeight = dataSetting.controlMinHeight || '200px';
            let viewListStyle = '';
            let viewListClass = "";
            if(viewMinHeight === '1'){
              viewListClass = "editListClass";
              viewListStyle = 'mini-height:'+controlMinHeight;
            }else {
              viewListClass = "";
              viewListStyle = 'height:'+viewListHeight;
            }
            Object.assign(bindProps,{
              formId:dataSetting.linkFormId,
              listViewId:dataSetting.linkLastListViewId || dataSetting.linkListViewId,
              linkTreeViewId:dataSetting.linkTreeViewId,
              isNeedPage:dataSetting.isNeedPaging,
              isViewTable:"1",
              autoOpenHeight:viewMinHeight === '1',
              minHeight:controlMinHeight,
              conditionId:dataSetting.conditionId,
              conditionFormArr:dataSetting.conditionFormArr,
              isHideenOptBtn:dataSetting.isHideenOptBtn,
              isPreview:true,
              mainFormData:this.optFormData,
              skinType: this.skinType,
            });
            break;
          case "editList"://编辑列表
            let editListHeight = dataSetting.controlHeight || '';
            let openMinHeight = dataSetting.openMinHeight || '0';
            let editListMinHeight = dataSetting.controlMinHeight || '200px';
            let paramSetting = {};//传入参数配置
            let value = "";
            let editListStyle = 'height:'+editListHeight;
            let editListClass = "";
            if(openMinHeight === '1'){
              editListClass = "editListClass";
              editListStyle = 'mini-height:'+editListMinHeight;
            }
            if(dataSetting.ifNeedParam === '1'){
              if(dataSetting.paramLinkField){
                if(dataSetting.paramType === 'sysData' || dataSetting.paramType === 'constant'){
                  value = dataSetting.paramValue;
                }else if(dataSetting.paramType === 'formField' && this.optFormData[dataSetting.paramValue]){
                  value = this.optFormData[dataSetting.paramValue];
                }else if(dataSetting.paramType === 'default'){ //缺省值
                  value = dataSetting.paramValue;
                  if(value.indexOf("LOGINUSERDEPT") > -1){
                    value = Replace.def(this.userDept,value) || "";
                  }else if(value.indexOf("LOGINUSER") > -1){
                    value = Replace.def(this.loginUser,value) || "";
                  }
                }
                paramSetting[dataSetting.paramLinkField] = value;//

                if(dataSetting.paramValue === 'ID'){
                  let arr = this.editFormUpdateParams[dataSetting.linkFormId];
                  if(!arr){
                    this.editFormUpdateParams[dataSetting.linkFormId] = [];
                    arr = this.editFormUpdateParams[dataSetting.linkFormId];
                  }
                  if(arr.indexOf(dataSetting.paramLinkField) === -1){
                    arr.push(dataSetting.paramLinkField);
                  }

                  if(this.operate === 'add'){
                    paramSetting[dataSetting.paramLinkField] = this.relationId;
                  }
                }
              }
              //解析
              let callfillParamArr = dataSetting.callfillParamArr || []; //多参数方式
              callfillParamArr.forEach(callParam =>{
                value = "";
                if(callParam.paramLinkField){
                  if(callParam.paramType === 'sysData' || callParam.paramType === 'constant'){
                    value = callParam.paramValue;
                  }else if(callParam.paramType === 'formField' && this.optFormData[callParam.paramValue]){
                    value = this.optFormData[callParam.paramValue];
                    if(callParam.paramValue === 'ID'){
                      if(!this.editFormUpdateParams[dataSetting.linkFormId]){
                        this.editFormUpdateParams[dataSetting.linkFormId] = [];
                      }
                      this.editFormUpdateParams[dataSetting.linkFormId].push(callParam.paramLinkField);
                    }
                  }else if(callParam.paramType === 'default'){ //缺省值
                    value = callParam.paramValue;
                    if(value.indexOf("LOGINUSERDEPT") > -1){
                      value = Replace.def(this.userDept,value) || "";
                    }else if(value.indexOf("LOGINUSER") > -1){
                      value = Replace.def(this.loginUser,value) || "";
                    }
                  }
                  paramSetting[callParam.paramLinkField] = value;//

                  if(callParam.paramValue === 'ID'){
                    let arr = this.editFormUpdateParams[dataSetting.linkFormId];
                    if(!arr){
                      this.editFormUpdateParams[dataSetting.linkFormId] = [];
                      arr = this.editFormUpdateParams[dataSetting.linkFormId];
                    }
                    if(arr.indexOf(callParam.paramLinkField) === -1){
                      arr.push(callParam.paramLinkField);
                    }
                    if(this.operate === 'add'){
                      paramSetting[callParam.paramLinkField] = this.relationId;
                    }
                  }
                }
              });
            }

            let parentOptFormData = JSON.parse(JSON.stringify(this.optFormData));
            if(this.operate === 'add'){ //如果是新增
              parentOptFormData["ID"] = this.relationId;
            }
            Object.assign(bindProps, {
              formId:dataSetting.linkFormId,
              listViewId:dataSetting.linkLastListViewId || dataSetting.linkListViewId,
              linkTreeViewId:dataSetting.linkTreeViewId,
              isNeedPage:dataSetting.isNeedPaging,
              isEditTable:"1",
              editParamSet:paramSetting,
              relationId:this.relationId,
              isEditData:this.isEditData || !disabled,
              onlyData:dataSetting.onlyData,
              optOwnData:dataSetting.optOwnData,
              linkDetele:dataSetting.mainTableLink,
              isShowDiyButton:dataSetting.isShowDiyButton,
              hidenHeadBtn:dataSetting.hidenHeadBtn,
              hidenDeleteBtn:dataSetting.hidenDeleteBtn,
              hidenAddBtn:dataSetting.hidenAddBtn,
              hidenViewBtn:dataSetting.hidenViewBtn,
              hidenUpdateBtn:dataSetting.hidenUpdateBtn,
              hidenAllBtn:dataSetting.hidenAllBtn,
              conditionId:dataSetting.conditionId,
              conditionFormArr:dataSetting.conditionFormArr,
              parentOptFormData:parentOptFormData,
              autoOpenHeight:dataSetting.openMinHeight === '1',
              minHeight:editListMinHeight,
              listOutParam:this.listOutParam,
              mainFormData:this.optFormData,
              isPreview:true,
              skinType: this.skinType,
            });
            break;
          case "tempEditList": //临时编辑列表
            let tempEditListHeight = dataSetting.controlHeight || '';
            let tempOpenMinHeight = dataSetting.openMinHeight || '0';
            let tempEditListMinHeight = dataSetting.controlMinHeight || '200px';
            let tempParamSetting = {};//传入参数配置
            let tempValue = "";
            let tempEditListStyle = 'height:'+ tempEditListHeight;
            let tempEditListClass = "";
            if(tempOpenMinHeight === '1'){
              tempEditListClass = "editListClass";
              tempEditListStyle = 'mini-height:'+tempEditListMinHeight;
            }
            if(dataSetting.ifNeedParam === '1'){
              if(dataSetting.paramLinkField){
                if(dataSetting.paramType === 'sysData' || dataSetting.paramType === 'constant'){
                  tempValue = dataSetting.paramValue;
                }else if(dataSetting.paramType === 'formField' && this.optFormData[dataSetting.paramValue]){
                  tempValue = this.optFormData[dataSetting.paramValue];
                }else if(dataSetting.paramType === 'default'){ //缺省值
                  tempValue = dataSetting.paramValue;
                  if(tempValue.indexOf("LOGINUSERDEPT") > -1){
                    tempValue = Replace.def(this.userDept,value) || "";
                  }else if(tempValue.indexOf("LOGINUSER") > -1){
                    tempValue = Replace.def(this.loginUser,value) || "";
                  }
                }
                tempParamSetting[dataSetting.paramLinkField] = value;

                if(dataSetting.paramValue === 'ID'){
                  let arr = this.editFormUpdateParams[dataSetting.linkFormId];
                  if(!arr){
                    this.editFormUpdateParams[dataSetting.linkFormId] = [];
                    arr = this.editFormUpdateParams[dataSetting.linkFormId];
                  }
                  if(arr.indexOf(dataSetting.paramLinkField) === -1){
                    arr.push(dataSetting.paramLinkField);
                  }

                  if(this.operate === 'add'){
                    tempParamSetting[dataSetting.paramLinkField] = this.relationId;
                  }
                }
              }
              //解析
              let callfillParamArr = dataSetting.callfillParamArr || []; //多参数方式
              callfillParamArr.forEach(callParam =>{
                tempValue = "";
                if(callParam.paramLinkField){
                  if(callParam.paramType === 'sysData' || callParam.paramType === 'constant'){
                    tempValue = callParam.paramValue;
                  }else if(callParam.paramType === 'formField' && this.optFormData[callParam.paramValue]){
                    tempValue = this.optFormData[callParam.paramValue];
                    if(callParam.paramValue === 'ID'){
                      if(!this.editFormUpdateParams[dataSetting.linkFormId]){
                        this.editFormUpdateParams[dataSetting.linkFormId] = [];
                      }
                      this.editFormUpdateParams[dataSetting.linkFormId].push(callParam.paramLinkField);
                    }
                  }else if(callParam.paramType === 'default'){ //缺省值
                    tempValue = callParam.paramValue;
                    if(tempValue.indexOf("LOGINUSERDEPT") > -1){
                      tempValue = Replace.def(this.userDept,value) || "";
                    }else if(tempValue.indexOf("LOGINUSER") > -1){
                      tempValue = Replace.def(this.loginUser,value) || "";
                    }
                  }
                  tempParamSetting[callParam.paramLinkField] = value;//

                  if(callParam.paramValue === 'ID'){
                    let arr = this.editFormUpdateParams[dataSetting.linkFormId];
                    if(!arr){
                      this.editFormUpdateParams[dataSetting.linkFormId] = [];
                      arr = this.editFormUpdateParams[dataSetting.linkFormId];
                    }
                    if(arr.indexOf(callParam.paramLinkField) === -1){
                      arr.push(callParam.paramLinkField);
                    }
                    if(this.operate === 'add'){
                      tempParamSetting[callParam.paramLinkField] = this.relationId;
                    }
                  }
                }
              });
            }
            Object.assign(bindProps, {
              formId:dataSetting.linkFormId,
              listViewId:dataSetting.linkLastListViewId || dataSetting.linkListViewId,
              linkTreeViewId:dataSetting.linkTreeViewId,
              isNeedPage:dataSetting.isNeedPaging,
              isEditTable:"1",
              editParamSet:tempParamSetting,
              relationId:this.relationId,
              isEditData:this.isEditData || !disabled,
              onlyData:dataSetting.onlyData,
              optOwnData:dataSetting.optOwnData,
              linkDetele:dataSetting.mainTableLink,
              isShowDiyButton:dataSetting.isShowDiyButton,
              hidenHeadBtn:dataSetting.hidenHeadBtn,
              hidenDeleteBtn:dataSetting.hidenDeleteBtn,
              hidenAddBtn:dataSetting.hidenAddBtn,
              hidenViewBtn:dataSetting.hidenViewBtn,
              hidenUpdateBtn:dataSetting.hidenUpdateBtn,
              hidenAllBtn:dataSetting.hidenAllBtn,
              conditionId:dataSetting.conditionId,
              conditionFormArr:dataSetting.conditionFormArr,
              parentOptFormData:this.optFormData,
              autoOpenHeight:dataSetting.openMinHeight === '1',
              minHeight:tempEditListMinHeight,
              listOutParam:this.listOutParam,
              isPreview:true,
              isTempEdit: true,
              skinType: this.skinType,
            });
            break;
          case "diyButton"://自定义按钮
            value = "";
            let paramDiySetting = {};
            let clickFuncBoy = dataSetting.clickFuncBoy || '';
            let clickFuncBoyPrint = dataSetting.clickFuncBoyPrint || '';
            if(dataSetting.ifNeedParam === '1'){
              if(dataSetting.paramLinkField){
                if(dataSetting.paramType === 'sysData' || dataSetting.paramType === 'constant'){
                  value = dataSetting.paramValue;
                }else if(dataSetting.paramType === 'formField' && this.optFormData[dataSetting.paramValue]){
                  value = this.optFormData[dataSetting.paramValue];
                }else if(dataSetting.paramType === 'default'){ //缺省值
                  value = dataSetting.paramValue;
                  if(value.indexOf("LOGINUSERDEPT") > -1){
                    value = Replace.def(this.userDept,value) || "";
                  }else if(value.indexOf("LOGINUSER") > -1){
                    value = Replace.def(this.loginUser,value) || "";
                  }
                }
                paramDiySetting[dataSetting.paramLinkField] = value;//
              }
              //解析
              let callfillParamArr = dataSetting.callfillParamArr || []; //多参数方式
              callfillParamArr.forEach(callParam =>{
                value = "";
                if(callParam.paramLinkField){
                  if(callParam.paramType === 'sysData' || callParam.paramType === 'constant'){
                    value = callParam.paramValue;
                  }else if(callParam.paramType === 'formField' && this.optFormData[callParam.paramValue]){
                    value = this.optFormData[callParam.paramValue];
                  }else if(callParam.paramType === 'default'){ //缺省值
                    value = callParam.paramValue;
                    if(value.indexOf("LOGINUSERDEPT") > -1){
                      value = Replace.def(this.userDept,value) || "";
                    }else if(value.indexOf("LOGINUSER") > -1){
                      value = Replace.def(this.loginUser,value) || "";
                    }
                  }
                  paramDiySetting[callParam.paramLinkField] = value;//
                }
              });
            }
            Object.assign(bindProps, {
              relationId:this.relationId,
              formData:this.optFormData,
              buttonType:dataSetting.buttonType,
              buttonName:dataSetting.buttonName,
              linkUrl:dataSetting.linkUrl,
              dialogTitle:dataSetting.dialogTitle,
              topRange:dataSetting.topRange,
              width:dataSetting.dialogWidth,
              height:dataSetting.dialogHeight,
              needCallback:dataSetting.needCallback,
              needFooter:dataSetting.needFooter,
              winButtonName:dataSetting.winButtonName,
              funcName:dataSetting.funcName,
              resultField:dataSetting.resultField,
              countFieldArr:dataSetting.countFieldArr,
              paramDiySetting:paramDiySetting,
              clickFuncBoy:clickFuncBoy,
              clickFuncBoyPrint:clickFuncBoyPrint,
              changeField:this.changeField
            });
            break;
          case "realTimeCount":
            Object.assign(bindProps, {
              formData:this.optFormData,
              fieldId:field,
              resultShowType:dataSetting.resultShowType,
              decimalDigit:Number(dataSetting.decimalDigit),
              countFieldArr:dataSetting.countFieldArr
            });
            break;
          case "activeCount":
            Object.assign(bindProps, {
              formData:this.optFormData,
              fieldId:field,
              resultShowType:dataSetting.resultShowType,
              decimalDigit:Number(dataSetting.decimalDigit),
              isTime:dataSetting.isTime,
              timeFormat:dataSetting.timeFormat,
              measurementShow: measurementShow,
              caculateArr:dataSetting.caculateArr, editable: disabled
            });
            // if(measurementShow){
            //   content.push(
            //       <div id={measurementId} class="measurementClass">
            //         {measurement}
            //       </div>
            //   );
            // }
            break;
          case "dynamicPanel":
            Object.assign(bindProps, {
              formData:this.optFormData,
              needTab:dataSetting.needTab,
              contentData:dataSetting.contentData,
              fieldObj:this.fieldObj,
              isPerview:this.isPerview
            });
            break;
          case "sequence"://自增序列
            let prefix = dataSetting.connectSign;
            let suffix = "";
            if(dataSetting.connectSign === "()"){
              prefix = "(";
              suffix = ")";
            }else if(dataSetting.connectSign === "[]"){
              prefix = "[";
              suffix = "]";
            }else if(dataSetting.connectSign === "{}"){
              prefix = "{";
              suffix = "}";
            }
            let dataValue = this.optFormData[dataSetting.linkFieldId];
            if(!dataValue && this.parentOptFormData[dataSetting.linkFieldId]){
              dataValue = this.parentOptFormData[dataSetting.linkFieldId] || '';
            }

            let des = "";
            let number = "";
            if(dataValue){
              let valueArr = dataValue.split(prefix);
              des = valueArr[0] || '';
              this.optFormData[dataSetting.linkFieldId] = des;
              if(suffix && valueArr[1]){
                number = valueArr[1].substring(0,valueArr[1].length - 1);
              }else{
                number = valueArr[1];
              }
              if(number){
                this.sequnceNumber[dataSetting.linkFieldId] = number;
              }else{
                number = this.sequnceNumber[dataSetting.linkFieldId] || "";
              }
            }
            let oldDes = "";
            if(this.initFormData[dataSetting.linkFieldId]){
              oldDes = this.initFormData[dataSetting.linkFieldId].split(prefix)[0];
            }
            Object.assign(bindProps, {
              formData:this.optFormData,
              formId:this.formId,
              fieldId: dataSetting.linkFieldId,
              number:number,
              prefix:prefix,
              suffix:suffix,
              description:des,
              oldDescription:oldDes,
              readonly:(dataSetting.readonly === "1"),
              operate: this.isCopyOperate ? 'add': this.operate
            });
            break;
          case "switchButton"://开关按钮
            let activeValue=dataSetting.activeValue===''?'true':dataSetting.activeValue;
            let inactiveValue=dataSetting.inactiveValue===""?"false":dataSetting.inactiveValue;
            if(this.isEditTableForm) {
              this.$set(this.parentOptTableData,field,this.optFormData[field] || '');
              this.$set(this.parentOptTableData,"editTable_"+field,this.optFormData[field] || '');
            }
            Object.assign(bindProps, {
              activeColor: dataSetting.activeColor,
              inactiveColor: dataSetting.inactiveColor,
              activeText: dataSetting.activeText,
              inactiveText: dataSetting.inactiveText,
              activeValue: activeValue,
              inactiveValue: inactiveValue,
            });
            // todo el-switch
            break;
          case "chartView"://数据图表
            if(!dataSetting.reportid){
              Object.assign(bindProps, {
                remind: '请选择需要展示的数据图表!'
              });
            }else{
              // let chartWidth=Number(dataSetting.chartWidth);
              let chartViewControlHeight=Number(dataSetting.controlHeight);
              Object.assign(bindProps, {
                type: dataSetting.controlType,
                url: window.SPDA_REPORT_VIEW_URL + dataSetting.reportid,
                chartViewControlHeight: (Number(chartViewControlHeight) || 0) + 45,
                controlWidth: dataSetting.controlWidth,
              });
            }
            break;
          case "dashBd"://数据大屏
            // let chartWidth2=Number(dataSetting.chartWidth);
            if(!dataSetting.dashboardId){
              Object.assign(bindProps, {
                remind: '请选择需要展示的数据大屏!'
              });
            }else{
              let controlHeight2=Number(dataSetting.controlHeight);
              Object.assign(bindProps, {
                type: dataSetting.controlType,
                url: window.SPDA_DASH_VIEW_URL + dataSetting.dashboardId,
                chartViewControlHeight: controlHeight2,
                controlWidth: dataSetting.controlWidth,
              });
            }
            break;
          case "userSelect":
            if(dataSetting.selectType === "orgTree"){ // 组织树加载
              Object.assign(bindProps, {
                isOrgtree:true,
                orgDim:dataSetting.orgDim,
                orgLevel:dataSetting.orgLevel,
                saveType:dataSetting.saveType,
                backfillField: dataSetting.callbackField,
                formData:this.optFormData,
                field:field,
                multiple:muliti === 'true',
                placeholder:placeholder,
                disabled:disabled,
                filterable: dataSetting.alloCreate === 'true',
                size:formSize,
                value:this.optFormData[field],
                rememberSysDataObj:this.rememberSysDataObj,openTree:true,
                changeField:this.changeField
              });
            } else if(dataSetting.selectType === "posTree"){ // 岗位树加载
              Object.assign(bindProps, {
                isPostree:true,
                field:field,
                multiple:muliti === 'true',
                orgDim:dataSetting.orgDim,
                backfillField: dataSetting.callbackField,
                formData:this.optFormData,
                orgLevel:dataSetting.orgLevel,
                saveType:dataSetting.saveType,
                placeholder:placeholder,
                disabled:disabled,
                filterable: dataSetting.alloCreate === 'true',
                size:formSize,
                value:this.optFormData[field],
                rememberSysDataObj:this.rememberSysDataObj,openTree:true,
                changeField:this.changeField
              });
            } else if(dataSetting.selectType === "userTree"){ // 用户树加载
              Object.assign(bindProps, {
                isUsertree:true,
                field:field,
                multiple:muliti === 'true',
                backfillField: dataSetting.callbackField,
                formData:this.optFormData,
                saveType:dataSetting.saveType,
                placeholder:placeholder,
                disabled:disabled,
                filterable: dataSetting.alloCreate === 'true',
                showLockUser:dataSetting.showLockUser === 'true',
                size:formSize,
                value:this.optFormData[field],
                rememberSysDataObj:this.rememberSysDataObj,
                skinType: this.skinType
              });
            }
            break;
          case "workFlow":
            let heightValue=dataSetting.controlHeight || '';
            Object.assign(bindProps, {
              flowId:dataSetting.selectFlow,
              tabSettingArr:dataSetting.tabSettingArr,
              heightValue:heightValue,
            });
            break;
          case "compositeView":
            let comView = dataSetting.comView;
            let tabArr = dataSetting.tabSettingArr || [];
            let callfillParamArr = dataSetting.callfillParamArr || []; //参数配置
            let tabConditionObj = dataSetting.tabConditionObj || {}; //标签隐藏条件配置
            let tabHiddenSetObj = this.executTabHidenConfigtion(tabConditionObj); //
            let viewHiddenTopBtn = dataSetting.viewHiddenTopBtn || '0';
            let hideOperate = this.formOperate;
            if(!this.flowFieldStatus[field] || this.flowFieldStatus[field] !== 'edit'){
              hideOperate = 'view';
            }
            let paramTabObj = {}; //标签对应参数配置
            let tabSettingArr = [];
            let equiliInfoObj = {}; //标签简易配置
            tabArr.forEach((tabId,index) =>{
              if(!tabHiddenSetObj[tabId]){
                tabSettingArr.push(tabId);
              }
            });
            callfillParamArr.forEach(item =>{
              if(!tabHiddenSetObj[item.paramTab]){
                let paramValue = "";
                if(item.paramType ==='formField'){ //表单字段
                  paramValue = this.optFormData[item.paramValue] || '';
                }else if(item.paramType ==='sysData' || item.paramType ==='diy'){ //数据字典 自定义
                  paramValue = item.paramValue || '';
                }else if(item.paramType ==='default'){ //缺省值
                  if ((item.paramValue || "").toLowerCase().indexOf('loginuser') > -1) {
                    paramValue = Replace.text(this.loginUser, item.paramValue);
                  }
                  if ((item.paramValue || "").toLowerCase().indexOf('logindept') > -1) {
                    paramValue = Replace.text(this.userDept, item.paramValue);
                  }
                }else if(item.paramType ==='external'){ //外部参数
                  if(this.outParam[item.paramValue || '']){
                    paramValue = this.outParam[item.paramValue || ''];
                  }else if(this.listOutParam[item.paramValue || '']){
                    paramValue = this.listOutParam[item.paramValue || ''];
                  }
                }else if(item.paramType === 'formOperate'){ //表单状态
                  paramValue = this.operate;
                }
                if(!paramTabObj[item.paramTab]){
                  this.$set(paramTabObj,item.paramTab,[]);
                }
                paramTabObj[item.paramTab].push({
                  paramKey:item.paramKey,
                  paramValue:paramValue
                })
                equiliInfoObj[item.paramTab +"_"+item.paramKey] = paramValue;
              }
            });
            if(tabSettingArr.length > 0){
              Object.assign(bindProps, {
                comView:comView,
                tabSettingArr:tabSettingArr,
                listOutParam:this.listOutParam,
                paramTabObj:paramTabObj,
                parentFormData:this.optFormData,
                compositeObj:this.compositeObj,
                callfillParamArr:callfillParamArr,
                equiliInfoObj:equiliInfoObj,
                compositeFormOperate:viewHiddenTopBtn === '1'?hideOperate:''
              });
            }
            break;
          case 'editTable': // 编辑表单
            let tableParamSetting = {};//传入参数配置
            let propValue = "";
            if(dataSetting.ifNeedParam === '1'){
              //解析
              let callfillParamArr = dataSetting.callfillParamArr || []; //多参数方式
              callfillParamArr.forEach(callParam =>{
                propValue = "";
                if(callParam.paramLinkField){
                  if(callParam.paramType === 'sysData' || callParam.paramType === 'constant'){
                    propValue = callParam.paramValue;
                  }else if(callParam.paramType === 'formField' && this.optFormData[callParam.paramValue]){
                    propValue = this.optFormData[callParam.paramValue];
                    if(callParam.paramValue === 'ID'){
                      if(!this.editFormUpdateParams[dataSetting.linkFormId]){
                        this.editFormUpdateParams[dataSetting.linkFormId] = [];
                      }
                      this.editFormUpdateParams[dataSetting.linkFormId].push(callParam.paramLinkField);
                    }
                  }else if(callParam.paramType === 'default'){ //缺省值
                    propValue = callParam.paramValue;
                    if(propValue.indexOf("LOGINUSERDEPT") > -1){
                      propValue = Replace.def(this.userDept,propValue) || "";
                    }else if(propValue.indexOf("LOGINUSER") > -1){
                      propValue = Replace.def(this.loginUser,propValue) || "";
                    }
                  }
                  tableParamSetting[callParam.paramLinkField] = propValue;

                  if(callParam.paramValue === 'ID'){
                    let arr = this.editFormUpdateParams[dataSetting.linkFormId];
                    if(!arr){
                      this.editFormUpdateParams[dataSetting.linkFormId] = [];
                      arr = this.editFormUpdateParams[dataSetting.linkFormId];
                    }
                    if(arr.indexOf(callParam.paramLinkField) === -1){
                      arr.push(callParam.paramLinkField);
                    }
                    if(this.operate === 'add'){
                      tableParamSetting[callParam.paramLinkField] = this.relationId;
                    }
                  }
                }
              });
            }
            if(this.isConfig) {
              tableParamSetting = {};
            }
            // let parentTableOptFormData = JSON.parse(JSON.stringify(this.optFormData));
            if(tableParamSetting) {
              this.optFormData = Object.assign(this.optFormData, tableParamSetting);
            }
            let tableDataId = '';
            if(this.optFormData["ID"]) {
              tableDataId = this.optFormData["ID"];
            }
            let tableFormViewId = dataSetting.linkTableViewId;
            let isFormTable = false;
            if(!dataSetting.linkListViewId) {
              isFormTable = true;
            }
            if(!tableFormViewId){
              Object.assign(bindProps, {
                remind: '请选择需要展示的表单!'
              });
            }else {
              Object.assign(bindProps, {
                type: dataSetting.controlType,
                tableFormRenderProps: {
                  dataId:tableDataId,
                  tableviewId:tableFormViewId,
                  formId:dataSetting.linkFormId,
                  listViewId:dataSetting.linkListViewId,
                  relationId:this.relationId,
                  formOperate: this.operate,
                  parentOptTableData: this.optFormData,
                  isSignForm: isFormTable,
                  isEditTableForm: true,
                  isFirstClick: this.isFirstClick
                }
              });
            }
            break;
          case "diyComponent": // 自定义组件
            let componentCode = dataSetting.componentCode;
            let callfillParam = dataSetting.callfillParamArr || [];
            if(!componentCode){
              Object.assign(bindProps, {
                remind: '请配置组件!'
              });
            }else{
              Object.assign(bindProps, {
                type: dataSetting.controlType,
                diyCustomCompProps : {
                  componentCode: componentCode,
                  optFormData: this.optFormData,
                  callfillParamArr: callfillParam
                }
              });
            }
            break;
          case 'viewTableForm': //查看表单
            let dataId = dataSetting.dataIdValue || '';
            let tableViewId = dataSetting.linkTableViewId;
            let dataIdType = dataSetting.dataIdType || '';
            //解析 dataId
            if(dataIdType === 'formField'){
              dataId = this.optFormData[dataId] || '';
            }else if(dataIdType === 'external'){ //外部参数
              dataId = this.listOutParam[dataId] || '';
            }
            if(!tableViewId){
              Object.assign(bindProps, {
                remind: '请选择需要展示的表单!'
              });
            }else {
              Object.assign(bindProps, {
                type: dataSetting.controlType,
                tableFormRenderProps: {
                  dataId:dataId,
                  tableviewId:tableViewId,
                  isSignForm:true,
                  formOperate:'view'
                }
              });
            }
            break;
          case "rate":
            if(this.isEditTableForm) {
              this.$set(this.parentOptTableData,field,this.optFormData[field] || '');
              this.$set(this.parentOptTableData,"editTable_"+field,this.optFormData[field] || '');
            }
            Object.assign(bindProps, {
              colors: ['#F56C6C','#F56C6C','#F56C6C'],
              maxVal: Number(dataSetting.decimalDigit) || 5,
            });
            break;
          case "step":
            if(this.isEditTableForm) {
              this.$set(this.parentOptTableData,field,this.optFormData[field] || '');
              this.$set(this.parentOptTableData,"editTable_"+field,this.optFormData[field] || '');
            }
            Object.assign(bindProps, {
              formData: this.optFormData,
              stepArr: dataSetting.stepNameArr,
              checkIndex: dataSetting.checkIndex,
            });
            break;
          default:
            break;
        }
      })
    },

    getComponentName(controlType){
      let component = "";
      switch (controlType){
        case 'input':
          component = 'spcp-input';
          break;
        case 'passwrod':
          component = 'spcp-passwrod';
          break;
        case 'textarea':
          component = 'spcp-textarea';
          break;
        case 'select':
          component = 'spcp-select';
          break;
        case 'radio':
          component = 'spcp-radio';
          break;
        case 'checkbox':
          component = 'spcp-checkbox';
          break;
        case 'time':
          component = 'spcp-time';
          break;
        case 'currency':
          component = 'spcp-currency';
          break;
        case 'contactParty':
          component = 'spcp-org-select';
          break;
        case 'enclosure':
          component = 'spcp-upload';
          break;
        case 'enclosureButton':
          component = 'spcp-upload-button';
          break;
        case 'iframeLink':
          component = 'spcp-iframe';
          break;
        case 'pictureSet':
          component = 'spcp-image';
          break;
        case 'titleBox':
        case 'displayBox':
          component = 'spcp-title-box';
          break;
        case 'addComments':
          component = 'spcp-additional-comment';
          break;
          // case 'displayBox':
          //     component = '';
          //     break;
        case 'dividingLine':
          component = 'spcp-divider';
          break;
        case 'group':
          component = 'spcp-group';
          break;
        case 'tabs':
          component = 'spcp-tabs';
          break;
        case 'blankLine':
          component = 'spcp-blank-line';
          break;
        case 'blankCol':
          component = '';
          break;
        case 'hyperlink':
          component = 'spcp-hyper-link';
          break;
        case 'cascadeSelect':
          component = 'pl-cascade-select-form';
          break;
        case 'cascadeSelectOne':
          component = 'pl-cascade-single';
          break;
        case 'ejectData':
          component = 'pl-eject-table';
          break;
        case 'mapManagement':
          component = 'pl-map-management';
          break;
        case 'regionalContour':
          component = 'pl-regional-contour-map';
          break;
        case 'viewList':
        case 'editList':
        case 'tempEditList':
          component = 'listPreviewHandler';
          break;
        case 'diyButton':
          component = 'plDiyButton';
          break;
        case 'realTimeCount':
          component = 'plRealTimeCount';
          break;
        case 'activeCount':
          component = 'plActiveCount';
          break;
        case 'dynamicPanel':
          component = 'plDynamicPanel';
          break;
        case 'sequence':
          component = 'plSequence';
          break;
        case 'switchButton':
          component = 'spcp-switch';
          break;
        case 'chartView':
        case 'dashBd':
        case 'editTable':
        case 'viewTableForm':
        case 'diyComponent':
          component = 'spcp-quote';
          break;
        case 'userSelect':
          component = 'pl-data-select';
          break;
        case 'workFlow':
          component = 'work-flow';
          break;
        case 'compositeView':
          component = 'composite-view';
          break;
        case 'rate':
          component = 'spcp-rate';
          break;
        case 'step':
          if(window.OA_URL){
            component = 'plStepOA';
          }else{
            component = 'plStep';
          }
          break;
          // case 'input':
          //     component = 'spcp-input';
          //     break;
        default:
          component = 'spcp-input';
          break;
      }
      return component;
    },
  }
}
</script>
<style scoped lang="scss">
    .form-class::-webkit-scrollbar {
        width: 0;
    }
    .form-class{
        width: 98%;border: 1px solid #c2c2c2;border-right:0;border-bottom:0;
        box-sizing: border-box;margin: 0 auto;
        /deep/ {
            .el-form-item{
                margin-bottom: 0;
                display: flex;
                align-items: center;
                box-sizing: border-box;
                .el-form-item__label{
                    background-color: #EEEEEE;
                    padding: 5px;
                    border-right: 1px solid #c2c2c2;
                    box-sizing: border-box;
                }
                .el-form-item__content{
                    flex: 1;
                    margin-left: 0!important;
                    padding: 5px;
                    box-sizing: border-box;
                }
            }
            .el-row{
                .el-col{
                    border-right: 1px solid #c2c2c2;
                    border-bottom: 1px solid #c2c2c2;
                }
                //> .el-col:last-child{
                //    border-bottom: 0;
                //}
            }
            .el-form-item__error {
                padding: 1px 5px;
                background: rgba(255, 255, 255, 1.0);
                z-index: 1;
                margin-top: -8px;
            }
        }
    }
</style>
