programs_info/三资项目/删除前备份/前段代码/workflow/components/myProcess/applyAddWorkConfirm.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" disabled 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="请输入加班事由" readonly
															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" disabled 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 "
												 disabled
												 placeholder="选择日期"
												 type="date"

												 value-format="yyyy-MM-dd"
												>
												</el-date-picker>
											</el-col>
											<el-col :span="10">
												<el-time-picker
												 v-model="item.timeRange"
												 class="el-input "
												 clearable
												 disabled
												 end-placeholder="结束时间" format="HH:mm"
												 is-range
												 range-separator="至"
												 start-placeholder="开始时间"
												 style="margin: 0"
												 value-format="HH:mm"
												/>
											</el-col>
											<el-col :span="4">
												<div style="text-align: center">小计{{ item.useTime }}（h）</div>
											</el-col>
										</el-row>
										<div class="totalApplyTime" style="margin: 0">共计加班时长{{ 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>

						<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="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>

						<h3>处理</h3>
						<el-card shadow="always" style="padding: 0px 5px 5px 15px">
							<el-form
							 ref="confirmForm"
							 :model="confirmForm"
							 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>
												<!--	c<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-row>
								<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-form>
						</el-card>

					</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 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'
import addWorkCanvas from '@/views/workflow/components/myProcess/addWorkCanvas.vue'

const applyAddWorkTime = { useTime: 0 }
export default {
	name: 'ApplyPay',
	mixins: [Base, BaseData],
	components: {
		upload,
		UserSelect, addWorkCanvas
	},
	data() {
		return {
			row: {},
			confirmList: [],
			selectList: [],

			argeeBackStatus: false,
			argeeNoStatus: false,
			tableData: [],
			flowHistroy: [],
			confirmForm: {
				confirmContent: '',
				confirmResult: 1
			},
			dc_key: ['ORDER_STATUS', 'PAY_TYPE', 'BUDGET_FY', 'COMMON_PHRASES'],
			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)

				})
			}
		},
		parentMethod(val) {
			if (val.length > 0) {
				this.confirmForm.ccList = val.join(',')
			}
		},
		selectCommonPhrases(e) {
			if (!this.confirmForm.confirmContent) this.confirmForm.confirmContent = ''
		},
		changeAddWorkTime(totalAddTime) {
			this.formData.totalAddTime = totalAddTime
		},
		async getUserInfo(applyUser) {

			let { data: userinfo } = await this.baseRequest1('ApplyAddWorkController', 'getUserInfoByUserId', { userId: applyUser })
			this.userinfo = userinfo
			console.log(this.userinfo)
		},
		spliceListRow(index) {
			this.formData.workTimeList.splice(index, 1)
		},
		async setVisible(status, row) {
			this.activeName = 'first'
			this.row = row
			this.getUserInfo(row.applyUser)
			this.confirmForm.flowMainPushId = row.flowMainPushId
			let { data } = await this.baseRequest1('ApplyAddWorkController', 'getInfoByFlowMainPushId', { flowMainPushId: row.flowMainPushId })
			const { data: flowHistroy } = await this.baseRequest1('FlowMainController', 'getFlowHistroyByFlowMainId', { flowMainId: row.id })
			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.tableData = flowHistroy
			this.formData = data

			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)]
				}
			})
			console.log(this.applyAddWorkTime)
			// flowMainPushId
			this.dialogVisible = status
		},
		baseRequest1(prefix, opUrl, postData) {
			return this.$channel.globleRequest(prefix, opUrl, postData, 'project task')
		},

		async handelConfirm() {
			this.$refs['elForm'].validate(async valid => {
				// if (!valid) return
				// ApplyAddWorkController/AddConfirmResultAddWork
				console.log(this.confirmForm)
				const { data } = await this.baseRequest1('ApplyAddWorkController', 'AddConfirmResultAddWork', { ...this.confirmForm })
				if (data.code == 200) {
					this.$message.success('处理成功')
					this.form = {}
					this.confirmForm = { confirmContent: '' }
					this.dialogVisible = false
					this.$emit('getData')
				}
			})
		}
	}
}

</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;
}


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