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">
@@ -234,8 +235,9 @@
<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: '', //显示的值
@@ -264,7 +267,7 @@
                    isPersistence: true, // 是否持久化
                    id: '',
                    name: '',
                     // 查询条件列表
                    // 查询条件列表
                    // limit: '15',
                    // sortField: '',
                    // sortType: 'asc',
@@ -413,21 +416,21 @@
                            type: "select",
                            cell: true,
                            clearable: false,
                            dicData: [{
                                value: 'like', label: '包含'
                            }, {
                                value: '=', label: '等于'
                            }, {
                                value: '>', label: '大于'
                            }, {
                                value: '<', label: '小于'
                            }, {
                                value: '!=', label: '不等于'
                            }, {
                                value: '>=', label: '大于等于'
                            }, {
                                value: '<=', label: '小于等于'
                            }]
                            dicData: [
                                {
                                    value: '_like', label: '包含'
                                },{
                                    value: "_notlike", label: "不包含",
                                }, {
                                    value: '_equal', label: '等于'
                                }, {
                                    value: '_notequal', label: '不等于'
                                }, {
                                    value: '_ge', label: '大于'
                                }, {
                                    value: '_le', label: '小于'
                                }
                            ]
                        },{
                            label: "筛选值",
                            prop: "filterValue",
@@ -594,7 +597,7 @@
                                            this.isDisabledTabs = false;
                                        } else if(value == 'default' || value == 'grid'){
                                            addFrom = {
                                                limit: '15',
                                                limit: 15,
                                                sortField: '',
                                                sortType: 'asc',
                                            };
@@ -625,32 +628,35 @@
                                        // 合并两个表单
                                        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,
@@ -769,7 +775,7 @@
                                    prop: 'limit',
                                    span: 8,
                                    tip: '分页时每页显示的数量，不分页填-1',
                                    //value: 15,
                                    value: 15,
                                    tipPlacement: 'right',
                                },{
                                    label: '排序字段',
@@ -892,14 +898,10 @@
            },
        },
        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) && 
                   this.preClickAttrRow != '') {
                   this.preClickAttrRow.$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(){
                // 标记所有表单是否通过校验的变量
@@ -991,6 +953,52 @@
                    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方法*/
            onloadAttrData(){
@@ -1017,9 +1025,9 @@
                        $cellEdit: false
                    }
                ];
                this.$nextTick(() => {
                    this.$refs.crudAttr.doLayout()
                })
                // this.$nextTick(() => {
                //     this.$refs.crudAttr.doLayout()
                // })
            },
            // 属性选择表格中的移除按钮功能
            removeCurrentRow(row,condition){
@@ -1179,12 +1187,12 @@
            /** 为【参照引用的业务类型】选取值之后的内容回显时调用 */
            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,7 +1201,7 @@
                        this.form.codeSrchCondConfigVOS.push(
                            {
                                filterField: item.id,
                                filterType: '=',
                                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
                            }