<template>
|
<b-modal
|
size="lg"
|
:title="title"
|
ref="myModalRef"
|
ok-title="保存"
|
@ok="handleOk"
|
@cancel="clearName"
|
cancel-title="取消"
|
:hide-header="false"
|
:hide-footer="!isShowFooter"
|
>
|
<div>
|
<!-- <h4>{{title}}</h4> -->
|
<el-form
|
:model="addForm"
|
label-position="right"
|
:rules="rules"
|
ref="addForm"
|
label-width="130px"
|
>
|
<div class="row">
|
<div class="col-md-10 col-sm-12">
|
<el-form-item label="输入IP地址：" prop="address">
|
<el-input
|
v-model="addForm.address"
|
placeholder="请输入集群内任意节点的IP地址"
|
@keyup.native.enter="searchForm('addForm')"
|
:disabled="isDisabled"
|
></el-input>
|
</el-form-item>
|
</div>
|
<div class="col-md-2 col-sm-12">
|
<b-button variant="primary" size="md" @click="searchForm('addForm')">搜索集群</b-button>
|
</div>
|
</div>
|
<!-- 集群信息回显 start -->
|
<div class="row" v-if="colonyData">
|
<div class="col-md-12 col-sm-12">
|
<el-form-item label="集群名称：" prop="ip">
|
<div class="colony-table">
|
<h5 class="mt-3">{{colonyData.cluster_name||''}}</h5>
|
<Table :data="colonyData.list ? colonyData.list : []" :border="false" :fit="true">
|
<TableColumn label="节点ID" prop="node_id"/>
|
<TableColumn label="注册时间" prop="create_time"/>
|
<TableColumn label="节点IP" prop="node_ip"/>
|
<TableColumn label="节点设备ID" prop="dev_id"/>
|
<TableColumn label="节点设备名称" prop="dev_name"/>
|
</Table>
|
</div>
|
</el-form-item>
|
<el-form-item label="输入集群密码：" prop="cookie">
|
<el-input v-model="addForm.cookie" placeholder="请输入要加入集群的密码" :disabled="isDisabled"></el-input>
|
</el-form-item>
|
</div>
|
</div>
|
<div v-else class="pt30 pb30"></div>
|
<div class="text-right mt-2 pt-4 border-top" v-if="colonyData">
|
<b-button size="md" class="mx-2" @click="hideModel">取消</b-button>
|
<b-button variant="primary" class="mx-2" size="md" @click="submitForm('addForm')">保存</b-button>
|
</div>
|
</el-form>
|
</div>
|
</b-modal>
|
</template>
|
|
<script>
|
import {
|
Table,
|
TableColumn,
|
Col,
|
Form,
|
FormItem,
|
Input,
|
Checkbox,
|
Radio,
|
RadioGroup,
|
Select,
|
Option
|
} from 'element-ui'
|
import { getNodeByIp, saveCluster } from '@/server/home.js'
|
export default {
|
props: {
|
title: String,
|
item: Object,
|
isShowFooter: {
|
default: false
|
}
|
},
|
components: {
|
Table,
|
TableColumn,
|
elCol: Col,
|
elForm: Form,
|
elFormItem: FormItem,
|
elInput: Input,
|
elCheckbox: Checkbox,
|
elRadio: Radio,
|
elRadioGroup: RadioGroup,
|
elSelect: Select,
|
elOption: Option
|
},
|
data() {
|
var isIP = (rule, value, callback) => {
|
if (!value) {
|
return callback(new Error('IP必填'))
|
}
|
/* 端口 /^([0-9]|[1-9]\d|[1-9]\d{2}|[1-9]\d{3}|[1-5]\d{4}|6[0-4]\d{3}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])$/ */
|
const reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/
|
if (value && !reg.test(value)) {
|
return callback(new Error('IP不合法'))
|
} else {
|
callback()
|
}
|
}
|
return {
|
name: '',
|
typeList: [],
|
addForm: {
|
address: '',
|
cookie: ''
|
},
|
rules: {
|
address: [{ required: true, validator: isIP, trigger: 'blur' }],
|
cookie: [{ required: true, message: '集群密码必填', trigger: 'blur' }]
|
},
|
colonyData: null
|
}
|
},
|
computed: {
|
isDisabled() {
|
return this.$route.query.type === 'check'
|
},
|
isCamera() {
|
return false
|
}
|
},
|
methods: {
|
// * 打开modal
|
showModel() {
|
this.$refs.myModalRef.show()
|
this.$nextTick(() => {
|
this.reView(this.item)
|
})
|
},
|
hideModel() {
|
this.$refs.myModalRef.hide()
|
},
|
/* 接口 start */
|
async getColonyByIp(json) {
|
const res = await getNodeByIp({
|
nodeIp: json.address ? json.address : ''
|
})
|
if (res.success && res.code === 200 && res.data) {
|
this.colonyData = res.data
|
} else {
|
this.colonyData = null
|
this.$toast({
|
type: 'error',
|
message: res && res.msg ? res.msg : '查询失败'
|
})
|
}
|
},
|
async saveColony(json) {
|
const res = await saveCluster(json)
|
if (res.success && res.code === 200 && res.data) {
|
/* 成功操作 */
|
this.$emit('submit')
|
this.hideModel()
|
this.$toast({
|
type: 'success',
|
message: res && res.msg ? res.msg : '加入集群成功'
|
})
|
} else {
|
this.$toast({
|
type: 'error',
|
message: res && res.msg ? res.msg : '加入集群失败！'
|
})
|
}
|
},
|
/* 接口 end */
|
searchForm(formName) {
|
this.$refs[formName].validateField('address', msg => {
|
if (msg) {
|
console.log(`${msg}，参数不合法!!`)
|
return false
|
} else {
|
this.getColonyByIp(this.addForm)
|
}
|
})
|
},
|
submitForm(formName) {
|
this.$refs[formName].validate(valid => {
|
if (valid) {
|
this.saveColony(this.addForm)
|
} else {
|
console.log('保存接口，参数不合法!!')
|
return false
|
}
|
})
|
},
|
|
// 回显
|
reView(item) {
|
// if (item) {
|
// this.name = item.name
|
// } else {
|
// this.name = ''
|
// }
|
this.resetForm('addForm')
|
this.addForm = {
|
address: '',
|
cookie: ''
|
}
|
this.colonyData = null
|
},
|
// * 提交表单
|
handleOk(e) {
|
e.preventDefault()
|
if (!this.name) {
|
this.$toast({
|
type: 'warning',
|
message: '请输入角色名称'
|
})
|
return
|
}
|
this.$emit('submit', this.name, this.item ? this.item.id : '')
|
},
|
// * 取消
|
clearName() {},
|
|
resetForm(formName) {
|
this.$refs[formName].resetFields()
|
}
|
}
|
}
|
</script>
|
<style lang="scss" >
|
.colony-table {
|
.el-table td {
|
padding: 6px !important;
|
}
|
.has-gutter th {
|
padding: 2px !important;
|
background: transparent !important;
|
}
|
.el-table td,
|
.el-table th.is-leaf {
|
border-bottom: none !important;
|
}
|
.el-table::before {
|
background-color: transparent;
|
}
|
}
|
</style>
|
