diff --git a/core/datacap-web/src/i18n/langs/en/index.ts b/core/datacap-web/src/i18n/langs/en/index.ts
index 22b9331a..9732d9da 100644
--- a/core/datacap-web/src/i18n/langs/en/index.ts
+++ b/core/datacap-web/src/i18n/langs/en/index.ts
@@ -13,6 +13,7 @@ import copy from "@/i18n/langs/en/copy";
 import calendarHeatmap from "@/i18n/langs/en/calendarHeatmap";
 import pipeline from "@/i18n/langs/en/pipeline";
 import manager from "@/i18n/langs/en/source/manager";
+import report from "@/i18n/langs/en/report";
 
 export default {
   ...en,
@@ -29,6 +30,7 @@ export default {
   copy: copy,
   calendarHeatmap: calendarHeatmap,
   pipeline: pipeline,
+  report: report,
   source: {
     manager: manager
   }
diff --git a/core/datacap-web/src/i18n/langs/en/report.ts b/core/datacap-web/src/i18n/langs/en/report.ts
new file mode 100644
index 00000000..bbad3b74
--- /dev/null
+++ b/core/datacap-web/src/i18n/langs/en/report.ts
@@ -0,0 +1,5 @@
+export default {
+  deleteTip1: 'You are deleting a report. This action permanently deletes the report. Please be sure to confirm your actions before proceeding. ',
+  deleteTip2: 'Warning: This cannot be undone. ',
+  deleteTip3: 'To confirm, type [ REPLACE_NAME ] in the box below'
+}
diff --git a/core/datacap-web/src/i18n/langs/zhCn/index.ts b/core/datacap-web/src/i18n/langs/zhCn/index.ts
index bd628a0e..805a2b26 100644
--- a/core/datacap-web/src/i18n/langs/zhCn/index.ts
+++ b/core/datacap-web/src/i18n/langs/zhCn/index.ts
@@ -13,6 +13,7 @@ import copy from "@/i18n/langs/zhCn/copy";
 import calendarHeatmap from "@/i18n/langs/zhCn/calendarHeatmap";
 import pipeline from "@/i18n/langs/zhCn/pipeline";
 import manager from "@/i18n/langs/zhCn/source/manager";
+import report from "@/i18n/langs/zhCn/report";
 
 export default {
   ...zh,
@@ -29,6 +30,7 @@ export default {
   copy: copy,
   calendarHeatmap: calendarHeatmap,
   pipeline: pipeline,
+  report: report,
   source: {
     manager: manager
   }
diff --git a/core/datacap-web/src/i18n/langs/zhCn/report.ts b/core/datacap-web/src/i18n/langs/zhCn/report.ts
new file mode 100644
index 00000000..1d85f482
--- /dev/null
+++ b/core/datacap-web/src/i18n/langs/zhCn/report.ts
@@ -0,0 +1,5 @@
+export default {
+  deleteTip1: '您正在执行删除报表操作。此操作将永久性地删除该报表。请在继续之前务必确认您的操作。',
+  deleteTip2: '警告：执行此操作将无法撤销。',
+  deleteTip3: '要确认，请在下面的框中键入 [ REPLACE_NAME ]'
+}
diff --git a/core/datacap-web/src/services/admin/ReportService.ts b/core/datacap-web/src/services/admin/ReportService.ts
index c0311620..1845ce7f 100644
--- a/core/datacap-web/src/services/admin/ReportService.ts
+++ b/core/datacap-web/src/services/admin/ReportService.ts
@@ -1,5 +1,6 @@
 import {ResponseModel} from '@/model/ResponseModel';
 import {BaseService} from '@/services/BaseService';
+import {HttpCommon} from "@/common/HttpCommon";
 
 const baseUrl = '/api/v1/report';
 
@@ -13,7 +14,7 @@ class ReportService
 
   deleteById(id: number): Promise<ResponseModel>
   {
-    throw new Error('Method not implemented.');
+    return new HttpCommon().delete(`${baseUrl}/${id}`);
   }
 
   getByName<T>(name: string): Promise<ResponseModel>
diff --git a/core/datacap-web/src/views/admin/report/AdminReport.vue b/core/datacap-web/src/views/admin/report/AdminReport.vue
index b8b85e98..b1ea2cfe 100644
--- a/core/datacap-web/src/views/admin/report/AdminReport.vue
+++ b/core/datacap-web/src/views/admin/report/AdminReport.vue
@@ -8,6 +8,15 @@
              :data="data.content">
         <template #action="{ row }">
           <Space>
+            <Tooltip :content="$t('common.delete')"
+                     transfer>
+              <Button shape="circle"
+                      type="error"
+                      size="small"
+                      icon="md-trash"
+                      @click="handlerDelete(row, true)">
+              </Button>
+            </Tooltip>
           </Space>
         </template>
       </Table>
@@ -24,32 +33,36 @@
         </Page>
       </p>
     </Card>
+    <DeleteReport v-if="deleteVisible"
+                  :is-visible="deleteVisible"
+                  :data="contextData"
+                  @click="handlerDelete(null, false)">
+    </DeleteReport>
   </div>
 </template>
 
 <script lang="ts">
 import {defineComponent} from "vue";
 import {useI18n} from 'vue-i18n';
-import Common from "@/common/Common";
 import {ResponsePage} from "@/model/ResponsePage";
 import {createHeaders} from "@/views/admin/report/ReportUtils";
 import ReportService from "@/services/admin/ReportService";
 import {Filter} from "@/model/Filter";
 import {Pagination, PaginationBuilder} from "@/model/Pagination";
+import DeleteReport from "@/views/admin/report/DeleteReport.vue";
 
 const filter: Filter = new Filter();
 const pagination: Pagination = PaginationBuilder.newInstance();
 export default defineComponent({
   name: "ReportAdmin",
+  components: {DeleteReport},
   setup()
   {
     const i18n = useI18n();
     const headers = createHeaders(i18n);
-    const currentUserId = Common.getCurrentUserId();
     return {
       headers,
-      filter,
-      currentUserId
+      filter
     }
   },
   data()
@@ -61,7 +74,9 @@ export default defineComponent({
         total: 0,
         current: 1,
         pageSize: 10
-      }
+      },
+      deleteVisible: false,
+      contextData: null
     }
   },
   created()
@@ -96,6 +111,14 @@ export default defineComponent({
       this.pagination.current = pagination.current;
       this.pagination.pageSize = pagination.pageSize;
       this.handlerInitialize(this.filter)
+    },
+    handlerDelete(data: any, opened: boolean)
+    {
+      this.deleteVisible = opened;
+      this.contextData = data;
+      if (!opened) {
+        this.handlerInitialize(this.filter);
+      }
     }
   }
 });
diff --git a/core/datacap-web/src/views/admin/report/DeleteReport.vue b/core/datacap-web/src/views/admin/report/DeleteReport.vue
new file mode 100644
index 00000000..523efb59
--- /dev/null
+++ b/core/datacap-web/src/views/admin/report/DeleteReport.vue
@@ -0,0 +1,82 @@
+<template>
+  <div>
+    <Modal v-model="visible"
+           :title="$t('common.delete') + ' [ ' + data.name + ' ]'"
+           :mask-closable="false"
+           @cancel="handlerCancel()">
+      <Alert type="warning"
+             show-icon>
+        {{ $t('report.deleteTip1') }}
+      </Alert>
+      <Alert type="error"
+             show-icon>
+        {{ $t('report.deleteTip2') }}
+      </Alert>
+      <p>{{ $t('report.deleteTip3').replace('REPLACE_NAME', data.name) }}</p>
+      <Input v-model="inputValue"/>
+      <template #footer>
+        <Button type="error"
+                :disabled="inputValue !== data.name"
+                :loading="loading"
+                @click="handlerDelete()">
+          <FontAwesomeIcon icon="delete-left"/>
+          {{ $t('common.delete') }}
+        </Button>
+      </template>
+    </Modal>
+  </div>
+</template>
+<script lang="ts">
+import {defineComponent} from "vue";
+import ReportService from "@/services/admin/ReportService";
+
+export default defineComponent({
+  name: "DeleteReport",
+  props: {
+    isVisible: {
+      type: Boolean,
+      default: () => false
+    },
+    data: {
+      type: Object
+    }
+  },
+  data()
+  {
+    return {
+      loading: false,
+      inputValue: null
+    }
+  },
+  methods: {
+    handlerDelete()
+    {
+      this.loading = true;
+      ReportService.deleteById(this.data.id)
+        .then((response) => {
+          if (response.status) {
+            this.$Message.success(`${this.$t('source.manager.sourceDelete')} [ ${this.data.name} ] ${this.$t('common.success')}`);
+            this.handlerCancel();
+          }
+        })
+        .finally(() => this.loading = false);
+    },
+    handlerCancel()
+    {
+      this.visible = false;
+    }
+  },
+  computed: {
+    visible: {
+      get(): boolean
+      {
+        return this.isVisible;
+      },
+      set(value: boolean)
+      {
+        this.$emit('close', value);
+      }
+    }
+  }
+});
+</script>
diff --git a/core/datacap-web/src/views/admin/report/ReportUtils.ts b/core/datacap-web/src/views/admin/report/ReportUtils.ts
index 5aa9e440..e39e2fb3 100644
--- a/core/datacap-web/src/views/admin/report/ReportUtils.ts
+++ b/core/datacap-web/src/views/admin/report/ReportUtils.ts
@@ -28,6 +28,7 @@ const createHeaders = (i18n: any) => {
     {
       title: i18n.t('common.action'),
       slot: 'action',
+      align: 'center',
       key: 'action'
     }
   ];
diff --git a/core/datacap-web/src/views/admin/source/components/SourceDelete.vue b/core/datacap-web/src/views/admin/source/components/SourceDelete.vue
index 3e4ddb29..e5b2b9b1 100644
--- a/core/datacap-web/src/views/admin/source/components/SourceDelete.vue
+++ b/core/datacap-web/src/views/admin/source/components/SourceDelete.vue
@@ -57,6 +57,7 @@ export default defineComponent({
         .then((response) => {
           if (response.status) {
             this.$Message.success(`${this.$t('source.manager.sourceDelete')} [ ${this.data.name} ] ${this.$t('common.success')}`);
+            this.handlerCancel();
           }
         })
         .finally(() => this.loading = false);