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

<template>
	<div class="personTask">
		<el-row class="handle-box" style="margin-bottom: 10px">
			<el-row>
				<el-col :span="12">
					<!--					<el-select v-model="search.handleUserType" clearable filterable placeholder="组织" size="small"-->
					<!--										 @change="groupChange">-->
					<!--						<el-option v-for="item in groupList" :key="item.value" :label="item.label" :value="item.value"/>-->
					<!--					</el-select>-->
                    <el-select v-model="search.deptId" clearable filterable placeholder="部门" size="small" @change="handleSearch()">
                        <el-option v-for="item in DeptData" v-if="item.parentId!=='0'" :key="item.value" :label="item.label" :value="item.value"/>
                    </el-select>
					<el-input @change="handleSearch()" v-model="search.truename" class="ch-input ch-input-size"
										placeholder="姓名" size="small" clearable
					/>

					<el-date-picker
					 @change="handleSearch()"
					 v-model="month"
					 size="small"
					 type="month"
					/>

				</el-col>
				<el-col :span="12" style="text-align: right">
					<el-button class="ch-button-warning" size="small" @click="handleReset()"><i class="el-icon-search"/>&nbsp;重置
					</el-button>
					<el-button class="ch-button" size="small" @click="handleSearch()"><i class="el-icon-search"/>&nbsp;搜索
					</el-button>

					<el-button class="ch-button" size="small" @click="confirmOutput()"><i class="el-icon-menu"/>&nbsp;导出
					</el-button>
				</el-col>
			</el-row>


		</el-row>
		<el-row>
			<el-table
			 ref="table"

			 border
			 v-loading="loading"
			 :cell-class-name="cellClassName"
			 :data="AllData"
			 :header-cell-style="initTableHeaderStyle"
			 :stripe="false"
			 height="35vw"
			 style="width: 100%"
			>
				<el-table-column align="center" fixed header-align="center" label="姓名" prop="truename"/>
				<el-table-column align="center" header-align="center" label="所在部门" prop="deptName" width="150"/>
				<el-table-column align="center" header-align="center" label="岗位" prop="postName" width="100"/>
				<el-table-column align="center" header-align="center" label="本月应勤天数" prop="workDay" width="50"/>
				<el-table-column align="center" header-align="center" label="本月实际出勤天数" prop="realityWorkDay"
												 width="50"
				/>
				<el-table-column align="center" header-align="center" label="其中：年假天数" prop="totalUseTime1" width="50"/>
				<el-table-column align="center" header-align="center" label="调休假(h)" prop="totalUseTime2" width="50"/>
				<el-table-column align="center" header-align="center" label="事假天数" prop="totalUseTime3" width="50"/>
				<el-table-column align="center" header-align="center" label="病假天数" prop="totalUseTime4" width="50"/>
				<el-table-column align="center" header-align="center" label="婚假天数" prop="totalUseTime5" width="50"/>
				<el-table-column align="center" header-align="center" label="产假天数" prop="totalUseTime6" width="50"/>
				<el-table-column align="center" header-align="center" label="陪产假天数" prop="totalUseTime7" width="50"/>
				<el-table-column align="center" header-align="center" label="丧假天数" prop="totalUseTime8" width="50"/>
				<el-table-column align="center" header-align="center" label="其中:加班(h)" prop="totalUseTime9" width="50"/>
				<el-table-column align="center" header-align="center" label="其中：迟到（次）" prop="totalUseTime10" width="50"/>
				<el-table-column align="center" header-align="center" label="其中：早退（次" prop="totalUseTime11" width="50"/>
				<el-table-column
				 min-width="50px"
				 v-for="(item,index) in headData"
				 :key="index"
				 :label="item.day.toString()"
				 :prop="item.day.toString()"
				 align="center"
				 header-align="center"
				 style="padding: 0"
				 resizable
				>
					<el-table-column
					 :key="headKey"
					 :label="item.week"
					 :prop="item.day.toString()"
					 align="center"
					 header-align="center"
					 scoped-slot
					 min-width="50px"
					 resizable
					>
						<template slot="header">
							<span>{{ item.week }}</span>
							<span v-if="item.biq==='2'"
										style="color: blue;font-size: 12px; margin-left: 5px;position: absolute;bottom:50%;left:60%"
							>班</span>
							<span v-if="item.biq==='1'"
										style="color: red;font-size: 12px; margin-left: 5px;position: absolute;bottom:50%;left:60%;"
							>休</span>
						</template>
						<template slot-scope="scope">
							<div
							 style="cursor:pointer;width: 100%;height: 20px;"
							 class="chaochuyingcang"
							 @click="personTaskDetail((scope.row.detailDayList[index]),scope.row.userId,item)"
							>
                                <el-popover
                                    trigger="hover"
                                    placement="top-start"
                                    width="160">
                                    <div v-html="getDetails(scope.row, index).badDayString"></div>
                                    <div v-html="getDetails(scope.row, index).goodDayString"></div>
                                    <div  slot="reference">
                                        <div v-html="getDetails(scope.row, index).badDayString" class="chaochuyingcang"></div>
                                        <div v-html="getDetails(scope.row, index).goodDayString" class="chaochuyingcang"></div>
                                    </div>
                                </el-popover>

								<!--																{{-->
								<!--																	scope.row.detailDayList[index].happenTypesString === null ? "" : scope.row.detailDayList[index].happenTypesString-->
								<!--																}}-->
							</div>
						</template>
					</el-table-column>
				</el-table-column>
			</el-table>
			<div class="table-page">
				<el-pagination
				 :current-page.sync="search.pageNum"
				 :page-size="search.pageSize"
				 :total="allpage"
				 background
				 layout="total, prev, pager, next"
				 @current-change="handleCurrentChange"
				/>
			</div>
		</el-row>
		<edit ref="edit" @getData="getData()"/>
	</div>
