Yajentine/his
2
2
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

新建检验项目设置的检验类型页面

Browse Source
This commit is contained in:
叶锦涛
2025-11-28 13:56:27 +08:00
parent 263e21e157
commit 548fabcffe
1 changed files with 478 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

478
openhis-ui-vue3/src/views/maintainSystem/Inspection/index.vue Normal file
View File

@@ -0,0 +1,478 @@
<template>
<div class="inspection-container">
<!-- 左侧导航 -->
<div class="side-nav">
<div
v-for="(navItem, index) in navItems"
:key="index"
class="nav-item"
:class="{ active: activeNav === index }"
@click="activeNav = index"
>
{{ navItem }}
</div>
</div>
<!-- 右侧主内容 -->
<div class="main-content">
<div class="header-actions">
<button class="add-new-btn" @click="addNewRow">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="12" y1="5" x2="12" y2="19"></line>
<line x1="5" y1="12" x2="19" y2="12"></line>
</svg>
新增
</button>
</div>
<div class="table-container">
<table class="data-table">
<thead>
<tr>
<th>行</th>
<th>*大类编码</th>
<th>*大类项目名称</th>
<th>*执行科室</th>
<th>序号</th>
<th>备注</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr
v-for="(row, index) in tableData"
:key="row.id"
:class="{ 'editing': editingRowId === row.id }"
>
<td>{{ index + 1 }}</td>
<td>
<template v-if="editingRowId === row.id">
<input v-model="row.code" type="text" :style="inputStyle">
</template>
<template v-else>
{{ row.code }}
</template>
</td>
<td>
<template v-if="editingRowId === row.id">
<input v-model="row.name" type="text" :style="inputStyle">
</template>
<template v-else>
{{ row.name }}
</template>
</td>
<td>
<template v-if="editingRowId === row.id">
<select v-model="row.department" :style="inputStyle">
<option
v-for="dept in departments"
:key="dept"
:value="dept"
>
{{ dept }}
</option>
</select>
</template>
<template v-else>
{{ row.department }}
</template>
</td>
<td>
<template v-if="editingRowId === row.id">
<input v-model="row.order" type="text" :style="inputStyle">
</template>
<template v-else>
{{ row.order }}
</template>
</td>
<td>
<template v-if="editingRowId === row.id">
<input v-model="row.remark" type="text" :style="inputStyle">
</template>
<template v-else>
{{ row.remark }}
</template>
</td>
<td class="action-cell">
<div
class="action-btn confirm-btn"
@click="handleConfirm(row)"
>
<svg v-if="editingRowId === row.id" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="20 6 9 17 4 12"></polyline>
</svg>
<span v-else>✓</span>
</div>
<div
v-if="editingRowId !== row.id"
class="action-btn edit-btn"
@click="handleEdit(row)"
>
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
<path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
</svg>
</div>
<div
v-if="editingRowId !== row.id"
class="action-btn add-btn"
@click="handleAdd(row, index)"
>
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="12" y1="5" x2="12" y2="19"></line>
<line x1="5" y1="12" x2="19" y2="12"></line>
</svg>
</div>
<div
class="action-btn delete-btn"
@click="handleDelete(row.id)"
>
<svg v-if="editingRowId === row.id" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line>
</svg>
<span v-else>×</span>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<!-- 页码区域 -->
<div class="pagination">
<div class="page-btn">上一页</div>
<div class="page-btn active">1</div>
<div class="page-btn">2</div>
<div class="page-btn">3</div>
<div class="page-btn">下一页</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'InspectionManagement',
data() {
return {
navItems: ['检验类型', '检验项目', '套餐设置'],
activeNav: 0,
editingRowId: null,
nextId: 11,
departments: ['医学检验科', '病理科', '放射科', '超声科', '心电图室'],
inputStyle: {
width: '100%',
border: '1px solid #E8E8E8',
borderRadius: '4px',
padding: '4px'
},
tableData: [
{ id: 1, code: '10', name: '临检（镜检）', department: '医学检验科', order: '999999', remark: '' },
{ id: 2, code: '08', name: '临检（尿液）', department: '医学检验科', order: '999999', remark: '' },
{ id: 3, code: '06', name: '免疫组化', department: '医学检验科', order: '999999', remark: '' },
{ id: 4, code: '04', name: '免疫', department: '医学检验科', order: '999999', remark: '' },
{ id: 5, code: '02', name: '常规', department: '医学检验科', order: '999999', remark: '' },
{ id: 6, code: '09', name: '病理', department: '医学检验科', order: '999999', remark: '' },
{ id: 7, code: '07', name: '临检（血液）', department: '医学检验科', order: '999999', remark: '' },
{ id: 8, code: '05', name: '外送', department: '医学检验科', order: '999999', remark: '' },
{ id: 9, code: '03', name: '妇科', department: '医学检验科', order: '999999', remark: '' },
{ id: 10, code: '01', name: '生化', department: '医学检验科', order: '999999', remark: '' }
]
}
},
methods: {
addNewRow() {
const newRow = {
id: this.nextId++,
code: '',
name: '',
department: this.departments[0],
order: '',
remark: ''
}
this.tableData.push(newRow)
this.editingRowId = newRow.id
},
handleEdit(row) {
this.editingRowId = row.id
},
handleConfirm(row) {
this.editingRowId = null
},
handleDelete(rowId) {
this.tableData = this.tableData.filter(row => row.id !== rowId)
},
handleAdd(row, index) {
const newRow = {
id: this.nextId++,
code: '',
name: '',
department: this.departments[0],
order: '',
remark: ''
}
this.tableData.splice(index + 1, 0, newRow)
this.editingRowId = newRow.id
}
}
}
</script>
<style scoped>
/* 新增按钮样式 */
.header-actions {
display: flex;
justify-content: flex-end;
margin-bottom: 16px;
}
.add-new-btn {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
background-color: rgba(24, 144, 255, 0.1);
color: #1890FF;
border: 1px solid rgba(24, 144, 255, 0.3);
border-radius: 4px;
font-size: 14px;
cursor: pointer;
transition: all 0.2s ease;
}
.add-new-btn:hover {
background-color: rgba(24, 144, 255, 0.2);
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(24, 144, 255, 0.1);
}
/* 编辑按钮样式 */
.edit-btn {
background: rgba(250, 173, 20, 0.1);
color: #FAAD14;
}
/* 编辑状态输入框样式 */
.data-table input {
width: 100%;
border: 1px solid #E8E8E8;
border-radius: 4px;
padding: 4px 8px;
font-size: 14px;
color: #333;
background-color: #fff;
transition: all 0.2s ease;
}
.data-table input:focus {
outline: none;
border-color: #1890FF;
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}
/* CSS Reset 和全局样式 */
.inspection-container {
display: flex;
min-height: 100vh;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
background-color: #FFFFFF;
color: #000000;
line-height: 1.5;
}
/* 左侧导航菜单 */
.side-nav {
width: 160px;
background: #FFFFFF;
border-right: 1px solid #e8e8e8;
padding: 16px 0;
height: 100vh;
position: fixed;
z-index: 1;
}
.nav-item {
padding: 8px 16px;
margin: 4px 8px;
font-size: 14px;
height: 40px;
display: flex;
align-items: center;
border-radius: 4px;
cursor: pointer;
transition: all 0.2s ease;
}
.nav-item:hover {
background: #F5F5F5;
}
.nav-item.active {
background: #1890FF;
color: #FFFFFF;
}
/* 右侧主内容区 */
.main-content {
flex: 1;
margin-left: 160px;
padding: 16px;
}
/* 表格样式 */
.table-container {
overflow-x: auto;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
border-radius: 4px;
margin-top: 16px;
}
.data-table {
width: 100%;
border-collapse: collapse;
min-width: 800px;
}
.data-table th, .data-table td {
padding: 8px 16px;
text-align: left;
font-size: 14px;
height: 40px;
}
.data-table th {
background-color: #F5F5F5;
font-weight: 500;
}
.data-table td {
font-weight: 400;
border-bottom: 1px solid #E8E8E8;
}
.data-table tr:hover td {
background-color: #E6F7FF;
}
/* 操作按钮样式 */
.action-cell {
display: flex;
justify-content: center;
align-items: center;
gap: 4px;
}
.action-btn {
width: 24px;
height: 24px;
border-radius: 4px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
margin: 0 2px;
transition: all 0.2s ease;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.confirm-btn {
background: rgba(82, 196, 26, 0.1);
color: #52C41A;
}
.add-btn {
background: rgba(24, 144, 255, 0.1);
color: #1890FF;
}
.delete-btn {
background: rgba(255, 77, 79, 0.1);
color: #FF4D4F;
}
.action-btn:hover {
transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
/* 页码区域 */
.pagination {
display: flex;
justify-content: center;
margin-top: 16px;
align-items: center;
}
.page-btn {
padding: 8px 16px;
margin: 0 4px;
cursor: pointer;
border-radius: 4px;
font-size: 14px;
transition: all 0.2s ease;
}
.page-btn:hover {
background: #F5F5F5;
}
.page-btn.active {
background: #1890FF;
color: white;
}
/* 响应式设计 */
@media (max-width: 768px) {
.side-nav {
width: 60px;
padding: 16px 5px;
}
.nav-item span {
display: none;
}
.main-content {
margin-left: 60px;
}
}
@media (max-width: 480px) {
.side-nav {
width: 50px;
padding: 16px 5px;
}
.main-content {
margin-left: 50px;
padding: 10px;
}
}
/* 执行科室选择样式 */
.department-select {
display: inline-block;
padding: 4px 8px;
border: 1px solid #E8E8E8;
border-radius: 4px;
color: #BFBFBF;
cursor: pointer;
}
.data-table select {
width: 100%;
border: 1px solid #E8E8E8;
border-radius: 4px;
padding: 4px 8px;
font-size: 14px;
color: #333;
background-color: #fff;
transition: all 0.2s ease;
}
.data-table select:focus {
outline: none;
border-color: #1890FF;
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}
</style>