colin
12 months ago
17 changed files with 484 additions and 5 deletions
@ -0,0 +1,18 @@ |
|||
<script setup lang="ts"> |
|||
import { useUserStore } from '@vben/stores'; |
|||
|
|||
import { GdprCard } from '@abp/gdpr'; |
|||
|
|||
const userStore = useUserStore(); |
|||
|
|||
const onAccountDeleted = () => { |
|||
userStore.$reset(); |
|||
window.location.reload(); |
|||
}; |
|||
</script> |
|||
|
|||
<template> |
|||
<GdprCard @account-delete="onAccountDeleted" /> |
|||
</template> |
|||
|
|||
<style scoped></style> |
|||
@ -0,0 +1,36 @@ |
|||
{ |
|||
"name": "@abp/gdpr", |
|||
"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/gdpr" |
|||
}, |
|||
"license": "MIT", |
|||
"type": "module", |
|||
"sideEffects": [ |
|||
"**/*.css" |
|||
], |
|||
"exports": { |
|||
".": { |
|||
"types": "./src/index.ts", |
|||
"default": "./src/index.ts" |
|||
} |
|||
}, |
|||
"dependencies": { |
|||
"@abp/core": "workspace:*", |
|||
"@abp/request": "workspace:*", |
|||
"@abp/ui": "workspace:*", |
|||
"@ant-design/icons-vue": "catalog:", |
|||
"@vben/common-ui": "workspace:*", |
|||
"@vben/hooks": "workspace:*", |
|||
"@vben/icons": "workspace:*", |
|||
"@vben/layouts": "workspace:*", |
|||
"@vben/locales": "workspace:*", |
|||
"ant-design-vue": "catalog:", |
|||
"dayjs": "catalog:", |
|||
"vue": "catalog:*" |
|||
} |
|||
} |
|||
@ -0,0 +1 @@ |
|||
export * from './useGdprRequestsApi'; |
|||
@ -0,0 +1,100 @@ |
|||
import type { PagedResultDto } from '@abp/core'; |
|||
|
|||
import type { GdprRequestDto, GdprRequestGetListInput } from '../types'; |
|||
|
|||
import { useRequest } from '@abp/request'; |
|||
|
|||
export function useGdprRequestsApi() { |
|||
const { cancel, request } = useRequest(); |
|||
|
|||
/** |
|||
* 删除个人数据请求 |
|||
* @param {string} id 请求Id |
|||
* @returns {void} |
|||
*/ |
|||
function deleteApi(id: string): Promise<void> { |
|||
return request(`/api/gdpr/requests/${id}`, { |
|||
method: 'DELETE', |
|||
}); |
|||
} |
|||
|
|||
/** |
|||
* 删除用户账户 |
|||
* @returns {Promise<void>} |
|||
*/ |
|||
function deletePersonalAccountApi(): Promise<void> { |
|||
return request(`/api/gdpr/requests/personal-account`, { |
|||
method: 'DELETE', |
|||
}); |
|||
} |
|||
|
|||
/** |
|||
* 删除用户数据 |
|||
* @returns {Promise<void>} |
|||
*/ |
|||
function deletePersonalDataApi(): Promise<void> { |
|||
return request(`/api/gdpr/requests/personal-data`, { |
|||
method: 'DELETE', |
|||
}); |
|||
} |
|||
|
|||
/** |
|||
* 准备用户数据 |
|||
* @returns {Promise<void>} |
|||
*/ |
|||
function preparePersonalDataApi(): Promise<void> { |
|||
return request(`/api/gdpr/requests/personal-data/prepare`, { |
|||
method: 'POST', |
|||
}); |
|||
} |
|||
|
|||
/** |
|||
* 下载用户数据 |
|||
* @returns {Promise<Blob>} 用户数据文件 |
|||
*/ |
|||
function downloadPersonalDataApi(requestId: string): Promise<Blob> { |
|||
return request<Blob>( |
|||
`/api/gdpr/requests/personal-data/download/${requestId}`, |
|||
{ |
|||
method: 'GET', |
|||
responseType: 'blob', |
|||
}, |
|||
); |
|||
} |
|||
|
|||
/** |
|||
* 查询个人数据请求 |
|||
* @param {string} id 请求Id |
|||
* @returns {Promise<GdprRequestDto>} 个人数据请求 |
|||
*/ |
|||
function getApi(id: string): Promise<GdprRequestDto> { |
|||
return request<GdprRequestDto>(`/api/gdpr/requests/${id}`, { |
|||
method: 'GET', |
|||
}); |
|||
} |
|||
|
|||
/** |
|||
* 查询个人数据请求分页列表 |
|||
* @param {GdprRequestGetListInput} input 参数 |
|||
* @returns {Promise<PagedResultDto<GdprRequestDto>>} 个人数据请求列表 |
|||
*/ |
|||
function getPagedListApi( |
|||
input?: GdprRequestGetListInput, |
|||
): Promise<PagedResultDto<GdprRequestDto>> { |
|||
return request<PagedResultDto<GdprRequestDto>>(`/api/gdpr/requests`, { |
|||
method: 'GET', |
|||
params: input, |
|||
}); |
|||
} |
|||
|
|||
return { |
|||
cancel, |
|||
deleteApi, |
|||
deletePersonalAccountApi, |
|||
deletePersonalDataApi, |
|||
downloadPersonalDataApi, |
|||
getApi, |
|||
getPagedListApi, |
|||
preparePersonalDataApi, |
|||
}; |
|||
} |
|||
@ -0,0 +1,60 @@ |
|||
<script setup lang="ts"> |
|||
import { ref } from 'vue'; |
|||
|
|||
import { $t } from '@vben/locales'; |
|||
|
|||
import { Button, Card, Modal } from 'ant-design-vue'; |
|||
|
|||
import { useGdprRequestsApi } from '../api/useGdprRequestsApi'; |
|||
import GdprTable from './GdprTable.vue'; |
|||
|
|||
const emits = defineEmits<{ |
|||
(event: 'accountDelete'): void; |
|||
}>(); |
|||
const { cancel, deletePersonalAccountApi } = useGdprRequestsApi(); |
|||
|
|||
const submiting = ref(false); |
|||
|
|||
const onDelete = async () => { |
|||
Modal.confirm({ |
|||
centered: true, |
|||
content: $t('AbpGdpr.DeletePersonalAccountWarning'), |
|||
onCancel: () => { |
|||
cancel(); |
|||
}, |
|||
onOk: async () => { |
|||
submiting.value = true; |
|||
try { |
|||
await deletePersonalAccountApi(); |
|||
Modal.success({ |
|||
centered: true, |
|||
content: $t('AbpGdpr.PersonalAccountDeleteRequestReceived'), |
|||
onOk: () => { |
|||
emits('accountDelete'); |
|||
}, |
|||
title: $t('AbpGdpr.RequestedSuccessfully'), |
|||
}); |
|||
} finally { |
|||
submiting.value = false; |
|||
} |
|||
}, |
|||
title: $t('AbpUi.AreYouSure'), |
|||
}); |
|||
}; |
|||
</script> |
|||
|
|||
<template> |
|||
<Card |
|||
:bordered="false" |
|||
:title="$t('abp.account.settings.personalDataSettings')" |
|||
> |
|||
<template #extra> |
|||
<Button block danger type="dashed" @click="onDelete"> |
|||
{{ $t('AbpGdpr.DeletePersonalAccount') }} |
|||
</Button> |
|||
</template> |
|||
<GdprTable /> |
|||
</Card> |
|||
</template> |
|||
|
|||
<style scoped></style> |
|||
@ -0,0 +1,218 @@ |
|||
<script setup lang="ts"> |
|||
import type { VxeGridListeners, VxeGridProps } from '@abp/ui'; |
|||
|
|||
import type { GdprRequestDto } from '../types/requests'; |
|||
|
|||
import { h } from 'vue'; |
|||
|
|||
import { $t } from '@vben/locales'; |
|||
|
|||
import { formatToDateTime, useAbpStore } from '@abp/core'; |
|||
import { useVbenVxeGrid } from '@abp/ui'; |
|||
import { DeleteOutlined, DownloadOutlined } from '@ant-design/icons-vue'; |
|||
import { Button, message, Modal, Tag } from 'ant-design-vue'; |
|||
import dayJs from 'dayjs'; |
|||
|
|||
import { useGdprRequestsApi } from '../api/useGdprRequestsApi'; |
|||
|
|||
defineOptions({ |
|||
name: 'GdprTable', |
|||
}); |
|||
|
|||
const { |
|||
cancel, |
|||
deleteApi, |
|||
deletePersonalDataApi, |
|||
downloadPersonalDataApi, |
|||
getPagedListApi, |
|||
preparePersonalDataApi, |
|||
} = useGdprRequestsApi(); |
|||
|
|||
const abpStore = useAbpStore(); |
|||
const gridOptions: VxeGridProps<GdprRequestDto> = { |
|||
columns: [ |
|||
{ |
|||
align: 'left', |
|||
field: 'readyTime', |
|||
slots: { default: 'readly' }, |
|||
title: $t('AbpGdpr.DisplayName:ReadyTime'), |
|||
}, |
|||
{ |
|||
align: 'left', |
|||
field: 'creationTime', |
|||
title: $t('AbpGdpr.DisplayName:CreationTime'), |
|||
}, |
|||
{ |
|||
field: 'action', |
|||
fixed: 'right', |
|||
slots: { default: 'action' }, |
|||
title: $t('AbpUi.Actions'), |
|||
width: 180, |
|||
}, |
|||
], |
|||
exportConfig: {}, |
|||
keepSource: true, |
|||
proxyConfig: { |
|||
ajax: { |
|||
query: async ({ page }, formValues) => { |
|||
const dto = await getPagedListApi({ |
|||
maxResultCount: page.pageSize, |
|||
skipCount: (page.currentPage - 1) * page.pageSize, |
|||
...formValues, |
|||
}); |
|||
const now = dayJs(); |
|||
return { |
|||
totalCount: dto.totalCount, |
|||
items: dto.items.map((item) => { |
|||
return { |
|||
creationTime: formatToDateTime(item.creationTime), |
|||
id: item.id, |
|||
isReadly: now.diff(dayJs(item.readyTime)) >= 0, |
|||
readyTime: formatToDateTime(item.readyTime), |
|||
}; |
|||
}), |
|||
}; |
|||
}, |
|||
}, |
|||
response: { |
|||
total: 'totalCount', |
|||
list: 'items', |
|||
}, |
|||
}, |
|||
toolbarConfig: { |
|||
refresh: true, |
|||
}, |
|||
}; |
|||
|
|||
const gridEvents: VxeGridListeners<GdprRequestDto> = { |
|||
cellClick: () => {}, |
|||
}; |
|||
const [Grid, gridApi] = useVbenVxeGrid({ |
|||
gridEvents, |
|||
gridOptions, |
|||
}); |
|||
|
|||
const onRequestData = async () => { |
|||
gridApi.setLoading(true); |
|||
try { |
|||
await preparePersonalDataApi(); |
|||
Modal.success({ |
|||
centered: true, |
|||
content: $t('AbpGdpr.PersonalDataPrepareRequestReceived'), |
|||
title: $t('AbpGdpr.RequestedSuccessfully'), |
|||
}); |
|||
await gridApi.query(); |
|||
} finally { |
|||
gridApi.setLoading(false); |
|||
} |
|||
}; |
|||
|
|||
const onDeleteData = () => { |
|||
Modal.confirm({ |
|||
centered: true, |
|||
content: $t('AbpGdpr.DeletePersonalDataWarning'), |
|||
onCancel: () => { |
|||
cancel(); |
|||
}, |
|||
onOk: async () => { |
|||
gridApi.setLoading(true); |
|||
try { |
|||
await deletePersonalDataApi(); |
|||
Modal.success({ |
|||
centered: true, |
|||
content: $t('AbpGdpr.PersonalDataDeleteRequestReceived'), |
|||
onOk: () => { |
|||
// 刷新页面重载用户信息 |
|||
window.location.reload(); |
|||
}, |
|||
title: $t('AbpGdpr.RequestedSuccessfully'), |
|||
}); |
|||
await gridApi.query(); |
|||
} finally { |
|||
gridApi.setLoading(false); |
|||
} |
|||
}, |
|||
title: $t('AbpUi.AreYouSure'), |
|||
}); |
|||
}; |
|||
|
|||
const onDownload = async (row: GdprRequestDto) => { |
|||
const blob = await downloadPersonalDataApi(row.id); |
|||
const url = window.URL.createObjectURL(blob); |
|||
const link = document.createElement('a'); |
|||
link.href = url; |
|||
const { userName } = abpStore.application!.currentUser; |
|||
const fileName = `${$t('AbpGdpr.PersonalData')}_${userName}_${formatToDateTime(row.readyTime)}.xlsx`; |
|||
link.setAttribute('download', decodeURIComponent(fileName)); |
|||
document.body.append(link); |
|||
link.click(); |
|||
window.URL.revokeObjectURL(url); |
|||
link.remove(); |
|||
}; |
|||
|
|||
const onDelete = (row: GdprRequestDto) => { |
|||
Modal.confirm({ |
|||
centered: true, |
|||
content: $t('AbpUi.ItemWillBeDeletedMessage'), |
|||
onCancel: () => { |
|||
cancel(); |
|||
}, |
|||
onOk: async () => { |
|||
gridApi.setLoading(true); |
|||
try { |
|||
await deleteApi(row.id); |
|||
message.success($t('AbpUi.SuccessfullyDeleted')); |
|||
await gridApi.query(); |
|||
} finally { |
|||
gridApi.setLoading(false); |
|||
} |
|||
}, |
|||
title: $t('AbpUi.AreYouSure'), |
|||
}); |
|||
}; |
|||
</script> |
|||
|
|||
<template> |
|||
<Grid :table-title="$t('AbpGdpr.PersonalData')"> |
|||
<template #toolbar-tools> |
|||
<div class="flex flex-row gap-2"> |
|||
<Button type="primary" @click="onRequestData"> |
|||
{{ $t('AbpGdpr.RequestPersonalData') }} |
|||
</Button> |
|||
<Button type="primary" danger @click="onDeleteData"> |
|||
{{ $t('AbpGdpr.DeletePersonalData') }} |
|||
</Button> |
|||
</div> |
|||
</template> |
|||
<template #readly="{ row }"> |
|||
{{ row.readyTime }} |
|||
<Tag v-if="!row.isReadly" color="warning"> |
|||
{{ $t('AbpGdpr.Preparing') }} |
|||
</Tag> |
|||
</template> |
|||
<template #action="{ row }"> |
|||
<div class="flex flex-row"> |
|||
<Button |
|||
v-if="row.isReadly" |
|||
:icon="h(DownloadOutlined)" |
|||
block |
|||
type="link" |
|||
@click="onDownload(row)" |
|||
> |
|||
{{ $t('AbpGdpr.Download') }} |
|||
</Button> |
|||
<Button |
|||
:icon="h(DeleteOutlined)" |
|||
block |
|||
danger |
|||
type="link" |
|||
@click="onDelete(row)" |
|||
> |
|||
{{ $t('AbpUi.Delete') }} |
|||
</Button> |
|||
</div> |
|||
</template> |
|||
</Grid> |
|||
</template> |
|||
|
|||
<style lang="scss" scoped></style> |
|||
@ -0,0 +1,2 @@ |
|||
export { default as GdprCard } from './GdprCard.vue'; |
|||
export { default as GdprTable } from './GdprTable.vue'; |
|||
@ -0,0 +1,3 @@ |
|||
export * from './api'; |
|||
export * from './components'; |
|||
export * from './types'; |
|||
@ -0,0 +1 @@ |
|||
export * from './requests'; |
|||
@ -0,0 +1,17 @@ |
|||
import type { EntityDto, PagedAndSortedResultRequestDto } from '@abp/core'; |
|||
|
|||
interface GdprRequestDto extends EntityDto<string> { |
|||
/** 创建时间 */ |
|||
creationTime: string; |
|||
/** 就绪时间 */ |
|||
readyTime: string; |
|||
} |
|||
|
|||
interface GdprRequestGetListInput extends PagedAndSortedResultRequestDto { |
|||
/** 创建时间 */ |
|||
creationTime?: string; |
|||
/** 就绪时间 */ |
|||
readyTime?: string; |
|||
} |
|||
|
|||
export type { GdprRequestDto, GdprRequestGetListInput }; |
|||
@ -0,0 +1,6 @@ |
|||
{ |
|||
"$schema": "https://json.schemastore.org/tsconfig", |
|||
"extends": "@vben/tsconfig/web.json", |
|||
"include": ["src"], |
|||
"exclude": ["node_modules"] |
|||
} |
|||
Loading…
Reference in new issue