提交手动测试代码

src/api/case.js

@@ -15,7 +15,8 @@ const formatQuery = (data) => {
 }
 
 export const fetchCaseList = (data) => {
-  return api(`/mantis-test/v1.0.0/mantis/plan/info?${formatQuery(data)}`, {
+  console.log('caselist url',`/mantis-test/v1.0.0/mantis/plan/info${formatQuery(data)}`);
+  return api(`/mantis-test/v1.0.0/mantis/plan/info${formatQuery(data)}`, {
     method: "GET",
   });
 };

src/components/TabList/index.vue

@@ -5,13 +5,127 @@
         {{ tab.title }}
       </div>
     </div>
-    <div class="tab-content" :class="tabClass">
+    <div class="tab-content" :class="tabClass" v-if="activeTab!==1 || (activeTab===1 && isShowTaskList===true)">
       <div class="list">
         <div v-for="(item, index) in activeTabItems" :key="index" class="item">
           <div v-html="itemRender(item)"></div>
         </div>
       </div>
     </div>
+    <div class="task2-container" v-if="activeTab===1 && isShowTaskList===false">
+      <div class="task task-item" v-if="isShowPlanList">
+            <div style="margin-bottom: 1.85vh" id="TaskHeaderName" @click="clickBackToTaskList">{{taskName}}</div>
+            <div class="task-table">
+                <el-table @row-click="selectRowPlan" :data="planList" :row-class-name="rowClassName"  style="background-color: transparent;" >
+                    <el-table-column label="M-ID" prop="id"></el-table-column>
+                    <el-table-column label="Title" prop="name"></el-table-column>
+                    <el-table-column label="Avaliable Carline" prop="carline"></el-table-column>
+                    <el-table-column label="Avaliable Variant" prop="project"></el-table-column>
+                </el-table>
+            </div>
+        </div>
+        <div class="task task-item" v-if="isShowCaseList">
+            <div style="margin-bottom: 1.85vh" id="TaskHeaderName" @click="clickBackToPlanList">{{planName}}</div>
+            <div class="task-table">
+                <el-table @row-click="selectRowCase" :data="caseList" :row-class-name="rowClassName"  style="background-color: transparent;" >
+                    <el-table-column label="Case-ID" prop="m_id"></el-table-column>
+                    <el-table-column label="Title" prop="title"></el-table-column>
+                    <el-table-column label="Avaliable Carline" prop="available_carline"></el-table-column>
+                    <el-table-column label="Avaliable Variant" prop="available_variant"></el-table-column>
+                </el-table>
+            </div>
+        </div>
+        <div class="plan task-item" v-if="isShowCaseCommit">
+            <div style="margin-bottom: 1.85vh">{{caseName}}</div>
+            <el-row :gutter="20">
+                <el-col :span=12>
+                    <el-select v-model="selectedOption" placeholder="请选择" class="select-container">
+                        <el-option
+                        v-for="option in options"
+                        :key="option.value"
+                        :label="option.label"
+                        :value="option.value"
+                        ></el-option>
+                    </el-select>
+                </el-col>
+                <el-col :span=12>
+                    <el-select v-model="selectedOption" placeholder="请选择"  class="select-container">
+                        <el-option
+                        v-for="option in options"
+                        :key="option.value"
+                        :label="option.label"
+                        :value="option.value"
+                        ></el-option>
+                    </el-select>
+                </el-col>
+            </el-row>
+            <el-row :gutter="20">
+                <el-col :span=12>
+                    <el-select v-model="selectedOption" placeholder="请选择" class="select-container">
+                        <el-option
+                        v-for="option in options"
+                        :key="option.value"
+                        :label="option.label"
+                        :value="option.value"
+                        ></el-option>
+                    </el-select>
+                </el-col>
+                <el-col :span=12>
+                    <el-select v-model="selectedOption" placeholder="请选择"  class="select-container">
+                        <el-option
+                        v-for="option in options"
+                        :key="option.value"
+                        :label="option.label"
+                        :value="option.value"
+                        ></el-option>
+                    </el-select>
+                </el-col>
+            </el-row>
+            <el-row :gutter="20">
+                <el-col :span=12>
+                    <el-select v-model="selectedOption" placeholder="请选择" class="select-container">
+                        <el-option
+                        v-for="option in options"
+                        :key="option.value"
+                        :label="option.label"
+                        :value="option.value"
+                        ></el-option>
+                    </el-select>
+                </el-col>
+            </el-row>
+            <div class="area-container">
+                <el-textarea
+                placeholder="请输入内容"
+                ></el-textarea>
+            </div>
+            <el-button class="cancel-button">Cancel</el-button>
+            <el-button class="done-button">Done</el-button>
+        </div>
+        <div class="case task-item" v-if="isShowCaseDetail">
+            <div>{{caseName}}</div>
+            <div class="task-title">{{caseProject}}</div>
+            <div class="task-content">{{caseActive}}</div>
+            <div class="task-title">{{caseFunction}}</div>
+            <div class="task-content">{{caseContent}}
+                <!--<div>1.Click Global Search App Fromapp Grid</div>
+                <div>2.tap global seaech search tif</div>
+                <div>3.switch to hwt mode and freehwr input character</div>
+                <div>4.tap delete button5.long press delete button</div>-->
+            </div>
+            <!--<div class="task-title">SubFunction</div>
+            <div class="task-content">
+                <div>1.click global seaech app fromapp grid</div>
+                <div>2.tap global seaech search tif</div>
+                <div>3.switch to hwt mode and freehwr input character</div>
+                <div>4.tap delete button5.long press delete button</div>
+            </div>
+            <div class="task-title">Market</div>
+            <div class="task-content">CN</div>
+            <div class="task-title">Langunage</div>
+            <div class="task-content">CN</div>-->
+            <el-button class="done-button">Done</el-button>
+        </div>
+      </div>
     <div class="dots">
       <span v-for="dot in dots" :key="dot" :class="{ active: dot === activeTab }" @click="changeTab(dot)"></span>
     </div>
@@ -34,11 +148,30 @@ export default {
     },
     tabClass: {
       type: String
-    }
+    },
+    isShowTaskList: Boolean,
+    isShowPlanList: Boolean,
+    isShowCaseList: Boolean,
+    isShowCaseDetail: Boolean,
+    isShowCaseCommit: Boolean,
+    taskName: Object,
+    planList: Object,
+    planName: Object,
+    caseName: Object,
+    caseList: Object,
+    caseProject: Object,
+    caseActive: Object,
+    caseFunction: Object,
+    caseContent: Object,
+    clickBackToTaskList: Function,
+    clickBackToPlanList: Function,
+    selectRowPlan: Function,
+    selectRowCase: Function,
   },
   data() {
     return {
-      activeTab: 0
+      activeTab: 0,
+      rowClassName: '',
     };
   },
   computed: {
@@ -52,7 +185,7 @@ export default {
   methods: {
     changeTab(index) {
       this.activeTab = index;
-    }
+    },
   }
 };
 </script>
