jhprjv2/ruoyi-ui/src/views/project/surBuildNode/buildNodeDrawer.vue

<template>
    <div class="project-build-node-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">导出</el-button>
                        <el-popover placement="top-start" title="提示" trigger="hover" content="请选择导出的模板修改后的文件。">
                            <el-button  type="success" slot="reference" @click="doImport" 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-build-node-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>
<style lang="scss">
.build-node-import-dlg{
    .el-upload{
        width:100%;
        .el-upload-dragger{
            width: 100%;
        }
    }
    &.file-1{
        .el-upload{
            display: none;
        }
        .el-upload__tip{
            display: none;
        }
    }
}
</style>