gfwleak/nezha-nezha-fronted
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feature: asset修复

Browse Source 
idc弹窗修复 cli功能添加 bug处理修复
This commit is contained in:
wanghaoyu
2019-12-26 17:28:04 +08:00
parent 01d421b2d9
commit 057e4ece33
12 changed files with 1651 additions and 802 deletions
Download Patch File Download Diff File Expand all files Collapse all files

270
nezha-fronted/src/components/common/header.vue
View File

@@ -35,18 +35,83 @@
<el-menu-item :index="'2-' + index">
<div @click="jumpToProject(item)">
<span>{{item.name}}</span>
<div @click.stop="toEditProject(item)" class="menu-edit"><i class="el-icon-edit-outline"></i></div>
<div @click.stop="toEditProject(item)" class="menu-edit"><i
class="el-icon-edit-outline"></i></div>
</div>
</el-menu-item>
</template>
</el-submenu>
<el-submenu index="3">
<template slot="title">
<div @click="jumpToAsset('asset')">{{$t('overall.asset')}}</div>
<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)">{{item.name}}</div>
<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>
@@ -73,7 +138,6 @@
</el-menu-item>
</el-submenu>
</el-menu>
</div>
<div class="header-right">
<div class="header-user-con">
@@ -106,11 +170,9 @@
</el-popover>
</div>
</div>
<project-box :project="editProject" @reload="projectReload" ref="projectBox"></project-box>
<!-- <project-box :project="editProject" @reload="projectReload" ref="projectBox"></project-box>-->
<module-box :currentProject="currentProject" :module="editModule" @reload="" ref="moduleBox"></module-box>
<!--<add-endpoint-box :currentProject="currentProject" :currentModule="currentModule" @reload="" ref="addEndpointBox"></add-endpoint-box>-->
</div>
</template>
@@ -119,6 +181,15 @@ export default {
name: "Header",
data() {
return {
addIdcData: {
id: '',
name: '',
location: '',
principal: '',
tel: ''
},
idcUserData: '',
IDCOptionData: [],
language: localStorage.getItem("language"),
assetData: [],
projectData: [], //顶部菜单project列表中的数据
@@ -168,6 +239,52 @@ export default {
}
},
methods: {
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
})
}
})
},
jumpTo(data) {
this.$router.push({
path: "/" + data,
@@ -176,13 +293,43 @@ export default {
}
});
},
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)
})
}
})
},
createBox(item) {
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: this.$store.state.currentProject, port: '', path: '', param: '', paramObj: []};
this.editModule = {
id: '',
name: '',
project: this.$store.state.currentProject,
port: '',
path: '',
param: '',
paramObj: []
};
} else if (item.type == 3) {
this.$refs.addEndpointBox.show(true);
}
@@ -200,13 +347,6 @@ export default {
localStorage.setItem("language", lang);
window.location.reload();
},
getAssetData() {
this.$get('idc', this.pageObj).then(response => {
if (response.code == 200) {
this.assetData = response.data.list
}
})
},
getProjectList() {
this.$get('project', {}).then(response => {
if (response.code == 200) {
@@ -223,15 +363,27 @@ export default {
}
},
mounted() {
this.getUserData();
this.getAssetData();
this.getProjectList();
},
}
,
computed: {
projectListReloadWatch() {
return this.$store.state.projectListReload;
}
},
getIdcData() {
return this.$store.state.assetData.idcData
}
}
,
watch: {
getIdcData:{
handler(newVal, oldVal) {
this.getAssetData()
},
deep: true,
},
projectListReloadWatch(n, o) {
if (n) {
this.getProjectList();
@@ -246,12 +398,15 @@ export default {
.el-menu.el-menu--horizontal {
border-bottom: 0px
}
.el-submenu__title .el-submenu__icon-arrow {
display: none;
}
.el-menu--horizontal > .el-menu-item.is-active {
border-bottom: 0px
}
.el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
border-bottom: 0px
}
@@ -342,22 +497,103 @@ export default {
.header-name-jiantou {
position: static !important;
}
.el-menu-demo > li:first-of-type {
position: fixed;
left: 40%;
top: 0;
}
.menu-create {
line-height: 15px;
text-align: center;
padding-top: 15px;
}
.menu-create .el-icon-plus {
font-size: 12px;
line-height: 12px;
}
.menu-edit {
line-height: 36px;
float: right;
}
.pop-window-assetType-content {
padding: 1px 15px 15px 20px;
}
.pop-window {
height: 370px;
width: 400px;
}
.right-box-top-btns {
text-align: center;
}
.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>

68
nezha-fronted/src/components/common/language/en.js
View File

@@ -33,6 +33,73 @@ const en = {
asset:{
createAsset: "Create Asset",
asset: 'Asset',
createAssetTab:{
title:'Create Asset',
host:'host',
state:'state',
selectTip:'please select',
assetInfo:'资产信息',
assetType:'资产类型',
assetTypeTab:{
assetType:'资产类型',
addAssetType:'新增资产类型',
existAssetType:'已有资产类型'
},
vendor:'厂商/型号',
vendorTab:{
vendor:'厂商/型号',
vendorName:'新厂商名称',
existVendor:'已有厂商',
modelName:'新型号名称',
existModel:'已有型号'
},
purchaseDate:'购买日期',
dataSelectTip:'please select data',
dc:'DC',
dcName:'DC Name',
AddIdcTab:{
title:'+Add IDC',
dcName:'DC Name',
location:'Location',
principal:'负责人',
tel:'Tel'
},
editIdcTab:{
title:'Edit IDC',
dcName:'DC Name',
location:'Location',
principal:'负责人',
tel:'Tel'
},
location:'Location',
principal:'负责人',
tel:'Tel',
cabinet: '机柜',
AddCabinetTab:{
title:'+Add机柜',
name:'Name',
uSize:'U Size',
remark:'Desc',
DC:'DC',
},
editCabinetTab:{
title:'Edit 机柜',
name:'Name',
uSize:'U Size',
remark:'Desc',
DC:'DC',
},
uSize:'U Size',
remark:'Desc',
cli:'CLI Account',
loginType:'登录方式',
password:'password',
ssh:'SSH私钥',
account:'Account',
port:'Port',
upload:'Upload',
clickToUpload:'点击上传'
},
tableTitle: {
id: 'ID',
assetType: '资产类型',
@@ -56,6 +123,7 @@ const en = {
endPoint: 'EndPoint',
alert: 'alert',
},
},
config: {
config: "Config",

63
nezha-fronted/src/components/page/asset/Console.vue Normal file
View File

@@ -0,0 +1,63 @@
<template>
<div>
<div class="console" id="terminal"></div>
</div>
</template>
<script>
import Terminal from '../../common/js/Xterm'
export default {
name: 'Console',
props:['terminal','token'],
data () {
return {
term: null,
terminalSocket: null,
obj:{
id:2
},
}
},
watch:{
token: {
immediate:true,
handler(val){
if(val){
this.create()
}
}
},
},
methods: {
create(){
let terminalContainer = document.getElementById('terminal')
this.term = new Terminal()
this.term.open(terminalContainer)
this.terminalSocket = new WebSocket("ws://192.168.40.247:8080/nz-admin/terminal.ws?width=1&height=1&cols=225&rows=200&token="+this.token);
// this.terminalSocket = new WebSocket("ws://192.168.41.101:8088/nz-admin/terminal.ws?width=1600&height=1005&cols=225&rows=58&token="+this.token);
this.term.attach(this.terminalSocket)
this.term._initialized = true
},
},
mounted () {
},
beforeDestroy () {
this.terminalSocket.close()
this.term.destroy()
}
}
</script>
<style scoped>
.header {
position: relative;
box-sizing: border-box;
width: 100%;
height: 60px;
font-size: 22px;
background-color: #ffffff;
z-index: 510;
box-shadow: 0px 20px 13px -19px #5E5E5E;
}
</style>

254
nezha-fronted/src/components/page/asset/WebSSH.vue Normal file
View File

@@ -0,0 +1,254 @@
<template>
<div>
<div class="title">
<div class="submenu">
<el-menu class="el-menu-demo" mode="horizontal">
<el-submenu index="1">
<template slot="title">操作</template>
<el-menu-item index="1-1">
<template>
<span @click.once="cloneChat">克隆会话</span>
</template>
</el-menu-item>
<el-menu-item index="1-2">
<template>
<span @click="dialogVisible = true">上传文件</span>
</template>
</el-menu-item>
</el-submenu>
<el-submenu index="2">
<template slot="title">打开</template>
<template v-for="(item, index) in enableAsset">
<el-menu-item :index="'2-' + index" @click="createCli(item)">{{item.host}}</el-menu-item>
</template>
</el-submenu>
</el-menu>
</div>
<div class="title-input">
<input style="height: 20px;width: 250px" v-model="order"></input>
<button @click="sendOrder">发送</button>
</div>
</div>
<el-dialog
:visible="dialogVisible"
width="30%"
:modal="true">
<label>文件路径</label>
<el-input v-model="uploadFile.path"></el-input>
<div style="padding-top: 20px">
<el-upload
class="upload-demo"
ref="upload"
action=""
:on-change="handleChange"
:auto-upload="false"
>
<el-button size="small" type="primary">{{$t('asset.createAssetTab.clickToUpload')}}</el-button>
</el-upload>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="upload">确 定</el-button>
</span>
</el-dialog>
<my-terminal :terminal="terminal" :token="token"></my-terminal>
</div>
</template>
<script>
import Console from './Console'
export default {
name: 'WebSSH',
components: {
'my-terminal': Console
},
data() {
return {
flag:false,
assetData: '',
terminal: {
pid: 1,
name: 'terminal',
cols: 400,
rows: 400
},
dialogVisible: false,
obj: {
id: ''
},
uploadFile: {
file: '',
path: '',
token: ''
},
pageObj: {
pageNo: 1,
pageSize: 100,
},
order:'',
enableAsset: '',
accountId: '',
routeData: this.$route.query,
token: '',
width: '',
height: `${document.documentElement.clientHeight}`,
witdh: `${document.documentElement.clientWidth}`,
}
},
watch: {
routeData(newVal) {
if (newVal) {
this.getIDCOptionData(this.routeData)
}
},
accountId(newVal) {
if (newVal) {
this.getToken(newVal)
}
},
},
methods: {
createCli(item) {
let routeData = this.$router.resolve({
name: "newChat",
query: {
host: item.host,
accountId: item.accounts[0].id
}
});
window.open(routeData.href);
},
cloneChat() {
let routeData = this.$router.resolve({
name: "cloneChat",
query: {
accountId: this.accountId,
host: this.routeData.host
}
});
window.open(routeData.href);
},
getIDCOptionData(data) {
this.$get('account?assetId=' + data.id).then(response => {
if (response.code === 200) {
this.accountId = response.data.list[0].id
}
})
},
getSize(height, width) {
const _this = this
setTimeout(function () {
_this.setSize(height, width)
}, 1000);
},
getToken(data) {
this.obj.id = data
this.$post('account/ssh.do', this.obj).then(res => {
if (res.code === 200) {
this.token = res.data.token
sessionStorage.setItem('cliToken', this.token)
}
})
},
sendOrder(){
let form = new FormData();
form.append("token", this.token);
form.append("cmd", this.order);
this.$post('account/sendAll.do', form).then(res => {
})
},
setSize(height, width) {
let form = new FormData();
form.append("token", this.token);
form.append("cols", parseInt(20));
form.append("rows", parseInt(20));
form.append("height", parseInt(height));
form.append("width", parseInt(width));
this.$post('account/resize.do', form).then(res => {
console.log(res)
})
},
getAssetData() {
this.$get('asset', this.pageObj).then(response => {
if (response.code === 200) {
this.assetData = response.data.list;
this.enableAsset = this.assetData.filter(item => {
return item.accounts.length > 0
})
}
})
},
upload() {
this.uploadFile.token = this.token
let form = new FormData();
form.append("token", this.token);
form.append("file", this.uploadFile.file);
form.append("path", this.uploadFile.path);
this.$post('account/upload.do', form).then(res => {
if (res.code === 200) {
console.log(res)
}
})
},
handleChange(file) {
this.uploadFile.file = file.raw
},
beforeunloadFn(e) {
}
},
created() {
window.addEventListener('beforeunload', e => this.beforeunloadFn(e))
},
mounted() {
this.getAssetData()
if (this.routeData) {
this.getIDCOptionData(this.routeData)
this.host = this.routeData.host
document.title = this.host
}
window.onresize = () => {
return (() => {
let height = `${document.documentElement.clientHeight}`;
let width = `${document.documentElement.clientWidth}`;
this.getSize(height, width)
})();
};
// let _this = this
// window.onbeforeunload = function (e) {
// if (_this.$route.name === "terminal") {
// e = e || window.event;
// // 兼容IE8和Firefox 4之前的版本
// if (e) {
// console.log(e)
// e.returnValue = "提示：/“退出系统/”请点系统的/“安全退出/”!"; ;
// }
// } else {
// window.onbeforeunload = null
// }
// };
},
}
</script>
<style scoped>
.title {
display: inline-block;
}
.submenu {
float: left;
width: 500px;
font-size: 22px;
}
.title-input {
position: absolute;
left: 300px;
top: 19px
}
</style>

449
nezha-fronted/src/components/page/asset/asset.vue
View File

@@ -62,7 +62,7 @@
{{$t('overall.cancel')}}
</div>
<div class="right-box-bottom-btn right-box-bottom-btn-50"
@click="addNewData('IDC')">
@click="editData('idc',item)">
{{$t('overall.save')}}
</div>
</div>
@@ -86,7 +86,6 @@
:placeholder="$t('overall.search')"
size="small"
style="width: 200px;float: right;padding-top: 10px"
>
</el-input>
</div>
@@ -179,7 +178,7 @@
</p>
</div>
<div v-if="item.prop == 'option'">
<span @click="ssss(scope.row.id)" class="account-list-option"><i
<span @click="ssss(scope.row.id ,scope.row.host)" class="account-list-option"><i
class="el-icon-monitor"></i></span>
<span @click.stop="deleteData('asset',scope.row.id)" class="account-list-option"><i
class="el-icon-delete"></i></span>
@@ -192,8 +191,10 @@
</el-table-column>
</el-table>
<Pagination :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
<asset-add-unit :add-unit-show='addUnitShow' @refreshData="flushData" @sendStateData="tabControl"></asset-add-unit>
<asset-edit-unit :edit-unit-show='editUnitShow' @refreshData="flushData" @sendStateData="tabControl" ref="assetEditUnit"></asset-edit-unit>
<asset-add-unit :add-unit-show='addUnitShow' @refreshData="flushData"
@sendStateData="tabControl"></asset-add-unit>
<asset-edit-unit :edit-unit-show='editUnitShow' @refreshData="flushData" @sendStateData="tabControl"
ref="assetEditUnit"></asset-edit-unit>
</div>
</div>
</div>
@@ -204,8 +205,6 @@ export default {
name: "asset",
data() {
return {
vendorModelData: '',
cabinetModelData: '',
checkList: [],
tableTitle: [
{
@@ -271,12 +270,6 @@ export default {
}],
tableData: [],
checkListData: [],
assetTypeOptionData: [],
vendorTypeData: '',
vendorTypeOptionData: [],
vendorUlData: '',
modelUlData: '',
vendorCode: '',
IDCData: '',
IDCOptionData: [],
cabinetData: '',
@@ -303,20 +296,6 @@ export default {
title: ''
},
assetType: '',
assetTypeData: {
type: 'assetType',
value: '',
},
addVendorData: {
type: 'vendor',
value: '',
},
addNewModelData: {
name: '',
vendorCode: '',
typeCode: ''
},
accountType: '',
idcSelectedData: {
id: '',
name: '',
@@ -333,125 +312,65 @@ export default {
tel: ''
},
idcUserData: '',
cabinetSelectedData: {
name: '',
uSize: 0,
remark: '',
idcId: '',
},
addCabinetData: {
name: '',
popName: '',
uSize: 0,
remark: '',
idcId: '',
},
popTypeVisible: false,
popCompVisible: false,
popIDCVisible: false,
popCabinetVisible: false,
editPopTypeVisible: false,
editPopVendorVisible: false,
editPopIDCVisible: false,
editPopCabinetVisible: false,
vendorCount: '',
modelCount: '',
allModelUlData: '',
addForm: {
sn: '',
host: '',
state: '',
},
tempData: '',
tempModelData: [],
isResourceShow: 0,
unitDisable: '',
modelClickData: '',
popState: true,
obj: null,
addUnitShow: false,
editUnitShow: false,
flag: false
}
},
computed: {
getData() {
return this.$store.state.assetData
},
getFlushData() {
return this.$store.state.flushDataSign
}
},
watch: {
getData: {
handler(oldVal, newVal) {
console.log(oldVal,newVal)
this.checkList.splice(0, 1, newVal.selectedData)
this.pageObj.idcIds = newVal.selectedData
this.checkList.splice(0, 1, newVal.selectedData);
this.pageObj.idcIds = newVal.selectedData;
this.getAssetData()
},
deep: true,
},
allModelUlData(newVal) {
if (newVal) {
this.getConnectData()
if (this.pageObj.id != '') {
this.assetData.modelId = [this.obj.model.vendor.code, this.obj.model.id]
getFlushData: {
handler(newVal, oldVal) {
if (newVal === true) {
this.getIDCOptionData();
this.getAssetData()
}
}
},
assetType(newVal) {
if (newVal == '') {
this.popState = true
} else {
this.popState = false
}
},
created() {
this.checkList.push(this.$store.state.assetData.selectedData)
this.getSingleAsset(this.checkList)
},
methods: {
ssss(data) {
ssss(id, sn) {
let routeData = this.$router.resolve({
name: "terminal",
query: {id: data}
query: {
id: id,
host: sn
}
});
window.open(routeData.href);
},
getAssetData(data) {
if (data !== undefined) {
this.pageObj.id = data
this.$get('asset', this.pageObj).then(response => {
if (response.code === 200) {
this.obj = response.data.list[0];
this.assetViewData.assetType = response.data.list[0].model.type.value
this.assetViewData.vendor = response.data.list[0].model.vendor.value
this.assetViewData.model = response.data.list[0].model.name
this.assetViewData.idcName = response.data.list[0].idc.name
this.assetViewData.cabinetName = response.data.list[0].cabinet == null ? '' : response.data.list[0].cabinet.name
this.assetViewData.moduleNum = response.data.list[0].moduleNum
this.assetViewData.alertNum = response.data.list[0].alertNum
this.assetViewData.cabinetName = response.data.list[0].cabinet == null ? '' : response.data.list[0].cabinet.name
this.getCabinetOptionData(response.data.list[0].idc.id)
this.assetType = response.data.list[0].model.type.code
this.assetData.sn = response.data.list[0].sn
this.assetData.host = response.data.list[0].host
this.assetData.state = response.data.list[0].state
this.assetData.idcId = response.data.list[0].idc.id
this.assetData.cabinetId = response.data.list[0].cabinet == null ? '' : response.data.list[0].cabinet.id
this.assetData.purchaseDate = response.data.list[0].purchaseDate
this.idcSelectedData.location = response.data.list[0].idc.location
this.idcSelectedData.principal = this.getPrincipalName(response.data.list[0].idc.principal)
this.idcSelectedData.tel = response.data.list[0].idc.tel
this.cabinetSelectedData.uSize = response.data.list[0].cabinet == null ? '' : response.data.list[0].cabinet.uSize
this.cabinetSelectedData.remark = response.data.list[0].cabinet == null ? '' : response.data.list[0].cabinet.remark
this.getAllModelOptionData(this.assetType)
}
})
} else {
this.pageObj.id = ''
this.$get('asset', this.pageObj).then(response => {
if (response.code === 200) {
this.tableData = response.data.list;
this.pageObj.total = response.data.total
}
})
}
},
getIDCOptionData() {
this.$get('idc').then(response => {
@@ -468,102 +387,30 @@ export default {
}
})
},
getCabinetOptionData(data) {
this.$get('cabinet?idcId=' + data).then(response => {
if (response.code === 200) {
this.cabinetOptionData = response.data.list;
this.markOptionData(this.cabinetOptionData)
}
})
},
getAssetTypeOptionData() {
this.$get('sys/dict/all?type=assetType').then(response => {
if (response.code === 200) {
this.assetTypeOptionData = response.data
this.markOptionData(this.assetTypeOptionData)
}
})
},
getVendorOptionData() {
this.$get('sys/dict/all?type=vendor').then(response => {
if (response.code === 200) {
this.vendorUlData = response.data
this.markOptionData(this.vendorUlData)
}
})
},
getModelOptionData(assetType, vendorCode) {
this.$get('model?typeCode=' + assetType + '&vendorCode=' + vendorCode).then(response => {
if (response.code === 200) {
this.modelUlData = response.data.list
this.markOptionData(this.modelUlData)
}
})
},
getAllModelOptionData(data) {
this.$get('model?typeCode=' + this.assetType).then(response => {
if (response.code === 200) {
this.allModelUlData = response.data.list
}
})
},
editData(data, item) {
let obj = {
id: '',
type: '',
value: '',
code: ''
if (data === 'idc') {
item.name = this.addIdcData.popName
}
if (data === 'asset') {
this.assetData.modelId = this.assetData.modelId.join(',').split(',')[1]
this.$put('asset', this.assetData).then(res => {
if (res.code === 200) {
this.$put(data, item).then(res => {
const h = this.$createElement;
if (res.code === 200) {
this.$notify({
message: h('i', {style: 'color: teal'}, '修改成功'),
duration: 2000
});
this.pageObj.id = ''
this.getAssetData();
}
})
} else {
if (data === 'model') {
item.vendorCode = this.vendorCode
item.typeCode = this.assetType
}
if (data === 'vendor') {
obj.id = item.id
obj.code = item.code
obj.type = item.type
obj.value = item.label
data = 'sys/dict/update'
item = obj
}
if (data === 'cabinet') {
item.name = this.addCabinetData.popName
}
if (data === 'idc') {
console.log(item)
item.name = this.addIdcData.popName
}
this.$put(data, item).then(res => {
if (res.code === 200) {
const h = this.$createElement;
this.$notify({
message: h('i', {style: 'color: teal'}, '修改成功'),
message: h('i', {style: 'color: teal'}, res.msg),
duration: 2000
})
this.getAssetData();
this.getAllModelOptionData();
}
})
}
},
addNewData(type) {
if (type === 'IDC') {
console.log(this.addIdcData)
this.$post('idc', this.addIdcData).then(res => {
const h = this.$createElement;
if (res.code === 200) {
const h = this.$createElement;
this.$notify({
@@ -572,82 +419,9 @@ export default {
});
this.getIDCOptionData()
this.getAssetData()
}
})
}
if (type === 'assetType') {
this.$post('sys/dict/save', this.assetTypeData).then(res => {
if (res.code === 200) {
this.getAssetTypeOptionData()
const h = this.$createElement;
this.$notify({
message: h('i', {style: 'color: teal'}, '添加成功'),
duration: 2000
});
}
})
}
if (type === 'asset') {
console.log(this.assetData)
this.assetData.modelId = this.assetData.modelId.join(',').split(',')[1]
this.$post('asset', this.assetData).then(res => {
if (res.code === 200) {
const h = this.$createElement;
this.$notify({
message: h('i', {style: 'color: teal'}, '添加成功'),
duration: 2000
});
this.getAssetData();
}
})
}
if (type === 'vendor') {
this.$post('sys/dict/save', this.addVendorData).then(res => {
if (res.code === 200) {
const h = this.$createElement;
this.$notify({
message: h('i', {style: 'color: teal'}, '添加成功'),
duration: 2000
});
this.getVendorOptionData()
}
})
}
if (type === 'model') {
this.addNewModelData.typeCode = this.assetType
this.addNewModelData.vendorCode = this.vendorCode
this.$post('model', this.addNewModelData).then(res => {
if (res.code === 200) {
this.getModelOptionData(this.assetType, this.vendorCode)
const h = this.$createElement;
this.$notify({
message: h('i', {style: 'color: teal'}, '添加成功'),
duration: 2000
});
this.getAllModelOptionData(this.assetType)
} else {
const h = this.$createElement;
this.$notify({
message: h('i', {style: 'color: teal'}, res.msg),
duration: 2000
});
}
})
}
if (type === 'cabinet') {
this.addCabinetData.idcId = this.assetData.idcId
this.$post('cabinet', this.addCabinetData).then(res => {
const h = this.$createElement;
if (res.code === 200) {
this.$notify({
message: h('i', {style: 'color: teal'}, '添加成功'),
duration: 2000
});
this.getCabinetOptionData(this.addCabinetData.idcId)
this.popoverClose('cabinet')
} else {
this.$notify({
message: h('i', {style: 'color: teal'}, res.msg),
message: h('i', {style: 'color: teal'}, '添加成功'),
duration: 2000
});
}
@@ -664,10 +438,6 @@ export default {
});
this.getAssetData()
this.getIDCOptionData()
this.getVendorOptionData()
this.getCabinetOptionData(this.assetData.idcId)
this.getAllModelOptionData(this.assetType)
this.getModelOptionData(this.assetType, this.vendorCode)
} else {
this.$notify({
message: h('i', {style: 'color: teal'}, response.msg),
@@ -685,39 +455,6 @@ export default {
this.$set(item, item.id + item.name, false)
})
},
getConnectData() {
this.isResourceShow += 1
let resultData = []
let modelData = this.allModelUlData
for (let i = 0; i < modelData.length; i++) {
let obj = {}
obj.id = modelData[i].vendor.id
obj.code = modelData[i].vendor.code
obj.value = modelData[i].vendor.code
obj.label = modelData[i].vendor.value
obj.children = []
resultData.push(obj)
}
var result = [];
var obj1 = {};
for (let i = 0; i < resultData.length; i++) {
if (!obj1[resultData[i].id]) {
result.push(resultData[i]);
obj1[resultData[i].id] = true;
}
}
for (let x = 0; x < result.length; x++) {
for (let y = 0; y < modelData.length; y++) {
if (result[x].code === modelData[y].vendor.code) {
let obj2 = {}
obj2.value = modelData[y].id
obj2.label = modelData[y].name
result[x].children.push(obj2)
}
}
}
this.vendorTypeOptionData = result
},
editOptionData(item) {
if (!item.isEdit) {
item.isEdit = true;
@@ -747,6 +484,7 @@ export default {
}
if (data === 'showView') {
this.editUnitShow = true
this.$refs['assetEditUnit'].getAssetData(id)
this.$refs['assetEditUnit'].tabView = true
}
},
@@ -761,10 +499,6 @@ export default {
this.idcSelectedData = item
}
});
this.getCabinetOptionData(this.assetData.idcId);
this.assetData.cabinetId = ''
this.cabinetSelectedData.uSize = ''
this.cabinetSelectedData.remark = null
} else {
this.IDCOptionData.forEach(item => {
if (item.id === data) {
@@ -778,21 +512,15 @@ export default {
}
,
getSingleAsset(data) {
console.log(data)
// let regPos = /^\d+(\.\d+)?$/;
// if(!regPos.test(data)){
// this.pageObj.idcIds = data
// }else{
let result = []
if (data[0] === '') {
result = data.slice(1);
this.pageObj.idcIds = result.join(',')
} else {
this.pageObj.idcIds = data.join(',')
// }
}
this.getAssetData()
},
getLidata(index, item) {
this.vendorCount = index;
this.vendorCode = item.code;
this.getModelOptionData(this.assetType, this.vendorCode)
}
,
pageNo(val) {
this.pageObj.pageNo = val;
this.getAssetData()
@@ -802,23 +530,6 @@ export default {
this.pageObj.pageSize = val;
this.getAssetData()
},
popoverClose(data) {
if (data === 'type') {
this.modelCount = ''
this.popTypeVisible = false
}
if (data === 'vendor') {
this.popCompVisible = false;
this.modelUlData = '';
this.vendorCount = ''
}
if (data === 'idc') {
this.popIDCVisible = false
}
if (data === 'cabinet') {
this.popCabinetVisible = false
}
},
getPrincipalName(data) {
for (let item in this.idcUserData) {
if (this.idcUserData[item].userId === data) {
@@ -841,18 +552,9 @@ export default {
},
},
mounted() {
this.getCabinetOptionData('')
this.getUserData()
this.getUserData();
this.getAssetData();
this.getIDCOptionData();
this.getVendorOptionData();
this.getAssetTypeOptionData();
window.onresize = () => {
this.tableHeight = document.documentElement.clientHeight - 200;
}
// let terminalContainer = document.getElementById('terminal-container')
// let term = new Terminal()
// term.open(terminalContainer)
}
}
</script>
@@ -862,12 +564,12 @@ export default {
}
.el-popover {
padding: 0px;
padding: 0;
border-radius: 10px;
}
.el-form-style .el-form-item {
margin-bottom: 0px;
margin-bottom: 0;
}
.el-form-style .el-form-item .el-form-item__content {
@@ -876,7 +578,7 @@ export default {
}
.el-checkbox.is-bordered + .el-checkbox.is-bordered {
margin-left: 0px;
margin-left: 0;
margin-top: 20px;
}
@@ -922,7 +624,7 @@ export default {
border: 1px solid #DCDFE6;
color: #606266;
display: inline-block;
padding: 0px 15px;
padding: 0 15px;
}
.content-left {
@@ -970,24 +672,6 @@ export default {
left: 230px;
}
.el-form-style {
padding-top: 40px;
}
.right-menu {
position: fixed;
top: 60px;
right: 0;
z-index: 500;
border-radius: 8px;
box-shadow: 0 0 15px #ccc;
background-color: white;
padding: 0 20px;
width: 580px;
height: calc(90% - 60px);
overflow-y: auto
}
.tab-input-square {
border: 1px solid #aaaaaa;
height: 25px;
@@ -1029,59 +713,16 @@ export default {
color: white;
}
.right-box-title {
height: 30px;
line-height: 40px;
}
.el-select-add-btn {
display: inline-block;
width: 26px;
height: 26px;
float: right;
margin-top: 7px;
text-align: center;
border-radius: 5px;
border: 1px solid #DCDFE6;
box-sizing: border-box;
color: #C7C9CE;
line-height: 22px;
transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
}
.el-select-add-btn:hover {
border: 1px solid #C0C4CC;
cursor: pointer;
}
.pop-window {
height: 370px;
width: 400px;
}
.pop-window-assetType {
height: 550px;
width: 400px;
}
.pop-window-assetType-content {
padding: 1px 15px 15px 20px;
}
.li-list {
width: 97%;
height: 300px;
border: 1px solid #cfcfcf;
overflow-y: auto;
}
.li-list-part {
width: 90%;
height: 130px;
border: 1px solid #cfcfcf;
overflow-y: auto;
}
.rm-c-list span:hover {
background-color: #888;
color: #fff;

440
nezha-fronted/src/components/page/asset/assetAddUnit.vue
View File

@@ -1,6 +1,6 @@
<template>
<transition name="right-box">
<div class="right-menu" v-if="addUnitShow">
<div class="right-menu" v-if="addUnitShow" @click="editQuit">
<div class="right-box-top-btns">
<div class="right-box-top-btn right-box-top-btn-full" @click.stop="sendStateData('close')">
<div class="right-box-btn-icon">
@@ -8,31 +8,25 @@
</div>
<span>{{$t('overall.esc')}}</span>
</div>
<div class="right-box-top-btn right-box-top-btn-full">
<div class="right-box-top-btn right-box-top-btn-full" @click.stop="addNewData('asset')">
<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">
<div class="right-box-btn-icon">
<i class="el-icon-delete"></i>
</div>
<span>{{$t('overall.delete')}}</span>
</div>
</div>
<div class="right-box-title">Create Asset</div>
<div class="right-box-title">{{$t('asset.createAssetTab.title')}}</div>
<el-form :model="assetData" label-width="120px">
<div class="el-form-style">
<el-form-item label="SN" prop="sn">
<el-form-item :label="this.$t('asset.createAssetTab.title')" prop="sn">
<el-input v-model="assetData.sn"/>
</el-form-item>
<el-form-item label="Host" prop="host">
<el-form-item :label="this.$t('asset.createAssetTab.host')" prop="host">
<el-input v-model="assetData.host"/>
</el-form-item>
<el-form-item label="State" prop="state">
<el-form-item :label="this.$t('asset.createAssetTab.state')" prop="state">
<div class="select-style">
<el-select v-model="assetData.state" placeholder="请选择">
<el-select v-model="assetData.state" :placeholder="this.$t('asset.createAssetTab.selectTip')">
<el-option
v-for="item in assetStateOption"
:key="item.value"
@@ -42,33 +36,27 @@
</el-select>
</div>
</el-form-item>
<div style="font-size: 10px">资产信息</div>
<div style="font-size: 10px">{{$t('asset.createAssetTab.assetInfo')}}</div>
<el-divider></el-divider>
<!------------------------------------------资产类型---------------------------------------------->
<el-form-item label="资产类型" prop="assetType">
<el-form-item :label="this.$t('asset.createAssetTab.assetType')" prop="assetType">
<div class="select-style">
<el-select v-model="assetType" clearable @change="getAllModelOptionData">
<el-select v-model="assetType" clearable @change="getAllModelOptionData" @visible-change="cancelEdit">
<el-option
v-for="item in assetTypeOptionData"
v-for="(item) in assetTypeOptionData"
:key="item.id"
:value="item.code"
:label="item.value"
>
<span v-if="!item.isEdit">{{ item.value }}</span>
<span class="config-dropdown-label-input" v-if="item.isEdit"
@click.stop="editing">
<span class="config-dropdown-label-input" v-if="item.isEdit" @click.stop="editing">
<el-input type="text" v-model="item.value" size="mini"/>
</span>
<span class="config-dropdown-btn"
@click.stop="editOptionData(item)">
<span class="config-dropdown-btn" @click.stop="editOptionData(item,'type')">
<i class="el-icon-edit-outline" v-if="!item.isEdit"></i>
<i class="el-icon-check" v-if="item.isEdit"
@click="editData('sys/dict/update',item)"></i>
</span>
<span class="config-dropdown-btn config-dropdown-btn-delete"
><i
class="el-icon-delete"></i>
<i class="el-icon-check" v-if="item.isEdit" @click="editData('sys/dict/update',item)"></i>
</span>
<span class="config-dropdown-btn config-dropdown-btn-delete"><i class="el-icon-delete"></i></span>
</el-option>
</el-select>
<div class="el-select-add-btn">
@@ -77,7 +65,7 @@
trigger="click"
v-model="popTypeVisible"
>
<div class="pop-window-assetType">
<div class="pop-window-assetType" @click="editQuit()">
<div class="pop-window-assetType-content">
<div class="right-box-top-btns">
<div class="right-box-top-btn right-box-top-btn-full"
@@ -88,35 +76,29 @@
<span>{{$t('overall.esc')}}</span>
</div>
</div>
<span style="display: block;padding-bottom: 20px">资产类型</span>
<span style="display: block;padding-bottom: 20px">新增资产类型</span>
<span style="display: block;padding-bottom: 20px">{{$t('asset.createAssetTab.assetTypeTab.assetType')}}</span>
<span style="display: block;padding-bottom: 20px">{{$t('asset.createAssetTab.assetTypeTab.addAssetType')}}</span>
<input v-model="assetTypeData.value"/>
<input type="button" value="+Add"
@click="addNewData('assetType')"></input>
<span style="display: block;padding-bottom: 20px">已有资产类型</span>
<input type="button" value="+Add" @click="addNewData('assetType')"></input>
<span style="display: block;padding-bottom: 20px">{{$t('asset.createAssetTab.assetTypeTab.existAssetType')}}</span>
<div class="li-list">
<ul style="list-style: none">
<li style="cursor: pointer;"
v-for="(item,index) in assetTypeOptionData"
@click="clickState(index,item,'type',clickoutside)"
@click="clickState(index,item,'type')"
:class="{activeColor:modelCount === index}"
:key="index">
<div>
<span v-if="!item.isEdit">{{ item.value }}</span>
<span class="config-dropdown-label-input"
v-if="item.isEdit"
@click.stop="editing">
<span class="config-dropdown-label-input" v-if="item.isEdit" @click.stop="editing">
<input type="text" v-model="item.value" size="mini"/>
</span>
<span class="config-dropdown-btn"
@click.stop="editOptionData(item)">
<span class="config-dropdown-btn" @click.stop="editOptionData(item,'type',index)">
<i class="el-icon-edit-outline" v-if="!item.isEdit"></i>
<i class="el-icon-check" v-if="item.isEdit"
@click="editData('sys/dict/update',item)"></i>
<i class="el-icon-check" v-if="item.isEdit" @click="editData('sys/dict/update',item)"></i>
</span>
<span class="config-dropdown-btn config-dropdown-btn-delete"
@click.stop="deleteData('/sys/dict/delete',item.id)"><i
class="el-icon-delete"></i>
<span class="config-dropdown-btn config-dropdown-btn-delete" @click.stop="deleteData('/sys/dict/delete',item.id)">
<i class="el-icon-delete"></i>
</span>
</div>
</li>
@@ -125,23 +107,20 @@
</div>
</div>
<div class="right-box-bottom-btns">
<div class="right-box-bottom-btn right-box-bottom-btn-cancel"
@click="popoverClose('type')">
<div class="right-box-bottom-btn right-box-bottom-btn-cancel" @click="popoverClose('type')">
{{$t('overall.cancel')}}
</div>
<div class="right-box-bottom-btn right-box-bottom-btn-50"
@click="transferData('type')">
<div class="right-box-bottom-btn right-box-bottom-btn-50" @click="transferData('type')">
{{$t('overall.save')}}
</div>
</div>
<!-- <div slot="reference" style="font-size: 18px">+</div>-->
<div slot="reference" style="font-size: 18px">+</div>
</el-popover>
</div>
</div>
</el-form-item>
<!------------------------------------------厂商/型号---------------------------------------------->
<el-form-item label="厂商/型号">
<el-form-item :label="this.$t('asset.createAssetTab.vendor')">
<div class="select-style">
<el-cascader
:options="vendorTypeOptionData"
@@ -157,8 +136,9 @@
trigger="click"
v-model="popCompVisible"
:disabled=popState
v-clickoutside="clickOutSide"
>
<div class="pop-window-assetType">
<div class="pop-window-assetType" @click="editQuit()">
<div class="pop-window-assetType-content">
<div class="right-box-top-btns">
<div class="right-box-top-btn right-box-top-btn-full"
@@ -170,12 +150,12 @@
</div>
</div>
<div class="pop-window-assetType">
<span style="display: block;padding-bottom: 15px">商场/型号</span>
<span style="display: block;padding-bottom: 20px">新厂商名称</span>
<span style="display: block;padding-bottom: 15px">{{$t('asset.createAssetTab.vendorTab.vendor')}}</span>
<span style="display: block;padding-bottom: 20px">{{$t('asset.createAssetTab.vendorTab.vendorName')}}</span>
<input v-model="addVendorData.value"/>
<input type="button" value="+Add"
@click="addNewData('vendor')"></input>
<span style="display: block;padding-bottom: 20px">已有厂商</span>
<span style="display: block;padding-bottom: 20px">{{$t('asset.createAssetTab.vendorTab.existVendor')}}</span>
<div class="li-list-part">
<ul style="list-style: none">
<li style="cursor: pointer;"
@@ -185,30 +165,23 @@
:key="index">
<div>
<span v-if="!item.isEdit">{{ item.value }}</span>
<span class="config-dropdown-label-input"
v-if="item.isEdit"
@click.stop="editing">
<span class="config-dropdown-label-input" v-if="item.isEdit" @click.stop="editing">
<input type="text" v-model="item.value" size="mini"/>
</span>
<span class="config-dropdown-btn"
@click.stop="editOptionData(item)">
<span class="config-dropdown-btn" @click.stop="editVendorOptionData(item,'vendor',index)">
<i class="el-icon-edit-outline" v-if="!item.isEdit"></i>
<i class="el-icon-check" v-if="item.isEdit"
@click="editData('sys/dict/update',item)"></i>
</span>
<span class="config-dropdown-btn config-dropdown-btn-delete"
@click.stop="deleteData('/sys/dict/delete',item.id)"><i
class="el-icon-delete"></i>
<i class="el-icon-check" v-if="item.isEdit" @click="editData('sys/dict/update',item)"></i>
</span>
<span class="config-dropdown-btn config-dropdown-btn-delete" @click.stop="deleteData('/sys/dict/delete',item.id)"><i class="el-icon-delete"></i></span>
</div>
</li>
</ul>
</div>
<span style="display: block;padding-bottom: 15px">新型号名称</span>
<span style="display: block;padding-bottom: 15px">{{$t('asset.createAssetTab.vendorTab.modelName')}}</span>
<input v-model="addNewModelData.name"/>
<input type="button" value="+Add"
@click="addNewData('model')"></input>
<span style="display: block;padding-bottom: 20px">已有型号</span>
<span style="display: block;padding-bottom: 20px">{{$t('asset.createAssetTab.vendorTab.existModel')}}</span>
<div class="li-list-part">
<ul style="list-style: none">
<li style="cursor: pointer;"
@@ -216,27 +189,17 @@
@click="clickState(index,item,'model') "
:class="{activeColor:modelCount === index}"
:key="index">
<div>
<div>
<span v-if="!item.isEdit">{{ item.name }}</span>
<span class="config-dropdown-label-input"
v-if="item.isEdit"
@click.stop="editing">
<span class="config-dropdown-label-input" v-if="item.isEdit" @click.stop="editing">
<input type="text" v-model="item.name" size="mini"/>
</span>
<span class="config-dropdown-btn"
@click.stop="editOptionData(item)">
<span class="config-dropdown-btn" @click.stop="editOptionData(item,'model',index)">
<i class="el-icon-edit-outline" v-if="!item.isEdit"></i>
<i class="el-icon-check" v-if="item.isEdit"
@click="editData('model',item)"></i>
<!-- <i class="el-icon-check" v-if="item.isEdit"></i>-->
<i class="el-icon-check" v-if="item.isEdit" @click="editData('model',item)"></i>
</span>
<span class="config-dropdown-btn config-dropdown-btn-delete"
@click.stop="deleteData('model',item.id)"><i
<span class="config-dropdown-btn config-dropdown-btn-delete" @click.stop="deleteData('model',item.id)"><i
class="el-icon-delete"></i>
</span>
</div>
</div>
</li>
</ul>
</div>
@@ -258,20 +221,20 @@
</div>
</div>
</el-form-item>
<el-form-item label="购买日期" prop="purchaseDate">
<el-form-item :label="this.$t('asset.createAssetTab.purchaseDate')" prop="purchaseDate">
<div class="select-style">
<el-date-picker
v-model="assetData.purchaseDate"
value-format="yyyy-MM-dd"
type="date"
placeholder="选择日期">
:placeholder="this.$t('asset.createAssetTab.dataSelectTip')">
</el-date-picker>
</div>
</el-form-item>
<div style="font-size: 10px">IDC</div>
<div style="font-size: 10px">{{$t('asset.createAssetTab.dc')}}</div>
<el-divider></el-divider>
<!------------------------------------------IDC---------------------------------------------->
<el-form-item label="DC Name" prop="idcSelect">
<el-form-item :label="this.$t('asset.createAssetTab.dcName')" prop="idcSelect">
<div class="select-style">
<el-select v-model="assetData.idcId" clearable @change="getSingleIDCData">
<el-option
@@ -296,14 +259,14 @@
</div>
</div>
<div class="pop-window">
<span style="display: block;padding-bottom: 20px">标题</span>
<el-form-item label="DC Name">
<span style="display: block;padding-bottom: 20px">{{vm.$t('asset.createAssetTab.editIdcTab.title')}}</span>
<el-form-item :label="vm.$t('asset.createAssetTab.dcName')">
<el-input v-model="popIdcData.name"/>
</el-form-item>
<el-form-item label="Location">
<el-form-item :label="vm.$t('asset.createAssetTab.location')">
<el-input v-model="popIdcData.location"/>
</el-form-item>
<el-form-item label="负责人">
<el-form-item :label="vm.$t('asset.createAssetTab.principal')">
<el-select v-model="popIdcData.principal" clearable>
<el-option
v-for="item in idcUserData"
@@ -314,7 +277,7 @@
</el-option>
</el-select>
</el-form-item>
<el-form-item label="Tel">
<el-form-item :label="vm.$t('asset.createAssetTab.editIdcTab.tel')">
<el-input v-model="popIdcData.tel"/>
</el-form-item>
</div>
@@ -330,7 +293,7 @@
</div>
</div>
<span class="config-dropdown-btn" slot="reference"
@click.stop="getSingleIDCData(item.id,'edit')"><i
@click.stop="getSingleIDCData(item.id,'edit',item)"><i
class="el-icon-edit-outline"></i></span>
</el-popover>
<span class="config-dropdown-btn config-dropdown-btn-delete"
@@ -355,14 +318,14 @@
</div>
</div>
<div class="pop-window">
<span style="display: block;padding-bottom: 20px">标题</span>
<el-form-item label="DC Name">
<span style="display: block;padding-bottom: 20px">{{$t('asset.createAssetTab.AddIdcTab.title')}}</span>
<el-form-item :label="this.$t('asset.createAssetTab.AddIdcTab.dcName')">
<el-input v-model="addIdcData.name"/>
</el-form-item>
<el-form-item label="Location">
<el-form-item :label="this.$t('asset.createAssetTab.AddIdcTab.location')">
<el-input v-model="addIdcData.location"/>
</el-form-item>
<el-form-item label="负责人">
<el-form-item :label="this.$t('asset.createAssetTab.AddIdcTab.principal')">
<el-select v-model="addIdcData.principal" clearable>
<el-option
v-for="item in idcUserData"
@@ -373,7 +336,7 @@
</el-option>
</el-select>
</el-form-item>
<el-form-item label="Tel">
<el-form-item :label="this.$t('asset.createAssetTab.AddIdcTab.tel')">
<el-input v-model="addIdcData.tel"/>
</el-form-item>
</div>
@@ -393,20 +356,21 @@
</div>
</div>
</el-form-item>
<el-form-item label="Location">
<el-form-item :label="this.$t('asset.createAssetTab.location')">
<span>{{idcSelectedData.location}}</span>
</el-form-item>
<el-form-item label="负责人">
<el-form-item :label="this.$t('asset.createAssetTab.principal')">
<span>{{this.getPrincipalName(idcSelectedData.principal)}}</span>
</el-form-item>
<el-form-item label="Tel">
<el-form-item :label="this.$t('asset.createAssetTab.tel')">
<span>{{idcSelectedData.tel}}</span>
</el-form-item>
<el-divider></el-divider>
<!------------------------------------------cabinet---------------------------------------------->
<el-form-item label="机柜">
<el-form-item :label="this.$t('asset.createAssetTab.cabinet')">
<div class="select-style">
<el-select v-model="assetData.cabinetId" clearable
:disabled="assetData.idcId==''?true:false"
@change="getSingleCabinetData">
<el-option
v-for="item in cabinetOptionData"
@@ -431,22 +395,22 @@
</div>
</div>
<div class="pop-window">
<span style="display: block;padding-bottom: 20px">标题</span>
<el-form-item label="Name">
<span style="display: block;padding-bottom: 20px">{{vm.$t('asset.createAssetTab.editCabinetTab.title')}}</span>
<el-form-item :label="vm.$t('asset.createAssetTab.editCabinetTab.title')">
<el-input v-model="popCabinetData.name"/>
</el-form-item>
<el-form-item label="U Size">
<div>{{addCabinetData.uSize}}</div>
<el-form-item :label="vm.$t('asset.createAssetTab.editCabinetTab.uSize')">
<div>{{popCabinetData.uSize}}</div>
<el-slider v-model="popCabinetData.uSize"
:max="47"></el-slider>
</el-form-item>
<el-form-item label="Desc">
<el-form-item :label="vm.$t('asset.createAssetTab.editCabinetTab.remark')">
<el-input v-model="popCabinetData.remark"
type="textarea"
:rows="2"/>
</el-form-item>
<el-form-item label="IDC">
<el-select v-model="addCabinetData.idcId" clearable>
<el-form-item :label="vm.$t('asset.createAssetTab.editCabinetTab.DC')">
<el-select v-model="popCabinetData.idcId" clearable>
<el-option
v-for="item in IDCOptionData"
:key="item.key"
@@ -507,9 +471,9 @@
<!-- @click="getSingleIDCData(item.id,'edit')"><i-->
<!-- class="el-icon-edit-outline"></i></span>-->
<!-- </el-popover>-->
<span class="config-dropdown-btn config-dropdown-btn-delete"
@click.stop="deleteData('idc',item.id)"><i
class="el-icon-delete"></i></span>
<!-- <span class="config-dropdown-btn config-dropdown-btn-delete"-->
<!-- @click.stop="deleteData('idc',item.id)"><i-->
<!-- class="el-icon-delete"></i></span>-->
</el-option>
</el-select>
</el-form-item>
@@ -553,21 +517,21 @@
</div>
</div>
<div class="pop-window">
<span style="display: block;padding-bottom: 20px">标题</span>
<el-form-item label="Name">
<span style="display: block;padding-bottom: 20px">{{$t('asset.createAssetTab.AddCabinetTab.title')}}</span>
<el-form-item :label="this.$t('asset.createAssetTab.AddCabinetTab.name')">
<el-input v-model="addCabinetData.name"/>
</el-form-item>
<el-form-item label="U Size">
<el-form-item :label="this.$t('asset.createAssetTab.AddCabinetTab.uSize')">
<div>{{addCabinetData.uSize}}</div>
<el-slider v-model="addCabinetData.uSize"
:max="47"></el-slider>
</el-form-item>
<el-form-item label="Desc">
<el-form-item :label="this.$t('asset.createAssetTab.AddCabinetTab.remark')">
<el-input v-model="addCabinetData.remark"
type="textarea"
:rows="2"/>
</el-form-item>
<el-form-item label="IDC">
<el-form-item :label="this.$t('asset.createAssetTab.AddCabinetTab.DC')">
<el-select v-model="addCabinetData.idcId" clearable>
<el-option
v-for="item in IDCOptionData"
@@ -591,7 +555,7 @@
</div>
</div>
<div class="pop-window">
<span style="display: block;padding-bottom: 20px">标题</span>
<span style="display: block;padding-bottom: 20px">{{$t('asset.createAssetTab.editIdcTab.title')}}</span>
<el-form-item label="DC Name">
<el-input v-model="addCabIDCData.name"/>
</el-form-item>
@@ -626,7 +590,7 @@
</div>
</div>
<span class="config-dropdown-btn" slot="reference"
@click="getSingleIDCData(item.id,'edit')"><i
@click="getSingleIDCData(item.id,'edit',item)"><i
class="el-icon-edit-outline"></i></span>
</el-popover>
<span class="config-dropdown-btn config-dropdown-btn-delete"
@@ -652,29 +616,40 @@
</div>
</div>
</el-form-item>
<el-form-item label="U Size">
<el-form-item :label="this.$t('asset.createAssetTab.uSize')">
<span>{{cabinetSelectedData.uSize}}</span>
</el-form-item>
<el-form-item label="Desc">
<el-form-item :label="this.$t('asset.createAssetTab.remark')">
<span>{{cabinetSelectedData.remark}}</span>
</el-form-item>
<div style="font-size: 10px">CLI Account</div>
<div style="font-size: 10px">{{$t('asset.createAssetTab.cli')}}</div>
<el-divider></el-divider>
<el-form-item label="登录方式">
<el-form-item :label="this.$t('asset.createAssetTab.loginType')">
<el-radio-group size="mini" v-model="assetData.accounts[0].authType">
<el-radio-button label='1'>Password</el-radio-button>
<el-radio-button label='2'>SSH私钥</el-radio-button>
<el-radio-button label='1'>{{$t('asset.createAssetTab.password')}}</el-radio-button>
<el-radio-button label='2'>{{$t('asset.createAssetTab.ssh')}}</el-radio-button>
</el-radio-group>
</el-form-item >
<el-form-item label="Account">
<el-form-item :label="this.$t('asset.createAssetTab.account')" label-position="top">
<el-input v-model="assetData.accounts[0].user"/>
</el-form-item>
<el-form-item label="Password">
<el-input v-model="assetData.accounts[0].pwd"/>
<el-form-item :label="this.$t('asset.createAssetTab.password')" v-if="assetData.accounts[0].authType==1">
<el-input type="password" v-model="assetData.accounts[0].pwd"/>
</el-form-item>
<el-form-item label="Port">
<el-form-item :label="this.$t('asset.createAssetTab.port')">
<el-input v-model="assetData.accounts[0].port"/>
</el-form-item>
<el-form-item :label="this.$t('asset.createAssetTab.ssh')" v-if="assetData.accounts[0].authType==2">
<el-upload
class="upload-demo"
ref="upload"
action=""
:on-change="handleChange"
:auto-upload="false"
>
<el-button size="small" type="primary">{{$t('asset.createAssetTab.clickToUpload')}}</el-button>
</el-upload>
</el-form-item>
</div>
</el-form>
<div class="">
@@ -698,7 +673,9 @@ export default {
addUnitShow: Boolean
},
data() {
const vm = window.vm;
return {
vm:vm,
assetData: {
id: '',
sn: '',
@@ -709,7 +686,7 @@ export default {
cabinetId: '',
modelId: '',
accounts: [{
authType: '',
authType: 1,
user: '',
pwd: '',
cert: '',
@@ -847,11 +824,48 @@ export default {
},
},
methods: {
cancelEdit(data){
if(data===false){
this.getAssetTypeOptionData()
}
},
clickOutSide(data) {
if (data) {
this.editQuit()
this.modelCount = ''
this.assetTypeData.value = ''
this.addVendorData.value = ''
this.addNewModelData.value = ''
this.vendorCount = ''
this.modelCount = ''
}
},
editQuit() {
for (let i of this.assetTypeOptionData) {
if (i.isEdit === true) {
i.isEdit = false
this.getAssetTypeOptionData()
}
}
for (let i of this.vendorUlData) {
if (i.isEdit === true) {
i.isEdit = false
this.getVendorOptionData()
}
}
for (let i of this.modelUlData) {
if (i.isEdit === true) {
i.isEdit = false
this.getModelOptionData(this.assetType, this.vendorCode)
}
}
},
getIDCOptionData() {
this.$get('idc').then(response => {
if (response.code === 200) {
this.IDCOptionData = response.data.list;
this.markOptionData(this.IDCOptionData)
this.$store.state.assetData.idcData = this.IDCOptionData
}
})
},
@@ -915,19 +929,6 @@ export default {
principal: '',
tel: ''
}
if (data === 'asset') {
this.assetData.modelId = this.assetData.modelId.join(',').split(',')[1]
this.$put('asset', this.assetData).then(res => {
if (res.code === 200) {
const h = this.$createElement;
this.$notify({
message: h('i', {style: 'color: teal'}, '修改成功'),
duration: 2000
});
this.$emit('refreshData', 'true')
}
})
} else {
if (data === 'model') {
item.vendorCode = this.vendorCode
item.typeCode = this.assetType
@@ -947,7 +948,6 @@ export default {
item.idcId = this.popCabinetData.idcId
}
if (data === 'idc') {
console.log(this.popIdcData)
idcData.id = item.id
idcData.name = this.popIdcData.name
idcData.location = this.popIdcData.location
@@ -964,8 +964,8 @@ export default {
item = idcData
}
this.$put(data, item).then(res => {
if (res.code === 200) {
const h = this.$createElement;
if (res.code === 200) {
this.$notify({
message: h('i', {style: 'color: teal'}, '修改成功'),
duration: 2000
@@ -974,39 +974,64 @@ export default {
this.getAllModelOptionData();
this.getCabinetOptionData('')
this.$emit('refreshData', 'true')
} else {
this.$notify({
message: h('i', {style: 'color: teal'}, res.msg),
duration: 2000
});
}
})
}
},
addNewData(type) {
console.log(type)
if (type === 'IDC') {
this.$post('idc', this.addIdcData).then(res => {
if (res.code === 200) {
const h = this.$createElement;
if (res.code === 200) {
this.$notify({
message: h('i', {style: 'color: teal'}, '添加成功'),
duration: 2000
});
this.getIDCOptionData()
this.getAssetData()
} else {
this.$notify({
message: h('i', {style: 'color: teal'}, res.msg),
duration: 2000
});
}
})
}
if (type === 'assetType') {
this.$post('sys/dict/save', this.assetTypeData).then(res => {
const h = this.$createElement;
if (res.code === 200) {
this.getAssetTypeOptionData()
const h = this.$createElement;
this.$notify({
message: h('i', {style: 'color: teal'}, '添加成功'),
duration: 2000
});
} else {
this.$notify({
message: h('i', {style: 'color: teal'}, res.msg),
duration: 2000
});
}
})
}
if (type === 'asset') {
this.assetData.modelId = this.assetData.modelId.join(',').split(',')[1]
let modelId = ''
let authType = ''
console.log(this.assetData.modelId)
if(this.assetData.modelId !== ''){
modelId = this.assetData.modelId.join(',').split(',')[1]
}else{
this.assetData.modelId=''
}
if(this.assetData.accounts[0].user === ''){
authType = ''
}else{
authType = this.assetData.accounts[0].authType
}
let form = new FormData();
form.append("sn", this.assetData.sn);
form.append("host", this.assetData.host);
@@ -1014,31 +1039,42 @@ export default {
form.append("purchaseDate", this.assetData.purchaseDate);
form.append("idcId", this.assetData.idcId);
form.append("cabinetId", this.assetData.cabinetId);
form.append("modelId", this.assetData.modelId);
form.append("accounts[0].authType", this.assetData.accounts[0].authType);
form.append("modelId", modelId);
form.append("accounts[0].authType", authType);
form.append("accounts[0].user", this.assetData.accounts[0].user);
form.append("accounts[0].pwd", this.assetData.accounts[0].pwd);
form.append("accounts[0].port", this.assetData.accounts[0].port);
this.$post('asset', form).then(res => {
if (res.code === 200) {
const h = this.$createElement;
if (res.code === 200) {
this.$notify({
message: h('i', {style: 'color: teal'}, '添加成功'),
duration: 2000
});
this.$emit('refreshData', 'true')
this.sendStateData('close')
}else{
this.$notify({
message: h('i', {style: 'color: teal'}, res.msg),
duration: 2000
});
}
})
this.$emit('refreshData', 'true')
}
if (type === 'vendor') {
const h = this.$createElement;
this.$post('sys/dict/save', this.addVendorData).then(res => {
if (res.code === 200) {
const h = this.$createElement;
this.$notify({
message: h('i', {style: 'color: teal'}, '添加成功'),
duration: 2000
});
this.getVendorOptionData()
}else{
this.$notify({
message: h('i', {style: 'color: teal'}, res.msg),
duration: 2000
});
}
})
}
@@ -1111,6 +1147,7 @@ export default {
data.forEach(item => {
this.$set(item, 'isEdit', false);
this.$set(item, 'oldName', item.value);
this.$set(item, 'modelOldName', item.name);
this.$set(item, item.name, false)
this.$set(item, item.id, false)
this.$set(item, item.id + item.name, false)
@@ -1150,7 +1187,8 @@ export default {
}
this.vendorTypeOptionData = result
},
editOptionData(item) {
editVendorOptionData(item,data,index){
this.vendorCount = index
if (!item.isEdit) {
item.isEdit = true;
} else {
@@ -1160,12 +1198,54 @@ export default {
item.isEdit = false;
}
}
if(data==='vendor') {
for (let i = 0; i < this.vendorUlData.length; i++) {
const element = this.vendorUlData[i];
if (item.id !== element.id) {
element.isEdit = false
element.value = element.oldName
}
}
}
},
editOptionData(item,data,index) {
this.modelCount = index;
if (!item.isEdit) {
item.isEdit = true;
} else {
if (item.name !== item.oldName) {
item.isEdit = false;
} else {
item.isEdit = false;
}
}
if(data==='type') {
for (let i = 0; i < this.assetTypeOptionData.length; i++) {
const element = this.assetTypeOptionData[i];
if (item.id !== element.id) {
element.isEdit = false
element.value = element.oldName
}
}
}
if(data==='model') {
for (let i = 0; i < this.modelUlData.length; i++) {
const element2 = this.modelUlData[i];
if (item.id !== element2.id) {
element2.isEdit = false
element2.name = element2.modelOldName
}
}
}
},
handleChange(file) {
this.assetData.accounts[0].file = file.raw
},
delOptionData(data) {
},
sendStateData(data) {
this.$emit('sendStateData', 'close')
this.initAdd()
},
initAdd() {
this.assetType = ''
@@ -1176,15 +1256,21 @@ export default {
this.assetData.idcId = ''
this.assetData.cabinetId = ''
this.assetData.modelId = ''
this.assetData.accounts[0].authType =1
this.assetData.accounts[0].user = ''
this.assetData.accounts[0].pwd = ''
this.assetData.accounts[0].port = ''
this.assetData.accounts[0].file = ''
this.idcSelectedData.location = ''
this.idcSelectedData.principal = ''
this.idcSelectedData.tel = ''
this.cabinetSelectedData.uSize = 0
this.cabinetSelectedData.remark = ''
},
editing() {
editing(item) {
console.log(item)
},
getSingleIDCData(data, item) {
getSingleIDCData(data, item, itemData) {
if (item !== 'edit') {
this.idcSelectedData = '';
this.IDCOptionData.forEach(item => {
@@ -1197,6 +1283,7 @@ export default {
this.cabinetSelectedData.uSize = ''
this.cabinetSelectedData.remark = null
} else {
this.clickFlush('idc', itemData)
this.IDCOptionData.forEach(item => {
if (item.id === data) {
this.popIdcData.name = item.name
@@ -1222,12 +1309,15 @@ export default {
}
})
} else {
this.clickFlush('cabinet', item)
item[item.name] = !item[item.name]
this.cabinetOptionData.forEach(items => {
if (items.id === data) {
console.log(items)
this.popCabinetData.name = items.name
this.popCabinetData.uSize = items.uSize
this.popCabinetData.remark = items.remark
this.popCabinetData.idcId = items.idcId
}
})
}
@@ -1237,7 +1327,7 @@ export default {
this.vendorCode = item.code;
this.getModelOptionData(this.assetType, this.vendorCode)
},
clickState(index, item, data,list) {
clickState(index, item, data) {
if (data === 'type') {
this.modelCount = index;
this.tempData = item;
@@ -1271,9 +1361,17 @@ export default {
}
if (data === 'idc') {
this.popIDCVisible = false
this.addIdcData.name= '',
this.addIdcData.location= '',
this.addIdcData.principal= '',
this.addIdcData.tel= ''
}
if (data === 'cabinet') {
this.popCabinetVisible = false
this.addCabinetData.name = ''
this.addCabinetData.uSize = 0
this.addCabinetData.remark = ''
this.addCabinetData.idcId = ''
}
},
editPopoverClose(data) {
@@ -1308,7 +1406,33 @@ export default {
} else {
return "-";
}
},
clickFlush(type, itemData) {
if (type === 'idc') {
for (let i = 0; i < this.IDCOptionData.length; i++) {
const element = this.IDCOptionData[i];
if (element.id === itemData.id) {
setTimeout(() => {
element[element.name] = true;
}, 100)
} else {
element[element.name] = false
}
}
}
if (type === 'cabinet') {
for (let i = 0; i < this.cabinetOptionData.length; i++) {
const element = this.cabinetOptionData[i];
if (element.id === itemData.id) {
setTimeout(() => {
element[element.name] = true;
}, 100)
} else {
element[element.name] = false
}
}
}
},
},
mounted() {
this.getUserData()

245
nezha-fronted/src/components/page/asset/assetEditUnit.vue
View File

@@ -1,6 +1,6 @@
<template>
<transition name="right-box">
<div class="right-menu" v-if="editUnitShow">
<div class="right-menu" v-if="editUnitShow" @click="editQuit">
<div class="right-box-top-btns">
<div class="right-box-top-btn right-box-top-btn-full" @click.stop="sendStateData('close')">
<div class="right-box-btn-icon">
@@ -64,7 +64,7 @@
<!------------------------------------------资产类型---------------------------------------------->
<el-form-item label="资产类型">
<div class="select-style">
<el-select v-if="!tabView" v-model="assetType" clearable
<el-select v-if="!tabView" v-model="assetType" clearable @visible-change="cancelEdit"
@change="getAllModelOptionData()">
<el-option
v-for="item in assetTypeOptionData"
@@ -78,7 +78,7 @@
<el-input type="text" v-model="item.value" size="mini"/>
</span>
<span class="config-dropdown-btn"
@click.stop="editOptionData(item)">
@click.stop="editOptionData(item,'type')">
<i class="el-icon-edit-outline" v-if="!item.isEdit"></i>
<i class="el-icon-check" v-if="item.isEdit"
@click="editData('sys/dict/update',item)"></i>
@@ -122,20 +122,14 @@
:key="index">
<div>
<span v-if="!item.isEdit">{{ item.value }}</span>
<span class="config-dropdown-label-input"
v-if="item.isEdit"
@click.stop="editing">
<span class="config-dropdown-label-input" v-if="item.isEdit" @click.stop="editing">
<input type="text" v-model="item.value" size="mini"/>
</span>
<span class="config-dropdown-btn"
@click.stop="editOptionData(item,index)">
<span class="config-dropdown-btn" @click.stop="editOptionData(item,'type',index)">
<i class="el-icon-edit-outline" v-if="!item.isEdit"></i>
<i class="el-icon-check" v-if="item.isEdit"
@click="editData('sys/dict/update',item)"></i>
<i class="el-icon-check" v-if="item.isEdit" @click="editData('sys/dict/update',item)"></i>
</span>
<span class="config-dropdown-btn config-dropdown-btn-delete"
@click.stop="deleteData('/sys/dict/delete',item.id)"><i
class="el-icon-delete"></i>
<span class="config-dropdown-btn config-dropdown-btn-delete" @click.stop="deleteData('/sys/dict/delete',item.id)"><i class="el-icon-delete"></i>
</span>
</div>
</li>
@@ -210,7 +204,7 @@
<input type="text" v-model="item.value" size="mini"/>
</span>
<span class="config-dropdown-btn"
@click.stop="editOptionData(item)">
@click.stop="editVendorOptionData(item,'vendor',index)">
<i class="el-icon-edit-outline" v-if="!item.isEdit"></i>
<i class="el-icon-check" v-if="item.isEdit"
@click="editData('sys/dict/update',item)"></i>
@@ -243,7 +237,7 @@
<input type="text" v-model="item.name" size="mini"/>
</span>
<span class="config-dropdown-btn"
@click.stop="editOptionData(item)">
@click.stop="editOptionData(item,'model',index)">
<i class="el-icon-edit-outline" v-if="!item.isEdit"></i>
<i class="el-icon-check" v-if="item.isEdit"
@click="editData('model',item)"></i>
@@ -286,7 +280,7 @@
</div>
<span v-if="tabView">{{assetData.purchaseDate}}</span>
</el-form-item>
<div style="font-size: 10px">IDC</div>
<div style="font-size: 10px">DC</div>
<el-divider></el-divider>
<!------------------------------------------IDC---------------------------------------------->
<el-form-item label="DC Name">
@@ -302,6 +296,7 @@
<el-popover
placement="left"
v-model="item[item.name]"
trigger="manual"
>
<div class="pop-window-assetType-content">
<div class="right-box-top-btns">
@@ -348,7 +343,7 @@
</div>
</div>
<span class="config-dropdown-btn" slot="reference"
@click.stop="getSingleIDCData(item.id,'edit')"><i
@click.stop="getSingleIDCData(item.id,'edit',item)"><i
class="el-icon-edit-outline"></i></span>
</el-popover>
<span class="config-dropdown-btn config-dropdown-btn-delete"
@@ -359,7 +354,6 @@
<div class="el-select-add-btn">
<el-popover
placement="left"
trigger="click"
v-model="editPopIDCVisible"
>
<div class="pop-window-assetType-content">
@@ -428,10 +422,11 @@
<el-form-item label="机柜">
<div class="select-style" v-if="!tabView">
<el-select clearable v-model="assetData.cabinetId" clearable
:disabled="assetData.idcId==''?true:false"
@change="getSingleCabinetData">
<el-option
v-for="item in cabinetOptionData"
:key="item.key"
:key="item.id"
:label="item.name"
:value="item.id"
>
@@ -466,23 +461,23 @@
type="textarea"
:rows="2"/>
</el-form-item>
<el-form-item label="IDC">
<el-form-item label="DC">
<el-select v-model="popCabinetData.idcId" clearable>
<el-option
v-for="item in IDCOptionData"
:key="item.key"
:label="item.name"
:value="item.id"
v-for="ite in item.children"
:key="ite.id"
:label="ite.name"
:value="ite.id"
>
<span>{{ item.name }}</span>
<span>{{ ite.name }}</span>
<el-popover
placement="top"
v-model="item[item.name+item.id]"
placement="left"
v-model="ite[ite.name+ite.id]"
>
<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+item.id] = false">
@click="ite[ite.name+ite.id] = false">
<div class="right-box-btn-icon">
<i class="el-icon-close"></i>
</div>
@@ -516,20 +511,20 @@
</div>
<div class="right-box-bottom-btns">
<div class="right-box-bottom-btn right-box-bottom-btn-cancel"
@click.stop="item[item.name+item.id]= false">
@click="ite[ite.name+ite.id]= false">
{{$t('overall.cancel')}}
</div>
<div class="right-box-bottom-btn right-box-bottom-btn-50"
@click="editData('idc',item,'CabIDC')">
@click="editData('idc',ite,'CabIDC')">
{{$t('overall.save')}}
</div>
</div>
<span class="config-dropdown-btn" slot="reference"
@click="getSingleIDCData(item.id,'edit')"><i
@click="getSingleIDCData(ite.id,'edit',ite)">11<i
class="el-icon-edit-outline"></i></span>
</el-popover>
<span class="config-dropdown-btn config-dropdown-btn-delete"
@click.stop="deleteData('idc',item.id)"><i
@click.stop="deleteData('idc',ite.id)"><i
class="el-icon-delete"></i></span>
</el-option>
</el-select>
@@ -646,7 +641,7 @@
</div>
</div>
<span class="config-dropdown-btn" slot="reference"
@click="getSingleIDCData(item.id,'edit')"><i
@click="getSingleIDCData(item.id,'edit',item)"><i
class="el-icon-edit-outline"></i></span>
</el-popover>
<span class="config-dropdown-btn config-dropdown-btn-delete"
@@ -690,12 +685,23 @@
<el-form-item label="Account">
<el-input v-model="assetData.accounts[0].user"/>
</el-form-item>
<el-form-item label="Password">
<el-input v-model="assetData.accounts[0].pwd"/>
<el-form-item label="pwd" v-if="assetData.accounts[0].authType==1">
<el-input type="password" v-model="assetData.accounts[0].pwd"/>
</el-form-item>
<el-form-item label="Port">
<el-input v-model="assetData.accounts[0].port"/>
</el-form-item>
<el-form-item label="ssh秘钥" v-if="assetData.accounts[0].authType==2">
<el-upload
class="upload-demo"
ref="upload"
action=""
:on-change="handleChange"
:auto-upload="false"
>
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
</el-form-item>
</div>
</el-form>
<div class="">
@@ -730,11 +736,13 @@ export default {
cabinetId: '',
modelId: '',
accounts: [{
id: '',
authType: '',
user: '',
pwd: '',
cert: '',
port: '',
file: ''
}]
},
accountData: '',
@@ -887,6 +895,11 @@ export default {
},
},
methods: {
cancelEdit(data){
if(data===false){
this.getAssetTypeOptionData()
}
},
clickOutSide(data) {
if (data) {
this.editQuit()
@@ -935,14 +948,17 @@ export default {
this.assetData.idcId = response.data.list[0].idc.id
this.assetData.cabinetId = response.data.list[0].cabinet == null ? '' : response.data.list[0].cabinet.id
this.assetData.purchaseDate = response.data.list[0].purchaseDate
this.assetData.accounts[0].id = response.data.list[0].accounts[0].id
this.assetData.accounts[0].authType = response.data.list[0].accounts[0].authType
this.assetData.accounts[0].user = response.data.list[0].accounts[0].user
this.assetData.accounts[0].pwd = response.data.list[0].accounts[0].pwd
this.assetData.accounts[0].port = response.data.list[0].accounts[0].port
this.idcSelectedData.location = response.data.list[0].idc.location
this.idcSelectedData.principal = response.data.list[0].idc.principal
this.idcSelectedData.tel = response.data.list[0].idc.tel
this.cabinetSelectedData.uSize = response.data.list[0].cabinet == null ? '' : response.data.list[0].cabinet.uSize
this.cabinetSelectedData.remark = response.data.list[0].cabinet == null ? '' : response.data.list[0].cabinet.remark
this.getAllModelOptionData(this.assetType)
console.log(this.pageObj.id)
this.getAccountData(this.pageObj.id)
}
})
}
@@ -952,6 +968,7 @@ export default {
if (response.code === 200) {
this.checkListData = this.IDCOptionData = response.data.list;
this.markOptionData(this.IDCOptionData)
}
})
},
@@ -967,6 +984,10 @@ export default {
if (response.code === 200) {
this.cabinetOptionData = response.data.list;
this.markOptionData(this.cabinetOptionData)
for (let i = 0; i < this.cabinetOptionData.length; i++) {
this.$set(this.cabinetOptionData[i], 'children', this.IDCOptionData)
}
console.log(this.cabinetOptionData)
}
})
},
@@ -1001,14 +1022,6 @@ export default {
}
})
},
getAccountData(data) {
this.$get('account?assetId=' + data).then(response => {
if (response.code === 200) {
this.accountData = response.data.list
console.log(this.accountData)
}
})
},
editData(data, item, mark) {
let obj = {
id: '',
@@ -1034,19 +1047,26 @@ export default {
form.append("idcId", this.assetData.idcId);
form.append("cabinetId", this.assetData.cabinetId);
form.append("modelId", this.assetData.modelId);
form.append("accounts[0].id", this.assetData.accounts[0].id);
form.append("accounts[0].authType", this.assetData.accounts[0].authType);
form.append("accounts[0].user", this.assetData.accounts[0].user);
form.append("accounts[0].pwd", this.assetData.accounts[0].pwd);
form.append("accounts[0].port", this.assetData.accounts[0].port);
form.append("cert", this.assetData.accounts[0].file);
this.$put('asset', form).then(res => {
if (res.code === 200) {
const h = this.$createElement;
if (res.code === 200) {
this.$notify({
message: h('i', {style: 'color: teal'}, '修改成功'),
duration: 2000
});
this.pageObj.id = ''
this.$emit('refreshData', 'true')
} else {
this.$notify({
message: h('i', {style: 'color: teal'}, res.msg),
duration: 2000
});
}
})
} else {
@@ -1087,8 +1107,8 @@ export default {
item = idcData
}
this.$put(data, item).then(res => {
if (res.code === 200) {
const h = this.$createElement;
if (res.code === 200) {
this.$notify({
message: h('i', {style: 'color: teal'}, '修改成功'),
duration: 2000
@@ -1097,13 +1117,18 @@ export default {
this.getCabinetOptionData('')
this.getAllModelOptionData();
this.$emit('refreshData', 'true')
} else {
this.$notify({
message: h('i', {style: 'color: teal'}, res.msg),
duration: 2000
});
}
})
}
},
addNewData(type) {
if (type === 'IDC') {
console.log(this.addIdcData)
const h = this.$createElement;
this.$post('idc', this.addIdcData).then(res => {
if (res.code === 200) {
const h = this.$createElement;
@@ -1113,30 +1138,45 @@ export default {
});
this.getIDCOptionData()
this.getAssetData()
} else {
this.$notify({
message: h('i', {style: 'color: teal'}, res.msg),
duration: 2000
});
}
})
}
if (type === 'assetType') {
this.$post('sys/dict/save', this.assetTypeData).then(res => {
const h = this.$createElement;
if (res.code === 200) {
this.getAssetTypeOptionData()
const h = this.$createElement;
this.$notify({
message: h('i', {style: 'color: teal'}, '添加成功'),
duration: 2000
});
} else {
this.$notify({
message: h('i', {style: 'color: teal'}, res.msg),
duration: 2000
});
}
})
}
if (type === 'vendor') {
const h = this.$createElement;
this.$post('sys/dict/save', this.addVendorData).then(res => {
if (res.code === 200) {
const h = this.$createElement;
this.$notify({
message: h('i', {style: 'color: teal'}, '添加成功'),
duration: 2000
});
this.getVendorOptionData()
} else {
this.$notify({
message: h('i', {style: 'color: teal'}, res.msg),
duration: 2000
});
}
})
}
@@ -1144,16 +1184,15 @@ export default {
this.addNewModelData.typeCode = this.assetType
this.addNewModelData.vendorCode = this.vendorCode
this.$post('model', this.addNewModelData).then(res => {
const h = this.$createElement;
if (res.code === 200) {
this.getModelOptionData(this.assetType, this.vendorCode)
const h = this.$createElement;
this.$notify({
message: h('i', {style: 'color: teal'}, '添加成功'),
duration: 2000
});
this.getAllModelOptionData(this.assetType)
} else {
const h = this.$createElement;
this.$notify({
message: h('i', {style: 'color: teal'}, res.msg),
duration: 2000
@@ -1171,7 +1210,6 @@ export default {
duration: 2000
});
this.getCabinetOptionData(this.addCabinetData.idcId)
this.popoverClose('cabinet')
} else {
this.$notify({
message: h('i', {style: 'color: teal'}, res.msg),
@@ -1207,6 +1245,7 @@ export default {
data.forEach(item => {
this.$set(item, 'isEdit', false);
this.$set(item, 'oldName', item.value);
this.$set(item, 'modelOldName', item.name);
this.$set(item, item.name, false)
this.$set(item, item.id, false)
this.$set(item, item.id + item.name, false)
@@ -1246,8 +1285,28 @@ export default {
}
this.vendorTypeOptionData = result
},
editOptionData(item, index) {
console.log(index)
editVendorOptionData(item,data,index){
this.vendorCount = index
if (!item.isEdit) {
item.isEdit = true;
} else {
if (item.name !== item.oldName) {
item.isEdit = false;
} else {
item.isEdit = false;
}
}
if(data==='vendor') {
for (let i = 0; i < this.vendorUlData.length; i++) {
const element = this.vendorUlData[i];
if (item.id !== element.id) {
element.isEdit = false
element.value = element.oldName
}
}
}
},
editOptionData(item,data,index) {
this.modelCount = index;
if (!item.isEdit) {
item.isEdit = true;
@@ -1258,6 +1317,24 @@ export default {
item.isEdit = false;
}
}
if(data==='type') {
for (let i = 0; i < this.assetTypeOptionData.length; i++) {
let element = this.assetTypeOptionData[i];
if (item.id !== element.id) {
element.isEdit = false
element.value = element.oldName
}
}
}
if(data==='model') {
for (let i = 0; i < this.modelUlData.length; i++) {
let element = this.modelUlData[i];
if (item.id !== element.id) {
element.isEdit = false
element.value = element.modelOldName
}
}
}
},
delOptionData(data) {
},
@@ -1268,7 +1345,7 @@ export default {
},
editing() {
},
getSingleIDCData(data, item) {
getSingleIDCData(data, item, itemData) {
if (item !== 'edit') {
this.idcSelectedData = '';
this.IDCOptionData.forEach(item => {
@@ -1281,6 +1358,7 @@ export default {
this.cabinetSelectedData.uSize = ''
this.cabinetSelectedData.remark = null
} else {
this.clickFlush('idc', itemData)
this.IDCOptionData.forEach(item => {
if (item.id === data) {
this.popIdcData.name = item.name
@@ -1306,14 +1384,17 @@ export default {
}
})
} else {
this.clickFlush('cabinet', item)
item[item.name] = !item[item.name]
this.cabinetOptionData.forEach(items => {
if (items.id === data) {
this.popCabinetData.name = items.name
this.popCabinetData.uSize = items.uSize
this.popCabinetData.remark = items.remark
}
})
console.log(this.cabinetOptionData)
}
},
getSingleAsset(data) {
@@ -1324,19 +1405,16 @@ export default {
this.vendorCount = index;
this.vendorCode = item.code;
this.getModelOptionData(this.assetType, this.vendorCode)
}
,
},
pageNo(val) {
this.pageObj.pageNo = val;
this.getAssetData()
}
,
},
pageSize(val) {
this.pageObj.pageSize = val;
this.getAssetData()
},
clickState(index, item, data) {
console.log(index, item)
if (data === 'type') {
this.modelCount = index;
this.tempData = item;
@@ -1358,22 +1436,8 @@ export default {
this.tempData = ''
}
},
popoverClose(data) {
if (data === 'type') {
this.modelCount = ''
this.popTypeVisible = false
}
if (data === 'vendor') {
this.popCompVisible = false;
this.modelUlData = '';
this.vendorCount = ''
}
if (data === 'idc') {
this.popIDCVisible = false
}
if (data === 'cabinet') {
this.popCabinetVisible = false
}
handleChange(file) {
this.assetData.accounts[0].file = file.raw
},
editPopoverClose(data) {
if (data === 'type') {
@@ -1414,9 +1478,34 @@ export default {
flushData() {
this.getAssetData();
},
clickFlush(type, itemData) {
if (type === 'idc') {
for (let i = 0; i < this.IDCOptionData.length; i++) {
const element = this.IDCOptionData[i];
if (element.id === itemData.id) {
setTimeout(() => {
element[element.name] = true;
}, 100)
} else {
element[element.name] = false
}
}
}
if (type === 'cabinet') {
for (let i = 0; i < this.cabinetOptionData.length; i++) {
const element = this.cabinetOptionData[i];
if (element.id === itemData.id) {
setTimeout(() => {
element[element.name] = true;
}, 100)
} else {
element[element.name] = false
}
}
}
},
},
mounted() {
this.getCabinetOptionData('')
this.getUserData()
this.getIDCOptionData();
this.getVendorOptionData();

180
nezha-fronted/src/components/page/asset/cloneChat.vue Normal file
View File

@@ -0,0 +1,180 @@
<template>
<div>
<div class="title">
<div class="submenu">
<el-menu class="el-menu-demo" mode="horizontal">
<el-submenu index="1">
<template slot="title">操作</template>
<el-menu-item index="1-1">
<template>
<span @click="cloneChat">克隆会话</span>
</template>
</el-menu-item>
<el-menu-item index="1-2">
<template>
<span @click="dialogVisible = true">上传文件</span>
</template>
</el-menu-item>
</el-submenu>
<el-submenu index="2">
<template slot="title">打开</template>
<template v-for="(item, index) in enableAsset">
<el-menu-item :index="'2-' + index" @click="createCli(item)">{{item.host}}</el-menu-item>
</template>
</el-submenu>
</el-menu>
</div>
<div class="title-input">
<input style="height: 20px;width: 250px"></input>
<button>发送</button>
</div>
</div>
<el-dialog
:visible="dialogVisible"
width="30%"
:modal="true">
<label>文件路径</label>
<el-input v-model="uploadFile.path"></el-input>
<div style="padding-top: 20px">
<el-upload
class="upload-demo"
ref="upload"
action=""
:on-change="handleChange"
:auto-upload="false"
>
<el-button size="small" type="primary">{{$t('asset.createAssetTab.clickToUpload')}}</el-button>
</el-upload>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="upload">确 定</el-button>
</span>
</el-dialog>
<my-terminal :terminal="terminal" :token="token"></my-terminal>
</div>
</template>
<script>
import Console from './Console'
export default {
name: 'cloneChat',
components: {
'my-terminal': Console
},
data() {
return {
dialogVisible: false,
terminal: {
pid: 1,
name: 'terminal',
cols: 400,
rows: 400
},
obj:{
id:''
},
uploadFile: {
file: '',
path: '',
token: ''
},
pageObj: {
pageNo: 1,
pageSize: 100,
},
enableAsset:'',
host:'',
token:'',
routeData: this.$route.query,
}
},
watch: {
},
methods: {
createCli(item){
let routeData = this.$router.resolve({
name: "newChat",
query: {
host: item.host,
accountId:item.accounts[0].id
}
});
window.open(routeData.href);
},
cloneChat(){
let routeData = this.$router.resolve({
name: "cloneChat",
query: {
host:this.routeData.host,
accountId:this.routeData.accountId
}
});
window.open(routeData.href);
},
getConnect(id,token) {
this.$get('account/reopen.do?id='+id+"&token="+token).then(res => {
if (res.code === 200) {
this.token = res.data.token
console.log(this.token)
sessionStorage.setItem("cliToken", this.token);
}
})
},
handleChange(file) {
this.uploadFile.file = file.raw
},
upload() {
this.uploadFile.token = this.token
let form = new FormData();
form.append("token", this.token);
form.append("file", this.uploadFile.file);
form.append("path", this.uploadFile.path);
this.$post('account/upload.do', form).then(res => {
if (res.code === 200) {
console.log(res)
}
})
},
getAssetData() {
this.$get('asset', this.pageObj).then(response => {
if (response.code === 200) {
this.assetData = response.data.list;
this.enableAsset = this.assetData.filter(item => {
return item.accounts.length > 0
})
}
})
},
},
mounted() {
if (this.routeData) {
this.host = this.routeData.host
document.title = this.host
}
this.getAssetData()
if(sessionStorage.getItem('cliToken')){
console.log(this.routeData.accountId,sessionStorage.getItem('cliToken'))
this.getConnect(this.routeData.accountId,sessionStorage.getItem('cliToken'))
}
},
}
</script>
<style scoped>
.title{
display: inline-block;
}
.submenu {
float: left;
width: 500px;
font-size: 22px;
}
.title-input{
position: absolute;
left: 300px;
top:19px
}
</style>

177
nezha-fronted/src/components/page/asset/newChat.vue Normal file
View File

@@ -0,0 +1,177 @@
<template>
<div>
<div class="title">
<div class="submenu">
<el-menu class="el-menu-demo" mode="horizontal">
<el-submenu index="1">
<template slot="title">操作</template>
<el-menu-item index="1-1">
<template>
<span @click="cloneChat">克隆会话</span>
</template>
</el-menu-item>
<el-menu-item index="1-2">
<template>
<span @click="dialogVisible = true">上传文件</span>
</template>
</el-menu-item>
</el-submenu>
<el-submenu index="2">
<template slot="title">打开</template>
<template v-for="(item, index) in enableAsset">
<el-menu-item :index="'2-' + index" @click="createCli(item)">{{item.host}}</el-menu-item>
</template>
</el-submenu>
</el-menu>
</div>
<div class="title-input">
<input style="height: 20px;width: 250px"></input>
<button>发送</button>
</div>
</div>
<el-dialog
:visible="dialogVisible"
width="30%"
:modal="true">
<label>文件路径</label>
<el-input v-model="uploadFile.path"></el-input>
<div style="padding-top: 20px">
<el-upload
class="upload-demo"
ref="upload"
action=""
:on-change="handleChange"
:auto-upload="false"
>
<el-button size="small" type="primary">{{$t('asset.createAssetTab.clickToUpload')}}</el-button>
</el-upload>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="upload">确 定</el-button>
</span>
</el-dialog>
<my-terminal :terminal="terminal" :token="token"></my-terminal>
</div>
</template>
<script>
import Console from './Console'
export default {
name: 'cloneChat',
components: {
'my-terminal': Console
},
data() {
return {
dialogVisible: false,
terminal: {
pid: 1,
name: 'terminal',
cols: 400,
rows: 400
},
obj:{
id:''
},
uploadFile: {
file: '',
path: '',
token: ''
},
pageObj: {
pageNo: 1,
pageSize: 100,
},
enableAsset:'',
host:'',
token:'',
routeData: this.$route.query,
}
},
watch: {
},
methods: {
createCli(item){
let routeData = this.$router.resolve({
name: "newChat",
query: {
host: item.host,
accountId:item.accounts[0].id
}
});
window.open(routeData.href);
},
cloneChat(){
let routeData = this.$router.resolve({
name: "cloneChat",
query: {
host:this.routeData.host,
accountId:this.routeData.accountId
}
});
window.open(routeData.href);
},
getToken(data) {
this.obj.id = data
this.$post('account/ssh.do', this.obj).then(res => {
if (res.code === 200) {
this.token = res.data.token
sessionStorage.setItem('cliToken', this.token)
}
})
},
getAssetData() {
this.$get('asset', this.pageObj).then(response => {
if (response.code === 200) {
this.assetData = response.data.list;
this.enableAsset = this.assetData.filter(item=>{
return item.accounts.length>0
})
}
})
},
upload() {
this.uploadFile.token = this.token
let form = new FormData();
form.append("token", this.token);
form.append("file", this.uploadFile.file);
form.append("path", this.uploadFile.path);
this.$post('account/upload.do', form).then(res => {
if (res.code === 200) {
console.log(res)
}
})
},
handleChange(file) {
this.uploadFile.file = file.raw
},
},
mounted() {
if (this.routeData) {
this.host = this.routeData.host
document.title = this.host
this.getToken(this.routeData.accountId)
}
this.getAssetData()
},
}
</script>
<style scoped>
.title{
display: inline-block;
}
.submenu {
float: left;
width: 500px;
font-size: 22px;
}
.title-input{
position: absolute;
left: 300px;
top:19px
}
</style>

6
nezha-fronted/src/main.js
View File

@@ -1,7 +1,7 @@
import "./assets/css/main.css";
import 'element-ui/lib/theme-chalk/index.css';
import ElementUI from 'element-ui';
import 'xterm/dist/xterm.css'
import i18n from './components/common/i18n'
import Vue from 'vue'
@@ -79,7 +79,7 @@ Vue.directive('clickoutside',
)
/* eslint-disable no-new */
new Vue({
window.vm = new Vue({
el: '#app',
router,
i18n,
@@ -88,7 +88,7 @@ new Vue({
template: '<App/>'
})
export default vm
router.beforeEach((to, from, next) => {
if (to.path === '/login') {
next()

15
nezha-fronted/src/router/index.js
View File

@@ -13,6 +13,21 @@ export default new Router({
path: '/login',
component: resolve => require(['../components/common/login.vue'], resolve),
},
{
path: '/terminal',
name: "terminal",
component: resolve => require(['../components/page/asset/WebSSH.vue'], resolve),
},
{
path: '/cloneChat',
name: "cloneChat",
component: resolve => require(['../components/page/asset/cloneChat.vue'], resolve),
},
{
path: '/newChat',
name: "newChat",
component: resolve => require(['../components/page/asset/newChat.vue'], resolve),
},
{
path: '/',
component: resolve => require(['../components/common/home.vue'], resolve),

2
nezha-fronted/src/store/index.js
View File

@@ -7,6 +7,7 @@ const store = new Vuex.Store({
assetData:{
selectedData:'',
moduleData:'',
idcData:''
},
currentProject: {
id: '',
@@ -18,6 +19,7 @@ const store = new Vuex.Store({
createModule: false,
createEndpoint: false,
createAlertConfig: false,
flushDataSign:false
},
getters: {
},