303 lines
7.1 KiB
Vue
303 lines
7.1 KiB
Vue
<template>
|
|
<div class="wrap">
|
|
<div class="navBar">
|
|
<van-nav-bar
|
|
title="案件审核列表"
|
|
left-arrow
|
|
left-arrow-color="#FFFFFF"
|
|
:border="false"
|
|
:fixed="true"
|
|
:safe-area-inset-top="true"
|
|
@click-left="goPrePage"
|
|
/>
|
|
</div>
|
|
<div class="tab_wrap">
|
|
<div v-for="(item, index) in tabArr" :key="index"
|
|
@click="changeTab(index)">
|
|
<span :class="{'active' : activeIndex == index , 'alpha' :true}"> {{ item.name }}</span>
|
|
<span class="numTip" style="opacity: 1 !important;">{{item.num}}</span>
|
|
</div>
|
|
</div>
|
|
<van-pull-refresh class="refresh" v-model="isLoading" @refresh="onRefresh" v-show="!show">
|
|
<div class="listWrap">
|
|
<div class="listItem" v-for="(item,index) in pageList" :key="index" @click="goPageDetail(item.id)">
|
|
<div class="line1">
|
|
<div><span>案件编号:</span><span>{{ item.userOrderCode }}</span></div>
|
|
<div class="right">
|
|
<img class="commonImg" :src="getStatus(item.state.code)">
|
|
<div :class="getStatusColor(item.state.code)">{{item.state.label}}</div>
|
|
<img class="rightArrImg" src="@/assets/list_rightArrow.png">
|
|
</div>
|
|
</div>
|
|
<div><span>报销金额:</span><span>{{ item.reimburseAmount }}元</span></div>
|
|
<div v-show="activeIndex == 2"><span>审核备注:</span><span style="color: #FF5D2E">{{ item.auditRemark }}</span></div>
|
|
</div>
|
|
</div>
|
|
|
|
</van-pull-refresh>
|
|
<div class="bgEmptyImg" v-show="show" >
|
|
<img src="@/assets/empty.png" />
|
|
</div>
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
import {myMixins} from "@/utils/myMixins";
|
|
import {reimburseBatchOrderCount,reimburseBatchOrderList } from "@/api/reimbursementBatch";
|
|
export default {
|
|
name: "caseAuditList",
|
|
mixins: [myMixins],
|
|
data(){
|
|
return{
|
|
tabArr: [{name: '待审核', status: 1,num:0}, {name: '审核通过', status: 2,num:0},{name: '审核不通过', status: 2,num:0},],
|
|
activeIndex: 0,
|
|
pageList:[],
|
|
pageNum:1,
|
|
pageSize:10,
|
|
id:'',//批次id
|
|
isLoading:"",
|
|
}
|
|
},
|
|
computed:{
|
|
show() {
|
|
return (this.pageList.length < 0 || this.pageList.length == 0); // 判断数组长度是否大于 0
|
|
},
|
|
},
|
|
created() {
|
|
|
|
},
|
|
async mounted() {
|
|
// console.log("this.$route.params.batchCode",this.$route.params.batchCode)
|
|
this.id = this.$route.params.id || this.$route.params.batchCode;
|
|
this.activeIndex=this.$route.params?.activeIndex || 0
|
|
await this.batchOrderCount();
|
|
await this.getList()
|
|
},
|
|
methods:{
|
|
goPrePage(){
|
|
this.$router.push({ name: 'caseList', });
|
|
},
|
|
onRefresh() {
|
|
this.getList()
|
|
setTimeout(() => {
|
|
this.$toast('刷新成功');
|
|
this.isLoading = false;
|
|
}, 1000);
|
|
},
|
|
async changeTab(index) {
|
|
this.activeIndex = index
|
|
this.pageNum = 1
|
|
this.pageList = [];
|
|
await this.getList()
|
|
},
|
|
async getList(){
|
|
let res=await reimburseBatchOrderList ({
|
|
pageNum:this.pageNum,
|
|
pageSize:this.pageSize,
|
|
batchCode:this.id,
|
|
type: this.activeIndex+1
|
|
})
|
|
this.pageList=res.data
|
|
},
|
|
async batchOrderCount(){
|
|
let res =await reimburseBatchOrderCount({
|
|
batchCode:this.id
|
|
})
|
|
this.tabArr.forEach(tab => {
|
|
if (tab.name === '待审核') {
|
|
tab.num = res.data.waitAuditCount;
|
|
} else if (tab.name === '审核通过') {
|
|
tab.num = res.data.auditSuccessCount;
|
|
}else{
|
|
tab.num = res.data.auditFailCount;
|
|
}
|
|
});
|
|
},
|
|
goPageDetail(id){
|
|
this.$router.push({
|
|
name: 'caseDetail', // 目标路由的名称
|
|
params: {
|
|
id:id,
|
|
index:this.activeIndex,
|
|
batchCode:this.id,
|
|
}
|
|
});
|
|
|
|
},
|
|
getStatus(i){
|
|
switch (i){
|
|
case 0://待提交
|
|
case 1://待审核
|
|
return require('@/assets/waitSubmit.png')
|
|
case 2://审核通过
|
|
case 7://已打款
|
|
return require('@/assets/dakuan.png')
|
|
case 3://审核不通过
|
|
return require('@/assets/unpass.png')
|
|
case 4://报销失败
|
|
return require('@/assets/unSubmit.png')
|
|
case 6://代打款
|
|
return require('@/assets/waitDakuan.png')
|
|
default:
|
|
return require('@/assets/waitSubmit.png')
|
|
}
|
|
},
|
|
getStatusColor(i){
|
|
switch (i){
|
|
case 0://待提交
|
|
case 1://待审核
|
|
return 'yelColor'
|
|
case 2://审核通过
|
|
case 6://代打款
|
|
case 7://已打款
|
|
return 'greColor'
|
|
case 3://审核不通过
|
|
return 'oraColor'
|
|
case 4://报销失败
|
|
return 'garyColor'
|
|
default:
|
|
return 'yelColor'
|
|
}
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import "@/styles/mixin.scss";
|
|
@import "@/styles/common.scss";
|
|
.refresh{
|
|
min-height: 100%;
|
|
background-color: #F4F5F7;
|
|
}
|
|
.wrap{
|
|
@include wh(100%,100%);
|
|
box-sizing: border-box;
|
|
}
|
|
.navBar{
|
|
margin-bottom: 46px;
|
|
}
|
|
/*::v-deep .van-nav-bar__content{
|
|
background-color: #354683 !important;
|
|
}*/
|
|
.tab_wrap {
|
|
@include fontWeightSize(500, 14px);
|
|
@include flexColAround();
|
|
padding: 2px 0 10px 0;
|
|
background: #2C395F;
|
|
div {
|
|
padding-top: 8px;
|
|
color: #FFFFFF;
|
|
}
|
|
.alpha{
|
|
opacity: 0.5;
|
|
}
|
|
.numTip{
|
|
display: inline-block;
|
|
@include wh(15px,15px);
|
|
@include bgcolorOpa(#F95B45,0.9);
|
|
border-radius: 4px;
|
|
text-align: center;
|
|
line-height: 15px;
|
|
margin-left: 5px;
|
|
opacity: 1; /* 保持透明度为1 */
|
|
}
|
|
.active {
|
|
position: relative;
|
|
opacity: 1;
|
|
}
|
|
.active:after {
|
|
content: '';
|
|
display: block;
|
|
@include wh(18px,2px);
|
|
opacity: .8;
|
|
background: #FFFFFF;
|
|
position: absolute;
|
|
border-radius: 2px;
|
|
margin-top: 3px;
|
|
left: 50%;
|
|
opacity: 1;
|
|
transform: translateX(-50%);
|
|
}
|
|
}
|
|
::v-deep .van-pull-refresh{
|
|
height: calc(100% - 86px) ;
|
|
}
|
|
.listWrap{
|
|
width: 100%;
|
|
//height: calc(100% - 86px);
|
|
height: 100%;
|
|
overflow-y: auto;
|
|
|
|
.listItem{
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 14px 25px 13px 29px;
|
|
background-color: #FFFFFF;
|
|
margin-bottom: 10px;
|
|
.line1{
|
|
@include flexColBet();
|
|
.viewBtn{
|
|
@include wh(48px,18px);
|
|
text-align: center;
|
|
line-height: 18px;
|
|
background: #354D93;
|
|
border-radius: 3px;
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
div{
|
|
line-height: 27px;
|
|
span:first-child{
|
|
display: inline-block;
|
|
width: 60px;
|
|
opacity: 0.5;
|
|
}
|
|
.right{
|
|
@include flexCenter();
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.bgEmptyImg{
|
|
@include flexTwoCenter;
|
|
height: 90% ;
|
|
background-color: #FAFAFA;
|
|
img{
|
|
width: 100%;
|
|
}
|
|
}
|
|
.greColor{
|
|
color:#38AD00 ;
|
|
font-weight: 500;
|
|
}
|
|
.redColor{
|
|
color:#FF5D2E ;
|
|
font-weight: 500;
|
|
}
|
|
.commonImg{
|
|
@include widHeiMar(13px,13px,4px);
|
|
}
|
|
.rightArrImg{
|
|
@include wh(6px,9px);
|
|
margin-left: 6px;
|
|
}
|
|
.yelColor{
|
|
color: #E69B0B;
|
|
font-weight: 600;
|
|
}
|
|
.greColor{
|
|
color: #56B628;
|
|
font-weight: 600;
|
|
}
|
|
.oraColor{
|
|
color: #FF5D2E;
|
|
font-weight: 600;
|
|
}
|
|
.garyColor{
|
|
color: #9C9C9C;
|
|
font-weight: 600;
|
|
}
|
|
</style>
|