colin
1 year ago
12 changed files with 516 additions and 2 deletions
@ -0,0 +1,15 @@ |
|||
<script lang="ts" setup> |
|||
import { Page } from '@vben/common-ui'; |
|||
|
|||
import { LocalizationLanguageTable } from '@abp/localization'; |
|||
|
|||
defineOptions({ |
|||
name: 'LocalizationLanguages', |
|||
}); |
|||
</script> |
|||
|
|||
<template> |
|||
<Page> |
|||
<LocalizationLanguageTable /> |
|||
</Page> |
|||
</template> |
|||
@ -1,2 +1,3 @@ |
|||
export { useLanguagesApi } from './useLanguagesApi'; |
|||
export { useLocalizationsApi } from './useLocalizationsApi'; |
|||
export { useResourcesApi } from './useResourcesApi'; |
|||
|
|||
@ -0,0 +1,89 @@ |
|||
import type { ListResultDto } from '@abp/core'; |
|||
|
|||
import type { |
|||
LanguageCreateDto, |
|||
LanguageDto, |
|||
LanguageGetListInput, |
|||
LanguageUpdateDto, |
|||
} from '../types/languages'; |
|||
|
|||
import { useRequest } from '@abp/request'; |
|||
|
|||
export function useLanguagesApi() { |
|||
const { cancel, request } = useRequest(); |
|||
|
|||
/** |
|||
* 查询语言列表 |
|||
* @param input 参数 |
|||
* @returns 语言列表 |
|||
*/ |
|||
function getListApi( |
|||
input?: LanguageGetListInput, |
|||
): Promise<ListResultDto<LanguageDto>> { |
|||
return request<ListResultDto<LanguageDto>>( |
|||
'/api/abp/localization/languages', |
|||
{ |
|||
method: 'GET', |
|||
params: input, |
|||
}, |
|||
); |
|||
} |
|||
|
|||
/** |
|||
* 查询语言 |
|||
* @param name 语言名称 |
|||
* @returns 查询的语言 |
|||
*/ |
|||
function getApi(name: string): Promise<LanguageDto> { |
|||
return request<LanguageDto>(`/api/localization/languages/${name}`, { |
|||
method: 'GET', |
|||
}); |
|||
} |
|||
|
|||
/** |
|||
* 删除语言 |
|||
* @param name 语言名称 |
|||
*/ |
|||
function deleteApi(name: string): Promise<void> { |
|||
return request(`/api/localization/languages/${name}`, { |
|||
method: 'DELETE', |
|||
}); |
|||
} |
|||
|
|||
/** |
|||
* 创建语言 |
|||
* @param input 参数 |
|||
* @returns 创建的语言 |
|||
*/ |
|||
function createApi(input: LanguageCreateDto): Promise<LanguageDto> { |
|||
return request<LanguageDto>(`/api/localization/languages`, { |
|||
data: input, |
|||
method: 'POST', |
|||
}); |
|||
} |
|||
|
|||
/** |
|||
* 编辑语言 |
|||
* @param name 语言名称 |
|||
* @param input 参数 |
|||
* @returns 编辑的语言 |
|||
*/ |
|||
function updateApi( |
|||
name: string, |
|||
input: LanguageUpdateDto, |
|||
): Promise<LanguageDto> { |
|||
return request<LanguageDto>(`/api/localization/languages/${name}`, { |
|||
data: input, |
|||
method: 'PUT', |
|||
}); |
|||
} |
|||
|
|||
return { |
|||
cancel, |
|||
createApi, |
|||
deleteApi, |
|||
getApi, |
|||
getListApi, |
|||
updateApi, |
|||
}; |
|||
} |
|||
@ -1 +1,2 @@ |
|||
export { default as LocalizationLanguageTable } from './languages/LocalizationLanguageTable.vue'; |
|||
export { default as LocalizationResourceTable } from './resources/LocalizationResourceTable.vue'; |
|||
|
|||
@ -0,0 +1,115 @@ |
|||
<script setup lang="ts"> |
|||
import type { FormInstance } from 'ant-design-vue'; |
|||
|
|||
import type { LanguageDto } from '../../types/languages'; |
|||
|
|||
import { defineEmits, defineOptions, ref, toValue, useTemplateRef } from 'vue'; |
|||
|
|||
import { useVbenModal } from '@vben/common-ui'; |
|||
import { $t } from '@vben/locales'; |
|||
|
|||
import { Form, Input, message } from 'ant-design-vue'; |
|||
|
|||
import { useLanguagesApi } from '../../api/useLanguagesApi'; |
|||
|
|||
defineOptions({ |
|||
name: 'LocalizationLanguageModal', |
|||
}); |
|||
const emits = defineEmits<{ |
|||
(event: 'change', data: LanguageDto): void; |
|||
}>(); |
|||
|
|||
const FormItem = Form.Item; |
|||
|
|||
const defaultModel = {} as LanguageDto; |
|||
|
|||
const form = useTemplateRef<FormInstance>('form'); |
|||
const formModel = ref<LanguageDto>({ ...defaultModel }); |
|||
|
|||
const { cancel, createApi, getApi, updateApi } = useLanguagesApi(); |
|||
const [Modal, modalApi] = useVbenModal({ |
|||
class: 'w-1/2', |
|||
draggable: true, |
|||
fullscreenButton: false, |
|||
onCancel() { |
|||
modalApi.close(); |
|||
}, |
|||
onClosed() { |
|||
cancel('LocalizationLanguageModal has closed!'); |
|||
}, |
|||
onConfirm: onSubmit, |
|||
onOpenChange: async (isOpen: boolean) => { |
|||
if (isOpen) { |
|||
formModel.value = { ...defaultModel }; |
|||
modalApi.setState({ |
|||
title: $t('LocalizationManagement.Language:AddNew'), |
|||
}); |
|||
const { cultureName } = modalApi.getData<LanguageDto>(); |
|||
cultureName && (await onGet(cultureName)); |
|||
} |
|||
}, |
|||
title: $t('LocalizationManagement.Language:AddNew'), |
|||
}); |
|||
async function onGet(name: string) { |
|||
try { |
|||
modalApi.setState({ loading: true }); |
|||
const dto = await getApi(name); |
|||
formModel.value = dto; |
|||
modalApi.setState({ |
|||
title: `${$t('AbpLocalization.Languages')} - ${dto.cultureName}`, |
|||
}); |
|||
} finally { |
|||
modalApi.setState({ loading: false }); |
|||
} |
|||
} |
|||
async function onSubmit() { |
|||
await form.value?.validate(); |
|||
try { |
|||
modalApi.setState({ submitting: true }); |
|||
const input = toValue(formModel); |
|||
const api = input.id |
|||
? updateApi(input.cultureName, input) |
|||
: createApi(input); |
|||
const dto = await api; |
|||
message.success($t('AbpUi.SavedSuccessfully')); |
|||
emits('change', dto); |
|||
modalApi.close(); |
|||
} finally { |
|||
modalApi.setState({ submitting: false }); |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<template> |
|||
<Modal> |
|||
<Form |
|||
ref="form" |
|||
:label-col="{ span: 6 }" |
|||
:model="formModel" |
|||
:wrapper-col="{ span: 18 }" |
|||
> |
|||
<FormItem |
|||
:label="$t('AbpLocalization.DisplayName:CultureName')" |
|||
name="cultureName" |
|||
required |
|||
> |
|||
<Input v-model:value="formModel.cultureName" autocomplete="off" /> |
|||
</FormItem> |
|||
<FormItem |
|||
:label="$t('AbpLocalization.DisplayName:UiCultureName')" |
|||
name="uiCultureName" |
|||
> |
|||
<Input v-model:value="formModel.uiCultureName" autocomplete="off" /> |
|||
</FormItem> |
|||
<FormItem |
|||
:label="$t('AbpLocalization.DisplayName:DisplayName')" |
|||
name="displayName" |
|||
required |
|||
> |
|||
<Input v-model:value="formModel.displayName" autocomplete="off" /> |
|||
</FormItem> |
|||
</Form> |
|||
</Modal> |
|||
</template> |
|||
|
|||
<style scoped></style> |
|||
@ -0,0 +1,240 @@ |
|||
<script setup lang="ts"> |
|||
import type { VbenFormProps, VxeGridListeners, VxeGridProps } from '@abp/ui'; |
|||
|
|||
import type { LanguageDto } from '../../types/languages'; |
|||
|
|||
import { defineAsyncComponent, h, onMounted, reactive, ref } from 'vue'; |
|||
|
|||
import { useVbenModal } from '@vben/common-ui'; |
|||
import { $t } from '@vben/locales'; |
|||
|
|||
import { |
|||
useAbpStore, |
|||
useLocalization, |
|||
useLocalizationSerializer, |
|||
} from '@abp/core'; |
|||
import { useVbenVxeGrid } from '@abp/ui'; |
|||
import { |
|||
DeleteOutlined, |
|||
EditOutlined, |
|||
PlusOutlined, |
|||
} from '@ant-design/icons-vue'; |
|||
import { Button, message, Modal } from 'ant-design-vue'; |
|||
|
|||
import { useLanguagesApi } from '../../api/useLanguagesApi'; |
|||
import { useLocalizationsApi } from '../../api/useLocalizationsApi'; |
|||
import { LanguagesPermissions } from '../../constants/permissions'; |
|||
|
|||
defineOptions({ |
|||
name: 'LocalizationLanguageTable', |
|||
}); |
|||
|
|||
const permissionGroups = ref<LanguageDto[]>([]); |
|||
const pageState = reactive({ |
|||
current: 1, |
|||
size: 10, |
|||
total: 0, |
|||
}); |
|||
|
|||
const abpStore = useAbpStore(); |
|||
const { Lr } = useLocalization(); |
|||
const { deserialize } = useLocalizationSerializer(); |
|||
const { deleteApi, getListApi } = useLanguagesApi(); |
|||
const { getLocalizationApi } = useLocalizationsApi(); |
|||
|
|||
const formOptions: VbenFormProps = { |
|||
// 默认展开 |
|||
collapsed: false, |
|||
handleReset: onReset, |
|||
async handleSubmit(params) { |
|||
pageState.current = 1; |
|||
await onGet(params); |
|||
}, |
|||
schema: [ |
|||
{ |
|||
component: 'Input', |
|||
fieldName: 'filter', |
|||
formItemClass: 'col-span-2 items-baseline', |
|||
label: $t('AbpUi.Search'), |
|||
}, |
|||
], |
|||
// 控制表单是否显示折叠按钮 |
|||
showCollapseButton: true, |
|||
// 按下回车时是否提交表单 |
|||
submitOnEnter: true, |
|||
}; |
|||
|
|||
const gridOptions: VxeGridProps<LanguageDto> = { |
|||
columns: [ |
|||
{ |
|||
align: 'left', |
|||
field: 'cultureName', |
|||
minWidth: 150, |
|||
title: $t('AbpLocalization.DisplayName:CultureName'), |
|||
}, |
|||
{ |
|||
align: 'left', |
|||
field: 'displayName', |
|||
minWidth: 150, |
|||
title: $t('AbpLocalization.DisplayName:DisplayName'), |
|||
}, |
|||
{ |
|||
align: 'left', |
|||
field: 'uiCultureName', |
|||
minWidth: 150, |
|||
title: $t('AbpLocalization.DisplayName:UiCultureName'), |
|||
}, |
|||
{ |
|||
field: 'action', |
|||
fixed: 'right', |
|||
slots: { default: 'action' }, |
|||
title: $t('AbpUi.Actions'), |
|||
width: 220, |
|||
}, |
|||
], |
|||
exportConfig: {}, |
|||
keepSource: true, |
|||
toolbarConfig: { |
|||
custom: true, |
|||
export: true, |
|||
refresh: false, |
|||
zoom: true, |
|||
}, |
|||
}; |
|||
|
|||
const gridEvents: VxeGridListeners<LanguageDto> = { |
|||
pageChange(params) { |
|||
pageState.current = params.currentPage; |
|||
pageState.size = params.pageSize; |
|||
onPageChange(); |
|||
}, |
|||
}; |
|||
|
|||
const [LocalizationLanguageModal, modalApi] = useVbenModal({ |
|||
connectedComponent: defineAsyncComponent( |
|||
() => import('./LocalizationLanguageModal.vue'), |
|||
), |
|||
}); |
|||
|
|||
const [Grid, gridApi] = useVbenVxeGrid({ |
|||
formOptions, |
|||
gridEvents, |
|||
gridOptions, |
|||
}); |
|||
|
|||
async function onGet(input?: Record<string, string>) { |
|||
try { |
|||
gridApi.setLoading(true); |
|||
const { items } = await getListApi(input); |
|||
pageState.total = items.length; |
|||
permissionGroups.value = items.map((item) => { |
|||
const localizableString = deserialize(item.displayName); |
|||
return { |
|||
...item, |
|||
displayName: Lr(localizableString.resourceName, localizableString.name), |
|||
}; |
|||
}); |
|||
onPageChange(); |
|||
} finally { |
|||
gridApi.setLoading(false); |
|||
} |
|||
} |
|||
|
|||
async function onReset() { |
|||
await gridApi.formApi.resetForm(); |
|||
const input = await gridApi.formApi.getValues(); |
|||
await onGet(input); |
|||
} |
|||
|
|||
function onPageChange() { |
|||
const items = permissionGroups.value.slice( |
|||
(pageState.current - 1) * pageState.size, |
|||
pageState.current * pageState.size, |
|||
); |
|||
gridApi.setGridOptions({ |
|||
data: items, |
|||
pagerConfig: { |
|||
currentPage: pageState.current, |
|||
pageSize: pageState.size, |
|||
total: pageState.total, |
|||
}, |
|||
}); |
|||
} |
|||
|
|||
function onCreate() { |
|||
modalApi.setData({}); |
|||
modalApi.open(); |
|||
} |
|||
|
|||
function onUpdate(row: LanguageDto) { |
|||
modalApi.setData(row); |
|||
modalApi.open(); |
|||
} |
|||
|
|||
function onDelete(row: LanguageDto) { |
|||
Modal.confirm({ |
|||
centered: true, |
|||
content: `${$t('AbpUi.ItemWillBeDeletedMessageWithFormat', [row.cultureName])}`, |
|||
onOk: async () => { |
|||
await deleteApi(row.cultureName); |
|||
message.success($t('AbpUi.DeletedSuccessfully')); |
|||
onChange(); |
|||
}, |
|||
title: $t('AbpUi.AreYouSure'), |
|||
}); |
|||
} |
|||
|
|||
async function onChange() { |
|||
gridApi.query(); |
|||
// 资源变化刷新本地多语言缓存 |
|||
const cultureName = abpStore.localization!.currentCulture.cultureName; |
|||
const localization = await getLocalizationApi({ |
|||
cultureName, |
|||
}); |
|||
abpStore.setLocalization(localization); |
|||
} |
|||
|
|||
onMounted(onGet); |
|||
</script> |
|||
|
|||
<template> |
|||
<Grid :table-title="$t('AbpLocalization.Languages')"> |
|||
<template #toolbar-tools> |
|||
<Button |
|||
:icon="h(PlusOutlined)" |
|||
type="primary" |
|||
v-access:code="[LanguagesPermissions.Create]" |
|||
@click="onCreate" |
|||
> |
|||
{{ $t('LocalizationManagement.Language:AddNew') }} |
|||
</Button> |
|||
</template> |
|||
<template #action="{ row }"> |
|||
<div class="flex flex-row"> |
|||
<Button |
|||
:icon="h(EditOutlined)" |
|||
block |
|||
type="link" |
|||
v-access:code="[LanguagesPermissions.Update]" |
|||
@click="onUpdate(row)" |
|||
> |
|||
{{ $t('AbpUi.Edit') }} |
|||
</Button> |
|||
<Button |
|||
v-if="!row.isStatic" |
|||
:icon="h(DeleteOutlined)" |
|||
block |
|||
danger |
|||
type="link" |
|||
v-access:code="[LanguagesPermissions.Delete]" |
|||
@click="onDelete(row)" |
|||
> |
|||
{{ $t('AbpUi.Delete') }} |
|||
</Button> |
|||
</div> |
|||
</template> |
|||
</Grid> |
|||
<LocalizationLanguageModal @change="onChange" /> |
|||
</template> |
|||
|
|||
<style scoped></style> |
|||
@ -1 +1,2 @@ |
|||
export * from './languages'; |
|||
export * from './resources'; |
|||
|
|||
@ -0,0 +1,30 @@ |
|||
import type { AuditedEntityDto } from '@abp/core'; |
|||
|
|||
interface LanguageDto extends AuditedEntityDto<string> { |
|||
cultureName: string; |
|||
displayName: string; |
|||
twoLetterISOLanguageName?: string; |
|||
uiCultureName: string; |
|||
} |
|||
|
|||
interface LanguageGetListInput { |
|||
filter?: string; |
|||
} |
|||
|
|||
interface LanguageCreateOrUpdateDto { |
|||
displayName: string; |
|||
} |
|||
|
|||
interface LanguageCreateDto extends LanguageCreateOrUpdateDto { |
|||
cultureName: string; |
|||
uiCultureName?: string; |
|||
} |
|||
|
|||
type LanguageUpdateDto = LanguageCreateOrUpdateDto; |
|||
|
|||
export type { |
|||
LanguageCreateDto, |
|||
LanguageDto, |
|||
LanguageGetListInput, |
|||
LanguageUpdateDto, |
|||
}; |
|||
Loading…
Reference in new issue