mirror of
https://github.com/dataease/dataease.git
synced 2025-02-24 11:32:57 +08:00
feat(frontend): 临时提交--数据集->分组，场景ui
This commit is contained in:
junjie
parent
3d143c869a
commit
2890e29e9b
@ -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') }}
|
||||
|
||||
@ -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,
|
||||
]
|
||||
});
|
||||
|
||||
45
frontend/src/business/components/dataset/DataSet.vue
Normal file
45
frontend/src/business/components/dataset/DataSet.vue
Normal file
@ -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>
|
||||
152
frontend/src/business/components/dataset/group/Group.vue
Normal file
152
frontend/src/business/components/dataset/group/Group.vue
Normal file
@ -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>
|
||||
66
frontend/src/business/components/dataset/router.js
Normal file
66
frontend/src/business/components/dataset/router.js
Normal file
@ -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
|
||||
// }
|
||||
]
|
||||
}
|
||||
@ -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'
|
||||
}
|
||||
};
|
||||
|
||||
@ -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:'添加场景'
|
||||
}
|
||||
};
|
||||
|
||||
@ -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:'添加場景'
|
||||
}
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user