YNUtdPlatform/pages/workPlan/dayPlan/sub-user/index.vue

<template>
  <view>
    <u-navbar
      class="u-navbar"
      title="新增分包人员"
      placeholder
      @leftClick="leftClick"
      leftIconColor="#fff"
      bgColor="#00337A"
      :titleStyle="{ color: '#FFF', fontSize: '32rpx' }"
    />

    <view class="sub-user-container">
      <view class="sub-header">
        <view style="width: 85%">
          <uni-easyinput
            suffixIcon="search"
            @iconClick="iconClick"
            placeholder="请输入人员姓名"
            v-model="subQueryParams.keyWord"
          />
        </view>
        <view style="width: 15%" @tap="onOpenPopup()">搜索</view>
      </view>

      <view class="select-btn">
        <view>已选择 {{ onAlreadySelect }}</view>
        <view @tap="onUserSubmit">保存</view>
      </view>

      <view class="tb-th">
        <view style="width: 15%">序号</view>
        <view style="width: 15%">
          <label v-if="subUserList.length > 0">
            <checkbox
              color="#fff"
              borderColor="#ccc"
              backgroundColor="#fff"
              :checked="isAllChecked"
              activeBorderColor="#003778"
              activeBackgroundColor="#003778"
              style="transform: scale(0.7)"
              @tap="onCheckBoxChangeAll()"
            />
          </label>
        </view>
        <view style="width: 30%">姓名</view>
        <view style="width: 30%">人员状态</view>
      </view>

      <scroll-view scroll-y class="tb-content">
        <view class="tb-content-box" v-for="(item, index) in subUserList" :key="item.idNumber">
          <view style="width: 15%">{{ index + 1 }}</view>
          <view style="width: 15%">
            <label>
              <checkbox
                color="#fff"
                borderColor="#ccc"
                backgroundColor="#fff"
                :checked="item.isChecked"
                activeBorderColor="#003778"
                activeBackgroundColor="#003778"
                style="transform: scale(0.7)"
                @tap="onCheckBoxChange(item)"
              />
            </label>
          </view>
          <view style="width: 30%">{{ item.name }}</view>
          <view style="width: 30%">
            <uni-tag text="固定人员" type="success" size="small" v-if="item.userState == 1" />
            <uni-tag text="临时人员" type="primary" size="small" v-if="item.userState == 2" />
            <uni-tag text="暂退人员" type="warning" size="small" v-if="item.userState == 3" />
          </view>
        </view>
      </scroll-view>
    </view>
    <view class="pagination">
      <uni-pagination
        :total="totalAmount"
        title="标题文字"
        prev-text="上一页"
        next-text="下一页"
        @change="onPagination"
      />
    </view>

    <!-- 弹框 -->
    <uni-popup ref="popup" background-color="#fff">
      <view class="popup-right-container">
        <h1>条件筛选</h1>
        <h2>班组选择</h2>
        <view class="team-list">
          <view
            :class="{ active: reamList.includes(item.name) }"
            v-for="(item, index) in teamList"
            :key="index"
            @tap="onTeamSelect(item.name)"
          >
            {{ item.name }}
          </view>
        </view>
        <h2>人员选择</h2>
        <view class="btn-list">
          <view
            v-for="item in userType_1"
            :key="item.id"
            @click="onSelectUserType(item.id)"
            :class="{ active: activeList.includes(item.id) }"
          >
            {{ item.title }}
          </view>
        </view>
        <h2>人员选中状态</h2>
        <view class="btn-list">
          <view @tap="onSelectUserType_1(1)" :class="{ active: activeTypeList.includes(1) }">已选择</view>
          <view @tap="onSelectUserType_1(2)" :class="{ active: activeTypeList.includes(2) }">未选择</view>
        </view>

        <view class="btn-bottom">
          <view @tap="onReset">重置</view>
          <view @tap="onSubmit" class="active">确定</view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import { getSubUserInfoListApi, getUserTeamInfoListApi } from '../../../../api/workPlan/dayPlan'
