医生常用语模板维护->后端接口优化,页面开发;检查方法,部位新增编辑按钮。
This commit is contained in:
@@ -0,0 +1,96 @@
|
||||
<template>
|
||||
<div class="doctor-phrase-container">
|
||||
<!-- 搜索栏 -->
|
||||
<div class="search-bar">
|
||||
<el-select v-model="searchScope" placeholder="范围" style="width: 120px;">
|
||||
<el-option label="个人" value="个人"></el-option>
|
||||
<el-option label="科室" value="科室"></el-option>
|
||||
<el-option label="全院" value="全院"></el-option>
|
||||
</el-select>
|
||||
<el-input
|
||||
v-model="searchKeyword"
|
||||
placeholder="请输入名称"
|
||||
style="width: 240px; margin-left: 10px;"
|
||||
></el-input>
|
||||
<el-button style="margin-left: 10px;"><el-icon><Search /></el-icon> 查询</el-button>
|
||||
<el-button type="primary" style="margin-left: 10px;"><el-icon><Plus /></el-icon> 增加</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 表格 -->
|
||||
<el-table :data="tableData" style="width: 100%; margin-top: 20px;">
|
||||
<el-table-column prop="serialNo" label="排序号" width="200"></el-table-column>
|
||||
<el-table-column prop="name" label="名称" width="250"></el-table-column>
|
||||
<el-table-column prop="content" label="内容"></el-table-column>
|
||||
<el-table-column prop="scope" label="范围" width="250"></el-table-column>
|
||||
<el-table-column prop="businessType" label="业务分类" width="200"></el-table-column>
|
||||
<el-table-column label="操作" width="200" fixed="right">
|
||||
<template #default="scope">
|
||||
<el-button type="primary" size="small">编辑</el-button>
|
||||
<el-button type="danger" size="small" style="margin-left: 5px;">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div class="pagination-container">
|
||||
<el-pagination
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="currentPage"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:page-size="pageSize"
|
||||
layout="total, prev, pager, next, jumper, sizes"
|
||||
:total="total"
|
||||
></el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { Search, Plus } from '@element-plus/icons-vue'
|
||||
|
||||
// 搜索条件
|
||||
const searchScope = ref('个人')
|
||||
const searchKeyword = ref('')
|
||||
|
||||
// 表格数据
|
||||
const tableData = ref([
|
||||
{ serialNo: 1, name: '主诉', content: '阵发性腹痛2小时', scope: '个人', businessType: '主诉' },
|
||||
{ serialNo: 2, name: '主诉', content: '反复咳嗽、咳痰3年,加重1周', scope: '个人', businessType: '主诉' },
|
||||
{ serialNo: 3, name: '主诉', content: '发现血糖升高1月', scope: '个人', businessType: '现病史' },
|
||||
{ serialNo: 4, name: '主诉', content: '右侧肢体无力4小时', scope: '个人', businessType: '术后' },
|
||||
{ serialNo: 5, name: '主诉', content: '外伤致右踝疼痛30分钟', scope: '个人', businessType: '术前' }
|
||||
])
|
||||
|
||||
// 分页
|
||||
const currentPage = ref(1)
|
||||
const pageSize = ref(10)
|
||||
const total = ref(5)
|
||||
|
||||
const handleSizeChange = (val) => {
|
||||
pageSize.value = val
|
||||
}
|
||||
|
||||
const handleCurrentChange = (val) => {
|
||||
currentPage.value = val
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.doctor-phrase-container {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.pagination-container {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
</style>
|
||||
@@ -328,15 +328,18 @@
|
||||
</template>
|
||||
</td>
|
||||
<td class="actions">
|
||||
<template v-if="item.actions">
|
||||
<template v-if="item.editing">
|
||||
<button class="btn btn-confirm" @click.stop="handleConfirm(index)">
|
||||
✓
|
||||
</button>
|
||||
<button class="btn btn-delete" @click.stop="handleDelete(index)">
|
||||
🗑
|
||||
<button class="btn btn-cancel" @click.stop="handleCancelEdit(index)">
|
||||
✕
|
||||
</button>
|
||||
</template>
|
||||
<template v-else>
|
||||
<button class="btn btn-edit" @click.stop="handleEdit(index)">
|
||||
✏️
|
||||
</button>
|
||||
<button class="btn btn-confirm" @click.stop="handleConfirm(index)">
|
||||
✓
|
||||
</button>
|
||||
@@ -511,15 +514,18 @@
|
||||
</template>
|
||||
</td>
|
||||
<td class="actions">
|
||||
<template v-if="item.actions">
|
||||
<template v-if="item.editing">
|
||||
<button class="btn btn-confirm" @click.stop="handleConfirm(index)">
|
||||
✓
|
||||
</button>
|
||||
<button class="btn btn-delete" @click.stop="handleDelete(index)">
|
||||
🗑
|
||||
<button class="btn btn-cancel" @click.stop="handleCancelEdit(index)">
|
||||
✕
|
||||
</button>
|
||||
</template>
|
||||
<template v-else>
|
||||
<button class="btn btn-edit" @click.stop="handleEdit(index)">
|
||||
✏️
|
||||
</button>
|
||||
<button class="btn btn-confirm" @click.stop="handleConfirm(index)">
|
||||
✓
|
||||
</button>
|
||||
@@ -936,6 +942,12 @@ function handleEdit(index) {
|
||||
item.editing = true;
|
||||
}
|
||||
|
||||
// 处理取消编辑按钮点击
|
||||
function handleCancelEdit(index) {
|
||||
const item = tableData.value[index];
|
||||
item.editing = false;
|
||||
}
|
||||
|
||||
// 处理确认按钮点击
|
||||
async function handleConfirm(index) {
|
||||
const item = tableData.value[index];
|
||||
|
||||
Reference in New Issue
Block a user