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

<template>
  <div class="problem-item">
    <NavBar />
    <div class="page-container">
      <van-search v-model="query.searchKey" class="van-hairline--bottom" placeholder="请输入搜索关键词" />
      <org-tree v-model="query.orgId"  @change="getDataList"></org-tree>
      <div class="search-flex">
        <select-cell class="van-hairline--right" title="确认状态" v-model="query.confirmStatus" :data-list="getDictItem('question_confirm_status')" @change="getDataList"/>
        <date-cell title="发现日期"  v-model="query.submitTime" date-type="date" @change="getDataList"/>
      </div>
      <div class="card-list">
<!--        <van-list-->
<!--          v-model="loading"-->
<!--          :finished="finished"-->
<!--          finished-text="没有更多了"-->
<!--          @load="getDataList"-->
<!--        >-->
          <van-empty description="暂无数据" v-if="!dataList || dataList.length === 0" />
            <template v-else>
              <van-cell-group  v-for="(v,i) in dataList">
                <van-cell :title="v.orgName">
                  <template #extra>
                    <van-button
                      style="width: 60px;"
                      v-if="v.orgId==orgId && v.confirmStatus==0"
                      hairline
                      size="mini"
                      type="info"
                      @click.stop="clickItem(v.id,'confirm')">
                      隐患确认
                    </van-button>
                    <van-button
                      style="width: 60px;"
                      v-if="v.submitorId== id && v.confirmStatus==1"
                      hairline
                      size="mini"
                      type="info"
                      @click.stop="clickItem(v.id,'confirmDissent')">
                      异议审批
                    </van-button>
                    <van-button
                      style="width: 60px;"
                      v-if="v.orgId==orgId && v.confirmStatus==2 && v.reformStatus==10"
                      hairline
                      size="mini"
                      type="info"
                      @click.stop="clickItem(v.id,'reform')">
                      整改
                    </van-button>
                    <van-button
                      style="width: 60px;"
                      v-if="v.confirmStatus ===3"
                      hairline
                      size="mini"
                      type="info"
                      @click.stop="clickItem(v.id,'detail')">
                      详情
                    </van-button>
                  </template>
                  <template #label>
                    <div class="info-box">
                      <div class="info-desc">隐患描述：<span>{{v.questionDesc}}</span></div>
                      <div class="info-item">发现日期：<span>{{v.submitTime}}</span></div>
                    </div>
                  </template>
                </van-cell>
              </van-cell-group>
            </template>
<!--        </van-list>-->
      </div>
    </div>
  </div>
</template>
<script>
import NavBar from '@/components/NavBar'
import OrgTree from '@/components/orgTree'
import dateCell from '@/components/dateCell'
import selectCell from '@/components/selectCell'
import {dataList,planList} from './api'
import {mapGetters} from "vuex";
import {formatDate} from "@/filters/filter";
export default {
  components: {
    NavBar,
    OrgTree,
    dateCell,
    selectCell
  },
  data() {
    return {
      query:{
        submitTime:null,
        orgId:null,
        confirmStatus:'0',
        pageSize:20,
        pageNum:1,
      },
      planList:[],
      loading:false,
      finished:false,
      columns:[
        {
          field: "index",
          key: "index",
          title: "序号",
          width: 50,
          align: "center",
          renderBodyCell: ({ row, column, rowIndex }, h) => {
            return ++rowIndex;
          },
        },
        { field: "orgName", key: "a", title: "单位名称",align: "center"},
        { field: "shouldFinish", key: "b", title: "应完成数", align: "center" },
        { field: "finish", key: "c", title: "已完成数",align: "center" },
        { field: "finishRate", key: "d", title: "完成率", align: "center" },
      ],
      dataList:[],
      dicts:['question_confirm_status','question_reform_status']
    }
  },
  mounted() {
    this.initData();
  },
  computed:{
    ...mapGetters(['orgId','id','dictionary']),
  },
  methods: {
    //初始化数据
    initData(){
      this.query.orgId = this.orgId;
      this.query.submitTime = formatDate(new Date(),'YYYY-MM-DD');
      this.getDataList();
    },
    //获取数据列表
    getDataList(){
      let data = {
        ...this.query
      }
      if(!this.query.orgId) return this.$toast('请选择机构');
      dataList(data).then(res=>{
        this.loading = false;
        this.dataList = [...this.dataList,...res.rows];
        this.query.pageNum = res.pageNum;
      })
    },
    clickItem(id,type){
      this.$router.push({
        path:'/problemDetail',
        query:{
          id,type
        }
      });
    }
  }
}
</script>
<style lang="scss">
.van-cell-group{
  margin-bottom: 20px;
}
.van-cell-group:last-child{
  margin-bottom: 0;
}
.vue-table-root{
  tr,td,th{
    font-size: 25px!important;
    color:#666!important;
  }
}
</style>
<style lang="scss" scoped>
.problem-item{

}
.app-container{

}
.card-list{
  padding: 20px;
  height: calc(100vh - 420px);
  overflow:  auto;
}
.card-num{
  display: flex;
  align-items: center;
  font-size: 28px;
  color: #009dff;
}
.search-flex{
  display: flex;
  align-items: center;
  justify-content: space-between;
  >div{
    width: 50%;
  }
}
.info-box{
  color:#555;
}
.info-desc{
  padding-top: 10px;
  min-height: 50px;
  line-height: 36px;
  max-height: 250px;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 限制显示为3行 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  >span{
    color:#999;
  }
}
.info-item{
  height: 50px;
  line-height: 50px;
  >span{
    color:#999;
  }
}
</style>