|
|
@@ -0,0 +1,166 @@
|
|
|
+<template>
|
|
|
+ <div class="problem-item">
|
|
|
+ <NavBar />
|
|
|
+ <div class="page-container">
|
|
|
+ <van-search v-model="query.value" 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.planId" :dataList="planList" :prop="prop" @change="getDataList"/>
|
|
|
+ <date-cell title="发现日期" v-model="query.date" date-type="year-month" @change="getDataList"/>
|
|
|
+ </div>
|
|
|
+ <div class="card-list">
|
|
|
+ <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>
|
|
|
+ <div class="card-num" v-if="v.finishRate ===''">
|
|
|
+ {{v.finishRate}}
|
|
|
+ </div>
|
|
|
+ <van-button v-else hairline size="mini" type="info" @click="clickItem">信息状态</van-button>
|
|
|
+ </template>
|
|
|
+ <template #label>
|
|
|
+ <div class="info-box">
|
|
|
+ <div class="info-item">隐患描述：{{v.shouldFinish}}</div>
|
|
|
+ <div class="info-item">发现日期：{{v.finish}}</div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </van-cell>
|
|
|
+ </van-cell-group>
|
|
|
+ </template>
|
|
|
+ </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:{
|
|
|
+ value: '',
|
|
|
+ date:null,
|
|
|
+ orgId:null,
|
|
|
+ planId:null,
|
|
|
+ },
|
|
|
+ planList:[],
|
|
|
+ prop:{
|
|
|
+ label:'name',
|
|
|
+ value:'id',
|
|
|
+ },
|
|
|
+ loading: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:[]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.initData();
|
|
|
+ },
|
|
|
+ computed:{
|
|
|
+ ...mapGetters(['orgId']),
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ //初始化数据
|
|
|
+ initData(){
|
|
|
+ this.query.orgId = this.orgId;
|
|
|
+ this.getPlanList();
|
|
|
+ },
|
|
|
+ //获取教育计划列表
|
|
|
+ getPlanList(){
|
|
|
+ planList(this.query.orgId).then(res=>{
|
|
|
+ this.planList = res.data;
|
|
|
+ if(res.data.length === 0) return this.$toast('暂无教育计划');
|
|
|
+ this.query.planId = res.data[0].id;
|
|
|
+ this.query.date = formatDate(new Date(),'YYYY-MM');
|
|
|
+ this.getDataList();
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //获取数据列表
|
|
|
+ getDataList(){
|
|
|
+ let data = {
|
|
|
+ ...this.query
|
|
|
+ }
|
|
|
+ data.date = this.query.date && `${this.query.date}-01`;
|
|
|
+ if(!this.query.orgId) return this.$toast('请选择机构');
|
|
|
+ dataList(data).then(res=>{
|
|
|
+ this.dataList = res.data;
|
|
|
+ })
|
|
|
+ },
|
|
|
+ clickItem(){
|
|
|
+ this.$router.push('/problemDetail');
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</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-item{
|
|
|
+ height: 50px;
|
|
|
+ line-height: 50px;
|
|
|
+}
|
|
|
+</style>
|
凉纪