@@ -204,4 +337,171 @@ export default {
         border: 1px solid #707070;
     }
 }
+
+.task2-container {
+  height: 100vh;
+  display: flex;
+  width: 100%;
+  padding-left: 5vw;
+  justify-content: space-around;
+  align-items: center;
+  color: #fff;
+  .task-item {
+    width: 26.47vw;
+    height: 65.27vh;
+    background: rgba(0, 0, 0, 0.49);
+    padding: 1.29vh 0.98vw;
+    border-radius: 2.08vw;
+    position: relative;
+    font-size: 20px;
+    &.case {
+      padding: 2.31vh 1.82vw;
+    }
+    .task-title {
+      color: #72c5ff;
+      margin-top: 0.85vh;
+    }
+    .task-content {
+      margin-top: 0.925vh;
+      font-size: 14px;
+    }
+    .select-container {
+      height: 4.25vh;
+      line-height: 4.25vh;
+      background-color: transparent;
+      border-radius: 2.76vw;
+      border: 1px solid #dfdfdf;
+      padding: 0 0.925vh;
+      margin-bottom: 0.925vh;
+      input {
+        background-color: transparent;
+        height: 4.25vh;
+        line-height: 4.25vh;
+      }
+    }
+    .area-container {
+      height: 33.14vh;
+      background: rgba(0, 0, 0, 0.2);
+      border-radius: 1.04vw;
+      opacity: 1;
+      el-textarea {
+        width: 100%;
+        height: 100%;
+      }
+    }
+    .done-button {
+      width: 11.6vw;
+      height: 4.25vh;
+      line-height: 4.25vh;
+      background: linear-gradient(180deg, #83cbfb 0%, #2e74b2 100%);
+      border-radius: 67px 67px 67px 67px;
+      opacity: 1;
+      border: 1px solid rgba(255, 255, 255, 0.4);
+      color: #fff;
+      padding: 0;
+      position: absolute;
+      bottom: 1.75vh;
+      right: 0.93vw;
+    }
+    .cancel-button {
+      width: 11.6vw;
+      height: 4.25vh;
+      line-height: 4.25vh;
+      background: rgba(255, 255, 255, 0.5);
+      border-radius: 67px 67px 67px 67px;
+      opacity: 1;
+      border: 1px solid rgba(255, 255, 255, 0.4);
+      color: #fff;
+      padding: 0;
+      position: absolute;
+      bottom: 1.75vh;
+      left: 0.93vw;
+    }
+  }
+  .task-item:before {
+    background: linear-gradient(
+      273deg,
+      rgba(255, 255, 255, 0.63) 0%,
+      rgba(255, 255, 255, 0) 66%,
+      rgba(84, 84, 84, 0) 100%
+    );
+    border-radius: 2.08vw;
+    opacity: 1;
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+  }
+
+  .task2-list {
+    .item-box {
+      width: 100%;
+      padding: 1.04vw 1.66vh 1.04vw;
+      background: rgba(0, 0, 0, 0.2);
+      border-radius: 20px 20px 20px 20px;
+      opacity: 1;
+      margin-bottom: 1.85vh;
+      .item-title {
+        height: 4.17vh;
+        font-size: 24px;
+        font-family: PingFang SC-Bold, PingFang SC;
+        font-weight: 400;
+        color: #fbfbfb;
+        line-height: 4.17vh;
+      }
+      .item-description {
+        margin-top: 0.37vh;
+        height: 2.31vh;
+        font-size: 14px;
+        font-family: PingFang SC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #dfdfdf;
+        line-height: 2.31vh;
+      }
+      .item-tag {
+        display: flex;
+        margin-top: 0.92vh;
+        .tag {
+          padding: 0 1vw;
+          height: 2.96vh;
+          line-height: 2.96vh;
+          text-align: center;
+          background-color: #5d9a6d;
+          border-radius: 10px;
+          color: #f2f2f2;
+          margin-right: 1vw;
+        }
+      }
+    }
+  }
+
+  .task-table {
+    background: rgba(0, 0, 0, 0.2);
+    border-radius: 1vw;
+    height: 55.66vh;
+    color: #dfdfdf;
+    .el-table__header-wrapper,
+    .el-table__body-wrapper,
+    .el-table__cell,
+    tr {
+      background-color: transparent !important;
+    }
+    .el-table td.el-table__cell,
+    .el-table th.el-table__cell.is-leaf {
+      border-bottom: 1px solid rgba(0, 0, 0, 0.2) !important;
+      color: #dfdfdf;
+      font-size: 14px;
+    }
+    .el-table--border::after,
+    .el-table--group::after,
+    .el-table::before {
+      background-color: transparent;
+    }
+  }
+}
+
+
 </style>

src/store/modules/case/actions.js

@@ -4,7 +4,8 @@ export default {
   async fetchCaseList({ commit }, data) {
     try {
       const caseList = await caseApi.fetchCaseList(data)
-      commit("setCaseList", caseList.data.data);
+      console.log('caselist',caseList.data.data.data)
+      commit("setCaseList", caseList.data.data.data);
     } catch (err) {
       console.log("error", "服务异常", 1000);
     }

src/store/modules/case/index.js

@@ -6,7 +6,7 @@ export default {
   namespaced: true,
   state() {
     return {
-      caseList: {},
+      caseList: [],
     };
   },
   getters,

src/store/modules/case/mutations.js

@@ -5,5 +5,6 @@ export default {
         state.caseList.push(caseA)
       }
     });
+    console.log('caseListResult',state.caseList)
   },
 };

