programs_info/三资项目/删除前备份/前段代码/workflow/components/myProcess/applyAgainAddWork.vue

<template>
	<el-dialog
	 :close-on-click-modal="false"
	 :close-on-press-escape="false"
	 :visible.sync="dialogVisible"
	 title="加班申请单"
	 top="50px"
	 width="75%"
	>
		<div class="tabsdom">
			<el-tabs v-model="activeName" @tab-click="handleClick">
				<el-tab-pane label="加班申请" name="first">
					<el-card shadow="always" style="padding: 15px 5px 5px 15px">
						<el-row :gutter="15">
							<el-form ref="elForm" :model="formData" :rules="rules" label-width="100px">
								<el-col :span="24">
									<el-form-item label="姓名">
										<el-input v-model="userinfo.truename" placeholder="请输入加班申请" readonly>
										</el-input>
									</el-form-item>
								</el-col>
								<el-col :span="12">
									<el-form-item label="所在部门">
										<el-input v-model="userinfo.deptName" placeholder="请输入所在部门" readonly>
										</el-input>
									</el-form-item>
								</el-col>
								<el-col :span="12">
									<el-form-item label="岗位">
										<el-input v-model="userinfo.postName" placeholder="请输入岗位" readonly>
										</el-input>
									</el-form-item>
								</el-col>
								<el-col :span="24">
									<el-form-item label="关联项目" prop="proId">
										<el-select v-model="formData.proId" filterable placeholder="关联项目名称">
											<el-option
											 v-for="item in ProjectData"
											 :key="item.value"
											 :label="item.label"
											 :value="item.value"
											>
												<span style="float: left">{{ item.label }}</span>
												<span style="float: right; color: #8492a6; font-size: 13px">{{
														item.custname
													}}</span>
											</el-option>
										</el-select>
									</el-form-item>

								</el-col>
								<el-col :span="24">
									<el-form-item label="加班事由" prop="applyReasons">
										<el-input v-model="formData.applyReasons" :autosize="{minRows: 4, maxRows: 4}"
															placeholder="请输入加班事由"
															type="textarea"
										></el-input>
									</el-form-item>
								</el-col>
								<el-col :span="24">
									<el-form-item label="加班位置" prop="position">
										<el-radio-group v-model="formData.position" size="medium">
											<el-radio
											 v-for="(item, index) in positionOptions"
											 :key="index" :disabled="item.disabled"
											 :label="item.value"
											>
												{{ item.label }}
											</el-radio>
										</el-radio-group>
									</el-form-item>
								</el-col>
								<el-col :span="24">

									<el-form-item label="加班时间">
										<el-row v-for="(item,index) in applyAddWorkTime">
											<el-col :span="10">
												<el-date-picker
												 v-model="item.startDay"
												 class="pdr10px mgb10px"
												 placeholder="选择日期"
												 type="date"

												 value-format="yyyy-MM-dd"
												>
												</el-date-picker>
											</el-col>
											<el-col :span="10">
												<el-time-picker
												 v-model="item.timeRange"
												 :disabled="!item.startDay"
												 class="el-input pdr10px mgb10px"
												 clearable
												 end-placeholder="结束时间" format="HH:mm"
												 is-range
												 range-separator="至"
												 start-placeholder="开始时间"
												 value-format="HH:mm"
												 @change="getTimeRange($event,index)"
												/>
											</el-col>
											<el-col :span="2">
												<div style="text-align: center">小计{{ item.useTime }}（h）</div>
											</el-col>
											<el-col :span="1" class="col-txt" style="text-align: center">
												&nbsp;
												<el-button
												 v-if="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 class="totalApplyTime">共计加班时长{{ formData.totalAddTime }}（h)</div>
									</el-form-item>

								</el-col>
								<el-col :span="24">
									<el-form-item label="备注">
										<el-input
										 v-model="formData.remark"
										 :autosize="{minRows: 4, maxRows: 4}"
										 :style="{width: '100%'}"
										 placeholder="请输入备注"
										 type="textarea"
										></el-input>
									</el-form-item>
								</el-col>
							</el-form>
						</el-row>
					</el-card>
				</el-tab-pane>
				<el-tab-pane label="流程图  " name="second">
					<add-work-canvas ref="addWorkCanvas"/>

				</el-tab-pane>
			</el-tabs>
		</div>
		<div slot="footer">
			<el-button @click="dialogVisible=false">取消</el-button>

			<el-button :loading="loading" type="primary" @click="handelConfirm">确定</el-button>
		</div>
	</el-dialog>

