zhanghua
2022-11-16 cc9ddf2ecaf3ad935374f49c842227f7eb15779d
src/views/systemSetting/device/bayonet/create/index.vue
@@ -1,6 +1,6 @@
<template>
    <div class="create">
        <el-form ref="device" label-position="right" label-width="120px" :model="bayonet" :rule="rules">
        <el-form ref="device" label-position="right" label-width="120px" :model="bayonet" :rules="rules">
            <!-- 卡口名称 -->
            <div class="device-item">
                <div class="item-left">
@@ -25,8 +25,8 @@
            <!-- 所属区域 -->
            <div class="device-item">
                <div class="item-left">
                    <el-form-item label="所属区域:" prop="area">
                        <el-input v-model="bayonet.area" placeholder="请填写区域名称"></el-input>
                    <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>
@@ -34,8 +34,8 @@
            <!-- 域名/ip -->
            <div class="device-item">
                <div class="item-left">
                    <el-form-item label="域名/IP:" prop="domainName">
                        <el-input v-model="bayonet.domainName" placeholder="请填写域名或者IP"></el-input>
                    <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>
@@ -52,8 +52,8 @@
            <!-- 前端类型 -->
            <div class="device-item">
                <div class="item-left">
                    <el-form-item label="前端类型:" prop="webType">
                        <el-input v-model="bayonet.webType" placeholder="请输入前端类型"></el-input>
                    <el-form-item label="前端类型:" prop="frontEndType">
                        <el-input v-model="bayonet.frontEndType" placeholder="请输入前端类型"></el-input>
                    </el-form-item>
                </div>
                <div class="item-right"></div>
@@ -61,8 +61,8 @@
            <!-- 出入城类型 -->
            <div class="device-item">
                <div class="item-left">
                    <el-form-item label="出入城类型:" prop="cityType">
                        <el-input v-model="bayonet.cityType" placeholder="出城/入城"></el-input>
                    <el-form-item label="出入城类型:" prop="inOutCityType">
                        <el-input v-model="bayonet.inOutCityType" placeholder="出城/入城"></el-input>
                    </el-form-item>
                </div>
                <div class="item-right"></div>
@@ -78,33 +78,90 @@
            </div>
            <!-- 按钮 -->
            <div class="device-btn">
                <el-button>返回</el-button>
                <el-button type="primary">确定</el-button>
                <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: {
                bayonetName: '',
              name: '',
                latitude: '',
                longitude: '',
                area: '',
              belong_area: '',
                ipAddress: '',
                port: '',
                frontEndType: '',
                inOutCityType: '',
                description: '',
              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>