wisdomisitezwfront-web/src/views/goverment/laborRealName/projectSelect/components/projectDetails.vue

<template>
	<div class="overview" v-if="visible1">
		<el-dialog :title="props.title" show-close v-model="visible1" style="min-width: 1500px">
			<el-form ref="ruleFormRef" :model="form" label-width="200px" class="form" size="default">
				<!-- 基础信息 -->
				<div>
					<div class="form-title">
						<div>基本信息</div>
					</div>
					<div class="row">
						<el-form-item label="工程名称:" prop="engineeringName">
							<el-input placeholder="请输入" v-model="form.engineeringName" disabled />
						</el-form-item>
						<el-form-item label="工程类别:" prop="engineeringTypeName">
							<el-input placeholder="请输入" v-model="form.engineeringTypeName" disabled />
						</el-form-item>
					</div>
					<div class="row">
						<el-form-item label="建设单位:" prop="buildEnt">
							<el-input placeholder="请输入" v-model="form.buildEnt" disabled />
						</el-form-item>
						<el-form-item label="施工总承包单位:" prop="opEnt">
							<el-input placeholder="请输入" v-model="form.opEnt" disabled />
						</el-form-item>
					</div>
					<div class="row">
						<el-form-item label="施工许可证编码:" prop="engineeringCode">
							<el-input placeholder="请输入" v-model="form.engineeringCode" disabled />
						</el-form-item>
						<el-form-item label="工程状态:" prop="stateName">
							<el-input placeholder="请输入" v-model="form.stateName" disabled />
						</el-form-item>
					</div>
					<div class="row">
						<el-form-item label="建设地点:" prop="address">
							<el-input placeholder="请输入" v-model="form.address" disabled />
						</el-form-item>
						<el-form-item label="工程总面积:" prop="engineeringArea">
							<el-input placeholder="请输入" v-model="form.engineeringArea" disabled />
						</el-form-item>
					</div>
					<div class="row">
						<el-form-item label="工程用途:" prop="engineeringUseName">
							<el-input placeholder="请输入" v-model="form.engineeringUseName" disabled />
						</el-form-item>
						<el-form-item label="开工/竣工时间:" prop="idCardExpireDate">
							<el-date-picker
								disabled
								v-model="form.dateRange"
								format="YYYY-MM-DD"
								value-format="YYYY-MM-DD"
								type="daterange"
								placeholder="请选择"
							/>
						</el-form-item>
					</div>
				</div>
				<!-- 其他信息 -->
				<div>
					<div class="form-tab">
						<el-tabs v-model="activeName" @tab-click="handleClick">
							<el-tab-pane label="参建单位" name="first">
								<div class="search">
									<span>参建单位总数:{{ unitData.length }}</span>
									<span>参建单位类型</span>
									<el-input v-model="searchForm.type" placeholder="请输入" clearable style="width: 160px" />
									<el-button type="primary" style="margin-left: 20px" @click="getUnitData">查询</el-button>
								</div>
								<div class="table">
									<el-table
										:data="unitData"
										border
										height="300"
										class="el-table"
										:header-cell-style="{ backgroundColor: '#EBEEF5', textAlign: 'center' }"
										:cell-style="{ textAlign: 'center' }"
									>
										<el-table-column prop="companyName" label="建设单位名称" />
										<el-table-column prop="type" label="参建类型" />
										<el-table-column prop="creditCode" label="统一社会信用代码" />
										<el-table-column prop="leadName" label="联系人" />
										<el-table-column prop="leadTel" label="联系人电话" />
										<!-- 表格无数据情况 -->
										<template #empty>
											<div class="table-empty">
												<slot name="empty">
													<img src="@/assets/images/notData.png" alt="notData" />
													<div>暂无数据</div>
												</slot>
											</div>
										</template>
									</el-table>
								</div>
							</el-tab-pane>
							<el-tab-pane label="参建班组" name="second">
								<div class="search">
									<span>参建班组总数:{{ classGroupData.length }}</span>
								</div>
								<div class="table">
									<el-table
										:data="classGroupData"
										border
										height="300"
										class="el-table"
										:header-cell-style="{ backgroundColor: '#EBEEF5', textAlign: 'center' }"
										:cell-style="{ textAlign: 'center' }"
									>
										<!-- <el-table-column prop="id" label="班组ID" /> -->
										<el-table-column prop="teamName" label="班组名称" />
										<el-table-column prop="companyName" label="企业名称" />
										<el-table-column prop="leaderName" label="班组长" />
										<el-table-column prop="leaderTel" label="班组长电话" />
										<!-- 表格无数据情况 -->
										<template #empty>
											<div class="table-empty">
												<slot name="empty">
													<img src="@/assets/images/notData.png" alt="notData" />
													<div>暂无数据</div>
												</slot>
											</div>
										</template>
									</el-table>
								</div>
							</el-tab-pane>
							<el-tab-pane label="人员信息" name="third">
								<div class="search-two">
									<span>在册人员:{{ memberCountInfo.person }}</span>
									<span>在册管理人员:{{ memberCountInfo.manager }}</span>
									<span>在册建筑工人:{{ memberCountInfo.worker }}</span>
									<span>在职人员:{{ memberCountInfo.inPerson }}</span>
									<span>在职管理人员:{{ memberCountInfo.inManager }}</span>
									<span>在职建筑工人:{{ memberCountInfo.inWorker }}</span>
								</div>
								<div class="search-form">
									<span>企业名称</span>
									<el-select v-model="memberSearch.companySn" style="width: 160px; margin-right: 5px" placeholder="请选择">
										<el-option v-for="item in unitData" :key="item.companySn" :label="item.companyName" :value="item.companySn">
										</el-option>
									</el-select>
									<span>姓名</span>
									<el-input v-model="memberSearch.personName" placeholder="请输入" style="width: 160px; margin-right: 5px" />
									<span>人员类型</span>
									<el-select v-model="memberSearch.personType" style="width: 160px" placeholder="请选择">
										<el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
									</el-select>
									<el-button type="primary" style="margin-left: 20px" @click="getMemberCountList">查询</el-button>
								</div>
								<div class="table">
									<div class="table-title">人员列表</div>
									<div class="member-list" v-if="memberListData.length > 0">
										<div class="list-item" v-for="(item, index) in memberListData" :key="index">
											<div class="avater-item">
												<img :src="item.portrait" alt="" />
												<div class="avater-right">
													<div>
														<span>{{ item.personName }}</span>
														<img src="@/assets/images/govermentImg/在职人数.png" alt="" />
													</div>
													<span>{{ item.idCard }}</span>
												</div>
											</div>
											<div class="member-type">{{ item.personType == 1 ? "管理" : "工人" }}</div>
											<div class="member-other">公司: {{ item.companyName }}</div>
											<div class="member-other">班组: {{ item.teamName }}</div>
											<div class="member-other">工种: {{ item.workerTypeName }}</div>
											<div class="member-other">电话: {{ item.phone }}</div>
										</div>
									</div>
									<div v-else class="table-empty">
										<img src="@/assets/images/notData.png" alt="notData" />
										<div>暂无数据</div>
									</div>
								</div>
							</el-tab-pane>
							<el-tab-pane label="出勤列表" name="fourth">
								<div class="search-three">
									<span>人员类型</span>
									<el-select v-model="attendaceSearch.personType" clearable style="width: 160px" placeholder="请选择">
										<el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
									</el-select>
									<span>月份</span>
									<el-date-picker
										v-model="attendaceSearch.month"
										format="YYYY-MM"
										value-format="YYYY-MM"
										style="width: 160px"
										type="month"
										placeholder="选择月"
									>
									</el-date-picker>
									<el-button type="primary" style="margin-left: 20px; margin-right: auto" @click="getAttendanceCountList"
										>查询</el-button
									>
									<div class="attendance-label">
										<span class="successCircle"></span>
										<span class="text">正常出勤</span>
										<span class="errorCircle"></span>
										<span class="text">未出勤</span>
									</div>
								</div>
								<div class="table">
									<el-table
										:data="attendanceListData"
										height="300"
										class="el-table"
										:header-cell-style="{ backgroundColor: '#F5F7FA', textAlign: 'center' }"
										:cell-style="{ textAlign: 'center' }"
									>
										<el-table-column prop="personName" label="姓名" />
										<el-table-column prop="personName" width="100" label="职位/班组" />
										<el-table-column prop="personName" label="迟到天数" />
										<el-table-column prop="personName" label="早退天数" />
										<el-table-column prop="personName" label="总工时" />
										<el-table-column :prop="item.prop" :label="item.label" v-for="(item, index) in monthColumns" :key="index">
											<template #default="scope">
												<span class="successCircle" v-if="scope.row[item.prop]"></span>
												<span class="errorCircle" v-else></span>
											</template>
										</el-table-column>
										<!-- 表格无数据情况 -->
										<template #empty>
											<div class="table-empty">
												<slot name="empty">
													<img src="@/assets/images/notData.png" alt="notData" />
													<div>暂无数据</div>
												</slot>
											</div>
										</template>
									</el-table>
								</div>
							</el-tab-pane>
						</el-tabs>
						<div class="statistics-page">
							<Pagination
								:pageable="pageable"
								:background="true"
								:handleSizeChange="handleSizeChange"
								:handleCurrentChange="handleCurrentChange"
							/>
						</div>
					</div>
				</div>
			</el-form>
		</el-dialog>
	</div>
