diff --git a/frontend/package.json b/frontend/package.json
index e1212e4115..a21e6a8489 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -14,13 +14,14 @@
     "@fortawesome/vue-fontawesome": "^0.1.9",
     "axios": "^0.19.0",
     "core-js": "^3.4.3",
+    "echarts": "^4.6.0",
     "element-ui": "^2.13.0",
     "vue": "^2.6.10",
+    "vue-echarts": "^4.1.0",
     "vue-i18n": "^8.15.3",
     "vue-router": "^3.1.3",
-    "vuex": "^3.1.2",
-    "echarts": "^4.6.0",
-    "vue-echarts": "^4.1.0"
+    "vuedraggable": "^2.23.2",
+    "vuex": "^3.1.2"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^4.1.0",
@@ -42,7 +43,7 @@
     ],
     "rules": {
       "vue/no-unused-components": "off",
-      "no-console":"off",
+      "no-console": "off",
       "no-unused-vars": "off"
     },
     "parserOptions": {
diff --git a/frontend/src/business/components/common/router/router.js b/frontend/src/business/components/common/router/router.js
index 7def9f7d59..54525e8e35 100644
--- a/frontend/src/business/components/common/router/router.js
+++ b/frontend/src/business/components/common/router/router.js
@@ -26,7 +26,7 @@ import PerformanceReportView from "../../performance/report/PerformanceReportVie
 import ApiReportView from "../../api/report/ApiReportView";
 import TrackHome from "../../track/home/TrackHome";
 import TestPlan from "../../track/plan/TestPlan";
-import TestPlanView from "../../track/plan/TestPlanView";
+import TestPlanView from "../../track/plan/view/TestPlanView";
 import TestCase from "../../track/case/TestCase";
 import TestTrack from "../../track/TestTrack";
 
diff --git a/frontend/src/business/components/track/plan/TestPlanView.vue b/frontend/src/business/components/track/plan/view/TestPlanView.vue
similarity index 92%
rename from frontend/src/business/components/track/plan/TestPlanView.vue
rename to frontend/src/business/components/track/plan/view/TestPlanView.vue
index 5ffae674d8..6a49055966 100644
--- a/frontend/src/business/components/track/plan/TestPlanView.vue
+++ b/frontend/src/business/components/track/plan/view/TestPlanView.vue
@@ -37,10 +37,10 @@
 
 <script>
 
-    import NodeTree from "../common/NodeTree";
-    import TestPlanTestCaseList from "./components/TestPlanTestCaseList";
-    import TestCaseRelevance from "./components/TestCaseRelevance";
-    import SelectMenu from "../common/SelectMenu";
+    import NodeTree from "../../common/NodeTree";
+    import TestPlanTestCaseList from "./comonents/TestPlanTestCaseList";
+    import TestCaseRelevance from "./comonents/TestCaseRelevance";
+    import SelectMenu from "../../common/SelectMenu";
 
     export default {
       name: "TestPlanView",
diff --git a/frontend/src/business/components/track/plan/components/ExecutorEdit.vue b/frontend/src/business/components/track/plan/view/comonents/ExecutorEdit.vue
similarity index 92%
rename from frontend/src/business/components/track/plan/components/ExecutorEdit.vue
rename to frontend/src/business/components/track/plan/view/comonents/ExecutorEdit.vue
index b2f74c6f91..29b1d02035 100644
--- a/frontend/src/business/components/track/plan/components/ExecutorEdit.vue
+++ b/frontend/src/business/components/track/plan/view/comonents/ExecutorEdit.vue
@@ -20,8 +20,8 @@
 </template>
 
 <script>
-    import {WORKSPACE_ID} from '../../../../../common/js/constants'
-    import MsDialogFooter from '../../../common/components/MsDialogFooter'
+    import {WORKSPACE_ID} from '../../../../../../common/js/constants'
+    import MsDialogFooter from '../../../../common/components/MsDialogFooter'
 
     export default {
       name: "executorEdit",
diff --git a/frontend/src/business/components/track/plan/components/StatusEdit.vue b/frontend/src/business/components/track/plan/view/comonents/StatusEdit.vue
similarity index 90%
rename from frontend/src/business/components/track/plan/components/StatusEdit.vue
rename to frontend/src/business/components/track/plan/view/comonents/StatusEdit.vue
index 07052b746e..fb9f3f5404 100644
--- a/frontend/src/business/components/track/plan/components/StatusEdit.vue
+++ b/frontend/src/business/components/track/plan/view/comonents/StatusEdit.vue
@@ -19,8 +19,8 @@
 </template>
 
 <script>
-  import TestPlanTestCaseStatusButton from '../common/TestPlanTestCaseStatusButton';
-  import MsDialogFooter from '../../../common/components/MsDialogFooter'
+  import TestPlanTestCaseStatusButton from '../../common/TestPlanTestCaseStatusButton';
+  import MsDialogFooter from '../../../../common/components/MsDialogFooter'
 
     export default {
       name: "statusEdit",
diff --git a/frontend/src/business/components/track/plan/components/TestCaseRelevance.vue b/frontend/src/business/components/track/plan/view/comonents/TestCaseRelevance.vue
similarity index 97%
rename from frontend/src/business/components/track/plan/components/TestCaseRelevance.vue
rename to frontend/src/business/components/track/plan/view/comonents/TestCaseRelevance.vue
index 3a20e2dea2..d30a3dcbd7 100644
--- a/frontend/src/business/components/track/plan/components/TestCaseRelevance.vue
+++ b/frontend/src/business/components/track/plan/view/comonents/TestCaseRelevance.vue
@@ -54,8 +54,8 @@
 
 <script>
 
-  import NodeTree from '../../common/NodeTree';
-  import MsDialogFooter from '../../../common/components/MsDialogFooter'
+  import NodeTree from '../../../common/NodeTree';
+  import MsDialogFooter from '../../../../common/components/MsDialogFooter'
 
   export default {
       name: "TestCaseRelevance",
diff --git a/frontend/src/business/components/track/plan/components/TestPlanTestCaseEdit.vue b/frontend/src/business/components/track/plan/view/comonents/TestPlanTestCaseEdit.vue
similarity index 99%
rename from frontend/src/business/components/track/plan/components/TestPlanTestCaseEdit.vue
rename to frontend/src/business/components/track/plan/view/comonents/TestPlanTestCaseEdit.vue
index aed516be4d..aee252db19 100644
--- a/frontend/src/business/components/track/plan/components/TestPlanTestCaseEdit.vue
+++ b/frontend/src/business/components/track/plan/view/comonents/TestPlanTestCaseEdit.vue
@@ -165,7 +165,7 @@
 </template>
 
 <script>
-  import TestPlanTestCaseStatusButton from '../common/TestPlanTestCaseStatusButton';
+  import TestPlanTestCaseStatusButton from '../../common/TestPlanTestCaseStatusButton';
 
   export default {
     name: "TestPlanTestCaseEdit",
diff --git a/frontend/src/business/components/track/plan/components/TestPlanTestCaseList.vue b/frontend/src/business/components/track/plan/view/comonents/TestPlanTestCaseList.vue
similarity index 91%
rename from frontend/src/business/components/track/plan/components/TestPlanTestCaseList.vue
rename to frontend/src/business/components/track/plan/view/comonents/TestPlanTestCaseList.vue
index c2efc3d563..046d1d5c33 100644
--- a/frontend/src/business/components/track/plan/components/TestPlanTestCaseList.vue
+++ b/frontend/src/business/components/track/plan/view/comonents/TestPlanTestCaseList.vue
@@ -109,19 +109,19 @@
 <script>
   import ExecutorEdit from './ExecutorEdit';
   import StatusEdit from './StatusEdit';
-  import TestPlanTestCaseEdit from "../components/TestPlanTestCaseEdit";
-  import MsTipButton from '../../../../components/common/components/MsTipButton';
-  import MsTablePagination from '../../../../components/common/pagination/TablePagination';
-  import MsTableHeader from '../../../../components/common/components/MsTableHeader';
-  import MsTableButton from '../../../../components/common/components/MsTableButton';
-  import NodeBreadcrumb from '../../common/NodeBreadcrumb';
+  import TestPlanTestCaseEdit from "./TestPlanTestCaseEdit";
+  import MsTipButton from '../../../../common/components/MsTipButton';
+  import MsTablePagination from '../../../../common/pagination/TablePagination';
+  import MsTableHeader from '../../../../common/components/MsTableHeader';
+  import MsTableButton from '../../../../common/components/MsTableButton';
+  import NodeBreadcrumb from '../../../common/NodeBreadcrumb';
 
-  import {TokenKey} from '../../../../../common/js/constants';
-  import {tableFilter} from '../../../../../common/js/utils';
-  import PriorityTableItem from "../../common/TableItems/PriorityTableItem";
-  import StatusTableItem from "../../common/TableItems/StatusTableItem";
-  import TypeTableItem from "../../common/TableItems/TypeTableItem";
-  import MethodTableItem from "../../common/TableItems/MethodTableItem";
+  import {TokenKey} from '../../../../../../common/js/constants';
+  import {tableFilter} from '../../../../../../common/js/utils';
+  import PriorityTableItem from "../../../common/TableItems/PriorityTableItem";
+  import StatusTableItem from "../../../common/TableItems/StatusTableItem";
+  import TypeTableItem from "../../../common/TableItems/TypeTableItem";
+  import MethodTableItem from "../../../common/TableItems/MethodTableItem";
 
   export default {
       name: "TestPlanTestCaseList",