# 手术管理页面代码修正方案
根据详细设计文档，以下是手术管理页面的完整修正方案。
## 一、表格列定义修正
### 修改前：
```vue
{{ scope.row.statusEnum_dictText }}
查看
编辑
开始
完成
删除
```
### 修改后：
```vue
{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}
查看
编辑
删除
```
## 二、操作按钮逻辑修正
### 修改 handleEdit 函数：
```javascript
function handleEdit(row) {
// 检查状态：只有状态为新开（0）时才允许编辑
if (row.statusEnum !== 0) {
proxy.$modal.msgWarning('当前状态不允许编辑手术，仅新开状态可编辑')
return
}
title.value = '编辑手术'
open.value = true
// 设置为编辑模式
isEditMode.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 函数：
```javascript
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('当前状态不允许取消手术')
}
}
```
### 添加 getRowClassName 函数：
```javascript
// 获取表格行样式
function getRowClassName({ row }) {
return row.statusEnum === 4 ? 'cancelled-row' : ''
}
```
### 修改 submitForm 函数：
```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('请检查表单信息，标红字段为必填项')
}
})
}
```
### 修改 handleRefresh 函数：
```javascript
function handleRefresh() {
getPageList()
proxy.$modal.msgSuccess('刷新成功')
}
```
### 移除不需要的函数：
```javascript
// 删除这些函数（在新设计中不需要）：
// - handleStart()
// - handleComplete()
```
## 三、表单字段调整（根据设计文档）
### 根据设计文档，表单应该包含：
#### 1. 患者基本信息区：
```vue
患者基本信息
```
#### 2. 手术信息区：
```vue
手术信息
```
#### 3. 医疗信息区：
```vue
医疗信息
```
#### 4. 人员信息区：
```vue
人员信息
```
#### 5. 其他信息区：
```vue
其他信息
```
#### 6. 操作按钮区：
```vue
取消
提交申请
添加次要手术
```
## 四、样式添加
```vue
```
## 五、添加辅助函数
```javascript
// 获取状态 badge 类型
function getStatusBadgeType(status) {
const typeMap = {
0: 'info', // 新开
1: 'warning', // 已安排
2: 'primary', // 手术中
3: 'success', // 已完成
4: 'danger', // 已取消
5: 'info' // 暂停
}
return typeMap[status] || 'info'
}
// 添加次要手术
function addAppendSurgery() {
// 打开次要手术选择弹窗
proxy.$modal.msgInfo('请选择次要手术')
// TODO: 实现次要手术选择逻辑
}
// 生成手术单号
function generateSurgeryNo() {
const now = new Date()
const year = now.getFullYear()
const month = String(now.getMonth() + 1).padStart(2, '0')
const day = String(now.getDate()).padStart(2, '0')
const random = String(Math.floor(Math.random() * 10000)).padStart(4, '0')
return `OP${year}${month}${day}${random}`
}
```
## 六、完整修正步骤总结
### 步骤1：修改表格结构
1. 调整表格列顺序和内容
2. 添加 `row-class-name` 属性
3. 修改操作列的条件判断
### 步骤2：修改 JavaScript 函数
1. 修改 `handleEdit()` - 添加状态检查
2. 修改 `handleDelete()` - 区分删除和取消
3. 修改 `submitForm()` - 改进错误提示
4. 添加 `getRowClassName()` - 行样式判断
5. 修改 `handleRefresh()` - 添加成功提示
6. 移除 `handleStart()` 和 `handleComplete()` - 新设计不需要
### 步骤3：修改表单结构
1. 调整表单分组（添加 divider）
2. 添加患者基本信息区（大部分字段禁用）
3. 添加手术信息区
4. 添加医疗信息区
5. 添加人员信息区
6. 添加其他信息区
7. 修改操作按钮（添加次要手术按钮）
### 步骤4：添加样式
1. 顶部操作栏样式
2. 表格样式
3. 已取消状态行样式
4. 对话框样式
### 步骤5：添加辅助函数
1. `getStatusBadgeType()` - 状态 badge 类型
2. `addAppendSurgery()` - 添加次要手术
3. `generateSurgeryNo()` - 生成手术单号
## 七、后端接口需求
根据设计文档，提交手术申请时需要：
1. **插入 outp_surgery_apply（门诊手术申请主表）**
2. **通过系统自动插入一条手术申请医嘱**
3. **关联收费项目明细，系统自动插入预收费明细表**
### 后端修改建议：
需要在后端实现一个事务性的接口：
```java
@Transactional
public R submitSurgeryApply(SurgeryApplyDto dto) {
// 1. 插入门诊手术申请主表
// 2. 自动生成手术单号：OP+年月日+4位随机数
// 3. 自动插入手术申请医嘱
// 4. 关联收费项目明细
// 5. 插入预收费明细表
return R.ok();
}
```
## 八、测试要点
1. **新增手术申请**
- 检查手术单号是否自动生成
- 检查患者信息是否自动填充
- 检查医生信息是否自动获取
2. **编辑手术申请**
- 只允许新开状态编辑
- 其他状态应提示不可编辑
3. **删除/取消手术申请**
- 新开状态应直接删除
- 已安排状态应更新为已取消
- 取消后行样式应变灰
4. **查看手术详情**
- 显示所有字段
- 提交按钮变为关闭
5. **错误处理**
- 表单校验失败显示红色 toast
- 数据加载失败显示"数据加载失败"