<template>
|
<u-popup mode="button" :safeAreaInsetBottom="false" :show="officeShow" @close="close" @open="open" z-index="8000"
|
bgColor="#fff">
|
<view class="bg-box">
|
<view class="title">选择执法部门</view>
|
<scroll-view scroll-y="true" style="height: 500rpx;margin-top: 20rpx; margin-bottom: 100rpx;">
|
<view v-if="list.length">
|
<u-checkbox-group iconPlacement="right" v-model="checkboxValue" placement="column" @change="checkboxChange">
|
<u-checkbox :customStyle="{marginBottom: '40rpx', }" v-for="(item, index) in list" :key="index"
|
:name="item.deptId" :label="item.deptName">
|
</u-checkbox>
|
</u-checkbox-group>
|
</view>
|
<view class="set-color" v-else>
|
<view class="set-center">
|
<u-icon name="file-text" size="30" color="gray"></u-icon>
|
<view style="width: 100%;margin-top: 20rpx;">暂无数据</view>
|
</view>
|
</view>
|
</scroll-view>
|
<view class="set-flex set-flex-content-between down-options">
|
<view class="button-per">
|
<u-button @click="close">取消</u-button>
|
</view>
|
<view class="button-per" @click="enteryResult">
|
<u-button color="#1171E0">确认</u-button>
|
</view>
|
</view>
|
</view>
|
</u-popup>
|
</template>
|
|
<script>
|
export default {
|
props: {
|
list: {
|
type: Array,
|
default: () => []
|
},
|
officeShow: {
|
type: Boolean,
|
default: false
|
}
|
},
|
data() {
|
return {
|
checkboxValue: [],
|
resultData: {}, // 返回结果
|
}
|
},
|
|
methods: {
|
checkboxChange(e) {
|
const deptIds = e.join(',')
|
const deptNames = e.map(item => this.list.find(obj => obj.deptId == item).deptName).join(',')
|
this.resultData = {
|
deptIds,
|
deptNames
|
}
|
},
|
close() {
|
this.checkboxValue = []
|
this.$emit('update:officeShow', false)
|
},
|
open() {
|
console.log(this.list)
|
},
|
enteryResult() {
|
if (!this.resultData.deptIds) return this.$u.toast('请选择执法部门')
|
this.$emit('selectValue', this.resultData)
|
this.close()
|
},
|
}
|
}
|
</script>
|
|
<style scoped>
|
.bg-box {
|
position: fixed;
|
bottom: 0;
|
background-color: white;
|
border-radius: 20rpx 20rpx 0 0;
|
padding: 20rpx 32rpx 240rpx;
|
z-index: 1000000;
|
width: 100%;
|
box-sizing: border-box;
|
min-height: 400rpx;
|
max-height: 800rpx;
|
}
|
|
.title {
|
font-size: 36rpx;
|
font-family: 500;
|
margin-bottom: 40rpx;
|
}
|
|
.button-per {
|
width: 48%;
|
}
|
|
.down-options {
|
position: fixed;
|
bottom: 40rpx;
|
width: 100%;
|
box-sizing: border-box;
|
padding: 0 32rpx;
|
left: 0;
|
}
|
|
.set-color {
|
color: gray;
|
text-align: center;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
height: 300rpx;
|
}
|
|
.set-center {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
flex-wrap: wrap;
|
}
|
</style>
|
