<template> <!--QoS策略配置创建对话框 --> <el-dialog @close="close" @opened="creatQosInit" v-if="createAndCopyQosVisible" v-dialogDrag style="font-size: 10px;" width='750px' :title=title :visible.sync="createAndCopyQosVisible"> <el-row> <el-form :model="form" inline="true" ref="form" style="width:750px"> <el-row> <el-form-item style="margin-bottom: -10px; float:left"> <el-form-item prop="profileName" :label="'*'+ $t('QosManagement.CDPProfileName')+':'" :label-width="formLabelWidth"> <el-input type="age" size='mini' :placeholder="$t('common.placeholder')" v-model="form.profileName" v-on:blur="nameCheck" autocomplete="off" style="width:200px"></el-input> </el-form-item> </el-form-item> </el-row> <el-form-item style="margin-bottom: -10px;float:left "> <el-form-item prop="schedulingType0" :label="'*'+ $t('QosManagement.schedulingType0')+':'" :label-width="formLabelWidth"> <el-select clearable size='mini' :placeholder="$t('common.placeholder')" v-model="form.schedulingType0" v-on:change="schedulingTypeCheck0" autocomplete="off" style="width:200px"> <!--:formatter="formatStateKey"--> <el-option v-for="item in schedulingTypeList" :key="item.key" :label="item.label" :value="item.key"></el-option> </el-select> </el-form-item> <el-form-item prop="bandwidth0" :label="'*'+ $t('QosManagement.bandwidth0')+':'" :label-width="formLabelWidth"> <el-input type="age" size='mini' :placeholder="$t('common.placeholder')" v-model.trim="form.bandwidth0" v-on:blur="bandwithCheak0" autocomplete="off" style="width:200px"> <template slot="append">Mbit/s</template> </el-input> </el-form-item> </el-form-item> <el-form-item style="margin-bottom: -10px;float:left "> <el-form-item prop="schedulingType1" :label="'*'+ $t('QosManagement.schedulingType1')+':'" :label-width="formLabelWidth"> <el-select clearable size='mini' :placeholder="$t('common.placeholder')" v-model="form.schedulingType1" autocomplete="off" v-on:change="schedulingTypeCheck1" style="width:200px"> <!--:formatter="formatStateKey"--> <el-option v-for="item in schedulingTypeList" :key="item.key" :label="item.label" :value="item.key"></el-option> </el-select> </el-form-item> <el-form-item prop="bandwidth1" :label="'*'+ $t('QosManagement.bandwidth1')+':'" :label-width="formLabelWidth"> <el-input type="age" size='mini' :placeholder="$t('common.placeholder')" v-model.trim="form.bandwidth1" v-on:blur="bandwithCheak1" autocomplete="off" style="width:200px"> <template slot="append">Mbit/s</template> </el-input> </el-form-item> </el-form-item> <el-form-item style="margin-bottom: -10px; float:left"> <el-form-item prop="schedulingType2" :label="'*'+ $t('QosManagement.schedulingType2')+':'" :label-width="formLabelWidth"> <el-select clearable size='mini' :placeholder="$t('common.placeholder')" v-model="form.schedulingType2" autocomplete="off" v-on:change="schedulingTypeCheck2" style="width:200px"> <!--:formatter="formatStateKey"--> <el-option v-for="item in schedulingTypeList" :key="item.key" :label="item.label" :value="item.key"></el-option> </el-select> </el-form-item> <el-form-item prop="bandwidth2" :label="'*'+ $t('QosManagement.bandwidth2')+':'" :label-width="formLabelWidth"> <el-input type="age" size='mini' :placeholder="$t('common.placeholder')" v-model.trim="form.bandwidth2" v-on:blur="bandwithCheak2" autocomplete="off" style="width:200px"> <template slot="append">Mbit/s</template> </el-input> </el-form-item> </el-form-item> <el-form-item style="margin-bottom: -10px; float:left"> <el-form-item prop="schedulingType3" :label="'*'+ $t('QosManagement.schedulingType3')+':'" :label-width="formLabelWidth"> <el-select clearable size='mini' :placeholder="$t('common.placeholder')" v-model="form.schedulingType3" autocomplete="off" v-on:change="schedulingTypeCheck3" style="width:200px"> <!--:formatter="formatStateKey"--> <el-option v-for="item in schedulingTypeList" :key="item.key" :label="item.label" :value="item.key"></el-option> </el-select> </el-form-item> <el-form-item prop="bandwidth3" :label="'*'+ $t('QosManagement.bandwidth3')+':'" :label-width="formLabelWidth"> <el-input type="age" size='mini' :placeholder="$t('common.placeholder')" v-model.trim="form.bandwidth3" v-on:blur="bandwithCheak3" autocomplete="off" style="width:200px"> <template slot="append">Mbit/s</template> </el-input> </el-form-item> </el-form-item> <el-form-item style="margin-bottom: -10px; float:left"> <el-form-item prop="schedulingType4" :label="'*'+ $t('QosManagement.schedulingType4')+':'" :label-width="formLabelWidth"> <el-select clearable size='mini' :placeholder="$t('common.placeholder')" v-model="form.schedulingType4" autocomplete="off" v-on:change="schedulingTypeCheck4" style="width:200px"> <!--:formatter="formatStateKey"--> <el-option v-for="item in schedulingTypeList" :key="item.key" :label="item.label" :value="item.key"></el-option> </el-select> </el-form-item> <el-form-item prop="bandwidth4" :label="'*'+ $t('QosManagement.bandwidth4')+':'" :label-width="formLabelWidth"> <el-input type="age" size='mini' :placeholder="$t('common.placeholder')" v-model.trim="form.bandwidth4" v-on:blur="bandwithCheak4" autocomplete="off" style="width:200px"> <template slot="append">Mbit/s</template> </el-input> </el-form-item> </el-form-item> <el-form-item style="margin-bottom: -10px; float:left"> <el-form-item prop="schedulingType5" :label="'*'+ $t('QosManagement.schedulingType5')+':'" :label-width="formLabelWidth"> <el-select clearable size='mini' :placeholder="$t('common.placeholder')" v-model="form.schedulingType5" autocomplete="off" v-on:change="schedulingTypeCheck5" style="width:200px"> <!--:formatter="formatStateKey"--> <el-option v-for="item in schedulingTypeList" :key="item.key" :label="item.label" :value="item.key"></el-option> </el-select> </el-form-item> <el-form-item prop="bandwidth5" :label="'*'+ $t('QosManagement.bandwidth5')+':'" :label-width="formLabelWidth"> <el-input type="age" size='mini' :placeholder="$t('common.placeholder')" v-model.trim="form.bandwidth5" v-on:blur="bandwithCheak5" autocomplete="off" style="width:200px"> <template slot="append">Mbit/s</template> </el-input> </el-form-item> </el-form-item> <el-form-item style="margin-bottom: -10px; float:left"> <el-form-item prop="schedulingType6" :label="'*'+ $t('QosManagement.schedulingType6')+':'" :label-width="formLabelWidth"> <el-select clearable size='mini' :placeholder="$t('common.placeholder')" v-model="form.schedulingType6" autocomplete="off" v-on:change="schedulingTypeCheck6" style="width:200px"> <!--:formatter="formatStateKey"--> <el-option v-for="item in schedulingTypeList" :key="item.key" :label="item.label" :value="item.key"></el-option> </el-select> </el-form-item> <el-form-item prop="bandwidth6" :label="'*'+ $t('QosManagement.bandwidth6')+':'" :label-width="formLabelWidth"> <el-input type="age" size='mini' :placeholder="$t('common.placeholder')" v-model.trim="form.bandwidth6" v-on:blur="bandwithCheak6" autocomplete="off" style="width:200px"> <template slot="append">Mbit/s</template> </el-input> </el-form-item> </el-form-item> <el-form-item style="margin-bottom: -10px; float:left"> <el-form-item prop="schedulingType7" :label="'*'+ $t('QosManagement.schedulingType7')+':'" :label-width="formLabelWidth"> <el-select clearable size='mini' :placeholder="$t('common.placeholder')" v-model="form.schedulingType7" autocomplete="off" v-on:change="schedulingTypeCheck7" style="width:200px"> <!--:formatter="formatStateKey"--> <el-option v-for="item in schedulingTypeList" :key="item.key" :label="item.label" :value="item.key"></el-option> </el-select> </el-form-item> <el-form-item prop="bandwidth7" :label="'*'+ $t('QosManagement.bandwidth7')+':'" :label-width="formLabelWidth"> <el-input type="age" size='mini' :placeholder="$t('common.placeholder')" v-model.trim="form.bandwidth7" v-on:blur="bandwithCheak7" autocomplete="off" style="width:200px"> <template slot="append">Mbit/s</template> </el-input> </el-form-item> </el-form-item> </el-form> </el-row> <el-row style="margin-bottom: 0px;" slot="footer" class="dialog-footer"> <el-button style="margin-bottom: -10px; " size='mini' type="primary" :disabled="state" @click="creatQos" v-loading.fullscreen.lock="fullscreenLoading"> {{$t("common.createBtn")}} </el-button> <el-button style="margin-bottom: -10px;" size='mini' @click="close"> {{$t("common.cancel")}} </el-button> </el-row> </el-dialog> </template> <script> import legitimacyCheck from "../../../utils/legitimacyCheck"; import QosService from '@/domain/services/Business/CDPService.js' import HelperUtil from "../../../utils/HelperUtil"; export default { props: ['command'], data: function () { //存放 数据 return { title: this.command.title, initList: this.command.target, createAndCopyQosVisible: false, formLabelWidth: '140px', //双向绑定弹出窗口ipput域 form: { profileName: " ", schedulingType0:null, bandwidth0: " ", schedulingType1: null, bandwidth1: " ", schedulingType2: null, bandwidth2: " ", schedulingType3: null, bandwidth3: " ", schedulingType4: null, bandwidth4: " ", schedulingType5: null, bandwidth5: " ", schedulingType6: null, bandwidth6: " ", schedulingType7: null, bandwidth7: " ", }, schedulingTypeList: [ { key: '0', label: 'DWRR' }, { key: '1', label: 'STRICT' } ], } }, methods: { close() { this.command.done(); }, /** * @Description :创建Qos策略配置初始化 * @author : * @param : * @return : * @exception : * @date : */ creatQosInit: function () { this.form.profileName = this.initList.profileName this.form.schedulingType0 = this.initList.schedulingType0 this.form.bandwidth0 = this.initList.bandwidth0 this.form.schedulingType1 = this.initList.schedulingType1 this.form.bandwidth1 = this.initList.bandwidth1 this.form.schedulingType2 = this.initList.schedulingType2 this.form.bandwidth2 = this.initList.bandwidth2 this.form.schedulingType3 = this.initList.schedulingType3 this.form.bandwidth3 = this.initList.bandwidth3 this.form.schedulingType4 = this.initList.schedulingType4 this.form.bandwidth4 = this.initList.bandwidth4 this.form.schedulingType5 = this.initList.schedulingType5 this.form.bandwidth5 = this.initList.bandwidth5 this.form.schedulingType6 = this.initList.schedulingType6 this.form.bandwidth6 = this.initList.bandwidth6 this.form.schedulingType7 = this.initList.schedulingType7 this.form.bandwidth7 = this.initList.bandwidth7 }, /** * @Description :创建QoS策略配置 * @author : * @param : * @return : * @exception : * @date : */ creatQos: function () { let _this = this; if (!this.totalCheck()) { return } else { let qos = {}; qos.profileName = _this.form.profileName; qos.schedulingType0 = _this.form.schedulingType0; qos.bandwidth0 = _this.form.bandwidth0; qos.schedulingType1 = _this.form.schedulingType1; qos.bandwidth1 = _this.form.bandwidth1; qos.schedulingType2 = _this.form.schedulingType2; qos.bandwidth2 = _this.form.bandwidth2; qos.schedulingType3 = _this.form.schedulingType3; qos.bandwidth3 = _this.form.bandwidth3; qos.schedulingType4 = _this.form.schedulingType4; qos.bandwidth4 = _this.form.bandwidth4; qos.schedulingType5 = _this.form.schedulingType5; qos.bandwidth5 = _this.form.bandwidth5; qos.schedulingType6 = _this.form.schedulingType6; qos.bandwidth6 = _this.form.bandwidth6; qos.schedulingType7 = _this.form.schedulingType7; qos.bandwidth7 = _this.form.bandwidth7; qos.cdpStatus = ''; qos.cdpKey = ''; let loadingInstance = _this.Loading.openLoading(); QosService.addCDP(qos).then(result => { //成功 _this.Loading.closeLoading(loadingInstance); _this.InfoTip.successTip(_this,HelperUtil.getStatusCodeObjectByCode(_this.successCode.ADD_CODE)); _this.close() }).catch(err => { //失败 _this.Loading.closeLoading(loadingInstance); _this.InfoTip.errorTip(_this, err); }); } }, //------------------------------------验证开始------------------------------------------------------------------- //输入文本长度验证 textLengthCheck: function (checkString) { let qosCheck = legitimacyCheck() var result = qosCheck.textLengthCheck(checkString) if (!result) { this.InfoTip.warningTip(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.LENGTH_CODE)) // this.$message({ // type: 'warning', // message: '所输文本长度必须控制在20之内! ', // duration: 10000, // showClose: true, // }) return false } return true }, bandwidthCheak: function (checkString) { let qosCheck = legitimacyCheck() var result = qosCheck.numberCheck(checkString) if (!result) { this.InfoTip.warningTip(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.PLEASE_ENTER_A_VALID_BANDWIDTH)) // this.$message({ // type: 'warning', // message: '请输入有效的带宽 ', // duration: 10000, // showClose: true, // }) return false } if (!this.textLengthCheck(checkString)) { return false } return true }, bandwithCheak0: function () { let _this = this if (!_this.bandwidthCheak(_this.form.bandwidth0)) { return false } return true }, bandwithCheak1: function () { if (!this.bandwidthCheak(this.form.bandwidth1)) { return false } return true }, bandwithCheak2: function () { if (!this.bandwidthCheak(this.form.bandwidth2)) { return false } return true }, bandwithCheak3: function () { if (!this.bandwidthCheak(this.form.bandwidth3)) { return false } return true }, bandwithCheak4: function () { if (!this.bandwidthCheak(this.form.bandwidth4)) { return false } return true }, bandwithCheak5: function () { if (!this.bandwidthCheak(this.form.bandwidth5)) { return false } return true }, bandwithCheak6: function () { if (!this.bandwidthCheak(this.form.bandwidth6)) { return false } return true }, bandwithCheak7: function () { if (!this.bandwidthCheak(this.form.bandwidth7)) { return false } return true }, schedulingTypeCheck:function(checkString){ if(checkString === null){ // let message='请选择调度算法! ' this.InfoTip.warningTip(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.PLEASE_SELECT_A_SCHEDULING_TYPE)) return false } return true }, schedulingTypeCheck0: function () { if (!this.schedulingTypeCheck(this.form.schedulingType0)) { return false } return true }, schedulingTypeCheck1: function () { if (!this.schedulingTypeCheck(this.form.schedulingType1)) { return false } return true }, schedulingTypeCheck2: function () { if (!this.schedulingTypeCheck(this.form.schedulingType2)) { return false } return true }, schedulingTypeCheck3: function () { if (!this.schedulingTypeCheck(this.form.schedulingType3)) { return false } return true }, schedulingTypeCheck4: function () { if (!this.schedulingTypeCheck(this.form.schedulingType4)) { return false } return true }, schedulingTypeCheck5: function () { if (!this.schedulingTypeCheck(this.form.schedulingType5)) { return false } return true }, schedulingTypeCheck6: function () { if (!this.schedulingTypeCheck(this.form.schedulingType6)) { return false } return true }, schedulingTypeCheck7: function () { if (!this.schedulingTypeCheck(this.form.schedulingType7)) { return false } return true }, //CDPProfile名称合法性验证 nameCheck: function () { let qosCheck = legitimacyCheck() var result = qosCheck.textNullCheck(this.form.profileName) if (!result) { // let message='请输入有效的CDPprofile名称! ' this.InfoTip.warningTip(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.PLEASE_ENTER_A_VALID_CDP_PROFILE_NAME)) // this.$message({ // type: 'warning', // message: '请输入有效的CDPprofile名称 ', // duration: 10000, // showClose: true, // }) return false } return true }, totalCheck: function () { if (!this.nameCheck()) { return false; } if (!this.schedulingTypeCheck0()) { return false; } if (!this.bandwithCheak0()) { return false; } if (!this.schedulingTypeCheck1()) { return false; } if (!this.bandwithCheak1()) { return false; } if (!this.schedulingTypeCheck2()) { return false; } if (!this.bandwithCheak2()) { return false; } if (!this.schedulingTypeCheck3()) { return false; } if (!this.bandwithCheak3()) { return false; } if (!this.schedulingTypeCheck4()) { return false; } if (!this.bandwithCheak4()) { return false; } if (!this.schedulingTypeCheck5()) { return false; } if (!this.bandwithCheak5()) { return false; } if (!this.schedulingTypeCheck6()) { return false; } if (!this.bandwithCheak6()) { return false; } if (!this.schedulingTypeCheck7()) { return false; } if (!this.bandwithCheak7()) { return false; } return true }, //------------------------------------验证结束------------------------------------------------------------------- }, created() { console.log("Qos创建初始化加载数据") }, mounted() { this.createAndCopyQosVisible = true }, } </script> <style scoped> /*!* 外层布局容器样式 *!*/ .el-header { background-color: #f9fafc; color: #333; line-height: 30px; } .el-table .warning-row { background: oldlace; } body .el-table colgroup.gutter { display: table-cell !important; } </style>