wanda-adm/src/views/manage/build/index.vue

<template>
    <div id="file_moddle_manage" v-loading="loading">
        <!-- 左边模型文件夹列表 -->
        <div class="col_left">
            <div class="grid-content grid-left">
                <el-card class="box-card" :body-style="{ padding: '0px', height: '100%' }">
                    <div class="top_hand left_top_hand">
                        <div class="folder-box">
                            <el-tooltip class="item" effect="dark" content="新建建筑" placement="top-start">
                                <el-button icon="el-icon-plus" size="small" @click="addBuild"></el-button>
                            </el-tooltip>
                            <el-tooltip class="item" effect="dark" content="删除建筑" placement="top-start">
                                <el-button icon="el-icon-minus" size="small" @click="deleteBuild"></el-button>
                            </el-tooltip>
                            <el-tooltip class="item" effect="dark" content="编辑建筑" placement="top-start">
                                <el-button @click="updateBuild" icon="el-icon-edit-outline" size="small"></el-button>
                            </el-tooltip>
                        </div>
                    </div>
                    <div class="folder-list">
                        <div class="head">建筑</div>
                        <ul class="lists">
                            <el-scrollbar style="height: 100%">
                                <li
                                    @click="openFolder(index, item)"
                                    v-for="(item, index) in navigationBuild"
                                    :key="index"
                                    :class="[choiceIndex === index + 1 ? 'li-active' : '']"
                                >
                                    <i
                                        :class="[choiceIndex === index + 1 ? 'el-icon-folder-opened' : 'el-icon-folder', 'icon_font']"
                                        width="40"
                                        height="40"
                                    ></i>
                                    <span :title="item.Name">{{ item.Name }}</span>
                                </li>
                            </el-scrollbar>
                        </ul>
                    </div>
                </el-card>
            </div>
        </div>
        <!-- 右边文件表格 -->
        <div class="col_right">
            <el-card class="box-card" :body-style="{ padding: '0px', height: '100%' }">
                <!-- 顶部操作栏 -->
                <div class="top_hand right_top_hand">
                    <el-button size="small" @click="addFloorFileVisible = true">添加楼层模型文件</el-button>
                    <el-button size="small" @click="queryFloorFile(currentFolderId)">刷新</el-button>
                </div>
                <!-- 列表 -->
                <floor-table
                    v-loading="tableLoading"
                    ref="floorTable"
                    :tableData="tableData"
                    :modelFolderName="currentFolderName"
                    @openModelLog="queryModelLog"
                    @replaceModel="repliaceModel"
                ></floor-table>
            </el-card>
        </div>
        <!-- 弹窗 开始-->

        <!-- 模型日志弹窗 -->
        <!-- <modelLog
            :modelLogVisible="modelLogVisible"
            :modelFolderName="currentFolderName"
            @deleteFinish="updataLog"
            @CloseModelLogDia="modelLogVisible = false"
            :logData="logData"
        ></modelLog> -->
        <!-- 替换模型弹窗 -->
        <replice-model
            :repliceModelVisible="repliceModelVisible"
            @closeReplaceModelDia="repliceModelVisible = false"
            :replaceModelItem="replaceModelItem"
            @uploadModelFile="uploadModelFile"
        ></replice-model>
        <!-- 新增楼层 -->
        <add-floor-dialog
            :addFloorFileVisible="addFloorFileVisible"
            :floorList="tableData"
            :FolderName="currentFolderName"
            :FolderId="currentFolderId"
            @closeAddFloorDia="addFloorFileVisible = false"
            @uploadModelFile="uploadModelFile"
        ></add-floor-dialog>
        <!-- 新增文件夹名称 -->
        <!-- <addFolder
            :addFolderVisible="addFolderVisible"
            @closeAddFolderVisible="
                addFolderVisible = false;
                folderName = '';
            "
            :folderName="folderName"
            @getfolderModel="queryModel"
        ></addFolder> -->
        <!-- 编辑文件夹名字 -->
        <!-- <changeFolderName
            :currentFolderId="currentFolderId"
            :changeFolderNameVisible="changeFolderNameVisible"
            :folderName="folderName"
            @finishChangeFolderName="queryModel"
            @closeChangeFolderVisible="
                changeFolderNameVisible = false;
                folderName = '';
            "
        ></changeFolderName> -->
        <!-- 弹窗 结束-->
    </div>
</template>

<script lang="ts">
import { Vue, Component, Watch } from "vue-property-decorator";
import { UserModule } from "@/store/modules/user";
import { queryModel, queryFloorList } from "@/api/modelapi";
import Bus from "@/utils/bus";
import FloorTable from "./components/FloorTable/index.vue"; //右侧list表
import AddFloorDialog from "./components/AddFloorDialog/index.vue"; //新增楼层弹窗
import RepliceModel from "./components/RepliceModel/index.vue"; //替换模型弹窗

@Component({
    name: "buildFloor",
    components: {
        FloorTable,
        AddFloorDialog,
        RepliceModel,
    },
})
export default class extends Vue {
    private addFolderVisible = false; // 是否显示新增文件夹弹窗
    private addFloorFileVisible = false; // 是否显示增加楼层文件弹窗
    private repliceModelVisible = false; // 是否显示替换楼层模型弹窗
    private modelLogVisible = false; // 是否显示模型日志弹窗
    private changeFolderNameVisible = false; // 是否显示编辑文件夹弹窗

