jianjun
3 years ago
5 changed files with 721 additions and 38 deletions
@ -0,0 +1,309 @@ |
|||
<template> |
|||
<div class="m-menu"> |
|||
<div class="list"> |
|||
<div |
|||
class="item" |
|||
:key="'menu1' + item.coverageType" |
|||
v-for="item in menuList.slice(0, 2)" |
|||
> |
|||
<div |
|||
class="info" |
|||
:class="{ 'z-on': item.selected }" |
|||
@click="selectAll(item)" |
|||
> |
|||
<div class="name"> |
|||
{{ item.coverageName }} |
|||
<i v-if="item.quantity">({{ item.quantity }})</i> |
|||
</div> |
|||
|
|||
<div |
|||
class="i-arrow" |
|||
:class="{ 'z-unfold': !item.folded }" |
|||
@click.stop="item.folded = !item.folded" |
|||
> |
|||
<img src="@/assets/img/shuju/command/arrow-right.png" /> |
|||
</div> |
|||
</div> |
|||
|
|||
<div |
|||
v-show="!item.folded" |
|||
class="granditem" |
|||
:key="'menu3' + granditem.categoryKey" |
|||
v-for="granditem in item.categories" |
|||
> |
|||
<div |
|||
class="info" |
|||
:class="{ 'z-on': granditem.selected }" |
|||
@click="granditem.selected = !granditem.selected" |
|||
> |
|||
<div class="i-ico"> |
|||
<img |
|||
v-if="grandIcoList[granditem.categoryKey]" |
|||
:src="grandIcoList[granditem.categoryKey]" |
|||
/> |
|||
</div> |
|||
|
|||
<div class="name"> |
|||
{{ granditem.categoryName }} |
|||
<i v-if="granditem.quantity">({{ granditem.quantity }})</i> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div |
|||
v-show="!item.folded" |
|||
class="subitem" |
|||
:key="'menu2' + subitem.placeType" |
|||
v-for="subitem in item.placeTypesInAnalysis" |
|||
> |
|||
<div |
|||
class="info" |
|||
:class="{ 'z-on': subitem.selected }" |
|||
@click="selectAll(subitem)" |
|||
> |
|||
<div class="i-ico"> |
|||
<img |
|||
v-if="subitem.placeType == 'xxxxx'" |
|||
src="@/assets/img/shuju/command/fuwusheshi.png" |
|||
/> |
|||
<img |
|||
v-if="subitem.placeType == 'enterprise_patrol'" |
|||
src="@/assets/img/shuju/command/qishiyedanweixuncha.png" |
|||
/> |
|||
<img |
|||
v-if="subitem.placeType == 'group_rent'" |
|||
src="@/assets/img/shuju/command/qunzufang.png" |
|||
/> |
|||
<img |
|||
v-if="subitem.placeType == 'community_org'" |
|||
src="@/assets/img/shuju/command/shequzizhuzi.png" |
|||
/> |
|||
<img |
|||
v-if="subitem.placeType == 'superior_resource'" |
|||
src="@/assets/img/shuju/command/youshiziyuan.png" |
|||
/> |
|||
<img |
|||
v-if="subitem.placeType == 'volunteer'" |
|||
src="@/assets/img/shuju/command/zhiyuanzhe.png" |
|||
/> |
|||
<img |
|||
v-if="subitem.placeType == 'dangerous_chemicals'" |
|||
src="@/assets/img/shuju/command/zhongdianweihuapinqiye.png" |
|||
/> |
|||
<img |
|||
v-if="subitem.placeType == 'party_unit'" |
|||
src="@/assets/img/shuju/command/lianjiandanwei.png" |
|||
/> |
|||
</div> |
|||
|
|||
<div class="name"> |
|||
{{ subitem.placeTypeName }} |
|||
<i v-if="subitem.quantity">({{ subitem.quantity }})</i> |
|||
</div> |
|||
|
|||
<div |
|||
class="i-arrow" |
|||
:class="{ 'z-unfold': !subitem.folded }" |
|||
@click.stop="subitem.folded = !subitem.folded" |
|||
> |
|||
<img src="@/assets/img/shuju/command/arrow-right.png" /> |
|||
</div> |
|||
</div> |
|||
|
|||
<div |
|||
v-show="!subitem.folded" |
|||
class="granditem" |
|||
:key="'menu3' + granditem.categoryKey" |
|||
v-for="granditem in subitem.categories" |
|||
> |
|||
<div |
|||
class="info" |
|||
:class="{ 'z-on': granditem.selected }" |
|||
@click="granditem.selected = !granditem.selected" |
|||
> |
|||
<div class="i-ico"> |
|||
<img |
|||
v-if="grandIcoList[granditem.categoryKey]" |
|||
:src="grandIcoList[granditem.categoryKey]" |
|||
/> |
|||
</div> |
|||
|
|||
<div class="name"> |
|||
{{ granditem.categoryName }} |
|||
<i v-if="granditem.quantity">({{ granditem.quantity }})</i> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { requestPost } from "@/js/dai/request"; |
|||
|
|||
export default { |
|||
name: "sidemenu", |
|||
|
|||
props: { |
|||
grandIcoList: { |
|||
type: Object, |
|||
default: () => ({}), |
|||
}, |
|||
orgId: { |
|||
type: String, |
|||
default: "", |
|||
}, |
|||
}, |
|||
|
|||
data() { |
|||
return { |
|||
menuList: [], |
|||
}; |
|||
}, |
|||
|
|||
computed: {}, |
|||
watch: { |
|||
menuList: { |
|||
handler(newValue, oldValue) { |
|||
// console.log("菜单改变拉------------------------------------", newValue); |
|||
if (oldValue.length != 0) { |
|||
this.$emit("change", newValue); |
|||
} |
|||
}, |
|||
deep: true, |
|||
// immediate: true |
|||
}, |
|||
orgId() { |
|||
this.requestList(); |
|||
}, |
|||
}, |
|||
|
|||
mounted() { |
|||
this.requestList(); |
|||
}, |
|||
|
|||
methods: { |
|||
selectAll(item) { |
|||
item.selected = !item.selected; |
|||
item.categories.forEach((subitem) => { |
|||
subitem.selected = item.selected; |
|||
}); |
|||
if (item.placeTypesInAnalysis) { |
|||
item.placeTypesInAnalysis.forEach((subitem) => { |
|||
subitem.selected = item.selected; |
|||
subitem.categories.forEach((subitem2) => { |
|||
subitem2.selected = item.selected; |
|||
}); |
|||
}); |
|||
} |
|||
}, |
|||
//加载组织数据 |
|||
async requestList() { |
|||
const url = "/data/aggregator/coverage/analysis/resourceCategories"; |
|||
let params = { |
|||
agencyId: this.orgId, |
|||
}; |
|||
|
|||
const { data, code, msg } = await requestPost(url, params); |
|||
|
|||
if (code === 0) { |
|||
this.menuList = data.map((item) => { |
|||
item.selected = false; |
|||
item.folded = true; |
|||
item.categories.forEach((subitem) => { |
|||
subitem.selected = false; |
|||
}); |
|||
item.placeTypesInAnalysis.forEach((subitem) => { |
|||
subitem.selected = false; |
|||
subitem.folded = true; |
|||
subitem.categories.forEach((granditem) => { |
|||
granditem.selected = false; |
|||
}); |
|||
}); |
|||
return item; |
|||
}); |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.m-menu { |
|||
padding-top: 10px; |
|||
|
|||
.list { |
|||
.item { |
|||
position: relative; |
|||
z-index: 2; |
|||
line-height: 60px; |
|||
color: rgba(#fff, 0.8); |
|||
|
|||
.z-on { |
|||
color: #ffffff; |
|||
background-color: #041267; |
|||
font-weight: bold; |
|||
box-shadow: 0 0 30px 5px inset #22f; |
|||
} |
|||
|
|||
.info { |
|||
position: relative; |
|||
font-size: 18px; |
|||
width: 100%; |
|||
padding-left: 10px; |
|||
display: flex; |
|||
align-items: center; |
|||
cursor: pointer; |
|||
|
|||
.i-ico { |
|||
position: relative; |
|||
width: 35px; |
|||
height: 35px; |
|||
margin-right: 4px; |
|||
|
|||
img { |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 2px; |
|||
margin: auto; |
|||
} |
|||
} |
|||
|
|||
.i-arrow { |
|||
margin-left: auto; |
|||
margin-right: 20px; |
|||
|
|||
&.z-unfold { |
|||
transform: rotate(90deg); |
|||
} |
|||
} |
|||
|
|||
&:hover { |
|||
box-shadow: 0 0 30px 5px inset #22f; |
|||
background-color: darken(#104ba4, 12); |
|||
} |
|||
} |
|||
|
|||
.subitem, |
|||
.granditem { |
|||
> .info { |
|||
padding-left: 20px; |
|||
font-size: 16px; |
|||
} |
|||
|
|||
.granditem { |
|||
> .info { |
|||
padding-left: 40px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,309 @@ |
|||
<template> |
|||
<div class="m-menu"> |
|||
<div class="list"> |
|||
<div |
|||
class="item" |
|||
:key="'menu1' + item.coverageType" |
|||
v-for="item in menuList.slice(2)" |
|||
> |
|||
<div |
|||
class="info" |
|||
:class="{ 'z-on': item.selected }" |
|||
@click="selectAll(item)" |
|||
> |
|||
<div class="name"> |
|||
{{ item.coverageName }} |
|||
<i v-if="item.quantity">({{ item.quantity }})</i> |
|||
</div> |
|||
|
|||
<div |
|||
class="i-arrow" |
|||
:class="{ 'z-unfold': !item.folded }" |
|||
@click.stop="item.folded = !item.folded" |
|||
> |
|||
<img src="@/assets/img/shuju/command/arrow-right.png" /> |
|||
</div> |
|||
</div> |
|||
|
|||
<div |
|||
v-show="!item.folded" |
|||
class="granditem" |
|||
:key="'menu3' + granditem.categoryKey" |
|||
v-for="granditem in item.categories" |
|||
> |
|||
<div |
|||
class="info" |
|||
:class="{ 'z-on': granditem.selected }" |
|||
@click="granditem.selected = !granditem.selected" |
|||
> |
|||
<div class="i-ico"> |
|||
<img |
|||
v-if="grandIcoList[granditem.categoryKey]" |
|||
:src="grandIcoList[granditem.categoryKey]" |
|||
/> |
|||
</div> |
|||
|
|||
<div class="name"> |
|||
{{ granditem.categoryName }} |
|||
<i v-if="granditem.quantity">({{ granditem.quantity }})</i> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div |
|||
v-show="!item.folded" |
|||
class="subitem" |
|||
:key="'menu2' + subitem.placeType" |
|||
v-for="subitem in item.placeTypesInAnalysis" |
|||
> |
|||
<div |
|||
class="info" |
|||
:class="{ 'z-on': subitem.selected }" |
|||
@click="selectAll(subitem)" |
|||
> |
|||
<div class="i-ico"> |
|||
<img |
|||
v-if="subitem.placeType == 'xxxxx'" |
|||
src="@/assets/img/shuju/command/fuwusheshi.png" |
|||
/> |
|||
<img |
|||
v-if="subitem.placeType == 'enterprise_patrol'" |
|||
src="@/assets/img/shuju/command/qishiyedanweixuncha.png" |
|||
/> |
|||
<img |
|||
v-if="subitem.placeType == 'group_rent'" |
|||
src="@/assets/img/shuju/command/qunzufang.png" |
|||
/> |
|||
<img |
|||
v-if="subitem.placeType == 'community_org'" |
|||
src="@/assets/img/shuju/command/shequzizhuzi.png" |
|||
/> |
|||
<img |
|||
v-if="subitem.placeType == 'superior_resource'" |
|||
src="@/assets/img/shuju/command/youshiziyuan.png" |
|||
/> |
|||
<img |
|||
v-if="subitem.placeType == 'volunteer'" |
|||
src="@/assets/img/shuju/command/zhiyuanzhe.png" |
|||
/> |
|||
<img |
|||
v-if="subitem.placeType == 'dangerous_chemicals'" |
|||
src="@/assets/img/shuju/command/zhongdianweihuapinqiye.png" |
|||
/> |
|||
<img |
|||
v-if="subitem.placeType == 'party_unit'" |
|||
src="@/assets/img/shuju/command/lianjiandanwei.png" |
|||
/> |
|||
</div> |
|||
|
|||
<div class="name"> |
|||
{{ subitem.placeTypeName }} |
|||
<i v-if="subitem.quantity">({{ subitem.quantity }})</i> |
|||
</div> |
|||
|
|||
<div |
|||
class="i-arrow" |
|||
:class="{ 'z-unfold': !subitem.folded }" |
|||
@click.stop="subitem.folded = !subitem.folded" |
|||
> |
|||
<img src="@/assets/img/shuju/command/arrow-right.png" /> |
|||
</div> |
|||
</div> |
|||
|
|||
<div |
|||
v-show="!subitem.folded" |
|||
class="granditem" |
|||
:key="'menu3' + granditem.categoryKey" |
|||
v-for="granditem in subitem.categories" |
|||
> |
|||
<div |
|||
class="info" |
|||
:class="{ 'z-on': granditem.selected }" |
|||
@click="granditem.selected = !granditem.selected" |
|||
> |
|||
<div class="i-ico"> |
|||
<img |
|||
v-if="grandIcoList[granditem.categoryKey]" |
|||
:src="grandIcoList[granditem.categoryKey]" |
|||
/> |
|||
</div> |
|||
|
|||
<div class="name"> |
|||
{{ granditem.categoryName }} |
|||
<i v-if="granditem.quantity">({{ granditem.quantity }})</i> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { requestPost } from "@/js/dai/request"; |
|||
|
|||
export default { |
|||
name: "sidemenu", |
|||
|
|||
props: { |
|||
grandIcoList: { |
|||
type: Object, |
|||
default: () => ({}), |
|||
}, |
|||
orgId: { |
|||
type: String, |
|||
default: "", |
|||
}, |
|||
}, |
|||
|
|||
data() { |
|||
return { |
|||
menuList: [], |
|||
}; |
|||
}, |
|||
|
|||
computed: {}, |
|||
watch: { |
|||
menuList: { |
|||
handler(newValue, oldValue) { |
|||
// console.log("菜单改变拉------------------------------------", newValue); |
|||
if (oldValue.length != 0) { |
|||
this.$emit("change", newValue); |
|||
} |
|||
}, |
|||
deep: true, |
|||
// immediate: true |
|||
}, |
|||
orgId() { |
|||
this.requestList(); |
|||
}, |
|||
}, |
|||
|
|||
mounted() { |
|||
this.requestList(); |
|||
}, |
|||
|
|||
methods: { |
|||
selectAll(item) { |
|||
item.selected = !item.selected; |
|||
item.categories.forEach((subitem) => { |
|||
subitem.selected = item.selected; |
|||
}); |
|||
if (item.placeTypesInAnalysis) { |
|||
item.placeTypesInAnalysis.forEach((subitem) => { |
|||
subitem.selected = item.selected; |
|||
subitem.categories.forEach((subitem2) => { |
|||
subitem2.selected = item.selected; |
|||
}); |
|||
}); |
|||
} |
|||
}, |
|||
//加载组织数据 |
|||
async requestList() { |
|||
const url = "/data/aggregator/coverage/analysis/resourceCategories"; |
|||
let params = { |
|||
agencyId: this.orgId, |
|||
}; |
|||
|
|||
const { data, code, msg } = await requestPost(url, params); |
|||
|
|||
if (code === 0) { |
|||
this.menuList = data.map((item) => { |
|||
item.selected = false; |
|||
item.folded = true; |
|||
item.categories.forEach((subitem) => { |
|||
subitem.selected = false; |
|||
}); |
|||
item.placeTypesInAnalysis.forEach((subitem) => { |
|||
subitem.selected = false; |
|||
subitem.folded = true; |
|||
subitem.categories.forEach((granditem) => { |
|||
granditem.selected = false; |
|||
}); |
|||
}); |
|||
return item; |
|||
}); |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.m-menu { |
|||
padding-top: 10px; |
|||
|
|||
.list { |
|||
.item { |
|||
position: relative; |
|||
z-index: 2; |
|||
line-height: 60px; |
|||
color: rgba(#fff, 0.8); |
|||
|
|||
.z-on { |
|||
color: #ffffff; |
|||
background-color: #041267; |
|||
font-weight: bold; |
|||
box-shadow: 0 0 30px 5px inset #22f; |
|||
} |
|||
|
|||
.info { |
|||
position: relative; |
|||
font-size: 18px; |
|||
width: 100%; |
|||
padding-left: 10px; |
|||
display: flex; |
|||
align-items: center; |
|||
cursor: pointer; |
|||
|
|||
.i-ico { |
|||
position: relative; |
|||
width: 35px; |
|||
height: 35px; |
|||
margin-right: 4px; |
|||
|
|||
img { |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 2px; |
|||
margin: auto; |
|||
} |
|||
} |
|||
|
|||
.i-arrow { |
|||
margin-left: auto; |
|||
margin-right: 20px; |
|||
|
|||
&.z-unfold { |
|||
transform: rotate(90deg); |
|||
} |
|||
} |
|||
|
|||
&:hover { |
|||
box-shadow: 0 0 30px 5px inset #22f; |
|||
background-color: darken(#104ba4, 12); |
|||
} |
|||
} |
|||
|
|||
.subitem, |
|||
.granditem { |
|||
> .info { |
|||
padding-left: 20px; |
|||
font-size: 16px; |
|||
} |
|||
|
|||
.granditem { |
|||
> .info { |
|||
padding-left: 40px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue