12 changed files with 492 additions and 0 deletions
@ -0,0 +1,15 @@ |
|||||
|
<script lang="ts" setup> |
||||
|
import { Page } from '@vben/common-ui'; |
||||
|
|
||||
|
import { TemplateDefinitionTable } from '@abp/text-templating'; |
||||
|
|
||||
|
defineOptions({ |
||||
|
name: 'TemplateDefinitions', |
||||
|
}); |
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<Page> |
||||
|
<TemplateDefinitionTable /> |
||||
|
</Page> |
||||
|
</template> |
||||
@ -0,0 +1 @@ |
|||||
|
export { useTemplateDefinitionsApi } from './useTemplateDefinitionsApi'; |
||||
@ -0,0 +1,95 @@ |
|||||
|
import type { ListResultDto } from '@abp/core'; |
||||
|
|
||||
|
import type { |
||||
|
TextTemplateDefinitionCreateDto, |
||||
|
TextTemplateDefinitionDto, |
||||
|
TextTemplateDefinitionGetListInput, |
||||
|
TextTemplateDefinitionUpdateDto, |
||||
|
} from '../types/definitions'; |
||||
|
|
||||
|
import { useRequest } from '@abp/request'; |
||||
|
|
||||
|
export function useTemplateDefinitionsApi() { |
||||
|
const { cancel, request } = useRequest(); |
||||
|
|
||||
|
/** |
||||
|
* 新增模板定义 |
||||
|
* @param input 参数 |
||||
|
* @returns 模板定义数据传输对象 |
||||
|
*/ |
||||
|
function createApi( |
||||
|
input: TextTemplateDefinitionCreateDto, |
||||
|
): Promise<TextTemplateDefinitionDto> { |
||||
|
return request<TextTemplateDefinitionDto>( |
||||
|
'/api/text-templating/template/definitions', |
||||
|
{ |
||||
|
data: input, |
||||
|
method: 'POST', |
||||
|
}, |
||||
|
); |
||||
|
} |
||||
|
/** |
||||
|
* 删除模板定义 |
||||
|
* @param name 模板名称 |
||||
|
*/ |
||||
|
function deleteApi(name: string): Promise<void> { |
||||
|
return request(`/api/text-templating/template/definitions/${name}`, { |
||||
|
method: 'DELETE', |
||||
|
}); |
||||
|
} |
||||
|
/** |
||||
|
* 获取模板定义 |
||||
|
* @param name 模板名称 |
||||
|
* @returns 模板定义数据传输对象 |
||||
|
*/ |
||||
|
function getApi(name: string): Promise<TextTemplateDefinitionDto> { |
||||
|
return request<TextTemplateDefinitionDto>( |
||||
|
`/api/text-templating/template/definitions/${name}`, |
||||
|
{ |
||||
|
method: 'GET', |
||||
|
}, |
||||
|
); |
||||
|
} |
||||
|
/** |
||||
|
* 获取模板定义列表 |
||||
|
* @param input 过滤参数 |
||||
|
* @returns 模板定义数据传输对象列表 |
||||
|
*/ |
||||
|
function getListApi( |
||||
|
input?: TextTemplateDefinitionGetListInput, |
||||
|
): Promise<ListResultDto<TextTemplateDefinitionDto>> { |
||||
|
return request<ListResultDto<TextTemplateDefinitionDto>>( |
||||
|
`/api/text-templating/template/definitions/${name}`, |
||||
|
{ |
||||
|
method: 'GET', |
||||
|
params: input, |
||||
|
}, |
||||
|
); |
||||
|
} |
||||
|
/** |
||||
|
* 更新模板定义 |
||||
|
* @param name 模板名称 |
||||
|
* @returns 模板定义数据传输对象 |
||||
|
*/ |
||||
|
function updateApi( |
||||
|
name: string, |
||||
|
input: TextTemplateDefinitionUpdateDto, |
||||
|
): Promise<TextTemplateDefinitionDto> { |
||||
|
return request<TextTemplateDefinitionDto>( |
||||
|
`/api/text-templating/template/definitions/${name}`, |
||||
|
{ |
||||
|
data: input, |
||||
|
method: 'PUT', |
||||
|
}, |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
return { |
||||
|
cancel, |
||||
|
createApi, |
||||
|
deleteApi, |
||||
|
getApi, |
||||
|
getListApi, |
||||
|
updateApi, |
||||
|
}; |
||||
|
} |
||||
@ -0,0 +1,293 @@ |
|||||
|
<script setup lang="ts"> |
||||
|
import type { VxeGridListeners, VxeGridProps } from '@abp/ui'; |
||||
|
import type { MenuInfo } from 'ant-design-vue/es/menu/src/interface'; |
||||
|
|
||||
|
import type { VbenFormProps } from '@vben/common-ui'; |
||||
|
|
||||
|
import type { TextTemplateDefinitionDto } from '../../types/definitions'; |
||||
|
|
||||
|
import { h, onMounted, reactive, ref } from 'vue'; |
||||
|
|
||||
|
import { useAccess } from '@vben/access'; |
||||
|
import { $t } from '@vben/locales'; |
||||
|
|
||||
|
import { useLocalization, useLocalizationSerializer } from '@abp/core'; |
||||
|
import { useVbenVxeGrid } from '@abp/ui'; |
||||
|
import { |
||||
|
CheckOutlined, |
||||
|
CloseOutlined, |
||||
|
DeleteOutlined, |
||||
|
EditOutlined, |
||||
|
EllipsisOutlined, |
||||
|
PlusOutlined, |
||||
|
} from '@ant-design/icons-vue'; |
||||
|
import { Button, Dropdown, Menu, message, Modal } from 'ant-design-vue'; |
||||
|
|
||||
|
import { useTemplateDefinitionsApi } from '../../api/useTemplateDefinitionsApi'; |
||||
|
import { WebhookDefinitionsPermissions } from '../../constants/permissions'; |
||||
|
|
||||
|
defineOptions({ |
||||
|
name: 'TemplateDefinitionTable', |
||||
|
}); |
||||
|
|
||||
|
const MenuItem = Menu.Item; |
||||
|
|
||||
|
const textTemplates = ref<TextTemplateDefinitionDto[]>([]); |
||||
|
const pageState = reactive({ |
||||
|
current: 1, |
||||
|
size: 10, |
||||
|
total: 0, |
||||
|
}); |
||||
|
|
||||
|
const { Lr } = useLocalization(); |
||||
|
const { hasAccessByCodes } = useAccess(); |
||||
|
const { deserialize } = useLocalizationSerializer(); |
||||
|
const { deleteApi, getListApi } = useTemplateDefinitionsApi(); |
||||
|
|
||||
|
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'), |
||||
|
}, |
||||
|
{ |
||||
|
component: 'Checkbox', |
||||
|
fieldName: 'isLayout', |
||||
|
label: $t('AbpTextTemplating.DisplayName:IsLayout'), |
||||
|
}, |
||||
|
], |
||||
|
showCollapseButton: true, |
||||
|
submitOnEnter: true, |
||||
|
}; |
||||
|
|
||||
|
const gridOptions: VxeGridProps<TextTemplateDefinitionDto> = { |
||||
|
columns: [ |
||||
|
{ |
||||
|
align: 'left', |
||||
|
field: 'name', |
||||
|
minWidth: 150, |
||||
|
title: $t('AbpTextTemplating.DisplayName:Name'), |
||||
|
}, |
||||
|
{ |
||||
|
align: 'left', |
||||
|
field: 'displayName', |
||||
|
minWidth: 150, |
||||
|
title: $t('AbpTextTemplating.DisplayName:DisplayName'), |
||||
|
}, |
||||
|
{ |
||||
|
align: 'center', |
||||
|
field: 'isStatic', |
||||
|
minWidth: 150, |
||||
|
slots: { default: 'isStatic' }, |
||||
|
title: $t('AbpTextTemplating.DisplayName:IsStatic'), |
||||
|
}, |
||||
|
{ |
||||
|
align: 'center', |
||||
|
field: 'isInlineLocalized', |
||||
|
minWidth: 150, |
||||
|
slots: { default: 'isInlineLocalized' }, |
||||
|
title: $t('AbpTextTemplating.DisplayName:IsInlineLocalized'), |
||||
|
}, |
||||
|
{ |
||||
|
align: 'center', |
||||
|
field: 'isLayout', |
||||
|
minWidth: 150, |
||||
|
slots: { default: 'isLayout' }, |
||||
|
title: $t('AbpTextTemplating.DisplayName:IsLayout'), |
||||
|
}, |
||||
|
{ |
||||
|
align: 'left', |
||||
|
field: 'layout', |
||||
|
minWidth: 150, |
||||
|
title: $t('AbpTextTemplating.DisplayName:Layout'), |
||||
|
}, |
||||
|
{ |
||||
|
align: 'left', |
||||
|
field: 'defaultCultureName', |
||||
|
minWidth: 150, |
||||
|
title: $t('AbpTextTemplating.DisplayName:DefaultCultureName'), |
||||
|
}, |
||||
|
{ |
||||
|
align: 'left', |
||||
|
field: 'localizationResourceName', |
||||
|
minWidth: 150, |
||||
|
title: $t('AbpTextTemplating.LocalizationResource'), |
||||
|
}, |
||||
|
{ |
||||
|
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<TextTemplateDefinitionDto> = { |
||||
|
pageChange(params) { |
||||
|
pageState.current = params.currentPage; |
||||
|
pageState.size = params.pageSize; |
||||
|
onPageChange(); |
||||
|
}, |
||||
|
}; |
||||
|
|
||||
|
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; |
||||
|
textTemplates.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 = textTemplates.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() {} |
||||
|
|
||||
|
function onUpdate(_row: TextTemplateDefinitionDto) {} |
||||
|
|
||||
|
function onMenuClick(_row: TextTemplateDefinitionDto, info: MenuInfo) { |
||||
|
switch (info.key) { |
||||
|
case 'contents': { |
||||
|
break; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
function onDelete(row: TextTemplateDefinitionDto) { |
||||
|
Modal.confirm({ |
||||
|
centered: true, |
||||
|
content: `${$t('AbpUi.ItemWillBeDeletedMessageWithFormat', [row.name])}`, |
||||
|
onOk: async () => { |
||||
|
await deleteApi(row.name); |
||||
|
message.success($t('AbpUi.DeletedSuccessfully')); |
||||
|
onGet(); |
||||
|
}, |
||||
|
title: $t('AbpUi.AreYouSure'), |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
onMounted(onGet); |
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<Grid :table-title="$t('AbpTextTemplating.TextTemplates')"> |
||||
|
<template #toolbar-tools> |
||||
|
<Button |
||||
|
:icon="h(PlusOutlined)" |
||||
|
type="primary" |
||||
|
v-access:code="[WebhookDefinitionsPermissions.Create]" |
||||
|
@click="onCreate" |
||||
|
> |
||||
|
{{ $t('AbpTextTemplating.TextTemplates:AddNew') }} |
||||
|
</Button> |
||||
|
</template> |
||||
|
<template #isStatic="{ row }"> |
||||
|
<div class="flex flex-row justify-center"> |
||||
|
<CheckOutlined v-if="row.isStatic" class="text-green-500" /> |
||||
|
<CloseOutlined v-else class="text-red-500" /> |
||||
|
</div> |
||||
|
</template> |
||||
|
<template #isInlineLocalized="{ row }"> |
||||
|
<div class="flex flex-row justify-center"> |
||||
|
<CheckOutlined v-if="row.isInlineLocalized" class="text-green-500" /> |
||||
|
<CloseOutlined v-else class="text-red-500" /> |
||||
|
</div> |
||||
|
</template> |
||||
|
<template #isLayout="{ row }"> |
||||
|
<div class="flex flex-row justify-center"> |
||||
|
<CheckOutlined v-if="row.isLayout" class="text-green-500" /> |
||||
|
<CloseOutlined v-else class="text-red-500" /> |
||||
|
</div> |
||||
|
</template> |
||||
|
<template #action="{ row }"> |
||||
|
<div class="flex flex-row"> |
||||
|
<Button |
||||
|
:icon="h(EditOutlined)" |
||||
|
block |
||||
|
type="link" |
||||
|
v-access:code="[WebhookDefinitionsPermissions.Update]" |
||||
|
@click="onUpdate(row)" |
||||
|
> |
||||
|
{{ $t('AbpUi.Edit') }} |
||||
|
</Button> |
||||
|
<Button |
||||
|
v-if=" |
||||
|
!row.isStatic && |
||||
|
hasAccessByCodes([WebhookDefinitionsPermissions.Delete]) |
||||
|
" |
||||
|
:icon="h(DeleteOutlined)" |
||||
|
block |
||||
|
danger |
||||
|
type="link" |
||||
|
v-access:code="[WebhookDefinitionsPermissions.Delete]" |
||||
|
@click="onDelete(row)" |
||||
|
> |
||||
|
{{ $t('AbpUi.Delete') }} |
||||
|
</Button> |
||||
|
<Dropdown> |
||||
|
<template #overlay> |
||||
|
<Menu @click="(info) => onMenuClick(row, info)"> |
||||
|
<MenuItem key="contents" :icon="h(EditOutlined)"> |
||||
|
{{ $t('AbpTextTemplating.EditContents') }} |
||||
|
</MenuItem> |
||||
|
</Menu> |
||||
|
</template> |
||||
|
<Button :icon="h(EllipsisOutlined)" type="link" /> |
||||
|
</Dropdown> |
||||
|
</div> |
||||
|
</template> |
||||
|
</Grid> |
||||
|
</template> |
||||
|
|
||||
|
<style scoped></style> |
||||
@ -0,0 +1 @@ |
|||||
|
export { default as TemplateDefinitionTable } from './definitions/TemplateDefinitionTable.vue'; |
||||
@ -0,0 +1,10 @@ |
|||||
|
/** 模板定义权限 */ |
||||
|
export const WebhookDefinitionsPermissions = { |
||||
|
/** 新增 */ |
||||
|
Create: 'AbpTextTemplating.TextTemplateDefinitions.Create', |
||||
|
Default: 'AbpTextTemplating.TextTemplateDefinitions', |
||||
|
/** 删除 */ |
||||
|
Delete: 'AbpTextTemplating.TextTemplateDefinitions.Delete', |
||||
|
/** 更新 */ |
||||
|
Update: 'AbpTextTemplating.TextTemplateDefinitions.Update', |
||||
|
}; |
||||
@ -0,0 +1,47 @@ |
|||||
|
import type { ExtensibleObject, IHasConcurrencyStamp } from '@abp/core'; |
||||
|
|
||||
|
interface TextTemplateDefinitionDto |
||||
|
extends ExtensibleObject, |
||||
|
IHasConcurrencyStamp { |
||||
|
defaultCultureName?: string; |
||||
|
displayName: string; |
||||
|
isInlineLocalized: boolean; |
||||
|
isLayout: boolean; |
||||
|
isStatic: boolean; |
||||
|
layout?: string; |
||||
|
localizationResourceName?: string; |
||||
|
name: string; |
||||
|
renderEngine?: string; |
||||
|
} |
||||
|
|
||||
|
interface TextTemplateDefinitionCreateOrUpdateDto { |
||||
|
defaultCultureName?: string; |
||||
|
displayName: string; |
||||
|
isInlineLocalized: boolean; |
||||
|
isLayout: boolean; |
||||
|
layout?: string; |
||||
|
localizationResourceName?: string; |
||||
|
renderEngine?: string; |
||||
|
} |
||||
|
|
||||
|
interface TextTemplateDefinitionCreateDto |
||||
|
extends TextTemplateDefinitionCreateOrUpdateDto { |
||||
|
name: string; |
||||
|
} |
||||
|
|
||||
|
interface TextTemplateDefinitionUpdateDto |
||||
|
extends IHasConcurrencyStamp, |
||||
|
TextTemplateDefinitionCreateOrUpdateDto {} |
||||
|
|
||||
|
interface TextTemplateDefinitionGetListInput { |
||||
|
filter?: string; |
||||
|
isLayout?: boolean; |
||||
|
isStatic?: boolean; |
||||
|
} |
||||
|
|
||||
|
export type { |
||||
|
TextTemplateDefinitionCreateDto, |
||||
|
TextTemplateDefinitionDto, |
||||
|
TextTemplateDefinitionGetListInput, |
||||
|
TextTemplateDefinitionUpdateDto, |
||||
|
}; |
||||
@ -0,0 +1 @@ |
|||||
|
export * from './definitions'; |
||||
Loading…
Reference in new issue