From 8c2dc1f67090bca93559c44c2630a4de11a33774 Mon Sep 17 00:00:00 2001
From: xlsea <m@xlsea.cn>
Date: Mon, 8 Jul 2024 17:47:48 +0800
Subject: [PATCH] =?UTF-8?q?style(sj=5F1.1.0-beta3):=20=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E6=9F=A5=E7=9C=8B=E5=8F=82=E6=95=B0=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/job-task-list-table.vue | 74 +++++++++++++------
 src/hooks/common/table.ts                     |  4 +
 .../modules/theme-drawer/modules/page-fun.vue |  6 +-
 3 files changed, 60 insertions(+), 24 deletions(-)

diff --git a/src/components/common/job-task-list-table.vue b/src/components/common/job-task-list-table.vue
index 874345c..9dc95e7 100644
--- a/src/components/common/job-task-list-table.vue
+++ b/src/components/common/job-task-list-table.vue
@@ -1,9 +1,9 @@
 <script setup lang="tsx">
 import type { DataTableRowKey } from 'naive-ui';
-import { NButton, NCode, NPopover, NTag } from 'naive-ui';
+import { NButton, NCode, NTag } from 'naive-ui';
 import hljs from 'highlight.js/lib/core';
 import json from 'highlight.js/lib/languages/json';
-import { ref } from 'vue';
+import { ref, render } from 'vue';
 import { taskStatusRecord } from '@/constants/business';
 import { $t } from '@/locales';
 import { parseArgsJson } from '@/utils/common';
@@ -31,6 +31,8 @@ const emit = defineEmits<Emits>();
 
 const expandedRowKeys = ref<DataTableRowKey[]>([]);
 
+const argsDomMap = ref<Map<string, boolean>>(new Map());
+
 const { columns, columnChecks, data, loading, mobilePagination } = useTable({
   apiFn: fetchGetJobTaskList,
   apiParams: {
@@ -118,25 +120,52 @@ const { columns, columnChecks, data, loading, mobilePagination } = useTable({
       titleAlign: 'center',
       minWidth: 120,
       render: row => {
+        const argsDom = () => (
+          <td class="n-data-table-td n-data-table-td--last-col" colspan={columns.value.length || 9}>
+            <NCode
+              class="max-h-300px overflow-auto"
+              hljs={hljs}
+              code={parseArgsJson(row.argsStr)}
+              language="json"
+              show-line-numbers
+            />
+          </td>
+        );
+
+        const handleView = () => {
+          if (argsDomMap.value.get(row.id)) {
+            return;
+          }
+          const tr = document.querySelector(`#job-task-${row.id}`);
+          const argsTr = document.createElement('tr');
+          argsTr.setAttribute('id', `job-task-args-${row.id}`);
+          argsTr.setAttribute('class', 'n-data-table-tr n-data-table-tr--expanded');
+          tr?.after(argsTr);
+          render(argsDom(), argsTr!);
+          argsDomMap.value.set(row.id, true);
+        };
+
+        const handleClose = () => {
+          if (!argsDomMap.value.get(row.id)) {
+            return;
+          }
+          const tr = document.querySelector(`#job-task-args-${row.id}`);
+          tr?.remove();
+          argsDomMap.value.set(row.id, false);
+        };
+
         return (
-          <NPopover trigger="click">
-            {{
-              trigger: () => (
-                <NButton type="primary" text>
-                  <span class="w-28px ws-break-spaces">{`查看\n参数`}</span>
-                </NButton>
-              ),
-              default: () => (
-                <NCode
-                  class="max-h-300px overflow-auto"
-                  hljs={hljs}
-                  code={parseArgsJson(row.argsStr)}
-                  language="json"
-                  show-line-numbers
-                />
-              )
-            }}
-          </NPopover>
+          <>
+            {argsDomMap.value.get(row.id) ? (
+              <NButton type="primary" text onClick={() => handleClose()}>
+                <span class="w-28px ws-break-spaces">{`收起`}</span>
+              </NButton>
+            ) : (
+              <NButton type="primary" text onClick={() => handleView()}>
+                <span class="w-28px ws-break-spaces">{`查看\n参数`}</span>
+              </NButton>
+            )}
+          </>
         );
       }
     },
@@ -156,7 +185,7 @@ const { columns, columnChecks, data, loading, mobilePagination } = useTable({
       key: 'createDt',
       title: $t('page.jobBatch.jobTask.createDt'),
       align: 'left',
-      minWidth: 120
+      minWidth: 130
     }
   ]
 });
@@ -207,7 +236,7 @@ init();
     :data="data"
     :loading="loading"
     remote
-    :scroll-x="962"
+    :scroll-x="1000"
     :row-key="row => row.id"
     :pagination="mobilePagination"
     :indent="16"
@@ -215,6 +244,7 @@ init();
     allow-checking-not-loaded
     :expanded-row-keys="expandedRowKeys"
     class="sm:h-full"
+    :row-props="row => ({ id: `job-task-${row.id}` })"
     @update:expanded-row-keys="onExpandedRowKeys"
     @update:page="onUpdatePage"
     @load="onLoad"
diff --git a/src/hooks/common/table.ts b/src/hooks/common/table.ts
index 702f0e9..980d9a1 100644
--- a/src/hooks/common/table.ts
+++ b/src/hooks/common/table.ts
@@ -92,6 +92,10 @@ export function useTable<A extends NaiveUI.TableApiFn>(config: NaiveUI.NaiveTabl
         } else if (column.type === 'expand') {
           columnMap.set(EXPAND_KEY, column);
         }
+
+        if (isMobile.value && column.fixed) {
+          column.fixed = undefined;
+        }
       });
 
       const filteredColumns = checks
diff --git a/src/layouts/modules/theme-drawer/modules/page-fun.vue b/src/layouts/modules/theme-drawer/modules/page-fun.vue
index 00a1d0f..dd4b23e 100644
--- a/src/layouts/modules/theme-drawer/modules/page-fun.vue
+++ b/src/layouts/modules/theme-drawer/modules/page-fun.vue
@@ -10,6 +10,8 @@ defineOptions({
   name: 'PageFun'
 });
 
+const isDev = import.meta.env.DEV;
+
 const themeStore = useThemeStore();
 
 const layoutMode = computed(() => themeStore.layout.mode);
@@ -101,10 +103,10 @@ const isWrapperScrollMode = computed(() => themeStore.layout.scrollMode === 'wra
     >
       <NSwitch v-model:value="themeStore.footer.right" />
     </SettingItem>
-    <SettingItem key="8" :label="$t('theme.watermark.visible')">
+    <SettingItem v-if="isDev" key="8" :label="$t('theme.watermark.visible')">
       <NSwitch v-model:value="themeStore.watermark.visible" />
     </SettingItem>
-    <SettingItem key="8-1" :label="$t('theme.watermark.text')">
+    <SettingItem v-if="isDev" key="8-1" :label="$t('theme.watermark.text')">
       <NInput v-model:value="themeStore.watermark.text" size="small" :step="1" class="max-w-180px" />
     </SettingItem>
   </TransitionGroup>