</template>

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

const applyAddWorkTime = { useTime: 0 }
export default {
	name: 'ApplyPay',
	mixins: [Base, BaseData],
	components: {
		upload, UserSelect
	},
	data() {
		return {
			row: {},
			loading: false,
			dc_key: ['ORDER_STATUS', 'PAY_TYPE', 'BUDGET_FY'],
			ProjectData: [],
			dialogVisible: false,
			applyAddWorkTime: [{ ...applyAddWorkTime }],
			formData: {
				proId: '',
				totalAddTime: 0,
				applyReasons: '',
				position: '',
				applyAddWorkTime: [
					{
						useTime: 0
					}
				]
			},
			userinfo: {},
			activeName: 'first',
			rules: {

				proId: [{
					required: true,
					message: '请选择关联项目',
					trigger: 'change'
				}],
				applyReasons: [{
					required: true,
					message: '请输入加班事由',
					trigger: 'change'
				}],
				position: [{
					required: true,
					message: '加班位置不能为空',
					trigger: 'change'
				}]

			},

			positionOptions: [
				{
					'label': '公司',
					'value': 1
				},
				{
					'label': '客户处',
					'value': 2
				}, {
					'label': '居家',
					'value': 3
				}]
		}
	},
	computed: {},
	watch: {
		'applyAddWorkTime': {
			deep: true,
			handler(newValue, oldValue) {
				let totalAddTime = 0
				for (let i = 0; i < this.applyAddWorkTime.length; i++) {
					if (this.applyAddWorkTime[i].useTime === 0 || this.applyAddWorkTime[i].useTime) {
						totalAddTime = totalAddTime + Number(this.applyAddWorkTime[i].useTime)
					}
				}
				console.log(totalAddTime)
				this.changeAddWorkTime(totalAddTime.toFixed(1))
			}
		}
	},
	created() {

	},
	mounted() {

		this.initDict(this.dc_key).then((res) => {
		})
		this.initProject({ /* signstatus: '2,3'*/ })

	},
	methods: {
		handleClick(tab, event) {
			this.canVasStatus = false
			if (this.activeName == 'second') {
				this.canVasStatus = true
				this.$nextTick(() => {
					this.$refs.addWorkCanvas.createNodeCanvas(this.row)

				})
			}
		},
		changeAddWorkTime(totalAddTime) {
			this.formData.totalAddTime = totalAddTime
		},
		getHour(s1, s2) {
			var reDate = /\d{4}-\d{1,2}-\d{1,2} /

			s1 = new Date((reDate.test(s1) ? s1 : '2018-1-1 ' + s1).replace(/-/g, '/'))
			s2 = new Date((reDate.test(s2) ? s2 : '2018-1-1 ' + s2).replace(/-/g, '/'))
			var ms = s2.getTime() - s1.getTime()
			if (ms < 0) return 0
			console.log(ms)

			return (ms / 1000 / 60 / 60).toFixed(1)  //小时
		},
		getTimeRange(event, i) {
			this.$nextTick(() => {
				this.applyAddWorkTime[i].startTime = this.applyAddWorkTime[i].startDay + ' ' + event[0] + ':00'
				this.applyAddWorkTime[i].endTime = this.applyAddWorkTime[i].startDay + ' ' + event[1] + ':00'
				let timeRang = this.getHour(event[0], event[1])
				this.applyAddWorkTime[i].useTime = timeRang
			})
		},
		async getUserInfo() {
			let { data: userinfo } = await this.baseRequest1('ApplyAddWorkController', 'getUserInfoByUserId', { userId: '' })
			this.userinfo = userinfo
			console.log(this.userinfo)
		},
		baseRequest1(prefix, opUrl, postData) {
			return this.$channel.globleRequest(prefix, opUrl, postData, 'project task')
		},
		addListRow() {
			this.applyAddWorkTime.push({ ...applyAddWorkTime })
		},
		spliceListRow(index) {
			this.applyAddWorkTime.splice(index, 1)
		},
		async setVisible(status, row) {
			this.row = row
			this.activeName = 'first'
			this.getUserInfo(row.applyUser)
			let { data } = await this.baseRequest1('ApplyAddWorkController', 'getInfoByFlowMainId', { flowMainId: row.id })
			this.formData = data
			this.formData.flowMainId = data.flowMainId
			this.applyAddWorkTime = data.applyAddWorkTimeList.map((e) => {
				return {
					useTime: e.useTime,
					startDay: this.$common.transDate(e.startDay),
					timeRange: [this.$common.transMinute(e.startTime), this.$common.transMinute(e.endTime)],
					startTime: this.$common.transMinute(e.startTime),
					endTime: this.$common.transMinute(e.endTime)
				}
			})
			console.log(this.applyAddWorkTime)
			// flowMainPushId
			this.dialogVisible = status
		},
		onOpen() {
		},
		onClose() {
			this.$refs['elForm'].resetFields()
		},
		close() {
			this.$emit('update:visible', false)
		},
		async handelConfirm() {
			this.$refs['elForm'].validate(async valid => {
				if (!valid) return
				let formData = {
					...this.formData,
					applyAddWorkTimeString: JSON.stringify(this.applyAddWorkTime)
				}
				delete formData.applyAddWorkTime
				delete formData.applyAddWorkTimeList
				console.error('formDataformDataformDataformDataformData', formData)
				this.loading = true
				let { data } = await this.baseRequest1('ApplyAddWorkController', 'addApplyAddWorkAgain', { ...formData })
				this.loading = false
				if (data.code == 200) {
					this.$message.success('加班申请发起成功')
					this.dialogVisible = false
					this.$emit('getData')
				}
				this.close()
			})
		}
	}
}

