Merge remote-tracking branch 'origin/master'

jiangping

2025-02-26 4e2e52b766d87fc528d02bdebc1757c3dda8c596

 h5/pages/staff/vehicle/applePeo.vue

@@ -1,366 +1,386 @@
<template>
  <view class="main_app" :class="{ popupShow: isShowSelMem }">
    <view class="search_inp df_ac">
      <image
        class="mr12 search"
        src="@/static/ic_search@2x.png"
        mode="widthFix"
      ></image>
      <input
        v-model="param.name"
        @blur="initData()"
        type="text"
        placeholder="搜索"
        placeholder-style="color: #999999;"
      />
    </view>
    <view class="member_list">
      <view @click="changeMem(item, index)" v-for="(item, index) in memberList" :key="item.id" class="line">
        <image
          v-if="item.faceImgFull"
          :src="item.faceImgFull"
          class="avatar"
          mode=""
        ></image>
        <view v-else class="avatar">{{ item.name.slice(0, 1) }}</view>
        <view class="content">
          <view class="info">
            <text class="name">{{ item.name }}</text>
            <!-- <text class="tag">tag</text> -->
          </view>
          <view class="depart">{{ item.companyName }}</view>
        </view>
        <image
          v-if="item.checked"
          src="@/static/checkbox_sel@2x.png"
          mode="widthFix"
          class="checked"
        ></image>
        <image
          v-if="!item.checked"
          src="@/static/meeting/icon/ic_choose@2x.png"
          mode="widthFix"
          class="checked"
        ></image>
        <text></text>
      </view>

      <view class="empty"></view>
    </view>
    <!--  -->
    <view class="sub_wrap">
      <view class="sel_mem">
        <text>已选择：</text>
        <view class="members">
          <text v-for="(item, i) in selList" :key="i">{{ item.name }}；</text>
        </view>
        <image
          @click="openSeleter"
          class="open_icon"
          src="@/static/staff/renyuan_ic_open.png"
          mode=""
        ></image>
      </view>
      <view class="btn" @click="onSubmit">确认</view>
    </view>
    <!--  -->
    <u-popup
      :show="isShowSelMem"
      :round="12"
      mode="bottom"
      @close="closeModal"
    >
      <view class="modal">
        <view class="modal_header">
          <text class="status">已选择：{{ selList.filter(i => i.checkedTemp).length }}人</text>
          <text class="btn" @click="subSelMem">确认</text>
        </view>
        <view class="modal_mem_list">
               <template v-for="(item, i) in selList">
                  <view class="line" v-if="item.checkedTemp" :key="i">
                    <image
                      :src="
                        item.faceImgFull
                          ? item.faceImgFull
                          : require('@/static/logo@2x.png')
                      "
                      class="avatar"
                      mode=""
                    ></image>
                    <view class="content">
                      <view class="info">
                        <text class="name">{{ item.name }}</text>
                      </view>
                      <view class="depart">{{ item.componey }}</view>
                    </view>
                    <view class="btn" @click="handleRemove(i)">移除</view>
                  </view>
               </template>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { findTypeMemberInfo } from '@/api'
