createmodel-web/src/modules/createmodel/components/FileTable.vue

<template>
    <div class="left-wrapper">
        <div class="nb-table nb-table--bgc" style="height: calc(100vh - 150px);border-right: none;">
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="原始文件" name="first">1</el-tab-pane>
                <el-tab-pane label="生成文件" name="second">2</el-tab-pane>
            </el-tabs>
            <el-table  element-loading-text="数据加载中" element-loading-spinner="el-icon-loading"
                :data="fileLists.result" border size="mini" :height="tableHeight" highlight-current-row
                tooltip-effect="dark" ref="fileListsTable" @row-click="loadTableHeader"  style="width: 100%">
                <el-table-column prop="count" label="序号" width="50"></el-table-column>
                <el-table-column prop="filename" label="文件名称" :show-overflow-tooltip="true" min-width="120"></el-table-column>
                <el-table-column prop="generatedStr" label="类型" min-width="50"> </el-table-column>
            </el-table>
            <pagination :dataList="fileLists" :simple="true" :upParam="beforePayload" @loadMethod="loadFLTable"></pagination>
                    
        </div>
    </div>
</template>

<script>
    import pagination from "@/components/Pagination.vue";
    export default {
        components: {
            pagination
        },
        data() {
            return {
                beforePayload:{
                    page:1,
                    pageSize:20,
                    generated:'false'
                },
                tableHeight:680,
                activeName: 'second'
            };
        },
        computed: {
            fileLists: {
                get() {
                    let fileLists = this.$store.getters.getFilesList;
                    return fileLists;
                }
            }
        },
        mounted() {
            this.init()
            this.getTableHeight()
            window.addEventListener('resize', this.getTableHeight, false)
        },
        methods: {
            handleClick(tab) {
                let payload = {
                    page: 1,
                    pageSize: 20,
                    generated: 'false'
                }
                if(this.activeName === 'first'){
                    payload.generated = 'false'
                } else {
                    payload.generated = 'true'
                }
                
                this.loadFLTable(payload)
            },
            getTableHeight(){
                this.tableHeight = document.documentElement.clientHeight - 200
            },
            filterTag(value, row) {
                return row.tag === value;
            },
            init(){
                let payload = {
                    page:1,
                    pageSize:20,
                    generated:'false'
                }
                this.loadFLTable(payload)
            },
            loadFLTable(payload){
                const loading = this.$loading({
                    lock: true,
                    text: "请耐心等待，正在加载数据。。",
                    spinner: "el-icon-loading",
                    background: "rgba(0, 0, 0, 0.7)"
                });
                this.beforePayload = payload
                this.$store.dispatch("view_files_list", this.setModelId(payload)).then(data => {
                    loading.close();
                    if (data.code == 200) {
                        this.$store.commit("set_files_list", data);
                    } else {
                        this.$message({ type: "error",  message: data.message ? data.message : "加载失败" });
                    }
                });
            },
            loadTableHeader(row, column, cell, event) {
                this.$store.commit('set_current_fileobj', row) 
                let payload = {
                    page:1,
                    pageSize:20,
                    fileId:row.id
                }
                this.$store.commit('set_up_search_sort_params', payload); // 保存文件基础信心
                this.loadSearchSortData(payload) // 加载文件内容
                this.loadTableHeaderDataById(payload) // 加载文件headers
            },
            // 搜索排序加载文件
            loadSearchSortData(payload){
                const loading = this.$loading({
                    lock: true,
                    text: "请耐心等待，正在加载数据。。",
                    spinner: "el-icon-loading",
                    background: "rgba(0, 0, 0, 0.7)"
                });

                let upSearchSortParams = this.$store.getters.getUpSearchSortParams;
                let currentFile = this.$store.getters.getCurrentFile;

                payload.fileId = currentFile.id;
                payload.orders = upSearchSortParams.orders;
                payload.values = upSearchSortParams.values;
                payload.mode = upSearchSortParams.mode;
                
                this.beforePayload = payload
                this.$store.dispatch('view_data_by_query', this.setModelId(payload)).then(data => {
                    loading.close()
                    if (data.code == 200) {
                       this.$store.commit("set_file_content_by_id", data);
                    } else {
                        this.$message({ type: "error",  message: data.message ? data.message : "加载失败" });
                    }
                });
            },
            loadTableHeaderDataById(payload){
                const loading = this.$loading({
                    lock: true,
                    text: "请耐心等待。。",
                    spinner: "el-icon-loading",
                    background: "rgba(0, 0, 0, 0.7)"
                });
                let params = { fileId: payload.fileId }
                this.$store.commit('set_table_header', {})
                this.$store.dispatch("get_headers_by_id", this.setModelId(params)).then(data => {
                    loading.close();
                    if (data.code == 200) {
                        this.$store.commit('set_table_header', data.result.fields)
                    } else {
                        this.$message({ type: "error",  message: data.message ? data.message : "失败" });
                    }
                });
            }
        }
    };
</script>
<style scoped>
    .left-wrapper {
        padding-top: 0px;
    }
    .clear-hint {
        float: right;
        color: #e33f3f;
        font-size: 14px;
        line-height: 56px;
        margin-right: 180px;
    }
</style>