Jelajahi Sumber

fix:修复NEllipsis内嵌NTooltip导致的告警报错

Jerry Liang 1 bulan lalu
induk
melakukan
c7099159dc
1 mengubah file dengan 34 tambahan dan 27 penghapusan
  1. 34 27
      src/views/batch-download/index.vue

+ 34 - 27
src/views/batch-download/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="main-wrap flex flex-col gap-y-2 p-4">
+  <div class="main-wrap p-4 flex flex-col gap-y-2">
     <NCard>
       <div class="mb-2 flex gap-x-4">
         <NForm ref="formRef" :model="form" inline label-placement="left">
@@ -17,7 +17,7 @@
             </template>
             创建任务
           </NButton>
-          <NButton type="info" @click="handleQueryClick" :loading="isRequestLoading" :disabled="isRequestLoading">
+          <NButton type="info" :loading="isRequestLoading" :disabled="isRequestLoading" @click="handleQueryClick">
             <template #icon>
               <span class="i-ph:magnifying-glass" />
             </template>
@@ -32,17 +32,18 @@
         </div>
       </div>
       <div>
-        <NDataTable ref="dataTableRef" v-model:checked-row-keys="checkedRowKeys" :remote="true" :min-height="166.6"
+        <NDataTable
+ref="dataTableRef" v-model:checked-row-keys="checkedRowKeys" :remote="true" :min-height="166.6"
           :max-height="maxHeight" size="small" :columns="tableColumns" :data="tableData" :row-key="tableRowKey"
           :loading="isRequestLoading" striped :single-line="false" :row-props="rowProps" />
         <div class="mt-3 flex items-end justify-between">
-          <div class="flex items-center gap-x-3">
+          <div class="flex gap-x-3 items-center">
             <span>已选择&nbsp;{{ checkedRowKeys.length }}&nbsp; 条</span>
             <NButtonGroup size="small" :ghost="true">
-              <NButton :disabled="isSelectMultiple" @click="handleDownloadClick" secondary type="info">
+              <NButton :disabled="isSelectMultiple" secondary type="info" @click="handleDownloadClick">
                 下载
               </NButton>
-              <NButton :disabled="isSelectMultiple" @click="handleDeleteClick" secondary type="info">
+              <NButton :disabled="isSelectMultiple" secondary type="info" @click="handleDeleteClick">
                 删除
               </NButton>
             </NButtonGroup>
@@ -219,22 +220,28 @@ function createColumns(): DataTableColumns<BatchDownloadInfo> {
       key: 'sn',
       width: 200,
       fixed: 'left',
-      render(rowData, rowIndex) {
-        return h(NEllipsis, {
-          lineClamp: 3,
-          tooltip: {
-            placement: "right-start",   // ⬅️ Tooltip 显示在右侧
+      render(rowData) {
+        const text = rowData.sn.join('\n')
+        const summaryNode = h(
+          NEllipsis,
+          { lineClamp: 3, tooltip: false } as EllipsisProps,
+          { default: () => h('span', { style: { whiteSpace: 'pre-line' } }, text) },
+        )
+        return h(
+          NTooltip,
+          {
+            placement: 'right-start',
             style: {
-              maxHeight: "200px",       // ⬅️ 多行时滚动
-              overflowY: "auto",
-              whiteSpace: "pre-line"    // ⬅️ \n 正常换行
-            }
-          }
-        } as EllipsisProps,
+              maxHeight: '200px',
+              overflowY: 'auto',
+              whiteSpace: 'pre-line',
+            },
+          },
           {
-            default: () =>
-              h("span", { style: { whiteSpace: "pre-line" } }, rowData.sn.join("\n"))
-          })
+            trigger: () => h('div', { style: { width: '100%' } }, [summaryNode]),
+            default: () => h('span', { style: { whiteSpace: 'pre-line' } }, text),
+          },
+        )
       },
     },
     {
@@ -309,7 +316,7 @@ function createColumns(): DataTableColumns<BatchDownloadInfo> {
             },
           },
           {
-            trigger: () => summaryNode,
+            trigger: () => h('div', { style: { width: '100%' } }, [summaryNode]),
             default: () => h('span', { style: { whiteSpace: 'pre-line' } }, detailLines),
           },
         )
@@ -402,7 +409,7 @@ const tablePagination = reactive<PaginationProps>({
 
 const itemViewInfo = (info: BatchDownloadInfo) => {
   const idStr = `ID: ${info.id}`
-  const snStr = "SN:\n" + info.sn.map(sn => `\t${sn}`).join("\n")
+  const snStr = `SN:\n${  info.sn.map(sn => `\t${sn}`).join("\n")}`
   const descStr = `Description: ${info.description}`
   const periodStr = `Period: ${info.timePeriod[0]} - ${info.timePeriod[1]}`
 
@@ -415,12 +422,12 @@ const itemViewInfo = (info: BatchDownloadInfo) => {
   const updateLogStr = `\tUpdate Log: ${info.options.updateLog ? '✔️' : '❌'}`
   const settingsStr = `\tSettings: ${info.options.settings ? '✔️' : '❌'}`
 
-  const optionStr = "Options:\n" + powerFlowStr + '\n' + mqttLogsStr + '\n' + eventAlarmStr + '\n' + alarmSnapshotStr + '\n' + emsLogsStr + '\n' + faultRecordStr + '\n' + updateLogStr + '\n' + settingsStr
+  const optionStr = `Options:\n${  powerFlowStr  }\n${  mqttLogsStr  }\n${  eventAlarmStr  }\n${  alarmSnapshotStr  }\n${  emsLogsStr  }\n${  faultRecordStr  }\n${  updateLogStr  }\n${  settingsStr}`
   const progressStr = `Progress: ${info.progress}`
-  const failReasonsStr = "Fail Reasons:\n" + info.failReasons.map(fail => `\t${fail}`).join("\n")
-  let contextStr = idStr + "\n" + snStr + "\n" + descStr + "\n" + periodStr + "\n" + optionStr + "\n" + progressStr + "\n" + failReasonsStr
+  const failReasonsStr = `Fail Reasons:\n${  info.failReasons.map(fail => `\t${fail}`).join("\n")}`
+  let contextStr = `${idStr  }\n${  snStr  }\n${  descStr  }\n${  periodStr  }\n${  optionStr  }\n${  progressStr  }\n${  failReasonsStr}`
   if (info.owner !== undefined) {
-    contextStr = contextStr + "\n" + `[${['admin', ...info.owner].join(', ')}]`
+    contextStr = `${contextStr  }\n` + `[${['admin', ...info.owner].join(', ')}]`
   }
 
   drawerTitle.value = "任务详情"
@@ -451,7 +458,7 @@ const itemDelete = (id: string) => {
 
 // 批量下载
 const handleDownloadClick = () => {
-  return
+  
 }
 
 // 批量删除