|
|
@@ -6,39 +6,30 @@
|
|
|
<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>
|
|
|
+ <van-row>
|
|
|
+ <van-col span="24">
|
|
|
+ <org-tree v-model="query.beCheckedOrgId" clearable placeholder="选择受检机构" @change="refreshData"></org-tree>
|
|
|
+ </van-col>
|
|
|
+ </van-row>
|
|
|
+ </div>
|
|
|
+ <div class='search-flex'>
|
|
|
+ <search-select-cell
|
|
|
+ class="van-hairline--right"
|
|
|
+ title="检查角色"
|
|
|
+ v-model="query.roldIds"
|
|
|
+ :dataList="rolesList"
|
|
|
+ :prop="prop"
|
|
|
+ @change="refreshData"/>
|
|
|
+ <date-cell title="日期" v-model="query.taskTime" date-type="date" @change="refreshData"/>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
- <div class="van-hairline--bottom">
|
|
|
- <search-select-cell
|
|
|
- title="检查角色"
|
|
|
- v-model="query.roleIds"
|
|
|
- :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"
|
|
|
@@ -46,28 +37,59 @@
|
|
|
@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>
|
|
|
+ <card class="list-item" v-for="(v,i) in dataList" :key="v.planId">
|
|
|
+ <div class="item-title">
|
|
|
+ <van-cell :title="v.taskName" :border="false" :label="rangDate(formatDate(v.planStartTime,'DATE'),formatDate(v.planEndTime,'DATE'))" ></van-cell>
|
|
|
+ <div class="collapse-title">
|
|
|
+ <div :class="{'active':v.active==2}" @click.stop="changeList(v,2)">
|
|
|
+ <p> {{v.uncompleted.length}}</p>
|
|
|
+ <p>未完成</p>
|
|
|
+ </div>
|
|
|
+ <div :class="{'active':v.active==1}" @click.stop="changeList(v,1)">
|
|
|
+ <p>{{v.completed.length}}</p>
|
|
|
+ <p>完成</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="check-item-list">
|
|
|
+ <van-empty v-if="v.active==1? v.completed.length == 0 : v.uncompleted.length == 0" />
|
|
|
+ <van-cell
|
|
|
+ v-else
|
|
|
+ v-for="(a,index) in v.active==1? v.completed:v.uncompleted" :key="a.taskId"
|
|
|
+ :title="a.beCheckedOrgName"
|
|
|
+ :to="{path:path,query:{id:a.taskId,enable:1}}">
|
|
|
+ <template #right-icon>
|
|
|
+ <div>
|
|
|
+ <span style="color:#bbbbbb;" v-if="getDictLabel(a.status,'safety_check_status') == '待检查'">{{getDictLabel(a.status,'safety_check_status')}}</span>
|
|
|
+ <span style="color:#008cd6;" v-if="getDictLabel(a.status,'safety_check_status') == '进行中'">{{getDictLabel(a.status,'safety_check_status')}}</span>
|
|
|
+ <span style="color:#009240;" v-if="getDictLabel(a.status,'safety_check_status') == '完成'">{{getDictLabel(a.status,'safety_check_status')}}</span>
|
|
|
+ <span style="color:#D7000F;" v-if="getDictLabel(a.status,'safety_check_status') == '已过期'">{{getDictLabel(a.status,'safety_check_status')}}</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </van-cell>
|
|
|
+ </div>
|
|
|
+ </card>
|
|
|
+<!-- <card class="list-item" v-for="(v,i) in dataList" :key="v.planId">-->
|
|
|
+<!-- <van-cell :title="v.taskName" :label="rangDate(formatDate(v.planStartTime,'DATE'),formatDate(v.planEndTime,'DATE'))" ></van-cell>-->
|
|
|
+<!-- <van-collapse v-model="active" @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>-->
|
|
|
+<!-- </card>-->
|
|
|
</Scroll>
|
|
|
</div>
|
|
|
|
|
|
@@ -77,7 +99,7 @@
|
|
|
<script>
|
|
|
import NavBar from '@/components/NavBar'
|
|
|
import OrgTree from '@/components/orgTree'
|
|
|
-import KList from '@/components/list'
|
|
|
+import Card from '@/components/card'
|
|
|
import DateCell from '@/components/dateCell'
|
|
|
import SelectCell from '@/components/selectCell'
|
|
|
import SearchSelectCell from '@/components/Yselectcell'
|
|
|
@@ -89,10 +111,10 @@ export default {
|
|
|
components: {
|
|
|
NavBar,
|
|
|
OrgTree,
|
|
|
+ Card,
|
|
|
DateCell,
|
|
|
SelectCell,
|
|
|
SearchSelectCell,
|
|
|
- KList,
|
|
|
Scroll
|
|
|
},
|
|
|
data() {
|
|
|
@@ -104,8 +126,8 @@ export default {
|
|
|
taskTime: `${formatDate(new Date(),'YYYY-MM-DD')}`,
|
|
|
checkOrgId:null,
|
|
|
beCheckedOrgId:null,
|
|
|
- roleIds:[],
|
|
|
- state:'1',
|
|
|
+ roldIds:[],
|
|
|
+ // state:'1',
|
|
|
pageNum:1,
|
|
|
pageSize:10,
|
|
|
},
|
|
|
@@ -135,23 +157,23 @@ export default {
|
|
|
methods: {
|
|
|
formatDate,
|
|
|
changeOrgId(){
|
|
|
- console.log(123,'2131')
|
|
|
- this.query.roleIds = [];
|
|
|
+ this.query.roldIds = [];
|
|
|
this.getRoleList();
|
|
|
this.refreshData();
|
|
|
},
|
|
|
collapseChange(){
|
|
|
console.log('collapseChange')
|
|
|
this.$nextTick(()=>{
|
|
|
- this.$refs.Scroll.refresh();
|
|
|
+ //this.$refs.Scroll.refresh();
|
|
|
})
|
|
|
},
|
|
|
changeList(item,type){
|
|
|
this.$set(item,'active',type);
|
|
|
- //this.$refs.Scroll.refresh();
|
|
|
+ this.$nextTick(()=>{
|
|
|
+ //this.$refs.Scroll.refresh();
|
|
|
+ })
|
|
|
},
|
|
|
refreshData(){
|
|
|
- console.log('sadad')
|
|
|
this.pullup = true;
|
|
|
this.query.pageNum = 1;
|
|
|
this.total = 0;
|
|
|
@@ -169,6 +191,7 @@ export default {
|
|
|
})
|
|
|
},
|
|
|
getDataList(){
|
|
|
+ console.log(123123123)
|
|
|
if( this.dataList.length !== 0 && this.dataList.length >= this.total) {
|
|
|
this.pullup = false;
|
|
|
this.$toast('已加载完毕');
|
|
|
@@ -185,40 +208,51 @@ export default {
|
|
|
return
|
|
|
}
|
|
|
this.total = res.total;
|
|
|
+ let arr = res.rows.map(v=>{
|
|
|
+ v.active = 2
|
|
|
+ return v
|
|
|
+ });
|
|
|
+ console.log(arr,'arr')
|
|
|
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.dataList = [...this.dataList,...arr];
|
|
|
+ console.log(111)
|
|
|
this.pullup = true;
|
|
|
this.query.pageNum++;
|
|
|
+ //this.$refs.Scroll.refresh();
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
- 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;
|
|
|
+ .item-title{
|
|
|
+ >.van-cell{
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
}
|
|
|
- .van-cell-group:last-child{
|
|
|
- margin-bottom: 0;
|
|
|
+ .van-empty{
|
|
|
+ padding: 0;
|
|
|
+ .van-empty__image{
|
|
|
+ width: 160px;
|
|
|
+ height: 160px;
|
|
|
+ }
|
|
|
}
|
|
|
- .van-collapse-item__wrapper{
|
|
|
- overflow: visible;
|
|
|
+ .check-item-list{
|
|
|
+ >.van-cell{
|
|
|
+ padding: 20px;
|
|
|
+ .van-cell__title{
|
|
|
+ flex:2;
|
|
|
+ }
|
|
|
+ .van-cell__value{
|
|
|
+ flex:1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .van-cell::after{
|
|
|
+ left: 20px;
|
|
|
+ right: 20px;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -229,6 +263,14 @@ export default {
|
|
|
padding:0 10px;
|
|
|
background-color: #fff;
|
|
|
}
|
|
|
+ .search-flex{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ >div{
|
|
|
+ width: 50%;
|
|
|
+ }
|
|
|
+ }
|
|
|
.org-label{
|
|
|
height: 90px;
|
|
|
width: 100%;
|
|
|
@@ -237,30 +279,55 @@ export default {
|
|
|
font-size: 28px;
|
|
|
}
|
|
|
.card-list{
|
|
|
- height: calc(100vh - 580px);
|
|
|
+ padding:0 20px 20px 20px;
|
|
|
+ height: calc(100vh - 496px);
|
|
|
overflow: auto;
|
|
|
}
|
|
|
.list-item{
|
|
|
padding: 20px;
|
|
|
}
|
|
|
+ .item-title{
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ border-bottom: 1px solid #f5f5f5;
|
|
|
+ padding-bottom: 10px;
|
|
|
+ }
|
|
|
+ .check-item-list{
|
|
|
+ -max-height: 500px;
|
|
|
+ overflow: scroll;
|
|
|
+ }
|
|
|
.card-num{
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
font-size: 28px;
|
|
|
- color: #009dff;
|
|
|
+ color: #008cd6;
|
|
|
}
|
|
|
.collapse-title{
|
|
|
+ width: 50%;
|
|
|
+ margin-left: 10px;
|
|
|
display: flex;
|
|
|
- justify-content: flex-start;
|
|
|
align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
font-size: 28px;
|
|
|
color: #ccc;
|
|
|
>div{
|
|
|
- width: 40%;
|
|
|
- display: flex;
|
|
|
+ width: 100px;
|
|
|
+ font-size: 24px;
|
|
|
+ height: 70px;
|
|
|
+ padding: 5px 10px;
|
|
|
+ border: 3px solid #ccc;
|
|
|
+ border-radius: 10px;
|
|
|
+ >p{
|
|
|
+ height: 28px;
|
|
|
+ line-height: 28px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
}
|
|
|
>div.active{
|
|
|
- color: #009dff;
|
|
|
+ color: #fff;
|
|
|
+ background-color: #008cd6;
|
|
|
+ border: 3px solid #008cd6;
|
|
|
}
|
|
|
}
|
|
|
.flex-box{
|
coys