548 lines
17 KiB
Vue
548 lines
17 KiB
Vue
<template>
|
||
<div class="construction-department-page">
|
||
<!-- 左侧树形菜单 -->
|
||
<div class="left-sidebar">
|
||
<el-tree
|
||
:data="treeData"
|
||
:props="defaultProps"
|
||
node-key="id"
|
||
default-expand-all
|
||
highlight-current
|
||
@node-click="handleNodeClick"
|
||
class="department-tree"
|
||
>
|
||
<template #default="{ node, data }">
|
||
<span class="tree-node">
|
||
<el-icon v-if="data.children && data.children.length" class="tree-icon">
|
||
<FolderOpened v-if="node.expanded" />
|
||
<Folder v-else />
|
||
</el-icon>
|
||
<el-icon v-else class="tree-icon"><Document /></el-icon>
|
||
<span class="tree-label">{{ node.label }}</span>
|
||
</span>
|
||
</template>
|
||
</el-tree>
|
||
</div>
|
||
|
||
<!-- 右侧内容区域 -->
|
||
<div class="right-content">
|
||
<!-- 搜索筛选区域 -->
|
||
<div class="search-area">
|
||
<div class="search-row">
|
||
<div class="search-item">
|
||
<span class="search-label">项目名称</span>
|
||
<el-input v-model="searchForm.projectName" placeholder="" clearable style="width: 140px" />
|
||
</div>
|
||
<div class="search-item">
|
||
<span class="search-label">驻地名称</span>
|
||
<el-input v-model="searchForm.stationName" placeholder="" clearable style="width: 140px" />
|
||
</div>
|
||
<div class="search-item">
|
||
<span class="search-label">建设单位</span>
|
||
<el-input v-model="searchForm.constructionUnit" placeholder="" clearable style="width: 140px" />
|
||
</div>
|
||
<div class="search-item">
|
||
<span class="search-label">施工单位</span>
|
||
<el-input v-model="searchForm.builderUnit" placeholder="" clearable style="width: 140px" />
|
||
</div>
|
||
<div class="search-item">
|
||
<span class="search-label">项目类型</span>
|
||
<el-select v-model="searchForm.projectType" placeholder="全部" clearable style="width: 100px">
|
||
<el-option label="全部" value="" />
|
||
<el-option label="新建" value="new" />
|
||
<el-option label="改扩建" value="rebuild" />
|
||
</el-select>
|
||
</div>
|
||
</div>
|
||
<div class="search-row">
|
||
<div class="search-item">
|
||
<span class="search-label">驻地类型</span>
|
||
<el-select v-model="searchForm.stationType" placeholder="全部" clearable style="width: 100px">
|
||
<el-option label="全部" value="" />
|
||
<el-option label="类型1" value="type1" />
|
||
<el-option label="类型2" value="type2" />
|
||
</el-select>
|
||
</div>
|
||
<div class="search-item">
|
||
<span class="search-label">驻地风险等级</span>
|
||
<el-select v-model="searchForm.riskLevel" placeholder="全部" clearable style="width: 100px">
|
||
<el-option label="全部" value="" />
|
||
<el-option label="高" value="high" />
|
||
<el-option label="中" value="medium" />
|
||
<el-option label="低" value="low" />
|
||
</el-select>
|
||
</div>
|
||
<div class="search-item">
|
||
<span class="search-label">所属区县</span>
|
||
<el-select v-model="searchForm.district" placeholder="全部" clearable style="width: 100px">
|
||
<el-option label="全部" value="" />
|
||
<el-option label="万州区" value="wanzhou" />
|
||
<el-option label="沙坪坝区" value="shapingba" />
|
||
<el-option label="涪陵区" value="fuling" />
|
||
</el-select>
|
||
</div>
|
||
<div class="search-item">
|
||
<span class="search-label">吹哨人姓名</span>
|
||
<el-input v-model="searchForm.whistleblowerName" placeholder="" clearable style="width: 100px" />
|
||
</div>
|
||
<div class="search-item">
|
||
<span class="search-label">建设单位责任人姓名</span>
|
||
<el-input v-model="searchForm.constructorResponsible" placeholder="" clearable style="width: 100px" />
|
||
</div>
|
||
</div>
|
||
<div class="search-row">
|
||
<div class="search-item">
|
||
<span class="search-label">区县级责任人姓名</span>
|
||
<el-input v-model="searchForm.countyResponsible" placeholder="" clearable style="width: 100px" />
|
||
</div>
|
||
<div class="search-item">
|
||
<span class="search-label">市级责任人姓名</span>
|
||
<el-input v-model="searchForm.cityResponsible" placeholder="" clearable style="width: 100px" />
|
||
</div>
|
||
<div class="search-item">
|
||
<span class="search-label">施工单位责任人姓名</span>
|
||
<el-input v-model="searchForm.builderResponsible" placeholder="" clearable style="width: 100px" />
|
||
</div>
|
||
<div class="search-item">
|
||
<span class="search-label">驻地责任人姓名</span>
|
||
<el-input v-model="searchForm.stationResponsible" placeholder="" clearable style="width: 100px" />
|
||
</div>
|
||
<div class="search-item search-buttons">
|
||
<el-button type="primary" @click="handleSearch">查询</el-button>
|
||
<!-- <el-button link type="primary" @click="handleReset">收起</el-button> -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 操作按钮 -->
|
||
<div class="action-area">
|
||
<el-button type="primary" class="export-btn" @click="handleExport">
|
||
<el-icon><Download /></el-icon>
|
||
导出
|
||
</el-button>
|
||
<el-button type="primary" class="import-btn" @click="handleImport">
|
||
<el-icon><Upload /></el-icon>
|
||
导入
|
||
</el-button>
|
||
</div>
|
||
|
||
<!-- 数据表格 -->
|
||
<div class="table-area">
|
||
<el-table
|
||
:data="filteredTableData"
|
||
stripe
|
||
style="width: 100%"
|
||
:header-cell-style="headerCellStyle"
|
||
:row-class-name="rowClassName"
|
||
>
|
||
<el-table-column type="index" label="序号" width="60" align="center" />
|
||
<el-table-column prop="district" label="所属区县" width="100" align="center" />
|
||
<el-table-column prop="projectName" label="项目名称" min-width="200" show-overflow-tooltip />
|
||
<el-table-column prop="stationName" label="驻地名称" min-width="180" show-overflow-tooltip />
|
||
<el-table-column prop="stationType" label="驻地类型" width="100" align="center" />
|
||
<el-table-column prop="coordinate" label="坐标点位" width="150" align="center" show-overflow-tooltip />
|
||
<el-table-column prop="parentProject" label="所属项目名称" min-width="180" show-overflow-tooltip />
|
||
<el-table-column prop="projectType" label="项目类型" width="120" align="center" />
|
||
<el-table-column prop="constructionUnit" label="建设单位" min-width="150" show-overflow-tooltip />
|
||
<el-table-column prop="builderUnit" label="施工单位" min-width="150" show-overflow-tooltip />
|
||
<el-table-column prop="stationAddress" label="驻地地址" min-width="200" show-overflow-tooltip />
|
||
<el-table-column prop="adminArea" label="行政区域" width="100" align="center" />
|
||
<el-table-column prop="stationPeople" label="驻地人数" width="90" align="center" />
|
||
<el-table-column prop="riskLevel" label="驻地风险等级" width="110" align="center" />
|
||
<el-table-column prop="buildingType" label="房建类型" width="100" align="center" />
|
||
<el-table-column prop="relocationStatus" label="搬迁状态" width="90" align="center" />
|
||
<el-table-column label="操作" width="120" align="center" fixed="right">
|
||
<template #default="{ row }">
|
||
<el-button link type="primary" size="small" @click="handleEdit(row)">编辑</el-button>
|
||
<el-button link type="danger" size="small" @click="handleDelete(row)">删除</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
|
||
<!-- 分页 -->
|
||
<div class="pagination-area">
|
||
<el-pagination
|
||
v-model:current-page="currentPage"
|
||
v-model:page-size="pageSize"
|
||
:total="total"
|
||
:page-sizes="[10, 20, 50, 100]"
|
||
layout="prev, pager, next, jumper"
|
||
prev-text="上一个"
|
||
next-text="下一个"
|
||
@current-change="handleCurrentChange"
|
||
@size-change="handleSizeChange"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, reactive, computed } from "vue";
|
||
import { ElMessage, ElMessageBox } from "element-plus";
|
||
import { Folder, FolderOpened, Document, Download, Upload } from "@element-plus/icons-vue";
|
||
|
||
// 树形菜单数据
|
||
const treeData = ref([
|
||
{
|
||
id: 1,
|
||
label: "2026",
|
||
children: [
|
||
{ id: 11, label: "2026.3" },
|
||
{ id: 12, label: "2026.2" },
|
||
{ id: 13, label: "2026.1" },
|
||
],
|
||
},
|
||
{
|
||
id: 2,
|
||
label: "2025",
|
||
children: [
|
||
{ id: 21, label: "2025.12" },
|
||
{ id: 22, label: "2025.11" },
|
||
{ id: 23, label: "2025.10" },
|
||
],
|
||
},
|
||
]);
|
||
|
||
const defaultProps = {
|
||
children: "children",
|
||
label: "label",
|
||
};
|
||
|
||
// 搜索表单
|
||
const searchForm = reactive({
|
||
projectName: "",
|
||
stationName: "",
|
||
constructionUnit: "",
|
||
builderUnit: "",
|
||
projectType: "",
|
||
stationType: "",
|
||
riskLevel: "",
|
||
district: "",
|
||
whistleblowerName: "",
|
||
constructorResponsible: "",
|
||
countyResponsible: "",
|
||
cityResponsible: "",
|
||
builderResponsible: "",
|
||
stationResponsible: "",
|
||
});
|
||
|
||
// 表格数据
|
||
const tableData = ref([
|
||
{
|
||
district: "沙坪坝区",
|
||
projectName: "沙坪坝区S545茅山峡公路桥新建工程（渝黔铁路扩能改造工程）",
|
||
stationName: "沙坪坝区S545茅山峡公路桥新建工程（渝黔铁路扩能改造工程）项目经理部",
|
||
stationType: "项目部驻地",
|
||
coordinate: "经度：106.44E；纬度29.62N",
|
||
parentProject: "中铁十七局集团第五工程有限公司",
|
||
projectType: "普通国省干线（新建/改扩建）",
|
||
constructionUnit: "成渝铁路客运专线有限公司",
|
||
builderUnit: "中铁十七局集团",
|
||
stationAddress: "沙坪坝区井口街道南溪村茅山峡公路跨线桥处",
|
||
adminArea: "沙坪坝区",
|
||
stationPeople: "16",
|
||
riskLevel: "高",
|
||
buildingType: "板房",
|
||
relocationStatus: "否",
|
||
},
|
||
{
|
||
district: "沙坪坝区",
|
||
projectName: "沙坪坝区S545茅山峡公路桥新建工程（渝黔铁路扩能改造工程）",
|
||
stationName: "沙坪坝区S545茅山峡公路桥新建工程（渝黔铁路扩能改造工程）项目经理部",
|
||
stationType: "项目部驻地",
|
||
coordinate: "经度：106.44E；纬度29.62N",
|
||
parentProject: "中铁十七局集团第五工程有限公司",
|
||
projectType: "普通国省干线（新建/改扩建）",
|
||
constructionUnit: "成渝铁路客运专线有限公司",
|
||
builderUnit: "中铁十七局集团",
|
||
stationAddress: "沙坪坝区井口街道南溪村茅山峡公路跨线桥处",
|
||
adminArea: "沙坪坝区",
|
||
stationPeople: "16",
|
||
riskLevel: "高",
|
||
buildingType: "板房",
|
||
relocationStatus: "否",
|
||
},
|
||
]);
|
||
|
||
// 过滤后的表格数据
|
||
const filteredTableData = computed(() => {
|
||
return tableData.value.filter((item) => {
|
||
const matchProjectName = !searchForm.projectName || item.projectName.includes(searchForm.projectName);
|
||
const matchStationName = !searchForm.stationName || item.stationName.includes(searchForm.stationName);
|
||
const matchConstructionUnit = !searchForm.constructionUnit || item.constructionUnit.includes(searchForm.constructionUnit);
|
||
const matchBuilderUnit = !searchForm.builderUnit || item.builderUnit.includes(searchForm.builderUnit);
|
||
const matchDistrict = !searchForm.district || item.district.includes(searchForm.district === 'wanzhou' ? '万州' : searchForm.district === 'shapingba' ? '沙坪坝' : '涪陵');
|
||
return matchProjectName && matchStationName && matchConstructionUnit && matchBuilderUnit && matchDistrict;
|
||
});
|
||
});
|
||
|
||
// 分页
|
||
const currentPage = ref(1);
|
||
const pageSize = ref(10);
|
||
const total = ref(2);
|
||
|
||
// 表头样式
|
||
const headerCellStyle = () => ({
|
||
background: "#e6f0ff",
|
||
color: "#303133",
|
||
fontWeight: "bold",
|
||
fontSize: "13px",
|
||
padding: "10px 0",
|
||
});
|
||
|
||
// 行样式
|
||
const rowClassName = ({ rowIndex }) => {
|
||
return rowIndex % 2 === 0 ? "even-row" : "odd-row";
|
||
};
|
||
|
||
// 树节点点击
|
||
const handleNodeClick = (data) => {
|
||
console.log("点击节点:", data);
|
||
};
|
||
|
||
// 查询
|
||
const handleSearch = () => {
|
||
currentPage.value = 1;
|
||
ElMessage.success("查询成功");
|
||
};
|
||
|
||
// 重置
|
||
const handleReset = () => {
|
||
Object.keys(searchForm).forEach((key) => {
|
||
searchForm[key] = "";
|
||
});
|
||
currentPage.value = 1;
|
||
ElMessage.success("已重置");
|
||
};
|
||
|
||
// 导出
|
||
const handleExport = () => {
|
||
ElMessage.success("导出成功");
|
||
};
|
||
|
||
// 导入
|
||
const handleImport = () => {
|
||
ElMessage.info("请选择要导入的文件");
|
||
};
|
||
|
||
// 编辑
|
||
const handleEdit = (row) => {
|
||
ElMessage.info(`编辑 ${row.projectName}`);
|
||
};
|
||
|
||
// 删除
|
||
const handleDelete = (row) => {
|
||
ElMessageBox.confirm(`确定删除 ${row.projectName} 吗？`, "提示", {
|
||
confirmButtonText: "确定",
|
||
cancelButtonText: "取消",
|
||
type: "warning",
|
||
})
|
||
.then(() => {
|
||
ElMessage.success("删除成功");
|
||
})
|
||
.catch(() => {});
|
||
};
|
||
|
||
// 分页变化
|
||
const handleCurrentChange = (val) => {
|
||
currentPage.value = val;
|
||
};
|
||
|
||
const handleSizeChange = (val) => {
|
||
pageSize.value = val;
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.construction-department-page {
|
||
display: flex;
|
||
height: 100vh;
|
||
background: #f5f7fa;
|
||
|
||
// 左侧树形菜单
|
||
.left-sidebar {
|
||
width: 200px;
|
||
background: #fff;
|
||
border-right: 1px solid #e4e7ed;
|
||
padding: 15px;
|
||
overflow-y: auto;
|
||
|
||
.department-tree {
|
||
.tree-node {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 14px;
|
||
|
||
.tree-icon {
|
||
margin-right: 8px;
|
||
font-size: 16px;
|
||
color: #909399;
|
||
}
|
||
|
||
.tree-label {
|
||
color: #606266;
|
||
}
|
||
}
|
||
|
||
:deep(.el-tree-node__content) {
|
||
height: 32px;
|
||
padding-left: 8px !important;
|
||
}
|
||
|
||
:deep(.el-tree-node__children) {
|
||
.el-tree-node__content {
|
||
padding-left: 24px !important;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 右侧内容区域
|
||
.right-content {
|
||
flex: 1;
|
||
padding: 20px;
|
||
overflow-y: auto;
|
||
|
||
// 搜索区域
|
||
.search-area {
|
||
background: #fff;
|
||
padding: 15px 20px;
|
||
border-radius: 4px;
|
||
margin-bottom: 15px;
|
||
|
||
.search-row {
|
||
display: flex;
|
||
gap: 15px;
|
||
margin-bottom: 12px;
|
||
flex-wrap: wrap;
|
||
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.search-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
|
||
.search-label {
|
||
font-size: 13px;
|
||
color: #606266;
|
||
white-space: nowrap;
|
||
}
|
||
}
|
||
|
||
.search-buttons {
|
||
margin-left: auto;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 操作区域
|
||
.action-area {
|
||
display: flex;
|
||
gap: 10px;
|
||
margin-bottom: 15px;
|
||
|
||
.export-btn,
|
||
.import-btn {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 5px;
|
||
}
|
||
}
|
||
|
||
// 表格区域
|
||
.table-area {
|
||
background: #fff;
|
||
padding: 15px;
|
||
border-radius: 4px;
|
||
margin-bottom: 15px;
|
||
|
||
:deep(.el-table) {
|
||
border: 1px solid #ebeef5;
|
||
border-radius: 4px;
|
||
|
||
.el-table__header-wrapper {
|
||
th {
|
||
background: #e6f0ff !important;
|
||
}
|
||
}
|
||
|
||
.even-row {
|
||
background: #f5f9ff;
|
||
}
|
||
|
||
.odd-row {
|
||
background: #fff;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 分页区域
|
||
.pagination-area {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
background: #fff;
|
||
padding: 15px;
|
||
border-radius: 4px;
|
||
|
||
:deep(.el-pagination) {
|
||
.btn-prev,
|
||
.btn-next {
|
||
padding: 0 15px;
|
||
border: 1px solid #dcdfe6;
|
||
border-radius: 4px;
|
||
background: #fff;
|
||
color: #606266;
|
||
|
||
&:hover {
|
||
color: #409eff;
|
||
border-color: #409eff;
|
||
}
|
||
|
||
&.disabled {
|
||
color: #c0c4cc;
|
||
border-color: #e4e7ed;
|
||
}
|
||
}
|
||
|
||
.el-pager {
|
||
li {
|
||
min-width: 32px;
|
||
height: 32px;
|
||
line-height: 32px;
|
||
border: 1px solid #dcdfe6;
|
||
border-radius: 4px;
|
||
margin: 0 4px;
|
||
background: #fff;
|
||
color: #606266;
|
||
|
||
&.active {
|
||
background: #409eff;
|
||
border-color: #409eff;
|
||
color: #fff;
|
||
}
|
||
|
||
&:hover {
|
||
color: #409eff;
|
||
border-color: #409eff;
|
||
}
|
||
|
||
&.active:hover {
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
|
||
.el-pagination__jump {
|
||
margin-left: 15px;
|
||
color: #606266;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |