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"
              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-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>