crm-xcx/pages-approve/businessTrip/detail.vue

<template>
    <view class="detail-page" v-if="info">
        <view class="section">
            <image :src="statusImg" mode="aspectFill" class="status-img"></image>
            <!-- <view class="info-item" v-for="item in infoOpts" :key="item.key">
                <view class="label">{{item.name}}</view>
                <view class="content">
                    <text v-if="item.key=='place'">{{info.Province}}{{info.City}}</text>
                    <text>{{info[item.key]}}</text>
                </view>
            </view> -->
            <view class="info-item">
                <view class="label">申请人</view>
                <view class="content">
                    <text>{{info.ApplyRealName}}</text>
                </view>
            </view>
            <view class="info-item">
                <view class="label">到达日期</view>
                <view class="content">
                    <text>{{info.ArriveDate}}</text>
                </view>
            </view>
            <view class="info-item">
                <view class="label">返程日期</view>
                <view class="content">
                    <text>{{info.ReturnDate}}</text>
                </view>
            </view>
            <view class="info-item">
                <view class="label">目的地</view>
                <view class="content">
                    <text>{{info.Province}}{{info.City}}</text>
                </view>
            </view>
            <view class="info-item">
                <view class="label">出差事由</view>
                <view class="content">
                    <text>{{info.Reason}}</text>
                </view>
            </view>
            <view class="info-item">
                <view class="label">交通工具</view>
                <view class="content">
                    <text>{{info.Transportation.indexOf('其他')!=-1?info.Transportation.split('-')[1]:info.Transportation}}</text>
                </view>
            </view>
            <view class="info-item" v-if="info.PeerPeopleName">
                <view class="label">同行人</view>
                <view class="content">
                    <text>{{info.PeerPeopleName}}</text>
                </view>
            </view>
            <view class="info-item">
                <view class="label">提交时间</view>
                <view class="content">
                    <text>{{info.CreateTime}}</text>
                </view>
            </view>


        </view>
        <view class="section" v-if="info.Status!=='待审批'&&(info.ApproveTime||info.RefuseTime)">
            <view class="info-item">
                <view class="label">审批时间</view>
                <view class="content">{{info.ApproveTime||info.RefuseTime}}</view>
            </view>
            <view class="info-item" style="color:#C54322" v-if="info.Status==='已驳回'">
                <view class="label">驳回理由</view>
                <view class="content">{{info.RefuseReason}}</view>
            </view>
        </view>

        <view class="fix-bottom-wrap btns-wrap flex" v-if="info.ApplyAdminId==adminId&&info.Status=='待审批'">
			<button class="pass-btn" @click="handleRecall">撤回</button>
		</view>
        <view class="fix-bottom-wrap btns-wrap flex" v-if="info.ApplyAdminId==adminId&&info.Status=='已驳回'">
			<button class="pass-btn" @click="handleEdit">重新申请</button>
		</view>
        <view class="fix-bottom-wrap btns-wrap flex" v-if="info.ApplyAdminId==adminId&&info.Status=='已撤回'">
            <button class="refuse-btn" @click="handleDel">删除</button>
			<button class="pass-btn" @click="handleEdit">重新申请</button>
		</view>
        <view class="fix-bottom-wrap btns-wrap flex" v-if="info.IsApprove&&info.Status=='待审批'">
            <button class="pass-btn" @click="handlePass">通过</button>
			<button class="refuse-btn" @click="handleRefuse">驳回</button>
		</view>

        <van-dialog id="van-dialog" />
    </view>
      
</template>

