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

@@ -5,6 +5,7 @@
      append-to-body
      :visible.sync="isShowReferConfig"
      width="90%"
      id="refer-config"
      @close="recoveryDataAndForm('initData')"
      style="height: 115vh; margin-top: -14vh; overflow-y: hidden">
        <el-tabs v-model="activeName" @tab-click="handleClick">
@@ -12,15 +13,28 @@
                <div style="width: 100%; overflow-y: auto; height: 65vh">
                    <el-row>
                        <avue-form ref="form" :option="formOption" v-model="form" class="referTypeForm">
                            <template>
                                <el-input
                                    ref="referType" 
                            <template #referTypeName="{disabled,size}">
                                <el-input :disabled="disabled"
                                    :size="size"
                                    v-model="form.referTypeName"
                                    ref="referTypeName" 
                                    placeholder="请选择 参照的业务类型"
                                    prefix-icon="el-icon-search"
                                    readonly="true"
                                    v-model="form.referType"
                                    @focus="openAttrSelectOrGetValue('referType')">
                                    <i slot="suffix" class="el-icon-circle-close" @click="clearAttrDataByIcon('referType')" style="margin-right: 5px;cursor: pointer;"></i>
                                    @focus="openSelectionTable('referType')">
                                    <i v-show="!disabled" slot="suffix" class="el-icon-circle-close" @click="clearSelectionTable('referType')" style="margin-right: 5px;cursor: pointer;"></i>
                                </el-input>
                            </template>
                            <template #sortField="{disabled,size}">
                                <el-input :disabled="disabled"
                                    :size="size"
                                    v-model="form.sortField"
                                    ref="sortField" 
                                    placeholder="请选择 排序字段"
                                    prefix-icon="el-icon-search"
                                    readonly="true"
                                    @focus="openSelectionTable('sortField')">
                                    <i slot="suffix" class="el-icon-circle-close" @click="clearSelectionTable('sortField')" style="margin-right: 5px;cursor: pointer;"></i>
                                </el-input>
                            </template>
                        </avue-form>
@@ -28,8 +42,9 @@
                    <el-row v-show="form.type=='default' || form.type=='grid'">
                        <avue-crud
                            ref="crudAttr"
                            class="crud-attr"
                            :option="attrOption"
                            @cell-click="clicktest"
                            @cell-click="clickAttrEdit"
                            :data="attrData">
                            <!-- 表格内操作按钮 -->
                            <template slot="menu" slot-scope="scope">
@@ -52,15 +67,28 @@
                                <el-button type="primary"
                                    size="small"
                                    icon="el-icon-plus"
                                    @click="openAddSearchOrAttrDialog('selectAttr')">选择属性
                                    @click="openSelectionTable('selectAttr')">选择属性
                                </el-button>
                                <div class="tag-group" style="display: inline">
                                    <el-tag
                                        v-for="item in attrData"
                                        v-show="item.isquery && item.title!=''"
                                        style="margin-left: 3px"
                                        :key="item.title"
                                        type="info"
                                        size="small"
                                        effect="dark">
                                        {{ item.title }}
                                    </el-tag>
                                </div>
                            </template>
                        </avue-crud>
                    </el-row>
                    <el-row>
                    <el-row style="margin-top: 10px">
                        <avue-crud
                            ref="crudAddCondition"
                            :option="addSearchCondtionOption" 
                            @cell-click="clickAddSearchCondtionEdit"
                            :data="addSearchCondtionData">
                            <!-- 表格内操作按钮 -->
                            <template slot="menu" slot-scope="scope">
@@ -76,7 +104,7 @@
                                <el-button type="primary"
                                    size="small"
                                    icon="el-icon-plus"
                                    @click="openAddSearchOrAttrDialog('addSearchCondition')">
                                    @click="openSelectionTable('addSearchCondition')">
                                    添加查询条件
                                </el-button>
                            </template>
@@ -87,7 +115,7 @@
            <el-tab-pane label="直接选取参照配置" name="second">
                <div style="width: 100%; overflow-y: auto; height: 65vh">
                    <avue-crud
                        :option="optionSelectReferConfig"
                        :option="selectReferConfigOption"
                        :table-loading="selectReferConfigLoading"
                        :data="selectReferConfigData"
                        :page.sync="selectReferConfigPage"