src/views/ordinaryPage/index.vue

@@ -220,7 +220,11 @@
         </div>
 
         <div class="ordinary-list">
-            <TabList :tabs="tabs" :itemRender="itemRender" v-if="renderBenchList" :tabClass="tabClass"></TabList>
+            <TabList :tabs="tabs" :itemRender="itemRender" :planList="planList" :caseList="caseList" :planName="planName" :taskName="taskName" :caseName="caseName"
+            :is-show-plan-list="isShowPlanList" :is-show-task-list="isShowTaskList" :is-show-case-list="isShowCaseList" :is-show-case-detail="isShowCaseDetail" :clickBackToTaskList="clickBackToTaskList" 
+            :clickBackToPlanList="clickBackToPlanList" :selectRowPlan="selectRowPlan" :caseProject="caseProject" 
+            :caseActive="caseActive" :caseFunction="caseFunction" caseContent="caseContent" v-if="renderBenchList" 
+            :selectRowCase="selectRowCase" :tabClass="tabClass"></TabList>
         </div>
 
         <bench-detail :is-detail-visible="isDetailVisible" :is-remote-btn-visible="isRemoteBtnVisible" :closeDetail="closeDetail" ref="benchdetail" :bench="currentBench"/>
@@ -251,6 +255,17 @@
                 isOpen: false,
                 isDetailVisible: false,
                 isRemoteBtnVisible: false,
