修复bug：长者管理-长者信息-护理流程功能无法正常使用

src/views/elder/elderinfo/components/ElderHllc.vue

@@ -2,30 +2,22 @@
   <div class="hllcClass" @contextmenu.prevent>
     <a-row>
       <a-col :span="12" style="padding-top: 14px;">
-        {{customerInfo.name}} - 护理流程展示
+        {{ customerInfo.name }} - 护理流程展示
       </a-col>
       <a-col :span="12" style="text-align: right;">
         <!-- <a-button type="primary" @click="handleFanhui">返回</a-button> -->
         <!-- <a-button type="primary" @click="getData(customerInfo)">加载</a-button> -->
       </a-col>
       <a-col :span="24" style="margin-top:14px;">
-        <a-table
+        <a-table :columns="columns" :data-source="dataSource" bordered size="small" :pagination="false"
-          :columns="columns"
+          :rowClassName="setRowClassName" :customRow="handleCustomRow" @contextmenu.prevent>
-          :data-source="dataSource"
+          <template #bodyCell="{ column, record, text }">
-          bordered
+            <template v-if="column.key !== 'minute'">
-          size="small"
+              <a-tooltip :title="text" placement="topLeft">
-          :pagination="false"
+                <span class="cell-text">{{ text }}</span>
-          :rowClassName="setRowClassName"
+              </a-tooltip>
-          :customRow="handleCustomRow"
+            </template>
-          @contextmenu.prevent
-        >
-        <template #bodyCell="{ column, record, text }">
-          <template v-if="column.key !== 'minute'">
-            <a-tooltip :title="text" placement="topLeft">
-              <span class="cell-text">{{ text }}</span>
-            </a-tooltip>
           </template>
-        </template>
         </a-table>
       </a-col>
       <!-- <a-col :span="24" style="text-align: center;">
@@ -34,17 +26,13 @@
     </a-row>
 
     <!-- 右键菜单 -->
-    <div 
+    <div v-if="contextMenu.visible" :style="{
-      v-if="contextMenu.visible" 
+      position: 'fixed',
-      :style="{
+      left: `${contextMenu.x}px`,
-        position: 'fixed',
+      top: `${contextMenu.y}px`,
-        left: `${contextMenu.x}px`,
+      zIndex: 1000,
-        top: `${contextMenu.y}px`,
+      boxShadow: '0 2px 8px rgba(0,0,0,0.15)'
-        zIndex: 1000,
+    }" class="context-menu">
-        boxShadow: '0 2px 8px rgba(0,0,0,0.15)'
-      }"
-      class="context-menu"
-    >
       <a-menu @click="handleMenuClick" style="padding: 14px;">
         <a-menu-item key="add">新增数据</a-menu-item>
         <a-menu-item key="edit" :disabled="!contextMenu.record?.[contextMenu.columnKey]">编辑数据</a-menu-item>
@@ -53,12 +41,7 @@
     </div>
 
     <!-- 数据操作模态框 -->
-    <a-modal
+    <a-modal v-model:visible="modalVisible" :title="modalTitle" @ok="handleModalOk" @cancel="handleModalCancel">
-      v-model:visible="modalVisible"
-      :title="modalTitle"
-      @ok="handleModalOk"
-      @cancel="handleModalCancel"
-    >
       <a-form :model="formState" layout="vertical" style="padding:14px;">
         <a-form-item label="数据内容">
           <a-input v-model:value="formState.content" />
@@ -72,333 +55,334 @@
 </template>
 
 <script lang="ts" setup>
-  import { ref, reactive, defineExpose,computed  } from 'vue';
+import { ref, reactive, defineExpose, computed } from 'vue';
-  import { message } from 'ant-design-vue';
+import { message } from 'ant-design-vue';
 import { defHttp } from '/@/utils/http/axios';
 
-  const emit = defineEmits(['register', 'success']);
+const emit = defineEmits(['register', 'success']);
-  const customerInfo = ref<any>({});
+const customerInfo = ref<any>({});
-  
-  // 右键菜单状态
-  const contextMenu = reactive({
-    visible: false,
-    x: 0,
-    y: 0,
-    record: null as DataRow | null,
-    columnKey: '',
-    rowIndex: -1
-  });
 
