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="选择检查内容库" is-all 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,
  },
  props:["orgType"],
  data(){
    return {
      id:null,
      query:{
        key:'',
        ruleId:null,
        pageNum:1,
        pageSize:10,
      },
      dataList:[],
      ruleList:[],
      selected:[],
      //获取到所有的ruleId集合
      ruleIdList:[],
      prop:{
        label:'name',
        value:'id'
      },
      pullup:false,
    }
  },
  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:this.orgType};
      checkItemList(data).then(res=>{
        this.ruleList = res.data;
        this.ruleIdList = res.data.map(v=>{return v.id});
        this.getDataList()
      })
    },
    getDataList(){
      if( this.dataList.length !== 0 && this.dataList.length >= this.total) {
        this.pullup = false;
        this.$toast('已加载完毕');
        return;
      }
      let data = JSON.parse(JSON.stringify(this.query));
      data.ruleId = this.query.ruleId || this.ruleIdList;
      checkList(data).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;
          v.status = 0;
          if(!v.nfcList) v.nfcList = [];
        });
        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>