''

liukangdong

2024-06-28 67c8044145f0bd3df44cc7b627cff32fed02b63c

 h5/pages/staff/meetingSel.vue

@@ -1,5 +1,5 @@
<template>
  <view class="main_app">
  <view class="main_app" :class="{ popupShow: isShowSelMem }">
    <view class="search_inp df_ac">
      <image
        class="mr12 search"
@@ -15,20 +15,18 @@
      />
    </view>
    <view class="member_list">
      <view v-for="item in memberList" :key="item.id" class="line">
      <view v-for="(item, index) in memberList" :key="item.id" class="line">
        <image
          :src="
            item.avatar
              ? item.prefixUrl + item.avatar
              : require('@/static/default_avatar.png')
          "
          v-if="item.avatar"
          :src="item.prefixUrl + item.avatar"
          class="avatar"
          mode=""
        ></image>
        <view v-else class="avatar">{{ item.realname.slice(0, 1) }}</view>
        <view class="content">
          <view class="info">
            <text class="name">{{ item.realname }}</text>
            <!-- <text class="tag">tag</text> -->
            <text class="tag" v-if="item.status == '1'">有会议</text>
          </view>
          <view class="depart">{{ item.departmentName }}</view>
        </view>
@@ -55,7 +53,9 @@
      <view class="sel_mem">
        <text>已选择：</text>
        <view class="members">
                <text v-for="(item, i) in selList" :key="i">{{ item.realname }}；</text>
          <text v-for="(item, i) in selList" :key="i"
            >{{ item.realname }}；</text
          >
        </view>
        <image
          @click="isShowSelMem = true"
@@ -64,38 +64,39 @@
          mode=""
        ></image>
      </view>
      <view class="btn" @click="onSubmit">确认({{ selList.length }}/20)</view>
      <view class="btn" @click="onSubmit"
        >确认({{ selList.length }}/{{ param.limitNum }})</view
      >
    </view>
    <!--  -->
     <u-popup
    <u-popup
      catchtouchmove
      :show="isShowSelMem"
      :round="12"
      mode="bottom"
      @close="isShowSelMem = false"
      @close="closeModal"
    >
      <view class="modal">
        <view class="modal_header">
          <text class="status">已选择：{{ selList.length }}人</text>
          <text class="btn" @click="isShowSelMem = false">确认</text>
          <text class="btn" @click="subSelMem">确认</text>
        </view>
        <view class="modal_mem_list">
          <view class="line" v-for="(item, i) in selList" :key="i">
            <image
              :src="
                item.faceImgFull
                  ? item.faceImgFull
                  : require('@/static/logo@2x.png')
              "
              v-if="item.avatar"
              :src="item.prefixUrl + item.avatar"
              class="avatar"
              mode=""
            ></image>
            <view v-else class="avatar">{{ item.realname.slice(0, 1) }}</view>
            <view class="content">
              <view class="info">
                <text class="name">{{ item.realname }}</text>
              </view>
              <view class="depart">{{ item.departmentName }}</view>
            </view>
            <view class="btn" @click="handleRemove(item)">移除</view>
            <view class="btn" @click="handleRemove(i)">移除</view>
          </view>
        </view>
      </view>
@@ -105,12 +106,15 @@

<script>
import { userPagePost } from '@/api'
import dayjs from 'dayjs'
export default {
  data() {
    return {
      memberList: [],
      selList: [],
      param: {},
      param: {
        limitNum: ''
      },
      pagination: {
        page: 1,
        capacity: 20
@@ -120,15 +124,42 @@
    }
  },
  onLoad(option) {
    this.param = { ...option, keyword: '' }
    this.param = {
      limitNum: option.limitNum,
      keyword: '',
      startTime: dayjs(Number(option.startTime)).format('YYYY-MM-DD HH:mm:ss'),
      endTime: dayjs(Number(option.endTime)).format('YYYY-MM-DD HH:mm:ss'),
    }
    this.initData()
  },
  mounted() {
    this.$eventBus.$on('meetingPeoDetail', (res) => {
      setTimeout(() => {
        res.forEach(item => {
          this.memberList.forEach(mem => {
            if (item.id == mem.id) {
              mem.checked = true
            }
          })
        })
        this.selList = this.memberList.filter(i => i.checked)
        this.$nextTick(() => {
          this.$forceUpdate()
        })
      }, 1000)
    })
  },
  methods: {
    onSubmit() {
         this.$eventBus.$emit('meetingPeo', this.selList)
      this.$eventBus.$emit('meetingPeo', this.selList)
      uni.navigateBack()
    },
      changeMem(item, index) {
    changeMem(item, index) {
      const { selList, param } = this
      if (this.selList.length == param.limitNum && !item.checked) return uni.showToast({
        title: `该会议可容纳${param.limitNum}人`,
        icon: 'none'
      })
      item.checked = !item.checked
      this.selList = this.memberList.filter(i => i.checked)
      // const arr = e.detail.value
@@ -154,17 +185,31 @@

      }).then(res => {
        this.memberList = res.data.records || []
            this.memberList.map(i => {
               i.checked = false
            })
        this.memberList.map(i => {
          i.checked = false
        })
      })
    },
      handleRemove(item) {
      this.memberList.forEach(ite => {
        if (item.id === ite.id) {
          ite.checked = false
        }
    closeModal() {
      this.selList = this.memberList.filter(i => i.checked)
      this.isShowSelMem = false
    },
    subSelMem() {
      const { selList, memberList } = this
      memberList.forEach(ite => {
        ite.checked = false
        selList.forEach(item => {
          if (ite.id === item.id) {
            ite.checked = true
          } else { }
        })
      })
      this.isShowSelMem = false
      this.$forceUpdate()
    },
    handleRemove(i) {
      this.selList.splice(i, 1)

      // console.log(this.memberList);
      this.$forceUpdate()
    },
@@ -175,10 +220,12 @@
<style lang="scss">
.modal {
  padding: 40rpx 30rpx;
  max-height: 1000rpx;
  .modal_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 20rpx;
    .status {
      font-weight: 600;
    }
@@ -187,6 +234,8 @@
    }
  }
  .modal_mem_list {
    max-height: 860rpx;
    overflow: auto;
    .line {
      display: flex;
      align-items: center;
@@ -198,6 +247,11 @@
        border-radius: 50%;
        overflow: hidden;
        margin-right: 20rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: $uni-color-primary;
        color: #fff;
      }
      .content {
        flex: 1;
@@ -229,7 +283,7 @@
.sub_wrap {
  position: fixed;
  bottom: 0;
   background-color: #fff;
  background-color: #fff;
  left: 0;
  width: 100%;
  box-shadow: 0rpx 0rpx 6rpx 0rpx #b2b2b2;
@@ -296,7 +350,7 @@
        }
      }
    }
      .checked{
    .checked {
      width: 48rpx;
    }
  }