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

<template>
	<el-dialog
	 :close-on-click-modal="false"
	 :close-on-press-escape="false"
	 :title="dialogTitle"
	 :visible.sync="dialogVisible"
	 top="50px"
	 width="75%"
	>
		<div class="tabsdom">
			<el-tabs v-model="activeName">
				<el-tab-pane label="请假申请" name="first" @tab-click="handleClick">

					<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="请假类型"
									 style="width: 100%!important;"
									>
										<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=""
														 @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"
																	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=""
														 @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-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"
								 :http-request="uploadFile"
								 class="upload-demo"
								 disabled
								 multiple
								>
									<el-button disabled 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-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="auditContent"
							/>
							<el-table-column
							 label="审核意见"
							 prop="auditResultString"
							/>
							<el-table-column
							 label="发起/审核时间"
							 prop="createdAt"
							>
								<template slot-scope="scope">
									{{ $common.transTime(scope.row.createdAt) }}
								</template>
							</el-table-column>
						</el-table>
					</div>

					<h3>处理</h3>
					<el-card shadow="always" style="padding: 0px 5px 5px 15px">
						<el-form
						 ref="confirmForm"
						 :model="confirmForm"
						 :rules="rules"
						 class="cost_form"
						 label-width="100px"
						 style="width: 100%;padding: 5px"
						>
							<el-row :gutter="10">
								<el-col :span="24">
									<el-form-item label="处理结果" style="margin-bottom: 15px">
										<el-radio-group v-model="confirmForm.confirmResult">
											<el-radio :label="1">同意</el-radio>
											<el-radio v-if="argeeNoStatus" :label="2">退回发起人</el-radio>
											<el-radio v-if="argeeBackStatus" :label="3">退回上节点</el-radio>
											<!--												<el-radio :label="4">结束流程</el-radio>-->

										</el-radio-group>
									</el-form-item>
								</el-col>

								<el-col :span="24">
									<el-form-item label="处理意见">
										<el-input v-model="confirmForm.confirmContent" style="margin-top:10px" type="textarea"/>
										<el-dropdown size="mini" split-button trigger="hover" type="primary">
											常用语选择
											<el-dropdown-menu slot="dropdown">
												<el-dropdown-item
												 v-for="item in dc_data.COMMON_PHRASES"
												 @click.native="selectCommonPhrases(item.label)"
												>
													{{ item.label }}
												</el-dropdown-item>

											</el-dropdown-menu>
										</el-dropdown>
									</el-form-item>
								</el-col>

								<el-col :span="24">
									<el-form-item label="审核人抄送">
										<user-select
										 :default-select="confirmList"
										 :multiple="true"
										 class="cclist"
										 @selectValue="parentMethod"
										/>
									</el-form-item>
								</el-col>
							</el-row>

						</el-form>
					</el-card>


				</el-tab-pane>
				<el-tab-pane label="流程图  " name="second">
					<holidayCanvas ref="holidayCanvas"/>
				</el-tab-pane>
			</el-tabs>
		</div>
		<div slot="footer">
			<el-button @click="dialogVisible = false">取 消</el-button>
			<el-button type="primary" @click="confirmSubmit()">确 定</el-button>
		</div>
	</el-dialog>

</template>

<script>
import userSelect from '@/views/components/UserSelect.vue'
import { upload } from '@/static/utils/channel'
import Base from '@/views/base/base'
import BaseData from '@/views/base/baseData'
import holidayCanvas from '@/views/workflow/components/myProcess/holidayCanvas.vue'

