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

<template>
	<div class="overview">
		<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="personName">
							<el-input placeholder="请输入" v-model="form.personName" disabled />
						</el-form-item>
						<el-form-item label="类别:" prop="sex">
							<el-input placeholder="请输入" v-model="form.personName" disabled />
						</el-form-item>
					</div>
					<div class="row">
						<el-form-item label="建设单位:" prop="birthday">
							<el-input placeholder="请输入" v-model="form.personName" disabled />
						</el-form-item>
						<el-form-item label="施工总承包单位:" prop="nation">
							<el-input placeholder="请输入" v-model="form.personName" disabled />
						</el-form-item>
					</div>
					<div class="row">
						<el-form-item label="施工许可证编码:" prop="idCard">
							<el-input placeholder="请输入" v-model="form.idCard" />
						</el-form-item>
						<el-form-item label="项目状态:" prop="idCard">
							<el-input placeholder="请输入" v-model="form.idCard" />
						</el-form-item>
					</div>
					<div class="row">
						<el-form-item label="项目联系人:" prop="issuingAuthorityForIdCard">
							<el-input placeholder="请输入" v-model="form.issuingAuthorityForIdCard" />
						</el-form-item>
						<el-form-item label="工程总面积:" prop="idCardExpireDate">
							<el-input placeholder="请输入" v-model="form.issuingAuthorityForIdCard" />
						</el-form-item>
					</div>
					<div class="row">
						<el-form-item label="工程用途:" prop="issuingAuthorityForIdCard">
							<el-input placeholder="请输入" v-model="form.issuingAuthorityForIdCard" />
						</el-form-item>
						<el-form-item label="工程总面积:" prop="idCardExpireDate">
							<el-date-picker
								v-model="form.entryTime"
								format="YYYY-MM-DD"
								value-format="YYYY-MM-DD"
								type="daterange"
								placeholder="请选择"
							/>
						</el-form-item>
					</div>
					<div class="row">
						<el-form-item label="建设地点:" prop="issuingAuthorityForIdCard">
							<el-input placeholder="请输入" v-model="form.issuingAuthorityForIdCard" />
						</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>参建单位总数:3</span>
									<span>参建单位</span>
									<el-input v-model="searchForm.projectName" placeholder="请输入" style="width: 160px" />
									<el-button type="primary" style="margin-left: 20px">发送</el-button>
								</div>
								<div class="table">
									<el-table
										:data="unitData"
										border
										max-height="340"
										class="el-table"
										:header-cell-style="{ backgroundColor: '#EBEEF5', textAlign: 'center' }"
										:cell-style="{ textAlign: 'center' }"
									>
										<el-table-column prop="personName" label="建设单位名称" />
										<el-table-column prop="personName" label="统一社会信用代码" />
										<el-table-column prop="personName" label="联系人" />
										<el-table-column prop="personName" label="联系人电话" />
									</el-table>
								</div>
							</el-tab-pane>
							<el-tab-pane label="参建班组" name="second">
								<div class="search">
									<span>参建班组总数:3</span>
								</div>
								<div class="table">
									<el-table
										:data="unitData"
										border
										max-height="340"
										class="el-table"
										:header-cell-style="{ backgroundColor: '#EBEEF5', textAlign: 'center' }"
										:cell-style="{ textAlign: 'center' }"
									>
										<el-table-column prop="personName" label="建设单位名称" />
										<el-table-column prop="personName" label="统一社会信用代码" />
										<el-table-column prop="personName" label="联系人" />
										<el-table-column prop="personName" label="联系人电话" />
									</el-table>
								</div>
							</el-tab-pane>
							<el-tab-pane label="人员信息" name="third">
								<div class="search-two">
									<span>在册人员:1475</span>
									<span>在册管理人员:42</span>
									<span>在册建筑工人:1443</span>
									<span>在职人员:438</span>
									<span>在职管理人员:23</span>
									<span>在职建筑工人:415</span>
								</div>
								<div class="search-form">
									<span>企业名称</span>
									<el-input placeholder="请输入" style="width: 160px; margin-right: 5px" />
									<span>姓名</span>
									<el-input placeholder="请输入" style="width: 160px; margin-right: 5px" />
									<span>人员类型</span>
									<el-input placeholder="请输入" style="width: 160px" />
									<el-button type="primary" style="margin-left: 20px">查询</el-button>
								</div>
								<div class="table">
									<div class="table-title">人员列表</div>
									<div class="member-list">
										<div class="list-item">
											<div class="avater-item">
												<img src="@/assets/images/govermentImg/在职人数.png" alt="" />
												<div class="avater-right">
													<div>
														<span>名字</span>
														<img src="@/assets/images/govermentImg/在职人数.png" alt="" />
													</div>
													<span>420581195606192999</span>
												</div>
											</div>
											<div class="member-type">建筑工人</div>
											<div class="member-other">公司: 中交隧道工程有限公司</div>
											<div class="member-other">班组: 主线</div>
											<div class="member-other">工种: 其他</div>
											<div class="member-other">电话: 13338237531</div>
										</div>
									</div>
								</div>
							</el-tab-pane>
							<el-tab-pane label="出勤列表" name="fourth">
								<div class="search-three">
									<span>角色类型</span>
									<el-input style="width: 160px" />
									<span>月份</span>
									<el-date-picker style="width: 160px" type="month" placeholder="选择月"> </el-date-picker>
									<el-button type="primary" style="margin-left: 20px; margin-right: auto">查询</el-button>
									<div>
										<span class="successCircle"></span>
										<span class="text">正常出勤</span>
										<span class="errorCircle"></span>
										<span class="text">未出勤</span>
									</div>
								</div>
								<div class="table">
									<el-table
										:data="unitData"
										max-height="340"
										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" 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>
									</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, UploadProps } from "element-plus";
const props = defineProps({
	detailsDialog: Boolean,
	title: String,
	formData: Object
});
const pageable = ref({
	// 分页参数
	pageNo: 1,
	pageSize: 10,
	total: 30
});
const activeName = ref("first");
const handleClick = (tab: any, event: any) => {
	console.log(tab, event);
};
const handleSizeChange = size => {
	console.log(size);
};
const handleCurrentChange = currentPage => {
	console.log(currentPage);
};
const searchForm = ref({
	projectName: ""
});
const unitData = ref([
	{
		personName: 111
	}
]);
const monthColumns: any = [];
const visible1 = ref(false);
const changeType = ref(1);
const filelist = ref([]);
const emits = defineEmits(["update:detailsDialog", "confirm"]);
const ruleFormRef = ref<FormInstance>();
const educationLevelList: any = ref([]);
const form = ref();
// 重置表单
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(props.formData);
		form.value = reactive(n);
	}
);

onBeforeMount(() => {
	for (let i = 0; i < 31; i++) {
		monthColumns.push({
			prop: "day" + (i + 1),
			label: "" + (i + 1)
		});
	}
});
onMounted(() => {
	// 初始化 配置formData
	console.log(props.formData);
	form.value = reactive(props.formData);
});
</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 {
					.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 {
				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;
					margin-top: 24px;
					.list-item {
						width: 352px;
						min-width: 352px;
						height: 201px;
						background: #f8f8f8;
						.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;
						}
					}
				}
			}
		}
		.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>