soc_app/src/views/menu/securityCheckRegister/addWorker.vue

<template>
  <div class="addWork">
    <NavBar/>
    <div class="addWork-container">
      <div class="search-flex">
        <van-search v-model="query.name" placeholder="请输入姓名" @clear="refreshData" @change="refreshData"/>
      </div>
      <div class="card-list">
        <Scroll
          ref="Scroll"
          @refresh="refreshData"
          @loadMore="getDataList"
          :pullup="pullup">
          <empty v-if="!dataList || dataList.length === 0" />
          <div v-else class="list-item">
            <van-cell
              :class="{'active':item.checked}"
              v-for="(item, index) in dataList"
              clickable
              :key="item.id"
              :title="item.name"
              :value="item.orgName"
              :label="item.phone || '无'"
              @click="click(item,index)">
            </van-cell>
          </div>
        </Scroll>
      </div>
      <div>
        <van-button :disabled="!selected" type="info" size="large" @click="onSubmit">确认授权</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import NavBar from '@/components/NavBar'
import Scroll from '@/components/scroll/scroll'
import {workerList,accredit} from './api'
export default {
  components: {
    NavBar,
    Scroll,
  },
  data(){
    return {
      query:{
        name:'',
        orgId:null,
        checkSub:true,
        pageNum:1,
        pageSize:10
      },
      total:0,
      formData:{
        planId:null,
        beCheckedOrgId:null,
        taskId:null,
        ymdDate:null,
        userId:null,
      },
      dataList:[],
      ruleList:[],
      selected:null,
      prop:{
        label:'name',
        value:'id'
      },
      pullup:false,
      go:{
        type:'replace',
        path:'/securityDetail',
      }
    }
  },
  mounted(){
    console.log(this.$route,'this.$route')
    this.query.orgId = this.$route.query.orgId;
    this.formData.planId = this.$route.query.planId;
    this.formData.beCheckedOrgId = this.$route.query.beCheckedOrgId;
    this.formData.taskId = this.$route.query.taskId;
    this.formData.ymdDate = this.$route.query.ymdDate;
    this.getDataList();
  },
  methods:{
    onSubmit(){
      this.formData.userId = this.selected;
      accredit(this.formData).then(res=>{
        this.$toast('授权成功');
        this.$router.replace(
          {
            name:'securityCheckRegister',
            path:'/securityCheckRegister',
            params:{event:'refresh'}
          }
        );
      })
    },
    click(v,i){
      this.dataList.forEach(v=>v.checked = false);
      this.$set(this.dataList[i],'checked',!this.dataList[i].checked);
      this.selected = v.id;
    },
    refreshData(){
      this.pullup = true;
      this.total = 0;
      this.query.pageNum = 1;
      this.dataList = [];
      this.getDataList();
    },
    getDataList(){
      if( this.dataList.length !== 0 && this.dataList.length >= this.total) {
        this.pullup = false;
        this.$toast('已加载完毕');
        return;
      }
      workerList(this.query).then(data=>{
        let res = data.data;
        console.log(res,'resssssssss')
        if(res.total === '0'){
          this.pullup = false;
          this.$toast('已加载完毕');
          return
        }
        res.rows.forEach(v=>{
          v.checked = false;
        });
        this.total = res.total;
        if(this.dataList.length < res.total) {
          this.dataList = [...this.dataList,...res.rows] ;
          this.pullup = true;
          this.query.pageNum++;
          this.$refs.Scroll.refresh();
        }
      })
    },
  }
}
</script>
<style lang="scss">
.addWork{
  .active{
    color:#1989fa;
    .van-cell__value{
      color:#1989fa;
    }
  }
}
</style>
<style lang="scss" scoped>
.addWork{
  .card-list{
    height: calc(100vh - 300px);
    overflow: auto;
  }
  .list-item{
    padding:20px;
  }
  .active{
    color:#1989fa;
    border-left: 5px solid #1989fa;
  }
}
</style>