From 2890e29e9bbf850e43b0672b15ec96edd6256c35 Mon Sep 17 00:00:00 2001
From: junjie <junjie.xia@fit2cloud.com>
Date: Sat, 20 Feb 2021 15:17:09 +0800
Subject: [PATCH] =?UTF-8?q?feat(frontend):=20=E4=B8=B4=E6=97=B6=E6=8F=90?=
 =?UTF-8?q?=E4=BA=A4--=E6=95=B0=E6=8D=AE=E9=9B=86->=E5=88=86=E7=BB=84?=
 =?UTF-8?q?=EF=BC=8C=E5=9C=BA=E6=99=AFui?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/common/head/HeaderTopMenus.vue |   4 +-
 .../components/common/router/router.js        |   6 +-
 .../business/components/dataset/DataSet.vue   |  45 ++++++
 .../components/dataset/group/Group.vue        | 152 ++++++++++++++++++
 .../src/business/components/dataset/router.js |  66 ++++++++
 frontend/src/i18n/en-US.js                    |   7 +-
 frontend/src/i18n/zh-CN.js                    |   7 +-
 frontend/src/i18n/zh-TW.js                    |   7 +-
 8 files changed, 287 insertions(+), 7 deletions(-)
 create mode 100644 frontend/src/business/components/dataset/DataSet.vue
 create mode 100644 frontend/src/business/components/dataset/group/Group.vue
 create mode 100644 frontend/src/business/components/dataset/router.js

diff --git a/frontend/src/business/components/common/head/HeaderTopMenus.vue b/frontend/src/business/components/common/head/HeaderTopMenus.vue
index 8864d8df1e..aab3357a99 100644
--- a/frontend/src/business/components/common/head/HeaderTopMenus.vue
+++ b/frontend/src/business/components/common/head/HeaderTopMenus.vue
@@ -14,9 +14,9 @@
     <el-menu-item index="/api" @click="active()" v-permission="['test_manager','test_user','test_viewer']">
       {{ $t('commons.api') }}
     </el-menu-item>
-    <el-menu-item index="/performance" onselectstart="return false"
+    <el-menu-item index="/dataset" onselectstart="return false"
                   v-permission="['test_manager','test_user','test_viewer']">
-      {{ $t('commons.performance') }}
+      {{ $t('commons.dataset') }}
     </el-menu-item>
     <el-menu-item index="/setting" onselectstart="return false">
       {{ $t('commons.system_setting') }}
diff --git a/frontend/src/business/components/common/router/router.js b/frontend/src/business/components/common/router/router.js
index a7dbdbce6f..47cfe18eda 100644
--- a/frontend/src/business/components/common/router/router.js
+++ b/frontend/src/business/components/common/router/router.js
@@ -3,7 +3,8 @@ import VueRouter from 'vue-router'
 import RouterSidebar from "./RouterSidebar";
 import Setting from "@/business/components/settings/router";
 import API from "@/business/components/api/router";
-import Performance from "@/business/components/performance/router";
+// import Performance from "@/business/components/performance/router";
+import DataSet from "@/business/components/dataset/router";
 import Track from "@/business/components/track/router";
 
 Vue.use(VueRouter);
@@ -19,7 +20,8 @@ const router = new VueRouter({
     },
     Setting,
     API,
-    Performance,
+    // Performance,
+    DataSet,
     Track,
   ]
 });
