医生常用语管理 - 行内编辑改为弹窗编辑，优化编辑体验。新增编辑弹窗，点击编辑按钮弹窗回显数据，修改更便捷

openhis-ui-vue3/src/views/doctorstation/doctorphrase/index.vue

@@ -23,72 +23,30 @@
     <!-- 表格 -->
     <el-table :data="tableData" style="width: 100%; margin-top: 20px;">
       <el-table-column prop="sortNo" label="排序号" width="200">
-        <template #default="scope">
-          <el-input-number v-if="editingId === scope.row.id" v-model="editForm.sortNo" :min="1" :step="1"
-            style="width: 100%" />
-          <span v-else>{{ scope.row.sortNo }}</span>
-        </template>
       </el-table-column>
       <el-table-column prop="phraseName" label="名称" width="250">
-        <template #default="scope">
-          <el-input v-if="editingId === scope.row.id" v-model="editForm.phraseName" placeholder="请输入名称(不超过50字)"
-            maxlength="50" show-word-limit style="width: 100%" />
-          <span v-else>{{ scope.row.phraseName }}</span>
-        </template>
       </el-table-column>
       <el-table-column prop="phraseContent" label="内容">
-        <template #default="scope">
-          <el-input v-if="editingId === scope.row.id" v-model="editForm.phraseContent" placeholder="请输入内容"
-            type="textarea" :rows="3" style="width: 100%;" />
-          <span v-else>{{ scope.row.phraseContent }}</span>
-        </template>
       </el-table-column>
       <el-table-column label="范围" width="250">
         <template #default="scope">
-          <el-select v-if="editingId === scope.row.id" v-model="editForm.phraseType" placeholder="请选择范围"
+          {{ getScopeName(scope.row.phraseType) }}
-            style="width: 100%">
-            <el-option label="个人" :value="1"></el-option>
-            <el-option label="科室" :value="2"></el-option>
-            <el-option label="全院" :value="3"></el-option>
-          </el-select>
-          <span v-else>{{ getScopeName(scope.row.phraseType) }}</span>
         </template>
       </el-table-column>
-      <!-- 【修改1】业务分类列：删除硬编码的“病愈”选项，统一用枚举 -->
+      <!-- 业务分类列：使用枚举转换中文名称 -->
       <el-table-column label="业务分类" width="200">
         <template #default="scope">
-          <el-select v-if="editingId === scope.row.id" v-model="editForm.phraseCategory" placeholder="请选择业务分类"
+          {{ getBusinessTypeName(scope.row.phraseCategory) }}
-            style="width: 100%">
-            <el-option v-for="item in businessTypeOptions" :key="item.value" :label="item.label"
-              :value="item.value"></el-option>
-          </el-select>
-          <span v-else>{{ getBusinessTypeName(scope.row.phraseCategory) }}</span>
         </template>
       </el-table-column>
       <el-table-column label="操作" width="200" fixed="right">
         <template #default="scope">
-          <!-- 编辑状态 -->
+          <el-button type="primary" size="small" @click="showEditDialog(scope.row)">
-          <template v-if="editingId === scope.row.id">
+            编辑
-            <el-button type="success" size="small" @click="handleSave">
+          </el-button>
-              <el-icon>
+          <el-button type="danger" size="small" style="margin-left: 5px;" @click="handleDelete(scope.row)">
-                <Check />
+            删除
-              </el-icon> 保存
+          </el-button>
-            </el-button>
-            <el-button type="warning" size="small" style="margin-left: 5px;" @click="handleCancel">
-              <el-icon>
-                <Close />
-              </el-icon> 取消
-            </el-button>
-          </template>
-          <!-- 非编辑状态 -->
-          <template v-else>
-            <el-button type="primary" size="small" @click="handleEdit(scope.row)">
-              编辑
-            </el-button>
-            <el-button type="danger" size="small" style="margin-left: 5px;" @click="handleDelete(scope.row)">
-              删除
-            </el-button>
-          </template>
         </template>
       </el-table-column>
     </el-table>
