96 lines
3.2 KiB
Vue
96 lines
3.2 KiB
Vue
<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> |