crm-mobile/pages_common/selectList/user.vue

<template>
  <view class="uni-app">
    <view class="status-bar" />
    <view class="main-container">
      <wk-nav-bar :title="navTitle">
        <!-- #ifndef MP-WEIXIN -->
        <button v-if="isRadio" class="button white-btn" @click="handleConfirm">
          确定
        </button>
        <!-- #endif -->
      </wk-nav-bar>
			
      <wk-search-box @search="handleSearch" />
			
      <view class="list-scroll">
        <wk-select-list
          v-if="listData.length > 0"
          v-model="defaultVal"
          :list="listData"
          :label-field="typeObj.labelField"
          :value-field="typeObj.valueField"
          :max="bridge.maxlength"
          @change="handleChange">
          <template v-slot:default="{ scopeData }">
            <view class="user-item">
              <wk-avatar
                :avatar="scopeData.img"
                :name="scopeData.realname"
                :size="14"
                :preview="false"
                class="avatar" />
              <view class="username">
                {{ scopeData.realname }}
              </view>
            </view>
          </template>
        </wk-select-list>
      </view>
			
      <!-- #ifdef MP-WEIXIN -->
      <view v-if="isRadio" class="footer-btn-group">
        <button class="button" @click="handleConfirm">
          确定
        </button>
      </view>
      <!-- #endif -->
			
      <view
        v-if="!isRadio"
        class="footer">
        <view class="left" @click="showPopup">
          <view class="total-box">
            <text class="total">
              已选择：{{ selectedList.length }}人
            </text>
            <text class="wk wk-arrow-right icon" />
          </view>
          <view
            :class="{active: selectedList.length > 0}"
            class="desc">
            {{ selectedStr }}
          </view>
        </view>
        <view class="confirm-btn" @click="handleConfirm">
          确定
        </view>
      </view>
    </view>
		
    <uni-popup
      ref="popup"
      radius="20rpx 20rpx 0 0"
      type="bottom">
      <view class="popup">
        <view class="popup-header">
          <text class="text">
            已选择{{ selectedList.length }}人
          </text>
          <text class="confirm-btn" @click="handleConfirm">
            确定
          </text>
        </view>
				
        <view class="popup-content">
          <view class="user-list">
            <view
              v-for="(item, index) in selectedList"
              :key="item.userId"
              class="user-list-item">
              <wk-avatar
                :avatar="item.img"
                :name="item.realname"
                :size="14"
                :preview="false"
                class="avatar" />
								
              <view class="text">
                {{ item.realname }}
              </view>
							
              <view class="remove-btn" @click="handleRemove(index)">
                移除
              </view>
            </view>
          </view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
  import { AdminQueryUserList } from 'API/admin'
  import { deepCopy } from '@/utils/lib.js'
	
  export default {
    name: 'UserChoose',
    data() {
      return {
        listData: [],
        userData: [],
        selectedList: [],
        defaultVal: [],
				
        typeObj: {
          labelField: 'realname',
          valueField: 'userId'
        },
				
        routerQuery: {},
        bridge: {}
      }
    },
    computed: {
      navTitle() {
        return this.bridge.title || '选择员工'
      },
      isRadio() {
        return this.bridge.maxlength === 1
      },
      selectedStr() {
        if (this.$isEmpty(this.selectedList)) return '请选择'
        return this.selectedList.map(o => o.realname).join('，')
      }
    },
    onLoad(options) {
      this.routerQuery = options || {}
      this.bridge = getApp().globalData.selectedValBridge.user || {}
      this.defaultVal = this.bridge.defaultVal || []
      this.handleChange(this.defaultVal)
      this.getList()
    },
    onUnload() {
      getApp().globalData.selectedValBridge = {}
    },
    methods: {
      /**
       * 获取选项列表
       */
      getList() {
        if (!this.$isEmpty(this.bridge.list)) {
          this.listData = this.bridge.list
          return
        }

        const otherParams = this.bridge.params || {} // 附加参数
        const params = {
          pageType: 0,
					...otherParams
        }
				
        const request = this.bridge.request || AdminQueryUserList
        if (!request) return

        request(params).then(res => {
          this.userData = res.list
          this.listData = deepCopy(res.list)
        }).catch()
      },
			
      /**
       * 搜索
       * @param {String} keyword
       */
      handleSearch(keyword = '') {
        if (!keyword) {
          this.listData = deepCopy(this.userData)
        } else {
          this.listData = this.userData.filter(o => o.realname.indexOf(keyword) !== -1)
        }
      },
			
      /**
       * 保存记录选择的项
       * @param {Object} data
       */
      handleChange(data) {
        this.selectedList = data
      },
			
      showPopup() {
        this.$refs.popup.open()
      },
      handleRemove(index) {
        this.selectedList.splice(index, 1)
      },
			
      /**
       * 确认选择，通知上一级页面，员工已经选择
       */
      handleConfirm() {
        this.$refs.popup.close()
        const data = {
          guid: this.bridge.guid,
          bridge: this.bridge,
          data: this.selectedList
        }
        if (this.bridge.config && this.bridge.config.checkFn) {
          const res = this.bridge.config.checkFn(data)
          if (!res) return
        }
        uni.$emit('selected-user', data)
        this.$Router.navigateBack()
      }
    }
  }