@@ -109,6 +137,110 @@
            <el-button @click="recoveryDataAndForm('initForm')">清空内容</el-button>
            <el-button @click="isShowReferConfig = false">取 消</el-button>
        </div>

        <el-dialog title="为【参照的业务类型】选取值"
            append-to-body
            :visible.sync="isShowReferBtmType"
            width="70%"
            destroy-on-close
            @close="clearTableRowSelection('referType')"
            style="height: 110vh; margin-top: -12vh; overflow-y: hidden">
            <avue-crud :option="selectionReferBtmTypeOption"
                :table-loading="selectReferBtmTypeLoading"
                :data="selectReferBtmTypeData"
                :page.sync="selectReferBtmTypePage"
                ref="selectReferBtmTypeCrud"
                class="referBtmType-crud"
                @row-click="referBtmTypeRowClick"
                @search-change="referBtmTypeSearchChange"
                @search-reset="referBtmTypeSearchReset"
                @current-change="referBtmTypeCurrentChange"
                @size-change="referBtmTypeSizeChange">
                <template #radio="{row}">
                    <el-radio v-model="referBtmTypeSelectRow"
                        :label="row.$index">
                        -
                    </el-radio>
                </template>
            </avue-crud>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="selectedReferBtmType">确 定</el-button>
                <el-button @click="isShowReferBtmType = false">取 消</el-button>
            </div>
        </el-dialog>

        <el-dialog title="为【排序字段】选取值"
            append-to-body
            :visible.sync="isShowSortField"
            width="70%"
            destroy-on-close
            @close="clearTableRowSelection('sortField')"
            style="height: 110vh; margin-top: -12vh; overflow-y: hidden">
            <avue-crud :option="selectionSortFieldOption"
                :table-loading="selectSortFieldLoading"
                :data="selectSortFieldData"
                :page.sync="selectSortFieldPage"
                ref="selectSortFieldCrud"
                @row-click="sortFieldRowClick"
                @search-change="sortFieldChange"
                @search-reset="sortFieldSearchReset"
                @current-change="sortFieldCurrentChange"
                @size-change="sortFieldSizeChange">
                <template #radio="{row}">
                    <el-radio v-model="sortFieldSelectRow"
                        :label="row.$index">
                        -
                    </el-radio>
                </template>
            </avue-crud>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="selectedSortField">确 定</el-button>
                <el-button @click="isShowSortField = false">取 消</el-button>
            </div>
        </el-dialog>

        <el-dialog title="选择显示字段"
            append-to-body
            :visible.sync="isShowShowField"
            width="70%"
            destroy-on-close
            style="height: 110vh; margin-top: -12vh; overflow-y: hidden">
            <avue-crud :option="selectionShowFieldOption"
                :table-loading="selectShowFieldLoading"
                :data="selectShowFieldData"
                ref="selectShowFieldCrud"
                @row-click="showFieldRowClick"
                @selection-change="selectionShowFieldDataChange"
                @search-change="showFieldSearchChange"
                @search-reset="showFieldSearchReset">
            </avue-crud>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="selectedShowField">确 定</el-button>
                <el-button @click="isShowShowField = false">取 消</el-button>
            </div>
        </el-dialog>

        <el-dialog title="选择查询条件"
            append-to-body
            :visible.sync="isShowSearchCondition"
            width="70%"
            destroy-on-close
            style="height: 110vh; margin-top: -12vh; overflow-y: hidden">
            <avue-crud :option="selectionSearchConditionOption"
                :table-loading="selectSearchConditionLoading"
                :data="selectSearchConditionData"
                ref="selectSearchConditionCrud"
                @row-click="searchConditionRowClick"
                @selection-change="searchConditionDataChange"
                @search-change="searchConditionSearchChange"
                @search-reset="searchConditionSearchReset">
            </avue-crud>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="selectedSearchCondition">确 定</el-button>
                <el-button @click="isShowSearchCondition = false">取 消</el-button>
            </div>
        </el-dialog>

    </el-dialog>