export default {
  data() {
    return {
      memberList: [],
      param: {},
      selList: [],

      isShowSelMem: false,
      pagination: {
        capacity: 20,
        page: 1
      },
    }
  },
  onLoad() {
    this.initData()
  },
  onReachBottom() {
    // if(){}
  },
  mounted() {
    this.$eventBus.$on('applePeoDetail', (res) => {
      res.forEach(item => {
        this.memberList.forEach(mem => {
          if (item.id === mem.id) {
            mem.checked = !mem.checked
          }
        })
      })
      this.selList = this.memberList.filter(i => i.checked)
      this.$nextTick(() => {
        this.$forceUpdate()
      })
    })
  },
  methods: {
    initData() {
      const { param } = this
      findTypeMemberInfo({
        // model: {
        name: param.name,
        // },
        type: '2',
        companyType: 1,
      }).then(res => {
        this.memberList = res.data || []
        this.memberList.forEach(i => {
               const index = this.selList.findIndex(ite => ite.id === i.id)
          i.checked = index > -1
        })
      })
    },
    onSubmit() {
      if (this.selList.length === 0) return uni.showToast({
        title: '请先选择人员',
        icon: 'none'
      })
      this.$eventBus.$emit('applePeo', this.selList)
      uni.navigateBack()
    },
    changeMem(item, index) {
      // this.memberList.forEach(mem => {
      //   if(item.id === mem.id){
      //     item.checked = !item.checked
      //   }
      // })
      item.checked = !item.checked
         const i = this.selList.findIndex(a => a.id === item.id)
         if(item.checked && i === -1){
            this.selList.push(item)
         }else{
            this.selList.splice(i, 1)
         }
      this.$forceUpdate()
    },
      openSeleter() {
         this.isShowSelMem = true
         this.selList.forEach(item => {
            item.checkedTemp = true
         })
         this.$forceUpdate()
      },
      subSelMem() {
        const { memberList } = this
         this.selList = this.selList.filter(i => i.checkedTemp)
         console.log('selList', this.selList);
        memberList.forEach(ite => {
            const index = this.selList.findIndex(i => i.id === ite.id)
          ite.checked = index > -1
        })
        this.isShowSelMem = false
        this.$forceUpdate()
      },
      closeModal() {
        this.selList.forEach(item => {
           item.checkedTemp = true
        })
        this.isShowSelMem = false
      },
    handleRemove(i) {
      this.selList[i].checkedTemp = false
      this.$forceUpdate()
    },
  }
};
</script>

