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

<template>
    <el-table
        row-key="id"
        :tree-props="{ children: 'children' }"
        :data="fileLists.result"
        border
        size="mini"
        :height="tableHeight"
        highlight-current-row
        tooltip-effect="dark"
        ref="fileListsTable"
        @row-click="(row, column, e) => loadTableHeader(row, column, e)"
        style="width: 100%; height: 100%;"
        class="multidimensional-table"
    >
        <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>
</template>

<script>
import pagination from "@/components/Pagination.vue";
import { uploadedGroupList } from "@/service/createmodel/apiLogin";

export default {
    components: {
        pagination
    },
    data() {
        return {
            beforePayload: {
                page: 1,
                pageSize: 20,
                generated: "false"
            },
            activeName: "first",
            isAliPay: true,
            // 要展开的行，数值的元素是row的key值
            expands: []
        };
    },
    computed: {
        fileLists: {
            get() {
                let fileLists = this.$store.getters.getFilesList;
                fileLists.result = fileLists.result.map((res, idx) => {
                    return {
                        ...res,
                        count: "",
                        filename: res.groupName
                    };
                });
                console.log(fileLists, "dddd");
                return fileLists;
            }
        },
        activeName1: {
            get() {
                return this.$store.getters.getFileActiveName;
            },
            set(val) {
                this.$store.commit("set_file_active_name", "first");
            }
        }
    },
    created() {
        let offsetHeight = 42;
        // let locationhref = window.location.href;
        // if(locationhref.indexOf('alipay') !== -1){
        //     this.isAliPay = true
        //     offsetHeight = 42
        // }
        this.tableHeight = this.getTableHeight(183 + offsetHeight);
    },
    mounted() {
        this.init();
    },
    methods: {
        handleClick(tab) {
            let payload = {
                page: 1,
                pageSize: 20,
                generated: "false"
            };
            if (this.activeName === "first") {
                payload.generated = "false";
            } else {
                payload.generated = "true";
            }
            this.$store.commit("set_file_active_name", payload.generated);
            this.loadFLTable(payload);
        },
        filterTag(value, row) {
            return row.tag === value;
        },
        init() {
            let payload = {
                page: 1,
                pageSize: 20,
                generated: "true"
            };
            // uploadedGroupList (this.setModelId(payload)).then(res=> {
            // debugger
            // })
            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_uploaded_group_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, e) {
            if (row.children && row.children.length > 0) {
                if (
                    e.currentTarget.firstElementChild.firstElementChild
                        .firstElementChild.tagName == "DIV"
                ) {
                    e.currentTarget.firstElementChild.firstElementChild.firstElementChild.click();
                } else {
                    e.currentTarget.firstElementChild.firstElementChild.firstElementChild.nextElementSibling.click();
                }
                return;
            }
            this.$store.commit("set_current_fileobj", row);
            let payload = {
                page: 1,
                pageSize: 20,
                fileId: row.id
            };
            this.$store.commit("set_current_temp_pagesize", 20);
            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;
            if(this.$store.state.fileStore.fileobj.filename.indexOf('对手透视') != -1){
                if(this.$store.state.fileStore.fileobj.filename.indexOf('数据分析-对手透视') != -1){
                    payload.deleteName = 2
                }else{
                    payload.deleteName = 1
                }
            }
            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);
                        this.loadDetailHeaders(payload.fileId);
                    } else {
                        this.$message({
                            type: "error",
                            message: data.message ? data.message : "失败"
                        });
                    }
                });
        },
        loadDetailHeaders(id) {
            let payload = {
                fileId: id
            };
            this.$store
                .dispatch("view_detail_ali_headers", this.setModelId(payload))
                .then(data => {
                    if (data.code == 200) {
                        let headResult = data.result;
                        let finalHeaders = {};
                        for (let v in headResult.fields) {
                            finalHeaders[v] = {
                                label: headResult.fields[v],
                                alignment: "left",
                                clickable: "none",
                                valueType: "none"
                            };
                            for (let k in headResult.mainProps) {
                                if (v == k) {
                                    finalHeaders[v] = {
                                        label: headResult.fields[v],
                                        alignment:
                                            headResult.mainProps[v].alignment,
                                        clickable:
                                            headResult.mainProps[v].clickable,
                                        valueType:
                                            headResult.mainProps[v].valueType
                                    };
                                }
                            }
                        }

                        this.$store.commit(
                            "set_current_ali_headers",
                            finalHeaders
                        );
                    } else {
                        let msg = data.message ? data.message : "加载失败";
                        console.log(msg);
                        //this.$message({ type: "error",  message: data.message ? data.message : "加载失败" });
                    }
                });
        }
    }
};
</script>
<style scoped>
.excel-btns {
    border-top: 2px outset wheat;
    border-bottom: 2px outset wheat;
    padding: 5px 10px;
    text-align: right;
}

.left-files {
    height: 100%;
    padding-top: 0px;
    height: calc(100vh - 110px);
    border-right: none;
    background: #032d58;
    min-height: 700px;
}
</style>

<style>
.multidimensional-table .el-table__row--level-1 .cell {
    padding-left: 25px;
}
.multidimensional-table [class*="el-table__row--level"] .el-table__expand-icon {
    color: #fff;
}
</style>