soc_app/src/views/menu/safetyBook/index.vue

<template>
  <div class="safetyBook">
    <NavBar />
    <div class="page-container">
      <div class="search-box">
        <org-tree v-model="query.partyBOrg" placeholder="选择检查机构" @change="refreshData"></org-tree>
      </div>
      <div class="scroll-box">
        <Scroll
          ref="Scroll"
          :pullupDownFn="refreshData"
          :pullupFn="getDataList"
          :pullup="pullup">
          <empty v-if="!dataList.length" />
          <card class="list-item" v-else v-for="(v,i) in dataList" :key="i">
            <p class="item-title">{{getDictLabel(v.type,'safety_book_type')}}</p>
            <div :title="v.orgName" @click="clickItem(v)">
              <van-cell class="item-cell" title="甲方姓名" :value="v.partyA" ></van-cell>
              <van-cell class="item-cell" title="甲方机构" :value="v.partyAOrgName"></van-cell>
              <van-cell class="item-cell" title="乙方姓名" :value="v.partyB" ></van-cell>
              <van-cell class="item-cell" title="乙方机构" :value="v.partyBOrgName" ></van-cell>
              <van-cell class="item-cell" title="所属年度" :value="`${v.year} 年`" >
              </van-cell>
<!--              <van-cell class="item-cell" title="添加时间" :value="dayjs(v.createTime).format('YYYY-MM-DD HH:mm')">-->
<!--              </van-cell>-->
            </div>
          </card>
        </Scroll>
      </div>
    </div>
  </div>
</template>

<script>
import {mapGetters} from "vuex";
import NavBar from '@/components/NavBar'
import OrgTree from '@/components/orgTree'
import Scroll from '@/components/scroll/scroll'
import Card from '@/components/card'
import {dataList} from './api'
import {formatDate} from "@/filters/filter";
import {msgList} from "@/views/menu/message/api";
import dayjs from "dayjs"
export default {
  name: "safetyBook",
  components: {
    NavBar,
    OrgTree,
    Scroll,
    Card
  },
  data(){
    return {
      pullup:true,
      query:{
        partyBOrg:null,
        pageNum:1,
        pageSize:10,
      },
      total:0,
      dataList:[],
      dicts:['safety_book_type'],
    }
  },
  computed:{
    ...mapGetters(['orgId','dictionary'])
  },
  mounted(){
    this.query.partyBOrg = this.orgId;
  },
  methods:{
    dayjs,
    clickItem(item){
      this.$router.push({
        path:'/safetyBookDetail',query:{id:item.id}
      })
    },
    refreshData(){
      this.pullup = true;
      this.query.pageNum = 1;
      this.total = 0;
      this.dataList = [];
      this.getDataList();
    },
    getDataList(){
      if( this.dataList.length !== 0 && this.dataList.length >= this.total) {
        this.pullup = false;
        this.$toast('已加载完毕');
        return;
      }
      dataList(this.query).then(res=>{
        if(res.total === '0'){
          this.pullup = false;
          this.$toast('已加载完毕');
          return
        }
        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">
.safetyBook{
  .van-cell-group__title{
    background-color: #fff;
    color: #333;
  }
  .list-item{
    .item-cell{
      -padding: 20px 0;
      .van-cell__title{
        color: #969799;
      }
    }
  }
}
</style>
<style lang="scss" scoped>
.safetyBook{

}
.scroll-box{
  padding:0 20px 20px;
  width: 100%;
  height:calc(100vh - 284px);
  overflow: auto;
}
.list-item{
  .item-title{
    font-size: 28px;
    color: #1989fa;
    padding-bottom: 20px ;
    border-bottom: 1px solid #f4f4f4;
  }
}
</style>