From 6880a729843ece98b070ccd8d89a24886c89053a Mon Sep 17 00:00:00 2001
From: rockfang <657297417@qq.com>
Date: Thu, 14 Jul 2022 16:17:06 +0800
Subject: [PATCH] [Fix-10890] fix some bugs in the Resource page (#10907)

* [Fix-10890] fix some bugs in the Resource page

* fix: cancel the unnecessary verifications and reset the form when canceling FileUploadModal

* fix: use se `resetForm` method to reset the form
---
 .../src/views/resource/file/upload/index.tsx    |  6 +++---
 .../udf/function/components/function-modal.tsx  |  2 +-
 .../udf/resource/components/folder-modal.tsx    | 17 ++++++++++++++---
 .../udf/resource/components/upload-modal.tsx    |  9 +++++++++
 .../udf/resource/components/use-form.ts         |  9 +++++++++
 .../udf/resource/components/use-modal.ts        |  2 +-
 6 files changed, 37 insertions(+), 8 deletions(-)

diff --git a/dolphinscheduler-ui/src/views/resource/file/upload/index.tsx b/dolphinscheduler-ui/src/views/resource/file/upload/index.tsx
index b2aee1fabe..9da3228d86 100644
--- a/dolphinscheduler-ui/src/views/resource/file/upload/index.tsx
+++ b/dolphinscheduler-ui/src/views/resource/file/upload/index.tsx
@@ -38,15 +38,14 @@ export default defineComponent({
     const { handleUploadFile } = useUpload(state)
 
     const hideModal = () => {
+      resetForm()
       ctx.emit('update:show')
     }
 
     const customRequest = ({ file }: any) => {
       state.uploadForm.name = file.name
       state.uploadForm.file = file.file
-      state.uploadFormNameRef.validate({
-        trigger: 'input'
-      })
+      state.uploadFormRef.validate()
     }
 
     const handleFile = () => {
@@ -55,6 +54,7 @@ export default defineComponent({
 
     const removeFile = () => {
       state.uploadForm.name = ''
+      state.uploadForm.file = ''
     }
 
     return {
diff --git a/dolphinscheduler-ui/src/views/resource/udf/function/components/function-modal.tsx b/dolphinscheduler-ui/src/views/resource/udf/function/components/function-modal.tsx
index 0b19e27dc9..9aaf3e310b 100644
--- a/dolphinscheduler-ui/src/views/resource/udf/function/components/function-modal.tsx
+++ b/dolphinscheduler-ui/src/views/resource/udf/function/components/function-modal.tsx
@@ -92,7 +92,7 @@ export default defineComponent({
       () => props.row,
       () => {
         variables.uploadShow = false
-        state.functionForm.type = props.row.type
+        state.functionForm.type = props.row.type || 'HIVE'
         state.functionForm.funcName = props.row.funcName
         state.functionForm.className = props.row.className
         state.functionForm.resourceId = props.row.resourceId || -1
diff --git a/dolphinscheduler-ui/src/views/resource/udf/resource/components/folder-modal.tsx b/dolphinscheduler-ui/src/views/resource/udf/resource/components/folder-modal.tsx
index f717c79d77..be13ace5c8 100644
--- a/dolphinscheduler-ui/src/views/resource/udf/resource/components/folder-modal.tsx
+++ b/dolphinscheduler-ui/src/views/resource/udf/resource/components/folder-modal.tsx
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { defineComponent, toRefs, PropType, watch } from 'vue'
+import { defineComponent, toRefs, PropType, watch, computed } from 'vue'
 import { NForm, NFormItem, NInput } from 'naive-ui'
 import { useI18n } from 'vue-i18n'
 import Modal from '@/components/modal'
@@ -62,8 +62,10 @@ export default defineComponent({
         state.folderForm.description = props.row.description
       }
     )
+    const fileEdit = computed(() => props.row.id && !props.row.directory)
 
     return {
+      fileEdit,
       hideModal,
       handleCreate,
       handleRename,
@@ -76,7 +78,9 @@ export default defineComponent({
     return (
       <Modal
         show={this.$props.show}
-        title={t('resource.udf.create_folder')}
+        title={
+          this.row.id ? t('resource.udf.edit') : t('resource.udf.create_folder')
+        }
         onCancel={this.hideModal}
         onConfirm={this.row.id ? this.handleRename : this.handleCreate}
         confirmClassName='btn-submit'
@@ -84,7 +88,14 @@ export default defineComponent({
         confirmLoading={this.saving}
       >
         <NForm rules={this.rules} ref='folderFormRef'>
-          <NFormItem label={t('resource.udf.folder_name')} path='name'>
+          <NFormItem
+            label={
+              this.fileEdit
+                ? t('resource.udf.file_name')
+                : t('resource.udf.folder_name')
+            }
+            path='name'
+          >
             <NInput
               v-model={[this.folderForm.name, 'value']}
               placeholder={t('resource.udf.enter_name_tips')}
diff --git a/dolphinscheduler-ui/src/views/resource/udf/resource/components/upload-modal.tsx b/dolphinscheduler-ui/src/views/resource/udf/resource/components/upload-modal.tsx
index fc4bf4318f..84016d8fdb 100644
--- a/dolphinscheduler-ui/src/views/resource/udf/resource/components/upload-modal.tsx
+++ b/dolphinscheduler-ui/src/views/resource/udf/resource/components/upload-modal.tsx
@@ -52,12 +52,19 @@ export default defineComponent({
     const customRequest = ({ file }: any) => {
       state.uploadForm.name = file.name
       state.uploadForm.file = file.file
+      state.uploadFormRef.validate()
+    }
+
+    const removeFile = () => {
+      state.uploadForm.name = ''
+      state.uploadForm.file = ''
     }
 
     return {
       hideModal,
       handleFolder,
       customRequest,
+      removeFile,
       ...toRefs(state)
     }
   },
@@ -93,7 +100,9 @@ export default defineComponent({
             <NUpload
               v-model={[this.uploadForm.file, 'value']}
               customRequest={this.customRequest}
+              max={1}
               class='btn-upload'
+              onRemove={this.removeFile}
             >
               <NButton>
                 {t('resource.udf.upload')}
diff --git a/dolphinscheduler-ui/src/views/resource/udf/resource/components/use-form.ts b/dolphinscheduler-ui/src/views/resource/udf/resource/components/use-form.ts
index 21c87fc6ba..af474132c7 100644
--- a/dolphinscheduler-ui/src/views/resource/udf/resource/components/use-form.ts
+++ b/dolphinscheduler-ui/src/views/resource/udf/resource/components/use-form.ts
@@ -64,6 +64,15 @@ export const useForm = () => {
             return new Error(t('resource.udf.enter_name_tips'))
           }
         }
+      },
+      file: {
+        required: true,
+        trigger: ['input', 'blur'],
+        validator() {
+          if (uploadState.uploadForm.file === '') {
+            return new Error(t('resource.file.enter_content_tips'))
+          }
+        }
       }
     } as FormRules
   })
diff --git a/dolphinscheduler-ui/src/views/resource/udf/resource/components/use-modal.ts b/dolphinscheduler-ui/src/views/resource/udf/resource/components/use-modal.ts
index b8cf902e0b..d1565cbb3e 100644
--- a/dolphinscheduler-ui/src/views/resource/udf/resource/components/use-modal.ts
+++ b/dolphinscheduler-ui/src/views/resource/udf/resource/components/use-modal.ts
@@ -105,7 +105,7 @@ export function useModal(
       ctx.emit('updateList')
       ctx.emit('update:show')
       resetUploadForm()
-    } catch (err) {
+    } finally {
       state.saving = false
     }
   }