240 lines
5.7 KiB
Vue
240 lines
5.7 KiB
Vue
<template>
|
||
<Card title="归档文件">
|
||
<div class="down-tree">
|
||
<el-tree
|
||
style="color: #66d3d8"
|
||
:data="data"
|
||
:props="defaultProps"
|
||
accordion
|
||
@node-click="handleNodeClick"
|
||
>
|
||
<span class="custom-tree-node" slot-scope="{ node, data }">
|
||
<span>
|
||
<img src="~@/assets/images/zjsj/Group2.png" alt />
|
||
<span class="textBox"> {{ node.label }} </span>
|
||
</span>
|
||
</span>
|
||
</el-tree>
|
||
</div>
|
||
</Card>
|
||
</template>
|
||
|
||
<script>
|
||
import Card from "../components/Card.vue";
|
||
|
||
export default {
|
||
components: { Card },
|
||
data() {
|
||
return {
|
||
data: [
|
||
{
|
||
label: "中建四局金融城东区AT091429地块项目",
|
||
children: [
|
||
{
|
||
label: "总体文件",
|
||
children: [
|
||
{
|
||
label: "政府主管部门批文",
|
||
},
|
||
{
|
||
label: "项目基本信息文件",
|
||
},
|
||
{
|
||
label: "往来函件",
|
||
},
|
||
{
|
||
label: "会议纪要",
|
||
},
|
||
],
|
||
},
|
||
{
|
||
label: "前期资料",
|
||
children: [
|
||
{
|
||
label: "选址资料",
|
||
},
|
||
{
|
||
label: "预可行性研究报告",
|
||
},
|
||
{
|
||
label: "可行性研究报告",
|
||
},
|
||
{
|
||
label: "可行性研究报告",
|
||
},
|
||
{
|
||
label: "项目策划报告",
|
||
},
|
||
{
|
||
label: "规划设计",
|
||
},
|
||
{
|
||
label: "工程报建",
|
||
},
|
||
],
|
||
},
|
||
{
|
||
label: "设计管理文件",
|
||
children: [
|
||
{
|
||
label: "地质勘察资料",
|
||
},
|
||
{
|
||
label: "方案设计",
|
||
},
|
||
{
|
||
label: "初步设计",
|
||
},
|
||
{
|
||
label: "施工图设计",
|
||
},
|
||
{
|
||
label: "招投标文件",
|
||
},
|
||
{
|
||
label: "合同管理文件",
|
||
},
|
||
],
|
||
},
|
||
{
|
||
label: "施工管理文件",
|
||
children: [
|
||
{
|
||
label: "项目管理资料",
|
||
},
|
||
{
|
||
label: "招投标资料",
|
||
},
|
||
{
|
||
label: "施工深化设计",
|
||
},
|
||
{
|
||
label: "合同管理",
|
||
},
|
||
{
|
||
label: "进度管理",
|
||
},
|
||
{
|
||
label: "成本管理",
|
||
},
|
||
{
|
||
label: "BIM实施成果管理",
|
||
},
|
||
{
|
||
label: "质量管理",
|
||
},
|
||
{
|
||
label: "施工技术",
|
||
},
|
||
{
|
||
label: "设备与材料",
|
||
},
|
||
{
|
||
label: "理单位资料",
|
||
},
|
||
{
|
||
label: "安全管理",
|
||
},
|
||
],
|
||
},
|
||
{
|
||
label: "竣工文件",
|
||
children: [
|
||
{
|
||
label: "工程竣工总结文件",
|
||
},
|
||
{
|
||
label: "单位工程质量验收记录",
|
||
},
|
||
{
|
||
label: "工程质量保修书",
|
||
},
|
||
{
|
||
label: "结算文件",
|
||
},
|
||
{
|
||
label: "声像、电子档案",
|
||
},
|
||
{
|
||
label: "项目后评估文件",
|
||
},
|
||
],
|
||
},
|
||
],
|
||
},
|
||
],
|
||
defaultProps: {
|
||
children: "children",
|
||
label: "label",
|
||
},
|
||
};
|
||
},
|
||
methods: {
|
||
handleNodeClick(data) {
|
||
console.log(data);
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.down-tree {
|
||
height: 400px;
|
||
|
||
display: block;
|
||
|
||
overflow-y: scroll;
|
||
margin: 20px 0 0 10px;
|
||
}
|
||
|
||
::v-deep .el-tree-node__content {
|
||
margin-top: 20px;
|
||
}
|
||
::v-deep .el-tree-node__content > .el-tree-node__expand-icon {
|
||
margin-top: 5px;
|
||
}
|
||
::v-deep .el-tree .el-icon svg {
|
||
//原有的箭头 去掉
|
||
display: none !important;
|
||
height: 0;
|
||
width: 0;
|
||
}
|
||
::v-deep .el-tree-node__expand-icon {
|
||
//引入的图标（图片）size大小 => 树节点前的预留空间大小
|
||
font-size: 16px;
|
||
}
|
||
|
||
//图标是否旋转，如果是箭头类型的，可以设置旋转90度。如果是两张图片，则设为0
|
||
::v-deep .el-tree .el-tree-node__expand-icon.expanded {
|
||
-webkit-transform: rotate(0deg);
|
||
transform: rotate(0deg);
|
||
}
|
||
::v-deep .el-tree .el-tree-node__expand-icon:before {
|
||
// 未展开的节点
|
||
background: url("~@/assets/images/zjsj/Group.png") no-repeat 0 1px;
|
||
content: "";
|
||
display: block;
|
||
width: 18px;
|
||
height: 18px;
|
||
}
|
||
|
||
::v-deep .el-tree .el-tree-node__expand-icon.expanded:before {
|
||
//展开的节点
|
||
background: url("~@/assets/images/zjsj/Group.png") no-repeat 0 1px;
|
||
content: "";
|
||
display: block;
|
||
width: 18px;
|
||
height: 18px;
|
||
margin-top: 4px;
|
||
}
|
||
|
||
::v-deep .el-tree .is-leaf.el-tree-node__expand-icon::before {
|
||
//叶子节点（不显示图标）
|
||
display: block;
|
||
background: none !important;
|
||
content: "";
|
||
width: 18px;
|
||
height: 18px;
|
||
}
|
||
</style>
|