From 863f8cf5ce481bbeb78ff3f67b84b1f7c1df4c41 Mon Sep 17 00:00:00 2001
From: xlsea <m@xlsea.cn>
Date: Tue, 9 Jul 2024 11:20:14 +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=E7=BB=93=E6=9E=9C=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 | 66 ++++++++++++++++++-
 src/components/common/search-form.vue         |  4 +-
 src/locales/langs/zh-cn.ts                    |  2 +-
 3 files changed, 66 insertions(+), 6 deletions(-)

diff --git a/src/components/common/job-task-list-table.vue b/src/components/common/job-task-list-table.vue
index fa1c8a8..87a0db5 100644
--- a/src/components/common/job-task-list-table.vue
+++ b/src/components/common/job-task-list-table.vue
@@ -6,7 +6,7 @@ import json from 'highlight.js/lib/languages/json';
 import { ref, render } from 'vue';
 import { taskStatusRecord, taskStatusRecordOptions } from '@/constants/business';
 import { $t } from '@/locales';
-import { parseArgsJson, translateOptions } from '@/utils/common';
+import { isNotNull, parseArgsJson, translateOptions } from '@/utils/common';
 import { useTable } from '@/hooks/common/table';
 import { fetchGetJobTaskList, fetchGetJobTaskTree } from '@/service/api';
 
@@ -36,6 +36,7 @@ const emit = defineEmits<Emits>();
 const expandedRowKeys = ref<DataTableRowKey[]>([]);
 
 const argsDomMap = ref<Map<string, boolean>>(new Map());
+const resultDomMap = ref<Map<string, boolean>>(new Map());
 
 const { columns, searchParams, columnChecks, data, getData, loading, mobilePagination } = useTable({
   apiFn: fetchGetJobTaskList,
@@ -138,6 +139,11 @@ const { columns, searchParams, columnChecks, data, getData, loading, mobilePagin
         );
 
         const handleView = () => {
+          if (resultDomMap.value.get(row.id)) {
+            const tr = document.querySelector(`#job-task-result-${row.id}`);
+            tr?.remove();
+            resultDomMap.value.set(row.id, false);
+          }
           if (argsDomMap.value.get(row.id)) {
             return;
           }
@@ -166,7 +172,7 @@ const { columns, searchParams, columnChecks, data, getData, loading, mobilePagin
                 <span class="w-28px ws-break-spaces">{`收起`}</span>
               </NButton>
             ) : (
-              <NButton type="primary" text onClick={() => handleView()}>
+              <NButton type="primary" text disabled={!isNotNull(row.argsStr)} onClick={() => handleView()}>
                 <span class="w-28px ws-break-spaces">{`查看\n参数`}</span>
               </NButton>
             )}
@@ -178,7 +184,61 @@ const { columns, searchParams, columnChecks, data, getData, loading, mobilePagin
       key: 'resultMessage',
       title: $t('page.jobBatch.jobTask.resultMessage'),
       align: 'left',
-      minWidth: 120
+      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 ${String(row.parentId) !== '0' ? 'pl-36px' : ''}`}
+              hljs={hljs}
+              code={row.resultMessage}
+              language="json"
+              show-line-numbers
+            />
+          </td>
+        );
+
+        const handleView = () => {
+          if (argsDomMap.value.get(row.id)) {
+            const tr = document.querySelector(`#job-task-args-${row.id}`);
+            tr?.remove();
+            argsDomMap.value.set(row.id, false);
+          }
+          if (resultDomMap.value.get(row.id)) {
+            return;
+          }
+          const tr = document.querySelector(`#job-task-${row.id}`);
+          const argsTr = document.createElement('tr');
+          argsTr.setAttribute('id', `job-task-result-${row.id}`);
+          argsTr.setAttribute('class', 'n-data-table-tr n-data-table-tr--expanded');
+          tr?.after(argsTr);
+          render(argsDom(), argsTr!);
+          resultDomMap.value.set(row.id, true);
+        };
+
+        const handleClose = () => {
+          if (!resultDomMap.value.get(row.id)) {
+            return;
+          }
+          const tr = document.querySelector(`#job-task-result-${row.id}`);
+          tr?.remove();
+          resultDomMap.value.set(row.id, false);
+        };
+
+        return (
+          <>
+            {resultDomMap.value.get(row.id) ? (
+              <NButton type="primary" text onClick={() => handleClose()}>
+                <span class="w-28px ws-break-spaces">{`收起`}</span>
+              </NButton>
+            ) : (
+              <NButton type="primary" text disabled={!isNotNull(row.resultMessage)} onClick={() => handleView()}>
+                <span class="w-28px ws-break-spaces">{`查看\n结果`}</span>
+              </NButton>
+            )}
+          </>
+        );
+      }
     },
     {
       key: 'retryCount',
diff --git a/src/components/common/search-form.vue b/src/components/common/search-form.vue
index 78dbf74..c2c8601 100644
--- a/src/components/common/search-form.vue
+++ b/src/components/common/search-form.vue
@@ -41,8 +41,8 @@ async function search() {
 }
 
 const btnSpan = computed(() => {
-  const keyNum = Object.keys(props.model).length - 1;
-  return props.btnSpan || (keyNum % 4 !== 0 ? `24 m:12 m:${(4 - ((keyNum - 1) % 4)) * 6}` : '24');
+  const keyNum = Object.keys(props.model).length - 2;
+  return props.btnSpan || (keyNum % 4 !== 0 ? `24 m:12 m:${(4 - (keyNum % 4)) * 6}` : '24');
 });
 </script>
 
diff --git a/src/locales/langs/zh-cn.ts b/src/locales/langs/zh-cn.ts
index c56e91d..18ae387 100644
--- a/src/locales/langs/zh-cn.ts
+++ b/src/locales/langs/zh-cn.ts
@@ -304,7 +304,7 @@ const local: App.I18n.Schema = {
       resetSuccessMsg: '重置成功'
     },
     watermark: {
-      visible: '开启',
+      visible: '开启水印',
       text: '水印文字'
     }
   },