311 lines
8.4 KiB
Vue
311 lines
8.4 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: {
|
||
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: '请输入KPI上报周期（单位秒）',
|
||
},
|
||
],
|
||
})
|
||
);
|
||
|
||
/**
|
||
* 对话框弹出显示为 新增或者修改
|
||
* @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, {
|
||
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({
|
||
content: '操作成功',
|
||
duration: 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>
|
||
<DraggableModal
|
||
width="500px"
|
||
: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-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>
|
||
</DraggableModal>
|
||
</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>
|