<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;
    }
    .btn {
      color: $uni-color-primary;
    }
  }
  .modal_mem_list {
    max-height: 860rpx;
    overflow: auto;
    .line {
      display: flex;
      align-items: center;
      border-bottom: 1rpx solid #e5e5e5;
      padding: 30rpx 0;
      .avatar {
        width: 64rpx;
        height: 64rpx;
        border-radius: 50%;
        overflow: hidden;
        margin-right: 20rpx;
      }
      .content {
        flex: 1;
        .depart {
          font-size: 24rpx;
          color: #666666;
        }
        .info {
          display: flex;
          margin-bottom: 16rpx;
          .name {
            font-size: 30rpx;
          }
        }
      }
      .btn {
        width: 80rpx;
        height: 48rpx;
        line-height: 48rpx;
        text-align: center;
        font-size: 24rpx;
        color: #333333;
        border-radius: 4rpx;
        border: 1rpx solid #999999;
      }
    }
  }
}
.sub_wrap {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  background-color: #fff;
  box-shadow: 0rpx 0rpx 6rpx 0rpx #b2b2b2;
  padding: 30rpx 30rpx 64rpx;
  .sel_mem {
    display: flex;
    align-items: center;
    .members {
      width: 500rpx;
      color: $uni-color-primary;
      white-space: nowrap;
      overflow: hidden; //文本超出隐藏
      text-overflow: ellipsis;
      margin-right: 20rpx;
    }
    .open_icon {
      width: 44rpx;
      height: 44rpx;
    }
  }
  .btn {
    width: 690rpx;
    height: 88rpx;
    line-height: 88rpx;
    background: $uni-color-primary;
    border-radius: 44rpx;
    color: #fff;
    text-align: center;
    margin-top: 22rpx;
  }
}
.member_list {
  .line {
    display: flex;
    align-items: center;
    border-bottom: 1rpx solid #e5e5e5;
    padding: 30rpx 0;
    .avatar {
      width: 64rpx;
      height: 64rpx;
      border-radius: 50%;
      overflow: hidden;
      margin-right: 20rpx;
    }
    .content {
      flex: 1;
      .depart {
        font-size: 24rpx;
        color: #666666;
      }
      .info {
        display: flex;
        margin-bottom: 16rpx;
        .name {
          font-size: 30rpx;
        }
        .tag {
          font-size: 24rpx;
          border-radius: 4rpx;
          border: 1rpx solid #f62710;
          color: #f62710;
          padding: 0rpx 6rpx;
          margin-left: 8rpx;
        }
      }
    }
    .checked {
      width: 48rpx;
    }
  }
  .empty {
    width: 100%;
    height: 280rpx;
  }
}
.search_inp {
  height: 72rpx;
  background: #f7f7f7;
  border-radius: 4rpx;
  padding-left: 16rpx;
  .search {
    width: 28rpx;
  }
  input {
    flex: 1;
    font-size: 28rpx;
    color: #333333;
  }
}
</style>
<template>

   <view class="main_app" :style="{ height: windowHeight + 'px' }" :class="{ popupShow: isShowSelMem }">

      <view class="search_inp df_ac">

         <image class="mr12 search" src="@/static/ic_search@2x.png" mode="widthFix"></image>

         <input v-model="param.queryParam" @confirm="initData()" type="text" placeholder="搜索"

            placeholder-style="color: #999999;" />

      </view>

      <view class="member_list">

         <view v-for="(item, index) in memberList" :key="item.id" class="line">

            <image v-if="item.faceImg" :src="item.faceImg" 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" v-if="item.status == '1'">有会议</text>

               </view>

               <view class="depart">{{ item.departmentName || item.companyName }}</view>

            </view>

            <image @click="changeMem(item, index)" v-if="item.checked" src="@/static/checkbox_sel@2x.png" mode="widthFix"

               class="checked"></image>

            <image @click="changeMem(item, index)" v-if="!item.checked" src="@/static/meeting/icon/ic_choose@2x.png"

               mode="widthFix" class="checked"></image>

            <text></text>

         </view>

         <view class="" style="height: 220rpx;"></view>

         <view v-if="memberList.length == 0" class="empty_wrap">

            <image src="@/static/empty.png" mode=""></image>

            <text>暂无数据</text>

         </view>

      </view>

      <!--  -->

      <view class="sub_wrap">

         <view class="sel_mem">

            <text>已选择：</text>

            <view class="members">

               <text v-for="(item, i) in selList" :key="i">{{ item.realname }}；</text>

            </view>

            <image @click="openSeleter" class="open_icon" src="@/static/staff/renyuan_ic_open.png" mode=""></image>

         </view>

         <view class="btn" @click="onSubmit">确认({{ selList.length }})</view>

      </view>

      <!--  -->

      <u-popup catchtouchmove :show="isShowSelMem" :round="12" mode="bottom" @close="closeModal">

         <view class="modal">

            <view class="modal_header">

               <text class="status">已选择：{{selList.filter(i => i.checkedTemp).length}}人</text>

               <text class="btn" @click="subSelMem">确认</text>

            </view>

            <view class="modal_mem_list">

               <template v-for="(item, i) in selList">

                  <view class="line" v-if="item.checkedTemp">

                     <image 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(i)">移除</view>

                  </view>

               </template>

            </view>

         </view>

      </u-popup>

   </view>

</template>



<script>

import {

   userPagePost

} from '@/api'

import dayjs from 'dayjs'

export default {

   data() {

      return {

         memberList: [],

         selList: [],

         param: {

            limitNum: ''

         },

         windowHeight: '',

         pagination: {

            page: 1,

            capacity: 40

         },



         isShowSelMem: false

      }

   },

   onLoad(option) {

      const result = uni.getWindowInfo()

      this.windowHeight = result.windowHeight

      this.param = {

         // limitNum: option.limitNum,

         queryParam: '',

         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('applePeoDetail', (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()

            })

         }, 500)

      })

   },

   methods: {

      onSubmit() {

         this.$eventBus.$emit('applePeo', this.selList)

         uni.navigateBack()

      },

      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)

         // // 
         item.checked = !item.checked

         const i = this.selList.findIndex(a => a.id === item.id)

         if (item.checked && i === -1) {

            this.selList.push(item)

         } else {

            this.selList.splice(i, 1)

         }

         this.$forceUpdate()

      },

      openSeleter() {

         this.isShowSelMem = true

         this.selList.forEach(item => {

            item.checkedTemp = true

         })

         this.$forceUpdate()

      },

      initData() {

         const {

            param,

            pagination

         } = this

         userPagePost({

            ...param,

            querySpecial: 1, type: 2, companyType: 1, workStatus: 0



         }).then(res => {

            this.memberList = res.data || []

            this.memberList.forEach(i => {

               const index = this.selList.findIndex(ite => ite.id === i.id)

               i.checked = index > -1

            })

         })

      },

      closeModal() {

         this.selList.forEach(item => {

            item.checkedTemp = true

         })

         this.isShowSelMem = false

      },

      subSelMem() {

         const {

            memberList

         } = this

         this.selList = this.selList.filter(i => i.checkedTemp)

         memberList.forEach(ite => {

            const index = this.selList.findIndex(i => i.id === ite.id)

            ite.checked = index > -1

         })

         this.isShowSelMem = false

         this.$forceUpdate()

      },

      handleRemove(i) {

         this.selList[i].checkedTemp = false

         this.$forceUpdate()

      },

   }

}