</template>
@@ -123,13 +255,43 @@
            },
        },
        data() {
            let element = '';
            return {
                //测试表格行编辑效果
                // tableData:[{
                //         field: 'id',
                //         title: '编号',
                //         fieldType: 'text',
                //         fieldTypeText: '文本框',
                //         sort: true,
                //         sortField: 'id',
                //         width: '150',
                //         isquery: true,
                //         $cellEdit: false
                // },{
                //         field: 'name',
                //         title: '名称',
                //         fieldType: 'text',
                //         fieldTypeText: '文本框',
                //         sort: true,
                //         sortField: 'name',
                //         width: '180',
                //         isquery: true,
                //         $cellEdit: false
                // }],
                // tableOption:{
                //     tableData:[], //表格数据
                //     options:[] //表格配置项信息（表头，label宽度等）
                // },

                activeName: 'first', //当前活动的tabs
                labelWidth: '150',   // 标题宽度
                isShowReferConfig: false,  // 对话框显示隐藏控制
                isShowReferConfig: false,  // 第一层对话框显示隐藏控制
                referTypeIsReadOnly: false,
                // 表单对象
                form: {
                    referType: '',
                    referTypeName: '', //显示的值
                    referType: '',    //实际存储的值
                    textField: 'name',
                    valueField: 'oid',
                    type: 'default', //参照窗口类型
@@ -140,7 +302,8 @@
                    useFormKey: '',
                    paramForFormKey: '',
                    isMuti: false,
                    mapFields: '', 
                    mapFields: '',
                     // 查询条件列表
                    // limit: '15',
                    // sortField: '',
                    // sortType: 'asc',
@@ -152,29 +315,9 @@
                    // loadType: 'all',
                    // onlyLeaf: false,
                },
                attrData: [
                    {
                        field: 'id',
                        title: '编号',
                        fieldType: 'text',
                        fieldTypeText: '文本框',
                        sort: "true",
                        sortField: 'id',
                        width: '150',
                        isquery: true,
                    },{
                        field: 'name',
                        title: '名称',
                        fieldType: 'text',
                        fieldTypeText: '文本框',
                        sort: "true",
                        sortField: 'name',
                        width: '180',
                        isquery: true,
                    }
                ],
                attrData: [],
                attrOption: {
                    height:'150',
                    height:'180',
                    tip: false,
                    addBtn: false,
                    editBtn: false,
@@ -194,49 +337,76 @@
                        {
                            label: "列字段(*)",
                            prop: "field",
                            cell: true,
                            clearable: false,
                            blur: (value) => this.updateAttrBlur(value),
                        },{
                            label: "列名(*)",
                            prop: "title",
                            cell: true,
                            clearable: false,
                            blur: (value) => this.updateAttrBlur(value),
                        },{
                            label: "字段类型(*)",
                            prop: "fieldTypeText",
                            cell: true,
                            clearable: false,
                            type:"select",
                            value: 'text',
                            dicData: [{
                                value: 'text', label: '文本框'
                            }, {
                                value: 'combox', label: '下拉菜单'
                            }, {
                                value: 'radio',label: '单选'
                            }, {
                                value: 'swtich', label: '开关'
                            }, {
                                value: 'date', label: '时间'
                            }, {
                                value: 'textarea', label: '文本域'
                            }],
                            blur: (value) => this.updateAttrBlur(value),
                        },{
                            label: "列表可排序",
                            prop: "sort",
                            cell: true,
                            clearable: false,
                            type:"switch",
                            width: '80px',
                            value: true,
                            blur: (value) => this.updateAttrBlur(value),
                        },{
                            label: "排序字段",
                            prop: "sortField",
                            cell: true,
                            clearable: false,
                            blur: (value) => this.updateAttrBlur(value),
                        },{
                            label: "字段宽度",
                            prop: "width",
                            cell: true,
                            clearable: false,
                            blur: (value) => this.updateAttrBlur(value),
                        },{
                            label: "列固定位置",
                            prop: "fixedText",
                            cell: true,
                            type:"select",
                            clearable: false,
                            value: 'noFixed',
                            dicData: [{value: 'noFixed', label: '不固定'}, {value: 'left', label: '左边'}, {value: 'right', label: '右边'}],
                            blur: (value) => this.updateAttrBlur(value),
                        },{
                            label: "js显示代码",
                            prop: "templet",
                            cell: true,
                            clearable: false,
                            blur: (value) => this.updateAttrBlur(value),
                        },
                    ]
                },
                addSearchCondtionData: [
                        {
                            id: 'test',
                            cate: 'test',
                            value: 1
                        },{
                            id: 'test1',
                            cate: 'test1',
                            value: 2
                        },{
                            id: 'test2',
                            cate: 'test2',
                            value: 3
                        },{
                            id: 'test4',
                            cate: 'test4',
                            value: 4
                        }
                ],
                addSearchCondtionData: [],
                addSearchCondtionOption: {
                    height:'150',
                    tip: false,
@@ -257,18 +427,40 @@
                    column: [
                        {
                            label: "筛选字段",
                            prop: "id",
                            prop: "filterField",
                            cell: true,
                            clearable: false,
                        },{
                            label: "筛选类型",
                            prop: "cate",
                            prop: "filterType",
                            type: "select",
                            cell: true,
                            clearable: false,
                            dicData: [{
                                value: 'like', label: '包含'
                            }, {
                                value: '=', label: '等于'
                            }, {
                                value: '>', label: '大于'
                            }, {
                                value: '<', label: '小于'
                            }, {
                                value: '!=', label: '不等于'
                            }, {
                                value: '>=', label: '大于等于'
                            }, {
                                value: '<=', label: '小于等于'
                            }]
                        },{
                            label: "筛选值",
                            prop: "value",
                            prop: "filterValue",
                            cell: true,
                            clearable: false,
                        }
                    ]
                },

                optionSelectReferConfig: {
                selectReferConfigOption: {
                    height:'auto',
                    tip: false,
                    addBtn: false,
@@ -342,6 +534,217 @@
                },
                selectReferConfigQuery: {},

                //为【参照的业务类型】选取值对话框
                selectionReferBtmTypeOption: {
                    border: true,
                    height: '260',
                    tip: false,
                    //searchShow: false,
                    index: true,
                    selection: false,
                    menu: false,
                    addBtn: false,
                    refreshBtn: false,
                    searchShowBtn: false,
                    columnBtn: false,
                    dialogClickModal: false,
                    highlightCurrentRow: true,
                    align: 'center',
                    menuAlign: 'center',
                    column: [{
                        label: '-',
                        prop: 'radio',
                        width: 60,
                        hide: false
                    },{
                        label: '业务类型编号',
                        width: 120,
                        search: true,
                        searchSpan: 8,
                        searchLabelWidth: 100,
                        prop: 'id'
                    },{
                        label: '业务类型名称',
                        search: true,
                        searchSpan: 8,
                        searchLabelWidth: 100,
                        prop: 'name'
                    },{
                        label: '描述',
                        search: false,
                        prop: 'description'
                    }],
                },
                selectReferBtmTypeLoading: false,
                selectReferBtmTypeData: [],
                selectReferBtmTypePage: {
                    pageSize: 10,
                    currentPage: 1,
                    total: 0
                },
                referBtmTypeQuery: {},
                isShowReferBtmType: false,
                referBtmTypeSelectRowData: '',
                referBtmTypeSelectRow: '',


                // 为【排序字段】选取值对话框
                isShowSortField: false,
                selectionSortFieldOption: {
                    border: true,
                    height: '220px',
                    tip: false,
                    //searchShow: false,
                    index: true,
                    selection: false,
                    addBtn: false,
                    menu: false,
                    refreshBtn: false,
                    searchShowBtn: false,
                    columnBtn: false,
                    dialogClickModal: false,
                    highlightCurrentRow: true,
                    align: 'center',
                    menuAlign: 'center',
                    border: true,
                    column: [{
                        label: '-',
                        prop: 'radio',
                        width: 60,
                        hide: false
                    },{
                        label: '属性英文编号',
                        width: 120,
                        search: true,
                        searchSpan: 8,
                        searchLabelWidth: 100,
                        prop: 'id'
                    },{
                        label: '属性中文名称',
                        search: true,
                        searchSpan: 8,
                        searchLabelWidth: 100,
                        prop: 'name'
                    },{
                        label: '属性长度',
                        search: false,
                        prop: 'attrLength'
                    },{
                        label: '属性类型',
                        search: false,
                        prop: 'attrType'
                    }],
                },
                selectSortFieldLoading: false,
                selectSortFieldData: [],
                selectSortFieldPage: {
                    pageSize: 10,
                    currentPage: 1,
                    total: 0
                },
                sortFieldQuery: {},
                sortFieldSelectRow: '',
                sortFieldSelectRowData: '',


                //选择显示字段
                isShowShowField: false,
                selectionShowFieldOption:  {
                    border: true,
                    height: '220px',
                    tip: false,
                    //searchShow: false,
                    index: true,
                    selection: true,
                    addBtn: false,
                    menu: false,
                    refreshBtn: false,
                    searchShowBtn: false,
                    columnBtn: false,
                    dialogClickModal: false,
                    highlightCurrentRow: true,
                    align: 'center',
                    menuAlign: 'center',
                    border: true,
                    column: [{
                        label: '属性英文编号',
                        width: 120,
                        search: true,
                        searchSpan: 8,
                        searchLabelWidth: 100,
                        prop: 'id'
                    },{
                        label: '属性中文名称',
                        search: true,
                        searchSpan: 8,
                        searchLabelWidth: 100,
                        prop: 'name'
                    },{
                        label: '属性长度',
                        search: false,
                        prop: 'attrLength'
                    },{
                        label: '属性类型',
                        search: false,
                        prop: 'attrType'
                    }],
                },
                showFieldQuery: {},
                selectShowFieldLoading: false,
                selectShowFieldData: [],
                showFieldSelectList: [],

                //添加查询条件
                isShowSearchCondition: false,
                selectionSearchConditionOption: {
                    border: true,
                    height: '220px',
                    tip: false,
                    //searchShow: false,
                    index: true,
                    selection: true,
                    addBtn: false,
                    menu: false,
                    refreshBtn: false,
                    searchShowBtn: false,
                    columnBtn: false,
                    dialogClickModal: false,
                    highlightCurrentRow: true,
                    align: 'center',
                    menuAlign: 'center',
                    border: true,
                    column: [{
                        label: '属性英文编号',
                        width: 120,
                        search: true,
                        searchSpan: 8,
                        searchLabelWidth: 100,
                        prop: 'id'
                    },{
                        label: '属性中文名称',
                        search: true,
                        searchSpan: 8,
                        searchLabelWidth: 100,
                        prop: 'name'
                    },{
                        label: '属性长度',
                        search: false,
                        prop: 'attrLength'
                    },{
                        label: '属性类型',
                        search: false,
                        prop: 'attrType'
                    }],
                },
                selectSearchConditionLoading: false,
                selectSearchConditionData: [],
                searchConditionQuery: {},
                searchConditionSelectList: [],

                //上一次点击的行编辑数据
                preClickAttrRow: '',
                preClickAddSearchConditionRow: '',

            };
        },
        // 表单界面显示内容配置