@@ -102,7 +60,6 @@
 
     <!-- 新增模态框 -->
     <el-dialog v-model="addDialogVisible" title="新增医生常用语" width="600px" center>
-      <!-- 【修改2】绑定编辑表单的ref和验证规则 -->
       <el-form ref="addFormRef" :model="addForm" :rules="addRules" label-width="100px" class="add-form">
         <el-form-item label="名称" prop="phraseName">
           <el-input v-model="addForm.phraseName" placeholder="请输入常用语名称(不超过50字)" maxlength="50" show-word-limit
@@ -115,7 +72,6 @@
         <el-form-item label="排序号">
           <el-input-number v-model="addForm.sortNo" :min="1" :step="1" style="width: 100%;"></el-input-number>
         </el-form-item>
-        <!-- 【修改3】新增表单业务分类：删除硬编码“病愈”，用枚举 -->
         <el-form-item label="业务分类" prop="phraseCategory">
           <el-select v-model="addForm.phraseCategory" placeholder="请选择业务分类" style="width: 100%;">
             <el-option v-for="item in businessTypeOptions" :key="item.value" :label="item.label"
@@ -137,6 +93,42 @@
         </span>
       </template>
     </el-dialog>
+
+    <!-- 编辑模态框 -->
+    <el-dialog v-model="editDialogVisible" title="编辑医生常用语" width="600px" center>
+      <el-form ref="editFormRef" :model="editForm" :rules="editRules" label-width="100px" class="add-form">
+        <el-form-item label="名称" prop="phraseName">
+          <el-input v-model="editForm.phraseName" placeholder="请输入常用语名称(不超过50字)" maxlength="50" show-word-limit
+            style="width: 100%;"></el-input>
+        </el-form-item>
+        <el-form-item label="内容" prop="phraseContent">
+          <el-input v-model="editForm.phraseContent" placeholder="请输入常用语内容" type="textarea" :rows="4"
+            style="width: 100%;"></el-input>
+        </el-form-item>
+        <el-form-item label="排序号">
+          <el-input-number v-model="editForm.sortNo" :min="1" :step="1" style="width: 100%;"></el-input-number>
+        </el-form-item>
+        <el-form-item label="业务分类" prop="phraseCategory">
+          <el-select v-model="editForm.phraseCategory" placeholder="请选择业务分类" style="width: 100%;">
+            <el-option v-for="item in businessTypeOptions" :key="item.value" :label="item.label"
+              :value="item.value"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="范围" prop="phraseType">
+          <el-select v-model="editForm.phraseType" placeholder="请选择范围" style="width: 100%;">
+            <el-option label="个人" :value="1"></el-option>
+            <el-option label="科室" :value="2"></el-option>
+            <el-option label="全院" :value="3"></el-option>
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="editDialogVisible = false">取消</el-button>
+          <el-button type="primary" @click="handleEditSave">确定</el-button>
+        </span>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
@@ -151,10 +143,10 @@ import {
   updateDoctorPhrase
 } from './api'
 import { ElMessage, ElMessageBox } from 'element-plus'
-// 【修改4】如果数据字典未对齐后端枚举，暂时注释useDict，改用固定枚举（后续可替换为dict）
+// 如果数据字典未对齐后端枚举，暂时注释useDict，改用固定枚举（后续可替换为dict）
 // import { useDict } from '@/utils/dict'
 
