<template>
|
<u-popup mode="button" :safeAreaInsetBottom="false" :show="show" @close="close" @open="open" z-index="8000" bgColor="#fff">
|
<view class="bg-box">
|
<view class="title">选择随行人员</view>
|
<u-search v-model="nickName" @search="enforceList" @clear="clearContent" @confirm="enforceList" @custom="enforceList()"></u-search>
|
<scroll-view scroll-y="true" style="height: 600rpx;margin-top: 20rpx;">
|
<view v-if="checkboxList1.length">
|
<u-checkbox-group iconPlacement="right" v-model="checkboxValue1" placement="column" @change="checkboxChange">
|
<u-checkbox :customStyle="{marginBottom: '40rpx', }" v-for="(item, index) in checkboxList1" :key="index"
|
:name="item.userId" :label="`${item.dept.deptName}--${item.nickName}`">
|
</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>
|
import { enforceList } from '@/api/policy.js'
|
export default {
|
// props: {
|
// list: {
|
// type: Array,
|
// default: () => []
|
// }
|
// },
|
data() {
|
return {
|
show: false,
|
checkboxValue1: [],
|
// 基本案列数据
|
checkboxList1: [
|
],
|
nickName: ""
|
}
|
|
},
|
watch: {
|
// list: {
|
// handler(n) {
|
// this.checkboxList1 = n
|
// },
|
// immediate: true
|
// }
|
},
|
methods: {
|
clearContent() {
|
this.companyName = ""
|
this.enforceList()
|
},
|
checkboxChange(n) {
|
// console.log('change', n);
|
},
|
close(){
|
this.show = false
|
},
|
open(list) {
|
this.show = true
|
this.enforceList()
|
},
|
enteryResult() {
|
let list = []
|
this.checkboxList1.forEach(item => {
|
if(this.checkboxValue1.includes(item.userId)) {
|
list.push({
|
peerDeptId: item.dept.deptId,
|
peerDeptName: item.dept.deptName,
|
peerId: item.userId,
|
peerPhone: item.phonenumber,
|
peerType: 2,
|
peerUser: item.nickName
|
})
|
}
|
})
|
this.$emit('selectValue', list)
|
this.close()
|
},
|
enforceList() {
|
enforceList({nickName: this.nickName}).then(val => {
|
this.checkboxList1 = val.data.data
|
})
|
}
|
}
|
}
|
</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>
|
