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

@@ -1,970 +1,94 @@
<template>
    <!-- 第二层对话框,属性码段，公式编辑框弹窗 -->
    <el-dialog
      title="参照配置"
      append-to-body
      :visible.sync="isShowReferConfig"
      width="90%"
      @close="recoveryDataAndForm('initData')"
      style="height: 115vh; margin-top: -14vh; overflow-y: hidden">
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="自定义参照配置" name="first">
                <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" 
                                    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>
                                </el-input>
                            </template>
                        </avue-form>
                    </el-row>
                    <el-row v-show="form.type=='default' || form.type=='grid'">
                        <avue-crud
                            ref="crudAttr"
                            :option="attrOption"
                            @cell-click="clicktest"
                            :data="attrData">
                            <!-- 表格内操作按钮 -->
                            <template slot="menu" slot-scope="scope">
                                <el-button type="text"
                                    size="small"
                                    icon="el-icon-search"
                                    plain
                                    @click="scope.row.isquery=!scope.row.isquery">
                                    {{scope.row.isquery ? "取消快速查询":"快速查询"}}
                                </el-button>
                                <el-button type="text"
                                    size="small"
                                    icon="el-icon-minus"
                                    plain
                                    @click="removeCurrentRow(scope.row,'removeAttr')">移除
                                </el-button>
                            </template>
                            <!-- 表格左上方按钮区域 -->
                            <template slot="menuLeft" slot-scope="scope">
                                <el-button type="primary"
                                    size="small"
                                    icon="el-icon-plus"
                                    @click="openAddSearchOrAttrDialog('selectAttr')">选择属性
                                </el-button>
                            </template>
                        </avue-crud>
                    </el-row>
                    <el-row>
                        <avue-crud
                            ref="crudAddCondition"
                            :option="addSearchCondtionOption" 
                            :data="addSearchCondtionData">
                            <!-- 表格内操作按钮 -->
                            <template slot="menu" slot-scope="scope">
                                <el-button type="text"
                                    size="small"
                                    icon="el-icon-minus"
                                    plain
                                    @click="removeCurrentRow(scope.row,'removeaddSearchCondtion')">移除
                                </el-button>
                            </template>
                            <!-- 表格左上方按钮区域 -->
                            <template slot="menuLeft" slot-scope="scope">
                                <el-button type="primary"
                                    size="small"
                                    icon="el-icon-plus"
                                    @click="openAddSearchOrAttrDialog('addSearchCondition')">
                                    添加查询条件
                                </el-button>
                            </template>
                        </avue-crud>
                    </el-row>
                </div>
            </el-tab-pane>
            <el-tab-pane label="直接选取参照配置" name="second">
                <div style="width: 100%; overflow-y: auto; height: 65vh">
                    <avue-crud
                        :option="optionSelectReferConfig"
                        :table-loading="selectReferConfigLoading"
                        :data="selectReferConfigData"
                        :page.sync="selectReferConfigPage"
                        ref="selectReferConfigCrud"
                        @row-click="codeRuleRowClick"
                        @search-change="searchChange"
                        @search-reset="searchReset"
                        @selection-change="selectionChange"
                        @current-change="currentChange"
                        @size-change="sizeChange"
                        @refresh-change="refreshChange"
                        @on-load="onLoad">
                    </avue-crud>
                </div>
            </el-tab-pane>
        </el-tabs>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="selectedListReferConfig">确 定</el-button>
            <el-button @click="recoveryDataAndForm('initForm')">清空内容</el-button>
            <el-button @click="isShowReferConfig = false">取 消</el-button>
        </div>
    </el-dialog>

    <div v-if="display">
        <!-- 第二层对话框,自定义参照配置Form组件 -->
        <refer-config-form-dialog
            ref="referConfigFormDialog"
            @echoReferConfig="echoReferConfig">
        </refer-config-form-dialog>
        <!-- 第二层对话框,直接选择参照配置crud组件 -->
        <refer-config-crud-dialog
            ref="referConfigCrudDialog"
            @openReconfigInterFace="openReconfigInterFace"
            @echoReferConfig="echoReferConfig">
        </refer-config-crud-dialog>
    </div>
</template>
    

