UpdateServerDialog.vue

<template>
  <!-- 服务器修改对话框 -->
  <el-dialog
    @close="close"
    @opened="updateServerInit"
    v-dialogDrag
    v-if="UpdateServerVisible"
    :title="$t('BasicConfigurationManagement.dialogServerUpdate')"
    style="font-size: 10px;" width='450px'
    :visible.sync="UpdateServerVisible">
    <el-form :model="form" inline="true" ref="form" >
      <el-form-item :label="'*'+$t('BasicConfigurationManagement.serverName')+':'" :label-width="formLabelWidth" style="margin-bottom: -10px;">
        <el-input size = 'mini' :placeholder="$t('common.placeholder')" v-model="form.serverName"  v-on:blur="textLengthCheck(form.serverName)&&serverNameCheck()" autocomplete="off" style="width:200px"></el-input>
      </el-form-item>
      <el-form-item :label="'*'+$t('BasicConfigurationManagement.serverType')+':'" :label-width="formLabelWidth" style="margin-bottom: -10px;">
        <el-select v-model="value" size="mini" :placeholder="$t('common.selectOption')" v-on:change="serverTypeCheck" style="width:200px">
          <el-option
            v-for="item in ServerList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="'*'+$t('DeviceConfigurationManagement.ipAddress')+':'" :label-width="formLabelWidth" style="margin-bottom: -10px;">
        <el-input size = 'mini' :placeholder="$t('common.placeholder')" v-model="form.ipAddress"  v-on:blur="ipCheck" autocomplete="off" style="width:200px"></el-input>
      </el-form-item>
      <el-form-item :label="'*'+$t('DeviceConfigurationManagement.snmpVersion')+':'"  :label-width="formLabelWidth" style="margin-bottom: -10px;">
        <el-select clearable size='mini' v-model="form.snmpVersion" :placeholder="$t('common.selectOption')" autocomplete="off" v-on:change="snmpVersionCheck" style="width:200px">
          <el-option
            v-for="item in SNMPList"
            :key="item.key"
            :label="item.label"
            :value="item.key">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="'*'+$t('DeviceConfigurationManagement.snmpPort')+':'" :label-width="formLabelWidth" style="margin-bottom: -10px;">
        <el-input size = 'mini' :placeholder="$t('common.placeholder')" v-model="form.snmpPort" v-on:blur="textLengthCheck(form.snmpPort)&&snmpPortCheck()" autocomplete="off" style="width:200px"></el-input>
      </el-form-item>
      <el-form-item :label="'*'+$t('DeviceConfigurationManagement.trapPort')+':'" :label-width="formLabelWidth" style="margin-bottom: -10px;">
        <el-input size = 'mini' :placeholder="$t('common.placeholder')" v-model="form.trapPort" v-on:blur="textLengthCheck(form.trapPort)&&trapPortCheck()" autocomplete="off" style="width:200px"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button size = 'mini' type="primary" @click="updateServer" v-loading.fullscreen.lock="fullscreenLoading">{{$t('common.updateBtn')}}</el-button>
      <el-button size = 'mini' @click="close">{{$t("common.cancel")}}</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import ServerService from '@/domain/services/ServerService.js'
  import legitimacyCheck from "../../../utils/legitimacyCheck";
  import HelperUtil from '@/utils/HelperUtil'

  export default {
    props: ['command'],

    data: function () {
      return {
        UpdateServerVisible: false,
        initList: this.command.target,

        formLabelWidth: '145px',
        form: {
          serverName: "",
          serverType: "",
          ipAddress: "",
          snmpVersion: "",
          snmpPort: "",
          trapPort: ""
        },
        value:'',
        SNMPList: [
          {
            key: '0',
            label: 'v1'
          },
          {
            key: '1',
            label: 'v2c'
          },
          {
            key: '3',
            label: 'v3'
          }
        ],
        //服务器类型下拉列表
        ServerList:[
          {
            value: '0',
            label: 'SDNC服务器'
          }, {
            value: '1',
            label: '中心数据库服务器'
          }, {
            value: '2',
            label: '认证服务器'
          }, {
            value: '3',
            label: 'NMS服务器'
          }],
        SelectServer:'',
      }
    },
    methods: {
      close() {
        this.command.done();
      },

      //------------------------------------创建开始-------------------------------------------------------------------
      updateServerInit(){
        this.form.serverKey = this.initList.serverKey;
        this.form.serverName = this.initList.serverName;
        this.value = this.initList.serverType
        this.form.ipAddress = this.initList.ipAddress;
        this.form.snmpVersion = this.initList.snmpVersion
        this.form.snmpPort = this.initList.snmpPort;
        this.form.trapPort = this.initList.trapPort

      },

      updateServer(){
        if (!(this.serverNameCheck()&&this.serverTypeCheck()&&this.snmpVersionCheck()&&this.snmpPortCheck()&&this.trapPortCheck()&&this.ipCheck())) {
          return
        }
        else{
          let server = {};
          server.serverKey = this.form.serverKey;
          server.serverName = this.form.serverName;
          server.serverType = this.value;
          server.ipAddress = this.form.ipAddress;
          server.snmpVersion = this.form.snmpVersion;
          server.snmpPort = this.form.snmpPort;
          server.trapPort = this.form.trapPort;
          server.delFlag = 0;
          server.modifyTime = '';
          let loadingInstance = this.Loading.openLoading();
          let _this = this;
          ServerService.modifyServer(server).then(result => {
            //成功
            _this.Loading.closeLoading(loadingInstance);
            _this.InfoTip.successTip(_this, HelperUtil.getStatusCodeObjectByCode(_this.successCode.MODIFY_CODE))
            _this.close();
          }).catch(err =>{
            //失败
            _this.Loading.closeLoading(loadingInstance);
            _this.InfoTip.errorTip(_this, err);
          });
        }
      },

      //------------------------------------创建结束-------------------------------------------------------------------

      //------------------------------------验证开始-------------------------------------------------------------------
      textLengthCheck: function (checkString) {
        let serverCheck = legitimacyCheck()
        if (!serverCheck.textLengthCheck(checkString)) {
          //所输文本长度必须控制在20之内
          this.InfoTip.warningTip(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.LENGTH_CODE))
          return false
        }
        return true
      },

      //服务器名称非空检验
      serverNameCheck:function(){
        let serverCheck = legitimacyCheck()
        if (!serverCheck.textNullCheck(this.form.serverName)) {
          //输入不可为空
          this.InfoTip.warningTip(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.TEXT_NULL_CODE),this.$t('BasicConfigurationManagement.serverName'))
          return false
        }
        return true
      },

      //服务器类型非空检验
      serverTypeCheck:function(){
        let serverCheck = legitimacyCheck()
        if (!serverCheck.textNullCheck(this.value)) {
          //输入不可为空
          this.InfoTip.warningTip(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.TEXT_NULL_CODE),this.$t('BasicConfigurationManagement.serverType'))
          return false
        }
        return true
      },

      //SNMP版本非空检验
      snmpVersionCheck:function(){
        let serverCheck = legitimacyCheck()
        if (!serverCheck.textNullCheck(this.form.snmpVersion)) {
          //输入不可为空
          this.InfoTip.warningTip(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.TEXT_NULL_CODE),this.$t('BasicConfigurationManagement.snmpVersion'))
          return false
        }
        return true
      },

      //Get端口数字非空检验
      snmpPortCheck:function(){
        let serverCheck = legitimacyCheck()
        if (!serverCheck.numberCheck(this.form.snmpPort)) {
          //请输入合法性数字
          this.InfoTip.warningTip(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.DIGIT_CODE),this.$t('BasicConfigurationManagement.snmpPort'))
          return false
        }
        return true
      },

      //trap端口数字非空检验
      trapPortCheck:function(){
        let serverCheck = legitimacyCheck()
        if (!serverCheck.numberCheck(this.form.trapPort)) {
          //请输入合法性数字
          this.InfoTip.warningTip(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.DIGIT_CODE),this.$t('BasicConfigurationManagement.trapPort'))
          return false
        }
        return true
      },

      // 验证IP合法性
      ipCheck: function () {
        let serverCheck = legitimacyCheck()
        if (!serverCheck.ipCheck(this.form.ipAddress)) {
          //请输入有效ip地址
          this.InfoTip.warningTip(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.IPCHECK_CODE))
          return false
        }
        else {
          return true
        }
      },
      //------------------------------------验证结束-------------------------------------------------------------------

    },
    created() {
    },
    mounted(){
      this.UpdateServerVisible = true;
    }
  }
</script>
<style scope>
  .el-input{
    width:200px;
  }
</style>