[Refactor][UI] Refactor task definition batch stream using NSpace component. (#11485)

* [Refactor][UI] Refactor task definition batch stream using NSpace component. * [Refactor][UI] Refactor task definition batch stream using NSpace component. * [Refactor][UI] Refactor task definition batch stream using NSpace component.
2 years ago · 4d063192cd
4 changed files with 57 additions and 115 deletions
--- a/dolphinscheduler-ui/src/views/projects/task/definition/batch-task.tsx
+++ b/dolphinscheduler-ui/src/views/projects/task/definition/batch-task.tsx
@ -25,7 +25,6 @@ import {
 import { useRoute } from 'vue-router'
 import {
  NButton,
-  NCard,
  NDataTable,
  NIcon,
  NInput,
@ -42,7 +41,6 @@ import Card from '@/components/card'
 import VersionModal from './components/version-modal'
 import MoveModal from './components/move-modal'
 import TaskModal from '@/views/projects/task/components/node/detail-modal'
-import styles from './index.module.scss'
 import type { INodeData } from './types'

 const BatchTaskDefinition = defineComponent({
@ -134,15 +132,13 @@ const BatchTaskDefinition = defineComponent({
    } = this

    return (
-      <>
-        <NCard>
-          <div class={styles['search-card']}>
-            <div>
-              <NButton size='small' type='primary' onClick={onCreate}>
-                {t('project.task.create_task')}
-              </NButton>
-            </div>
-            <NSpace justify='end'>
+      <NSpace vertical>
+        <Card>
+          <NSpace justify='space-between'>
+            <NButton size='small' type='primary' onClick={onCreate}>
+              {t('project.task.create_task')}
+            </NButton>
+            <NSpace>
              <NInput
                allowInput={this.trim}
                size='small'
@ -168,36 +164,34 @@ const BatchTaskDefinition = defineComponent({
                clearable
              />
              <NButton size='small' type='primary' onClick={onSearch}>
-                {{
-                  icon: () => (
-                    <NIcon>
-                      <SearchOutlined />
-                    </NIcon>
-                  )
-                }}
+                <NIcon>
+                  <SearchOutlined />
+                </NIcon>
              </NButton>
            </NSpace>
-          </div>
-        </NCard>
-        <Card class={styles['table-card']}>
-          <NDataTable
-            loading={loadingRef}
-            columns={this.columns}
-            data={this.tableData}
-            scrollX={this.tableWidth}
-          />
-          <div class={styles.pagination}>
-            <NPagination
-              v-model:page={this.page}
-              v-model:page-size={this.pageSize}
-              page-count={this.totalPage}
-              show-size-picker
-              page-sizes={[10, 30, 50]}
-              show-quick-jumper
-              onUpdatePage={requestData}
-              onUpdatePageSize={onUpdatePageSize}
+          </NSpace>
+        </Card>
+        <Card title={t('project.task.batch_task')}>
+          <NSpace vertical>
+            <NDataTable
+              loading={loadingRef}
+              columns={this.columns}
+              data={this.tableData}
+              scrollX={this.tableWidth}
            />
-          </div>
+            <NSpace justify='center'>
+              <NPagination
+                v-model:page={this.page}
+                v-model:page-size={this.pageSize}
+                page-count={this.totalPage}
+                show-size-picker
+                page-sizes={[10, 30, 50]}
+                show-quick-jumper
+                onUpdatePage={requestData}
+                onUpdatePageSize={onUpdatePageSize}
+              />
+            </NSpace>
+          </NSpace>
        </Card>
        <VersionModal
          show={this.showVersionModalRef}
@ -221,7 +215,7 @@ const BatchTaskDefinition = defineComponent({
          readonly={this.taskReadonly}
          saving={this.taskSaving}
        />
-      </>
+      </NSpace>
    )
  }
 })
--- a/dolphinscheduler-ui/src/views/projects/task/definition/components/start-modal.tsx
+++ b/dolphinscheduler-ui/src/views/projects/task/definition/components/start-modal.tsx
@ -37,7 +37,6 @@ import {
  NSwitch
 } from 'naive-ui'
 import { DeleteOutlined, PlusCircleOutlined } from '@vicons/antd'
-import styles from '../index.module.scss'

 const props = {
  row: {
@ -161,7 +160,7 @@ export default defineComponent({
      >
        <NForm ref='startFormRef' model={this.startForm}>
          <NFormItem label={t('project.task.task_name')} path='task_name'>
-            <div class={styles.formItem} title={this.row.taskName}>
+            <div title={this.row.taskName}>
              {this.row.taskName}
            </div>
          </NFormItem>
@ -217,7 +216,7 @@ export default defineComponent({
            ) : (
              <NSpace vertical>
                {this.startParamsList.map((item, index) => (
-                  <NSpace class={styles.startup} key={Date.now() + index}>
+                  <NSpace key={Date.now() + index}>
                    <NInput
                      allowInput={this.trim}
                      pair
--- a/dolphinscheduler-ui/src/views/projects/task/definition/index.module.scss
+++ b/dolphinscheduler-ui/src/views/projects/task/definition/index.module.scss
@ -1,44 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-.search-card {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-
-  .box {
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-    width: 300px;
-
-    button,
-    input {
-      margin-left: 10px;
-    }
-  }
-}
-
-.table-card {
-  margin-top: 8px;
-
-  .pagination {
-    margin-top: 20px;
-    display: flex;
-    justify-content: center;
-  }
-}
--- a/dolphinscheduler-ui/src/views/projects/task/definition/stream-task.tsx
+++ b/dolphinscheduler-ui/src/views/projects/task/definition/stream-task.tsx
@ -27,11 +27,11 @@ import {
  NPagination
 } from 'naive-ui'
 import { useRoute } from 'vue-router'
-import Card from '@/components/card'
-import TaskModal from '@/views/projects/task/components/node/detail-modal'
 import { useTable } from './use-stream-table'
 import { useTask } from './use-task'
 import StartModal from './components/start-modal'
+import Card from '@/components/card'
+import TaskModal from '@/views/projects/task/components/node/detail-modal'
 import type { INodeData } from './types'

 const StreamTaskDefinition = defineComponent({
@ -85,33 +85,26 @@ const StreamTaskDefinition = defineComponent({
    return () => (
      <NSpace vertical>
        <Card>
-          <NSpace justify='space-between'>
-            <NSpace />
-            <NSpace>
-              <NInput
-                allowInput={trim}
-                size='small'
-                clearable
-                v-model={[variables.searchTaskName, 'value']}
-                placeholder={t('project.task.task_name')}
-              />
-              <NInput
-                allowInput={trim}
-                size='small'
-                clearable
-                v-model={[variables.searchWorkflowName, 'value']}
-                placeholder={t('project.task.workflow_name')}
-              />
-              <NButton size='small' type='primary' onClick={onSearch}>
-                {{
-                  icon: () => (
-                    <NIcon>
-                      <SearchOutlined />
-                    </NIcon>
-                  )
-                }}
-              </NButton>
-            </NSpace>
+          <NSpace justify='end'>
+            <NInput
+              allowInput={trim}
+              size='small'
+              clearable
+              v-model={[variables.searchTaskName, 'value']}
+              placeholder={t('project.task.task_name')}
+            />
+            <NInput
+              allowInput={trim}
+              size='small'
+              clearable
+              v-model={[variables.searchWorkflowName, 'value']}
+              placeholder={t('project.task.workflow_name')}
+            />
+            <NButton size='small' type='primary' onClick={onSearch}>
+              <NIcon>
+                <SearchOutlined />
+              </NIcon>
+            </NButton>
          </NSpace>
        </Card>
        <Card>