</template>

<script lang="ts" setup>
import { onMounted, ref, watch, reactive, onBeforeMount } from "vue";
import Pagination from "@/components/ProTable/components/Pagination.vue";
import type { FormInstance } from "element-plus";
import { unitPageList, classGroupList, memberCountData, memberPageList, attendancePageList } from "@/api/modules/goverment";
const typeOptions = ref([
	{ label: "管理", value: 1 },
	{ label: "工人", value: 2 }
]);
const memberSearch = ref({
	companySn: "",
	personName: "",
	personType: null
});
const attendaceSearch = ref({
	personType: null,
	month: ""
});
const props = defineProps({
	detailsDialog: Boolean,
	title: String,
	formData: Object
});
const pageable = ref({
	// 分页参数
	pageNo: 1,
	pageSize: 10,
	total: 0
});
const activeName = ref("first");
const searchForm = ref({
	type: ""
});
const unitData = ref([]);
const classGroupData = ref([]);
const memberCountInfo = ref({});
const memberListData = ref([]);
const attendanceListData = ref([]);
const monthColumns: any = [];
const visible1 = ref(false);
const emits = defineEmits(["update:detailsDialog", "confirm"]);
const ruleFormRef = ref<FormInstance>();
const form = ref({});
// 获取人员出勤列表数据
const getAttendanceCountList = async () => {
	console.log(form.value);
	let requestData = {
		current: pageable.value.pageNo,
		size: pageable.value.pageSize,
		engineeringSn: form.value.engineeringSn,
		...attendaceSearch.value
	};
	console.log(666);
	const { result } = await attendancePageList(requestData);
	if (result && result.records) {
		attendanceListData.value = result.records;
		pageable.value.total = +result.total;
	}
	console.log(result);
};
// 获取人员信息列表数据
const getMemberCountList = async () => {
	console.log(form.value);
	let requestData = {
		current: pageable.value.pageNo,
		size: pageable.value.pageSize,
		engineeringSn: form.value.engineeringSn,
		...memberSearch.value
	};
	console.log(666);
	const { result } = await memberPageList(requestData);
	if (result && result.records) {
		memberListData.value = result.records;
		pageable.value.total = +result.total;
	}
	console.log(result);
};
// 获取人员信息统计数据
const getMemberCountData = async () => {
	console.log(form.value);
	let requestData = {
		companySn: "",
		personType: "",
		engineeringSn: form.value.engineeringSn
	};
	console.log(666);
	const { result } = await memberCountData(requestData);
	if (result) {
		memberCountInfo.value = result;
	}
	console.log(result);
};
// 获取参建班组数据
const getClassGroupData = async () => {
	console.log(form.value);
	let requestData = {
		current: pageable.value.pageNo,
		size: pageable.value.pageSize,
		engineeringSn: form.value.engineeringSn
	};
	console.log(666);
	const { result } = await classGroupList(requestData);
	if (result && result.records) {
		classGroupData.value = result.records;
		pageable.value.total = +result.total;
	}
	console.log(result);
};
// 获取参建单位数据
const getUnitData = async () => {
	console.log(form.value);
	let requestData = {
		current: pageable.value.pageNo,
		size: pageable.value.pageSize,
		engineeringSn: form.value.engineeringSn,
		type: searchForm.value.type
	};
	console.log(666);
	const { result } = await unitPageList(requestData);
	if (result && result.records) {
		unitData.value = result.records;
		pageable.value.total = +result.total;
	}
	console.log(result);
};
const handleClick = (tab: any, event: any) => {
	console.log(tab.props.name);
	pageable.value.pageNo = 1;
	pageable.value.pageSize = 10;
	let val = tab.props.name;
	if (val == "first") {
		getUnitData();
	} else if (val == "second") {
		getClassGroupData();
	} else if (val == "third") {
		getMemberCountData();
		getMemberCountList();
	} else if (val == "fourth") {
		getAttendanceCountList();
	}
};
const handleSizeChange = size => {
	console.log(size);
	pageable.value.pageSize = size;
};
const handleCurrentChange = currentPage => {
	console.log(currentPage);
	pageable.value.pageNo = currentPage;
};
// 重置表单
const resetForm = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.resetFields();
};
// 监听父组件的visible，用来简介控制el-dialog的弹框开关，一般是用于开
watch(
	() => props.detailsDialog,
	(n, o) => {
		visible1.value = n;
	}
);
// 监听el-dialog显示状态，再通过@update:visible 通知父组件，一般是用于关
watch(visible1, (n, o) => {
	emits("update:detailsDialog", n);
});
watch(
	() => props.formData,
	(n, o) => {
		resetForm(ruleFormRef.value);
		console.log(n);
		form.value = n;
		getUnitData();
		if (form.value.startTime && form.value.endTime) {
			form.value.dateRange = [form.value.startTime, form.value.endTime];
		}
	}
);

