jp-xpgj-xsy/src/projects/business/views-xsy/WorkOvertime/Add.vue

<template>
<div>
			<top-header :pageTitle="pageTitle" v-show="!stepSelect"></top-header>
			
			<select-person  v-if="initSelectPerson" batchJob="1" v-show="stepSelectPerson"  :setids="subForm.personIds"  :setnames="seletPerson"  @confirm="confirm2"></select-person>
			
			<div class="mui-content vongi-fx  vongi-qingjiadt margin60"  v-show="!stepSelect">
				<form class="mui-input-group vongi-editme margin10 mt-10">
					<div class="mui-input-row">
						<label><i class="colorfe616c">*</i>&nbsp;加班人员</label>
						<button class="mui-btn mui-btn-block mui-navigate-right" 
						@click="selectPersonBtn" v-html="seletPerson" 
						type='button' style="width:65%">
							请选择
						</button>
					</div>
				</form>
                <form class="mui-input-group vongi-editme margin10 mt-10">
					<div class="mui-input-row">
						<label><i class="colorfe616c">*</i>&nbsp;开始时间</label>
						<button class="mui-btn mui-btn-block mui-navigate-right" type='button' 
						@click="selectData('startTime',false,subForm.endTime)" v-text="subForm.startTime?subForm.startTime:'请选择'"
						style="width:65%">
							2021-03-01 17:30
						</button>
					</div>
                    <div class="mui-input-row">
						<label><i class="colorfe616c">*</i>&nbsp;结束时间</label>
						<button class="mui-btn mui-btn-block mui-navigate-right" type='button' style="width:65%"  @click="selectData('endTime',subForm.startTime)" v-text="subForm.endTime?subForm.endTime:'请选择'" >
							2021-03-01 17:30
						</button>
					</div>
				</form>
                <form class="mui-input-group vongi-editme margin10">
					<div class="mui-input-row">
						<label >&nbsp;&nbsp;时长(小时)</label>
						<span v-text="subForm.hours">4.5</span>
					</div>
				</form>
				<form class="mui-input-group vongi-editme margin10">
					<div class="mui-input-row">
						<label style="width:100%"><i class="colorfe616c">*</i>&nbsp;加班原因</label>
						<textarea id="textarea" rows="3" v-model="subForm.reason" placeholder="请填写加班原因"></textarea>
					</div>
				</form>
				
				 
				
                <form class="mui-input-group vongi-editme">
					<div class="mui-input-row" v-show="examinePersonList.length>1" >
						<label><i class="colorfe616c">*</i>&nbsp;审批模板</label>
						<button class="mui-btn mui-btn-block mui-navigate-right" 
						@click="selectSpBtn" v-html="seletSpName" 
						type='button' style="width:65%">
							请选择
						</button>
					</div>
					<div class="mui-input-row">
						<label>&nbsp;&nbsp;审核人</label>
						<span  v-text="examinePerson.name">赵振</span>
					</div>
				</form>
			</div>
			<div class="fyy-footer"  v-show="!stepSelect">
				<div class="bindfyy-btn">
				<button class="mui-btn "  style="width: 50%;" :class="examinePerson.name?'mui-btn-success':'mui-btn-grey'"  type="submit" @click="submit(0)">
					<i icon="mui-icon mui-icon-compose"></i>保存草稿
				</button>
				<button class="mui-btn "  style="width: 50%;" :class="examinePerson.name?'mui-btn-primary':'mui-btn-grey'"  type="submit" @click="submit(1)">
					提交
				</button>
				</div>
			</div>
		</div>
</template>


