yxk_h5_master/pages/payApply/payDetail.vue

227 lines
7.7 KiB
Vue

<template>
<view class='page'>
<view class="top_container" style="padding-right: 30upx;clear: both;overflow: auto;">
<view class="report_status" style="float: left;">
<text class="magtext">{{payApply.statusName}}</text>
</view>
<view style="float: right;" v-if="num==1 && payApply.approveState=='1'">
<!-- 待审批和 审批中 -->
<view class="btn" @click="approval()">审批</view>
<!-- <view class="btn" @click="sendMsg()">回复</view> -->
</view>
</view>
<view class="detail_name_container">
<view :class="[current_num==1?'current':'']" @click="changecurrent(1)">付款信息</view>
<view :class="[current_num==2?'current':'']" @click="changecurrent(2)">付款明细</view>
<view :class="[current_num==3?'current':'']" @click="changecurrent(3)">审批流程</view>
</view>
<view v-if="current_num==1">
<view class="myContainer myContentBox">
<view class="top_container">基本信息</view>
<view class="list_item">
<view class="list_item_name">申请日期</view>
<view class="list_item_content content_right">{{payApply.applicationDate||''}}元</view>
</view>
<view class="list_item">
<view class="list_item_name">申请人</view>
<view class="list_item_content content_right">{{payApply.applicantName||''}}</view>
</view>
<view class="list_item">
<view class="list_item_name">申请部门</view>
<view class="list_item_content content_right">{{payApply.applicantDeptName||''}}</view>
</view>
<view class="list_item">
<view class="list_item_name">付款单位</view>
<!-- <view class="list_item_content content_right">{{payApply.pay_date.substr(0,10)||''}}</view> -->
<view class="list_item_content content_right">{{payApply.supplierName||''}}</view>
</view>
<view class="list_item">
<view class="list_item_name">付款日期</view>
<!-- <view class="list_item_content content_right">{{payApply.pay_date.substr(0,10)||''}}</view> -->
<view class="list_item_content content_right">{{payApply.paymentDate||''}}</view>
</view>
<view class="list_item">
<view class="list_item_name">付款事由</view>
<!-- <view class="list_item_content content_right">{{payApply.pay_date.substr(0,10)||''}}</view> -->
<view class="list_item_content content_right">{{payApply.paymentReason||''}}</view>
</view>
</view>
<view class="myCon myContentBox">
<view class="top_container">附件</view>
<view class="img-wrap" v-for="(items,index) in initFileList" :key='index'>
<view class="img-box">
<img :src="config.imgURL+items.filePath" />
</view>
</view>
</view>
</view>
<!-- 付款明细 -->
<view v-else-if="current_num==2">
<view class="myContainer myContentBox" v-for="(item,index) in payApplyItemList" :key='index'>
<view class="list_item">
<view class="list_item_name">应付日期</view>
<view class="list_item_content content_right">{{item.dueDate||''}}</view>
</view>
<view class="list_item">
<view class="list_item_name">应付金额(元)</view>
<view class="list_item_content content_right">{{item.payableAmount||''}}</view>
</view>
<view class="list_item">
<view class="list_item_name">已付金额(元)</view>
<view class="list_item_content content_right">{{item.paidAmount||''}}</view>
</view>
<view class="list_item">
<view class="list_item_name">未付金额(元)</view>
<view class="list_item_content content_right">{{item.unpaidAmount||''}}</view>
</view>
<view class="list_item">
<view class="list_item_name">本次申请付款金额(元)</view>
<view class="list_item_content content_right">{{item.payAmount||''}}</view>
</view>
<view class="list_item">
<view class="list_item_name">备注</view>
<view class="list_item_content content_right">{{item.remark||''}}</view>
</view>
<view class="list_item">
<view class="list_item_name">源单类型</view>
<view class="list_item_content content_right">{{item.sourceTypeName||''}}</view>
</view>
<view class="list_item">
<view class="list_item_name">源单编号</view>
<view class="list_item_content content_right">{{item.sourceCode||''}}</view>
</view>
</view>
</view>
<view v-else-if="current_num==3">
<view class="myCon myContentBox" v-if="approvalList.length>0">
<uni-steps :options="approvalList" :active="active" direction="column" />
</view>
</view>
<view class="goHome" @click='goMain("payInfo")'>
<img src="../../static/img/gohome.png">
</view>
</view>
</template>
<script>
import uniSteps from '@/components/uni-steps/uni-steps.vue'
import {
config
} from '../../request/js/config.js'
export default {
components: {
uniSteps
},
data() {
return {
config: config,
current_num: 1,
id: '',
taskId: '',
instanceId: '',
payApply: {},
initFileList: [],
active: 1,
approvalList: [],
num: 1
}
},
onLoad(option) {
this.id = option.id;
// this.taskId = option.taskId;
this.num = option.num;
// this.instanceId =option.instanceId;
if (this.id == undefined) {
uni.reLaunch({
url: 'payApply'
});
return false;
}
var _this = this;
this.$http.request({
url: '/apis/payApply/detailForApprove/' + option.id,
method: 'GET',
}).then(res => {
console.log(res.data)
if (res.data.code == 0) {
if (res.data.data.payApply.approveState == 0) {
res.data.data.payApply.statusName = "暂存"
} else if (res.data.data.payApply.approveState == 1) {
res.data.data.payApply.statusName = "待审批"
} else if (res.data.data.payApply.approveState == 2) {
res.data.data.payApply.statusName = "已驳回"
} else if (res.data.data.payApply.approveState == 3) {
res.data.data.payApply.statusName = "审批通过"
}
this.payApply = res.data.data.payApply; //基本信息
this.payApplyItemList = res.data.data.payApplyItemList //付款明细
this.initFileList = res.data.data.uploadAttachment; //附件
if(res.data.data.payApply.approveState != 3){//审批通过后就没有这两个与审批流程有关的数据
this.taskId = res.data.data.taskInfo.taskId
this.instanceId = res.data.data.taskInfo.instanceId
}
// 审批流程
res.data.data.progressList.forEach(function(val, index) {
var myjson = {
title: val.approveName + (val.approveState ? val.approveState : '') + (val
.reason ? ('~不通过,原因:' + val.reason) : ''),
desc: val.approveTime ? ('时间:' + val.approveTime) : '时间:-'
}
if (val.isDealed) {
_this.active = index;
}
_this.approvalList.push(myjson);
})
console.log(this.approvalList)
}
}).catch(err => {
uni.showToast({
title: '获取信息失败',
duration: 1000,
icon: "none"
});
});
},
methods: {
//点击审批
approval() {
uni.navigateTo({
url: "approval?id=" + this.id + "&taskId=" + this.taskId + "&type=" + 10 + "&instanceId=" +
this.instanceId
});
},
//回复
sendMsg() {
uni.navigateTo({
url: "sendMsg?id=" + this.id
});
},
changecurrent(num) {
this.current_num = num;
}
},
onBackPress(options) { //取消默认的返回事件.
uni.navigateTo({
url: "payApply"
});
return true;
}
}
</script>
<style scoped>
.btn {
width: 160upx;
height: 68upx;
text-align: center;
line-height: 68upx;
border-radius: 10upx;
background-color: #3382FF;
color: #fff;
font-size: 28upx;
float: left;
margin-right: 30upx;
}
</style>