[Feature][UI Next] Improve internationalization of tenant management (#7997)

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

@@ -213,6 +213,25 @@ const project = {
   },
 }
 
+const security = {
+  tenant: {
+    create_tenant: 'Create Tenant',
+    search_tips: 'Please enter keywords',
+    num: 'Serial number',
+    tenantCode: 'Operating System Tenant',
+    description: 'Description',
+    queueName: 'QueueName',
+    createTime: 'Create Time',
+    updateTime: 'Update Time',
+    actions: 'Operation',
+    edit_tenant: 'Edit Tenant',
+    tenantCode_tips: 'Please enter the operating system tenant',
+    queueName_tips: 'Please select queue',
+    description_tips: 'Please enter a description',
+    delete_confirm: 'Delete?',
+  }
+}
+
 export default {
   login,
   modal,
@@ -225,4 +244,5 @@ export default {
   monitor,
   resource,
   project,
+  security
 }

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

@@ -212,6 +212,25 @@ const project = {
   },
 }
 
+const security = {
+  tenant: {
+    create_tenant: '创建租户',
+    search_tips: '请输入关键词',
+    num: '编号',
+    tenantCode: '操作系统租户',
+    description: '描述',
+    queueName: '队列',
+    createTime: '创建时间',
+    updateTime: '更新时间',
+    actions: '操作',
+    edit_tenant: '编辑租户',
+    tenantCode_tips: '请输入操作系统租户',
+    queueName_tips: '请选择队列',
+    description_tips: '请输入描述',
+    delete_confirm: '确定删除吗?',
+  }
+}
+
 export default {
   login,
   modal,
@@ -224,4 +243,5 @@ export default {
   monitor,
   resource,
   project,
+  security
 }

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

@@ -30,9 +30,9 @@ export default {
   component: () => import('@/layouts/content'),
   children: [
     {
-      path: '/security/tenant',
+      path: '/security/tenant-manage',
       name: 'tenement-manage',
-      component: components['tenant'],
+      component: components['tenant-manage'],
       meta: {
         title: '租户管理',
       },

dolphinscheduler-ui-next/src/views/security/tenant/components/tenant-modal.tsx

@@ -19,12 +19,14 @@ import { defineComponent, onMounted, PropType, toRefs, watch } from 'vue'
 import Modal from '@/components/modal'
 import { NForm, NFormItem, NInput, NSelect } from 'naive-ui'
 import { useModalData } from './use-modalData'
+import { useI18n } from 'vue-i18n'
 
 const TenantModal = defineComponent({
   name: 'tenant-modal',
   emits: ['cancelModal', 'confirmModal'],
   setup(props, ctx) {
     const { variables, getListData, handleValidate} = useModalData(props, ctx)
+    const { t } = useI18n()
 
     const cancelModal = () => {
       if (props.statusRef === 0) {
@@ -49,7 +51,7 @@ const TenantModal = defineComponent({
       variables.model.description = props.row.description
     })
 
-    return { ...toRefs(variables), cancelModal, confirmModal }
+    return { t, ...toRefs(variables), cancelModal, confirmModal }
   },
   props: {
     showModalRef: {
@@ -66,10 +68,11 @@ const TenantModal = defineComponent({
     }
   },
   render() {
+    const { t } = this
     return (
       <div>
         <Modal
-          title={this.statusRef === 0 ? '创建租户' : '编辑租户'}
+          title={this.statusRef === 0 ? t('security.tenant.create_tenant') : t('security.tenant.edit_tenant')}
           show={this.showModalRef}
           onCancel={this.cancelModal}
           onConfirm={this.confirmModal}
@@ -86,19 +89,19 @@ const TenantModal = defineComponent({
                 size="small"
                 style="{ maxWidth: '240px' }"
               >
-                <NFormItem label="操作系统租户" path="tenantCode">
-                  <NInput disabled={this.statusRef === 1} placeholder="请输入操作系统租户" v-model={[this.model.tenantCode, 'value']} />
+                <NFormItem label={t('security.tenant.tenantCode')} path="tenantCode">
+                  <NInput disabled={this.statusRef === 1} placeholder={t('security.tenant.tenantCode_tips')} v-model={[this.model.tenantCode, 'value']} />
                 </NFormItem>
-                <NFormItem label="队列" path="queueId">
+                <NFormItem label={t('security.tenant.queueName')} path="queueId">
                   <NSelect
-                    placeholder="Select"
+                    placeholder={t('security.tenant.queueName_tips')}
                     options={this.model.generalOptions}
                     v-model={[this.model.queueId, 'value']}
                   />
                 </NFormItem>
-                <NFormItem label="描述" path="description">
+                <NFormItem label={t('security.tenant.description')} path="description">
                   <NInput
-                    placeholder="请输入描述"
+                    placeholder={t('security.tenant.description_tips')}
                     v-model={[this.model.description, 'value']}
                     type="textarea"
                   />

dolphinscheduler-ui-next/src/views/security/tenant/index.tsx

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { defineComponent, toRefs, onMounted } from 'vue'
+import { defineComponent, toRefs, onMounted, watch } from 'vue'
 import {
   NButton,
   NInput,
@@ -28,11 +28,13 @@ import styles from './index.module.scss'
 import { useTable } from './use-table'
 import { SearchOutlined } from '@vicons/antd'
 import TenantModal from './components/tenant-modal'
+import { useI18n } from 'vue-i18n'
 
 const tenementManage = defineComponent({
   name: 'tenement-manage',
   setup() {
-    const { variables, getTableData } = useTable()
+    const { variables, getTableData, createColumns } = useTable()
+    const { t } = useI18n()
 
     const requestData = () => {
       getTableData({
@@ -57,10 +59,16 @@ const tenementManage = defineComponent({
     }
 
     onMounted(() => {
+      createColumns(variables)
       requestData()
     })
 
+    watch(useI18n().locale, () => {
+      createColumns(variables)
+    })
+
     return {
+      t,
       ...toRefs(variables),
       requestData,
       handleModalChange,
@@ -69,13 +77,14 @@ const tenementManage = defineComponent({
     }
   },
   render() {
+    const { t } = this
     return (
       <div class={styles.container}>
         <NCard>
           <div class={styles.header}>
             <div>
               <NButton size='small' onClick={this.handleModalChange}>
-                创建租户
+                {t('security.tenant.create_tenant')}
               </NButton>
             </div>
             <div class={styles.search}>
@@ -83,7 +92,7 @@ const tenementManage = defineComponent({
                 size='small'
                 v-model={[this.searchVal, 'value']}
                 on-input={this.requestData}
-                placeholder='请输入关键词'
+                placeholder={t('security.tenant.search_tips')}
                 clearable
               />
               <NButton size='small'>

dolphinscheduler-ui-next/src/views/security/tenant/use-table.ts

@@ -41,40 +41,42 @@ export function useTable() {
     })
   }
 
-  const createColumns = () => {
-    return [
+  const createColumns = (variables: any) => {
+    variables.columns = [
       {
-        title: '编号',
+        title: t('security.tenant.num'),
         key: 'num',
       },
       {
-        title: '操作系统租户',
+        title: t('security.tenant.tenantCode'),
         key: 'tenantCode',
       },
       {
-        title: '描述',
+        title: t('security.tenant.description'),
         key: 'description',
       },
       {
-        title: '队列',
+        title: t('security.tenant.queueName'),
         key: 'queueName',
       },
       {
-        title: '创建时间',
+        title: t('security.tenant.createTime'),
         key: 'createTime',
       },
       {
-        title: '更新时间',
+        title: t('security.tenant.updateTime'),
         key: 'updateTime',
       },
       {
-        title: '操作',
+        title: t('security.tenant.actions'),
         key: 'actions',
         render(row: any) {
           return h('div', null, [
             h(
               NButton,
               {
+                circle: true,
+                type: 'info',
                 size: 'small',
                 onClick: () => {
                   handleEdit(row)
@@ -93,6 +95,8 @@ export function useTable() {
                 trigger: () => h(
                   NButton,
                   {
+                    circle: true,
+                    type: 'error',
                     size: 'small',
                     style: {'margin-left': '5px'},
                   },
@@ -100,7 +104,7 @@ export function useTable() {
                     icon: () => h(DeleteOutlined),
                   }
                 ),
-                default: () => {return '确定删除吗?'}
+                default: () => {return t('security.tenant.delete_confirm')}
               }
             )
           ])
@@ -110,7 +114,7 @@ export function useTable() {
   }
 
   const variables = reactive({
-    columns: createColumns(),
+    columns: [],
     tableData: [],
     page: ref(1),
     pageSize: ref(10),
@@ -141,5 +145,6 @@ export function useTable() {
   return {
     variables,
     getTableData,
+    createColumns
   }
 }