export default {
  data() {
    return {
      subQueryParams: {
        proName: '', // 工程名称
        keyWord: '',
        planContentId: '',
        day: '',
        teamName: '', // 班组
        userState: '' // 人员属性
      },
      subUserList: [],
      subUserListAll: [],
      teamList: [],
      totalAmount: 0,
      activeList: [],
      reamList: [],
      activeTypeList: [],
      userType_1: [
        { title: '固定人员', id: '1' },
        { title: '临时人员', id: '2' },
        { title: '暂退人员', id: '3' }
      ],
      tempUserInfoList: []
    }
  },
  methods: {
    leftClick() {
      uni.navigateBack()
    },
    iconClick() {
      this.getSubUserInfoList()
    },
    async getSubUserInfoList() {
      //   console.log(this.subQueryParams, 'this.subQueryParams参数')

      //   if (this.subUserListAll.length > 0) {
      //     this.tempUserInfoList = []
      //     this.tempUserInfoList = this.subUserListAll.filter(e => e.isChecked === true)
      //   }

      //   if (this.subUserListAll.length > 0) {
      //     this.tempUserInfoList = []
      //     this.tempUserInfoList = this.subUserListAll.filter(e => e.isChecked === true)
      //   }

      const res = await getSubUserInfoListApi(this.subQueryParams)
      //   console.log('分包人员信息', res)
      this.subUserListAll = res.obj

      this.subUserListAll.forEach(e => {
        this.$set(e, 'isChecked', false)
      })

      if (this.activeTypeList.length == 1) {
        const isActiveType = this.activeTypeList[0]

        if (isActiveType === 1) {
          if (this.tempUserInfoList.length == 0) {
            this.subUserList = []
          } else {
            this.subUserList = this.tempUserInfoList
          }
        }
        if (isActiveType === 2) {
          // 未选择
        }
      }
      this.subUserList = this.subUserListAll.slice(0, 10)
      this.totalAmount = res.obj.length
    },
    onPagination(e) {
      this.subUserList = []
      if (e.current === 1) {
        this.subUserList = this.subUserListAll.slice(0, 10)
      } else {
        this.subUserList = this.subUserListAll.slice((e.current - 1) * 10, e.current * 10)
      }
    },
    onCheckBoxChange(item) {
      item.isChecked = !item.isChecked
      try {
        this.subUserListAll.forEach(e => {
          if (e.idNumber == item.idNumber) {
            e.isChecked = !eisChecked

            throw new Error()
          }
        })
      } catch (error) {}
    },
    async getUserTeamInfoList() {
      const res = await getUserTeamInfoListApi({ proName: this.subQueryParams.proName })
      console.log('班组信息', res)
      this.teamList = res.obj
    },
    onOpenPopup() {
      this.$refs.popup.open('right')
    },
    // 人员类型选择
    onSelectUserType(type) {
      // this.activeList.push(type)
      const isActive = this.activeList.includes(type)
      if (!isActive) {
        this.activeList.push(type)
      } else {
        this.activeList = this.activeList.filter(e => e != type)
      }

      console.log('this.activeList', this.activeList)
    },
    // 人员类型选择
    onSelectUserType_1(type) {
      // this.activeList.push(type)
      const isActive = this.activeTypeList.includes(type)
      if (!isActive) {
        this.activeTypeList.push(type)
      } else {
        this.activeTypeList = this.activeTypeList.filter(e => e != type)
      }
    },
    // 人员类型选择
    onTeamSelect(type) {
      // this.activeList.push(type)
      const isActive = this.reamList.includes(type)
      if (!isActive) {
        this.reamList.push(type)
      } else {
        this.reamList = this.reamList.filter(e => e != type)
      }

      console.log('this.activeList', this.reamList)
    },
    onReset() {
      this.activeList = []
      this.reamList = []
      this.activeTypeList = []
      this.subQueryParams.teamName = ''
      this.subQueryParams.userState = ''
      this.getSubUserInfoList()
      this.$refs.popup.close()
    },
    onSubmit() {
      if (this.reamList.length > 0) {
        this.subQueryParams.teamName = this.reamList.join(',')
      }
      if (this.activeList.length > 0) {
        this.subQueryParams.userState = this.activeList.join(',')
      }

      this.getSubUserInfoList()
      this.$refs.popup.close()
    },
    // 提交
    onUserSubmit() {
      const isSelect = this.subUserListAll.some(e => e.isChecked === true)

      if (!isSelect) {
        uni.showToast({
          title: '请勾选人员数据',
          icon: 'none'
        })

        return
      } else {
        const userInfo = this.subUserListAll.filter(e => e.isChecked === true)
        uni.navigateBack({
          delta: 1,
          success() {
            uni.$emit('updateUser', userInfo)
          }
        })
      }
    },
    // 全选
    onCheckBoxChangeAll() {
      this.subUserList.forEach(e => {
        e.isChecked = !e.isChecked
      })
    }
  },
  onLoad(options) {
    this.subQueryParams.proName = options.proName
    this.getSubUserInfoList()
    this.getUserTeamInfoList()
  },
  computed: {
    onAlreadySelect() {
      let amount = 0
      if (this.subUserListAll.length > 0) {
        this.subUserListAll.forEach(e => {
          if (e.isChecked) {
            amount++
          }
        })
      }
      return amount
    },
    isAllChecked() {
      let isCheckedAll = false
      if (this.subUserListAll.length > 0) {
        isCheckedAll = this.subUserListAll.every(e => e.isChecked === true)
      }
      return isCheckedAll
    }
  }
}
</script>

