733 lines
21 KiB
Vue
733 lines
21 KiB
Vue
<template>
|
||
<div class="asset">
|
||
<div class="content-left">
|
||
<div class="sidebar-title">Asset</div>
|
||
<div class="sidebar-info">
|
||
<!--<div class="sidebar-info-header">ALL</div>-->
|
||
<el-checkbox-group v-model="checkList" size="small" @change="getSingleAsset(checkList)">
|
||
<el-checkbox class="sidebar-info-item" :class="{'sidebar-info-item-active': checkList.indexOf(item.id) != -1}"
|
||
v-for="(item,key) in checkListData" :key="key" :label=item.id>
|
||
<span>{{item.name}}</span>
|
||
<idc-config-box :post-idc="addIdcData" placement="left" @after="getIDCOptionData" :button-class="'checkbox-edit'">
|
||
<template v-slot:optionZone>
|
||
<i class="el-icon-edit-outline" @click="getSingleIDCData(item.id,'edit')"></i>
|
||
</template>
|
||
</idc-config-box>
|
||
<!--<el-popover
|
||
placement="left"
|
||
v-model="item[item.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.id] = 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.popName"/>
|
||
</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.id]= false">
|
||
{{$t('overall.cancel')}}
|
||
</div>
|
||
<div class="right-box-bottom-btn right-box-bottom-btn-50"
|
||
@click="editData('idc',item)">
|
||
{{$t('overall.save')}}
|
||
</div>
|
||
</div>
|
||
<span class="checkbox-edit" slot="reference"
|
||
@click.prevent="getSingleIDCData(item.id,'edit')"><i
|
||
class="el-icon-edit-outline"></i></span>
|
||
</el-popover>-->
|
||
</el-checkbox>
|
||
</el-checkbox-group>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="content-right">
|
||
<div class="top-tools">
|
||
<button @click.stop="tagShow('showAdd')" class="nz-btn nz-btn-size-normal nz-btn-style-normal float-right">
|
||
<span class="top-tool-btn-txt">{{$t('overall.add')}}</span>
|
||
</button>
|
||
<div class="top-tool-search float-right"><search-input :searchMsg="searchMsg" @search="search"></search-input></div>
|
||
</div>
|
||
|
||
<el-table
|
||
height="calc(100% - 65px)"
|
||
style="width: 100%;"
|
||
:data="tableData"
|
||
border
|
||
>
|
||
<el-table-column
|
||
v-for="(item, index) in tableTitle"
|
||
v-if="item.show"
|
||
min-width="110"
|
||
:width="item.width"
|
||
:key="`col_${index}`"
|
||
:label="item.label"
|
||
>
|
||
{{item}}
|
||
<template slot-scope="scope" :column="item">
|
||
<div v-if="item.prop=='ID'">
|
||
<span>{{scope.row.id}}</span>
|
||
</div>
|
||
<div v-if="item.prop=='资产类型'">
|
||
<span>{{scope.row.model.type.value}}</span>
|
||
</div>
|
||
<div v-if="item.prop=='SN'">
|
||
<span>{{scope.row.sn}}</span>
|
||
</div>
|
||
<div v-if="item.prop=='HOST'">
|
||
<span>{{scope.row.host}}</span>
|
||
</div>
|
||
<div v-if="item.prop=='资产状态'">
|
||
<span>{{scope.row.state==1 ? $t('asset.createAssetTab.inStock') : $t('asset.createAssetTab.notInStock')}}</span>
|
||
</div>
|
||
<div v-if="item.prop=='Module'">
|
||
<div class="tab-input-square">{{scope.row.moduleNum}}</div>
|
||
</div>
|
||
<div v-if="item.prop=='Alert'">
|
||
<div class="tab-input-square">{{scope.row.alertNum}}</div>
|
||
</div>
|
||
<div v-if="item.prop=='数据中心'">
|
||
<span>{{scope.row.idc.name}}</span>
|
||
</div>
|
||
<div v-if="item.prop=='机柜'">
|
||
<span>{{returnData(scope.row.cabinet)}}</span>
|
||
</div>
|
||
<div v-if="item.prop=='型号'">
|
||
<span>{{scope.row.model.name}}</span>
|
||
</div>
|
||
<div v-if="item.prop=='厂商'">
|
||
<span>{{scope.row.model.vendor.value}}</span>
|
||
</div>
|
||
<div v-if="item.prop=='购买日期'">
|
||
<span>{{scope.row.purchaseDate}}</span>
|
||
</div>
|
||
<div v-if="item.prop=='责任人'">
|
||
<span>{{getPrincipalName(scope.row.idc.principal)}}</span>
|
||
</div>
|
||
<div v-if="item.prop=='责任人电话'">
|
||
<span>{{scope.row.idc.tel}}</span>
|
||
</div>
|
||
<div v-if="item.prop == 'option'" class="content-right-options">
|
||
<span @click.stop="deleteData('asset',scope.row.id)" class="content-right-option"><i
|
||
class="el-icon-delete"></i>
|
||
</span>
|
||
<span @click.stop="tagShow('showView',scope.row.id)" class="content-right-option"><i
|
||
class="el-icon-view"></i>
|
||
</span>
|
||
<span @click.stop="tagShow('showEdit',scope.row.id)" class="content-right-option"><i
|
||
class="el-icon-edit-outline"></i>
|
||
</span>
|
||
<span @click="ssss(scope.row.id ,scope.row.host)" class="content-right-option"><i
|
||
class="el-icon-monitor"></i>
|
||
</span>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<Pagination :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
|
||
</div>
|
||
|
||
<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>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: "asset",
|
||
data() {
|
||
return {
|
||
searchMsg: { //给搜索框子组件传递的信息
|
||
zheze_none: true,
|
||
searchLabelList: [{
|
||
id: 1,
|
||
name: 'ID',
|
||
type: 'input',
|
||
label: 'id',
|
||
disabled: false
|
||
},{
|
||
id: 20,
|
||
name: 'SN',
|
||
type: 'input',
|
||
label: 'sn',
|
||
disabled: false
|
||
},{
|
||
id: 21,
|
||
name: 'Host',
|
||
type: 'input',
|
||
label: 'host',
|
||
disabled: false
|
||
}],
|
||
},
|
||
searchLabel: {}, //搜索参数
|
||
checkList: [],
|
||
tableTitle: [
|
||
{
|
||
label: this.$t("asset.tableTitle.id"),
|
||
prop: 'ID',
|
||
show: false,
|
||
}, {
|
||
label: this.$t("asset.tableTitle.assetType"),
|
||
prop: '资产类型',
|
||
show: true,
|
||
}, {
|
||
label: this.$t("asset.tableTitle.device"),
|
||
prop: 'SN',
|
||
show: true,
|
||
}, {
|
||
label: this.$t("asset.tableTitle.host"),
|
||
prop: 'HOST',
|
||
show: true,
|
||
width: 130
|
||
}, {
|
||
label: this.$t("asset.tableTitle.assetState"),
|
||
prop: '资产状态',
|
||
show: true,
|
||
}, {
|
||
label: this.$t("asset.tableTitle.module"),
|
||
prop: 'Module',
|
||
show: true,
|
||
}, {
|
||
label: this.$t("asset.tableTitle.alert"),
|
||
prop: 'Alert',
|
||
show: true,
|
||
}, {
|
||
label: this.$t("asset.tableTitle.dataCenter"),
|
||
prop: '数据中心',
|
||
show: true,
|
||
}, {
|
||
label: this.$t("asset.tableTitle.cabinet"),
|
||
prop: '机柜',
|
||
show: true,
|
||
}, {
|
||
label: this.$t("asset.tableTitle.model"),
|
||
prop: '型号',
|
||
show: true,
|
||
}, {
|
||
label: this.$t("asset.tableTitle.manufacturer"),
|
||
prop: '厂商',
|
||
show: true,
|
||
}, {
|
||
label: this.$t("asset.tableTitle.procurementDate"),
|
||
prop: '购买日期',
|
||
show: true,
|
||
}, {
|
||
label: this.$t("asset.tableTitle.principal"),
|
||
prop: '责任人',
|
||
show: true,
|
||
}, {
|
||
label: this.$t("asset.tableTitle.principalTel"),
|
||
prop: '责任人电话',
|
||
show: true,
|
||
}, {
|
||
label: this.$t('config.account.option'),
|
||
prop: 'option',
|
||
show: true,
|
||
}],
|
||
tableData: [],
|
||
checkListData: [],
|
||
IDCData: '',
|
||
IDCOptionData: [],
|
||
cabinetData: '',
|
||
cabinetOptionData: [],
|
||
input: '',
|
||
pageObj: {
|
||
id: '',
|
||
pageNo: 1,
|
||
pageSize: 20,
|
||
total: 0,
|
||
idcId: '',
|
||
idcIds: ''
|
||
},
|
||
tableHeight: document.documentElement.clientHeight - 200,
|
||
tabShow: false,
|
||
tabView: true,
|
||
tagType: 'add',
|
||
form: {
|
||
name: ''
|
||
},
|
||
rightBox: { //弹出框相关
|
||
show: false,
|
||
isEdit: false, //false查看，true编辑
|
||
title: ''
|
||
},
|
||
assetType: '',
|
||
idcSelectedData: {
|
||
id: '',
|
||
name: '',
|
||
location: '',
|
||
principal: '',
|
||
tel: ''
|
||
},
|
||
addIdcData: {
|
||
id: '',
|
||
name: '',
|
||
popName: '',
|
||
location: '',
|
||
principal: '',
|
||
tel: ''
|
||
},
|
||
idcUserData: '',
|
||
modelCount: '',
|
||
isResourceShow: 0,
|
||
unitDisable: '',
|
||
modelClickData: '',
|
||
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) {
|
||
this.checkList.splice(0, 1, newVal.selectedData);
|
||
this.pageObj.idcIds = newVal.selectedData;
|
||
this.getAssetData()
|
||
},
|
||
deep: true,
|
||
},
|
||
getFlushData: {
|
||
handler(newVal, oldVal) {
|
||
if (newVal === true) {
|
||
this.getIDCOptionData();
|
||
this.getAssetData()
|
||
}
|
||
}
|
||
},
|
||
},
|
||
created() {
|
||
this.checkList.push(this.$store.state.assetData.selectedData)
|
||
this.getSingleAsset(this.checkList)
|
||
|
||
},
|
||
methods: {
|
||
ssss(id, sn) {
|
||
let routeData = this.$router.resolve({
|
||
name: "terminal",
|
||
query: {
|
||
id: id,
|
||
host: sn
|
||
}
|
||
});
|
||
window.open(routeData.href);
|
||
},
|
||
getAssetData(data) {
|
||
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 => {
|
||
if (response.code === 200) {
|
||
this.checkListData = this.IDCOptionData = response.data.list;
|
||
this.markOptionData(this.IDCOptionData)
|
||
}
|
||
})
|
||
},
|
||
getUserData() {
|
||
this.$get('sys/user/list').then(response => {
|
||
if (response.code === 200) {
|
||
this.idcUserData = response.data.list
|
||
}
|
||
})
|
||
},
|
||
editData(data, item) {
|
||
if (data === 'idc') {
|
||
item.name = this.addIdcData.popName
|
||
}
|
||
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.getAssetData();
|
||
} else {
|
||
this.$notify({
|
||
message: h('i', {style: 'color: teal'}, res.msg),
|
||
duration: 2000
|
||
})
|
||
}
|
||
})
|
||
},
|
||
addNewData(type) {
|
||
if (type === 'IDC') {
|
||
this.$post('idc', this.addIdcData).then(res => {
|
||
const h = this.$createElement;
|
||
if (res.code === 200) {
|
||
const h = this.$createElement;
|
||
this.$notify({
|
||
message: h('i', {style: 'color: teal'}, '添加成功'),
|
||
duration: 2000
|
||
});
|
||
this.getIDCOptionData()
|
||
this.getAssetData()
|
||
} else {
|
||
this.$notify({
|
||
message: h('i', {style: 'color: teal'}, '添加成功'),
|
||
duration: 2000
|
||
});
|
||
}
|
||
})
|
||
}
|
||
},
|
||
deleteData(data, item) {
|
||
this.$delete(data + "?ids=" + item).then(response => {
|
||
const h = this.$createElement;
|
||
if (response.code === 200) {
|
||
this.$notify({
|
||
message: h('i', {style: 'color: teal'}, '删除成功'),
|
||
duration: 2000
|
||
});
|
||
this.getAssetData()
|
||
this.getIDCOptionData()
|
||
} else {
|
||
this.$notify({
|
||
message: h('i', {style: 'color: teal'}, response.msg),
|
||
duration: 2000
|
||
});
|
||
}
|
||
})
|
||
},
|
||
markOptionData(data) {
|
||
data.forEach(item => {
|
||
this.$set(item, 'isEdit', false);
|
||
this.$set(item, 'oldName', item.value);
|
||
this.$set(item, item.name, false)
|
||
this.$set(item, item.id, false)
|
||
this.$set(item, item.id + item.name, false)
|
||
})
|
||
},
|
||
editOptionData(item) {
|
||
if (!item.isEdit) {
|
||
item.isEdit = true;
|
||
} else {
|
||
if (item.name !== item.oldName) {
|
||
item.isEdit = false;
|
||
} else {
|
||
item.isEdit = false;
|
||
}
|
||
}
|
||
},
|
||
delOptionData(data) {
|
||
},
|
||
tabControl(data) {
|
||
if (data === 'close') {
|
||
this.addUnitShow = false
|
||
this.editUnitShow = false
|
||
this.$refs['assetEditUnit'].tabView = false
|
||
}
|
||
},
|
||
tagShow(data, id, type) {
|
||
if (data === 'showAdd') {
|
||
this.addUnitShow = true
|
||
}
|
||
if (data === 'showEdit') {
|
||
this.editUnitShow = true
|
||
this.$refs['assetEditUnit'].getAssetData(id)
|
||
}
|
||
if (data === 'showView') {
|
||
this.editUnitShow = true
|
||
this.$refs['assetEditUnit'].getAssetData(id)
|
||
this.$refs['assetEditUnit'].tabView = true
|
||
}
|
||
},
|
||
editing() {
|
||
|
||
},
|
||
getSingleIDCData(data, item) {
|
||
if (item !== 'edit') {
|
||
this.idcSelectedData = '';
|
||
this.IDCOptionData.forEach(item => {
|
||
if (item.id === data) {
|
||
this.idcSelectedData = item
|
||
}
|
||
});
|
||
return
|
||
} else {
|
||
this.IDCOptionData.forEach(item => {
|
||
if (item.id === data) {
|
||
this.addIdcData.id = item.id;
|
||
this.addIdcData.name = item.name;
|
||
this.addIdcData.popName = item.name;
|
||
this.addIdcData.location = item.location;
|
||
this.addIdcData.principal = item.principal;
|
||
this.addIdcData.tel = item.tel;
|
||
}
|
||
});
|
||
}
|
||
}
|
||
,
|
||
getSingleAsset(data) {
|
||
let result = []
|
||
if (data[0] === '') {
|
||
result = data.slice(1);
|
||
this.pageObj.idcIds = result.join(',')
|
||
} else {
|
||
this.pageObj.idcIds = data.join(',')
|
||
}
|
||
this.getAssetData()
|
||
},
|
||
pageNo(val) {
|
||
this.pageObj.pageNo = val;
|
||
this.getAssetData()
|
||
}
|
||
,
|
||
pageSize(val) {
|
||
this.pageObj.pageSize = val;
|
||
this.getAssetData()
|
||
},
|
||
getPrincipalName(data) {
|
||
for (let item in this.idcUserData) {
|
||
if (this.idcUserData[item].userId === data) {
|
||
return this.idcUserData[item].username
|
||
}
|
||
}
|
||
},
|
||
returnData(data) {
|
||
if (data && data !== '--') {
|
||
return data.name;
|
||
} else if (data === '--') {
|
||
return '-';
|
||
} else {
|
||
return "-";
|
||
}
|
||
},
|
||
flushData() {
|
||
this.getAssetData();
|
||
this.getIDCOptionData();
|
||
},
|
||
search() {
|
||
|
||
}
|
||
},
|
||
mounted() {
|
||
this.getUserData();
|
||
this.getAssetData();
|
||
this.getIDCOptionData();
|
||
window.onresize = () => {
|
||
this.tableHeight = document.documentElement.clientHeight - 200;
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.asset {
|
||
height: 100%;
|
||
}
|
||
.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: 0 15px;
|
||
}
|
||
|
||
.tab-input-square {
|
||
border: 1px solid #aaaaaa;
|
||
height: 25px;
|
||
width: 65px;
|
||
border-radius: 3px;
|
||
text-align: center;
|
||
line-height: 23px;
|
||
color: #aaaaaa;
|
||
}
|
||
|
||
.account-list-option {
|
||
cursor: pointer;
|
||
display: inline-block;
|
||
margin-right: 6px;
|
||
}
|
||
|
||
.right-box-top-btns {
|
||
text-align: center;
|
||
}
|
||
|
||
.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-top-btn-full {
|
||
background-color: #656565;
|
||
border: 1px solid #656565;
|
||
border-top: none;
|
||
color: white;
|
||
}
|
||
|
||
|
||
.pop-window {
|
||
height: 370px;
|
||
width: 400px;
|
||
}
|
||
|
||
.pop-window-assetType-content {
|
||
padding: 1px 15px 15px 20px;
|
||
}
|
||
|
||
.rm-c-list span:hover {
|
||
background-color: #888;
|
||
color: #fff;
|
||
}
|
||
|
||
.right-box-bottom-btn {
|
||
display: inline-block;
|
||
background-color: #656565;
|
||
color: white;
|
||
line-height: 35px;
|
||
cursor: pointer;
|
||
text-align: center;
|
||
}
|
||
|
||
.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-bottom-btn-50 {
|
||
width: 50%;
|
||
float: right;
|
||
border-bottom-right-radius: 8px;
|
||
}
|
||
|
||
.activeColor {
|
||
background-color: #409EFF;
|
||
}
|
||
|
||
@keyframes slide-in-from-right {
|
||
from {
|
||
right: -800px
|
||
}
|
||
to {
|
||
right: 0
|
||
}
|
||
}
|
||
|
||
@keyframes slide-out-to-right {
|
||
from {
|
||
right: 0
|
||
}
|
||
to {
|
||
right: -800px
|
||
}
|
||
}
|
||
|
||
.right-box-enter-active {
|
||
animation: slide-in-from-right 0.4s;
|
||
}
|
||
|
||
.right-box-leave-active {
|
||
animation: slide-out-to-right 0.4s;
|
||
}
|
||
</style>
|
||
<style>
|
||
.asset .content-left .el-checkbox__input.is-focus .el-checkbox__inner,
|
||
.asset .content-left .el-checkbox__input .el-checkbox__inner:hover,
|
||
.asset .content-left .el-checkbox__input.is-checked .el-checkbox__inner,
|
||
.asset .content-left .el-checkbox__input.is-indeterminate .el-checkbox__inner {
|
||
border-color: #e07700;
|
||
}
|
||
|
||
.asset .content-left .el-checkbox__input.is-checked + .el-checkbox__label {
|
||
color: #444;
|
||
}
|
||
|
||
.asset .content-left .el-checkbox__input.is-checked .el-checkbox__inner, .asset .content-left .el-checkbox__input.is-indeterminate .el-checkbox__inner {
|
||
background-color: #e07700;
|
||
}
|
||
|
||
|
||
.checkbox-edit {
|
||
position: absolute;
|
||
right: 10px;
|
||
font-size: 16px;
|
||
}
|
||
</style>
|