UpdateDevicePort.vue

<template>
  <!-- 端口创建对话框 -->
  <el-dialog v-dialogDrag
             @close="close"
             @opened="createPortInit"
             :title="$t('DeviceCreatPort.updatePortInfo')"
             width="450px"
             v-if="CreateAndCopyDevicePort"
             :visible.sync="CreateAndCopyDevicePort">
    <el-form :model="form" inline="true" ref="form">
      <el-form-item prop="number" style="margin-bottom: -10px;" :label="$t('DeviceCreatPort.deviceKey')+': '"
                    :label-width="formLabelWidth">
        <el-select  size='mini' v-model="form.deviceKey" :placeholder="$t('common.placeholderSelect')"
                    v-on:change="deviceKeyCheck(form.deviceKey)">
          <el-option v-for="item in deviceList" :key="item.deviceKey" :label="item.displayName"
                     :value="item.deviceKey"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="number" style="margin-bottom: -10px;" :label="$t('DeviceCreatPort.portName')+': '"
                    :label-width="formLabelWidth">
        <el-select clearable size='mini' v-model="form.portName" :placeholder="$t('common.placeholderSelect')"
                   filterable @blur="selectBlur">
          <el-option v-for="item in portNameList" :key="item.resourceKey" :label="item.portName"
                     :value="item.portName">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item style="margin-bottom: -10px;" prop="string" :label="$t('DeviceCreatPort.purpose')+': '"
                    :label-width="formLabelWidth">
        <el-input size='mini' :placeholder="$t('common.placeholder')" v-model="form.businessDesc" autocomplete="off"
                  v-on:blur="purposeCheck" style="width: 178px"></el-input>
      </el-form-item>
    </el-form>
    <el-row style="margin-bottom: 0px;" slot="footer" class="dialog-footer">
      <el-button style="margin-bottom: -10px;" id="save" icon="el-icon-circle-check" size='mini' type="primary" @click="createPort">
        {{$t("common.ok")}}
      </el-button>
      <el-button style="margin-bottom: -10px;" icon="el-icon-circle-check" size='mini' @click="close">
        {{$t("common.cancel")}}
      </el-button>
    </el-row>
  </el-dialog>
</template>

<script>
import PortService from '@/domain/services/PortListService.js'
import DeviceService from '@/domain/services/DeviceService'
import legitimacyCheck from '../../../utils/legitimacyCheck'
import HelperUtil from '../../../utils/HelperUtil'

