feature: header冲突解决

This commit is contained in:
wanghaoyu
2019-12-26 17:39:30 +08:00
parent 5e97fd3689
commit 9d5d816aa7

View File

@@ -48,16 +48,80 @@
</el-menu-item>
</template>
</el-submenu>
<el-submenu index="3" popper-class="nz-submenu">
<template slot="title">
<div @click="jumpToAsset('asset')">{{$t('overall.asset')}}</div>
</template>
<template v-for="(item, index) in assetData">
<el-menu-item :index="'3-' + index">
<div @click="jumpToAsset('asset',item.id)">{{item.name}}</div>
</el-menu-item>
</template>
</el-submenu>
<el-submenu index="3">
<template slot="title">
<div @click="jumpTo('asset')">{{$t('overall.asset')}}</div>
</template>
<template v-for="(item, index) in assetData">
<el-menu-item :index="'3-' + index">
<div @click="jumpToAsset('asset',item.id)">
<span>{{item.name}}</span>
<el-popover
placement="bottom"
v-model="item[item.name]"
trigger="click"
>
<div class="pop-window-assetType-content">
<div class="right-box-top-btns">
<div class="right-box-top-btn right-box-top-btn-full"
@click="item[item.name] = false">
<div class="right-box-btn-icon">
<i class="el-icon-close"></i>
</div>
<span>{{$t('overall.esc')}}</span>
</div>
</div>
<div class="pop-window">
<span style="display: block;padding-bottom: 20px">标题</span>
<div style="padding-top: 10px;padding-left: 20px">
<div>
<label style="font-size: 12px">DN name</label>
<input class='sidebar-pop-input' v-model="addIdcData.name"/>
</div>
<div style="padding-top: 40px">
<label style="font-size: 12px">Loaction</label>
<input class='sidebar-pop-input' v-model="addIdcData.location"/>
</div>
<div style="padding-top: 40px">
<label style="font-size: 12px;padding-right: 20px">负责人</label>
<select class='sidebar-pop-input-select'
style="margin-left:-40px "
v-model="addIdcData.principal"
clearable>
<option
v-for="item in idcUserData"
:key="item.key"
:label="item.username"
:value="item.userId"
>
</option>
</select>
</div>
<div style="padding-top: 40px">
<label style="font-size: 12px">Tel</label>
<input class='sidebar-pop-input' v-model="addIdcData.tel"/>
</div>
</div>
</div>
</div>
<div class="right-box-bottom-btns">
<div class="right-box-bottom-btn right-box-bottom-btn-cancel"
@click.stop="item[item.name]= false">
{{$t('overall.cancel')}}
</div>
<div class="right-box-bottom-btn right-box-bottom-btn-50"
@click="editData('idc',item.id)">
{{$t('overall.save')}}
</div>
</div>
<div @click.stop="getIDCOptionData(item.id)" slot="reference" class="menu-edit">
<i class="el-icon-edit-outline"></i>
</div>
</el-popover>
</div>
</el-menu-item>
</template>
</el-submenu>
<el-submenu index="4-0" popper-class="nz-submenu">
<template slot="title">
<div @click="jumpTo('alertList')">{{$t('overall.alert')}}</div>
@@ -211,7 +275,16 @@
url: 'alertConfig',
type: 5
}
]
],
addIdcData: {
id: '',
name: '',
location: '',
principal: '',
tel: ''
},
idcUserData: '',
IDCOptionData: [],
}
},
methods: {
@@ -223,6 +296,7 @@
}
});
},
createBox(item) {
if (item.type == 1) {
this.$refs.projectBox.show(true);
@@ -247,19 +321,80 @@
this.$store.commit('setProject', p);
this.jumpTo('project');
},
changeLocal(lang) {
if (lang != localStorage.getItem("nz-language")) {
localStorage.setItem("nz-language", lang);
window.location.reload();
getUserData() {
this.$get('sys/user/list').then(response => {
if (response.code === 200) {
this.idcUserData = response.data.list
}
})
},
getIDCOptionData(data) {
this.$get('idc?id=' + data).then(response => {
if (response.code === 200) {
this.addIdcData = response.data.list[0];
this.clickFlush(this.addIdcData)
}
})
},
editData(data, Id) {
let idcData = {
id: '',
name: '',
location: '',
principal: '',
tel: ''
}
if (data === 'idc') {
idcData.id = Id
idcData.name = this.addIdcData.name
idcData.location = this.addIdcData.location
idcData.principal = this.addIdcData.principal
idcData.tel = this.addIdcData.tel
}
this.$put(data, idcData).then(res => {
const h = this.$createElement;
if (res.code === 200) {
this.$notify({
message: h('i', {style: 'color: teal'}, '修改成功'),
duration: 2000
})
this.$store.state.flushDataSign = true
}else{
this.$notify({
message: h('i', {style: 'color: teal'}, res.msg),
duration: 2000
})
}
})
},
clickFlush(itemData) {
for (let i = 0; i < this.assetData.length; i++) {
const element = this.assetData[i];
if (element.id === itemData.id) {
setTimeout(() => {
element[element.name] = true;
}, 100)
} else {
element[element.name] = false
}
}
},
getAssetData() {
this.$get('idc', this.pageObj).then(response => {
if (response.code == 200) {
this.assetData = response.data.list
this.assetData.forEach(item => {
this.$set(item, item.name, false)
})
}
})
},
changeLocal(lang) {
if (lang != localStorage.getItem("nz-language")) {
localStorage.setItem("nz-language", lang);
window.location.reload();
}
},
getProjectList() {
this.$get('project', {}).then(response => {
if (response.code == 200) {
@@ -298,6 +433,7 @@
this.language = localStorage.getItem("nz-language");
},
mounted() {
this.getUserData();
this.getAssetData();
this.getProjectList();
},
@@ -467,4 +603,75 @@
line-height: 36px;
float: right;
}
.pop-window-assetType-content {
padding: 1px 15px 15px 20px;
}
.pop-window {
height: 370px;
width: 400px;
}
.sidebar-pop-input {
position: absolute;
right: 50px;
width: 200px;
height: 26px;
border-radius: 4px;
border: 1px solid #DCDFE6;
color: #606266;
display: inline-block;
padding: 0px 15px;
}
.sidebar-pop-input-select {
position: absolute;
right: 83px;
width: 200px;
height: 26px;
border-radius: 4px;
border: 1px solid #DCDFE6;
color: #606266;
display: inline-block;
padding: 0px 15px;
}
.right-box-top-btn {
border-radius: 0 0 9px 9px;
float: right;
color: #656565;
height: 30px;
font-size: 12px;
padding: 3px 8px 1px 8px;
border: 1px solid #aaaaaa;
border-top: none;
cursor: pointer;
margin-left: 20px;
}
.right-box-bottom-btns {
position: absolute;
bottom: 0px;
width: 100%;
text-align: center;
}
.right-box-bottom-btn-cancel {
background-color: #DADADA;
color: #656565;
width: 50%;
border-bottom-left-radius: 8px;
}
.right-box-top-btn-full {
background-color: #656565;
border: 1px solid #656565;
border-top: none;
color: white;
}
.right-box-bottom-btn-50 {
width: 50%;
float: right;
border-bottom-right-radius: 8px;
}
</style>