aiot-app/pages/repair/selectUser/index - 副本.vue

<template>
  <u-popup :show="popShow" @close="close">
    <view class="mian-wrap">
      <view class="search-wrap">
        <uni-search-bar
          v-model="searchValue"
          placeholder="请输入/姓名/编码/部门"
        >
        </uni-search-bar>
      </view>
      <scroll-view scroll-y="true" class="scroll-Y">
        <checkbox-group @change="checkboxChange">
          <label class="uni-list-item" v-for="item in fList" :key="item.id">
            <checkbox :value="item.id" :checked="item.checked" />
            <view class="item s1">{{ item.trueName }}</view>
            <view class="item s3">部门：{{ item.dept }}</view>
          </label>
        </checkbox-group>
      </scroll-view>
      <view class="footer footer-right">
        <text class="footer-span-btn" @click="resetEqui">确定</text>
      </view>
    </view>
  </u-popup>
</template>

<script>
import { get, postJ } from '@/utils/api.js'
export default {
  data () {
    return {
      list: [],
      searchValue: '',
      popShow: false
    }
  },
  created () {
    this.getStaff()
  },
  computed: {
    fList () {
      let e = this.searchValue
      if (e) {
        let nlist = this.list.filter(n => {
          return (
            n.trueName.includes(e) || n.workNo.includes(e) || n.dept.includes(e)
          )
        })
        return nlist || []
      } else {
        return this.list
      }
    },
    checkedList () {
      return this.list.filter(n => {
        return n.checked
      })
    }
  },
  methods: {
    open () {
      this.popShow = true
    },
    checkboxChange (e) {
      var items = this.list,
        values = e.detail.value
      for (var i = 0, lenI = items.length; i < lenI; ++i) {
        const item = items[i]
        if (values.includes(item.id)) {
          item.checked = true
        } else {
          item.checked = false
        }
      }
    },
    // 获取员工数据
    getStaff () {
      let param = {}
      postJ(this.apiUrl + '/main/user/list', param).then(res => {
        if (res.success) {
          this.list = res.data.items.map(n => {
            return {
              id: String(n.userId),
              workNo: n.workNo,
              trueName: n.trueName,
              dept: n.deptName,
              checked: false
            }
          })
        }
      })
    },
    // 确定
    resetEqui () {
      this.$emit('submit', this.checkedList)
    },
    close () {
      this.popShow = false
    }
  }
}
</script>

<style scoped lang="scss">
.search-wrap {
  padding: 10px 0;
}

.mian-wrap {
  padding-bottom: 90rpx;
}

.uni-list-item {
  font-size: 32rpx;
  color: #333333;
  display: flex;
  padding: 0 10px;
  align-items: center;

  & + .uni-list-item {
    margin-top: 10px;
  }

  .item {
    &.s1 {
      width: 100upx;
    }

    &.s2 {
      width: 250upx;
    }

    & + .item {
      margin-left: 20px;
    }
  }
}

.scroll-Y {
  height: 500rpx;
}

.footer {
  position: absolute;
  display: flex;
  justify-content: space-between;
  align-items: center;
  bottom: 0;
  width: 100%;
  height: 90rpx;
  text-align: center;
  border-top: 0.5px solid #eeecec;
  background-color: #ffffff;
}

.footer-right {
  justify-content: flex-end;
}

.footer-span-btn {
  font-size: $uni-font-size-lg;
  color: #ffffff;
  margin-right: 20rpx;
  padding: 10rpx 20rpx;
  text-align: center;
  background-color: $j-primary-green;
  border-radius: 40rpx;
}
</style>