-// 【核心修改】定义和后端枚举对齐的业务分类选项（替换原businessclassification）
+// 核心配置：定义和后端枚举对齐的业务分类选项（替换原businessclassification）
 const businessTypeOptions = ref([
   { label: '主诉', value: 'MAIN_COMPLAINT' },
   { label: '现病史', value: 'PRESENT_HISTORY' },
@@ -170,24 +162,24 @@ const searchKeyword = ref('')
 // 表格数据
 const tableData = ref([])
 
-// 分页
+// 分页参数配置
 const currentPage = ref(1)
 const pageSize = ref(15)
 const total = ref(0)
 
-// 新增模态框相关
+// 新增模态框相关配置
 const addDialogVisible = ref(false)
 const addFormRef = ref()
-// 【修改5】新增表单默认值：删除“病愈”硬编码，业务分类默认空
+// 新增表单默认值：业务分类默认空，强制用户选择
 const addForm = ref({
   phraseName: '',
   phraseContent: '',
   sortNo: 1,
   phraseType: 1,
-  phraseCategory: '' // 业务分类默认空，强制用户选择
+  phraseCategory: ''
 })
 
-// 【修改6】完善新增表单验证规则（补充业务分类必填）
+// 完善新增表单验证规则（补充业务分类必填、名称50字限制）
 const addRules = {
   phraseName: [
     { required: true, message: '请输入常用语名称', trigger: 'blur' },
@@ -204,10 +196,20 @@ const addRules = {
   ]
 }
 
-// 编辑状态管理
+// 编辑模态框相关配置
-const editingId = ref(null)
+const editDialogVisible = ref(false)
-const editForm = ref({})
+const editFormRef = ref()
-// 【修改7】完善编辑表单验证规则
+// 编辑表单默认值配置
+const editForm = ref({
+  id: '',
+  phraseName: '',
+  phraseContent: '',
+  sortNo: 1,
+  phraseType: 1,
+  phraseCategory: ''
+})
+
+// 完善编辑表单验证规则（和新增一致，保证校验统一）
 const editRules = {
   phraseName: [
     { required: true, message: '请输入常用语名称', trigger: 'blur' },
@@ -224,18 +226,14 @@ const editRules = {
   ]
 }
 
-// 【废弃】原数据字典（后续如需对接dict，需确保dict的value是后端编码：MAIN_COMPLAINT等）
+// 重构业务分类名称转换方法（适配后端编码→中文展示）
-// const { businessclassification } = useDict('businessclassification')
-
-// 【修改8】重构业务分类名称转换方法（适配后端编码→中文）
 const getBusinessTypeName = (code) => {
   if (!code) return '未知类型'
-  // 从枚举选项中匹配编码，返回中文名称
   const item = businessTypeOptions.value.find(item => item.value === code)
   return item ? item.label : '未知类型'
 }
 
-// 获取范围名称
+// 获取范围名称转换方法
 const getScopeName = (scope) => {
   const scopeMap = {
     1: '个人',
@@ -245,46 +243,41 @@ const getScopeName = (scope) => {
   return scopeMap[scope] || '未知范围'
 }
 
-// 名称唯一性校验函数
+// 名称唯一性校验函数（新增/编辑通用，编辑时排除自身ID）
 const validatePhraseName = (phraseName, excludeId = null) => {
   if (!phraseName || !phraseName.trim()) {
     return { valid: false, message: '请输入常用语名称' }
   }
-
+  // 检查字数限制，严格控制50字
-  // 检查字数限制
   if (phraseName.trim().length > 50) {
     return { valid: false, message: '常用语名称不能超过50字' }
   }
-
+  // 检查名称是否已存在，编辑时排除当前记录
-  // 检查名称是否已存在
   const existingPhrase = allData.value.find(item => {
-    // 排除自身（更新时）
     if (excludeId && item.id === excludeId) {
       return false
     }
     return item.phraseName.trim() === phraseName.trim()
   })
-
   if (existingPhrase) {
     return { valid: false, message: '常用语名称已存在，请输入不同的名称' }
   }
-
   return { valid: true, message: '' }
 }
 
-// 所有数据（用于客户端分页）
+// 所有数据（用于客户端分页处理）
 const allData = ref([])
 
-// 获取医生常用语列表
+// 获取医生常用语列表数据
 const fetchDoctorPhraseList = async () => {
   try {
     const response = await getDoctorPhraseList()
     // 处理后端返回的数据结构：data.data
     if (response.code === 200 && response.data && response.data.data) {
-      // 按照sortNo由小到大排序
+      // 按照sortNo由小到大排序，保证列表顺序正确
       allData.value = response.data.data.sort((a, b) => a.sortNo - b.sortNo)
       total.value = allData.value.length
-      // 执行客户端分页
+      // 执行客户端分页逻辑
       applyPagination()
     } else {
       ElMessage.error('获取数据失败: ' + (response.msg || '未知错误'))
@@ -292,14 +285,14 @@ const fetchDoctorPhraseList = async () => {
       total.value = 0
     }
   } catch (error) {
-    console.error('获取列表失败：', error) // 【优化】增加控制台日志便于调试
+    console.error('获取列表失败：', error) // 增加控制台日志便于调试
     ElMessage.error('获取数据失败: 网络请求错误')
     allData.value = []
     total.value = 0
   }
 }
 
-// 重置功能
+// 重置功能方法
 const handleReset = () => {
   // 重置搜索条件
   searchScope.value = null
@@ -310,33 +303,32 @@ const handleReset = () => {
   fetchDoctorPhraseList()
 }
 
-// 客户端分页处理
+// 客户端分页处理核心方法
 const applyPagination = () => {
   const start = (currentPage.value - 1) * pageSize.value
   const end = start + pageSize.value
   tableData.value = allData.value.slice(start, end)
 }
 
-// 分页处理
+// 分页条数改变事件
 const handleSizeChange = (val) => {
   pageSize.value = val
   applyPagination()
 }
 
+// 分页页码改变事件
 const handleCurrentChange = (val) => {
   currentPage.value = val
   applyPagination()
 }
 
-// 搜索功能
+// 搜索功能核心方法
 const handleSearch = async () => {
   try {
     // searchScope可能是null（未选择）、1=个人，2=科室，3=全院
     const phraseType = searchScope.value === null ? undefined : searchScope.value
-
     // 调用搜索接口：phraseName, phraseType
     const response = await searchDoctorPhraseList(searchKeyword.value, phraseType)
-
     if (response.code === 200 && response.data && response.data.data) {
       // 按照sortNo由小到大排序
       allData.value = response.data.data.sort((a, b) => a.sortNo - b.sortNo)
@@ -356,15 +348,15 @@ const handleSearch = async () => {
   }
 }
 
-// 打开新增模态框
+// 打开新增模态框方法
 const showAddDialog = () => {
-  // 重置表单
+  // 重置表单数据
   addForm.value = {
     phraseName: '',
     phraseContent: '',
     sortNo: 1,
     phraseType: 1,
-    phraseCategory: '' // 【修改9】默认空，强制选择
+    phraseCategory: ''
   }
   // 重置表单验证状态
   if (addFormRef.value) {
@@ -374,7 +366,7 @@ const showAddDialog = () => {
   addDialogVisible.value = true
 }
 
-// 提交新增表单
+// 提交新增表单方法
 const handleAdd = async () => {
   try {
     // 先执行表单验证
@@ -400,7 +392,6 @@ const handleAdd = async () => {
 
     // 调用新增接口
     const response = await addDoctorPhrase(formData)
-
     // 处理新增结果
     if (response.code === 200) {
       ElMessage.success('新增成功')
@@ -417,7 +408,7 @@ const handleAdd = async () => {
   }
 }
 
-// 删除功能
+// 删除功能方法
 const handleDelete = async (row) => {
   try {
     // 弹出确认对话框
@@ -430,10 +421,8 @@ const handleDelete = async (row) => {
         type: 'warning'
       }
     )
-
     // 调用删除接口
     const response = await deleteDoctorPhrase(row.id)
-
     if (response.code === 200) {
       ElMessage.success('删除成功')
       // 重新拉取数据
@@ -450,61 +439,48 @@ const handleDelete = async (row) => {
   }
 }
 
-// 编辑按钮点击事件
+// 打开编辑弹窗核心方法 - 点击表格编辑按钮触发
-const handleEdit = (row) => {
+const showEditDialog = (row) => {
-  // 进入编辑状态
+  // 深拷贝当前行数据到编辑表单，避免原数据被修改
-  editingId.value = row.id
-  // 复制当前行数据到编辑表单（深拷贝避免原数据被修改）
   editForm.value = JSON.parse(JSON.stringify(row))
-  // 确保类型正确
+  // 确保数字类型正确，防止表单赋值异常
   editForm.value.sortNo = Number(editForm.value.sortNo) || 1
   editForm.value.phraseType = Number(editForm.value.phraseType) || 1
+  // 重置表单验证状态
+  if (editFormRef.value) {
+    editFormRef.value.clearValidate()
+  }
+  // 打开编辑弹窗
+  editDialogVisible.value = true
 }
 
-// 取消编辑
+// 编辑表单提交保存方法
-const handleCancel = () => {
+const handleEditSave = async () => {
-  editingId.value = null
-  editForm.value = {}
-}
-
-// 保存编辑
-const handleSave = async () => {
   try {
-    // 基础非空校验
+    // 先执行表单验证
-    if (!editForm.value.phraseName || !editForm.value.phraseContent) {
+    const validateResult = await editFormRef.value.validate()
-      ElMessage.error('请填写名称和内容')
+    if (!validateResult) return
-      return
-    }
-    if (!editForm.value.phraseCategory) {
-      ElMessage.error('请选择业务分类')
-      return
-    }
-    if (!editForm.value.phraseType) {
-      ElMessage.error('请选择范围')
-      return
-    }
 
-    // 名称唯一性校验（排除当前记录）
+    // 名称唯一性校验（排除当前编辑的这条记录ID）
-    const nameValidation = validatePhraseName(editForm.value.phraseName, editingId.value)
+    const nameValidation = validatePhraseName(editForm.value.phraseName, editForm.value.id)
     if (!nameValidation.valid) {
       ElMessage.error(nameValidation.message)
       return
     }
 
-    // 准备更新数据
+    // 准备更新数据，修复时间格式为ISO字符串，适配后端LocalDateTime
     const updateData = {
       ...editForm.value,
       enableFlag: 1,
-      updateTime: new Date().toISOString() // 可选：前端临时赋值，后端最终以自己的为准
+      updateTime: new Date().toISOString() // 前端临时赋值，后端最终以自己的为准
     }
 
     // 调用更新接口
     const response = await updateDoctorPhrase(updateData)
-
     if (response.code === 200) {
       ElMessage.success('更新成功')
-      editingId.value = null
+      editDialogVisible.value = false
-      editForm.value = {}
+      // 重新拉取数据，保证列表数据最新
       fetchDoctorPhraseList()
     } else {
       ElMessage.error('更新失败: ' + (response.msg || '未知错误'))
@@ -515,7 +491,7 @@ const handleSave = async () => {
   }
 }
 
-// 组件挂载时获取数据
+// 组件挂载时初始化加载数据
 onMounted(() => {
   fetchDoctorPhraseList()
 })
@@ -531,7 +507,7 @@ onMounted(() => {
   align-items: center;
   margin-bottom: 20px;
   flex-wrap: wrap;
-  /* 【优化】适配小屏幕，防止按钮换行溢出 */
+  /* 适配小屏幕，防止按钮换行溢出 */
   gap: 10px;
   /* 替换margin-left，更优雅的间距 */
 }
@@ -542,7 +518,7 @@ onMounted(() => {
   justify-content: flex-end;
 }
 
-/* 【优化】新增表单样式适配 */
+/* 新增表单样式适配 */
 .add-form {
   padding: 10px 0;
 }