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

3 years ago · 7da31864e4
8 changed files with 82 additions and 25 deletions
--- a/dolphinscheduler-ui-next/src/locales/modules/en_US.ts
+++ b/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
 }
--- a/dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts
+++ b/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
 }
--- a/dolphinscheduler-ui-next/src/router/modules/security.ts
+++ b/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: '租户管理',
      },
--- a/dolphinscheduler-ui-next/src/views/security/tenant-manage/components/tenant-modal.tsx
+++ b/dolphinscheduler-ui-next/src/views/security/tenant-manage/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"
                  />
--- a/dolphinscheduler-ui-next/src/views/security/tenant-manage/components/use-modalData.ts
+++ b/dolphinscheduler-ui-next/src/views/security/tenant-manage/components/use-modalData.ts
--- a/dolphinscheduler-ui-next/src/views/security/tenant-manage/index.module.scss
+++ b/dolphinscheduler-ui-next/src/views/security/tenant-manage/index.module.scss
--- a/dolphinscheduler-ui-next/src/views/security/tenant-manage/index.tsx
+++ b/dolphinscheduler-ui-next/src/views/security/tenant-manage/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'>
--- a/dolphinscheduler-ui-next/src/views/security/tenant-manage/use-table.ts
+++ b/dolphinscheduler-ui-next/src/views/security/tenant-manage/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
  }
 }