customField.vue

<style lang="less">
    @import url('../../styles/common.less');
    #customFields{
        position:absolute;
        width:100%;
        height:calc(100% - 45px);
        overflow-y:auto;
        // -webkit-overflow-scrolling: touch;
        background: #eef4fe;
        ._container{
            height:100%;
            margin-bottom:48px;
            .iCard{
                height:100%;
                position: relative;
                width:auto;
                margin:0 8px 0;
                border-radius: 0;
                border-bottom-left-radius: 5px;
                border-bottom-right-radius: 5px;
                >div.menu{
                    display:flex;
                    position: absolute;
                    width:100%;
                    box-sizing: border-box;
                    height:45px;
                    line-height: 45px;
                    background:#fff;
                    border-bottom:1px solid #ddd;
                    padding-right:8px;
                    >div.check{
                        padding:10px;
                        >div{
                            border:1px solid #ddd;
                            width:20px;
                            transition: all 0.5s;
                            height:20px;
                            border-radius:50%;
                            display:flex;
                            align-items:center;
                            justify-content:center;
                            >span{
                                border-radius:50%;
                                width:14px;
                                height:14px;
                                background:#3BF243;
                                box-shadow:1px 1px 3px -1px #555;
                            }
                        }
                    }
                    >div._title{
                        flex-grow: 1;
                        >i{
                            color:#E91E63;
                            font-size:9px;
                            position:relative;
                            top:0;
                        }
                    }
                    >i{
                        font-size: 30px;
                        width:0;
                        overflow: hidden;
                        transition: all 0.5s;
                        &.icon-caidan{
                            width:30px;
                        }
                    }
                    &.sFieldLocation{
                        background:#EDF4FF;
                    }
                }
                
            }
            
        }
        
        >.btn{
            position:fixed;
            z-index: 200;
            display:flex;
            bottom:0;
            width:100%;
            background: #eef4fe;            
            >button{
                width:50%;
                background:var(--color, #5E9AFE);
                color:#fff;
                opacity:1;
                transition:all 0.2s;
                flex-grow:1;
                margin:0 5px;
                height:40px;
                font-size: 15px;
                font-weight: bold;
                border-radius: 10px;
                &.button-hover{
                    opacity: 0.7;
                }
            }
        }
        >.mask{
            position:fixed;
            top:0;
            left:0;
            height:100%;
            width:100%;
            z-index: -10;
            transition: all .4s;
            >div{
                transition: all .4s;
                background:#fff;
                position:relative;
                max-height:50%;
                border-bottom-right-radius: 3px;
                border-bottom-left-radius: 3px;
                box-shadow: 0 1px 10px -1px #333;
                top:-100%;
            }
            &.show{
                background:rgba(0,0,0,0.6);
                z-index: 300;
                >div{
                    top:0;
                }
            }
            .picker{
                position: relative;
                display: flex;
                align-items: center;
                &:before{
                    content: " ";
                    position: absolute;
                    left: 0;
                    top: 0;
                    right: 0;
                    height: 1px;
                    border-top: 1px solid #D9D9D9;
                    color: #D9D9D9;
                    -webkit-transform-origin: 0 0;
                    transform-origin: 0 0;
                    -webkit-transform: scaleY(0.5);
                    transform: scaleY(0.5);
                    left: 15px;
                }
                padding: 10px 15px;
                display:flex;
                height:40px;
                span:first-child{
                    width:60px;
                }
                .Select{
                    flex:1;
                    text-align:right;
                    select{
                        width:100%;
                    }
                }
            }
        }
        .head{
            color:#5E9AFD;
            font-weight:bold;
            font-size:15px;
            border-bottom:1px solid #ddd;
            background:linear-gradient(to right, #C6D8F5, #EDF2F7);
            height: 40px;
            box-sizing: border-box;
            margin:8px 8px 0;
            line-height: 40px;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
            padding-left:15px;
        }
        /deep/ .vux-x-input{
            height:40px;
            /deep/ .weui-cell__ft{
                display: none;
            }
        }
        /deep/ .vux-x-switch{
            height:40px;
            /deep/ .weui-switch{
                height:22px;
            }
            input:before{
                height:20px;
            }
            input:after{
                height:20px;
            }
        }
        /deep/ .weui-cell{
            height:40px;
        }
        /deep/ .vux-cell-bd{
            p{
                margin-bottom: 0;
            }
        }
    }
</style>
<template>
    <div id='customFields' :style='{"overflow-y":bodyStyle}'>
        <div class="_container" v-for="(v1,i1) in list" :key="i1" :style="{'max-height':'calc('+posList[i1].length * 45 + 'px)'}">
            <div class="head">{{list[i1][0].sTypeName}}</div>
            <div class="iCard" :style="{'min-height':'calc(' + posList[i1].length * 45 + ')px'}">
                <div :class="[v2.sFieldName,'menu']" :style="{'top':posList[i1][i2] + 'px','z-index':posStyle[i2]}" v-for="(v2,i2) in list[i1]" :key="i2">
                    <div class="check" @click="select(i1,i2)">
                        <div>
                            <span v-if="v2.bVisible" :style="{'background':v2.bAmend&&v2.sFieldName!='sFieldLocation'?'':'#999'}"></span>
                        </div>
                    </div>
                    <div class="_title" @click="setValue(i1,i2)" :style="{'color':v2.bHome ? '#19be6b' : '#000'}">
                        {{v2.sFieldCaption||v2.sOldFieldCaption}}
                        <i class='iconfont' v-if="v2.bRequired">&#xe63e;</i>
                    </div>
                    <i class="iconfont icon-caidan" @touchstart.stop.prevent="start(i1,i2,$event)" @touchmove.stop.prevent="move(i1,i2,$event)" @touchend.stop.prevent="end(i1,i2,$event)"></i>
                </div>
            </div>
        </div>
       
        <div class='btn'>
            <button @click='recovery' style='--color:#5E9AFE;'>默认布局</button>
            <button @click='up' style='--color:#36F240'>提交</button>
        </div>
        <div :class="['mask',isMask?'show':'']" @click="hide">
            <div @click.stop="preventStop">
                <x-input title='字段名' text-align="right" :placeholder="modalData.sOldFieldCaption" v-model="modalData.sFieldCaption"></x-input>
                <x-switch title="是否必填" v-if="modalData.bAmend" v-model="modalData.bRequired"></x-switch>
                <x-switch title="是否在表单中显示" v-if="isDetail && modalData.bAmend" v-model="modalData.bHome"></x-switch>
                <div class="picker">
                    <span>选择卡片</span>
                    <div class="Select">
                        <select v-model="modalData.iType" @change="changeSelect($event)" dir="rtl">>
                            <option v-for="(item,index) in cardList" :key="index" :value="item.iType">{{item.title}}</option>
                        </select>
                    </div>
                    <i class='iconfont icon-right'></i>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import Util from '../../libs/util.js';
import { XInput,XSwitch,PopupPicker } from 'vux'

// function modalData(){
//     return {
//         sOldFieldCaption:'',
//         sFieldCaption:'',
//         bAmend:true,
//         bRequired:true,
//         bHome:true,
//         iType:"1"
//     }
// }
export default {
    name: 'customField',
    data(){
        return {
            list:{},
            posList:{},
            posStyle:[],
            bodyStyle:"auto",
            pos:0,
            posSave:0,
            isMask:false,
            sTableName:'',
            cardList:[],
            isDetail:false,
            modalData:{},
            cardIndex:null,
            rowIndex:-1
        }
    },
    mounted(){
        window.d = this;
        var list = '{"1":[{"bAmend":false,"bDisabled":false,"bHome":false,"bOldRequired":true,"bOldVisible":true,"bPrint":false,"bRequired":true,"bUsable":true,"bVisible":true,"iCompanyId":"2","iCreator":"1","iIden":"37","iOldRowNo":"1","iOldType":"1","iProjectId":"5599","iRowNo":1,"iType":"1","sBackFieldName":"","sCreator":"huansi","sFieldCaption":"物料编号","sFieldName":"sMaterialNo","sFieldType":"2","sOldFieldCaption":"物料编号","sOldTypeName":"卡片1","sRemark":"物料主档","sTableName":"mmMaterial","sTypeName":"卡片1","sUpdateMan":"huansi","sUrlAddress":"","tCreateTime":"2019-08-19 09:32:20.057","tUpdateTime":"2019-08-19 09:32:20.057"},{"bAmend":false,"bDisabled":false,"bHome":false,"bOldRequired":true,"bOldVisible":true,"bPrint":false,"bRequired":true,"bUsable":true,"bVisible":true,"iCompanyId":"2","iCreator":"1","iIden":"38","iOldRowNo":"2","iOldType":"1","iProjectId":"5599","iRowNo":2,"iType":"1","sBackFieldName":"","sCreator":"huansi","sFieldCaption":"物料名称","sFieldName":"sMaterialName","sFieldType":"2","sOldFieldCaption":"物料名称","sOldTypeName":"卡片1","sRemark":"物料主档","sTableName":"mmMaterial","sTypeName":"卡片1","sUpdateMan":"huansi","sUrlAddress":"","tCreateTime":"2019-08-19 09:32:20.057","tUpdateTime":"2019-08-19 09:32:20.057"},{"bAmend":false,"bDisabled":false,"bHome":false,"bOldRequired":true,"bOldVisible":true,"bPrint":false,"bRequired":true,"bUsable":true,"bVisible":true,"iCompanyId":"2","iCreator":"1","iIden":"39","iOldRowNo":"3","iOldType":"1","iProjectId":"5599","iRowNo":3,"iType":"1","sBackFieldName":"","sCreator":"huansi","sFieldCaption":"物料类别","sFieldName":"sMaterialTypeName","sFieldType":"3","sOldFieldCaption":"物料类别","sOldTypeName":"卡片1","sRemark":"物料主档","sTableName":"mmMaterial","sTypeName":"卡片1","sUpdateMan":"huansi","sUrlAddress":"","tCreateTime":"2019-08-19 09:32:20.057","tUpdateTime":"2019-08-19 09:32:20.057"},{"bAmend":false,"bDisabled":false,"bHome":false,"bOldRequired":true,"bOldVisible":true,"bPrint":false,"bRequired":true,"bUsable":true,"bVisible":true,"iCompanyId":"2","iCreator":"1","iIden":"40","iOldRowNo":"4","iOldType":"1","iProjectId":"5599","iRowNo":4,"iType":"1","sBackFieldName":"","sCreator":"huansi","sFieldCaption":"单位","sFieldName":"sUnit","sFieldType":"3","sOldFieldCaption":"单位","sOldTypeName":"卡片1","sRemark":"物料主档","sTableName":"mmMaterial","sTypeName":"卡片1","sUpdateMan":"huansi","sUrlAddress":"","tCreateTime":"2019-08-19 09:32:20.057","tUpdateTime":"2019-08-19 09:32:20.057"}],"2":[{"bAmend":true,"bDisabled":false,"bHome":false,"bOldRequired":false,"bOldVisible":true,"bPrint":false,"bRequired":false,"bUsable":true,"bVisible":true,"iCompanyId":"2","iCreator":"1","iIden":"45","iOldRowNo":"4","iOldType":"2","iProjectId":"5599","iRowNo":1,"iType":"2","sBackFieldName":"","sCreator":"huansi","sFieldCaption":"克重","sFieldName":"sGMWT","sFieldType":"2","sOldFieldCaption":"克重","sOldTypeName":"卡片2","sRemark":"物料主档","sTableName":"mmMaterial","sTypeName":"卡片2","sUpdateMan":"huansi","sUrlAddress":"","tCreateTime":"2019-08-19 09:32:20.057","tUpdateTime":"2019-08-19 09:32:20.057"},{"bAmend":true,"bDisabled":false,"bHome":false,"bOldRequired":false,"bOldVisible":true,"bPrint":false,"bRequired":false,"bUsable":true,"bVisible":true,"iCompanyId":"2","iCreator":"1","iIden":"44","iOldRowNo":"3","iOldType":"2","iProjectId":"5599","iRowNo":2,"iType":"2","sBackFieldName":"","sCreator":"huansi","sFieldCaption":"幅宽","sFieldName":"sWidth","sFieldType":"2","sOldFieldCaption":"幅宽","sOldTypeName":"卡片2","sRemark":"物料主档","sTableName":"mmMaterial","sTypeName":"卡片2","sUpdateMan":"huansi","sUrlAddress":"","tCreateTime":"2019-08-19 09:32:20.057","tUpdateTime":"2019-08-19 09:32:20.057"},{"bAmend":true,"bDisabled":false,"bHome":false,"bOldRequired":false,"bOldVisible":true,"bPrint":false,"bRequired":false,"bUsable":true,"bVisible":true,"iCompanyId":"2","iCreator":"1","iIden":"43","iOldRowNo":"2","iOldType":"2","iProjectId":"5599","iRowNo":3,"iType":"2","sBackFieldName":"","sCreator":"huansi","sFieldCaption":"成份","sFieldName":"sComponent","sFieldType":"2","sOldFieldCaption":"成份","sOldTypeName":"卡片2","sRemark":"物料主档","sTableName":"mmMaterial","sTypeName":"卡片2","sUpdateMan":"huansi","sUrlAddress":"","tCreateTime":"2019-08-19 09:32:20.057","tUpdateTime":"2019-08-19 09:32:20.057"},{"bAmend":true,"bDisabled":false,"bHome":false,"bOldRequired":false,"bOldVisible":true,"bPrint":false,"bRequired":false,"bUsable":true,"bVisible":true,"iCompanyId":"2","iCreator":"1","iIden":"42","iOldRowNo":"5","iOldType":"2","iProjectId":"5599","iRowNo":4,"iType":"2","sBackFieldName":"","sCreator":"huansi","sFieldCaption":"型号","sFieldName":"sModel","sFieldType":"2","sOldFieldCaption":"型号","sOldTypeName":"卡片2","sRemark":"物料主档","sTableName":"mmMaterial","sTypeName":"卡片2","sUpdateMan":"huansi","sUrlAddress":"","tCreateTime":"2019-08-19 09:32:20.057","tUpdateTime":"2019-08-19 09:32:20.057"},{"bAmend":true,"bDisabled":false,"bHome":false,"bOldRequired":false,"bOldVisible":true,"bPrint":false,"bRequired":false,"bUsable":true,"bVisible":true,"iCompanyId":"2","iCreator":"1","iIden":"41","iOldRowNo":"6","iOldType":"2","iProjectId":"5599","iRowNo":5,"iType":"2","sBackFieldName":"","sCreator":"huansi","sFieldCaption":"规格","sFieldName":"sSpecification","sFieldType":"2","sOldFieldCaption":"规格","sOldTypeName":"卡片2","sRemark":"物料主档","sTableName":"mmMaterial","sTypeName":"卡片2","sUpdateMan":"huansi","sUrlAddress":"","tCreateTime":"2019-08-19 09:32:20.057","tUpdateTime":"2019-08-19 09:32:20.057"},{"bAmend":true,"bDisabled":false,"bHome":false,"bOldRequired":false,"bOldVisible":true,"bPrint":false,"bRequired":false,"bUsable":true,"bVisible":true,"iCompanyId":"2","iCreator":"1","iIden":"46","iOldRowNo":"7","iOldType":"2","iProjectId":"5599","iRowNo":6,"iType":"2","sBackFieldName":"","sCreator":"huansi","sFieldCaption":"来源工厂","sFieldName":"sSourceCustomer","sFieldType":"3","sOldFieldCaption":"来源工厂","sOldTypeName":"卡片2","sRemark":"物料主档","sTableName":"mmMaterial","sTypeName":"卡片2","sUpdateMan":"huansi","sUrlAddress":"","tCreateTime":"2019-08-19 09:32:20.057","tUpdateTime":"2019-08-19 09:32:20.057"}],"3":[{"bAmend":true,"bDisabled":false,"bHome":false,"bOldRequired":false,"bOldVisible":true,"bPrint":false,"bRequired":false,"bUsable":true,"bVisible":true,"iCompanyId":"2","iCreator":"1","iIden":"51","iOldRowNo":"4","iOldType":"3","iProjectId":"5599","iRowNo":1,"iType":"3","sBackFieldName":"","sCreator":"huansi","sFieldCaption":"成品备货预警","sFieldName":"nStockWarning","sFieldType":"9","sOldFieldCaption":"成品备货预警","sOldTypeName":"卡片3","sRemark":"物料主档","sTableName":"mmMaterial","sTypeName":"卡片3","sUpdateMan":"huansi","sUrlAddress":"","tCreateTime":"2019-08-19 09:32:20.057","tUpdateTime":"2019-08-19 09:32:20.057"},{"bAmend":true,"bDisabled":false,"bHome":false,"bOldRequired":false,"bOldVisible":true,"bPrint":false,"bRequired":false,"bUsable":true,"bVisible":true,"iCompanyId":"2","iCreator":"1","iIden":"50","iOldRowNo":"3","iOldType":"3","iProjectId":"5599","iRowNo":2,"iType":"3","sBackFieldName":"","sCreator":"huansi","sFieldCaption":"样品备货预警","sFieldName":"nSampleStockWarning","sFieldType":"9","sOldFieldCaption":"样品备货预警","sOldTypeName":"卡片3","sRemark":"物料主档","sTableName":"mmMaterial","sTypeName":"卡片3","sUpdateMan":"huansi","sUrlAddress":"","tCreateTime":"2019-08-19 09:32:20.057","tUpdateTime":"2019-08-19 09:32:20.057"},{"bAmend":true,"bDisabled":false,"bHome":false,"bOldRequired":false,"bOldVisible":true,"bPrint":false,"bRequired":false,"bUsable":true,"bVisible":true,"iCompanyId":"2","iCreator":"1","iIden":"47","iOldRowNo":"1","iOldType":"3","iProjectId":"5599","iRowNo":3,"iType":"3","sBackFieldName":"","sCreator":"huansi","sFieldCaption":"样品报价","sFieldName":"nSampleQuote","sFieldType":"9","sOldFieldCaption":"样品报价","sOldTypeName":"卡片3","sRemark":"物料主档","sTableName":"mmMaterial","sTypeName":"卡片3","sUpdateMan":"huansi","sUrlAddress":"","tCreateTime":"2019-08-19 09:32:20.057","tUpdateTime":"2019-08-19 09:32:20.057"},{"bAmend":true,"bDisabled":false,"bHome":false,"bOldRequired":false,"bOldVisible":true,"bPrint":false,"bRequired":false,"bUsable":true,"bVisible":true,"iCompanyId":"2","iCreator":"1","iIden":"48","iOldRowNo":"2","iOldType":"3","iProjectId":"5599","iRowNo":4,"iType":"3","sBackFieldName":"","sCreator":"huansi","sFieldCaption":"大货报价","sFieldName":"nQuote","sFieldType":"9","sOldFieldCaption":"大货报价","sOldTypeName":"卡片3","sRemark":"物料主档","sTableName":"mmMaterial","sTypeName":"卡片3","sUpdateMan":"huansi","sUrlAddress":"","tCreateTime":"2019-08-19 09:32:20.057","tUpdateTime":"2019-08-19 09:32:20.057"},{"bAmend":true,"bDisabled":false,"bHome":false,"bOldRequired":false,"bOldVisible":true,"bPrint":false,"bRequired":false,"bUsable":true,"bVisible":true,"iCompanyId":"2","iCreator":"1","iIden":"49","iOldRowNo":"5","iOldType":"3","iProjectId":"5599","iRowNo":5,"iType":"3","sBackFieldName":"","sCreator":"huansi","sFieldCaption":"成本单价","sFieldName":"nPriceCost","sFieldType":"9","sOldFieldCaption":"成本单价","sOldTypeName":"卡片3","sRemark":"物料主档","sTableName":"mmMaterial","sTypeName":"卡片3","sUpdateMan":"huansi","sUrlAddress":"","tCreateTime":"2019-08-19 09:32:20.057","tUpdateTime":"2019-08-19 09:32:20.057"},{"bAmend":true,"bDisabled":false,"bHome":false,"bOldRequired":false,"bOldVisible":true,"bPrint":false,"bRequired":false,"bUsable":true,"bVisible":true,"iCompanyId":"2","iCreator":"1","iIden":"52","iOldRowNo":"6","iOldType":"3","iProjectId":"5599","iRowNo":6,"iType":"3","sBackFieldName":"","sCreator":"huansi","sFieldCaption":"备注","sFieldName":"sRemark","sFieldType":"2","sOldFieldCaption":"备注","sOldTypeName":"卡片3","sRemark":"物料主档","sTableName":"mmMaterial","sTypeName":"卡片3","sUpdateMan":"huansi","sUrlAddress":"","tCreateTime":"2019-08-19 09:32:20.057","tUpdateTime":"2019-08-19 09:32:20.057"}]}'
        this.sTableName = 'mmMaterialColor';
        this.list=JSON.parse(list);
        switch(this.sTableName){
            case 'mmMaterialColor':
                this.isDetail = true;
                break;
            default:
                break;
        }
        this.rePos();
    },
    methods:{
        changeSelect(e){
            let selectedIndex = e.target.selectedIndex;
            this.modalData.iType = this.cardList[selectedIndex].iType;
            this.modalData.sTypeName = this.cardList[selectedIndex].title;
            let data = Util.deepClone(this.modalData);
            this.list[this.cardIndex].splice(this.rowIndex,1);
            for(let x in this.list){
                if(x == this.cardList[selectedIndex].iType){
                    data.iRowNo = this.list[x].length;
                    this.list[x].push(data);
                }
            }
            this.isMask = false;
            this.rePos();
        },
        preventStop(){
            return true;
        },
        recovery(){//恢复默认
            wx.showModal({
                title:"提示",
                content:"是否恢复默认？",
                success:async res=>{
                    if(res.confirm){
                        var result = await this.$parent.base.shopVerGetCustomFields("goback/",{
                            iCompanyId:this.$parent.globalData.userData.iCompanyID,
                            iProjectId:this.$parent.globalData.userData.iProjectId,
                            sTableName:this.sTableName,
                        })
                        if(typeof result == 'object' && result.length > 0){
                            this.list = {};
                            result.map(x=>{
                                if(this.list.hasOwnProperty(x.iType)){
                                    let data = this.list[x.iType];
                                    if(Number(x.iRowNo) < Number(data[data.length - 1].iRowNo)){
                                        this.list[x.iType].unshift(x)
                                    }else{
                                        this.list[x.iType].push(x)
                                    }
                                }else{
                                    this.list[x.iType] = [];
                                    this.list[x.iType].push(x)
                                }
                            })
                            console.log(this.list)
                            let list = Util.deepClone(this.list)
                            
                            var newkey = Object.keys(list).sort();
                            this.list = {};
                            newkey.map((x,y)=>{
                                this.list[x] = list[x];
                            })
                            
                            this.$parent.globalData.customFields = this.list;
                            this.rePos();
                        }else{
                            this.$parent.Tip.alert("恢复失败！",1000)
                        }
                    }
                }
            })
        },
        setValue(i1,i2){
            if(this.list[i1][i2].sFieldName!='sFieldLocation'){
                this.isMask=true;
                this.cardIndex = i1;
                this.rowIndex = i2;
                this.modalData = this.list[i1][i2];
            }else{
                wx.navigateTo({
                    url:"./dtlCustom"
                })
            }
        },
        hide(){
            this.isMask=false
        },
        async up(){//提交编辑的菜单
            let data = [];
            for(let x in this.list){
                this.list[x].map(y=>{
                    data.push(y)
                })
            }
            var value=await this.$parent.base.shopVerPostCustomFields("savelist/",data)
            if(/ok/i.test(value)){
                wx.globalData.isRefresh = true;
                this.$parent.globalData.customFields = this.list
                wx.navigateBack()
            }else{
                this.$paretn.Tip.alert('保存失败！',900)
            }
            
        },
        select(_index,index){
            this.list[_index][index].bAmend&&(this.list[_index][index].bVisible=!this.list[_index][index].bVisible)
        },
        start(_i,i,e){
            this.posSave=this.posList[_i][i]
            this.posStyle[i]=100
            this.pos=e.touches[0].pageY
            this.bodyStyle='hidden'
        },
        move(_i,i,e){
            let posList = Util.deepClone(this.posList)
            var pos=e.touches[0].pageY-this.pos+this.posSave
            if(pos<=0){
                pos=0;
            }else if(pos>(this.list[_i].length-1)*45){
                pos = (this.list[_i].length-1)*45
            }
            posList[_i][i] = pos;
            this.$set(this,'posList',posList)
        },
        end(_i,i,e){
            this.posStyle[i]=1
            var pos=e.changedTouches[0].pageY-this.pos+this.posSave
            var index=parseInt((pos+23)/45)
            this.list[_i].splice(index,0,this.list[_i].splice(i,1)[0])
            this.rePos()
            this.bodyStyle='auto'
        },
        rePos(){
            this.posList={}
            for(let x in this.list){
                this.list[x].map((j,k)=>{
                    let flag = false;
                    this.cardList.map((z)=>{
                        if(z.iType == j.iType){
                            flag = true;
                        }
                    })
                    if(!flag){
                        this.cardList.push({
                            iType:j.iType,
                            title:j.sTypeName,
                            isOpen:true
                        })
                    }
                    if(this.posList.hasOwnProperty(x)){
                        this.posList[x].push(45*k);
                    }else{
                        this.posList[x] = [];
                        this.posList[x].push(45*k)
                    }
                    this.list[x][k].iRowNo=k+1
                })
            }
            console.log(this.cardList)
        }
    },
    components:{
        XInput,XSwitch,PopupPicker
    }
}
</script>