[Fix][UI Next] Fix a few bug with resource manage (#8363)

* fix resource manage list language switch bug

* fix func manage list language switch bug

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

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { defineComponent, Ref, toRefs, onMounted, toRef } from 'vue'
+import { defineComponent, Ref, toRefs, onMounted, toRef, watch } from 'vue'
 import {
   NIcon,
   NSpace,
@@ -34,7 +34,7 @@ import styles from './index.module.scss'
 export default defineComponent({
   name: 'function-manage',
   setup() {
-    const { variables, getTableData } = useTable()
+    const { variables, createColumns, getTableData } = useTable()
 
     const requestData = () => {
       getTableData({
@@ -68,7 +68,12 @@ export default defineComponent({
       handleShowModal(toRef(variables, 'showRef'))
     }
 
+    watch(useI18n().locale, () => {
+      createColumns(variables)
+    })
+
     onMounted(() => {
+      createColumns(variables)
       requestData()
     })
 

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

@@ -33,104 +33,8 @@ export function useTable() {
   const { t } = useI18n()
   const router: Router = useRouter()
 
-  const columns: TableColumns<any> = [
-    {
-      title: t('resource.function.id'),
-      key: 'id',
-      width: 50,
-      render: (_row, index) => index + 1
-    },
-    {
-      title: t('resource.function.udf_function_name'),
-      key: 'funcName'
-    },
-    {
-      title: t('resource.function.class_name'),
-      key: 'className'
-    },
-    {
-      title: t('resource.function.type'),
-      key: 'type'
-    },
-    {
-      title: t('resource.function.description'),
-      key: 'description'
-    },
-    {
-      title: t('resource.function.jar_package'),
-      key: 'resourceName'
-    },
-    {
-      title: t('resource.function.update_time'),
-      key: 'updateTime'
-    },
-    {
-      title: t('resource.function.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.function.edit')
-              }
-            ),
-            h(
-              NPopconfirm,
-              {
-                onPositiveClick: () => {
-                  handleDelete(row.id)
-                }
-              },
-              {
-                trigger: () =>
-                  h(
-                    NTooltip,
-                    {},
-                    {
-                      trigger: () =>
-                        h(
-                          NButton,
-                          {
-                            circle: true,
-                            type: 'error',
-                            size: 'tiny'
-                          },
-                          {
-                            icon: () => h(DeleteOutlined)
-                          }
-                        ),
-                      default: () => t('resource.function.delete')
-                    }
-                  ),
-                default: () => t('resource.function.delete_confirm')
-              }
-            )
-          ]
-        })
-      }
-    }
-  ]
-
   const variables = reactive({
-    columns,
+    columns: [],
     row: {},
     tableData: [],
     id: ref(Number(router.currentRoute.value.params.id) || -1),
@@ -141,6 +45,104 @@ export function useTable() {
     showRef: ref(false)
   })
 
+  const createColumns = (variables: any) => {
+    variables.columns = [
+      {
+        title: t('resource.function.id'),
+        key: 'id',
+        width: 50,
+        render: (_row, index) => index + 1
+      },
+      {
+        title: t('resource.function.udf_function_name'),
+        key: 'funcName'
+      },
+      {
+        title: t('resource.function.class_name'),
+        key: 'className'
+      },
+      {
+        title: t('resource.function.type'),
+        key: 'type'
+      },
+      {
+        title: t('resource.function.description'),
+        key: 'description'
+      },
+      {
+        title: t('resource.function.jar_package'),
+        key: 'resourceName'
+      },
+      {
+        title: t('resource.function.update_time'),
+        key: 'updateTime'
+      },
+      {
+        title: t('resource.function.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.function.edit')
+                }
+              ),
+              h(
+                NPopconfirm,
+                {
+                  onPositiveClick: () => {
+                    handleDelete(row.id)
+                  }
+                },
+                {
+                  trigger: () =>
+                    h(
+                      NTooltip,
+                      {},
+                      {
+                        trigger: () =>
+                          h(
+                            NButton,
+                            {
+                              circle: true,
+                              type: 'error',
+                              size: 'tiny'
+                            },
+                            {
+                              icon: () => h(DeleteOutlined)
+                            }
+                          ),
+                        default: () => t('resource.function.delete')
+                      }
+                    ),
+                  default: () => t('resource.function.delete_confirm')
+                }
+              )
+            ]
+          })
+        }
+      }
+    ] as TableColumns<any>
+  }
+
   const getTableData = (params: IUdfFunctionParam) => {
     const { state } = useAsyncState(
       queryUdfFuncListPaging({ ...params }).then((res: any) => {
@@ -177,6 +179,7 @@ export function useTable() {
 
   return {
     variables,
+    createColumns,
     getTableData
   }
 }

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

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { defineComponent, Ref, toRefs, onMounted, toRef } from 'vue'
+import { defineComponent, Ref, toRefs, onMounted, toRef, watch } from 'vue'
 import {
   NIcon,
   NSpace,
@@ -37,7 +37,8 @@ import styles from './index.module.scss'
 export default defineComponent({
   name: 'resource-manage',
   setup() {
-    const { variables, getTableData, goUdfManage, goBread } = useTable()
+    const { variables, createColumns, getTableData, goUdfManage, goBread } =
+      useTable()
 
     const requestData = () => {
       getTableData({
@@ -85,7 +86,12 @@ export default defineComponent({
       goBread(breadName)
     }
 
+    watch(useI18n().locale, () => {
+      createColumns(variables)
+    })
+
     onMounted(() => {
+      createColumns(variables)
       requestData()
     })
 

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

@@ -49,151 +49,8 @@ export function useTable() {
   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,
+    columns: [],
     row: {},
     tableData: [],
     breadList: [],
@@ -206,6 +63,154 @@ export function useTable() {
     uploadShowRef: ref(false)
   })
 
+  const createColumns = (variables: any) => {
+    variables.columns = [
+      {
+        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,
+                      {
+                        tag: 'div',
+                        circle: true,
+                        type: 'info',
+                        size: 'tiny',
+                        onClick: () => {
+                          handleEdit(row)
+                        }
+                      },
+                      {
+                        icon: () => h(EditOutlined)
+                      }
+                    ),
+                  default: () => t('resource.udf.edit')
+                }
+              ),
+              h(
+                NTooltip,
+                {},
+                {
+                  trigger: () =>
+                    h(
+                      NButton,
+                      {
+                        tag: 'div',
+                        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,
+                            {
+                              tag: 'div',
+                              circle: true,
+                              type: 'error',
+                              size: 'tiny'
+                            },
+                            {
+                              icon: () => h(DeleteOutlined)
+                            }
+                          ),
+                        default: () => t('resource.udf.delete')
+                      }
+                    ),
+                  default: () => t('resource.udf.delete_confirm')
+                }
+              )
+            ]
+          })
+        }
+      }
+    ] as TableColumns<any>
+  }
+
   const getTableData = (params: IUdfResourceParam) => {
     const { state } = useAsyncState(
       queryResourceListPaging({ ...params, type: 'UDF' }).then((res: any) => {
@@ -272,6 +277,7 @@ export function useTable() {
 
   return {
     variables,
+    createColumns,
     getTableData,
     goUdfManage,
     goBread