yx lin
1 year ago
committed by
GitHub
GitHub
102 changed files with 2242 additions and 562 deletions
@ -0,0 +1,49 @@ |
|||
import type { |
|||
VbenFormSchema as FormSchema, |
|||
VbenFormProps, |
|||
} from '@vben/common-ui'; |
|||
|
|||
import type { ComponentType } from './component'; |
|||
|
|||
import { setupVbenForm, useVbenForm as useForm, z } from '@vben/common-ui'; |
|||
import { $t } from '@vben/locales'; |
|||
|
|||
async function initVbenForm() { |
|||
setupVbenForm<ComponentType>({ |
|||
config: { |
|||
// ant design vue组件库默认都是 v-model:value
|
|||
baseModelPropName: 'value', |
|||
|
|||
// 一些组件是 v-model:checked 或者 v-model:fileList
|
|||
modelPropNameMap: { |
|||
Checkbox: 'checked', |
|||
Radio: 'checked', |
|||
Switch: 'checked', |
|||
Upload: 'fileList', |
|||
}, |
|||
}, |
|||
defineRules: { |
|||
// 输入项目必填国际化适配
|
|||
required: (value, _params, ctx) => { |
|||
if (value === undefined || value === null || value.length === 0) { |
|||
return $t('ui.formRules.required', [ctx.label]); |
|||
} |
|||
return true; |
|||
}, |
|||
// 选择项目必填国际化适配
|
|||
selectRequired: (value, _params, ctx) => { |
|||
if (value === undefined || value === null) { |
|||
return $t('ui.formRules.selectRequired', [ctx.label]); |
|||
} |
|||
return true; |
|||
}, |
|||
}, |
|||
}); |
|||
} |
|||
|
|||
const useVbenForm = useForm<ComponentType>; |
|||
|
|||
export { initVbenForm, useVbenForm, z }; |
|||
|
|||
export type VbenFormSchema = FormSchema<ComponentType>; |
|||
export type { VbenFormProps }; |
|||
@ -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> |
|||
@ -0,0 +1,15 @@ |
|||
<script lang="ts" setup> |
|||
import { Page } from '@vben/common-ui'; |
|||
|
|||
import { LocalizationResourceTable } from '@abp/localization'; |
|||
|
|||
defineOptions({ |
|||
name: 'LocalizationResources', |
|||
}); |
|||
</script> |
|||
|
|||
<template> |
|||
<Page> |
|||
<LocalizationResourceTable /> |
|||
</Page> |
|||
</template> |
|||
@ -0,0 +1,15 @@ |
|||
<script lang="ts" setup> |
|||
import { Page } from '@vben/common-ui'; |
|||
|
|||
import { LocalizationTextTable } from '@abp/localization'; |
|||
|
|||
defineOptions({ |
|||
name: 'LocalizationTexts', |
|||
}); |
|||
</script> |
|||
|
|||
<template> |
|||
<Page> |
|||
<LocalizationTextTable /> |
|||
</Page> |
|||
</template> |
|||
@ -1 +0,0 @@ |
|||
export * from './permissions'; |
|||
@ -1,4 +1,4 @@ |
|||
export * from './api'; |
|||
export * from './components'; |
|||
export * from './constants'; |
|||
export { UserLookupPermissions } from './constants/permissions'; |
|||
export * from './types'; |
|||
|
|||
@ -0,0 +1,40 @@ |
|||
{ |
|||
"name": "@abp/localization", |
|||
"version": "9.0.4", |
|||
"homepage": "https://github.com/colinin/abp-next-admin", |
|||
"bugs": "https://github.com/colinin/abp-next-admin/issues", |
|||
"repository": { |
|||
"type": "git", |
|||
"url": "git+https://github.com/colinin/abp-next-admin.git", |
|||
"directory": "packages/@abp/localization" |
|||
}, |
|||
"license": "MIT", |
|||
"type": "module", |
|||
"sideEffects": [ |
|||
"**/*.css" |
|||
], |
|||
"exports": { |
|||
".": { |
|||
"types": "./src/index.ts", |
|||
"default": "./src/index.ts" |
|||
} |
|||
}, |
|||
"dependencies": { |
|||
"@abp/components": "workspace:*", |
|||
"@abp/core": "workspace:*", |
|||
"@abp/request": "workspace:*", |
|||
"@abp/signalr": "workspace:*", |
|||
"@abp/ui": "workspace:*", |
|||
"@ant-design/icons-vue": "catalog:", |
|||
"@vben/access": "workspace:*", |
|||
"@vben/common-ui": "workspace:*", |
|||
"@vben/hooks": "workspace:*", |
|||
"@vben/icons": "workspace:*", |
|||
"@vben/layouts": "workspace:*", |
|||
"@vben/locales": "workspace:*", |
|||
"ant-design-vue": "catalog:", |
|||
"dayjs": "catalog:", |
|||
"vue": "catalog:*", |
|||
"vxe-table": "catalog:" |
|||
} |
|||
} |
|||
@ -0,0 +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, |
|||
}; |
|||
} |
|||
@ -0,0 +1,28 @@ |
|||
import type { ApplicationLocalizationDto } from '@abp/core'; |
|||
|
|||
import { useRequest } from '@abp/request'; |
|||
|
|||
export function useLocalizationsApi() { |
|||
const { cancel, request } = useRequest(); |
|||
/** |
|||
* 获取应用程序语言 |
|||
* @returns 本地化配置 |
|||
*/ |
|||
function getLocalizationApi(options: { |
|||
cultureName: string; |
|||
onlyDynamics?: boolean; |
|||
}): Promise<ApplicationLocalizationDto> { |
|||
return request<ApplicationLocalizationDto>( |
|||
'/api/abp/application-localization', |
|||
{ |
|||
method: 'GET', |
|||
params: options, |
|||
}, |
|||
); |
|||
} |
|||
|
|||
return { |
|||
cancel, |
|||
getLocalizationApi, |
|||
}; |
|||
} |
|||
@ -0,0 +1,89 @@ |
|||
import type { ListResultDto } from '@abp/core'; |
|||
|
|||
import type { |
|||
ResourceCreateDto, |
|||
ResourceDto, |
|||
ResourceGetListInput, |
|||
ResourceUpdateDto, |
|||
} from '../types/resources'; |
|||
|
|||
import { useRequest } from '@abp/request'; |
|||
|
|||
export function useResourcesApi() { |
|||
const { cancel, request } = useRequest(); |
|||
|
|||
/** |
|||
* 查询资源列表 |
|||
* @param input 参数 |
|||
* @returns 资源列表 |
|||
*/ |
|||
function getListApi( |
|||
input?: ResourceGetListInput, |
|||
): Promise<ListResultDto<ResourceDto>> { |
|||
return request<ListResultDto<ResourceDto>>( |
|||
'/api/abp/localization/resources', |
|||
{ |
|||
method: 'GET', |
|||
params: input, |
|||
}, |
|||
); |
|||
} |
|||
|
|||
/** |
|||
* 查询资源 |
|||
* @param name 资源名称 |
|||
* @returns 查询的资源 |
|||
*/ |
|||
function getApi(name: string): Promise<ResourceDto> { |
|||
return request<ResourceDto>(`/api/localization/resources/${name}`, { |
|||
method: 'GET', |
|||
}); |
|||
} |
|||
|
|||
/** |
|||
* 删除资源 |
|||
* @param name 资源名称 |
|||
*/ |
|||
function deleteApi(name: string): Promise<void> { |
|||
return request(`/api/localization/resources/${name}`, { |
|||
method: 'DELETE', |
|||
}); |
|||
} |
|||
|
|||
/** |
|||
* 创建资源 |
|||
* @param input 参数 |
|||
* @returns 创建的资源 |
|||
*/ |
|||
function createApi(input: ResourceCreateDto): Promise<ResourceDto> { |
|||
return request<ResourceDto>(`/api/localization/resources`, { |
|||
data: input, |
|||
method: 'POST', |
|||
}); |
|||
} |
|||
|
|||
/** |
|||
* 编辑资源 |
|||
* @param name 资源名称 |
|||
* @param input 参数 |
|||
* @returns 编辑的资源 |
|||
*/ |
|||
function updateApi( |
|||
name: string, |
|||
input: ResourceUpdateDto, |
|||
): Promise<ResourceDto> { |
|||
return request<ResourceDto>(`/api/localization/resources/${name}`, { |
|||
data: input, |
|||
method: 'PUT', |
|||
}); |
|||
} |
|||
|
|||
return { |
|||
cancel, |
|||
createApi, |
|||
deleteApi, |
|||
getApi, |
|||
getListApi, |
|||
updateApi, |
|||
}; |
|||
} |
|||
@ -0,0 +1,62 @@ |
|||
import type { ListResultDto } from '@abp/core'; |
|||
|
|||
import type { |
|||
GetTextByKeyInput, |
|||
GetTextsInput, |
|||
SetTextInput, |
|||
TextDifferenceDto, |
|||
TextDto, |
|||
} from '../types/texts'; |
|||
|
|||
import { useRequest } from '@abp/request'; |
|||
|
|||
export function useTextsApi() { |
|||
const { cancel, request } = useRequest(); |
|||
|
|||
/** |
|||
* 查询文本列表 |
|||
* @param input 参数 |
|||
* @returns 文本列表 |
|||
*/ |
|||
function getListApi( |
|||
input: GetTextsInput, |
|||
): Promise<ListResultDto<TextDifferenceDto>> { |
|||
return request<ListResultDto<TextDifferenceDto>>( |
|||
'/api/abp/localization/texts', |
|||
{ |
|||
method: 'GET', |
|||
params: input, |
|||
}, |
|||
); |
|||
} |
|||
|
|||
/** |
|||
* 查询文本 |
|||
* @param input 参数 |
|||
* @returns 查询的文本 |
|||
*/ |
|||
function getApi(input: GetTextByKeyInput): Promise<TextDto> { |
|||
return request<TextDto>('/api/abp/localization/texts/by-culture-key', { |
|||
method: 'GET', |
|||
params: input, |
|||
}); |
|||
} |
|||
|
|||
/** |
|||
* 设置文本 |
|||
* @param input 参数 |
|||
*/ |
|||
function setApi(input: SetTextInput): Promise<void> { |
|||
return request('/api/localization/texts', { |
|||
data: input, |
|||
method: 'PUT', |
|||
}); |
|||
} |
|||
|
|||
return { |
|||
cancel, |
|||
getApi, |
|||
getListApi, |
|||
setApi, |
|||
}; |
|||
} |
|||
@ -0,0 +1,3 @@ |
|||
export { default as LocalizationLanguageTable } from './languages/LocalizationLanguageTable.vue'; |
|||
export { default as LocalizationResourceTable } from './resources/LocalizationResourceTable.vue'; |
|||
export { default as LocalizationTextTable } from './texts/LocalizationTextTable.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,234 @@ |
|||
<script setup lang="ts"> |
|||
import type { VxeGridListeners, VxeGridProps } from '@abp/ui'; |
|||
|
|||
import type { VbenFormProps } from '@vben/common-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 } 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 dataSource = ref<LanguageDto[]>([]); |
|||
const pageState = reactive({ |
|||
current: 1, |
|||
size: 10, |
|||
total: 0, |
|||
}); |
|||
|
|||
const abpStore = useAbpStore(); |
|||
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; |
|||
dataSource.value = items; |
|||
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 = dataSource.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(row); |
|||
}, |
|||
title: $t('AbpUi.AreYouSure'), |
|||
}); |
|||
} |
|||
|
|||
async function onChange(data: LanguageDto) { |
|||
const input = await gridApi.formApi.getValues(); |
|||
onGet(input); |
|||
// 资源变化刷新本地多语言缓存 |
|||
const cultureName = |
|||
abpStore.application!.localization.currentCulture.cultureName; |
|||
if (data.cultureName === 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> |
|||
@ -0,0 +1,125 @@ |
|||
<script setup lang="ts"> |
|||
import type { FormInstance } from 'ant-design-vue'; |
|||
|
|||
import type { ResourceDto } from '../../types/resources'; |
|||
|
|||
import { defineEmits, defineOptions, ref, toValue, useTemplateRef } from 'vue'; |
|||
|
|||
import { useVbenModal } from '@vben/common-ui'; |
|||
import { $t } from '@vben/locales'; |
|||
|
|||
import { Checkbox, Form, Input, message } from 'ant-design-vue'; |
|||
|
|||
import { useResourcesApi } from '../../api/useResourcesApi'; |
|||
|
|||
defineOptions({ |
|||
name: 'LocalizationResourceModal', |
|||
}); |
|||
const emits = defineEmits<{ |
|||
(event: 'change', data: ResourceDto): void; |
|||
}>(); |
|||
|
|||
const FormItem = Form.Item; |
|||
|
|||
const defaultModel = { |
|||
displayName: '', |
|||
enable: true, |
|||
name: '', |
|||
} as ResourceDto; |
|||
|
|||
const form = useTemplateRef<FormInstance>('form'); |
|||
const formModel = ref<ResourceDto>({ ...defaultModel }); |
|||
|
|||
const { cancel, createApi, getApi, updateApi } = useResourcesApi(); |
|||
const [Modal, modalApi] = useVbenModal({ |
|||
class: 'w-1/2', |
|||
draggable: true, |
|||
fullscreenButton: false, |
|||
onCancel() { |
|||
modalApi.close(); |
|||
}, |
|||
onClosed() { |
|||
cancel('LocalizationResourceModal has closed!'); |
|||
}, |
|||
onConfirm: onSubmit, |
|||
onOpenChange: async (isOpen: boolean) => { |
|||
if (isOpen) { |
|||
formModel.value = { ...defaultModel }; |
|||
modalApi.setState({ |
|||
title: $t('LocalizationManagement.Resource:AddNew'), |
|||
}); |
|||
const { name } = modalApi.getData<ResourceDto>(); |
|||
name && (await onGet(name)); |
|||
} |
|||
}, |
|||
title: $t('LocalizationManagement.Resource:AddNew'), |
|||
}); |
|||
async function onGet(name: string) { |
|||
try { |
|||
modalApi.setState({ loading: true }); |
|||
const dto = await getApi(name); |
|||
formModel.value = dto; |
|||
modalApi.setState({ |
|||
title: `${$t('AbpLocalization.Resources')} - ${dto.name}`, |
|||
}); |
|||
} 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.name, 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('LocalizationManagement.DisplayName:Enable')" |
|||
name="enable" |
|||
> |
|||
<Checkbox v-model:checked="formModel.enable"> |
|||
{{ $t('LocalizationManagement.DisplayName:Enable') }} |
|||
</Checkbox> |
|||
</FormItem> |
|||
<FormItem |
|||
:label="$t('AbpLocalization.DisplayName:ResourceName')" |
|||
name="name" |
|||
required |
|||
> |
|||
<Input v-model:value="formModel.name" autocomplete="off" /> |
|||
</FormItem> |
|||
<FormItem |
|||
:label="$t('AbpLocalization.DisplayName:DisplayName')" |
|||
name="displayName" |
|||
required |
|||
> |
|||
<Input v-model:value="formModel.displayName" autocomplete="off" /> |
|||
</FormItem> |
|||
<FormItem |
|||
:label="$t('AbpLocalization.DisplayName:Description')" |
|||
name="description" |
|||
> |
|||
<Input v-model:value="formModel.description" autocomplete="off" /> |
|||
</FormItem> |
|||
</Form> |
|||
</Modal> |
|||
</template> |
|||
|
|||
<style scoped></style> |
|||
@ -0,0 +1,225 @@ |
|||
<script setup lang="ts"> |
|||
import type { VxeGridListeners, VxeGridProps } from '@abp/ui'; |
|||
|
|||
import type { VbenFormProps } from '@vben/common-ui'; |
|||
|
|||
import type { ResourceDto } from '../../types/resources'; |
|||
|
|||
import { defineAsyncComponent, h, onMounted, reactive, ref } from 'vue'; |
|||
|
|||
import { useVbenModal } from '@vben/common-ui'; |
|||
import { $t } from '@vben/locales'; |
|||
|
|||
import { useAbpStore } 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 { useLocalizationsApi } from '../../api/useLocalizationsApi'; |
|||
import { useResourcesApi } from '../../api/useResourcesApi'; |
|||
import { ResourcesPermissions } from '../../constants/permissions'; |
|||
|
|||
defineOptions({ |
|||
name: 'LocalizationResourceTable', |
|||
}); |
|||
|
|||
const dataSource = ref<ResourceDto[]>([]); |
|||
const pageState = reactive({ |
|||
current: 1, |
|||
size: 10, |
|||
total: 0, |
|||
}); |
|||
|
|||
const abpStore = useAbpStore(); |
|||
const { deleteApi, getListApi } = useResourcesApi(); |
|||
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<ResourceDto> = { |
|||
columns: [ |
|||
{ |
|||
align: 'left', |
|||
field: 'name', |
|||
minWidth: 150, |
|||
title: $t('AbpFeatureManagement.DisplayName:Name'), |
|||
}, |
|||
{ |
|||
align: 'left', |
|||
field: 'displayName', |
|||
minWidth: 150, |
|||
title: $t('AbpFeatureManagement.DisplayName:DisplayName'), |
|||
}, |
|||
{ |
|||
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<ResourceDto> = { |
|||
pageChange(params) { |
|||
pageState.current = params.currentPage; |
|||
pageState.size = params.pageSize; |
|||
onPageChange(); |
|||
}, |
|||
}; |
|||
|
|||
const [LocalizationResourceModal, modalApi] = useVbenModal({ |
|||
connectedComponent: defineAsyncComponent( |
|||
() => import('./LocalizationResourceModal.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; |
|||
dataSource.value = items; |
|||
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 = dataSource.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: ResourceDto) { |
|||
modalApi.setData(row); |
|||
modalApi.open(); |
|||
} |
|||
|
|||
function onDelete(row: ResourceDto) { |
|||
Modal.confirm({ |
|||
centered: true, |
|||
content: `${$t('AbpUi.ItemWillBeDeletedMessageWithFormat', [row.name])}`, |
|||
onOk: async () => { |
|||
await deleteApi(row.name); |
|||
message.success($t('AbpUi.DeletedSuccessfully')); |
|||
onChange(); |
|||
}, |
|||
title: $t('AbpUi.AreYouSure'), |
|||
}); |
|||
} |
|||
|
|||
async function onChange() { |
|||
const input = await gridApi.formApi.getValues(); |
|||
onGet(input); |
|||
// 资源变化刷新本地多语言缓存 |
|||
const cultureName = abpStore.localization!.currentCulture.cultureName; |
|||
const localization = await getLocalizationApi({ |
|||
cultureName, |
|||
}); |
|||
abpStore.setLocalization(localization); |
|||
} |
|||
|
|||
onMounted(onGet); |
|||
</script> |
|||
|
|||
<template> |
|||
<Grid :table-title="$t('AbpLocalization.Resources')"> |
|||
<template #toolbar-tools> |
|||
<Button |
|||
:icon="h(PlusOutlined)" |
|||
type="primary" |
|||
v-access:code="[ResourcesPermissions.Create]" |
|||
@click="onCreate" |
|||
> |
|||
{{ $t('LocalizationManagement.Resource:AddNew') }} |
|||
</Button> |
|||
</template> |
|||
<template #action="{ row }"> |
|||
<div class="flex flex-row"> |
|||
<Button |
|||
:icon="h(EditOutlined)" |
|||
block |
|||
type="link" |
|||
v-access:code="[ResourcesPermissions.Update]" |
|||
@click="onUpdate(row)" |
|||
> |
|||
{{ $t('AbpUi.Edit') }} |
|||
</Button> |
|||
<Button |
|||
v-if="!row.isStatic" |
|||
:icon="h(DeleteOutlined)" |
|||
block |
|||
danger |
|||
type="link" |
|||
v-access:code="[ResourcesPermissions.Delete]" |
|||
@click="onDelete(row)" |
|||
> |
|||
{{ $t('AbpUi.Delete') }} |
|||
</Button> |
|||
</div> |
|||
</template> |
|||
</Grid> |
|||
<LocalizationResourceModal @change="onChange" /> |
|||
</template> |
|||
|
|||
<style scoped></style> |
|||
@ -0,0 +1,196 @@ |
|||
<script setup lang="ts"> |
|||
import type { FormInstance } from 'ant-design-vue'; |
|||
|
|||
import type { LanguageDto } from '../../types/languages'; |
|||
import type { ResourceDto } from '../../types/resources'; |
|||
import type { |
|||
GetTextByKeyInput, |
|||
TextDifferenceDto, |
|||
TextDto, |
|||
} from '../../types/texts'; |
|||
|
|||
import { |
|||
defineEmits, |
|||
defineOptions, |
|||
onMounted, |
|||
ref, |
|||
toValue, |
|||
useTemplateRef, |
|||
} from 'vue'; |
|||
|
|||
import { useVbenModal } from '@vben/common-ui'; |
|||
import { $t } from '@vben/locales'; |
|||
|
|||
import { Form, Input, message, Select, Textarea } from 'ant-design-vue'; |
|||
|
|||
import { useLanguagesApi } from '../../api/useLanguagesApi'; |
|||
import { useResourcesApi } from '../../api/useResourcesApi'; |
|||
import { useTextsApi } from '../../api/useTextsApi'; |
|||
|
|||
defineOptions({ |
|||
name: 'LocalizationTextModal', |
|||
}); |
|||
const emits = defineEmits<{ |
|||
(event: 'change', data: TextDto): void; |
|||
}>(); |
|||
|
|||
const FormItem = Form.Item; |
|||
|
|||
const defaultModel = {} as TextDto; |
|||
|
|||
const isEditModal = ref(false); |
|||
const form = useTemplateRef<FormInstance>('form'); |
|||
const formModel = ref<TextDto>({ ...defaultModel }); |
|||
const resources = ref<ResourceDto[]>([]); |
|||
const languages = ref<LanguageDto[]>([]); |
|||
|
|||
const { getListApi: getLanguagesApi } = useLanguagesApi(); |
|||
const { getListApi: getResourcesApi } = useResourcesApi(); |
|||
const { cancel, getApi, setApi } = useTextsApi(); |
|||
|
|||
const [Modal, modalApi] = useVbenModal({ |
|||
class: 'w-1/2', |
|||
draggable: true, |
|||
fullscreenButton: false, |
|||
onCancel() { |
|||
modalApi.close(); |
|||
}, |
|||
onClosed() { |
|||
cancel('LocalizationTextModal has closed!'); |
|||
}, |
|||
onConfirm: onSubmit, |
|||
onOpenChange: async (isOpen: boolean) => { |
|||
if (isOpen) { |
|||
isEditModal.value = false; |
|||
modalApi.setState({ |
|||
title: $t('LocalizationManagement.Text:AddNew'), |
|||
}); |
|||
const modalData = modalApi.getData<TextDifferenceDto>(); |
|||
formModel.value = { ...modalData }; |
|||
await onGet(); |
|||
} |
|||
}, |
|||
title: $t('LocalizationManagement.Text:AddNew'), |
|||
}); |
|||
|
|||
async function onInit() { |
|||
const [languageRes, resourceRes] = await Promise.all([ |
|||
getLanguagesApi(), |
|||
getResourcesApi(), |
|||
]); |
|||
languages.value = languageRes.items; |
|||
resources.value = resourceRes.items; |
|||
} |
|||
|
|||
async function onGet() { |
|||
const dto = modalApi.getData<TextDifferenceDto>(); |
|||
if (dto.targetCultureName) { |
|||
isEditModal.value = true; |
|||
await onLoad({ |
|||
cultureName: dto.targetCultureName, |
|||
key: dto.key, |
|||
resourceName: dto.resourceName, |
|||
}); |
|||
} |
|||
} |
|||
|
|||
async function onLanguageChange(value: string) { |
|||
const dto = modalApi.getData<TextDifferenceDto>(); |
|||
if (dto.targetCultureName) { |
|||
await onLoad({ |
|||
cultureName: value, |
|||
key: dto.key, |
|||
resourceName: dto.resourceName, |
|||
}); |
|||
} |
|||
} |
|||
|
|||
async function onLoad(input: GetTextByKeyInput) { |
|||
try { |
|||
modalApi.setState({ loading: true }); |
|||
const textDto = await getApi(input); |
|||
formModel.value = textDto; |
|||
modalApi.setState({ |
|||
title: `${$t('AbpLocalization.Texts')} - ${textDto.key}`, |
|||
}); |
|||
} finally { |
|||
modalApi.setState({ loading: false }); |
|||
} |
|||
} |
|||
|
|||
async function onSubmit() { |
|||
await form.value?.validate(); |
|||
try { |
|||
modalApi.setState({ submitting: true }); |
|||
const input = toValue(formModel); |
|||
await setApi(input); |
|||
message.success($t('AbpUi.SavedSuccessfully')); |
|||
emits('change', input); |
|||
modalApi.close(); |
|||
} finally { |
|||
modalApi.setState({ submitting: false }); |
|||
} |
|||
} |
|||
|
|||
onMounted(onInit); |
|||
</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 |
|||
> |
|||
<Select |
|||
v-model:value="formModel.cultureName" |
|||
:options="languages" |
|||
:field-names="{ label: 'displayName', value: 'cultureName' }" |
|||
@change="(value) => onLanguageChange(value!.toString())" |
|||
/> |
|||
</FormItem> |
|||
<FormItem |
|||
:label="$t('AbpLocalization.DisplayName:ResourceName')" |
|||
name="resourceName" |
|||
required |
|||
> |
|||
<Select |
|||
v-model:value="formModel.resourceName" |
|||
:options="resources" |
|||
:disabled="isEditModal" |
|||
:field-names="{ label: 'displayName', value: 'name' }" |
|||
/> |
|||
</FormItem> |
|||
<FormItem |
|||
:label="$t('AbpLocalization.DisplayName:Key')" |
|||
name="key" |
|||
required |
|||
> |
|||
<Input |
|||
:disabled="isEditModal" |
|||
v-model:value="formModel.key" |
|||
autocomplete="off" |
|||
/> |
|||
</FormItem> |
|||
<FormItem |
|||
:label="$t('AbpLocalization.DisplayName:Value')" |
|||
name="value" |
|||
required |
|||
> |
|||
<Textarea |
|||
:auto-size="{ minRows: 3 }" |
|||
v-model:value="formModel.value" |
|||
autocomplete="off" |
|||
/> |
|||
</FormItem> |
|||
</Form> |
|||
</Modal> |
|||
</template> |
|||
|
|||
<style scoped></style> |
|||
@ -0,0 +1,319 @@ |
|||
<script setup lang="ts"> |
|||
import type { VxeGridListeners, VxeGridProps } from '@abp/ui'; |
|||
|
|||
import type { VbenFormProps } from '@vben/common-ui'; |
|||
|
|||
import type { LanguageDto, ResourceDto } from '../../types'; |
|||
import type { TextDifferenceDto, TextDto } from '../../types/texts'; |
|||
|
|||
import { defineAsyncComponent, h, onMounted, reactive, ref } from 'vue'; |
|||
|
|||
import { useVbenModal } from '@vben/common-ui'; |
|||
import { $t } from '@vben/locales'; |
|||
|
|||
import { useAbpStore } from '@abp/core'; |
|||
import { useVbenVxeGrid } from '@abp/ui'; |
|||
import { EditOutlined, PlusOutlined } from '@ant-design/icons-vue'; |
|||
import { Button, Select } from 'ant-design-vue'; |
|||
|
|||
import { useLanguagesApi } from '../../api/useLanguagesApi'; |
|||
import { useLocalizationsApi } from '../../api/useLocalizationsApi'; |
|||
import { useResourcesApi } from '../../api/useResourcesApi'; |
|||
import { useTextsApi } from '../../api/useTextsApi'; |
|||
import { TextsPermissions } from '../../constants/permissions'; |
|||
|
|||
defineOptions({ |
|||
name: 'LocalizationTextTable', |
|||
}); |
|||
|
|||
const dataSource = ref<TextDifferenceDto[]>([]); |
|||
const resources = ref<ResourceDto[]>([]); |
|||
const languages = ref<LanguageDto[]>([]); |
|||
const targetValueOptions = reactive([ |
|||
{ |
|||
label: $t('AbpLocalization.DisplayName:Any'), |
|||
value: 'false', |
|||
}, |
|||
{ |
|||
label: $t('AbpLocalization.DisplayName:OnlyNull'), |
|||
value: 'true', |
|||
}, |
|||
]); |
|||
const pageState = reactive({ |
|||
current: 1, |
|||
size: 10, |
|||
total: 0, |
|||
}); |
|||
|
|||
const abpStore = useAbpStore(); |
|||
const { getListApi } = useTextsApi(); |
|||
const { getListApi: getLanguagesApi } = useLanguagesApi(); |
|||
const { getListApi: getResourcesApi } = useResourcesApi(); |
|||
const { getLocalizationApi } = useLocalizationsApi(); |
|||
|
|||
const formOptions: VbenFormProps = { |
|||
// 默认展开 |
|||
collapsed: false, |
|||
collapsedRows: 2, |
|||
commonConfig: { |
|||
// 所有表单项 |
|||
componentProps: { |
|||
class: 'w-full', |
|||
}, |
|||
}, |
|||
compact: false, |
|||
handleReset: onReset, |
|||
async handleSubmit(params) { |
|||
pageState.current = 1; |
|||
await onGet(params); |
|||
}, |
|||
schema: [ |
|||
{ |
|||
component: 'Input', |
|||
fieldName: 'cultureName', |
|||
formItemClass: 'items-baseline', |
|||
label: $t('AbpLocalization.DisplayName:CultureName'), |
|||
rules: 'selectRequired', |
|||
}, |
|||
{ |
|||
component: 'Input', |
|||
fieldName: 'targetCultureName', |
|||
formItemClass: 'items-baseline', |
|||
label: $t('AbpLocalization.DisplayName:TargetCultureName'), |
|||
rules: 'selectRequired', |
|||
}, |
|||
{ |
|||
component: 'Input', |
|||
fieldName: 'resourceName', |
|||
label: $t('AbpLocalization.DisplayName:ResourceName'), |
|||
}, |
|||
{ |
|||
component: 'Input', |
|||
fieldName: 'onlyNull', |
|||
label: $t('AbpLocalization.DisplayName:TargetValue'), |
|||
}, |
|||
{ |
|||
component: 'Input', |
|||
fieldName: 'filter', |
|||
formItemClass: 'col-span-2 items-baseline', |
|||
label: $t('AbpUi.Search'), |
|||
}, |
|||
], |
|||
// 控制表单是否显示折叠按钮 |
|||
showCollapseButton: true, |
|||
// 按下回车时是否提交表单 |
|||
submitOnEnter: true, |
|||
}; |
|||
|
|||
const gridOptions: VxeGridProps<TextDifferenceDto> = { |
|||
columns: [ |
|||
{ |
|||
align: 'left', |
|||
field: 'key', |
|||
minWidth: 150, |
|||
title: $t('AbpLocalization.DisplayName:Key'), |
|||
}, |
|||
{ |
|||
align: 'left', |
|||
field: 'value', |
|||
minWidth: 150, |
|||
title: $t('AbpLocalization.DisplayName:Value'), |
|||
}, |
|||
{ |
|||
align: 'left', |
|||
field: 'targetValue', |
|||
minWidth: 150, |
|||
title: $t('AbpLocalization.DisplayName:TargetValue'), |
|||
}, |
|||
{ |
|||
align: 'left', |
|||
field: 'resourceName', |
|||
minWidth: 150, |
|||
title: $t('AbpLocalization.DisplayName:ResourceName'), |
|||
}, |
|||
{ |
|||
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<TextDifferenceDto> = { |
|||
pageChange(params) { |
|||
pageState.current = params.currentPage; |
|||
pageState.size = params.pageSize; |
|||
onPageChange(); |
|||
}, |
|||
}; |
|||
|
|||
const [Grid, gridApi] = useVbenVxeGrid({ |
|||
formOptions, |
|||
gridEvents, |
|||
gridOptions, |
|||
}); |
|||
|
|||
const [LocalizationTextModal, modalApi] = useVbenModal({ |
|||
connectedComponent: defineAsyncComponent( |
|||
() => import('./LocalizationTextModal.vue'), |
|||
), |
|||
}); |
|||
|
|||
async function onInit() { |
|||
const [languageRes, resourceRes] = await Promise.all([ |
|||
getLanguagesApi(), |
|||
getResourcesApi(), |
|||
]); |
|||
languages.value = languageRes.items; |
|||
resources.value = resourceRes.items; |
|||
} |
|||
|
|||
function onFieldChange(fieldName: string, value?: string) { |
|||
gridApi.formApi.setFieldValue(fieldName, value); |
|||
} |
|||
|
|||
async function onGet(input: Record<string, string>) { |
|||
try { |
|||
gridApi.setLoading(true); |
|||
const { items } = await getListApi(input as any); |
|||
pageState.total = items.length; |
|||
dataSource.value = items; |
|||
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 = dataSource.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, |
|||
}, |
|||
}); |
|||
} |
|||
|
|||
async function onCreate() { |
|||
const input = await gridApi.formApi.getValues(); |
|||
modalApi.setData({ |
|||
cultureName: input.targetCultureName, |
|||
resourceName: input.resourceName, |
|||
}); |
|||
modalApi.open(); |
|||
} |
|||
|
|||
function onUpdate(row: TextDifferenceDto) { |
|||
modalApi.setData(row); |
|||
modalApi.open(); |
|||
} |
|||
|
|||
async function onChange(data: TextDto) { |
|||
const input = await gridApi.formApi.getValues(); |
|||
onGet(input); |
|||
// 资源变化刷新本地多语言缓存 |
|||
const cultureName = |
|||
abpStore.application!.localization.currentCulture.cultureName; |
|||
if (data.cultureName === cultureName) { |
|||
const localization = await getLocalizationApi({ |
|||
cultureName, |
|||
}); |
|||
abpStore.setLocalization(localization); |
|||
} |
|||
} |
|||
|
|||
onMounted(onInit); |
|||
</script> |
|||
|
|||
<template> |
|||
<Grid :table-title="$t('AbpLocalization.Texts')"> |
|||
<template #form-cultureName="{ modelValue }"> |
|||
<Select |
|||
class="w-full" |
|||
allow-clear |
|||
:options="languages" |
|||
:value="modelValue" |
|||
:field-names="{ label: 'displayName', value: 'cultureName' }" |
|||
@change="(value) => onFieldChange('cultureName', value?.toString())" |
|||
/> |
|||
</template> |
|||
<template #form-targetCultureName="{ modelValue }"> |
|||
<Select |
|||
class="w-full" |
|||
allow-clear |
|||
:options="languages" |
|||
:value="modelValue" |
|||
:field-names="{ label: 'displayName', value: 'cultureName' }" |
|||
@change=" |
|||
(value) => onFieldChange('targetCultureName', value?.toString()) |
|||
" |
|||
/> |
|||
</template> |
|||
<template #form-resourceName="{ modelValue }"> |
|||
<Select |
|||
class="w-full" |
|||
allow-clear |
|||
:options="resources" |
|||
:value="modelValue" |
|||
:field-names="{ label: 'displayName', value: 'name' }" |
|||
@change="(value) => onFieldChange('resourceName', value?.toString())" |
|||
/> |
|||
</template> |
|||
<template #form-onlyNull="{ modelValue }"> |
|||
<Select |
|||
class="w-full" |
|||
allow-clear |
|||
:options="targetValueOptions" |
|||
:value="modelValue" |
|||
@change="(value) => onFieldChange('onlyNull', value?.toString())" |
|||
/> |
|||
</template> |
|||
<template #toolbar-tools> |
|||
<Button |
|||
:icon="h(PlusOutlined)" |
|||
type="primary" |
|||
v-access:code="[TextsPermissions.Create]" |
|||
@click="onCreate" |
|||
> |
|||
{{ $t('LocalizationManagement.Text:AddNew') }} |
|||
</Button> |
|||
</template> |
|||
<template #action="{ row }"> |
|||
<div class="flex flex-row"> |
|||
<Button |
|||
:icon="h(EditOutlined)" |
|||
block |
|||
type="link" |
|||
v-access:code="[TextsPermissions.Update]" |
|||
@click="onUpdate(row)" |
|||
> |
|||
{{ $t('AbpUi.Edit') }} |
|||
</Button> |
|||
</div> |
|||
</template> |
|||
</Grid> |
|||
<LocalizationTextModal @change="onChange" /> |
|||
</template> |
|||
|
|||
<style scoped></style> |
|||
@ -0,0 +1,30 @@ |
|||
/** 资源管理权限 */ |
|||
export const ResourcesPermissions = { |
|||
/** 新增 */ |
|||
Create: 'LocalizationManagement.Resource.Create', |
|||
Default: 'LocalizationManagement.Resource', |
|||
/** 删除 */ |
|||
Delete: 'LocalizationManagement.Resource.Delete', |
|||
/** 更新 */ |
|||
Update: 'LocalizationManagement.Resource.Update', |
|||
}; |
|||
/** 语言管理权限 */ |
|||
export const LanguagesPermissions = { |
|||
/** 新增 */ |
|||
Create: 'LocalizationManagement.Language.Create', |
|||
Default: 'LocalizationManagement.Language', |
|||
/** 删除 */ |
|||
Delete: 'LocalizationManagement.Language.Delete', |
|||
/** 更新 */ |
|||
Update: 'LocalizationManagement.Language.Update', |
|||
}; |
|||
/** 文本管理权限 */ |
|||
export const TextsPermissions = { |
|||
/** 新增 */ |
|||
Create: 'LocalizationManagement.Text.Create', |
|||
Default: 'LocalizationManagement.Text', |
|||
/** 删除 */ |
|||
Delete: 'LocalizationManagement.Text.Delete', |
|||
/** 更新 */ |
|||
Update: 'LocalizationManagement.Text.Update', |
|||
}; |
|||
@ -0,0 +1,3 @@ |
|||
export * from './api'; |
|||
export * from './components'; |
|||
export * from './types'; |
|||
@ -0,0 +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, |
|||
}; |
|||
@ -0,0 +1,33 @@ |
|||
import type { AuditedEntityDto } from '@abp/core'; |
|||
|
|||
interface ResourceDto extends AuditedEntityDto<string> { |
|||
defaultCultureName?: string; |
|||
description?: string; |
|||
displayName: string; |
|||
enable: boolean; |
|||
name: string; |
|||
} |
|||
|
|||
interface ResourceCreateOrUpdateDto { |
|||
defaultCultureName?: string; |
|||
description?: string; |
|||
displayName: string; |
|||
enable: boolean; |
|||
} |
|||
|
|||
interface ResourceCreateDto extends ResourceCreateOrUpdateDto { |
|||
name: string; |
|||
} |
|||
|
|||
type ResourceUpdateDto = ResourceCreateOrUpdateDto; |
|||
|
|||
interface ResourceGetListInput { |
|||
filter?: string; |
|||
} |
|||
|
|||
export type { |
|||
ResourceCreateDto, |
|||
ResourceDto, |
|||
ResourceGetListInput, |
|||
ResourceUpdateDto, |
|||
}; |
|||
@ -0,0 +1,51 @@ |
|||
interface GetTextByKeyInput { |
|||
cultureName: string; |
|||
key: string; |
|||
resourceName: string; |
|||
} |
|||
|
|||
interface GetTextsInput { |
|||
cultureName: string; |
|||
filter?: string; |
|||
onlyNull?: boolean; |
|||
resourceName?: string; |
|||
targetCultureName: string; |
|||
} |
|||
|
|||
interface SetTextInput { |
|||
cultureName: string; |
|||
key: string; |
|||
resourceName: string; |
|||
value: string; |
|||
} |
|||
|
|||
interface RestoreDefaultTextInput { |
|||
cultureName: string; |
|||
key: string; |
|||
resourceName: string; |
|||
} |
|||
|
|||
interface TextDifferenceDto { |
|||
cultureName: string; |
|||
key: string; |
|||
resourceName: string; |
|||
targetCultureName: string; |
|||
targetValue: string; |
|||
value: string; |
|||
} |
|||
|
|||
interface TextDto { |
|||
cultureName: string; |
|||
key: string; |
|||
resourceName: string; |
|||
value: string; |
|||
} |
|||
|
|||
export type { |
|||
GetTextByKeyInput, |
|||
GetTextsInput, |
|||
RestoreDefaultTextInput, |
|||
SetTextInput, |
|||
TextDifferenceDto, |
|||
TextDto, |
|||
}; |
|||
@ -0,0 +1,6 @@ |
|||
{ |
|||
"$schema": "https://json.schemastore.org/tsconfig", |
|||
"extends": "@vben/tsconfig/web.json", |
|||
"include": ["src"], |
|||
"exclude": ["node_modules"] |
|||
} |
|||
@ -1 +0,0 @@ |
|||
export * from './permissions'; |
|||
@ -1,4 +1,3 @@ |
|||
export * from './api'; |
|||
export * from './components'; |
|||
export * from './constants'; |
|||
export * from './types'; |
|||
|
|||
@ -1 +0,0 @@ |
|||
export * from './permissions'; |
|||
@ -1 +0,0 @@ |
|||
export * from './permissions'; |
|||
@ -1,4 +1,3 @@ |
|||
export * from './api'; |
|||
export * from './components'; |
|||
export * from './constants'; |
|||
export * from './types'; |
|||
|
|||
@ -1 +0,0 @@ |
|||
export * from './permissions'; |
|||
@ -1,4 +1,3 @@ |
|||
export * from './api'; |
|||
export * from './components'; |
|||
export * from './constants'; |
|||
export * from './types'; |
|||
|
|||
@ -1,77 +0,0 @@ |
|||
import type { ListResultDto } from '@abp/core'; |
|||
|
|||
import type { |
|||
SettingDefinitionCreateDto, |
|||
SettingDefinitionDto, |
|||
SettingDefinitionGetListInput, |
|||
SettingDefinitionUpdateDto, |
|||
} from '../types/definitions'; |
|||
|
|||
import { requestClient } from '@abp/request'; |
|||
|
|||
/** |
|||
* 删除设置定义 |
|||
* @param name 设置名称 |
|||
*/ |
|||
export function deleteApi(name: string): Promise<void> { |
|||
return requestClient.delete( |
|||
`/api/setting-management/settings/definitions/${name}`, |
|||
); |
|||
} |
|||
|
|||
/** |
|||
* 查询设置定义 |
|||
* @param name 设置名称 |
|||
* @returns 设置定义数据传输对象 |
|||
*/ |
|||
export function getApi(name: string): Promise<SettingDefinitionDto> { |
|||
return requestClient.get<SettingDefinitionDto>( |
|||
`/api/setting-management/settings/definitions/${name}`, |
|||
); |
|||
} |
|||
|
|||
/** |
|||
* 查询设置定义列表 |
|||
* @param input 设置过滤条件 |
|||
* @returns 设置定义数据传输对象列表 |
|||
*/ |
|||
export function getListApi( |
|||
input?: SettingDefinitionGetListInput, |
|||
): Promise<ListResultDto<SettingDefinitionDto>> { |
|||
return requestClient.get<ListResultDto<SettingDefinitionDto>>( |
|||
`/api/setting-management/settings/definitions`, |
|||
{ |
|||
params: input, |
|||
}, |
|||
); |
|||
} |
|||
|
|||
/** |
|||
* 创建设置定义 |
|||
* @param input 设置定义参数 |
|||
* @returns 设置定义数据传输对象 |
|||
*/ |
|||
export function createApi( |
|||
input: SettingDefinitionCreateDto, |
|||
): Promise<SettingDefinitionDto> { |
|||
return requestClient.post<SettingDefinitionDto>( |
|||
'/api/setting-management/settings/definitions', |
|||
input, |
|||
); |
|||
} |
|||
|
|||
/** |
|||
* 更新设置定义 |
|||
* @param name 设置名称 |
|||
* @param input 设置定义参数 |
|||
* @returns 设置定义数据传输对象 |
|||
*/ |
|||
export function updateApi( |
|||
name: string, |
|||
input: SettingDefinitionUpdateDto, |
|||
): Promise<SettingDefinitionDto> { |
|||
return requestClient.put<SettingDefinitionDto>( |
|||
`/api/setting-management/settings/definitions/${name}`, |
|||
input, |
|||
); |
|||
} |
|||
@ -1,2 +1,2 @@ |
|||
export * as settingDefinitionsApi from './definitions'; |
|||
export * as settingsApi from './settings'; |
|||
export { useDefinitionsApi } from './useDefinitionsApi'; |
|||
export { useSettingsApi } from './useSettingsApi'; |
|||
|
|||
@ -1,84 +0,0 @@ |
|||
import type { ListResultDto } from '@abp/core'; |
|||
|
|||
import type { SettingGroup, SettingsUpdateInput } from '../types/settings'; |
|||
|
|||
import { requestClient } from '@abp/request'; |
|||
|
|||
/** |
|||
* 获取全局设置 |
|||
* @returns 设置数据传输对象列表 |
|||
*/ |
|||
export function getGlobalSettingsApi(): Promise<ListResultDto<SettingGroup>> { |
|||
return requestClient.get<ListResultDto<SettingGroup>>( |
|||
`/api/setting-management/settings/by-global`, |
|||
); |
|||
} |
|||
|
|||
/** |
|||
* 设置全局设置 |
|||
* @returns 设置数据传输对象列表 |
|||
*/ |
|||
export function setGlobalSettingsApi( |
|||
input: SettingsUpdateInput, |
|||
): Promise<void> { |
|||
return requestClient.put( |
|||
`/api/setting-management/settings/change-global`, |
|||
input, |
|||
); |
|||
} |
|||
|
|||
/** |
|||
* 获取租户设置 |
|||
* @returns 设置数据传输对象列表 |
|||
*/ |
|||
export function getTenantSettingsApi(): Promise<ListResultDto<SettingGroup>> { |
|||
return requestClient.get<ListResultDto<SettingGroup>>( |
|||
`/api/setting-management/settings/by-current-tenant`, |
|||
); |
|||
} |
|||
|
|||
/** |
|||
* 设置租户设置 |
|||
* @returns 设置数据传输对象列表 |
|||
*/ |
|||
export function setTenantSettingsApi( |
|||
input: SettingsUpdateInput, |
|||
): Promise<void> { |
|||
return requestClient.put( |
|||
`/api/setting-management/settings/change-current-tenant`, |
|||
input, |
|||
); |
|||
} |
|||
/** |
|||
* 获取用户设置 |
|||
* @returns 设置数据传输对象列表 |
|||
*/ |
|||
export function getUserSettingsApi(): Promise<ListResultDto<SettingGroup>> { |
|||
return requestClient.get<ListResultDto<SettingGroup>>( |
|||
`/api/setting-management/settings/by-current-user`, |
|||
); |
|||
} |
|||
|
|||
/** |
|||
* 设置用户设置 |
|||
* @returns 设置数据传输对象列表 |
|||
*/ |
|||
export function setUserSettingsApi(input: SettingsUpdateInput): Promise<void> { |
|||
return requestClient.put( |
|||
`/api/setting-management/settings/change-current-user`, |
|||
input, |
|||
); |
|||
} |
|||
|
|||
/** |
|||
* 发送测试邮件 |
|||
* @param emailAddress 邮件接收方地址 |
|||
*/ |
|||
export const sendTestEmailApi = (emailAddress: string) => { |
|||
return requestClient.post( |
|||
`/api/setting-management/settings/send-test-email`, |
|||
{ |
|||
emailAddress, |
|||
}, |
|||
); |
|||
}; |
|||
@ -0,0 +1,99 @@ |
|||
import type { ListResultDto } from '@abp/core'; |
|||
|
|||
import type { |
|||
SettingDefinitionCreateDto, |
|||
SettingDefinitionDto, |
|||
SettingDefinitionGetListInput, |
|||
SettingDefinitionUpdateDto, |
|||
} from '../types'; |
|||
|
|||
import { useRequest } from '@abp/request'; |
|||
|
|||
export function useDefinitionsApi() { |
|||
const { cancel, request } = useRequest(); |
|||
/** |
|||
* 删除设置定义 |
|||
* @param name 设置名称 |
|||
*/ |
|||
function deleteApi(name: string): Promise<void> { |
|||
return request(`/api/setting-management/settings/definitions/${name}`, { |
|||
method: 'DELETE', |
|||
}); |
|||
} |
|||
|
|||
/** |
|||
* 查询设置定义 |
|||
* @param name 设置名称 |
|||
* @returns 设置定义数据传输对象 |
|||
*/ |
|||
function getApi(name: string): Promise<SettingDefinitionDto> { |
|||
return request<SettingDefinitionDto>( |
|||
`/api/setting-management/settings/definitions/${name}`, |
|||
{ |
|||
method: 'GET', |
|||
}, |
|||
); |
|||
} |
|||
|
|||
/** |
|||
* 查询设置定义列表 |
|||
* @param input 设置过滤条件 |
|||
* @returns 设置定义数据传输对象列表 |
|||
*/ |
|||
function getListApi( |
|||
input?: SettingDefinitionGetListInput, |
|||
): Promise<ListResultDto<SettingDefinitionDto>> { |
|||
return request<ListResultDto<SettingDefinitionDto>>( |
|||
`/api/setting-management/settings/definitions`, |
|||
{ |
|||
method: 'GET', |
|||
params: input, |
|||
}, |
|||
); |
|||
} |
|||
|
|||
/** |
|||
* 创建设置定义 |
|||
* @param input 设置定义参数 |
|||
* @returns 设置定义数据传输对象 |
|||
*/ |
|||
function createApi( |
|||
input: SettingDefinitionCreateDto, |
|||
): Promise<SettingDefinitionDto> { |
|||
return request<SettingDefinitionDto>( |
|||
'/api/setting-management/settings/definitions', |
|||
{ |
|||
data: input, |
|||
method: 'POST', |
|||
}, |
|||
); |
|||
} |
|||
|
|||
/** |
|||
* 更新设置定义 |
|||
* @param name 设置名称 |
|||
* @param input 设置定义参数 |
|||
* @returns 设置定义数据传输对象 |
|||
*/ |
|||
function updateApi( |
|||
name: string, |
|||
input: SettingDefinitionUpdateDto, |
|||
): Promise<SettingDefinitionDto> { |
|||
return request<SettingDefinitionDto>( |
|||
`/api/setting-management/settings/definitions/${name}`, |
|||
{ |
|||
data: input, |
|||
method: 'PUT', |
|||
}, |
|||
); |
|||
} |
|||
|
|||
return { |
|||
cancel, |
|||
createApi, |
|||
deleteApi, |
|||
getApi, |
|||
getListApi, |
|||
updateApi, |
|||
}; |
|||
} |
|||
@ -0,0 +1,103 @@ |
|||
import type { ListResultDto } from '@abp/core'; |
|||
|
|||
import type { SettingGroup, SettingsUpdateInput } from '../types'; |
|||
|
|||
import { useRequest } from '@abp/request'; |
|||
|
|||
export function useSettingsApi() { |
|||
const { cancel, request } = useRequest(); |
|||
/** |
|||
* 获取全局设置 |
|||
* @returns 设置数据传输对象列表 |
|||
*/ |
|||
function getGlobalSettingsApi(): Promise<ListResultDto<SettingGroup>> { |
|||
return request<ListResultDto<SettingGroup>>( |
|||
`/api/setting-management/settings/by-global`, |
|||
{ |
|||
method: 'GET', |
|||
}, |
|||
); |
|||
} |
|||
|
|||
/** |
|||
* 设置全局设置 |
|||
* @returns 设置数据传输对象列表 |
|||
*/ |
|||
function setGlobalSettingsApi(input: SettingsUpdateInput): Promise<void> { |
|||
return request(`/api/setting-management/settings/change-global`, { |
|||
data: input, |
|||
method: 'PUT', |
|||
}); |
|||
} |
|||
|
|||
/** |
|||
* 获取租户设置 |
|||
* @returns 设置数据传输对象列表 |
|||
*/ |
|||
function getTenantSettingsApi(): Promise<ListResultDto<SettingGroup>> { |
|||
return request<ListResultDto<SettingGroup>>( |
|||
`/api/setting-management/settings/by-current-tenant`, |
|||
{ |
|||
method: 'GET', |
|||
}, |
|||
); |
|||
} |
|||
|
|||
/** |
|||
* 设置租户设置 |
|||
* @returns 设置数据传输对象列表 |
|||
*/ |
|||
function setTenantSettingsApi(input: SettingsUpdateInput): Promise<void> { |
|||
return request(`/api/setting-management/settings/change-current-tenant`, { |
|||
data: input, |
|||
method: 'PUT', |
|||
}); |
|||
} |
|||
/** |
|||
* 获取用户设置 |
|||
* @returns 设置数据传输对象列表 |
|||
*/ |
|||
function getUserSettingsApi(): Promise<ListResultDto<SettingGroup>> { |
|||
return request<ListResultDto<SettingGroup>>( |
|||
`/api/setting-management/settings/by-current-user`, |
|||
{ |
|||
method: 'GET', |
|||
}, |
|||
); |
|||
} |
|||
|
|||
/** |
|||
* 设置用户设置 |
|||
* @returns 设置数据传输对象列表 |
|||
*/ |
|||
function setUserSettingsApi(input: SettingsUpdateInput): Promise<void> { |
|||
return request(`/api/setting-management/settings/change-current-user`, { |
|||
data: input, |
|||
method: 'PUT', |
|||
}); |
|||
} |
|||
|
|||
/** |
|||
* 发送测试邮件 |
|||
* @param emailAddress 邮件接收方地址 |
|||
*/ |
|||
const sendTestEmailApi = (emailAddress: string) => { |
|||
return request(`/api/setting-management/settings/send-test-email`, { |
|||
data: { |
|||
emailAddress, |
|||
}, |
|||
method: 'POST', |
|||
}); |
|||
}; |
|||
|
|||
return { |
|||
cancel, |
|||
getGlobalSettingsApi, |
|||
getTenantSettingsApi, |
|||
getUserSettingsApi, |
|||
sendTestEmailApi, |
|||
setGlobalSettingsApi, |
|||
setTenantSettingsApi, |
|||
setUserSettingsApi, |
|||
}; |
|||
} |
|||
@ -1 +0,0 @@ |
|||
export * from './permissions'; |
|||
@ -1,4 +1,3 @@ |
|||
export * from './api'; |
|||
export * from './components'; |
|||
export * from './constants'; |
|||
export * from './types'; |
|||
|
|||
@ -1,172 +0,0 @@ |
|||
/** |
|||
* 通用组件共同的使用的基础组件，原先放在 adapter/form 内部，限制了使用范围，这里提取出来，方便其他地方使用 |
|||
* 可用于 vben-form、vben-modal、vben-drawer 等组件使用, |
|||
*/ |
|||
|
|||
import type { Component, SetupContext } from 'vue'; |
|||
|
|||
import type { BaseFormComponentType } from '@vben/common-ui'; |
|||
|
|||
import { h } from 'vue'; |
|||
|
|||
import { ApiComponent, globalShareState, IconPicker } from '@vben/common-ui'; |
|||
import { $t } from '@vben/locales'; |
|||
|
|||
import { |
|||
AutoComplete, |
|||
Button, |
|||
Checkbox, |
|||
CheckboxGroup, |
|||
DatePicker, |
|||
Divider, |
|||
Input, |
|||
InputNumber, |
|||
InputPassword, |
|||
InputSearch, |
|||
Mentions, |
|||
notification, |
|||
Radio, |
|||
RadioGroup, |
|||
RangePicker, |
|||
Rate, |
|||
Select, |
|||
Space, |
|||
Switch, |
|||
Textarea, |
|||
TimePicker, |
|||
TreeSelect, |
|||
Upload, |
|||
} from 'ant-design-vue'; |
|||
|
|||
const withDefaultPlaceholder = <T extends Component>( |
|||
component: T, |
|||
type: 'input' | 'select', |
|||
) => { |
|||
return (props: any, { attrs, slots }: Omit<SetupContext, 'expose'>) => { |
|||
const placeholder = props?.placeholder || $t(`ui.placeholder.${type}`); |
|||
return h(component, { ...props, ...attrs, placeholder }, slots); |
|||
}; |
|||
}; |
|||
|
|||
// 这里需要自行根据业务组件库进行适配，需要用到的组件都需要在这里类型说明
|
|||
export type ComponentType = |
|||
| 'ApiSelect' |
|||
| 'ApiTreeSelect' |
|||
| 'AutoComplete' |
|||
| 'Checkbox' |
|||
| 'CheckboxGroup' |
|||
| 'DatePicker' |
|||
| 'DefaultButton' |
|||
| 'Divider' |
|||
| 'IconPicker' |
|||
| 'Input' |
|||
| 'InputNumber' |
|||
| 'InputPassword' |
|||
| 'InputSearch' |
|||
| 'Mentions' |
|||
| 'PrimaryButton' |
|||
| 'Radio' |
|||
| 'RadioGroup' |
|||
| 'RangePicker' |
|||
| 'Rate' |
|||
| 'Select' |
|||
| 'Space' |
|||
| 'Switch' |
|||
| 'Textarea' |
|||
| 'TimePicker' |
|||
| 'TreeSelect' |
|||
| 'Upload' |
|||
| BaseFormComponentType; |
|||
|
|||
async function initComponentAdapter() { |
|||
const components: Partial<Record<ComponentType, Component>> = { |
|||
// 如果你的组件体积比较大，可以使用异步加载
|
|||
// Button: () =>
|
|||
// import('xxx').then((res) => res.Button),
|
|||
ApiSelect: (props, { attrs, slots }) => { |
|||
return h( |
|||
ApiComponent, |
|||
{ |
|||
placeholder: $t('ui.placeholder.select'), |
|||
...props, |
|||
...attrs, |
|||
component: Select, |
|||
loadingSlot: 'suffixIcon', |
|||
modelPropName: 'value', |
|||
visibleEvent: 'onDropdownVisibleChange', |
|||
}, |
|||
slots, |
|||
); |
|||
}, |
|||
ApiTreeSelect: (props, { attrs, slots }) => { |
|||
return h( |
|||
ApiComponent, |
|||
{ |
|||
placeholder: $t('ui.placeholder.select'), |
|||
...props, |
|||
...attrs, |
|||
component: TreeSelect, |
|||
fieldNames: { label: 'label', value: 'value', children: 'children' }, |
|||
loadingSlot: 'suffixIcon', |
|||
modelPropName: 'value', |
|||
optionsPropName: 'treeData', |
|||
visibleEvent: 'onVisibleChange', |
|||
}, |
|||
slots, |
|||
); |
|||
}, |
|||
AutoComplete, |
|||
Checkbox, |
|||
CheckboxGroup, |
|||
DatePicker, |
|||
// 自定义默认按钮
|
|||
DefaultButton: (props, { attrs, slots }) => { |
|||
return h(Button, { ...props, attrs, type: 'default' }, slots); |
|||
}, |
|||
Divider, |
|||
IconPicker: (props, { attrs, slots }) => { |
|||
return h( |
|||
IconPicker, |
|||
{ iconSlot: 'addonAfter', inputComponent: Input, ...props, ...attrs }, |
|||
slots, |
|||
); |
|||
}, |
|||
Input: withDefaultPlaceholder(Input, 'input'), |
|||
InputNumber: withDefaultPlaceholder(InputNumber, 'input'), |
|||
InputPassword: withDefaultPlaceholder(InputPassword, 'input'), |
|||
InputSearch: withDefaultPlaceholder(InputSearch, 'input'), |
|||
Mentions: withDefaultPlaceholder(Mentions, 'input'), |
|||
// 自定义主要按钮
|
|||
PrimaryButton: (props, { attrs, slots }) => { |
|||
return h(Button, { ...props, attrs, type: 'primary' }, slots); |
|||
}, |
|||
Radio, |
|||
RadioGroup, |
|||
RangePicker, |
|||
Rate, |
|||
Select: withDefaultPlaceholder(Select, 'select'), |
|||
Space, |
|||
Switch, |
|||
Textarea: withDefaultPlaceholder(Textarea, 'input'), |
|||
TimePicker, |
|||
TreeSelect: withDefaultPlaceholder(TreeSelect, 'select'), |
|||
Upload, |
|||
}; |
|||
|
|||
// 将组件注册到全局共享状态中
|
|||
globalShareState.setComponents(components); |
|||
|
|||
// 定义全局共享状态中的消息提示
|
|||
globalShareState.defineMessage({ |
|||
// 复制成功消息提示
|
|||
copyPreferencesSuccess: (title, content) => { |
|||
notification.success({ |
|||
description: content, |
|||
message: title, |
|||
placement: 'bottomRight', |
|||
}); |
|||
}, |
|||
}); |
|||
} |
|||
|
|||
export { initComponentAdapter }; |
|||
@ -1,47 +0,0 @@ |
|||
import type { |
|||
VbenFormSchema as FormSchema, |
|||
VbenFormProps, |
|||
} from '@vben/common-ui'; |
|||
|
|||
import type { ComponentType } from './component'; |
|||
|
|||
import { setupVbenForm, useVbenForm as useForm, z } from '@vben/common-ui'; |
|||
import { $t } from '@vben/locales'; |
|||
|
|||
setupVbenForm<ComponentType>({ |
|||
config: { |
|||
// ant design vue组件库默认都是 v-model:value
|
|||
baseModelPropName: 'value', |
|||
|
|||
// 一些组件是 v-model:checked 或者 v-model:fileList
|
|||
modelPropNameMap: { |
|||
Checkbox: 'checked', |
|||
Radio: 'checked', |
|||
Switch: 'checked', |
|||
Upload: 'fileList', |
|||
}, |
|||
}, |
|||
defineRules: { |
|||
// 输入项目必填国际化适配
|
|||
required: (value, _params, ctx) => { |
|||
if (value === undefined || value === null || value.length === 0) { |
|||
return $t('ui.formRules.required', [ctx.label]); |
|||
} |
|||
return true; |
|||
}, |
|||
// 选择项目必填国际化适配
|
|||
selectRequired: (value, _params, ctx) => { |
|||
if (value === undefined || value === null) { |
|||
return $t('ui.formRules.selectRequired', [ctx.label]); |
|||
} |
|||
return true; |
|||
}, |
|||
}, |
|||
}); |
|||
|
|||
const useVbenForm = useForm<ComponentType>; |
|||
|
|||
export { useVbenForm, z }; |
|||
|
|||
export type VbenFormSchema = FormSchema<ComponentType>; |
|||
export type { VbenFormProps }; |
|||
Some files were not shown because too many files changed in this diff
Loading…
Reference in new issue