    private navigationBuild: any[] = []; // 文件夹模型list
    private choiceIndex = 0; // 当前文件夹index
    private currentFolderId = ""; // 当前选择的文件夹id
    private currentFolderName = ""; // 当前选择文件夹的Name
    private tableData = []; // 楼层列表
    private loading = false; // 加载loading
    private tableLoading = false; // 表格加载loading

    private replaceModelItem = null; // 替换文件的item

    private get projectId(): string {
        return UserModule.projectId;
    }

    mounted() {
        this.queryModel();
        Bus.$on("modelStatusChange", () => {
            this.queryFloorFile(this.currentFolderId);
        });
    }

    /**
     * 打开模型文件夹
     */
    private openFolder(index: number, item: any): void {
        this.choiceIndex = index + 1;
        this.currentFolderId = item.Id;
        this.currentFolderName = item.Name;
        // 获取模型文件夹对应得楼层文件
        this.queryFloorFile(this.currentFolderId);
    }

    /**
     * 新增建筑
     */
    private addBuild(): void {
        return;
    }

    /**
     * 删除建筑
     */
    private deleteBuild(): void {
        return;
    }

    /**
     * 维护建筑
     */
    private updateBuild(): void {
        return;
    }

    /**
     * 查询所有文件夹模型
     */
    private async queryModel(): Promise<void> {
        this.navigationBuild = [];
        this.loading = true;
        const res = await queryModel({ Orders: "Name asc" });
        this.navigationBuild = res.Content;
        this.loading = false;
        if (this.navigationBuild.length) {
            //默认选择第一个文件夹
            this.choiceIndex = 1;
            this.currentFolderName = this.navigationBuild[0].Name;
            this.currentFolderId = this.navigationBuild[0].Id;
            this.queryFloorFile(this.currentFolderId);
        } else {
            this.tableData = [];
        }
    }

    /**
     * 查询建筑下的楼层
     *
     * @info: 状态显示说明
     * 0: 上传中（上传的用户可操作：中止）
     * 1: 等待检查
     * 10: 模型检查中
     * 11: 未通过检查
     * 2、20、21、3、31: 正常（所有用户可操作：下载、查看历史）
     * 4: 正常（所有用户可操作：下载、替换、查看历史）
     *
     * @param currentFolderId    当前选中的建筑Id
     */
    private async queryFloorFile(currentFolderId: string): Promise<void> {
        if (currentFolderId) {
            this.tableData = [];
            this.tableLoading = true;
            let params = {
                Filters: `FolderId='${currentFolderId}'`,
                PageNumber: 1,
                PageSize: 1000,
            };
            const res = await queryFloorList(params);
            this.tableData = res.Content;
            this.tableLoading = false;
        }
    }

    /**
     * 打开替换文件模型
     */
    private repliaceModel(item: any): void {
        this.replaceModelItem = item;
        this.repliceModelVisible = true;
    }

    /**
     * 上传模型文件
     */
    private uploadModelFile(data: any) {
        Bus.$emit(
            "openUploader",
            {
                uploadId: data.uploadId,
                modelId: data.modelId,
                systemId: "revit", //系统名称
                secret: "63afbef6906c342b", //系统密码
            },
            data.file.raw
        );
        this.queryFloorFile(this.currentFolderId);
    }

    /**
     * 查看模型日志
     */
    private queryModelLog(item: any): void {
        console.log(item);
    }

    @Watch("projectId")
    onProjectIdChanged() {
        this.queryModel();
    }
}
</script>

<style lang="scss" scoped>
#file_moddle_manage {
    width: 100%;
    height: 100%;
    display: flex;
    overflow: hidden !important;
    .col_left {
        width: 280px;
        height: 100%;
    }
    .col_right {
        width: calc(100% - 280px);
        height: 100%;
    }
    .grid-content {
        height: 100%;
    }
    .box-card {
        height: 100%;
    }
    .grid-left {
        padding-right: 10px;
        box-sizing: border-box;
    }
    // 顶部
    .top_hand {
        // height: 60px;
        width: 100%;
        padding: 10px;
        box-sizing: border-box;
        display: flex;
    }
    .left_top_hand {
        align-items: center;
        justify-content: space-between;
        .folder-box {
            ::v-deep .el-button--small {
                padding: 8.5px 9px;
            }
        }
    }
    // 左侧文件夹列表
    .folder-list {
        width: 100%;
        height: calc(100% - 52px);
        .head {
            height: 41px;
            width: 100%;
            padding-left: 10px;
            box-sizing: border-box;
            background: #d9d9d9;
            color: #2b2b2b;
            display: flex;
            justify-content: left;
            align-items: center;
            font-weight: bold;
            span {
                font-weight: normal;
                font-size: 12px;
                color: #606266;
            }
        }
        .lists {
            width: 100%;
            margin-top: 10px;
            height: calc(100% - 51px);
            overflow-y: auto;
            li {
                height: 42px;
                display: flex;
                justify-content: left;
                align-items: center;
                padding-left: 20px;
                box-sizing: border-box;
                color: #555;
                cursor: pointer;
                span {
                    padding-left: 6px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
            }
            li:hover {
                background-color: #f5f7fa;
                color: #000;
            }
            .li-active {
                background-color: #f5f7fa;
                color: #000;
            }
        }
    }
    .icon_font {
        font-size: 18px;
    }
}
::v-deep .el-scrollbar__wrap {
    overflow-x: hidden;
}
</style>