</script>

<style scoped lang="scss">
	$active-color: #1C69FF;
	
	.main-container {
		display: flex;
		flex-direction: column;
		overflow: hidden;
		.list-scroll {
			flex: 1;
			overflow: auto;
			padding-bottom: 20rpx;
			
			.user-item {
				@include left;
				.avatar {
					width: 74rpx;
					height: 74rpx;
					flex-shrink: 0;
					margin-right: 20rpx;
				}
				.username {
					flex: 1;
					@include ellipsis;
				}
			}
			.dept-name {
				font-size: 22rpx;
				color: #666666;
			}
		}
		
		.footer {
			position: relative;
			z-index: 1;
			width: 100%;
			height: 104rpx;
			box-shadow: 0 -4rpx 14rpx rgba(220,220,220,0.7);
			background-color: white;
			padding: 0 4%;
			@include left;
			.left {
				flex: 1;
				overflow: hidden;
				margin-right: 30rpx;
				.total-box {
					width: 100%;
					font-size: $wk-font-base;
					color: $active-color;
					.total {
						margin-right: 15rpx;
					}
					.icon {
						transform: rotate(-90deg);
						display: inline-block;
					}
				}
				.desc {
					width: 100%;
					font-size: $wk-font-mini;
					color: $light;
					@include ellipsis;
					&.active {
						color: $gray;
					}
				}
			}
			.confirm-btn {
				width: 170rpx;
				height: 74rpx;
				font-size: $wk-font-base;
				color: white;
				border-radius: 12rpx;
				background-color: $active-color;
				flex-shrink: 0;
				@include center;
			}
		}
	}
	
	.popup {
		padding-bottom: 20rpx;
		
		.popup-header {
			position: relative;
			padding: 15rpx 38rpx;
			border-bottom: 1rpx solid $border-color;
			@include left;
			.text {
				flex: 1;
				color: $dark;
				font-size: $wk-font-medium;
			}
			.confirm-btn {
				color: $active-color;
				font-size: $wk-font-base;
				padding: 20rpx 0 20rpx 20rpx;
			}
		}
		.popup-content {
			min-height: 50vh;
			max-height: 80vh;
			overflow: auto;
			
			.remove-btn {
				width: 104rpx;
				height: 56rpx;
				font-size: $wk-font-base;
				border: 1rpx solid #D2D2D2;
				border-radius: 8rpx;
				@include center;
			}
			.user-list {
				.user-list-item {
					position: relative;
					width: 100%;
					font-size: $wk-font-medium;
					padding: 20rpx 4%;
					background-color: white;
					@include left;
					.text {
						flex: 1;
						margin-left: 36rpx;
						@include ellipsis
					}
					.avatar {
						width: 74rpx;
						height: 74rpx;
					}
					&::after {
						position: absolute;
						bottom: 1rpx;
						right: 0;
						content: '';
						width: calc(100% - 130rpx);
						height: 1rpx;
						background-color: #EBEEF1;
						display: block;
					}
					&:last-child::after {
						display: none;
					}
				}
			}
		}
	}
</style>