最新版本

jiangping

2024-08-26 e23a1db0b60437f17d09d65c65f8fd0c8a5d88c7

 h5/pages/staff/vehicle/applePeo.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,30 +15,38 @@
      />
    </view>
    <view class="member_list">
      <checkbox-group v-model="selList" @change="changeMem">
        <view v-for="item in memberList" :key="item.id" class="line">
          <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>
              <!-- <text class="tag">tag</text> -->
            </view>
            <view class="depart">{{ item.companyName }}</view>
      <view 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>
          <label>
            <checkbox :checked="item.checked" :value="String(item.id)" class="checkbox" />
          </label>
          <text></text>
          <view class="depart">{{ item.companyName }}</view>
        </view>
      </checkbox-group>
        <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="empty"></view>
    </view>
    <!--  -->
@@ -55,19 +63,19 @@
          mode=""
        ></image>
      </view>
      <view class="btn" @click="onSubmit">确认({{selList.length}}/20)</view>
      <view class="btn" @click="onSubmit">确认</view>
    </view>
    <!--  -->
    <u-popup
      :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">
@@ -86,7 +94,7 @@
              </view>
              <view class="depart">{{ item.componey }}</view>
            </view>
            <view class="btn" @click="handleRemove(item)">移除</view>
            <view class="btn" @click="handleRemove(i)">移除</view>
          </view>
        </view>
      </view>
@@ -100,59 +108,92 @@
  data() {
    return {
      memberList: [],
      selList: [],
      param: {},
      selList: [],

      isShowSelMem: false
      isShowSelMem: false,
      pagination: {
        capacity: 20,
        page: 1
      },
    }
  },
  onLoad() {
    this.initData()
  },
  methods: {
    onSubmit() {
      this.$eventBus.$emit('applePeo', this.selList)
      uni.navigateBack()
    },
    changeMem(e) {
      const arr = e.detail.value
      let arrTemp = arr.map(item => {
        let obj = {}
        this.memberList.forEach(ite => {
          if (item == ite.id) {
            obj.name = ite.name.split('-')[0]
            obj.componey = ite.name.split('-')[1] || ''
            obj.id = ite.id
  onReachBottom() {
    // if(){}
  },
  mounted() {
    this.$eventBus.$on('applePeoDetail', (res) => {
      res.forEach(item => {
        this.memberList.forEach(mem => {
          if (item.id === mem.id) {
            mem.checked = !mem.checked
          }
        })
        return obj
      })
      this.selList = arrTemp
      // this.$forceUpdate()
    },
    handleRemove(item) {
      const selIndex = this.selList.findIndex(i => i.id === item.id)
      this.selList.splice(selIndex, 1)
      this.memberList.forEach(ite => {
        if(item.id === ite.id){
          ite.checked = false
        }
      this.selList = this.memberList.filter(i => i.checked)
      this.$nextTick(() => {
        this.$forceUpdate()
      })
      // console.log(this.memberList);
      this.$forceUpdate()
    },
    })
  },
  methods: {
    initData() {
      const { param } = this
      findTypeMemberInfo({
        // model: {
        name: param.name,
        type: '2'
        // },
        type: '2',
        companyType: 1,
      }).then(res => {
        this.memberList = res.data || []
        this.memberList.forEach(i => {
          i.checked = false
        })
      })
    }
    },
    onSubmit() {
      if (this.selList.length === 0) return uni.showToast({
        title: '请先选择人员',
        icon: 'none'
      })
      this.$eventBus.$emit('applePeo', this.selList)
      uni.navigateBack()
    },
    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()
    },
    changeMem(item, index) {
      // this.memberList.forEach(mem => {
      //   if(item.id === mem.id){
      //     item.checked = !item.checked
      //   }
      // })
      item.checked = !item.checked
      this.selList = this.memberList.filter(i => i.checked)
      this.$forceUpdate()
    },
    handleRemove(i) {
      this.selList.splice(i, 1)
      this.$forceUpdate()
    },
  }
};
</script>
@@ -160,18 +201,22 @@
<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: #279baa;
      color: $uni-color-primary;
    }
  }
  .modal_mem_list {
    max-height: 860rpx;
    overflow: auto;
    .line {
      display: flex;
      align-items: center;
@@ -225,7 +270,7 @@
    align-items: center;
    .members {
      width: 500rpx;
      color: #4d98a7;
      color: $uni-color-primary;
      white-space: nowrap;
      overflow: hidden; //文本超出隐藏
      text-overflow: ellipsis;
@@ -240,7 +285,7 @@
    width: 690rpx;
    height: 88rpx;
    line-height: 88rpx;
    background: #279baa;
    background: $uni-color-primary;
    border-radius: 44rpx;
    color: #fff;
    text-align: center;
@@ -282,6 +327,9 @@
        }
      }
    }
    .checked {
      width: 48rpx;
    }
  }
  .empty {
    width: 100%;