@@ -364,93 +767,17 @@
                    column: [
                        {
                            label: '参照的业务类型',
                            prop: 'referType',
                            prop: 'referTypeName',
                            span: 7,
                            disabled: this.referTypeIsReadOnly,
                            clearable: !this.referTypeIsReadOnly,
                            tip: '参照数据查询的业务类型。',
                            tipPlacement: 'right',
                            type: 'input',
                            rules: [{
                                required: true,
                                message: "(参照的业务类型)必填项不能为空",
                                trigger: "blur",
                                trigger: ["blur","change"],
                            }],
                            children: {
                                border: true,
                                height: '200px',
                                tip: false,
                                //searchShow: false,
                                index: true,
                                selection: true,
                                //refreshBtn: false,
                                //columnBtn: false,
                                dialogClickModal: false,
                                highlightCurrentRow: true,
                                column: [{
                                    label: '业务类型编号',
                                    width: 120,
                                    search: true,
                                    searchSpan: 8,
                                    searchLabelWidth: 100,
                                    prop: 'id'
                                },{
                                    label: '业务类型名称',
                                    search: true,
                                    searchSpan: 8,
                                    searchLabelWidth: 100,
                                    prop: 'name'
                                },{
                                    label: '描述',
                                    search: false,
                                    prop: 'description'
                                }],
                            },
                            // formatter: (row) => {
                            //     console.log(row.name);
                            //     if (!row.name) 
                            //         return ''
                            //     return row.name;
                            // },
                            // onLoad: ({ page, value, data }, callback) => {
                            //     console.log(page);
                            //     console.log(value);
                            //     console.log(data);
                            //     //首次加载去查询对应的值
                            //     if (value) {
                            //         console.log(111+"======="+ value);
                            //         this.$message.success('首次查询' + value)
                            //         callback({
                            //             id: 't1',
                            //             name: 'test1',
                            //             description: 'test1',
                            //         })
                            //         return;
                            //     }
                            //     if (data) {
                            //         console.log(111+"======="+ data);
                            //         this.$message.success('搜索查询参数' + JSON.stringify(data))
                            //     }
                            //     if (page) {
                            //         console.log(111+"======="+ page);
                            //         this.$message.success('分页参数' + JSON.stringify(page))
                            //     }
                            //     //分页查询信息
                            //     callback({
                            //         total: 2,
                            //         data: [{
                            //             id: 't2',
                            //             name: 'test2',
                            //             description: 'test2',
                            //         }, {
                            //             id: 't3',
                            //             name: 'test3',
                            //             description: 'test3',
                            //         }]
                            //     })
                            // },
                            // props: {
                            //     label: 'name',
                            //     value: 'id',
                            // }
                        },{
                            label: '显示的属性',
                            prop: 'textField',
@@ -654,36 +981,9 @@
                                    label: '排序字段',
                                    prop: 'sortField',
                                    span: 7,
                                    type: 'table',
                                    tip: '查询数据时的排序字段',
                                    //clearable: false,
                                    tipPlacement: 'right',
                                    children: {
                                        border: true,
                                        column: [{
                                            label: '属性英文编号',
                                            width: 120,
                                            search: true,
                                            searchSpan: 8,
                                            searchLabelWidth: 100,
                                            prop: 'id'
                                        },{
                                            label: '属性中文名称',
                                            search: true,
                                            searchSpan: 8,
                                            searchLabelWidth: 100,
                                            prop: 'name'
                                        },{
                                            label: '属性长度',
                                            search: false,
                                            prop: 'attrLength'
                                        },{
                                            label: '属性类型',
                                            search: false,
                                            prop: 'attrType'
                                        }],
                                    },
                                    // 这儿需要添加业务类型接口
                                    
                                },{
                                    label: '排序类型',
                                    prop: 'sortType',
@@ -776,32 +1076,34 @@
                                    label: '排序字段',
                                    prop: 'sortField',
                                    span: 7,
                                    type: 'table',
                                    children: {
                                        border: true,
                                        column: [{
                                            label: '属性英文编号',
                                            width: 120,
                                            search: true,
                                            searchSpan: 8,
                                            searchLabelWidth: 100,
                                            prop: 'id'
                                        },{
                                            label: '属性中文名称',
                                            search: true,
                                            searchSpan: 8,
                                            searchLabelWidth: 100,
                                            prop: 'name'
                                        },{
                                            label: '属性长度',
                                            search: false,
                                            prop: 'attrLength'
                                        },{
                                            label: '属性类型',
                                            search: false,
                                            prop: 'attrType'
                                        }],
                                    },
                                    //type: 'table',
                                    tip: '查询数据时的排序字段',
                                    tipPlacement: 'right',
                                    // children: {
                                    //     border: true,
                                    //     column: [{
                                    //         label: '属性英文编号',
                                    //         width: 120,
                                    //         search: true,
                                    //         searchSpan: 8,
                                    //         searchLabelWidth: 100,
                                    //         prop: 'id'
                                    //     },{
                                    //         label: '属性中文名称',
                                    //         search: true,
                                    //         searchSpan: 8,
                                    //         searchLabelWidth: 100,
                                    //         prop: 'name'
                                    //     },{
                                    //         label: '属性长度',
                                    //         search: false,
                                    //         prop: 'attrLength'
                                    //     },{
                                    //         label: '属性类型',
                                    //         search: false,
                                    //         prop: 'attrType'
                                    //     }],
                                    // },
                                    // 这儿需要添加业务类型接口请求实现弹窗界面表格渲染
                                },{
                                    label: '排序类型',
@@ -820,18 +1122,75 @@
                    ]
                }
            },
            
        },
        mounted() {
            // 麻的这个地方调死我了
            this.element = document.getElementById('refer-config');
            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;
                }
                if (!this.$refs.crudAddCondition.$el.contains(e.target) && 
                   this.preClickAddSearchConditionRow != '') {
                   this.preClickAddSearchConditionRow.$cellEdit = false;
                }
            });
        },
        watch: {
            // 贼坑，切换类型时表格，隐藏再显示就会出现表格错位问题，
            'form.type'(val) {
                //console.log(val);
                this.onloadAttrData();
            }
        },
        methods: {
            clicktest(cell){

            // 单击表格实现表格行编辑
            clickAttrEdit(row, column, event){
                if(this.preClickAttrRow && this.preClickAttrRow != row){
                    //console.log(this.attrData[this.preClickAttrRow.$index]);
                    this.attrData[this.preClickAttrRow.$index].$cellEdit = false;
                }
                row.$cellEdit = true;
                this.preClickAttrRow = row;
            },
            // 属性表格行编辑失去焦点时保存方法
            updateAttrBlur(value){
                //console.log(this.attrData[0]);
                
                //cell.$cellEdit = true;
            },
            // 单击表格实现表格行编辑
            clickAddSearchCondtionEdit(row, column, event){
                if(this.preClickAddSearchConditionRow && this.preClickAddSearchConditionRow != row){
                    //console.log(this.attrData[this.preClickAttrRow.$index]);
                    this.addSearchCondtionData[this.preClickAddSearchConditionRow.$index].$cellEdit = false;
                }
                row.$cellEdit = true;
                this.preClickAddSearchConditionRow = row;
            },
            //上一个页面已经选中参照应用的业务类型的情况，和上一次已经配置过参照配置的情况下进行页面初始化渲染
            initPageData(val){
                let value = JSON.parse(val);
                if(value != null || value != 'undefined' ){
                    this.form = value;
                    //console.log(val);
                    this.referTypeIsReadOnly = true;
                }
                //console.log(localStorage.getItem("userId"));
            },
            // 切换当前活动的tabs
            handleClick(tab, event) {
                if(tab.index=='0'){
                    this.onloadAttrData(); 
                }else{
                    this.onloadselectReferConfigData();
                    //this.onloadSelectReferConfigData();
                }
            },
            // 选择完参照配置之后点击保存按钮触发
@@ -839,13 +1198,11 @@
                //表单验证
                this.$refs.form.validate((valid, done, msg) => {
                    if (valid) {
                        // 根据类型对form表单中的参数进行过滤，只保留非空且需要的属性
                        let submitForm = this.filterForm();
                        //console.log(submitForm);
                        //转换成JSON字符串进行父组件回显
                        let submitFormJson = JSON.stringify(submitForm);
                        //console.log(submitFormJson);
                        this.$emit('echoReferConfig', submitFormJson) // 触发update:data将子组件值传递给父组件
                        //this.isShowReferConfig = false;
                        this.$emit('echoReferConfig', submitForm) // 触发update:data将子组件值传递给父组件
                        this.isShowReferConfig = false;
                        done()
                    } else {
                        for(let attr in msg) {
@@ -857,12 +1214,40 @@
                    }
                })
            },
            //从缓存中那form表单对象
            getLocalStoregeForm(){
                localStorage.getItem("userId");

            },
            /** 其实选取属性表格的默认数据不需要加载，
             但是弹窗打开会有表格错行问题所以需要在这调用doLayout方法*/
            onloadAttrData(){
                this.$nextTick(() => {
                    this.$refs.crudAttr.doLayout()
                })
                this.attrData = [
                    {
                        field: 'id',
                        title: '编号',
                        fieldType: 'text',
                        fieldTypeText: '文本框',
                        sort: true,
                        sortField: 'id',
                        width: '150',
                        isquery: true,
                        $cellEdit: false
                    },{
                        field: 'name',
                        title: '名称',
                        fieldType: 'text',
                        fieldTypeText: '文本框',
                        sort: true,
                        sortField: 'name',
                        width: '180',
                        isquery: true,
                        $cellEdit: false
                    }
                ];
            },
            // 属性选择表格中的移除按钮功能
            removeCurrentRow(row,condition){
@@ -875,33 +1260,25 @@
            // 该界面的数据进行初始化复原
            recoveryDataAndForm(condition){
                if(condition=='initForm'){
                    this.referTypeIsReadOnly = false;
                    let currentType = this.form.type;
                    this.form = this.$options.data().form;
                    this.form.type = currentType;
                    console.log(this.form);
                    // this.form.referContent = '';
                    // this.form.displayTable = '';
                    return;
                }
                Object.assign(this.$data,this.$options.data());         
            },
            // 打开添加查询条件对话框
            openAddSearchOrAttrDialog(condition){
                if(condition=='addSearchCondition'){
                    console.log('this is open addSearchCondition');
                }else {
                    if(this.form.referType == '' || this.form.referType == null){
                        this.$message.warning("请输入参照的业务类型")
                        return;
                    }

                    console.log('this is open selectAttr');
                }
                Object.assign(this.$data,this.$options.data());    
                // 移除绑定在该页面对话框上的全局监听事件
                if(this.element != ''){
                   let te = window.removeEventListener('click', this.element)
                }     
            },
            // 提交表单之前过滤掉空或不需要的表单数据
            filterForm(){
                const oldForm = this.form;
                let submittDefaultForm = [
                    'referTypeName',
                    'referType',
                    'textField',
                    'valueField',
@@ -914,6 +1291,7 @@
                    'paramForFormKey',
                    'isMuti',
                    'mapFields', 
                    'searchCondition', 
                ];
                let addArray = [];
                let newForm ={};
@@ -934,27 +1312,364 @@
                    ];
                }
                submittDefaultForm = submittDefaultForm.concat(addArray);
                if(!this.checkArrayIsUndefined(this.addSearchCondtionData)){
                    newForm = {
                        searchCondition: this.addSearchCondtionData,
                    }
                }
                if((oldForm.type == 'default' || oldForm.type  == 'grid') && (this.attrData.length >= 0 && !this.checkArrayIsUndefined(this.addSearchCondtionData))){
                    newForm = Object.assign(newForm,{attrData:this.attrData});
                }
                // 过滤出空值属性和不需要的属性
                submittDefaultForm.forEach(item=>{
                    //console.log(item);
                    if(item == 'isMuti' || item == 'onlyLeaf' || oldForm[item] != '' || oldForm[item] != ''){
                      newForm = Object.assign(newForm,{[item]:oldForm[item]});  
                    // 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]});  
                    }
                });
                // console.log(newForm);
                return newForm;
            },
            onloadselectReferConfigData(){
            /**
             * 为空
             * @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');
            },
            onloadSelectReferConfigData(){
                this.$nextTick(() => {
                    this.$refs.selectReferConfigCrud.doLayout()
                })
                this.selectReferConfigData = [{
                    field: 'id',
                    title: '编号',
                    fieldType: 'text',
                    fieldTypeText: '文本框',
                    sort: "true",
                    sortField: 'id',
                    width: '150',
                    isquery: true,
                },{
                    field: 'name',
                    title: '名称',
                    fieldType: 'text',
                    fieldTypeText: '文本框',
                    sort: "true",
                    sortField: 'name',
                    width: '180',
                    isquery: true,
                }];
            },
            
            // 打开表格选择框
            openSelectionTable(condition){
                if (condition == 'referType'){
                    this.isShowReferBtmType = true;
                    this.referBtmTypeOnLoad();
                }else if (condition == 'sortField'){
                    this.isShowSortField = true;
                    this.sortFieldOnLoad();
                }else {
                    if(this.form.referType == '' || this.form.referType == null){
                        this.$message.warning("请输入参照的业务类型")
                        return;
                    }
                    if(condition == 'addSearchCondition'){
                        this.isShowSearchCondition = true;
                        this.selectSearchConditionDataOnload();
                    }else {
                        this.isShowShowField = true;
                        this.selectShowFieldDataOnload();
                    }
                }
            },
            // 清空表格选择框
            clearSelectionTable(condition){
                if(condition == 'referType'){
                    this.form.referType = '';
                    this.form.referTypeName = '';
                }else {
                    this.form.sortField = '';
                }
            },
            // 关闭对话框时对选中内容进行清空，并解绑全局监听事件
            clearTableRowSelection(condition){
                if(condition == 'sortField'){
                    this.sortFieldSelectRow = ''; 
                    this.sortFieldSelectRowData = '';
                }else if(condition == 'referType'){
                    this.referBtmTypeSelectRow='';
                    this.referBtmTypeSelectRowData = '';
                }
                
            },

            // 为【参照的业务类型】选取值
            referBtmTypeOnLoad(page, params = {}){
                this.selectReferBtmTypeLoading = true;
                // 调用api请求
                const data = {
                    total: 2,
                    data: [{
                        id: 't2',
                        name: 'test2',
                        description: 'test2',
                    }, {
                        id: 't3',
                        name: 'test3',
                        description: 'test3',
                    }]
                }
                this.selectReferBtmTypeData = data.data;
                this.selectReferBtmTypePage.total = data.total;
                this.selectReferBtmTypeLoading = false;
            },
            referBtmTypeSizeChange(pageSize){
                this.selectReferBtmTypePage.pageSize = pageSize;
            },
            referBtmTypeSearchChange(params, done){
                this.referBtmTypeQuery = params;
                this.selectReferBtmTypePage.currentPage = 1;
                this.referBtmTypeOnLoad(this.page, params);
                done();
            },
            referBtmTypeSearchReset(){
                this.referBtmTypeQuery = {};
                this.referBtmTypeOnLoad(this.selectReferBtmTypePage);
            },
            referBtmTypeRowClick(row){
                this.referBtmTypeSelectRowData = row;
                this.referBtmTypeSelectRow = row.$index
                //console.log( this.referBtmTypeSelectRowData);
            },
            referBtmTypeCurrentChange(currentPage){
                this.selectReferBtmTypePage.currentPage = currentPage;
            },
            selectedReferBtmType(){
                if(!this.referBtmTypeSelectRowData) {
                    this.$message.warning("请选择一条数据");
                    return;
                }
                this.form.referTypeName = this.referBtmTypeSelectRowData.name;
                this.form.referType = this.referBtmTypeSelectRowData.id;
                this.isShowReferBtmType = false;
            },

            // 为【排序字段】选取值
            sortFieldOnLoad(page, params = {}){
                this.selectSortFieldLoading = true;
                // 调用api请求
                const data = {
                    total: 2,
                    data: [{
                        id: 'test',
                        name: '测试',
                        attrLength: 11,
                        attrType: '字符串'
                    }, {
                        id: 'test1',
                        name: '测试1',
                        attrLength: 12,
                        attrType: '数字'
                    }]
                }
                this.selectSortFieldData = data.data;
                this.selectSortFieldPage.total = data.total;
                this.selectSortFieldLoading = false;
            },
            sortFieldSizeChange(pageSize){
                this.selectSortFieldPage.pageSize = pageSize;
            },
            sortFieldSearchChange(params, done){
                this.sortFieldQuery = params;
                this.selectSortFieldPage.currentPage = 1;
                this.sortFieldOnLoad(this.page, params);
                done();
            },
            sortFieldSearchReset(){
                this.sortFieldQuery = {};
                this.sortFieldOnLoad(this.selectSortFieldPage);
            },
            sortFieldRowClick(row){
                this.sortFieldSelectRowData = row;
                this.sortFieldSelectRow = row.$index
                //console.log( this.sortFieldSelectRowData);
            },
            sortFieldCurrentChange(currentPage){
                this.selectReferBtmTypePage.currentPage = currentPage;
            },
            selectedSortField(){
                if(!this.sortFieldSelectRowData) {
                    this.$message.warning("请选择一条数据");
                    return;
                }
                this.form.sortField = this.sortFieldSelectRowData.id;
                this.isShowSortField = false;
            },

            // 选择显示字段
            selectShowFieldDataOnload(params = {}){
                this.selectShowFieldLoading = true;
                // 调用api请求
                const data = {
                    total: 2,
                    data: [{
                        id: 'test',
                        name: '测试',
                        attrLength: 11,
                        attrType: 'text',
                        attrTypeText: '文本框'
                    }, {
                        id: 'test1',
                        name: '测试1',
                        attrLength: 12,
                        attrType: 'number',
                        attrTypeText: '数字'
                    }, {
                        id: 'test2',
                        name: '测试2',
                        attrLength: 13,
                        attrType: 'date',
                        attrTypeText: '日期'
                    }]
                }
                this.selectShowFieldData = data.data;
                this.selectShowFieldLoading = false;
            },
            selectionShowFieldDataChange(list){
                this.showFieldSelectList = list;
                this.$refs.selectShowFieldCrud.setCurrentRow(this.showFieldSelectList[list.length-1]);
            },
            showFieldRowClick(row){
                //this.showFieldSelectList.push(row);
                this.$refs.selectShowFieldCrud.setCurrentRow(row);
                this.$refs.selectShowFieldCrud.toggleRowSelection(row); //选中当前行
            },
            showFieldSearchChange(params, done){
                this.showFieldQuery = params;
                this.selectShowFieldDataOnload(params);
                done();
            },
            showFieldSearchReset(){
                this.showFieldQuery = {};
                this.sortFieldOnLoad();
            },
            selectedShowField(){
                //console.log(this.showFieldSelectList);
                if(this.showFieldSelectList.length <= 0) {
                    this.$message.warning("请至少选择一条数据");
                    return;
                }
                //this.showFieldSelectList;
                this.showFieldSelectList.forEach(item => {
                    this.attrData.push(
                        {
                            field: item.id,
                            title: item.id,
                            fieldType: item.attrType,
                            fieldTypeText: item.attrTypeText,
                            sort: false,
                            sortField: item.id,
                            width: item.attrLength,
                            isquery: false,
                            $cellEdit: false
                        }
                    )
                    
                })
                this.isShowShowField = false;
            },


            // 选择查询条件
            selectSearchConditionDataOnload(params = {}){
                this.selectSearchConditionLoading = true;
                // 调用api请求
                this.selectSearchConditionData = [{
                        id: 'test',
                        name: '测试',
                        attrLength: 11,
                        attrType: '字符串',
                        $cellEdit: false,
                    }, {
                        id: 'test1',
                        name: '测试1',
                        attrLength: 12,
                        attrType: '数字',
                        $cellEdit: false,
                    }, {
                        id: 'test2',
                        name: '测试2',
                        attrLength: 13,
                        attrType: '日期',
                        $cellEdit: false,
                }];
                this.selectSearchConditionLoading = false;
            },
            searchConditionRowClick(row){
                this.$refs.selectSearchConditionCrud.setCurrentRow(row);
                this.$refs.selectSearchConditionCrud.toggleRowSelection(row); //选中当前行
            },
            searchConditionDataChange(list){
                this.searchConditionSelectList = list;
                this.$refs.selectSearchConditionCrud.setCurrentRow(this.searchConditionSelectList[list.length-1]);
            },
            searchConditionSearchChange(params, done){
                this.searchConditionQuery = params;
                this.selectSearchConditionDataOnload(params);
                done();
            },
            searchConditionSearchReset(){
                this.searchConditionQuery = {};
                this.sortFieldOnLoad();
            },
            selectedSearchCondition(){
                console.log(this.searchConditionSelectList);
                if(this.searchConditionSelectList.length <= 0) {
                    this.$message.warning("请至少选择一条数据");
                    return;
                }
                this.searchConditionSelectList.forEach(item => {
                    this.addSearchCondtionData.push(
                        {
                            filterField: item.id,
                            filterType: '=',
                            filterValue: '',
                            $cellEdit: false
                        }
                    )
                    
                })
                this.isShowSearchCondition = false;
            },

        }
    };
</script>

<style>

    .referBtmType-crud > .el-card > .el-card__body > .avue-crud__menu {
        display: none!important;
    }

    /* 提示文本出现的速度 */
    .el-tooltip__popper{
        width: 200px !important;