需求56 检查项目设置-》检查类型维护;界面代码被误修,回滚提交

This commit is contained in:
HuangShun
2026-01-28 15:00:03 +08:00
parent b0040bcd48
commit 7da461a9cb

View File

@@ -3,29 +3,33 @@
<!-- 左侧导航栏 --> <!-- 左侧导航栏 -->
<div class="sidebar"> <div class="sidebar">
<div class="sidebar-header"> <div class="sidebar-header">
<h3>需求描述</h3> <h3>检查项目管理</h3>
</div> </div>
<div class="sidebar-menu"> <div class="sidebar-menu">
<!-- 明确列出所有导航项 --> <!-- 明确列出所有导航项 -->
<button <button
class="menu-item" class="menu-item active"
:class="{ active: activeMenu === '检类型' }" @click="handleMenuClick('检类型')"
@click="handleMenuClick('检验类型')"
> >
<span class="menu-icon">📋</span> <span class="menu-icon">📋</span>
<span class="menu-text">类型</span> <span class="menu-text">类型</span>
</button> </button>
<button <button
class="menu-item" class="menu-item"
:class="{ active: activeMenu === '检验项目' }" @click="handleMenuClick('检查方法')"
@click="handleMenuClick('检验项目')"
> >
<span class="menu-icon">🔬</span> <span class="menu-icon">🔬</span>
<span class="menu-text">验项目</span> <span class="menu-text">查方法</span>
</button>
<button
class="menu-item"
@click="handleMenuClick('检查部位')"
>
<span class="menu-icon">🎯</span>
<span class="menu-text">检查部位</span>
</button> </button>
<button <button
class="menu-item" class="menu-item"
:class="{ active: activeMenu === '套餐设置' }"
@click="handleMenuClick('套餐设置')" @click="handleMenuClick('套餐设置')"
> >
<span class="menu-icon">📦</span> <span class="menu-icon">📦</span>
@@ -53,7 +57,7 @@
@switch-to-settings="handleSwitchToSettings" @switch-to-settings="handleSwitchToSettings"
/> />
</template> </template>
<!-- 类型的表格视图 --> <!-- 类型的表格视图 -->
<template v-if="activeMenu === '检查类型'"> <template v-if="activeMenu === '检查类型'">
<div class="header"> <div class="header">
<h1>{{ activeMenu }}管理</h1> <h1>{{ activeMenu }}管理</h1>
@@ -204,7 +208,7 @@
</div> </div>
</template> </template>
<!-- 验项目的表格视图对应检查方法 --> <!-- 查方法的表格视图 -->
<template v-else-if="activeMenu === '检查方法'"> <template v-else-if="activeMenu === '检查方法'">
<div class="header"> <div class="header">
<h1>{{ activeMenu }}管理</h1> <h1>{{ activeMenu }}管理</h1>
@@ -556,55 +560,6 @@
<button class="pagination-btn"></button> <button class="pagination-btn"></button>
</div> </div>
</div> </div>
<!-- 右侧侧边栏 -->
<div class="right-sidebar">
<el-tabs v-model="rightTabActive" class="right-tabs">
<el-tab-pane label="基本信息" name="basic">
<div class="info-content">
<div class="info-item">
<span class="info-label">所属模块:</span>
<span class="info-value">维护</span>
</div>
<div class="info-item">
<span class="info-label">父需求:</span>
<span class="info-value">检验项</span>
</div>
<div class="info-item">
<span class="info-label">需求层级:</span>
<span class="info-value"></span>
</div>
<div class="info-item">
<span class="info-label">当前状态:</span>
<span class="info-value">激活</span>
</div>
<div class="info-item">
<span class="info-label">优先级:</span>
<span class="info-value priority">3</span>
</div>
<div class="info-item">
<span class="info-label">预计工时:</span>
<span class="info-value">0h</span>
</div>
</div>
<el-tabs v-model="subTabActive" class="sub-tabs">
<el-tab-pane label="相关需求" name="related">
<div class="empty-content">暂无相关需求</div>
</el-tab-pane>
<el-tab-pane label="迭代" name="iteration">
<div class="empty-content">暂无迭代信息</div>
</el-tab-pane>
</el-tabs>
</el-tab-pane>
<el-tab-pane label="需求" name="requirement">
<div class="requirement-content">
<div class="requirement-text">
<p>1如上图1所示:增加套餐管理界面</p>
</div>
</div>
</el-tab-pane>
</el-tabs>
</div>
</div> </div>
</template> </template>
@@ -634,15 +589,10 @@ import {
import PackageSettings from './components/PackageSettings.vue'; import PackageSettings from './components/PackageSettings.vue';
import PackageManagement from './components/PackageManagement.vue'; import PackageManagement from './components/PackageManagement.vue';
// 菜单数据(显示名称) // 菜单数据
const menus = ['检类型', '检验项目', '套餐设置']; const menus = ['检类型', '检查方法', '检查部位', '套餐设置'];
// 内部业务逻辑名称(用于条件判断)
const activeMenu = ref('检查类型'); const activeMenu = ref('检查类型');
// 右侧侧边栏状态
const rightTabActive = ref('basic');
const subTabActive = ref('related');
// 套餐视图状态: management-套餐管理列表, settings-套餐设置 // 套餐视图状态: management-套餐管理列表, settings-套餐设置
const packageView = ref('management') const packageView = ref('management')
// 套餐设置模式: add-新增, edit-编辑, view-查看 // 套餐设置模式: add-新增, edit-编辑, view-查看
@@ -813,21 +763,12 @@ onMounted(async () => {
} }
}); });
// 菜单名称映射:将显示名称映射到内部业务逻辑名称
const menuMapping = {
'检验类型': '检查类型',
'检验项目': '检查方法',
'套餐设置': '套餐设置'
};
// 处理菜单点击 // 处理菜单点击
function handleMenuClick(menu) { function handleMenuClick(menu) {
console.log('点击菜单:', menu); console.log('点击菜单:', menu);
console.log('当前activeMenu:', activeMenu.value); console.log('当前activeMenu:', activeMenu.value);
// 将显示名称映射到内部业务逻辑名称 activeMenu.value = menu;
const internalMenu = menuMapping[menu] || menu;
activeMenu.value = internalMenu;
console.log('更新后activeMenu:', activeMenu.value); console.log('更新后activeMenu:', activeMenu.value);
@@ -1552,7 +1493,6 @@ select {
min-height: 100vh; min-height: 100vh;
background-color: #f5f7fa; background-color: #f5f7fa;
color: #000000; color: #000000;
position: relative;
} }
/* 左侧导航栏样式 */ /* 左侧导航栏样式 */
@@ -1671,109 +1611,6 @@ select {
overflow-x: auto; overflow-x: auto;
overflow-y: auto; overflow-y: auto;
background-color: #f8f9fa; background-color: #f8f9fa;
margin-right: 300px; /* 为右侧侧边栏留出空间 */
}
/* 右侧侧边栏样式 */
.right-sidebar {
position: fixed;
right: 0;
top: 0;
width: 300px;
height: 100vh;
background: #ffffff;
box-shadow: -2px 0 8px rgba(0, 0, 0, 0.08);
border-left: 1px solid #e8e8e8;
z-index: 100;
overflow-y: auto;
}
.right-tabs {
height: 100%;
}
.right-tabs :deep(.el-tabs__header) {
margin: 0;
padding: 16px 16px 0 16px;
border-bottom: 1px solid #e8e8e8;
}
.right-tabs :deep(.el-tabs__content) {
padding: 16px;
height: calc(100% - 60px);
overflow-y: auto;
}
.info-content {
margin-bottom: 20px;
}
.info-item {
display: flex;
justify-content: space-between;
padding: 12px 0;
border-bottom: 1px solid #f0f0f0;
}
.info-item:last-child {
border-bottom: none;
}
.info-label {
font-size: 14px;
color: #666;
font-weight: 500;
}
.info-value {
font-size: 14px;
color: #333;
}
.info-value.priority {
display: inline-block;
width: 24px;
height: 24px;
line-height: 24px;
text-align: center;
background: #1890FF;
color: #fff;
border-radius: 50%;
font-weight: bold;
}
.sub-tabs {
margin-top: 20px;
}
.sub-tabs :deep(.el-tabs__header) {
margin: 0;
border-bottom: 1px solid #e8e8e8;
}
.sub-tabs :deep(.el-tabs__content) {
padding: 16px 0;
}
.empty-content {
text-align: center;
color: #999;
padding: 40px 0;
font-size: 14px;
}
.requirement-content {
padding: 16px 0;
}
.requirement-text {
font-size: 14px;
line-height: 1.8;
color: #333;
}
.requirement-text p {
margin: 0 0 12px 0;
} }
.header { .header {