diff --git a/frontend/src/business/components/common/components/MsDeleteConfirm.vue b/frontend/src/business/components/common/components/MsDeleteConfirm.vue
new file mode 100644
index 0000000000..1d7185e32b
--- /dev/null
+++ b/frontend/src/business/components/common/components/MsDeleteConfirm.vue
@@ -0,0 +1,83 @@
+<template>
+  <el-dialog :title="title"
+             :visible.sync="dialogVisible"
+             class="delete-confirm" >
+
+    <el-row>
+      <el-col>
+        <span>{{$t('commons.delete_confirm')}}</span>
+        <span class="delete-tip"> DELETE-{{record.name}}</span>
+        <br/>
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-col :span="15">
+        <el-input v-model="value" :placeholder="$t('commons.input_content')"/>
+      </el-col>
+    </el-row>
+
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="dialogVisible = false">{{$t('commons.cancel')}}</el-button>
+      <el-button type="primary" @click="confirm">{{$t('commons.confirm')}}</el-button>
+    </span>
+
+  </el-dialog>
+</template>
+
+<script>
+    export default {
+      name: "MsDeleteConfirm",
+      data() {
+        return {
+          dialogVisible: false,
+          value: '',
+          record: {},
+        }
+      },
+      props: {
+        title: {
+          type: String,
+          default() {
+            return this.$t('commons.title')
+          }
+        }
+      },
+      methods: {
+        open(record) {
+          this.dialogVisible = true;
+          this.value = '';
+          this.record = record;
+        },
+        confirm() {
+          if (this.value.trim() != 'DELETE-' + this.record.name) {
+            this.$warning(this.$t('commons.incorrect_input'));
+            return;
+          }
+          this.$emit('delete', this.record);
+          this.dialogVisible = false;
+        }
+      }
+    }
+</script>
+
+<style scoped>
+
+  .delete-confirm >>> .el-dialog {
+    width: 500px;
+  }
+
+  .delete-confirm .el-dialog:first-child {
+    margin-bottom: 10px;
+  }
+
+  .delete-confirm .el-row:first-child {
+    margin-bottom: 20px;
+  }
+
+  .delete-tip {
+    font-style: italic;
+    font-weight: bold;
+  }
+
+
+</style>
diff --git a/frontend/src/business/components/track/plan/components/TestPlanList.vue b/frontend/src/business/components/track/plan/components/TestPlanList.vue
index b54e530e7c..905b0997b3 100644
--- a/frontend/src/business/components/track/plan/components/TestPlanList.vue
+++ b/frontend/src/business/components/track/plan/components/TestPlanList.vue
@@ -1,106 +1,107 @@
 <template>
   <el-card class="table-card" v-loading="result.loading">
-        <template v-slot:header>
-          <ms-table-header :is-tester-permission="true" :condition.sync="condition"
-                           @search="initTableData" @create="testPlanCreate"
-                           :create-tip="$t('test_track.plan.create_plan')"
-                           :title="$t('test_track.plan.test_plan')"/>
+    <template v-slot:header>
+      <ms-table-header :is-tester-permission="true" :condition.sync="condition"
+                       @search="initTableData" @create="testPlanCreate"
+                       :create-tip="$t('test_track.plan.create_plan')"
+                       :title="$t('test_track.plan.test_plan')"/>
+    </template>
+
+    <el-table
+      :data="tableData"
+      @filter-change="filter"
+      @sort-change="sort"
+      @row-click="intoPlan">
+      <el-table-column
+        prop="name"
+        :label="$t('commons.name')"
+        show-overflow-tooltip>
+      </el-table-column>
+      <el-table-column
+        prop="principal"
+        :label="$t('test_track.plan.plan_principal')"
+        show-overflow-tooltip>
+      </el-table-column>
+      <el-table-column
+        prop="status"
+        column-key="status"
+        :filters="statusFilters"
+        :label="$t('test_track.plan.plan_status')"
+        show-overflow-tooltip>
+        <template v-slot:default="scope">
+          <el-dropdown class="test-case-status" @command="statusChange">
+            <span class="el-dropdown-link">
+              <plan-status-table-item :value="scope.row.status"/>
+            </span>
+            <el-dropdown-menu slot="dropdown" chang>
+              <el-dropdown-item :command="{id: scope.row.id, status: 'Prepare'}">
+                {{$t('test_track.plan.plan_status_prepare')}}
+              </el-dropdown-item>
+              <el-dropdown-item :command="{id: scope.row.id, status: 'Underway'}">
+                {{$t('test_track.plan.plan_status_running')}}
+              </el-dropdown-item>
+              <el-dropdown-item :command="{id: scope.row.id, status: 'Completed'}">
+                {{$t('test_track.plan.plan_status_completed')}}
+              </el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+
         </template>
