<template>
|
<div class="">
|
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
<el-form-item label="网关名称" prop="gatewayName" required>
|
<el-input size="mini" v-model="form.gatewayName"></el-input>
|
</el-form-item>
|
<el-form-item label="网关类别" prop="gatewayType" ref="gateWay" required>
|
<el-select v-model="form.gatewayType" filterable allow-create @blur="selectBlur('gateWay')" size="mini"
|
placeholder="请选择">
|
<el-option v-for="(item, idx) in gatewayTypes" :key="'type_' + idx" :label="item" :value="item">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="ip地址" prop="ipAddr" required ref="addr">
|
<div class="dib">
|
<ip-input class="input" :onBlur="blur" :ip="form.ipAddr"></ip-input>
|
</div>
|
</el-form-item>
|
<el-form-item label="通信协议" ref="commType" prop="commType" required>
|
<el-select v-model="form.commType" filterable allow-create @blur="selectBlur('commType')" size="mini"
|
placeholder="请选择">
|
<el-option v-for="(item, idx) in commTypes" :key="'type_' + idx" :label="item" :value="item">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item>
|
<el-button v-if="isEdit" type="primary" @click="update">修改</el-button>
|
<el-button v-else type="primary" @click="onSubmit">新增</el-button>
|
<el-button @click="close">取消</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
</template>
|
|
<script>
|
import IpInput from "@/components/ipInput.vue";
|
import { getGatewayType, getCommType, updateGateway, addGateway } from "./js/apis";
|
export default {
|
name: "",
|
props: {
|
info: {
|
type: Object,
|
},
|
},
|
data() {
|
return {
|
rules: {
|
gatewayName: [
|
{ required: true, message: '请输入网关名称', trigger: 'blur' },
|
],
|
commType: [
|
{ required: true, message: '请输入通信协议', trigger: 'blur' }
|
],
|
gatewayType: [
|
{ required: true, message: '请输入网关类别', trigger: 'blur' },
|
],
|
ipAddr: [
|
{ required: true, message: '请输入ip地址', trigger: 'blur' }
|
],
|
},
|
atewayTypes: [],
|
commTypes: [],
|
form: {
|
commType: '',
|
gatewayType: '',
|
gatewayName: "",
|
ipAddr: "",
|
num: undefined
|
},
|
};
|
},
|
computed: {
|
isEdit() {
|
return !!this.info;
|
},
|
},
|
components: {
|
IpInput,
|
},
|
methods: {
|
blur(value) {
|
let segments = value.split(".");
|
if (!segments.some((v) => v == "")) {
|
this.form.ipAddr = value;
|
} else {
|
this.form.ipAddr = "";
|
}
|
// console.log(value, 'v');
|
// console.log(this.form.ipAddr);
|
this.$refs.addr.$emit('el.form.blur');
|
},
|
selectBlur(refName) {
|
this.$refs[refName].$emit('el.form.blur');
|
},
|
getGatewayType() {
|
getGatewayType().then((res) => {
|
let list = [];
|
let { code, data, data2 } = res.data;
|
if (code && data) {
|
list = data2;
|
}
|
this.gatewayTypes = list;
|
})
|
.catch((err) => {
|
console.log(err);
|
});
|
|
},
|
getCommType() {
|
getCommType().then((res) => {
|
let list = [];
|
let { code, data, data2 } = res.data;
|
if (code && data) {
|
list = data2;
|
}
|
this.commTypes = list;
|
})
|
.catch((err) => {
|
console.log(err);
|
});
|
|
},
|
close() {
|
this.$emit("cancel");
|
},
|
update() {
|
this.$refs.form.validate((valid) => {
|
if (valid) {
|
let loading = this.$layer.loading();
|
updateGateway(this.form)
|
.then((res) => {
|
let { code, data } = res.data;
|
if (code && data) {
|
this.$emit("success");
|
this.$message.success("操作成功");
|
} else {
|
this.$message.error("操作失败");
|
}
|
this.$layer.close(loading);
|
})
|
.catch((err) => {
|
console.log(err);
|
this.$layer.close(loading);
|
});
|
} else {
|
this.$message.error('存在未验证通过的数据');
|
}
|
});
|
},
|
onSubmit() {
|
this.$refs.form.validate((valid) => {
|
if (valid) {
|
let loading = this.$layer.loading();
|
addGateway(this.form)
|
.then((res) => {
|
let { code, data } = res.data;
|
if (code && data) {
|
this.$emit("success");
|
this.$message.success("操作成功");
|
} else {
|
this.$message.error("操作失败");
|
}
|
this.$layer.close(loading);
|
})
|
.catch((err) => {
|
console.log(err);
|
this.$layer.close(loading);
|
});
|
} else {
|
this.$message.error('存在未验证通过的数据');
|
}
|
});
|
},
|
},
|
|
mounted() {
|
this.getGatewayType();
|
this.getCommType();
|
// console.log(this.info, 'info')
|
if (this.info) {
|
this.form.gatewayType = this.info.gatewayType;
|
this.form.commType = this.info.commType;
|
this.form.gatewayName = this.info.gatewayName;
|
this.form.num = this.info.num;
|
this.form.ipAddr = this.info.ipAddr;
|
}
|
},
|
};
|
</script>
|
|
<style scoped lang="less">
|
.input {
|
color: #000;
|
border: 1px #cccccc solid;
|
flex: 1;
|
border-radius: 6px;
|
margin-left: 6px;
|
margin-right: 6px;
|
|
:deep(.el-input__inner) {
|
color: inherit;
|
}
|
}
|
</style>
|
