programs_info/三资项目/删除前备份/前段代码/workflow/components/myProcess/applyAddWorkDetail.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>
					</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>
		</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'
import AddWorkCanvas from '@/views/workflow/components/myProcess/addWorkCanvas.vue'

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

}
const redLinestyle = {
	color: 'red',
	width: 2
}
const applyAddWorkTime = { useTime: 0 }
export default {
	name: 'ApplyPay',
	mixins: [Base, BaseData],
	components: {
		AddWorkCanvas,
		upload,
		UserSelect
	},
	data() {
		return {
			row: {},
			argeeBackStatus: false,
			argeeNoStatus: false,
			tableData: [],
			flowHistroy: [],
			confirmForm: {
				confirmContent: ''
			},
			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) {
			if (this.activeName == 'second') this.$refs.AddWorkCanvas.createNodeCanvas(this.row)
		},
		async getIMGFlowHistroyByFlowMainId(row) {
			console.log(row)
			// return
			const { data } = await this.baseRequest1('FlowMainController', 'getIMGFlowHistroyByFlowMainId', { flowMainId: row.id })
			console.log(data)
			for (let i = 0; i < data.length; i++) {
				switch (data[i].nodeKey) {

					case 'curr_user':
						if (i == 0 && data[i].type == 1) {
							//审核人审核
							this.node[0].symbol = 'image://' + require('../asste/lanfangkuai.png')
						}

						break
					case 'dept_superior_1_0_1':
						if (i == 0 && data[i].type == 3) {
							this.node[0].symbol = 'image://' + require('../asste/huangfanmgkuai.png')
						}
						if (i == 0 && data[i].type == 1) {
							this.node[0].symbol = 'image://' + require('../asste/lanfangkuai.png')
						}
						break
					default:
				}
			}
		},
		createNodeCanvas() {
			this.$nextTick(() => {
				let chartDom = document.getElementById('containeraddworkdetail')
				var myCharts = echarts.init(chartDom)
				let charts = {
					nodes: this.node,
					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()
				})
			})
		},
		selectCommonPhrases(e) {
			if (!this.confirmForm.confirmContent) this.confirmForm.confirmContent = ''
			this.confirmForm.confirmContent += e
		},
		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.row=row
			this.activeName='first'
			this.getUserInfo(row.applyUser)
			this.confirmForm.flowMainPushId = row.flowMainPushId
			let { data } = await this.baseRequest1('ApplyAddWorkController', 'getInfoByFlowMainId', { flowMainId: row.id })
			const { data: flowHistroy } = await this.baseRequest1('FlowMainController', 'getFlowHistroyByFlowMainId', { flowMainId: row.id })
			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)]
				}
			})

			this.dialogVisible = status
			this.row = row

		},
		baseRequest1(prefix, opUrl, postData) {
			return this.$channel.globleRequest(prefix, opUrl, postData, 'project task')
		},

		async handelConfirm() {
			this.dialogVisible = false
		}
	}
}

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

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