264 lines
7.0 KiB
Vue
264 lines
7.0 KiB
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 type="card" 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>
|