feat: 增加搜索框实现
1.Config子页面搜索功能 2.project页正在重构，暂时无法访问 3.顶部添加按钮交互改变，点击后不再先跳转页面再弹框（已实现Project、Module）
This commit is contained in:
chenjinsong
@@ -1,7 +1,6 @@
|
||||
<template>
|
||||
<div class="header">
|
||||
<div class="submenu">
|
||||
|
||||
<el-menu
|
||||
class="el-menu-demo"
|
||||
mode="horizontal"
|
||||
@@ -107,6 +106,11 @@
|
||||
</el-popover>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<project-box :project="editProject" @reload="projectReload" ref="projectBox"></project-box>
|
||||
<module-box :currentProject="currentProject" :module="editModule" @reload="" ref="moduleBox"></module-box>
|
||||
<endpoint-box :currentProject="currentProject" :currentModule="currentModule" :endpoint="editEndpoint" @reload="" ref="endpointBox"></endpoint-box>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -117,8 +121,24 @@ export default {
|
||||
return {
|
||||
language: localStorage.getItem("language"),
|
||||
assetData: [],
|
||||
projectData: [],
|
||||
createMenu: [
|
||||
projectData: [], //顶部菜单project列表中的数据
|
||||
editProject: {id: '', name: '', remark: ''}, //新增/编辑的project
|
||||
currentProject: {id: '', name: '', remark: ''}, //module/endpoint弹框用来回显project，此处固定为空对象
|
||||
editModule: {id: '', name: '', project: {}, port: '', path: '', param: '', paramObj: []}, //新增/编辑的module
|
||||
currentModule: {id: '', name: '', project: {}, port: '', path: '', param: '', paramObj: []}, //endpoint弹框用来回显module，此处固定为空对象
|
||||
editEndpoint: { //新增/编辑的endpoint
|
||||
id: '',
|
||||
host: '',
|
||||
port: '',
|
||||
param: '',
|
||||
path: '',
|
||||
asset: {id: '', name: '', host: ''},
|
||||
project: {id: '', name: ''},
|
||||
module: {id: '', name: '', param: '', paramObj: {}, projectId: ''},
|
||||
moduleId: '',
|
||||
assetId: ''
|
||||
},
|
||||
createMenu: [ //新增按钮内容
|
||||
{
|
||||
label: this.$t('project.project.createProject'),
|
||||
url: 'project',
|
||||
@@ -157,7 +177,16 @@ export default {
|
||||
});
|
||||
},
|
||||
createBox(item) {
|
||||
this.jumpTo(item.url);
|
||||
if (item.type == 1) {
|
||||
this.$refs.projectBox.show(true);
|
||||
this.editProject = {id: '', name: '', remark: ''};
|
||||
} else if (item.type == 2) {
|
||||
this.$refs.moduleBox.show(true);
|
||||
this.editModule = {id: '', name: '', project: {}, port: '', path: '', param: '', paramObj: []};
|
||||
} else if (item.type == 3) {
|
||||
this.$refs.endpointBox.show(true);
|
||||
}
|
||||
/*this.jumpTo(item.url);
|
||||
setTimeout(() =>{
|
||||
if (item.type == 1) {
|
||||
if (this.projectData.length > 0) {
|
||||
@@ -179,7 +208,7 @@ export default {
|
||||
this.$store.commit('projectRightBoxShow', false);
|
||||
this.$store.commit('toCreateAlertConfig', true);
|
||||
}
|
||||
}, 120);
|
||||
}, 120);*/
|
||||
},
|
||||
jumpToAsset(data, id) {
|
||||
this.$store.state.assetData.moduleData = data;
|
||||
@@ -202,19 +231,18 @@ export default {
|
||||
})
|
||||
},
|
||||
getProjectData() {
|
||||
this.$get('project', this.pageObj).then(response => {
|
||||
this.$get('project', {}).then(response => {
|
||||
if (response.code == 200) {
|
||||
this.projectData = response.data.list;
|
||||
}
|
||||
})
|
||||
},
|
||||
toEditProject(p) {
|
||||
this.jumpTo('project');
|
||||
setTimeout(() =>{
|
||||
this.$store.commit('setProject', p);
|
||||
this.$store.commit('projectRightBoxShow', true);
|
||||
}, 50);
|
||||
|
||||
this.$refs.projectBox.show(true);
|
||||
this.editProject = Object.assign({}, p);
|
||||
},
|
||||
projectReload() {
|
||||
this.getProjectData();
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
@@ -257,6 +285,7 @@ export default {
|
||||
padding-left: 50%;
|
||||
width: 500px;
|
||||
float: left;
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.header {
|
||||
@@ -264,7 +293,6 @@ export default {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
font-size: 22px;
|
||||
background-color: #ffffff;
|
||||
z-index: 510;
|
||||
box-shadow: 0px 20px 13px -19px #5E5E5E;
|
||||
|
||||
@@ -25,10 +25,12 @@ const en = {
|
||||
confirmDelete: "Confirm Delete?",
|
||||
yes: "Yes",
|
||||
no: "No",
|
||||
deleteSuccess: "Successfully Deleted"
|
||||
deleteSuccess: "Successfully Deleted",
|
||||
saveSuccess: "Successfully Saved"
|
||||
},
|
||||
asset:{
|
||||
createAsset: "Create Asset",
|
||||
asset: 'Asset',
|
||||
tableTitle: {
|
||||
id: 'ID',
|
||||
assetType: '资产类型',
|
||||
|
||||
245
nezha-fronted/src/components/common/rightBox/endpointBox.vue
Normal file
245
nezha-fronted/src/components/common/rightBox/endpointBox.vue
Normal file
@@ -0,0 +1,245 @@
|
||||
<template>
|
||||
<transition name="right-box">
|
||||
<div class="right-box right-box-endpoint" v-if="rightBox.show" @click.stop>
|
||||
<!-- begin--顶部按钮-->
|
||||
<div class="right-box-top-btns">
|
||||
<div class="right-box-top-btn right-box-top-btn-full" @click="esc">
|
||||
<div class="right-box-btn-icon">
|
||||
<i class="el-icon-close"></i>
|
||||
</div>
|
||||
<span>{{$t('overall.esc')}}</span>
|
||||
</div>
|
||||
<div class="right-box-top-btn right-box-top-btn-full" @click="saveOrToEdit">
|
||||
<div class="right-box-btn-icon">
|
||||
<i class="el-icon-edit-outline"></i>
|
||||
</div>
|
||||
<span v-if="rightBox.isEdit">{{$t('overall.save')}}</span>
|
||||
<span v-else>{{$t('overall.edit')}}</span>
|
||||
</div>
|
||||
<div class="right-box-top-btn" v-if="rightBox.isEdit && endpoint.id != ''" @click="del()">
|
||||
<div class="right-box-btn-icon">
|
||||
<i class="el-icon-delete"></i>
|
||||
</div>
|
||||
<span>{{$t('overall.delete')}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end--顶部按钮-->
|
||||
|
||||
<!-- begin--标题-->
|
||||
<div class="right-box-title">{{rightBox.title}}</div>
|
||||
<!-- end--标题-->
|
||||
|
||||
<!-- begin--表单-->
|
||||
<div class="right-box-form">
|
||||
<!--project-->
|
||||
<div class="right-box-form-row">
|
||||
<div class="right-box-form-label">{{$t("project.project.project")}}</div>
|
||||
<div class="right-box-form-content">
|
||||
<el-select @change="((val) => {getToSelectModuleData(val.id)})" value-key="id" popper-class="config-dropdown" v-model="endpoint.project" placeholder="" v-if="rightBox.isEdit" size="small">
|
||||
<el-option v-for="item in projectList" :key="item.id" :label="item.name" :value="item"></el-option>
|
||||
</el-select>
|
||||
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{endpoint.project.name}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--module-->
|
||||
<div class="right-box-form-row">
|
||||
<div class="right-box-form-label">{{$t("project.module.module")}}</div>
|
||||
<div class="right-box-form-content">
|
||||
<el-select @change="((val) => {})" value-key="id" popper-class="config-dropdown" v-model="currentModule" placeholder="" v-if="rightBox.isEdit" size="small">
|
||||
<el-option v-for="item in toSelectModuleData" :key="item.id" :label="item.name" :value="item"></el-option>
|
||||
</el-select>
|
||||
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{endpoint.module.name}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--host-->
|
||||
<div class="right-box-form-row">
|
||||
<div class="right-box-form-label">{{$t("project.endpoint.host")}}</div>
|
||||
<div class="right-box-form-content">
|
||||
<el-input
|
||||
class="right-box-row-with-btn"
|
||||
v-if="rightBox.isEdit"
|
||||
placeholder=""
|
||||
v-model="endpoint.host"
|
||||
size="small"
|
||||
></el-input>
|
||||
<div @click="showSubBox" class="right-box-row-btn right-box-row-btn-active" v-if="rightBox.isEdit">
|
||||
<span class="el-icon-more"></span>
|
||||
</div>
|
||||
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{endpoint.host}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--port-->
|
||||
<div class="right-box-form-row">
|
||||
<div class="right-box-form-label">{{$t("project.endpoint.port")}}</div>
|
||||
<div class="right-box-form-content">
|
||||
<el-input
|
||||
v-if="rightBox.isEdit"
|
||||
placeholder=""
|
||||
v-model="endpoint.port"
|
||||
size="small"
|
||||
></el-input>
|
||||
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{endpoint.port}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--path-->
|
||||
<div class="right-box-form-row">
|
||||
<div class="right-box-form-label">{{$t("project.endpoint.path")}}</div>
|
||||
<div class="right-box-form-content">
|
||||
<el-input
|
||||
v-if="rightBox.isEdit"
|
||||
placeholder=""
|
||||
v-model="endpoint.path"
|
||||
size="small"
|
||||
></el-input>
|
||||
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{endpoint.path}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--param-->
|
||||
<div class="right-box-form-row">
|
||||
<div class="right-box-form-label">
|
||||
{{$t("project.endpoint.param")}}
|
||||
<el-button v-if="rightBox.isEdit" class="param-btn param-btn-active margin-l-10" size="mini" @click="addParam"><i class="el-icon-plus"></i>{{$t('overall.add')}}</el-button>
|
||||
<el-button v-if="rightBox.isEdit" class="param-btn param-btn-clear" size="mini" @click="clearAllParam">{{$t('overall.clearAll')}}</el-button>
|
||||
</div>
|
||||
<div class="right-box-form-content">
|
||||
<div class="param-box param-box-endpoint">
|
||||
<div class="param-box-row" v-for="(item, index) in paramObj">
|
||||
<el-input :disabled="!rightBox.isEdit" placeholder="key" class="param-box-row-key" size="mini" v-model="item.key"></el-input>
|
||||
<span class="param-box-row-eq">=</span>
|
||||
<el-input :disabled="!rightBox.isEdit" placeholder="value" class="param-box-row-value" size="mini" v-model="item.value"></el-input>
|
||||
<span v-if="rightBox.isEdit" class="param-box-row-symbol" @click="removeParam(index)"><i class="el-icon-minus"></i></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end--表单-->
|
||||
|
||||
<!-- begin--底部按钮-->
|
||||
<div class="right-box-bottom-btns">
|
||||
<div @click="esc" :class="{'right-box-bottom-btn-50': rightBox.isEdit}" class="right-box-bottom-btn right-box-bottom-btn-cancel">{{$t('overall.cancel')}}</div><div @click="save()" v-if="rightBox.isEdit" class="right-box-bottom-btn right-box-bottom-btn-50">{{endpoint.id == '' ? $t('overall.create') : $t('overall.save')}}</div>
|
||||
</div>
|
||||
<!-- end--底部按钮-->
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "endpointBox",
|
||||
props: {
|
||||
endpoint: Object,
|
||||
currentProject: Object,
|
||||
currentModule: Object
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 清除param
|
||||
clearAllParam: function() {
|
||||
this.module.paramObj = [];
|
||||
},
|
||||
|
||||
// 新增param
|
||||
addParam: function() {
|
||||
this.module.paramObj.push({key: '', value: ''});
|
||||
},
|
||||
|
||||
// 移除单个param
|
||||
removeParam: function(index) {
|
||||
this.module.paramObj.splice(index, 1);
|
||||
},
|
||||
|
||||
//将param转为json字符串格式
|
||||
paramToJson: function(param) {
|
||||
let tempParam = {};
|
||||
for (let i = 0; i < param.length; i++) {
|
||||
eval('tempParam.' + param[i].key + '="' + param[i].value + '"');
|
||||
}
|
||||
let jsonString = JSON.stringify(tempParam);
|
||||
if (jsonString == '{}') {
|
||||
return "";
|
||||
} else {
|
||||
return jsonString;
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* start--param*/
|
||||
.param-btn {
|
||||
float: right;
|
||||
height: 27px;
|
||||
margin-top: -3px;
|
||||
}
|
||||
.param-btn-active {
|
||||
background-color: #656565;
|
||||
color: white;
|
||||
border: 1px solid #656565;
|
||||
}
|
||||
.param-btn-active:hover, .param-btn-active:focus {
|
||||
background-color: #656565;
|
||||
color: white;
|
||||
}
|
||||
.param-btn-clear {
|
||||
background-color: #D4D4D4;
|
||||
border: 1px solid #D4D4D4;
|
||||
color: white;
|
||||
}
|
||||
.param-btn-clear:hover, .param-btn-clear:focus {
|
||||
background-color: #D4D4D4;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.param-box {
|
||||
border: 1px solid #DCDFE6;
|
||||
border-radius: 4px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
.param-box-endpoint {
|
||||
height: 325px;
|
||||
}
|
||||
.param-box-module {
|
||||
height: 227px;
|
||||
}
|
||||
.param-box-row {
|
||||
padding: 7px 0 0 0;
|
||||
position: relative;
|
||||
}
|
||||
.param-box-row:last-of-type {
|
||||
padding-bottom: 7px;
|
||||
}
|
||||
.param-box-row-key, .param-box-row-value {
|
||||
display: inline-block;
|
||||
width: 41.5%;
|
||||
}
|
||||
.param-box-row-eq {
|
||||
display: inline-block;
|
||||
width: 22px;
|
||||
text-align: center;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
color: #c4c7cF;
|
||||
}
|
||||
.param-box-row-symbol {
|
||||
font-size: 12px;
|
||||
color: #c4c7cF;
|
||||
border: 1px solid #c4c7cF;
|
||||
text-align: center;
|
||||
height: 12px;
|
||||
width: 14px;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 17px;
|
||||
right: 25px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.param-box-row-symbol>i {
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
right: 1px;
|
||||
}
|
||||
/* end--param*/
|
||||
</style>
|
||||
322
nezha-fronted/src/components/common/rightBox/moduleBox.vue
Normal file
322
nezha-fronted/src/components/common/rightBox/moduleBox.vue
Normal file
@@ -0,0 +1,322 @@
|
||||
<template>
|
||||
<transition name="right-box">
|
||||
<div class="right-box right-box-endpoint" v-if="rightBox.show" @click.stop>
|
||||
<el-scrollbar style="height: 100%">
|
||||
<!-- begin--顶部按钮-->
|
||||
<div class="right-box-top-btns">
|
||||
<div class="right-box-top-btn right-box-top-btn-full" @click="esc">
|
||||
<div class="right-box-btn-icon">
|
||||
<i class="el-icon-close"></i>
|
||||
</div>
|
||||
<span>{{$t('overall.esc')}}</span>
|
||||
</div>
|
||||
<div class="right-box-top-btn right-box-top-btn-full" @click="save">
|
||||
<div class="right-box-btn-icon">
|
||||
<i class="el-icon-edit-outline"></i>
|
||||
</div>
|
||||
<span>{{$t('overall.save')}}</span>
|
||||
</div>
|
||||
<div class="right-box-top-btn" v-if="module.id != ''" @click="del">
|
||||
<div class="right-box-btn-icon">
|
||||
<i class="el-icon-delete"></i>
|
||||
</div>
|
||||
<span>{{$t('overall.delete')}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end--顶部按钮-->
|
||||
|
||||
<!-- begin--标题-->
|
||||
<div class="right-box-title">{{rightBox.title}}</div>
|
||||
<!-- end--标题-->
|
||||
|
||||
<!-- begin--表单-->
|
||||
<div class="right-box-form">
|
||||
<!--project-->
|
||||
<div class="right-box-form-row">
|
||||
<div class="right-box-form-label">{{$t("project.project.project")}}</div>
|
||||
<div class="right-box-form-content">
|
||||
<el-select value-key="id" popper-class="config-dropdown" v-model="module.project" placeholder="" size="small">
|
||||
<el-option v-for="item in projectList" :key="item.id" :label="item.name" :value="item"></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
<!--name-->
|
||||
<div class="right-box-form-row">
|
||||
<div class="right-box-form-label">{{$t("project.module.moduleName")}}</div>
|
||||
<div class="right-box-form-content">
|
||||
<el-input placeholder="" maxlength="64" show-word-limit v-model="module.name" size="small"></el-input>
|
||||
</div>
|
||||
</div>
|
||||
<!--description-->
|
||||
<div class="right-box-form-row">
|
||||
<div class="right-box-form-label">{{$t("project.module.description")}}</div>
|
||||
<div class="right-box-form-content">
|
||||
<el-input type="textarea" placeholder="" maxlength="1024" show-word-limit v-model="module.remark" size="small"></el-input>
|
||||
</div>
|
||||
</div>
|
||||
<!--tip-->
|
||||
<div class="right-box-form-row">
|
||||
<div class="right-box-form-content">
|
||||
<div class="right-box-form-tip">
|
||||
{{$t('project.module.tip.defaultEndpointSet')}}
|
||||
<div class="line-100"></div>
|
||||
{{$t('project.module.tip.relation')}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--port-->
|
||||
<div class="right-box-form-row">
|
||||
<div class="right-box-form-label">{{$t("project.endpoint.port")}}</div>
|
||||
<div class="right-box-form-content">
|
||||
<el-input placeholder="" v-model="module.port" size="small"></el-input>
|
||||
</div>
|
||||
</div>
|
||||
<!--path-->
|
||||
<div class="right-box-form-row">
|
||||
<div class="right-box-form-label">{{$t("project.endpoint.path")}}</div>
|
||||
<div class="right-box-form-content">
|
||||
<el-input placeholder="" v-model="module.path" size="small"></el-input>
|
||||
</div>
|
||||
</div>
|
||||
<!--param-->
|
||||
<div class="right-box-form-row">
|
||||
<div class="right-box-form-label">
|
||||
{{$t("project.endpoint.param")}}
|
||||
<el-button class="param-btn param-btn-active margin-l-10" size="mini" @click="addParam"><i class="el-icon-plus"></i>{{$t('overall.add')}}</el-button>
|
||||
<el-button class="param-btn param-btn-clear" size="mini" @click="clearAllParam">{{$t('overall.clearAll')}}</el-button>
|
||||
</div>
|
||||
<div class="right-box-form-content">
|
||||
<div class="param-box param-box-module">
|
||||
<div class="param-box-row" v-for="(item, index) in module.paramObj">
|
||||
<el-input placeholder="key" class="param-box-row-key" size="mini" v-model="item.key"></el-input>
|
||||
<span class="param-box-row-eq">=</span>
|
||||
<el-input placeholder="value" class="param-box-row-value" size="mini" v-model="item.value"></el-input>
|
||||
<span class="param-box-row-symbol" @click="removeParam(index)"><i class="el-icon-minus"></i></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- begin--底部按钮-->
|
||||
<div class="right-box-bottom-btns">
|
||||
<div @click="esc" class="right-box-bottom-btn right-box-bottom-btn-cancel right-box-bottom-btn-50">{{$t('overall.cancel')}}</div><div @click="save" class="right-box-bottom-btn right-box-bottom-btn-50">{{module.id == '' ? $t('overall.create') : $t('overall.save')}}</div>
|
||||
</div>
|
||||
<!-- end--底部按钮-->
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "moduleBox",
|
||||
props: {
|
||||
module: Object,
|
||||
currentProject: Object
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
rightBox: {
|
||||
show: false,
|
||||
title: ''
|
||||
},
|
||||
projectList: [],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
show(show) {
|
||||
this.rightBox.show = show;
|
||||
},
|
||||
|
||||
/*关闭弹框*/
|
||||
esc() {
|
||||
this.rightBox.show = false;
|
||||
},
|
||||
|
||||
/*保存*/
|
||||
save() {
|
||||
this.module.param = this.paramToJson(this.module.paramObj);
|
||||
if (this.module.id) {
|
||||
this.$put('module', this.module).then(response => {
|
||||
if (response.code === 200) {
|
||||
this.$message({duration: 3000, type: 'success', message: this.$t("tip.saveSuccess")});
|
||||
this.$emit("reload");
|
||||
this.rightBox.show = false;
|
||||
} else {
|
||||
this.$message.error(response.msg);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.module.projectId = this.module.project.id;
|
||||
this.$post('module', this.module).then(response => {
|
||||
if (response.code === 200) {
|
||||
this.$message({duration: 3000, type: 'success', message: this.$t("tip.saveSuccess")});
|
||||
this.$emit("reload");
|
||||
this.rightBox.show = false;
|
||||
} else {
|
||||
this.$message.error(response.msg);
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
/*删除*/
|
||||
del() {
|
||||
this.$confirm(this.$t("tip.confirmDelete"), {
|
||||
confirmButtonText: this.$t("tip.yes"),
|
||||
cancelButtonText: this.$t("tip.no"),
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.$delete("project?ids=" + this.project.id).then(response => {
|
||||
if (response.code === 200) {
|
||||
this.$message({duration: 3000, type: 'success', message: this.$t("tip.deleteSuccess")});
|
||||
this.rightBox.show = false;
|
||||
this.$emit("reload");
|
||||
} else {
|
||||
this.$message.error(response.msg);
|
||||
}
|
||||
})
|
||||
});
|
||||
},
|
||||
|
||||
/*获取project列表*/
|
||||
getProjectList: function() {
|
||||
this.$get('project', {pageSize: 999, pageNo: 1}).then(response => {
|
||||
if (response.code === 200) {
|
||||
this.projectList = response.data.list;
|
||||
if (this.currentProject && this.currentProject.id) {
|
||||
for (let i = 0; i < this.projectList.length; i++) {
|
||||
if (this.projectList[i].id == this.currentProject.id) {
|
||||
this.currentProject = this.projectList[i];
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 清除param
|
||||
clearAllParam: function() {
|
||||
this.module.paramObj = [];
|
||||
},
|
||||
|
||||
// 新增param
|
||||
addParam: function() {
|
||||
this.module.paramObj.push({key: '', value: ''});
|
||||
},
|
||||
|
||||
// 移除单个param
|
||||
removeParam: function(index) {
|
||||
this.module.paramObj.splice(index, 1);
|
||||
},
|
||||
|
||||
//将param转为json字符串格式
|
||||
paramToJson: function(param) {
|
||||
let tempParam = {};
|
||||
for (let i = 0; i < param.length; i++) {
|
||||
eval('tempParam.' + param[i].key + '="' + param[i].value + '"');
|
||||
}
|
||||
let jsonString = JSON.stringify(tempParam);
|
||||
if (jsonString == '{}') {
|
||||
return "";
|
||||
} else {
|
||||
return jsonString;
|
||||
}
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getProjectList();
|
||||
},
|
||||
watch: {
|
||||
module: {
|
||||
immediate: true,
|
||||
handler(n, o) {
|
||||
if (n && n.id) {
|
||||
this.rightBox.title = this.$t("project.module.editModule") + " ID：" + n.id;
|
||||
} else {
|
||||
this.rightBox.title = this.$t("project.module.createModule");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* start--param*/
|
||||
.param-btn {
|
||||
float: right;
|
||||
height: 27px;
|
||||
margin-top: -3px;
|
||||
}
|
||||
.param-btn-active {
|
||||
background-color: #656565;
|
||||
color: white;
|
||||
border: 1px solid #656565;
|
||||
}
|
||||
.param-btn-active:hover, .param-btn-active:focus {
|
||||
background-color: #656565;
|
||||
color: white;
|
||||
}
|
||||
.param-btn-clear {
|
||||
background-color: #D4D4D4;
|
||||
border: 1px solid #D4D4D4;
|
||||
color: white;
|
||||
}
|
||||
.param-btn-clear:hover, .param-btn-clear:focus {
|
||||
background-color: #D4D4D4;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.param-box {
|
||||
border: 1px solid #DCDFE6;
|
||||
border-radius: 4px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
.param-box-endpoint {
|
||||
height: 325px;
|
||||
}
|
||||
.param-box-module {
|
||||
height: 227px;
|
||||
}
|
||||
.param-box-row {
|
||||
padding: 7px 0 0 0;
|
||||
position: relative;
|
||||
}
|
||||
.param-box-row:last-of-type {
|
||||
padding-bottom: 7px;
|
||||
}
|
||||
.param-box-row-key, .param-box-row-value {
|
||||
display: inline-block;
|
||||
width: 41.5%;
|
||||
}
|
||||
.param-box-row-eq {
|
||||
display: inline-block;
|
||||
width: 22px;
|
||||
text-align: center;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
color: #c4c7cF;
|
||||
}
|
||||
.param-box-row-symbol {
|
||||
font-size: 12px;
|
||||
color: #c4c7cF;
|
||||
border: 1px solid #c4c7cF;
|
||||
text-align: center;
|
||||
height: 12px;
|
||||
width: 14px;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 17px;
|
||||
right: 25px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.param-box-row-symbol>i {
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
right: 1px;
|
||||
}
|
||||
/* end--param*/
|
||||
</style>
|
||||
144
nezha-fronted/src/components/common/rightBox/projectBox.vue
Normal file
144
nezha-fronted/src/components/common/rightBox/projectBox.vue
Normal file
@@ -0,0 +1,144 @@
|
||||
<template>
|
||||
<transition name="right-box">
|
||||
<div class="right-box right-box-endpoint" v-if="rightBox.show" @click.stop>
|
||||
<!-- begin--顶部按钮-->
|
||||
<div class="right-box-top-btns">
|
||||
<div class="right-box-top-btn right-box-top-btn-full" @click="esc">
|
||||
<div class="right-box-btn-icon">
|
||||
<i class="el-icon-close"></i>
|
||||
</div>
|
||||
<span>{{$t('overall.esc')}}</span>
|
||||
</div>
|
||||
<div class="right-box-top-btn right-box-top-btn-full" @click="save">
|
||||
<div class="right-box-btn-icon">
|
||||
<i class="el-icon-edit-outline"></i>
|
||||
</div>
|
||||
<span>{{$t('overall.save')}}</span>
|
||||
</div>
|
||||
<div class="right-box-top-btn" v-if="project.id != ''" @click="del">
|
||||
<div class="right-box-btn-icon">
|
||||
<i class="el-icon-delete"></i>
|
||||
</div>
|
||||
<span>{{$t('overall.delete')}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end--顶部按钮-->
|
||||
|
||||
<!-- begin--标题-->
|
||||
<div class="right-box-title">{{rightBox.title}}</div>
|
||||
<!-- end--标题-->
|
||||
|
||||
<!-- begin--表单-->
|
||||
<div class="right-box-form">
|
||||
<!--name-->
|
||||
<div class="right-box-form-row">
|
||||
<div class="right-box-form-label">{{$t("project.project.projectName")}}</div>
|
||||
<div class="right-box-form-content">
|
||||
<el-input placeholder="" maxlength="64" show-word-limit v-model="project.name" size="small"></el-input>
|
||||
</div>
|
||||
</div>
|
||||
<!--description-->
|
||||
<div class="right-box-form-row">
|
||||
<div class="right-box-form-label">{{$t("project.project.description")}}</div>
|
||||
<div class="right-box-form-content">
|
||||
<el-input type="textarea" placeholder="" maxlength="1024" show-word-limit v-model="project.remark" size="small"></el-input>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- begin--底部按钮-->
|
||||
<div class="right-box-bottom-btns">
|
||||
<div @click="esc" class="right-box-bottom-btn right-box-bottom-btn-cancel right-box-bottom-btn-50">{{$t('overall.cancel')}}</div><div @click="save" class="right-box-bottom-btn right-box-bottom-btn-50">{{project.id == '' ? $t('overall.create') : $t('overall.save')}}</div>
|
||||
</div>
|
||||
<!-- end--底部按钮-->
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "projectBox",
|
||||
props: {
|
||||
project: Object
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
rightBox: {
|
||||
show: false,
|
||||
title: '',
|
||||
isCreate: false
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
show(show) {
|
||||
this.rightBox.show = show;
|
||||
},
|
||||
|
||||
/*关闭弹框*/
|
||||
esc() {
|
||||
this.rightBox.show = false;
|
||||
},
|
||||
|
||||
/*保存*/
|
||||
save() {
|
||||
if (this.project.id) {
|
||||
this.$put('project', this.project).then(response => {
|
||||
if (response.code === 200) {
|
||||
this.$message({duration: 3000, type: 'success', message: this.$t("tip.saveSuccess")});
|
||||
this.$emit("reload");
|
||||
this.rightBox.show = false;
|
||||
} else {
|
||||
this.$message.error(response.msg);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.$post('project', this.project).then(response => {
|
||||
if (response.code === 200) {
|
||||
this.$message({duration: 3000, type: 'success', message: this.$t("tip.saveSuccess")});
|
||||
this.$emit("reload");
|
||||
this.rightBox.show = false;
|
||||
} else {
|
||||
this.$message.error(response.msg);
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
/*删除*/
|
||||
del() {
|
||||
this.$confirm(this.$t("tip.confirmDelete"), {
|
||||
confirmButtonText: this.$t("tip.yes"),
|
||||
cancelButtonText: this.$t("tip.no"),
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.$delete("project?ids=" + this.project.id).then(response => {
|
||||
if (response.code === 200) {
|
||||
this.$message({duration: 3000, type: 'success', message: this.$t("tip.deleteSuccess")});
|
||||
this.rightBox.show = false;
|
||||
this.$emit("reload");
|
||||
} else {
|
||||
this.$message.error(response.msg);
|
||||
}
|
||||
})
|
||||
});
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
project: {
|
||||
immediate: true,
|
||||
handler(n, o) {
|
||||
if (n && n.id) {
|
||||
this.rightBox.title = this.$t("project.project.editProject") + " ID：" + n.id;
|
||||
} else {
|
||||
this.rightBox.title = this.$t("project.project.createProject");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -215,7 +215,8 @@
|
||||
//dc
|
||||
selectDc(column, selectItem, e) {
|
||||
this.stop_click(e);
|
||||
this.searchLabelList.forEach(val=>{
|
||||
this.select_list.forEach(val=>{
|
||||
console.info(val)
|
||||
if(val.type == 'dc'){
|
||||
val.val = selectItem.name;
|
||||
val.valnum = selectItem.id;
|
||||
|
||||
@@ -58,12 +58,7 @@
|
||||
<span><i class="el-icon-plus"></i></span>
|
||||
<span class="top-tool-btn-txt">{{$t('overall.add')}}</span>
|
||||
</el-button>
|
||||
<el-input
|
||||
class="top-tool-search top-tool top-tool-right"
|
||||
type="text"
|
||||
:placeholder="$t('overall.search')"
|
||||
size="mini"
|
||||
></el-input>
|
||||
<div class="top-tool-search top-tool top-tool-right"><search-input :searchMsg="searchMsg" @search="search"></search-input></div>
|
||||
</div>
|
||||
<el-table
|
||||
:data="tableData"
|
||||
@@ -329,7 +324,32 @@ export default {
|
||||
id: '6',
|
||||
name: '小组6',
|
||||
description: '小组6desc'
|
||||
}]
|
||||
}],
|
||||
searchMsg: { //给搜索框子组件传递的信息
|
||||
zheze_none: true,
|
||||
searchLabelList: [/*{
|
||||
id: 1,
|
||||
name: 'ID',
|
||||
type: 'input',
|
||||
label: 'userId',
|
||||
disabled: false
|
||||
},*/{
|
||||
id: 10,
|
||||
name: this.$t('config.account.account'),
|
||||
type: 'input',
|
||||
label: 'username',
|
||||
disabled: false
|
||||
}/*,{
|
||||
id: 11,
|
||||
name: 'E-mail',
|
||||
type: 'input',
|
||||
label: 'email',
|
||||
disabled: false
|
||||
}*/],
|
||||
},
|
||||
searchLabel: { //搜索参数
|
||||
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
@@ -348,7 +368,9 @@ export default {
|
||||
this.rightBox.show = true;
|
||||
},
|
||||
getTableData: function() {
|
||||
this.$get('sys/user/list', this.pageObj).then(response => {
|
||||
this.$set(this.searchLabel, "pageNo", this.pageObj.pageNo);
|
||||
this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize);
|
||||
this.$get('sys/user/list', this.searchLabel).then(response => {
|
||||
if (response.code === 200) {
|
||||
for (var i = 0; i < response.data.list.length; i++) {
|
||||
response.data.list[i].status = response.data.list[i].status + "";
|
||||
@@ -455,6 +477,15 @@ export default {
|
||||
pageSize(val) {
|
||||
this.pageObj.pageSize = val;
|
||||
this.getTableData();
|
||||
},
|
||||
search: function(searchObj) {
|
||||
this.searchLabel = {};
|
||||
for (let item in searchObj) {
|
||||
if (searchObj[item]) {
|
||||
this.$set(this.searchLabel, item, searchObj[item]);
|
||||
}
|
||||
}
|
||||
this.getTableData();
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
@@ -258,12 +258,7 @@
|
||||
<span class="top-tool-btn-txt">{{$t('project.metrics.metrics')}}</span>
|
||||
</el-button>
|
||||
</el-button-group>
|
||||
<el-input
|
||||
class="top-tool-search top-tool top-tool-right"
|
||||
type="text"
|
||||
:placeholder="$t('overall.search')"
|
||||
size="mini"
|
||||
></el-input>
|
||||
<div class="top-tool-search top-tool top-tool-right"><search-input :searchMsg="searchMsg" @search="search"></search-input></div>
|
||||
</div>
|
||||
<el-table
|
||||
:data="metricsTableData"
|
||||
@@ -300,12 +295,7 @@
|
||||
<span><i class="el-icon-plus"></i></span>
|
||||
<span class="top-tool-btn-txt">{{$t('overall.add')}}</span>
|
||||
</el-button>
|
||||
<el-input
|
||||
class="top-tool-search top-tool top-tool-right"
|
||||
type="text"
|
||||
:placeholder="$t('overall.search')"
|
||||
size="mini"
|
||||
></el-input>
|
||||
<div class="top-tool-search top-tool top-tool-right"><search-input :searchMsg="searchMsg" @search="search"></search-input></div>
|
||||
</div>
|
||||
<el-table
|
||||
:data="endPointTableData"
|
||||
@@ -776,6 +766,37 @@ export default {
|
||||
id: '',
|
||||
host: '',
|
||||
sn: ''
|
||||
},
|
||||
searchMsg: { //给搜索框子组件传递的信息
|
||||
zheze_none: true,
|
||||
searchLabelList: [{
|
||||
id: 1,
|
||||
name: 'ID',
|
||||
type: 'input',
|
||||
label: 'id',
|
||||
disabled: false
|
||||
},{
|
||||
id: 12,
|
||||
name: this.$t('project.project.project'),
|
||||
type: 'project',
|
||||
label: 'project',
|
||||
disabled: false
|
||||
},{
|
||||
id: 13,
|
||||
name: this.$t('project.module.module'),
|
||||
type: 'module',
|
||||
label: 'module',
|
||||
disabled: false
|
||||
},{
|
||||
id: 14,
|
||||
name: this.$t('asset.asset'),
|
||||
type: 'asset',
|
||||
label: 'asset',
|
||||
disabled: false
|
||||
}],
|
||||
},
|
||||
searchLabel: { //搜索参数
|
||||
|
||||
},
|
||||
endpointTableTitle: [
|
||||
{
|
||||
@@ -850,8 +871,10 @@ export default {
|
||||
},
|
||||
// table数据
|
||||
getEndPointTableData: function() {
|
||||
this.$set(this.pageObj, 'moduleId', this.currentModule.id);
|
||||
this.$get('endpoint', this.pageObj).then(response => {
|
||||
this.$set(this.searchLabel, "pageNo", this.pageObj.pageNo);
|
||||
this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize);
|
||||
this.$set(this.searchLabel, 'moduleId', this.currentModule.id);
|
||||
this.$get('endpoint', this.searchLabel).then(response => {
|
||||
if (response.code === 200) {
|
||||
for (var i = 0; i < response.data.list.length; i++) {
|
||||
try {
|
||||
@@ -928,7 +951,7 @@ export default {
|
||||
this.moduleData = response.data.list;
|
||||
for (let i = 0; i < response.data.list.length; i++) {
|
||||
try {
|
||||
var tempObj = JSON.parse(response.data.list[i].param);
|
||||
let tempObj = JSON.parse(response.data.list[i].param);
|
||||
} catch (err) {
|
||||
console.info(response.data.list[i]);
|
||||
console.info(err);
|
||||
@@ -1246,6 +1269,15 @@ export default {
|
||||
dropdownSelect: function(label) {
|
||||
this.assetSearch.label = label;
|
||||
this.assetSearch.dropdownShow = false;
|
||||
},
|
||||
search: function(searchObj) {
|
||||
this.searchLabel = {};
|
||||
for (let item in searchObj) {
|
||||
if (searchObj[item]) {
|
||||
this.$set(this.searchLabel, item, searchObj[item]);
|
||||
}
|
||||
}
|
||||
this.getEndPointTableData();
|
||||
}
|
||||
},
|
||||
created: function() {
|
||||
|
||||
372
nezha-fronted/src/components/page/project/project2.vue
Normal file
372
nezha-fronted/src/components/page/project/project2.vue
Normal file
@@ -0,0 +1,372 @@
|
||||
<template>
|
||||
<div class="project">
|
||||
<div class="content-left">
|
||||
<div class="sidebar-title">{{currentProject.name}}</div>
|
||||
<div class="sidebar-info">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-right">
|
||||
<div class="top-tools">
|
||||
<el-button-group>
|
||||
<el-button @click="" class="top-tool-btn top-tool top-tool-btn-active" size="mini">
|
||||
<span class="top-tool-btn-txt">{{$t('project.endpoint.endpoint')}}</span>
|
||||
</el-button>
|
||||
<el-button @click="" class="top-tool-btn top-tool" size="mini">
|
||||
<span class="top-tool-btn-txt">{{$t('project.metrics.metrics')}}</span>
|
||||
</el-button>
|
||||
</el-button-group>
|
||||
<el-button @click.stop="toAdd" class="top-tool-btn top-tool-btn-active top-tool margin-l-10 top-tool-right" size="mini">
|
||||
<span><i class="el-icon-plus"></i></span>
|
||||
<span class="top-tool-btn-txt">{{$t('overall.add')}}</span>
|
||||
</el-button>
|
||||
<div class="top-tool-search top-tool top-tool-right"></div>
|
||||
</div>
|
||||
<el-table
|
||||
:data="endpointTableData"
|
||||
border
|
||||
height="calc(100% - 65px)"
|
||||
style="width: 100%;">
|
||||
<el-table-column
|
||||
v-for="(item, index) in endpointTableTitle"
|
||||
v-if="item.show"
|
||||
:width="item.width"
|
||||
:key="`col-${index}`"
|
||||
:label="item.label"
|
||||
>
|
||||
<template slot-scope="scope" :column="item">
|
||||
<span v-if="item.prop == 'asset'">{{scope.row[item.prop].host}}</span>
|
||||
<span v-else>{{scope.row[item.prop]}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="$t('overall.option')" width="100">
|
||||
<template slot-scope="scope" :column="item">
|
||||
<div class="content-right-options">
|
||||
<span @click.stop="detail(scope.row)" class="content-right-option"><i class="el-icon-view"></i></span>
|
||||
<span @click.stop="toEdit(scope.row)" class="content-right-option"><i class="el-icon-edit-outline"></i></span>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<Pagination :pageObj="endpointPageObj" @pageNo='endpointPageNo' @pageSize='endpointPageSize' ref="Pagination"></Pagination>
|
||||
</div>
|
||||
|
||||
<module-box :currentProject="currentProject" :module="editModule" @reload="" ref="moduleBox"></module-box>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import projectBox from '../../common/rightBox/projectBox';
|
||||
export default {
|
||||
name: "project2",
|
||||
data() {
|
||||
return {
|
||||
endpoint: {id: '', host: '', port: '', param: '', path: '', asset: {}, project: {}, module: {}, moduleId: '', assetId: ''},
|
||||
endpointTableTitle: [
|
||||
{
|
||||
label: this.$t("project.endpoint.endpointId"),
|
||||
prop: 'id',
|
||||
show: true,
|
||||
width: 110
|
||||
},{
|
||||
label: this.$t("project.endpoint.host"),
|
||||
prop: 'host',
|
||||
show: true,
|
||||
},{
|
||||
label: this.$t("project.endpoint.port"),
|
||||
prop: 'port',
|
||||
show: true,
|
||||
},{
|
||||
label: this.$t("project.endpoint.param"),
|
||||
prop: 'param',
|
||||
show: true,
|
||||
},{
|
||||
label: this.$t("project.endpoint.path"),
|
||||
prop: 'path',
|
||||
show: true,
|
||||
},{
|
||||
label: this.$t("project.endpoint.asset"),
|
||||
prop: 'asset',
|
||||
show: true,
|
||||
}
|
||||
],
|
||||
endpointTableData: [],
|
||||
endpointPageObj: {
|
||||
pageNo: 1,
|
||||
pageSize: 20,
|
||||
total:0
|
||||
},
|
||||
moduleList: [],
|
||||
currentProject: {id: '', name: '', remark: ''}, //endpoint弹框、module列表用来回显project
|
||||
editModule: {id: '', name: '', project: {}, port: '', path: '', param: '', paramObj: []}, //编辑的module
|
||||
currentModule: {id: '', name: '', project: {}, port: '', path: '', param: '', paramObj: []}, //endpoint弹框用来回显module
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getEndPointTableData() {
|
||||
this.$get('endpoint', this.endpointPageObj).then(response => {
|
||||
if (response.code === 200) {
|
||||
for (let i = 0; i < response.data.list.length; i++) {
|
||||
try {
|
||||
var tempObj = JSON.parse(response.data.list[i].param);
|
||||
} catch (err) {
|
||||
console.info(response.data.list[i]);
|
||||
console.info(err);
|
||||
}
|
||||
response.data.list[i].paramObj = [];
|
||||
for (let k in tempObj) {
|
||||
response.data.list[i].paramObj.push({key: k, value: tempObj[k]})
|
||||
}
|
||||
}
|
||||
this.endpointTableData = response.data.list;
|
||||
this.endpointPageObj.total = response.data.total;
|
||||
}
|
||||
});
|
||||
},
|
||||
endpointPageNo(val) {
|
||||
this.endpointPageObj.pageNo = val;
|
||||
this.getEndPointTableData();
|
||||
},
|
||||
endpointPageSize(val) {
|
||||
this.endpointPageObj.pageSize = val;
|
||||
this.getEndPointTableData();
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getEndPointTableData();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.project {
|
||||
height: 100%;
|
||||
}
|
||||
.content-right-option {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
margin-right: 6px;
|
||||
}
|
||||
.content-right-option .el-icon-delete {
|
||||
color: #F98D9A;
|
||||
}
|
||||
.content-right-option .el-icon-delete:hover {
|
||||
color: #D96D7A;
|
||||
}
|
||||
.content-right-option .el-icon-view {
|
||||
color: #60BEFF;
|
||||
}
|
||||
.content-right-option .el-icon-view:hover {
|
||||
color: #409EFF;
|
||||
}
|
||||
|
||||
/* start--param*/
|
||||
.param-btn {
|
||||
float: right;
|
||||
height: 27px;
|
||||
margin-top: -3px;
|
||||
}
|
||||
.param-btn-active {
|
||||
background-color: #656565;
|
||||
color: white;
|
||||
border: 1px solid #656565;
|
||||
}
|
||||
.param-btn-active:hover, .param-btn-active:focus {
|
||||
background-color: #656565;
|
||||
color: white;
|
||||
}
|
||||
.param-btn-clear {
|
||||
background-color: #D4D4D4;
|
||||
border: 1px solid #D4D4D4;
|
||||
color: white;
|
||||
}
|
||||
.param-btn-clear:hover, .param-btn-clear:focus {
|
||||
background-color: #D4D4D4;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.param-box {
|
||||
border: 1px solid #DCDFE6;
|
||||
border-radius: 4px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
.param-box-endpoint {
|
||||
height: 325px;
|
||||
}
|
||||
.param-box-module {
|
||||
height: 227px;
|
||||
}
|
||||
.param-box-row {
|
||||
padding: 7px 0 0 0;
|
||||
position: relative;
|
||||
}
|
||||
.param-box-row:last-of-type {
|
||||
padding-bottom: 7px;
|
||||
}
|
||||
.param-box-row-key, .param-box-row-value {
|
||||
display: inline-block;
|
||||
width: 41.5%;
|
||||
}
|
||||
.param-box-row-eq {
|
||||
display: inline-block;
|
||||
width: 22px;
|
||||
text-align: center;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
color: #c4c7cF;
|
||||
}
|
||||
.param-box-row-symbol {
|
||||
font-size: 12px;
|
||||
color: #c4c7cF;
|
||||
border: 1px solid #c4c7cF;
|
||||
text-align: center;
|
||||
height: 12px;
|
||||
width: 14px;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 17px;
|
||||
right: 25px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.param-box-row-symbol>i {
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
right: 1px;
|
||||
}
|
||||
/* end--param*/
|
||||
|
||||
/* begin--子弹框*/
|
||||
.right-sub-box {
|
||||
width: 380px;
|
||||
height: 520px;
|
||||
position: absolute;
|
||||
top: 380px;
|
||||
right: 100px;
|
||||
z-index: 2;
|
||||
padding: 0 10px;
|
||||
}
|
||||
.right-sub-box .el-input-group {
|
||||
width: 227px;
|
||||
float: right;
|
||||
margin: 7px 0 0 0;
|
||||
}
|
||||
/* begin--搜索框*/
|
||||
.endpoint-asset-prepend {
|
||||
border-radius: 4px 0 0 4px;
|
||||
}
|
||||
.endpoint-asset-label {
|
||||
line-height: 26px;
|
||||
height: 26px;
|
||||
}
|
||||
.endpoint-asset-dropdown {
|
||||
position: absolute;
|
||||
top: 27px;
|
||||
background-color: #656565;
|
||||
border-radius: 4px;
|
||||
width: 52px;
|
||||
left: 0;
|
||||
}
|
||||
.endpoint-asset-dropdown-item {
|
||||
text-align: center;
|
||||
line-height: 22px;
|
||||
height: 22px;
|
||||
cursor: default;
|
||||
}
|
||||
.endpoint-asset-label-txt {
|
||||
display: inline-block;
|
||||
width: 19px;
|
||||
text-align: center;
|
||||
}
|
||||
.endpoint-asset-dropdown-item:first-of-type {
|
||||
border-radius: 4px 4px 0 0;
|
||||
}
|
||||
.endpoint-asset-dropdown-item:last-of-type {
|
||||
border-radius: 0 0 4px 4px;
|
||||
}
|
||||
.endpoint-asset-dropdown-item:hover {
|
||||
background-color: #3a8ee6;
|
||||
}
|
||||
/* end--搜索框*/
|
||||
/* begin--table*/
|
||||
.endpoint-sub-table {
|
||||
margin-top: 25px;
|
||||
}
|
||||
.line-100 {
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
.endpoint-sub-table-head {
|
||||
line-height: 28px;
|
||||
height: 30px;
|
||||
}
|
||||
.endpoint-sub-table-row {
|
||||
line-height: 28px;
|
||||
height: 30px;
|
||||
color: #656565;
|
||||
}
|
||||
.endpoint-sub-table-row-active {
|
||||
background-color: #dadada;
|
||||
}
|
||||
.endpoint-sub-table-col {
|
||||
display: inline-block;
|
||||
width: 45%;
|
||||
padding-left: 10px;
|
||||
}
|
||||
.endpoint-sub-table-paginate-all {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
bottom: 17px;
|
||||
color: #5a5a5a;
|
||||
}
|
||||
.endpoint-sub-table-body {
|
||||
font-size: 15px;
|
||||
}
|
||||
/* end--table*/
|
||||
|
||||
/* end--子弹框*/
|
||||
</style>
|
||||
<style>
|
||||
/* begin--覆盖分页组件样式*/
|
||||
.right-sub-box .el-pagination.is-background .btn-next, .right-sub-box .el-pagination.is-background .btn-prev, .right-sub-box .el-pagination.is-background .el-pager li {
|
||||
margin: 0 3px;
|
||||
min-width: 25px;
|
||||
}
|
||||
.right-sub-box .el-pagination button, .right-sub-box .el-pagination span:not([class*=suffix]) {
|
||||
margin: 0 3px;
|
||||
height: 25px;
|
||||
line-height: 25px;
|
||||
}
|
||||
.right-sub-box .el-pager li {
|
||||
height: 25px;
|
||||
line-height: 25px;
|
||||
}
|
||||
.right-sub-box .el-pagination.is-background .el-pager li:not(.disabled).active {
|
||||
background-color: #656565;
|
||||
border: 1px solid #656565;
|
||||
}
|
||||
.right-sub-box .el-pagination.is-background .btn-next, .right-sub-box .el-pagination.is-background .btn-prev, .right-sub-box .el-pagination.is-background .el-pager li {
|
||||
background-color: white;
|
||||
}
|
||||
.right-sub-box .el-pagination button, .right-sub-box .el-pager li {
|
||||
border: 1px solid #DADADA;
|
||||
}
|
||||
.right-sub-box .el-pager li.active+li {
|
||||
border: 1px solid #DADADA;
|
||||
}
|
||||
.right-sub-box .el-pagination.is-background .el-pager li:not(.disabled):hover {
|
||||
color: black;
|
||||
}
|
||||
.right-sub-box .el-pagination.is-background .el-pager li.active:hover {
|
||||
color: white;
|
||||
}
|
||||
.endpoint-sub-table-paginate .el-pagination {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
bottom: 13px;
|
||||
}
|
||||
.el-input-group__append {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* end--覆盖分页组件样式*/
|
||||
</style>
|
||||
@@ -16,9 +16,15 @@ import {post, get, put, del} from './http.js'
|
||||
|
||||
import Pagination from "./components/common/pagination"; //引入全局分页组件
|
||||
import searchInput from "./components/common/searchInput"; //搜索框组件
|
||||
import projectBox from './components/common/rightBox/projectBox'; //project弹框组件
|
||||
import moduleBox from './components/common/rightBox/moduleBox'; //module弹框组件
|
||||
import endpointBox from './components/common/rightBox/endpointBox'; //endpoint弹框组件
|
||||
|
||||
Vue.component("Pagination", Pagination);
|
||||
Vue.component("searchInput", searchInput);
|
||||
Vue.component("project-box", projectBox);
|
||||
Vue.component("module-box", moduleBox);
|
||||
Vue.component("endpoint-box", endpointBox);
|
||||
|
||||
Vue.prototype.$axios = axios;
|
||||
Vue.prototype.$post = post;
|
||||
|
||||
@@ -23,7 +23,7 @@ export default new Router({
|
||||
},
|
||||
{
|
||||
path: '/project',
|
||||
component: resolve => require(['../components/page/project/project.vue'], resolve),
|
||||
component: resolve => require(['../components/page/project/project2.vue'], resolve),
|
||||
},
|
||||
{
|
||||
path: '/asset',
|
||||
|
||||
Reference in New Issue
Block a user