[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,7 +33,20 @@ export function useTable() {
   const { t } = useI18n()
   const router: Router = useRouter()
 
-  const columns: TableColumns<any> = [
+  const variables = reactive({
+    columns: [],
+    row: {},
+    tableData: [],
+    id: ref(Number(router.currentRoute.value.params.id) || -1),
+    page: ref(1),
+    pageSize: ref(10),
+    searchVal: ref(),
+    totalPage: ref(1),
+    showRef: ref(false)
+  })
+
+  const createColumns = (variables: any) => {
+    variables.columns = [
       {
         title: t('resource.function.id'),
         key: 'id',
@@ -127,19 +140,8 @@ export function useTable() {
           })
         }
       }
-  ]
-
-  const variables = reactive({
-    columns,
-    row: {},
-    tableData: [],
-    id: ref(Number(router.currentRoute.value.params.id) || -1),
-    page: ref(1),
-    pageSize: ref(10),
-    searchVal: ref(),
-    totalPage: ref(1),
-    showRef: ref(false)
-  })
+    ] as TableColumns<any>
+  }
 
   const getTableData = (params: IUdfFunctionParam) => {
     const { state } = useAsyncState(
@@ -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,7 +49,22 @@ export function useTable() {
   const router: Router = useRouter()
   const fileStore = useFileStore()
 
-  const columns: TableColumns<any> = [
+  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 createColumns = (variables: any) => {
+    variables.columns = [
       {
         title: t('resource.udf.id'),
         key: 'id',
@@ -120,6 +135,7 @@ export function useTable() {
                     h(
                       NButton,
                       {
+                        tag: 'div',
                         circle: true,
                         type: 'info',
                         size: 'tiny',
@@ -142,6 +158,7 @@ export function useTable() {
                     h(
                       NButton,
                       {
+                        tag: 'div',
                         circle: true,
                         type: 'info',
                         size: 'tiny',
@@ -172,6 +189,7 @@ export function useTable() {
                           h(
                             NButton,
                             {
+                              tag: 'div',
                               circle: true,
                               type: 'error',
                               size: 'tiny'
@@ -190,21 +208,8 @@ export function useTable() {
           })
         }
       }
-  ]
-
-  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)
-  })
+    ] as TableColumns<any>
+  }
 
   const getTableData = (params: IUdfResourceParam) => {
     const { state } = useAsyncState(
@@ -272,6 +277,7 @@ export function useTable() {
 
   return {
     variables,
+    createColumns,
     getTableData,
     goUdfManage,
     goBread