需求56 检查项目设置-》检查类型维护;界面代码被误修,回滚提交
This commit is contained in:
@@ -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 {
|
||||||
|
|||||||
Reference in New Issue
Block a user