[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

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({
+      state.uploadFormRef.validate()
-        trigger: 'input'
-      })
     }
 
     const handleFile = () => {
@@ -55,6 +54,7 @@ export default defineComponent({
 
     const removeFile = () => {
       state.uploadForm.name = ''
+      state.uploadForm.file = ''
     }
 
     return {

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

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')}

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')}

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
   })

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
     }
   }