Skip to content

任超 / js.CadastralSystem

Go to a project
Toggle navigation
Toggle navigation pinning
0e9a5c1d by 杨威
Options

新增左侧树目录及部分样式修改

1 parent 1e902b9e
Expand all
Inline Side-by-side
Showing 7 changed files with 553 additions and 0 deletions
<?xml version="1.0" encoding="UTF-8"?>
<svg width="17px" height="17px" viewBox="0 0 17 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 55.1 (78136) - https://sketchapp.com -->
<title>icon_files_collapse_</title>
<desc>Created with Sketch.</desc>
<g id="报告工作站" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="1--报告工作站_书写报告" transform="translate(-100.000000, -217.000000)">
<g id="模板" transform="translate(80.000000, 51.000000)">
<g id="分组" transform="translate(20.000000, 135.000000)">
<g id="icon_files_collapse_" transform="translate(0.000000, 31.000000)">
<rect id="矩形-copy-18" fill="#D8D8D8" opacity="0" x="0" y="0" width="17" height="17"></rect>
<path d="M5,10 L12,10 L12,11 L5,11 L5,10 Z M16,4 L16,3 L6,3 L6,2 L6,1 L1,1 L1,4 L16,4 Z M16,5 L1,5 L1,16 L16,16 L16,5 Z M17,16 L17,17 L0,17 L0,16 L-3.85312697e-16,1 L0,0 L7,0 L7,1 L7,2 L17,2 L17,3 L17,16 Z" id="合并形状" fill="#7FB9A2"></path>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<svg width="17px" height="17px" viewBox="0 0 17 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 55.1 (78136) - https://sketchapp.com -->
<title>icon_file_default_</title>
<desc>Created with Sketch.</desc>
<g id="报告工作站" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="1--报告工作站_书写报告" transform="translate(-127.000000, -246.000000)">
<g id="模板" transform="translate(80.000000, 51.000000)">
<g id="分组" transform="translate(20.000000, 135.000000)">
<g id="icon_file_default_" transform="translate(27.000000, 60.000000)">
<rect id="矩形" fill="#D8D8D8" opacity="0" x="0" y="0" width="17" height="17"></rect>
<path d="M16,4 L16,3 L6,3 L6,2 L6,1 L1,1 L1,4 L16,4 Z M16,5 L1,5 L1,16 L16,16 L16,5 Z M17,16 L17,17 L0,17 L0,16 L-3.85312697e-16,1 L0,0 L7,0 L7,1 L7,2 L17,2 L17,3 L17,16 Z" id="合并形状" fill="#C3C5C8"></path>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<svg width="17px" height="17px" viewBox="0 0 17 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 55.1 (78136) - https://sketchapp.com -->
<title>icon_files_expand_</title>
<desc>Created with Sketch.</desc>
<g id="报告工作站" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="1--报告工作站_书写报告" transform="translate(-100.000000, -187.000000)">
<g id="模板" transform="translate(80.000000, 51.000000)">
<g id="分组" transform="translate(20.000000, 135.000000)">
<g id="icon_files_expand_" transform="translate(0.000000, 1.000000)">
<rect id="矩形-copy-17" fill="#D8D8D8" opacity="0" x="0" y="0" width="17" height="17"></rect>
<path d="M8,10 L8,7 L9,7 L9,10 L12,10 L12,11 L9,11 L9,14 L8,14 L8,11 L5,11 L5,10 L8,10 Z M16,4 L16,3 L6,3 L6,2 L6,1 L1,1 L1,4 L16,4 Z M16,5 L1,5 L1,16 L16,16 L16,5 Z M17,16 L17,17 L0,17 L0,16 L-3.85312697e-16,1 L0,0 L7,0 L7,1 L7,2 L17,2 L17,3 L17,16 Z" id="合并形状" fill="#C3C5C8"></path>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<svg width="17px" height="17px" viewBox="0 0 17 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 55.1 (78136) - https://sketchapp.com -->
<title>icon_file_focus_</title>
<desc>Created with Sketch.</desc>
<g id="报告工作站" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="1--报告工作站_书写报告" transform="translate(-127.000000, -276.000000)">
<g id="模板" transform="translate(80.000000, 51.000000)">
<g id="分组" transform="translate(20.000000, 135.000000)">
<g id="icon_file_focus_" transform="translate(27.000000, 90.000000)">
<rect id="矩形" fill="#D8D8D8" opacity="0" x="0" y="0" width="17" height="17"></rect>
<path d="M16,4 L16,3 L6,3 L6,2 L6,1 L1,1 L1,4 L16,4 Z M16,5 L1,5 L1,16 L16,16 L16,5 Z M17,16 L17,17 L0,17 L0,16 L-3.85312697e-16,1 L0,0 L7,0 L7,1 L7,2 L17,2 L17,3 L17,16 Z" id="合并形状" fill="#7FB9A2"></path>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
<template>
<div class="tree_item_box">
<div
class="column-start-start linkLine_default"
v-for="(item,s_index) in list"
:key="s_index"
:class="{
'linkLine_first': s_index===0&list.length>1,
'linkLine_half_top': s_index===0&&list.length===1,
'linkLine_last': (s_index===(list.length-1)&&s_index!==0),
'third_layer':!item.children,
'second_layer':item.children
}"
>
<div
class="row-flex-start basic_banner"
@click="itemClick(item)"
:class="{
'active_color': item.expand
}"
>
<div
v-if="item.children"
class="reTree_icon"
:style="{height: (size||14*1.2) +'px',width: (size||14*1.2) +'px'}"
:class="{
'reTree_default_icon': item.children.length===0,
'reTree_collapse_icon': item.expand && item.children.length>0,
'reTree_expand_icon': !item.expand && item.children.length>0,
}"
></div>
<div
class="layer_text nowrap"
:class="{
'active_color': item.expand
}"
>{{item.label}}</div>
</div>
<line-item
:list="item.children"
v-on="$listeners"
:size="size"
v-if="item.expand&&item.children&&item.children.length>0"
></line-item>
</div>
</div>
</template>
<script>
export default {
name: "line-item",
props: {
list: {
type: Array,
default: () => {
return [];
}
},
size: {
type: Number,
default: 14
}
},
methods: {
itemClick(item) {
item.expand = !item.expand;
this.$emit("itemClick", item);
if (!item.children) {
this.$emit("valClick", item);
}
}
}
};
</script>
<style lang='less'>
.content {
height: 100%;
width: 100%;
}
.column-start-center {
display: flex;
display: -webkit-flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
}
.row-flex-start {
display: flex;
display: -webkit-flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
.nowrap {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.active_color {
color: #ffffff;
}
.reTree_icon {
width: 17px;
height: 17px;
margin-right: 10px;
}
.no_icon {
width: 17px;
height: 17px;
}
.tree_item_box {
position: relative;
width: 100%;
cursor: pointer;
}
.basic_layer {
width: 100%;
position: relative;
color: #FFFFFF;
cursor: pointer;
.layer_text {
flex: 1;
}
}
.first_vertical_line {
content: "";
position: absolute;
width: 1px;
left: 6px;
top: 17px;
background: #c3c5c8;
}
.basic_banner {
position: relative;
width: 100%;
padding-bottom: 13px;
}
.second_layer {
position: relative;
width: 100%;
cursor: pointer;
padding-left: 25px;
}
.third_layer {
position: relative;
// padding-bottom: 15px;
width: 100%;
padding-left: 40px;
color: #FFFFFF;
}
.second_layer::before {
content: "";
position: absolute;
height: 1px;
width: 16px;
left: 9px;
top: 9px;
background: #c3c5c8;
}
.third_layer::before {
content: "";
position: absolute;
height: 1px;
width: 22px;
left: 9px;
top: 9px;
background: #c3c5c8;
}
.linkLine_default::after {
content: "";
position: absolute;
height: 100%;
width: 1px;
left: 9px;
top: 0px;
background: #c3c5c8;
}
.linkLine_first::after {
content: "";
position: absolute;
/* 为了触顶 */
top: -14px;
height: calc(100% + 14px);
width: 1px;
left: 9px;
background: #c3c5c8;
}
// 上半截
.linkLine_half_top::after {
content: "";
position: absolute;
height: 24px;
top: -14px;
width: 1px;
left: 9px;
background: #c3c5c8;
}
.linkLine_last::after {
content: "";
position: absolute;
height: 9px;
width: 1px;
left: 9px;
top: 0px;
background: #c3c5c8;
}
.reTree_collapse_icon {
background: url("../../assets/images/reTree_collapse_.svg") no-repeat center center;
background-size: contain;
}
.reTree_default_icon {
background: url("../../assets/images/reTree_default_.svg") no-repeat center center;
background-size: contain;
}
.reTree_expand_icon {
background: url("../../assets/images/reTree_expand_.svg") no-repeat center center;
background-size: contain;
}
.reTree_focus_icon {
background: url("../../assets/images/reTree_focus_.svg") no-repeat center center;
background-size: contain;
}
</style>
\ No newline at end of file
<template>
<div
class="content column-start-center reTree_box"
:style="{fontSize: (size||14) +'px',lineHeight:(size||14) +'px'}"
style="width:347px"
>
<div class="column-start-center basic_layer" v-for="(item,index) in formatData" :key="index">
<div
class="row-flex-start basic_banner"
:class="{
'active_color': item.expand && item.children.length>0,
}"
@click="itemClick(item)"
>
<div
class="reTree_icon"
:style="{height: (size||14*1.2 )+'px',width: (size||14*1.2) +'px'}"
:class="{
'reTree_default_icon': item.children.length===0,
'reTree_collapse_icon': item.expand && item.children.length>0,
'reTree_expand_icon': !item.expand && item.children.length>0,
}"
></div>
<div class="layer_text nowrap">{{item.label}}</div>
</div>
<lineItem v-if="item.expand&&item.children.length>0" v-on="$listeners" :list="item.children" :size="size"></lineItem>
</div>
</div>
</template>
<script>
import lineItem from "./lineItem.vue";
export default {
inheritAttrs: false,
props: {
pd: {},
size: {
type: Number,
default: 14
}
},
components: { lineItem },
data() {
return {
selectedDetail: {},
timer: {},
formatData: []
};
},
watch: {
pd(n, o) {
this.formatData = this.preDealData(n);
console.log(this.formatData);
}
},
created() {
console.log("lineTree create");
this.preDealData(this.pd);
},
methods: {
preDealData(list) {
list.forEach(x => {
if (!x.expand) this.$set(x, "expand", false);
if (x.children && x.children.length > 0) this.preDealData(x.children);
});
return list;
},
// 根据id展开树的具体项
expandTreeItemById(idList) {
let _this = this;
function loopTree(list) {
list.forEach(x => {
if (idList.includes(x.id)) {
_this.$set(x, "expand", true);
} else {
_this.$set(x, "expand", false);
}
if (x.children && x.children.length > 0) loopTree(x.children);
});
return list;
}
this.formatData = loopTree(this.pd);
},
itemClick(item){
item.expand=!item.expand
this.$emit('itemClick',item)
},
// 详情点击
detailClick(data) {
clearTimeout(this.timer);
this.timer = setTimeout(() => {
this.selectedDetail = data;
this.$emit("detailClick", data);
}, 300);
},
detailDoubleClick(data) {
clearTimeout(this.timer);
this.selectedDetail = data;
this.$emit("detailDoubleClick", data);
}
}
};
</script>
<style lang="less" scoped>
.content {
height: 100%;
width: 100%;
}
.column-start-center {
display: flex;
display: -webkit-flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
}
.row-flex-start {
display: flex;
display: -webkit-flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
.nowrap {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.active_color{
color: #FFFFFF ;
}
.reTree_box {
// overflow-y: auto;
}
.reTree_icon {
width: 17px;
height: 17px;
margin-right: 10px;
}
.basic_layer {
width: 100%;
position: relative;
color: #FFFFFF;
cursor: pointer;
.layer_text {
flex: 1;
}
}
.first_vertical_line {
content: "";
position: absolute;
width: 1px;
left: 6px;
top: 17px;
background: #c3c5c8;
}
.basic_banner {
position: relative;
width: 100%;
padding-bottom: 13px;
}
.second_layer {
position: relative;
width: 100%;
cursor: pointer;
padding-left: 25px;
}
.third_layer {
position: relative;
padding-bottom: 15px;
width: 100%;
padding-left: 40px;
color: #ffffff;
}
.second_layer::before {
content: "";
position: absolute;
height: 1px;
width: 16px;
left: 9px;
top: 9px;
background: #c3c5c8;
}
.third_layer::before {
content: "";
position: absolute;
height: 1px;
width: 20px;
left: 9px;
top: 9px;
background: #c3c5c8;
}
.linkLine_default::after {
content: "";
position: absolute;
height: 100%;
width: 1px;
left: 9px;
top: 0px;
background: #c3c5c8;
}
.linkLine_first::after {
content: "";
position: absolute;
/* 为了触顶 */
top: -14px;
height: calc(100% + 14px);
width: 1px;
left: 9px;
background: #c3c5c8;
}
// 上半截
.linkLine_half_top::after {
content: "";
position: absolute;
height: 24px;
top: -14px;
width: 1px;
left: 9px;
background: #c3c5c8;
}
.linkLine_last::after {
content: "";
position: absolute;
height: 9px;
width: 1px;
left: 9px;
top: 0px;
background: #c3c5c8;
}
.reTree_collapse_icon {
background: url("../../assets/images/reTree_collapse_.svg") no-repeat center center;
background-size: contain;
}
.reTree_default_icon {
background: url("../../assets/images/reTree_default_.svg") no-repeat center center;
background-size: contain;
}
.reTree_expand_icon {
background: url("../../assets/images/reTree_expand_.svg") no-repeat center center;
background-size: contain;
}
.reTree_focus_icon {
background: url("../../assets/images/reTree_focus_.svg") no-repeat center center;
background-size: contain;
}
</style>
\ No newline at end of file