355 lines
7.4 KiB
Vue
355 lines
7.4 KiB
Vue
<template>
|
|
<view class="new_fllow">
|
|
<view class="fllow_form">
|
|
<view>提交人</view>
|
|
<view class="form_input" >
|
|
<view class="">
|
|
{{info.staff && info.staff.name}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="fllow_form">
|
|
<view>提交时间</view>
|
|
<view class="form_input">
|
|
<view class="">
|
|
{{info.createtime}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="fllow_form">
|
|
<view>关联客户</view>
|
|
<view class="form_input" >
|
|
{{info.customer && info.customer.name}}
|
|
</view>
|
|
</view>
|
|
<view class="fllow_form">
|
|
<view><text>*</text>消费日期</view>
|
|
<picker mode="date" disabled @change="changeTime">
|
|
<view class="form_right">
|
|
<view>{{info.consume_time}}</view>
|
|
<view class="iconfont icon-arrows_right"></view>
|
|
</view>
|
|
</picker>
|
|
</view>
|
|
<view class="fllow_form">
|
|
<view><text>*</text>消费方式</view>
|
|
<view class="form_right">
|
|
<view>{{info.consume_type}}</view>
|
|
<view class="iconfont icon-arrows_right"></view>
|
|
</view>
|
|
</view>
|
|
<view class="fllow_form">
|
|
<view><text>*</text>消费金额</view>
|
|
<view class="form_input" >
|
|
<input type="text" disabled v-model="info.money" placeholder-style="font-size:30rpx;color: #999;" placeholder="消费金额" class="">
|
|
</view>
|
|
</view>
|
|
<view class="fllow_area">
|
|
<view class="area_head">备注</view>
|
|
<textarea v-model="info.remark" disabled placeholder="请输入备注" placeholder-style="color:#999" />
|
|
</view>
|
|
<view class="fllow_form">
|
|
<view>附件</view>
|
|
</view>
|
|
<view class="imglist" v-if="info.files != 0">
|
|
<view class="imgbox" v-for="(item,index) in info.file_text" :key="index">
|
|
<image :src="item" class="selfimg" mode="scaleToFill" @click="previewImg(info.file_text,index)"></image>
|
|
</view>
|
|
</view>
|
|
<!-- 审批流程 -->
|
|
<approval-status :process="payment_approval"></approval-status>
|
|
<view style="height:100rpx;"></view>
|
|
<view class="botbtn" v-if="payment_approval.is_check == 1">
|
|
<view class="btn pass" @click="toPass">通过</view>
|
|
<view class="btn refuse" @click="toRefuse">拒绝</view>
|
|
</view>
|
|
|
|
<view class="editbox" v-if="info.check_status == 3">
|
|
<view class="editbtn" @click="toEdit">修改费用</view>
|
|
</view>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { BASE_URL } from '@/util/api.js'
|
|
import { netSelect, netCostDetail } from '@/api/kehu.js'
|
|
import { netApprovalDetail } from '@/api/index.js'
|
|
import { BASE_IMG_URL } from '@/util/api.js'
|
|
import approvalStatus from '@/components/approvalStatus.vue'
|
|
|
|
export default {
|
|
components:{
|
|
approvalStatus
|
|
},
|
|
data() {
|
|
return {
|
|
id:'', //费用id
|
|
customer_id:'', //客户id
|
|
consume_time:'', //消费日期
|
|
consume_type:'', //消费方式
|
|
money:'', //消费金额
|
|
remark:'', //备注
|
|
file_ids:'', //附件id
|
|
BASE_IMG_URL:BASE_IMG_URL,
|
|
info:{},
|
|
payment_approval:{}, //审批 流程
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
this.id = options.id
|
|
},
|
|
onShow() {
|
|
//获取消费方式
|
|
// this.getType()
|
|
//获取 费用详情
|
|
this.getDetail()
|
|
//获取 审批 流程
|
|
this.getApprovalList()
|
|
},
|
|
//监听 页面 卸载
|
|
onUnload() {
|
|
uni.removeStorageSync('remindlist')
|
|
},
|
|
methods: {
|
|
//获取 审批 流程
|
|
getApprovalList() {
|
|
let params = {
|
|
type: 'consume',
|
|
relation_id: this.id
|
|
}
|
|
netApprovalDetail(params).then(res=>{
|
|
this.payment_approval = res.data
|
|
})
|
|
},
|
|
//获取费用 详情
|
|
getDetail() {
|
|
netCostDetail({id:this.id}).then(res=>{
|
|
this.info = res.data
|
|
})
|
|
},
|
|
//预览图片
|
|
previewImg(arr,index) {
|
|
uni.previewImage({
|
|
urls: arr,
|
|
current:index,
|
|
fail:(err)=>{
|
|
console.log(err)
|
|
}
|
|
})
|
|
},
|
|
//通过
|
|
toPass() {
|
|
uni.navigateTo({ //status 1成功 2失败
|
|
url:'/pages/examine/examine?id='+this.id+'&type=consume&status=1'
|
|
})
|
|
},
|
|
//拒绝
|
|
toRefuse() {
|
|
uni.navigateTo({ //status 1成功 2失败
|
|
url:'/pages/examine/examine?id='+this.id+'&type=consume&status=2'
|
|
})
|
|
},
|
|
//修改费用
|
|
toEdit() {
|
|
uni.navigateTo({
|
|
url:'/pages/index/groupCompany/cost/editCost?id='+this.id
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.new_fllow {
|
|
font-size: 28rpx;
|
|
.fllow_form {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
height: 100rpx;
|
|
line-height: 100rpx;
|
|
background-color: #fff;
|
|
border-bottom: 1rpx solid #EAEAEA;
|
|
padding: 0 24rpx;
|
|
.form_right {
|
|
display: flex;
|
|
color: #999;
|
|
image {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
margin: 28rpx 5rpx 0 0;
|
|
}
|
|
}
|
|
text {
|
|
color: #f00;
|
|
margin-left: 10rpx;
|
|
}
|
|
.form_input {
|
|
input {
|
|
height: 100%;
|
|
// line-height: 100rpx;
|
|
text-align: right;
|
|
margin-right: 10rpx;
|
|
color: #999;
|
|
}
|
|
}
|
|
.fllow_button {
|
|
margin-top: 15rpx;
|
|
}
|
|
}
|
|
.fllow_area {
|
|
background-color: #fff;
|
|
margin-bottom: 30rpx;
|
|
padding-bottom: 30rpx;
|
|
color: #999;
|
|
.area_head {
|
|
height: 100rpx;
|
|
line-height: 100rpx;
|
|
font-size: 32rpx;
|
|
padding: 0 30rpx;
|
|
text {
|
|
color: #f00;
|
|
}
|
|
}
|
|
textarea {
|
|
width: 80%;
|
|
height: 300rpx;
|
|
padding: 30rpx;
|
|
background: #f8f8f8;
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
.follow_task {
|
|
height: 80rpx;
|
|
line-height: 80rpx;
|
|
}
|
|
}
|
|
.imglist{
|
|
padding:24rpx 34rpx;
|
|
background:#fff;
|
|
border-bottom:1rpx solid #EAEAEA;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
.imgbox{
|
|
width:140rpx;
|
|
height:140rpx;
|
|
margin-right:30rpx;
|
|
margin-bottom:24rpx;
|
|
border:1rpx solid #EAEAEA;
|
|
.selfimg{
|
|
width:140rpx;
|
|
height:140rpx;
|
|
}
|
|
}
|
|
}
|
|
.botbtn{
|
|
width:750rpx;
|
|
height:100rpx;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items:center;
|
|
border-top:1rpx solid #CCCCCC;
|
|
background:#fff;
|
|
position: fixed;
|
|
left:0;
|
|
bottom:0;
|
|
.btn{
|
|
width:300rpx;
|
|
height:80rpx;
|
|
border-radius: 40rpx;
|
|
font-size:26rpx;
|
|
color:#fff;
|
|
text-align: center;
|
|
line-height: 80rpx;
|
|
}
|
|
.pass{
|
|
background:$uni-text-color;
|
|
}
|
|
.refuse{
|
|
background:#F43F3B;
|
|
}
|
|
}
|
|
.basic_main {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 0 32rpx;
|
|
background-color: #fff;
|
|
height: 90rpx;
|
|
line-height: 90rpx;
|
|
border-bottom: 1rpx solid #EAEAEA;
|
|
:first-child {
|
|
color: #999;
|
|
}
|
|
}
|
|
.operation_record {
|
|
background:#fff;
|
|
padding: 40rpx 30rpx;
|
|
.record_item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-bottom: 20rpx;
|
|
padding-bottom:20rpx;
|
|
border-bottom:1rpx solid #EAEAEA;
|
|
margin-bottom:20rpx;
|
|
&:last-child{
|
|
border-bottom:none;
|
|
}
|
|
image {
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
border-radius: 50%;
|
|
flex-shrink: 0;
|
|
}
|
|
.record_info {
|
|
flex: 1;
|
|
margin-left: 25rpx;
|
|
line-height: 40rpx;
|
|
font-size: 28rpx;
|
|
.info_top{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom:10rpx;
|
|
}
|
|
.shenhetext{
|
|
font-size:26rpx;
|
|
color:#666;
|
|
line-height: 34rpx;
|
|
}
|
|
}
|
|
.record_line {
|
|
position: absolute;
|
|
top: -102rpx;
|
|
left: -26rpx;
|
|
height: 105rpx;
|
|
border-left: 4rpx dotted #dedede;
|
|
}
|
|
}
|
|
}
|
|
.editbox{
|
|
width:750rpx;
|
|
height:100rpx;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items:center;
|
|
border-top:1rpx solid #CCCCCC;
|
|
background:#fff;
|
|
position: fixed;
|
|
left:0;
|
|
bottom:0;
|
|
.editbtn{
|
|
width:680rpx;
|
|
height:80rpx;
|
|
border-radius: 40rpx;
|
|
background:$uni-text-color;
|
|
font-size:26rpx;
|
|
color:#fff;
|
|
text-align: center;
|
|
line-height: 80rpx;
|
|
}
|
|
}
|
|
</style>
|