-
-        <el-table
-          :data="tableData"
-          @filter-change="filter"
-          @sort-change="sort"
-          @row-click="intoPlan">
-          <el-table-column
-            prop="name"
-            :label="$t('commons.name')"
-            show-overflow-tooltip>
-          </el-table-column>
-          <el-table-column
-            prop="principal"
-            :label="$t('test_track.plan.plan_principal')"
-            show-overflow-tooltip>
-          </el-table-column>
-          <el-table-column
-            prop="status"
-            column-key="status"
-            :filters="statusFilters"
-            :label="$t('test_track.plan.plan_status')"
-            show-overflow-tooltip>
-            <template v-slot:default="scope">
-              <el-dropdown class="test-case-status" @command="statusChange">
-                <span class="el-dropdown-link">
-                  <plan-status-table-item :value="scope.row.status"/>
-                </span>
-                <el-dropdown-menu slot="dropdown" chang>
-                  <el-dropdown-item :command="{id: scope.row.id, status: 'Prepare'}">
-                    {{$t('test_track.plan.plan_status_prepare')}}
-                  </el-dropdown-item>
-                  <el-dropdown-item :command="{id: scope.row.id, status: 'Underway'}">
-                    {{$t('test_track.plan.plan_status_running')}}
-                  </el-dropdown-item>
-                  <el-dropdown-item :command="{id: scope.row.id, status: 'Completed'}">
-                    {{$t('test_track.plan.plan_status_completed')}}
-                  </el-dropdown-item>
-                </el-dropdown-menu>
-              </el-dropdown>
-
+      </el-table-column>
+      <el-table-column
+        prop="stage"
+        column-key="stage"
+        :filters="stageFilters"
+        :label="$t('test_track.plan.plan_stage')"
+        show-overflow-tooltip>
+        <template v-slot:default="scope">
+          <plan-stage-table-item :stage="scope.row.stage"/>
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="projectName"
+        :label="$t('test_track.plan.plan_project')"
+        show-overflow-tooltip>
+      </el-table-column>
+      <el-table-column
+        sortable
+        prop="createTime"
+        :label="$t('commons.create_time')"
+        show-overflow-tooltip>
+        <template v-slot:default="scope">
+          <span>{{ scope.row.createTime | timestampFormatDate }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        sortable
+        prop="updateTime"
+        :label="$t('commons.update_time')"
+        show-overflow-tooltip>
+        <template v-slot:default="scope">
+          <span>{{ scope.row.updateTime | timestampFormatDate }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        :label="$t('commons.operating')">
+        <template v-slot:default="scope">
+          <ms-table-operator :is-tester-permission="true" @editClick="handleEdit(scope.row)" @deleteClick="handleDelete(scope.row)">
+            <template v-slot:middle>
+              <ms-table-operator-button type="success" v-if="!scope.row.reportId" :tip="$t('test_track.plan_view.create_report')" icon="el-icon-document" @exec="openTestReportTemplate(scope.row)"/>
+              <ms-table-operator-button type="success" v-if="scope.row.reportId" :tip="$t('test_track.plan_view.view_report')" icon="el-icon-document" @exec="openReport(scope.row.id, scope.row.reportId)"/>
             </template>
-          </el-table-column>
-          <el-table-column
-            prop="stage"
-            column-key="stage"
-            :filters="stageFilters"
-            :label="$t('test_track.plan.plan_stage')"
-            show-overflow-tooltip>
-            <template v-slot:default="scope">
-              <plan-stage-table-item :stage="scope.row.stage"/>
-            </template>
-          </el-table-column>
-          <el-table-column
-            prop="projectName"
-            :label="$t('test_track.plan.plan_project')"
-            show-overflow-tooltip>
-          </el-table-column>
-          <el-table-column
-            sortable
-            prop="createTime"
-            :label="$t('commons.create_time')"
-            show-overflow-tooltip>
-            <template v-slot:default="scope">
-              <span>{{ scope.row.createTime | timestampFormatDate }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column
-            sortable
-            prop="updateTime"
-            :label="$t('commons.update_time')"
-            show-overflow-tooltip>
-            <template v-slot:default="scope">
-              <span>{{ scope.row.updateTime | timestampFormatDate }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column
-            :label="$t('commons.operating')">
-            <template v-slot:default="scope">
-              <ms-table-operator :is-tester-permission="true" @editClick="handleEdit(scope.row)" @deleteClick="handleDelete(scope.row)">
-                <template v-slot:middle>
-                  <ms-table-operator-button type="success" v-if="!scope.row.reportId" :tip="$t('test_track.plan_view.create_report')" icon="el-icon-document" @exec="openTestReportTemplate(scope.row)"/>
-                  <ms-table-operator-button type="success" v-if="scope.row.reportId" :tip="$t('test_track.plan_view.view_report')" icon="el-icon-document" @exec="openReport(scope.row.id, scope.row.reportId)"/>
-                </template>
-              </ms-table-operator>
-            </template>
-          </el-table-column>
-        </el-table>
+          </ms-table-operator>
+        </template>
+      </el-table-column>
+    </el-table>
 
-        <ms-table-pagination :change="initTableData" :current-page.sync="currentPage" :page-size.sync="pageSize"
-                             :total="total"/>
+    <ms-table-pagination :change="initTableData" :current-page.sync="currentPage" :page-size.sync="pageSize"
+                         :total="total"/>
 
-        <test-report-template-list @openReport="openReport" ref="testReporTtemplateList"/>
-        <test-case-report-view @refresh="initTableData" ref="testCaseReportView"/>
+    <test-report-template-list @openReport="openReport" ref="testReporTtemplateList"/>
+    <test-case-report-view @refresh="initTableData" ref="testCaseReportView"/>
+    <ms-delete-confirm :title="$t('test_track.plan.plan_delete')" @delete="_handleDelete" ref="deleteConfirm"/>
 
-      </el-card>
+  </el-card>
 </template>
 
 <script>
@@ -115,10 +116,12 @@
   import {_filter, _sort} from "../../../../../common/js/utils";
   import TestReportTemplateList from "../view/comonents/TestReportTemplateList";
   import TestCaseReportView from "../view/comonents/report/TestCaseReportView";
+  import MsDeleteConfirm from "../../../common/components/MsDeleteConfirm";
 
   export default {
       name: "TestPlanList",
       components: {
+        MsDeleteConfirm,
         TestCaseReportView,
         TestReportTemplateList,
         PlanStageTableItem,
@@ -185,14 +188,7 @@
           });
         },
         handleDelete(testPlan) {
-          this.$alert(this.$t('test_track.plan.plan_delete_confirm') + testPlan.name + "？", '', {
-            confirmButtonText: this.$t('commons.confirm'),
-            callback: (action) => {
-              if (action === 'confirm') {
-                this._handleDelete(testPlan);
-              }
-            }
-          });
+          this.$refs.deleteConfirm.open(testPlan);
         },
         _handleDelete(testPlan) {
           let testPlanId = testPlan.id;
diff --git a/frontend/src/i18n/en-US.js b/frontend/src/i18n/en-US.js
index 72fb520b2f..4efa73935f 100644
--- a/frontend/src/i18n/en-US.js
+++ b/frontend/src/i18n/en-US.js
@@ -96,7 +96,8 @@ export default {
     'remove_success': 'Remove Success',
     'tips': 'The authentication information has expired, please login again',
     'not_performed_yet': 'Not performed yet',
-
+    'incorrect_input': 'Incorrect input',
+    'delete_confirm': 'Please enter the following to confirm deletion:',
   },
   workspace: {
     'create': 'Create Workspace',
@@ -447,6 +448,7 @@ export default {
       plan_status_running: "Starting",
       plan_status_completed: "Completed",
       plan_delete_confirm: "All use cases under this plan will be deleted,confirm delete test plan: ",
+      plan_delete: "Delete test plan",
     },
     module: {
       search: "Search module",
diff --git a/frontend/src/i18n/zh-CN.js b/frontend/src/i18n/zh-CN.js
index ba2adabf14..5283c26e1a 100644
--- a/frontend/src/i18n/zh-CN.js
+++ b/frontend/src/i18n/zh-CN.js
@@ -95,7 +95,8 @@ export default {
     'remove_success': '移除成功',
     'tips': '认证信息已过期，请重新登录',
     'not_performed_yet': '尚未执行',
-
+    'incorrect_input': '输入内容不正确',
+    'delete_confirm': '请输入以下内容，确认删除：',
   },
   workspace: {
     'create': '创建工作空间',
@@ -445,6 +446,7 @@ export default {
       plan_status_running: "进行中",
       plan_status_completed: "已完成",
       plan_delete_confirm: "将删除该测试计划下所有用例，确认删除测试计划: ",
+      plan_delete: "删除计划",
     },
     module: {
       search: "搜索模块",
diff --git a/frontend/src/i18n/zh-TW.js b/frontend/src/i18n/zh-TW.js
index ac38a0e9ee..3264805030 100644
--- a/frontend/src/i18n/zh-TW.js
+++ b/frontend/src/i18n/zh-TW.js
@@ -95,6 +95,8 @@ export default {
     'remove_success': '移除成功',
     'tips': '认認證資訊已過期,請重新登入',
     'not_performed_yet': '尚未執行',
+    'incorrect_input': '輸入內容不正確',
+    'delete_confirm': '請輸入以下內容，確認刪除：',
   },
   workspace: {
     'create': '創建工作空間',
@@ -445,6 +447,7 @@ export default {
       plan_status_running: "進行中",
       plan_status_completed: "已完成",
       plan_delete_confirm: "將刪除該測試計劃下所有用例，確認刪除測試計劃: ",
+      plan_delete: "刪除計劃",
     },
     module: {
       search: "搜索模塊",