diff --git a/frontend/src/business/components/dataset/DataSet.vue b/frontend/src/business/components/dataset/DataSet.vue
new file mode 100644
index 0000000000..20dda22ca0
--- /dev/null
+++ b/frontend/src/business/components/dataset/DataSet.vue
@@ -0,0 +1,45 @@
+<template>
+  <ms-container>
+
+    <ms-aside-container>
+      <group/>
+    </ms-aside-container>
+
+    <ms-main-container>
+      <keep-alive>
+        <router-view/>
+      </keep-alive>
+    </ms-main-container>
+  </ms-container>
+</template>
+
+<script>
+  import MsMainContainer from "../common/components/MsMainContainer";
+  import MsContainer from "../common/components/MsContainer";
+  import MsAsideContainer from "../common/components/MsAsideContainer";
+  import MsSettingMenu from "../settings/SettingMenu";
+  import MsCurrentUser from "../settings/CurrentUser";
+  import Group from "./group/Group";
+
+  export default {
+    name: "DataSet",
+    components: {MsMainContainer, MsContainer, MsAsideContainer, MsSettingMenu, MsCurrentUser, Group},
+    data() {
+      return {}
+    }
+  }
+</script>
+
+<style scoped>
+  .ms-aside-container {
+    height: calc(100vh - 40px);
+    padding: 20px;
+    min-width: 260px;
+    max-width: 460px;
+  }
+
+  .ms-main-container {
+    height: calc(100vh - 40px);
+  }
+
+</style>
diff --git a/frontend/src/business/components/dataset/group/Group.vue b/frontend/src/business/components/dataset/group/Group.vue
new file mode 100644
index 0000000000..ad668f3e85
--- /dev/null
+++ b/frontend/src/business/components/dataset/group/Group.vue
@@ -0,0 +1,152 @@
+<template xmlns:el-col="http://www.w3.org/1999/html">
+  <el-col>
+    <span>
+      {{ $t('dataset.datalist') }}
+    </span>
+    <el-divider/>
+    <el-row>
+      <el-button icon="el-icon-circle-plus" type="primary" size="mini" @click="addGroup">{{$t('dataset.add_group')}}
+      </el-button>
+      <el-button icon="el-icon-document" type="primary" size="mini" @click="addScene">{{$t('dataset.add_scene')}}
+      </el-button>
+    </el-row>
+
+    <el-row style="margin: 12px 0">
+      <el-input
+        size="mini"
+        placeholder="Search"
+        prefix-icon="el-icon-search"
+        v-model="search"
+        clearable>
+      </el-input>
+    </el-row>
+
+    <el-col class="custom-tree-container">
+      <div class="block">
+        <el-tree
+          :data="data"
+          node-key="id"
+          :expand-on-click-node="true">
+      <span class="custom-tree-node" slot-scope="{ node, data }">
+        <span>{{ node.label }}</span>
+        <span>
+          <el-button
+            icon="el-icon-plus"
+            type="text"
+            size="mini"
+            @click="() => append(data)">
+          </el-button>
+          <el-button
+            icon="el-icon-more"
+            type="text"
+            size="mini"
+            @click="() => remove(node, data)">
+          </el-button>
+        </span>
+      </span>
+        </el-tree>
+      </div>
+    </el-col>
+  </el-col>
+</template>
+
+<script>
+  let id = 1000;
+  export default {
+    name: "Group",
+    data() {
+      const data = [{
+        id: 1,
+        label: '一级 1',
+        children: [{
+          id: 4,
+          label: '二级 1-1',
+          children: [{
+            id: 9,
+            label: '三级 1-1-1'
+          }, {
+            id: 10,
+            label: '三级 1-1-2'
+          }]
+        }]
+      }, {
+        id: 2,
+        label: '一级 2',
+        children: [{
+          id: 5,
+          label: '二级 2-1'
+        }, {
+          id: 6,
+          label: '二级 2-2'
+        }]
+      }, {
+        id: 3,
+        label: '一级 3',
+        children: [{
+          id: 7,
+          label: '二级 3-1'
+        }, {
+          id: 8,
+          label: '二级 3-2'
+        }]
+      }];
+      return {
+        search: '',
+        data: JSON.parse(JSON.stringify(data))
+      }
+    },
+    methods: {
+      addGroup() {
+        this.$message(
+          {
+            message: '添加分组',
+            type: 'success'
+          }
+        );
+      },
+
+      addScene() {
+        this.$message(
+          {
+            message: '添加场景',
+            type: 'success'
+          }
+        )
+      },
+
+      append(data) {
+        const newChild = {id: id++, label: 'testtest', children: []};
+        if (!data.children) {
+          this.$set(data, 'children', []);
+        }
+        data.children.push(newChild);
+      },
+
+      remove(node, data) {
+        const parent = node.parent;
+        const children = parent.data.children || parent.data;
+        const index = children.findIndex(d => d.id === data.id);
+        children.splice(index, 1);
+      },
+    }
+  }
+</script>
+
+<style scoped>
+  .el-divider--horizontal {
+    margin: 12px 0
+  }
+
+  .search-input {
+    padding: 12px 0;
+  }
+
+  .custom-tree-node {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 14px;
+    padding-right: 8px;
+  }
+</style>
diff --git a/frontend/src/business/components/dataset/router.js b/frontend/src/business/components/dataset/router.js
new file mode 100644
index 0000000000..ea2324d7cd
--- /dev/null
+++ b/frontend/src/business/components/dataset/router.js
@@ -0,0 +1,66 @@
+
+const DataSet = () => import('@/business/components/dataset/DataSet');
+// const PerformanceTestHome = () => import('@/business/components/performance/home/PerformanceTestHome')
+// const EditPerformanceTest = () => import('@/business/components/performance/test/EditPerformanceTest')
+// const PerformanceTestList = () => import('@/business/components/performance/test/PerformanceTestList')
+// const PerformanceTestReport = () => import('@/business/components/performance/report/PerformanceTestReport')
+// const PerformanceChart = () => import('@/business/components/performance/report/components/PerformanceChart')
+// const PerformanceReportView = () => import('@/business/components/performance/report/PerformanceReportView')
+
+export default {
+  path: "/dataset",
+  name: "dataset",
+  // redirect: "/dataset/home",
+  components: {
+    content: DataSet
+  },
+  children: [
+    // {
+    //   path: 'home',
+    //   name: 'datasetHome',
+    //   component: PerformanceTestHome,
+    // },
+    // {
+    //   path: 'test/create',
+    //   name: "createPerTest",
+    //   component: EditPerformanceTest,
+    // },
+    // {
+    //   path: "test/edit/:testId",
+    //   name: "editPerTest",
+    //   component: EditPerformanceTest,
+    //   props: {
+    //     content: (route) => {
+    //       return {
+    //         ...route.params
+    //       }
+    //     }
+    //   }
+    // },
+    // {
+    //   path: "test/:projectId",
+    //   name: "perPlan",
+    //   component: PerformanceTestList
+    // },
+    // {
+    //   path: "project/:type",
+    //   name: "perProject",
+    //   component: MsProject
+    // },
+    // {
+    //   path: "report/:type",
+    //   name: "perReport",
+    //   component: PerformanceTestReport
+    // },
+    // {
+    //   path: "chart",
+    //   name: "perChart",
+    //   component: PerformanceChart
+    // },
+    // {
+    //   path: "report/view/:reportId",
+    //   name: "perReportView",
+    //   component: PerformanceReportView
+    // }
+  ]
+}
diff --git a/frontend/src/i18n/en-US.js b/frontend/src/i18n/en-US.js
index 423905fd6f..9fcaadd8f9 100644
--- a/frontend/src/i18n/en-US.js
+++ b/frontend/src/i18n/en-US.js
@@ -60,7 +60,7 @@ export default {
     test_resource_pool: 'Resource Pool',
     system_setting: 'Settings',
     api: 'API',
-    performance: 'Performance',
+    dataset: 'DataSet',
     functional: 'Functional test',
     input_content: 'Please enter content',
     create: 'Create',
@@ -1518,5 +1518,10 @@ export default {
     delete_prompt: 'This operation will delete the authentication source, do you want to continue? ',
     title: 'Auth Source',
     auth_name_valid: 'Name does not support special characters',
+  },
+  dataset:{
+    datalist:'Data List',
+    add_group:'Add Group',
+    add_scene:'Add Scene'
   }
 };
