<template>
|
<div class="create">
|
<el-form ref="device" label-position="right" label-width="120px" :model="bayonet" :rules="rules">
|
<!-- 卡口名称 -->
|
<div class="device-item">
|
<div class="item-left">
|
<el-form-item label="卡口名称:" prop="name">
|
<el-input v-model="bayonet.name" placeholder="请填写卡口名称"></el-input>
|
</el-form-item>
|
</div>
|
<div class="item-right"></div>
|
</div>
|
<!-- 经纬度位置 -->
|
<div class="device-item">
|
<div class="item-left">
|
<el-form-item label="经纬度位置:" prop="longitude">
|
<el-input v-model="bayonet.longitude" placeholder="请填写经度位置"></el-input>
|
</el-form-item>
|
<el-form-item prop="latitude">
|
<el-input v-model="bayonet.latitude" placeholder="请填写纬度位置"></el-input>
|
</el-form-item>
|
</div>
|
<div class="item-right"></div>
|
</div>
|
<!-- 所属区域 -->
|
<div class="device-item">
|
<div class="item-left">
|
<el-form-item label="所属区域:" prop="belong_area">
|
<el-input v-model="bayonet.belong_area" placeholder="请填写区域名称"></el-input>
|
</el-form-item>
|
</div>
|
<div class="item-right"></div>
|
</div>
|
<!-- 域名/ip -->
|
<div class="device-item">
|
<div class="item-left">
|
<el-form-item label="域名/IP:" prop="ipAddress">
|
<el-input v-model="bayonet.ipAddress" placeholder="请填写域名或者IP"></el-input>
|
</el-form-item>
|
</div>
|
<div class="item-right"></div>
|
</div>
|
<!-- 端口号 -->
|
<div class="device-item">
|
<div class="item-left">
|
<el-form-item label="端口号:" prop="port">
|
<el-input v-model="bayonet.port" placeholder="请输入端口号"></el-input>
|
</el-form-item>
|
</div>
|
<div class="item-right"></div>
|
</div>
|
<!-- 前端类型 -->
|
<div class="device-item">
|
<div class="item-left">
|
<el-form-item label="前端类型:" prop="frontEndType">
|
<el-input v-model="bayonet.frontEndType" placeholder="请输入前端类型"></el-input>
|
</el-form-item>
|
</div>
|
<div class="item-right"></div>
|
</div>
|
<!-- 出入城类型 -->
|
<div class="device-item">
|
<div class="item-left">
|
<el-form-item label="出入城类型:" prop="inOutCityType">
|
<el-input v-model="bayonet.inOutCityType" placeholder="出城/入城"></el-input>
|
</el-form-item>
|
</div>
|
<div class="item-right"></div>
|
</div>
|
<!-- 描述 -->
|
<div class="device-item">
|
<div class="item-left">
|
<el-form-item label="描述:" prop="description">
|
<el-input type="textarea" :rows='5' maxlength="200" v-model="bayonet.description" placeholder="请输入描述内容200字以内"></el-input>
|
</el-form-item>
|
</div>
|
<div class="item-right"></div>
|
</div>
|
<!-- 按钮 -->
|
<div class="device-btn">
|
<el-button @click="closeDialog">返回</el-button>
|
<el-button type="primary" @click="onSubmit">确定</el-button>
|
</div>
|
</el-form>
|
</div>
|
</template>
|
<script>
|
import bayonet from "@/api/system/bayonet";
|
import { deepClone } from "@/utils/helper";
|
|
export default {
|
props: {
|
originalBayonet: {
|
type: Object,
|
default: () => {}
|
},
|
isEdit: {
|
type: Boolean,
|
default: () => false
|
}
|
},
|
|
data() {
|
return {
|
bayonet: {
|
name: '',
|
latitude: '',
|
longitude: '',
|
belong_area: '',
|
ipAddress: '',
|
port: '',
|
frontEndType: '',
|
inOutCityType: '',
|
description: ''
|
},
|
rules: {
|
name: [{ required: true, trigger: 'blur', message: '请填写卡口名称' }],
|
latitude: [{ required: true, trigger: ['blur', 'change'], message: '请填写纬度位置' }],
|
longitude: [{ required: true, trigger: ['blur', 'change'], message: '请填写经度位置' }],
|
belong_area: [{ required: true, trigger: ['blur', 'change'], message: '请填写区域名称' }],
|
ipAddress: [{ required: true, trigger: ['blur', 'change'], message: '请填写域名或者IP' }],
|
port: [{ required: true, trigger: ['blur', 'change'], message: '请输入端口号' }],
|
frontEndType: [{ required: true, trigger: ['blur', 'change'], message: '请输入前端类型' }],
|
inOutCityType: [{ required: true, trigger: ['blur', 'change'], message: '请填写出城/入城' }],
|
description: [{ required: true, trigger: ['blur', 'change'], message: '请输入描述内容' }]
|
}
|
}
|
},
|
|
methods: {
|
onSubmit() {
|
this.$refs.device.validate(valid => {
|
if (valid) {
|
const copyBayonet = deepClone(this.bayonet);
|
if (!this.isEdit) {
|
bayonet.addBayonet(this.bayonet)
|
.then(() => {
|
this.$message({ type: 'success', message: '操作成功' });
|
this.$emit('closeDialog');
|
})
|
.catch(err => {
|
this.$message({ type: 'error', message: err });
|
})
|
} else {
|
bayonet.updateBayonet(copyBayonet)
|
.then(() => {
|
this.$message({ type: 'success', message: '操作成功' });
|
this.$emit('closeDialog');
|
})
|
.catch(err => {
|
this.$message({ type: 'error', message: err });
|
})
|
}
|
} else {
|
this.$message({ type: 'warning', message: '请检查必填项' });
|
}
|
});
|
},
|
|
closeDialog() {
|
this.$emit('closeDialog');
|
}
|
}
|
|
}
|
</script>
|
<style lang="scss" scoped>
|
.create {
|
padding: 20px;
|
|
.device-item {
|
display: flex;
|
|
.item-left {
|
flex: 6;
|
display: flex;
|
|
.el-form-item {
|
flex: 1;
|
}
|
}
|
|
.item-right {
|
flex: 4;
|
}
|
}
|
|
.device-btn {
|
padding-top: 20px;
|
display: flex;
|
justify-content: center;
|
}
|
}
|
</style>
|