</script>
<style lang="scss">
.cclist {
	.col-input {
		padding: 0;
	}
}

.pdr10px {
	padding-right: 10px;
}

.mgb10px {
	margin-bottom: 10px;
}

.mb25 {
	margin-bottom: 25px;
}

.pdtopbottom16 {
	padding: 0px 16px;
}

.pdtop16px {
	padding-top: 16px;
}

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

.cost_form {
	.col-input {
		font-weight: 400;
	}

	.el-form-item__label .moneydetails {
		text-align: right;
		font-size: 16px;
		font-family: 微软雅黑;
		padding-right: 10px;
		line-height: 40px;
		word-break: keep-all;
		white-space: nowrap;
		color: #606266;
		text-rendering: optimizeLegibility;
		font-weight: 400;
	}

	.moneydetails {
		text-align: right;
		font-size: 16px;
		font-family: 微软雅黑;
		padding-right: 10px;
		word-break: keep-all;
		white-space: nowrap;
		color: #606266;
		text-rendering: optimizeLegibility;
		font-weight: 400;


	}

	.moneydetails:before {
		content: "*";
		color: #ff4949;

	}
}


.txtc {
	text-align: center
}

.ml5 {
	margin-left: 5px;
}

.eltype {
	margin-bottom: 15px;
}

.tabsdom {
	.el-input {
		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%;
	}
}

.feeMoneyTotal {
	width: 100%;
	height: 14px;
	font-size: 14px;
	font-weight: 400;
	color: #1890FF;
	margin-top: 31px;
	margin-bottom: 13px;
}
</style>