<style lang="scss" scoped>
.sub-user-container {
  width: 100%;
  //   height: 100vh;
  padding: 20rpx 0;
  //   background-color: #f5eeee;

  .sub-header,
  .select-btn {
    width: 96%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .select-btn {
    margin: 40rpx auto;
  }

  .select-btn view:first-child {
    color: #1e79d3;
    font-size: 26rpx;
  }

  .select-btn view:last-child {
    margin-right: 90rpx;
    width: 130rpx;
    height: 58rpx;
    border-radius: 12rpx;
    background-color: #1e79d3;
    color: #fff;
    line-height: 58rpx;
    text-align: center;
  }

  .tb-th {
    width: 96%;
    box-sizing: border-box;
    border: 1px solid #ccc;
    margin: 0 auto;
    display: flex;

    view {
      padding: 20rpx 0;
      text-align: center;
      border-left: 1px solid #ccc;
    }
  }
  .tb-th view:first-child {
    border: none;
  }
  .tb-content {
    width: 96%;
    // height: 300rpx;
    // height: 50vh;
    margin: 0 auto;

    .tb-content-box {
      width: 100%;
      display: flex;
      box-sizing: border-box;
      border: 1px solid #ccc;
      border-top: none;
      view {
        padding: 15rpx 0;
        text-align: center;
        border-left: 1px solid #ccc;
        font-size: 22rpx;
      }
    }
    .tb-content-box view:first-child {
      border: none;
    }
  }

  .pagination {
    margin-top: 20rpx;
    width: 96%;
    margin: 0 auto;
  }
}

.popup-right-container {
  height: 100vh;
  width: 70vw;
  position: relative;

  .btn-bottom {
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    display: flex;

    view {
      width: 50%;
      height: 110rpx;
      line-height: 110rpx;
      text-align: center;
      color: #1e79d3;
      font-size: 32rpx;
      border-top: 1px solid #ccc;
    }
  }

  h1 {
    padding: 26rpx;
    text-align: center;
    font-weight: normal;
    font-size: 36rpx;
    border-bottom: 1px solid #ccc;
  }

  h2 {
    padding-left: 40rpx;
    padding: 20rpx 0 20rpx 40rpx;
    font-size: 30rpx;
    border-bottom: 1px solid #ccc;
  }

  .team-list {
    width: 96%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;

    view {
      margin-left: 3%;
      margin-top: 22rpx;
      padding: 12rpx 30rpx;
      //   height: 58rpx;
      background-color: #eee;
      border: 1px solid #ccc;
      border-radius: 10rpx;
      text-align: center;
      //   line-height: 58rpx;
      box-sizing: border-box;
      color: #898787;
    }
  }

  .btn-list {
    width: 96%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    view {
      margin-left: 3%;
      margin-top: 22rpx;
      width: 31%;
      height: 58rpx;
      background-color: #eee;
      border: 1px solid #ccc;
      border-radius: 10rpx;
      text-align: center;
      line-height: 58rpx;
      box-sizing: border-box;
      color: #898787;
    }
  }
  .btn-list view:nth-child(3n + 1) {
    margin: 0;
    margin-top: 22rpx;
  }

  .active {
    background-color: #1e79d3 !important;
    border: none;
    color: #fff !important;
  }
}
</style>