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="toggleCrudWidth">
                    <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,38 @@
                        </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-row style="width: 100%; height:30%; margin-top: 130px" v-show="srchCondParams.isShow && showAttrParams.isShow">
                <el-col v-show="srchCondParams.isShow" style="width: 40%;">
                    <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%;">
                    <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 +74,7 @@

<script>
//import func from "@/util/func";
import { getReferConfigPage } from "@/api/code/codeReferConfig";
export default {
    name: "referConfigDialog",
        props: {
@@ -69,7 +84,7 @@
                isShowReferConfigCrud:false,
                referConfigCrudOption: {
                    border: true,
                    height: '56vh',
                    height: '45vh',
                    tip: false,
                    searchShow: true,
                    searchMenuSpan: 6,
@@ -118,7 +133,7 @@
                        },{
                            label: '参照窗口类型',
                            search: false,
                            prop: 'typeText' 
                            prop: 'typeText',
                        }
                    ],
                },
@@ -139,37 +154,72 @@
                formOption: {
                    submitBtn: false,
                    emptyBtn: false,
                    labelWidth: '110', //默认标签宽度
                    column: [{            
                            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,
                            dicData: [{
                                label: '升序', value: 'asc'
                            }, {
                                label: '降序', value: 'desc'
                            }],
                            type: 'select',
                            disabled: true,
                            row: true,
                            placeholder: ' ',
                        }
                    ]
                    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'
                        }],
                    },
                    ],
                },
                referConfigForm:{},
                // 排序类型的表单配置
                sortColumn:[{            
                    label: '每页显示条数',
@@ -189,95 +239,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 +362,36 @@
                                    prop: 'filterValue',
                                }
                            ],
                        },{
                        }, 
                    ],
                },
                srchCondParams: {
                    ref: "srchCondCrud",
                    srchCondLoading: false,
                    srchCondData: [],
                    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: [
                                {
@@ -343,20 +425,42 @@
                                },{
                                    label: 'js显示代码',
                                    prop: 'templet' 
                                },{
                                    label: '是否快速查询',
                                    prop: 'isQuery' 
                                }
                            ]
                        }, 
                    ],
                },
                attrAndSrchCondParams: {
                    ref: "attrOrSrchCondCrud",
                    attrAndSrchCondLoading: false,
                    attrAndSrchCondData: [],
                showAttrParams: {
                    ref: "showAttrCrud",
                    showAttrLoading: false,
                    showAttrData: [],
                    isShow: true,
                },
                

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

            // 下一步要进行的操作选择并保存或选择并修改
            selectedreferConfig(condition) {
                // 当前选中的参照配置行
@@ -366,34 +470,43 @@
                    return;
                }
                if(condition == "selectedSave"){
                    console.log(currentSeletedRow);
                    
                    //console.log(currentSeletedRow);
                }else {
                    console.log(currentSeletedRow);
                    //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:'平台配置',
            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]);
                        }) 
                    }
                ];
                this.$nextTick(() => {
                    this.$refs[this.referConfigParams.ref].doLayout()
                })
                this.referConfigParams.referConfigLoading = false;
                });
            },
            referBtmTypeSizeChange(pageSize){
                this.referConfigParams.referConfigPage.pageSize = pageSize;
@@ -402,27 +515,82 @@
                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.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.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
                this.srchCondParams.srchCondLoading = false;
                this.showAttrParams.showAttrLoading = false;
            },

        },
@@ -434,7 +602,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;
    }