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

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,186 @@
<template>
     <el-dialog 
        :title="options.title"
        append-to-body
        :visible.sync="crudParams.isShowDialog"
        width="65%"
        destroy-on-close
        @close="clearTableRowSelection"
        style="height: 110vh; margin-top: -12vh; overflow-y: hidden">
        <avue-crud :option="crudParams.crudOption"
            :table-loading="crudParams.crudLoading"
            :data="crudParams.crudData"
            :ref="crudParams.ref"
            @row-click="selectedBtmTypeAttrRowClick"
            @selection-change="selectionBtmTypeAttrChange"
            @search-change="selectedBtmTypeAttrSrchChange"
            @search-reset="selectedBtmTypeAttrSrchReset">
        </avue-crud>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="selectedBtmTypeAttr">ç¡® å®š</el-button>
            <el-button @click="crudParams.isShowDialog = false">取 æ¶ˆ</el-button>
        </div>
    </el-dialog>
</template>

<script>
import { gridAttributesByBtmId } from "@/api/code/referBtmType";
export default {
    name: "referSelectBtmAttrDialog",
    props: {
        // å¯¹è¯æ¡†æ˜¾ç¤ºéšè—æŽ§åˆ¶
        visible: {
            type: "Boolean",
            default: false,
        },
        

    },
    watch: {
        // ç›‘听父组件传的窗口显示隐藏的值
        visible (){
            this.crudParams.isShowDialog = this.visible;
        }
    },
    data() {
        return {
            
            // è¡¨æ ¼ç›¸å…³å‚æ•°
            crudParams: {
                ref: "selectedAttrCrud",
                isShowDialog: this.visible,   //对话框显示控制
                crudLoading: false,
                crudOption: {
                    border: true,
                    height: '250px',
                    tip: false,
                    //searchShow: false,
                    index: true,
                    selection: true,
                    addBtn: false,
                    menu: false,
                    // refreshBtn: false,
                    searchShowBtn: false,
                    columnBtn: false,
                    dialogClickModal: false,
                    highlightCurrentRow: true,
                    searchMenuSpan: 5,
                    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'
                    }],
                },
                crudData: [],
                crudQuery: {},
                crudSelectedRowData: [],
            },   
            // è°ƒç”¨æ–¹ä¼ è¿‡æ¥çš„相关参数    
            options: {},

        }
    },
    methods: {

        // æ¸…空选中
        clearTableRowSelection(){
            this.crudParams.crudSelectedRow='';
            this.crudParams.crudSelectedRowData = '';
            this.$emit('update:visible', false);
        },

        // crud相关方法
        selectedBtmTypeAttrOnLoad(params){
            this.options = params;
            this.crudParams.crudLoading = true;
            // è°ƒç”¨api请求
            const data = {
                total: 2,
                data: [{
                    id: 'test',
                    name: '测试',
                    attrLength: 11,
                    attrType: '字符串'
                }, {
                    id: 'test1',
                    name: '测试1',
                    attrLength: 12,
                    attrType: '数字'
                }]
            }
            let param = {};
            // å¤šä¸ªconditionMap这样传参
            if(this.crudParams.crudQuery){
                Object.keys(crudParams.crudQuery).forEach(key=>{
                    param['conditionMap['+key+']'] = crudParams.crudQuery[key];
                });
            }
            gridAttributesByBtmId(1,-1,param).then(res=>{
                console.log(res);
            })
            this.crudParams.crudData = data.data;
            this.crudParams.crudLoading = false;
        },
        selectedBtmTypeAttrSrchChange(params, done){
            this.crudParams.crudQuery = params;
            this.selectedBtmTypeAttrOnLoad(this.options);
            done();
        },
        selectedBtmTypeAttrSrchReset(){
            this.crudParams.crudQuery = {};
            this.selectedBtmTypeAttrOnLoad(this.options);
        },
        selectedBtmTypeAttrRowClick(row){
            this.crudParams.crudSelectedRowData = row;
            this.$refs[this.crudParams.ref].toggleSelection();
            this.$refs[this.crudParams.ref].setCurrentRow(row);
            this.$refs[this.crudParams.ref].toggleRowSelection(row); //选中当前行
        },
        selectionBtmTypeAttrChange(list){
            this.crudParams.crudSelectedRowData = list;
            this.$refs[this.crudParams.ref].setCurrentRow(this.crudParams.crudSelectedRowData[list.length-1]);
            //当前选中行为空的时候就将码段管理表格数据置空
        },
        // é€‰ä¸­å±žæ€§ä¹‹åŽ
        selectedBtmTypeAttr(){
            if(this.crudParams.crudSelectedRowData.length<=0 || (this.options.condition == 'sortField' && this.crudParams.crudSelectedRowData.length!=1)) {
                this.$message.warning("请选择一条数据");
                return;
            }
            // æž„造回显父组件需要传递的相关参数
            let data = {
                selectedArrary: this.crudParams.crudSelectedRowData,
                condition: this.options.condition
            };
            this.$emit('echoSelectedAttr',data);
            this.crudParams.isShowDialog = false;
        },

    },

}
</script>

<style>

</style>