| | |
| | | <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-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 class="set-flex set-flex-content-between"> |
| | | <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> |
| | |
| | | </template> |
| | | |
| | | <script> |
| | | import { enforceList } from '@/api/policy.js' |
| | | export default { |
| | | props: { |
| | | list: { |
| | | type: Array, |
| | | default: () => [] |
| | | } |
| | | }, |
| | | // props: { |
| | | // list: { |
| | | // type: Array, |
| | | // default: () => [] |
| | | // } |
| | | // }, |
| | | data() { |
| | | return { |
| | | show: false, |
| | |
| | | // 基本案列数据 |
| | | checkboxList1: [ |
| | | ], |
| | | nickName: "" |
| | | } |
| | | |
| | | }, |
| | | watch: { |
| | | list: { |
| | | handler(n) { |
| | | this.checkboxList1 = n |
| | | }, |
| | | immediate: true |
| | | } |
| | | // list: { |
| | | // handler(n) { |
| | | // this.checkboxList1 = n |
| | | // }, |
| | | // immediate: true |
| | | // } |
| | | }, |
| | | methods: { |
| | | clearContent() { |
| | | this.companyName = "" |
| | | this.enforceList() |
| | | }, |
| | | checkboxChange(n) { |
| | | // console.log('change', n); |
| | | }, |
| | |
| | | this.show = false |
| | | }, |
| | | open(list) { |
| | | |
| | | this.show = true |
| | | this.enforceList() |
| | | }, |
| | | enteryResult() { |
| | | this.$emit('selectValue', this.checkboxValue1) |
| | | 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() |
| | | console.log(44) |
| | | }, |
| | | enforceList() { |
| | | enforceList({nickName: this.nickName}).then(val => { |
| | | this.checkboxList1 = val.data.data |
| | | }) |
| | | } |
| | | } |
| | | } |
| | |
| | | bottom: 0; |
| | | background-color: white; |
| | | border-radius: 20rpx 20rpx 0 0; |
| | | padding: 20rpx 32rpx; |
| | | padding: 20rpx 32rpx 240rpx; |
| | | z-index: 1000000; |
| | | width: 100%; |
| | | box-sizing: border-box; |
| | | min-height: 400rpx; |
| | | max-height: 800rpx; |
| | | } |
| | | .title{ |
| | | font-size: 36rpx; |
| | |
| | | .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> |