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

ÎļþÃû´Ó Source/UBCS-WEB/src/components/code-dialog-page/referConfigDialog.vue ÐÞ¸Ä
@@ -3,139 +3,117 @@
    <el-dialog
      title="参照配置"
      append-to-body
      :visible.sync="isShowReferConfig"
      :visible.sync="isShowReferConfigForm"
      width="90%"
      id="refer-config"
      id="refer-config-form"
      @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 #referTypeName="{disabled,size}">
                                <el-input :disabled="disabled"
                                    :size="size"
                                    v-model="form.referTypeName"
                                    ref="referTypeName" 
                                    placeholder="请选择 å‚照的业务类型"
                                    prefix-icon="el-icon-search"
                                    readonly="true"
                                    @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>
                    </el-row>
                    <el-row v-show="form.type=='default' || form.type=='grid'">
                        <avue-crud
                            ref="crudAttr"
                            class="crud-attr"
                            :option="attrOption"
                            @cell-click="clickAttrEdit"
                            :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="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 style="margin-top: 10px">
                        <avue-crud
                            ref="crudAddCondition"
                            :option="addSearchCondtionOption" 
                            @cell-click="clickAddSearchCondtionEdit"
                            :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="openSelectionTable('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="selectReferConfigOption"
                        :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 style="width: 100%; overflow-y: auto; height: 70vh">
            <el-row>
                <avue-form ref="form" :option="formOption" v-model="form" class="referTypeForm">
                    <template #referTypeName="{disabled,size}">
                        <el-input :disabled="disabled"
                            :size="size"
                            v-model="form.referTypeName"
                            ref="referTypeName" 
                            placeholder="请选择 å‚照的业务类型"
                            prefix-icon="el-icon-search"
                            readonly="true"
                            @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>
            </el-row>
            <el-row v-show="form.type=='default' || form.type=='grid'">
                <avue-crud
                    ref="crudAttr"
                    class="crud-attr"
                    :option="attrOption"
                    @cell-click="clickAttrEdit"
                    :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="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 style="margin-top: 10px">
                <avue-crud
                    ref="crudAddCondition"
                    :option="addSearchCondtionOption" 
                    @cell-click="clickAddSearchCondtionEdit"
                    :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="openSelectionTable('addSearchCondition')">
                            æ·»åŠ æŸ¥è¯¢æ¡ä»¶
                        </el-button>
                    </template>
                </avue-crud>
            </el-row>
        </div>

        <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>
            <el-button @click="isShowReferConfigForm = false">取 æ¶ˆ</el-button>
        </div>

        <el-dialog title="为【参照的业务类型】选取值"
@@ -159,7 +137,7 @@
                <template #radio="{row}">
                    <el-radio v-model="referBtmTypeSelectRow"
                        :label="row.$index">
                        -
                        &nbsp;
                    </el-radio>
                </template>
            </avue-crud>
@@ -189,7 +167,7 @@
                <template #radio="{row}">
                    <el-radio v-model="sortFieldSelectRow"
                        :label="row.$index">
                        -
                        &nbsp;
                    </el-radio>
                </template>
            </avue-crud>
@@ -246,47 +224,18 @@
</template>
    
<script>
    import func from "@/util/func";
    export default {
        name: "referConfigDialog",
        props: {
            //本场景变量
            thisSceneTableData: {
                type: Array,
            },
        },
        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,  // ç¬¬ä¸€å±‚对话框显示隐藏控制
                isShowReferConfigForm: false,  // ç¬¬ä¸€å±‚对话框显示隐藏控制
                referTypeIsReadOnly: false,
                // è¡¨å•å¯¹è±¡
                form: {
@@ -459,80 +408,6 @@
                        }
                    ]
                },

                selectReferConfigOption: {
                    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: {},

                //为【参照的业务类型】选取值对话框
                selectionReferBtmTypeOption: {
@@ -1079,32 +954,6 @@
                                    //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',
@@ -1122,11 +971,10 @@
                    ]
                }
            },
            
        },
        mounted() {
            // éº»çš„这个地方调死我了
            this.element = document.getElementById('refer-config');
            this.element = document.getElementById('refer-config-form');
            this.element.addEventListener("click", (e) => {
                //<table cellspacing="0" cellpadding="0" border="0" class="el-table__body" style="width: 911px;">
                //console.log(e.target);
@@ -1162,10 +1010,10 @@
                this.preClickAttrRow = row;
            },
            // å±žæ€§è¡¨æ ¼è¡Œç¼–辑失去焦点时保存方法
            updateAttrBlur(value){
            // updateAttrBlur(value){
                //console.log(this.attrData[0]);
                
            },
            // },
            // å•å‡»è¡¨æ ¼å®žçŽ°è¡¨æ ¼è¡Œç¼–辑
            clickAddSearchCondtionEdit(row, column, event){
                if(this.preClickAddSearchConditionRow && this.preClickAddSearchConditionRow != row){
@@ -1177,21 +1025,20 @@
            },
            //上一个页面已经选中参照应用的业务类型的情况，和上一次已经配置过参照配置的情况下进行页面初始化渲染
            initPageData(val){
                let value = JSON.parse(val);
                if(value != null || value != 'undefined' ){
                    this.form = value;
                //console.log(val);
                if(func.notEmpty(val.referConfig)){
                    this.form = JSON.parse(val.referConfig);
                    //console.log(val);
                    this.referTypeIsReadOnly = true;
                    return;
                }
                if(func.notEmpty(val.referType)){
                    this.form.referTypeName = val.referTypeName;
                    this.form.referType = val.referType;
                    this.referTypeIsReadOnly = true;
                    return;
                }
                //console.log(localStorage.getItem("userId"));
            },
            // åˆ‡æ¢å½“前活动的tabs
            handleClick(tab, event) {
                if(tab.index=='0'){
                    this.onloadAttrData(); 
                }else{
                    //this.onloadSelectReferConfigData();
                }
            },
            // é€‰æ‹©å®Œå‚照配置之后点击保存按钮触发
            selectedListReferConfig(){
@@ -1202,7 +1049,7 @@
                        let submitForm = this.filterForm();
                        //console.log(submitForm);
                        this.$emit('echoReferConfig', submitForm) // è§¦å‘update:data将子组件值传递给父组件
                        this.isShowReferConfig = false;
                        this.isShowReferConfigForm = false;
                        done()
                    } else {
                        for(let attr in msg) {
@@ -1214,17 +1061,9 @@
                    }
                })
            },
            //从缓存中那form表单对象
            getLocalStoregeForm(){
                localStorage.getItem("userId");

            },
            /** å…¶å®žé€‰å–属性表格的默认数据不需要加载，
             ä½†æ˜¯å¼¹çª—打开会有表格错行问题所以需要在这调用doLayout方法*/
            onloadAttrData(){
                this.$nextTick(() => {
                    this.$refs.crudAttr.doLayout()
                })
                this.attrData = [
                    {
                        field: 'id',
@@ -1248,6 +1087,9 @@
                        $cellEdit: false
                    }
                ];
                this.$nextTick(() => {
                    this.$refs.crudAttr.doLayout()
                })
            },
            // å±žæ€§é€‰æ‹©è¡¨æ ¼ä¸­çš„移除按钮功能
            removeCurrentRow(row,condition){
@@ -1353,30 +1195,6 @@
             */
            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){