From 7da31864e4575aef4ac4e8a7b700886965ee4bde Mon Sep 17 00:00:00 2001 From: labbomb <739955946@qq.com> Date: Thu, 13 Jan 2022 16:59:35 +0800 Subject: [PATCH] [Feature][UI Next] Improve internationalization of tenant management (#7997) --- .../src/locales/modules/en_US.ts | 20 ++++++++++++++ .../src/locales/modules/zh_CN.ts | 20 ++++++++++++++ .../src/router/modules/security.ts | 4 +-- .../components/tenant-modal.tsx | 19 +++++++------ .../components/use-modalData.ts | 0 .../index.module.scss | 0 .../{tenant => tenant-manage}/index.tsx | 17 +++++++++--- .../{tenant => tenant-manage}/use-table.ts | 27 +++++++++++-------- 8 files changed, 82 insertions(+), 25 deletions(-) rename dolphinscheduler-ui-next/src/views/security/{tenant => tenant-manage}/components/tenant-modal.tsx (81%) rename dolphinscheduler-ui-next/src/views/security/{tenant => tenant-manage}/components/use-modalData.ts (100%) rename dolphinscheduler-ui-next/src/views/security/{tenant => tenant-manage}/index.module.scss (100%) rename dolphinscheduler-ui-next/src/views/security/{tenant => tenant-manage}/index.tsx (87%) rename dolphinscheduler-ui-next/src/views/security/{tenant => tenant-manage}/use-table.ts (83%) diff --git a/dolphinscheduler-ui-next/src/locales/modules/en_US.ts b/dolphinscheduler-ui-next/src/locales/modules/en_US.ts index a05a074408..a425e51913 100644 --- 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 } diff --git a/dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts b/dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts index 3372ccbdda..3f3c8554fe 100644 --- 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 } diff --git a/dolphinscheduler-ui-next/src/router/modules/security.ts b/dolphinscheduler-ui-next/src/router/modules/security.ts index 799af5173e..85617d2a5a 100644 --- 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: '租户管理', }, diff --git a/dolphinscheduler-ui-next/src/views/security/tenant/components/tenant-modal.tsx b/dolphinscheduler-ui-next/src/views/security/tenant-manage/components/tenant-modal.tsx similarity index 81% rename from dolphinscheduler-ui-next/src/views/security/tenant/components/tenant-modal.tsx rename to dolphinscheduler-ui-next/src/views/security/tenant-manage/components/tenant-modal.tsx index 28f23f43f5..a57fe3aeea 100644 --- a/dolphinscheduler-ui-next/src/views/security/tenant/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 (
- - + + - + - + diff --git a/dolphinscheduler-ui-next/src/views/security/tenant/components/use-modalData.ts b/dolphinscheduler-ui-next/src/views/security/tenant-manage/components/use-modalData.ts similarity index 100% rename from dolphinscheduler-ui-next/src/views/security/tenant/components/use-modalData.ts rename to dolphinscheduler-ui-next/src/views/security/tenant-manage/components/use-modalData.ts diff --git a/dolphinscheduler-ui-next/src/views/security/tenant/index.module.scss b/dolphinscheduler-ui-next/src/views/security/tenant-manage/index.module.scss similarity index 100% rename from dolphinscheduler-ui-next/src/views/security/tenant/index.module.scss rename to dolphinscheduler-ui-next/src/views/security/tenant-manage/index.module.scss diff --git a/dolphinscheduler-ui-next/src/views/security/tenant/index.tsx b/dolphinscheduler-ui-next/src/views/security/tenant-manage/index.tsx similarity index 87% rename from dolphinscheduler-ui-next/src/views/security/tenant/index.tsx rename to dolphinscheduler-ui-next/src/views/security/tenant-manage/index.tsx index 180edb4fd5..b135a0582d 100644 --- a/dolphinscheduler-ui-next/src/views/security/tenant/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 (
- 创建租户 + {t('security.tenant.create_tenant')}
@@ -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 /> diff --git a/dolphinscheduler-ui-next/src/views/security/tenant/use-table.ts b/dolphinscheduler-ui-next/src/views/security/tenant-manage/use-table.ts similarity index 83% rename from dolphinscheduler-ui-next/src/views/security/tenant/use-table.ts rename to dolphinscheduler-ui-next/src/views/security/tenant-manage/use-table.ts index 623eeb9cde..f77630aae8 100644 --- a/dolphinscheduler-ui-next/src/views/security/tenant/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 } }