295 lines
9.8 KiB
Vue
295 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>
|