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

@@ -6,6 +6,7 @@
      :visible.sync="isShowReferConfigForm"
      width="90%"
      id="refer-config-form"
      destroy-on-close
      @close="recoveryDataAndForm('initData')"
      style="height: 115vh; margin-top: -14vh; overflow-y: hidden">
        <div style="width: 100%; overflow-y: auto; height: 70vh">
@@ -15,7 +16,7 @@
                        <el-input :disabled="disabled"
                            :size="size"
                            v-model="form.referTypeName"
                            ref="referTypeName" 
                            ref="referTypeName"
                            placeholder="请选择 参照的业务类型"
                            prefix-icon="el-icon-search"
                            readonly="true"
@@ -27,7 +28,7 @@
                        <el-input :disabled="disabled"
                            :size="size"
                            v-model="form.sortField"
                            ref="sortField" 
                            ref="sortField"
                            placeholder="请选择 排序字段"
                            prefix-icon="el-icon-search"
                            readonly="true"
@@ -47,7 +48,7 @@
                                    <el-input :disabled="disabled"
                                        :size="size"
                                        v-model="form.sortField"
                                        ref="sortField" 
                                        ref="sortField"
                                        placeholder="请选择 排序字段"
                                        prefix-icon="el-icon-search"
                                        readonly="true"
@@ -108,7 +109,7 @@
                        <span slot="label"><i class="el-icon-search"></i>添加查询条件</span>
                        <avue-crud
                            ref="crudAddCondition"
                            :option="addSearchCondtionOption" 
                            :option="addSearchCondtionOption"
                            @cell-click="clickAddSearchCondtionEdit"
                            :data="form.codeSrchCondConfigVOS">
                            <!-- 表格内操作按钮 -->
@@ -230,12 +231,13 @@
    </el-dialog>

</template>
    

<script>
    import func from "@/util/func";
    export default {
        name: "referConfigDialog",
        name: "referConfigFormDialog",
        props: {

        },
        data() {
            let element = '';
@@ -244,6 +246,7 @@
                labelWidth: '150',   // 标题宽度
                isShowReferConfigForm: false,  // 第一层对话框显示隐藏控制
                referTypeIsReadOnly: false,

                // 表单对象
                form: {
                    referTypeName: '', //显示的值
@@ -309,20 +312,20 @@
                    dialogClickModal: false,
                    highlightCurrentRow: true,
                    indexFixed: false,
                    menuFixed: false,  
                    menuFixed: false,
                    column: [
                        {
                            label: "列字段(*)",
                            prop: "field",
                            cell: true,
                            clearable: false,
                            blur: (value) => this.updateAttrBlur(value),
                            // blur: (value) => this.updateAttrBlur(value),
                        },{
                            label: "列名(*)",
                            prop: "title",
                            cell: true,
                            clearable: false,
                            blur: (value) => this.updateAttrBlur(value),
                            // blur: (value) => this.updateAttrBlur(value),
                        },{
                            label: "字段类型(*)",
                            prop: "fieldTypeText",
@@ -343,7 +346,7 @@
                            }, {
                                value: 'textarea', label: '文本域'
                            }],
                            blur: (value) => this.updateAttrBlur(value),
                            // blur: (value) => this.updateAttrBlur(value),
                        },{
                            label: "列表可排序",
                            prop: "sort",
@@ -352,19 +355,19 @@
                            type:"switch",
                            width: '80px',
                            value: true,
                            blur: (value) => this.updateAttrBlur(value),
                            // blur: (value) => this.updateAttrBlur(value),
                        },{
                            label: "排序字段",
                            prop: "attrSortField",
                            cell: true,
                            clearable: false,
                            blur: (value) => this.updateAttrBlur(value),
                            // blur: (value) => this.updateAttrBlur(value),
                        },{
                            label: "字段宽度",
                            prop: "width",
                            cell: true,
                            clearable: false,
                            blur: (value) => this.updateAttrBlur(value),
                            // blur: (value) => this.updateAttrBlur(value),
                        },{
                            label: "列固定位置",
                            prop: "fixedPosition",
@@ -373,13 +376,13 @@
                            clearable: false,
                            value: 'noFixed',
                            dicData: [{value: 'noFixed', label: '不固定'}, {value: 'left', label: '左边'}, {value: 'right', label: '右边'}],
                            blur: (value) => this.updateAttrBlur(value),
                            // blur: (value) => this.updateAttrBlur(value),
                        },{
                            label: "js显示代码",
                            prop: "templet",
                            cell: true,
                            clearable: false,
                            blur: (value) => this.updateAttrBlur(value),
                            // blur: (value) => this.updateAttrBlur(value),
                        },
                    ]
                },
