294 lines
9.8 KiB
Vue
294 lines
9.8 KiB
Vue
<template>
|
||
<div>
|
||
<el-card class="wrapper" v-if="!detailFlag">
|
||
<table-search :configs="searchConfigs" :onSearch="handleSearch" ref="search">
|
||
<template v-slot:operate>
|
||
<el-button type="primary" @click="handleCreate()">新增</el-button>
|
||
</template>
|
||
</table-search>
|
||
<cb-table :data="tableData" :params="params" :get-list="getList" :total="total">
|
||
<el-table-column label="名称" show-overflow-tooltip prop="name"></el-table-column>
|
||
<el-table-column label="所属交换机" show-overflow-tooltip prop="fabricName"></el-table-column>
|
||
<el-table-column label="成员" show-overflow-tooltip>
|
||
<template slot-scope="scope">
|
||
<div v-for="(item, index) in scope.row.members" :key="index">
|
||
<span style="display: inline-block; width: 80px">类型：{{ item.type | switchType }}</span> 地址：{{ item.name }}
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="操作" width="160px">
|
||
<template slot-scope="scope">
|
||
<el-button type="text" @click="handleDelete(scope.row.id)"><i class="el-icon-delete"></i> 删除</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</cb-table>
|
||
<el-dialog title="新增" :visible.sync="addFlag" v-if="addFlag" width="60%">
|
||
<el-row>
|
||
<cb-form ref="addData" :model="addData" :cb-status-icon="true" label-width="110px">
|
||
<el-col :span="24">
|
||
<cb-form-item label="交换机：" prop="fabricId" :rules="[required]">
|
||
<el-select clearable v-model="addData.fabricId" @change="changeFabric">
|
||
<el-option v-for="item in fabricData" :key="item.id" :label="item.name" :value="item.id"> </el-option>
|
||
</el-select>
|
||
</cb-form-item>
|
||
</el-col>
|
||
<el-col :span="24">
|
||
<cb-form-item label="名称：" prop="name" :rules="[required]">
|
||
<el-input v-model="addData.name"></el-input>
|
||
</cb-form-item>
|
||
</el-col>
|
||
<el-col :span="24">
|
||
<cb-form-item label="添加成员：">
|
||
<el-card>
|
||
<cb-form ref="member" :model="member" :cb-status-icon="true" label-width="80px">
|
||
<el-col :span="10">
|
||
<cb-form-item label="类型：" prop="type">
|
||
<el-select v-model="member.type" @change="changeType">
|
||
<el-option label="wwn" value="wwn"></el-option>
|
||
<el-option label="端口号" value="switch_port"></el-option>
|
||
</el-select>
|
||
</cb-form-item>
|
||
</el-col>
|
||
<el-col :span="10">
|
||
<cb-form-item v-if="member.type == 'wwn'" :key="1" label="地址：" prop="name" :rules="[wwpn]">
|
||
<el-input v-model="member.name"></el-input>
|
||
</cb-form-item>
|
||
<cb-form-item v-else :key="2" label="地址：" prop="name">
|
||
<el-tooltip class="item" effect="dark" content="格式为domain id, port id" placement="top-start">
|
||
<el-input v-model="member.name" label="格式为domain id, port id"></el-input>
|
||
</el-tooltip>
|
||
</cb-form-item>
|
||
</el-col>
|
||
<el-col :span="3">
|
||
<el-button class="m-l" type="ghost" @click="addPort">添加</el-button>
|
||
</el-col>
|
||
</cb-form>
|
||
</el-card>
|
||
</cb-form-item>
|
||
</el-col>
|
||
<el-col :span="24">
|
||
<cb-form-item>
|
||
<cb-table :data="membersData">
|
||
<el-table-column label="类型" prop="type">
|
||
<template slot-scope="scope">
|
||
{{ scope.row.type }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="地址" prop="name">
|
||
<template slot-scope="scope">
|
||
{{ scope.row.name }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="操作" width="160px">
|
||
<template slot-scope="scope">
|
||
<el-button type="text" @click="deletePort(scope.$index)">删除</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
<div slot="pagination"></div>
|
||
</cb-table>
|
||
</cb-form-item>
|
||
</el-col>
|
||
</cb-form>
|
||
</el-row>
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button type="ghost" @click.native="addFlag = false">取 消</el-button>
|
||
<el-button type="primary" @click.native="addSubmit">确 定</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
</el-card>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import validate from '@/validate'
|
||
import { getZone, createZone, removeZone, getSwitches } from '../services/switch'
|
||
export default {
|
||
props: {
|
||
platformObject: {
|
||
type: Object,
|
||
default: function () {
|
||
return {
|
||
vendorId: -1,
|
||
operate: -1
|
||
}
|
||
}
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
required: validate.required,
|
||
wwpn: validate.wwpn,
|
||
searchConfigs: [
|
||
{ type: 'Input', label: '名称', value: 'name' },
|
||
{ type: 'Const', value: 'vendorId', initValue: this.platformObject.vendorId },
|
||
{ type: 'Const', value: 'type', initValue: 'alias' }
|
||
],
|
||
params: {
|
||
page: 1,
|
||
rows: 10
|
||
},
|
||
listQuery: {
|
||
name: ''
|
||
},
|
||
tableData: [],
|
||
total: 0,
|
||
detailFlag: false,
|
||
addFlag: false,
|
||
addData: {},
|
||
fabricData: [],
|
||
portNum: 0,
|
||
member: {},
|
||
membersData: []
|
||
}
|
||
},
|
||
methods: {
|
||
changeFabric(value) {
|
||
this.fabricData.forEach(item => {
|
||
if (item.id == value) {
|
||
this.portNum = item.portNum - 1
|
||
}
|
||
})
|
||
},
|
||
changeType(value) {
|
||
if (!this.addData.fabricId) {
|
||
this.member.type = ''
|
||
return this.$message.error('请先选择交换机！')
|
||
}
|
||
this.member.name = ''
|
||
},
|
||
getList() {
|
||
getZone(this.params).then(data => {
|
||
if (data.success) {
|
||
this.tableData = data.data.rows
|
||
this.total = data.data.total
|
||
}
|
||
})
|
||
},
|
||
handleSearch(params) {
|
||
this.params.page = 1
|
||
this.params.params = params || this.params.params
|
||
if (this.platformObject.vendorId > -1) {
|
||
this.getList()
|
||
}
|
||
},
|
||
handleCreate() {
|
||
this.member = {
|
||
type: '',
|
||
name: ''
|
||
}
|
||
this.portNum = 0
|
||
this.addData = {
|
||
vendorId: this.platformObject.vendorId,
|
||
fabricId: ''
|
||
}
|
||
this.membersData = []
|
||
this.getFabricData()
|
||
this.addFlag = true
|
||
},
|
||
addPort() {
|
||
this.$refs.member.validate(valid => {
|
||
if (valid) {
|
||
if (this.member.type == '' || this.member.name == '') {
|
||
return this.$message.error('成员信息输入不完整！')
|
||
}
|
||
const membersData = []
|
||
for (let i = 0; i < this.membersData.length; i++) {
|
||
const obj = this.membersData[i]
|
||
membersData.push({
|
||
type: obj.type,
|
||
name: obj.name.toString().toLowerCase()
|
||
})
|
||
}
|
||
const member = JSON.stringify({
|
||
type: this.member.type,
|
||
name: this.member.name.toString().toLowerCase()
|
||
})
|
||
if (JSON.stringify(membersData).indexOf(member) == -1) {
|
||
this.membersData.push(this.member)
|
||
this.member = {
|
||
type: '',
|
||
name: ''
|
||
}
|
||
} else {
|
||
return this.$message.info('同一个成员不能添加多次，wwn不区分大小写')
|
||
}
|
||
}
|
||
})
|
||
},
|
||
deletePort(index) {
|
||
this.membersData.splice(index, 1)
|
||
},
|
||
addSubmit() {
|
||
this.$refs.addData.validate(valid => {
|
||
if (valid) {
|
||
if (!this.membersData.length) {
|
||
return this.$message.error('新增别名，至少需要一个成员')
|
||
}
|
||
const addData = [
|
||
{
|
||
vendorId: this.addData.vendorId,
|
||
fabricId: this.addData.fabricId,
|
||
type: 'alias',
|
||
name: this.addData.name,
|
||
members: this.membersData
|
||
}
|
||
]
|
||
createZone(addData).then(data => {
|
||
if (data.success) {
|
||
this.$notify({
|
||
message: data.message,
|
||
type: 'success'
|
||
})
|
||
this.addFlag = false
|
||
this.getList()
|
||
}
|
||
})
|
||
}
|
||
})
|
||
},
|
||
getFabricData() {
|
||
getSwitches({
|
||
simple: true,
|
||
params: JSON.stringify([{ param: { vendorId: this.platformObject.vendorId }, sign: 'EQ' }])
|
||
}).then(data => {
|
||
if (data.success) {
|
||
this.fabricData = data.data.rows
|
||
}
|
||
})
|
||
},
|
||
handleDelete(id) {
|
||
this.$confirm('您确认要删除吗？', '提示', {
|
||
confirmButtonClass: 'el-button--danger',
|
||
type: 'warning'
|
||
})
|
||
.then(() => {
|
||
removeZone(id).then(data => {
|
||
if (data.success) {
|
||
this.$message.success({
|
||
message: data.message,
|
||
type: 'success'
|
||
})
|
||
this.getList()
|
||
}
|
||
})
|
||
})
|
||
.catch(() => {})
|
||
}
|
||
},
|
||
created() {},
|
||
mounted() {},
|
||
watch: {
|
||
platformObject: {
|
||
handler(newVal, oldVal) {
|
||
this.searchConfigs = [
|
||
{ type: 'Input', label: '名称', value: 'name' },
|
||
{ type: 'Const', value: 'vendorId', initValue: newVal.vendorId },
|
||
{ type: 'Const', value: 'type', initValue: 'alias' }
|
||
]
|
||
},
|
||
deep: true
|
||
}
|
||
}
|
||
}
|
||
</script>
|