programs_info/小艾协同/流程图地址/流程从三资开始和保障房合并后搬过来的/前端代码/workflow/components/myProcess/applyHoliday.vue

<template>
	<el-dialog
	 :close-on-click-modal="false"
	 :close-on-press-escape="false"
	 :title="dialogTitle"
	 :visible.sync="dialogVisible"
	 top="50px"
	 width="85%"
	 :before-close="beforeClose"

	>
		<div class="tabsdom">
			<el-tabs v-model="activeName" @tab-click="handleClick">
				<el-tab-pane label="请假申请" name="first">
					<el-card shadow="always" style="padding: 20px 10px 10px 20px">
						<div v-for="(item,index) in hoildaylist" :key="index" style="margin:10px 0px">
							<el-row v-show="item.offWorkType==1" :gutter="10" class="holidayRow">
								<el-col :span="2" class="col-txt">
									<div style="width: 100%">
										&nbsp;
										<span v-show="index==0">请假类型 </span>
									</div>
								</el-col>
								<el-col :span="5">
									<el-select

									 v-model="item.offWorkType"
									 filterable
									 placeholder="请假类型"
									 @change="getHolidayType($event,index)"
									>
										<el-option
										 v-for="itam in ProjectData"
										 :key="itam.name"
										 :disabled="itam.disabled"
										 :label="itam.name"
										 :value="itam.type"
										/>
									</el-select>
								</el-col>
								<el-col :span="4">
									<el-date-picker
									 v-model="item.startDate"
									 placeholder="选择日期"
									 style="width: 100%!important;"
									 type="date"
									 value-format="yyyy-MM-dd"
									 width="100%"
									 @change="countDays(item.startDate,item.endDate,item.startIsAllday,item.endIsAllday,index,item.offWorkType)"
									/>
								</el-col>
								<el-col :span="2">

									<el-select
									 v-model="item.startIsAllday"
									 filterable
									 placeholder=""
									 @change="countDays(item.startDate,item.endDate,item.startIsAllday,item.endIsAllday,index,item.offWorkType)"
									>

										<el-option label="上午" value="上午"/>
										<el-option label="下午" value="下午"/>
									</el-select>
								</el-col>
								<el-col :span="1">
									<div style="height: 1px;background: #606266;width:100%;margin-top:40%"/>
								</el-col>
								<el-col :span="4">
									<el-date-picker
									 v-model="item.endDate"
									 :readonly="!item.startDate||item.startDate.length==0?true:false"
									 placeholder="选择日期"
									 style="width:100%"
									 type="date"
									 value-format="yyyy-MM-dd"
									 @change="countDays(item.startDate,item.endDate,item.startIsAllday,item.endIsAllday,index,item.offWorkType)"
									/>
								</el-col>
								<el-col :span="2">
									<el-select
									 v-model="item.endIsAllday"
									 filterable
									 placeholder=""
									 @change="countDays(item.startDate,item.endDate,item.startIsAllday,item.endIsAllday,index,item.offWorkType)"
									>

										<el-option label="上午" value="上午"/>
										<el-option label="下午" value="下午"/>
									</el-select>
								</el-col>
								<el-col :span="2" class="col-txt" style="text-align: center">
									共{{
										!item.days ? 0 : item.days
									}}天
								</el-col>
								<el-col :span="1" class="col-txt" style="text-align: center">
									&nbsp;
									<el-button
									 v-show="index!=0"
									 circle
									 icon="el-icon-minus"
									 @click="spliceListRow(index)"
									/>
								</el-col>
								<el-col :span="1" class="col-txt" style="text-align: center">
									<el-button
									 circle
									 icon="el-icon-plus"
									 type="primary"
									 @click="addListRow()"
									/>
								</el-col>
							</el-row>
							<el-row v-show="item.offWorkType==3||item.offWorkType==2" :gutter="10" class="holidayRow">
								<el-col :span="2" class="col-txt">
									<div style="width: 100%">
										<span v-show="index==0">请假类型 </span>&nbsp;
									</div>
								</el-col>
								<el-col :span="5" class="col-input">
									<!--请假类型选择-->
									<el-select
									 v-model="item.offWorkType"
									 filterable
									 placeholder="请假类型"
									 style="width: 100%"
									 @change="getHolidayType($event,index,item)"
									>
										<el-option
										 v-for="itam in ProjectData"
										 :key="itam.name"
										 :disabled="itam.disabled"
										 :label="itam.name"
										 :value="itam.type"
										/>
									</el-select>
								</el-col>
								<el-col :span="6">
									<!--请假日期选择-->
									<el-date-picker
									 v-model="item.dayMerange"
									 class="pdr10px mgb10px"
									 placeholder="选择日期"
									 type="date"
									 value-format="yyyy-MM-dd"
									>
									</el-date-picker>
								</el-col>
								<el-col :span="7">
									<div style="display: flex;align-items: center">
										<el-time-picker
										 :disabled="!item.dayMerange"
										 @change="getStartTime(item.startTime,item.startTime,item.dayMerange,item.startIsAllday,item.endIsAllday,index,item.offWorkType)"
										 value-format="HH:mm"
										 format="HH:mm"
										 v-model="item.startTime"
										 placeholder="开始时间"
										>
										</el-time-picker>
										<div class="zhi">至</div>
										<el-time-picker
										 :disabled="!(item.dayMerange&&item.startTime)"
										 @change="getEndTime(item.startTime,item.endTime,item.dayMerange,item.startIsAllday,item.endIsAllday,index,item.offWorkType)"
										 format="HH:mm"
										 value-format="HH:mm"
										 v-model="item.endTime"
										 placeholder="结束时间"
										>
										</el-time-picker>
									</div>
								</el-col>
								<el-col :span="2" class="col-txt" style="text-align: center">
									共{{ item.hour }}小时

								</el-col>
								<el-col :span="1" class="col-txt" style="text-align: center">
									&nbsp;
									<el-button
									 v-show="index!=0"
									 circle
									 icon="el-icon-minus"
									 @click="spliceListRow(index)"
									/>
								</el-col>
								<el-col :span="1" class="col-txt" style="text-align: center">
									<el-button
									 circle
									 icon="el-icon-plus"
									 type="primary"
									 @click="addListRow()"
									/>
								</el-col>
							</el-row>
							<el-row v-show="item.offWorkType!=1&& item.offWorkType!=3&&item.offWorkType!=2" :gutter="10"
											class="holidayRow"
							>
								<el-col :span="2" class="col-txt">
									<div style="width: 100%">
										&nbsp;
										<span v-show="index==0">请假类型 </span>
									</div>
								</el-col>
								<el-col :span="5">
									<el-select
									 v-model="item.offWorkType"
									 filterable
									 placeholder="请假类型"
									 @change="getHolidayType($event,index,item)"
									>
										<el-option
										 v-for="itam in ProjectData"
										 :key="itam.name"
										 :disabled="itam.disabled"
										 :label="itam.name"
										 :value="itam.type"
										/>
									</el-select>
								</el-col>
								<el-col :span="4">
									<el-date-picker
									 v-model="item.startDate"
									 placeholder="选择日期"
									 style="width: 100%!important;"
									 type="date"
									 value-format="yyyy-MM-dd"
									 width="100%"
									 @change="countDays(item.startDate,item.endDate,item.startIsAllday,item.endIsAllday,index,item.offWorkType)"
									/>
								</el-col>
								<el-col :span="2">

									<el-select
									 v-model="item.startIsAllday"
									 filterable
									 placeholder=""
									 @change="countDays(item.startDate,item.endDate,item.startIsAllday,item.endIsAllday,index,item.offWorkType)"
									>

										<el-option label="上午" value="上午"/>
										<el-option label="下午" value="下午"/>
									</el-select>
								</el-col>
								<el-col :span="1">
									<div style="height: 1px;background: #606266;width:100%;margin-top:40%"/>
								</el-col>
								<el-col :span="4">
									<el-date-picker
									 v-model="item.endDate"
									 :readonly="!item.startDate||item.startDate.length==0?true:false"
									 placeholder="选择日期"
									 style="width:100%"
									 type="date"
									 value-format="yyyy-MM-dd"
									 @change="countDays(item.startDate,item.endDate,item.startIsAllday,item.endIsAllday,index,item.offWorkType)"
									/>
								</el-col>
								<el-col :span="2">
									<el-select
									 v-model="item.endIsAllday"
									 filterable
									 placeholder=""
									 @change="countDays(item.startDate,item.endDate,item.startIsAllday,item.endIsAllday,index,item.offWorkType)"
									>

										<el-option label="上午" value="上午"/>
										<el-option label="下午" value="下午"/>
									</el-select>
								</el-col>
								<el-col :span="2" class="col-txt" style="text-align: center">
									共{{
										!item.days ? 0 : item.days
									}}天
								</el-col>
								<el-col :span="1" class="col-txt" style="text-align: center">
									&nbsp;
									<el-button
									 v-show="index!=0"
									 circle
									 icon="el-icon-minus"
									 @click="spliceListRow(index)"
									/>
								</el-col>
								<el-col :span="1" class="col-txt" style="text-align: center">
									<el-button
									 circle
									 icon="el-icon-plus"
									 type="primary"
									 @click="addListRow()"
									/>
								</el-col>
							</el-row>
						</div>
						<div class="totalApplyTime">{{ totalApplyTime }}</div>
						<el-row>
							<el-col :span="2" class="col-txt"><span>请假事由</span></el-col>
							<el-col :span="22">
								<el-input v-model="form.applyReasons" style="min-height:50px;margin-bottom: 25px" type="textarea"/>
							</el-col>
						</el-row>
						<el-row>
							<el-col :span="2" class="col-txt">附件</el-col>

							<el-col :span="22">
								<el-upload
								 :action="$constant.BASE_URI+'/FileController/upload'"
								 :file-list="form.fileUrlList"
								 :http-request="uploadFile"

								 multiple
								>
									<el-button size="small" type="primary">点击上传</el-button>
									<div slot="file" slot-scope="{file}">
										<a :href="file.url">{{ file.name }}</a>
										<span class="el-upload-list__item-actions">
                          <i class="el-icon-delete" @click="handlePictureRemove(file,form.fileUrlList)"/>
                        </span>
									</div>
								</el-upload>
							</el-col>
						</el-row>
						<el-row style="margin-top: 25px">
							<el-col :span="2" class="col-txt">抄送</el-col>
							<el-col :span="22">
								<user-select
								 :default-select="selectList"
								 :multiple="true"
								 width="700"
								 @selectValue="parentMethod"
								/>
							</el-col>
						</el-row>
					</el-card>


				</el-tab-pane>
				<el-tab-pane label="流程图" name="second">
					<div style="width: 100%">
						<el-row>
							<el-col :span="24">
								<div class="node_info">
									<div>节点说明：</div>
									<div class="dis_flex" v-for="item in nodeColor">
										<div class="node_class" :style="{backgroundColor: item.nodeback}"></div>
										{{ item.name }}

									</div>
								</div>
								<div id="containerHoliday" style="width: 100%" v-show="true"></div>
							</el-col>
						</el-row>
					</div>
				</el-tab-pane>
			</el-tabs>

		</div>
		<div slot="footer">
			<el-button @click="dialogVisible = false">取 消</el-button>
			<el-button :loading="loading" type="primary" @click="confirmSubmit()">确 定</el-button>
		</div>
	</el-dialog>

