diff --git a/backend/src/main/java/io/metersphere/base/mapper/ext/ExtTestCaseMapper.xml b/backend/src/main/java/io/metersphere/base/mapper/ext/ExtTestCaseMapper.xml
index 53bb178dec..9a9a8b2d51 100644
--- a/backend/src/main/java/io/metersphere/base/mapper/ext/ExtTestCaseMapper.xml
+++ b/backend/src/main/java/io/metersphere/base/mapper/ext/ExtTestCaseMapper.xml
@@ -258,7 +258,8 @@
     </select>
 
     <select id="list" resultType="io.metersphere.track.dto.TestCaseDTO">
-        select test_case.* from test_case
+        select <include refid="io.metersphere.base.mapper.TestCaseMapper.Base_Column_List"/>
+        from test_case
         <where>
             <if test="request.combine != null">
                 <include refid="combine">
diff --git a/frontend/src/business/components/track/case/TestCase.vue b/frontend/src/business/components/track/case/TestCase.vue
index b58b389157..ee8e4cd59d 100644
--- a/frontend/src/business/components/track/case/TestCase.vue
+++ b/frontend/src/business/components/track/case/TestCase.vue
@@ -55,204 +55,205 @@
 
 <script>
 
-  import NodeTree from '../common/NodeTree';
-  import TestCaseEdit from './components/TestCaseEdit';
-  import {CURRENT_PROJECT, ROLE_TEST_MANAGER, ROLE_TEST_USER} from '../../../../common/js/constants';
-  import TestCaseList from "./components/TestCaseList";
-  import SelectMenu from "../common/SelectMenu";
-  import TestCaseMove from "./components/TestCaseMove";
-  import MsContainer from "../../common/components/MsContainer";
-  import MsAsideContainer from "../../common/components/MsAsideContainer";
-  import MsMainContainer from "../../common/components/MsMainContainer";
-  import {checkoutTestManagerOrTestUser, hasRoles} from "../../../../common/js/utils";
-  import BatchMove from "./components/BatchMove";
+import NodeTree from '../common/NodeTree';
+import TestCaseEdit from './components/TestCaseEdit';
+import {CURRENT_PROJECT, ROLE_TEST_MANAGER, ROLE_TEST_USER} from '../../../../common/js/constants';
+import TestCaseList from "./components/TestCaseList";
+import SelectMenu from "../common/SelectMenu";
+import TestCaseMove from "./components/TestCaseMove";
+import MsContainer from "../../common/components/MsContainer";
+import MsAsideContainer from "../../common/components/MsAsideContainer";
+import MsMainContainer from "../../common/components/MsMainContainer";
+import {checkoutTestManagerOrTestUser, hasRoles} from "../../../../common/js/utils";
+import BatchMove from "./components/BatchMove";
 
