CreateSnapshotDialog.vue

<template>
  <!-- 子网创建对话框 -->
  <el-dialog
    @close="close"
    @opened="createSnapshotInit"
    v-dialogDrag
    :title=title
    style="font-size: 10px;" width='450px'
    :visible.sync="createSnapshotVisible">
    <el-form :model="form" inline="true">
      <el-form-item :label="$t('SnapShotManagement.SnapShotName')+':'" :label-width="formLabelWidth"
                    style="margin-bottom: -10px;">
        <el-input size='mini' :placeholder="$t('common.placeholder')" v-model="form.snapshotName"
                  v-on:blur="snapshotNameCheck" autocomplete="off" style="width: 190px;"></el-input>
      </el-form-item>
      <el-form-item :label="$t('SnapShotManagement.description')+':'" :label-width="formLabelWidth"
                    style="margin-bottom: -10px; ">
        <el-input type="text" size="mini" :placeholder="$t('common.placeholder')" v-model="form.description"
                  autocomplete="off" style="width: 190px;"></el-input>
      </el-form-item>
      <el-form-item :label="$t('SnapShotManagement.backupFile')+':'" :label-width="formLabelWidth"
                    style="margin-bottom: -10px;">
        <template>
          <el-checkbox-group v-model="checkedBackups" @change="handleCheckedOptionChange">
            <el-checkbox v-for="(checkedBack) in backups" :label="checkedBack" :key="checkedBack">{{checkedBack}}</el-checkbox>
          </el-checkbox-group>
        </template>

      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button size='mini' type="primary" @click="createSnapshot">
        {{$t("common.createBtn")}}
      </el-button>
      <el-button size='mini' @click="close">{{$t("common.cancel")}}</el-button>
    </div>
  </el-dialog>
</template>

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

  const backups = ['拓扑信息', '用户信息']
  export default {
    props: ['command'],
    data: function () {
      return {

        checkAll: false,
        checkedBackups: [],
        backups: backups,
        isIndeterminate: true,

        title: this.command.title,
        initList: this.command.target,
        createSnapshotVisible: false,
        formLabelWidth: '120px',
        form: {
          snapshotName: '',
          description: '',
          saveOptions: []
        },
      }
    },
    methods: {

      handleCheckedOptionChange (value) {
        // alert(this.checkedBackups)
        let checkedCount = value.length;
        this.checkAll = checkedCount === this.checkedBackups.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.checkedBackups.length;
      },

      close () {
        this.command.done();
      },

      //------------------------------------创建开始-------------------------------------------------------------------
      createSnapshotInit () {
        this.form.snapshotName = this.initList.snapshotName
        this.form.description = this.initList.description
      },

      createSnapshot () {
        if (!this.snapshotNameCheck()) {
          return
        }
        if (this.checkedBackups.length === 0) {
          this.InfoTip.warningTip(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.PLEASE_SELECT_AT_LEAST_ONE_SAVE_OPTIONS))
          return
        }
        else {
          let snapshot = {};
          snapshot.snapshotKey = '';
          snapshot.snapshotName = this.form.snapshotName;
          snapshot.description = this.form.description;
          snapshot.delFlag = 0;
          snapshot.timestamp = '';
          let opt = this.changeCheckedBackups()
          switch (opt) {
            case 0:
              this.addSnapshotTopology(snapshot, opt)
                  break
            case 1:
              this.addSnapshotUser(snapshot, opt)
                  break
            default:
              this.addSnapshotAll(snapshot, opt)
                  break
          }
          // SnapshotService.addSnapshot(snapshot, this.checkedCities).then(result => {
          //   //成功
          //   this.InfoTip.successTip(this,HelperUtil.getStatusCodeObjectByCode(this.successCode.ADD_CODE));
          //   this.command.done();
          // }).catch(err => {
          //   this.InfoTip.errorTip(this,err);
          //
          // });
        }
      },
      //
      addSnapshotTopology: function (snapshotInit, options) {
        SnapshotService.addSnapshot(snapshotInit, options).then(result => {
          //成功
          this.InfoTip.successTip(this, HelperUtil.getStatusCodeObjectByCode(this.successCode.ADD_CODE))
          this.command.done()
        }).catch(err => {
          this.InfoTip.errorTip(this, err)

        })
      },

      addSnapshotUser: function (snapshotInit, options) {
        SnapshotService.addSnapshot(snapshotInit, options).then(result => {
          //成功
          this.InfoTip.successTip(this, HelperUtil.getStatusCodeObjectByCode(this.successCode.ADD_CODE))
          this.command.done()
        }).catch(err => {
          this.InfoTip.errorTip(this,err)

        })
      },

      addSnapshotAll: function (snapshotInit, options) {
        SnapshotService.addSnapshot(snapshotInit, options).then(result => {
          //成功
          this.InfoTip.successTip(this, HelperUtil.getStatusCodeObjectByCode(this.successCode.ADD_CODE))
          this.command.done()
        }).catch(err => {
          this.InfoTip.errorTip(this, err)

        })
      },

      changeCheckedBackups: function () {
        let select = ''
        if(this.checkedBackups.length > 1) {
          select = 2
        } else {
          if(this.checkedBackups[0] == '拓扑信息') {
            select = 0
          } else if (this.checkedBackups[0] == '用户信息') {
            select = 1
          }
        }
        return select
      },

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

      //------------------------------------验证开始-------------------------------------------------------------------
      /**
       * @Description  ：子网名称校验： 不能为空
       * @author       :
       * @param        :
       * @return       :
       * @exception    :
       * @date         :
       */
      snapshotNameCheck: function () {
        let subnetCheck = legitimacyCheck()
        if (!subnetCheck.textNullCheck(this.form.snapshotName)) {
          //输入不可为空
          this.InfoTip.warningTip_alarm(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.TEXT_NULL_CODE),this.$t('SnapShotManagement.SnapShotName'))
          return false
        }
        if(!this.textLengthCheck(this.form.snapshotName)) return false
        return true
      },
      /**
       * @Description  ：文本框所输入的字符长度校验： 控制在20之内
       * @author       : bjh
       * @param        :
       * @return       :
       * @exception    :
       * @date         : 2019/1/15 16:09
       */
      textLengthCheck: function (checkString) {
        let subnetCheck = legitimacyCheck()
        if (!subnetCheck.textLengthCheck(checkString)) {
          //所输文本长度必须控制在20之内
          this.InfoTip.warningTip(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.LENGTH_CODE))
          return false
        }
        return true
      },
      //------------------------------------验证结束-------------------------------------------------------------------

    },

    created() {
      console.log('快照创建初始化加载数据')
    },

    mounted(){
      this.createSnapshotVisible = true;
    }
  }
</script>