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

<template>
  <div class="check-register">
    <NavBar />
    <div class="statistics-container">
      <!--   搜索   -->
      <van-collapse v-model="active">
        <van-collapse-item title="搜索条件" name="1">
          <div class="org-line van-hairline--bottom">
            <van-row>
              <van-col span="5">
                <div class="org-label">检查机构</div>
              </van-col>
              <van-col span="19">
                <org-tree v-model="query.checkOrgId" @change="getDataList"></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="19">
                <org-tree v-model="query.beCheckedOrgId" @change="getDataList"></org-tree>
              </van-col>
            </van-row>
          </div>
          <div class="search-box van-hairline--bottom">
            <select-cell title="检查角色" v-model="query.roldIds" :dataList="planList" :prop="prop" @change="getDataList"/>
          </div>
          <div class="search-box van-hairline--bottom">
            <select-cell title="状态" v-model="query.planId" :dataList="planList" :prop="prop" @change="getDataList"/>
            <date-cell title="截止日期"  v-model="query.taskTime" date-type="date" @change="getDataList"/>
          </div>
        </van-collapse-item>
      </van-collapse>

      <div class="card-list">
        <k-list :list="dataList" :params="query" :auto="false" ref="list" >
          <template slot-scope="{ data }">
            <van-cell-group>
              <van-cell :title="data.orgName" >
                <template #extra>
                  <div class="card-num">
                    {{data.finishRate}}
                  </div>
                </template>
                <template #label>
                  <div class="flex-box">
                    <div>应培训数：{{data.shouldFinish}}</div>
                    <div>已培训数：{{data.finish}}</div>
                  </div>
                </template>
              </van-cell>
            </van-cell-group>
          </template>
        </k-list>
      </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 {dataList} from './api'
import {mapGetters} from "vuex";
import {formatDate} from "@/filters/filter";
export default {
  components: {
    NavBar,
    OrgTree,
    dateCell,
    selectCell,
    KList
  },
  data() {
    return {
      active:['1'],
      query:{
        taskTime:null,
        checkOrgId:null,
        beCheckedOrgId:null,
        roldIds:null,
      },
      planList:[],
      prop:{
        label:'name',
        value:'id',
      },
      loading:false,
      //dataList:[]
    }
  },
  mounted() {
    this.initData();
  },
  computed:{
    ...mapGetters(['orgId']),
  },
  watch:{
    'query.checkOrgId':{
      handler(v){
        this.getRoleList();
      },
      immediate:true
    }
  },
  methods: {
    dataList,
    initData(){
      this.query.checkOrgId = this.orgId;
      this.getPlanList();
    },
    getRoleList(){

    },
    getDataList(){
      let data = {
        ...this.query
      }
      if(!this.query.orgId) return this.$toast('请选择机构');
      dataList(data).then(res=>{
        this.dataList = res.data;
      })
    }
  }
}
</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-left:30px;
  background-color: #fff;
}
.org-label{
  height: 90px;
  width: 100%;
  display: flex;
  align-items: center;
  font-size: 28px;
}
.card-list{
  padding: 20px;
  height: calc(100vh - 550px);
  overflow: auto;
}
.card-num{
  display: flex;
  align-items: center;
  font-size: 28px;
  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>