export default {
  props: ['command'],
  data: function () {
    return {
      initList: this.command.target,
      CreateAndCopyDevicePort: false,
      formLabelWidth: '100px',
      deviceList: [],
      portCheck: null,
      portNameList: [],
      form: {

        portKey: '',
        deviceKey: '',
        portName: '',
        businessDesc: '',
        delFlag: '',
        modifyTime: ''

      }
    }
  },
  methods: {
    /**
       * @Description  : 端口支持手动输入
       * @author       : ls
       * @date         : 2020/10/13 18:02
       * @param        :
       * @return       :
       */
    selectBlur: function (e) {
      this.form.portName = e.target.value
    },
    close () {
      this.command.done()
    },

    /**
       * @Description  :获取全部网元信息
       * @author       ::
       * @date         :
       */
    getAllDeviceInit: function () {
      console.log('获取全部网元信息:')
      let _this = this
      DeviceService.getAllDeviceCollection().then(result => {
        // 成功
        _this.deviceList = result
        if (_this.initList.deviceKey !== '') {
          this.deviceKeyCheck(this.initList.deviceKey)
        }
      }).catch(err => {
        // 失败
        _this.InfoTip.errorTip(_this, err)
      })
    },

    // ------------------------------------创建开始-------------------------------------------------------------------
    createPortInit () {
      this.form.portKey = ''
      this.form.deviceKey = this.initList.deviceKey
      this.form.portName = this.initList.portName
      this.form.businessDesc = this.initList.businessDesc
      this.form.delFlag = this.initList.delFlag
      this.form.modifyTime = this.initList.modifyTime
      // this.deviceKeyCheck(this.form.deviceKey)
    },

    createPort () {
      let _this = this
      if (this.form.deviceKey === '') {
        this.InfoTip.warningTip(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.TEXT_NULL_CODE), this.$t('DeviceCreatPort.deviceKeyForTable'))
        return false
      } else if (!_this.portNameCheck()) {

      } else if (!_this.purposeCheck()) {

      } else {
        let port = {}
        port.portKey = _this.initList.portKey
        port.deviceKey = _this.form.deviceKey
        port.portName = _this.form.portName
        port.businessDesc = _this.form.businessDesc
        port.delFlag = _this.form.delFlag
        port.modifyTime = _this.form.modifyTime

        // 打开loading
        let loadingInstance = _this.Loading.openLoading()
        PortService.modifyPort(port).then(result => {
          // 关闭loading
          _this.Loading.closeLoading(loadingInstance)
          // 成功
          _this.InfoTip.successTip(_this, HelperUtil.getStatusCodeObjectByCode(_this.successCode.MODIFY_CODE))
          _this.close()
        }).catch(err => {
          // 关闭loading
          _this.Loading.closeLoading(loadingInstance)
          // 失败
          _this.InfoTip.errorTip(_this, err)
        })
      }
    },

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

    // ------------------------------------验证开始-------------------------------------------------------------------
    /**
       * @Description  ：端口名称校验： 不能为空
       * @author       :
       * @param        :
       * @return       :
       * @exception    :
       * @date         :
       */
    portNameCheck: function () {
      if (!this.portCheck.textNullCheck(this.form.portName)) {
        // 输入不可为空
        this.InfoTip.warningTip(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.TEXT_NULL_CODE), this.$t('DeviceCreatPort.portNameForTable'))
        return false
      }
      return true

      // if (!this.portCheck.textNullCheck(this.form.portName)) {
      //   // 输入不可为空
      //   this.InfoTip.warningTip(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.TEXT_NULL_CODE), this.$t('DeviceCreatPort.portNameForTable'))
      //   return false
      // } else if (parseInt(this.form.portName) > 99 || parseInt(this.form.portName) < 0) {
      //   this.InfoTip.warningTip(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.START_DEVICE_PORT_BETWEEN_0_99))
      //   return false
      // }
      // if (!(this.textLengthCheck(this.form.portName))) { return false }
      // if (!this.numCheck(this.form.portName)) { return false }
      // return true
    },
    numCheck: function (checkNumber) {
      if (!this.portCheck.numberCheck(checkNumber)) {
        this.InfoTip.warningTip(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.PLEASE_ENTER_VALID_NUMBER))

        return false
      }
      return true
    },

    /**
       * @Description  ：端口名称校验： 不能为空
       * @author       :
       * @param        :
       * @return       :
       * @exception    :
       * @date         :
       */
    purposeCheck: function () {
      if (!this.portCheck.textNullCheck(this.form.businessDesc)) {
        // 输入不可为空
        this.InfoTip.warningTip(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.TEXT_NULL_CODE), this.$t('DeviceCreatPort.purposeForTable'))
        return false
      }
      // this.textLengthCheck(this.form.businessDesc)
      return true
    },
    /**
       * @Description  : 端口名称获取
       * @author       : ls
       * @date         : 2020/10/13 18:01
       * @param        :
       * @return       :
       */
    deviceKeyCheck: function (val) {
      let _this = this
      var flag = false
      _this.portNameList = []
      _this.form.portName = ''
      var deviceTy = _this.deviceList[val].deviceTypeKey
      if (deviceTy === 'SERVER' || deviceTy === 'STORAGE') {
        flag = true
      }
      if (flag) {
        _this.portNameList = [
          // {
          //   key: 'IPMI',
          //   portName: 'IPMI'
          // },
          // {
          //   key: '网络端口1',
          //   portName: '网络端口1'
          // },
          // {
          //   key: '网络端口2',
          //   portName: '网络端口2'
          // }
        ]
      } else {
        let selectList = []
        selectList.push(
          {
            quaryAttribute: 'deviceKey',
            compareSymbol: '=',
            compareValue: val
          },
          {
            quaryAttribute: 'deviceParam',
            compareSymbol: '=',
            compareValue: 'PORT_NAME'
          }
        )
        DeviceService.getDevicePortStatus(selectList).then(result => {
          _this.portNameList = result
        }).catch(err => {
          _this.InfoTip.errorTip(_this, err)
        })
      }
    },

    /**
       * @Description  ：文本框所输入的字符长度校验： 控制在20之内
       * @author       :
       * @param        :
       * @return       :
       * @exception    :
       * @date         : 2019/1/15 16:09
       */
    textLengthCheck: function (checkString) {
      if (!this.portCheck.textLengthCheck(checkString)) {
        // 所输文本长度必须控制在20之内
        this.InfoTip.warningTip(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.LENGTH_CODE))
        return false
      }
      return true
    }

    // ------------------------------------验证结束-------------------------------------------------------------------

  },

  created () {
    console.log('接入业务创建初始化加载数据')
    this.getAllDeviceInit()
    this.portCheck = legitimacyCheck()
  },
  mounted () {
    this.CreateAndCopyDevicePort = true
  }
}
</script>