gtsoft/gtsoft-snail-job-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(sj_map_reduce): 优化工作流批次参数详情展示方式

Browse Source
This commit is contained in:
xlsea 2024-06-21 16:46:01 +08:00
parent 07d58b8bcc
commit c2197b0088
5 changed files with 103 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -60,6 +60,7 @@
"clipboard": "2.0.11",
"dayjs": "1.11.11",
"echarts": "5.5.0",
"highlight.js": "^11.9.0",
"lodash-es": "4.17.21",
"naive-ui": "2.38.2",
"nprogress": "0.2.0",

3
pnpm-lock.yaml
View File

@ -53,6 +53,9 @@ importers:
echarts:
specifier: 5.5.0
version: 5.5.0
highlight.js:
specifier: ^11.9.0
version: 11.9.0
lodash-es:
specifier: 4.17.21
version: 4.17.21

8
src/components/common/code-mirror.vue
View File

@ -103,7 +103,13 @@ const theme = computed(() => {
watch(
() => nodeExpression.value,
val => {
emit('update:modelValue', val);
let value = val;
if (props.lang === 'json') {
try {
value = JSON.stringify(JSON.parse(val));
} catch {}
}
emit('update:modelValue', value);
}
);
</script>

53
src/components/workflow/modules/common/detail-card.vue
View File

@ -1,7 +1,9 @@
<script setup lang="tsx">
import { nextTick, ref, useSlots, watch } from 'vue';
import type { DataTableColumn } from 'naive-ui';
import { NButton, NTag } from 'naive-ui';
import { NButton, NCode, NPopover, NTag } from 'naive-ui';
import hljs from 'highlight.js/lib/core';
import json from 'highlight.js/lib/languages/json';
import { isNotNull, translateOptions } from '@/utils/common';
import {
jobExecutorEnum,
@ -19,6 +21,8 @@ defineOptions({
name: 'DetailCard'
});
hljs.registerLanguage('json', json);
interface Props {
id?: string;
ids?: string[];
@ -168,7 +172,7 @@ const columns = ref<DataTableColumn<Workflow.JobBatchType>[]>([
width: 64,
render: row => {
return (
<NButton type="info" text onClick={() => getLogRows(row)}>
<NButton type="primary" text onClick={() => getLogRows(row)}>
<span class="w-28px ws-break-spaces">{`查看\n日志`}</span>
</NButton>
);
@ -178,18 +182,21 @@ const columns = ref<DataTableColumn<Workflow.JobBatchType>[]>([
key: 'id',
title: $t('page.jobBatch.jobTask.id'),
align: 'left',
titleAlign: 'center',
minWidth: 64
},
{
key: 'groupName',
title: $t('page.jobBatch.jobTask.groupName'),
align: 'left',
minWidth: 120
titleAlign: 'center',
minWidth: 180
},
{
key: 'taskStatus',
title: $t('page.jobBatch.jobTask.taskStatus'),
align: 'left',
titleAlign: 'center',
minWidth: 80,
render: row => {
if (row.taskStatus === null) {
@ -211,7 +218,8 @@ const columns = ref<DataTableColumn<Workflow.JobBatchType>[]>([
key: 'clientInfo',
title: $t('page.jobBatch.jobTask.clientInfo'),
align: 'left',
minWidth: 120,
titleAlign: 'center',
minWidth: 150,
render: row => {
if (row.clientInfo) {
const parts = row.clientInfo?.split('@');
@ -224,25 +232,58 @@ const columns = ref<DataTableColumn<Workflow.JobBatchType>[]>([
{
key: 'argsStr',
title: $t('page.jobBatch.jobTask.argsStr'),
align: 'left',
minWidth: 120
align: 'center',
titleAlign: 'center',
minWidth: 120,
render: row => {
let argsJson = JSON.parse(row.argsStr!);
try {
if (argsJson.jobParams) {
argsJson.jobParams = JSON.parse(argsJson.jobParams.replaceAll('\\"', '"'));
}
if (argsJson.mapResult) {
argsJson.mapResult = JSON.parse(argsJson.mapResult.replaceAll('\\"', '"'));
}
} catch {}
argsJson = JSON.stringify(argsJson, null, ' ');
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={argsJson} language="json" show-line-numbers />
)
}}
</NPopover>
);
}
},
{
key: 'resultMessage',
title: $t('page.jobBatch.jobTask.resultMessage'),
align: 'left',
titleAlign: 'center',
minWidth: 120
},
{
key: 'retryCount',
title: $t('page.jobBatch.jobTask.retryCount'),
align: 'left',
titleAlign: 'center',
minWidth: 64
},
{
key: 'createDt',
title: $t('page.jobBatch.jobTask.createDt'),
align: 'left',
titleAlign: 'center',
minWidth: 120
}
]);

50
src/views/job/batch/modules/job-batch-detail-drawer.vue
View File

@ -1,5 +1,7 @@
<script setup lang="tsx">
import { NButton, NTag } from 'naive-ui';
import { NButton, NCode, NPopover, NTag } from 'naive-ui';
import hljs from 'highlight.js/lib/core';
import json from 'highlight.js/lib/languages/json';
import { onBeforeUnmount, ref } from 'vue';
import {
executorTypeRecord,
@ -17,6 +19,8 @@ defineOptions({
name: 'JobBatchDetailDrawer'
});
hljs.registerLanguage('json', json);
interface Props {
/** row data */
rowData?: Api.JobBatch.JobBatch | null;
@ -73,7 +77,7 @@ const { columns, data, loading, mobilePagination } = useTable({
key: 'groupName',
title: $t('page.jobBatch.jobTask.groupName'),
align: 'left',
minWidth: 120
minWidth: 180
},
{
key: 'taskStatus',
@ -100,7 +104,7 @@ const { columns, data, loading, mobilePagination } = useTable({
key: 'clientInfo',
title: $t('page.jobBatch.jobTask.clientInfo'),
align: 'left',
minWidth: 120,
minWidth: 150,
render: row => {
if (row.clientInfo) {
const parts = row.clientInfo?.split('@');
@ -113,8 +117,44 @@ const { columns, data, loading, mobilePagination } = useTable({
{
key: 'argsStr',
title: $t('page.jobBatch.jobTask.argsStr'),
align: 'left',
minWidth: 120
align: 'center',
titleAlign: 'center',
minWidth: 120,
render: row => {
let argsJson = JSON.parse(row.argsStr!);
try {
if (argsJson.jobParams) {
argsJson.jobParams = JSON.parse(argsJson.jobParams.replaceAll('\\"', '"'));
}
if (argsJson.mapResult) {
argsJson.mapResult = JSON.parse(argsJson.mapResult.replaceAll('\\"', '"'));
}
} catch {}
argsJson = JSON.stringify(argsJson, null, ' ');
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={argsJson}
language="json"
show-line-numbers
/>
)
}}
</NPopover>
);
}
},
{
key: 'resultMessage',