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

@@ -3,13 +3,13 @@
        title="选择参照配置"
        append-to-body
        :visible.sync="isShowReferConfigCrud"
        width="94%"
        width="95%"
        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="width: 70%; height: 100%;">
                    <basic-container style="width: 100%; ">
                <el-col :style="toggleBasicCrudWidth">
                    <basic-container style="width: 100%;">
                        <avue-crud :option="referConfigCrudOption"
                            class="refer-config-crud"
                            :page.sync="referConfigParams.referConfigPage"
@@ -17,9 +17,11 @@
                            :data="referConfigParams.referConfigData"
                            :ref= "referConfigParams.ref"
                            @row-click="referConfigRowClick"
                            @selection-change="referConfigDataChange"
                            @search-change="referConfigSearchChange"
                            @search-reset="referConfigSearchReset">
                            @search-reset="referConfigSearchReset"
                            @current-change="referConfigCurrentChange"
                            @size-change="referConfigSizeChange"
                            @on-load="referConfigOnload">
                            <template #radio="{row}">
                                <el-radio v-model="referConfigParams.referConfigSelectedRow"
                                    :label="row.$index">
@@ -29,26 +31,39 @@
                        </avue-crud>
                    </basic-container>
                </el-col>
                <el-col v-show="true" style="width: 30%; height: 100%;">
                    <basic-container style="width: 100%;">
                <el-col v-show="isShowForm" style="height: 100%; width: 30%;">
                    <basic-container style="width: 100%; height: 100vh; overflow-y: hidden">
                        <avue-form ref="refereConfigForm" 
                        style="height: 65vh;"
                        :option="formOption" 
                        class="refer-confg-form"
                        ></avue-form>
                            style="height: 65vh; overflow-y: auto;"
                            :option="formOption"
                            v-model="referConfigForm"
                            class="refer-confg-form">
                        </avue-form>
                    </basic-container>
                </el-col>
            </el-row>
            <el-row style="width: 100%; height:30%; margin-top: 130px">
                <basic-container style="width: 100%; height:100%;">
                    <avue-crud :option="attrAndSrchCondOption"
                        class="refer-attrorsrchcond-crud"
                        :table-loading="attrAndSrchCondParams.attrAndSrchCondLoading"
                        :data="attrAndSrchCondParams.attrAndSrchCondData"
                        :ref= "attrAndSrchCondParams.ref"
                        @row-click="attrAndSrchCondRowClick">
                    </avue-crud>
                </basic-container>
                <el-col 
                    :style="toggleSrchCrudWidth">
                    <basic-container style="width: 100%; height:100%;">
                        <avue-crud :option="srchCondOption"
                            class="refer-srchcond-crud"
                            :table-loading="srchCondParams.srchCondLoading"
                            :data="srchCondParams.srchCondData"
                            :ref= "srchCondParams.ref">
                        </avue-crud>
                    </basic-container>
                </el-col>
                <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"
                            :table-loading="showAttrParams.showAttrLoading"
                            :data="showAttrParams.showAttrData"
                            :ref= "showAttrParams.ref">
                        </avue-crud>
                    </basic-container>
                </el-col>
            </el-row>
        </div>
        <div slot="footer" class="dialog-footer">
@@ -60,6 +75,7 @@

<script>
//import func from "@/util/func";
import { getReferConfigPage } from "@/api/code/codeReferConfig";
export default {
    name: "referConfigDialog",
        props: {
@@ -69,7 +85,7 @@
                isShowReferConfigCrud:false,
                referConfigCrudOption: {
                    border: true,
                    height: '56vh',
                    height: '45vh',
                    tip: false,
                    searchShow: true,
                    searchMenuSpan: 6,
@@ -106,7 +122,7 @@
                        },{
                            label: '参照的业务类型',
                            search: false,
                            prop: 'referType'
                            prop: 'referTypeName'
                        },{
                            label: '显示的属性',
                            search: false,
@@ -118,7 +134,7 @@
                        },{
                            label: '参照窗口类型',
                            search: false,
                            prop: 'typeText' 
                            prop: 'typeText',
                        }
                    ],
                },