@@ -419,7 +422,7 @@
                                },{
                                    value: "_notlike", label: "不包含",
                                }, {
                                    value: 'equal', label: '等于'
                                    value: '_equal', label: '等于'
                                }, {
                                    value: '_notequal', label: '不等于'
                                }, {
@@ -483,7 +486,7 @@
                    emptyBtn: false,
                    labelWidth: '145', //默认标签宽度
                    group: [
                        {   
                        {
                            // 基础表单信息展示区域
                            //display: this.form.type=='default'||this.form.type=='grid',
                            icon: 'el-icon-info',
@@ -583,7 +586,7 @@
                                    change: ({ value, column }) => {
                                        // console.log("start",value);
                                        // 复原表单,因为其他分组中如果存在值，在切换时,会保留输入的字段值所以需要还原
                                        let addFrom = {}; 
                                        let addFrom = {};
                                        this.activeName = 'first'; // 默认切换至第一个tab
                                        //根据类型对form表单属性进行调整
                                        if(value == 'stand'){
@@ -594,7 +597,7 @@
                                            this.isDisabledTabs = false;
                                        } else if(value == 'default' || value == 'grid'){
                                            addFrom = {
                                                limit: '15',
                                                limit: 15,
                                                sortField: '',
                                                sortType: 'asc',
                                            };
@@ -625,40 +628,43 @@
                                        // 合并两个表单
                                        this.form = Object.assign(addFrom,this.form);
                                        // console.log("endFilter",this.form.type);
                                        //console.log(this.form);
                                        // console.log(this.form);
                                    },
                                },{
                                    label: '是否开启持久化',
                                    label: '是否持久化参照配置',
                                    prop: 'isPersistence',
                                    labelWidth: '142',
                                    tip: 'true:开启持久化，对当前定义的参照配置进行持久化存储，下次可直接选取；false:仅对当前次码段新增生效。',
                                    tipPlacement: 'bottom',
                                    span: 6,
                                    type: 'switch',
                                },{
                                    display: this.form.isPersistence | this.form.isPersistence=='true',
                                    label: '编号',
                                    label: '参照配置编号',
                                    prop: 'id',
                                    tip: '设置该参照配置持久化存储时的编号。',
                                    rules: [{
                                        required: true,
                                        message: "(开始持久化时编号)必填项不能为空",
                                        message: "(开启持久化时编号)必填项不能为空",
                                        trigger: "blur",
                                    }],
                                    span: 6,
                                },{
                                    display: this.form.isPersistence | this.form.isPersistence=='true',
                                    label: '名称',
                                    label: '参照配置名称',
                                    prop: 'name',
                                    tip: '设置该参照配置持久化存储时的名称。',
                                    rules: [{
                                        required: true,
                                        message: "(开始持久化时名称)必填项不能为空",
                                        message: "(开启持久化时名称)必填项不能为空",
                                        trigger: "blur",
                                    }],
                                    span: 6,
                                }
                                

                            ]
                        },
                        {   
                        {
                            icon: 'el-icon-info',
                            label: '页面参数配置',
                            collapse: false,
@@ -670,11 +676,11 @@
                                    tip: '默认空着，设置后表示强制显示这样的高度',
                                    tipPlacement: 'right',
                                    span: 7,
                                    // rules:[{
                                    //     validator: validateNumber,
                                    //     message: "窗口显示的高度必须为数值类型",
                                    //     trigger: "blur",
                                    // }]
                                    rules:[{
                                        validator: validateNumber,
                                        message: "窗口显示的高度必须为数值类型",
                                        trigger: "blur",
                                    }]
                                },{
                                    label: '过滤(级联)属性',
                                    prop: 'useFormKey',
@@ -710,7 +716,7 @@
                                }
                            ]
                        },
                        {   
                        {
                            icon: 'el-icon-info',
                            label: '后台参数配置',
                            collapse: false,
@@ -719,7 +725,7 @@
                                {
                                label: '自定义的后台路径',
                                prop: 'url',
                                tip: '通常为空;如果是列表，后台必须返回DataGrid，如果是树，后台必须返回List<Tree>',
                                tip: '通常为空;如果是列表，后台必须返回DataGrid，如果是树，后台必须返回List<Theme>',
                                tipPlacement: 'right',
                                span: 7,
                                },{
@@ -757,7 +763,7 @@
                    emptyBtn: false,
                    labelWidth: '145', //默认标签宽度
                    group: [
                        {   
                        {
                            display: this.form.type=='default'||this.form.type=='grid',
                            icon: 'el-icon-info',
                            label: this.form.type=='default' ? '默认参照的配置(下方列表)':'列表参照的配置（下方列表)',
@@ -769,7 +775,7 @@
                                    prop: 'limit',
                                    span: 8,
                                    tip: '分页时每页显示的数量，不分页填-1',
                                    //value: 15,
                                    value: 15,
                                    tipPlacement: 'right',
                                },{
                                    label: '排序字段',
@@ -794,7 +800,7 @@
                                }
                            ]
                        },
                        {   
                        {
                            display: this.form.type=='stand',
                            icon: 'el-icon-info',
                            label: 'stand(平台配置)参照',
@@ -817,7 +823,7 @@
                                },
                            ]
                        },
                        {   
                        {
                            display: this.form.type=='tree',
                            icon: 'el-icon-info',
                            label: '树形参照信息',
@@ -892,19 +898,15 @@
            },
        },
        mounted() {
            // 麻的这个地方调死我了
            // 事件监听，实现表格行编辑点击表格区域外内容时退出编辑状态
            this.element = document.getElementById('refer-config-form');
            this.element.addEventListener("click", (e) => {
                //<table cellspacing="0" cellpadding="0" border="0" class="el-table__body" style="width: 911px;">
                //console.log(e.target);
                // console.log(this.$refs.crudAttr);
                // console.log(this.$refs.crudAttr.$el.contains(e.target));
                //console.log(!this.$refs.crudAttr.$el.contains(e.target) && this.preClickAttrRow != null);
                if (!this.$refs.crudAttr.$el.contains(e.target) && 
                if (!this.$refs.crudAttr.$el.contains(e.target) &&
                   this.preClickAttrRow != '') {
                   this.preClickAttrRow.$cellEdit = false;
                }
                if (!this.$refs.crudAddCondition.$el.contains(e.target) && 
                if (!this.$refs.crudAddCondition.$el.contains(e.target) &&
                   this.preClickAddSearchConditionRow != '') {
                   this.preClickAddSearchConditionRow.$cellEdit = false;
                }
@@ -914,56 +916,16 @@
            // 贼坑，切换类型时表格，隐藏再显示就会出现表格错位问题，
            'form.type'(value) {
                this.onloadAttrData();
            },
            // 监听父组件传的窗口显示隐藏的值
            isShowReferConfigForm (){
                if(this.isShowReferConfigForm){
                    this.onloadAttrData();
                }
            }
        },
        methods: {

            // 单击表格实现表格行编辑
            clickAttrEdit(row, column, event){
                if(this.preClickAttrRow && this.preClickAttrRow != row){
                    //console.log(this.codeShowFieldConfigVOS[this.preClickAttrRow.$index]);
                    this.codeShowFieldConfigVOS[this.preClickAttrRow.$index].$cellEdit = false;
                }
                row.$cellEdit = true;
                this.preClickAttrRow = row;
            },
            // 属性表格行编辑失去焦点时保存方法
            // updateAttrBlur(value){
                //console.log(this.codeShowFieldConfigVOS[0]);
                
            // },

            // 单击表格实现表格行编辑
            clickAddSearchCondtionEdit(row, column, event){
                if(this.preClickAddSearchConditionRow && this.preClickAddSearchConditionRow != row){
                    //console.log(this.codeShowFieldConfigVOS[this.preClickAttrRow.$index]);
                    this.form.codeSrchCondConfigVOS[this.preClickAddSearchConditionRow.$index].$cellEdit = false;
                }
                row.$cellEdit = true;
                this.preClickAddSearchConditionRow = row;
            },
            //上一个页面已经选中参照应用的业务类型的情况，和上一次已经配置过参照配置的情况下进行页面初始化渲染
            initPageData(val){
                //console.log(val);
                if(func.notEmpty(val.referConfig)){
                    this.form = JSON.parse(val.referConfig);
                    // console.log(this.form);
                    this.form.isPersistence = this.form.isPersistence == 'true' ? true:false;
                    // 参照引用的业务类型不可选
                    this.referTypeIsReadOnly = true;
                    if((this.form.type == 'default' || this.form.type  == 'grid') && (this.form.codeShowFieldConfigVOS != undefined && this.form.codeShowFieldConfigVOS.length > 0)){
                        this.codeShowFieldConfigVOS = this.form.codeShowFieldConfigVOS;
                    }
                    return;
                }
                if(func.notEmpty(val.referType)){
                    this.form.referTypeName = val.referTypeName;
                    this.form.referType = val.referType;
                    this.referTypeIsReadOnly = true;
                    return;
                }
                //console.log(localStorage.getItem("userId"));
            },
            // 选择完参照配置之后点击保存按钮触发
            async selectedListReferConfig(){
                // 标记所有表单是否通过校验的变量
@@ -978,7 +940,7 @@
                            }
                            isValid = false;
                            //console.log(valid);
                        }                            
                        }
                        done();
                    })
                })
@@ -990,6 +952,52 @@
                    this.$emit('echoReferConfig', submitForm) // 触发update:data将子组件值传递给父组件
                    this.isShowReferConfigForm = false;
                }
            },
            // 单击表格实现表格行编辑
            clickAttrEdit(row, column, event){
                if(this.preClickAttrRow && this.preClickAttrRow != row){
                    //console.log(this.codeShowFieldConfigVOS[this.preClickAttrRow.$index]);
                    this.codeShowFieldConfigVOS[this.preClickAttrRow.$index].$cellEdit = false;
                }
                row.$cellEdit = true;
                this.preClickAttrRow = row;
            },
            // 属性表格行编辑失去焦点时保存方法
            // updateAttrBlur(value){
                //console.log(this.codeShowFieldConfigVOS[0]);

            // },

            // 单击表格实现表格行编辑
            clickAddSearchCondtionEdit(row, column, event){
                if(this.preClickAddSearchConditionRow && this.preClickAddSearchConditionRow != row){
                    //console.log(this.codeShowFieldConfigVOS[this.preClickAttrRow.$index]);
                    this.form.codeSrchCondConfigVOS[this.preClickAddSearchConditionRow.$index].$cellEdit = false;
                }
                row.$cellEdit = true;
                this.preClickAddSearchConditionRow = row;
            },
            //上一个页面已经选中参照应用的业务类型的情况，和上一次已经配置过参照配置的情况下进行页面初始化渲染
            initPageData(val){
                // console.log(val.referConfig);
                if(func.notEmpty(val.referConfig)){
                    this.form = JSON.parse(val.referConfig);
                    // 参照引用的业务类型不可选
                    // this.referTypeIsReadOnly = true;
                    if((this.form.type == 'default' || this.form.type  == 'grid') && (this.form.codeShowFieldConfigVOS != undefined && this.form.codeShowFieldConfigVOS.length > 0)){
                        this.codeShowFieldConfigVOS = this.form.codeShowFieldConfigVOS;
                    }
                    return;
                }else {
                    this.onloadAttrData()
                }
                if(func.notEmpty(val.referType)){
                    this.form.referTypeName = val.referTypeName;
                    this.form.referType = val.referType;
                    this.referTypeIsReadOnly = true;
                    return;
                }
                //console.log(localStorage.getItem("userId"));
            },
            /** 其实选取属性表格的默认数据不需要加载，
             但是弹窗打开会有表格错行问题所以需要在这调用doLayout方法*/
