# 手术申请业务逻辑修正指南

## 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 | 手术已取消，行样式变灰 |