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

<template>

	<div class="custom-tree-container">


		<el-row class="handle-box" :gutter="10" style="margin-bottom: 10px">
			<el-form
			 ref="elForm"
			 :model="search"
			 :rules="rules"

			 size="medium"
			>
				<el-col :span="4">
					<el-form-item label="" prop="name" style="margin-bottom: 0">
						<el-input
						 size="small"
						 v-model="search.name"
						 :style="{ width: '100%' }"
						 clearable
						 placeholder="请输入名称"
						/>
					</el-form-item>
				</el-col>
				<el-col :span="4">
					<el-form-item label="" prop="name" style="margin-bottom: 0">
						<el-date-picker

						 id="datePicker"
						 v-model="timeValue"
						 size="small"
						 type="daterange"
						 align="right"
						 unlink-panels
						 range-separator="-"
						 start-placeholder="流程开始日期"
						 end-placeholder="流程结束日期"
						 value-format="yyyy-MM-dd"
						 :picker-options="pickerOptions"
						 @change="pickerChange"
						/>
					</el-form-item>
				</el-col>


				<el-col :span="16">
					<div style="width: auto;float: right">
						<el-button class="ch-button-warning" plain size="small" @click="handleReset()"><i
						 class="el-icon-aim"
						/>&nbsp;重置
						</el-button>
						<el-button class="ch-button" size="small" @click="handleSearch()"><i class="el-icon-search"/>&nbsp;搜索
						</el-button>
						<el-button size="small" type="success" @click="confirmOutput()"><i class="el-icon-download"/>&nbsp;导出
						</el-button>
					</div>
				</el-col>
			</el-form>
		</el-row>
		<el-row class="handle-box">
			<el-col :span="24">
				<el-table
				 v-loading="loading"
				 :cell-style="styleBack"
				 :data="tableData"
				 row-class-name="g_table_row"
				 stripe
				 style="width: 100%"
				>
					<el-table-column label="序号" type="index" width="60"/>
					<el-table-column label="请假单号" prop="form_id"/>
					<el-table-column label="请假人" prop="truename"/>
					<el-table-column label="所在部门" prop="dept_name"/>
					<el-table-column label="发起时间" prop="created_at"/>
					<el-table-column label="流程结束时间" prop="last_update_time"/>
					<el-table-column label="假别" prop="off_work_type"/>
					<el-table-column label="请假日期起">
						<template scope="scope">
							{{ scope.row.startTime }}
						</template>
					</el-table-column>
					<el-table-column label="请假日期止">
						<template scope="scope">
							{{ scope.row.endTime }}
						</template>
					</el-table-column>
					<el-table-column label="请假小时数" prop="use_time"/>
					<el-table-column label="请假事由" prop="apply_reasons">

						<template scope="scope">
							<el-tooltip class="item" effect="dark" :content="scope.row.apply_reasons" placement="top">
								<div class="chaochuyingcang">{{ scope.row.apply_reasons }}</div>
							</el-tooltip>

						</template>
					</el-table-column>
				</el-table>
				<div class="table-page">
					<el-pagination
					 :current-page.sync="currentPage"
					 :page-size="pageSize"
					 :total="allpage"
					 background
					 layout="total, prev, pager, next"
					 @current-change="handleCurrentChange"
					/>
				</div>
			</el-col>
		</el-row>


	</div>
</template>
<script>
import common from '@/static/utils/common'
import Base from '../base/base'
import BaseData from '../base/baseData'
import BaseDept from '../base/baseDept'

