新建检验项目设置的检验类型页面
This commit is contained in:
叶锦涛
478
openhis-ui-vue3/src/views/maintainSystem/Inspection/index.vue
Normal file
478
openhis-ui-vue3/src/views/maintainSystem/Inspection/index.vue
Normal 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>
|
||||||
Reference in New Issue
Block a user