his/sql/迁移记录-DB变更记录/手术申请业务逻辑修正指南.md

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

Mermaid 流程图分析

预期业务流程

根据提供的 Mermaid 流程图，手术申请单的业务逻辑应包含以下关键点：

顶部操作栏

1. 新增按钮 → 显示表单弹窗
2. 刷新按钮 → 重新加载列表
3. 表单提交 → 校验 → 生成手术单号 → 插入主表 → 生成医嘱 → 关联收费项目 → 表格新增数据（状态：新开）

手术申请记录表格

1. 查看 → 显示只读详情弹窗
2. 编辑 → 检查状态
   • 状态=新开 → 显示可编辑表单
   • 状态≠新开 → 提示不可编辑
3. 删除 → 检查状态
   • 状态=新开 → 显示确认对话框 → 删除记录
   • 状态=已安排 → 显示确认对话框 → 状态=已取消
   • 状态≠新开/已安排 → 提示不可取消
4. 数据加载失败 → 显示"数据加载失败"提示

当前实现分析

当前手术状态定义

const surgeryStatusOptions = ref([
  { value: 0, label: '待排期' },  // 对应流程图中的"新开"
  { value: 1, label: '已排期' },  // 对应流程图中的"已安排"
  { value: 2, label: '手术中' },
  { value: 3, label: '已完成' },
  { value: 4, label: '已取消' },
  { value: 5, label: '暂停' }
])

当前操作按钮逻辑

<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. 修改编辑按钮逻辑

// 原代码
<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. 修改删除操作逻辑

// 修改 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. 添加已取消状态的行样式

// 在表格中添加 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. 改进表单提交校验提示

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. 改进编辑操作的状态检查

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. 改进数据加载失败的处理

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：

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