programs_info/小艾协同/流程图地址/流程从三资开始和保障房合并后搬过来的/前端代码/workflow/components/myProcess/holidayDetails.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="closeDialog"
	>
		<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" style="margin:10px 0px">
							<el-row v-if="item.offWorkType==1" :gutter="10" class="holidayRow">
								<el-col :span="2" class="col-txt">
									<div style="width: 100%">
										&nbsp;
										<span v-if="index==0">请假类型 </span>
									</div>
								</el-col>
								<el-col :span="5">
									<el-select
									 v-model="item.offWorkType"
									 disabled
									 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"
									 disabled

									 placeholder="选择日期"
									 style="width: 100%!important;"
									 type="date"
									 value-format="yyyy-MM-dd"
									 width="100%"
									/>
								</el-col>
								<el-col :span="2">

									<el-select
									 v-model="item.startIsAllday"
									 disabled
									 filterable
									 placeholder=""
									>

										<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"
									 disabled
									 placeholder="选择日期"
									 style="width:100%"
									 type="date"
									 value-format="yyyy-MM-dd"
									/>
								</el-col>
								<el-col :span="2">
									<el-select
									 v-model="item.endIsAllday"
									 disabled
									 filterable
									 placeholder=""
									>

										<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-row>
							<el-row v-if="item.offWorkType==3||item.offWorkType==2" :gutter="10" class="holidayRow">
								<el-col :span="2" class="col-txt">
									<div style="
								width: 100%"
									>

										<span v-if="index==0">请假类型 </span>&nbsp;
									</div>
								</el-col>
								<el-col :span="5" class="col-input">

									<el-select
									 v-model="item.offWorkType"
									 disabled
									 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"
									 disabled
									 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
										 value-format="HH:mm"
										 format="HH:mm"
										 v-model="item.startTime"
										 placeholder="开始时间"
										>
										</el-time-picker>
										<div class="zhi">至</div>
										<el-time-picker
										 disabled
										 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">
									<!--                      {{ JSON.stringify(item) }}-->
									共{{ item.hour }}小时

								</el-col>

							</el-row>
							<el-row v-if="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-if="index==0">请假类型 </span>
									</div>
								</el-col>
								<el-col :span="5">
									<el-select v-model="item.offWorkType"
														 disabled
														 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"
																	disabled
																	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"
														 disabled
														 filterable
														 placeholder=""
									>

										<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"
																	disabled
																	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"
														 disabled
														 filterable
														 placeholder=""
									>

										<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-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" readonly 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"
								 class="upload-demo"
								 disabled
								 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
								 ref="userSelect"
								 :default-select="selectList"
								 :multiple="true"
								 disab
								 width="700"
								/>
							</el-col>
						</el-row>

					</el-card>

					<h3>流程历史</h3>
					<div class="tableDom">
						<el-card>
							<div class="tableDom">
								<el-table
								 :data="tableData"
								 :header-cell-style="{
                  background:'#1890FF !important',
                  color:'white'
                }"
								 border
								 style="width: 100%"
								>
									<el-table-column fixed label="序号" type="index" width="60"/>
									<el-table-column
									 label="节点名称"
									 prop="nodeName"
									 width="180"
									/>
									<el-table-column
									 label="处理人"
									 prop="auditUserName"
									 width="180"
									/>
									<el-table-column
									 label="审核结果"
									 prop="auditResultString"
									/>
									<el-table-column
									 label="审核意见"
									 prop="auditContent"
									/>
									<el-table-column
									 label="发起/审核时间"
									 prop="createdAt"
									>
										<template slot-scope="scope">
											{{ $common.transTime(scope.row.createdAt) }}
										</template>
									</el-table-column>
								</el-table>
							</div>

						</el-card>
					</div>

				</el-tab-pane>
				<el-tab-pane label="流程图  " name="second">
					<div style="width: 100%">
						<el-row>
							<el-col :span="24">
								<!--								<div id="containerHolidayDetails" style="width: 100%" v-show="true"></div>-->
								<holiday-canvas ref="holidayCanvas"/>
							</el-col>
						</el-row>
					</div>
				</el-tab-pane>
			</el-tabs>
		</div>
		<div slot="footer">
			<el-button @click="closeDialog">关闭</el-button>
		</div>
	</el-dialog>

</template>

<script>
import userSelect from '@/views/components/UserSelect.vue'
import holidayCanvas from '@/views/workflow/components/myProcess/holidayCanvas.vue'

