jp-xpgj-xsy/src/projects/business/views/Master/Annual/LeaveInfo.vue

<template>
<div>
    
	<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" v-if="!$route.query.token"></a>
			<h1 class="mui-title">{{pageTitle}}</h1>
		</header>
		
   <form class="mui-input-group margin10">
       <!--<div class="mui-input-row">-->
           <!--<label>身份证号</label>-->
           <!--<span v-text="detail.idCard">420400200002020101</span>-->
       <!--</div>-->
   
       <div class="mui-input-row">
           <label>请假时间</label>
   
           <span v-if="detail.startTime==detail.endTime&&detail.startTimeQuantum=='0'&&detail.endTimeQuantum=='1'">自{{detail.startTime}}</span>
           <span v-else-if="detail.startTime==detail.endTime">自{{detail.startTime}}{{(detail.startTimeQuantum!=''?(detail.startTimeQuantum=='1'?'下午':'上午'):'')}}</span>
           <span  v-else >自{{detail.startTime}}{{(detail.startTimeQuantum!=''?(detail.startTimeQuantum=='1'?'下午':'上午'):'')}}
               <br />至{{detail.endTime}}{{(detail.endTimeQuantum!=''?(detail.endTimeQuantum=='1'?'下午':'上午'):'')}}</span>
       </div>
       <div class="mui-input-row">
           <label>请假时长</label>
           <span v-text="detail.days"></span>
       </div>
       <div class="mui-input-row">
           <label>请假事由</label>
           <span v-text="detail.reason">家中有事，需要会老家一趟家中有事，需要会老家一趟家中有事，需要会老家一趟家中有事，需要会老家一趟。</span>
       </div>
       
	   <div class="mui-input-row  vongi-wordcard">
	   		   <div class="mui-content-padded" >
	   		   		  <h5>上传图片</h5>
	   		   
	   		   		  <div class="fyy-upphoto">
	   		   		  	<div class="mui-col-xs-3 fyy-upphoto-close" v-for="(item,index) in picList">
	   		   		  		<img :src="item" v-viewer />
	   		   		  	
	   		   		  	</div>
	   		   		  
	   		   		  </div>
	   		   </div>
	   </div>
	   
	   
       <div class="mui-input-row">
           <label>申请时间</label>
           <span v-text="detail.createTime">2020-04-27 12:00:00</span>
       </div>
	   <div class="mui-input-row  vongi-wordcard">
		   <div class="mui-content-padded" v-if="detail.status==1&&detail.enableCancel&&opAction" >
		   		  <h5>销假凭证<a  v-if="detail.type==6" style="color:red" >(销假只需要上传火化纸质证明)</a></h5>
		   
		   		  <div class="fyy-upphoto">
		   		  	<div class="mui-col-xs-3 fyy-upphoto-close" v-for="(item,index) in picList2">
		   		  		<img :src="item" v-viewer />
		   		  		<a class="mui-icon mui-icon-closeempty" @click="delPic(item)"></a>
		   		  	</div>
		   		  	<div class="mui-col-xs-3" @click="chooseImage">
		   		  		<a style="width: 60px;"><span class="mui-icon mui-icon-plusempty" 
						style=" padding: 20px 18px 11px 0;"></span></a>
		   		  	</div>
		   		  </div>
		   </div>
		  
		   
	   </div>
	
	  
	  <div class="mui-input-row  vongi-wordcard" v-if="detail.cancelImages">
	  		   <div class="mui-content-padded" >
	  		   		  <h5>销假凭证</h5>
	  		   
	  		   		  <div class="fyy-upphoto">
	  		   		  	<div class="mui-col-xs-3 fyy-upphoto-close" v-for="(item,index) in detail.cancelImages.split(',')">
	  		   		  		<img :src="item" v-viewer />
	  		   		  	
	  		   		  	</div>
	  		   		  
	  		   		  </div>
	  		   </div>
	  </div>
	  <div class="mui-input-row"v-if="detail.cancelTime">
	      <label>销假时间</label>
	      <span v-text="detail.cancelTime">2020-04-27 12:00:00</span>
	  </div>
	   <div class="vongi-btn"  v-if="detail.enableCancel&&opAction">
	   	<button class="mui-btn  mui-btn-primary "  type="button" @click="submit()">
	   		申请销假
	   	</button>
	   </div>
	
   </form>


    <loading :visible="isLoading"></loading>

</div>
</template>

<script>
	import * as WxJsApi from '$project/utils/wxJsApi'
	
import * as API_Leave from '@/apis/Master/leave'
import * as API_annual from '@/apis/Master/annual'
import Common from '$project/components/Common.vue'
import Loading from '$project/components/Loading.vue'
import ExamineDetail from '$project/components/ExamineDetail.vue'