</script>



<style lang="scss">

.main_app {

   position: relative;

}



.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;

      }



      .btn {

         color: $uni-color-primary;

      }

   }



   .modal_mem_list {

      max-height: 860rpx;

      overflow: auto;



      .line {

         display: flex;

         align-items: center;

         border-bottom: 1rpx solid #e5e5e5;

         padding: 30rpx 0;



         .avatar {

            width: 64rpx;

            height: 64rpx;

            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;



            .depart {

               font-size: 24rpx;

               color: #666666;

            }



            .info {

               display: flex;

               margin-bottom: 16rpx;



               .name {

                  font-size: 30rpx;

               }

            }

         }



         .btn {

            width: 80rpx;

            height: 48rpx;

            line-height: 48rpx;

            text-align: center;

            font-size: 24rpx;

            color: #333333;

            border-radius: 4rpx;

            border: 1rpx solid #999999;

         }

      }

   }

}



.sub_wrap {

   position: fixed;

   bottom: 0;

   background-color: #fff;

   left: 0;

   width: 100%;

   box-shadow: 0rpx 0rpx 6rpx 0rpx #b2b2b2;

   padding: 30rpx 30rpx 42rpx;



   .sel_mem {

      display: flex;

      align-items: center;



      .members {

         width: 500rpx;

         color: $uni-color-primary;

         white-space: nowrap;

         overflow: hidden; //文本超出隐藏

         text-overflow: ellipsis;

         margin-right: 20rpx;

      }



      .open_icon {

         width: 44rpx;

         height: 44rpx;

      }

   }



   .btn {

      width: 690rpx;

      height: 88rpx;

      line-height: 88rpx;

      background: $uni-color-primary;

      border-radius: 44rpx;

      color: #fff;

      text-align: center;

      margin-top: 22rpx;

   }

}



.member_list {

   height: calc(100vh - 130rpx);

   overflow: auto;

   margin-top: 10rpx;



   .line {

      display: flex;

      align-items: center;

      border-bottom: 1rpx solid #e5e5e5;

      padding: 30rpx 0;



      .avatar {

         width: 64rpx;

         height: 64rpx;

         border-radius: 50%;

         overflow: hidden;

         margin-right: 20rpx;

      }



      .content {

         flex: 1;



         .depart {

            font-size: 24rpx;

            color: #666666;

         }



         .info {

            display: flex;

            margin-bottom: 16rpx;



            .name {

               font-size: 30rpx;

            }



            .tag {

               font-size: 24rpx;

               border-radius: 4rpx;

               border: 1rpx solid #f62710;

               color: #f62710;

               padding: 0rpx 6rpx;

               margin-left: 8rpx;

               display: flex;

               align-items: center;

            }

         }

      }



      .checked {

         width: 48rpx;

      }

   }



   .empty {

      width: 100%;

      height: 280rpx;

   }

}



.search_inp {

   height: 72rpx;

   background: #f7f7f7;

   border-radius: 4rpx;

   padding-left: 16rpx;



   .search {

      width: 28rpx;

   }



   input {

      flex: 1;

      font-size: 28rpx;

      color: #333333;

   }

}

</style>