<script>
import {apiBusinessTripDetail,apiBusinessTripRecall,apiBusinessApplyApprove,apiDelApply} from '@/api/businessTrip/index'
export default {
    computed:{
        adminId(){
            const userInfo=uni.getStorageSync('userInfo');
            return userInfo?JSON.parse(userInfo).AdminId:0
        }
    },
    data() {
        return {
            // infoOpts:[
            //     {name:'申请人',key:'ApplyRealName'},
            //     {name:'到达日期',key:'ArriveDate'},
            //     {name:'返程日期',key:'ReturnDate'},
            //     {name:'目的地',key:'place'},
            //     {name:'出差事由',key:'Reason'},
            //     {name:'交通工具',key:'Transportation'},
            //     {name:'同行人',key:'PeerPeopleName'},
            //     {name:'提交时间',key:'CreateTime'},
            // ],
            id:0,
            info:null,
            statusImg:'',
        }
    },
    onLoad(opt){
        this.id=opt.id
    },
    onShow(){
        this.getDetail()
    },
    methods: {
        getDetail(){
            this.info=null
            this.statusImg=''
            apiBusinessTripDetail({BusinessApplyId:this.id}).then(res=>{
                if(res.code===200){
                    this.info=res.data
                    if(this.info.Status==='已审批'){
                        this.statusImg= require('../static/pass-icon.png')
                    }else if(this.info.Status==='已驳回'){
                        this.statusImg= require('../static/fail-icon.png')
                    }else if(this.info.Status==='已过期'){
                        this.statusImg= require('../static/cancel-icon.png')
                    }else if(this.info.Status==='已撤回'){
                        this.statusImg= require('../static/recall-icon.png')
                    }
                }
            })
        },

        // 撤回
        handleRecall(){
            const that=this
            uni.showModal({
                title: '',
                content: '确定要撤回该出差申请吗？',
                success: function (res) {
                    if (res.confirm) {
                        console.log('用户点击确定');
                        apiBusinessTripRecall({BusinessApplyId:Number(that.id)}).then(res=>{
                            if(res.code===200){
                                uni.$emit('businessApproveListUpdate')
                                uni.navigateBack({
                                    delta: 1,
                                    fail:()=>{
                                        uni.switchTab({
                                            url: '/pages/index/index'
                                        })
                                    }
                                });
                                
                            }
                        })
                    } else if (res.cancel) {
                        console.log('用户点击取消');
                    }
                }
            });
        },

        // 重新申请
        handleEdit(){
            uni.navigateTo({
				url:"/pages-approve/businessTrip/add?id="+this.id
			})
        },

        // 删除
        handleDel(){
            const that=this
            uni.showModal({
                title: '',
                content: '确定要删除该出差申请吗？',
                success: function (res) {
                    if (res.confirm) {
                        console.log('用户点击确定');
                        apiDelApply({BusinessApplyId:Number(that.id)}).then(res=>{
                            if(res.code===200){
                                uni.$emit('businessApproveListUpdate')
                                uni.showToast({
                                    title:"删除成功",
                                    icon:'success'
                                })
                                setTimeout(() => {
                                    uni.navigateBack({
                                        delta: 1,
                                        fail:()=>{
                                            uni.switchTab({
                                                url: '/pages/index/index'
                                            })
                                        }
                                    });
                                }, 1500);     
                            }
                        })
                    } else if (res.cancel) {
                        console.log('用户点击取消');
                    }
                }
            });
        },

        //审批驳回
		handleRefuse(){
			uni.navigateTo({
				url:"./reason?id="+this.id
			})
		},

        //审批通过
		async handlePass(){
				const res=await apiBusinessApplyApprove({
                    BusinessApplyId:Number(this.id),
					ApproveStatus:1,
					Remark:''
                })
				if(res.code===200){
					this.$dialog.alert({
						title: "处理成功",
						confirmButtonColor: "#5890FB",
					}).then(() => {
						// on close
 						this.getDetail()
						// 更新列表
						uni.$emit('businessApproveListUpdate')
					});
				}
	    },
    },
}
</script>

<style lang="scss" scoped> 
.detail-page{
    padding-bottom: calc(150rpx + constant(safe-area-inset-bottom));
	padding-bottom: calc(150rpx + env(safe-area-inset-bottom));
}
.section{
    margin-top: 20rpx;
    background-color: #fff;
    padding: 30rpx 34rpx;
    position: relative;
		.status-img{
			position: absolute;
			width: 222rpx;
			height: 222rpx;
			right: 0;
			top: 150rpx;
			z-index: 10;
		}
}
.info-item{
    font-size: 32rpx;
    display: flex;
    margin-bottom: 20rpx;
    .label{
        width: 150rpx;
        flex-shrink: 0;
        margin-right: 30rpx;
        text-align: right;
    }
    .content{
        flex: 1;
    }
}
.btns-wrap {
		justify-content: center;
		button {
			width: 260rpx;
			height: 70rpx;
			border-radius: 28px;
			border: none;
			margin: 0 15px;
			font-size: 15px;
			color: #fff;
			line-height: 70rpx;
		}

		.pass-btn {
			background-color: #3385FF;
		}

		.refuse-btn {
			background-color: #f55768;
		}
}
</style>