410 lines
13 KiB
Markdown
410 lines
13 KiB
Markdown
# 手术申请业务逻辑修正指南
|
||
|
||
## Mermaid 流程图分析
|
||
|
||
### 预期业务流程
|
||
|
||
根据提供的 Mermaid 流程图，手术申请单的业务逻辑应包含以下关键点：
|
||
|
||
#### 顶部操作栏
|
||
1. **新增按钮** → 显示表单弹窗
|
||
2. **刷新按钮** → 重新加载列表
|
||
3. **表单提交** → 校验 → 生成手术单号 → 插入主表 → 生成医嘱 → 关联收费项目 → 表格新增数据（状态：新开）
|
||
|
||
#### 手术申请记录表格
|
||
1. **查看** → 显示只读详情弹窗
|
||
2. **编辑** → 检查状态
|
||
- 状态=新开 → 显示可编辑表单
|
||
- 状态≠新开 → 提示不可编辑
|
||
3. **删除** → 检查状态
|
||
- 状态=新开 → 显示确认对话框 → 删除记录
|
||
- 状态=已安排 → 显示确认对话框 → 状态=已取消
|
||
- 状态≠新开/已安排 → 提示不可取消
|
||
4. **数据加载失败** → 显示"数据加载失败"提示
|
||
|
||
## 当前实现分析
|
||
|
||
### 当前手术状态定义
|
||
```javascript
|
||
const surgeryStatusOptions = ref([
|
||
{ value: 0, label: '待排期' }, // 对应流程图中的"新开"
|
||
{ value: 1, label: '已排期' }, // 对应流程图中的"已安排"
|
||
{ value: 2, label: '手术中' },
|
||
{ value: 3, label: '已完成' },
|
||
{ value: 4, label: '已取消' },
|
||
{ value: 5, label: '暂停' }
|
||
])
|
||
```
|
||
|
||
### 当前操作按钮逻辑
|
||
```javascript
|
||
<el-button link type="primary" @click="handleEdit(scope.row)" v-if="scope.row.statusEnum === 0 || scope.row.statusEnum === 1">编辑</el-button>
|
||
<el-button link type="primary" @click="handleStart(scope.row)" v-if="scope.row.statusEnum === 1">开始</el-button>
|
||
<el-button link type="primary" @click="handleComplete(scope.row)" v-if="scope.row.statusEnum === 2">完成</el-button>
|
||
<el-button link type="danger" @click="handleDelete(scope.row)" v-if="scope.row.statusEnum === 0 || scope.row.statusEnum === 1">删除</el-button>
|
||
```
|
||
|
||
## 发现的问题
|
||
|
||
### 问题1: 编辑按钮状态判断错误
|
||
**当前逻辑**: 状态为 0 或 1 时显示编辑按钮
|
||
**预期逻辑**: 只有状态为 0（新开/待排期）时才允许编辑
|
||
|
||
### 问题2: 删除操作过于简单
|
||
**当前逻辑**: 状态为 0 或 1 时直接删除
|
||
**预期逻辑**:
|
||
- 状态=0（新开）: 显示确认对话框 → 删除记录
|
||
- 状态=1（已排期）: 显示确认对话框 → 更新状态为 4（已取消）→ 表格行样式变灰
|
||
- 状态≠0/1: 提示不可取消
|
||
|
||
### 问题3: 缺少状态变更后的视觉反馈
|
||
**当前逻辑**: 状态变更后无特殊样式
|
||
**预期逻辑**: 状态=已取消时，表格行样式变灰
|
||
|
||
### 问题4: 缺少数据加载失败的处理
|
||
**当前逻辑**: 有错误提示，但不够明确
|
||
**预期逻辑**: 显示"数据加载失败"提示
|
||
|
||
### 问题5: 表单校验失败提示不明确
|
||
**当前逻辑**: 使用 toast 提示
|
||
**预期逻辑**: 显示红色 toast 提示
|
||
|
||
## 修正方案
|
||
|
||
### 1. 修改编辑按钮逻辑
|
||
```javascript
|
||
// 原代码
|
||
<el-button link type="primary" @click="handleEdit(scope.row)" v-if="scope.row.statusEnum === 0 || scope.row.statusEnum === 1">编辑</el-button>
|
||
|
||
// 修正后
|
||
<el-button link type="primary" @click="handleEdit(scope.row)" v-if="scope.row.statusEnum === 0">编辑</el-button>
|
||
```
|
||
|
||
### 2. 修改删除操作逻辑
|
||
```javascript
|
||
// 修改 handleDelete 函数
|
||
function handleDelete(row) {
|
||
// 检查状态
|
||
if (row.statusEnum === 0) {
|
||
// 新开状态 - 直接删除
|
||
proxy.$modal.confirm('是否确认删除手术"' + row.surgeryName + '"?').then(() => {
|
||
return deleteSurgery(row.id)
|
||
}).then(() => {
|
||
getPageList()
|
||
proxy.$modal.msgSuccess('删除成功')
|
||
}).catch(error => {
|
||
console.error('删除手术失败:', error)
|
||
proxy.$modal.msgError('删除失败')
|
||
})
|
||
} else if (row.statusEnum === 1) {
|
||
// 已安排状态 - 更新为已取消
|
||
proxy.$modal.confirm('是否确认取消手术"' + row.surgeryName + '"?').then(() => {
|
||
return updateSurgeryStatus(row.id, 4) // 4 = 已取消
|
||
}).then(() => {
|
||
getPageList()
|
||
proxy.$modal.msgSuccess('手术已取消')
|
||
}).catch(error => {
|
||
console.error('取消手术失败:', error)
|
||
proxy.$modal.msgError('取消失败')
|
||
})
|
||
} else {
|
||
// 其他状态 - 不允许操作
|
||
proxy.$modal.msgWarning('当前状态不允许取消手术')
|
||
}
|
||
}
|
||
```
|
||
|
||
### 3. 添加已取消状态的行样式
|
||
```javascript
|
||
// 在表格中添加 row-class-name 属性
|
||
<el-table
|
||
v-loading="loading"
|
||
:data="surgeryList"
|
||
row-key="id"
|
||
:row-class-name="getRowClassName"
|
||
>
|
||
|
||
// 添加函数判断行样式
|
||
function getRowClassName({ row }) {
|
||
return row.statusEnum === 4 ? 'cancelled-row' : ''
|
||
}
|
||
|
||
// 添加样式
|
||
<style scoped>
|
||
.cancelled-row {
|
||
color: #999;
|
||
background-color: #f5f5f5;
|
||
text-decoration: line-through;
|
||
}
|
||
</style>
|
||
```
|
||
|
||
### 4. 改进表单提交校验提示
|
||
```javascript
|
||
function submitForm() {
|
||
proxy.$refs['surgeryRef'].validate((valid) => {
|
||
if (valid) {
|
||
// 表单校验通过
|
||
if (form.value.id == undefined) {
|
||
addSurgery(form.value).then((res) => {
|
||
proxy.$modal.msgSuccess('新增成功')
|
||
open.value = false
|
||
getPageList()
|
||
}).catch(error => {
|
||
console.error('新增手术失败:', error)
|
||
// 显示红色 toast 提示
|
||
proxy.$message.error('新增手术失败，请检查表单信息')
|
||
})
|
||
} else {
|
||
updateSurgery(form.value).then((res) => {
|
||
proxy.$modal.msgSuccess('修改成功')
|
||
open.value = false
|
||
getPageList()
|
||
}).catch(error => {
|
||
console.error('更新手术失败:', error)
|
||
// 显示红色 toast 提示
|
||
proxy.$message.error('更新手术失败，请检查表单信息')
|
||
})
|
||
}
|
||
} else {
|
||
// 表单校验失败 - 显示红色 toast 提示
|
||
proxy.$message.error('请检查表单信息，标红字段为必填项')
|
||
}
|
||
})
|
||
}
|
||
```
|
||
|
||
### 5. 改进编辑操作的状态检查
|
||
```javascript
|
||
function handleEdit(row) {
|
||
// 检查状态
|
||
if (row.statusEnum !== 0) {
|
||
proxy.$modal.msgWarning('当前状态不允许编辑手术')
|
||
return
|
||
}
|
||
|
||
title.value = '编辑手术'
|
||
open.value = true
|
||
getSurgeryDetail(row.id).then(res => {
|
||
if (res.code === 200) {
|
||
Object.assign(form.value, res.data)
|
||
}
|
||
}).catch(error => {
|
||
console.error('获取手术信息失败:', error)
|
||
proxy.$modal.msgError('获取手术信息失败')
|
||
})
|
||
}
|
||
```
|
||
|
||
### 6. 改进数据加载失败的处理
|
||
```javascript
|
||
function getList() {
|
||
loading.value = true
|
||
const params = { ...queryParams.value }
|
||
// 处理时间范围
|
||
if (params.plannedTime && params.plannedTime.length === 2) {
|
||
params.plannedTimeStart = params.plannedTime[0]
|
||
params.plannedTimeEnd = params.plannedTime[1]
|
||
delete params.plannedTime
|
||
}
|
||
getSurgeryPage(params).then((res) => {
|
||
surgeryList.value = res.data.records
|
||
total.value = res.data.total
|
||
}).catch(error => {
|
||
console.error('获取手术列表失败:', error)
|
||
// 改进错误提示
|
||
proxy.$message.error('数据加载失败，请稍后重试')
|
||
surgeryList.value = []
|
||
total.value = 0
|
||
}).finally(() => {
|
||
loading.value = false
|
||
})
|
||
}
|
||
```
|
||
|
||
## 完整的修正代码
|
||
|
||
以下是完整的修正方案，需要应用到 `surgerymanage/index.vue`：
|
||
|
||
```vue
|
||
<template>
|
||
<div class="app-container">
|
||
<!-- 查询表单（保持不变）-->
|
||
<el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" class="query-form">
|
||
<!-- ... 原有代码 ... -->
|
||
</el-form>
|
||
|
||
<el-row :gutter="10" class="mb8">
|
||
<el-col :span="1.5">
|
||
<el-button type="primary" plain icon="Plus" @click="handleAdd"> 新增手术 </el-button>
|
||
</el-col>
|
||
<el-col :span="1.5">
|
||
<el-button type="" plain icon="Refresh" @click="handleRefresh">刷新</el-button>
|
||
</el-col>
|
||
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
|
||
</el-row>
|
||
|
||
<!-- 添加 row-class-name 属性 -->
|
||
<el-table
|
||
v-loading="loading"
|
||
:data="surgeryList"
|
||
row-key="id"
|
||
:row-class-name="getRowClassName"
|
||
>
|
||
<el-table-column label="手术编号" align="center" prop="surgeryNo" width="150" />
|
||
<!-- ... 其他列保持不变 ... -->
|
||
|
||
<!-- 修改操作列 -->
|
||
<el-table-column label="操作" align="center" width="200" fixed="right">
|
||
<template #default="scope">
|
||
<el-button link type="primary" @click="handleView(scope.row)">查看</el-button>
|
||
<!-- 修改：只允许状态=0时编辑 -->
|
||
<el-button link type="primary" @click="handleEdit(scope.row)" v-if="scope.row.statusEnum === 0">编辑</el-button>
|
||
<el-button link type="primary" @click="handleStart(scope.row)" v-if="scope.row.statusEnum === 1">开始</el-button>
|
||
<el-button link type="primary" @click="handleComplete(scope.row)" v-if="scope.row.statusEnum === 2">完成</el-button>
|
||
<!-- 修改：允许状态=0或1时删除（逻辑在函数中处理） -->
|
||
<el-button link type="danger" @click="handleDelete(scope.row)" v-if="scope.row.statusEnum === 0 || scope.row.statusEnum === 1">删除</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
|
||
<!-- 分页（保持不变）-->
|
||
<!-- 对话框（保持不变）-->
|
||
</div>
|
||
</template>
|
||
|
||
<script setup name="SurgeryManage">
|
||
// ... 原有导入 ...
|
||
|
||
// 添加样式函数
|
||
function getRowClassName({ row }) {
|
||
return row.statusEnum === 4 ? 'cancelled-row' : ''
|
||
}
|
||
|
||
// 修改 handleEdit 函数
|
||
function handleEdit(row) {
|
||
// 检查状态
|
||
if (row.statusEnum !== 0) {
|
||
proxy.$modal.msgWarning('当前状态不允许编辑手术，仅新开状态可编辑')
|
||
return
|
||
}
|
||
|
||
title.value = '编辑手术'
|
||
open.value = true
|
||
getSurgeryDetail(row.id).then(res => {
|
||
if (res.code === 200) {
|
||
Object.assign(form.value, res.data)
|
||
}
|
||
}).catch(error => {
|
||
console.error('获取手术信息失败:', error)
|
||
proxy.$modal.msgError('获取手术信息失败')
|
||
})
|
||
}
|
||
|
||
// 修改 handleDelete 函数
|
||
function handleDelete(row) {
|
||
// 检查状态
|
||
if (row.statusEnum === 0) {
|
||
// 新开状态 - 直接删除
|
||
proxy.$modal.confirm('是否确认删除手术"' + row.surgeryName + '"?').then(() => {
|
||
return deleteSurgery(row.id)
|
||
}).then(() => {
|
||
getPageList()
|
||
proxy.$modal.msgSuccess('删除成功')
|
||
}).catch(error => {
|
||
console.error('删除手术失败:', error)
|
||
proxy.$modal.msgError('删除失败')
|
||
})
|
||
} else if (row.statusEnum === 1) {
|
||
// 已安排状态 - 更新为已取消
|
||
proxy.$modal.confirm('是否确认取消手术"' + row.surgeryName + '"?').then(() => {
|
||
return updateSurgeryStatus(row.id, 4) // 4 = 已取消
|
||
}).then(() => {
|
||
getPageList()
|
||
proxy.$modal.msgSuccess('手术已取消')
|
||
}).catch(error => {
|
||
console.error('取消手术失败:', error)
|
||
proxy.$modal.msgError('取消失败')
|
||
})
|
||
} else {
|
||
// 其他状态 - 不允许操作
|
||
proxy.$modal.msgWarning('当前状态不允许取消手术')
|
||
}
|
||
}
|
||
|
||
// 修改 submitForm 函数
|
||
function submitForm() {
|
||
proxy.$refs['surgeryRef'].validate((valid) => {
|
||
if (valid) {
|
||
if (form.value.id == undefined) {
|
||
addSurgery(form.value).then((res) => {
|
||
proxy.$modal.msgSuccess('新增成功')
|
||
open.value = false
|
||
getPageList()
|
||
}).catch(error => {
|
||
console.error('新增手术失败:', error)
|
||
// 显示红色 toast 提示
|
||
proxy.$message.error('新增手术失败，请检查表单信息')
|
||
})
|
||
} else {
|
||
updateSurgery(form.value).then((res) => {
|
||
proxy.$modal.msgSuccess('修改成功')
|
||
open.value = false
|
||
getPageList()
|
||
}).catch(error => {
|
||
console.error('更新手术失败:', error)
|
||
// 显示红色 toast 提示
|
||
proxy.$message.error('更新手术失败，请检查表单信息')
|
||
})
|
||
}
|
||
} else {
|
||
// 表单校验失败 - 显示红色 toast 提示
|
||
proxy.$message.error('请检查表单信息，标红字段为必填项')
|
||
}
|
||
})
|
||
}
|
||
|
||
// 添加刷新函数
|
||
function handleRefresh() {
|
||
getPageList()
|
||
proxy.$modal.msgSuccess('刷新成功')
|
||
}
|
||
|
||
// ... 其他函数保持不变 ...
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* 添加已取消状态的行样式 */
|
||
.cancelled-row {
|
||
color: #999;
|
||
background-color: #f5f5f5;
|
||
text-decoration: line-through;
|
||
}
|
||
|
||
/* 原有样式保持不变 */
|
||
</style>
|
||
```
|
||
|
||
## 总结
|
||
|
||
### 主要修正点
|
||
|
||
1. **编辑按钮**: 只允许状态=0（新开）时显示
|
||
2. **删除操作**:
|
||
- 状态=0: 直接删除
|
||
- 状态=1: 更新为已取消
|
||
- 状态≠0/1: 提示不可取消
|
||
3. **视觉反馈**: 已取消状态的行显示灰色并划线
|
||
4. **错误提示**: 使用红色 toast 提示表单校验失败
|
||
5. **数据加载**: 改进失败提示文案
|
||
|
||
### 状态映射
|
||
|
||
| 流程图状态 | 当前状态值 | 状态说明 |
|
||
|-----------|----------|---------|
|
||
| 新开 | 0 | 待排期，可编辑、可删除 |
|
||
| 已安排 | 1 | 已排期，不可编辑，可开始、可取消 |
|
||
| 手术中 | 2 | 手术进行中，可完成 |
|
||
| 已完成 | 3 | 手术完成 |
|
||
| 已取消 | 4 | 手术已取消，行样式变灰 |
|