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