Source/UBCS-WEB/src/components/code-dialog-page/referConfigCrudDialog.vue

@@ -1,14 +1,17 @@
<template>
    <el-dialog
        :close-on-click-modal="false"
        title="选择参照配置"
        append-to-body
        :visible.sync="isShowReferConfigCrud"
        width="95%"
        top="0"
        class= "avue-dialog avue-dialog--top"
        id="refer-config-dialog"
        style="height: 115vh; margin-top: -14vh; overflow-y: hidden">
        <div style="width: 100%; overflow-y: auto; height: 70vh">
            <el-row style="width: 100%; height:70%">
                <el-col :style="toggleCrudWidth">
                <el-col :style="toggleBasicCrudWidth">
                    <basic-container style="width: 100%;">
                        <avue-crud :option="referConfigCrudOption"
                            class="refer-config-crud"
@@ -42,8 +45,9 @@
                    </basic-container>
                </el-col>
            </el-row>
            <el-row style="width: 100%; height:30%; margin-top: 130px" v-show="srchCondParams.isShow && showAttrParams.isShow">
                <el-col v-show="srchCondParams.isShow" style="width: 40%;">
            <el-row style="width: 100%; height:30%; margin-top: 130px">
                <el-col 
                    :style="toggleSrchCrudWidth">
                    <basic-container style="width: 100%; height:100%;">
                        <avue-crud :option="srchCondOption"
                            class="refer-srchcond-crud"
@@ -53,7 +57,7 @@
                        </avue-crud>
                    </basic-container>
                </el-col>
                <el-col v-show="showAttrParams.isShow" style="width: 60%;">
                <el-col v-show="showAttrParams.isShow" style="width: 60%; height: 100%;">
                    <basic-container style="width: 100%; height:100%;">
                        <avue-crud :option="showAttrOption"
                            class="refer-attr-crud"