export default {
	name: 'applyPay',
	components: {
		userSelect,
		holidayCanvas
	},
	data() {
		return {
			row: {},
			tableData: [],
			loading: false,
			totalApplyTime: '共计请假0天，0.00小时',
			dialogVisible: false,
			hoildaylist: [
				{ offWorkType: 2, hour: 0, days: 0 }
			],
			fileError: false,
			fileList: [],
			selectList: [],

			form: {
				fileUrlList: []
			},
			daysNum: 0,
			holidayDays: {},

			hoildayist: [
				{ type: 'year' }
			],
			options: [],
			value1: [],
			ProjectData: [
				{ name: '年假(剩余x天)', type: 'year' },
				{ name: '调休(剩余x小时)', type: 'affair' },
				{ name: '病假', type: 'illness' }
			],
			dialogTitle: '请假申请-查看详情',

			activeName: 'first'

		}
	},
	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 + this.hoildaylist[i].hour
					}
					if (this.hoildaylist[i].days == 0 || this.hoildaylist[i].days) {
						day = day + this.hoildaylist[i].days
					}
				}
				this.holidayDate = day
				this.holidayTime = hour

				this.changeCotalApplyTime(`共计请假${day}天，${hour.toFixed(2)}小时`)
			}
		}
	},
	methods: {
        closeDialog(){
            this.dialogVisible =false
            this.$emit('close')
        },
		reductionLineStyle(nodeKey) {
			for (let i = 0; i < this.linesData.length; i++) {
				if (this.linesData[i].nodeKey == nodeKey) {

					this.linesData[i].lineStyle = lineStyle
				}
			}
		},
		getLineStyle(nodeKey) {
			for (let i = 0; i < this.linesData.length; i++) {
				if (this.linesData[i].nodeKey == nodeKey) {

					this.linesData[i].lineStyle = {
						color: '#2A3980',
						width: 2
					}
				}
			}
		},
		getImgUrl(index, type) {
			switch (type) {
				case '1':
					this.node[index].symbol = 'image://' + require('../asste/lanfangkuai.png')
					break
				case '2':
					this.node[index].symbol = 'image://' + require('../asste/hongfangkuai.jpg')
					break
				case '3':
					this.node[index].symbol = 'image://' + require('../asste/huangfanmgkuai.png')
					break
				case '4' || '5':
					this.node[index].symbol = 'image://' + require('../asste/qianlanfangkuai.jpg')
					break
				default:
			}
		},

		handleClick(tab, event) {
			if (this.activeName == 'second') this.$refs.holidayCanvas.createNodeCanvas(this.row)
		},
		changeCotalApplyTime(e) {

			this.totalApplyTime = e
		},
		handleRemove(file, fileList) {
		},
		handlePreview(file) {
		},
		handleExceed(files, fileList) {
			this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
		},
		beforeRemove(file, fileList) {
			return this.$confirm(`确定移除 ${file.name}？`)
		},
		getHolidayType(i, type) {

		},
		confirmSubmit() {
			this.dialogVisibl = false
		},
		baseRequest1(prefix, opUrl, postData) {
			return this.$channel.globleRequest(prefix, opUrl, postData, 'project task')
		},
		async setVisible(status, row) {
			this.activeName = 'first'
			const { data: holidayDays } = await this.baseRequest1('ApplyOffWorkController', 'getHolidayManagementByUserId', { userId: row.applyUser })
			this.holidayDays = holidayDays
			this.ProjectData = [
				{
					name: `年假(剩余${holidayDays.restHolidayTime}天,已冻结${holidayDays.freezeHolidayTime}天)`,
					type: 1
				},
				{
					name: `调休(剩余${holidayDays.restExchangeTime}小时,已冻结${holidayDays.freezeExchangeTime}小时)`,
					type: 3
				},
				{
					name: `事假`,
					type: 2
				},
				{
					name: `病假`,
					type: 4
				},
				{
					name: `婚假`,
					type: 5
				},
				{
					name: `产假`,
					type: 6
				},
				{
					name: `陪产假`,
					type: 7
				},
				{
					name: `丧假`,
					type: 8
				}
			]

			const { data } = await this.baseRequest1('ApplyOffWorkController', 'getInfoByFlowMainId', { flowMainId: row.id })
			const { data: flowHistroy } = await this.baseRequest1('FlowMainController', 'getFlowHistroyByFlowMainId', { flowMainId: row.id })
			this.form = data
			this.tableData = flowHistroy

			this.hoildaylist = data.applyOffWorkTimeList.map((e) => {
				return {
					offWorkType: Number(e.offWorkType),
					endDate: this.$common.transTime(e.endDay),
					startDate: this.$common.transTime(e.startDay),
					days: Number(e.offWorkType) != 3 && Number(e.offWorkType) != 2 ? e.useTime : 0,
					hour: Number(e.offWorkType) == 3 || Number(e.offWorkType) == 2 ? e.useTime : 0,
					startIsAllday: e.startTime,
					dayMerange: Number(e.offWorkType) == 2 || Number(e.offWorkType) == 3 ? this.$common.transDate(e.startDay) : null,
					timeMerange: Number(e.offWorkType) == 2 || Number(e.offWorkType) == 3 ? [this.$common.transhh(e.startDay), this.$common.transhh(e.endDay)] : null,
					startTime: this.$common.transhh(e.startDay),
					endTime: this.$common.transhh(e.endDay),
					endIsAllday: e.endTime

				}
			})

			let selectList = data.flowMainCcList.map((e) => {
				return e.ccUser
			})
			this.selectList = selectList
			if (data.fileDataIds) {
				const { data: fileTaoTaoList } = await this.baseRequest1('FileZtController', 'findFileInfoByIds/' + data.fileDataIds, '')
				this.form.fileUrlList = fileTaoTaoList.data.map((e) => {
					return {
						url: this.$constant.BASE_URI + '/FileController/download/' + e.id,
						name: e.fileName,
						data: e.id,
						uid: new Date().getTime()
					}
				})
			} else {
				this.form.fileUrlList = []
			}

			this.dialogVisible = status
			this.row = row
		},

		addListRow() {
			const _this = this
			_this.hoildayist.push({ type: 'year' })
		}
	}
}
</script>

<style lang="scss">
#containerHolidayDetails {
	width: 100%;
	height: 600px;
	background: #F5F5F5;
}

.ml5 {
	margin-left: 5px;
}

.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>