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>

    <uni-popup ref="popupPerson" background-color="#fff">
      <view class="popup-person">
        <view class="title">操作确认</view>

        <view class="info">
          (暂退人员：在24点后自动返场，状态调整为"在场"
          <br />
          <br />
          临时人员：只能打7天卡，且无法生产工资册)
        </view>

        <view class="title_1">选择的作业人员包含</view>

        <view class="person-list">
          <view>
            固定人员:
            <text v-for="(item, index) in fixedPersonList" :key="index">{{ item }}</text>
          </view>
          <view>
            暂退人员:
            <text v-for="(item, index) in tempPersonList" :key="index">{{ item }}</text>
          </view>
          <view>
            临时人员:
            <text v-for="(item, index) in returnPersonList" :key="index">{{ item }}</text>
          </view>
        </view>

        <view class="person-btn">
          <view @tap="onCancelBtn">取消</view>
          <view @tap="onSubmitBtn">确定</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: [],
      subUserListTemp: [],
      teamList: [],
      totalAmount: 0,
      activeList: [],
      reamList: [],
      activeTypeList: [],
      userType_1: [
        { title: '固定人员', id: '1' },
        { title: '临时人员', id: '2' },
        { title: '暂退人员', id: '3' }
      ],
      tempUserInfoList: [],
      personList: [],
      currentIndex: 0,
      fixedPersonList: [],
      tempPersonList: [],
      returnPersonList: []
    }
  },
  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('人员数据---参数', this.subQueryParams)
      console.log('人员数据---', res)
      // 1.先存储所有人员
      this.subUserListAll = res.obj
      this.subUserList = []
      this.subUserListAll.forEach(e => {
        this.$set(e, 'isChecked', false)
      })

      // 判断选择状态
      if (this.activeTypeList.length == 1) {
        // console.log('选择状态--')
        if (this.activeTypeList[0] === 1) {
          // 过滤已选择的数据
          if (this.subUserListTemp.length > 0) {
            // this.subUserList = this.subUserListTemp.filter(e => e.isAllChecked == true)
            this.subUserListAll.forEach(e => {
              this.subUserListTemp.forEach(j => {
                if (e.idNumber == j.idNumber) {
                  this.subUserList.push(JSON.parse(JSON.stringify(j)))
                }
              })
            })
          } else {
            this.subUserList = []
          }
        }
        if (this.activeTypeList[0] == 2) {
          console.log('查询未选择的数据')
          // 过滤未选择的数据
          // if (this.subUserListTemp.length > 0) {
          //   this.subUserList = this.subUserListTemp.filter(e => e.isAllChecked == false)
          // }
          if (this.subUserListTemp.length > 0) {
            this.subUserListAll.forEach(e => {
              this.subUserListTemp.forEach(j => {
                if (e.idNumber != j.idNumber) {
                  this.subUserList.push(JSON.parse(JSON.stringify(e)))
                }
              })
            })
          } else {
            this.subUserList = JSON.parse(JSON.stringify(this.subUserListAll))
          }
        }
      } else {
        // 然后处理选中状态
        // if(this.subUserListTemp.length > 0) {
        //     this.subUserListAll.forEach((e)=>{
        //       his.subUserListTemp.forEach((j)=>{

        //       })
        //     })
        // }

        console.log('全部状态---')
        if (this.subUserListTemp.length == 0) {
          if (this.personList.length > 0) {
            this.subUserListAll.forEach(e => {
              if (this.personList[this.currentIndex].includes(e.idNumber)) {
                e.isChecked = true
                this.subUserListTemp.push(JSON.parse(JSON.stringify(e)))
              }
            })
            let tempArray = this.personList.filter((e, index) => index != this.currentIndex)
            if (tempArray.length > 0) {
              this.subUserList = []
              // this.subUserListTemp
              tempArray.forEach(e => {
                this.subUserListAll.forEach(j => {
                  if (!e.includes(j.idNumber)) {
                    // this.subUserList.push(j)
                    this.subUserList.push(JSON.parse(JSON.stringify(j)))
                    // this.subUserListTemp.push(JSON.parse(JSON.stringify(j)))
                  }
                })
              })
            } else {
              this.subUserList = JSON.parse(JSON.stringify(this.subUserListAll))
              // this.subUserListTemp = JSON.parse(JSON.stringify(this.subUserListAll))
            }
          }
        } else {
          this.subUserListAll.forEach(e => {
            this.subUserListTemp.forEach(j => {
              if (e.idNumber == j.idNumber) {
                this.subUserList.push(JSON.parse(JSON.stringify(j)))
              } else {
                this.subUserList.push(JSON.parse(JSON.stringify(e)))
              }
            })
          })
        }
      }
      this.totalAmount = this.subUserList.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) {}

      this.subUserListTemp = []
      this.subUserList.forEach(e => {
        if (e.isChecked) {
          this.subUserListTemp.push(JSON.parse(JSON.stringify(e)))
        }
      })
      // if (this.subUserList.every(e => e.isChecked == true)) {
      //   this.subUserListTemp = JSON.parse(JSON.stringify(this.subUserList))
      // } else {
      //   this.subUserListTemp = []
      // }
    },
    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.subUserList.some(e => e.isChecked === true)
      if (!isSelect) {
        uni.showToast({
          title: '请勾选人员数据',
          icon: 'none'
        })
        return
      } else {
        this.subUserList.forEach(e => {
          console.log('选择的每一项', e)

          if (e.isChecked) {
            if (e.userState == 1) {
              // 固定人员
              this.fixedPersonList.push(e.name)
            }
            if (e.userState == 2) {
              // 临时人员
              this.tempPersonList.push(e.name)
            }
            if (e.userState == 3) {
              // 暂退人员
              this.returnPersonList.push(e.name)
            }
          }
        })
        this.$refs.popupPerson.open('center')
      }
    },
    onCancelBtn() {
      this.$refs.popupPerson.close()
    },
    onSubmitBtn() {
      const userInfo = this.subUserList.filter(e => e.isChecked === true)
      uni.navigateBack({
        delta: 1,
        success() {
          uni.$emit('updateUser', userInfo)
        }
      })
    },
    // 全选
    onCheckBoxChangeAll() {
      this.subUserList.forEach(e => {
        e.isChecked = !e.isChecked
      })

      if (this.subUserList.every(e => e.isChecked == true)) {
        this.subUserListTemp = JSON.parse(JSON.stringify(this.subUserList))
      } else {
        this.subUserListTemp = []
      }

      // this.subUserListTemp.forEach(e => {
      //   e.isChecked = !e.isChecked
      // })
    }
  },
  onLoad(options) {
    this.subQueryParams.proName = options.proName

    this.personList = JSON.parse(options.personList).personList

    // console.log('options.index', options.index)
    this.currentIndex = options.index

    // console.log('this.personList', options.personList, this.personList)
    this.getSubUserInfoList()
    this.getUserTeamInfoList()
  },
  computed: {
    onAlreadySelect() {
      let amount = 0
      if (this.subUserList.length > 0) {
        this.subUserList.forEach(e => {
          if (e.isChecked) {
            amount++
          }
        })
      }
      return amount
    },
    isAllChecked() {
      let isCheckedAll = false
      if (this.subUserList.length > 0) {
        isCheckedAll = this.subUserList.every(e => e.isChecked === true)

        // if (isCheckedAll) {
        //   this.subUserListTemp.forEach(e => {
        //     e.isChecked = true
        //   })
        // } else {
        //   this.subUserListTemp.forEach(e => {
        //     e.isChecked = false
        //   })
        // }
      }
      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;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    .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;
  }
}

.popup-person {
  width: 90vw;
  background-color: #fff;

  .title {
    padding: 26rpx;
    text-align: center;
    font-size: 36rpx;
    letter-spacing: 2rpx;
    border-bottom: 1px solid #ccc;
  }

  .info {
    padding: 20rpx;
    color: #c95645;
    font-size: 28rpx;
  }

  .title_1 {
    text-align: center;
    font-size: 28rpx;
    padding: 12rpx 0;
    border-bottom: 1px solid #ccc;
  }

  .person-list {
    height: 30vh;
  }
  .person-list view {
    padding: 8rpx 12rpx;

    text {
      padding: 8rpx;
    }
  }

  .person-btn {
    display: flex;
    justify-content: center;
    padding: 16rpx 0;
  }
  .person-btn view {
    width: 138rpx;
    height: 58rpx;
    line-height: 58rpx;
    text-align: center;
    border-radius: 12rpx;
  }

  .person-btn view:first-child {
    background-color: #dfdfdf;
    color: #013678;
  }
  .person-btn view:last-child {
    margin-left: 32rpx;
    background-color: #013678;
    color: #fff;
  }
}
</style>