</template>
<script>
import Base from '../base/base'
import BaseData from '../base/baseData'
import edit from '@/views/workflow/components/attendance/edit.vue'

export default {
	name: 'BugLibrary',
	components: {
		edit
	},
	mixins: [Base, BaseData],
	data() {
		return {
			OutData: [],
			dc_key: ['BUG_TYPE', 'REPAIR_STATUS', 'EMERGENCY_DEGREE'],
			levelList: [1, 2, 3],
			trendsNumList: [],
			submitTime: [],
			AllData: [],
			headData: [],
			dialogBatchTaskTitle: '个人任务',
			dialogBatchVisible: false,
			loading: false,
			TaskAllData: '',
			dialogTitle: '',
			dialogVisible: false,
            visible: false,
			taskFormKey: 0,
			taskFormKeys: 0,
			headKey: 0,
			groupList: [
				{ value: '1', label: '内部' },
				{ value: '2', label: '外部' }
			],
			taskInfo: {
				id: '',
				batchId: '',
				proId: '',
				batchName: '',
				type: '1'
			},
			tableData: [],
			month: new Date(),
			checkList: '',
			onlineList: '',
			radio: 3,
			taskSearch: {},
			deptList: [],
			allpage: 0,
			search: {
				groupId: '',
				handleUserType: '',
				atMonth: '',
				deptId: '',
				name: '',
				proName: '',
				status: 0,
				online: '',
				handleUserId: '',
				pageNum: 1,
				pageSize: 12
			},
			hasAllPersonViewPermission: false,
			exportTable: []
		}
	},
	watch: {
		AllData: {
			handler() {
				this.$nextTick(() => {
					this.$refs.table.doLayout()
				})
			},
			deep: true,
			immediate: true
		}
	},
	mounted() {

		const _this = this
		this.initUser({ status: '1' })
        _this.initDeptAttr()
		// _this.hasPermission()
		// _this.initUserAndDetp()
		_this.initDepartment()
		// _this.initBizUser()
		this.initPost({ status: '0' })
		// _this.initProject()
		// _this.initBiz()
		this.initDict(_this.dc_key).then((res) => {
			// setTimeout(function() {
			//     _this.getData();
			// }, 800);
			this.$nextTick(() => {
				_this.getData()
			})
		})
	},
	methods: {
		getDetails(e, index) {
			try {

				if (!e.detailDayList[index] || !e.detailDayList[index].happenTypesString) {
					return ''
				} else {
					let array = e.detailDayList[index].happenTypes.split(',')
					let type = [
						'年假', '调休', '事假',
						'病假', '婚假', '产假',
						'陪产假', '丧假', '加班',
						'迟到', '早退', '旷工',
						'外出', '居家', '出差'
					]
					let badDay = []
					let goodDay = []
					for (let i = 0; i < array.length; i++) {
						if (array[i] == 10 || array[i] == 11 || array[i] == 12) {

							badDay.push(type[array[i] - 1])
						} else {

							goodDay.push(type[array[i] - 1])
						}
					}

					let badDayString = '<span style=\'color:red\'>' + badDay.join(',') + '</span>'
					let goodDayString = '<span style=\'color:blue\'>' + goodDay.join(',') + '</span>'
					return { badDayString, goodDayString }
				}
			} catch (a) {

			}
		},
		hasPermission() {
			if (this.$common.currUser() && this.$common.currUser().dataRoles && this.$common.currUser().dataRoles.DATA) {
				const permission = this.$common.currUser().dataRoles.DATA
				permission.forEach(item => {
					if (item === 'QYRW') {
						this.hasAllPersonViewPermission = true
					}
				})
			}
		},
		batchClose() {
			this.getData()
		},
		confirmOutput() {
			try {

				const _this = this
				this.OutData = []
				const title1 = [
					' 姓名', ' 所在部门', '岗位', ' 本月应勤天数', '本月实际出勤天数', ' 其中：年假天数',
					' 调休假（h）', ' 事假天数', ' 病假天数', '婚假天数', '产假天数',
					'陪产假天数', '丧假天数', '其中：加班（h）', ' 其中：迟到天数（次）', ' 其中：早退天数（次）']
				const title2 = [
					null, null, null, null, null,
					null, null, null, null, null,
					null, null, null, null, null, null
				]
				_this.headData.forEach((item, index) => {
					title1.push(_this.$common.transDateStr(_this.month, 'yyyy/MM/') + item.day)
					title2.push(item.week)
				})
				this.OutData.push(title1)
				this.OutData.push(title2)
				const OutSize = []
				this.exportTable.forEach(function(item) {
					const jsonArray = []
					jsonArray.push(item.truename)
					jsonArray.push(item.deptName)
					jsonArray.push(item.postName)
					jsonArray.push(item.workDay)
					jsonArray.push(item.realityWorkDay)
					jsonArray.push(item.totalUseTime1)
					jsonArray.push(item.totalUseTime2)
					jsonArray.push(item.totalUseTime3)
					jsonArray.push(item.totalUseTime4)
					jsonArray.push(item.totalUseTime5)
					jsonArray.push(item.totalUseTime6)
					jsonArray.push(item.totalUseTime7)
					jsonArray.push(item.totalUseTime8)
					jsonArray.push(item.totalUseTime9)
					jsonArray.push(item.totalUseTime10)
					jsonArray.push(item.totalUseTime11)

					_this.headData.forEach(i => {
						console.log(item)
						console.log(item[(i.day) - 1])
						jsonArray.push(item.detailDayList[(i.day) - 1].happenTypesString)
					})

					_this.OutData.push(jsonArray)
					OutSize.push({ wch: 16 })
				})
				console.log(_this.OutData)
				const outMerges = [
					{ s: { r: 0, c: 0 }, e: { r: 1, c: 0 } },
					{ s: { r: 0, c: 1 }, e: { r: 1, c: 1 } },
					{ s: { r: 0, c: 2 }, e: { r: 1, c: 2 } },
					{ s: { r: 0, c: 3 }, e: { r: 1, c: 3 } },
					{ s: { r: 0, c: 4 }, e: { r: 1, c: 4 } },
					{ s: { r: 0, c: 5 }, e: { r: 1, c: 5 } },
					{ s: { r: 0, c: 6 }, e: { r: 1, c: 6 } },
					{ s: { r: 0, c: 7 }, e: { r: 1, c: 7 } },
					{ s: { r: 0, c: 8 }, e: { r: 1, c: 8 } },
					{ s: { r: 0, c: 9 }, e: { r: 1, c: 9 } },
					{ s: { r: 0, c: 10 }, e: { r: 1, c: 10 } },
					{ s: { r: 0, c: 11 }, e: { r: 1, c: 11 } },
					{ s: { r: 0, c: 12 }, e: { r: 1, c: 12 } },
					{ s: { r: 0, c: 13 }, e: { r: 1, c: 13 } },
					{ s: { r: 0, c: 14 }, e: { r: 1, c: 14 } },
					{ s: { r: 0, c: 15 }, e: { r: 1, c: 15 } }

				]
				const fileName = '考勤表' + new Date().Format('yyyyMMddhhmm')
				console.log(this.OutData)
				this.$outputXlsxMergesFile(this.OutData, OutSize, outMerges, fileName)
			} catch (e) {
				console.warn(e)
			}
		},
		initTableHeaderStyle({ row, column, rowIndex, columnIndex }) {
			if (column.label === '周六' || column.label === '周日') {
				return 'background-color:#ffffff;color:rgba(0, 0, 0, 0.85);font-weight:500;'
			}
			if (!column.children) {
			} else {
				if (column.children && column.children[0].label === '周六' || column.children[0].label === '周日') {
					return 'background-color:#ffffff;color:rgba(0, 0, 0, 0.85);font-weight:500;'
				}
			}
		},
		// 判断周六周日给予特殊背景色
		cellClassName({ row, column, rowIndex, columnIndex }) {
			if (column.label === '周六' || column.label === '周日') {
				return 'warning-column'
			}
		},
		groupChange: function() {
			const _this = this
			_this.search.deptId = ''
			if (_this.search.handleUserType == '2') {
				_this.deptList = _this.BizData
			} else {
				_this.deptList = _this.DeptData
			}
			// _this.getData()
		},
		parentMethod: function(val) {
			if (val.length > 0) {
				this.form.handleUserId = val.join(',')
			}
		},
		getTaskData() {
			const _this = this
			_this.baseRequest('listAll', _this.taskSearch).then(res => {
				if (res.data) {
					const taskItems = []
					res.data.forEach(item => {
						taskItems.push(this.getTaskItemJson(item))
					})
					_this.TaskAllData = taskItems
				}
			})
		},
		getTaskItemJson(item) {
			item.requiredDate = this.$common.transDate(item.requiredDate)
			if (item.handleUserType === '1') {
				// item.handleGroupName = this.DeptUserNameMap[item.handleUserId]
				item.handleUserName = this.DeptUserMap[item.handleUserId]
			} else if (item.handleUserType === '2') {
				item.handleUserName = this.BizUserMap[item.handleUserId]
				// item.handleGroupName = this.BizUserNameMainMap[item.handleUserId]
			} else {
				item.handleUserName = this.DeptUserMap[item.handleUserId]
			}
			item.submitUserId = this.DeptUserMap[item.submitUserId]
			item.submitTime = this.$common.transServDate(item.submitTime)
			return item
		},
		getContent(content) {
			this.content = content
			this.form.content = content
		},
		personTaskDetail(val, day) {
			this.$refs.edit.setVisible(val, day)
		},
		changeTeam() {
			const _this = this
			_this.form.handleUserId = ''
			if (this.form.handleUserType == '1') {
				_this.handleUsers = _this.UserData
			} else {
				_this.handleUsers = _this.BizUserData
			}
		},
		openTaskForm() {
			const _this = this
			_this.taskFormKey++
			_this.taskInfo.id = ''
			_this.taskInfo.type = ''
			_this.taskInfo.isClone = false
			_this.dialogVisible = true
		},
		handleClose() {
			this.dialogVisible = false
		},
		handleCommit() {
			this.dialogVisible = false
			this.getData()
		},
		getData: function() {
			const _this = this
			_this.loading = true
			_this.AllData = []
			_this.search.handleUserId = _this.radio
			_this.search.date_from_1 = ''
			_this.search.date_to_1 = ''
			if (_this.submitTime !== null && _this.submitTime.length > 0) {
				_this.search.date_from_1 = _this.submitTime[0]
				_this.search.date_to_1 = _this.submitTime[1]
			}
			const currUser = _this.$common.currUser()

			console.log('currUsercurrUsercurrUser', currUser)
			if (currUser && currUser.groupId) {
				_this.search.groupId = this.$common.currUser().groupId
			}
			_this.search.atMonth = ''
			if (_this.month) {
				_this.search.atMonth = this.$common.transDate(_this.month, 'yyyy-MM')
			}
			try {
				this.baseRequest('selectInfoByMonth', _this.search).then((res) => {
					if (res.data) {
						_this.loading = false
						this.allpage = res.data.total
						res.data.rows.forEach(function(item) {

							const json = _this.getItemJson(item)
							_this.AllData.push(item)
						})
						_this.headKey++
						_this.headData = res.data.data
					}
					_this.loading = false
				}).catch(() => {
				})
				this.baseRequest('excelToselectInfoByMonth', _this.search).then((res) => {
					if (res.data) {
						_this.exportTable = res.data
					}
				}).catch(() => {
				})
			} catch (e) {
			}
			// this.initOutData()
		},
		getItemJson: function(item) {

			item.detailDayList.forEach((e, index, arr) => {
				item[index + 1] = e.happenTypesString
			})
			return item
		},
		handleSearch: function() {
			this.getData()
		},
		handleReset: function() {
			this.submitTime = []
			for (const i in this.search) {
				if (i !== 'pageNum' && i !== 'pageSize') {
					this.search[i] = ''
				}
			}
			this.search.status = 0
			this.month = new Date()
			this.radio = 1
			this.handleSearch()
		},

		/* 分页设定*/
		handleSizeChange: function(val) {
			this.search.pageSize = val
			this.getData()
		},
		handleCurrentChange: function(val) {
			this.search.pageNum = val
			this.getData()
		},
		baseRequest(opUrl, postData) {
			return this.$channel.globleRequest('WorkAttendanceLogController', opUrl, postData, 'project')
		}
	}
}
</script>

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

	td {
		padding: 0
	}

	.ch-input .el-input__inner {
		border-radius: 0px;
		//border-color: #32323a;
	}

	.el-date-editor.el-input, .el-date-editor.el-input__inner {
		width: 150px !important;
	}

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

	.ch-button {
		border-radius: 0px;
		border-color: #32323a;
		background-color: #32323a;
		color: #fff;
	}

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

	.ch-button-export {
		margin-left: 10px;
		border-radius: 0px;
		border-color: #98cc1f;
		background-color: #98cc1f;
		color: #fff;
	}

	.table1 {
		position: absolute;
		color: black;
		background-color: white;
		overflow: hidden;
		width: 100%;
		overflow: hidden;
		overflow-x: scroll;

		.hang {
			display: grid;
			justify-content: space-around;
			height: 48px;
			grid-template-columns: repeat(10, 1fr) repeat(31, 0.5fr);
			//margin: 10px 0;
			div {
				width: 100%;
				height: 100%;
				border: 1px solid black;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.changeCol {
			}
		}

		.firstHang {
			display: grid;
			height: 82px;
			grid-template-columns: repeat(10, 1fr) repeat(31, 0.5fr);

			div {
				width: 100%;
				height: 100%;
				//border:1px solid black;
				font-size: 12px;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.personData {
				display: grid;
				grid-template-columns: 1fr;

				p {
					border: 1px solid black;
					display: flex;
					align-items: center;
					justify-content: center;
					border-bottom: none;
					border-top: none;
				}
			}

			//.frData {
			//    display: grid;
			//    grid-template-columns: repeat(3, 1fr);
			//    p {
			//        border: 1px solid rgba(42, 57, 128, 0.3);
			//        display: flex;
			//        align-items: center;
			//        justify-content: center;
			//        border-bottom: none;
			//        border-top: none;
			//    }
			//}
			.cityData {
				display: grid;
				grid-template-columns: repeat(2, 1fr);

				p {
					border: 1px solid rgba(42, 57, 128, 0.3);
					display: flex;
					align-items: center;
					justify-content: center;
					border-bottom: none;
					border-top: none;
				}
			}

			.weekDay {
				display: flex;
				flex-direction: column;
			}

			.weekEnd {
				background: rgba(199, 25, 31, 0.25);

				div {
				}
			}
		}
	}

	.el-table th > .cell {
		overflow: visible !important;
	}

	.warning-column {
		background: rgba(245, 245, 245, 1) !important;
	}

	.cell {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		overflow: hidden;
		-webkit-line-clamp: 2;
		text-overflow: ellipsis;
	}
}
</style>