328 lines
8.7 KiB
Vue
328 lines
8.7 KiB
Vue
<template>
|
||
<div class="wrap" :style="`backgroundColor: ${show ? '#FAFAFA' : '#F4F5F7'};`">
|
||
<div class="navBar">
|
||
<van-nav-bar
|
||
title="工单对账"
|
||
left-arrow
|
||
left-arrow-color="#FFFFFF"
|
||
:border="false"
|
||
:fixed="true"
|
||
:safe-area-inset-top="true"
|
||
@click-left="goBack"
|
||
>
|
||
<template slot="right">
|
||
<div class="rightWrap" @click="showDatetime = !showDatetime">
|
||
<span class="dateTitle">{{ ymTime }}</span>
|
||
<img src="@/assets/line.png" class="img1"/>
|
||
<img src="@/assets/arrow_bottom.png" class="img2"/>
|
||
</div>
|
||
</template>
|
||
</van-nav-bar>
|
||
</div>
|
||
<van-datetime-picker
|
||
class="dataTime"
|
||
v-if="showDatetime"
|
||
v-model="currentDate"
|
||
type="year-month"
|
||
@confirm="onConfirm"
|
||
@cancel="showDatetime = false"
|
||
/>
|
||
<div class="tab_wrap">
|
||
<div v-for="(item, index) in tabArr" :key="index" :class="{'active' : activeIndex == index}"
|
||
@click="changeTab(index)">
|
||
{{ item.name }}
|
||
</div>
|
||
</div>
|
||
|
||
<van-pull-refresh v-model="isLoading" @refresh="onRefresh" v-show="!show">
|
||
<div >
|
||
<div class="content_wrap" v-for="(item,index) in orderList" :key="index">
|
||
<div class="codeTxt common">
|
||
<div class="leftStatus ">
|
||
<span style="margin-right: 20px" class="orderCode">{{item.orderCode}}</span>
|
||
<span class="carCode">{{ item.plateNumber }}</span>
|
||
</div>
|
||
<div class="rightBtn">
|
||
<span class="serviceStatus">{{ item.taskStatus?.label }}</span>
|
||
</div>
|
||
</div>
|
||
<div class="line"></div>
|
||
<div class="supplier">
|
||
<span class="halfTxt">服务商:</span>
|
||
<span class="allTxt">{{ item.supplierName }}</span>
|
||
</div>
|
||
<div class="status common">
|
||
<div class="leftStatus" >
|
||
<span class="halfTxt">审核状态:</span>
|
||
<span class="allTxt">{{ item.accountStatus?.label }}</span>
|
||
</div>
|
||
<div class="rightBtn">
|
||
<button class="btn" v-if="queryType == 1" @click="handleAccounting(item)">记账</button>
|
||
<button class="btn" v-if="queryType == 3" @click="handleAccounting(item)">{{item.accountStatus.code == 3 ? '重新记账' : '记账'}}</button>
|
||
<button class="btn" v-if="queryType == 5" @click="handleAccounting(item)">重新记账</button>
|
||
<button class="btn" v-if="queryType == 7" @click="goPageDetail(item)">查看详情</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</van-pull-refresh>
|
||
<div style="height: 85% ;background-color: #FAFAFA;display: flex;justify-content: center;align-items: center" v-show="show" >
|
||
<img style="width: 100%" src="@/assets/empty.png" />
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import {myMixins} from "@/utils/myMixins"
|
||
import {accountRecordList} from "@/api/mine"
|
||
import {timeFormat} from "@/utils/common"
|
||
export default {
|
||
name: "workOrderReconciliation",
|
||
mixins: [myMixins],
|
||
data() {
|
||
return {
|
||
tabArr: [{name: '待记账', status: 1}, {name: '待审核', status: 3}, {name: '审核失败', status: 5}, {name: '审核完成', status: 7}],
|
||
activeIndex: 0,
|
||
orderList: [],
|
||
pageNum: 1,
|
||
pageSize: 10,
|
||
total: 0,
|
||
queryType:1,
|
||
queryTime:'',
|
||
showDatetime: false,
|
||
currentDate: new Date(),
|
||
ymTime: '',
|
||
isLoading:"",
|
||
// show:false
|
||
}
|
||
},
|
||
mounted() {
|
||
this.activeIndex=this.$route.params?.activeIndex || 0
|
||
this.queryType=this.$route.params?.queryType || this.queryType
|
||
this.initIndex()
|
||
this.initSelectTime();
|
||
this.getList();
|
||
},
|
||
computed:{
|
||
show() {
|
||
return (this.orderList.length < 0 || this.orderList.length == 0); // 判断数组长度是否大于 0
|
||
},
|
||
},
|
||
methods: {
|
||
onRefresh() {
|
||
this.getList()
|
||
setTimeout(() => {
|
||
this.$toast('刷新成功');
|
||
this.isLoading = false;
|
||
}, 1000);
|
||
},
|
||
initIndex(){
|
||
if(this.activeIndex === 0){
|
||
this.queryType = 1
|
||
}else if(this.activeIndex === 1){
|
||
this.queryType = 3
|
||
}else if(this.activeIndex === 2){
|
||
this.queryType = 5
|
||
}else if(this.activeIndex === 3){
|
||
this.queryType = 7
|
||
}
|
||
},
|
||
async changeTab(index) {
|
||
this.activeIndex = index
|
||
this.initIndex()
|
||
this.total = 0;
|
||
this.pageNum = 1
|
||
this.orderList = [];
|
||
await this.getList()
|
||
},
|
||
async getList(){
|
||
let res = await accountRecordList({
|
||
pageNum:this.pageNum,
|
||
pageSize:this.pageSize,
|
||
queryType:this.queryType,
|
||
queryTime:this.queryTime
|
||
})
|
||
if(res.code === 200){
|
||
this.orderList = res.data;
|
||
}
|
||
},
|
||
handleAccounting(item){
|
||
this.$router.push({
|
||
name: 'accountingView', // 目标路由的名称
|
||
params: {
|
||
id: item.id, // 参数对象的属性
|
||
postfix:item.postfix,
|
||
index:this.activeIndex
|
||
}
|
||
});
|
||
},
|
||
goPageDetail(item){
|
||
this.$router.push({
|
||
name: 'aduitCompleteDetail', // 目标路由的名称
|
||
params: {
|
||
id: item.id, // 参数对象的属性
|
||
postfix:item.postfix,
|
||
index:this.activeIndex,
|
||
}
|
||
});
|
||
},
|
||
async onConfirm(value) {
|
||
this.showDatetime = false
|
||
const date = new Date(value);
|
||
const year = date.getFullYear(); // 获取年份，结果为 2023
|
||
const month = (date.getMonth() + 1).toString().padStart(2, '0'); // 获取月份，需要注意月份从 0 开始，所以要加 1，结果为 9
|
||
this.ymTime = year + '-' + month
|
||
this.queryTime=timeFormat(value);
|
||
this.orderList = [];
|
||
await this.getList();
|
||
},
|
||
initSelectTime() {//初始化查询时间
|
||
const year = this.currentDate.getFullYear(); // 获取年份，结果为 2023
|
||
const month = (this.currentDate.getMonth() + 1).toString().padStart(2, '0'); // 获取月份，需要注意月份从 0 开始，所以要加 1，结果为 9
|
||
this.ymTime = year + '-' + month;
|
||
this.queryTime=timeFormat(new Date());
|
||
// console.log(this.queryTime)
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
@import "@/styles/common.scss";
|
||
@import "@/styles/mixin.scss";
|
||
|
||
.wrap {
|
||
@include wh(100%, 100%);
|
||
//background: #F4F5F7;
|
||
box-sizing: border-box;
|
||
padding: 0 12px;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.dataTime {
|
||
position: absolute;
|
||
z-index: 11;
|
||
top: 46px;
|
||
right: 0;
|
||
width: 200px;
|
||
}
|
||
|
||
.navBar {
|
||
margin-bottom: 46px;
|
||
|
||
.rightWrap {
|
||
@include flexCenter;
|
||
justify-content: space-around;
|
||
@include wh(106px, 26px);
|
||
background: linear-gradient(180deg, #A3B8E9 0%, #6C81CD 100%);
|
||
border-radius: 4px;
|
||
border: 1px solid;
|
||
border-image: linear-gradient(270deg, rgba(103, 122, 193, 1), rgba(160, 178, 226, 1), rgba(160, 178, 226, 1), rgba(103, 122, 193, 1)) 1 1;
|
||
|
||
.img1 {
|
||
@include wh(1px, 18px)
|
||
}
|
||
|
||
.img2 {
|
||
@include wh(7px, 5px)
|
||
}
|
||
|
||
.dateTitle {
|
||
@include fontWeightSize(bolder, 12px);
|
||
color: #FFFFFF;
|
||
opacity: .9;
|
||
}
|
||
}
|
||
}
|
||
|
||
.tab_wrap {
|
||
@include fontWeightSize(bolder, 15px);
|
||
display: flex;
|
||
justify-content: space-around;
|
||
padding: 10px 0 15px 0;
|
||
color: #737373;
|
||
opacity: .7;
|
||
div {
|
||
padding-top: 8px;
|
||
}
|
||
.active {
|
||
color: #3678FF;
|
||
position: relative;
|
||
}
|
||
.active:after {
|
||
content: '';
|
||
display: block;
|
||
width: 18px;
|
||
height: 3px;
|
||
background: linear-gradient(270deg, #33A3FF 0%, #176AFE 100%);
|
||
border-radius: 2px;
|
||
position: absolute;
|
||
margin-top: 3px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
}
|
||
}
|
||
|
||
.content_wrap {
|
||
@include wh(100%, 96px);
|
||
background: #FFFFFF;
|
||
box-shadow: 0px 1px 4px 0px rgba(39, 52, 125, 0.05);
|
||
border-radius: 6px;
|
||
border: 1px solid #E6E6E6;
|
||
backdrop-filter: blur(5.602678571428572px);
|
||
@include flexBetween;
|
||
box-sizing: border-box;
|
||
padding: 10px 0;
|
||
margin-bottom: 10px;
|
||
.common {
|
||
@include flexColBet();
|
||
margin-left: 18px;
|
||
margin-right: 14px;
|
||
|
||
}
|
||
|
||
.line {
|
||
@include wh(100%, 1px);
|
||
background: #E9E9EA;
|
||
opacity: 0.6;
|
||
}
|
||
|
||
.supplier {
|
||
margin-left: 18px;
|
||
margin-right: 14px;
|
||
}
|
||
|
||
.btn {
|
||
//@include wh(48px, 18px);
|
||
@include all-height(20px);
|
||
text-align: center;
|
||
@include bgFontColor(#FFFFFF, #354D93);
|
||
border-radius: 3px;
|
||
border: none;
|
||
}
|
||
|
||
.halfTxt {
|
||
display: inline-block;
|
||
width: 55px;
|
||
@include fontWeightSize(400, 12px);
|
||
opacity: .5;
|
||
}
|
||
|
||
.allTxt {
|
||
@include fontWeightSize(400, 12px)
|
||
}
|
||
|
||
.orderCode {
|
||
@include fontWeightSize(bold, 13px)
|
||
}
|
||
|
||
.carCode {
|
||
@include fontWeightSize(bold, 12px)
|
||
}
|
||
|
||
.serviceStatus {
|
||
@include fontWeightSize(bolder, 13x);
|
||
color: #09B820;
|
||
}
|
||
}
|
||
</style> |