322 lines
8.7 KiB
Vue
322 lines
8.7 KiB
Vue
<script setup lang="ts">
|
|
import { reactive, toRaw, watch } from 'vue';
|
|
import { message, Form } from 'ant-design-vue/lib';
|
|
import useI18n from '@/hooks/useI18n';
|
|
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
|
|
import { getOAMFile, saveOAMFile } from '@/api/ne/neInfo';
|
|
const { t } = useI18n();
|
|
const emit = defineEmits(['ok', 'cancel', 'update:visible']);
|
|
const props = defineProps({
|
|
visible: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
/**网元ID */
|
|
neId: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
neType: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
});
|
|
|
|
/**对话框对象信息状态类型 */
|
|
type ModalStateType = {
|
|
/**新增框或修改框是否显示 */
|
|
visibleByEdit: boolean;
|
|
/**标题 */
|
|
title: string;
|
|
/**是否同步 */
|
|
sync: boolean;
|
|
/**表单数据 */
|
|
from: Record<string, any>;
|
|
/**确定按钮 loading */
|
|
confirmLoading: boolean;
|
|
};
|
|
|
|
/**对话框对象信息状态 */
|
|
let modalState: ModalStateType = reactive({
|
|
visibleByEdit: false,
|
|
title: 'OAM Configuration',
|
|
sync: true,
|
|
from: {
|
|
omcIP: '',
|
|
oamEnable: true,
|
|
oamPort: 33030,
|
|
snmpEnable: true,
|
|
snmpPort: 4957,
|
|
kpiEnable: true,
|
|
kpiTimer: 60,
|
|
},
|
|
confirmLoading: false,
|
|
});
|
|
|
|
/**对话框内表单属性和校验规则 */
|
|
const modalStateFrom = Form.useForm(
|
|
modalState.from,
|
|
reactive({
|
|
kpiTimer: [
|
|
{
|
|
required: true,
|
|
message: t('views.ne.neInfo.oam.kpiTimerPlease'),
|
|
},
|
|
],
|
|
})
|
|
);
|
|
|
|
/**
|
|
* 对话框弹出显示为 新增或者修改
|
|
* @param neType 网元类型
|
|
* @param neId 网元ID
|
|
*/
|
|
function fnModalVisibleByTypeAndId(neType: string, neId: string) {
|
|
const hide = message.loading(t('common.loading'), 0);
|
|
getOAMFile(neType, neId)
|
|
.then(res => {
|
|
if (res.code === RESULT_CODE_SUCCESS) {
|
|
const data = res.data;
|
|
Object.assign(modalState.from, {
|
|
omcIP: data.oamConfig[data.oamConfig.ipType],
|
|
oamEnable: data.oamConfig.enable,
|
|
oamPort: data.oamConfig.port,
|
|
snmpEnable: data.snmpConfig.enable,
|
|
snmpPort: data.snmpConfig.port,
|
|
kpiEnable: data.kpiConfig.enable,
|
|
kpiTimer: data.kpiConfig.timer,
|
|
});
|
|
modalState.title = t('views.ne.neInfo.oam.title');
|
|
modalState.visibleByEdit = true;
|
|
} else {
|
|
message.error(res.msg, 3);
|
|
}
|
|
})
|
|
.finally(() => {
|
|
modalState.confirmLoading = false;
|
|
hide();
|
|
});
|
|
}
|
|
|
|
/**
|
|
* 对话框弹出确认执行函数
|
|
* 进行表达规则校验
|
|
*/
|
|
function fnModalOk() {
|
|
modalStateFrom
|
|
.validate()
|
|
.then(e => {
|
|
modalState.confirmLoading = true;
|
|
const hide = message.loading(t('common.loading'), 0);
|
|
const from = toRaw(modalState.from);
|
|
saveOAMFile({
|
|
neType: props.neType,
|
|
neId: props.neId,
|
|
content: from,
|
|
sync: modalState.sync,
|
|
})
|
|
.then(res => {
|
|
if (res.code === RESULT_CODE_SUCCESS) {
|
|
message.success(t('common.operateOk'), 3);
|
|
emit('ok');
|
|
fnModalCancel();
|
|
} else {
|
|
message.error({
|
|
content: `${res.msg}`,
|
|
duration: 3,
|
|
});
|
|
}
|
|
})
|
|
.finally(() => {
|
|
hide();
|
|
modalState.confirmLoading = false;
|
|
});
|
|
})
|
|
.catch(e => {
|
|
message.error(t('common.errorFields', { num: e.errorFields.length }), 3);
|
|
});
|
|
}
|
|
|
|
/**
|
|
* 对话框弹出关闭执行函数
|
|
* 进行表达规则校验
|
|
*/
|
|
function fnModalCancel() {
|
|
modalState.visibleByEdit = false;
|
|
modalState.confirmLoading = false;
|
|
modalStateFrom.resetFields();
|
|
emit('cancel');
|
|
emit('update:visible', false);
|
|
}
|
|
|
|
/**监听是否显示，初始数据 */
|
|
watch(
|
|
() => props.visible,
|
|
val => {
|
|
if (val) {
|
|
if (props.neType && props.neId) {
|
|
fnModalVisibleByTypeAndId(props.neType, props.neId);
|
|
}
|
|
}
|
|
}
|
|
);
|
|
</script>
|
|
|
|
<template>
|
|
<ProModal
|
|
:drag="true"
|
|
:destroyOnClose="true"
|
|
:body-style="{ maxHeight: '650px', 'overflow-y': 'auto' }"
|
|
:keyboard="false"
|
|
:mask-closable="false"
|
|
:visible="modalState.visibleByEdit"
|
|
:title="modalState.title"
|
|
:confirm-loading="modalState.confirmLoading"
|
|
@ok="fnModalOk"
|
|
@cancel="fnModalCancel"
|
|
>
|
|
<a-form
|
|
name="modalStateFrom"
|
|
layout="horizontal"
|
|
:label-col="{ span: 12 }"
|
|
:labelWrap="true"
|
|
>
|
|
<a-form-item
|
|
:label="t('views.ne.neInfo.oam.sync')"
|
|
name="sync"
|
|
:label-col="{ span: 6 }"
|
|
:labelWrap="true"
|
|
>
|
|
<a-switch
|
|
:checked-children="t('common.switch.open')"
|
|
:un-checked-children="t('common.switch.shut')"
|
|
v-model:checked="modalState.sync"
|
|
></a-switch>
|
|
</a-form-item>
|
|
|
|
<a-collapse class="collapse" ghost>
|
|
<a-collapse-panel header="OAM">
|
|
<a-row :gutter="16">
|
|
<a-col :lg="12" :md="12" :xs="24">
|
|
<a-form-item
|
|
:label="t('views.ne.neInfo.oam.oamEnable')"
|
|
name="oamEnable"
|
|
>
|
|
<a-switch
|
|
:checked-children="t('common.switch.open')"
|
|
:un-checked-children="t('common.switch.shut')"
|
|
v-model:checked="modalState.from.oamEnable"
|
|
></a-switch>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :lg="12" :md="12" :xs="24">
|
|
<a-form-item
|
|
:label="t('views.ne.neInfo.oam.oamPort')"
|
|
name="oamPort"
|
|
v-bind="modalStateFrom.validateInfos.oamPort"
|
|
>
|
|
<a-input-number
|
|
:min="3000"
|
|
:max="65535"
|
|
:step="1"
|
|
:maxlength="5"
|
|
v-model:value="modalState.from.oamPort"
|
|
style="width: 100%"
|
|
></a-input-number>
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
<a-form-item
|
|
:label="t('views.ne.neInfo.oam.omcIP')"
|
|
name="omcIP"
|
|
:label-col="{ span: 6 }"
|
|
:labelWrap="true"
|
|
>
|
|
<a-input
|
|
v-model:value="modalState.from.omcIP"
|
|
:maxlength="128"
|
|
></a-input>
|
|
</a-form-item>
|
|
</a-collapse-panel>
|
|
<a-collapse-panel header="SNMP">
|
|
<a-row :gutter="16">
|
|
<a-col :lg="12" :md="12" :xs="24">
|
|
<a-form-item
|
|
:label="t('views.ne.neInfo.oam.snmpEnable')"
|
|
name="snmpEnable"
|
|
>
|
|
<a-switch
|
|
:checked-children="t('common.switch.open')"
|
|
:un-checked-children="t('common.switch.shut')"
|
|
v-model:checked="modalState.from.snmpEnable"
|
|
></a-switch>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :lg="12" :md="12" :xs="24">
|
|
<a-form-item
|
|
:label="t('views.ne.neInfo.oam.snmpPort')"
|
|
name="snmpPort"
|
|
v-bind="modalStateFrom.validateInfos.snmpPort"
|
|
>
|
|
<a-input-number
|
|
:min="3000"
|
|
:max="65535"
|
|
:step="1"
|
|
:maxlength="5"
|
|
v-model:value="modalState.from.snmpPort"
|
|
style="width: 100%"
|
|
></a-input-number>
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
</a-collapse-panel>
|
|
<a-collapse-panel header="KPI">
|
|
<a-row :gutter="16">
|
|
<a-col :lg="12" :md="12" :xs="24">
|
|
<a-form-item
|
|
:label="t('views.ne.neInfo.oam.kpiEnable')"
|
|
name="kpiEnable"
|
|
>
|
|
<a-switch
|
|
:checked-children="t('common.switch.open')"
|
|
:un-checked-children="t('common.switch.shut')"
|
|
v-model:checked="modalState.from.kpiEnable"
|
|
></a-switch>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :lg="12" :md="12" :xs="24">
|
|
<a-form-item
|
|
:label="t('views.ne.neInfo.oam.kpiTimer')"
|
|
name="kpiTimer"
|
|
v-bind="modalStateFrom.validateInfos.kpiTimer"
|
|
>
|
|
<a-input-number
|
|
:min="5"
|
|
:max="3600"
|
|
:step="1"
|
|
:maxlength="4"
|
|
v-model:value="modalState.from.kpiTimer"
|
|
style="width: 100%"
|
|
></a-input-number>
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
</a-collapse-panel>
|
|
</a-collapse>
|
|
</a-form>
|
|
</ProModal>
|
|
</template>
|
|
|
|
<style lang="less" scoped>
|
|
.collapse :deep(.ant-collapse-item) > .ant-collapse-header {
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
}
|
|
.collapse-header {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
}
|
|
</style>
|