[Feature][UI Next] Add Udf resource manage (#8076)

* add resource manange

* add resource delete

* modify rename

* support sub udf resource mannage

* add Bread

* adjust style

dolphinscheduler-ui-next/src/layouts/content/index.tsx

@@ -93,7 +93,7 @@ const Content = defineComponent({
             <SideBar sideMenuOptions={this.sideMenuOptions} />
           )}
           <NLayoutContent native-scrollbar={false} style='padding: 16px 22px'>
-            <router-view />
+            <router-view key={this.$route.fullPath} />
           </NLayoutContent>
         </NLayout>
       </NLayout>

dolphinscheduler-ui-next/src/locales/modules/en_US.ts

@@ -187,6 +187,34 @@ const resource = {
     return: 'Return',
     save: 'Save'
   },
+  udf: {
+    udf_resources: 'UDF resources',
+    create_folder: 'Create Folder',
+    upload_udf_resources: 'Upload UDF Resources',
+    id: '#',
+    udf_source_name: 'UDF Resource Name',
+    whether_directory: 'Whether directory',
+    file_name: 'File Name',
+    file_size: 'File Size',
+    description: 'Description',
+    create_time: 'Create Time',
+    update_time: 'Update Time',
+    operation: 'Operation',
+    yes: 'Yes',
+    no: 'No',
+    edit: 'Edit',
+    download: 'Download',
+    delete: 'Delete',
+    delete_confirm: 'Delete?',
+    success: 'Success',
+    folder_name: 'Folder Name',
+    upload: 'Upload',
+    upload_files: 'Upload Files',
+    file_upload: 'File Upload',
+    enter_keyword_tips: 'Please enter keyword',
+    enter_name_tips: 'Please enter name',
+    enter_description_tips: 'Please enter description'
+  },
   task_group_option: {
     id: 'No.',
     manage: 'Task group manage',

dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts

@@ -189,6 +189,34 @@ const resource = {
     return: '返回',
     save: '保存'
   },
+  udf: {
+    udf_resources: 'UDF资源',
+    create_folder: '创建文件夹',
+    upload_udf_resources: '上传UDF资源',
+    id: '编号',
+    udf_source_name: 'UDF资源名称',
+    whether_directory: '是否文件夹',
+    file_name: '文件名称',
+    file_size: '文件大小',
+    description: '描述',
+    create_time: '创建时间',
+    update_time: '更新时间',
+    operation: '操作',
+    yes: '是',
+    no: '否',
+    edit: '编辑',
+    download: '下载',
+    delete: '删除',
+    success: '成功',
+    folder_name: '文件夹名称',
+    upload: '上传',
+    upload_files: '上传文件',
+    file_upload: '文件上传',
+    delete_confirm: '确定删除吗?',
+    enter_keyword_tips: '请输入关键词',
+    enter_name_tips: '请输入名称',
+    enter_description_tips: '请输入描述'
+  },
   task_group_option: {
     id: '编号',
     manage: '任务组管理',

dolphinscheduler-ui-next/src/router/modules/resources.ts

@@ -77,6 +77,22 @@ export default {
         title: '文件创建'
       }
     },
+    {
+      path: '/resource/resource-manage',
+      name: 'resource-manage',
+      component: components['resource'],
+      meta: {
+        title: '资源管理'
+      }
+    },
+    {
+      path: '/resource/resource-manage/:id',
+      name: 'resource-sub-manage',
+      component: components['resource'],
+      meta: {
+        title: '资源管理'
+      }
+    },
     {
       path: '/resource/task-group',
       name: 'task-group-manage',

dolphinscheduler-ui-next/src/service/modules/resources/index.ts

@@ -45,6 +45,17 @@ export function queryResourceListPaging(
   })
 }
 
+export function queryResourceById(
+  params: ResourceTypeReq & FullNameReq & IdReq,
+  id: number
+): any {
+  return axios({
+    url: `/resources/${id}`,
+    method: 'get',
+    params
+  })
+}
+
 export function createResource(
   data: CreateReq & FileNameReq & NameReq & ResourceTypeReq
 ): any {

dolphinscheduler-ui-next/src/views/datasource/datasource-list/index.tsx

@@ -36,8 +36,8 @@ const list = defineComponent({
   name: 'list',
   setup() {
     const { t } = useI18n()
-    let showDetailModal = ref(false)
-    let selectId = ref()
+    const showDetailModal = ref(false)
+    const selectId = ref()
 
     const { columnsRef } = useColumns((id: number, type: 'edit' | 'delete') => {
       if (type === 'edit') {

dolphinscheduler-ui-next/src/views/datasource/datasource-list/json-highlight.tsx

@@ -45,7 +45,7 @@ const syntaxHighlight = (json: string) => {
   const entries = Object.entries(JSON.parse(json))
   for (let i = 0, len = entries.length; i < len; i++) {
     const [key, value] = entries[i]
-    let type: string = ''
+    let type = ''
     if (isBoolean(value) || value === null) {
       type = 'info'
     } else if (isNumber(value)) {

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

+/*
+ * 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.
+ */
+
+import { defineComponent, toRefs, PropType, watch } from 'vue'
+import { NForm, NFormItem, NInput } from 'naive-ui'
+import { useI18n } from 'vue-i18n'
+import Modal from '@/components/modal'
+import { useForm } from './use-form'
+import { useModal } from './use-modal'
+import type { IUdf } from '../types'
+
+const props = {
+  row: {
+    type: Object as PropType<IUdf>,
+    default: {}
+  },
+  show: {
+    type: Boolean as PropType<boolean>,
+    default: false
+  }
+}
+
+export default defineComponent({
+  name: 'ResourceFileFolder',
+  props,
+  emits: ['update:show', 'updateList'],
+  setup(props, ctx) {
+    const { folderState: state } = useForm()
+
+    const { handleCreateResource, handleRenameResource } = useModal(state, ctx)
+
+    const hideModal = () => {
+      ctx.emit('update:show')
+    }
+
+    const handleCreate = () => {
+      handleCreateResource()
+    }
+
+    const handleRename = () => {
+      handleRenameResource(props.row.id)
+    }
+
+    watch(
+      () => props.row,
+      () => {
+        state.folderForm.name = props.row.alias
+        state.folderForm.description = props.row.description
+      }
+    )
+
+    return {
+      hideModal,
+      handleCreate,
+      handleRename,
+      ...toRefs(state)
+    }
+  },
+  render() {
+    const { t } = useI18n()
+
+    return (
+      <Modal
+        show={this.$props.show}
+        title={t('resource.udf.create_folder')}
+        onCancel={this.hideModal}
+        onConfirm={this.row.id ? this.handleRename : this.handleCreate}
+      >
+        <NForm
+          rules={this.rules}
+          ref='folderFormRef'
+          label-placement='left'
+          label-width='160'
+        >
+          <NFormItem label={t('resource.udf.folder_name')} path='name'>
+            <NInput
+              v-model={[this.folderForm.name, 'value']}
+              placeholder={t('resource.udf.enter_name_tips')}
+            />
+          </NFormItem>
+          <NFormItem label={t('resource.udf.description')} path='description'>
+            <NInput
+              type='textarea'
+              v-model={[this.folderForm.description, 'value']}
+              placeholder={t('resource.udf.enter_description_tips')}
+            />
+          </NFormItem>
+        </NForm>
+      </Modal>
+    )
+  }
+})

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

+/*
+ * 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.
+ */
+
+import { defineComponent, toRefs, PropType } from 'vue'
+import { NForm, NFormItem, NInput, NUpload, NButton, NIcon } from 'naive-ui'
+import { useI18n } from 'vue-i18n'
+import Modal from '@/components/modal'
+import { useForm } from './use-form'
+import { useModal } from './use-modal'
+import { CloudUploadOutlined } from '@vicons/antd'
+
+const props = {
+  show: {
+    type: Boolean as PropType<boolean>,
+    default: false
+  }
+}
+
+export default defineComponent({
+  name: 'ResourceFileFolder',
+  props,
+  emits: ['update:show', 'updateList'],
+  setup(props, ctx) {
+    const { uploadState: state } = useForm()
+    const { handleUploadFile } = useModal(state, ctx)
+
+    const hideModal = () => {
+      ctx.emit('update:show')
+    }
+
+    const handleFolder = () => {
+      handleUploadFile()
+    }
+
+    const customRequest = ({ file }: any) => {
+      state.uploadForm.name = file.name
+      state.uploadForm.file = file.file
+    }
+
+    return {
+      hideModal,
+      handleFolder,
+      customRequest,
+      ...toRefs(state)
+    }
+  },
+  render() {
+    const { t } = useI18n()
+    return (
+      <Modal
+        show={this.$props.show}
+        title={t('resource.udf.file_upload')}
+        onCancel={this.hideModal}
+        onConfirm={this.handleFolder}
+      >
+        <NForm
+          rules={this.rules}
+          ref='uploadFormRef'
+          label-placement='left'
+          label-width='160'
+        >
+          <NFormItem label={t('resource.udf.file_name')} path='name'>
+            <NInput
+              v-model={[this.uploadForm.name, 'value']}
+              placeholder={t('resource.udf.enter_name_tips')}
+            />
+          </NFormItem>
+          <NFormItem label={t('resource.udf.description')} path='description'>
+            <NInput
+              type='textarea'
+              v-model={[this.uploadForm.description, 'value']}
+              placeholder={t('resource.udf.enter_description_tips')}
+            />
+          </NFormItem>
+          <NFormItem label={t('resource.udf.upload_files')} path='file'>
+            <NUpload
+              v-model={[this.uploadForm.file, 'value']}
+              customRequest={this.customRequest}
+            >
+              <NButton>
+                {t('resource.udf.upload')}
+                <NIcon>
+                  <CloudUploadOutlined />
+                </NIcon>
+              </NButton>
+            </NUpload>
+          </NFormItem>
+        </NForm>
+      </Modal>
+    )
+  }
+})

dolphinscheduler-ui-next/src/views/resource/udf/resource/components/use-form.ts

+/*
+ * 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.
+ */
+
+import { reactive, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import type { FormRules } from 'naive-ui'
+
+export const useForm = () => {
+  const { t } = useI18n()
+
+  const folderState = reactive({
+    folderFormRef: ref(),
+    folderForm: {
+      pid: -1,
+      type: 'UDF',
+      name: '',
+      description: '',
+      currentDir: '/'
+    },
+    rules: {
+      name: {
+        required: true,
+        trigger: ['input', 'blur'],
+        validator() {
+          if (folderState.folderForm.name === '') {
+            return new Error(t('resource.udf.enter_name_tips'))
+          }
+        }
+      }
+    } as FormRules
+  })
+
+  const uploadState = reactive({
+    uploadFormRef: ref(),
+    uploadForm: {
+      name: '',
+      file: '',
+      description: '',
+      pid: -1,
+      currentDir: '/'
+    },
+    rules: {
+      name: {
+        required: true,
+        trigger: ['input', 'blur'],
+        validator() {
+          if (uploadState.uploadForm.name === '') {
+            return new Error(t('resource.udf.enter_name_tips'))
+          }
+        }
+      }
+    } as FormRules
+  })
+
+  return {
+    folderState,
+    uploadState
+  }
+}

dolphinscheduler-ui-next/src/views/resource/udf/resource/components/use-modal.ts

+/*
+ * 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.
+ */
+
+import { SetupContext } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRouter } from 'vue-router'
+import type { Router } from 'vue-router'
+import { useFileStore } from '@/store/file/file'
+import {
+  createDirectory,
+  createResource,
+  updateResource
+} from '@/service/modules/resources'
+
+export function useModal(
+  state: any,
+  ctx: SetupContext<('update:show' | 'updateList')[]>
+) {
+  const { t } = useI18n()
+  const router: Router = useRouter()
+  const fileStore = useFileStore()
+
+  const handleCreateResource = async () => {
+    const pid = router.currentRoute.value.params.id || -1
+    const currentDir = pid === -1 ? '/' : fileStore.getCurrentDir || '/'
+
+    submitRequest(
+      async () =>
+        await createDirectory({
+          ...state.folderForm,
+          ...{ pid, currentDir }
+        })
+    )
+  }
+
+  const handleRenameResource = async (id: number) => {
+    submitRequest(async () => {
+      await updateResource(
+        {
+          ...state.folderForm,
+          ...{ id }
+        },
+        id
+      )
+    })
+  }
+
+  const submitRequest = (serviceHandle: any) => {
+    state.folderFormRef.validate(async (valid: any) => {
+      if (!valid) {
+        try {
+          await serviceHandle()
+          window.$message.success(t('resource.udf.success'))
+          ctx.emit('updateList')
+          ctx.emit('update:show')
+        } catch (error: any) {
+          window.$message.error(error.message)
+        }
+      }
+    })
+  }
+
+  const resetUploadForm = () => {
+    state.uploadForm.name = ''
+    state.uploadForm.file = ''
+    state.uploadForm.description = ''
+  }
+
+  const handleUploadFile = () => {
+    state.uploadFormRef.validate(async (valid: any) => {
+      const pid = router.currentRoute.value.params.id || -1
+      const currentDir = pid === -1 ? '/' : fileStore.getCurrentDir || '/'
+      if (!valid) {
+        const formData = new FormData()
+        formData.append('file', state.uploadForm.file)
+        formData.append('type', 'UDF')
+        formData.append('name', state.uploadForm.name)
+        formData.append('pid', String(pid))
+        formData.append('currentDir', currentDir)
+        formData.append('description', state.uploadForm.description)
+
+        try {
+          await createResource(formData as any)
+          window.$message.success(t('resource.udf.success'))
+          ctx.emit('updateList')
+          ctx.emit('update:show')
+          resetUploadForm()
+        } catch (error: any) {
+          window.$message.error(error.message)
+        }
+      }
+    })
+  }
+
+  return {
+    handleCreateResource,
+    handleRenameResource,
+    handleUploadFile
+  }
+}

dolphinscheduler-ui-next/src/views/resource/udf/resource/index.module.scss

+/*
+ * 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.
+ */
+
+.content {
+  width: 100%;
+
+  .card {
+    margin-bottom: 8px;
+  }
+
+  .header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin: 10px 0;
+    .right {
+      > .search {
+        .list {
+          float: right;
+          margin: 3px 0 3px 4px;
+        }
+      }
+    }
+  }
+
+  .table {
+    table {
+      width: 100%;
+      tr {
+        height: 40px;
+        font-size: 12px;
+        th,td{
+          &:nth-child(1) {
+            width: 50px;
+            text-align: center;
+          }
+        }
+        th {
+          &:nth-child(1) {
+            width: 60px;
+            text-align: center;
+          }
+          >span {
+            font-size: 12px;
+            color: #555;
+          }
+        }
+      }
+    }
+  }
+
+  .pagination {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 20px;
+  }
+
+  .links {
+    color: #2080f0;
+    text-decoration: none;
+    &:hover {
+      text-decoration: underline;
+    }
+  }  
+}
+

dolphinscheduler-ui-next/src/views/resource/udf/resource/index.tsx

+/*
+ * 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.
+ */
+
+import { defineComponent, Ref, toRefs, onMounted, toRef } from 'vue'
+import {
+  NIcon,
+  NSpace,
+  NDataTable,
+  NButton,
+  NPagination,
+  NInput,
+  NBreadcrumb,
+  NBreadcrumbItem
+} from 'naive-ui'
+import { useI18n } from 'vue-i18n'
+import { SearchOutlined } from '@vicons/antd'
+import Card from '@/components/card'
+import FolderModal from './components/folder-modal'
+import UploadModal from './components/upload-modal'
+import { useTable } from './use-table'
+import styles from './index.module.scss'
+
+export default defineComponent({
+  name: 'resource-manage',
+  setup() {
+    const { variables, getTableData, goUdfManage, goBread } = useTable()
+
+    const requestData = () => {
+      getTableData({
+        id: variables.id,
+        pageSize: variables.pageSize,
+        pageNo: variables.page,
+        searchVal: variables.searchVal
+      })
+    }
+
+    const handleUpdateList = () => {
+      requestData()
+    }
+
+    const handleChangePageSize = () => {
+      variables.page = 1
+      requestData()
+    }
+
+    const handleSearch = () => {
+      variables.page = 1
+      requestData()
+    }
+
+    const handleShowModal = (showRef: Ref<Boolean>) => {
+      showRef.value = true
+    }
+
+    const handleCreateFolder = () => {
+      variables.row = {}
+      handleShowModal(toRef(variables, 'folderShowRef'))
+    }
+
+    const handleUploadFile = () => {
+      handleShowModal(toRef(variables, 'uploadShowRef'))
+    }
+
+    const handleBread = (index: number) => {
+      let breadName = ''
+      variables.breadList.forEach((item, i) => {
+        if (i <= index) {
+          breadName = breadName + '/' + item
+        }
+      })
+      goBread(breadName)
+    }
+
+    onMounted(() => {
+      requestData()
+    })
+
+    return {
+      goUdfManage,
+      handleBread,
+      requestData,
+      handleSearch,
+      handleUpdateList,
+      handleCreateFolder,
+      handleUploadFile,
+      handleChangePageSize,
+      ...toRefs(variables)
+    }
+  },
+  render() {
+    const { t } = useI18n()
+
+    return (
+      <div class={styles.content}>
+        <Card class={styles.card}>
+          <div class={styles.header}>
+            <NSpace>
+              <NButton type='primary' onClick={this.handleCreateFolder}>
+                {t('resource.udf.create_folder')}
+              </NButton>
+              <NButton strong secondary onClick={this.handleUploadFile}>
+                {t('resource.udf.upload_udf_resources')}
+              </NButton>
+            </NSpace>
+            <div class={styles.right}>
+              <div class={styles.search}>
+                <div class={styles.list}>
+                  <NButton type='primary' onClick={this.handleSearch}>
+                    <NIcon>
+                      <SearchOutlined />
+                    </NIcon>
+                  </NButton>
+                </div>
+                <div class={styles.list}>
+                  <NInput
+                    placeholder={t('resource.udf.enter_keyword_tips')}
+                    v-model={[this.searchVal, 'value']}
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </Card>
+        <Card title={t('resource.udf.udf_resources')}>
+          {{
+            default: () => (
+              <div>
+                <NDataTable
+                  columns={this.columns}
+                  data={this.tableData}
+                  striped
+                  size={'small'}
+                  class={styles.table}
+                />
+                <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={this.requestData}
+                    onUpdatePageSize={this.handleChangePageSize}
+                  />
+                </div>
+              </div>
+            ),
+            header: () => (
+              <NBreadcrumb separator='>'>
+                <NBreadcrumbItem>
+                  <NButton text onClick={() => this.goUdfManage()}>
+                    {t('resource.udf.udf_resources')}
+                  </NButton>
+                </NBreadcrumbItem>
+                {this.breadList.map((item, index) => (
+                  <NBreadcrumbItem>
+                    <NButton
+                      text
+                      disabled={index === this.breadList.length - 1}
+                      onClick={() => this.handleBread(index)}
+                    >
+                      {item}
+                    </NButton>
+                  </NBreadcrumbItem>
+                ))}
+              </NBreadcrumb>
+            )
+          }}
+        </Card>
+        <FolderModal
+          v-model:row={this.row}
+          v-model:show={this.folderShowRef}
+          onUpdateList={this.handleUpdateList}
+        />
+        <UploadModal
+          v-model:show={this.uploadShowRef}
+          onUpdateList={this.handleUpdateList}
+        />
+      </div>
+    )
+  }
+})

dolphinscheduler-ui-next/src/views/resource/udf/resource/types.ts

+/*
+ * 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.
+ */
+
+export interface IUdfResourceParam {
+  id: number
+  pageSize: number
+  pageNo: number
+  searchVal: string | undefined
+}
+
+export interface IUdf {
+  id: number
+  pid: number
+  userId: number
+  fileName: string
+  fullName: string
+  alias: string
+  directory: boolean
+  size: number
+  type: 'UDF'
+  description: string
+  createTime: string
+  updateTime: string
+}

dolphinscheduler-ui-next/src/views/resource/udf/resource/use-table.ts

+/*
+ * 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.
+ */
+
+import { h, ref, reactive } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRouter } from 'vue-router'
+import { bytesToSize } from '@/utils/common'
+import { useFileStore } from '@/store/file/file'
+import type { Router } from 'vue-router'
+import type { TableColumns } from 'naive-ui/es/data-table/src/interface'
+import { NSpace, NTooltip, NButton, NPopconfirm } from 'naive-ui'
+import { EditOutlined, DeleteOutlined, DownloadOutlined } from '@vicons/antd'
+import { useAsyncState } from '@vueuse/core'
+import {
+  queryResourceListPaging,
+  downloadResource,
+  deleteResource,
+  queryResourceById
+} from '@/service/modules/resources'
+import { IUdfResourceParam } from './types'
+import styles from './index.module.scss'
+
+const goSubFolder = (router: Router, item: any) => {
+  const fileStore = useFileStore()
+  fileStore.setFileInfo(`${item.alias}|${item.size}`)
+
+  if (item.directory) {
+    fileStore.setCurrentDir(`${item.fullName}`)
+    router.push({ name: 'resource-sub-manage', params: { id: item.id } })
+  }
+}
+
+export function useTable() {
+  const { t } = useI18n()
+  const router: Router = useRouter()
+  const fileStore = useFileStore()
+
+  const columns: TableColumns<any> = [
+    {
+      title: t('resource.udf.id'),
+      key: 'id',
+      width: 50,
+      render: (_row, index) => index + 1
+    },
+    {
+      title: t('resource.udf.udf_source_name'),
+      key: 'alias',
+      render: (row) => {
+        if (!row.directory) {
+          return row.alias
+        } else {
+          return h(
+            'a',
+            {
+              href: 'javascript:',
+              class: styles.links,
+              onClick: () => goSubFolder(router, row)
+            },
+            {
+              default: () => {
+                return row.alias
+              }
+            }
+          )
+        }
+      }
+    },
+    {
+      title: t('resource.udf.whether_directory'),
+      key: 'whether_directory',
+      render: (row) =>
+        row.directory ? t('resource.file.yes') : t('resource.file.no')
+    },
+    {
+      title: t('resource.udf.file_name'),
+      key: 'fileName'
+    },
+    {
+      title: t('resource.udf.file_size'),
+      key: 'size',
+      render: (row) => bytesToSize(row.size)
+    },
+    {
+      title: t('resource.udf.description'),
+      key: 'description'
+    },
+    {
+      title: t('resource.udf.create_time'),
+      key: 'createTime'
+    },
+    {
+      title: t('resource.udf.update_time'),
+      key: 'updateTime'
+    },
+    {
+      title: t('resource.udf.operation'),
+      key: 'operation',
+      render: (row) => {
+        return h(NSpace, null, {
+          default: () => [
+            h(
+              NTooltip,
+              {},
+              {
+                trigger: () =>
+                  h(
+                    NButton,
+                    {
+                      circle: true,
+                      type: 'info',
+                      size: 'tiny',
+                      onClick: () => {
+                        handleEdit(row)
+                      }
+                    },
+                    {
+                      icon: () => h(EditOutlined)
+                    }
+                  ),
+                default: () => t('resource.udf.edit')
+              }
+            ),
+            h(
+              NTooltip,
+              {},
+              {
+                trigger: () =>
+                  h(
+                    NButton,
+                    {
+                      circle: true,
+                      type: 'info',
+                      size: 'tiny',
+                      disabled: row?.directory ? true : false,
+                      onClick: () => downloadResource(row.id)
+                    },
+                    {
+                      icon: () => h(DownloadOutlined)
+                    }
+                  ),
+                default: () => t('resource.udf.download')
+              }
+            ),
+            h(
+              NPopconfirm,
+              {
+                onPositiveClick: () => {
+                  handleDelete(row.id)
+                }
+              },
+              {
+                trigger: () =>
+                  h(
+                    NTooltip,
+                    {},
+                    {
+                      trigger: () =>
+                        h(
+                          NButton,
+                          {
+                            circle: true,
+                            type: 'error',
+                            size: 'tiny'
+                          },
+                          {
+                            icon: () => h(DeleteOutlined)
+                          }
+                        ),
+                      default: () => t('resource.udf.delete')
+                    }
+                  ),
+                default: () => t('resource.udf.delete_confirm')
+              }
+            )
+          ]
+        })
+      }
+    }
+  ]
+
+  const variables = reactive({
+    columns,
+    row: {},
+    tableData: [],
+    breadList: [],
+    id: ref(Number(router.currentRoute.value.params.id) || -1),
+    page: ref(1),
+    pageSize: ref(10),
+    searchVal: ref(),
+    totalPage: ref(1),
+    folderShowRef: ref(false),
+    uploadShowRef: ref(false)
+  })
+
+  const getTableData = (params: IUdfResourceParam) => {
+    const { state } = useAsyncState(
+      queryResourceListPaging({ ...params, type: 'UDF' }).then((res: any) => {
+        const breadList =
+          variables.id === -1
+            ? []
+            : (fileStore.getCurrentDir.split('/') as Array<never>)
+        breadList.shift()
+
+        variables.breadList = breadList
+        variables.totalPage = res.totalPage
+        variables.tableData = res.totalList.map((item: any) => {
+          return { ...item }
+        })
+      }),
+      { total: 0, table: [] }
+    )
+    return state
+  }
+
+  const handleEdit = (row: any) => {
+    variables.folderShowRef = true
+    variables.row = row
+  }
+
+  const handleDelete = (id: number) => {
+    /* after deleting data from the current page, you need to jump forward when the page is empty. */
+    if (variables.tableData.length === 1 && variables.page > 1) {
+      variables.page -= 1
+    }
+
+    deleteResource(id).then(() =>
+      getTableData({
+        id: variables.id,
+        pageSize: variables.pageSize,
+        pageNo: variables.page,
+        searchVal: variables.searchVal
+      })
+    )
+  }
+
+  const goUdfManage = () => {
+    router.push({ name: 'resource-manage' })
+  }
+
+  const goBread = (fullName: string) => {
+    const { id } = variables
+    queryResourceById(
+      {
+        id,
+        type: 'UDF',
+        fullName
+      },
+      id
+    )
+      .then((res: any) => {
+        fileStore.setCurrentDir(res.fullName)
+        router.push({ name: 'resource-sub-manage', params: { id: res.id } })
+      })
+      .catch((error: any) => {
+        window.$message.error(error.message)
+      })
+  }
+
+  return {
+    variables,
+    getTableData,
+    goUdfManage,
+    goBread
+  }
+}