@@ -76,87 +80,89 @@
//import func from "@/util/func";
import { getReferConfigPage } from "@/api/code/codeReferConfig";
export default {
    name: "referConfigDialog",
        props: {
        },
        data() {
            return{
                isShowReferConfigCrud:false,
                referConfigCrudOption: {
                    border: true,
                    height: '45vh',
                    tip: false,
                    searchShow: true,
                    searchMenuSpan: 6,
                    index: true,
                    selection: false,
                    menu: false,
                    addBtn: false,
                    refreshBtn: false,
                    searchShowBtn: false,
                    columnBtn: false,
                    dialogClickModal: false,
                    highlightCurrentRow: true,
                    align: 'center',
                    menuAlign: 'center',
                    column: [
                        {
                            label: '-',
                            prop: 'radio',
                            width: 60,
                            hide: false
                        },{
                            label: '参照配置编号',
                            width: 120,
                            search: true,
                            searchSpan: 9,
                            searchLabelWidth: 100,
                            prop: 'id'
                        },{
                            label: '参照配置名称',
                            search: true,
                            searchSpan: 9,
                            searchLabelWidth: 100,
                            prop: 'name'
                        },{
                            label: '参照的业务类型',
                            search: false,
                            prop: 'referType'
                        },{
                            label: '显示的属性',
                            search: false,
                            prop: 'textField' 
                        },{
                            label: '存储值的属性',
                            search: false,
                            prop: 'valueField' 
                        },{
                            label: '参照窗口类型',
                            search: false,
                            prop: 'typeText',
                        }
                    ],
    name: "referConfigCrudDialog",
    props: {
       
    },
    data() {
        return{
            isShowReferConfigCrud: false,
            referConfigCrudOption: {
                border: true,
                height: '45vh',
                tip: false,
                searchShow: true,
                searchMenuSpan: 6,
                index: true,
                selection: false,
                menu: false,
                addBtn: false,
                refreshBtn: false,
                searchShowBtn: false,
                columnBtn: false,
                dialogClickModal: false,
                highlightCurrentRow: true,
                align: 'center',
                menuAlign: 'center',
                column: [
                    {
                        label: '-',
                        prop: 'radio',
                        width: 60,
                        hide: false
                    },{
                        label: '参照配置编号',
                        width: 120,
                        search: true,
                        searchSpan: 9,
                        searchLabelWidth: 100,
                        prop: 'id'
                    },{
                        label: '参照配置名称',
                        search: true,
                        searchSpan: 9,
                        searchLabelWidth: 100,
                        prop: 'name'
                    },{
                        label: '参照的业务类型',
                        search: false,
                        prop: 'referTypeName'
                    },{
                        label: '显示的属性',
                        search: false,
                        prop: 'textField' 
                    },{
                        label: '存储值的属性',
                        search: false,
                        prop: 'valueField' 
                    },{
                        label: '参照窗口类型',
                        search: false,
                        prop: 'typeText',
                    }
                ],
            },
            referConfigParams: {
                ref: "referConfigCrud",
                referConfigLoading: false,
                referConfigData: [],
                referConfigPage: {
                    pageSize: 10,
                    currentPage: 1,
                    total: 0
                },
                referConfigParams: {
                    ref: "referConfigCrud",
                    referConfigLoading: false,
                    referConfigData: [],
                    referConfigPage: {
                        pageSize: 10,
                        currentPage: 1,
                        total: 0
                    },
                    referConfigQuery: {},
                    referConfigSelectedRowData: '',
                    // 当前选中行
                    referConfigSelectedRow: '',
                },
                formOption: {
                    submitBtn: false,
                    emptyBtn: false,
                    labelWidth: '150', //默认标签宽度
                    // 默认配置就为树形类型，改了会出现问题
                    column: [{
                referConfigQuery: {},
                referConfigSelectedRowData: '',
                // 当前选中行
                referConfigSelectedRow: '',
            },
            formOption: {
                submitBtn: false,
                emptyBtn: false,
                labelWidth: '150', //默认标签宽度
                // 默认配置就为树形类型，改了会出现问题
                column: [
                    {
                        label: '树形的上级属性',
                        prop: 'parentFieldName',
                        span: 24,
@@ -177,8 +183,7 @@
                        disabled: true,
                        row: true,
                        placeholder: ' ',
                    },
                    {
                    },{
                        label: '树加载方式',
                        prop: 'loadType',
                        span: 24,
@@ -217,383 +222,513 @@
                            label: '降序', value: 'desc'
                        }],
                    },
                    ],
                },
                referConfigForm:{},
                // 排序类型的表单配置
                sortColumn:[{            
                    label: '每页显示条数',
                    prop: 'limit',
                    span: 24,
                    disabled: true,
                    row: true,
                    placeholder: ' ',
                },{
                    label: '排序字段',
                    prop: 'sortField',
                    span: 24,
                    disabled: true,
                    row: true,
                    placeholder: ' ',
                },{
                    label: '排序类型',
                    prop: 'sortType',
                    span: 24,
                    disabled: true,
                    row: true,
                    placeholder: ' ',
                    dicData: [{
                        label: '升序', value: 'asc'
                    }, {
                        label: '降序', value: 'desc'
                    }],
                }],
                // 树形类型的表单配置
                treeColumn:[{
                    label: '树形的上级属性',
                    prop: 'parentFieldName',
                    span: 24,
                    disabled: true,
                    row: true,
                    placeholder: ' ',
                },{
                    label: '上级属性值对应属性',
                    prop: 'parentUsedField',
                    span: 24,
                    disabled: true,
                    row: true,
                    placeholder: ' ',
                },{
                    label: '根节点的值',
                    prop: 'parentValue',
                    span: 24,
                    disabled: true,
                    row: true,
                    placeholder: ' ',
                },
                {
                    label: '树加载方式',
                    prop: 'loadType',
                    span: 24,
                    disabled: true,
                    row: true,
                    placeholder: ' ',
                    dicData: [{
                        label: '全部', value: 'all'
                    }, {
                        label: '逐级加载', value: 'node'
                    }],
                },{
                    label: '是否只能选择叶子节点',
                    prop: 'onlyLeaf',
                    span: 24,
                    disabled: true,
                    row: true,
                    placeholder: ' ',
                },{
                    label: '排序字段',
                    prop: 'sortField',
                    span: 24,
                    disabled: true,
                    row: true,
                    placeholder: ' ',
                },{
                    label: '排序类型',
                    prop: 'sortType',
                    span: 24,
                    disabled: true,
                    row: true,
                    placeholder: ' ',
                    dicData: [{
                        label: '升序', value: 'asc'
                    }, {
                        label: '降序', value: 'desc'
                    }],
                },
                ],
                // 平台类型的表单配置
                standColumn:[{
                    label: '参考的UI上下文',
                    prop: 'referContent',
                    span: 24,
                    disabled: true,
                    row: true,
                    placeholder: ' ',
                },
                {
                    label: '平台的表格编号',
                    prop: 'displayTable',
                    span: 24,
                    disabled: true,
                    row: true,
                    placeholder: ' ',
            },
            referConfigForm:{},
            // 排序类型的表单配置
            sortColumn:[{            
                label: '每页显示条数',
                prop: 'limit',
                span: 24,
                disabled: true,
                row: true,
                placeholder: ' ',
            },{
                label: '排序字段',
                prop: 'sortField',
                span: 24,
                disabled: true,
                row: true,
                placeholder: ' ',
            },{
                label: '排序类型',
                prop: 'sortType',
                span: 24,
                disabled: true,
                row: true,
                placeholder: ' ',
                dicData: [{
                    label: '升序', value: 'asc'
                }, {
                    label: '降序', value: 'desc'
                }],
            }],
            // 树形类型的表单配置
            treeColumn:[{
                label: '树形的上级属性',
                prop: 'parentFieldName',
                span: 24,
                disabled: true,
                row: true,
                placeholder: ' ',
            },{
                label: '上级属性值对应属性',
                prop: 'parentUsedField',
                span: 24,
                disabled: true,
                row: true,
                placeholder: ' ',
            },{
                label: '根节点的值',
                prop: 'parentValue',
                span: 24,
                disabled: true,
                row: true,
                placeholder: ' ',
            },
            {
                label: '树加载方式',
                prop: 'loadType',
                span: 24,
                disabled: true,
                row: true,
                placeholder: ' ',
                dicData: [{
                    label: '全部', value: 'all'
                }, {
                    label: '逐级加载', value: 'node'
                }],
            },{
                label: '是否只能选择叶子节点',
                prop: 'onlyLeaf',
                span: 24,
                disabled: true,
                row: true,
                placeholder: ' ',
            },{
                label: '排序字段',
                prop: 'sortField',
                span: 24,
                disabled: true,
                row: true,
                placeholder: ' ',
            },{
                label: '排序类型',
                prop: 'sortType',
                span: 24,
                disabled: true,
                row: true,
                placeholder: ' ',
                dicData: [{
                    label: '升序', value: 'asc'
                }, {
                    label: '降序', value: 'desc'
                }],
            },
            ],
            // 平台类型的表单配置
            standColumn:[{
                label: '参考的UI上下文',
                prop: 'referContent',
                span: 24,
                disabled: true,
                row: true,
                placeholder: ' ',
            },
            {
                label: '平台的表格编号',
                prop: 'displayTable',
                span: 24,
                disabled: true,
                row: true,
                placeholder: ' ',
            }],

                // 查询条件表格区域
                srchCondOption: {
                    border: true,
                    height: '40vh',
                    tip: false,
                    searchShow: false,
                    searchMenuSpan: 6,
                    index: true,
                    selection: false,
                    menu: false,
                    addBtn: false,
                    refreshBtn: false,
                    searchShowBtn: false,
                    columnBtn: false,
                    dialogClickModal: false,
                    highlightCurrentRow: true,
                    align: 'center',
                    menuAlign: 'center',
                    column: [
                        {
                            label: '查询条件',
                            children: [
                                {
                                    label: '筛选字段',
                                    prop: 'filterField',
                                },{
                                    label: '筛选类型',
                                    prop: 'filterType',
                                },{
                                    label: '筛选的值',
                                    prop: 'filterValue',
                                }
                            ],
                        }, 
                    ],
                },
                srchCondParams: {
                    ref: "srchCondCrud",
                    srchCondLoading: false,
                    srchCondData: [],
                    isShow: true,
                },
            // 查询条件表格区域
            srchCondOption: {
                border: true,
                height: '40vh',
                tip: false,
                searchShow: false,
                searchMenuSpan: 6,
                index: true,
                selection: false,
                menu: false,
                addBtn: false,
                refreshBtn: false,
                searchShowBtn: false,
                columnBtn: false,
                dialogClickModal: false,
                highlightCurrentRow: true,
                align: 'center',
                menuAlign: 'center',
                column: [
                    {
                        label: '查询条件',
                        children: [
                            {
                                label: '筛选字段',
                                prop: 'filterField',
                            },{
                                label: '筛选类型',
                                prop: 'filterType',
                            },{
                                label: '筛选的值',
                                prop: 'filterValue',
                            }
                        ],
                    }, 
                ],
            },
            srchCondParams: {
                ref: "srchCondCrud",
                srchCondLoading: false,
                srchCondData: [],
                isShow: true,
            },
            toggleSrchCrudWidth: {
                width: '40%',
                height: '100%',
            },

                //显示的属性表格配置区域
                showAttrOption: {
                    border: true,
                    height: '40vh',
                    tip: false,
                    searchShow: false,
                    searchMenuSpan: 6,
                    index: true,
                    selection: false,
                    menu: false,
                    addBtn: false,
                    refreshBtn: false,
                    searchShowBtn: false,
                    columnBtn: false,
                    dialogClickModal: false,
                    highlightCurrentRow: true,
                    align: 'center',
                    menuAlign: 'center',
                    column: [
                        {
                            label: '显示的属性',
                            children: [
                                {
                                    label: '列字段',
                                    // width: 120,
                                    prop: 'field',
                                     //type: 'select',
                                    // props: {
                                    //     label: 'name',
                                    //     value: 'code'
                                    // },
                                    // dicUrl: 'https://cli.avuejs.com/api/area/getProvince'
                                },{
                                    label: '列名',
                                    prop: 'title'
                                },{
                                    label: '字段类型',
                                    prop: 'fieldType'
                                },{
                                    label: '列表可排序',
                                    prop: 'sort' 
                                },{
                                    label: '排序字段',
                                    prop: 'sortField' 
                                },{
                                    label: '字段宽度',
                                    prop: 'width' 
                                },{
                                    label: '列固定位置',
                                    prop: 'fixedText' 
                                },{
                                    label: 'js显示代码',
                                    prop: 'templet' 
                                },{
                                    label: '是否快速查询',
                                    prop: 'isQuery' 
                                }
                            ]
                        }, 
                    ],
                },
                showAttrParams: {
                    ref: "showAttrCrud",
                    showAttrLoading: false,
                    showAttrData: [],
                    isShow: true,
                },
            //显示的属性表格配置区域
            showAttrOption: {
                border: true,
                height: '40vh',
                tip: false,
                searchShow: false,
                searchMenuSpan: 6,
                index: true,
                selection: false,
                menu: false,
                addBtn: false,
                refreshBtn: false,
                searchShowBtn: false,
                columnBtn: false,
                dialogClickModal: false,
                highlightCurrentRow: true,
                align: 'center',
                menuAlign: 'center',
                column: [
                    {
                        label: '显示的属性',
                        children: [
                            {
                                label: '列字段',
                                // width: 120,
                                prop: 'field',
                                    //type: 'select',
                                // props: {
                                //     label: 'name',
                                //     value: 'code'
                                // },
                                // dicUrl: 'https://cli.avuejs.com/api/area/getProvince'
                            },{
                                label: '列名',
                                prop: 'title'
                            },{
                                label: '字段类型',
                                prop: 'fieldTypeText'
                            },{
                                label: '列表可排序',
                                prop: 'sort' 
                            },{
                                label: '排序字段',
                                prop: 'attrSortField' 
                            },{
                                label: '字段宽度',
                                prop: 'width' 
                            },{
                                label: '列固定位置',
                                prop: 'fixedPositionText' 
                            },{
                                label: 'js显示代码',
                                prop: 'templet' 
                            },{
                                label: '是否快速查询',
                                prop: 'isQuery' 
                            }
                        ]
                    }, 
                ],
            },
            showAttrParams: {
                ref: "showAttrCrud",
                showAttrLoading: false,
                showAttrData: [],
                isShow: true,
            },

                // 是否显示变动的表单区域
                isShowForm: true,
                toggleCrudWidth: {
                    height: '100%',
                    width: '70%',
                },
                defaultOrGridForm: ['limit','sortField','sortType'],
                standForm: ['referContent','displayTable'],
                treeForm: [
                    'parentFieldName',
            // 是否显示变动的表单区域
            isShowForm: true,
            toggleBasicCrudWidth: {
                height: '100%',
                width: '70%',
            },
            
            // 是否显示属性表格
            isShowAttrCrud: true,
            
            defaultOrGridForm: ['limit','sortField','sortType'],
            standForm: ['referContent','displayTable'],
            treeForm: [
                'parentFieldName',
                'parentUsedField',
                'parentValue',
                'loadType',
                'onlyLeaf',
                'sortField',
                'sortType'
            ],
        }
    },
    watch: {
        // 监听父组件传的窗口显示隐藏的值
        isShowReferConfigCrud (){
            if(this.isShowReferConfigCrud){
                this.referConfigOnload();
            }
        }
    },
    methods: {

        // 下一步要进行的操作选择并保存或选择并修改
        selectedreferConfig(condition) {
            // 当前选中的参照配置行
            let currentSeletedRow = this.referConfigParams.referConfigSelectedRowData;
            if(!currentSeletedRow){
                this.$message.warning("请选择一条数据！");
                return;
            }
            let filterForm = this.filterForm(currentSeletedRow);
            if(condition == "selectedSave"){
                // 直接保存,所以直接调用code界面的界面回显 
                this.$emit('echoReferConfig',filterForm);
                // console.log(filterForm);
            }else {
                // 选择并修改,执行code服务中的打开界面，所以要先构造出所需的数据
                let submitForm = {
                    referBtmName: filterForm.referType,
                    referBtmId: filterForm.referTypeName,
                    referConfig:  JSON.stringify(filterForm),
                }
                this.$emit('openReconfigInterFace',submitForm);
            }
            this.isShowReferConfigCrud = false;
        },
        // 过滤出当前类型所需要的属性
        filterForm(currentRow){
            // 需要保留的基础属性
            let submittDefaultForm = [
                'referTypeName',
                'referType',
                'textField',
                'valueField',
                'type', //参照窗口类型
                'url',
                'backPath',
                'method',
                'height',
                'useFormKey',
                'paramForFormKey',
                'isMuti',
                'mapFields', 
                'isOpenGlobal', //是否开启全局
                'isPersistence',
                'id',
                'name',
            ];
            // 需要根据类型添加的属性
            let addArray = [];
            let newForm ={};
            // 根据不同类型过滤出不同的的表单属性
            if(currentRow.type == 'stand'){
                addArray = ['referContent', 'displayTable'];
            } else if(currentRow.type == 'default' || currentRow.type == 'grid'){
                addArray = ['limit', 'sortField', 'sortType'];
            } else if(currentRow.type == 'tree'){
                addArray = [
                    "parentFieldName", 
                    'parentUsedField',
                    'parentValue',
                    'parentValue', 
                    'loadType',
                    'onlyLeaf',
                    'sortField',
                    'sortType'
                ],
                ];
            }
            // 拼接两个数组
            submittDefaultForm = submittDefaultForm.concat(addArray);
            if(currentRow.codeSrchCondConfigVOS.length > 0){
                //console.log(currentRow.codeSrchCondConfigVOS);
                newForm = {
                    codeSrchCondConfigVOS: currentRow.codeSrchCondConfigVOS,
                }
            }
            if((currentRow.type == 'default' || currentRow.type  == 'grid') && currentRow.codeShowFieldConfigVOS.length >= 0){
                newForm = Object.assign(newForm,{codeShowFieldConfigVOS: currentRow.codeShowFieldConfigVOS});
            }
            // 过滤出空值属性和不需要的属性
            submittDefaultForm.forEach(item=>{
                // console.log(!this.checkStringIsEmpty(currentRow[item]) || !this.checkArrayIsUndefined(currentRow[item]));
                if((item == 'isMuti' || item == 'onlyLeaf') || (!this.checkStringIsEmpty(currentRow[item]) || !this.checkArrayIsUndefined(currentRow[item]))){
                    //console.log(item,currentRow[item]);
                    newForm = Object.assign(newForm,{[item]:currentRow[item]});  
                }
            });
            // console.log(newForm);
            return newForm;
        },
        methods: {

            // 下一步要进行的操作选择并保存或选择并修改
            selectedreferConfig(condition) {
                // 当前选中的参照配置行
                let currentSeletedRow = this.referConfigParams.referConfigSelectedRowData;
                if(!currentSeletedRow){
                    this.$message.warning("请选择一条数据！");
                    return;
                }
                if(condition == "selectedSave"){
                    
                    //console.log(currentSeletedRow);
                }else {
                    //console.log(currentSeletedRow);
                    
                }
            },
            referConfigOnload(){
                let refer = this.referConfigParams;
                refer.referConfigLoading = true;
                let param = {};
                // 多个conditionMap这样传参
                if(refer.referConfigQuery){
                    Object.keys(refer.referConfigQuery).forEach(key=>{
                        param['conditionMap['+key+']'] = refer.referConfigQuery[key];
                    });
                }
                getReferConfigPage(
                    refer.referConfigPage.currentPage, 
                    refer.referConfigPage.pageSize,
                    param
                ).then(res=>{
                    const data = res.data.data;
                    this.referConfigParams.referConfigPage.total = data.total;
                    this.referConfigParams.referConfigData = data.records;
                    this.referConfigParams.referConfigLoading = false;
                    //console.log(this.referConfigParams.referConfigData.length > 0);     
                    if(this.referConfigParams.referConfigData.length > 0) {      
                        this.$nextTick(() => {
                            this.$refs[this.referConfigParams.ref].doLayout()
                            this.referConfigParams.referConfigSelectedRow = 0;
                            this.$refs[this.referConfigParams.ref].setCurrentRow(this.referConfigParams.referConfigData[0]);
                            this.attrAndSrchCondOnload(this.referConfigParams.referConfigData[0]);
                            this.loadDefaultOrGridOrStandOrTreeForm(this.referConfigParams.referConfigData[0]);
                        }) 
                    }
                });
            },
            referBtmTypeSizeChange(pageSize){
                this.referConfigParams.referConfigPage.pageSize = pageSize;
            },
            referBtmTypeCurrentChange(currentPage){
                this.referConfigParams.referConfigPage.currentPage = currentPage;
            },
            referConfigRowClick(row){
                // 对当前选中行进行记录
                this.referConfigParams.referConfigSelectedRowData = row;
                // 单选框选中
                this.referConfigParams.referConfigSelectedRow = row.$index
                this.attrAndSrchCondOnload(row);
                this.loadDefaultOrGridOrStandOrTreeForm(row);
            },
            referConfigSearchChange(params, done){
                this.referConfigParams.referConfigQuery = params;
                this.referConfigParams.referConfigPage.currentPage = 1;
                this.referConfigOnload();
                done();
            },
            referConfigSearchReset(){
                this.referConfigParams.referConfigQuery = {};
                this.referConfigOnload(this.referConfigParams.referConfigPage);
            },
            referConfigCurrentChange(currentPage){
                this.referConfigParams.referConfigPage.currentPage = currentPage;               
            },
            referConfigSizeChange(pageSize){
                this.referConfigParams.referConfigPage.pageSize = pageSize;
            },
            // 加载表单显示内容
            loadDefaultOrGridOrStandOrTreeForm(currentFormData){
                if(currentFormData.type != 'tree' & 
                   currentFormData.type != 'stand' &
                   currentFormData.type != 'default'&
                   currentFormData.type != 'grid') {
                    //控制参照配置表格和表单显示比例
                    this.isShowForm = false;
                    this.toggleCrudWidth.width = '100%';
                }else {
                    this.isShowForm = true;
                    this.toggleCrudWidth.width = '70%';
                    this.toggleFormOption(currentFormData);
                }
                //console.log(this.isShowForm);
                //console.log(this.toggleCrudWidth.width);
            },

            // 根据type的变动切换表单的配置option
            toggleFormOption(data){
                //console.log(data);
                let currentForm = '';
                if(data.type=='default' || data.type=='grid'){
                    this.formOption.column = this.sortColumn;
                    currentForm = 'defaultOrGridForm'
                }else if(data.type == 'stand'){
                    this.formOption.column = this.standColumn;
                    currentForm = 'standForm';
                }else if(data.type == 'tree'){
                    this.formOption.column = this.treeColumn;
                    currentForm = 'treeForm'
                }
                this.referConfigForm = {},
                console.log( this.formOption);
                this[currentForm].forEach(item=>{
                    Vue.set(this.referConfigForm, item, data[item])
                    //this.referConfigForm = Object.assign(this.referConfigForm,{[item]:data[item]})
                })
                console.log(this.referConfigForm);
            },

            // 显示的属性和查询条件相关方法
            attrAndSrchCondOnload(row){
                this.srchCondParams.srchCondLoading = true;
                this.showAttrParams.showAttrLoading = true;
                this.$nextTick(() => {
                    this.$refs[this.srchCondParams.ref].doLayout()
                    this.$refs[this.showAttrParams.ref].doLayout()
                });
                this.srchCondParams.srchCondData = row.codeSrchCondConfigVOS
                this.showAttrParams.showAttrData = row.codeShowFieldConfigVOS
                this.srchCondParams.srchCondLoading = false;
                this.showAttrParams.showAttrLoading = false;
            },

            /**
         * 为空
         * @param val
         * @returns {boolean}
        */
        checkStringIsEmpty(val){
            if (
                val === null ||
                typeof val === 'undefined' ||
                (typeof val === 'string' && val === "" && val !== 'undefined')
            ) {
                return true;
            }
                return false;
        },
            /**
         * 是否为定义
         * @param val
         * @returns {boolean}
         */
        checkArrayIsUndefined(val){
            return typeof val === 'array' && (val.length === 0 || val === null || typeof val === 'undefined' || val === []);
        },
        referConfigOnload(){
            let refer = this.referConfigParams;
            refer.referConfigLoading = true;
            let param = {};
            // 多个conditionMap这样传参
            if(refer.referConfigQuery){
                Object.keys(refer.referConfigQuery).forEach(key=>{
                    param['conditionMap['+key+']'] = refer.referConfigQuery[key];
                });
            }
            getReferConfigPage(
                refer.referConfigPage.currentPage, 
                refer.referConfigPage.pageSize,
                param
            ).then(res=>{
                const data = res.data.data;
                this.referConfigParams.referConfigPage.total = data.total;
                this.referConfigParams.referConfigData = data.records;
                this.referConfigParams.referConfigLoading = false;
                //console.log(this.referConfigParams.referConfigData.length > 0); 
                // 渲染其他区域数据    
                if(this.referConfigParams.referConfigData.length > 0) {      
                    this.$nextTick(() => {
                        // 表格错行问题
                        this.$refs[this.referConfigParams.ref].doLayout()
                        // 默认选中第一行
                        this.referConfigParams.referConfigSelectedRow = 0;
                        this.$refs[this.referConfigParams.ref].setCurrentRow(this.referConfigParams.referConfigData[0]);
                        this.referConfigParams.referConfigSelectedRowData = this.referConfigParams.referConfigData[0];
                        this.attrAndSrchCondOnload(this.referConfigParams.referConfigData[0]);
                        this.loadDefaultOrGridOrStandOrTreeForm(this.referConfigParams.referConfigData[0]);
                    }) 
                }
            });
        },
        referBtmTypeSizeChange(pageSize){
            this.referConfigParams.referConfigPage.pageSize = pageSize;
        },
        referBtmTypeCurrentChange(currentPage){
            this.referConfigParams.referConfigPage.currentPage = currentPage;
        },
        referConfigRowClick(row){
            // 对当前选中行进行记录
            this.referConfigParams.referConfigSelectedRowData = row;
            // 单选框选中
            this.referConfigParams.referConfigSelectedRow = row.$index
            this.attrAndSrchCondOnload(row);
            this.loadDefaultOrGridOrStandOrTreeForm(row);
        },
        referConfigSearchChange(params, done){
            this.referConfigParams.referConfigQuery = params;
            this.referConfigParams.referConfigPage.currentPage = 1;
            this.referConfigOnload();
            done();
        },
        referConfigSearchReset(){
            this.referConfigParams.referConfigQuery = {};
            this.referConfigOnload(this.referConfigParams.referConfigPage);
        },
        referConfigCurrentChange(currentPage){
            this.referConfigParams.referConfigPage.currentPage = currentPage;               
        },
        referConfigSizeChange(pageSize){
            this.referConfigParams.referConfigPage.pageSize = pageSize;
        },
        // 加载表单显示内容
        loadDefaultOrGridOrStandOrTreeForm(currentFormData){
            if(currentFormData.type != 'tree' & 
                currentFormData.type != 'stand' &
                currentFormData.type != 'default'&
                currentFormData.type != 'grid') {
                //控制参照配置表格和表单显示比例
                this.isShowForm = false;
                this.toggleBasicCrudWidth.width = '100%';
            }else {
                this.isShowForm = true;
                this.toggleBasicCrudWidth.width = '70%';
                this.toggleFormOption(currentFormData);
            }
            this.toggleCurdWidth(currentFormData);
            //console.log(this.isShowForm);
            //console.log(this.toggleBasicCrudWidth.width);
        },

        // 根据type的变动切换表单的配置option
        toggleFormOption(data){
            //console.log(data);
            let currentForm = '';
            if(data.type=='default' || data.type=='grid'){
                this.formOption.column = this.sortColumn;
                currentForm = 'defaultOrGridForm';
            }else if(data.type == 'stand'){
                this.formOption.column = this.standColumn;
                currentForm = 'standForm';
            }else if(data.type == 'tree'){
                this.formOption.column = this.treeColumn;
                currentForm = 'treeForm'
            }
            this.referConfigForm = {},
            //console.log( this.formOption);
            this[currentForm].forEach(item=>{
                Vue.set(this.referConfigForm, item, data[item])
                //this.referConfigForm = Object.assign(this.referConfigForm,{[item]:data[item]})
            })
            // console.log(this.referConfigForm);
        },
        // 根据type的变动切换attr表格的显示隐藏，调整查询条件表格的宽度
        toggleCurdWidth(data) {
            if(data.type=='default' || data.type=='grid'){
                this.showAttrParams.isShow = true;
                // 不需要显示属性表格所有需要将查询调价表格缩小为100%
                this.toggleSrchCrudWidth.width = '40%';
            }else {
                this.showAttrParams.isShow = false;
                // 不需要显示属性表格所有需要将查询调价表格缩小为100%
                this.toggleSrchCrudWidth.width = '100%';
            }
            // console.log(this.toggleSrchCrudWidth);
            // console.log(this.showAttrParams.isShow);
        },

        // 显示的属性和查询条件相关方法
        attrAndSrchCondOnload(row){
            this.srchCondParams.srchCondLoading = true;
            this.showAttrParams.showAttrLoading = true;
            this.$nextTick(() => {
                this.$refs[this.srchCondParams.ref].doLayout()
                this.$refs[this.showAttrParams.ref].doLayout()
            });
            this.srchCondParams.srchCondData = row.codeSrchCondConfigVOS
            this.showAttrParams.showAttrData = row.codeShowFieldConfigVOS
            //console.log(this.showAttrParams.showAttrData);
            this.srchCondParams.srchCondLoading = false;
            this.showAttrParams.showAttrLoading = false;
        },

    },
}
</script>