From 1a7d88e84b76d0910f984490032d94b2e651cf83 Mon Sep 17 00:00:00 2001
From: songjianet <1778651752@qq.com>
Date: Fri, 18 Mar 2022 22:02:22 +0800
Subject: [PATCH] [Fix][UI Next][V1.0.0-Alpha] Fix the task definition page
 table scale imbalance problem. (#8992)

---
 .../src/components/card/index.tsx             |  14 +-
 .../projects/task/definition/use-table.ts     |   4 +-
 .../src/views/resource/file/index.tsx         | 145 +++++++++---------
 .../src/views/resource/file/types.ts          |   2 +-
 .../security/alarm-instance-manage/index.tsx  |   9 +-
 5 files changed, 83 insertions(+), 91 deletions(-)

diff --git a/dolphinscheduler-ui-next/src/components/card/index.tsx b/dolphinscheduler-ui-next/src/components/card/index.tsx
index 5f4d1c9e40..8418ffc961 100644
--- a/dolphinscheduler-ui-next/src/components/card/index.tsx
+++ b/dolphinscheduler-ui-next/src/components/card/index.tsx
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import {CSSProperties, defineComponent, PropType} from 'vue'
+import { CSSProperties, defineComponent, PropType } from 'vue'
 import { NCard } from 'naive-ui'
 
 const headerStyle = {
@@ -26,9 +26,7 @@ const contentStyle = {
   padding: '8px 10px'
 }
 
-const headerExtraStyle = {
-
-}
+const headerExtraStyle = {}
 
 const props = {
   title: {
@@ -54,9 +52,11 @@ const Card = defineComponent({
       <NCard
         title={title}
         size='small'
-        headerStyle={this.headerStyle? this.headerStyle:headerStyle}
-        headerExtraStyle={this.headerExtraStyle? this.headerExtraStyle:headerExtraStyle}
-        contentStyle={this.contentStyle? this.contentStyle:contentStyle}
+        headerStyle={this.headerStyle ? this.headerStyle : headerStyle}
+        headerExtraStyle={
+          this.headerExtraStyle ? this.headerExtraStyle : headerExtraStyle
+        }
+        contentStyle={this.contentStyle ? this.contentStyle : contentStyle}
       >
         {$slots}
       </NCard>
diff --git a/dolphinscheduler-ui-next/src/views/projects/task/definition/use-table.ts b/dolphinscheduler-ui-next/src/views/projects/task/definition/use-table.ts
index bda289709a..b013c5ed70 100644
--- a/dolphinscheduler-ui-next/src/views/projects/task/definition/use-table.ts
+++ b/dolphinscheduler-ui-next/src/views/projects/task/definition/use-table.ts
@@ -52,7 +52,6 @@ export function useTable(onEdit: Function) {
       {
         title: t('project.task.task_name'),
         key: 'taskName',
-        width: 400,
         render: (row: IRecord) =>
           h(
             ButtonLink,
@@ -64,8 +63,7 @@ export function useTable(onEdit: Function) {
       },
       {
         title: t('project.task.workflow_name'),
-        key: 'processDefinitionName',
-        width: 400
+        key: 'processDefinitionName'
       },
       {
         title: t('project.task.workflow_state'),
diff --git a/dolphinscheduler-ui-next/src/views/resource/file/index.tsx b/dolphinscheduler-ui-next/src/views/resource/file/index.tsx
index 6d3deb06e0..8f5fa305d8 100644
--- a/dolphinscheduler-ui-next/src/views/resource/file/index.tsx
+++ b/dolphinscheduler-ui-next/src/views/resource/file/index.tsx
@@ -44,7 +44,7 @@ import { useFileState } from './use-file'
 import ResourceFolderModal from './folder'
 import ResourceUploadModal from './upload'
 import ResourceRenameModal from './rename'
-import {BreadcrumbItem, IRenameFile} from './types'
+import { BreadcrumbItem, IRenameFile } from './types'
 import type { Router } from 'vue-router'
 import styles from './index.module.scss'
 import { useFileStore } from '@/store/file/file'
@@ -156,22 +156,20 @@ export default defineComponent({
       resourceListRef.value = getResourceListState(fileId.value)
     })
 
-    const breadcrumbItemsRef: Ref<Array<BreadcrumbItem> | undefined> = ref(
-        [
-          {
-            id: 1,
-            fullName: 'l1'
-          },
-          {
-            id: 2,
-            fullName: 'l2'
-          },
-          {
-            id: 4,
-            fullName: 'l3'
-          }
-        ]
-    )
+    const breadcrumbItemsRef: Ref<Array<BreadcrumbItem> | undefined> = ref([
+      {
+        id: 1,
+        fullName: 'l1'
+      },
+      {
+        id: 2,
+        fullName: 'l2'
+      },
+      {
+        id: 4,
+        fullName: 'l3'
+      }
+    ])
 
     watch(
       () => router.currentRoute.value.params.id,
@@ -199,36 +197,34 @@ export default defineComponent({
         if (newDir) {
           const id = 0
           let resource = await queryResourceById(
-              {
-                id,
-                type: 'FILE',
-                fullName: newDir
-              },
-              id
+            {
+              id,
+              type: 'FILE',
+              fullName: newDir
+            },
+            id
           )
-          breadcrumbItemsRef.value?.push({id: resource.id, fullName: dir})
+          breadcrumbItemsRef.value?.push({ id: resource.id, fullName: dir })
         } else {
-          breadcrumbItemsRef.value?.push({id: 0, fullName: 'Root'})
+          breadcrumbItemsRef.value?.push({ id: 0, fullName: 'Root' })
         }
         index = index + 1
       }
     }
 
-    onMounted(
-        () => {
-          breadcrumbItemsRef.value = []
-          if (fileId.value != -1) {
-            queryCurrentResourceById(fileId.value).then((res: ResourceFile) => {
-              if (res.fullName) {
-                const dirs = res.fullName.split('/')
-                if (dirs && dirs.length > 1) {
-                  initBreadcrumb(dirs)
-                }
-              }
-            })
+    onMounted(() => {
+      breadcrumbItemsRef.value = []
+      if (fileId.value != -1) {
+        queryCurrentResourceById(fileId.value).then((res: ResourceFile) => {
+          if (res.fullName) {
+            const dirs = res.fullName.split('/')
+            if (dirs && dirs.length > 1) {
+              initBreadcrumb(dirs)
+            }
           }
-        }
-    )
+        })
+      }
+    })
 
     return {
       fileId,
@@ -248,7 +244,7 @@ export default defineComponent({
       handleUpdatePageSize,
       pagination: paginationReactive,
       renameInfo,
-      breadcrumbItemsRef,
+      breadcrumbItemsRef
     }
   },
   render() {
@@ -300,32 +296,35 @@ export default defineComponent({
             </div>
           </div>
         </Card>
-        <Card title={t('resource.file.file_manage')} class={styles['table-card']}>
+        <Card
+          title={t('resource.file.file_manage')}
+          class={styles['table-card']}
+        >
           {{
             'header-extra': () => (
-                <NBreadcrumb separator='>' class={styles['breadcrumb']}>
-                  {
-                    this.breadcrumbItemsRef?.map((item: BreadcrumbItem) => {
-                      return (
-                          <NBreadcrumbItem href={item.id.toString()}>{item.fullName}</NBreadcrumbItem>
-                      )
-                    })
-                  }
-                </NBreadcrumb>
+              <NBreadcrumb separator='>' class={styles['breadcrumb']}>
+                {this.breadcrumbItemsRef?.map((item: BreadcrumbItem) => {
+                  return (
+                    <NBreadcrumbItem href={item.id.toString()}>
+                      {item.fullName}
+                    </NBreadcrumbItem>
+                  )
+                })}
+              </NBreadcrumb>
             ),
             default: () => (
-                <div>
-                  <NDataTable
-                      remote
-                      columns={columnsRef}
-                      data={this.resourceListRef?.value.table}
-                      striped
-                      size={'small'}
-                      class={styles['table-box']}
-                      row-class-name='items'
-                  />
-                  <div class={styles.pagination}>
-                    <NPagination
+              <div>
+                <NDataTable
+                  remote
+                  columns={columnsRef}
+                  data={this.resourceListRef?.value.table}
+                  striped
+                  size={'small'}
+                  class={styles['table-box']}
+                  row-class-name='items'
+                />
+                <div class={styles.pagination}>
+                  <NPagination
                     v-model:page={this.pagination.page}
                     v-model:pageSize={this.pagination.pageSize}
                     pageSizes={this.pagination.pageSizes}
@@ -334,26 +333,26 @@ export default defineComponent({
                     onUpdatePageSize={this.handleUpdatePageSize}
                     show-quick-jumper
                     show-size-picker
-                    />
-                  </div>
+                  />
                 </div>
+              </div>
             )
           }}
         </Card>
         <ResourceFolderModal
-            v-model:show={this.folderShowRef}
-            onUpdateList={this.updateList}
+          v-model:show={this.folderShowRef}
+          onUpdateList={this.updateList}
         />
         <ResourceUploadModal
-            v-model:show={this.uploadShowRef}
-            onUpdateList={this.updateList}
+          v-model:show={this.uploadShowRef}
+          onUpdateList={this.updateList}
         />
         <ResourceRenameModal
-            v-model:show={this.renameShowRef}
-            id={this.renameInfo.id}
-            name={this.renameInfo.name}
-            description={this.renameInfo.description}
-            onUpdateList={this.updateList}
+          v-model:show={this.renameShowRef}
+          id={this.renameInfo.id}
+          name={this.renameInfo.name}
+          description={this.renameInfo.description}
+          onUpdateList={this.updateList}
         />
       </div>
     )
diff --git a/dolphinscheduler-ui-next/src/views/resource/file/types.ts b/dolphinscheduler-ui-next/src/views/resource/file/types.ts
index 1926fb9713..72f192a14d 100644
--- a/dolphinscheduler-ui-next/src/views/resource/file/types.ts
+++ b/dolphinscheduler-ui-next/src/views/resource/file/types.ts
@@ -66,6 +66,6 @@ export interface ISetPagination {
 }
 
 export interface BreadcrumbItem {
-  id: number,
+  id: number
   fullName: string
 }
diff --git a/dolphinscheduler-ui-next/src/views/security/alarm-instance-manage/index.tsx b/dolphinscheduler-ui-next/src/views/security/alarm-instance-manage/index.tsx
index 6fdc8ddbbb..839b285ad4 100644
--- a/dolphinscheduler-ui-next/src/views/security/alarm-instance-manage/index.tsx
+++ b/dolphinscheduler-ui-next/src/views/security/alarm-instance-manage/index.tsx
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import {defineComponent, onMounted, ref, toRefs, watch} from 'vue'
+import { defineComponent, onMounted, ref, toRefs, watch } from 'vue'
 import {
   NButton,
   NInput,
@@ -143,12 +143,7 @@ const AlarmInstanceManage = defineComponent({
           }}
         </Card>
         <Card title='' class={styles['mt-8']}>
-          <NDataTable
-            columns={columns}
-            data={list}
-            loading={loading}
-            striped
-          />
+          <NDataTable columns={columns} data={list} loading={loading} striped />
           <NPagination
             page={page}
             page-size={pageSize}