[Feature][UI Next] Fix a few bug with workflow manage (#8360)

* fix workflow define international bug * fix workflow name link font color * fix operation tooltip display bug
2022-02-13 19:21:12 +08:00 · 2022-02-13 19:21:12 +08:00 · 9e9edbfe27
parent 3f6caef08f
commit 9e9edbfe27
5 changed files with 147 additions and 121 deletions
--- a/dolphinscheduler-ui-next/src/locales/modules/en_US.ts
+++ b/dolphinscheduler-ui-next/src/locales/modules/en_US.ts
@ -384,7 +384,8 @@ const project = {
    start: 'Start',
    timing: 'Timing',
    timezone: 'Timezone',
-    upline: 'Online',
+    up_line: 'Online',
+    down_line: 'Offline',
    copy_workflow: 'Copy Workflow',
    cron_manage: 'Cron manage',
    delete: 'Delete',
--- a/dolphinscheduler-ui-next/src/views/projects/workflow/definition/components/table-action.tsx
+++ b/dolphinscheduler-ui-next/src/views/projects/workflow/definition/components/table-action.tsx
@ -131,6 +131,7 @@ export default defineComponent({
              <NButton
                size='tiny'
                type='primary'
+                tag='div'
                circle
                onClick={this.handleStartWorkflow}
                disabled={releaseState === 'OFFLINE'}
@ -168,6 +169,7 @@ export default defineComponent({
              <NButton
                size='tiny'
                type={releaseState === 'ONLINE' ? 'warning' : 'error'}
+                tag='div'
                circle
                onClick={this.handleReleaseWorkflow}
              >
@ -227,6 +229,7 @@ export default defineComponent({
              <NButton
                size='tiny'
                type='error'
+                tag='div'
                circle
                disabled={releaseState === 'ONLINE'}
              >
--- a/dolphinscheduler-ui-next/src/views/projects/workflow/definition/index.module.scss
+++ b/dolphinscheduler-ui-next/src/views/projects/workflow/definition/index.module.scss
@ -86,3 +86,11 @@
    width: 86%;
  }
 }
+
+.links {
+  color: #2080f0;
+  text-decoration: none;
+  &:hover {
+    text-decoration: underline;
+  }
+}
--- a/dolphinscheduler-ui-next/src/views/projects/workflow/definition/index.tsx
+++ b/dolphinscheduler-ui-next/src/views/projects/workflow/definition/index.tsx
@ -25,7 +25,7 @@ import {
  NPagination,
  NSpace
 } from 'naive-ui'
-import { defineComponent, onMounted, toRefs } from 'vue'
+import { defineComponent, onMounted, toRefs, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useTable } from './use-table'
 import ImportModal from './components/import-modal'
@ -43,7 +43,7 @@ export default defineComponent({
    const route = useRoute()
    const projectCode = Number(route.params.projectCode)

-    const { variables, getTableData } = useTable()
+    const { variables, createColumns, getTableData } = useTable()

    const requestData = () => {
      getTableData({
@ -73,7 +73,12 @@ export default defineComponent({
      })
    }

+    watch(useI18n().locale, () => {
+      createColumns(variables)
+    })
+
    onMounted(() => {
+      createColumns(variables)
      requestData()
    })

--- a/dolphinscheduler-ui-next/src/views/projects/workflow/definition/use-table.tsx
+++ b/dolphinscheduler-ui-next/src/views/projects/workflow/definition/use-table.tsx
@ -17,7 +17,7 @@

 import { h, ref, reactive } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { useRouter, RouterLink } from 'vue-router'
+import { useRouter } from 'vue-router'
 import type { Router } from 'vue-router'
 import type { TableColumns } from 'naive-ui/es/data-table/src/interface'
 import { useAsyncState } from '@vueuse/core'
@ -38,109 +38,132 @@ export function useTable() {
  const { t } = useI18n()
  const router: Router = useRouter()

-  const columns: TableColumns<any> = [
-    {
-      title: t('project.workflow.id'),
-      key: 'id',
-      width: 50,
-      render: (_row, index) => index + 1
-    },
-    {
-      title: t('project.workflow.workflow_name'),
-      key: 'name',
-      width: 200,
-      render: (_row) => (
-        <NEllipsis
-          style={{
-            maxWidth: '200px'
-          }}
-        >
-          <RouterLink
-            to={{
-              path: `/projects/${_row.projectCode}/workflow/definitions/${_row.code}`
-            }}
-          >
-            {_row.name}
-          </RouterLink>
-        </NEllipsis>
-      )
-    },
-    {
-      title: t('project.workflow.status'),
-      key: 'releaseState',
-      render: (_row) =>
-        _row.releaseState === 'ONLINE'
-          ? t('project.workflow.up_line')
-          : t('project.workflow.down_line')
-    },
-    {
-      title: t('project.workflow.create_time'),
-      key: 'createTime',
-      width: 150
-    },
-    {
-      title: t('project.workflow.update_time'),
-      key: 'updateTime',
-      width: 150
-    },
-    {
-      title: t('project.workflow.description'),
-      key: 'description'
-    },
-    {
-      title: t('project.workflow.create_user'),
-      key: 'userName'
-    },
-    {
-      title: t('project.workflow.modify_user'),
-      key: 'modifyBy'
-    },
-    {
-      title: t('project.workflow.schedule_publish_status'),
-      key: 'scheduleReleaseState',
-      render: (_row) => {
-        if (_row.scheduleReleaseState === 'ONLINE') {
-          return h(
-            NTag,
-            { type: 'success', size: 'small' },
-            {
-              default: () => t('project.workflow.up_line')
-            }
-          )
-        } else if (_row.scheduleReleaseState === 'OFFLINE') {
-          return h(
-            NTag,
-            { type: 'warning', size: 'small' },
-            {
-              default: () => t('project.workflow.down_line')
-            }
-          )
-        } else {
-          return '-'
-        }
-      }
-    },
-    {
-      title: t('project.workflow.operation'),
-      key: 'operation',
-      width: 300,
-      fixed: 'right',
-      className: styles.operation,
-      render: (row) =>
-        h(TableAction, {
-          row,
-          onStartWorkflow: () => startWorkflow(row),
-          onTimingWorkflow: () => timingWorkflow(row),
-          onVersionWorkflow: () => versionWorkflow(row),
-          onDeleteWorkflow: () => deleteWorkflow(row),
-          onReleaseWorkflow: () => releaseWorkflow(row),
-          onCopyWorkflow: () => copyWorkflow(row),
-          onExportWorkflow: () => exportWorkflow(row),
-          onGotoTimingManage: () => gotoTimingManage(row)
-        })
-    }
-  ]
+  const variables = reactive({
+    columns: [],
+    row: {},
+    tableData: [],
+    projectCode: ref(Number(router.currentRoute.value.params.projectCode)),
+    page: ref(1),
+    pageSize: ref(10),
+    searchVal: ref(),
+    totalPage: ref(1),
+    showRef: ref(false),
+    startShowRef: ref(false),
+    timingShowRef: ref(false),
+    versionShowRef: ref(false)
+  })

+  const createColumns = (variables: any) => {
+    variables.columns = [
+      {
+        title: t('project.workflow.id'),
+        key: 'id',
+        width: 50,
+        render: (row, index) => index + 1
+      },
+      {
+        title: t('project.workflow.workflow_name'),
+        key: 'name',
+        width: 200,
+        render: (row) =>
+          h(
+            NEllipsis,
+            { style: 'max-width: 200px; color: #2080f0' },
+            {
+              default: () =>
+                h(
+                  'a',
+                  {
+                    href: 'javascript:',
+                    class: styles.links,
+                    onClick: () =>
+                      router.push({
+                        name: 'workflow-definition-detail',
+                        params: { code: row.code }
+                      })
+                  },
+                  row.name
+                ),
+              tooltip: () => row.name
+            }
+          )
+      },
+      {
+        title: t('project.workflow.status'),
+        key: 'releaseState',
+        render: (row) =>
+          row.releaseState === 'ONLINE'
+            ? t('project.workflow.up_line')
+            : t('project.workflow.down_line')
+      },
+      {
+        title: t('project.workflow.create_time'),
+        key: 'createTime',
+        width: 150
+      },
+      {
+        title: t('project.workflow.update_time'),
+        key: 'updateTime',
+        width: 150
+      },
+      {
+        title: t('project.workflow.description'),
+        key: 'description'
+      },
+      {
+        title: t('project.workflow.create_user'),
+        key: 'userName'
+      },
+      {
+        title: t('project.workflow.modify_user'),
+        key: 'modifyBy'
+      },
+      {
+        title: t('project.workflow.schedule_publish_status'),
+        key: 'scheduleReleaseState',
+        render: (row) => {
+          if (row.scheduleReleaseState === 'ONLINE') {
+            return h(
+              NTag,
+              { type: 'success', size: 'small' },
+              {
+                default: () => t('project.workflow.up_line')
+              }
+            )
+          } else if (row.scheduleReleaseState === 'OFFLINE') {
+            return h(
+              NTag,
+              { type: 'warning', size: 'small' },
+              {
+                default: () => t('project.workflow.down_line')
+              }
+            )
+          } else {
+            return '-'
+          }
+        }
+      },
+      {
+        title: t('project.workflow.operation'),
+        key: 'operation',
+        width: 300,
+        fixed: 'right',
+        className: styles.operation,
+        render: (row) =>
+          h(TableAction, {
+            row,
+            onStartWorkflow: () => startWorkflow(row),
+            onTimingWorkflow: () => timingWorkflow(row),
+            onVersionWorkflow: () => versionWorkflow(row),
+            onDeleteWorkflow: () => deleteWorkflow(row),
+            onReleaseWorkflow: () => releaseWorkflow(row),
+            onCopyWorkflow: () => copyWorkflow(row),
+            onExportWorkflow: () => exportWorkflow(row),
+            onGotoTimingManage: () => gotoTimingManage(row)
+          })
+      }
+    ] as TableColumns<any>
+  }
  const startWorkflow = (row: any) => {
    variables.startShowRef = true
    variables.row = row
@ -258,21 +281,6 @@ export function useTable() {
    })
  }

-  const variables = reactive({
-    columns,
-    row: {},
-    tableData: [],
-    projectCode: ref(Number(router.currentRoute.value.params.projectCode)),
-    page: ref(1),
-    pageSize: ref(10),
-    searchVal: ref(),
-    totalPage: ref(1),
-    showRef: ref(false),
-    startShowRef: ref(false),
-    timingShowRef: ref(false),
-    versionShowRef: ref(false)
-  })
-
  const getTableData = (params: IDefinitionParam) => {
    const { state } = useAsyncState(
      queryListPaging({ ...params }, variables.projectCode).then((res: any) => {
@ -288,6 +296,7 @@ export function useTable() {

  return {
    variables,
+    createColumns,
    getTableData
  }
 }