export default {

	mixins: [Base, BaseData, BaseDept],
	data() {
		return {
			pickerOptions: {
				shortcuts: [{
					text: '最近一周',
					onClick: function(picker) {
						var end = new Date()
						var start = new Date()
						start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
						picker.$emit('pick', [start, end])
					}
				}, {
					text: '最近一个月',
					onClick: function(picker) {
						var end = new Date()
						var start = new Date()
						start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
						picker.$emit('pick', [start, end])
					}
				}, {
					text: '最近三个月',
					onClick: function(picker) {
						var end = new Date()
						var start = new Date()
						start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
						picker.$emit('pick', [start, end])
					}
				}]
			},
			timeValue: '',
			// 查询数据的内容
			search: {},
			departmentIds: '',
			deptAttr: '',
			// 通用字典项
			AUDIT_TYPE: [],
			dc_map: {},
			// 列表相关
			cusName: '',
			auditStatus: '',
			auditType: '',
			proName: '',
			applyBy: '',
			tableData: [],
			loading: false,
			UserMap: {},
			// 分页
			currentPage: 1,
			allpage: 0,
			pageSize: 12,
			// 弹框相关
			currAuditId: '',
			dialogVisible: false,
			dialogTitle: '新增',
			isAdd: true,
			detailList: [],
			rules: {},
			OutData: []
		}
	},
	mounted() {
		const _this = this
		_this.getData()
		this.initDeptAttr().then(() => {
			if (this.DeptAttrData.length > 0) {
				this.deptAttr = this.DeptAttrData[0].value
				this.initDepartment({ deptAttr: this.deptAttr })
			}
		})
	},
	methods: {
		pickerChange: function(val) {
            if(val){
                this.search.startTime = val[0]
                this.search.endTime = val[1]
            }else{
                this.search.startTime = ''
                this.search.endTime = ''
            }
		},
		styleBack({ row, column, rowIndex, columnIndex }) {
			if (row.isFirst == 1) return { backgroundColor: '#FDBABB' }
		},

		confirmOutput() {
			const OutSize = [{ wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }]
			const fileName = '请假申请明细' + new Date().Format('yyyy-MM-dd')
			this.$outputXlsxFile(this.OutData, OutSize, fileName)
		},
		getPostData: function() {
			const postData = {
				departmentIds: this.departmentIds,
				name: this.search.name,
                startTime: this.search.startTime,
                endTime: this.search.endTime,
				pageNum: this.currentPage,
				pageSize: this.pageSize
			}
			const currUser = this.$common.currUser()
			if (currUser && currUser.groupId) {
				postData.groupId = common.currUser().groupId
			}
			if (!this.$common.isAdmin()) {
				postData.chargedby = this.$common.currUser().id
			}

			return postData
		},
		initOutData: function() {
			const _this = this
			this.OutData = [['请假单号', '请假人', '所在部门', '发起时间', '流程结束时间', '假别', '请假日期起', '请假日期止', '请假小时数', '请假事由']]
			const postData = this.getPostData()
			this.baseRequest1('findAllApplyOffWorkListByInfo', postData).then((res) => {
				try {
					if (res.data) {
						res.data.forEach(function(item) {
							const jsonMap = _this.getItemJson(item)
							// <el-table-column label="请假单号" prop="form_id"/>
							// <el-table-column label="请假人" prop="truename"/>
							// <el-table-column label="所在部门" prop="dept_name"/>
							// <el-table-column label="发起时间" prop="created_at"/>
							// <el-table-column label="流程结束时间" prop="last_update_time"/>
							// <el-table-column label="假别" prop="off_work_type"/>
							// <el-table-column label="请假小时数" prop="use_time"/>
							// <el-table-column label="请假事由" prop="apply_reasons">
							const jsonArray = [
								jsonMap.form_id,
								jsonMap.truename,
								jsonMap.dept_name,
								jsonMap.created_at,
								jsonMap.last_update_time,
								jsonMap.off_work_type,
								jsonMap.startTime,
								jsonMap.endTime,
								jsonMap.use_time,
								jsonMap.apply_reasons

							]

							_this.OutData.push(jsonArray)
						})
					}
				} catch (e) {
				}
			}).catch(() => {
			})
		},
		async changeStatus(row) {
			let status = row.status == 0 ? 2 : row.status == 2 ? 0 : null
			this.loading = true
			let { data } = await this.baseRequest1('noOrUse', { id: row.id, status })
			if (data.code == 200) {
				this.loading = false
				this.getData()
				this.$message.success('状态修改成功')
			}

		},
		async openHolidayDialog(status, row) {
			this.$refs.addOrEditHoliiday.setVisible(status, row)

		},
		handleCurrentChange: function(val) {
			this.currentPage = val
			this.getData()

		},
		recallApply: function(row, type) {
			const _this = this
			_this.$confirm('该流程已经在审核中，撤回后原审核内容将作废确认撤回吗？', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(function() {
				const deleting = _this.$notify({
					title: '正在撤回,请稍等',
					type: 'warning'
				})
				const postData = {
					flowMainid: row.id
				}
				_this.baseRequest2(
				 'FlowMainController',
				 'recallApply',
				 postData).then(res => {
					if (res.data.code === 200) {
						_this.getData()
						deleting.close()
						_this.$notify({
							title: '撤回成功',
							type: 'info'
						})
					} else {
						deleting.close()
						_this.dialogVisible = false
						_this.$notify({
							title: '撤回失败',
							type: 'info'
						})
					}
				}).catch((err) => {
					deleting.close()
					_this.$alert(err)
				})
			}).catch(function(error) {
				console.error(error)
			})
		},
		// 初始化获取数据
		getData() {
			const _this = this
			const postData = {
				name: _this.search.name,
				startTime: _this.search.startTime,
				endTime: this.search.endTime,
				pageNum: _this.currentPage,
				pageSize: _this.pageSize
			}
			this.loading = true
			_this.baseRequest1('findApplyOffWorkListByInfo', postData).then(res => {
				if (res.data) {
					this.loading = false
					_this.tableData = []
					res.data.rows.forEach(item => {
						item.noUseDate = item.noUseDate ? this.$common.transDate(item.noUseDate) : null
						item.restHolidayDate = item.restHolidayDate ? this.$common.transDate(item.restHolidayDate) : null
						item.joinDay = item.joinDay ? this.$common.transDate(item.joinDay) : null
						item.socialPayDay = item.socialPayDay ? this.$common.transDate(item.socialPayDay) : null
						_this.tableData.push(_this.getItemJson(item))
					})
					_this.allpage = res.data.total
				} else {
					_this.tableData = []
				}
			})
			this.initOutData()
		},
		getItemJson(item) {
			item.created_at = item.created_at ? this.$common.transDate(item.created_at) : null
			item.use_time = item.use_time + item.time_unit
			item.last_update_time = item.created_at ? this.$common.transDate(item.last_update_time) : null
			item.off_work_type = item.off_work_type == 1 ? '年假'
			 : item.off_work_type == 2 ? '事假'
				: item.off_work_type == 3 ? '调休'
				 : item.off_work_type == 4 ? '病假'
					: item.off_work_type == 5 ? '婚假'
					 : item.off_work_type == 6 ? '产假'
						: item.off_work_type == 7 ? '陪产假'
						 : item.off_work_type == 8 ? '丧假' : ''
			return item
		},
		handleSearch: function() {
			this.getData()
		},
		handleReset: function() {
			for (const i in this.search) {
				if (i !== 'pageNum' && i !== 'pageSize') {
					this.search[i] = ''
				}
			}
			this.handleSearch()

		},
		// 打开流程发起菜单
		handleClick(tab, event) {
			this.getData()
		},
		// 请求封装，继承类中调用，必须存在
		baseRequest1(opUrl, postData) {
			return this.$channel.globleRequest(
			 'ApplyOffWorkController',
			 opUrl,
			 postData,
			 'project task'
			)
		},
		baseRequest2(controller, opUrl, postData) {
			return this.$channel.globleRequest(
			 controller,
			 opUrl,
			 postData,
			 'project task'
			)
		}

	}
}
</script>

<style lang="scss">
.chaochuyingcang {
	width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.custom-tree-container .block-l {
	/*flex-grow: 2 ;*/
	float: left;
	width: 20%;
	padding: 0 8px 0 0;
}

.custom-tree-container .block-r {
	/*flex-grow: 10;*/
	float: left;
	width: 80%;
	/*padding: 0 0 0 8px;*/
}

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

.el-dropdown-link {
	cursor: pointer;
	color: rgba(39, 78, 219, 1);
}

.demonstration {
	display: block;
	color: #8492a6;
	font-size: 14px;
	margin-bottom: 20px;
}

.labeldom {
	.el-tabs__nav-wrap::after {
		background: none;
	}
}

.w200px {
	width: 200px;
}
</style>
<style scoped>
.ch-input .el-input__inner {
	border-radius: 0px;
	border-color: #32323a;
}

.ch-input-size {
	width: 150px;
}

.ch-button {
	borderund-color: #32323a;
	color: #fff;
}

.ch-button-warning {
	margin-left: 10px;
	border-radius: 0px;
	border-color: #E75B5B;
	background-color: #E75B5B;
	color: #fff;
}
</style>