Merge branch 'feature/project-detail-nav-menu' into dev
This commit is contained in:
@@ -0,0 +1,51 @@
|
||||
<template>
|
||||
<div class="detail-query-container">
|
||||
<div class="placeholder-content">
|
||||
<i class="el-icon-document"></i>
|
||||
<p>流水明细查询功能开发中...</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "DetailQuery",
|
||||
props: {
|
||||
projectId: {
|
||||
type: [String, Number],
|
||||
default: null,
|
||||
},
|
||||
projectInfo: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
projectName: "",
|
||||
updateTime: "",
|
||||
projectStatus: "0",
|
||||
}),
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.detail-query-container {
|
||||
padding: 40px 20px;
|
||||
background: #fff;
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
.placeholder-content {
|
||||
text-align: center;
|
||||
color: #909399;
|
||||
|
||||
i {
|
||||
font-size: 48px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,51 @@
|
||||
<template>
|
||||
<div class="param-config-container">
|
||||
<div class="placeholder-content">
|
||||
<i class="el-icon-setting"></i>
|
||||
<p>参数配置功能开发中...</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ParamConfig",
|
||||
props: {
|
||||
projectId: {
|
||||
type: [String, Number],
|
||||
default: null,
|
||||
},
|
||||
projectInfo: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
projectName: "",
|
||||
updateTime: "",
|
||||
projectStatus: "0",
|
||||
}),
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.param-config-container {
|
||||
padding: 40px 20px;
|
||||
background: #fff;
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
.placeholder-content {
|
||||
text-align: center;
|
||||
color: #909399;
|
||||
|
||||
i {
|
||||
font-size: 48px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,51 @@
|
||||
<template>
|
||||
<div class="preliminary-check-container">
|
||||
<div class="placeholder-content">
|
||||
<i class="el-icon-data-analysis"></i>
|
||||
<p>结果总览功能开发中...</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "PreliminaryCheck",
|
||||
props: {
|
||||
projectId: {
|
||||
type: [String, Number],
|
||||
default: null,
|
||||
},
|
||||
projectInfo: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
projectName: "",
|
||||
updateTime: "",
|
||||
projectStatus: "0",
|
||||
}),
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.preliminary-check-container {
|
||||
padding: 40px 20px;
|
||||
background: #fff;
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
.placeholder-content {
|
||||
text-align: center;
|
||||
color: #909399;
|
||||
|
||||
i {
|
||||
font-size: 48px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,51 @@
|
||||
<template>
|
||||
<div class="special-check-container">
|
||||
<div class="placeholder-content">
|
||||
<i class="el-icon-search"></i>
|
||||
<p>专项排查功能开发中...</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "SpecialCheck",
|
||||
props: {
|
||||
projectId: {
|
||||
type: [String, Number],
|
||||
default: null,
|
||||
},
|
||||
projectInfo: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
projectName: "",
|
||||
updateTime: "",
|
||||
projectStatus: "0",
|
||||
}),
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.special-check-container {
|
||||
padding: 40px 20px;
|
||||
background: #fff;
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
.placeholder-content {
|
||||
text-align: center;
|
||||
color: #909399;
|
||||
|
||||
i {
|
||||
font-size: 48px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -25,38 +25,24 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<div class="action-buttons">
|
||||
<el-button
|
||||
size="small"
|
||||
type="primary"
|
||||
icon="el-icon-upload2"
|
||||
@click="handleUploadData"
|
||||
>
|
||||
上传数据
|
||||
</el-button>
|
||||
<el-button
|
||||
size="small"
|
||||
icon="el-icon-setting"
|
||||
@click="handleParamConfig"
|
||||
>
|
||||
参数配置
|
||||
</el-button>
|
||||
<el-dropdown @command="handleCheckResultCommand" trigger="click">
|
||||
<el-button size="small" icon="el-icon-document">
|
||||
初核结果<i class="el-icon-arrow-down el-icon--right"></i>
|
||||
</el-button>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item command="overview">结果总览</el-dropdown-item>
|
||||
<el-dropdown-item command="special">专项排查</el-dropdown-item>
|
||||
<el-dropdown-item command="detail">流水明细查询</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
<el-menu
|
||||
:default-active="activeTab"
|
||||
mode="horizontal"
|
||||
@select="handleMenuSelect"
|
||||
class="nav-menu"
|
||||
>
|
||||
<el-menu-item index="upload">上传数据</el-menu-item>
|
||||
<el-menu-item index="config">参数配置</el-menu-item>
|
||||
<el-menu-item index="overview">结果总览</el-menu-item>
|
||||
<el-menu-item index="special">专项排查</el-menu-item>
|
||||
<el-menu-item index="detail">流水明细查询</el-menu-item>
|
||||
</el-menu>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 数据上传页面 -->
|
||||
<UploadData
|
||||
<!-- 动态组件渲染区域 -->
|
||||
<component
|
||||
:is="currentComponent"
|
||||
:project-id="projectId"
|
||||
:project-info="projectInfo"
|
||||
@menu-change="handleMenuChange"
|
||||
@@ -70,26 +56,26 @@
|
||||
|
||||
<script>
|
||||
import UploadData from "./components/detail/UploadData";
|
||||
// import UploadParams from "./components/detail/UploadParams";
|
||||
// import ParamConfig from "./components/detail/ParamConfig";
|
||||
// import PreliminaryCheck from "./components/detail/PreliminaryCheck";
|
||||
// import SpecialCheck from "./components/detail/SpecialCheck";
|
||||
// import DetailQuery from './components/detail/DetailQuery'
|
||||
import ParamConfig from "./components/detail/ParamConfig";
|
||||
import PreliminaryCheck from "./components/detail/PreliminaryCheck";
|
||||
import SpecialCheck from "./components/detail/SpecialCheck";
|
||||
import DetailQuery from "./components/detail/DetailQuery";
|
||||
|
||||
export default {
|
||||
name: "ProjectDetail",
|
||||
components: {
|
||||
UploadData,
|
||||
// UploadParams,
|
||||
// ParamConfig,
|
||||
// PreliminaryCheck,
|
||||
// SpecialCheck,
|
||||
// DetailQuery,
|
||||
ParamConfig,
|
||||
PreliminaryCheck,
|
||||
SpecialCheck,
|
||||
DetailQuery,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 当前标签页
|
||||
activeTab: "data",
|
||||
// 当前激活的菜单项索引
|
||||
activeTab: "upload",
|
||||
// 当前显示的组件名称
|
||||
currentComponent: "UploadData",
|
||||
// 项目ID
|
||||
projectId: this.$route.params.projectId,
|
||||
// 项目信息
|
||||
@@ -182,26 +168,27 @@ export default {
|
||||
handleBack() {
|
||||
this.$router.push("/ccdiProject");
|
||||
},
|
||||
/** 菜单选择事件 */
|
||||
handleMenuSelect(index) {
|
||||
console.log("菜单选择:", index);
|
||||
this.activeTab = index;
|
||||
|
||||
// 组件映射
|
||||
const componentMap = {
|
||||
upload: "UploadData",
|
||||
config: "ParamConfig",
|
||||
overview: "PreliminaryCheck",
|
||||
special: "SpecialCheck",
|
||||
detail: "DetailQuery",
|
||||
};
|
||||
|
||||
this.currentComponent = componentMap[index] || "UploadData";
|
||||
},
|
||||
/** UploadData 组件：菜单切换 */
|
||||
handleMenuChange({ key, route }) {
|
||||
console.log("切换到菜单:", key, route);
|
||||
// 根据不同的菜单项跳转到不同的组件或页面
|
||||
switch (route) {
|
||||
case "config":
|
||||
this.$message.info("参数配置功能开发中");
|
||||
break;
|
||||
case "overview":
|
||||
this.$message.info("结果总览功能开发中");
|
||||
break;
|
||||
case "special":
|
||||
this.$message.info("专项排查功能开发中");
|
||||
break;
|
||||
case "detail":
|
||||
this.$message.info("流水明细查询功能开发中");
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
// 直接触发菜单选择
|
||||
this.handleMenuSelect(route);
|
||||
},
|
||||
/** UploadData 组件：数据上传完成 */
|
||||
handleDataUploaded({ type }) {
|
||||
@@ -223,33 +210,6 @@ export default {
|
||||
console.log("拉取本行信息");
|
||||
this.$message.info("拉取本行信息功能开发中");
|
||||
},
|
||||
/** 上传数据 (原方法，已由UploadData组件处理) */
|
||||
handleUploadData() {
|
||||
console.log("上传数据");
|
||||
this.$message.info("上传数据功能已迁移至上传页面");
|
||||
},
|
||||
/** 参数配置 (原方法) */
|
||||
handleParamConfig() {
|
||||
console.log("参数配置");
|
||||
this.$message.info("参数配置功能开发中");
|
||||
},
|
||||
/** 初核结果下拉菜单命令 */
|
||||
handleCheckResultCommand(command) {
|
||||
console.log("初核结果命令:", command);
|
||||
switch (command) {
|
||||
case "overview":
|
||||
this.$message.info("结果总览功能开发中");
|
||||
break;
|
||||
case "special":
|
||||
this.$message.info("专项排查功能开发中");
|
||||
break;
|
||||
case "detail":
|
||||
this.$message.info("流水明细查询功能开发中");
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
},
|
||||
/** 数据上传完成 */
|
||||
handleDataUploaded() {
|
||||
console.log("数据上传完成");
|
||||
@@ -353,21 +313,51 @@ export default {
|
||||
}
|
||||
|
||||
.header-right {
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.el-button {
|
||||
padding: 8px 16px;
|
||||
.nav-menu {
|
||||
// 移除默认背景色和边框
|
||||
background-color: transparent;
|
||||
border-bottom: none;
|
||||
|
||||
// 菜单项基础样式
|
||||
.el-menu-item,
|
||||
.el-submenu__title {
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
padding: 0 16px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
border-bottom: 2px solid transparent;
|
||||
|
||||
.el-icon--right {
|
||||
margin-left: 4px;
|
||||
&:hover {
|
||||
background-color: #f5f7fa;
|
||||
color: #303133;
|
||||
}
|
||||
}
|
||||
|
||||
.el-tag {
|
||||
// 子菜单容器高度统一
|
||||
.el-submenu {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
// 激活状态：底部下划线 + 蓝色文字
|
||||
.el-menu-item.is-active {
|
||||
color: #1890ff;
|
||||
border-bottom: 2px solid #1890ff;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
// 下拉菜单激活状态
|
||||
.el-submenu.is-active > .el-submenu__title {
|
||||
color: #1890ff;
|
||||
border-bottom: 2px solid #1890ff;
|
||||
}
|
||||
|
||||
// 下拉菜单图标
|
||||
.el-submenu__icon-arrow {
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
@@ -471,6 +461,25 @@ export default {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
|
||||
.header-right {
|
||||
width: 100%;
|
||||
margin-top: 12px;
|
||||
|
||||
.nav-menu {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
|
||||
.el-menu-item,
|
||||
.el-submenu {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 0 8px;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.info-content {
|
||||
@@ -494,4 +503,22 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 下拉菜单弹窗样式
|
||||
::v-deep .el-menu--popup {
|
||||
min-width: 140px;
|
||||
|
||||
.el-menu-item {
|
||||
font-size: 14px;
|
||||
|
||||
&:hover {
|
||||
background-color: #f5f7fa;
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
color: #1890ff;
|
||||
background-color: #e6f7ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user