import TopHeader from '$project/components/TopHeader.vue'
 import {
    mapGetters,
    mapMutations
} from 'vuex'
import {
    daysDistance
} from '$project/utils'
export default {
    name: 'MasterAnnualLeaveInfo',
    components: {
        Common,
        Loading,
        TopHeader,
				ExamineDetail
    },
    data() {
        return {
			opAction:false,
            pageTitle: '请假详情',
            daytime:'',
            isLoading: false,
            id: this.$route.query.id,
            detail: {},
            status: ['待审核', '已批准', '已拒绝'],
            statusColor: ['', 'mui-btn-success', 'mui-btn-danger'],
			picList2:[],
        }
    },
    created() {
		this.opAction=this.$route.query.opAction
    },
    methods: {
		//删除图片
		delPic(item) {
			let picList = this.picList2;
			let index = picList.indexOf(item);
			if (index > -1) {
				picList.splice(index, 1);
			}
			this.picList2 = picList;
		},
		//微信选择图片
		chooseImage() {
			WxJsApi.chooseImage().then(res => {
				var localData = res.localData;
		
				if (localData.indexOf('data:image') != 0) {
					//判断是否有这样的头部
					localData = 'data:image/jpeg;base64,' + localData
				}
				localData = localData.replace(/\r|\n/g, '').replace('data:image/jgp', 'data:image/jpeg')
				this.imgBase64 = localData;
				//显示裁剪图片
				//_this.showCropper(field);
				this.uploadpic();
			}).catch(error => {
				mui.toast(error);
			})
		},
		//上传图片
		uploadpic() {
			this.isLoading = true;
			WxJsApi.uploadPic(this.imgBase64).then(response => {
				this.isLoading = false;
		
				this.picList2.push(response);
			}).catch(error => {
				this.isLoading = false;
				mui.toast(error);
			})
		},
		allowExamine(op){
			this.$emit('allowExamine',op);	
		},
        //获取状态颜色
        getColor(status) {
            var color = '';
            if (status == '0') {
                color = '#4fc5f7';
            } else if (status == '1') {
                color = '#55f868';
            } else if (status == '2') {
                color = '#fe616c';
            }
            return 'color:' + color + ';border-color:' + color + ';';
        },
        //info
        getDetail() {
            this.isLoading = true;
            API_annual.detail({
                id: this.id
            }).then(response => {
                this.detail = response;
                var startTime=this.detail.startTime.replace('年','/').replace('月','/').replace('日','');
                var endTime=this.detail.endTime.replace('年','/').replace('月','/').replace('日','');

                var i=  daysDistance(startTime,endTime);
                var day=i+(this.detail.endTimeQuantum-this.detail.startTimeQuantum)*0.5+0.5
                this.daytime=day+'天';
				this.detail.sp=true
				this.detail.text=this.detail.typeName+"申请"
				// if(this.detail.cancelStatus!=5){
				// 	this.detail.statusName=this.detail.mergeStatusN;
				// }
				this.$emit('getInfo',this.detail);
				
                this.isLoading = false;
            }).catch(error => {
                this.isLoading = false;
                mui.toast(error);
            })
        },
		//提交
		submit() {
			if(this.picList2.length==0){
				mui.toast("请上传销假凭证");
				return
			}
 			if (true) {
				var obj={
					imageUrl:this.picList2.join(','),
					id:this.id,
					formId:'leaveCancelWork'
				}
 				this.isLoading = true;
			 
				API_Leave.cancelLeaveSubmit(obj).then(response => {
					this.isLoading = false;
					mui.toast("提交成功");
						this.getDetail();				 
					
				}).catch(error => {
				
					
					this.isLoading = false;
					mui.toast(error);
				})
			}
		},
        asynCallBack() {

        },
		update() {
			this.detail.sp=false;
			this.getDetail();
		 
		}
    },
    mounted() {
		if(this.opAction){
			//获取微信配置
			WxJsApi.getWxConfig();
		}
        this.getDetail();

    },
    destroyed() {},
    computed: {
        picList: {
            // getter
            get: function () {
                if (this.detail && this.detail.imageUrl) {
                    return this.detail.imageUrl.split(',');
                } else {
                    return [];
                }
            },
            // setter
            set: function (newValue) {
                console.log(newValue)
            }
        },
        ...mapGetters({
            openId: 'wx_openid',
            token: 'token',
        })
    },

}
</script>

<style scoped src="$project/assets/css/xpwyfyy.css"></style>
<style src="$project/assets/css/iconfont.css"></style>
<style>
</style>