-  // 模态框状态
+// 右键菜单状态
-  const modalVisible = ref(false);
+const contextMenu = reactive({
-  const modalAction = ref<'add' | 'edit' | 'delete'>('add');
+  visible: false,
-  const modalTitle = computed(() => {
+  x: 0,
-    return {
+  y: 0,
-      add: '新增数据',
+  record: null as DataRow | null,
-      edit: '编辑数据',
+  columnKey: '',
-      delete: '确认删除'
+  rowIndex: -1
-    }[modalAction.value];
+});
-  });
 
-  const formState = reactive({
+// 模态框状态
-    content: '',
+const modalVisible = ref(false);
-    remark: ''
+const modalAction = ref<'add' | 'edit' | 'delete'>('add');
-  });
+const modalTitle = computed(() => {
+  return {
+    add: '新增数据',
+    edit: '编辑数据',
+    delete: '确认删除'
+  }[modalAction.value];
+});
 
-  // 生成列（24小时）
+const formState = reactive({
-  const columns = [
+  content: '',
-    {
+  remark: ''
-      title: '',
+});
-      dataIndex: 'minute',
+
-      key: 'minute',
+// 生成列（24小时）
-      width: '50px',
+const columns = [
-      fixed: 'left',
+  {
-      align: 'center',
+    title: '',
-    }
+    dataIndex: 'minute',
-  ];
+    key: 'minute',
-  
+    width: '50px',
-  // 添加小时列
+    fixed: 'left',
-  for (let hour = 0; hour < 24; hour++) {
+    align: 'center',
-    columns.push({
-      title: `${hour.toString().padStart(2, '0')}`,
-      dataIndex: `hour_${hour}`,
-      key: `hour_${hour}`,
-      width: 60,
-      align: 'center',
-      fixed: '',
-      customCell: (record: DataRow, rowIndex: number) => {
-        return {
-          onClick: () => handleCellClick(record, `hour_${hour}`, rowIndex, 'left'),
-          onContextmenu: (event: MouseEvent) => {
-            showContextMenu(event, record, `hour_${hour}`, rowIndex);
-          }
-        };
-      }
-    });
   }
-  
+];
-  // 生成数据（每5分钟一行）
-  interface DataRow {
-    key: number;
-    minute: string;
-    remark?: string;
-    [key: `hour_${number}`]: string;
-  }
-  
-  const dataSource = ref<DataRow[]>([]);
-  
-  // 初始化数据
-  const initDataSource = () => {
-    const newData: DataRow[] = [];
-    for (let minute = 0; minute < 60; minute += 5) {
-      let row: DataRow = {
-        key: minute,
-        minute: `${minute.toString().padStart(2, '0')}分`
-      } as DataRow;
-      
-      for (let hour = 0; hour < 24; hour++) {
-        row[`hour_${hour}`] = '';
-      }
-      
-      newData.push(row);
-    }
-    dataSource.value = newData;
-  };
 
-  // 为奇数行添加斑马纹
+// 添加小时列
-  function setRowClassName(record: DataRow, index: number) {
+for (let hour = 0; hour < 24; hour++) {
-    return index % 2 === 0 ? 'even-row' : 'odd-row';
+  columns.push({
-  }
+    title: `${hour.toString().padStart(2, '0')}`,
-
+    dataIndex: `hour_${hour}`,
-  // 初始化数据
+    key: `hour_${hour}`,
-  initDataSource();
+    width: 60,
-  
+    align: 'center',
-  // 行点击事件处理
+    fixed: '',
-  const handleCustomRow = (record: DataRow, index: number) => {
+    customCell: (record: DataRow, rowIndex: number) => {
-    return {
+      return {
-      onClick: () => handleRowClick(record, index),
+        onClick: () => handleCellClick(record, `hour_${hour}`, rowIndex, 'left'),
-      onContextmenu: (event: MouseEvent) => {
+        onContextmenu: (event: MouseEvent) => {
-        event.preventDefault();
+          showContextMenu(event, record, `hour_${hour}`, rowIndex);
-      }
-    };
-  };
-  
-  // 显示右键菜单
-  const showContextMenu = (event: MouseEvent, record: DataRow, columnKey: string, rowIndex: number) => {
-    // event.preventDefault();
-    
-    // contextMenu.visible = true;
-    // contextMenu.x = event.clientX;
-    // contextMenu.y = event.clientY;
-    // contextMenu.record = record;
-    // contextMenu.columnKey = columnKey;
-    // contextMenu.rowIndex = rowIndex;
-    
-    // // 点击其他地方关闭菜单
-    // const closeMenu = (e: MouseEvent) => {
-    //   if (!(e.target as HTMLElement).closest('.context-menu')) {
-    //     contextMenu.visible = false;
-    //     document.removeEventListener('click', closeMenu);
-    //   }
-    // };
-    
-    // document.addEventListener('click', closeMenu);
-  };
-  
-  // 菜单点击处理
-  const handleMenuClick = ({ key }: { key: string }) => {
-    const { record, columnKey } = contextMenu;
-    
-    switch (key) {
-      case 'add':
-        modalAction.value = 'add';
-        formState.content = '';
-        formState.remark = '';
-        modalVisible.value = true;
-        break;
-      case 'edit':
-        if (record && columnKey) {
-          modalAction.value = 'edit';
-          formState.content = record[columnKey];
-          formState.remark = record.remark || '';
-          modalVisible.value = true;
         }
-        break;
+      };
-      case 'delete':
-        modalAction.value = 'delete';
-        if (record && columnKey) {
-          formState.content = record[columnKey];
-          formState.remark = record.remark || '';
-        }
-        modalVisible.value = true;
-        break;
-    }
-    contextMenu.visible = false;
-  };
-  
-  // 模态框确认
-  const handleModalOk = () => {
-    const { record, columnKey, rowIndex } = contextMenu;
-    
-    if (!record || !columnKey || rowIndex === -1) return;
-    
-    switch (modalAction.value) {
-      case 'add':
-      case 'edit':
-        if (!formState.content) {
-          message.warning('请输入数据内容');
-          return;
-        }
-        dataSource.value[rowIndex][columnKey] = formState.content;
-        dataSource.value[rowIndex].remark = formState.remark;
-        message.success(`数据${modalAction.value === 'add' ? '添加' : '更新'}成功`);
-        break;
-      case 'delete':
-        dataSource.value[rowIndex][columnKey] = '';
-        message.success('数据已删除');
-        break;
-    }
-    
-    modalVisible.value = false;
-  };
-  
-  // 模态框取消
-  const handleModalCancel = () => {
-    modalVisible.value = false;
-  };
-  
-  // 行点击事件
-  function handleRowClick(record: DataRow, index: number) {
-    // 可添加行点击逻辑
-  }
-  
-  // 单元格点击事件
-  function handleCellClick(record: DataRow, columnKey: string, rowIndex: number, buttonType: 'left' | 'right') {
-    // 可添加单元格点击逻辑
-  }
-
-  function handleFanhui() {
-    emit('success');
-  }
-function getData(record: any) { 
-  defHttp.get({ 
-    url: "/nuIpadApi/nuBizNuCustomerServer/getNclist", 
-    params: { nuId: record.nuId, customerId: record.id } 
-  }).then((data) => {
-    console.log("获取到的数据:", data);
-    
-    // 初始化数据源
-    initDataSource();
-    
-    // 处理返回的数据
-    if (Array.isArray(data)) {
-      data.forEach((hourData) => {
-        const hour = parseInt(hourData.positioning);
-        
-        // 处理该小时的所有子项
-        if (hourData.children && hourData.children.length > 0) {
-          hourData.children.forEach((item) => {
-            // 解析开始时间
-            const [startHour, startMinute] = item.startTime.split(':').map(Number);
-            const rowIndex = Math.floor(startMinute / 5); // 每5分钟一行
-            
-            // 确保行索引在有效范围内
-            if (rowIndex >= 0 && rowIndex < dataSource.value.length) {
-              // 构建显示内容
-              const content = [
-                item.directiveName,
-                item.typeName,
-                item.categoryName,
-                item.tagName,
-                item.cycleType,
-                item.startTime,
-                item.endTime,
-              ].filter(Boolean).join(' / ');
-              
-              // 更新对应单元格
-              dataSource.value[rowIndex][`hour_${hour}`] = content;
-              
-            }
-          });
-        }
-      });
     }
   });
 }
 
-function handleSaveBach(){
+// 生成数据（每5分钟一行）
+interface DataRow {
+  key: number;
+  minute: string;
+  remark?: string;
+  [key: `hour_${number}`]: string;
+}
+
+const dataSource = ref<DataRow[]>([]);
+
+// 初始化数据
+const initDataSource = () => {
+  const newData: DataRow[] = [];
+  for (let minute = 0; minute < 60; minute += 5) {
+    let row: DataRow = {
+      key: minute,
+      minute: `${minute.toString().padStart(2, '0')}分`
+    } as DataRow;
+
+    for (let hour = 0; hour < 24; hour++) {
+      row[`hour_${hour}`] = '';
+    }
+
+    newData.push(row);
+  }
+  dataSource.value = newData;
+};
+
+// 为奇数行添加斑马纹
+function setRowClassName(record: DataRow, index: number) {
+  return index % 2 === 0 ? 'even-row' : 'odd-row';
+}
+
+// 初始化数据
+initDataSource();
+
+// 行点击事件处理
+const handleCustomRow = (record: DataRow, index: number) => {
+  return {
+    onClick: () => handleRowClick(record, index),
+    onContextmenu: (event: MouseEvent) => {
+      event.preventDefault();
+    }
+  };
+};
+
+// 显示右键菜单
+const showContextMenu = (event: MouseEvent, record: DataRow, columnKey: string, rowIndex: number) => {
+  // event.preventDefault();
+
+  // contextMenu.visible = true;
+  // contextMenu.x = event.clientX;
+  // contextMenu.y = event.clientY;
+  // contextMenu.record = record;
+  // contextMenu.columnKey = columnKey;
+  // contextMenu.rowIndex = rowIndex;
+
+  // // 点击其他地方关闭菜单
+  // const closeMenu = (e: MouseEvent) => {
+  //   if (!(e.target as HTMLElement).closest('.context-menu')) {
+  //     contextMenu.visible = false;
+  //     document.removeEventListener('click', closeMenu);
+  //   }
+  // };
+
+  // document.addEventListener('click', closeMenu);
+};
+
+// 菜单点击处理
+const handleMenuClick = ({ key }: { key: string }) => {
+  const { record, columnKey } = contextMenu;
+
+  switch (key) {
+    case 'add':
+      modalAction.value = 'add';
+      formState.content = '';
+      formState.remark = '';
+      modalVisible.value = true;
+      break;
+    case 'edit':
+      if (record && columnKey) {
+        modalAction.value = 'edit';
+        formState.content = record[columnKey];
+        formState.remark = record.remark || '';
+        modalVisible.value = true;
+      }
+      break;
+    case 'delete':
+      modalAction.value = 'delete';
+      if (record && columnKey) {
+        formState.content = record[columnKey];
+        formState.remark = record.remark || '';
+      }
+      modalVisible.value = true;
+      break;
+  }
+  contextMenu.visible = false;
+};
+
+// 模态框确认
+const handleModalOk = () => {
+  const { record, columnKey, rowIndex } = contextMenu;
+
+  if (!record || !columnKey || rowIndex === -1) return;
+
+  switch (modalAction.value) {
+    case 'add':
+    case 'edit':
+      if (!formState.content) {
+        message.warning('请输入数据内容');
+        return;
+      }
+      dataSource.value[rowIndex][columnKey] = formState.content;
+      dataSource.value[rowIndex].remark = formState.remark;
+      message.success(`数据${modalAction.value === 'add' ? '添加' : '更新'}成功`);
+      break;
+    case 'delete':
+      dataSource.value[rowIndex][columnKey] = '';
+      message.success('数据已删除');
+      break;
+  }
+
+  modalVisible.value = false;
+};
+
+// 模态框取消
+const handleModalCancel = () => {
+  modalVisible.value = false;
+};
+
+// 行点击事件
+function handleRowClick(record: DataRow, index: number) {
+  // 可添加行点击逻辑
+}
+
+// 单元格点击事件
+function handleCellClick(record: DataRow, columnKey: string, rowIndex: number, buttonType: 'left' | 'right') {
+  // 可添加单元格点击逻辑
+}
+
+function handleFanhui() {
+  emit('success');
+}
+function getData(record: any) {
+  defHttp.get({
+    url: "/api/pad/care/directive/getNclist",
+    params: { nuId: record.nuId, elderId: record.id }
+  }).then((result) => {
+    console.log("获取到的数据:", result);
+    const data = result.serviceList
+
+    // 初始化数据源
+    initDataSource();
+
+    // 处理返回的数据
+    if (Array.isArray(data)) {
+      data.forEach((item) => {
+        const hour = parseInt(item.positioning);
+
+        // 处理该小时的所有子项
+        // 解析开始时间
+        const [startHour, startMinute] = item.startTime.split(':').map(Number);
+        const rowIndex = Math.floor(startMinute / 5); // 每5分钟一行
+
+        // 确保行索引在有效范围内
+        if (rowIndex >= 0 && rowIndex < dataSource.value.length) {
+          // 构建显示内容
+          const content = [
+            item.directiveName,
+            item.typeName,
+            item.categoryName,
+            item.tagName,
+            item.cycleType,
+            item.startTime,
+            item.endTime,
+          ].filter(Boolean).join(' / ');
+
+          // 更新对应单元格
+          dataSource.value[rowIndex][`hour_${hour}`] = content;
+
+        }
+      });
+      console.log('12321312331', dataSource.value)
+    }
+  });
+}
+
+function handleSaveBach() {
   console.log("🚀 ~ handleSaveBach ~ dataSource:", dataSource)
 }
 
-  function init(record: any) {
+function init(record: any) {
-    customerInfo.value = record;
+  customerInfo.value = record;
-    console.log("初始化数据:", record);
+  console.log("初始化数据:", record);
-    getData(record)
+  getData(record)
-  }
+}
 
-  defineExpose({
+defineExpose({
-    init
+  init
-  });
+});
 </script>
 
 <style lang="less" scoped>
-  .hllcClass {
+.hllcClass {
-    background: white;
+  background: white;
-    width: 100%;
+  width: 100%;
-    height: calc(100vh - 90px);
+  height: calc(100vh - 90px);
-    padding: 14px;
+  padding: 14px;
-    border-radius: 8px; 
+  border-radius: 8px;
-    position: relative;
+  position: relative;
+}
+
+/* 斑马纹样式 */
+:deep(.ant-table) {
+  .even-row {
+    background-color: #fafafa;
   }
-  
+
-  /* 斑马纹样式 */
+  .odd-row {
-  :deep(.ant-table) {
+    background-color: #ffffff;
-    .even-row {
+  }
-      background-color: #fafafa;
+
-    }
+  /* 单元格悬停效果 */
-    .odd-row {
+  .ant-table-tbody>tr>td {
-      background-color: #ffffff;
+    &:hover {
-    }
+      background-color: #e6f7ff !important;
-    
+      cursor: pointer;
-    /* 单元格悬停效果 */
-    .ant-table-tbody > tr > td {
-      &:hover {
-        background-color: #e6f7ff !important;
-        cursor: pointer;
-      }
-    }
-    
-    /* 有数据的单元格样式 */
-    .has-data {
-      background-color: #f6ffed;
     }
   }
 
-  /* 右键菜单样式 */
+  /* 有数据的单元格样式 */
-  .context-menu {
+  .has-data {
-    background: white;
+    background-color: #f6ffed;
-    border-radius: 4px;
-    overflow: hidden;
-    
-    .ant-menu {
-      border-right: none;
-    }
-    
-    .ant-menu-item {
-      margin: 0;
-      padding: 5px 12px;
-    }
   }
-  .cell-text {
+}
+
+/* 右键菜单样式 */
+.context-menu {
+  background: white;
+  border-radius: 4px;
+  overflow: hidden;
+
+  .ant-menu {
+    border-right: none;
+  }
+
+  .ant-menu-item {
+    margin: 0;
+    padding: 5px 12px;
+  }
+}
+
+.cell-text {
   // display: inline-block;
   // max-width: 50px;
   // overflow: hidden;
   // text-overflow: ellipsis;
   // white-space: nowrap;
-  
+
   display: -webkit-box;
   -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2; /* 限制文本为2行 */
+  -webkit-line-clamp: 2;
+  /* 限制文本为2行 */
   overflow: hidden;
   text-overflow: ellipsis;
 }