@@ -139,10 +155,45 @@
                formOption: {
                    submitBtn: false,
                    emptyBtn: false,
                    labelWidth: '110', //默认标签宽度
                    column: [{            
                            label: '每页显示条数',
                            prop: 'limit',
                    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,
@@ -158,18 +209,18 @@
                            label: '排序类型',
                            prop: 'sortType',
                            span: 24,
                            disabled: true,
                            row: true,
                            placeholder: ' ',
                            dicData: [{
                                label: '升序', value: 'asc'
                            }, {
                                label: '降序', value: 'desc'
                            }],
                            type: 'select',
                            disabled: true,
                            row: true,
                            placeholder: ' ',
                        }
                    ]
                        },
                    ],
                },
                referConfigForm:{},
                // 排序类型的表单配置
                sortColumn:[{            
                    label: '每页显示条数',
@@ -189,95 +240,98 @@
                    label: '排序类型',
                    prop: 'sortType',
                    span: 24,
                    disabled: true,
                    row: true,
                    placeholder: ' ',
                    dicData: [{
                        label: '升序', value: 'asc'
                    }, {
                        label: '降序', value: 'desc'
                    }],
                    type: 'select',
                    disabled: true,
                    row: true,
                    placeholder: ' ',
                }],
                // 树形类型的表单配置
                treeColumn:[{
                    label: '树形的上级属性',
                    prop: 'parentFieldName',
                    span: 7,
                    tip: '树形展示的时候，上下级关系查找的属性。',
                    tipPlacement: 'right',
                    rules: [{
                        required: true,
                        message: "(树形的上级属性)必填项不能为空",
                        trigger: "blur",
                    }],
                    span: 24,
                    disabled: true,
                    row: true,
                    placeholder: ' ',
                },{
                    label: '上级属性值对应属性',
                    prop: 'parentUsedField',
                    span: 7,
                    tip: '上级属性存储的值,是上级数据的什么属性。一般都是oid。',
                    value: 'oid',
                    tipPlacement: 'right',
                    span: 24,
                    disabled: true,
                    row: true,
                    placeholder: ' ',
                },{
                    label: '根节点的值',
                    prop: 'parentValue',
                    span: 7,
                    tip: '树形展示的时候，上级的值。',
                    tipPlacement: 'right',
                },{
                    span: 24,
                    disabled: true,
                    row: true,
                    placeholder: ' ',
                },
                {
                    label: '树加载方式',
                    prop: 'loadType',
                    span: 7,
                    value: 'all',
                    span: 24,
                    disabled: true,
                    row: true,
                    placeholder: ' ',
                    dicData: [{
                        label: '全部', value: 'all'
                    }, {
                        label: '逐级加载', value: 'node'
                    }],
                    type: 'select',
                },{
                    label: '是否只能选择叶子节点',
                    prop: 'onlyLeaf',
                    span: 7,
                    value: false,
                    type: 'switch',
                    span: 24,
                    disabled: true,
                    row: true,
                    placeholder: ' ',
                },{
                    label: '排序字段',
                    prop: 'sortField',
                    span: 7,
                    //type: 'table',
                    tip: '查询数据时的排序字段',
                    tipPlacement: 'right',
                    span: 24,
                    disabled: true,
                    row: true,
                    placeholder: ' ',
                },{
                    label: '排序类型',
                    prop: 'sortType',
                    span: 7,
                    type: 'select',
                    value: 'asc',
                    span: 24,
                    disabled: true,
                    row: true,
                    placeholder: ' ',
                    dicData: [{
                        label: '升序', value: 'asc'
                    }, {
                        label: '降序', value: 'desc'
                    }],
                },],
                },
                ],
                // 平台类型的表单配置
                standColumn:[{
                    label: '参考的UI上下文',
                    prop: 'referContent',
                    span: 7,
                    tip: '只有参照窗口类型是stand时才必须设置,且在stand类型下才能生效',
                    tipPlacement: 'right',
                    span: 24,
                    disabled: true,
                    row: true,
                    placeholder: ' ',
                },
                {
                    label: '平台的表格编号',
                    prop: 'displayTable',
                    span: 7,
                    tip: '与参照的UI上下文互斥，只有参照窗口类型是stand时才必须设置，且在stand类型下才能生效',
                    tipPlacement: 'right',
                    span: 24,
                    disabled: true,
                    row: true,
                    placeholder: ' ',
                }],

                // 显示的属性和查询条件表格区域
                attrAndSrchCondOption: {
                // 查询条件表格区域
                srchCondOption: {
                    border: true,
                    height: '40vh',
                    tip: false,
@@ -309,7 +363,40 @@
                                    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: [
                                {
@@ -327,36 +414,62 @@
                                    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' 
                                },{
                                    label: '是否快速查询',
                                    prop: 'isQuery' 
                                }
                            ]
                        }, 
                    ],
                },
                attrAndSrchCondParams: {
                    ref: "attrOrSrchCondCrud",
                    attrAndSrchCondLoading: false,
                    attrAndSrchCondData: [],
                showAttrParams: {
                    ref: "showAttrCrud",
                    showAttrLoading: false,
                    showAttrData: [],
                    isShow: true,
                },

                // 是否显示变动的表单区域
                isShowForm: true,
                toggleBasicCrudWidth: {
                    height: '100%',
                    width: '70%',
                },
                
                // 是否显示属性表格
                isShowAttrCrud: true,
                
                defaultOrGridForm: ['limit','sortField','sortType'],
                standForm: ['referContent','displayTable'],
                treeForm: [
                    'parentFieldName',
                    'parentUsedField',
                    'parentValue',
                    'loadType',
                    'onlyLeaf',
                    'sortField',
                    'sortType'
                ],
            }
        },
        methods: {

            // 下一步要进行的操作选择并保存或选择并修改
            selectedreferConfig(condition) {
                // 当前选中的参照配置行
@@ -365,35 +478,142 @@
                    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);
                }
            },
            referConfigOnload(page, params = {}){
                this.referConfigParams.referConfigLoading = true;
                this.referConfigParams.referConfigData = [
                    {
                        id: 'test',
                        name: '测试',
                        referType: 'test',
                        textField: 'test',
                        valueField: 'test',
                        typeText:'默认配置',
                    },{
                        id: 'test1',
                        name: '测试1',
                        referType: 'test1',
                        textField: 'test1',
                        valueField: 'test1',
                        typeText:'平台配置',
                    // 选择并修改,执行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',
                ];
                this.$nextTick(() => {
                    this.$refs[this.referConfigParams.ref].doLayout()
                })
                this.referConfigParams.referConfigLoading = false;
                // 需要根据类型添加的属性
                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;
                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;
@@ -402,27 +622,98 @@
                this.referConfigParams.referConfigPage.currentPage = currentPage;
            },
            referConfigRowClick(row){
                // 对当前选中行进行记录
                this.referConfigParams.referConfigSelectedRowData = row;
                // 单选框选中
                this.referConfigParams.referConfigSelectedRow = row.$index
                this.attrAndSrchCondOnload(row);
                this.loadDefaultOrGridOrStandOrTreeForm(row);
            },
            referConfigDataChange(params, done){
            referConfigSearchChange(params, done){
                this.referConfigParams.referConfigQuery = params;
                this.referConfigParams.referConfigPage.currentPage = 1;
                this.referConfigOnload(this.referConfigParams.referConfigPage, params);
                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.attrAndSrchCondParams.attrAndSrchCondLoading = true;
                this.attrAndSrchCondParams.attrAndSrchCondParams = row.attrAndSrchCondParams
                this.attrAndSrchCondParams.attrAndSrchCondLoading = false;
                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;
            },

        },
@@ -434,7 +725,10 @@
    .refer-config-crud > .el-card > .el-card__body > .avue-crud__menu {
        display: none!important;
    }
    .refer-attrorsrchcond-crud > .el-card > .el-card__body > .avue-crud__menu {
    .refer-srchcond-crud > .el-card > .el-card__body > .avue-crud__menu  {
        display: none!important;
    }
    .refer-attr-crud > .el-card > .el-card__body > .avue-crud__menu {
        display: none!important;
    }