<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="belongArea">
|
<el-input
|
v-model="bayonet.belongArea"
|
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 class="optionItem" label="前端类型:" prop="role">
|
<el-select
|
v-model="bayonet.frontEndType"
|
placeholder="请输入前端类型"
|
collapse-tags
|
>
|
<el-option
|
v-for="item in frontEndTypeList"
|
:key="item.id"
|
:label="item.name"
|
:value="item.id"
|
>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
</div>
|
<div class="item-right"></div>
|
</div>
|
<!-- 出入城类型 -->
|
<div class="device-item">
|
<div class="item-left">
|
<el-form-item class="optionItem" label="出入城类型:" prop="role">
|
<el-select
|
v-model="bayonet.inOutCityType"
|
placeholder="请输入出入城类型"
|
collapse-tags
|
>
|
<el-option
|
v-for="item in inOutTypeList"
|
:key="item.id"
|
:label="item.name"
|
:value="item.id"
|
>
|
</el-option>
|
</el-select>
|
</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, getTypeList } from "@/utils/helper";
|
|
export default {
|
props: {
|
originalBayonet: {
|
type: Object,
|
default: () => {},
|
},
|
isEdit: {
|
type: Boolean,
|
default: () => false,
|
},
|
},
|
|
data() {
|
return {
|
bayonet: {
|
name: "",
|
latitude: "",
|
longitude: "",
|
belongArea: "",
|
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: "请填写经度位置",
|
},
|
],
|
belongArea: [
|
{
|
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: "请填写出城/入城",
|
},
|
],
|
},
|
frontEndTypeList: [],
|
inOutTypeList: [],
|
};
|
},
|
beforeCreate() {},
|
created() {
|
this.getInOutCityTypeList();
|
this.getFrontEndTypeList();
|
if (this.originalBayonet) {
|
this.bayonet = this.originalBayonet;
|
}
|
},
|
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: "请检查必填项" });
|
}
|
});
|
},
|
async getInOutCityTypeList() {
|
this.inOutTypeList = await getTypeList(1, "14");
|
},
|
|
async getFrontEndTypeList() {
|
this.frontEndTypeList = await getTypeList(1, "13");
|
},
|
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>
|