<script>
	import * as API_sp from '@/apis-xsy/xsy'
	require('$project/assets/js/mui.picker.min.js');
 	import * as API_ExtraWork from '@/apis/Master/extra_work'
	import Common from '$project/components/Common.vue'
	import Loading from '$project/components/Loading.vue'
	import TopHeader from '$project/components/TopHeader.vue'
	import SelectPerson from '../PlanClass/Person.vue'
	
	import {
		mapGetters,
		mapMutations
	} from 'vuex'
	import {
		currentTimeStamp,
		parseUnixTime,
		hourDistanceArr
	} from '$project/utils'
	export default {
		name: 'MasterExtraWorkForm',
		components: {
			Common,
			Loading,
			TopHeader,SelectPerson,
		},
		data() {
			return {
				examinePersonList:[],
				examinePerson:{},
				pageTitle: '加班申请',

				isLoading: false,
				stepSelect:false,
				id:"",
				initSelectPerson:false,
				stepSelectPerson:false,
				seletPerson:"请选择",
				seletSpName:"请选择",
				
				subForm: {
					personIds:"",
					reason: '',
					startTime: '',
					endTime: '',
					hours: 0,
					type: '2',
					
					formId: 'batchExtraWork',
				},

				approvalPersonList: [],
				//补卡/加班1，外出2，出差3 ，请假4
				personForm: {
					type: '1'
				}
			}
		},
		created() {
			this.id = this.$route.query.id;
			
			this.subForm.startTime = parseUnixTime(currentTimeStamp(), '{y}-{m}-{d} {h}:{i}');
		},
		methods: {
			//获取详情
			getInfo() {
				if(!this.id){
					return
				}
				this.isLoading = true;
				API_ExtraWork.workOverBatchDetail(this.id).then(response => {
					this.isLoading = false;
					this.subForm.ids=this.id
					//this.subForm = response;
					
					this.subForm = {
						... this.subForm ,
						...response
					};
					this.subForm.personIds=response.nameId;
					this.seletPerson=response.name
				}).catch(error => {
					this.isLoading = false;
					mui.toast(error);
				})
			},
			confirm2(temp){
				this.stepSelect=false;
				this.stepSelectPerson=false;
				console.log(temp)
				if(temp.status==1){
					this.seletPerson="";
					for(var i in temp.selectPerson){
						if(i==0){
							this.seletPerson=temp.selectPerson[i].name;
						}else{
							this.seletPerson+=","+temp.selectPerson[i].name;	
						}
					}
					
					 this.subForm.personIds=temp.selectId.join();
				}
			},
			//类型选择
			selectSpBtn() {
				var picker = new mui.PopPicker();
				var list= this.examinePersonList
				var data=[]
				for (var i = 0; i < list.length; i++) {
					data.push({
						value: list[i]['id'],
						text: list[i]['name']
					})
				}
				picker.setData(data);
				var _this = this;
				picker.show(function(selectItems) {
				
					_this.seletSpName=selectItems[0].text
					_this.getExaminePerson(selectItems[0].value)
					//_this.typeName = selectItems[0].text;
				})
			},
			selectPersonBtn(){
				this.initSelectPerson=true;
				this.stepSelectPerson=true;
				this.stepSelect=true;
			},
			//获取审核人列表
			getBusinessOutApprovalPerson() {
				this.isLoading = true;
				API_BusinessTravel.getBusinessOutApprovalPerson(this.personForm).then(response => {
					this.isLoading = false;

					var list = response.data;
					var approvalPersonList = [];
					for (var i = 0; i < list.length; i++) {
						approvalPersonList.push({
							value: list[i]['id'],
							text: list[i]['personName']
						})
					}
					if (approvalPersonList.length) {
						this.subForm.approvalPersonId = approvalPersonList[0]['value'];
					}
					this.approvalPersonList = approvalPersonList;

				}).catch(error => {
					this.isLoading = false;
					mui.toast(error);
				})
			},
			//选择审核人
			selectPerson() {
				var _this = this;
				var picker = new mui.PopPicker();
				picker.setData(_this.approvalPersonList);
				picker.pickers[0].setSelectedValue(this.subForm.approvalPersonId);
				picker.show(function(selectItems) {
					_this.subForm.approvalPersonId = selectItems[0].value;
					picker.dispose();
				})
			},
			//选择日期
			selectData(field,vdate,edate) {
				var _this = this;
				if(vdate){
					
                    vdate=new Date(vdate)
				}
                if(edate){
                    edate=new Date(edate)
                }
				var picker = new mui.DtPicker({
					"type": "datetime",
					"beginYear": 2020,
					"endYear": 2040,
					"beginDate": vdate,
                    "endDate":edate,
					"value": _this.subForm[field]
				});
				picker.show(function(rs) {
					_this.subForm[field] = rs.text;
					picker.dispose();
					_this.countHours();
				});
			},
			//表单检测
			checkForm() {
				if(!this.examinePerson.name){
					return
				}
				
				if (!this.subForm.personIds) {
					mui.toast('请选择人员');
					return false;
				}else if (!this.subForm.startTime) {
					mui.toast('请选择开始时间');
					return false;
				} else if (!this.subForm.endTime) {
					mui.toast('请填写结束时间');
					return false;
				} else if (!this.subForm.reason) {
					mui.toast('请填写加班原因');
					return false;
				} else if (false) {
					mui.toast('请选择审批人');
					return false;
				} else {
					return true;
				}
			},
			//提交
			submit(status) {
				this.subForm.draft=status;
				if (this.checkForm()) {
					this.isLoading = true;
					
					this.subForm.processTemplateId=this.examinePerson.processTemplateId;
					API_ExtraWork.workOverPathSubmit(this.subForm).then(response => {
						this.isLoading = false;
						if(status){
							mui.toast('提交成功');
							this.$router.replace({
								name: "XsyApprovalInfo",
								query:{id:response.id,formId:'extraWork'}
							})
						
						}else{
							mui.toast('保存成功');
							this.subForm.ids=response.id;
							this.id=response.id
						}
						
					}).catch(error => {
						this.isLoading = false;
						mui.toast(error);
					})
				}
			},
			countHours() {
				var hoursArr = hourDistanceArr(this.subForm.startTime, this.subForm.endTime);
				this.subForm.hours = hoursArr[0];
			},
			getExaminePersonList(){
				
				API_sp.examinePersonList(this.subForm.formId).then(response => {
					this.examinePersonList=response.list
					if(this.examinePersonList.length){
						this.seletSpName=this.examinePersonList[0].name
						this.getExaminePerson(this.examinePersonList[0].id)
					}
				}).catch(error => {
					
					mui.toast(error);
				})
			},
			getExaminePerson(id){
				
				API_sp.examinePerson(this.subForm.formId,id).then(response => {
					this.examinePerson=response
					this.examinePerson.processTemplateId=id
				}).catch(error => {
					
					mui.toast(error);
				})
			},
			asynCallBack() {

			},
		},
		mounted() {
			//获取审核人列表
			//this.getBusinessOutApprovalPerson();
			this.getExaminePersonList();
			this.getInfo();
		},
		destroyed() {},
		computed: {
		
		},
	}
</script>

<style src="$project/assets/css/mui.picker.min.css"></style>

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

<style>
</style>