</template>

<script>
import UserSelect from '@/views/components/UserSelect'
import Base from '@/views/base/base.vue'
import BaseData from '@/views/base/baseData.vue'
import { upload } from '@/static/utils/channel'
import * as echarts from 'echarts'

const lineStyle = {
	color: '#2A3980',
	width: 2

}
const redLinestyle = {
	color: 'red',
	width: 2
}
export default {
	name: 'ApplyPay',
	components: {
		UserSelect
	},
	mixins: [Base, BaseData],
	data() {
		return {
			nodeColor: [
				{ name: '审核通过', nodeback: '#2A3980' },
				{ name: '未经过', nodeback: '#999999' },
				{ name: '退回', nodeback: '#E04242' },
				{ name: '审核中', nodeback: '#E08E42' },
				{ name: '撤回', nodeback: '#4294E0' }
			],
			freezeHolidayTime: 0,
			freezeExchangeTime: 0,
            restHolidayDate: '',
			loading: false,
			totalApplyTime: '共计请假0天，0.00小时',
			dialogVisible: false,
			hoildaylist: [
				{ offWorkType: 2, hour: 0, days: 0 }
			],

			fileError: false,
			fileList: [],
			selectList: [],
			value1: [],
			ProjectData: [],
			dialogTitle: '请假申请',

			form: {
				fileUrlList: []
			},
			activeName: 'first',
			daysNum: 0,
			holidayDays: {},
			linesData: [ // 连线
				{
					lineStyle: lineStyle,
					coords: [[0, 500], [60, 500]]
				},
				{
					lineStyle: lineStyle,
					coords: [[80, 500], [140, 500]]
				},
				{
					lineStyle: lineStyle,
					coords: [[160, 500], [227, 500]]
				},
				{
					name: '是',
					lineStyle: { color: '#2A3980', type: 'dotted' },
					itemStyle: {
						color: 'rgb(0,0,0,0)'
					},
					coords: [[260, 500], [550, 500]]
				},
				{
					lineStyle: { color: '#2A3980', type: 'dotted' },
					coords: [[260, 375], [575, 375]],
					symbol: 'none'
				},
				{
					lineStyle: { color: '#2A3980', type: 'dotted' },
					coords: [[244, 335], [244, 225]],
					symbol: 'none'
				},
				{
					lineStyle: { color: '#2A3980', type: 'dotted' },
					coords: [[244, 225], [293, 225]]
				},
				{
					lineStyle: { color: '#2A3980', type: 'dotted' },
					coords: [[293, 225], [372, 225]]
				},
				{
					lineStyle: { color: '#2A3980', type: 'dotted' },
					coords: [[372, 225], [463, 225]]
				},
				{
					lineStyle: { color: '#2A3980', type: 'dotted' },
					coords: [[463, 225], [575, 225]]

				},
				{
					lineStyle: { color: '#2A3980', type: 'dotted' },
					coords: [[575, 225], [575, 470]]
				},
				{
					lineStyle: lineStyle,
					coords: [[315, 225], [315, 150]],
					symbol: 'none'
				},
				{
					lineStyle: lineStyle,
					coords: [[315, 150], [5, 150]],
					symbol: 'none'
				},
				{
					name: '发起人退回',
					lineStyle: lineStyle,
					coords: [[5, 50], [5, 470]]
				},
				{
					name: '',
					lineStyle: lineStyle,
					coords: [[395, 225], [395, 100]],
					symbol: 'none'
				},
				{
					name: '发起人退回',
					lineStyle: lineStyle,
					coords: [[5, 50], [5, 470]]
				},
				{
					name: '',
					lineStyle: lineStyle,
					coords: [[5, 100], [395, 100]],
					symbol: 'none'
				},
				{
					name: '',
					lineStyle: lineStyle,
					coords: [[480, 225], [480, 50]],
					symbol: 'none'
				},
				{
					name: '',
					lineStyle: lineStyle,
					coords: [[480, 50], [5, 50]],
					symbol: 'none'
				},
				{
					name: '',
					lineStyle: lineStyle,
					coords: [[85, 500], [85, 400]],
					symbol: 'none'
				},
				{
					name: '',
					lineStyle: lineStyle,
					coords: [[85, 400], [5, 400]],
					symbol: 'none'
				},
				{
					name: '',
					lineStyle: lineStyle,
					coords: [[165, 500], [165, 350]],
					symbol: 'none'
				},
				{
					name: '',
					lineStyle: lineStyle,
					coords: [[165, 350], [5, 350]],
					symbol: 'none'
				},
				{
					name: '',
					lineStyle: lineStyle,
					coords: [[243.9, 465], [243.9, 415]]

				}
				//
			],
			node: [ // 节点
				{
					name: '申请人发起',
					value: [0, 500],
					symbol: 'image://' + require('../asste/huifangkuai.png'),
					symbolSize: [110, 60]
				},
				{
					name: '直接上级审核',
					value: [80, 500],
					symbol: 'image://' + require('../asste/huifangkuai.png'),
					symbolSize: [110, 60]
				},
				{
					name: '部门负责人审核',
					value: [160, 500],
					symbol: 'image://' + require('../asste/huifangkuai.png'),
					symbolSize: [110, 60]
				},
				{
					label: {
						show: true,
						color: '#777777' // 节点文字颜色
					},
					name: '假别仅有\n调休假',
					value: [240, 500],
					symbol: 'image://' + require('../asste/lingxing.png'),
					symbolSize: [80, 80]
				},
				{
					label: {
						show: true,
						color: 'red', // 节点文字颜色
						backgroundColor: 'rgb(0,0,0,0)'
					},
					itemStyle: {
						color: 'rgb(0,0,0,0)'

					},
					name: '是',
					value: [280, 500],
					symbolSize: [20, 20]
				},
				{
					label: {
						show: true,
						color: '#777777' // 节点文字颜色
					},
					name: '请假天数',
					value: [240, 375],
					symbol: 'image://' + require('../asste/lingxing.png'),
					symbolSize: [80, 80]
				},
				{
					name: '分管领导\n审核',
					value: [310, 225],
					symbol: 'image://' + require('../asste/huifangkuai.png'),
					symbolSize: [110, 60]
				},
				{
					name: '上级分管领导\n审核',
					value: [390, 225],
					symbol: 'image://' + require('../asste/huifangkuai.png'),
					symbolSize: [110, 60]
				},
				{
					name: '主要领导\n审核',
					value: [480, 225],
					symbol: 'image://' + require('../asste/huifangkuai.png'),
					symbolSize: [110, 60]
				},
				{
					name: '结束',
					value: [570, 500],
					symbol: 'image://' + require('../asste/huifangkuai.png'),
					symbolSize: [110, 60]
				},
				{
					label: {
						show: true,
						color: 'red' // 节点文字颜色
						//backgroundColor: '#f5f5f5'
					},
					itemStyle: {
						color: 'rgb(0,0,0,0)'
					},
					name: '假期天数合计≤3天',
					value: [380, 375],
					symbolSize: [20, 20]
				},
				{
					label: {
						show: true,
						color: 'red' // 节点文字颜色
						//backgroundColor: '#f5f5f5'
					},
					itemStyle: {
						color: 'rgb(0,0,0,0)'
					},
					name: '假期天数合计>3天',
					value: [240, 275],
					symbolSize: [20, 20]
				},
				{
					label: {
						show: true,
						color: 'red' // 节点文字颜色
						// //backgroundColor: '#f5f5f5'
					},
					itemStyle: {
						color: 'rgb(0,0,0,0)'
					},
					name: ' 退回发起人',
					value: [100, 150],

					symbolSize: [20, 20]
				},
				{
					label: {
						show: true,
						color: 'red' // 节点文字颜色
						//backgroundColor: '#f5f5f5'
					},
					itemStyle: {
						color: 'rgb(0,0,0,0)'
					},
					name: ' 退回发起人 ',
					value: [150, 100],
					symbolSize: [20, 20]
				},
				{
					label: {
						show: true,
						color: 'red' // 节点文字颜色
						//backgroundColor: '#f5f5f5'
					},
					itemStyle: {
						color: 'rgb(0,0,0,0)'
					},
					name: ' 退回发起人  ',
					value: [200, 50],
					symbolSize: [20, 20]
				},
				{
					label: {
						show: true,
						color: 'red' // 节点文字颜色
						//backgroundColor: '#f5f5f5'
					},
					itemStyle: {
						color: 'rgb(0,0,0,0)'
					},
					name: '  退回发起人  ',
					value: [45, 400],

					symbolSize: [20, 20]
				},
				{
					label: {
						show: true,
						color: 'red' // 节点文字颜色
						//backgroundColor: '#f5f5f5'
					},
					itemStyle: {
						color: 'rgb(0,0,0,0)'
					},
					name: '   退回发起人  ',
					value: [85, 350],

					symbolSize: [20, 20]
				}
			]
		}
	},
	watch: {
		'hoildaylist': {
			deep: true,
			handler(newValue, oldValue) {
				let day = 0
				let hour = 0
				for (let i = 0; i < this.hoildaylist.length; i++) {
					if (this.hoildaylist[i].hour === 0 || this.hoildaylist[i].hour) {
						hour = hour + (typeof this.hoildaylist[i].hour == 'string' ? Number(this.hoildaylist[i].hour) : this.hoildaylist[i].hour)
					}
					if (this.hoildaylist[i].days == 0 || this.hoildaylist[i].days) {
						day = day + (typeof this.hoildaylist[i].days == 'string' ? Number(this.hoildaylist[i].days) : this.hoildaylist[i].days)
					}
				}
				this.changeCotalApplyTime(`共计请假${day}天，${hour}小时`)
			}
		}
	},
	computed: {},
	mounted() {

	},
	methods: {
		beforeClose() {
			this.hoildaylist = [
				{ offWorkType: 2, hour: 0, days: 0 }
			]
			this.form = {
				fileUrlList: []
			}
			this.fileList = []
			this.dialogVisible = false
		},
		handleClick(tab, event) {
			if (this.activeName == 'second') this.createNodeCanvas()
		},
		createNodeCanvas() {
			this.$nextTick(() => {
				let chartDom = document.getElementById('containerHoliday')
				var myCharts = echarts.init(chartDom)
				let charts = {
					nodes: this.node,
					linesData: this.linesData
				}
				let option = {
					xAxis: {
						min: 0,
						max: 600,
						padding: [0, 50, 0, 50],
						show: false,
						type: 'value'
					},
					yAxis: {
						min: 0,
						max: 600,
						show: false,
						type: 'value'
					},
					grid: {
						left: 50,
						right: 0,
						bottom: 0,
						top: 0
					},

					series: [
						{
							type: 'graph',
							coordinateSystem: 'cartesian2d',
							symbol: 'rect',
							symbolSize: [80, 40],
							symbolOffset: [10, 0],
							// force: {
							// 	edgeLength: 100,//连线的长度
							// 	repulsion: 200 //子节点之间的间距
							// },

							label: {
								show: true,
								color: 'white' // 节点文字颜色
							},

							data: charts.nodes

						},

						{
							type: 'lines',
							polyline: false,
							coordinateSystem: 'cartesian2d',
							symbol: ['', 'arrow'],
							symbolSize: 10,
							data: charts.linesData

						}

					]

				}
				myCharts.clear()

				myCharts.setOption(option)
				window.addEventListener('resize', () => {
					myCharts.resize()
				})
			})
		},
		getStartTime(startTime, endTime, dayMerange, startIsAllday, endIsAllday, index, type) {
			console.log(startTime)
			if (this.hoildaylist[index].endTime) delete this.hoildaylist[index].endTime
			this.hoildaylist[index].hour = 0
			this.hoildaylist[index].endDate = ''
			if (startTime && dayMerange && (index == 0 || index) && (type == 0 || type)) {
				this.hoildaylist[index].startDate = dayMerange + ' ' + startTime + ':00'

			}
			this.$forceUpdate()
		},
		getEndTime(startTime, endTime, dayMerange, startIsAllday, endIsAllday, index, type) {

			if (endTime && dayMerange && (index == 0 || index) && (type == 0 || type)) {
				this.hoildaylist[index].endDate = dayMerange + ' ' + endTime + ':00'
			}
			if (startTime && endTime && dayMerange && (index == 0 || index) && (type == 0 || type)) {
				this.countDays(dayMerange + ' ' + startTime, dayMerange + ' ' + endTime, startIsAllday, endIsAllday, index, type)
			}
		},
		// getTimeMerange(timeMerange, dayMerange, startIsAllday, endIsAllday, index, type) {
		// 	if (timeMerange && dayMerange && (index == 0 || index) && (type == 0 || type)) {
		// 		this.hoildaylist[index].startDate = dayMerange + ' ' + timeMerange[0] + ':00'
		// 		this.hoildaylist[index].endDate = dayMerange + ' ' + timeMerange[1] + ':00'
		//
		// 		console.log('timeMerange[0]timeMerange[0]timeMerange[0]', timeMerange[0])
		// 		console.log('timeMerange[1]timeMerange[1]timeMerange[1]', timeMerange[1])
		// 		this.countDays(dayMerange + ' ' + timeMerange[0], dayMerange + ' ' + timeMerange[1], startIsAllday, endIsAllday, index, type)
		// 	}
		//
		// },
		changeCotalApplyTime(e) {
			this.totalApplyTime = e
		},
		uploadFile(param) {
			upload(param, true).then((res) => {
				this.form.fileUrlList.push(res)
				console.log(res)
			})
		},
		spliceListRow(index) {
			this.hoildaylist.splice(index, 1)
			let daysNum = 0
			for (let j = 0; j < this.hoildaylist.length; j++) {
				if (this.hoildaylist[j].offWorkType == 1) {
					daysNum = daysNum + this.hoildaylist[j].days
				}
			}
			this.ProjectData[0] = {
				name: `年假(剩余${this.holidayDays.restHolidayTime - daysNum}天,已冻结${daysNum}天)`,
				type: 1,
				disabled: (this.holidayDays.restHolidayTime - daysNum) < 0
			}
			let yearsTime = 0
			for (let j = 0; j < this.hoildaylist.length; j++) {
				if (this.hoildaylist[j].offWorkType == 3) {
					yearsTime += this.hoildaylist[j].hour
				}
			}
			this.ProjectData[1] = {
				name: `调休(剩余${this.holidayDays.restExchangeTime - yearsTime}小时,已冻结${yearsTime}小时)`,
				type: 3
			}
		},
		parentMethod(val) {
			if (val.length > 0) {
				this.form.ccList = val.join(',')
			}
		},
		countDays(startDate, endDate, startIsAllday, endIsAllday, index, type) {
			// 如果是年假
			if (type == 1) {
				if (startDate && endDate && startIsAllday && endIsAllday) {
					// 判断是不是都已经选择完成
					const endDateParams = new Date(endDate).getTime() //计算一下开始时间
					const startDateParams = new Date(startDate).getTime() //计算一下结束时间
					let days = (endDateParams - startDateParams) / (1000 * 60 * 60 * 24) //开始和结束时间相减 单位：毫秒
					if (
					 startDateParams == endIsAllday ||
					 (startIsAllday == '上午' && endIsAllday == '上午') ||
					 (startIsAllday == '下午' && endIsAllday == '下午')
					) {
						// 如果选择的情况是 开始：上午 ，结束：上午 或者 开始：下午 ，结束：下午。则都加0.5天
						days = days + 0.5
					} else if (
					 startIsAllday == '上午' &&
					 endIsAllday == '下午'
					) {
						//如果选择情况是 开始：上午 结束：下午 ，则加一天，其他情况不加减

						days = days + 1
					}

					this.hoildaylist[index].days = days
					let daysNum = 0
					let i = this.ProjectData.findIndex((e) => e.type == type)
					for (let j = 0; j < this.hoildaylist.length; j++) {
						if (this.hoildaylist[j].offWorkType == 1) {
							daysNum = daysNum + this.hoildaylist[j].days
						}
					}
					this.ProjectData[i] = {
						name: `年假(剩余${this.holidayDays.restHolidayTime - daysNum}天,已冻结${this.freezeHolidayTime + daysNum}天)(截止${this.restHolidayDate})`,
						type: 1,
						disabled: (this.holidayDays.restHolidayTime - daysNum) < 0
					}
				}
			}
			if (type == 3) {
				// 如果是调休
				if (startDate && endDate) {

					const endDateParams = new Date(endDate).getTime()
					const startDateParams = new Date(startDate).getTime()
					let hour = endDateParams - startDateParams
					hour = hour / (1000 * 60 * 60)
					if (new Date(startDate).getHours() <= 12 && new Date(endDate).getHours() >= 13) hour -= 1

					this.$nextTick(() => {
						this.hoildaylist[index].hour = hour
						let i = this.ProjectData.findIndex((e) => e.type == type)
						let timeNum = this.ProjectData[i].timeNum - hour
						let yearsTime = 0
						for (let j = 0; j < this.hoildaylist.length; j++) {
							if (this.hoildaylist[j].offWorkType == 3) {
								yearsTime = yearsTime + this.hoildaylist[j].hour
							}
						}
						this.ProjectData[i] = {
							name: `调休(剩余${this.holidayDays.restExchangeTime - yearsTime}小时,已冻结${this.freezeExchangeTime + yearsTime}小时)`,
							type: 3
						}

					})

				}
			}
			if (type == 2) {
				// 如果是事假
				console.log(startDate, endDate)
				if (startDate && endDate) {
					console.log(startDate, endDate)
					this.$common.transServDate
					this.$nextTick(() => {
						console.log(endDate)
						console.log(new Date(startDate).getHours())
						const endDateParams = new Date(endDate).getTime()
						const startDateParams = new Date(startDate).getTime()
						let hour = endDateParams - startDateParams
						hour = hour / (1000 * 60 * 60)
						console.log('hourhourhourhourhourhour', hour.toFixed(2))
						if (new Date(startDate).getHours() <= 12 && new Date(endDate).getHours() >= 13) hour -= 1
						this.hoildaylist[index].hour = hour.toFixed(2)

					})

				}
			}
			if (type == 4 || type == 5 || type == 6 || type == 7 || type == 8) {
				if (startDate && endDate && startIsAllday && endIsAllday) {
					// 判断是不是都已经选择完成
					this.$nextTick(() => {
						const endDateParams = new Date(endDate).getTime() //计算一下开始时间
						const startDateParams = new Date(startDate).getTime() //计算一下结束时间
						let days = (endDateParams - startDateParams) / (1000 * 60 * 60 * 24) //开始和结束时间相减 单位：毫秒
						if (
						 startDateParams == endIsAllday ||
						 (startIsAllday == '上午' && endIsAllday == '上午') ||
						 (startIsAllday == '下午' && endIsAllday == '下午')
						) {
							// 如果选择的情况是 开始：上午 ，结束：上午 或者 开始：下午 ，结束：下午。则都加0.5天
							days = days + 0.5
						} else if (
						 startIsAllday == '上午' &&
						 endIsAllday == '下午'
						) {
							//如果选择情况是 开始：上午 结束：下午 ，则加一天，其他情况不加减

							days = days + 1
						}
						this.hoildaylist[index].days = days
					})
				}
			}
		},
		getHolidayType($event, i, item) {
			delete this.hoildaylist[i].startDate
			delete this.hoildaylist[i].endDate
			this.hoildaylist[i].hour = 0
			this.hoildaylist[i].days = 0
			delete this.hoildaylist[i].startIsAllday
			delete this.hoildaylist[i].endIsAllday
			let daysNum = 0
			for (let j = 0; j < this.hoildaylist.length; j++) {
				if (this.hoildaylist[j].offWorkType == 1) {
					daysNum = daysNum + this.hoildaylist[j].days
				}
			}
			this.ProjectData[0] = {
				name: `年假(剩余${this.holidayDays.restHolidayTime - daysNum}天,已冻结${this.freezeHolidayTime - daysNum}天)(截止${this.restHolidayDate})`,
				type: 1,
				disabled: (this.holidayDays.restHolidayTime - daysNum) < 0
			}
			let yearsTime = 0
			for (let j = 0; j < this.hoildaylist.length; j++) {
				if (this.hoildaylist[j].offWorkType == 3) {
					yearsTime += this.hoildaylist[j].hour
				}
			}
			this.ProjectData[1] = {
				name: `调休(剩余${this.holidayDays.restExchangeTime - yearsTime}小时,已冻结${this.freezeExchangeTime - yearsTime}小时)`,
				type: 3,
				disabled: (this.holidayDays.restExchangeTime - yearsTime) < 0
			}
		},
		baseRequest1(prefix, opUrl, postData) {
			return this.$channel.globleRequest(prefix, opUrl, postData, 'project task')
		},
		async confirmSubmit() {
			let yearsTime = 0
			let daysNum = 0
			for (let j = 0; j < this.hoildaylist.length; j++) {
				if (this.hoildaylist[j].offWorkType == 3) {
					yearsTime += this.hoildaylist[j].hour
				}
				if (this.hoildaylist[j].offWorkType == 1) {
					daysNum = daysNum + this.hoildaylist[j].days
				}
			}
			if ((this.holidayDays.restHolidayTime - daysNum) < 0) {
				this.$message.error('年假选择时间超时')
				return
			}
			if (this.holidayDays.restExchangeTime - yearsTime < 0) {
				this.$message.error('调休假选择时间超时')
				return
			}

			if (!this.form.applyReasons || this.form.applyReasons.length == 0) {
				this.$message.error('请填写请假事由')
				return
			}

			let applyOffWorkTimeString = this.hoildaylist.map((e) => {
				return {
					offWorkType: e.offWorkType,
					timeUnit: e.offWorkType == 3 || e.offWorkType == 2 ? '小时' : '天',
					useTime: e.offWorkType == 3 || e.offWorkType == 2 ? e.hour : e.days,
					startDay: e.startDate,
					endDay: e.endDate,
					endTime: e.offWorkType == 3 || e.offWorkType == 2 ? null : e.endIsAllday,
					startTime: e.offWorkType == 3 || e.offWorkType == 2 ? null : e.startIsAllday
				}
			})
			let fileDataIds = this.form.fileUrlList.map((e) => {
				return e.data
			}).toString()
			const confirmForm = {
				ccList: this.form.ccList,
				applyReasons: this.form.applyReasons,
				applyOffWorkTimeString: JSON.stringify(applyOffWorkTimeString),
				fileDataIds: fileDataIds
			}
			this.loading = true
			const { data } = await this.baseRequest1('ApplyOffWorkController', 'addApplyOffWork', { ...confirmForm })
			this.loading = false
			if (data.code == 200) {
				this.hoildaylist = []
				this.selectList = []
				this.form = {
					fileUrlList: []
				}
				this.hoildaylist = [
					{ offWorkType: 2, hour: 0, days: 0 }
				]
				this.$emit('getData')
				this.dialogVisible = false
			}

		},
		async setVisible(status, data) {
			this.dialogVisible = status
			this.hoildaylist = [
				{ offWorkType: 2, hour: 0, days: 0 }
			]
			this.form = {
				fileUrlList: []
			}
			const { data: holidayDays } = await this.baseRequest1('ApplyOffWorkController', 'getHolidayManagementByCreater', {})
            const { data: holidayInfo } = await this.baseRequest1('ApplyOffWorkController', 'getHolidayByApplyUserId', { userId: this.$common.currUserId() })
			this.freezeHolidayTime = holidayDays.freezeHolidayTime
			this.freezeExchangeTime = holidayDays.freezeExchangeTime
			this.restHolidayDate = this.$common.transDate(holidayInfo.restHolidayDate)
			this.holidayDays = holidayDays
			this.ProjectData = [
				{
					name: `年假(剩余${holidayDays.restHolidayTime}天,已冻结${holidayDays.freezeHolidayTime}天)(截止${this.restHolidayDate})`,
					type: 1,
					disabled: this.holidayDays.restHolidayTime <= 0
				},
				{
					name: `调休(剩余${holidayDays.restExchangeTime}小时,已冻结${holidayDays.freezeExchangeTime}小时)`,
					type: 3,
					disabled: this.holidayDays.restExchangeTime <= 0
				},
				{
					name: `事假`,
					type: 2
				},
				{
					name: `病假`,
					type: 4
				},
				{
					name: `婚假`,
					type: 5
				},
				{
					name: `产假`,
					type: 6
				},
				{
					name: `陪产假`,
					type: 7
				},
				{
					name: `丧假`,
					type: 8
				}

			]

		},
		addListRow() {
			const _this = this

			_this.hoildaylist.push({ offWorkType: 2, days: 0, hour: 0 })
		}

	}
}
</script>

<style lang="scss">
.zhi {
	width: 20px;
	text-align: center;
	margin-left: 10px;
	margin-right: 10px;
}

#containerHoliday {
	width: 100%;
	height: 600px;
	background: #F5F5F5;
}

.ml5 {
	margin-left: 5px;
}

.totalApplyTime {
	font-size: 16px;
	font-family: 微软雅黑;
	font-weight: 400;
	color: #1890FF;
	text-align: right;
	margin: 15px 0 15px 0;
	width: 100%;
}

.tabsdom {
	.el-tabs__header {
		text-align: center !important;
		width: 139px !important;
		text-align: center !important;
		display: block !important;
		margin: auto !important;
		margin-bottom: 15px !important;
	}

	.el-tabs__nav-wrap::after {
		display: none;
	}

	.el-upload {
		width: 100%;
	}
}

</style>