<script>
    export default {
        name: "referConfigDialog",
        props: {
            //本场景变量
            thisSceneTableData: {
                type: Array,
            },
        },
        data() {
            return {
                activeName: 'first', //当前活动的tabs
                labelWidth: '150',   // 标题宽度
                isShowReferConfig: false,  // 对话框显示隐藏控制
                // 表单对象
                form: {
                    referType: '',
                    textField: 'name',
                    valueField: 'oid',
                    type: 'default', //参照窗口类型
                    url: '',
                    backPath: '',
                    method: 'GET',
                    height: '',
                    useFormKey: '',
                    paramForFormKey: '',
                    isMuti: false,
                    mapFields: '', 
                    // limit: '15',
                    // sortField: '',
                    // sortType: 'asc',
                    // referContent: '',
                    // displayTable: '',
                    // parentFieldName: '',
                    // parentUsedField: 'oid',
                    // parentValue: '',
                    // 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,
                    }
                ],
                attrOption: {
                    height:'150',
                    tip: false,
                    addBtn: false,
                    editBtn: false,
                    searchShow: false,
                    searchMenuSpan: 6,
                    border: false,
                    index: true,
                    viewBtn: false,
                    delBtn: false,
                    selection: false,
                    disablePage: false,
                    refreshBtn: false,
                    columnBtn: false,
                    dialogClickModal: false,
                    highlightCurrentRow: true,
                    column: [
                        {
                            label: "列字段(*)",
                            prop: "field",
                        },{
                            label: "列名(*)",
                            prop: "title",
                        },{
                            label: "字段类型(*)",
                            prop: "fieldTypeText",
                        },{
                            label: "列表可排序",
                            prop: "sort",
                        },{
                            label: "排序字段",
                            prop: "sortField",
                        },{
                            label: "字段宽度",
                            prop: "width",
                        },{
                            label: "列固定位置",
                            prop: "fixedText",
                        },{
                            label: "js显示代码",
                            prop: "templet",
                        },
                    ]
                },
                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
                        }
                ],
                addSearchCondtionOption: {
                    height:'150',
                    tip: false,
                    addBtn: false,
                    editBtn: false,
                    searchShow: false,
                    searchMenuSpan: 6,
                    border: false,
                    index: true,
                    viewBtn: false,
                    delBtn: false,
                    selection: false,
                    disablePage: false,
                    refreshBtn: false,
                    columnBtn: false,
                    dialogClickModal: false,
                    highlightCurrentRow: true,
                    column: [
                        {
                            label: "筛选字段",
                            prop: "id",
                        },{
                            label: "筛选类型",
                            prop: "cate",
                        },{
                            label: "筛选值",
                            prop: "value",
                        }
                    ]
                },
