OMC/fe.ems.vue3
1
0
Fork 0
Code Issues Releases 3 Activity

feat: 页面调整组件属性升级

Browse Source
This commit is contained in:
TsMask
2024-10-28 11:02:39 +08:00
parent 670225a655
commit da0d49d306
125 changed files with 1775 additions and 3464 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/views/ne/neInfo/components/BackConfModal.vue
View File

@@ -1,10 +1,10 @@
<script setup lang="ts">
import { reactive, toRaw, watch } from 'vue';
import { Form, Modal, Upload, message, notification } from 'ant-design-vue/lib';
import useI18n from '@/hooks/useI18n';
import { ProModal } from 'antdv-pro-modal';
import { Form, Modal, Upload, message, notification } from 'ant-design-vue/es';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import { UploadRequestOption } from 'ant-design-vue/lib/vc-upload/interface';
import { FileType, UploadFile } from 'ant-design-vue/lib/upload/interface';
import { UploadRequestOption } from 'ant-design-vue/es/vc-upload/interface';
import { FileType, UploadFile } from 'ant-design-vue/es/upload/interface';
import {
exportNeConfigBackup,
importNeConfigBackup,
@@ -12,10 +12,11 @@ import {
} from '@/api/ne/neConfigBackup';
import saveAs from 'file-saver';
import { uploadFile } from '@/api/tool/file';
import useI18n from '@/hooks/useI18n';
const { t } = useI18n();
const emit = defineEmits(['ok', 'cancel', 'update:visible']);
const emit = defineEmits(['ok', 'cancel', 'update:open']);
const props = defineProps({
visible: {
open: {
type: Boolean,
default: false,
},
@@ -79,7 +80,7 @@ function typeChange(value: any) {
/**对话框对象信息状态类型 */
type ModalStateType = {
/**新增框或修改框是否显示 */
visibleByEdit: boolean;
openByEdit: boolean;
/**标题 */
title: string;
/**表单数据 */
@@ -97,7 +98,7 @@ type ModalStateType = {
/**对话框对象信息状态 */
let modalState: ModalStateType = reactive({
visibleByEdit: false,
openByEdit: false,
title: '配置文件导入',
from: {
neType: '',
@@ -163,12 +164,12 @@ function fnModalOk() {
* 进行表达规则校验
*/
function fnModalCancel() {
modalState.visibleByEdit = false;
modalState.openByEdit = false;
modalState.confirmLoading = false;
modalStateFrom.resetFields();
modalState.uploadFiles = [];
emit('cancel');
emit('update:visible', false);
emit('update:open', false);
}
/**表单上传前删除 */
@@ -224,14 +225,14 @@ function fnUploadFile(up: UploadRequestOption) {
/**监听是否显示，初始数据 */
watch(
() => props.visible,
() => props.open,
val => {
if (val) {
if (props.neType && props.neId) {
modalState.from.neType = props.neType;
modalState.from.neId = props.neId;
modalState.title = t('views.ne.neInfo.backConf.title');
modalState.visibleByEdit = true;
modalState.openByEdit = true;
}
}
}
@@ -283,14 +284,14 @@ defineExpose({
:width="800"
:keyboard="false"
:mask-closable="false"
:visible="modalState.visibleByEdit"
:open="modalState.openByEdit"
:title="modalState.title"
:confirm-loading="modalState.confirmLoading"
@ok="fnModalOk"
@cancel="fnModalCancel"
>
<a-form name="modalStateFrom" layout="horizontal" :label-col="{ span: 6 }">
<a-row :gutter="16">
<a-row>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item :label="t('views.ne.common.neType')" name="neType">
{{ modalState.from.neType }}

58
src/views/ne/neInfo/components/EditModal.vue
View File

@@ -1,18 +1,19 @@
<script setup lang="ts">
import { reactive, onMounted, toRaw, watch } from 'vue';
import { message, Form, Modal } from 'ant-design-vue/lib';
import useI18n from '@/hooks/useI18n';
import { ProModal } from 'antdv-pro-modal';
import { message, Form, Modal } from 'ant-design-vue/es';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import { NE_TYPE_LIST } from '@/constants/ne-constants';
import { regExpIPv4, regExpIPv6 } from '@/utils/regular-utils';
import { getNeInfo, addNeInfo, updateNeInfo } from '@/api/ne/neInfo';
import { neHostAuthorizedRSA, testNeHost } from '@/api/ne/neHost';
import useDictStore from '@/store/modules/dict';
import useI18n from '@/hooks/useI18n';
const { getDict } = useDictStore();
const { t } = useI18n();
const emit = defineEmits(['ok', 'cancel', 'update:visible']);
const emit = defineEmits(['ok', 'cancel', 'update:open']);
const props = defineProps({
visible: {
open: {
type: Boolean,
default: false,
},
@@ -87,7 +88,7 @@ function fnHostAuthorized(row: Record<string, any>) {
/**对话框对象信息状态类型 */
type ModalStateType = {
/**新增框或修改框是否显示 */
visibleByEdit: boolean;
openByEdit: boolean;
/**标题 */
title: string;
/**表单数据 */
@@ -98,7 +99,7 @@ type ModalStateType = {
/**对话框对象信息状态 */
let modalState: ModalStateType = reactive({
visibleByEdit: false,
openByEdit: false,
title: '网元',
from: {
id: undefined,
@@ -214,7 +215,7 @@ function fnModalVisibleByEdit(editId: string) {
if (!editId) {
modalStateFrom.resetFields();
modalState.title = t('views.ne.neInfo.addTitle');
modalState.visibleByEdit = true;
modalState.openByEdit = true;
} else {
if (modalState.confirmLoading) return;
const hide = message.loading(t('common.loading'), 0);
@@ -225,7 +226,7 @@ function fnModalVisibleByEdit(editId: string) {
if (res.code === RESULT_CODE_SUCCESS) {
Object.assign(modalState.from, res.data);
modalState.title = t('views.ne.neInfo.editTitle');
modalState.visibleByEdit = true;
modalState.openByEdit = true;
} else {
message.error(t('common.getInfoFail'), 2);
}
@@ -274,11 +275,11 @@ function fnModalOk() {
* 进行表达规则校验
*/
function fnModalCancel() {
modalState.visibleByEdit = false;
modalState.openByEdit = false;
modalState.confirmLoading = false;
modalStateFrom.resetFields();
emit('cancel');
emit('update:visible', false);
emit('update:open', false);
}
/**表单修改网元类型 */
@@ -341,7 +342,7 @@ function fnNeIPChange(e: any) {
/**监听是否显示，初始数据 */
watch(
() => props.visible,
() => props.open,
val => {
if (val) fnModalVisibleByEdit(props.editId);
}
@@ -372,10 +373,10 @@ onMounted(() => {
:drag="true"
:width="800"
:destroyOnClose="true"
:body-style="{ maxHeight: '650px', 'overflow-y': 'auto' }"
:body-style="{ maxHeight: '600px', 'overflow-y': 'auto' }"
:keyboard="false"
:mask-closable="false"
:visible="modalState.visibleByEdit"
:open="modalState.openByEdit"
:title="modalState.title"
:confirm-loading="modalState.confirmLoading"
@ok="fnModalOk"
@@ -387,7 +388,7 @@ onMounted(() => {
:label-col="{ span: 6 }"
:labelWrap="true"
>
<a-row :gutter="16">
<a-row>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item
:label="t('views.ne.common.neType')"
@@ -409,7 +410,7 @@ onMounted(() => {
<template #title>
{{ t('views.ne.common.neTypeTip') }}
</template>
<InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
<InfoCircleOutlined style="opacity: 0.45; color: inherit" />
</a-tooltip>
</template>
</a-input>
@@ -437,7 +438,7 @@ onMounted(() => {
</a-col>
</a-row>
<a-row :gutter="16">
<a-row>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item
:label="t('views.ne.common.neId')"
@@ -456,7 +457,7 @@ onMounted(() => {
<template #title>
{{ t('views.ne.common.neIdTip') }}
</template>
<InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
<InfoCircleOutlined style="opacity: 0.45; color: inherit" />
</a-tooltip>
</template>
</a-input>
@@ -479,7 +480,7 @@ onMounted(() => {
</a-col>
</a-row>
<a-row :gutter="16">
<a-row>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item
:label="t('views.ne.common.ipAddr')"
@@ -500,7 +501,7 @@ onMounted(() => {
{{ t('views.ne.common.ipAddrTip') }}
</div>
</template>
<InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
<InfoCircleOutlined style="opacity: 0.45; color: inherit" />
</a-tooltip>
</template>
</a-input>
@@ -525,7 +526,7 @@ onMounted(() => {
<template #title>
<div>{{ t('views.ne.common.portTip') }}</div>
</template>
<InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
<InfoCircleOutlined style="opacity: 0.45; color: inherit" />
</a-tooltip>
</template>
</a-input-number>
@@ -553,13 +554,13 @@ onMounted(() => {
{{ t('views.ne.common.rmUidTip') }}
</div>
</template>
<InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
<InfoCircleOutlined style="opacity: 0.45; color: inherit" />
</a-tooltip>
</template>
</a-input>
</a-form-item>
<a-row :gutter="16">
<a-row>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item :label="t('views.ne.neInfo.neAddress')" name="neAddress">
<a-input
@@ -573,7 +574,7 @@ onMounted(() => {
<template #title>
<div>{{ t('views.ne.neInfo.neAddressTip') }}</div>
</template>
<InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
<InfoCircleOutlined style="opacity: 0.45; color: inherit" />
</a-tooltip>
</template>
</a-input>
@@ -591,7 +592,7 @@ onMounted(() => {
</a-col>
</a-row>
<a-row :gutter="16">
<a-row>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item
:label="t('views.ne.neInfo.vendorName')"
@@ -649,7 +650,7 @@ onMounted(() => {
{{ `${host.hostType.toUpperCase()} ${host.port}` }}
</span>
</template>
<a-row :gutter="16">
<a-row>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item :label="t('views.ne.neHost.addr')">
<a-input
@@ -662,7 +663,10 @@ onMounted(() => {
</a-form-item>
</a-col>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item :label="t('views.ne.neHost.port')" name="port">
<a-form-item
:label="t('views.ne.neHost.port')"
name="neHost.port"
>
<a-input-number
v-model:value="host.port"
:min="10"
@@ -690,7 +694,7 @@ onMounted(() => {
</a-input>
</a-form-item>
<a-row :gutter="16" v-if="host.hostType === 'ssh'">
<a-row v-if="host.hostType === 'ssh'">
<a-col :lg="12" :md="12" :xs="24">
<a-form-item :label="t('views.ne.neHost.user')">
<a-input

29
src/views/ne/neInfo/components/OAMModal.vue
View File

@@ -1,13 +1,14 @@
<script setup lang="ts">
import { reactive, toRaw, watch } from 'vue';
import { message, Form } from 'ant-design-vue/lib';
import { ProModal } from 'antdv-pro-modal';
import { message, Form } from 'ant-design-vue/es';
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 emit = defineEmits(['ok', 'cancel', 'update:open']);
const props = defineProps({
visible: {
open: {
type: Boolean,
default: false,
},
@@ -25,7 +26,7 @@ const props = defineProps({
/**对话框对象信息状态类型 */
type ModalStateType = {
/**新增框或修改框是否显示 */
visibleByEdit: boolean;
openByEdit: boolean;
/**标题 */
title: string;
/**是否同步 */
@@ -38,7 +39,7 @@ type ModalStateType = {
/**对话框对象信息状态 */
let modalState: ModalStateType = reactive({
visibleByEdit: false,
openByEdit: false,
title: 'OAM Configuration',
sync: true,
from: {
@@ -87,7 +88,7 @@ function fnModalVisibleByTypeAndId(neType: string, neId: string) {
kpiTimer: data.kpiConfig.timer,
});
modalState.title = t('views.ne.neInfo.oam.title');
modalState.visibleByEdit = true;
modalState.openByEdit = true;
} else {
message.error(res.msg, 3);
}
@@ -142,16 +143,16 @@ function fnModalOk() {
* 进行表达规则校验
*/
function fnModalCancel() {
modalState.visibleByEdit = false;
modalState.openByEdit = false;
modalState.confirmLoading = false;
modalStateFrom.resetFields();
emit('cancel');
emit('update:visible', false);
emit('update:open', false);
}
/**监听是否显示，初始数据 */
watch(
() => props.visible,
() => props.open,
val => {
if (val) {
if (props.neType && props.neId) {
@@ -166,10 +167,10 @@ watch(
<ProModal
:drag="true"
:destroyOnClose="true"
:body-style="{ maxHeight: '650px', 'overflow-y': 'auto' }"
:body-style="{ maxHeight: '600px', 'overflow-y': 'auto' }"
:keyboard="false"
:mask-closable="false"
:visible="modalState.visibleByEdit"
:open="modalState.openByEdit"
:title="modalState.title"
:confirm-loading="modalState.confirmLoading"
@ok="fnModalOk"
@@ -196,7 +197,7 @@ watch(
<a-collapse class="collapse" ghost>
<a-collapse-panel header="OAM">
<a-row :gutter="16">
<a-row>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item
:label="t('views.ne.neInfo.oam.oamEnable')"
@@ -239,7 +240,7 @@ watch(
</a-form-item>
</a-collapse-panel>
<a-collapse-panel header="SNMP">
<a-row :gutter="16">
<a-row>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item
:label="t('views.ne.neInfo.oam.snmpEnable')"
@@ -271,7 +272,7 @@ watch(
</a-row>
</a-collapse-panel>
<a-collapse-panel header="KPI">
<a-row :gutter="16">
<a-row>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item
:label="t('views.ne.neInfo.oam.kpiEnable')"