修改客户护理流程展示

src/views/biz/nuBizCustomerInfo/NuBizCustomerInfoList.vue

@@ -117,7 +117,7 @@ import JInput from "/@/components/Form/src/jeecg/components/JInput.vue";
   const customerHllc = ref();
   const userStore = useUserStore();
   const dataList = ref<any[]>([]);
-  const showIndex = ref<string>('1');
+  const showIndex = ref<string>('0');
   const current = ref(1);
   const pageSize = ref(12);
   const total = ref(0);

src/views/biz/nuBizCustomerInfo/components/CustomerHllc.vue

@@ -1,8 +1,9 @@
 <template>
-  <div class="hllcClass">
+  <div class="hllcClass" @contextmenu.prevent>
     <a-row>
       <a-col :span="24" 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
@@ -11,76 +12,326 @@
           bordered
           size="small"
           :pagination="false"
-          :rowClassName="`setRowClassName`"
-        />
+          :rowClassName="setRowClassName"
+          :customRow="handleCustomRow"
+          @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;">
+        <a-button type="primary" @click="handleSaveBach">保存</a-button>
+      </a-col> -->
     </a-row>
+
+    <!-- 右键菜单 -->
+    <div 
+      v-if="contextMenu.visible" 
+      :style="{
+        position: 'fixed',
+        left: `${contextMenu.x}px`,
+        top: `${contextMenu.y}px`,
+        zIndex: 1000,
+        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>
+        <a-menu-item key="delete" :disabled="!contextMenu.record?.[contextMenu.columnKey]">删除数据</a-menu-item>
+      </a-menu>
+    </div>
+
+    <!-- 数据操作模态框 -->
+    <a-modal
+      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" />
+        </a-form-item>
+        <a-form-item label="备注">
+          <a-textarea v-model:value="formState.remark" />
+        </a-form-item>
+      </a-form>
+    </a-modal>
   </div>
 </template>
 
 <script lang="ts" setup>
-  import { ref, reactive, defineExpose, nextTick, defineProps, computed, onMounted } from 'vue';
-  import { defHttp } from '/@/utils/http/axios';
-  import axios from 'axios';
+  import { ref, reactive, defineExpose,computed  } from 'vue';
+  import { message } from 'ant-design-vue';
+import { defHttp } from '/@/utils/http/axios';
 
   const emit = defineEmits(['register', 'success']);
-   // 生成列（24小时）
-    const columns = [
-      {
-        title: '分钟/小时',
-        dataIndex: 'minute',
-        key: 'minute',
-        width: 80,
-        fixed: 'left',
-        align: 'center',
-      }
-    ];
-    
-    // 添加小时列
-    for (let hour = 0; hour < 24; hour++) {
-      columns.push({
-        title: `${hour.toString().padStart(2, '0')}`,
-        dataIndex: `hour_${hour}`,
-        key: `hour_${hour}`,
-        width: 60,
-        align: 'center',
-        fixed: ''
-      });
-    }
-    
-    // 生成数据（每5分钟一行）
-    interface DataRow {
-      key: number;
-      minute: string;
-      [key: `hour_${number}`]: string;
-    }
-    // 为奇数行添加斑马纹
-    function setRowClassName(record, index) {
-      console.log("🚀 ~ setRowClassName ~ record, index:", record, index)
-      return index % 2 === 0 ? 'even-row' : 'odd-row';
-    }
+  const customerInfo = ref<any>({});
+  
+  // 右键菜单状态
+  const contextMenu = reactive({
+    visible: false,
+    x: 0,
+    y: 0,
+    record: null as DataRow | null,
+    columnKey: '',
+    rowIndex: -1
+  });
 
-const dataSource: DataRow[] = [];
+  // 模态框状态
+  const modalVisible = ref(false);
+  const modalAction = ref<'add' | 'edit' | 'delete'>('add');
+  const modalTitle = computed(() => {
+    return {
+      add: '新增数据',
+      edit: '编辑数据',
+      delete: '确认删除'
+    }[modalAction.value];
+  });
+
+  const formState = reactive({
+    content: '',
+    remark: ''
+  });
+
+  // 生成列（24小时）
+  const columns = [
+    {
+      title: '',
+      dataIndex: 'minute',
+      key: 'minute',
+      width: '50px',
+      fixed: 'left',
+      align: 'center',
+    }
+  ];
+  
+  // 添加小时列
+  for (let hour = 0; hour < 24; hour++) {
+    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 = {
+      let row: DataRow = {
         key: minute,
         minute: `${minute.toString().padStart(2, '0')}分`
-      };
+      } as DataRow;
       
-      // 为每个小时添加单元格
       for (let hour = 0; hour < 24; hour++) {
-        row[`hour_${hour}`] = `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`;
+        row[`hour_${hour}`] = '';
       }
       
-      dataSource.push(row);
+      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 init(record) {
-    console.log("🚀 ~ init ~ record:", record)
-  }
+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(){
+  console.log("🚀 ~ handleSaveBach ~ dataSource:", dataSource)
+}
+
+  function init(record: any) {
+    customerInfo.value = record;
+    console.log("初始化数据:", record);
+    getData(record)
+  }
 
   defineExpose({
     init
@@ -89,44 +340,63 @@ const dataSource: DataRow[] = [];
 
 <style lang="less" scoped>
   .hllcClass {
-  background: white;width:100%;height:100vh;padding: 14px;border-radius: 8px; 
+    background: white;
+    width: 100%;
+    height: calc(100vh - 200px);
+    padding: 14px;
+    border-radius: 8px; 
+    position: relative;
+  }
+  
+  /* 斑马纹样式 */
+  :deep(.ant-table) {
+    .even-row {
+      background-color: #fafafa;
+    }
+    .odd-row {
+      background-color: #ffffff;
+    }
+    
+    /* 单元格悬停效果 */
+    .ant-table-tbody > tr > td {
+      &:hover {
+        background-color: #e6f7ff !important;
+        cursor: pointer;
+      }
+    }
+    
+    /* 有数据的单元格样式 */
+    .has-data {
+      background-color: #f6ffed;
+    }
   }
 
-/* 基础样式 */
-.ant-table-small .ant-table-thead > tr > th {
-  padding: 8px;
-  background-color: #f0f0f0;
-  font-weight: bold;
+  /* 右键菜单样式 */
+  .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行 */
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
-.ant-table-small .ant-table-tbody > tr > td {
-  padding: 8px;
-}
-
-/* 斑马纹行样式 */
-.ant-table-tbody > tr.even-row > td {
-  background-color: #222121;
-}
-.ant-table-tbody > tr.odd-row > td {
-  background-color: #ffffff;
-}
-
-/* 斑马纹列样式 */
-.ant-table-tbody > tr > td.even-column {
-  background-color: rgba(230, 247, 255, 0.5);
-}
-.ant-table-tbody > tr > td.odd-column {
-  background-color: rgba(255, 255, 255, 0.5);
-}
-
-/* 表头单元格样式 */
-.ant-table-tbody > tr > td.header-cell {
-  background-color: #f0f0f0;
-  font-weight: bold;
-}
-
-/* 确保斑马纹效果叠加时保持可见 */
-.ant-table-tbody > tr.even-row > td.even-column {
-  background-color: rgba(20, 65, 102, 0.7);
-}
-
-</style>
+</style>