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

@@ -8,7 +8,7 @@
        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 +42,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 +54,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"
@@ -121,7 +122,7 @@
                        },{
                            label: '参照的业务类型',
                            search: false,
                            prop: 'referType'
                            prop: 'referTypeName'
                        },{
                            label: '显示的属性',
                            search: false,
@@ -156,67 +157,67 @@
                    emptyBtn: false,
                    labelWidth: '150', //默认标签宽度
                    // 默认配置就为树形类型，改了会出现问题
                    column: [{
                        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'
                        }],
                    },
                    column: [
                        {
                            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'
                            }],
                        },
                    ],
                },
                referConfigForm:{},
@@ -371,6 +372,10 @@
                    srchCondData: [],
                    isShow: true,
                },
                toggleSrchCrudWidth: {
                    width: '40%',
                    height: '100%',
                },

                //显示的属性表格配置区域
                showAttrOption: {
@@ -409,19 +414,19 @@
                                    prop: 'title'
                                },{
                                    label: '字段类型',
                                    prop: 'fieldType'
                                    prop: 'fieldTypeText'
                                },{
                                    label: '列表可排序',
                                    prop: 'sort' 
                                },{
                                    label: '排序字段',
                                    prop: 'sortField' 
                                    prop: 'attrSortField' 
                                },{
                                    label: '字段宽度',
                                    prop: 'width' 
                                },{
                                    label: '列固定位置',
                                    prop: 'fixedText' 
                                    prop: 'fixedPositionText' 
                                },{
                                    label: 'js显示代码',
                                    prop: 'templet' 
@@ -442,10 +447,14 @@

                // 是否显示变动的表单区域
                isShowForm: true,
                toggleCrudWidth: {
                toggleBasicCrudWidth: {
                    height: '100%',
                    width: '70%',
                },
                
                // 是否显示属性表格
                isShowAttrCrud: true,
                
                defaultOrGridForm: ['limit','sortField','sortType'],
                standForm: ['referContent','displayTable'],
                treeForm: [
@@ -469,11 +478,107 @@
                    this.$message.warning("请选择一条数据！");
                    return;
                }
                let filterForm = this.filterForm(currentSeletedRow);
                if(condition == "selectedSave"){
                    //console.log(currentSeletedRow);
                    // 直接保存,所以直接调用code界面的界面回显 
                    this.$emit('echoReferConfig',filterForm);
                    // console.log(filterForm);
                }else {
                    //console.log(currentSeletedRow);
                    // 选择并修改,执行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', 
                        '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;
            },
             /**
             * 为空
             * @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;
@@ -494,12 +599,16 @@
                    this.referConfigParams.referConfigPage.total = data.total;
                    this.referConfigParams.referConfigData = data.records;
                    this.referConfigParams.referConfigLoading = false;
                    //console.log(this.referConfigParams.referConfigData.length > 0);     
                    //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]);
                        }) 
@@ -544,14 +653,15 @@
                   currentFormData.type != 'grid') {
                    //控制参照配置表格和表单显示比例
                    this.isShowForm = false;
                    this.toggleCrudWidth.width = '100%';
                    this.toggleBasicCrudWidth.width = '100%';
                }else {
                    this.isShowForm = true;
                    this.toggleCrudWidth.width = '70%';
                    this.toggleBasicCrudWidth.width = '70%';
                    this.toggleFormOption(currentFormData);
                }
                this.toggleCurdWidth(currentFormData);
                //console.log(this.isShowForm);
                //console.log(this.toggleCrudWidth.width);
                //console.log(this.toggleBasicCrudWidth.width);
            },

            // 根据type的变动切换表单的配置option
@@ -560,7 +670,7 @@
                let currentForm = '';
                if(data.type=='default' || data.type=='grid'){
                    this.formOption.column = this.sortColumn;
                    currentForm = 'defaultOrGridForm'
                    currentForm = 'defaultOrGridForm';
                }else if(data.type == 'stand'){
                    this.formOption.column = this.standColumn;
                    currentForm = 'standForm';
@@ -569,12 +679,26 @@
                    currentForm = 'treeForm'
                }
                this.referConfigForm = {},
                console.log( this.formOption);
                //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);
                // 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);
            },

            // 显示的属性和查询条件相关方法
@@ -587,6 +711,7 @@
                });
                this.srchCondParams.srchCondData = row.codeSrchCondConfigVOS
                this.showAttrParams.showAttrData = row.codeShowFieldConfigVOS
                //console.log(this.showAttrParams.showAttrData);
                this.srchCondParams.srchCondLoading = false;
                this.showAttrParams.showAttrLoading = false;
            },