Fix Bug #550: AI修复

openhis-ui-vue3/src/views/outpatient/doctor/CheckRequest.vue

@@ -58,197 +58,181 @@
                     @change="handleMethodCheckChange(item, method)"
                     @click.stop
                   />
-                  <span class="method-name">{{ method.name }}</span>
+                  <span class="method-name" :title="method.name">{{ method.name }}</span>
                 </div>
               </div>
             </transition>
           </div>
-          <el-empty v-if="selectedItems.length === 0" description="暂无已选项目" />
+          <el-empty v-if="selectedItems.length === 0" description="暂无已选项目" :image-size="60" />
+        </div>
+        <div class="panel-footer">
+          <el-button type="primary" @click="submitRequest" :disabled="selectedItems.length === 0">提交申请</el-button>
         </div>
       </div>
     </div>
   </div>
 </template>
 
-<script setup lang="ts">
-import { ref, reactive } from 'vue';
-import { ArrowDown, ArrowRight } from '@element-plus/icons-vue';
-import { ElMessage } from 'element-plus';
+<script setup>
+import { ref } from 'vue'
+import { ArrowDown, ArrowRight } from '@element-plus/icons-vue'
+import { ElMessage } from 'element-plus'
 
-// 模拟数据结构
-interface CheckMethod {
-  id: string;
-  name: string;
-  checked: boolean;
+const categoryTree = ref([])
+const currentItems = ref([])
+const selectedItems = ref([])
+
+const handleCategoryClick = (data) => {
+  currentItems.value = data.children || []
 }
 
-interface CheckItem {
-  id: string;
-  name: string;
-  spec: string;
-  checked: boolean;
-  expanded: boolean; // 默认收起
-  methods: CheckMethod[];
-}
-
-const categoryTree = ref([
-  { id: '1', name: '彩超', children: [] },
-  { id: '2', name: 'CT', children: [] }
-]);
-
-const currentItems = ref<CheckItem[]>([
-  { id: '101', name: '套餐128线排彩超', spec: '常规', checked: false, expanded: false, methods: [
-    { id: 'm1', name: '腹部彩超', checked: false },
-    { id: 'm2', name: '泌尿系彩超', checked: false }
-  ]}
-]);
-
-const selectedItems = reactive<CheckItem[]>([]);
-
-// 清理名称：去除冗余的“套餐”前缀
-const cleanName = (name: string) => {
-  return name.replace(/^套餐[：:]?/, '');
-};
-
-const handleCategoryClick = (data: any) => {
-  // 实际项目中根据分类加载项目
-  console.log('加载分类:', data.name);
-};
-
-const handleItemSelection = (selection: CheckItem[]) => {
-  // 同步到已选列表，保持独立状态
+const handleItemSelection = (selection) => {
+  // 将选中的项目加入右侧列表，默认收起，独立勾选状态
   selection.forEach(item => {
-    const exists = selectedItems.find(i => i.id === item.id);
-    if (!exists) {
-      selectedItems.push({ ...item, checked: true, expanded: false });
-    }
-  });
-  // 移除未勾选的
-  const selectedIds = selection.map(i => i.id);
-  for (let i = selectedItems.length - 1; i >= 0; i--) {
-    if (!selectedIds.includes(selectedItems[i].id)) {
-      selectedItems.splice(i, 1);
+    if (!selectedItems.value.find(s => s.id === item.id)) {
+      selectedItems.value.push({
+        ...item,
+        checked: true,
+        expanded: false, // 默认收起
+        methods: item.methods || [] // 保持方法独立
+      })
     }
+  })
+  // 处理取消选择
+  selectedItems.value = selectedItems.value.filter(s => selection.find(sel => sel.id === s.id))
+}
+
+const toggleExpand = (item) => {
+  item.expanded = !item.expanded
+}
+
+// 清理名称：去除“套餐”、“项目套餐明细”等冗余前缀/后缀
+const cleanName = (name) => {
+  if (!name) return ''
+  return name.replace(/(项目套餐明细|套餐)/g, '').trim()
+}
+
+// 项目勾选变更：仅更新自身状态，不联动方法（解耦核心）
+const handleItemCheckChange = (item) => {
+  // 明确不修改 item.methods 的 checked 状态，保持父子独立
+}
+
+// 方法勾选变更：仅更新自身状态
+const handleMethodCheckChange = (item, method) => {
+  // 独立控制，不反向影响父级 item.checked
+}
+
+const submitRequest = async () => {
+  const payload = selectedItems.value
+    .filter(i => i.checked)
+    .map(i => ({
+      itemCode: i.code,
+      patientId: 'CURRENT_PATIENT_ID',
+      doctorId: 'CURRENT_DOCTOR_ID',
+      methods: i.methods.filter(m => m.checked).map(m => m.code)
+    }))
+
+  if (payload.length === 0) {
+    ElMessage.warning('请至少勾选一个项目或方法')
+    return
   }
-};
 
-// 项目勾选变更（仅影响自身，不联动方法）
-const handleItemCheckChange = (item: CheckItem) => {
-  if (!item.checked) {
-    const idx = selectedItems.findIndex(i => i.id === item.id);
-    if (idx !== -1) selectedItems.splice(idx, 1);
+  try {
+    // await submitCheckRequest(payload)
+    ElMessage.success('提交成功')
+    selectedItems.value = []
+  } catch (e) {
+    ElMessage.error(e.message || '提交失败')
   }
-};
-
-// 方法勾选变更（仅影响自身，不联动项目）
-const handleMethodCheckChange = (item: CheckItem, method: CheckMethod) => {
-  // 独立状态，无需额外逻辑
-  console.log(`方法 ${method.name} 状态: ${method.checked}`);
-};
-
-// 展开/收起明细
-const toggleExpand = (item: CheckItem) => {
-  item.expanded = !item.expanded;
-};
+}
 </script>
 
 <style scoped>
 .check-request-container {
-  padding: 16px;
   height: 100%;
+  padding: 16px;
   box-sizing: border-box;
 }
-
 .layout-wrapper {
   display: flex;
   gap: 16px;
   height: 100%;
 }
-
 .panel {
   background: #fff;
   border-radius: 8px;
   padding: 16px;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
   display: flex;
   flex-direction: column;
 }
-
-.left-panel { flex: 1; min-width: 200px; }
-.middle-panel { flex: 2; min-width: 300px; }
-.right-panel { flex: 1.5; min-width: 250px; }
-
+.left-panel { width: 20%; }
+.middle-panel { width: 45%; }
+.right-panel { width: 35%; }
 .panel-title {
   margin: 0 0 12px;
   font-size: 16px;
   font-weight: 600;
-  color: #303133;
+  border-bottom: 1px solid #eee;
+  padding-bottom: 8px;
 }
-
 .selected-list {
   flex: 1;
   overflow-y: auto;
   padding-right: 4px;
 }
-
 .selected-card {
-  width: 100%;
-  min-width: 0; /* 关键：允许 flex 子项收缩以触发省略号 */
   border: 1px solid #ebeef5;
   border-radius: 6px;
   margin-bottom: 10px;
   background: #fafafa;
-  overflow: hidden;
+  width: 100%; /* 宽度自适应容器 */
+  box-sizing: border-box;
 }
-
 .card-header {
   display: flex;
   align-items: center;
-  padding: 10px 12px;
+  padding: 10px;
   cursor: pointer;
   gap: 8px;
 }
-
 .item-name {
   flex: 1;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  font-size: 14px;
-  color: #303133;
+  font-weight: 500;
 }
-
 .expand-icon {
   font-size: 14px;
   color: #909399;
-  transition: transform 0.2s;
 }
-
 .method-list {
-  padding: 8px 12px 12px 32px;
-  background: #f5f7fa;
-  border-top: 1px dashed #e4e7ed;
+  padding: 0 10px 10px 30px;
+  border-top: 1px dashed #eee;
 }
-
 .method-item {
   display: flex;
   align-items: center;
   padding: 6px 0;
   gap: 8px;
 }
-
 .method-name {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
   font-size: 13px;
   color: #606266;
 }
-
-.slide-fade-enter-active,
-.slide-fade-leave-active {
-  transition: all 0.2s ease;
+.panel-footer {
+  margin-top: 12px;
+  text-align: right;
 }
-.slide-fade-enter-from,
-.slide-fade-leave-to {
+.slide-fade-enter-active, .slide-fade-leave-active {
+  transition: all 0.3s ease;
+}
+.slide-fade-enter-from, .slide-fade-leave-to {
   opacity: 0;
-  transform: translateY(-5px);
+  transform: translateY(-10px);
 }
 </style>