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

<template>
  <div class="addCheck">
    <van-nav-bar
      title="添加检查内容"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="addCheck-container">
      <div class="search-flex">
        <van-search v-model="query.key" placeholder="请输入检查子项"  @change="refreshData"/>
        <select-cell title="选择检查内容库" v-model="query.ruleId" :dataList="ruleList" :prop="prop" @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.itemName"
              :label="item.pointName"
              @click="click(item,index)">
              <template #right-icon>
                <van-checkbox v-model="item.checked"/>
              </template>
            </van-cell>
          </div>
        </Scroll>
      </div>
      <div>
        <van-button  type="info" size="large" @click="addItem">确认选中</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import NavBar from '@/components/NavBar'
import SelectCell from '@/components/selectCell'
import Scroll from '@/components/scroll/scroll'
import {checkItemList,checkList} from './api'
export default {
  name: "addCheck",
  components: {
    NavBar,
    Scroll,
    SelectCell,
  },
  data(){
    return {
      id:null,
      query:{
        key:'',
        ruleId:null,
        pageNum:1,
        pageSize:10,
      },
      dataList:[],
      ruleList:[],
      selected:[],
      prop:{
        label:'name',
        value:'id'
      },
      pullup:false,
      go:{
        type:'replace',
        path:'/securityDetail',
      }
    }
  },
  mounted(){
    this.id = this.$route.query.id;
    this.getCheckItem();
  },
  methods:{
    onClickLeft(){
      this.$emit('goBack')
    },
    refreshData(){
      this.pullup = true;
      this.query.pageNum = 1;
      this.total = 0;
      this.dataList = [];
      this.getDataList();
    },
    click(v,i){
      this.$set(this.dataList[i],'checked',!this.dataList[i].checked);
    },
    addItem(){
      this.selected = this.dataList.filter(v=>v.checked);
      if(this.selected.length === 0) return this.$toast('请选择检查项');
      this.$emit('addItem',this.selected);
    },
    getCheckItem(){
      let data = {orgType:4};
      checkItemList(data).then(res=>{
        this.ruleList = res.data;
        this.query.ruleId = res.data[0].id;
        this.getDataList()
      })
    },
    getDataList(){
      if( this.dataList.length !== 0 && this.dataList.length >= this.total) {
        this.pullup = false;
        this.$toast('已加载完毕');
        return;
      }
      checkList(this.query).then(res=>{
        if(res.total === '0'){
          this.pullup = false;
          this.$toast('已加载完毕');
          return
        }
        res.rows.forEach(v=>{
          v.isAdd = 1;
          v.checked = false;
          v.pointId = v.id;
        });
        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" scoped>
.addCheck{
  .card-list{
    padding: 20px 0;
    height: calc(100vh - 424px);
    overflow: auto;
  }
  .active{
    color:#1989fa;
  }
}
</style>