@@ -1017,9 +1025,9 @@
                        $cellEdit: false
                    }
                ];
                this.$nextTick(() => {
                    this.$refs.crudAttr.doLayout()
                })
                // this.$nextTick(() => {
                //     this.$refs.crudAttr.doLayout()
                // })
            },
            // 属性选择表格中的移除按钮功能
            removeCurrentRow(row,condition){
@@ -1040,11 +1048,11 @@
                    // this.form.displayTable = '';
                    return;
                }
                Object.assign(this.$data,this.$options.data());    
                Object.assign(this.$data,this.$options.data());
                // 移除绑定在该页面对话框上的全局监听事件
                if(this.element != ''){
                   let te = window.removeEventListener('click', this.element)
                }     
                }
            },
            // 提交表单之前过滤掉空或不需要的表单数据
            filterForm(){
@@ -1062,8 +1070,8 @@
                    'useFormKey',
                    'paramForFormKey',
                    'isMuti',
                    'mapFields', 
                    'codeSrchCondConfigVOS', 
                    'mapFields',
                    'codeSrchCondConfigVOS',
                    'isOpenGlobal', //是否开启全局
                    'isPersistence',
                ];
@@ -1076,9 +1084,9 @@
                    addArray = ['limit', 'sortField', 'sortType'];
                } else if(oldForm.type == 'tree'){
                    addArray = [
                        "parentFieldName", 
                        "parentFieldName",
                        'parentUsedField',
                        'parentValue', 
                        'parentValue',
                        'loadType',
                        'onlyLeaf',
                        'sortField',
@@ -1103,7 +1111,7 @@
                    // console.log(!this.checkStringIsEmpty(oldForm[item]) || !this.checkArrayIsUndefined(oldForm[item]));
                    if((item == 'isMuti' || item == 'onlyLeaf') || (!this.checkStringIsEmpty(oldForm[item]) || !this.checkArrayIsUndefined(oldForm[item]))){
                        //console.log(item,oldForm[item]);
                        newForm = Object.assign(newForm,{[item]:oldForm[item]});  
                        newForm = Object.assign(newForm,{[item]:oldForm[item]});
                    }
                });
                //console.log(newForm);
