159 lines
3.9 KiB
Vue
159 lines
3.9 KiB
Vue
<template>
|
|
<div class="table-box">
|
|
<div class="statistics-search">
|
|
<el-card shadow="never" class="topCard">
|
|
<span style="margin: 0 10px 2px 0; white-space: nowrap">姓名</span>
|
|
<el-input v-model="searchForm.projectName" placeholder="请选择输入" />
|
|
<el-button type="primary" style="margin-left: 20px" @click="handleSubmit()">发送</el-button>
|
|
</el-card>
|
|
</div>
|
|
<div class="statistics-list">
|
|
<el-card shadow="never" class="bottomCard">
|
|
<div class="statistics-item">
|
|
<div class="item-child">
|
|
<div class="top-title">
|
|
<span>万天瑶</span>
|
|
<img src="@/assets/images/govermentImg/在职人数.png" alt="" />
|
|
<el-button type="primary" style="margin-left: 20px" @click="showDetails()">查看</el-button>
|
|
</div>
|
|
<div class="detail-content">
|
|
<img src="../../../../assets/images/govermentImg/在职人数.png" alt="" />
|
|
<div>
|
|
<div class="content-item">
|
|
<span>开工时间:2023-01-01</span>
|
|
</div>
|
|
<div class="content-item">
|
|
<span>计划竣工时间:2023-01-01</span>
|
|
</div>
|
|
<div class="content-item">
|
|
<span>建设单位:2023-01-01</span>
|
|
</div>
|
|
<div class="content-item">
|
|
<span>施工单位:2023-01-01</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="statistics-page">
|
|
<Pagination
|
|
:pageable="pageable"
|
|
:background="true"
|
|
:handleSizeChange="handleSizeChange"
|
|
:handleCurrentChange="handleCurrentChange"
|
|
/>
|
|
</div>
|
|
</el-card>
|
|
</div>
|
|
<memberDetails title="查看工程信息" v-model:detailsDialog="detailsDialog" :formData="formData"> </memberDetails>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="tsx" name="ProjectSupervisionRecord">
|
|
import { ref, reactive, nextTick, onMounted } from "vue";
|
|
import Pagination from "@/components/ProTable/components/Pagination.vue";
|
|
import memberDetails from "./components/memberDetails.vue";
|
|
const searchForm = ref({
|
|
projectName: ""
|
|
});
|
|
const pageable = ref({
|
|
// 分页参数
|
|
pageNo: 1,
|
|
pageSize: 10,
|
|
total: 30
|
|
});
|
|
const detailsDialog = ref(false);
|
|
const formData = ref({});
|
|
const showDetails = () => {
|
|
detailsDialog.value = true;
|
|
};
|
|
const handleSizeChange = size => {
|
|
console.log(size);
|
|
};
|
|
const handleCurrentChange = currentPage => {
|
|
console.log(currentPage);
|
|
};
|
|
// 点击发送按钮
|
|
const handleSubmit = async () => {};
|
|
onMounted(() => {});
|
|
</script>
|
|
<style scoped lang="scss">
|
|
.table-box {
|
|
.statistics-search {
|
|
.topCard {
|
|
display: flex;
|
|
align-items: center;
|
|
:deep(.el-card__body) {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
}
|
|
}
|
|
.statistics-list {
|
|
margin-top: 20px;
|
|
height: 892px;
|
|
overflow-y: scroll;
|
|
.statistics-item {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
.item-child {
|
|
width: 794px;
|
|
min-width: 794px;
|
|
height: 196px;
|
|
background: #ffffff;
|
|
opacity: 1;
|
|
border: 1px solid #d9d9d9;
|
|
.top-title {
|
|
height: 56px;
|
|
background: #f5f7f9;
|
|
display: flex;
|
|
align-items: center;
|
|
span {
|
|
font-size: 16px;
|
|
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
|
font-weight: 500;
|
|
color: #333333;
|
|
margin: 0px 10px 0 16px;
|
|
}
|
|
img {
|
|
width: 18px;
|
|
height: 18px;
|
|
margin-right: auto;
|
|
}
|
|
:deep(.el-button) {
|
|
margin-right: 16px;
|
|
}
|
|
}
|
|
.detail-content {
|
|
height: 140px;
|
|
display: flex;
|
|
img {
|
|
width: 72px;
|
|
height: 108px;
|
|
align-self: center;
|
|
margin-left: 16px;
|
|
margin-right: 26px;
|
|
}
|
|
> div {
|
|
margin: 16px 0;
|
|
flex: 1;
|
|
.content-item {
|
|
width: 80%;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 8px;
|
|
span {
|
|
font-size: 14px;
|
|
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
|
font-weight: 500;
|
|
color: #606266;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|