onBeforeMount(() => {
	for (let i = 0; i < 31; i++) {
		monthColumns.push({
			prop: "day" + (i + 1),
			label: "" + (i + 1)
		});
	}
});
onMounted(() => {});
</script>

<style lang="scss" scoped>
@mixin fullwidth {
	width: -webkit-fill-available;
	width: -moz-available;
	width: stretch;
}
@mixin flex {
	display: flex;
	align-items: center;
}
@mixin successCircle {
	display: inline-block;
	width: 11px;
	height: 11px;
	background: #008bff;
	opacity: 1;
	border-radius: 50%;
	cursor: pointer;
}
@mixin errorCircle {
	display: inline-block;
	width: 11px;
	height: 11px;
	background: #d9d9d9;
	opacity: 1;
	border-radius: 50%;
	cursor: pointer;
}
.overview {
	// background-color: #fff;
	flex: 1;
	.form {
		background-color: #fff;
		.form-title {
			display: flex;
			flex-direction: column;
			background-color: #fff;
			margin-bottom: 32px;
			div {
				position: relative;
				padding-left: 6px;
				font-size: 14px;
				font-weight: 400;
				color: #333333;
				border-left: 3px solid #008bff;
			}
		}
		.form-tab {
			.search {
				@include flex();
				span:first-child {
					font-size: 14px;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #333333;
					margin-right: auto;
				}
				span:nth-child(2) {
					margin-right: 5px;
				}
				> div {
					.successCircle {
						@include successCircle();
					}
					.errorCircle {
						@include successCircle();
					}
					.text {
						font-size: 14px;
						font-family: Source Han Sans CN-Regular, Source Han Sans CN;
						font-weight: 400;
						color: #333333;
						margin-right: 10px;
						margin-left: 10px;
					}
				}
			}
			.search-two {
				@include flex;
				span {
					font-size: 14px;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #333333;
					margin-right: 22px;
				}
			}
			.search-form {
				@include flex;
				margin-top: 24px;
				> span {
					font-size: 14px;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #333333;
					margin-right: 5px;
				}
			}
			.search-three {
				@include flex();
				> span:first-child {
					font-size: 14px;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #333333;
				}
				> span {
					margin-right: 5px;
				}
				> span:nth-child(3) {
					margin-left: 10px;
				}
				> div {
					min-width: 160px;
					.successCircle {
						@include successCircle();
					}
					.errorCircle {
						@include errorCircle();
					}
					.text {
						font-size: 14px;
						font-family: Source Han Sans CN-Regular, Source Han Sans CN;
						font-weight: 400;
						color: #333333;
						margin-right: 10px;
						margin-left: 10px;
					}
				}
			}
			.table {
				height: 300px;
				min-height: 300px;
				margin-top: 20px;
				.successCircle {
					@include successCircle();
				}
				.errorCircle {
					@include successCircle();
				}
				.table-title {
					position: relative;
					padding-left: 6px;
					font-size: 14px;
					font-weight: 400;
					color: #333333;
					border-left: 3px solid #008bff;
				}
				.member-list {
					display: flex;
					flex-wrap: wrap;
					margin-top: 24px;
					.list-item {
						width: 352px;
						min-width: 352px;
						height: 201px;
						background: #f8f8f8;
						margin-right: 13px;
						margin-bottom: 20px;
						.avater-item {
							display: flex;
							margin-top: 12px;
							margin-left: 12px;
							> img {
								width: 25px;
								height: 36px;
								align-self: center;
							}
							.avater-right {
								display: flex;
								flex-direction: column;
								margin-left: 5px;
								> div {
									display: flex;
									align-items: center;
									img {
										width: 14px;
										height: 14px;
										margin-left: 5px;
									}
								}
							}
						}
						.member-type {
							margin-top: 5px;
							margin-left: 12px;
							font-size: 14px;
							font-family: Source Han Sans CN-Medium, Source Han Sans CN;
							font-weight: 500;
							color: #333333;
						}
						.member-other {
							margin-top: 5px;
							margin-left: 12px;
							font-size: 12px;
							font-family: Source Han Sans CN-Regular, Source Han Sans CN;
							font-weight: 400;
							color: #333333;
						}
					}
				}
				.table-empty {
					display: flex;
					justify-content: center;
					align-items: center;
					height: 100%;
					flex-direction: column;
					color: #999;
				}
			}
		}
		.statistics-page {
			margin-top: 10px;
		}
		.row {
			display: flex;
			justify-content: space-between;
			> :first-child,
			> :last-child {
				width: 45%;
			}
		}
		:deep(.el-input--default) {
			width: 100%;
		}
		v-deep {
			.date {
				@include fullwidth;
			}
			.el-input__prefix {
				display: none;
			}
		}
	}
}

.test :deep(.el-input__wrapper) {
	box-shadow: 0 0 0 0;
}
.test :deep(.el-input__inner) {
	text-align: center;
}
:deep(.el-table__empty-text) {
	min-height: 200px;
	display: flex;
	justify-content: center;
	align-items: center;
}
</style>