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

<template>
  <div class="check-register">
    <NavBar :go="go"/>
    <div class="statistics-container">
      <!--   搜索   -->
      <div style="background-color: #fff;">
        <div class="org-line van-hairline--bottom">
          <van-row>
            <van-col span="24">
              <org-tree v-model="query.checkOrgId" placeholder="选择检查机构" @change="changeOrgId"></org-tree>
            </van-col>
          </van-row>
        </div>
        <div class="org-line van-hairline--bottom">
            <van-row>
              <van-col span="24">
                <org-tree v-model="query.beCheckedOrgId" clearable placeholder="选择受检机构" @change="refreshData"></org-tree>
              </van-col>
            </van-row>
          </div>
        <div class='search-flex'>
            <search-select-cell
              class="van-hairline--right"
              title="检查角色"
              v-model="query.roldIds"
              :dataList="rolesList"
              :prop="prop"
              @change="refreshData"/>
            <date-cell title="日期"  v-model="query.taskTime" date-type="date" @change="refreshData"/>
        </div>
      </div>

      <div class="card-list">
        <Scroll
          ref="Scroll"
          @refresh="refreshData"
          @loadMore="getDataList"
          :pullup="pullup">
          <empty v-if="!dataList || dataList.length === 0" />
          <card class="list-item" v-for="(v,i) in dataList" :key="v.planId">
            <div class="item-title">
              <van-cell :title="v.taskName" :border="false" :label="rangDate(formatDate(v.planStartTime,'DATE'),formatDate(v.planEndTime,'DATE'))" ></van-cell>
              <div class="collapse-title">
                <div :class="{'active':v.active==2}" @click.stop="changeList(v,2)">
                  <p> {{v.uncompleted.length}}</p>
                  <p>未完成</p>
                </div>
                <div :class="{'active':v.active==1}" @click.stop="changeList(v,1)">
                  <p>{{v.completed.length}}</p>
                  <p>完成</p>
                </div>
              </div>
            </div>
            <div class="check-item-list">
              <empty v-if="v.active==1? v.completed.length == 0 : v.uncompleted.length == 0" />
              <van-cell
                v-else
                v-for="(a,index) in v.active==1? v.completed:v.uncompleted" :key="a.taskId"
                :title="a.beCheckedOrgName"
                :to="{path:path,query:{id:a.taskId,enable:1}}">
                <template #right-icon>
                  <div>
                    <span :style="{color:getState(getDictLabel(a.status,'safety_check_status'))}">
                      {{getDictLabel(a.status,'safety_check_status')}}
                    </span>
                  </div>
                </template>
              </van-cell>
            </div>
          </card>
        </Scroll>
      </div>

    </div>
  </div>