import referConfigFormDialog from "./referConfigFormDialog.vue";
import referConfigCrudDialog from "./referConfigCrudDialog.vue";
import func from "@/util/func";
export default {
    name: "referConfigDialog",
    props: ["referConfigOption","display"],
    components: {referConfigFormDialog, referConfigCrudDialog},
    data() {
        return {
        };
    },
    watch:{
        referConfigOption (){
            if(func.notEmpty(this.referConfigOption.referConfig) || func.notEmpty(this.referConfigOption.referBtmId)){
                this.openReconfigInterFace(this.referConfigOption);
            }else{
                this.openTipsChooseOrCust();
            }

                optionSelectReferConfig: {
                    height:'auto',
                    tip: false,
                    addBtn: false,
                    editBtn: false,
                    //searchShow: false,
                    searchMenuSpan: 6,
                    border: false,
                    index: true,
                    viewBtn: false,
                    delBtn: false,
                    //selection: false,
                    //disablePage: false,
                    //refreshBtn: false,
                    //columnBtn: false,
                    dialogClickModal: false,
                    highlightCurrentRow: true,
                    column: [
                        {
                            label: "列字段(*)",
                            prop: "field",
                        },{
                            label: "列名(*)",
                            prop: "title",
                        },{
                            label: "字段类型(*)",
                            prop: "fieldTypeText",
                        },{
                            label: "列表可排序",
                            prop: "sort",
                        },{
                            label: "排序字段",
                            prop: "sortField",
                        },{
                            label: "字段宽度",
                            prop: "width",
                        },{
                            label: "列固定位置",
                            prop: "fixedText",
                        },{
                            label: "js显示代码",
                            prop: "templet",
                        },
                    ]
                },
                selectReferConfigLoading: false,
                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,
                    }
                ],
                selectReferConfigPage: {
                    pageSize: 10,
                    currentPage: 1,
                    total: 0
                },
                selectReferConfigQuery: {},

            };
        },
        // 表单界面显示内容配置
        computed: {
            formOption() {
                /** 检验是否为数字 */
                let validateNumber = "";
                validateNumber = (rule, value,callback) => {
                    if(/[^\d]/g.test(value)){
                        callback(new Error('窗口显示的高度必须为数值类型'));
                    }else {
                        callback();
                    }
                };
                return {
                    submitBtn: false,
                    emptyBtn: false,
                    labelWidth: '145', //默认标签宽度
                    // 基础表单信息展示区域
                    column: [
                        {
                            label: '参照的业务类型',
                            prop: 'referType',
                            span: 7,
                            tip: '参照数据查询的业务类型。',
                            tipPlacement: 'right',
                            type: 'input',
                            rules: [{
                                required: true,
                                message: "(参照的业务类型)必填项不能为空",
                                trigger: "blur",
                            }],
                            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',
                            tip: '选择数据后，显示到字段上的信息所属的属性，一般都是name,如果是多个属性使用逗号分割，如id,name。',
                            tipPlacement: 'right',
                            span: 7,
                            value: 'name',
                            rules: [{
                                required: true,
                                message: "(显示的属性)必填项不能为空",
                                trigger: "blur",
                            }],
                        },{
                            label: '存储值的属性',
                            prop: 'valueField',
                            tip: '选择数据后，保存到数据库里的属性，一般都是oid或者id，如果是多个属性使用逗号分割，如oid ,id',
                            value: 'oid',
                            tipPlacement: 'right',
                            span: 7,
                            rules: [{
                                required: true,
                                message: "(存储值的属性)必填项不能为空",
                                trigger: "blur",
                            }],
                        },{
                            label: '参照窗口类型',
                            prop: 'type',
                            tip: 'default:默认的参照窗口样式; stand:UI上下文配置的方式; classify:分类+档案的显示; 自定义的参照直接写js的组件路径；tree:树形展示;grid:列表展示',
                            tipPlacement: 'right',
                            span: 7,
                            value: 'default',
                            type: 'select',
                            dicData: [{
                                label: '默认样式',
                                value: 'default'
                            }, {
                                label: '平台配置',
                                value: 'stand'
                            }, {
                                label: '树形',
                                value: 'tree'
                            }, {
                                label: '列表',
                                value: 'grid'
                            }, {
                                label: '部门树',
                                value: 'refer/OrgDepartmentRefer'
                            }, {
                                label: '部门列表',
                                value: 'refer/OrgDepartmentGridRefers'
                            }, {
                                label: '用户',
                                value: 'refer/SmUserRefer'
                            }, {
                                label: '用户列表',
                                value: 'refer/SmUserGridRefer'
                            }, {
                                label: '角色列表',
                                value: 'refer/SmRoleRefer'
                            }, {
                                label: '职务',
                                value: 'refer/OrgDutyRefer'
                            }, {
                                label: '工种',
                                value: 'refer/SmWorkTypeRefer'
                            }, {
                                label: '流程模板',
                                value: 'refer/WfProcessTemplateRefer'
                            }],
                            rules: [{
                                required: true,
                                message: "(参照窗口类型)必填项不能为空",
                                trigger: "blur",
                            }],
                            change: ({ value, column }) => {
                                // 复原表单,因为其他分组中如果存在值，在切换时,会保留输入的字段值所以需要还原
                                let oldForm = this.form;
                                this.form = {};  // 表单对象赋空
                                this.form.referType = oldForm.referType
                                this.form.textField = oldForm.textField
                                this.form.valueField = oldForm.valueField
                                this.form.type = oldForm.type //参照窗口类型
                                this.form.url =  oldForm.url
                                this.form.backPath =  oldForm.backPath
                                this.form.method =  oldForm.method
                                this.form.height =  oldForm.height
                                this.form.useFormKey =  oldForm.useFormKey
                                this.form.paramForFormKey =  oldForm.paramForFormKey
                                this.form.isMuti =  oldForm.isMuti
                                this.form.mapFields =  oldForm.mapFields
                                let addFrom = {};  //根据类型需要添加的不同属性
                                if(value == 'stand'){
                                    addFrom = {
                                        referContent: '',
                                        displayTable: '',
                                    }
                                } else if(value == 'default' || value == 'grid'){
                                    addFrom = {
                                        limit: '15',
                                        sortField: '',
                                        sortType: 'asc',
                                    }
                                } else if(value == 'tree'){
                                    addFrom = {
                                        parentFieldName: '',
                                        parentUsedField: 'oid',
                                        parentValue: '',
                                        loadType: 'all',
                                        onlyLeaf: false,
                                        sortField: '',
                                        sortType: 'asc',
                                    }
                                }
                                // 合并两个表单
                                this.form = Object.assign(addFrom,this.form);
                                //console.log(this.form);
                            },
                        },{
                            label: '自定义的后台路径',
                            prop: 'url',
                            tip: '通常为空;如果是列表，后台必须返回DataGrid，如果是树，后台必须返回List<Tree>',
                            tipPlacement: 'right',
                            span: 7,
                        },{
                            label: '服务的地址',
                            prop: 'backPath',
                            tip: '通常为空，在支持微服务或者分布式部署的时候才配置',
                            tipPlacement: 'right',
                            span: 7,
                        },{
                            label: '请求后台的协议方式',
                            prop: 'method',
                            tip: 'HTTP的协议方式，支持POST,PUT,GET，一般都是GET',
                            tipPlacement: 'right',
                            span: 7,
                            value: 'GET',
                            type: 'select',
                            dicData: [{
                                label:'GET',value: "GET"
                            },{
                                label:'PUT',value: "PUT"
                            },
                            {
                                label:'POST',value: "POST"
                            }],
                        },{
                            label: '窗口显示的高度',
                            prop: 'height',
                            tip: '默认空着，设置后表示强制显示这样的高度',
                            tipPlacement: 'right',
                            span: 7,
                            rules:[{
                                validator: validateNumber,
                                message: "窗口显示的高度必须为数值类型",
                                trigger: "blur",
                            }]
                        },{
                            label: '过滤(级联)属性',
                            prop: 'useFormKey',
                            tip: '获取表单上的其他属性的属性的值来过滤,或者使用某个属性来级联选择',
                            tipPlacement: 'right',
                            span: 7,
                        },{
                            label: '过滤属性请求参数',
                            prop: 'paramForFormKey',
                            tip: '使用过滤属性时，发送给后台的请求参数',
                            tipPlacement: 'right',
                            span: 7,
                        },{
                            label: '是否多选',
                            type: 'switch',
                            prop: 'isMuti',
                            value: false,
                            span: 7,
                            row: true,
                        },{
                            label: '映射其他属性',
                            prop: 'mapFields',
                            tip: '选择数据后，将选择的数据拷贝到表单里的其他属性，书写格式为{当前表单上的属性:选择数据里的属性,XXXXx:yyyy}',
                            tipPlacement: 'right',
                            span: 18,
                        }
                    ],
                    // 变动的表单区域
                    group: [
                        {   
                            display: this.form.type=='default'||this.form.type=='grid',
                            icon: 'el-icon-info',
                            label: this.form.type=='default' ? '默认参照的配置(下方列表)':'列表参照的配置（下方列表)',
                            collapse: true,
                            prop: 'groupDdefaultOrGrid',
                            column: [
                                {
                                    label: '每页显示条数',
                                    prop: 'limit',
                                    span: 7,
                                    tip: '分页时每页显示的数量，不分页填-1',
                                    //value: 15,
                                    tipPlacement: 'right',
                                },{
                                    label: '排序字段',
                                    prop: 'sortField',
                                    span: 7,
                                    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: '排序类型',
                                    prop: 'sortType',
                                    span: 7,
                                    dicData: [{
                                        label: '升序', value: 'asc'
                                    }, {
                                        label: '降序', value: 'desc'
                                    }],
                                    //value: 'asc',
                                    type: 'select',
                                    tip: '查询数据时的排序类型',
                                    tipPlacement: 'right',
                                }
                            ]
                        },
                        {   
                            display: this.form.type=='stand',
                            icon: 'el-icon-info',
                            label: 'stand(平台配置)参照',
                            collapse: true,
                            prop: 'groupStand',
                            column: [
                                {
                                    label: '参考的UI上下文',
                                    prop: 'referContent',
                                    span: 7,
                                    tip: '只有参照窗口类型是stand时才必须设置,且在stand类型下才能生效',
                                    tipPlacement: 'right',
                                },
                                {
                                    label: '平台的表格编号',
                                    prop: 'displayTable',
                                    span: 7,
                                    tip: '与参照的UI上下文互斥，只有参照窗口类型是stand时才必须设置，且在stand类型下才能生效',
                                    tipPlacement: 'right',
                                },
                            ]
                        },
                        {   
                            display: this.form.type=='tree',
                            icon: 'el-icon-info',
                            label: '树形参照信息',
                            collapse: true,
                            prop: 'groupTree',
                            labelWidth: '158',
                            column: [
                                {
                                    label: '树形的上级属性',
                                    prop: 'parentFieldName',
                                    span: 7,
                                    tip: '树形展示的时候，上下级关系查找的属性。',
                                    tipPlacement: 'right',
                                    rules: [{
                                        required: true,
                                        message: "(树形的上级属性)必填项不能为空",
                                        trigger: "blur",
                                    }],
                                },{
                                    label: '上级属性值对应属性',
                                    prop: 'parentUsedField',
                                    span: 7,
                                    tip: '上级属性存储的值,是上级数据的什么属性。一般都是oid。',
                                    value: 'oid',
                                    tipPlacement: 'right',
                                },{
                                    label: '根节点的值',
                                    prop: 'parentValue',
                                    span: 7,
                                    tip: '树形展示的时候，上级的值。',
                                    tipPlacement: 'right',
                                },{
                                    label: '树加载方式',
                                    prop: 'loadType',
                                    span: 7,
                                    value: 'all',
                                    dicData: [{
                                        label: '全部', value: 'all'
                                    }, {
                                        label: '逐级加载', value: 'node'
                                    }],
                                    type: 'select',
                                },{
                                    label: '是否只能选择叶子节点',
                                    prop: 'onlyLeaf',
                                    span: 7,
                                    value: false,
                                    type: 'switch',
                                },{
                                    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'
                                        }],
                                    },
                                    // 这儿需要添加业务类型接口请求实现弹窗界面表格渲染
                                },{
                                    label: '排序类型',
                                    prop: 'sortType',
                                    span: 7,
                                    type: 'select',
                                    value: 'asc',
                                    dicData: [{
                                        label: '升序', value: 'asc'
                                    }, {
                                        label: '降序', value: 'desc'
                                    }],
                                },
                            ]
                        },
                    ]
    },
    methods: {
        // 当前已存在编辑过的参照配置，所以直接打开参照配置界面
        openReconfigInterFace(preReferConfigForm){
            const form = preReferConfigForm;
            let data = {
                referTypeName: form.referBtmName || '',
                referType: form.referBtmId || '',
            }
            if(this.referConfigOption.referConfig){
                // 编辑码段时referConfig可能会在为【参照引用的业务类型】选取值之后改变
                let referConfigValue =JSON.parse(form.referConfig);
                if(referConfigValue.referType != form.referBtmId && data.referType){
                    referConfigValue.referType = form.referBtmId || '';
                    referConfigValue.referTypeName = form.referBtmName || form.referBtmId;
                    this.referConfigOption.referConfig = JSON.stringify(referConfigValue);
                }
            },
                this.$set(data,"referConfig",this.referConfigOption.referConfig)
            }
            // 首次点击报错未定义
            this.$nextTick(()=>{
                this.$refs.referConfigFormDialog.isShowReferConfigForm = true;
                this.$refs.referConfigFormDialog.initPageData(data);
            })
        },
        methods: {
            clicktest(cell){
                
                //cell.$cellEdit = true;
            },
            // 切换当前活动的tabs
            handleClick(tab, event) {
                if(tab.index=='0'){
                    this.onloadAttrData(); 
                }else{
                    this.onloadselectReferConfigData();
                }
            },
            // 选择完参照配置之后点击保存按钮触发
            selectedListReferConfig(){
                //表单验证
                this.$refs.form.validate((valid, done, msg) => {
                    if (valid) {
                        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;
                        done()
                    } else {
                        for(let attr in msg) {
                            //console.log(msg[attr][0].message);
                            this.$message.warning(msg[attr][0].message);
                            break;
                        }
                        return false;
                    }
                })
            },
            /** 其实选取属性表格的默认数据不需要加载，
             但是弹窗打开会有表格错行问题所以需要在这调用doLayout方法*/
            onloadAttrData(){
                this.$nextTick(() => {
                    this.$refs.crudAttr.doLayout()
                })
            },
            // 属性选择表格中的移除按钮功能
            removeCurrentRow(row,condition){
                if(condition=='removeAttr'){
                    this.$delete(this.attrData, row.$index);
                    return;
                }
                this.$delete(this.addSearchCondtionData, row.$index);
            },
            // 该界面的数据进行初始化复原
            recoveryDataAndForm(condition){
                if(condition=='initForm'){
                    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;
                    }
        // 打开自定义参照配置或直接选择参照配置的提示框
        openTipsChooseOrCust(){
            this.$confirm('请选择参照配置的定义方式？','参照配置的方式', {
                distinguishCancelAndClose: true,
                closeOnClickModal: false,
                confirmButtonText: '自定义参照配置',
                cancelButtonText: '直接选择参照配置'
            })
            .then(() => {
                // 打开自定参照配置对话框
                this.$refs.referConfigFormDialog.isShowReferConfigForm = true;
            })
            .catch(action => {
                if (action === "cancel") {
                    // 打开直接选择参照配置对话框
                    this.$refs.referConfigCrudDialog.isShowReferConfigCrud = true;

                    console.log('this is open selectAttr');
                }
            },
            // 提交表单之前过滤掉空或不需要的表单数据
            filterForm(){
                const oldForm = this.form;
                let submittDefaultForm = [
                    'referType',
                    'textField',
                    'valueField',
                    'type', //参照窗口类型
                    'url',
                    'backPath',
                    'method',
                    'height',
                    'useFormKey',
                    'paramForFormKey',
                    'isMuti',
                    'mapFields', 
                ];
                let addArray = [];
                let newForm ={};
                // 根据不同类型过滤出不同的的表单属性
                if(oldForm.type == 'stand'){
                    addArray = ['referContent', 'displayTable'];
                } else if(oldForm.type == 'default' || oldForm.type == 'grid'){
                    addArray = ['limit', 'sortField', 'sortType'];
                } else if(oldForm.type == 'tree'){
                    addArray = [
                        "parentFieldName", 
                        'parentUsedField',
                        'parentValue', 
                        'loadType',
                        'onlyLeaf',
                        'sortField',
                        'sortType'
                    ];
                }
                submittDefaultForm = submittDefaultForm.concat(addArray);
                submittDefaultForm.forEach(item=>{
                    //console.log(item);
                    if(item == 'isMuti' || item == 'onlyLeaf' || oldForm[item] != '' || oldForm[item] != ''){
                      newForm = Object.assign(newForm,{[item]:oldForm[item]});  
                    }
                });
                // console.log(newForm);
                return newForm;
            },
            onloadselectReferConfigData(){
                this.$nextTick(() => {
                    this.$refs.selectReferConfigCrud.doLayout()
                })
            },
            
        }
    };
            });
        },
        /* 引用码段参照配置,子组件填完参照配置之后内容回显时调用 */
        echoReferConfig(content){
            this.$emit('setReferConfigValue', content) // 触发update:data将子组件值传递给父组件
        },

    },
}
</script>

<style>

    /* 提示文本出现的速度 */
    .el-tooltip__popper{
        width: 200px !important;
        transition-duration: 0.2s !important;
        transition-delay: 0.1s !important;
    }
    /* 提示文本消失时的速度 */
    .fel-fade-in-linear-leave-active,.el-fade-in-linear-leave-to{
        -webkit-transition:opacity .0s !important;
        transition:opacity .0s !important;
    }
    
</style>
</style>