diff --git a/frontend/src/i18n/zh-CN.js b/frontend/src/i18n/zh-CN.js
index 59ab7d855b..d96d8029a8 100644
--- a/frontend/src/i18n/zh-CN.js
+++ b/frontend/src/i18n/zh-CN.js
@@ -61,7 +61,7 @@ export default {
     test_resource_pool: '测试资源池',
     system_setting: '系统设置',
     api: '视图',
-    performance: '数据',
+    dataset: '数据',
     functional: '功能测试',
     input_content: '请输入内容',
     create: '新建',
@@ -1521,5 +1521,10 @@ export default {
     delete_prompt: '此操作会删除认证源，是否继续？',
     title: '认证设置',
     auth_name_valid: '名称不支持特殊字符',
+  },
+  dataset:{
+    datalist:'数据列表',
+    add_group:'添加分组',
+    add_scene:'添加场景'
   }
 };
diff --git a/frontend/src/i18n/zh-TW.js b/frontend/src/i18n/zh-TW.js
index 14cb737e8d..31a9cc3a6f 100644
--- a/frontend/src/i18n/zh-TW.js
+++ b/frontend/src/i18n/zh-TW.js
@@ -61,7 +61,7 @@ export default {
     test_resource_pool: '測試資源池',
     system_setting: '系統設置',
     api: '接口測試',
-    performance: '性能測試',
+    dataset: '數據',
     functional: '功能測試',
     input_content: '請輸入內容',
     create: '新建',
@@ -1519,5 +1519,10 @@ export default {
     delete_prompt: '此操作會刪除認證源，是否繼續？ ',
     title: '認證設置',
     auth_name_valid: '名稱不支持特殊字符',
+  },
+  dataset:{
+    datalist:'數據列表',
+    add_group:'添加分組',
+    add_scene:'添加場景'
   }
 };