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

<template>
  <div class="check-register">
    <NavBar />
    <div class="statistics-container">
      <!--   搜索   -->
      <div style="background-color: #fff;">
        <div class="org-line van-hairline--bottom">
          <van-row>
<!--            <van-col span="5">-->
<!--              <div class="org-label">检查机构</div>-->
<!--            </van-col>-->
            <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="5">-->
<!--              <div class="org-label">受检机构</div>-->
<!--            </van-col>-->
            <van-col span="24">
              <org-tree v-model="query.beCheckedOrgId" clearable placeholder="选择受检机构" @change="refreshData"></org-tree>
            </van-col>
          </van-row>
        </div>
      </div>

      <div class="van-hairline--bottom">
        <search-select-cell
          title="检查角色"
          v-model="query.roldIds"
          :dataList="rolesList"
          :prop="prop"
          @change="refreshData"/>
      </div>
      <div class="van-hairline--bottom">
        <date-cell title="检查日期"  v-model="query.taskTime" date-type="date" @change="refreshData"/>
<!--        <select-cell title="状态" v-model="query.state" :dataList="getDictItem('safety_check_status')" @change="getDataList"/>-->
      </div>

      <div class="card-list">
        <Scroll
          ref="Scroll"
          @refresh="refreshData"
          @loadMore="getDataList"
          :pullup="pullup">
          <van-empty description="暂无数据" v-if="!dataList || dataList.length === 0" />
          <div  v-else class="list-item">
            <van-panel v-for="(v,i) in dataList" :title="v.taskName" :desc="rangDate(formatDate(v.planStartTime,'DATE'),formatDate(v.planEndTime,'DATE'))" >

              <van-collapse v-model="active" :key="v.planId" @change="collapseChange">
                <van-collapse-item :name="v.planId" >
                  <template #title>
                    <div class="collapse-title">
                      <div :class="{'active':v.active==1}" @click.stop="changeList(v,1)">完成</div>
                      <div :class="{'active':v.active==2}" @click.stop="changeList(v,2)">未完成</div>
                    </div>
                  </template>
                    <van-cell
                      v-if="v.active==1? v.completed.length > 0 : v.uncompleted.length > 0"
                      v-for="(a,index) in v.active==1? v.completed:v.uncompleted" :key="a.taskId"
                      :title="a.beCheckedOrgName"
                      :value="getDictLabel(a.status,'safety_check_status')"
                      :to="{path:path,query:{id:a.taskId,enable:1}}"
                      is-link/>
                </van-collapse-item>
              </van-collapse>
            </van-panel>
          </div>
        </Scroll>
      </div>

    </div>
  </div>
</template>
<script>
import NavBar from '@/components/NavBar'
import OrgTree from '@/components/orgTree'
import KList from '@/components/list'
import DateCell from '@/components/dateCell'
import SelectCell from '@/components/selectCell'
import SearchSelectCell from '@/components/Yselectcell'
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,
    DateCell,
    SelectCell,
    SearchSelectCell,
    KList,
    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'],
      //控制上拉加载
      pullup:false,
      finishList:[],
      unfinishedList:[],
    }
  },
  mounted() {
    this.initData();
    this.query.checkOrgId = this.orgId;
    this.getRoleList();
  },
  computed:{
    ...mapGetters(['orgId','dictionary']),
  },
  methods: {
    formatDate,
    changeOrgId(){
      console.log(123,'2131')
      this.query.roldIds = [];
      this.getRoleList();
      this.refreshData();
    },
    collapseChange(){
      console.log('collapseChange')
      this.$nextTick(()=>{
        this.$refs.Scroll.refresh();
      })
    },
    changeList(item,type){
      this.$set(item,'active',type);
      //this.$refs.Scroll.refresh();
    },
    refreshData(){
      console.log('sadad')
      this.pullup = true;
      this.query.pageNum = 1;
      this.total = 0;
      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(){
      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=>{
        if(res.total === '0'){
          this.pullup = false;
          this.$toast('已加载完毕');
          return
        }
        this.total = res.total;
        if(this.dataList.length < res.total) {
          //this.dataFn(res.row);
          this.dataList = [...this.dataList,...res.rows];
          this.$nextTick(()=>{
            this.$refs.Scroll.loadMoreFinish()
            //this.$refs.Scroll.refresh();
          })
          this.pullup = true;
          this.query.pageNum++;
        }
      })
    },
    dataFn(arr){
      this.dataList = arr.map(v=>{
        v.active = 1
        return v
      });
      this.active = arr.map(v=>{
        return v.planId
      })
    },
  }
}
</script>
<style lang="scss">
.check-register{
  .van-cell-group{
    margin-bottom: 20px;
  }
  .van-cell-group:last-child{
    margin-bottom: 0;
  }
  .van-collapse-item__wrapper{
    overflow: visible;
  }
}

</style>
<style lang="scss" scoped>
.check-register{
  .org-line{
    padding:0 10px;
    background-color: #fff;
  }
  .org-label{
    height: 90px;
    width: 100%;
    display: flex;
    align-items: center;
    font-size: 28px;
  }
  .card-list{
    height: calc(100vh - 580px);
    overflow: auto;
  }
  .list-item{
    padding: 20px;
  }
  .card-num{
    display: flex;
    align-items: center;
    font-size: 28px;
    color: #009dff;
  }
  .collapse-title{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 28px;
    color: #ccc;
    >div{
      width: 40%;
      display: flex;
    }
    >div.active{
      color: #009dff;
    }
  }
  .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>