[Fix][UI Next][V1.0.0-Alpha] Fix the scale of the table on the task instance page is out of balance. (#9006)

dolphinscheduler-ui-next/src/views/projects/task/instance/index.tsx

@@ -182,7 +182,11 @@ const TaskInstance = defineComponent({
           </NSpace>
         </NCard>
         <Card class={styles['table-card']}>
-          <NDataTable columns={this.columns} data={this.tableData} />
+          <NDataTable
+            columns={this.columns}
+            data={this.tableData}
+            scrollX={1800}
+          />
           <div class={styles.pagination}>
             <NPagination
               v-model:page={this.page}

dolphinscheduler-ui-next/src/views/projects/task/instance/use-table.ts

@@ -73,7 +73,6 @@ export function useTable() {
       {
         title: t('project.task.workflow_instance'),
         key: 'processInstanceName',
-        width: 250,
         render: (row: {
           processInstanceId: number
           processInstanceName: string
@@ -106,18 +105,15 @@ export function useTable() {
       },
       {
         title: t('project.task.submit_time'),
-        key: 'submitTime',
+        key: 'submitTime'
-        width: 170
       },
       {
         title: t('project.task.start_time'),
-        key: 'startTime',
+        key: 'startTime'
-        width: 170
       },
       {
         title: t('project.task.end_time'),
-        key: 'endTime',
+        key: 'endTime'
-        width: 170
       },
       {
         title: t('project.task.duration'),
@@ -134,13 +130,13 @@ export function useTable() {
       },
       {
         title: t('project.task.host'),
-        key: 'host',
+        key: 'host'
-        width: 160
       },
       {
         title: t('project.task.operation'),
         key: 'operation',
         width: 150,
+        fixed: 'right',
         render(row: any) {
           return h(NSpace, null, {
             default: () => [

dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/dag-auto-layout-modal.tsx

@@ -67,12 +67,7 @@ export default defineComponent({
         onCancel={cancel}
         autoFocus={false}
       >
-        <NForm
+        <NForm model={formValue.value} rules={{}} size='medium' ref={formRef}>
-          model={formValue.value}
-          rules={{}}
-          size='medium'
-          ref={formRef}
-        >
           <NFormItem label={t('project.dag.layout_type')} path='type'>
             <NRadioGroup
               v-model={[formValue.value.type, 'value']}

dolphinscheduler-ui-next/src/views/projects/workflow/definition/components/copy-modal.tsx

@@ -92,10 +92,7 @@ export default defineComponent({
         onConfirm={this.handleCopy}
         confirmLoading={this.saving}
       >
-        <NForm
+        <NForm rules={this.copyRules} ref='copyFormRef'>
-          rules={this.copyRules}
-          ref='copyFormRef'
-        >
           <NFormItem
             label={t('project.workflow.project_name')}
             path='projectCode'

dolphinscheduler-ui-next/src/views/projects/workflow/definition/components/import-modal.tsx

@@ -69,10 +69,7 @@ export default defineComponent({
         onConfirm={this.handleImport}
         confirmLoading={this.saving}
       >
-        <NForm
+        <NForm rules={this.importRules} ref='importFormRef'>
-          rules={this.importRules}
-          ref='importFormRef'
-        >
           <NFormItem label={t('project.workflow.upload_file')} path='file'>
             <NButton>
               <NUpload

dolphinscheduler-ui-next/src/views/resource/file/folder/index.tsx

@@ -63,10 +63,7 @@ export default defineComponent({
         cancelClassName='btn-cancel'
         confirmLoading={this.saving}
       >
-        <NForm
+        <NForm rules={this.rules} ref='folderFormRef'>
-          rules={this.rules}
-          ref='folderFormRef'
-        >
           <NFormItem label={t('resource.file.folder_name')} path='name'>
             <NInput
               v-model={[this.folderForm.name, 'value']}

dolphinscheduler-ui-next/src/views/resource/file/rename/index.tsx

@@ -79,10 +79,7 @@ export default defineComponent({
         cancelClassName='btn-cancel'
         confirmLoading={this.saving}
       >
-        <NForm
+        <NForm rules={this.rules} ref='renameFormRef'>
-          rules={this.rules}
-          ref='renameFormRef'
-        >
           <NFormItem label={t('resource.file.name')} path='name'>
             <NInput
               v-model={[this.renameForm.name, 'value']}

dolphinscheduler-ui-next/src/views/resource/file/upload/index.tsx

@@ -69,10 +69,7 @@ export default defineComponent({
         cancelClassName='btn-cancel'
         confirmLoading={this.saving}
       >
-        <NForm
+        <NForm rules={this.rules} ref='uploadFormRef'>
-          rules={this.rules}
-          ref='uploadFormRef'
-        >
           <NFormItem label={t('resource.file.file_name')} path='name'>
             <NInput
               v-model={[this.uploadForm.name, 'value']}

dolphinscheduler-ui-next/src/views/resource/udf/function/components/function-modal.tsx

@@ -128,10 +128,7 @@ export default defineComponent({
         cancelClassName='btn-cancel'
         confirmLoading={this.saving}
       >
-        <NForm
+        <NForm rules={this.rules} ref='functionFormRef'>
-          rules={this.rules}
-          ref='functionFormRef'
-        >
           <NFormItem label={t('resource.function.type')} path='type'>
             <NRadioGroup
               v-model={[this.functionForm.type, 'value']}
@@ -189,10 +186,7 @@ export default defineComponent({
             </NInputGroup>
           </NFormItem>
           {this.uploadShow && (
-            <NForm
+            <NForm rules={this.uploadRules} ref='uploadFormRef'>
-              rules={this.uploadRules}
-              ref='uploadFormRef'
-            >
               <NFormItem
                 label={t('resource.function.udf_resources_directory')}
                 path='pid'

dolphinscheduler-ui-next/src/views/resource/udf/resource/components/folder-modal.tsx

@@ -83,10 +83,7 @@ export default defineComponent({
         cancelClassName='btn-cancel'
         confirmLoading={this.saving}
       >
-        <NForm
+        <NForm rules={this.rules} ref='folderFormRef'>
-          rules={this.rules}
-          ref='folderFormRef'
-        >
           <NFormItem label={t('resource.udf.folder_name')} path='name'>
             <NInput
               v-model={[this.folderForm.name, 'value']}

dolphinscheduler-ui-next/src/views/resource/udf/resource/components/upload-modal.tsx

@@ -70,10 +70,7 @@ export default defineComponent({
         cancelClassName='btn-cancel'
         confirmLoading={this.saving}
       >
-        <NForm
+        <NForm rules={this.rules} ref='uploadFormRef'>
-          rules={this.rules}
-          ref='uploadFormRef'
-        >
           <NFormItem label={t('resource.udf.file_name')} path='name'>
             <NInput
               v-model={[this.uploadForm.name, 'value']}

dolphinscheduler-ui-next/src/views/security/alarm-instance-manage/detail.tsx

@@ -15,13 +15,7 @@
  * limitations under the License.
  */
 
-import {
+import { defineComponent, toRefs, watch, onMounted, ref } from 'vue'
-  defineComponent,
-  toRefs,
-  watch,
-  onMounted,
-  ref
-} from 'vue'
 import { NSelect, NInput } from 'naive-ui'
 import { isFunction } from 'lodash'
 import { useI18n } from 'vue-i18n'