161 lines
3.5 KiB
Vue
161 lines
3.5 KiB
Vue
<template>
|
|
<u-popup mode="left" :show="show" @close="close">
|
|
<u-collapse ref="refCollapse" :value="showIndex" @change="changeItem" @open="openItem" @close="closeItem"
|
|
accordion>
|
|
<u-collapse-item v-for="(item,i) in indexData.list" :name="i">
|
|
<template v-slot:icon>
|
|
<view class="iconfont icon-qiye icon"></view>
|
|
</template>
|
|
<template v-slot:title>
|
|
{{item.label}}
|
|
</template>
|
|
<template v-slot:right-icon>
|
|
<u-badge numberType="overflow" type="primary" max="999" :showZero="true"
|
|
:value="item.children.length" />
|
|
</template>
|
|
<view class="u-collapse-content" v-if="showId[item.id]">
|
|
<u-list>
|
|
<u-list-item v-for="item2 in item.children">
|
|
<u-cell @click="select(i,item2)">
|
|
<template v-slot:icon>
|
|
<view class="iconfont icon-ditu icon"></view>
|
|
</template>
|
|
<template v-slot:title>
|
|
<view :class="[item2.id == indexData.selectItem.id ? 'checked':'']">
|
|
{{item2.name}}
|
|
</view>
|
|
</template>
|
|
<template v-slot:right-icon>
|
|
<u-badge numberType="overflow" type="success" max="999" :showZero="true"
|
|
:value="item2.valueNum" />
|
|
</template>
|
|
</u-cell>
|
|
</u-list-item>
|
|
</u-list>
|
|
</view>
|
|
</u-collapse-item>
|
|
</u-collapse>
|
|
</u-popup>
|
|
</template>
|
|
|
|
<script>
|
|
import store from "@/store"
|
|
import {
|
|
deptTreeSelectByRole,
|
|
getManagerGroundList,
|
|
} from "@/api/index.js"
|
|
|
|
export default {
|
|
name: 'custom-select-land',
|
|
emits: ["select"],
|
|
props: {},
|
|
watch: {},
|
|
data() {
|
|
return {
|
|
user: store.state.user.user,
|
|
show: false,
|
|
showIndex: null,
|
|
showId: {},
|
|
indexData: getApp().indexData,
|
|
}
|
|
},
|
|
created() {
|
|
this.indexData.getList(this.user.userId);
|
|
if (this.indexData.selectItem) {
|
|
this.showId[this.indexData.selectItem.companyId] = true;
|
|
} else {
|
|
this.showId[this.indexData.list.id] = true;
|
|
}
|
|
},
|
|
methods: {
|
|
//打开弹窗
|
|
open() {
|
|
this.showIndex = this.indexData.showIndex;
|
|
if (this.indexData.list.length > 0) {
|
|
this.show = true;
|
|
} else {
|
|
this.$toast("无数据");
|
|
}
|
|
},
|
|
//关闭弹窗
|
|
close() {
|
|
this.show = false;
|
|
},
|
|
//选中数据
|
|
select(index, item) {
|
|
let oldItem = this.indexData.selectItem;
|
|
this.indexData.selectItem = item;
|
|
this.indexData.showIndex = index;
|
|
if (item.id != oldItem.id) {
|
|
/*
|
|
1.设置缓存
|
|
2.回调的方式通知改变
|
|
3.全局订阅的方式通知改变
|
|
4.组件回调的方式通知改变
|
|
*/
|
|
this.indexData.setStorage(2, item);
|
|
this.indexData.onEventHandler(this.indexData.eventType.land, item);
|
|
uni.$emit("notify-update-land", item);
|
|
this.$emit("select", item);
|
|
}
|
|
this.close();
|
|
},
|
|
//打开行变化
|
|
changeItem(e) {},
|
|
//打开行
|
|
openItem(e) {
|
|
this.showIndex = e;
|
|
this.showId[this.indexData.list[e].id] = true;
|
|
this.$nextTick(() => {
|
|
this.$refs.refCollapse.init();
|
|
})
|
|
},
|
|
closeItem(e) { //折叠行
|
|
this.showIndex = null;
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
$list-height: 100px;
|
|
|
|
::v-deep.u-popup__content {
|
|
min-width: 240px;
|
|
|
|
.u-collapse {
|
|
height: 100vh;
|
|
overflow-y: auto;
|
|
|
|
}
|
|
|
|
.u-cell__right-icon-wrap--down,
|
|
.u-cell__right-icon-wrap--up {
|
|
transform: none;
|
|
}
|
|
|
|
.u-collapse-item__content__text {
|
|
padding: 0;
|
|
}
|
|
|
|
.u-cell__body__content {
|
|
.icon {
|
|
color: #3c9cff;
|
|
font-size: 44rpx;
|
|
}
|
|
|
|
}
|
|
|
|
.u-collapse-content {
|
|
font-size: 28rpx;
|
|
|
|
.icon {
|
|
color: #39ac4f;
|
|
}
|
|
}
|
|
|
|
.checked {
|
|
border-bottom: 2px solid #66ccff;
|
|
}
|
|
}
|
|
</style> |