export default {
	name: 'applyPay',
	components: {
		userSelect, holidayCanvas
	},
	mixins: [Base, BaseData],
	data() {
		return {
			row: {},
			rules: {
				confirmResult: [
					{ required: true, message: '请选择处理结果', trigger: 'change' }
				]
			},
			confirmList: [],
			freezeHolidayTime: 0,
			freezeExchangeTime: 0,
			confirmForm: {
				confirmContent: '',
				confirmResult: 1
			},
			dc_key: ['ORDER_STATUS', 'PAY_TYPE', 'BUDGET_FY', 'COMMON_PHRASES'],
			dc_data: {},
			tableData: [],
			loading: false,
			totalApplyTime: '共计请假0天，0.00小时',
			dialogVisible: false,
			hoildaylist: [
				{ offWorkType: 2, hour: 0, days: 0 }
			],
			fileError: false,
			fileList: [],
			selectList: [],

			argeeBackStatus: false,
			argeeNoStatus: false,
			form: {
				fileUrlList: []
			},
			daysNum: 0,
			holidayDays: {},

			hoildayist: [
				{ type: 'year' }
			],
			options: [
				{ value: '陈鹏铭', label: '陈鹏铭' },
				{ value: '宣胜伟', label: '宣胜伟' },
				{ value: '张洮', label: '张洮' },
				{ value: '潘毅', label: '潘毅' },
				{ value: '崔伟', label: '崔伟' }
			],
			value1: [],
			ProjectData: [
				{ name: '年假(剩余x天)', type: 'year' },
				{ name: '调休(剩余x小时)', type: 'affair' },
				{ name: '病假', type: 'illness' }
			],
			dialogTitle: '请假申请-审核',

			activeName: 'first'

		}
	},
	mounted() {
		const _this = this
		_this.initDict(this.dc_key).then((res) => {

		})
	},
	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.changeCotalApplyTime(`共计请假${day}天，${hour.toFixed(2)}小时`)
			}
		}
	},
	methods: {
		handleClick(tab, event) {
			this.canVasStatus = false
			if (this.activeName == 'second') {
				this.canVasStatus = true
				this.$nextTick(() => {
					this.$refs.holidayCanvas.createNodeCanvas(this.row)

				})
			}
		},
		getTimeMerange(timeMerange, dayMerange, startIsAllday, endIsAllday, index, type) {

			this.hoildaylist[index].startDate = dayMerange + ' ' + timeMerange[0] + ':00'
			this.hoildaylist[index].endDate = dayMerange + ' ' + timeMerange[1] + ':00'
			this.countDays(dayMerange + ' ' + timeMerange[0], dayMerange + ' ' + timeMerange[1], startIsAllday, endIsAllday, index, type)
		},
		selectCommonPhrases(e) {
			if (!this.confirmForm.confirmContent) this.confirmForm.confirmContent = ''
			this.confirmForm.confirmContent += e
		},
		changeCotalApplyTime(e) {
			this.totalApplyTime = e
		},
		uploadFile(param) {
			upload(param, true).then((res) => {
				this.form.fileUrlList.push(res)
			})
		},
		parentMethod(val) {
			if (val.length > 0) {
				this.confirmForm.ccList = val.join(',')
			}
		},
		async confirmSubmit() {
			const { data } = await this.baseRequest1('ApplyOffWorkController', 'AddConfirmResultOffWork', { ...this.confirmForm })
			console.log(data)
			if (data.code == 200) {
				this.$message.success('处理成功')
				this.form = {
					fileUrlList: []
				}
				this.confirmForm = {
					confirmForm: {
						confirmContent: ''
					}
				}

				this.dialogVisible = false
				this.$emit('getData')
			}

			this.dialogVisibl = false
		},
		baseRequest1(prefix, opUrl, postData) {
			return this.$channel.globleRequest(prefix, opUrl, postData, 'project task')
		},
		async setVisible(status, row) {
			this.form.fileUrlList = []
			console.log(row)
			const { data: holidayDays } = await this.baseRequest1('ApplyOffWorkController', 'getHolidayManagementByApplyUserId', { userId: row.applyUser })
			this.holidayDays = holidayDays
			this.confirmForm.flowMainPushId = row.flowMainPushId
			const noAndbackstatus = await this.baseRequest1('FlowMainController', 'getOutgoingFlowsByFlowMainPushId', { flowMainPushId: row.flowMainPushId })
			for (let i = 0; i < noAndbackstatus.data.length; i++) {
				if (noAndbackstatus.data[i].conditionExpression == '${agree==\'no\'}') this.argeeNoStatus = true
				if (noAndbackstatus.data[i].conditionExpression == '${agree==\'back\'}') this.argeeBackStatus = true
			}
			this.freezeHolidayTime = holidayDays.freezeHolidayTime
			this.freezeExchangeTime = holidayDays.freezeExchangeTime
			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),
					// 这两段是针对小时做的处理
					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,
					days: Number(e.offWorkType) != 2 && Number(e.offWorkType) != 3 ? e.useTime : 0,
					hour: Number(e.offWorkType) == 2 || Number(e.offWorkType) == 3 ? e.useTime : 0,
					startIsAllday: e.startTime,
					endIsAllday: e.endTime,
					startTime: this.$common.transhh(e.startDay),
					endTime: this.$common.transhh(e.endDay)

				}
			})

			let daysNum = 0
			let yearsTime = 0
			for (let j = 0; j < this.hoildaylist.length; j++) {
				if (this.hoildaylist[j].offWorkType == 1) {
					daysNum = daysNum + this.hoildaylist[j].days
				}
			}

			for (let j = 0; j < this.hoildaylist.length; j++) {
				if (this.hoildaylist[j].offWorkType == 2) {
					yearsTime += this.hoildaylist[j].hour
				}
			}
			this.totalApplyTime = `共计请假${daysNum}天，${yearsTime.toFixed(2)}小时`
			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, '')
				console.log(fileTaoTaoList.data)
				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()
					}
				})
				console.log(this.form.fileUrlList)
			} else {
				this.form.fileUrlList = []
			}

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

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

.ml5 {
	margin-left: 5px;
}

.tabsdom {
	.el-select {
		width: 100%;
	}

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