</template>
<script>
import NavBar from '@/components/NavBar'
import OrgTree from '@/components/orgTree'
import Card from '@/components/card'
import DateCell from '@/components/dateCell'
import SelectCell from '@/components/selectCell'
import SearchSelectCell from '@/components/SearchSelectCell'
import Scroll from '@/components/scroll/scroll'
import {dataList,registerRole} from './api'
import {mapGetters} from "vuex";
import {formatDate} from "@/filters/filter";
export default {
  components: {
    NavBar,
    OrgTree,
    Card,
    DateCell,
    SelectCell,
    SearchSelectCell,
    Scroll
  },
  data() {
    return {
      active:['1'],
      //配置子页面路径
      path:'/securityDetail',
      query:{
        taskTime: `${formatDate(new Date(),'YYYY-MM-DD')}`,
        checkOrgId:null,
        beCheckedOrgId:null,
        roldIds:[],
        // state:'1',
        pageNum:1,
        pageSize:10,
      },
      total:0,
      rolesList:[],
      prop:{
        label:'name',
        value:'id',
      },
      loading:false,
      dataList:[],
      dicts:['safety_check_status'],
      finishList:[],
      unfinishedList:[],
      //控制上拉加载
      pullup:false,
      go:{
        type:'replace',
        path:'/menu',
      }
    }
  },
  mounted() {
    this.initData();
    this.query.checkOrgId = this.orgId;
    this.getRoleList();
  },
  computed:{
    ...mapGetters(['orgId','dictionary']),
  },
  methods: {
    formatDate,
    getState(state){
      switch (state){
        case '待检查':
          return '#bbbbbb';
        case '进行中':
          return '#008cd6';
        case '完成':
          return '#009240';
        case '已过期':
          return '#D7000F';
      }
    },
    changeOrgId(){
      this.query.roldIds = [];
      this.getRoleList();
      this.refreshData();
    },
    changeList(item,type){
      this.$set(item,'active',type);
    },
    refreshData(){
      this.pullup = true;
      this.total = 0;
      this.query.pageNum = 1;
      this.dataList = [];
      this.getDataList();
    },
    initData(){
      this.query.checkOrgId = this.orgId;
      this.query.taskTime = formatDate(new Date(),'YYYY-MM-DD');
      this.getDataList();
    },
    getRoleList(){
      registerRole(this.query.checkOrgId).then(res=>{
        this.rolesList = res.data;
      })
    },
    getDataList(){
      console.log(123123123)
      if( this.dataList.length !== 0 && this.dataList.length >= this.total) {
        this.pullup = false;
        this.$toast('已加载完毕');
        return;
      }
      let data = {
        ...this.query
      }
      if(!this.query.checkOrgId) return this.$toast('请选择机构');
      dataList(data).then(res=>{
        console.log(res,'ressssssss')
        if(res.total === '0'){
          this.pullup = false;
          this.$toast('已加载完毕');
          return
        }
        this.total = res.total;
        res.rows.forEach(v=>{
          v.active = 2
        });
        console.log(res.rows,'arr')
        if(this.dataList.length < res.total) {
          this.dataList = [...this.dataList,...res.rows];
          console.log(111)
          this.pullup = true;
          this.query.pageNum++;
          this.$refs.Scroll.refresh();  //异步请求数据量过大，需手动刷新容器
        }
      })
    },
  }
}
</script>
<style lang="scss">
.check-register{
  .item-title{
    >.van-cell{
      padding: 0;
    }
  }
  .van-empty{
    padding: 0;
    .van-empty__image{
      width: 160px;
      height: 160px;
    }
  }
  .check-item-list{
    >.van-cell{
      padding: 20px;
      .van-cell__title{
        flex:2;
      }
      .van-cell__value{
        flex:1;
      }
    }
    .van-cell::after{
      left: 20px;
      right: 20px;
    }
  }
}

</style>
<style lang="scss" scoped>
.check-register{
  .org-line{
    padding:0 10px;
    background-color: #fff;
  }
  .search-flex{
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #f5f5f5;
    >div{
      width: 50%;
    }
  }
  .org-label{
    height: 90px;
    width: 100%;
    display: flex;
    align-items: center;
    font-size: 28px;
  }
  .card-list{
    padding:0 20px 20px 20px;
    height: calc(100vh - 496px);
    overflow: auto;
  }
  .list-item{
    padding: 20px;
  }
  .item-title{
    width: 100%;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #f5f5f5;
    padding-bottom: 10px;
  }
  .check-item-list{
    -max-height: 500px;
    overflow: auto;
  }
  .card-num{
    display: flex;
    align-items: center;
    font-size: 28px;
    color: #008cd6;
  }
  .collapse-title{
    width: 50%;
    margin-left: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 28px;
    color: #ccc;
    >div{
      width: 100px;
      font-size: 24px;
      height: 70px;
      padding: 5px 10px;
      border: 2px solid #ccc;
      border-radius: 10px;
      box-shadow: 0 3px 6px #eaeaea;
      >p{
        height: 28px;
        line-height: 28px;
        text-align: center;
      }
    }
    >div.active{
      color: #fff;
      background-color: #008cd6;
      border: 3px solid #008cd6;
    }
  }
  .flex-box{
    display: flex;
    align-items: center;
    >div{
      margin-right: 40px;
    }
  }
  .search-box{
    display: flex;
    justify-content: space-between;
    align-items: center;
    >div{
      width: 50%;
    }
  }
}
</style>