+                isShowPlanList: false,
+                isShowCaseList: false,
+                isShowCaseDetail: false,
+                taskName: '',
+                planName: '',
+                caseName: '',
+                caseProject: '',
+                caseActive: '',
+                caseFunction: '',
+                caseContent: '',
+                isShowTaskList: true,
                 benchDisplayVisible: false,
                 mainSnapshot: "",
                 currentBench: {},
@@ -349,6 +364,12 @@
               },
               taskList: state => {
                   return state.taskList.taskList;
+              },
+              planList: state => {
+                return state.planList.planList;
+              },
+              caseList: state => {
+                return state.caseList.caseList;
               }
           })
         },
@@ -413,6 +434,39 @@
             },3000)
         },
         methods: {
+          clickBackToTaskList() {
+            this.isShowPlanList = false;
+            this.isShowTaskList = true;
+            this.planList = [];
+          },
+          selectRowPlan(row){
+            console.log(row, 'selectrowdata')
+            this.$store.dispatch('caseList/fetchCaseList',{
+                uuid: row.uuid,
+                page_num: 1,
+                page_size: 100
+            })
+            this.isShowPlanList = false;
+            this.isShowCaseList = true;
+            this.planName = '< ' + row.name;
+          },
+          selectRowCase(row)
+          {
+            this.isShowCaseList = false;
+            this.isShowCaseDetail = true;
+            
+            this.caseName = '< ' + row.m_id;
+            this.caseProject = row
+            //this.caseActive =,
+            this.caseFunction = row.function_name
+            //this.caseContent =,
+          },
+          clickBackToPlanList()
+          {
+            this.isShowPlanList = true;
+            this.isShowCaseList = false;
+            this.caseList = [];
+          },
             bmMapItemUnSelect() {
               let items = document.getElementsByClassName('item-box');
               for(var index = 0; index<items.length;index++)
@@ -528,8 +582,20 @@
               console.log('itemtype',itemtype)
               if(itemtype == 2)
               {
-                let url = '/task2?m=8b934420_ZJUb_b6f9'+ "&taskid="+benchId;
-                window.location.href = url;
+                this.$nextTick(() => {
+                //let url = '/task2?m=8b934420_ZJUb_b6f9'+ "&taskid="+benchId;
+                //window.location.href = url;
+                console.log('task id',benchId);
+                this.$store.dispatch('planList/fetchPlanList', {
+                page_num: 1,
+                page_size: 100,
+                task_id: benchId
+                })
+                console.log('test',this.isShowTaskList,this.isShowPlanList);
+                this.isShowTaskList = false;
+                this.isShowPlanList = true;
+                this.taskName = '< ' + benchId
+                console.log('test',this.isShowTaskList,this.isShowPlanList);});
                 return;
               }
               

src/views/task2/list.vue

@@ -11,7 +11,7 @@
                 </el-table>
             </div>
         </div>
-        <div class="plan task-item" v-if="false">
+        <div class="plan task-item">
             <div style="margin-bottom: 1.85vh">< Case Name</div>
             <el-row :gutter="20">
                 <el-col :span=12>
@@ -77,7 +77,7 @@
             <el-button class="cancel-button">Cancel</el-button>
             <el-button class="done-button">Done</el-button>
         </div>
-        <div class="case task-item" v-if="false">
+        <div class="case task-item">
             <div>Plan Name</div>
             <div class="task-title">Project</div>
             <div class="task-content">Active</div>