-  export default {
-    name: "TestCase",
-    components: {
-      MsMainContainer,
-      MsAsideContainer, MsContainer, TestCaseMove, TestCaseList, NodeTree, TestCaseEdit, SelectMenu, BatchMove},
-    comments: {},
-    data() {
-      return {
-        result: {},
-        currentPage: 1,
-        pageSize: 5,
-        total: 0,
-        projects: [],
-        currentProject: null,
-        treeNodes: [],
-        selectNodeIds: [],
-        selectParentNodes: [],
-        testCaseReadOnly: true,
-        selectNode: {},
-        nodeTreeDraggable: true,
+export default {
+  name: "TestCase",
+  components: {
+    MsMainContainer,
+    MsAsideContainer, MsContainer, TestCaseMove, TestCaseList, NodeTree, TestCaseEdit, SelectMenu, BatchMove
+  },
+  comments: {},
+  data() {
+    return {
+      result: {},
+      currentPage: 1,
+      pageSize: 5,
+      total: 0,
+      projects: [],
+      currentProject: null,
+      treeNodes: [],
+      selectNodeIds: [],
+      selectParentNodes: [],
+      testCaseReadOnly: true,
+      selectNode: {},
+      nodeTreeDraggable: true,
+    }
+  },
+  mounted() {
+    this.init(this.$route);
+  },
+  watch: {
+    '$route'(to, from) {
+      this.init(to);
+    },
+    currentProject() {
+      this.refresh();
+    }
+  },
+  methods: {
+    init(route) {
+      let path = route.path;
+      if (path.indexOf("/track/case/edit") >= 0 || path.indexOf("/track/case/create") >= 0) {
+        this.getProjects();
+        this.testCaseReadOnly = false;
+        if (!checkoutTestManagerOrTestUser()) {
+          this.testCaseReadOnly = true;
+        }
+        let caseId = this.$route.params.caseId;
+        this.openRecentTestCaseEditDialog(caseId);
+        this.$router.push('/track/case/all');
+      } else if (route.params.projectId) {
+        this.getProjects();
+        this.getProjectById(route.params.projectId);
       }
     },
-    mounted() {
-      this.init(this.$route);
-    },
-    watch: {
-      '$route'(to, from) {
-        this.init(to);
-      },
-      currentProject() {
-        this.refresh();
-      }
-    },
-    methods: {
-      init(route) {
-        let path = route.path;
-        if (path.indexOf("/track/case/edit") >= 0 || path.indexOf("/track/case/create") >= 0){
-          this.getProjects();
-          this.testCaseReadOnly = false;
-          if (!checkoutTestManagerOrTestUser()) {
-            this.testCaseReadOnly = true;
+    getProjects() {
+      this.$get("/project/listAll", (response) => {
+        this.projects = response.data;
+        let lastProject = JSON.parse(localStorage.getItem(CURRENT_PROJECT));
+        if (lastProject) {
+          let hasCurrentProject = false;
+          for (let i = 0; i < this.projects.length; i++) {
+            if (this.projects[i].id == lastProject.id) {
+              this.currentProject = lastProject;
+              hasCurrentProject = true;
+              break;
+            }
+          }
+          if (!hasCurrentProject) {
+            this.setCurrentProject(this.projects[0]);
           }
-          let caseId = this.$route.params.caseId;
-          this.openRecentTestCaseEditDialog(caseId);
-          this.$router.push('/track/case/all');
-        } else if (route.params.projectId){
-          this.getProjects();
-          this.getProjectById(route.params.projectId);
-        }
-      },
-      getProjects() {
-          this.$get("/project/listAll", (response) => {
-            this.projects = response.data;
-            let lastProject = JSON.parse(localStorage.getItem(CURRENT_PROJECT));
-            if (lastProject) {
-              let hasCurrentProject = false;
-              for (let i = 0; i < this.projects.length; i++) {
-                if (this.projects[i].id == lastProject.id) {
-                  this.currentProject = lastProject;
-                  hasCurrentProject = true;
-                  break;
-                }
-              }
-              if (!hasCurrentProject) {
-                this.setCurrentProject(this.projects[0]);
-              }
-            } else {
-              if(this.projects.length > 0){
-                this.setCurrentProject(this.projects[0]);
-              }
-            }
-            // this.checkProject();
-          });
-      },
-      checkProject() {
-        if(this.currentProject === null) {
-          this.$alert(this.$t('test_track.case.no_project'), {
-            confirmButtonText: this.$t('project.create'),
-            callback: action => {
-              this.$router.push("/track/project/create");
-            }
-          });
-        }
-      },
-      changeProject(project) {
-        this.setCurrentProject(project);
-      },
-      nodeChange(nodeIds, pNodes) {
-        this.selectNodeIds = nodeIds;
-        this.selectParentNodes = pNodes;
-      },
-      refreshTable() {
-        this.$refs.testCaseList.initTableData();
-      },
-      editTestCase(testCase) {
-        this.testCaseReadOnly = false;
-        if (this.treeNodes.length < 1) {
-          this.$warning(this.$t('test_track.case.create_module_first'));
-          return;
-        }
-        this.$refs.testCaseEditDialog.open(testCase);
-      },
-      copyTestCase(testCase) {
-        this.testCaseReadOnly = false;
-        let item = {};
-        Object.assign(item, testCase);
-        item.name = '';
-        item.isCopy = true;
-        this.$refs.testCaseEditDialog.open(item);
-      },
-      showTestCaseDetail(testCase) {
-        this.testCaseReadOnly = true;
-        this.$refs.testCaseEditDialog.open(testCase);
-      },
-      getProjectByCaseId(caseId) {
-        return this.$get('/test/case/project/' + caseId, async response => {
-          this.setCurrentProject(response.data);
-        });
-      },
-      refresh() {
-        this.selectNodeIds = [];
-        this.selectParentNodes = [];
-        this.selectNode = {};
-        this.$refs.testCaseList.initTableData();
-        this.getNodeTree();
-      },
-      openRecentTestCaseEditDialog(caseId) {
-        if (caseId) {
-          this.getProjectByCaseId(caseId);
-          this.$get('/test/case/get/' + caseId, response => {
-            if (response.data) {
-              this.$refs.testCaseEditDialog.open(response.data);
-            }
-          });
         } else {
-          this.$refs.testCaseEditDialog.open();
+          if (this.projects.length > 0) {
+            this.setCurrentProject(this.projects[0]);
+          }
         }
-      },
-      getProjectById(id) {
-        if (id && id != 'all') {
-          this.$get('/project/get/' + id, response => {
-            let project = response.data;
-            this.setCurrentProject(project);
-            // this.$router.push('/track/case/all');
-          });
-        }
-        if (id === 'all') {
-          this.refresh();
-        }
-      },
-      setCurrentProject(project) {
-        if (project) {
-          this.currentProject = project;
-          localStorage.setItem(CURRENT_PROJECT, JSON.stringify(project));
-        }
-        this.refresh();
-      },
-      getNodeTree() {
-        if (!hasRoles(ROLE_TEST_USER, ROLE_TEST_MANAGER)) {
-          this.nodeTreeDraggable = false;
-        }
-        if (this.currentProject) {
-          this.result = this.$get("/case/node/list/" + this.currentProject.id, response => {
-            this.treeNodes = response.data;
-          });
-        }
-      },
-      moveToNode(selectIds) {
-        if (selectIds.size < 1) {
-          this.$warning(this.$t('test_track.plan_view.select_manipulate'));
-          return;
-        }
-        this.$refs.testCaseEditDialog.getModuleOptions();
-        this.$refs.testCaseMove.open(this.$refs.testCaseEditDialog.moduleOptions, selectIds);
-      },
-      batchMove(selectIds) {
-        this.$refs.testBatchMove.open(this.treeNodes, selectIds,this.$refs.testCaseEditDialog.moduleOptions);
+        // this.checkProject();
+      });
+    },
+    checkProject() {
+      if (this.currentProject === null) {
+        this.$alert(this.$t('test_track.case.no_project'), {
+          confirmButtonText: this.$t('project.create'),
+          callback: action => {
+            this.$router.push("/track/project/create");
+          }
+        });
       }
+    },
+    changeProject(project) {
+      this.setCurrentProject(project);
+    },
+    nodeChange(nodeIds, pNodes) {
+      this.selectNodeIds = nodeIds;
+      this.selectParentNodes = pNodes;
+    },
+    refreshTable() {
+      this.$refs.testCaseList.initTableData();
+    },
+    editTestCase(testCase) {
+      this.testCaseReadOnly = false;
+      if (this.treeNodes.length < 1) {
+        this.$warning(this.$t('test_track.case.create_module_first'));
+        return;
+      }
+      this.$refs.testCaseEditDialog.open(testCase);
+    },
+    copyTestCase(testCase) {
+      this.testCaseReadOnly = false;
+      let item = {};
+      Object.assign(item, testCase);
+      item.name = '';
+      item.isCopy = true;
+      this.$refs.testCaseEditDialog.open(item);
+    },
+    showTestCaseDetail(testCase) {
+      this.testCaseReadOnly = true;
+      this.$refs.testCaseEditDialog.open(testCase);
+    },
+    getProjectByCaseId(caseId) {
+      return this.$get('/test/case/project/' + caseId, async response => {
+        this.setCurrentProject(response.data);
+      });
+    },
+    refresh() {
+      this.selectNodeIds = [];
+      this.selectParentNodes = [];
+      this.selectNode = {};
+      this.$refs.testCaseList.initTableData();
+      this.getNodeTree();
+    },
+    openRecentTestCaseEditDialog(caseId) {
+      if (caseId) {
+        this.getProjectByCaseId(caseId);
+        this.$get('/test/case/get/' + caseId, response => {
+          if (response.data) {
+            this.$refs.testCaseEditDialog.open(response.data);
+          }
+        });
+      } else {
+        this.$refs.testCaseEditDialog.open();
+      }
+    },
+    getProjectById(id) {
+      if (id && id != 'all') {
+        this.$get('/project/get/' + id, response => {
+          let project = response.data;
+          this.setCurrentProject(project);
+          // this.$router.push('/track/case/all');
+        });
+      }
+      if (id === 'all') {
+        this.refresh();
+      }
+    },
+    setCurrentProject(project) {
+      if (project) {
+        this.currentProject = project;
+        localStorage.setItem(CURRENT_PROJECT, JSON.stringify(project));
+      }
+      this.refresh();
+    },
+    getNodeTree() {
+      if (!hasRoles(ROLE_TEST_USER, ROLE_TEST_MANAGER)) {
+        this.nodeTreeDraggable = false;
+      }
+      if (this.currentProject) {
+        this.result = this.$get("/case/node/list/" + this.currentProject.id, response => {
+          this.treeNodes = response.data;
+        });
+      }
+    },
+    moveToNode(selectIds) {
+      if (selectIds.size < 1) {
+        this.$warning(this.$t('test_track.plan_view.select_manipulate'));
+        return;
+      }
+      this.$refs.testCaseEditDialog.getModuleOptions();
+      this.$refs.testCaseMove.open(this.$refs.testCaseEditDialog.moduleOptions, selectIds);
+    },
+    batchMove(selectIds) {
+      this.$refs.testBatchMove.open(this.treeNodes, selectIds, this.$refs.testCaseEditDialog.moduleOptions);
     }
   }
+}
 </script>
 
 <style scoped>
 
-  .el-main {
-    padding: 15px;
-  }
+.el-main {
+  padding: 15px;
+}
 
 </style>
diff --git a/frontend/src/business/components/track/case/components/TestCaseDetail.vue b/frontend/src/business/components/track/case/components/TestCaseDetail.vue
index cbc3742ee1..3fad9f2c17 100644
--- a/frontend/src/business/components/track/case/components/TestCaseDetail.vue
+++ b/frontend/src/business/components/track/case/components/TestCaseDetail.vue
@@ -161,6 +161,7 @@ export default {
   data() {
     return {
       result: {},
+      testCase: {},
       dialogFormVisible: false,
       readOnly: true,
       form: {
@@ -190,9 +191,15 @@ export default {
       ]
     };
   },
+  mounted() {
+    this.$get('test/case/get/' + this.testCaseId, response => {
+      this.testCase = response.data;
+    });
+  },
+  methods: {},
   props: {
-    testCase: {
-      type: Object
+    testCaseId: {
+      type: String
     }
   },
 }
diff --git a/frontend/src/business/components/track/case/components/TestCaseEdit.vue b/frontend/src/business/components/track/case/components/TestCaseEdit.vue
index 3a186c0287..1b4a005605 100644
--- a/frontend/src/business/components/track/case/components/TestCaseEdit.vue
+++ b/frontend/src/business/components/track/case/components/TestCaseEdit.vue
@@ -256,9 +256,9 @@
 
 <script>
 
-import {TokenKey, WORKSPACE_ID} from '../../../../../common/js/constants';
+import {TokenKey, WORKSPACE_ID} from '@/common/js/constants';
 import MsDialogFooter from '../../../common/components/MsDialogFooter'
-import {listenGoBack, removeGoBackListener} from "../../../../../common/js/utils";
+import {listenGoBack, removeGoBackListener} from "@/common/js/utils";
 import {LIST_CHANGE, TrackEvent} from "@/business/components/common/head/ListEvent";
 import {Message} from "element-ui";
 import TestCaseAttachment from "@/business/components/track/case/components/TestCaseAttachment";
diff --git a/frontend/src/business/components/track/case/components/TestCaseList.vue b/frontend/src/business/components/track/case/components/TestCaseList.vue
index ed5e43555c..c2fc825b9c 100644
--- a/frontend/src/business/components/track/case/components/TestCaseList.vue
+++ b/frontend/src/business/components/track/case/components/TestCaseList.vue
@@ -35,6 +35,7 @@
         @filter-change="filter"
         @select-all="handleSelectAll"
         @select="handleSelectionChange"
+        @cell-mouse-enter="showPopover"
         row-key="id"
         class="test-content adjust-table">
         <el-table-column
@@ -65,7 +66,7 @@
               width="60%"
               trigger="hover"
             >
-              <test-case-detail :test-case="scope.row"/>
+              <test-case-detail v-if="currentCaseId === scope.row.id" :test-case-id="currentCaseId"/>
               <span slot="reference">{{ scope.row.name }}</span>
             </el-popover>
           </template>
@@ -166,11 +167,11 @@ import MethodTableItem from "../../common/tableItems/planview/MethodTableItem";
 import MsTableOperator from "../../../common/components/MsTableOperator";
 import MsTableOperatorButton from "../../../common/components/MsTableOperatorButton";
 import MsTableButton from "../../../common/components/MsTableButton";
-import {_filter, _sort} from "../../../../../common/js/utils";
+import {_filter, _sort} from "@/common/js/utils";
 import {TEST_CASE_CONFIGS} from "../../../common/components/search/search-components";
 import ShowMoreBtn from "./ShowMoreBtn";
 import BatchEdit from "./BatchEdit";
-import {WORKSPACE_ID} from "../../../../../common/js/constants";
+import {WORKSPACE_ID} from "@/common/js/constants";
 import {LIST_CHANGE, TrackEvent} from "@/business/components/common/head/ListEvent";
 import StatusTableItem from "@/business/components/track/common/tableItems/planview/StatusTableItem";
 import TestCaseDetail from "./TestCaseDetail";
@@ -187,336 +188,342 @@ export default {
     PriorityTableItem,
     MsCreateBox,
     TestCaseImport,
-      TestCaseExport,
-      MsTablePagination,
-      NodeBreadcrumb,
-      MsTableHeader,
-      ShowMoreBtn,
-      BatchEdit,
-      StatusTableItem,
-      TestCaseDetail,
-      ReviewStatus
-    },
-    data() {
-      return {
-        result: {},
-        deletePath: "/test/case/delete",
-        condition: {
-          components: TEST_CASE_CONFIGS
-        },
-        tableData: [],
-        currentPage: 1,
-        pageSize: 10,
-        total: 0,
-        selectRows: new Set(),
-        priorityFilters: [
-          {text: 'P0', value: 'P0'},
-          {text: 'P1', value: 'P1'},
-          {text: 'P2', value: 'P2'},
-          {text: 'P3', value: 'P3'}
-        ],
-        methodFilters: [
-          {text: this.$t('test_track.case.manual'), value: 'manual'},
-          {text: this.$t('test_track.case.auto'), value: 'auto'}
-        ],
-        typeFilters: [
-          {text: this.$t('commons.functional'), value: 'functional'},
-          {text: this.$t('commons.performance'), value: 'performance'},
-          {text: this.$t('commons.api'), value: 'api'}
-        ],
-        statusFilters: [
-          {text: this.$t('test_track.case.status_prepare'), value: 'Prepare'},
-          {text: this.$t('test_track.case.status_pass'), value: 'Pass'},
-          {text: this.$t('test_track.case.status_un_pass'), value: 'UnPass'},
-        ],
-        showMore: false,
-        buttons: [
-          {
-            name: this.$t('test_track.case.batch_edit_case'), handleClick: this.handleBatchEdit
-          }, {
-            name: this.$t('test_track.case.batch_move_case'), handleClick: this.handleBatchMove
-          }, {
-            name: this.$t('test_track.case.batch_delete_case'), handleClick: this.handleDeleteBatch
-          }
-        ],
-        typeArr: [
-          {id: 'priority', name: this.$t('test_track.case.priority')},
-          {id: 'type', name: this.$t('test_track.case.type')},
-          {id: 'method', name: this.$t('test_track.case.method')},
-          {id: 'maintainer', name: this.$t('test_track.case.maintainer')},
-        ],
-        valueArr: {
-          priority: [
-            {name: 'P0', id: 'P0'},
-            {name: 'P1', id: 'P1'},
-            {name: 'P2', id: 'P2'},
-            {name: 'P3', id: 'P3'}
-          ],
-          type: [
-            {name: this.$t('commons.functional'), id: 'functional'},
-            {name: this.$t('commons.performance'), id: 'performance'},
-            {name: this.$t('commons.api'), id: 'api'}
-          ],
-          method: [
-            {name: this.$t('test_track.case.manual'), id: 'manual'},
-            {name: this.$t('test_track.case.auto'), id: 'auto'}
-          ],
-          maintainer: [],
+    TestCaseExport,
+    MsTablePagination,
+    NodeBreadcrumb,
+    MsTableHeader,
+    ShowMoreBtn,
+    BatchEdit,
+    StatusTableItem,
+    TestCaseDetail,
+    ReviewStatus
+  },
+  data() {
+    return {
+      result: {},
+      deletePath: "/test/case/delete",
+      condition: {
+        components: TEST_CASE_CONFIGS
+      },
+      tableData: [],
+      currentPage: 1,
+      pageSize: 10,
+      total: 0,
+      selectRows: new Set(),
+      priorityFilters: [
+        {text: 'P0', value: 'P0'},
+        {text: 'P1', value: 'P1'},
+        {text: 'P2', value: 'P2'},
+        {text: 'P3', value: 'P3'}
+      ],
+      methodFilters: [
+        {text: this.$t('test_track.case.manual'), value: 'manual'},
+        {text: this.$t('test_track.case.auto'), value: 'auto'}
+      ],
+      typeFilters: [
+        {text: this.$t('commons.functional'), value: 'functional'},
+        {text: this.$t('commons.performance'), value: 'performance'},
+        {text: this.$t('commons.api'), value: 'api'}
+      ],
+      statusFilters: [
+        {text: this.$t('test_track.case.status_prepare'), value: 'Prepare'},
+        {text: this.$t('test_track.case.status_pass'), value: 'Pass'},
+        {text: this.$t('test_track.case.status_un_pass'), value: 'UnPass'},
+      ],
+      showMore: false,
+      buttons: [
+        {
+          name: this.$t('test_track.case.batch_edit_case'), handleClick: this.handleBatchEdit
+        }, {
+          name: this.$t('test_track.case.batch_move_case'), handleClick: this.handleBatchMove
+        }, {
+          name: this.$t('test_track.case.batch_delete_case'), handleClick: this.handleDeleteBatch
         }
-      }
-    },
-    props: {
-      currentProject: {
-        type: Object
+      ],
+      typeArr: [
+        {id: 'priority', name: this.$t('test_track.case.priority')},
+        {id: 'type', name: this.$t('test_track.case.type')},
+        {id: 'method', name: this.$t('test_track.case.method')},
+        {id: 'maintainer', name: this.$t('test_track.case.maintainer')},
+      ],
+      valueArr: {
+        priority: [
+          {name: 'P0', id: 'P0'},
+          {name: 'P1', id: 'P1'},
+          {name: 'P2', id: 'P2'},
+          {name: 'P3', id: 'P3'}
+        ],
+        type: [
+          {name: this.$t('commons.functional'), id: 'functional'},
+          {name: this.$t('commons.performance'), id: 'performance'},
+          {name: this.$t('commons.api'), id: 'api'}
+        ],
+        method: [
+          {name: this.$t('test_track.case.manual'), id: 'manual'},
+          {name: this.$t('test_track.case.auto'), id: 'auto'}
+        ],
+        maintainer: [],
       },
-      selectNodeIds: {
-        type: Array
-      },
-      selectParentNodes: {
-        type: Array
-      }
+      currentCaseId: null
+    }
+  },
+  props: {
+    currentProject: {
+      type: Object
     },
-    created: function () {
+    selectNodeIds: {
+      type: Array
+    },
+    selectParentNodes: {
+      type: Array
+    }
+  },
+  created: function () {
+    this.initTableData();
+  },
+  watch: {
+    currentProject() {
       this.initTableData();
     },
-    watch: {
-      currentProject() {
-        this.initTableData();
-      },
-      selectNodeIds() {
-        this.currentPage = 1;
-        this.initTableData();
+    selectNodeIds() {
+      this.currentPage = 1;
+      this.initTableData();
+    }
+  },
+  methods: {
+    initTableData() {
+      if (this.planId) {
+        // param.planId = this.planId;
+        this.condition.planId = this.planId;
+      }
+      if (this.selectNodeIds && this.selectNodeIds.length > 0) {
+        // param.nodeIds = this.selectNodeIds;
+        this.condition.nodeIds = this.selectNodeIds;
+      }
+      if (this.currentProject) {
+        this.condition.projectId = this.currentProject.id;
+        this.result = this.$post(this.buildPagePath('/test/case/list'), this.condition, response => {
+          let data = response.data;
+          this.total = data.itemCount;
+          this.tableData = data.listObject;
+          // this.selectIds.clear();
+          this.selectRows.clear();
+        });
       }
     },
-    methods: {
-      initTableData() {
-        if (this.planId) {
-          // param.planId = this.planId;
-          this.condition.planId = this.planId;
-        }
-        if (this.selectNodeIds && this.selectNodeIds.length > 0) {
-          // param.nodeIds = this.selectNodeIds;
-          this.condition.nodeIds = this.selectNodeIds;
-        }
-        this.getData();
-      },
-      getData() {
-        if (this.currentProject) {
-          this.condition.projectId = this.currentProject.id;
-          this.result = this.$post(this.buildPagePath('/test/case/list'), this.condition, response => {
-            let data = response.data;
-            this.total = data.itemCount;
-            this.tableData = data.listObject;
-            // this.selectIds.clear();
-            this.selectRows.clear();
-          });
-        }
-      },
-      search() {
-        this.initTableData();
-      },
-      buildPagePath(path) {
-        return path + "/" + this.currentPage + "/" + this.pageSize;
-      },
-      testCaseCreate() {
-        this.$emit('testCaseEdit');
-      },
-      handleEdit(testCase) {
+    search() {
+      this.initTableData();
+    },
+    buildPagePath(path) {
+      return path + "/" + this.currentPage + "/" + this.pageSize;
+    },
+    testCaseCreate() {
+      this.$emit('testCaseEdit');
+    },
+    handleEdit(testCase) {
+      this.$get('test/case/get/' + testCase.id, response => {
+        let testCase = response.data;
         this.$emit('testCaseEdit', testCase);
-      },
-      handleCopy(testCase) {
+      });
+    },
+    handleCopy(testCase) {
+      this.$get('test/case/get/' + testCase.id, response => {
+        let testCase = response.data;
         this.$emit('testCaseCopy', testCase);
-      },
-      handleDelete(testCase) {
-        this.$alert(this.$t('test_track.case.delete_confirm') + '\'' + testCase.name + '\'' + "？", '', {
-          confirmButtonText: this.$t('commons.confirm'),
-          callback: (action) => {
-            if (action === 'confirm') {
-              this._handleDelete(testCase);
-            }
+      });
+    },
+    handleDelete(testCase) {
+      this.$alert(this.$t('test_track.case.delete_confirm') + '\'' + testCase.name + '\'' + "？", '', {
+        confirmButtonText: this.$t('commons.confirm'),
+        callback: (action) => {
+          if (action === 'confirm') {
+            this._handleDelete(testCase);
           }
-        });
-      },
-      handleDeleteBatch() {
-        this.$alert(this.$t('test_track.case.delete_confirm') + "？", '', {
-          confirmButtonText: this.$t('commons.confirm'),
-          callback: (action) => {
-            if (action === 'confirm') {
-              let ids = Array.from(this.selectRows).map(row => row.id);
-              this.$post('/test/case/batch/delete', {ids: ids}, () => {
-                this.selectRows.clear();
-                this.$emit("refresh");
-                this.$success(this.$t('commons.delete_success'));
-                // 发送广播，刷新 head 上的最新列表
-                TrackEvent.$emit(LIST_CHANGE);
-              });
-            }
+        }
+      });
+    },
+    handleDeleteBatch() {
+      this.$alert(this.$t('test_track.case.delete_confirm') + "？", '', {
+        confirmButtonText: this.$t('commons.confirm'),
+        callback: (action) => {
+          if (action === 'confirm') {
+            let ids = Array.from(this.selectRows).map(row => row.id);
+            this.$post('/test/case/batch/delete', {ids: ids}, () => {
+              this.selectRows.clear();
+              this.$emit("refresh");
+              this.$success(this.$t('commons.delete_success'));
+              // 发送广播，刷新 head 上的最新列表
+              TrackEvent.$emit(LIST_CHANGE);
+            });
           }
+        }
+      });
+    },
+    _handleDelete(testCase) {
+      let testCaseId = testCase.id;
+      this.$post('/test/case/delete/' + testCaseId, {}, () => {
+        this.initTableData();
+        this.$success(this.$t('commons.delete_success'));
+        // 发送广播，刷新 head 上的最新列表
+        TrackEvent.$emit(LIST_CHANGE);
+      });
+    },
+    refresh() {
+      this.condition = {components: TEST_CASE_CONFIGS};
+      // this.selectIds.clear();
+      this.selectRows.clear();
+      this.$emit('refresh');
+    },
+    showDetail(row, event, column) {
+      this.$emit('testCaseDetail', row);
+    },
+    handleSelectAll(selection) {
+      if (selection.length > 0) {
+        this.tableData.forEach(item => {
+          this.$set(item, "showMore", true);
+          this.selectRows.add(item);
         });
-      },
-      _handleDelete(testCase) {
-        let testCaseId = testCase.id;
-        this.$post('/test/case/delete/' + testCaseId, {}, () => {
-          this.initTableData();
-          this.$success(this.$t('commons.delete_success'));
-          // 发送广播，刷新 head 上的最新列表
-          TrackEvent.$emit(LIST_CHANGE);
-        });
-      },
-      refresh() {
-        this.condition = {components: TEST_CASE_CONFIGS};
-        // this.selectIds.clear();
+      } else {
         this.selectRows.clear();
-        this.$emit('refresh');
-      },
-      showAll() {
-        this.condition = {components: TEST_CASE_CONFIGS};
-        this.getData();
-      },
-      showDetail(row, event, column) {
-        this.$emit('testCaseDetail', row);
-      },
-      handleSelectAll(selection) {
-        if (selection.length > 0) {
-          this.tableData.forEach(item => {
-            this.$set(item, "showMore", true);
-            this.selectRows.add(item);
-          });
-        } else {
-          this.selectRows.clear();
-          this.tableData.forEach(row => {
-            this.$set(row, "showMore", false);
-          })
-        }
-      },
-      handleSelectionChange(selection, row) {
-        if (this.selectRows.has(row)) {
+        this.tableData.forEach(row => {
           this.$set(row, "showMore", false);
-          this.selectRows.delete(row);
+        })
+      }
+    },
+    handleSelectionChange(selection, row) {
+      if (this.selectRows.has(row)) {
+        this.$set(row, "showMore", false);
+        this.selectRows.delete(row);
+      } else {
+        this.$set(row, "showMore", true);
+        this.selectRows.add(row);
+      }
+    },
+    importTestCase() {
+      this.$refs.testCaseImport.open();
+    },
+    exportTestCase() {
+      let ids = Array.from(this.selectRows).map(row => row.id);
+      let config = {
+        url: '/test/case/export/testcase',
+        method: 'post',
+        responseType: 'blob',
+        // data: {ids: [...this.selectIds]}
+        data: {ids: ids, projectId: this.currentProject.id}
+      };
+      this.result = this.$request(config).then(response => {
+        const filename = this.$t('test_track.case.test_case') + ".xlsx";
+        const blob = new Blob([response.data]);
+        if ("download" in document.createElement("a")) {
+          let aTag = document.createElement('a');
+          aTag.download = filename;
+          aTag.href = URL.createObjectURL(blob);
+          aTag.click();
+          URL.revokeObjectURL(aTag.href)
         } else {
-          this.$set(row, "showMore", true);
-          this.selectRows.add(row);
+          navigator.msSaveBlob(blob, filename);
         }
-      },
-      importTestCase() {
-        this.$refs.testCaseImport.open();
-      },
-      exportTestCase() {
-        let ids = Array.from(this.selectRows).map(row => row.id);
-        let config = {
-          url: '/test/case/export/testcase',
-          method: 'post',
-          responseType: 'blob',
-          // data: {ids: [...this.selectIds]}
-          data: {ids: ids, projectId: this.currentProject.id}
-        };
-        this.result = this.$request(config).then(response => {
-          const filename = this.$t('test_track.case.test_case') + ".xlsx";
-          const blob = new Blob([response.data]);
-          if ("download" in document.createElement("a")) {
-            let aTag = document.createElement('a');
-            aTag.download = filename;
-            aTag.href = URL.createObjectURL(blob);
-            aTag.click();
-            URL.revokeObjectURL(aTag.href)
-          } else {
-            navigator.msSaveBlob(blob, filename);
-          }
-        });
-      },
-      handleBatch(type) {
+      });
+    },
+    handleBatch(type) {
 
-        if (this.selectRows.size < 1) {
-          if (type === 'export') {
-            this.$alert(this.$t('test_track.case.export_all_cases'), '', {
-              confirmButtonText: this.$t('commons.confirm'),
-              callback: (action) => {
-                if (action === 'confirm') {
-                  this.exportTestCase();
-                }
+      if (this.selectRows.size < 1) {
+        if (type === 'export') {
+          this.$alert(this.$t('test_track.case.export_all_cases'), '', {
+            confirmButtonText: this.$t('commons.confirm'),
+            callback: (action) => {
+              if (action === 'confirm') {
+                this.exportTestCase();
               }
-            })
-            return;
-          } else {
-            this.$warning(this.$t('test_track.plan_view.select_manipulate'));
-            return;
-          }
-        }
-        if (type === 'move') {
-          let ids = Array.from(this.selectRows).map(row => row.id);
-          this.$emit('moveToNode', ids);
-        } else if (type === 'delete') {
-          this.handleDeleteBatch();
+            }
+          })
+          return;
         } else {
-          this.exportTestCase();
+          this.$warning(this.$t('test_track.plan_view.select_manipulate'));
+          return;
         }
-      },
-      batchEdit(form) {
-        let arr = Array.from(this.selectRows);
-        let ids = arr.map(row => row.id);
-        let param = {};
-        param[form.type] = form.value;
-        param.ids = ids;
-        this.$post('/test/case/batch/edit', param, () => {
-          this.$success(this.$t('commons.save_success'));
-          this.refresh();
-          // 发送广播，刷新 head 上的最新列表
-          TrackEvent.$emit(LIST_CHANGE);
-        });
-      },
-      filter(filters) {
-        _filter(filters, this.condition);
-        this.initTableData();
-      },
-      sort(column) {
-        // 每次只对一个字段排序
-        if (this.condition.orders) {
-          this.condition.orders = [];
-        }
-        _sort(column, this.condition);
-        this.initTableData();
-      },
-      handleBatchEdit() {
-        this.getMaintainerOptions();
-        this.$refs.batchEdit.open();
-      },
-      handleBatchMove() {
-        this.$emit("batchMove", Array.from(this.selectRows).map(row => row.id));
-      },
-      getMaintainerOptions() {
-        let workspaceId = localStorage.getItem(WORKSPACE_ID);
-        this.$post('/user/ws/member/tester/list', {workspaceId: workspaceId}, response => {
-          this.valueArr.maintainer = response.data;
-        });
+      }
+      if (type === 'move') {
+        let ids = Array.from(this.selectRows).map(row => row.id);
+        this.$emit('moveToNode', ids);
+      } else if (type === 'delete') {
+        this.handleDeleteBatch();
+      } else {
+        this.exportTestCase();
+      }
+    },
+    batchEdit(form) {
+      let arr = Array.from(this.selectRows);
+      let ids = arr.map(row => row.id);
+      let param = {};
+      param[form.type] = form.value;
+      param.ids = ids;
+      this.$post('/test/case/batch/edit', param, () => {
+        this.$success(this.$t('commons.save_success'));
+        this.refresh();
+        // 发送广播，刷新 head 上的最新列表
+        TrackEvent.$emit(LIST_CHANGE);
+      });
+    },
+    filter(filters) {
+      _filter(filters, this.condition);
+      this.initTableData();
+    },
+    sort(column) {
+      // 每次只对一个字段排序
+      if (this.condition.orders) {
+        this.condition.orders = [];
+      }
+      _sort(column, this.condition);
+      this.initTableData();
+    },
+    handleBatchEdit() {
+      this.getMaintainerOptions();
+      this.$refs.batchEdit.open();
+    },
+    handleBatchMove() {
+      this.$emit("batchMove", Array.from(this.selectRows).map(row => row.id));
+    },
+    getMaintainerOptions() {
+      let workspaceId = localStorage.getItem(WORKSPACE_ID);
+      this.$post('/user/ws/member/tester/list', {workspaceId: workspaceId}, response => {
+        this.valueArr.maintainer = response.data;
+      });
+    },
+    showPopover(row, column, cell) {
+      if (column.property === 'name') {
+        console.log(row, column);
+        this.currentCaseId = row.id;
       }
     }
   }
+}
 </script>
 
 <style scoped>
 
-  .table-page {
-    padding-top: 20px;
-    margin-right: -9px;
-    float: right;
-  }
+.table-page {
+  padding-top: 20px;
+  margin-right: -9px;
+  float: right;
+}
 
-  .operate-button {
-    float: right;
-  }
+.operate-button {
+  float: right;
+}
 
-  .operate-button > div {
-    display: inline-block;
-    margin-left: 10px;
-  }
+.operate-button > div {
+  display: inline-block;
+  margin-left: 10px;
+}
 
-  .search {
-    margin-left: 10px;
-    width: 240px;
-  }
+.search {
+  margin-left: 10px;
+  width: 240px;
+}
 
-  .el-table {
-    cursor: pointer;
-  }
+.el-table {
+  cursor: pointer;
+}
 
 </style>