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="refreshData"></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
          @pulldown="refreshData"
          @pullup="getDataList"
          :data='dataList'
          :pullup="pullup"
          class="wrapper"
          ref="wrapper">
          <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="`${formatDate(v.planStartTime,'YYYY-MM-DD')}~${formatDate(v.planEndTime,'YYYY-MM-DD')}`" >
<!--              <van-tabs v-model="active">-->
<!--                <van-tab title="完成">-->
<!--                  <van-collapse v-if="v.completed.length > 0" v-model="activeNames" :key="v.planId">-->
<!--                    <van-collapse-item title="标题1" name="1"  >-->
<!--                      <van-cell-->
<!--                        v-for="(a,index) in v.completed" :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-tab>-->
<!--                <van-tab title="未完成">-->
<!--                  <van-collapse v-if="v.uncompleted.length > 0" v-model="activeNames" :key="v.planId">-->
<!--                    <van-collapse-item title="标题1" name="1" >-->
<!--                      <van-cell-->
<!--                        v-for="(a,index) in 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-tab>-->
<!--              </van-tabs>-->
              <van-collapse v-model="activeNames" :key="v.planId">
                <van-collapse-item name="1" >
                  <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>


<!--            <van-button type="info" @click="to">详情</van-button>-->
<!--            <van-cell-group v-for="v in dataList">-->
<!--              <van-cell :title="v.orgName" >-->
<!--                <template #extra>-->
<!--                  <div class="card-num">-->
<!--                    {{v.finishRate}}-->
<!--                  </div>-->
<!--                </template>-->
<!--                <template #label>-->
<!--                  <div class="flex-box">-->
<!--                    <div>应培训数：{{v.shouldFinish}}</div>-->
<!--                    <div>已培训数：{{v.finish}}</div>-->
<!--                  </div>-->
<!--                </template>-->
<!--              </van-cell>-->
<!--            </van-cell-group>-->
        </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/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,
    DateCell,
    SelectCell,
    SearchSelectCell,
    KList,
    Scroll
  },
  data() {
    return {
      activeNames:['1'],
      //配置子页面路径
      path:'/securityDetail',
      query:{
        taskTime: null,
        checkOrgId:null,
        beCheckedOrgId:null,
        roldIds:null,
        state:'1',
      },
      rolesList:[],
      prop:{
        label:'name',
        value:'id',
      },
      loading:false,
      dataList:[],
      dicts:['safety_check_status'],
      //控制上拉加载
      pullup:false,
      finishList:[],
      unfinishedList:[],
    }
  },
  mounted() {
    this.initData();
  },
  computed:{
    ...mapGetters(['orgId','dictionary']),
  },
  watch:{
    'query.checkOrgId':{
      handler(v){
        this.getRoleList();
      }
    }
  },
  methods: {
    formatDate,
    changeList(item,type){
      this.$set(item,'active',type);
    },
    refreshData(){
      this.query.pageNum = 1;
      this.pullup = false;
      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(){
      let data = {
        ...this.query
      }
      if(!this.query.checkOrgId) return this.$toast('请选择机构');
      dataList(data).then(res=>{
        this.dataList = res.rows.map(v=>{
          v.active = 1
          return v
        });
      })
    }
  }
}
</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>