settle_down_web/src/views/workflow/components/myProcess/applyPayment.vue

<template>
    <!--    加班申请单 发起付款申请(不要调用接口的)-->

    <el-dialog
	 :close-on-click-modal="false"
	 :close-on-press-escape="false"
	 :visible.sync="dialogVisible"
	 title="发起付款申请"
	 top="50px"
	 width="75%"
     :append-to-body="true"
	 :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: 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">
												<div style="display: flex;align-items: center">
													<el-time-picker
													 :disabled="!item.startDay"
													 @change="getStartTime($event,index)"
													 value-format="HH:mm"
													 format="HH:mm"
													 v-model="item.startTime"
													 placeholder="开始时间"
													>
													</el-time-picker>
													<div class="zhi">至</div>
													<el-time-picker
													 :disabled="!(item.startDay&&item.startTime)"
													 @input="getEndTime($event,index)"
													 value-format="HH:mm"
													 format="HH:mm"
													 v-model="item.endTime"
													 placeholder="结束时间"
													>
													</el-time-picker>
												</div>
											</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">
					<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="containeraddwork" 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="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 * as echarts from 'echarts'

const lineStyle = {
	color: '#00116a',
	width: 2

}
const redLinestyle = {
	color: 'red',
	width: 2
}
const applyAddWorkTime = { useTime: 0 }
export default {
	name: 'ApplyPay',
	mixins: [Base, BaseData],
	components: {
		upload, UserSelect
	},
	data() {
		return {
			loading: false,
			nodeColor: [
				{ name: '审核通过', nodeback: '#2A3980' },
				{ name: '未经过', nodeback: '#999999' },
				{ name: '退回', nodeback: '#E04242' },
				{ name: '审核中', nodeback: '#E08E42' },
				{ name: '撤回', nodeback: '#4294E0' }
			],
			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
				}],
			nodes: [ // 节点
				{
					name: '申请人发起',
					value: [45, 100],
					symbol: 'image://' + require('../asste/huifangkuai.png'),
					symbolSize: [110, 60]
				},
				{
					name: '直接上级审核',
					value: [125, 100],
					symbol: 'image://' + require('../asste/huifangkuai.png'),
					symbolSize: [110, 60]
				},
				{
					name: '部门负责人审核',
					value: [205, 100],
					symbol: 'image://' + require('../asste/huifangkuai.png'),
					symbolSize: [110, 60]
				},
				{
					name: '分管领导审核',
					value: [285, 100],
					symbol: 'image://' + require('../asste/huifangkuai.png'),
					symbolSize: [110, 60]
				},
				{
					name: '上级分管领导\n审核',
					value: [365, 100],
					symbol: 'image://' + require('../asste/huifangkuai.png'),
					symbolSize: [110, 60]
				},
				{
					name: '主要领导\n审核',
					value: [445, 100],
					symbol: 'image://' + require('../asste/huifangkuai.png'),
					symbolSize: [110, 60]
				},
				{
					name: '结束',
					value: [525, 100],
					symbol: 'image://' + require('../asste/huifangkuai.png'),
					symbolSize: [110, 60]
				},
				{
					label: {
						show: true,
						color: 'red', // 节点文字颜色
						backgroundColor: '#f5f5f5'
					},
					itemStyle: {
						color: '#f5f5f5'
					},
					name: '退回发起人',
					value: [350, 400],
					symbolSize: [70, 20]
				},
				{
					label: {
						show: true,
						color: 'red', // 节点文字颜色
						backgroundColor: '#f5f5f5'
					},
					itemStyle: {
						color: '#f5f5f5'
					},
					name: '  退回发起人  ',
					value: [300, 350],
					symbolSize: [20, 20]
				},
				{
					label: {
						show: true,
						color: 'red', // 节点文字颜色
						backgroundColor: '#f5f5f5'
					},
					itemStyle: {
						color: '#f5f5f5'
					},
					name: ' 退回发起人 ',
					value: [250, 300],
					symbolSize: [20, 20]
				},
				{
					label: {
						show: true,
						color: 'red', // 节点文字颜色
						backgroundColor: '#f5f5f5'
					},
					itemStyle: {
						color: '#f5f5f5'
					},
					name: ' 退回发起人  ',
					value: [250, 300],
					symbolSize: [20, 20]
				},
				{
					label: {
						show: true,
						color: 'red', // 节点文字颜色
						backgroundColor: '#f5f5f5'
					},
					itemStyle: {
						color: '#f5f5f5'
					},
					name: ' 退回发起人   ',
					value: [175, 250],
					symbolSize: [20, 20]
				},
				{
					label: {
						show: true,
						color: 'red', // 节点文字颜色
						backgroundColor: '#f5f5f5'
					},
					itemStyle: {
						color: '#f5f5f5'
					},
					name: '  退回发起人   ',
					value: [100, 200],
					symbolSize: [20, 20]
				}
			],
			linesData: [ // 连线

				{
					lineStyle: lineStyle,
					coords: [[45, 100], [105, 100]]
				},
				{
					lineStyle: lineStyle,
					coords: [[125, 100], [185, 100]]
				},
				{
					lineStyle: lineStyle,
					coords: [[205, 100], [265, 100]]
				},
				{
					lineStyle: lineStyle,
					coords: [[285, 100], [345, 100]]
				},
				{
					lineStyle: lineStyle,
					coords: [[365, 100], [425, 100]]
				},
				{
					lineStyle: lineStyle,
					coords: [[445, 100], [505, 100]]
				},
				{
					lineStyle: lineStyle,
					coords: [[450, 100], [450, 400]],
					symbol: 'none'
				},
				{
					lineStyle: lineStyle,
					coords: [[370, 100], [370, 350]],
					symbol: 'none'
				},
				{
					lineStyle: lineStyle,
					coords: [[290, 100], [290, 300]],
					symbol: 'none'
				},
				{
					lineStyle: lineStyle,
					coords: [[210, 100], [210, 250]],
					symbol: 'none'
				},
				{
					lineStyle: lineStyle,
					coords: [[130, 100], [130, 200]],
					symbol: 'none'
				},
				{
					lineStyle: lineStyle,
					coords: [[50, 100], [50, 400]],
					symbol: 'none'
				},
				{
					lineStyle: lineStyle,
					coords: [[450, 400], [50, 400]],
					symbol: 'none'
				},
				{
					lineStyle: lineStyle,
					coords: [[370, 350], [50, 350]],
					symbol: 'none'
				},
				{
					lineStyle: lineStyle,
					coords: [[290, 300], [50, 300]],
					symbol: 'none'
				},
				{
					lineStyle: lineStyle,
					coords: [[210, 250], [50, 250]],
					symbol: 'none'
				},
				{
					lineStyle: lineStyle,
					coords: [[130, 200], [50, 200]],
					symbol: 'none'
				},
				{
					lineStyle: lineStyle,
					coords: [[50, 150], [50, 150]],
					symbol: 'none'
				}

			]
		}
	},
	computed: {},
	watch: {
		'applyAddWorkTime': {
			deep: true,
			handler(newValue, oldValue) {
				let totalAddTime = 0
				console.log(this.applyAddWorkTime)
				try {

					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))
				} catch (e) {
					console.log(e)
				}
			}
		}
	},
	created() {

	},
	mounted() {

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

	},
	methods: {
		beforeClose() {

			this.applyAddWorkTime = [{ ...applyAddWorkTime }],
			 this.formData = {
				 proId: '',
				 totalAddTime: 0,
				 applyReasons: '',
				 position: '',
				 applyAddWorkTime: [
					 {
						 useTime: 0
					 }
				 ]
			 }
			this.dialogVisible = false
			this.activeName = 'first'
			this.$forceUpdate()
		},
		handleClick(tab, event) {
			if (this.activeName == 'second') this.createNodeCanvas()
		},
		createNodeCanvas() {
			this.$nextTick(() => {
				let chartDom = document.getElementById('containeraddwork')
				var myCharts = echarts.init(chartDom)
				let charts = {
					nodes: this.nodes,
					linesData: this.linesData
				}
				let option = {
					xAxis: {
						min: 0,
						max: 600,
						padding: [0, 50, 0, 50],
						show: false,
						type: 'value'
					},
					yAxis: {
						min: 0,
						max: 450,
						show: false,
						type: 'value'
					},
					grid: {
						left: 50,
						right: 0,
						bottom: 0,
						top: 0
					},

					series: [
						{
							type: 'graph',
							coordinateSystem: 'cartesian2d',
							symbol: 'rect',
							symbolSize: [80, 40],
							itemStyle: {
								color: 'rgb(225,7,7)'
							},
							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()
				})
			})
		},
		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)  //小时
		},
		getEndTime(event, index) {
			console.log(event)
			this.$nextTick(() => {
				if (event) {
					this.applyAddWorkTime[index].endTime = this.applyAddWorkTime[index].startDay + ' ' + this.applyAddWorkTime[index].endTime + ':00'
					this.applyAddWorkTime[index].useTime = this.getHour(this.applyAddWorkTime[index].startTime, this.applyAddWorkTime[index].endTime)
				}
			})
		},
		getStartTime(event, index) {
			this.$nextTick(() => {
				this.applyAddWorkTime[index].startTime = this.applyAddWorkTime[index].startDay + ' ' + this.applyAddWorkTime[index].startTime + ':00'
				this.applyAddWorkTime[index].endTime = null
				this.applyAddWorkTime[index].useTime = 0
			})
		},
		getTimeRange(event, index) {
			this.$nextTick(() => {
				console.log(event)
				if (event) {
					this.applyAddWorkTime[index].startTime = this.applyAddWorkTime[index].startDay + ' ' + event[0] + ':00'
					this.applyAddWorkTime[index].endTime = this.applyAddWorkTime[index].startDay + ' ' + event[1] + ':00'
					this.applyAddWorkTime[index].useTime = this.getHour(event[0], event[1])
				} else {
					this.applyAddWorkTime[index].useTime = 0
				}
			})
		},
		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)
		},
		setVisible(status) {

			this.getUserInfo()
			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
				this.loading = true
				let { data } = await this.baseRequest1('ApplyAddWorkController', 'addApplyAddWork', { ...formData })
				if (data.code == 200) {
					this.loading = false
					this.$message.success('加班申请发起成功')
					this.dialogVisible = false
					this.$emit('getData')
				}
				this.close()
			})
		}
	}
}

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

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

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