@@ -1175,16 +1183,16 @@
                this.$refs[this.selectedBtmTypeAttrParams.ref].selectedBtmTypeAttrOnLoad(params);
                this.selectedBtmTypeAttrParams.selectedBtmTypeAttrSettingBox = true;
            },
            

            /** 为【参照引用的业务类型】选取值之后的内容回显时调用 */
            echoReferBtmType(content){
                // 实现回显
                this.form.referTypeName = content.name;
                this.form.referType = content.id;
                this.form.referTypeName = content.name || content.id;
                this.form.referType = content.id || '';
            },
            /** 排序字段、显示的属性、查询条件的表格行选择之后回显 */
            echoSelectedAttr(data){
                console.log(data);
                // console.log(data);
                // 为【排序字段】选取值
                if(data.condition === 'sortField'){
                    this.form.sortField = data.selectedArrary[0].id;
@@ -1193,8 +1201,8 @@
                        this.form.codeSrchCondConfigVOS.push(
                            {
                                filterField: item.id,
                                filterType: 'equal',
                                filterTypeText: item.name, 
                                filterType: '_equal',
                                filterTypeText: item.name,
                                filterValue: '',
                                $cellEdit: false
                            }
@@ -1203,15 +1211,18 @@
                }else{
                    // 选择显示字段
                    data.selectedArrary.forEach(item => {
                        // console.log(item);
                        this.codeShowFieldConfigVOS.push(
                            {
                                field: item.id,
                                title: item.id,
                                fieldType: item.attrType,
                                fieldTypeText: item.attrTypeText,
                                title: item.name,
                                // fieldType: item.attrType,
                                // fieldTypeText: item.attrTypeText,
                                fieldType: 'text',
                                fieldTypeText: '文本框',
                                sort: false,
                                attrSortField: item.id,
                                width: item.attrLength,
                                width: item.attributeLength,
                                isquery: false,
                                $cellEdit: false
                            }
@@ -1242,5 +1253,5 @@
        -webkit-transition:opacity .0s !important;
        transition:opacity .0s !important;
    }
    
</style>

</style>