<template>
<!--<el-scrollbar style="height: 100%">-->
<el-dialog
@close="close"
v-dialogDrag
@open="openTemplate"
:title="$t('CollectTask.chooseDevice')"
width='900px'
:visible.sync="innerVisible">
<el-container class="h-all">
<el-header height="auto">
<div class="search">
<label>{{$t('CollectTask.subnet')}}：</label>
<el-select clearable
disabled
size="mini"
v-model="subnet"
:placeholder="$t('common.pleaseSelect')">
<el-option v-for="item1 in subnetList"
:key="item1.subnetKey"
:label="item1.subnetName"
:value="item1.subnetKey">
</el-option>
</el-select>
<label>{{$t('DeviceConfigurationManagement.nodeType')}}：</label>
<el-select disabled
size="mini"
multiple
collapse-tags
v-model="deviceType"
:placeholder="$t('common.pleaseSelect')">
<el-option v-for="item in deviceTypeList"
:key="item.deviceTypeKey"
:label="item.deviceTypeName"
:value="item.deviceTypeKey"></el-option>
</el-select>
<label>{{$t('DeviceConfigurationManagement.nodeModel')}}：</label>
<el-select clearable
disabled
multiple
collapse-tags
size="mini"
v-model="deviceModel"
:placeholder="$t('common.pleaseSelect')">
<el-option v-for="item in deviceModelList"
:key="item.deviceModelKey"
:label="item.deviceModel"
:value="item.deviceModel">
</el-option>
</el-select>
</div>
</el-header>
<el-main>
<el-table
:empty-text="$t('common.noData')"
border
header-row-class-name="table-header"
cell-class-name="table-cell"
class="adapt-height"
height="300px"
ref="singleTable"
:data="deviceList"
highlight-current-row
stripe
@selection-change="handleSelectionChange"
tooltip-effect="dark">
<el-table-column
type="selection"
width="28">
</el-table-column>
<!--:selectable='checkboxForMain'-->
<el-table-column
prop="subnetName"
:label="$t('DeviceConfigurationManagement.subnetKey')">
</el-table-column>
<el-table-column
prop="deviceTypeName"
:label="$t('DeviceConfigurationManagement.nodeType')">
</el-table-column>
<el-table-column
prop="deviceModel"
:label="$t('DeviceConfigurationManagement.nodeModel')">
</el-table-column>
<el-table-column
:show-overflow-tooltip="true"
prop="displayName"
:label="$t('DeviceConfigurationManagement.nodeName')">
</el-table-column>
</el-table>
</el-main>
</el-container>
<el-row style="margin-bottom: 0px;" slot="footer" class="dialog-footer">
<el-button icon="el-icon-circle-check" type="primary" size="mini" @click="ok">{{$t("common.ok")}}</el-button>
</el-row>
</el-dialog>
</template>
<script>
import DeviceService from "../../../domain/services/DeviceService";
import SubnetService from "../../../domain/services/SubnetService";
import HelperUtil from "../../../utils/HelperUtil";
import loading from "../../../utils/Loading";
import IndexTeplateService from "../../../domain/services/IndexTeplateService";
export default {
name: 'ChooseDeviceDialog',
props: {
innerVisible: false,
passSubnet: {},
indexTemplate: '',
deviceNameList: ''
},
data: function () {
return {
subnet: '',
indexTem: {},
deviceType: [],
deviceModel: [],
deviceList: [],
subnetList: [],
deviceTypeList: [],
deviceModelList: [],
indexTemplateList: [],
selectList: [],
multipleSelection: [],
commandContext: {}
}
},
methods: {
/**
* @Description : open
* @author : ls
* @date : 2020/4/28 19:50
* @param :
* @return :
*/
openTemplate: function () {
this.indexTem = this.indexTemplateList[this.indexTemplate]
var arr = []
var arr1 = []
for (let i = 0; i < this.indexTem.unitList.length; i++) {
arr.push(this.indexTem.unitList[i].deviceTypeKey)
arr1.push(this.indexTem.unitList[i].deviceModel)
}
this.deviceType = Array.from(new Set(arr))
this.deviceModel = Array.from(new Set(arr1))
// this.deviceType = this.indexTem.unitList[0].deviceTypeKey
// this.deviceModel = this.indexTem.unitList[0].deviceModel
this.deviceList = []
this.subnet = this.passSubnet.subnetKey
this.queryDeviceByCondition()
},
/**
* @Description : 确认
* @author : ls
* @date : 2020/5/26 13:21
* @param :
* @return :
*/
ok: function () {
if (this.multipleSelection.length === 0) {
this.InfoTip.warningTip(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.PLEASE_SELECT_AT_LEASE_ONE_DEVICE))
} else {
var deviceNameList1 = []
for (var i = 0; i < this.multipleSelection.length; i++) {
deviceNameList1.push(this.multipleSelection[i].displayName)
}
this.deviceNameList = deviceNameList1.join()
}
this.close()
},
handleSelectionChange: function (val) {
this.multipleSelection = val
},
/**
* @Description : chaxun
* @author : ls
* @date : 2020/4/28 16:22
* @param :
* @return :
*/
queryDeviceByCondition: function () {
let _this = this
_this.setSelectList()
console.log(this.passSubnet)
let loadingInstance = _this.Loading.openLoading()
DeviceService.queryDevice(_this.selectList).then(result => {
// 关闭loading
_this.Loading.closeLoading(loadingInstance)
// 成功
_this.deviceList = Object.values(result)
if (_this.deviceList.length === 0) {
_this.InfoTip.warningTip(_this, HelperUtil.getCheckStatusCodeObjectByCode(_this.successCode.QUERY_NULL_CODE))
} else {
_this.InfoTip.successTip(_this, HelperUtil.getStatusCodeObjectByCode(_this.successCode.QUERY_CODE))
}
}).catch(err => {
// 关闭loading
_this.Loading.closeLoading(loadingInstance)
// 失败
_this.InfoTip.errorTip(_this, err)
})
},
/**
* @Description : 设置条件
* @author : ls
* @date : 2020/4/28 16:20
* @param :
* @return :
*/
setSelectList: function () {
this.selectList = []
if (this.deviceType.length !== 0) {
this.selectList.push({
quaryAttribute: 'deviceTypeKey',
compareSymbol: 'in',
compareValue: this.deviceType.join(',')
})
}
if (this.deviceModel.length !== 0) {
this.selectList.push({
quaryAttribute: 'deviceModel',
compareSymbol: 'in',
compareValue: this.deviceModel.join(',')
})
}
if (this.subnet !== '' && this.subnet !== null) {
this.selectList.push({
quaryAttribute: 'subnetKey',
compareSymbol: '=',
compareValue: this.subnet
})
}
},
/**
* @Description : 获取网元类型
* @author : ls
* @date : 2020/4/28 16:13
* @param :
* @return :
*/
getAllDeviceType: function () {
let _this = this
DeviceService.getAllDeviceTypeCollection().then(result => {
_this.deviceTypeList = Object.values(result)
}).catch(err => {
_this.InfoTip.errorTip(_this, err)
})
},
/**
* @Description : 获取网元型号
* @author : ls
* @date : 2020/4/28 16:14
* @param :
* @return :
*/
getAllDeviceModel: function () {
let _this = this
DeviceService.getAllDeviceModelCollection().then(result => {
_this.deviceModelList = Object.values(result)
}).catch(err => {
_this.InfoTip.errorTip(_this, err)
})
},
/**
* @Description : 获取子网
* @author : ls
* @date : 2020/4/28 16:15
* @param :
* @return :
*/
getAllSubnet: function () {
let _this = this
SubnetService.getAllSubnetCollection().then(result => {
// 成功
_this.subnetList = Object.values(result)
}).catch(err => {
// 失败
_this.InfoTip.errorTip(_this, err)
})
},
/**
* @Description : 获取指标模板
* @author : ls
* @date : 2020/5/26 12:43
* @param :
* @return :
*/
getAllIndexTemplate: function () {
let _this = this
let loadingInstance = loading.openLoading()
IndexTeplateService.getAllIndexTemplateCollection().then(result => {
_this.indexTemplateList = result
loadingInstance.close()
}).catch(err => {
this.InfoTip.errorTip(this, err)
loadingInstance.close()
})
},
/**
* @Description : 过滤显示
* @author : ls
* @date : 2020/4/28 16:40
* @param :
* @return :
*/
formatSubnetKey: function (row, column) {
for (var i = 0; i < this.subnetList.length; i++) {
if (this.subnetList[i]['subnetKey'] === row.subnetKey) {
return this.subnetList[i]['subnetName']
}
}
},
/**
* @Description : 关闭
* @author : ls
* @date : 2020/4/28 18:32
* @param :
* @return :
*/
close: function () {
this.$emit('update:innerVisible', false)
this.$emit('update:deviceNameList', this.deviceNameList)
this.subnet = ''
this.deviceType = ''
this.deviceModel = ''
}
},
created: function () {
this.getAllDeviceType()
this.getAllDeviceModel()
this.getAllSubnet()
this.getAllIndexTemplate()
},
mounted () {
this.innerVisible = true
}
}
</script>
<style scoped lang="scss">
/*!* 外层布局容器样式 *!*/
.el-header {
background-color: #f9fafc;
color: #333;
line-height: 40px;
}
#box{
width:100%;
height:100%;
overflow:hidden;
}
.el-card__header {
background-color: greenyellow;
}
/* .el-input {
width: 330px;
}*/
/deep/ .el-textarea__inner{
font-size: 12px;
}
</style>