jhprjv2/ruoyi-ui/src/views/project/costOutput/costOutputDrawer.vue

<template>
    <div class="project-cost-outpu-drawer" v-if="isOpen">
        <el-drawer v-if="isOpen" :visible.sync="isOpen" direction="rtl" size="60%" style="padding-left: 20px">
            <template slot="title">
                <div>{{ title + " 【计划节点】" }}</div>
                <right-toolbar @queryTable="loadData" :search="false">
                    <template slot="left">
                        <el-button type="primary" @click="doExport"
                            v-hasPermi="['project:build_node_data:export']">导出</el-button>
                        <el-popover placement="top-start" title="提示" trigger="hover" content="请选择导出的模板修改后的文件。">
                            <el-button type="success" slot="reference" @click="doImport"
                                v-hasPermi="['project:build_node_data:import']" style="margin: 0px 12px">导入</el-button>
                        </el-popover>
                    </template>
                </right-toolbar>
            </template>
            <el-tabs v-model="activeName">
                <el-tab-pane :label="'' + it.nodeText" :name="'' + it.id" :key="idx" v-for="(it, idx) in nodes">
                    <node-item :item="it" :showLabel="false" style="border-bottom: solid 1px #ccc"></node-item>
                    <div v-for="(it2, idx) in it.children" :key="idx" class="lvl-2">
                        <node-item :item="it2"></node-item>
                        <div v-for="(it3, idx) in it2.children" :key="idx" v-if="it2.children.length > 0"
                            style="padding-left: 40px" class="lvl-3">
                            <node-item :item="it3"></node-item>
                        </div>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </el-drawer>
        <!-- 用户导入对话框 -->
        <el-dialog :title="upload.title" :visible.sync="upload.open" width="600px" :close-on-click-modal="false"
            :close-on-press-escape="false" append-to-body
            :custom-class="'build-node-import-dlg file-' + upload.files.length">
            <el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers" :multiple="false"
                :on-change="uploadChange" :action="upload.url + '?updateSupport=' + upload.updateSupport"
                :disabled="upload.isUploading" :on-remove="uploadChange" :on-progress="handleFileUploadProgress"
                :on-success="handleFileSuccess" :auto-upload="false" drag>
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                <div class="el-upload__tip text-center" slot="tip">
                    <span>仅允许导入xls、xlsx格式文件。</span>
                    <el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline"
                        @click="doExport">下载模板</el-link>
                </div>
            </el-upload>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitFileForm">确 定</el-button>
                <el-button @click="upload.open = false">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>
  
<script>
import { listByProject } from "@/api/project/build_node_data.js";
import { getToken } from "@/utils/auth";
import NodeItem from "./nodeItem.vue";
export default {
    name: "RuoyiUiBuildNodeDrawer",
    components: {
        NodeItem,
    },
    data() {
        return {
            isOpen: false,
            prj: null,
            nodes: [],
            activeName: "",
            // 用户导入参数
            upload: {
                files: [],
                // 是否显示弹出层（用户导入）
                open: false,
                // 弹出层标题（用户导入）
                title: "",
                // 是否禁用上传
                isUploading: false,
                // 是否更新已经存在的用户数据
                updateSupport: 0,
                // 设置上传的请求头部
                headers: { Authorization: "Bearer " + getToken() },
                // 上传的地址
                url: process.env.VUE_APP_BASE_API + "/project/build_node_data/importData",
            },
        };
    },

    mounted() { },

    methods: {
        uploadChange(a, b, c) {
            this.upload.files = b;
        },
        // 文件上传中处理
        handleFileUploadProgress(event, file, fileList) {
            this.upload.isUploading = true;
        },
        // 文件上传成功处理
        handleFileSuccess(response, file, fileList) {
            this.upload.open = false;
            this.upload.isUploading = false;
            this.$refs.upload.clearFiles();
            this.$alert(
                "<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +
                response.msg +
                "</div>",
                "导入结果",
                { dangerouslyUseHTMLString: true }
            );
            this.loadData();
        },
        submitFileForm() {
            this.$refs.upload.submit();
        },
        doImport() {
            this.upload.title = `${this.prj.projectName}_项目计划节点导入`;
            this.upload.open = true;
        },
        doExport() {
            this.download(
                "project/build_node_data/export",
                {
                    projectId: this.prj.id,
                },
                `${this.prj.projectName}_项目计划节点.xlsx`
            );
        },
        loadData(init) {
            listByProject(this.prj.id).then((d) => {
                let tmps = (d.data || []).map((it) => {
                    it.lvl = it.baseBuildNode.nodeLvl;
                    it.parentLvl = it.lvl.substring(0, it.lvl.length - 2);
                    it.nodeText = it.baseBuildNode.nodeText;
                    it.file = this.$tryToJson(it.files, []);
                    return it;
                });
                let objs = tmps.filter((d) => d.parentLvl.length == 0);
                objs.forEach((it) => {
                    it.children = tmps.filter((item) => item.parentLvl == it.lvl);
                    it.children.forEach((item) => {
                        item.children = tmps.filter((item3) => item3.parentLvl == item.lvl);
                    });
                });
                this.nodes = objs;
                if (init) {
                    this.activeName = objs.length > 0 ? objs[0].id + "" : "";
                }
            });
        },
        show(prj) {
            this.prj = prj;
            this.title = prj.projectName;
            this.isOpen = true;
            this.loadData(true);
        },
    },
};
</script>
  
<style lang="scss" scoped>
.project-cost-outpu-drawer {
    ::v-deep .el-drawer {
        min-width: 1600px;
    }

    ::v-deep .el-drawer__header {
        margin-bottom: 0px;
    }

    ::v-deep .el-drawer__body {
        padding: 0px 24px;

        .el-form {
            overflow: hidden;

            .el-form-item {
                margin-bottom: 15px !important;
            }
        }

        .lvl-3 {
            .lbl-title {
                font-size: 12px;
            }
        }
    }
}
</style>