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

8
src/views/account/components/base-info.vue
View File

@@ -1,7 +1,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import { Modal, message } from 'ant-design-vue/lib'; import { Modal, message } from 'ant-design-vue/es';
import { FileType } from 'ant-design-vue/lib/upload/interface'; import { FileType } from 'ant-design-vue/es/upload/interface';
import { UploadRequestOption } from 'ant-design-vue/lib/vc-upload/interface'; import { UploadRequestOption } from 'ant-design-vue/es/vc-upload/interface';
import { onMounted, reactive, ref, toRaw } from 'vue'; import { onMounted, reactive, ref, toRaw } from 'vue';
import { updateUserProfile, uploadAvatar } from '@/api/profile'; import { updateUserProfile, uploadAvatar } from '@/api/profile';
import { regExpEmail, regExpMobile, regExpNick } from '@/utils/regular-utils'; import { regExpEmail, regExpMobile, regExpNick } from '@/utils/regular-utils';
@@ -27,7 +27,7 @@ let stateForm = reactive({
nickName: '', nickName: '',
email: '', email: '',
phonenumber: '', phonenumber: '',
sex: undefined, sex: '0',
}, },
/**表单提交点击状态 */ /**表单提交点击状态 */
formClick: false, formClick: false,

4
src/views/account/components/reset-passwd.vue
View File

@@ -1,5 +1,5 @@
<script lang="ts" setup> <script lang="ts" setup>
import { Modal, message } from 'ant-design-vue/lib'; import { Modal, message } from 'ant-design-vue/es';
import { reactive } from 'vue'; import { reactive } from 'vue';
import { updateUserPwd } from '@/api/profile'; import { updateUserPwd } from '@/api/profile';
import { regExpPasswd } from '@/utils/regular-utils'; import { regExpPasswd } from '@/utils/regular-utils';
@@ -147,7 +147,7 @@ function fnFinish() {
</a-input-password> </a-input-password>
</a-form-item> </a-form-item>
<a-form-item :wrapper-col="{ span: 3 }"> <a-form-item :wrapper-col="{ span: 4 }">
<a-button <a-button
block block
type="primary" type="primary"

42
src/views/account/components/style-layout.vue
View File

@@ -1,22 +1,32 @@
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from 'vue'; import { viewTransitionTheme } from 'antdv-pro-layout';
import { getLocalColor, changePrimaryColor } from '@/hooks/useTheme';
import useLayoutStore from '@/store/modules/layout'; import useLayoutStore from '@/store/modules/layout';
import useI18n from '@/hooks/useI18n'; import useI18n from '@/hooks/useI18n';
const { t } = useI18n(); const { t } = useI18n();
const { proConfig, changeConf } = useLayoutStore(); const { proConfig, changeConf, themeConfig, changePrimaryColor } =
useLayoutStore();
let color = ref<string>(getLocalColor()); let timerId: any = null;
/**改变主题色 */ /**改变主题色 */
function fnColorChange(e: Event) { function fnColorChange(e: Event) {
const target = e.target as HTMLInputElement; const target = e.target as HTMLInputElement;
// 需要防抖函数处理
clearTimeout(timerId);
timerId = setTimeout(() => {
if (target.nodeName === 'INPUT') { if (target.nodeName === 'INPUT') {
changePrimaryColor(target.value ?? '#1890ff'); changePrimaryColor(target.value ?? '#1890ff');
} else { } else {
changePrimaryColor(); changePrimaryColor();
} }
color.value = getLocalColor(); }, 300);
}
/**手动变更主题-过渡动画 */
function changeTheme(e: any) {
viewTransitionTheme(isDarkMode => {
changeConf('theme', isDarkMode ? 'light' : 'dark');
}, e);
} }
</script> </script>
@@ -56,13 +66,31 @@ function fnColorChange(e: Event) {
<template #extra> <template #extra>
<a-space :size="16" align="end" direction="horizontal"> <a-space :size="16" align="end" direction="horizontal">
<a-button type="primary" size="small" @click="fnColorChange"> <a-button type="primary" size="small" @click="fnColorChange">
<BgColorsOutlined />
{{ t('views.account.settings.colorRandomly') }} {{ t('views.account.settings.colorRandomly') }}
</a-button> </a-button>
<input type="color" :value="color" @input="fnColorChange" /> <input
type="color"
:value="themeConfig?.token?.colorPrimary"
@input="fnColorChange"
/>
</a-space> </a-space>
</template> </template>
</a-list-item> </a-list-item>
<a-list-item>
{{ t('views.account.settings.theme') }}
<template #actions>
{{ t('views.account.settings.themeActions') }}
</template>
<template #extra>
<a-button
:type="proConfig.theme === 'dark' ? 'primary' : 'default'"
size="small"
@click="changeTheme"
>
{{ proConfig.theme }}
</a-button>
</template>
</a-list-item>
<a-list-item> <a-list-item>
{{ t('views.account.settings.navTheme') }} {{ t('views.account.settings.navTheme') }}
<template #actions> <template #actions>

3
src/views/account/profile.vue
View File

@@ -1,6 +1,6 @@
<script lang="ts" setup> <script lang="ts" setup>
import { PageContainer } from 'antdv-pro-layout'; import { PageContainer } from 'antdv-pro-layout';
import { message } from 'ant-design-vue/lib'; import { message } from 'ant-design-vue/es';
import { getUserProfile } from '@/api/profile'; import { getUserProfile } from '@/api/profile';
import { reactive, ref, onMounted } from 'vue'; import { reactive, ref, onMounted } from 'vue';
import { parseDateToStr } from '@/utils/date-utils'; import { parseDateToStr } from '@/utils/date-utils';
@@ -205,6 +205,7 @@ onMounted(() => {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
padding: 16px 0;
&-no { &-no {
align-self: flex-start; align-self: flex-start;
font-size: 14px; font-size: 14px;

518
src/views/configManage/backupManage/index.vue
View File

@@ -1,518 +0,0 @@
<script setup lang="ts">
import { reactive, ref, onMounted, toRaw } from 'vue';
import { PageContainer } from 'antdv-pro-layout';
import { Form, message, Modal } from 'ant-design-vue/lib';
import { SizeType } from 'ant-design-vue/lib/config-provider';
import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
import { ColumnsType } from 'ant-design-vue/lib/table';
import { parseDateToStr } from '@/utils/date-utils';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import {
listNeBackup,
delNeBackup,
downloadNeBackup,
} from '@/api/configManage/backupManage';
import { saveAs } from 'file-saver';
import useI18n from '@/hooks/useI18n';
import { updateBackInfo } from '@/api/configManage/backupManage';
import useNeInfoStore from '@/store/modules/neinfo';
const { t } = useI18n();
/**查询参数 */
let queryParams = reactive({
/**网元类型 */
neType: '',
/**当前页数 */
pageNum: 1,
/**每页条数 */
pageSize: 20,
});
/**查询参数重置 */
function fnQueryReset() {
queryParams = Object.assign(queryParams, {
neType: '',
pageNum: 1,
pageSize: 20,
});
tablePagination.current = 1;
tablePagination.pageSize = 20;
fnGetList();
}
/**表格状态类型 */
type TabeStateType = {
/**加载等待 */
loading: boolean;
/**紧凑型 */
size: SizeType;
/**搜索栏 */
seached: boolean;
/**记录数据 */
data: object[];
/**勾选记录 */
selectedRowKeys: (string | number)[];
};
/**表格状态 */
let tableState: TabeStateType = reactive({
loading: false,
size: 'middle',
seached: true,
data: [],
selectedRowKeys: [],
});
/**表格字段列 */
let tableColumns: ColumnsType = [
{
title: t('common.rowId'),
dataIndex: 'id',
align: 'center',
width: 1,
},
{
title: t('views.configManage.backupManage.neType'),
dataIndex: 'neType',
align: 'center',
width: 2,
},
{
title: t('views.configManage.backupManage.neID'),
dataIndex: 'neId',
align: 'center',
width: 2,
},
{
title: t('views.configManage.backupManage.fileName'),
dataIndex: 'fileName',
align: 'center',
width: 3,
},
{
title: t('views.configManage.backupManage.remark'),
dataIndex: 'comment',
align: 'center',
width: 3,
},
{
title: t('views.configManage.backupManage.createAt'),
dataIndex: 'createTime',
align: 'center',
customRender(opt) {
if (!opt.value) return '';
return parseDateToStr(opt.value);
},
width: 3,
},
{
title: t('common.operate'),
key: 'id',
align: 'center',
fixed: 'right',
width: 2,
},
];
/**表格分页器参数 */
let tablePagination = reactive({
/**当前页数 */
current: 1,
/**每页条数 */
pageSize: 20,
/**默认的每页条数 */
defaultPageSize: 20,
/**指定每页可以显示多少条 */
pageSizeOptions: ['10', '20', '50', '100'],
/**只有一页时是否隐藏分页器 */
hideOnSinglePage: false,
/**是否可以快速跳转至某页 */
showQuickJumper: true,
/**是否可以改变 pageSize */
showSizeChanger: true,
/**数据总数 */
total: 0,
showTotal: (total: number) => t('common.tablePaginationTotal', { total }),
onChange: (page: number, pageSize: number) => {
tablePagination.current = page;
tablePagination.pageSize = pageSize;
queryParams.pageNum = page;
queryParams.pageSize = pageSize;
fnGetList();
},
});
/**表格紧凑型变更操作 */
function fnTableSize({ key }: MenuInfo) {
tableState.size = key as SizeType;
}
/**信息文件下载 */
function fnDownloadFile(row: Record<string, any>) {
Modal.confirm({
title: t('common.tipTitle'),
content: t('views.configManage.backupManage.totalSure', {
oper: t('common.downloadText'),
id: row.id,
}),
onOk() {
const key = 'downloadNeBackup';
message.loading({ content: t('common.loading'), key });
downloadNeBackup(toRaw(row)).then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
message.success({
content: t('common.msgSuccess', { msg: t('common.downloadText') }),
key,
duration: 2,
});
saveAs(res.data, `${row.fileName}`);
} else {
message.error({
content: `${res.msg}`,
key,
duration: 2,
});
}
});
},
});
}
/**
* 备份信息删除
* @param row 记录编号ID
*/
function fnRecordDelete(row: Record<string, any>) {
Modal.confirm({
title: t('common.tipTitle'),
content: t('views.configManage.backupManage.totalSure', {
oper: t('common.deleteText'),
id: row.id,
}),
onOk() {
const key = 'delNeBackup';
message.loading({ content: t('common.loading'), key });
delNeBackup(toRaw(row)).then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
message.success({
content: t('common.msgSuccess', { msg: t('common.deleteText') }),
key,
duration: 2,
});
fnGetList();
} else {
message.error({
content: `${res.msg}`,
key: key,
duration: 2,
});
}
});
},
});
}
/**查询备份信息列表, pageNum初始页数 */
function fnGetList(pageNum?: number) {
if (tableState.loading) return;
tableState.loading = true;
if (pageNum) {
queryParams.pageNum = pageNum;
}
listNeBackup(toRaw(queryParams)).then(res => {
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.rows)) {
// 取消勾选
if (tableState.selectedRowKeys.length > 0) {
tableState.selectedRowKeys = [];
}
tablePagination.total = res.total;
tableState.data = res.rows;
if (
tablePagination.total <=
(queryParams.pageNum - 1) * tablePagination.pageSize &&
queryParams.pageNum !== 1
) {
tableState.loading = false;
fnGetList(queryParams.pageNum - 1);
}
}
tableState.loading = false;
});
}
/**对话框对象信息状态类型 */
type ModalStateType = {
/**新增框或修改框是否显示 */
visibleByEdit: boolean;
/**标题 */
title: string;
/**表单数据 */
from: Record<string, any>;
/**确定按钮 loading */
confirmLoading: boolean;
};
/**对话框对象信息状态 */
let modalState: ModalStateType = reactive({
visibleByEdit: false,
title: '任务设置',
from: {
id: 0,
backupInfo: '',
},
confirmLoading: false,
});
/**
* 对话框弹出显示为 新增或者修改
* @param noticeId 网元id, 不传为新增
*/
function fnModalVisibleByEdit(row: Record<string, any>) {
if (modalState.confirmLoading) return;
modalState.from.backupInfo = row.comment;
modalState.from.id = row.id;
modalState.title = t('views.configManage.backupManage.edit');
modalState.visibleByEdit = true;
}
/**对话框内表单属性和校验规则 */
const modalStateFrom = Form.useForm(
modalState.from,
reactive({
backupInfo: [
{
required: true,
message:
t('views.configManage.backupManage.remark') + t('common.unableNull'),
},
],
})
);
/**
* 对话框弹出确认执行函数
* 进行表达规则校验
*/
function fnModalOk() {
modalStateFrom
.validate()
.then(e => {
modalState.confirmLoading = true;
const from = toRaw(modalState.from);
const hide = message.loading(t('common.loading'), 0);
updateBackInfo(from)
.then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
message.success({
content: t('common.msgSuccess', { msg: modalState.title }),
duration: 3,
});
modalState.visibleByEdit = false;
modalStateFrom.resetFields();
fnGetList();
} else {
message.error({
content: `${res.msg}`,
duration: 3,
});
fnGetList();
}
})
.finally(() => {
hide();
modalState.confirmLoading = false;
});
})
.catch(e => {
message.error(t('common.errorFields', { num: e.errorFields.length }), 3);
});
}
/**
* 对话框弹出关闭执行函数
* 进行表达规则校验
*/
function fnModalCancel() {
modalState.visibleByEdit = false;
modalStateFrom.resetFields();
}
onMounted(() => {
// 获取列表数据
fnGetList();
});
</script>
<template>
<PageContainer>
<a-card
v-show="tableState.seached"
:bordered="false"
:body-style="{ marginBottom: '24px', paddingBottom: 0 }"
>
<!-- 表格搜索栏 -->
<a-form :model="queryParams" name="queryParams" layout="horizontal">
<a-row :gutter="16">
<a-col :lg="6" :md="12" :xs="24">
<a-form-item
:label="t('views.configManage.backupManage.neType')"
name="neType "
>
<a-auto-complete
v-model:value="queryParams.neType"
:options="useNeInfoStore().getNeSelectOtions"
allow-clear
:placeholder="t('views.configManage.backupManage.neTypePlease')"
/>
</a-form-item>
</a-col>
<a-col :lg="6" :md="12" :xs="24">
<a-form-item>
<a-space :size="8">
<a-button type="primary" @click.prevent="fnGetList(1)">
<template #icon><SearchOutlined /></template>
{{ t('common.search') }}
</a-button>
<a-button type="default" @click.prevent="fnQueryReset">
<template #icon><ClearOutlined /></template>
{{ t('common.reset') }}
</a-button>
</a-space>
</a-form-item>
</a-col>
</a-row>
</a-form>
</a-card>
<a-card :bordered="false" :body-style="{ padding: '0px' }">
<!-- 插槽-卡片左侧侧 -->
<template #title>
<a-space :size="8" align="center">
<!-- <a-button type="primary" @click.prevent="fnModalVisibleByEdit()">
<template #icon><FieldTimeOutlined /></template>
{{ t('views.configManage.backupManage.setBackupTask') }}
</a-button> -->
</a-space>
</template>
<!-- 插槽-卡片右侧 -->
<template #extra>
<a-space :size="8" align="center">
<a-tooltip>
<template #title>{{ t('common.searchBarText') }}</template>
<a-switch
v-model:checked="tableState.seached"
:checked-children="t('common.switch.show')"
:un-checked-children="t('common.switch.hide')"
size="small"
/>
</a-tooltip>
<a-tooltip>
<template #title>{{ t('common.reloadText') }}</template>
<a-button type="text" @click.prevent="fnGetList(1)">
<template #icon><ReloadOutlined /></template>
</a-button>
</a-tooltip>
<a-tooltip>
<template #title>{{ t('common.sizeText') }}</template>
<a-dropdown trigger="click">
<a-button type="text">
<template #icon><ColumnHeightOutlined /></template>
</a-button>
<template #overlay>
<a-menu
:selected-keys="[tableState.size as string]"
@click="fnTableSize"
>
<a-menu-item key="default">
{{ t('common.size.default') }}
</a-menu-item>
<a-menu-item key="middle">
{{ t('common.size.middle') }}
</a-menu-item>
<a-menu-item key="small">
{{ t('common.size.small') }}
</a-menu-item>
</a-menu>
</template>
</a-dropdown>
</a-tooltip>
</a-space>
</template>
<!-- 表格列表 -->
<a-table
class="table"
row-key="id"
:columns="tableColumns"
:loading="tableState.loading"
:data-source="tableState.data"
:size="tableState.size"
:pagination="tablePagination"
:scroll="{ x: 1200, y: 400 }"
>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'id'">
<a-space :size="8" align="center">
<a-tooltip>
<template #title>{{ t('common.downloadText') }}</template>
<a-button type="link" @click.prevent="fnDownloadFile(record)">
<template #icon><DownloadOutlined /></template>
</a-button>
</a-tooltip>
<a-tooltip>
<template #title>{{ t('common.deleteText') }}</template>
<a-button type="link" @click.prevent="fnRecordDelete(record)">
<template #icon><DeleteOutlined /></template>
</a-button>
</a-tooltip>
<a-tooltip>
<template #title>{{ t('common.editText') }}</template>
<a-button
type="link"
@click.prevent="fnModalVisibleByEdit(record)"
>
<template #icon><FormOutlined /></template>
</a-button>
</a-tooltip>
</a-space>
</template>
</template>
</a-table>
</a-card>
<!-- 新增框或修改框 -->
<ProModal
:drag="true"
:width="800"
:destroyOnClose="true"
: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">
<a-form-item
:label="t('views.configManage.backupManage.remark')"
name="backupInfo"
v-bind="modalStateFrom.validateInfos.backupInfo"
>
<a-textarea
v-model:value="modalState.from.backupInfo"
:auto-size="{ minRows: 2, maxRows: 6 }"
:maxlength="250"
:show-count="true"
/>
</a-form-item>
</a-form>
</ProModal>
</PageContainer>
</template>
<style lang="less" scoped>
.table :deep(.ant-pagination) {
padding: 0 24px;
}
</style>

67
src/views/configManage/neManage/index.vue
View File

@@ -1,10 +1,11 @@
<script setup lang="ts"> <script setup lang="ts">
import { reactive, onMounted, toRaw, ref } from 'vue'; import { reactive, onMounted, toRaw, ref } from 'vue';
import { PageContainer } from 'antdv-pro-layout'; import { PageContainer } from 'antdv-pro-layout';
import { message, Modal, Form } from 'ant-design-vue/lib'; import { ProModal } from 'antdv-pro-modal';
import { SizeType } from 'ant-design-vue/lib/config-provider'; import { message, Modal, Form } from 'ant-design-vue/es';
import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface'; import { SizeType } from 'ant-design-vue/es/config-provider';
import { ColumnsType } from 'ant-design-vue/lib/table'; import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
import { ColumnsType } from 'ant-design-vue/es/table';
import { import {
listNeInfo, listNeInfo,
getNeInfo, getNeInfo,
@@ -20,8 +21,8 @@ import {
} from '@/api/configManage/neManage'; } from '@/api/configManage/neManage';
import { updateNeConfigReload } from '@/api/configManage/configParam'; import { updateNeConfigReload } from '@/api/configManage/configParam';
import useI18n from '@/hooks/useI18n'; import useI18n from '@/hooks/useI18n';
import { FileType } from 'ant-design-vue/lib/upload/interface'; import { FileType } from 'ant-design-vue/es/upload/interface';
import { UploadRequestOption } from 'ant-design-vue/lib/vc-upload/interface'; import { UploadRequestOption } from 'ant-design-vue/es/vc-upload/interface';
import TableColumnsDnd from '@/components/TableColumnsDnd/index.vue'; import TableColumnsDnd from '@/components/TableColumnsDnd/index.vue';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants'; import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import { NE_TYPE_LIST } from '@/constants/ne-constants'; import { NE_TYPE_LIST } from '@/constants/ne-constants';
@@ -194,11 +195,11 @@ function fnTableSize({ key }: MenuInfo) {
/**对话框对象信息状态类型 */ /**对话框对象信息状态类型 */
type ModalStateType = { type ModalStateType = {
/**详情框是否显示 */ /**详情框是否显示 */
visibleByView: boolean; openByView: boolean;
/**新增框或修改框是否显示 */ /**新增框或修改框是否显示 */
visibleByEdit: boolean; openByEdit: boolean;
/**导入是否显示 */ /**导入是否显示 */
visibleByImport: boolean; openByImport: boolean;
/**标题 */ /**标题 */
title: string; title: string;
/**表单数据 */ /**表单数据 */
@@ -211,9 +212,9 @@ type ModalStateType = {
/**对话框对象信息状态 */ /**对话框对象信息状态 */
let modalState: ModalStateType = reactive({ let modalState: ModalStateType = reactive({
visibleByView: false, openByView: false,
visibleByEdit: false, openByEdit: false,
visibleByImport: false, openByImport: false,
title: '网元', title: '网元',
from: { from: {
id: undefined, id: undefined,
@@ -326,7 +327,7 @@ function fnModalVisibleByEdit(row?: Record<string, any>) {
if (!row) { if (!row) {
modalStateFrom.resetFields(); modalStateFrom.resetFields();
modalState.title = t('views.configManage.neManage.addNe'); modalState.title = t('views.configManage.neManage.addNe');
modalState.visibleByEdit = true; modalState.openByEdit = true;
} else { } else {
if (modalState.confirmLoading) return; if (modalState.confirmLoading) return;
const hide = message.loading(t('common.loading'), 0); const hide = message.loading(t('common.loading'), 0);
@@ -337,7 +338,7 @@ function fnModalVisibleByEdit(row?: Record<string, any>) {
if (res.code === RESULT_CODE_SUCCESS) { if (res.code === RESULT_CODE_SUCCESS) {
modalState.from = Object.assign(modalState.from, res.data); modalState.from = Object.assign(modalState.from, res.data);
modalState.title = t('views.configManage.neManage.editNe'); modalState.title = t('views.configManage.neManage.editNe');
modalState.visibleByEdit = true; modalState.openByEdit = true;
} else { } else {
message.error(t('views.configManage.neManage.getInfo'), 2); message.error(t('views.configManage.neManage.getInfo'), 2);
} }
@@ -370,7 +371,7 @@ function fnModalOk() {
content: t('common.msgSuccess', { msg: modalState.title }), content: t('common.msgSuccess', { msg: modalState.title }),
duration: 3, duration: 3,
}); });
modalState.visibleByEdit = false; modalState.openByEdit = false;
modalStateFrom.resetFields(); modalStateFrom.resetFields();
fnGetList(1); fnGetList(1);
} }
@@ -418,7 +419,7 @@ function fnImportModalOk() {
content: t('common.msgSuccess', { msg: modalState.title }), content: t('common.msgSuccess', { msg: modalState.title }),
duration: 3, duration: 3,
}); });
modalState.visibleByEdit = false; modalState.openByEdit = false;
modalStateFrom.resetFields(); modalStateFrom.resetFields();
} else { } else {
message.error({ message.error({
@@ -444,8 +445,8 @@ function fnImportModalOk() {
* 进行表达规则校验 * 进行表达规则校验
*/ */
function fnImportModalCancel() { function fnImportModalCancel() {
modalState.visibleByView = false; modalState.openByView = false;
modalState.visibleByImport = false; modalState.openByImport = false;
importStateFrom.resetFields(); importStateFrom.resetFields();
} }
@@ -454,8 +455,8 @@ function fnImportModalCancel() {
* 进行表达规则校验 * 进行表达规则校验
*/ */
function fnModalCancel() { function fnModalCancel() {
modalState.visibleByEdit = false; modalState.openByEdit = false;
modalState.visibleByView = false; modalState.openByView = false;
modalStateFrom.resetFields(); modalStateFrom.resetFields();
} }
@@ -707,7 +708,7 @@ function fnRecordMore(type: string | number, row: Record<string, any>) {
if (type === 'import') { if (type === 'import') {
modalState.importFrom = Object.assign(modalState.importFrom, row); modalState.importFrom = Object.assign(modalState.importFrom, row);
modalState.title = t('views.configManage.neManage.import'); modalState.title = t('views.configManage.neManage.import');
modalState.visibleByImport = true; modalState.openByImport = true;
} }
} }
@@ -978,7 +979,7 @@ onMounted(() => {
:destroyOnClose="true" :destroyOnClose="true"
:keyboard="false" :keyboard="false"
:mask-closable="false" :mask-closable="false"
:visible="modalState.visibleByEdit" :open="modalState.openByEdit"
:title="modalState.title" :title="modalState.title"
:confirm-loading="modalState.confirmLoading" :confirm-loading="modalState.confirmLoading"
@ok="fnModalOk" @ok="fnModalOk"
@@ -990,7 +991,7 @@ onMounted(() => {
:label-col="{ span: 6 }" :label-col="{ span: 6 }"
:labelWrap="true" :labelWrap="true"
> >
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.configManage.neManage.neType')" :label="t('views.configManage.neManage.neType')"
@@ -1007,7 +1008,7 @@ onMounted(() => {
<template #title>{{ <template #title>{{
t('views.configManage.neManage.neTypeTip') t('views.configManage.neManage.neTypeTip')
}}</template> }}</template>
<InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" /> <InfoCircleOutlined style="opacity: 0.45; color: inherit;" />
</a-tooltip> </a-tooltip>
</template> </template>
</a-input> </a-input>
@@ -1028,7 +1029,7 @@ onMounted(() => {
</a-col> </a-col>
</a-row> </a-row>
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.configManage.neManage.uid')" :label="t('views.configManage.neManage.uid')"
@@ -1068,7 +1069,7 @@ onMounted(() => {
</a-col> </a-col>
</a-row> </a-row>
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.configManage.neManage.ip')" :label="t('views.configManage.neManage.ip')"
@@ -1090,7 +1091,7 @@ onMounted(() => {
<template #title> <template #title>
<div>{{ t('views.configManage.neManage.portTip') }}</div> <div>{{ t('views.configManage.neManage.portTip') }}</div>
</template> </template>
<InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" /> <InfoCircleOutlined style="opacity: 0.45; color: inherit;" />
</a-tooltip> </a-tooltip>
</template> </template>
</a-input> </a-input>
@@ -1098,7 +1099,7 @@ onMounted(() => {
</a-col> </a-col>
</a-row> </a-row>
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.configManage.neManage.neName')" :label="t('views.configManage.neManage.neName')"
@@ -1120,14 +1121,14 @@ onMounted(() => {
<template #title> <template #title>
<div>{{ t('views.configManage.neManage.macTip') }}</div> <div>{{ t('views.configManage.neManage.macTip') }}</div>
</template> </template>
<InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" /> <InfoCircleOutlined style="opacity: 0.45; color: inherit;" />
</a-tooltip> </template </a-tooltip> </template
></a-input> ></a-input>
</a-form-item> </a-form-item>
</a-col> </a-col>
</a-row> </a-row>
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.configManage.neManage.vendorName')" :label="t('views.configManage.neManage.vendorName')"
@@ -1144,7 +1145,7 @@ onMounted(() => {
</a-col> </a-col>
</a-row> </a-row>
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.configManage.neManage.province')" :label="t('views.configManage.neManage.province')"
@@ -1179,14 +1180,14 @@ onMounted(() => {
:destroyOnClose="true" :destroyOnClose="true"
:keyboard="false" :keyboard="false"
:mask-closable="false" :mask-closable="false"
:visible="modalState.visibleByImport" :open="modalState.openByImport"
:title="modalState.title" :title="modalState.title"
:confirm-loading="modalState.confirmLoading" :confirm-loading="modalState.confirmLoading"
@ok="fnImportModalOk" @ok="fnImportModalOk"
@cancel="fnImportModalCancel" @cancel="fnImportModalCancel"
> >
<a-form name="importStateFrom" layout="horizontal"> <a-form name="importStateFrom" layout="horizontal">
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.configManage.neManage.neType')" :label="t('views.configManage.neManage.neType')"

12
src/views/configManage/neOverview/index.vue
View File

@@ -1,7 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { PageContainer } from 'antdv-pro-layout'; import { PageContainer } from 'antdv-pro-layout';
import { ColumnsType } from 'ant-design-vue/lib/table'; import { ColumnsType } from 'ant-design-vue/es/table';
import { message } from 'ant-design-vue/lib'; import { message } from 'ant-design-vue/es';
import { reactive, toRaw, ref, onMounted, onBeforeUnmount, markRaw } from 'vue'; import { reactive, toRaw, ref, onMounted, onBeforeUnmount, markRaw } from 'vue';
import { listMain } from '@/api/index'; import { listMain } from '@/api/index';
import useI18n from '@/hooks/useI18n'; import useI18n from '@/hooks/useI18n';
@@ -243,9 +243,9 @@ function fnDesign(container: HTMLElement | undefined, option: any) {
} }
/**抽屉 网元详细信息 */ /**抽屉 网元详细信息 */
const visible = ref(false); const open = ref(false);
const closeDrawer = () => { const closeDrawer = () => {
visible.value = false; open.value = false;
}; };
/**抽屉 网元详细信息 */ /**抽屉 网元详细信息 */
@@ -302,7 +302,7 @@ function rowClick(record: any, index: any) {
expiryDate: pronData.expiryDate, expiryDate: pronData.expiryDate,
}; };
} }
visible.value = true; open.value = true;
}, },
}; };
} }
@@ -343,7 +343,7 @@ onBeforeUnmount(() => {
<template> <template>
<PageContainer :breadcrumb="{}"> <PageContainer :breadcrumb="{}">
<div> <div>
<a-drawer :visible="visible" @close="closeDrawer" :width="700"> <a-drawer :open="open" @close="closeDrawer" :width="700">
<a-descriptions bordered :column="1" :label-style="{ width: '160px' }"> <a-descriptions bordered :column="1" :label-style="{ width: '160px' }">
<a-descriptions-item :label="t('views.index.hostName')">{{ <a-descriptions-item :label="t('views.index.hostName')">{{
pronInfo.hostName pronInfo.hostName

280
src/views/configManage/softwareManage/components/software-history.vue
View File

@@ -1,280 +0,0 @@
<script setup lang="ts">
import { reactive, toRaw, watch, ref } from 'vue';
import { SizeType } from 'ant-design-vue/lib/config-provider';
import { ColumnsType } from 'ant-design-vue/lib/table';
import { listNeVersion } from '@/api/configManage/softwareManage';
import { parseDateToStr } from '@/utils/date-utils';
import useNeInfoStore from '@/store/modules/neinfo';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import useI18n from '@/hooks/useI18n';
const { t } = useI18n();
const emit = defineEmits(['ok', 'cancel', 'update:visible']);
const props = defineProps({
title: {
type: String,
default: '标题',
},
visible: {
type: Boolean,
default: false,
},
});
/**开始结束时间 */
let queryRangePicker = ref<[string, string]>(['', '']);
/**查询参数 */
let queryParams = reactive({
/**网元类型 */
neType: '',
/**记录开始时间 */
beginTime: '',
/**记录结束时间 */
endTime: '',
/**状态 */
status: undefined,
/**当前页数 */
pageNum: 1,
/**每页条数 */
pageSize: 20,
});
/**查询参数重置 */
function fnQueryReset() {
queryRangePicker.value = ['', ''];
queryParams = Object.assign(queryParams, {
neType: '',
status: undefined,
beginTime: '',
endTime: '',
pageNum: 1,
pageSize: 20,
});
tablePagination.current = 1;
tablePagination.pageSize = 20;
fnGetList();
}
/**表格状态类型 */
type TabeStateType = {
/**加载等待 */
loading: boolean;
/**紧凑型 */
size: SizeType;
/**记录数据 */
data: object[];
/**勾选记录 */
selectedRowKeys: (string | number)[];
};
/**表格状态 */
let tableState: TabeStateType = reactive({
loading: false,
size: 'small',
data: [],
selectedRowKeys: [],
});
/**表格字段列 */
let tableColumns: ColumnsType = [
{
title: t('views.configManage.softwareManage.neType'),
dataIndex: 'neType',
align: 'center',
width: 100,
},
{
title: t('views.configManage.neManage.neId'),
dataIndex: 'neId',
align: 'center',
width: 200,
},
{
title: t('views.configManage.softwareManage.versions'),
dataIndex: 'version',
align: 'center',
},
{
title: t('views.configManage.softwareManage.upVersions'),
dataIndex: 'preVersion',
align: 'center',
},
{
title: t('views.configManage.softwareManage.backVersions'),
dataIndex: 'newVersion',
align: 'center',
},
{
title: t('views.configManage.softwareManage.status'),
dataIndex: 'status',
key: 'status',
align: 'center',
width: 100,
},
{
title: t('views.configManage.softwareManage.letUpTime'),
dataIndex: 'updateTime',
align: 'center',
customRender(opt) {
if (!opt.value) return '';
return parseDateToStr(opt.value);
},
width: 200,
},
];
/**表格分页器参数 */
let tablePagination = reactive({
/**当前页数 */
current: 1,
/**每页条数 */
pageSize: 20,
/**默认的每页条数 */
defaultPageSize: 20,
/**指定每页可以显示多少条 */
pageSizeOptions: ['10', '20', '50', '100'],
/**只有一页时是否隐藏分页器 */
hideOnSinglePage: false,
/**是否可以快速跳转至某页 */
showQuickJumper: true,
/**是否可以改变 pageSize */
showSizeChanger: true,
/**数据总数 */
total: 0,
showTotal: (total: number) => t('common.tablePaginationTotal', { total }),
onChange: (page: number, pageSize: number) => {
tablePagination.current = page;
tablePagination.pageSize = pageSize;
queryParams.pageNum = page;
queryParams.pageSize = pageSize;
fnGetList();
},
});
/**查询角色未授权用户列表, pageNum初始页数 */
function fnGetList(pageNum?: number) {
if (tableState.loading) return;
tableState.loading = true;
if (pageNum) {
queryParams.pageNum = pageNum;
}
if (!queryRangePicker.value) {
queryRangePicker.value = ['', ''];
}
queryParams.beginTime = queryRangePicker.value[0];
queryParams.endTime = queryRangePicker.value[1];
listNeVersion(toRaw(queryParams)).then(res => {
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.rows)) {
tablePagination.total = res.total;
tableState.data = res.rows;
if (
tablePagination.total <=
(queryParams.pageNum - 1) * tablePagination.pageSize &&
queryParams.pageNum !== 1
) {
tableState.loading = false;
fnGetList(queryParams.pageNum - 1);
}
}
tableState.loading = false;
});
}
/**弹框取消按钮事件 */
function fnModalCancel() {
emit('cancel');
}
/**显示弹框时初始数据 */
function init() {
// 查询参数重置
fnQueryReset();
}
/**监听是否显示，初始数据 */
watch(
() => props.visible,
val => {
if (val) init();
}
);
</script>
<template>
<ProModal
:drag="true"
:forceFullscreen="true"
:destroyOnClose="true"
:title="props.title"
:visible="props.visible"
:keyboard="false"
:mask-closable="false"
@cancel="fnModalCancel"
:footer="false"
>
<!-- 表格搜索栏 -->
<a-form :model="queryParams" name="queryParams" layout="horizontal">
<a-row :gutter="16">
<a-col :lg="6" :md="6" :xs="24">
<a-form-item
:label="t('views.configManage.softwareManage.neType')"
name="neType"
>
<a-auto-complete
v-model:value="queryParams.neType"
:options="useNeInfoStore().getNeSelectOtions"
allow-clear
:placeholder="t('views.configManage.softwareManage.neTypePlease')"
/>
</a-form-item>
</a-col>
<a-col :lg="6" :md="6" :xs="24">
<a-form-item
:label="t('views.configManage.softwareManage.createTime')"
name="queryRangePicker"
>
<a-range-picker
v-model:value="queryRangePicker"
allow-clear
bordered
value-format="YYYY-MM-DD"
style="width: 100%"
></a-range-picker>
</a-form-item>
</a-col>
<a-col :lg="6" :md="6" :xs="24">
<a-form-item>
<a-space :size="8">
<a-button type="primary" @click.prevent="fnGetList(1)">
<template #icon><SearchOutlined /></template>
{{ t('common.search') }}
</a-button>
<a-button type="default" @click.prevent="fnQueryReset">
<template #icon><ClearOutlined /></template>
{{ t('common.reset') }}
</a-button>
</a-space>
</a-form-item>
</a-col>
</a-row>
</a-form>
<a-table
class="table"
row-key="id"
:columns="tableColumns"
:loading="tableState.loading"
:data-source="tableState.data"
:size="tableState.size"
:scroll="{ x: true }"
:pagination="tablePagination"
>
</a-table>
</ProModal>
</template>
<style lang="less" scoped>
.table :deep(.ant-pagination) {
padding: 0 24px;
}
</style>

1111
src/views/configManage/softwareManage/index.vue
View File

File diff suppressed because it is too large Load Diff

8
src/views/dashboard/amfUE/index.vue
View File

@@ -1,10 +1,10 @@
<script setup lang="ts"> <script setup lang="ts">
import { reactive, onMounted, toRaw, ref, onBeforeUnmount } from 'vue'; import { reactive, onMounted, toRaw, ref, onBeforeUnmount } from 'vue';
import { PageContainer } from 'antdv-pro-layout'; import { PageContainer } from 'antdv-pro-layout';
import { message, Modal } from 'ant-design-vue/lib'; import { message, Modal } from 'ant-design-vue/es';
import { SizeType } from 'ant-design-vue/lib/config-provider'; import { SizeType } from 'ant-design-vue/es/config-provider';
import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface'; import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
import { ColumnsType } from 'ant-design-vue/lib/table'; import { ColumnsType } from 'ant-design-vue/es/table';
import useI18n from '@/hooks/useI18n'; import useI18n from '@/hooks/useI18n';
import { import {
RESULT_CODE_ERROR, RESULT_CODE_ERROR,

8
src/views/dashboard/imsCDR/index.vue
View File

@@ -1,10 +1,10 @@
<script setup lang="ts"> <script setup lang="ts">
import { reactive, onMounted, toRaw, ref, onBeforeUnmount } from 'vue'; import { reactive, onMounted, toRaw, ref, onBeforeUnmount } from 'vue';
import { PageContainer } from 'antdv-pro-layout'; import { PageContainer } from 'antdv-pro-layout';
import { message, Modal } from 'ant-design-vue/lib'; import { message, Modal } from 'ant-design-vue/es';
import { SizeType } from 'ant-design-vue/lib/config-provider'; import { SizeType } from 'ant-design-vue/es/config-provider';
import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface'; import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
import { ColumnsType } from 'ant-design-vue/lib/table'; import { ColumnsType } from 'ant-design-vue/es/table';
import useI18n from '@/hooks/useI18n'; import useI18n from '@/hooks/useI18n';
import { import {
RESULT_CODE_ERROR, RESULT_CODE_ERROR,

13
src/views/dashboard/mocn/components/setting.vue
View File

@@ -1,13 +1,14 @@
<script setup lang="ts"> <script setup lang="ts">
import { reactive, toRaw, watch } from 'vue'; import { reactive, toRaw, watch } from 'vue';
import { ProModal } from 'antdv-pro-modal';
import { dbGetJSON, dbSetJSON } from '@/utils/cache-db-utils'; import { dbGetJSON, dbSetJSON } from '@/utils/cache-db-utils';
const emit = defineEmits(['ok', 'cancel', 'update:visible']); const emit = defineEmits(['ok', 'cancel', 'update:open']);
const props = defineProps({ const props = defineProps({
title: { title: {
type: String, type: String,
default: '标题', default: '标题',
}, },
visible: { open: {
type: Boolean, type: Boolean,
default: false, default: false,
}, },
@@ -27,13 +28,13 @@ let dataState = reactive({
function fnModalOk() { function fnModalOk() {
dbSetJSON('tbl_mocn', `tmp`, toRaw(dataState)); dbSetJSON('tbl_mocn', `tmp`, toRaw(dataState));
emit('ok'); emit('ok');
emit('update:visible', false); emit('update:open', false);
} }
/**弹框取消按钮事件 */ /**弹框取消按钮事件 */
function fnModalCancel() { function fnModalCancel() {
emit('cancel'); emit('cancel');
emit('update:visible', false); emit('update:open', false);
} }
/**显示弹框时初始数据 */ /**显示弹框时初始数据 */
@@ -48,7 +49,7 @@ function init() {
/**监听是否显示，初始数据 */ /**监听是否显示，初始数据 */
watch( watch(
() => props.visible, () => props.open,
val => { val => {
if (val) init(); if (val) init();
} }
@@ -60,7 +61,7 @@ watch(
:drag="true" :drag="true"
:width="800" :width="800"
:title="props.title" :title="props.title"
:visible="props.visible" :open="props.open"
:keyboard="false" :keyboard="false"
:mask-closable="false" :mask-closable="false"
@cancel="fnModalCancel" @cancel="fnModalCancel"

10
src/views/dashboard/mocn/index.vue
View File

@@ -8,7 +8,7 @@ import Topology from '../overview/components/Topology/index.vue';
import NeResources from '../overview/components/NeResources/index.vue'; import NeResources from '../overview/components/NeResources/index.vue';
import UserActivity from '../overview/components/UserActivity/index.vue'; import UserActivity from '../overview/components/UserActivity/index.vue';
import AlarnTypeBar from './components/AlarnTypeBar/index.vue'; import AlarnTypeBar from './components/AlarnTypeBar/index.vue';
import setting from './components/setting.vue'; import Setting from './components/setting.vue';
import UPFFlow from '../overview/components/UPFFlow/index.vue'; import UPFFlow from '../overview/components/UPFFlow/index.vue';
import { listUDMSub } from '@/api/neData/udm_sub'; import { listUDMSub } from '@/api/neData/udm_sub';
import { listUENumBySMF } from '@/api/neUser/smf'; import { listUENumBySMF } from '@/api/neUser/smf';
@@ -208,7 +208,7 @@ onBeforeUnmount(() => {
/**MOCN状态 */ /**MOCN状态 */
const mocnState = reactive({ const mocnState = reactive({
title: 'Set MOCN Data', title: 'Set MOCN Data',
visible: false, open: false,
data: { data: {
/**基站数 */ /**基站数 */
baseNum: 0, baseNum: 0,
@@ -220,7 +220,7 @@ const mocnState = reactive({
}); });
/**MOCN 右击设置 */ /**MOCN 右击设置 */
function fnRightClick() { function fnRightClick() {
mocnState.visible = true; mocnState.open = true;
} }
</script> </script>
@@ -543,9 +543,9 @@ function fnRightClick() {
</div> </div>
</div> </div>
</div> </div>
<setting <Setting
:title="mocnState.title" :title="mocnState.title"
v-model:visible="mocnState.visible" v-model:open="mocnState.open"
></setting> ></setting>
</div> </div>
</template> </template>

2
src/views/dashboard/overview/components/Topology/index.vue
View File

@@ -2,7 +2,7 @@
import { onMounted, ref } from 'vue'; import { onMounted, ref } from 'vue';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants'; import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import { listAllNeInfo } from '@/api/ne/neInfo'; import { listAllNeInfo } from '@/api/ne/neInfo';
import { message } from 'ant-design-vue/lib'; import { message } from 'ant-design-vue/es';
import { getGraphData } from '@/api/monitor/topology'; import { getGraphData } from '@/api/monitor/topology';
import { Graph, GraphData, Tooltip } from '@antv/g6'; import { Graph, GraphData, Tooltip } from '@antv/g6';
import { edgeLineAnimateState } from '@/views/monitor/topologyBuild/hooks/registerEdge'; import { edgeLineAnimateState } from '@/views/monitor/topologyBuild/hooks/registerEdge';

8
src/views/dashboard/smscCDR/index.vue
View File

@@ -1,10 +1,10 @@
<script setup lang="ts"> <script setup lang="ts">
import { reactive, onMounted, toRaw, ref, onBeforeUnmount } from 'vue'; import { reactive, onMounted, toRaw, ref, onBeforeUnmount } from 'vue';
import { PageContainer } from 'antdv-pro-layout'; import { PageContainer } from 'antdv-pro-layout';
import { message, Modal } from 'ant-design-vue/lib'; import { message, Modal } from 'ant-design-vue/es';
import { SizeType } from 'ant-design-vue/lib/config-provider'; import { SizeType } from 'ant-design-vue/es/config-provider';
import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface'; import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
import { ColumnsType } from 'ant-design-vue/lib/table'; import { ColumnsType } from 'ant-design-vue/es/table';
import useDictStore from '@/store/modules/dict'; import useDictStore from '@/store/modules/dict';
import useI18n from '@/hooks/useI18n'; import useI18n from '@/hooks/useI18n';
import { import {

98
src/views/faultManage/active-alarm/index.vue
View File

@@ -1,10 +1,11 @@
<script setup lang="ts"> <script setup lang="ts">
import { reactive, ref, onMounted, toRaw } from 'vue'; import { reactive, ref, onMounted, toRaw } from 'vue';
import { PageContainer } from 'antdv-pro-layout'; import { PageContainer } from 'antdv-pro-layout';
import { message, Modal } from 'ant-design-vue/lib'; import { ProModal } from 'antdv-pro-modal';
import { SizeType } from 'ant-design-vue/lib/config-provider'; import { message, Modal } from 'ant-design-vue/es';
import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface'; import { SizeType } from 'ant-design-vue/es/config-provider';
import { ColumnsType } from 'ant-design-vue/lib/table'; import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
import { ColumnsType } from 'ant-design-vue/es/table';
import { import {
listAct, listAct,
updateConfirm, updateConfirm,
@@ -328,15 +329,15 @@ function fnTableSize({ key }: MenuInfo) {
/**对话框对象信息状态类型 */ /**对话框对象信息状态类型 */
type ModalStateType = { type ModalStateType = {
/**详情框是否显示 */ /**详情框是否显示 */
visibleByView: boolean; openByView: boolean;
/**新增框或修改框是否显示 */ /**新增框或修改框是否显示 */
visibleByEdit: boolean; openByEdit: boolean;
/**显示过滤设置是否显示 */ /**显示过滤设置是否显示 */
visibleByShowSet: boolean; openByShowSet: boolean;
/**告警帮助文档是否显示 */ /**告警帮助文档是否显示 */
helpShowView: boolean; helpShowView: boolean;
/**个性化设置置是否显示 */ /**个性化设置置是否显示 */
visibleByMyselfSet: boolean; openByMyselfSet: boolean;
/**标题 */ /**标题 */
title: string; title: string;
/**表单数据 */ /**表单数据 */
@@ -349,11 +350,11 @@ type ModalStateType = {
/**对话框对象信息状态 */ /**对话框对象信息状态 */
let modalState: ModalStateType = reactive({ let modalState: ModalStateType = reactive({
visibleByView: false, openByView: false,
visibleByEdit: false, openByEdit: false,
visibleByShowSet: false, openByShowSet: false,
helpShowView: false, helpShowView: false,
visibleByMyselfSet: false, openByMyselfSet: false,
title: '全部信息', title: '全部信息',
from: { from: {
alarmId: '', alarmId: '',
@@ -405,7 +406,7 @@ function fnModalVisibleByVive(row: Record<string, any>) {
modalState.title = t('views.faultManage.activeAlarm.viewIdInfo', { modalState.title = t('views.faultManage.activeAlarm.viewIdInfo', {
alarmId: row.alarmId, alarmId: row.alarmId,
}); });
modalState.visibleByView = true; modalState.openByView = true;
} }
/** 告警帮助文档详细信息 */ /** 告警帮助文档详细信息 */
@@ -434,7 +435,7 @@ function fnModalOk() {
duration: 3, duration: 3,
}); });
modalState.confirmLoading = false; modalState.confirmLoading = false;
modalState.visibleByView = false; modalState.openByView = false;
return false; return false;
} }
const result = updateConfirm(from); const result = updateConfirm(from);
@@ -446,7 +447,7 @@ function fnModalOk() {
content: t('common.msgSuccess', { msg: modalState.title }), content: t('common.msgSuccess', { msg: modalState.title }),
duration: 3, duration: 3,
}); });
modalState.visibleByView = false; modalState.openByView = false;
fnGetList(); fnGetList();
} else { } else {
message.error({ message.error({
@@ -476,7 +477,7 @@ function fnShowModalOk() {
content: t('common.msgSuccess', { msg: modalState.title }), content: t('common.msgSuccess', { msg: modalState.title }),
duration: 3, duration: 3,
}); });
modalState.visibleByShowSet = false; modalState.openByShowSet = false;
fnGetList(); fnGetList();
} else { } else {
message.error({ message.error({
@@ -604,7 +605,7 @@ function fnShowSet() {
: {}; : {};
modalState.showSetFrom = Object.assign(modalState.showSetFrom, realJson); modalState.showSetFrom = Object.assign(modalState.showSetFrom, realJson);
modalState.title = t('views.faultManage.activeAlarm.showSet'); modalState.title = t('views.faultManage.activeAlarm.showSet');
modalState.visibleByShowSet = true; modalState.openByShowSet = true;
} else { } else {
message.error(t('common.getInfoFail'), 2); message.error(t('common.getInfoFail'), 2);
} }
@@ -617,11 +618,14 @@ function mapKeysWithReduce(data: any[], titleMapping: Record<string, string>) {
if (typeof item !== 'object' || item === null) { if (typeof item !== 'object' || item === null) {
return item; // 如果不是对象，直接返回原值 return item; // 如果不是对象，直接返回原值
} }
return Object.keys(item).reduce((newItem: Record<string, any>, key: string) => { return Object.keys(item).reduce(
(newItem: Record<string, any>, key: string) => {
const title = titleMapping[key] || key; const title = titleMapping[key] || key;
newItem[title] = item[key]; newItem[title] = item[key];
return newItem; return newItem;
}, {}); // 确保初始值是一个空对象 },
{}
); // 确保初始值是一个空对象
}); });
} }
@@ -704,9 +708,9 @@ function fnExportAll() {
* 进行表达规则校验 * 进行表达规则校验
*/ */
function fnModalCancel() { function fnModalCancel() {
modalState.visibleByEdit = false; modalState.openByEdit = false;
modalState.visibleByView = false; modalState.openByView = false;
modalState.visibleByShowSet = false; modalState.openByShowSet = false;
modalState.helpShowView = false; modalState.helpShowView = false;
} }
@@ -837,7 +841,7 @@ onMounted(() => {
</a-form-item> </a-form-item>
</a-col> </a-col>
</a-row> </a-row>
<a-row :gutter="16"> <a-row>
<a-col :lg="6" :md="12" :xs="24"> <a-col :lg="6" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.faultManage.activeAlarm.alarmCode')" :label="t('views.faultManage.activeAlarm.alarmCode')"
@@ -877,7 +881,7 @@ onMounted(() => {
</a-form-item> </a-form-item>
</a-col> </a-col>
</a-row> </a-row>
<a-row :gutter="16"> <a-row>
<a-col :lg="6" :md="12" :xs="24"> <a-col :lg="6" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.faultManage.activeAlarm.pvFlag')" :label="t('views.faultManage.activeAlarm.pvFlag')"
@@ -912,7 +916,7 @@ onMounted(() => {
<a-card :bordered="false" :body-style="{ padding: '0px' }"> <a-card :bordered="false" :body-style="{ padding: '0px' }">
<!-- 插槽-卡片左侧侧 --> <!-- 插槽-卡片左侧侧 -->
<template #title> <template #title>
<div class="button-container"> <a-space :size="8" align="center">
<a-button <a-button
type="primary" type="primary"
@click.prevent="fnCancelConfirm()" @click.prevent="fnCancelConfirm()"
@@ -956,12 +960,12 @@ onMounted(() => {
<template #icon> <export-outlined /> </template> <template #icon> <export-outlined /> </template>
{{ t('views.faultManage.activeAlarm.exportAll') }} {{ t('views.faultManage.activeAlarm.exportAll') }}
</a-button> </a-button>
</div> </a-space>
</template> </template>
<!-- 插槽-卡片右侧 --> <!-- 插槽-卡片右侧 -->
<template #extra> <template #extra>
<div class="button-container"> <a-space :size="8" align="center">
<a-tooltip> <a-tooltip>
<template #title>{{ t('common.searchBarText') }}</template> <template #title>{{ t('common.searchBarText') }}</template>
<a-switch <a-switch
@@ -1006,7 +1010,7 @@ onMounted(() => {
:columns="tableColumns" :columns="tableColumns"
v-model:columns-dnd="tableColumnsDnd" v-model:columns-dnd="tableColumnsDnd"
></TableColumnsDnd> ></TableColumnsDnd>
</div> </a-space>
</template> </template>
<!-- 表格列表 --> <!-- 表格列表 -->
@@ -1084,7 +1088,7 @@ onMounted(() => {
:destroyOnClose="true" :destroyOnClose="true"
:keyboard="false" :keyboard="false"
:mask-closable="false" :mask-closable="false"
:visible="modalState.helpShowView" :open="modalState.helpShowView"
:title="modalState.title" :title="modalState.title"
:confirm-loading="modalState.confirmLoading" :confirm-loading="modalState.confirmLoading"
:body-style="{ padding: '0px' }" :body-style="{ padding: '0px' }"
@@ -1111,7 +1115,7 @@ onMounted(() => {
:body-style="{ height: '520px', overflowY: 'scroll' }" :body-style="{ height: '520px', overflowY: 'scroll' }"
:keyboard="false" :keyboard="false"
:mask-closable="false" :mask-closable="false"
:visible="modalState.visibleByView" :open="modalState.openByView"
:title="modalState.title" :title="modalState.title"
:confirm-loading="modalState.confirmLoading" :confirm-loading="modalState.confirmLoading"
@ok="fnModalOk" @ok="fnModalOk"
@@ -1124,7 +1128,7 @@ onMounted(() => {
:label-col="{ span: 8 }" :label-col="{ span: 8 }"
:label-wrap="true" :label-wrap="true"
> >
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.faultManage.activeAlarm.alarmId')" :label="t('views.faultManage.activeAlarm.alarmId')"
@@ -1143,7 +1147,7 @@ onMounted(() => {
</a-col> </a-col>
</a-row> </a-row>
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.faultManage.activeAlarm.neId')" :label="t('views.faultManage.activeAlarm.neId')"
@@ -1162,7 +1166,7 @@ onMounted(() => {
</a-col> </a-col>
</a-row> </a-row>
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.faultManage.activeAlarm.neType')" :label="t('views.faultManage.activeAlarm.neType')"
@@ -1181,7 +1185,7 @@ onMounted(() => {
</a-col> </a-col>
</a-row> </a-row>
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.faultManage.activeAlarm.alarmTitle')" :label="t('views.faultManage.activeAlarm.alarmTitle')"
@@ -1200,7 +1204,7 @@ onMounted(() => {
</a-col> </a-col>
</a-row> </a-row>
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.faultManage.activeAlarm.alarmType')" :label="t('views.faultManage.activeAlarm.alarmType')"
@@ -1227,9 +1231,9 @@ onMounted(() => {
{{ modalState.from.locationInfo }} {{ modalState.from.locationInfo }}
</a-form-item> </a-form-item>
<a-row :gutter="16"> </a-row> <a-row> </a-row>
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.faultManage.activeAlarm.province')" :label="t('views.faultManage.activeAlarm.province')"
@@ -1272,7 +1276,7 @@ onMounted(() => {
{{ modalState.from.specificProblem }} {{ modalState.from.specificProblem }}
</a-form-item> </a-form-item>
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.faultManage.activeAlarm.ackUser')" :label="t('views.faultManage.activeAlarm.ackUser')"
@@ -1291,7 +1295,7 @@ onMounted(() => {
</a-col> </a-col>
</a-row> </a-row>
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.faultManage.activeAlarm.ackTime')" :label="t('views.faultManage.activeAlarm.ackTime')"
@@ -1318,7 +1322,7 @@ onMounted(() => {
:width="800" :width="800"
:keyboard="false" :keyboard="false"
:mask-closable="false" :mask-closable="false"
:visible="modalState.visibleByShowSet" :open="modalState.openByShowSet"
:title="modalState.title" :title="modalState.title"
:confirm-loading="modalState.confirmLoading" :confirm-loading="modalState.confirmLoading"
@ok="fnShowModalOk" @ok="fnShowModalOk"
@@ -1326,7 +1330,7 @@ onMounted(() => {
@cancel="fnModalCancel" @cancel="fnModalCancel"
> >
<a-form name="modalStateShowFrom" layout="horizontal"> <a-form name="modalStateShowFrom" layout="horizontal">
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.faultManage.activeAlarm.neType')" :label="t('views.faultManage.activeAlarm.neType')"
@@ -1351,7 +1355,7 @@ onMounted(() => {
</a-col> </a-col>
</a-row> </a-row>
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.faultManage.activeAlarm.pvFlag')" :label="t('views.faultManage.activeAlarm.pvFlag')"
@@ -1382,7 +1386,7 @@ onMounted(() => {
</a-form-item> </a-form-item>
</a-col> </a-col>
</a-row> </a-row>
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.faultManage.activeAlarm.origLevel')" :label="t('views.faultManage.activeAlarm.origLevel')"
@@ -1418,7 +1422,7 @@ onMounted(() => {
:width="800" :width="800"
:keyboard="false" :keyboard="false"
:mask-closable="false" :mask-closable="false"
:visible="modalState.visibleByMyselfSet" :open="modalState.openByMyselfSet"
:title="modalState.title" :title="modalState.title"
:confirm-loading="modalState.confirmLoading" :confirm-loading="modalState.confirmLoading"
@ok="fnShowModalOk" @ok="fnShowModalOk"
@@ -1426,7 +1430,7 @@ onMounted(() => {
@cancel="fnModalCancel" @cancel="fnModalCancel"
> >
<a-form name="modalStateShowFrom" layout="horizontal"> <a-form name="modalStateShowFrom" layout="horizontal">
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.faultManage.activeAlarm.neType')" :label="t('views.faultManage.activeAlarm.neType')"
@@ -1450,7 +1454,7 @@ onMounted(() => {
</a-col> </a-col>
</a-row> </a-row>
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.faultManage.activeAlarm.pvFlag')" :label="t('views.faultManage.activeAlarm.pvFlag')"
@@ -1481,7 +1485,7 @@ onMounted(() => {
</a-form-item> </a-form-item>
</a-col> </a-col>
</a-row> </a-row>
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.faultManage.activeAlarm.origLevel')" :label="t('views.faultManage.activeAlarm.origLevel')"

61
src/views/faultManage/event/index.vue
View File

@@ -1,10 +1,11 @@
<script setup lang="ts"> <script setup lang="ts">
import { reactive, ref, onMounted, toRaw } from 'vue'; import { reactive, ref, onMounted, toRaw } from 'vue';
import { PageContainer } from 'antdv-pro-layout'; import { PageContainer } from 'antdv-pro-layout';
import { message, Modal } from 'ant-design-vue/lib'; import { ProModal } from 'antdv-pro-modal';
import { SizeType } from 'ant-design-vue/lib/config-provider'; import { message, Modal } from 'ant-design-vue/es';
import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface'; import { SizeType } from 'ant-design-vue/es/config-provider';
import { ColumnsType } from 'ant-design-vue/lib/table'; import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
import { ColumnsType } from 'ant-design-vue/es/table';
import { listAct, exportAll } from '@/api/faultManage/eventAlarm'; import { listAct, exportAll } from '@/api/faultManage/eventAlarm';
import useI18n from '@/hooks/useI18n'; import useI18n from '@/hooks/useI18n';
import useDictStore from '@/store/modules/dict'; import useDictStore from '@/store/modules/dict';
@@ -211,13 +212,13 @@ function fnTableSize({ key }: MenuInfo) {
/**对话框对象信息状态类型 */ /**对话框对象信息状态类型 */
type ModalStateType = { type ModalStateType = {
/**详情框是否显示 */ /**详情框是否显示 */
visibleByView: boolean; openByView: boolean;
/**新增框或修改框是否显示 */ /**新增框或修改框是否显示 */
visibleByEdit: boolean; openByEdit: boolean;
/**显示过滤设置是否显示 */ /**显示过滤设置是否显示 */
visibleByShowSet: boolean; openByShowSet: boolean;
/**个性化设置置是否显示 */ /**个性化设置置是否显示 */
visibleByMyselfSet: boolean; openByMyselfSet: boolean;
/**标题 */ /**标题 */
title: string; title: string;
/**表单数据 */ /**表单数据 */
@@ -230,10 +231,10 @@ type ModalStateType = {
/**对话框对象信息状态 */ /**对话框对象信息状态 */
let modalState: ModalStateType = reactive({ let modalState: ModalStateType = reactive({
visibleByView: false, openByView: false,
visibleByEdit: false, openByEdit: false,
visibleByShowSet: false, openByShowSet: false,
visibleByMyselfSet: false, openByMyselfSet: false,
title: '全部信息', title: '全部信息',
from: { from: {
alarmId: '', alarmId: '',
@@ -285,7 +286,7 @@ function fnModalVisibleByVive(row: Record<string, any>) {
modalState.title = t('views.faultManage.activeAlarm.viewIdInfo', { modalState.title = t('views.faultManage.activeAlarm.viewIdInfo', {
alarmId: row.alarmId, alarmId: row.alarmId,
}); });
modalState.visibleByView = true; modalState.openByView = true;
} }
/**表格状态 */ /**表格状态 */
@@ -384,8 +385,8 @@ function fnExportAll() {
* 进行表达规则校验 * 进行表达规则校验
*/ */
function fnModalCancel() { function fnModalCancel() {
modalState.visibleByEdit = false; modalState.openByEdit = false;
modalState.visibleByView = false; modalState.openByView = false;
} }
/**查询列表, pageNum初始页数 */ /**查询列表, pageNum初始页数 */
@@ -508,7 +509,7 @@ onMounted(() => {
</a-form-item> </a-form-item>
</a-col> </a-col>
</a-row> </a-row>
<a-row :gutter="16"> <a-row>
<a-col :lg="6" :md="12" :xs="24"> <a-col :lg="6" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.faultManage.activeAlarm.alarmCode')" :label="t('views.faultManage.activeAlarm.alarmCode')"
@@ -550,7 +551,7 @@ onMounted(() => {
</a-form-item> </a-form-item>
</a-col> </a-col>
</a-row> </a-row>
<a-row :gutter="16"> <a-row>
<a-col :lg="6" :md="12" :xs="24"> <a-col :lg="6" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.faultManage.activeAlarm.alarmType')" :label="t('views.faultManage.activeAlarm.alarmType')"
@@ -570,7 +571,7 @@ onMounted(() => {
<a-card :bordered="false" :body-style="{ padding: '0px' }"> <a-card :bordered="false" :body-style="{ padding: '0px' }">
<!-- 插槽-卡片左侧侧 --> <!-- 插槽-卡片左侧侧 -->
<template #title> <template #title>
<div class="button-container"> <a-space :size="8" align="center">
<a-button <a-button
type="primary" type="primary"
@click.prevent="fnExportAll()" @click.prevent="fnExportAll()"
@@ -579,12 +580,12 @@ onMounted(() => {
<template #icon> <export-outlined /> </template> <template #icon> <export-outlined /> </template>
{{ t('views.faultManage.activeAlarm.exportAll') }} {{ t('views.faultManage.activeAlarm.exportAll') }}
</a-button> </a-button>
</div> </a-space>
</template> </template>
<!-- 插槽-卡片右侧 --> <!-- 插槽-卡片右侧 -->
<template #extra> <template #extra>
<div class="button-container"> <a-space :size="8" align="center">
<a-tooltip> <a-tooltip>
<template #title>{{ t('common.searchBarText') }}</template> <template #title>{{ t('common.searchBarText') }}</template>
<a-switch <a-switch
@@ -629,7 +630,7 @@ onMounted(() => {
:columns="tableColumns" :columns="tableColumns"
v-model:columns-dnd="tableColumnsDnd" v-model:columns-dnd="tableColumnsDnd"
></TableColumnsDnd> ></TableColumnsDnd>
</div> </a-space>
</template> </template>
<!-- 表格列表 --> <!-- 表格列表 -->
@@ -641,7 +642,7 @@ onMounted(() => {
:data-source="tableState.data" :data-source="tableState.data"
:size="tableState.size" :size="tableState.size"
:pagination="tablePagination" :pagination="tablePagination"
:scroll="{ x: 2500, y: 400 }" :scroll="{ x: tableColumns.length * 120, y: 400 }"
> >
<template #bodyCell="{ column, record }"> <template #bodyCell="{ column, record }">
<template v-if="column.key === 'origSeverity'"> <template v-if="column.key === 'origSeverity'">
@@ -689,7 +690,7 @@ onMounted(() => {
:body-style="{ height: '520px', overflowY: 'scroll' }" :body-style="{ height: '520px', overflowY: 'scroll' }"
:keyboard="false" :keyboard="false"
:mask-closable="false" :mask-closable="false"
:visible="modalState.visibleByView" :open="modalState.openByView"
:title="modalState.title" :title="modalState.title"
:confirm-loading="modalState.confirmLoading" :confirm-loading="modalState.confirmLoading"
@cancel="fnModalCancel" @cancel="fnModalCancel"
@@ -706,7 +707,7 @@ onMounted(() => {
:label-col="{ span: 8 }" :label-col="{ span: 8 }"
:label-wrap="true" :label-wrap="true"
> >
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.faultManage.activeAlarm.alarmId')" :label="t('views.faultManage.activeAlarm.alarmId')"
@@ -725,7 +726,7 @@ onMounted(() => {
</a-col> </a-col>
</a-row> </a-row>
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.faultManage.activeAlarm.neId')" :label="t('views.faultManage.activeAlarm.neId')"
@@ -744,7 +745,7 @@ onMounted(() => {
</a-col> </a-col>
</a-row> </a-row>
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.faultManage.activeAlarm.neType')" :label="t('views.faultManage.activeAlarm.neType')"
@@ -763,7 +764,7 @@ onMounted(() => {
</a-col> </a-col>
</a-row> </a-row>
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.faultManage.activeAlarm.alarmTitle')" :label="t('views.faultManage.activeAlarm.alarmTitle')"
@@ -790,9 +791,7 @@ onMounted(() => {
{{ modalState.from.locationInfo }} {{ modalState.from.locationInfo }}
</a-form-item> </a-form-item>
<a-row :gutter="16"> </a-row> <a-row>
<a-row :gutter="16">
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.faultManage.activeAlarm.province')" :label="t('views.faultManage.activeAlarm.province')"
@@ -819,7 +818,7 @@ onMounted(() => {
{{ modalState.from.addInfo }} {{ modalState.from.addInfo }}
</a-form-item> </a-form-item>
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.faultManage.activeAlarm.specificProblemId')" :label="t('views.faultManage.activeAlarm.specificProblemId')"

4
src/views/faultManage/fault-setting/index.vue
View File

@@ -1,7 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { reactive, onMounted, toRaw } from 'vue'; import { reactive, onMounted, toRaw } from 'vue';
import { PageContainer } from 'antdv-pro-layout'; import { PageContainer } from 'antdv-pro-layout';
import { Form, message } from 'ant-design-vue/lib'; import { Form, message } from 'ant-design-vue/es';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants'; import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import { import {
getForwardSet, getForwardSet,
@@ -177,7 +177,7 @@ onMounted(() => {
<template> <template>
<PageContainer> <PageContainer>
<a-row :gutter="16"> <a-row>
<a-col :span="8" v-if="false"> <a-col :span="8" v-if="false">
<!-- 日志设置 --> <!-- 日志设置 -->
<a-card :title="alarmState.title" :loading="alarmState.fromLoading"> <a-card :title="alarmState.title" :loading="alarmState.fromLoading">

70
src/views/faultManage/history-alarm/index.vue
View File

@@ -1,10 +1,11 @@
<script setup lang="ts"> <script setup lang="ts">
import { reactive, ref, onMounted, toRaw } from 'vue'; import { reactive, ref, onMounted, toRaw } from 'vue';
import { PageContainer } from 'antdv-pro-layout'; import { PageContainer } from 'antdv-pro-layout';
import { message, Modal } from 'ant-design-vue/lib'; import { ProModal } from 'antdv-pro-modal';
import { SizeType } from 'ant-design-vue/lib/config-provider'; import { message, Modal } from 'ant-design-vue/es';
import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface'; import { SizeType } from 'ant-design-vue/es/config-provider';
import { ColumnsType } from 'ant-design-vue/lib/table'; import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
import { ColumnsType } from 'ant-design-vue/es/table';
import { import {
listAct, listAct,
updateConfirm, updateConfirm,
@@ -262,13 +263,13 @@ function fnTableSize({ key }: MenuInfo) {
/**对话框对象信息状态类型 */ /**对话框对象信息状态类型 */
type ModalStateType = { type ModalStateType = {
/**详情框是否显示 */ /**详情框是否显示 */
visibleByView: boolean; openByView: boolean;
/**新增框或修改框是否显示 */ /**新增框或修改框是否显示 */
visibleByEdit: boolean; openByEdit: boolean;
/**显示过滤设置是否显示 */ /**显示过滤设置是否显示 */
visibleByShowSet: boolean; openByShowSet: boolean;
/**个性化设置置是否显示 */ /**个性化设置置是否显示 */
visibleByMyselfSet: boolean; openByMyselfSet: boolean;
/**标题 */ /**标题 */
title: string; title: string;
/**表单数据 */ /**表单数据 */
@@ -281,10 +282,10 @@ type ModalStateType = {
/**对话框对象信息状态 */ /**对话框对象信息状态 */
let modalState: ModalStateType = reactive({ let modalState: ModalStateType = reactive({
visibleByView: false, openByView: false,
visibleByEdit: false, openByEdit: false,
visibleByShowSet: false, openByShowSet: false,
visibleByMyselfSet: false, openByMyselfSet: false,
title: '全部信息', title: '全部信息',
from: { from: {
alarmId: '', alarmId: '',
@@ -336,7 +337,7 @@ function fnModalVisibleByVive(row: Record<string, any>) {
modalState.title = t('views.faultManage.activeAlarm.viewIdInfo', { modalState.title = t('views.faultManage.activeAlarm.viewIdInfo', {
alarmId: row.alarmId, alarmId: row.alarmId,
}); });
modalState.visibleByView = true; modalState.openByView = true;
} }
/** /**
@@ -351,7 +352,7 @@ function fnModalOk() {
duration: 3, duration: 3,
}); });
modalState.confirmLoading = false; modalState.confirmLoading = false;
modalState.visibleByView = false; modalState.openByView = false;
return false; return false;
} }
const result = updateConfirm(from); const result = updateConfirm(from);
@@ -363,7 +364,7 @@ function fnModalOk() {
content: t('common.msgSuccess', { msg: modalState.title }), content: t('common.msgSuccess', { msg: modalState.title }),
duration: 3, duration: 3,
}); });
modalState.visibleByView = false; modalState.openByView = false;
fnGetList(); fnGetList();
} else { } else {
message.error({ message.error({
@@ -432,11 +433,14 @@ function mapKeysWithReduce(data: any[], titleMapping: Record<string, string>) {
if (typeof item !== 'object' || item === null) { if (typeof item !== 'object' || item === null) {
return item; return item;
} }
return Object.keys(item).reduce((newItem: Record<string, any>, key: string) => { return Object.keys(item).reduce(
(newItem: Record<string, any>, key: string) => {
const title = titleMapping[key] || key; const title = titleMapping[key] || key;
newItem[title] = item[key]; newItem[title] = item[key];
return newItem; return newItem;
}, {}); },
{}
);
}); });
} }
@@ -518,9 +522,9 @@ function fnExportAll() {
* 进行表达规则校验 * 进行表达规则校验
*/ */
function fnModalCancel() { function fnModalCancel() {
modalState.visibleByEdit = false; modalState.openByEdit = false;
modalState.visibleByView = false; modalState.openByView = false;
modalState.visibleByShowSet = false; modalState.openByShowSet = false;
} }
/**查询列表, pageNum初始页数 */ /**查询列表, pageNum初始页数 */
@@ -644,7 +648,7 @@ onMounted(() => {
</a-form-item> </a-form-item>
</a-col> </a-col>
</a-row> </a-row>
<a-row :gutter="16"> <a-row>
<a-col :lg="6" :md="12" :xs="24"> <a-col :lg="6" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.faultManage.activeAlarm.alarmCode')" :label="t('views.faultManage.activeAlarm.alarmCode')"
@@ -684,7 +688,7 @@ onMounted(() => {
</a-form-item> </a-form-item>
</a-col> </a-col>
</a-row> </a-row>
<a-row :gutter="16"> <a-row>
<a-col :lg="6" :md="12" :xs="24"> <a-col :lg="6" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.faultManage.activeAlarm.pvFlag')" :label="t('views.faultManage.activeAlarm.pvFlag')"
@@ -805,7 +809,7 @@ onMounted(() => {
onChange: onSelectChange, onChange: onSelectChange,
}" }"
:pagination="tablePagination" :pagination="tablePagination"
:scroll="{ x: 2500, y: 400 }" :scroll="{ x: tableColumns.length * 120, y: 400 }"
> >
<template #bodyCell="{ column, record }"> <template #bodyCell="{ column, record }">
<template v-if="column.key === 'origSeverity'"> <template v-if="column.key === 'origSeverity'">
@@ -853,7 +857,7 @@ onMounted(() => {
:body-style="{ height: '520px', overflowY: 'scroll' }" :body-style="{ height: '520px', overflowY: 'scroll' }"
:keyboard="false" :keyboard="false"
:mask-closable="false" :mask-closable="false"
:visible="modalState.visibleByView" :open="modalState.openByView"
:title="modalState.title" :title="modalState.title"
:confirm-loading="modalState.confirmLoading" :confirm-loading="modalState.confirmLoading"
@ok="fnModalOk" @ok="fnModalOk"
@@ -865,7 +869,7 @@ onMounted(() => {
layout="horizontal" layout="horizontal"
:label-col="{ span: 8 }" :label-col="{ span: 8 }"
> >
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.faultManage.activeAlarm.alarmId')" :label="t('views.faultManage.activeAlarm.alarmId')"
@@ -884,7 +888,7 @@ onMounted(() => {
</a-col> </a-col>
</a-row> </a-row>
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.faultManage.activeAlarm.neId')" :label="t('views.faultManage.activeAlarm.neId')"
@@ -903,7 +907,7 @@ onMounted(() => {
</a-col> </a-col>
</a-row> </a-row>
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.faultManage.activeAlarm.neType')" :label="t('views.faultManage.activeAlarm.neType')"
@@ -922,7 +926,7 @@ onMounted(() => {
</a-col> </a-col>
</a-row> </a-row>
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.faultManage.activeAlarm.alarmTitle')" :label="t('views.faultManage.activeAlarm.alarmTitle')"
@@ -941,7 +945,7 @@ onMounted(() => {
</a-col> </a-col>
</a-row> </a-row>
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.faultManage.activeAlarm.pvFlag')" :label="t('views.faultManage.activeAlarm.pvFlag')"
@@ -968,7 +972,7 @@ onMounted(() => {
> >
{{ modalState.from.locationInfo }} {{ modalState.from.locationInfo }}
</a-form-item> </a-form-item>
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.faultManage.activeAlarm.province')" :label="t('views.faultManage.activeAlarm.province')"
@@ -1009,7 +1013,7 @@ onMounted(() => {
> >
{{ modalState.from.specificProblem }} {{ modalState.from.specificProblem }}
</a-form-item> </a-form-item>
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.faultManage.activeAlarm.clearType')" :label="t('views.faultManage.activeAlarm.clearType')"
@@ -1028,7 +1032,7 @@ onMounted(() => {
</a-col> </a-col>
</a-row> </a-row>
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.faultManage.activeAlarm.ackUser')" :label="t('views.faultManage.activeAlarm.ackUser')"
@@ -1047,7 +1051,7 @@ onMounted(() => {
</a-col> </a-col>
</a-row> </a-row>
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.faultManage.activeAlarm.ackTime')" :label="t('views.faultManage.activeAlarm.ackTime')"

6
src/views/logManage/alarm/index.vue
View File

@@ -1,9 +1,9 @@
<script setup lang="ts"> <script setup lang="ts">
import { reactive, ref, onMounted, toRaw } from 'vue'; import { reactive, ref, onMounted, toRaw } from 'vue';
import { PageContainer } from 'antdv-pro-layout'; import { PageContainer } from 'antdv-pro-layout';
import { SizeType } from 'ant-design-vue/lib/config-provider'; import { SizeType } from 'ant-design-vue/es/config-provider';
import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface'; import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
import { ColumnsType } from 'ant-design-vue/lib/table'; import { ColumnsType } from 'ant-design-vue/es/table';
import { parseDateToStr } from '@/utils/date-utils'; import { parseDateToStr } from '@/utils/date-utils';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants'; import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import { listAlarm } from '@/api/logManage/alarm'; import { listAlarm } from '@/api/logManage/alarm';

8
src/views/logManage/exportFile/index.vue
View File

@@ -1,9 +1,9 @@
<script setup lang="ts"> <script setup lang="ts">
import { reactive, ref, onMounted, toRaw } from 'vue'; import { reactive, ref, onMounted, toRaw } from 'vue';
import { PageContainer } from 'antdv-pro-layout'; import { PageContainer } from 'antdv-pro-layout';
import { SizeType } from 'ant-design-vue/lib/config-provider'; import { SizeType } from 'ant-design-vue/es/config-provider';
import { ColumnsType } from 'ant-design-vue/lib/table'; import { ColumnsType } from 'ant-design-vue/es/table';
import { Modal, message } from 'ant-design-vue/lib'; import { Modal, message } from 'ant-design-vue/es';
import { parseDateToStr } from '@/utils/date-utils'; import { parseDateToStr } from '@/utils/date-utils';
import { import {
getBakFile, getBakFile,
@@ -277,7 +277,7 @@ onMounted(() => {
<!-- 插槽-卡片左侧侧 --> <!-- 插槽-卡片左侧侧 -->
<template #title> <template #title>
<a-form :model="queryParams" name="queryParams" layout="horizontal"> <a-form :model="queryParams" name="queryParams" layout="horizontal">
<a-row :gutter="16"> <a-row>
<a-col :lg="8" :md="12" :xs="24"> <a-col :lg="8" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.logManage.exportFile.fileName')" :label="t('views.logManage.exportFile.fileName')"

6
src/views/logManage/forwarding/index.vue
View File

@@ -1,9 +1,9 @@
<script setup lang="ts"> <script setup lang="ts">
import { reactive, ref, onMounted, toRaw } from 'vue'; import { reactive, ref, onMounted, toRaw } from 'vue';
import { PageContainer } from 'antdv-pro-layout'; import { PageContainer } from 'antdv-pro-layout';
import { SizeType } from 'ant-design-vue/lib/config-provider'; import { SizeType } from 'ant-design-vue/es/config-provider';
import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface'; import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
import { ColumnsType } from 'ant-design-vue/lib/table'; import { ColumnsType } from 'ant-design-vue/es/table';
import { parseDateToStr } from '@/utils/date-utils'; import { parseDateToStr } from '@/utils/date-utils';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants'; import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import { listForwarding } from '@/api/logManage/forwarding'; import { listForwarding } from '@/api/logManage/forwarding';

4
src/views/logManage/logSet/index.vue
View File

@@ -1,7 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { reactive, ref, onMounted, toRaw } from 'vue'; import { reactive, ref, onMounted, toRaw } from 'vue';
import { PageContainer } from 'antdv-pro-layout'; import { PageContainer } from 'antdv-pro-layout';
import { Form, Modal, message } from 'ant-design-vue/lib'; import { Form, Modal, message } from 'ant-design-vue/es';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants'; import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import { import {
backupDownload, backupDownload,
@@ -411,7 +411,7 @@ onMounted(() => {
<template> <template>
<PageContainer> <PageContainer>
<a-row :gutter="16"> <a-row>
<a-col :span="8"> <a-col :span="8">
<!-- 日志设置 --> <!-- 日志设置 -->
<a-card :title="logSetState.title" :loading="logSetState.fromLoading"> <a-card :title="logSetState.title" :loading="logSetState.fromLoading">

6
src/views/logManage/mml/index.vue
View File

@@ -1,9 +1,9 @@
<script setup lang="ts"> <script setup lang="ts">
import { reactive, ref, onMounted, toRaw } from 'vue'; import { reactive, ref, onMounted, toRaw } from 'vue';
import { PageContainer } from 'antdv-pro-layout'; import { PageContainer } from 'antdv-pro-layout';
import { SizeType } from 'ant-design-vue/lib/config-provider'; import { SizeType } from 'ant-design-vue/es/config-provider';
import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface'; import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
import { ColumnsType } from 'ant-design-vue/lib/table'; import { ColumnsType } from 'ant-design-vue/es/table';
import { parseDateToStr } from '@/utils/date-utils'; import { parseDateToStr } from '@/utils/date-utils';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants'; import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import { listMML } from '@/api/logManage/mml'; import { listMML } from '@/api/logManage/mml';

22
src/views/logManage/neFile/components/ViewDrawer.vue
View File

@@ -4,9 +4,9 @@ import { ProModal } from 'antdv-pro-modal';
import TerminalSSHView from '@/components/TerminalSSHView/index.vue'; import TerminalSSHView from '@/components/TerminalSSHView/index.vue';
import useI18n from '@/hooks/useI18n'; import useI18n from '@/hooks/useI18n';
const { t } = useI18n(); const { t } = useI18n();
const emit = defineEmits(['ok', 'cancel', 'update:visible']); const emit = defineEmits(['ok', 'cancel', 'update:open']);
const props = defineProps({ const props = defineProps({
visible: { open: {
type: Boolean, type: Boolean,
default: false, default: false,
required: true, required: true,
@@ -34,7 +34,7 @@ const props = defineProps({
/**对话框对象信息状态类型 */ /**对话框对象信息状态类型 */
type StateType = { type StateType = {
/**框是否显示 */ /**框是否显示 */
visible: boolean; open: boolean;
/**标题 */ /**标题 */
title: string; title: string;
/**查看命令 */ /**查看命令 */
@@ -43,7 +43,7 @@ type StateType = {
/**对话框对象信息状态 */ /**对话框对象信息状态 */
let state: StateType = reactive({ let state: StateType = reactive({
visible: false, open: false,
title: '文件查看', title: '文件查看',
form: { form: {
follow: true, follow: true,
@@ -54,21 +54,21 @@ let state: StateType = reactive({
}); });
function onClose() { function onClose() {
state.visible = false; state.open = false;
emit('cancel'); emit('cancel');
emit('update:visible', false); emit('update:open', false);
} }
/**监听是否显示，初始数据 */ /**监听是否显示，初始数据 */
watch( watch(
() => props.visible, () => props.open,
val => { val => {
if (val) { if (val) {
if (props.neType && props.neId) { if (props.neType && props.neId) {
const filePath = props.filePath; const filePath = props.filePath;
const fileName = filePath.substring(filePath.lastIndexOf('/') + 1); const fileName = filePath.substring(filePath.lastIndexOf('/') + 1);
state.title = fileName; state.title = fileName;
state.visible = true; state.open = true;
} }
} }
} }
@@ -114,9 +114,9 @@ function fnReload() {
:destroyOnClose="true" :destroyOnClose="true"
:keyboard="false" :keyboard="false"
:mask-closable="false" :mask-closable="false"
:visible="state.visible" :open="state.open"
:title="state.title" :title="state.title"
:body-style="{ padding: '12px', overflow: 'hidden' }" :body-style="{ overflow: 'hidden' }"
:footer="null" :footer="null"
@cancel="onClose" @cancel="onClose"
> >
@@ -132,7 +132,7 @@ function fnReload() {
></TerminalSSHView> ></TerminalSSHView>
<!-- 命令控制属性 --> <!-- 命令控制属性 -->
<a-form name="form" layout="horizontal"> <a-form name="form" layout="horizontal">
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item :label="t('views.logManage.neFile.viewAs')"> <a-form-item :label="t('views.logManage.neFile.viewAs')">
<a-input-group compact> <a-input-group compact>

36
src/views/logManage/neFile/index.vue
View File

@@ -1,9 +1,9 @@
<script setup lang="ts"> <script setup lang="ts">
import { reactive, ref, onMounted, toRaw } from 'vue'; import { reactive, ref, onMounted, toRaw } from 'vue';
import { PageContainer } from 'antdv-pro-layout'; import { PageContainer } from 'antdv-pro-layout';
import { SizeType } from 'ant-design-vue/lib/config-provider'; import { SizeType } from 'ant-design-vue/es/config-provider';
import { ColumnsType } from 'ant-design-vue/lib/table'; import { ColumnsType } from 'ant-design-vue/es/table';
import { Modal, message } from 'ant-design-vue/lib'; import { Modal, message } from 'ant-design-vue/es';
import { parseDateToStr } from '@/utils/date-utils'; import { parseDateToStr } from '@/utils/date-utils';
import { getNeFile, listNeFiles } from '@/api/tool/neFile'; import { getNeFile, listNeFiles } from '@/api/tool/neFile';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants'; import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
@@ -260,7 +260,7 @@ function fnGetList(pageNum?: number) {
/**抽屉状态 */ /**抽屉状态 */
const viewDrawerState = reactive({ const viewDrawerState = reactive({
visible: false, open: false,
/**文件路径 /var/log/amf.log */ /**文件路径 /var/log/amf.log */
filePath: '', filePath: '',
/**网元类型 */ /**网元类型 */
@@ -274,7 +274,7 @@ function fnDrawerOpen(row: Record<string, any>) {
viewDrawerState.filePath = [...nePathArr.value, row.fileName].join('/'); viewDrawerState.filePath = [...nePathArr.value, row.fileName].join('/');
viewDrawerState.neType = neTypeSelect.value[0]; viewDrawerState.neType = neTypeSelect.value[0];
viewDrawerState.neId = neTypeSelect.value[1]; viewDrawerState.neId = neTypeSelect.value[1];
viewDrawerState.visible = !viewDrawerState.visible; viewDrawerState.open = !viewDrawerState.open;
} }
onMounted(() => { onMounted(() => {
@@ -300,14 +300,9 @@ onMounted(() => {
<a-card :bordered="false" :body-style="{ padding: '0px' }"> <a-card :bordered="false" :body-style="{ padding: '0px' }">
<!-- 插槽-卡片左侧侧 --> <!-- 插槽-卡片左侧侧 -->
<template #title> <template #title>
<a-form :model="queryParams" name="queryParams" layout="horizontal"> <a-row :gutter="16" align="middle">
<a-row :gutter="16"> <a-col>
<a-col :lg="8" :md="12" :xs="24"> <span>{{ t('views.logManage.neFile.neType') }}:</span>&nbsp;
<a-form-item
:label="t('views.logManage.neFile.neType')"
name="neType"
style="margin-bottom: 0"
>
<a-cascader <a-cascader
v-model:value="neTypeSelect" v-model:value="neTypeSelect"
:options="neInfoStore.getNeCascaderOptions" :options="neInfoStore.getNeCascaderOptions"
@@ -316,14 +311,10 @@ onMounted(() => {
:placeholder="t('views.logManage.neFile.neTypePlease')" :placeholder="t('views.logManage.neFile.neTypePlease')"
:disabled="downLoading || tableState.loading" :disabled="downLoading || tableState.loading"
/> />
</a-form-item>
</a-col> </a-col>
<a-col :lg="16" :md="18" :xs="24" v-if="nePathArr.length > 0"> <template v-if="nePathArr.length > 0">
<a-form-item <span>{{ t('views.logManage.neFile.nePath') }}:</span>&nbsp;
:label="t('views.logManage.neFile.nePath')" <a-col>
name="configName"
style="margin-bottom: 0"
>
<a-breadcrumb> <a-breadcrumb>
<a-breadcrumb-item <a-breadcrumb-item
v-for="(path, index) in nePathArr" v-for="(path, index) in nePathArr"
@@ -333,10 +324,9 @@ onMounted(() => {
{{ path }} {{ path }}
</a-breadcrumb-item> </a-breadcrumb-item>
</a-breadcrumb> </a-breadcrumb>
</a-form-item>
</a-col> </a-col>
</template>
</a-row> </a-row>
</a-form>
</template> </template>
<!-- 插槽-卡片右侧 --> <!-- 插槽-卡片右侧 -->
@@ -397,7 +387,7 @@ onMounted(() => {
<!-- 文件内容查看抽屉 --> <!-- 文件内容查看抽屉 -->
<ViewDrawer <ViewDrawer
v-model:visible="viewDrawerState.visible" v-model:open="viewDrawerState.open"
:file-path="viewDrawerState.filePath" :file-path="viewDrawerState.filePath"
:ne-type="viewDrawerState.neType" :ne-type="viewDrawerState.neType"
:ne-id="viewDrawerState.neId" :ne-id="viewDrawerState.neId"

40
src/views/login.vue
View File

@@ -1,5 +1,5 @@
<script lang="ts" setup> <script lang="ts" setup>
import { message } from 'ant-design-vue/lib'; import { message } from 'ant-design-vue/es';
import { reactive, onMounted, computed } from 'vue'; import { reactive, onMounted, computed } from 'vue';
import useUserStore from '@/store/modules/user'; import useUserStore from '@/store/modules/user';
import useAppStore from '@/store/modules/app'; import useAppStore from '@/store/modules/app';
@@ -209,7 +209,7 @@ function fnChangeLocale(e: any) {
</a-input-password> </a-input-password>
</a-form-item> </a-form-item>
<a-row :gutter="8" v-if="state.captcha.enabled"> <a-row v-if="state.captcha.enabled">
<a-col :span="16"> <a-col :span="16">
<a-form-item <a-form-item
name="code" name="code"
@@ -247,7 +247,6 @@ function fnChangeLocale(e: any) {
</a-row> </a-row>
<a-row <a-row
:gutter="8"
justify="space-between" justify="space-between"
align="middle" align="middle"
style="margin-bottom: 16px" style="margin-bottom: 16px"
@@ -275,7 +274,6 @@ function fnChangeLocale(e: any) {
</a-button> </a-button>
<a-row <a-row
:gutter="8"
justify="space-between" justify="space-between"
align="middle" align="middle"
style="margin-top: 18px" style="margin-top: 18px"
@@ -315,7 +313,7 @@ function fnChangeLocale(e: any) {
// background: url('./../assets/black_dot.png') 0% 0% / 14px 14px repeat; // background: url('./../assets/black_dot.png') 0% 0% / 14px 14px repeat;
background-image: url(@/assets/background.jpg); background-image: url(@/assets/background_light.jpg);
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; background-size: cover;
background-position: center center; background-position: center center;
@@ -363,6 +361,11 @@ function fnChangeLocale(e: any) {
} }
} }
[data-theme='dark'] .container {
background-image: url(@/assets/background_dark.jpg);
background-color: #141414;
}
.header { .header {
position: fixed; position: fixed;
left: 0; left: 0;
@@ -394,7 +397,7 @@ function fnChangeLocale(e: any) {
} }
.title { .title {
position: relative; position: relative;
top: 6px; top: 12px;
color: rgba(0, 0, 0, 0.85); color: rgba(0, 0, 0, 0.85);
font-weight: 600; font-weight: 600;
font-size: 24px; font-size: 24px;
@@ -402,6 +405,13 @@ function fnChangeLocale(e: any) {
} }
} }
[data-theme='dark'] .header {
background-color: rgb(0 0 0 / 85%);
.title {
color: rgba(255, 255, 255, 0.85);
}
}
.login-card { .login-card {
width: 368px; width: 368px;
min-width: 260px; min-width: 260px;
@@ -420,6 +430,10 @@ function fnChangeLocale(e: any) {
color: #8c8c8c; color: #8c8c8c;
font-size: 16px; font-size: 16px;
} }
[data-theme='dark'] & .desc {
color: #999;
}
} }
@media (max-width: 992px) { @media (max-width: 992px) {
@@ -431,11 +445,12 @@ function fnChangeLocale(e: any) {
.footer { .footer {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
height: 36px; height: 32px;
padding: 8px 16px 0; padding: 0px 16px;
text-align: left; text-align: left;
background-color: rgb(255 255 255 / 85%); background-color: rgba(255, 255, 255, 0.85);
width: 100%; width: 100%;
line-height: 32px;
&-copyright { &-copyright {
font-size: 14px; font-size: 14px;
@@ -443,4 +458,11 @@ function fnChangeLocale(e: any) {
font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif; font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
} }
} }
[data-theme='dark'] .footer {
background-color: rgb(0 0 0 / 85%);
&-copyright {
color: rgba(255, 255, 255, 0.75);
}
}
</style> </style>

4
src/views/mmlManage/mmlSet/index.vue
View File

@@ -1,7 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { reactive, onMounted, toRaw } from 'vue'; import { reactive, onMounted, toRaw } from 'vue';
import { PageContainer } from 'antdv-pro-layout'; import { PageContainer } from 'antdv-pro-layout';
import { Form, message } from 'ant-design-vue/lib'; import { Form, message } from 'ant-design-vue/es';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants'; import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import { getOperationSet, updateOperationSet } from '@/api/mmlManage/mmlSet'; import { getOperationSet, updateOperationSet } from '@/api/mmlManage/mmlSet';
import { regExpIPv4 } from '@/utils/regular-utils'; import { regExpIPv4 } from '@/utils/regular-utils';
@@ -90,7 +90,7 @@ onMounted(() => {
<template> <template>
<PageContainer> <PageContainer>
<a-row :gutter="16"> <a-row>
<a-col :span="8"> <a-col :span="8">
<!-- 接口设置 --> <!-- 接口设置 -->
<a-card <a-card

4
src/views/mmlManage/neOperate/index.vue
View File

@@ -1,7 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { reactive, ref, onMounted, toRaw } from 'vue'; import { reactive, ref, onMounted, toRaw } from 'vue';
import { PageContainer } from 'antdv-pro-layout'; import { PageContainer } from 'antdv-pro-layout';
import { Modal, message } from 'ant-design-vue/lib'; import { Modal, message } from 'ant-design-vue/es';
import CodemirrorEdite from '@/components/CodemirrorEdite/index.vue'; import CodemirrorEdite from '@/components/CodemirrorEdite/index.vue';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants'; import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import useNeInfoStore from '@/store/modules/neinfo'; import useNeInfoStore from '@/store/modules/neinfo';
@@ -9,7 +9,7 @@ import { regExpIPv4, regExpIPv6 } from '@/utils/regular-utils';
import useI18n from '@/hooks/useI18n'; import useI18n from '@/hooks/useI18n';
import { getMMLByNE, sendMMlByNE } from '@/api/mmlManage/neOperate'; import { getMMLByNE, sendMMlByNE } from '@/api/mmlManage/neOperate';
import { uploadFileToNE } from '@/api/tool/file'; import { uploadFileToNE } from '@/api/tool/file';
import { UploadRequestOption } from 'ant-design-vue/lib/vc-upload/interface'; import { UploadRequestOption } from 'ant-design-vue/es/vc-upload/interface';
const neInfoStore = useNeInfoStore(); const neInfoStore = useNeInfoStore();
const { t } = useI18n(); const { t } = useI18n();

4
src/views/mmlManage/omcOperate/index.vue
View File

@@ -1,7 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { reactive, ref, onMounted, toRaw } from 'vue'; import { reactive, ref, onMounted, toRaw } from 'vue';
import { PageContainer } from 'antdv-pro-layout'; import { PageContainer } from 'antdv-pro-layout';
import { Modal, message } from 'ant-design-vue/lib'; import { Modal, message } from 'ant-design-vue/es';
import CodemirrorEdite from '@/components/CodemirrorEdite/index.vue'; import CodemirrorEdite from '@/components/CodemirrorEdite/index.vue';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants'; import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import useNeInfoStore from '@/store/modules/neinfo'; import useNeInfoStore from '@/store/modules/neinfo';
@@ -9,7 +9,7 @@ import { regExpIPv4, regExpIPv6 } from '@/utils/regular-utils';
import useI18n from '@/hooks/useI18n'; import useI18n from '@/hooks/useI18n';
import { getMMLByOMC, sendMMlByOMC } from '@/api/mmlManage/omcOperate'; import { getMMLByOMC, sendMMlByOMC } from '@/api/mmlManage/omcOperate';
import { uploadFileToNE } from '@/api/tool/file'; import { uploadFileToNE } from '@/api/tool/file';
import { UploadRequestOption } from 'ant-design-vue/lib/vc-upload/interface'; import { UploadRequestOption } from 'ant-design-vue/es/vc-upload/interface';
const { t } = useI18n(); const { t } = useI18n();
/**网元参数 */ /**网元参数 */

4
src/views/mmlManage/udmOperate/index.vue
View File

@@ -1,14 +1,14 @@
<script setup lang="ts"> <script setup lang="ts">
import { reactive, ref, onMounted, toRaw } from 'vue'; import { reactive, ref, onMounted, toRaw } from 'vue';
import { PageContainer } from 'antdv-pro-layout'; import { PageContainer } from 'antdv-pro-layout';
import { Modal, message } from 'ant-design-vue/lib'; import { Modal, message } from 'ant-design-vue/es';
import CodemirrorEdite from '@/components/CodemirrorEdite/index.vue'; import CodemirrorEdite from '@/components/CodemirrorEdite/index.vue';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants'; import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import useNeInfoStore from '@/store/modules/neinfo'; import useNeInfoStore from '@/store/modules/neinfo';
import { regExpIPv4, regExpIPv6 } from '@/utils/regular-utils'; import { regExpIPv4, regExpIPv6 } from '@/utils/regular-utils';
import useI18n from '@/hooks/useI18n'; import useI18n from '@/hooks/useI18n';
import { getMMLByUDM, sendMMlByUDM } from '@/api/mmlManage/udmOperate'; import { getMMLByUDM, sendMMlByUDM } from '@/api/mmlManage/udmOperate';
import { UploadRequestOption } from 'ant-design-vue/lib/vc-upload/interface'; import { UploadRequestOption } from 'ant-design-vue/es/vc-upload/interface';
import { uploadFileToNE } from '@/api/tool/file'; import { uploadFileToNE } from '@/api/tool/file';
const { t } = useI18n(); const { t } = useI18n();

6
src/views/monitor/cache/index.vue vendored
View File

@@ -9,8 +9,8 @@ import {
clearCacheSafe, clearCacheSafe,
} from '@/api/monitor/cache'; } from '@/api/monitor/cache';
import { PageContainer } from 'antdv-pro-layout'; import { PageContainer } from 'antdv-pro-layout';
import { ColumnsType } from 'ant-design-vue/lib/table/Table'; import { ColumnsType } from 'ant-design-vue/es/table/Table';
import { message } from 'ant-design-vue/lib'; import { message } from 'ant-design-vue/es';
import { hasPermissions } from '@/plugins/auth-user'; import { hasPermissions } from '@/plugins/auth-user';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants'; import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import useI18n from '@/hooks/useI18n'; import useI18n from '@/hooks/useI18n';
@@ -268,7 +268,7 @@ onMounted(() => {
<template> <template>
<PageContainer> <PageContainer>
<a-row :gutter="20"> <a-row>
<a-col :lg="8" :md="8" :xs="24"> <a-col :lg="8" :md="8" :xs="24">
<a-card <a-card
:title="t('views.monitor.cache.cacheList')" :title="t('views.monitor.cache.cacheList')"

63
src/views/monitor/job/index.vue
View File

@@ -2,10 +2,11 @@
import { useRouter, useRoute } from 'vue-router'; import { useRouter, useRoute } from 'vue-router';
import { reactive, onMounted, toRaw } from 'vue'; import { reactive, onMounted, toRaw } from 'vue';
import { PageContainer } from 'antdv-pro-layout'; import { PageContainer } from 'antdv-pro-layout';
import { message, Modal, Form } from 'ant-design-vue/lib'; import { ProModal } from 'antdv-pro-modal';
import { SizeType } from 'ant-design-vue/lib/config-provider'; import { message, Modal, Form } from 'ant-design-vue/es';
import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface'; import { SizeType } from 'ant-design-vue/es/config-provider';
import { ColumnsType } from 'ant-design-vue/lib/table'; import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
import { ColumnsType } from 'ant-design-vue/es/table';
import { import {
exportJob, exportJob,
listJob, listJob,
@@ -190,9 +191,9 @@ function fnTableSelectedRowKeys(keys: (string | number)[]) {
/**对话框对象信息状态类型 */ /**对话框对象信息状态类型 */
type ModalStateType = { type ModalStateType = {
/**详情框是否显示 */ /**详情框是否显示 */
visibleByView: boolean; openByView: boolean;
/**新增框或修改框是否显示 */ /**新增框或修改框是否显示 */
visibleByEdit: boolean; openByEdit: boolean;
/**标题 */ /**标题 */
title: string; title: string;
/**表单数据 */ /**表单数据 */
@@ -200,13 +201,13 @@ type ModalStateType = {
/**确定按钮 loading */ /**确定按钮 loading */
confirmLoading: boolean; confirmLoading: boolean;
/**cron生成框是否显示 */ /**cron生成框是否显示 */
visibleByCron: boolean; openByCron: boolean;
}; };
/**对话框对象信息状态 */ /**对话框对象信息状态 */
let modalState: ModalStateType = reactive({ let modalState: ModalStateType = reactive({
visibleByView: false, openByView: false,
visibleByEdit: false, openByEdit: false,
title: '任务', title: '任务',
from: { from: {
jobId: undefined, jobId: undefined,
@@ -222,7 +223,7 @@ let modalState: ModalStateType = reactive({
remark: '', remark: '',
}, },
confirmLoading: false, confirmLoading: false,
visibleByCron: false, openByCron: false,
}); });
/**对话框内表单属性和校验规则 */ /**对话框内表单属性和校验规则 */
@@ -273,7 +274,7 @@ function fnModalVisibleByVive(jobId: string | number) {
if (res.code === RESULT_CODE_SUCCESS && res.data) { if (res.code === RESULT_CODE_SUCCESS && res.data) {
modalState.from = Object.assign(modalState.from, res.data); modalState.from = Object.assign(modalState.from, res.data);
modalState.title = t('views.monitor.job.viewJob'); modalState.title = t('views.monitor.job.viewJob');
modalState.visibleByView = true; modalState.openByView = true;
} else { } else {
message.error(t('views.monitor.job.viewInfoErr'), 2); message.error(t('views.monitor.job.viewInfoErr'), 2);
} }
@@ -288,7 +289,7 @@ function fnModalVisibleByEdit(jobId?: string | number) {
if (!jobId) { if (!jobId) {
modalStateFrom.resetFields(); modalStateFrom.resetFields();
modalState.title = t('views.monitor.job.addJob'); modalState.title = t('views.monitor.job.addJob');
modalState.visibleByEdit = true; modalState.openByEdit = true;
} else { } else {
if (modalState.confirmLoading) return; if (modalState.confirmLoading) return;
const hide = message.loading(t('common.loading'), 0); const hide = message.loading(t('common.loading'), 0);
@@ -299,7 +300,7 @@ function fnModalVisibleByEdit(jobId?: string | number) {
if (res.code === RESULT_CODE_SUCCESS && res.data) { if (res.code === RESULT_CODE_SUCCESS && res.data) {
modalState.from = Object.assign(modalState.from, res.data); modalState.from = Object.assign(modalState.from, res.data);
modalState.title = t('views.monitor.job.editJob'); modalState.title = t('views.monitor.job.editJob');
modalState.visibleByEdit = true; modalState.openByEdit = true;
} else { } else {
message.error(t('views.monitor.job.viewInfoErr'), 2); message.error(t('views.monitor.job.viewInfoErr'), 2);
} }
@@ -328,7 +329,7 @@ function fnModalOk() {
key, key,
duration: 2, duration: 2,
}); });
modalState.visibleByEdit = false; modalState.openByEdit = false;
modalStateFrom.resetFields(); modalStateFrom.resetFields();
fnGetList(1); fnGetList(1);
} else { } else {
@@ -353,8 +354,8 @@ function fnModalOk() {
* 进行表达规则校验 * 进行表达规则校验
*/ */
function fnModalCancel() { function fnModalCancel() {
modalState.visibleByEdit = false; modalState.openByEdit = false;
modalState.visibleByView = false; modalState.openByView = false;
modalStateFrom.resetFields(); modalStateFrom.resetFields();
} }
@@ -362,7 +363,7 @@ function fnModalCancel() {
* 对话框弹出cron生成回调 * 对话框弹出cron生成回调
*/ */
function fnModalCron(opt: boolean, cronStr?: string) { function fnModalCron(opt: boolean, cronStr?: string) {
modalState.visibleByCron = opt; modalState.openByCron = opt;
if (cronStr) { if (cronStr) {
modalState.from.cronExpression = cronStr; modalState.from.cronExpression = cronStr;
} }
@@ -651,7 +652,7 @@ onMounted(() => {
<a-card :bordered="false" :body-style="{ padding: '0px' }"> <a-card :bordered="false" :body-style="{ padding: '0px' }">
<!-- 插槽-卡片左侧侧 --> <!-- 插槽-卡片左侧侧 -->
<template #title> <template #title>
<div class="button-container"> <a-space :size="8" align="center">
<a-button <a-button
type="primary" type="primary"
@click.prevent="fnModalVisibleByEdit()" @click.prevent="fnModalVisibleByEdit()"
@@ -695,12 +696,12 @@ onMounted(() => {
<template #icon><SyncOutlined /></template> <template #icon><SyncOutlined /></template>
{{ t('views.monitor.job.resetQueue') }} {{ t('views.monitor.job.resetQueue') }}
</a-button> </a-button>
</div> </a-space>
</template> </template>
<!-- 插槽-卡片右侧 --> <!-- 插槽-卡片右侧 -->
<template #extra> <template #extra>
<div class="button-container"> <a-space :size="8" align="center">
<a-tooltip> <a-tooltip>
<template #title>{{ t('common.searchBarText') }}</template> <template #title>{{ t('common.searchBarText') }}</template>
<a-switch <a-switch
@@ -740,7 +741,7 @@ onMounted(() => {
</template> </template>
</a-dropdown> </a-dropdown>
</a-tooltip> </a-tooltip>
</div> </a-space>
</template> </template>
<!-- 表格列表 --> <!-- 表格列表 -->
@@ -848,12 +849,12 @@ onMounted(() => {
<ProModal <ProModal
:drag="true" :drag="true"
:width="800" :width="800"
:visible="modalState.visibleByView" :open="modalState.openByView"
:title="modalState.title" :title="modalState.title"
@cancel="fnModalCancel" @cancel="fnModalCancel"
> >
<a-form layout="horizontal" :label-col="{ span: 6 }" :label-wrap="true"> <a-form layout="horizontal" :label-col="{ span: 6 }" :label-wrap="true">
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item :label="t('views.monitor.job.jobName')" name="jobName"> <a-form-item :label="t('views.monitor.job.jobName')" name="jobName">
{{ modalState.from.jobName }} {{ modalState.from.jobName }}
@@ -869,7 +870,7 @@ onMounted(() => {
</a-col> </a-col>
</a-row> </a-row>
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.monitor.job.invokeTarget')" :label="t('views.monitor.job.invokeTarget')"
@@ -891,7 +892,7 @@ onMounted(() => {
</a-col> </a-col>
</a-row> </a-row>
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.monitor.job.cronExpression')" :label="t('views.monitor.job.cronExpression')"
@@ -963,7 +964,7 @@ onMounted(() => {
:destroyOnClose="true" :destroyOnClose="true"
:keyboard="false" :keyboard="false"
:mask-closable="false" :mask-closable="false"
:visible="modalState.visibleByEdit" :open="modalState.openByEdit"
:title="modalState.title" :title="modalState.title"
:confirm-loading="modalState.confirmLoading" :confirm-loading="modalState.confirmLoading"
@ok="fnModalOk" @ok="fnModalOk"
@@ -975,7 +976,7 @@ onMounted(() => {
:label-col="{ span: 6 }" :label-col="{ span: 6 }"
:label-wrap="true" :label-wrap="true"
> >
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.monitor.job.jobName')" :label="t('views.monitor.job.jobName')"
@@ -1002,7 +1003,7 @@ onMounted(() => {
</a-col> </a-col>
</a-row> </a-row>
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.monitor.job.jobGroup')" :label="t('views.monitor.job.jobGroup')"
@@ -1047,7 +1048,7 @@ onMounted(() => {
<template #title> <template #title>
<div>{{ t('views.monitor.job.invokeTargetTip') }}</div> <div>{{ t('views.monitor.job.invokeTargetTip') }}</div>
</template> </template>
<InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" /> <InfoCircleOutlined style="opacity: 0.45; color: inherit" />
</a-tooltip> </a-tooltip>
</template> </template>
</a-input> </a-input>
@@ -1073,7 +1074,7 @@ onMounted(() => {
{{ t('views.monitor.job.cronExpressionTip1') }} {{ t('views.monitor.job.cronExpressionTip1') }}
</div> </div>
</template> </template>
<InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" /> <InfoCircleOutlined style="opacity: 0.45; color: inherit" />
</a-tooltip> </a-tooltip>
</template> </template>
<template #addonAfter> <template #addonAfter>
@@ -1121,7 +1122,7 @@ onMounted(() => {
<!-- 生成cron表达式 --> <!-- 生成cron表达式 -->
<CronModal <CronModal
v-model:visible="modalState.visibleByCron" v-model:open="modalState.openByCron"
:cron="modalState.from.cronExpression" :cron="modalState.from.cronExpression"
@ok="fnModalCron(false, $event)" @ok="fnModalCron(false, $event)"
></CronModal> ></CronModal>

33
src/views/monitor/job/log.vue
View File

@@ -2,10 +2,11 @@
import { useRoute, useRouter } from 'vue-router'; import { useRoute, useRouter } from 'vue-router';
import { reactive, ref, onMounted, toRaw } from 'vue'; import { reactive, ref, onMounted, toRaw } from 'vue';
import { PageContainer } from 'antdv-pro-layout'; import { PageContainer } from 'antdv-pro-layout';
import { message, Modal } from 'ant-design-vue/lib'; import { ProModal } from 'antdv-pro-modal';
import { SizeType } from 'ant-design-vue/lib/config-provider'; import { message, Modal } from 'ant-design-vue/es';
import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface'; import { SizeType } from 'ant-design-vue/es/config-provider';
import { ColumnsType } from 'ant-design-vue/lib/table'; import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
import { ColumnsType } from 'ant-design-vue/es/table';
import { import {
exportJobLog, exportJobLog,
listJobLog, listJobLog,
@@ -216,7 +217,7 @@ function fnTableSelectedRowKeys(keys: (string | number)[]) {
/**对话框对象信息状态类型 */ /**对话框对象信息状态类型 */
type ModalStateType = { type ModalStateType = {
/**详情框是否显示 */ /**详情框是否显示 */
visibleByView: boolean; open: boolean;
/**标题 */ /**标题 */
title: string; title: string;
/**表单数据 */ /**表单数据 */
@@ -225,7 +226,7 @@ type ModalStateType = {
/**对话框对象信息状态 */ /**对话框对象信息状态 */
let modalState: ModalStateType = reactive({ let modalState: ModalStateType = reactive({
visibleByView: false, open: false,
title: '任务日志', title: '任务日志',
from: { from: {
jobLogId: undefined, jobLogId: undefined,
@@ -246,14 +247,14 @@ let modalState: ModalStateType = reactive({
function fnModalVisibleByVive(row: Record<string, string>) { function fnModalVisibleByVive(row: Record<string, string>) {
modalState.from = Object.assign(modalState.from, row); modalState.from = Object.assign(modalState.from, row);
modalState.title = t('views.monitor.jobLog.viewLog'); modalState.title = t('views.monitor.jobLog.viewLog');
modalState.visibleByView = true; modalState.open = true;
} }
/** /**
* 对话框弹出关闭执行函数 * 对话框弹出关闭执行函数
*/ */
function fnModalCancel() { function fnModalCancel() {
modalState.visibleByView = false; modalState.open = false;
} }
/** /**
@@ -503,7 +504,7 @@ onMounted(() => {
<a-card :bordered="false" :body-style="{ padding: '0px' }"> <a-card :bordered="false" :body-style="{ padding: '0px' }">
<!-- 插槽-卡片左侧侧 --> <!-- 插槽-卡片左侧侧 -->
<template #title> <template #title>
<div class="button-container"> <a-space :size="8" align="center">
<a-button type="default" @click.prevent="fnClose()"> <a-button type="default" @click.prevent="fnClose()">
<template #icon><CloseOutlined /></template> <template #icon><CloseOutlined /></template>
{{ t('common.close') }} {{ t('common.close') }}
@@ -535,12 +536,12 @@ onMounted(() => {
<template #icon><ExportOutlined /></template> <template #icon><ExportOutlined /></template>
{{ t('common.export') }} {{ t('common.export') }}
</a-button> </a-button>
</div> </a-space>
</template> </template>
<!-- 插槽-卡片右侧 --> <!-- 插槽-卡片右侧 -->
<template #extra> <template #extra>
<div class="button-container"> <a-space :size="8" align="center">
<a-tooltip> <a-tooltip>
<template #title>{{ t('common.searchBarText') }}</template> <template #title>{{ t('common.searchBarText') }}</template>
<a-switch <a-switch
@@ -580,7 +581,7 @@ onMounted(() => {
</template> </template>
</a-dropdown> </a-dropdown>
</a-tooltip> </a-tooltip>
</div> </a-space>
</template> </template>
<!-- 表格列表 --> <!-- 表格列表 -->
@@ -635,12 +636,12 @@ onMounted(() => {
<ProModal <ProModal
:drag="true" :drag="true"
:width="800" :width="800"
:visible="modalState.visibleByView" :open="modalState.open"
:title="modalState.title" :title="modalState.title"
@cancel="fnModalCancel" @cancel="fnModalCancel"
> >
<a-form layout="horizontal" :label-col="{ span: 6 }" :label-wrap="true"> <a-form layout="horizontal" :label-col="{ span: 6 }" :label-wrap="true">
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item :label="t('common.rowId')" name="jobLogId"> <a-form-item :label="t('common.rowId')" name="jobLogId">
{{ modalState.from.jobLogId }} {{ modalState.from.jobLogId }}
@@ -662,7 +663,7 @@ onMounted(() => {
</a-form-item> </a-form-item>
</a-col> </a-col>
</a-row> </a-row>
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.monitor.jobLog.jobName')" :label="t('views.monitor.jobLog.jobName')"
@@ -683,7 +684,7 @@ onMounted(() => {
</a-form-item> </a-form-item>
</a-col> </a-col>
</a-row> </a-row>
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.monitor.jobLog.invokeTarget')" :label="t('views.monitor.jobLog.invokeTarget')"

6
src/views/monitor/monitor/index.vue
View File

@@ -466,7 +466,7 @@ onMounted(() => {
</a-form> </a-form>
</a-card> </a-card>
<a-row :gutter="16"> <a-row>
<a-col :lg="24" :md="24" :xs="24"> <a-col :lg="24" :md="24" :xs="24">
<a-card :bordered="false" :body-style="{ marginBottom: '24px' }"> <a-card :bordered="false" :body-style="{ marginBottom: '24px' }">
<!-- 插槽-卡片左侧侧 --> <!-- 插槽-卡片左侧侧 -->
@@ -496,7 +496,7 @@ onMounted(() => {
</a-card> </a-card>
</a-col> </a-col>
</a-row> </a-row>
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-card :bordered="false" :body-style="{ marginBottom: '24px' }"> <a-card :bordered="false" :body-style="{ marginBottom: '24px' }">
<!-- 插槽-卡片左侧侧 --> <!-- 插槽-卡片左侧侧 -->
@@ -554,7 +554,7 @@ onMounted(() => {
</a-card> </a-card>
</a-col> </a-col>
</a-row> </a-row>
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-card :bordered="false" :body-style="{ marginBottom: '24px' }"> <a-card :bordered="false" :body-style="{ marginBottom: '24px' }">
<!-- 插槽-卡片左侧侧 --> <!-- 插槽-卡片左侧侧 -->

8
src/views/monitor/online/index.vue
View File

@@ -1,12 +1,12 @@
<script setup lang="ts"> <script setup lang="ts">
import { reactive, onMounted } from 'vue'; import { reactive, onMounted } from 'vue';
import { PageContainer } from 'antdv-pro-layout'; import { PageContainer } from 'antdv-pro-layout';
import { message, Modal } from 'ant-design-vue/lib'; import { message, Modal } from 'ant-design-vue/es';
import { forceLogout, listOnline } from '@/api/monitor/online'; import { forceLogout, listOnline } from '@/api/monitor/online';
import { parseDateToStr } from '@/utils/date-utils'; import { parseDateToStr } from '@/utils/date-utils';
import { SizeType } from 'ant-design-vue/lib/config-provider'; import { SizeType } from 'ant-design-vue/es/config-provider';
import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface'; import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
import { ColumnsType } from 'ant-design-vue/lib/table'; import { ColumnsType } from 'ant-design-vue/es/table';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants'; import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import useI18n from '@/hooks/useI18n'; import useI18n from '@/hooks/useI18n';
const { t } = useI18n(); const { t } = useI18n();

2
src/views/monitor/system/info.vue
View File

@@ -1,7 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { reactive, ref, onMounted } from 'vue'; import { reactive, ref, onMounted } from 'vue';
import { PageContainer } from 'antdv-pro-layout'; import { PageContainer } from 'antdv-pro-layout';
import { ColumnsType } from 'ant-design-vue/lib/table'; import { ColumnsType } from 'ant-design-vue/es/table';
import { getSystemInfo } from '@/api/monitor/system'; import { getSystemInfo } from '@/api/monitor/system';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants'; import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import useI18n from '@/hooks/useI18n'; import useI18n from '@/hooks/useI18n';

4
src/views/monitor/topology/index.vue
View File

@@ -4,7 +4,7 @@ import { PageContainer } from 'antdv-pro-layout';
import useI18n from '@/hooks/useI18n'; import useI18n from '@/hooks/useI18n';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants'; import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import { listAllNeInfo, stateNeInfo } from '@/api/ne/neInfo'; import { listAllNeInfo, stateNeInfo } from '@/api/ne/neInfo';
import { message } from 'ant-design-vue/lib'; import { message } from 'ant-design-vue/es';
import { randerGroph, switchLayout } from './graph'; import { randerGroph, switchLayout } from './graph';
import { parseDateToStr } from '@/utils/date-utils'; import { parseDateToStr } from '@/utils/date-utils';
const { t } = useI18n(); const { t } = useI18n();
@@ -61,7 +61,7 @@ function fnGetList(refresh: boolean = false) {
res.data.length > 0 res.data.length > 0
) { ) {
// 根网管 // 根网管
let rootNodeInfo = { neName: "OMC_001" }; let rootNodeInfo = { neName: 'OMC_001' };
const nodes = []; const nodes = [];
const edges = []; const edges = [];
for (const item of res.data) { for (const item of res.data) {

12
src/views/monitor/topologyArchitecture/index.vue
View File

@@ -6,7 +6,7 @@ import {
RESULT_CODE_SUCCESS, RESULT_CODE_SUCCESS,
} from '@/constants/result-constants'; } from '@/constants/result-constants';
import { listAllNeInfo } from '@/api/ne/neInfo'; import { listAllNeInfo } from '@/api/ne/neInfo';
import { message } from 'ant-design-vue/lib'; import { message } from 'ant-design-vue/es';
import { getGraphData } from '@/api/monitor/topology'; import { getGraphData } from '@/api/monitor/topology';
import { parseDateToStr } from '@/utils/date-utils'; import { parseDateToStr } from '@/utils/date-utils';
import { Graph, GraphData, Menu, Tooltip } from '@antv/g6'; import { Graph, GraphData, Menu, Tooltip } from '@antv/g6';
@@ -506,16 +506,20 @@ onBeforeUnmount(() => {
> >
<!-- 插槽-卡片左侧侧 --> <!-- 插槽-卡片左侧侧 -->
<template #title> <template #title>
<div class="button-container" style="margin-bottom: -12px"> <a-space :size="8" align="center">
<span> <span>
{{ t('views.monitor.topologyBuild.graphGroup') }}： {{ t('views.monitor.topologyBuild.graphGroup') }}：
{{ graphState.group }} {{ graphState.group }}
</span> </span>
</div> </a-space>
</template> </template>
<!-- 插槽-卡片右侧 --> <!-- 插槽-卡片右侧 -->
<template #extra> <template #extra>
<a-button type="default" @click.prevent="fnGraphDataLoad(true)"> <a-button
type="default"
size="small"
@click.prevent="fnGraphDataLoad(true)"
>
<template #icon><ReloadOutlined /></template> <template #icon><ReloadOutlined /></template>
{{ t('common.reloadText') }} {{ t('common.reloadText') }}
</a-button> </a-button>

87
src/views/monitor/topologyBuild/components/GraphEditModal.vue
View File

@@ -1,5 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { reactive, watch } from 'vue'; import { reactive, watch } from 'vue';
import { ProModal } from 'antdv-pro-modal';
import useI18n from '@/hooks/useI18n'; import useI18n from '@/hooks/useI18n';
import { import {
graphEvent, graphEvent,
@@ -53,21 +54,21 @@ watch(graphEvent, v => {
edgeState.form.id = '#'; edgeState.form.id = '#';
modalState.title = t('views.monitor.topologyBuild.edgeTitleAdd'); modalState.title = t('views.monitor.topologyBuild.edgeTitleAdd');
modalState.formType = 'edge'; modalState.formType = 'edge';
modalState.visible = true; modalState.open = true;
} }
if (type === 'canvas-create-node') { if (type === 'canvas-create-node') {
nodeState.origin = {}; nodeState.origin = {};
nodeState.form.id = ''; nodeState.form.id = '';
modalState.title = t('views.monitor.topologyBuild.nodeTitleAdd'); modalState.title = t('views.monitor.topologyBuild.nodeTitleAdd');
modalState.formType = 'node'; modalState.formType = 'node';
modalState.visible = true; modalState.open = true;
} }
if (type === 'canvas-create-combo') { if (type === 'canvas-create-combo') {
comboState.origin = {}; comboState.origin = {};
comboState.form.id = ''; comboState.form.id = '';
modalState.title = t('views.monitor.topologyBuild.comboTitleAdd'); modalState.title = t('views.monitor.topologyBuild.comboTitleAdd');
modalState.formType = 'combo'; modalState.formType = 'combo';
modalState.visible = true; modalState.open = true;
} }
// 边 // 边
if (type === 'edge-edit' && item) { if (type === 'edge-edit' && item) {
@@ -76,7 +77,7 @@ watch(graphEvent, v => {
edgeState.form = Object.assign(edgeState.form, edge); edgeState.form = Object.assign(edgeState.form, edge);
modalState.title = t('views.monitor.topologyBuild.edgeTitleEdit'); modalState.title = t('views.monitor.topologyBuild.edgeTitleEdit');
modalState.formType = 'edge'; modalState.formType = 'edge';
modalState.visible = true; modalState.open = true;
} }
// 节点 // 节点
if (type === 'node-edit' && item) { if (type === 'node-edit' && item) {
@@ -85,7 +86,7 @@ watch(graphEvent, v => {
nodeState.form = Object.assign(nodeState.form, node); nodeState.form = Object.assign(nodeState.form, node);
modalState.title = t('views.monitor.topologyBuild.nodeTitleEdit'); modalState.title = t('views.monitor.topologyBuild.nodeTitleEdit');
modalState.formType = 'node'; modalState.formType = 'node';
modalState.visible = true; modalState.open = true;
} }
// 分组 // 分组
if (type === 'combo-edit' && item) { if (type === 'combo-edit' && item) {
@@ -98,14 +99,14 @@ watch(graphEvent, v => {
} }
modalState.title = t('views.monitor.topologyBuild.comboTitleEdit'); modalState.title = t('views.monitor.topologyBuild.comboTitleEdit');
modalState.formType = 'combo'; modalState.formType = 'combo';
modalState.visible = true; modalState.open = true;
} }
}); });
/**对话框对象信息状态类型 */ /**对话框对象信息状态类型 */
type ModalStateType = { type ModalStateType = {
/**对话框是否显示 */ /**对话框是否显示 */
visible: boolean; open: boolean;
/**标题 */ /**标题 */
title: string; title: string;
/**图元素表单类型 */ /**图元素表单类型 */
@@ -116,7 +117,7 @@ type ModalStateType = {
/**对话框对象信息状态 */ /**对话框对象信息状态 */
let modalState: ModalStateType = reactive({ let modalState: ModalStateType = reactive({
visible: false, open: false,
title: '图信息', title: '图信息',
formType: 'edge', formType: 'edge',
confirmLoading: false, confirmLoading: false,
@@ -132,21 +133,21 @@ function fnModalOk() {
// 边编辑确认 // 边编辑确认
if (type === 'edge') { if (type === 'edge') {
handleOkEdge().then(result => { handleOkEdge().then(result => {
modalState.visible = !result; modalState.open = !result;
modalState.confirmLoading = false; modalState.confirmLoading = false;
}); });
} }
// 节点编辑确认 // 节点编辑确认
if (type === 'node') { if (type === 'node') {
handleOkNode().then(result => { handleOkNode().then(result => {
modalState.visible = !result; modalState.open = !result;
modalState.confirmLoading = false; modalState.confirmLoading = false;
}); });
} }
// 分租编辑确认 // 分租编辑确认
if (type === 'combo') { if (type === 'combo') {
handleOkcombo().then(result => { handleOkcombo().then(result => {
modalState.visible = !result; modalState.open = !result;
modalState.confirmLoading = false; modalState.confirmLoading = false;
}); });
} }
@@ -157,7 +158,7 @@ function fnModalOk() {
* 进行表达规则校验 * 进行表达规则校验
*/ */
function fnModalCancel() { function fnModalCancel() {
modalState.visible = false; modalState.open = false;
const type = modalState.formType; const type = modalState.formType;
// 边编辑还原 // 边编辑还原
if (type === 'edge') { if (type === 'edge') {
@@ -179,10 +180,10 @@ function fnModalCancel() {
:drag="true" :drag="true"
:width="800" :width="800"
:destroyOnClose="true" :destroyOnClose="true"
:body-style="{ maxHeight: '650px', 'overflow-y': 'auto' }" :body-style="{ maxHeight: '600px', 'overflow-y': 'auto' }"
:keyboard="false" :keyboard="false"
:mask-closable="false" :mask-closable="false"
:visible="modalState.visible" :open="modalState.open"
:title="modalState.title" :title="modalState.title"
:confirm-loading="modalState.confirmLoading" :confirm-loading="modalState.confirmLoading"
@ok="fnModalOk" @ok="fnModalOk"
@@ -240,7 +241,7 @@ function fnModalCancel() {
</a-form-item> </a-form-item>
<!-- 圆形尺寸 --> <!-- 圆形尺寸 -->
<a-row :gutter="16" v-if="comboState.form.type.startsWith('circle')"> <a-row v-if="comboState.form.type.startsWith('circle')">
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.monitor.topologyBuild.comboFormSize')" :label="t('views.monitor.topologyBuild.comboFormSize')"
@@ -269,7 +270,7 @@ function fnModalCancel() {
</a-row> </a-row>
<!-- 矩形尺寸 --> <!-- 矩形尺寸 -->
<a-row :gutter="16" v-if="comboState.form.type.startsWith('rect')"> <a-row v-if="comboState.form.type.startsWith('rect')">
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.monitor.topologyBuild.comboFormSize')" :label="t('views.monitor.topologyBuild.comboFormSize')"
@@ -308,7 +309,7 @@ function fnModalCancel() {
</a-col> </a-col>
</a-row> </a-row>
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.monitor.topologyBuild.formStyleFill')" :label="t('views.monitor.topologyBuild.formStyleFill')"
@@ -396,7 +397,7 @@ function fnModalCancel() {
</a-input> </a-input>
</a-form-item> </a-form-item>
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.monitor.topologyBuild.formLabelStyleFill')" :label="t('views.monitor.topologyBuild.formLabelStyleFill')"
@@ -424,7 +425,7 @@ function fnModalCancel() {
</a-col> </a-col>
</a-row> </a-row>
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.monitor.topologyBuild.formLabelRefX')" :label="t('views.monitor.topologyBuild.formLabelRefX')"
@@ -457,7 +458,7 @@ function fnModalCancel() {
</a-col> </a-col>
</a-row> </a-row>
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.monitor.topologyBuild.formLabelPosition')" :label="t('views.monitor.topologyBuild.formLabelPosition')"
@@ -525,7 +526,7 @@ function fnModalCancel() {
</a-select> </a-select>
</a-form-item> </a-form-item>
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.monitor.topologyBuild.nodeFormX')" :label="t('views.monitor.topologyBuild.nodeFormX')"
@@ -552,7 +553,7 @@ function fnModalCancel() {
</a-col> </a-col>
</a-row> </a-row>
<a-row :gutter="16"> <a-row>
<a-col <a-col
:lg="12" :lg="12"
:md="12" :md="12"
@@ -653,7 +654,7 @@ function fnModalCancel() {
</a-row> </a-row>
<template v-if="!nodeState.form.type.startsWith('image')"> <template v-if="!nodeState.form.type.startsWith('image')">
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.monitor.topologyBuild.formStyleStroke')" :label="t('views.monitor.topologyBuild.formStyleStroke')"
@@ -728,7 +729,7 @@ function fnModalCancel() {
</a-input> </a-input>
</a-form-item> </a-form-item>
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.monitor.topologyBuild.formLabelStyleFill')" :label="t('views.monitor.topologyBuild.formLabelStyleFill')"
@@ -756,7 +757,7 @@ function fnModalCancel() {
</a-col> </a-col>
</a-row> </a-row>
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.monitor.topologyBuild.formLabelPosition')" :label="t('views.monitor.topologyBuild.formLabelPosition')"
@@ -791,7 +792,7 @@ function fnModalCancel() {
{{ t('views.monitor.topologyBuild.nodeFormTypeImage') }} {{ t('views.monitor.topologyBuild.nodeFormTypeImage') }}
</a-divider> </a-divider>
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.monitor.topologyBuild.nodeFormClipShow')" :label="t('views.monitor.topologyBuild.nodeFormClipShow')"
@@ -835,7 +836,7 @@ function fnModalCancel() {
<!-- 裁剪功能 --> <!-- 裁剪功能 -->
<template v-if="nodeState.form.clipCfg.show"> <template v-if="nodeState.form.clipCfg.show">
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.monitor.topologyBuild.nodeFormClipType')" :label="t('views.monitor.topologyBuild.nodeFormClipType')"
@@ -851,10 +852,7 @@ function fnModalCancel() {
</a-row> </a-row>
<!-- 剪裁圆形 --> <!-- 剪裁圆形 -->
<a-row <a-row v-if="nodeState.form.clipCfg.type.startsWith('circle')">
:gutter="16"
v-if="nodeState.form.clipCfg.type.startsWith('circle')"
>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.monitor.topologyBuild.nodeFormClipTypeCircle')" :label="t('views.monitor.topologyBuild.nodeFormClipTypeCircle')"
@@ -872,10 +870,7 @@ function fnModalCancel() {
</a-row> </a-row>
<!-- 剪裁矩形 --> <!-- 剪裁矩形 -->
<a-row <a-row v-if="nodeState.form.clipCfg.type.startsWith('rect')">
:gutter="16"
v-if="nodeState.form.clipCfg.type.startsWith('rect')"
>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label=" :label="
@@ -911,7 +906,7 @@ function fnModalCancel() {
</a-row> </a-row>
<!-- 剪裁椭圆 --> <!-- 剪裁椭圆 -->
<a-row :gutter="16" v-if="nodeState.form.clipCfg.type === 'ellipse'"> <a-row v-if="nodeState.form.clipCfg.type === 'ellipse'">
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label=" :label="
@@ -947,7 +942,7 @@ function fnModalCancel() {
</a-row> </a-row>
<!-- 裁剪图形坐标 --> <!-- 裁剪图形坐标 -->
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.monitor.topologyBuild.nodeFormClipX')" :label="t('views.monitor.topologyBuild.nodeFormClipX')"
@@ -992,7 +987,7 @@ function fnModalCancel() {
{{ t('views.monitor.topologyBuild.nodeFormIcon') }} {{ t('views.monitor.topologyBuild.nodeFormIcon') }}
</a-divider> </a-divider>
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.monitor.topologyBuild.nodeFormIconShow')" :label="t('views.monitor.topologyBuild.nodeFormIconShow')"
@@ -1016,7 +1011,7 @@ function fnModalCancel() {
</a-col> </a-col>
</a-row> </a-row>
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.monitor.topologyBuild.nodeFormIconWidth')" :label="t('views.monitor.topologyBuild.nodeFormIconWidth')"
@@ -1047,7 +1042,7 @@ function fnModalCancel() {
</a-col> </a-col>
</a-row> </a-row>
<a-row :gutter="16" v-if="nodeState.form.type === 'triangle'"> <a-row v-if="nodeState.form.type === 'triangle'">
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.monitor.topologyBuild.nodeFormIconOffset')" :label="t('views.monitor.topologyBuild.nodeFormIconOffset')"
@@ -1087,7 +1082,7 @@ function fnModalCancel() {
</a-select> </a-select>
</a-form-item> </a-form-item>
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.monitor.topologyBuild.edgeFormSource')" :label="t('views.monitor.topologyBuild.edgeFormSource')"
@@ -1118,7 +1113,7 @@ function fnModalCancel() {
</a-col> </a-col>
</a-row> </a-row>
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.monitor.topologyBuild.formStyleStroke')" :label="t('views.monitor.topologyBuild.formStyleStroke')"
@@ -1146,7 +1141,7 @@ function fnModalCancel() {
</a-col> </a-col>
</a-row> </a-row>
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.monitor.topologyBuild.edgeFormStartArrow')" :label="t('views.monitor.topologyBuild.edgeFormStartArrow')"
@@ -1185,7 +1180,7 @@ function fnModalCancel() {
</a-input> </a-input>
</a-form-item> </a-form-item>
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.monitor.topologyBuild.formLabelStyleFill')" :label="t('views.monitor.topologyBuild.formLabelStyleFill')"
@@ -1213,7 +1208,7 @@ function fnModalCancel() {
</a-col> </a-col>
</a-row> </a-row>
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.monitor.topologyBuild.formLabelRefX')" :label="t('views.monitor.topologyBuild.formLabelRefX')"
@@ -1246,7 +1241,7 @@ function fnModalCancel() {
</a-col> </a-col>
</a-row> </a-row>
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.monitor.topologyBuild.formLabelPosition')" :label="t('views.monitor.topologyBuild.formLabelPosition')"

2
src/views/monitor/topologyBuild/hooks/useCombo.ts
View File

@@ -1,4 +1,4 @@
import { message, Form } from 'ant-design-vue/lib'; import { message, Form } from 'ant-design-vue/es';
import { reactive, toRaw, watch } from 'vue'; import { reactive, toRaw, watch } from 'vue';
import { graphG6, selectSourceTargetOptions } from './useGraph'; import { graphG6, selectSourceTargetOptions } from './useGraph';
import useI18n from '@/hooks/useI18n'; import useI18n from '@/hooks/useI18n';

2
src/views/monitor/topologyBuild/hooks/useEdge.ts
View File

@@ -1,4 +1,4 @@
import { message, Form } from 'ant-design-vue/lib'; import { message, Form } from 'ant-design-vue/es';
import { reactive, watch } from 'vue'; import { reactive, watch } from 'vue';
import useI18n from '@/hooks/useI18n'; import useI18n from '@/hooks/useI18n';
import { graphG6 } from './useGraph'; import { graphG6 } from './useGraph';

2
src/views/monitor/topologyBuild/hooks/useNode.ts
View File

@@ -1,4 +1,4 @@
import { message, Form } from 'ant-design-vue/lib'; import { message, Form } from 'ant-design-vue/es';
import { reactive, watch } from 'vue'; import { reactive, watch } from 'vue';
import { graphG6 } from './useGraph'; import { graphG6 } from './useGraph';
import useI18n from '@/hooks/useI18n'; import useI18n from '@/hooks/useI18n';

48
src/views/monitor/topologyBuild/index.vue
View File

@@ -1,6 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { reactive, onMounted, ref, toRaw } from 'vue'; import { reactive, onMounted, ref, toRaw } from 'vue';
import { PageContainer } from 'antdv-pro-layout'; import { PageContainer } from 'antdv-pro-layout';
import { ProModal } from 'antdv-pro-modal';
import useI18n from '@/hooks/useI18n'; import useI18n from '@/hooks/useI18n';
import GraphEditModal from './components/GraphEditModal.vue'; import GraphEditModal from './components/GraphEditModal.vue';
import useGraph, { graphG6 } from './/hooks/useGraph'; import useGraph, { graphG6 } from './/hooks/useGraph';
@@ -11,7 +12,7 @@ import {
saveGraphData, saveGraphData,
} from '@/api/monitor/topology'; } from '@/api/monitor/topology';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants'; import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import { Form, Modal, message } from 'ant-design-vue/lib'; import { Form, Modal, message } from 'ant-design-vue/es';
const { t } = useI18n(); const { t } = useI18n();
const { graphMode, graphModeOptions, handleRanderGraph, handleChangeMode } = const { graphMode, graphModeOptions, handleRanderGraph, handleChangeMode } =
useGraph(); useGraph();
@@ -95,7 +96,7 @@ function fnGraphDataLoad(reload: boolean = false) {
/**对话框对象信息状态类型 */ /**对话框对象信息状态类型 */
type ModalStateType = { type ModalStateType = {
/**框是否显示 */ /**框是否显示 */
visible: boolean; open: boolean;
/**标题 */ /**标题 */
title: string; title: string;
/**表单数据 */ /**表单数据 */
@@ -108,7 +109,7 @@ type ModalStateType = {
/**对话框对象信息状态 */ /**对话框对象信息状态 */
let modalState: ModalStateType = reactive({ let modalState: ModalStateType = reactive({
visible: false, open: false,
title: '图组', title: '图组',
form: { form: {
group: '', group: '',
@@ -180,7 +181,7 @@ function fnModalOk() {
*/ */
function fnModalCancel() { function fnModalCancel() {
modalState.type = 'save'; modalState.type = 'save';
modalState.visible = false; modalState.open = false;
modalStateFrom.resetFields(); modalStateFrom.resetFields();
} }
@@ -188,8 +189,8 @@ function fnModalCancel() {
function fnGraphDataSave() { function fnGraphDataSave() {
modalState.form.group = graphState.group; modalState.form.group = graphState.group;
modalState.type = 'save'; modalState.type = 'save';
(modalState.title = t('views.monitor.topologyBuild.saveTtite')), modalState.title = t('views.monitor.topologyBuild.saveTtite');
(modalState.visible = true); modalState.open = true;
} }
/**图组数据删除 */ /**图组数据删除 */
@@ -244,57 +245,44 @@ onMounted(() => {
<template> <template>
<PageContainer> <PageContainer>
<a-card <a-card :bordered="false" :body-style="{ marginBottom: '24px' }">
:bordered="false"
:body-style="{ marginBottom: '24px', paddingBottom: 0 }"
>
<!-- 表格搜索栏 --> <!-- 表格搜索栏 -->
<a-form :model="graphState" name="graphState" layout="horizontal">
<a-row :gutter="16"> <a-row :gutter="16">
<a-col :lg="4" :md="12" :xs="24"> <a-col>
<a-form-item <span>{{ t('views.monitor.topologyBuild.graphMode') }}:</span>&nbsp;
:label="t('views.monitor.topologyBuild.graphMode')"
name="graphMode"
>
<a-select <a-select
:value="graphMode" :value="graphMode"
:options="graphModeOptions" :options="graphModeOptions"
@change="handleChangeMode" @change="handleChangeMode"
> >
</a-select> </a-select>
</a-form-item>
</a-col> </a-col>
<a-col :lg="6" :md="12" :xs="24"> <a-col>
<a-form-item <span>{{ t('views.monitor.topologyBuild.graphGroup') }}:</span>&nbsp;
:label="t('views.monitor.topologyBuild.graphGroup')"
name="group "
>
<a-select <a-select
v-model:value="graphState.group" v-model:value="graphState.group"
:options="graphState.groupOptions" :options="graphState.groupOptions"
:placeholder="t('common.selectPlease')" :placeholder="t('common.selectPlease')"
@change="fnGraphGroupChange" @change="fnGraphGroupChange"
/> />
</a-form-item>
</a-col> </a-col>
</a-row> </a-row>
</a-form>
</a-card> </a-card>
<a-card :bordered="false" :body-style="{ padding: '0px' }"> <a-card :bordered="false" :body-style="{ padding: '0px' }">
<!-- 插槽-卡片左侧侧 --> <!-- 插槽-卡片左侧侧 -->
<template #title> <template #title>
<div class="button-container" style="margin-bottom: -12px"> <a-space :size="8" align="center">
<span> <span>
{{ t('views.monitor.topologyBuild.graphGroup') }}： {{ t('views.monitor.topologyBuild.graphGroup') }}：
{{ graphState.group }} {{ graphState.group }}
</span> </span>
</div> </a-space>
</template> </template>
<!-- 插槽-卡片右侧 --> <!-- 插槽-卡片右侧 -->
<template #extra> <template #extra>
<div class="button-container" style="margin-bottom: -12px"> <a-space :size="8" align="center">
<template v-if="graphMode === 'edit'"> <template v-if="graphMode === 'edit'">
<a-button type="primary" size="small" @click="fnGraphDataSave"> <a-button type="primary" size="small" @click="fnGraphDataSave">
<template #icon> <template #icon>
@@ -315,7 +303,7 @@ onMounted(() => {
{{ t('views.monitor.topologyBuild.graphDelete') }} {{ t('views.monitor.topologyBuild.graphDelete') }}
</a-button> </a-button>
</template> </template>
</div> </a-space>
</template> </template>
<div ref="graphG6Dom" class="chart"></div> <div ref="graphG6Dom" class="chart"></div>
@@ -329,7 +317,7 @@ onMounted(() => {
:drag="true" :drag="true"
:keyboard="false" :keyboard="false"
:mask-closable="false" :mask-closable="false"
:visible="modalState.visible" :open="modalState.open"
:title="modalState.title" :title="modalState.title"
:confirm-loading="modalState.confirmLoading" :confirm-loading="modalState.confirmLoading"
@ok="fnModalOk" @ok="fnModalOk"
@@ -341,7 +329,7 @@ onMounted(() => {
:label-col="{ span: 6 }" :label-col="{ span: 6 }"
:labelWrap="true" :labelWrap="true"
> >
<a-row :gutter="16"> <a-row>
<a-col :lg="24" :md="24" :xs="24"> <a-col :lg="24" :md="24" :xs="24">
<a-form-item <a-form-item
:label="t('views.monitor.topologyBuild.graphGroup')" :label="t('views.monitor.topologyBuild.graphGroup')"

9
src/views/ne/neConfig/hooks/useConfigArray.ts
View File

@@ -4,9 +4,8 @@ import {
editNeConfigData, editNeConfigData,
} from '@/api/ne/neConfig'; } from '@/api/ne/neConfig';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants'; import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import { Modal } from 'ant-design-vue/lib'; import { Modal,message } from 'ant-design-vue/es';
import { SizeType } from 'ant-design-vue/lib/config-provider'; import { SizeType } from 'ant-design-vue/es/config-provider';
import message from 'ant-design-vue/lib/message';
import { reactive, watch } from 'vue'; import { reactive, watch } from 'vue';
/** /**
@@ -88,7 +87,7 @@ export default function useConfigArray({
modalState.title = `${treeState.selectNode.paramDisplay} ${from.title}`; modalState.title = `${treeState.selectNode.paramDisplay} ${from.title}`;
modalState.key = from.key; modalState.key = from.key;
modalState.data = from.record.filter((v: any) => !Array.isArray(v.array)); modalState.data = from.record.filter((v: any) => !Array.isArray(v.array));
modalState.visible = true; modalState.open = true;
// 关闭嵌套 // 关闭嵌套
arrayState.arrayChildExpandKeys = []; arrayState.arrayChildExpandKeys = [];
@@ -233,7 +232,7 @@ export default function useConfigArray({
modalState.title = `${treeState.selectNode.paramDisplay} ${from.title}`; modalState.title = `${treeState.selectNode.paramDisplay} ${from.title}`;
modalState.key = from.key; modalState.key = from.key;
modalState.data = from.record.filter((v: any) => !Array.isArray(v.array)); modalState.data = from.record.filter((v: any) => !Array.isArray(v.array));
modalState.visible = true; modalState.open = true;
} }
/**多列表新增单行确认 */ /**多列表新增单行确认 */

9
src/views/ne/neConfig/hooks/useConfigArrayChild.ts
View File

@@ -4,9 +4,8 @@ import {
delNeConfigData, delNeConfigData,
} from '@/api/ne/neConfig'; } from '@/api/ne/neConfig';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants'; import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import { Modal } from 'ant-design-vue/lib'; import { Modal, message } from 'ant-design-vue/es';
import { SizeType } from 'ant-design-vue/lib/config-provider'; import { SizeType } from 'ant-design-vue/es/config-provider';
import message from 'ant-design-vue/lib/message';
import { nextTick, reactive } from 'vue'; import { nextTick, reactive } from 'vue';
/** /**
@@ -174,7 +173,7 @@ export default function useConfigArrayChild({
modalState.title = `${arrayChildState.title} ${from.title}`; modalState.title = `${arrayChildState.title} ${from.title}`;
modalState.key = from.key; modalState.key = from.key;
modalState.data = from.record.filter((v: any) => !Array.isArray(v.array)); modalState.data = from.record.filter((v: any) => !Array.isArray(v.array));
modalState.visible = true; modalState.open = true;
} }
/**多列表嵌套行编辑确认 */ /**多列表嵌套行编辑确认 */
@@ -285,7 +284,7 @@ export default function useConfigArrayChild({
modalState.title = `${arrayChildState.title} ${from.title}`; modalState.title = `${arrayChildState.title} ${from.title}`;
modalState.key = from.key; modalState.key = from.key;
modalState.data = from.record.filter((v: any) => !Array.isArray(v.array)); modalState.data = from.record.filter((v: any) => !Array.isArray(v.array));
modalState.visible = true; modalState.open = true;
} }
/**多列表新增单行确认 */ /**多列表新增单行确认 */

4
src/views/ne/neConfig/hooks/useConfigList.ts
View File

@@ -1,7 +1,7 @@
import { editNeConfigData } from '@/api/ne/neConfig'; import { editNeConfigData } from '@/api/ne/neConfig';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants'; import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import { SizeType } from 'ant-design-vue/lib/config-provider'; import { SizeType } from 'ant-design-vue/es/config-provider';
import message from 'ant-design-vue/lib/message'; import { message } from 'ant-design-vue/es';
import { reactive, toRaw } from 'vue'; import { reactive, toRaw } from 'vue';
/** /**

19
src/views/ne/neConfig/index.vue
View File

@@ -1,8 +1,9 @@
<script setup lang="ts"> <script setup lang="ts">
import { reactive, ref, onMounted, toRaw, watch } from 'vue'; import { reactive, ref, onMounted, toRaw, watch } from 'vue';
import { PageContainer } from 'antdv-pro-layout'; import { PageContainer } from 'antdv-pro-layout';
import { message } from 'ant-design-vue/lib'; import { ProModal } from 'antdv-pro-modal';
import { DataNode } from 'ant-design-vue/lib/tree'; import { message } from 'ant-design-vue/es';
import { DataNode } from 'ant-design-vue/es/tree';
import useI18n from '@/hooks/useI18n'; import useI18n from '@/hooks/useI18n';
import TableColumnsDnd from '@/components/TableColumnsDnd/index.vue'; import TableColumnsDnd from '@/components/TableColumnsDnd/index.vue';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants'; import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
@@ -250,7 +251,7 @@ function fnGetNeConfig() {
/**对话框对象信息状态类型 */ /**对话框对象信息状态类型 */
type ModalStateType = { type ModalStateType = {
/**添加框是否显示 */ /**添加框是否显示 */
visible: boolean; open: boolean;
/**标题 */ /**标题 */
title: string; title: string;
/**表单数据 */ /**表单数据 */
@@ -267,7 +268,7 @@ type ModalStateType = {
/**对话框对象信息状态 */ /**对话框对象信息状态 */
let modalState: ModalStateType = reactive({ let modalState: ModalStateType = reactive({
visible: false, open: false,
title: 'Item', title: 'Item',
from: {}, from: {},
confirmLoading: false, confirmLoading: false,
@@ -301,7 +302,7 @@ function fnModalOk() {
* 进行表达规则校验 * 进行表达规则校验
*/ */
function fnModalCancel() { function fnModalCancel() {
modalState.visible = false; modalState.open = false;
modalState.from = {}; modalState.from = {};
modalState.type = 'arrayAdd'; modalState.type = 'arrayAdd';
modalState.key = ''; modalState.key = '';
@@ -310,7 +311,7 @@ function fnModalCancel() {
// 监听新增编辑弹窗 // 监听新增编辑弹窗
watch( watch(
() => modalState.visible, () => modalState.open,
val => { val => {
// SMF需要选择配置的UPF id // SMF需要选择配置的UPF id
if (val && neTypeSelect.value[0] === 'SMF') { if (val && neTypeSelect.value[0] === 'SMF') {
@@ -441,7 +442,7 @@ onMounted(() => {
<a-card <a-card
size="small" size="small"
:bordered="false" :bordered="false"
:body-style="{ maxHeight: '650px', 'overflow-y': 'auto' }" :body-style="{ maxHeight: '600px', 'overflow-y': 'auto' }"
:loading="treeState.selectLoading" :loading="treeState.selectLoading"
> >
<template #title> <template #title>
@@ -824,10 +825,10 @@ onMounted(() => {
:drag="true" :drag="true"
:width="800" :width="800"
:destroyOnClose="true" :destroyOnClose="true"
:body-style="{ maxHeight: '650px', 'overflow-y': 'auto' }" :body-style="{ maxHeight: '600px', 'overflow-y': 'auto' }"
:keyboard="false" :keyboard="false"
:mask-closable="false" :mask-closable="false"
:visible="modalState.visible" :open="modalState.open"
:title="modalState.title" :title="modalState.title"
:confirm-loading="modalState.confirmLoading" :confirm-loading="modalState.confirmLoading"
@ok="fnModalOk" @ok="fnModalOk"

19
src/views/ne/neConfigBackup/index.vue
View File

@@ -1,9 +1,10 @@
<script setup lang="ts"> <script setup lang="ts">
import { reactive, ref, onMounted, toRaw } from 'vue'; import { reactive, ref, onMounted, toRaw } from 'vue';
import { PageContainer } from 'antdv-pro-layout'; import { PageContainer } from 'antdv-pro-layout';
import { Form, Modal, TableColumnsType, message } from 'ant-design-vue/lib'; import { ProModal } from 'antdv-pro-modal';
import { SizeType } from 'ant-design-vue/lib/config-provider'; import { Form, Modal, TableColumnsType, message } from 'ant-design-vue/es';
import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface'; import { SizeType } from 'ant-design-vue/es/config-provider';
import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
import useNeInfoStore from '@/store/modules/neinfo'; import useNeInfoStore from '@/store/modules/neinfo';
import useI18n from '@/hooks/useI18n'; import useI18n from '@/hooks/useI18n';
import useDictStore from '@/store/modules/dict'; import useDictStore from '@/store/modules/dict';
@@ -267,7 +268,7 @@ function fnRecordDelete(id: string) {
/**对话框对象信息状态类型 */ /**对话框对象信息状态类型 */
type ModalStateType = { type ModalStateType = {
/**新增框或修改框是否显示 */ /**新增框或修改框是否显示 */
visibleByEdit: boolean; openByEdit: boolean;
/**标题 */ /**标题 */
title: string; title: string;
/**表单数据 */ /**表单数据 */
@@ -278,7 +279,7 @@ type ModalStateType = {
/**对话框对象信息状态 */ /**对话框对象信息状态 */
let modalState: ModalStateType = reactive({ let modalState: ModalStateType = reactive({
visibleByEdit: false, openByEdit: false,
title: '备份记录', title: '备份记录',
from: { from: {
id: undefined, id: undefined,
@@ -298,7 +299,7 @@ function fnModalVisibleByEdit(row: Record<string, any>) {
modalState.from.name = row.name; modalState.from.name = row.name;
modalState.from.remark = row.remark; modalState.from.remark = row.remark;
modalState.title = t('views.ne.neConfigBackup.title', { txt: row.id }); modalState.title = t('views.ne.neConfigBackup.title', { txt: row.id });
modalState.visibleByEdit = true; modalState.openByEdit = true;
} }
/**对话框内表单属性和校验规则 */ /**对话框内表单属性和校验规则 */
@@ -332,7 +333,7 @@ function fnModalOk() {
content: t('common.msgSuccess', { msg: modalState.title }), content: t('common.msgSuccess', { msg: modalState.title }),
duration: 3, duration: 3,
}); });
modalState.visibleByEdit = false; modalState.openByEdit = false;
modalStateFrom.resetFields(); modalStateFrom.resetFields();
fnGetList(); fnGetList();
} else { } else {
@@ -358,7 +359,7 @@ function fnModalOk() {
* 进行表达规则校验 * 进行表达规则校验
*/ */
function fnModalCancel() { function fnModalCancel() {
modalState.visibleByEdit = false; modalState.openByEdit = false;
modalStateFrom.resetFields(); modalStateFrom.resetFields();
} }
@@ -557,7 +558,7 @@ onMounted(() => {
:destroyOnClose="true" :destroyOnClose="true"
:keyboard="false" :keyboard="false"
:mask-closable="false" :mask-closable="false"
:visible="modalState.visibleByEdit" :open="modalState.openByEdit"
:title="modalState.title" :title="modalState.title"
:confirm-loading="modalState.confirmLoading" :confirm-loading="modalState.confirmLoading"
@ok="fnModalOk" @ok="fnModalOk"

27
src/views/ne/neHost/index.vue
View File

@@ -1,10 +1,11 @@
<script setup lang="ts"> <script setup lang="ts">
import { reactive, onMounted, toRaw } from 'vue'; import { reactive, onMounted, toRaw } from 'vue';
import { PageContainer } from 'antdv-pro-layout'; import { PageContainer } from 'antdv-pro-layout';
import { SizeType } from 'ant-design-vue/lib/config-provider'; import { ProModal } from 'antdv-pro-modal';
import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface'; import { SizeType } from 'ant-design-vue/es/config-provider';
import { ColumnsType } from 'ant-design-vue/lib/table'; import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
import { Form, Modal, message } from 'ant-design-vue/lib'; import { ColumnsType } from 'ant-design-vue/es/table';
import { Form, Modal, message } from 'ant-design-vue/es';
import { parseDateToStr } from '@/utils/date-utils'; import { parseDateToStr } from '@/utils/date-utils';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants'; import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import { import {
@@ -211,7 +212,7 @@ function fnGetList(pageNum?: number) {
/**对话框对象信息状态类型 */ /**对话框对象信息状态类型 */
type ModalStateType = { type ModalStateType = {
/**新增框或修改框是否显示 */ /**新增框或修改框是否显示 */
visibleByEdit: boolean; openByEdit: boolean;
/**标题 */ /**标题 */
title: string; title: string;
/**表单数据 */ /**表单数据 */
@@ -222,7 +223,7 @@ type ModalStateType = {
/**对话框对象信息状态 */ /**对话框对象信息状态 */
let modalState: ModalStateType = reactive({ let modalState: ModalStateType = reactive({
visibleByEdit: false, openByEdit: false,
title: '信息', title: '信息',
from: { from: {
hostId: undefined, hostId: undefined,
@@ -302,7 +303,7 @@ function fnModalVisibleByEdit(roleId?: string | number) {
if (!roleId) { if (!roleId) {
modalStateFrom.resetFields(); modalStateFrom.resetFields();
modalState.title = t('views.ne.neHost.addTitle'); modalState.title = t('views.ne.neHost.addTitle');
modalState.visibleByEdit = true; modalState.openByEdit = true;
} else { } else {
if (modalState.confirmLoading) return; if (modalState.confirmLoading) return;
const hide = message.loading(t('common.loading'), 0); const hide = message.loading(t('common.loading'), 0);
@@ -314,7 +315,7 @@ function fnModalVisibleByEdit(roleId?: string | number) {
if (res.code === RESULT_CODE_SUCCESS && res.data) { if (res.code === RESULT_CODE_SUCCESS && res.data) {
modalState.from = Object.assign(modalState.from, res.data); modalState.from = Object.assign(modalState.from, res.data);
modalState.title = t('views.ne.neHost.editTitle'); modalState.title = t('views.ne.neHost.editTitle');
modalState.visibleByEdit = true; modalState.openByEdit = true;
} else { } else {
message.error(t('common.getInfoFail'), 2); message.error(t('common.getInfoFail'), 2);
} }
@@ -372,7 +373,7 @@ function fnModalOk() {
* 进行表达规则校验 * 进行表达规则校验
*/ */
function fnModalCancel() { function fnModalCancel() {
modalState.visibleByEdit = false; modalState.openByEdit = false;
modalStateFrom.resetFields(); modalStateFrom.resetFields();
} }
@@ -632,7 +633,7 @@ onMounted(() => {
:destroyOnClose="true" :destroyOnClose="true"
:keyboard="false" :keyboard="false"
:mask-closable="false" :mask-closable="false"
:visible="modalState.visibleByEdit" :open="modalState.openByEdit"
:title="modalState.title" :title="modalState.title"
:confirm-loading="modalState.confirmLoading" :confirm-loading="modalState.confirmLoading"
@ok="fnModalOk" @ok="fnModalOk"
@@ -644,7 +645,7 @@ onMounted(() => {
:label-col="{ span: 6 }" :label-col="{ span: 6 }"
:label-wrap="true" :label-wrap="true"
> >
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.ne.neHost.hostType')" :label="t('views.ne.neHost.hostType')"
@@ -686,7 +687,7 @@ onMounted(() => {
</a-input> </a-input>
</a-form-item> </a-form-item>
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.ne.neHost.addr')" :label="t('views.ne.neHost.addr')"
@@ -720,7 +721,7 @@ onMounted(() => {
</a-col> </a-col>
</a-row> </a-row>
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.ne.neHost.user')" :label="t('views.ne.neHost.user')"

23
src/views/ne/neHostCommand/index.vue
View File

@@ -1,10 +1,11 @@
<script setup lang="ts"> <script setup lang="ts">
import { reactive, onMounted, toRaw } from 'vue'; import { reactive, onMounted, toRaw } from 'vue';
import { PageContainer } from 'antdv-pro-layout'; import { PageContainer } from 'antdv-pro-layout';
import { SizeType } from 'ant-design-vue/lib/config-provider'; import { ProModal } from 'antdv-pro-modal';
import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface'; import { SizeType } from 'ant-design-vue/es/config-provider';
import { ColumnsType } from 'ant-design-vue/lib/table'; import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
import { Form, Modal, message } from 'ant-design-vue/lib'; import { ColumnsType } from 'ant-design-vue/es/table';
import { Form, Modal, message } from 'ant-design-vue/es';
import { parseDateToStr } from '@/utils/date-utils'; import { parseDateToStr } from '@/utils/date-utils';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants'; import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import { import {
@@ -179,7 +180,7 @@ function fnGetList(pageNum?: number) {
/**对话框对象信息状态类型 */ /**对话框对象信息状态类型 */
type ModalStateType = { type ModalStateType = {
/**新增框或修改框是否显示 */ /**新增框或修改框是否显示 */
visibleByEdit: boolean; openByEdit: boolean;
/**标题 */ /**标题 */
title: string; title: string;
/**表单数据 */ /**表单数据 */
@@ -190,7 +191,7 @@ type ModalStateType = {
/**对话框对象信息状态 */ /**对话框对象信息状态 */
let modalState: ModalStateType = reactive({ let modalState: ModalStateType = reactive({
visibleByEdit: false, openByEdit: false,
title: '信息', title: '信息',
from: { from: {
cmdId: undefined, cmdId: undefined,
@@ -234,7 +235,7 @@ function fnModalVisibleByEdit(roleId?: string | number) {
if (!roleId) { if (!roleId) {
modalStateFrom.resetFields(); modalStateFrom.resetFields();
modalState.title = t('views.ne.neHostCmd.addTitle'); modalState.title = t('views.ne.neHostCmd.addTitle');
modalState.visibleByEdit = true; modalState.openByEdit = true;
} else { } else {
if (modalState.confirmLoading) return; if (modalState.confirmLoading) return;
const hide = message.loading(t('common.loading'), 0); const hide = message.loading(t('common.loading'), 0);
@@ -246,7 +247,7 @@ function fnModalVisibleByEdit(roleId?: string | number) {
if (res.code === RESULT_CODE_SUCCESS && res.data) { if (res.code === RESULT_CODE_SUCCESS && res.data) {
modalState.from = Object.assign(modalState.from, res.data); modalState.from = Object.assign(modalState.from, res.data);
modalState.title = t('views.ne.neHostCmd.editTitle'); modalState.title = t('views.ne.neHostCmd.editTitle');
modalState.visibleByEdit = true; modalState.openByEdit = true;
} else { } else {
message.error(t('common.getInfoFail'), 2); message.error(t('common.getInfoFail'), 2);
} }
@@ -297,7 +298,7 @@ function fnModalOk() {
* 进行表达规则校验 * 进行表达规则校验
*/ */
function fnModalCancel() { function fnModalCancel() {
modalState.visibleByEdit = false; modalState.openByEdit = false;
modalStateFrom.resetFields(); modalStateFrom.resetFields();
} }
@@ -503,7 +504,7 @@ onMounted(() => {
:destroyOnClose="true" :destroyOnClose="true"
:keyboard="false" :keyboard="false"
:mask-closable="false" :mask-closable="false"
:visible="modalState.visibleByEdit" :open="modalState.openByEdit"
:title="modalState.title" :title="modalState.title"
:confirm-loading="modalState.confirmLoading" :confirm-loading="modalState.confirmLoading"
@ok="fnModalOk" @ok="fnModalOk"
@@ -515,7 +516,7 @@ onMounted(() => {
:label-col="{ span: 6 }" :label-col="{ span: 6 }"
:label-wrap="true" :label-wrap="true"
> >
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.ne.neHostCmd.cmdType')" :label="t('views.ne.neHostCmd.cmdType')"

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

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

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

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

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

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

2
src/views/ne/neInfo/hooks/useNeOptions.ts
View File

@@ -1,5 +1,5 @@
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants'; import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import { Modal, message } from 'ant-design-vue/lib'; import { Modal, message } from 'ant-design-vue/es';
import useI18n from '@/hooks/useI18n'; import useI18n from '@/hooks/useI18n';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import { updateNeConfigReload } from '@/api/configManage/configParam'; import { updateNeConfigReload } from '@/api/configManage/configParam';

40
src/views/ne/neInfo/index.vue
View File

@@ -1,10 +1,10 @@
<script setup lang="ts"> <script setup lang="ts">
import { reactive, onMounted, toRaw, defineAsyncComponent, ref } from 'vue'; import { reactive, onMounted, toRaw, defineAsyncComponent, ref } from 'vue';
import { PageContainer } from 'antdv-pro-layout'; import { PageContainer } from 'antdv-pro-layout';
import { message, Modal } from 'ant-design-vue/lib'; import { message, Modal } from 'ant-design-vue/es';
import { SizeType } from 'ant-design-vue/lib/config-provider'; import { SizeType } from 'ant-design-vue/es/config-provider';
import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface'; import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
import { ColumnsType } from 'ant-design-vue/lib/table'; import { ColumnsType } from 'ant-design-vue/es/table';
import useI18n from '@/hooks/useI18n'; import useI18n from '@/hooks/useI18n';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants'; import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import useNeInfoStore from '@/store/modules/neinfo'; import useNeInfoStore from '@/store/modules/neinfo';
@@ -177,11 +177,11 @@ function fnTableSelectedRowKeys(keys: (string | number)[]) {
/**对话框对象信息状态类型 */ /**对话框对象信息状态类型 */
type ModalStateType = { type ModalStateType = {
/**配置备份框是否显示 */ /**配置备份框是否显示 */
visibleByBackConf: boolean; openByBackConf: boolean;
/**OAM文件配置框是否显示 */ /**OAM文件配置框是否显示 */
visibleByOAM: boolean; openByOAM: boolean;
/**新增框或修改框是否显示 */ /**新增框或修改框是否显示 */
visibleByEdit: boolean; openByEdit: boolean;
/**新增框或修改框ID */ /**新增框或修改框ID */
editId: string; editId: string;
/**OAM框网元类型ID */ /**OAM框网元类型ID */
@@ -193,9 +193,9 @@ type ModalStateType = {
/**对话框对象信息状态 */ /**对话框对象信息状态 */
let modalState: ModalStateType = reactive({ let modalState: ModalStateType = reactive({
visibleByBackConf: false, openByBackConf: false,
visibleByOAM: false, openByOAM: false,
visibleByEdit: false, openByEdit: false,
editId: '', editId: '',
neId: '', neId: '',
neType: '', neType: '',
@@ -212,7 +212,7 @@ function fnModalVisibleByEdit(row?: Record<string, any>) {
} else { } else {
modalState.editId = row.id; modalState.editId = row.id;
} }
modalState.visibleByEdit = !modalState.visibleByEdit; modalState.openByEdit = !modalState.openByEdit;
} }
/** /**
@@ -256,9 +256,9 @@ function fnModalEditOk(from: Record<string, any>) {
*/ */
function fnModalEditCancel() { function fnModalEditCancel() {
modalState.editId = ''; modalState.editId = '';
modalState.visibleByEdit = false; modalState.openByEdit = false;
modalState.visibleByOAM = false; modalState.openByOAM = false;
modalState.visibleByBackConf = false; modalState.openByBackConf = false;
} }
/** /**
@@ -334,7 +334,7 @@ function fnRecordMore(type: string | number, row: Record<string, any>) {
case 'oam': case 'oam':
modalState.neId = row.neId; modalState.neId = row.neId;
modalState.neType = row.neType; modalState.neType = row.neType;
modalState.visibleByOAM = !modalState.visibleByOAM; modalState.openByOAM = !modalState.openByOAM;
break; break;
case 'backConfExport': case 'backConfExport':
backConf.value.exportConf(row.neType, row.neId); backConf.value.exportConf(row.neType, row.neId);
@@ -342,7 +342,7 @@ function fnRecordMore(type: string | number, row: Record<string, any>) {
case 'backConfImport': case 'backConfImport':
modalState.neId = row.neId; modalState.neId = row.neId;
modalState.neType = row.neType; modalState.neType = row.neType;
modalState.visibleByBackConf = !modalState.visibleByBackConf; modalState.openByBackConf = !modalState.openByBackConf;
break; break;
default: default:
console.warn(type); console.warn(type);
@@ -655,7 +655,7 @@ onMounted(() => {
</template> </template>
</template> </template>
<template #expandedRowRender="{ record }"> <template #expandedRowRender="{ record }">
<a-row :gutter="16"> <a-row>
<a-col :offset="2" :lg="8" :md="8" :xs="8"> <a-col :offset="2" :lg="8" :md="8" :xs="8">
<a-divider orientation="left"> <a-divider orientation="left">
{{ t('views.ne.neInfo.info') }} {{ t('views.ne.neInfo.info') }}
@@ -753,7 +753,7 @@ onMounted(() => {
<!-- 新增框或修改框 --> <!-- 新增框或修改框 -->
<EditModal <EditModal
v-model:visible="modalState.visibleByEdit" v-model:open="modalState.openByEdit"
:edit-id="modalState.editId" :edit-id="modalState.editId"
@ok="fnModalEditOk" @ok="fnModalEditOk"
@cancel="fnModalEditCancel" @cancel="fnModalEditCancel"
@@ -761,7 +761,7 @@ onMounted(() => {
<!-- OAM编辑框 --> <!-- OAM编辑框 -->
<OAMModal <OAMModal
v-model:visible="modalState.visibleByOAM" v-model:open="modalState.openByOAM"
:ne-id="modalState.neId" :ne-id="modalState.neId"
:ne-type="modalState.neType" :ne-type="modalState.neType"
@cancel="fnModalEditCancel" @cancel="fnModalEditCancel"
@@ -770,7 +770,7 @@ onMounted(() => {
<!-- 配置文件备份框 --> <!-- 配置文件备份框 -->
<BackConfModal <BackConfModal
ref="backConf" ref="backConf"
v-model:visible="modalState.visibleByBackConf" v-model:open="modalState.openByBackConf"
:ne-id="modalState.neId" :ne-id="modalState.neId"
:ne-type="modalState.neType" :ne-type="modalState.neType"
@cancel="fnModalEditCancel" @cancel="fnModalEditCancel"

29
src/views/ne/neLicense/components/EditModal.vue
View File

@@ -1,6 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { reactive, onMounted, toRaw, watch } from 'vue'; import { reactive, onMounted, toRaw, watch } from 'vue';
import { Form, Modal, Upload, message } from 'ant-design-vue/lib'; import { ProModal } from 'antdv-pro-modal';
import { Form, Modal, Upload, message } from 'ant-design-vue/es';
import useI18n from '@/hooks/useI18n'; import useI18n from '@/hooks/useI18n';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants'; import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import { import {
@@ -8,16 +9,16 @@ import {
getNeLicense, getNeLicense,
getNeLicenseByTypeAndID, getNeLicenseByTypeAndID,
} from '@/api/ne/neLicense'; } from '@/api/ne/neLicense';
import { UploadRequestOption } from 'ant-design-vue/lib/vc-upload/interface'; import { UploadRequestOption } from 'ant-design-vue/es/vc-upload/interface';
import { FileType } from 'ant-design-vue/lib/upload/interface'; import { FileType } from 'ant-design-vue/es/upload/interface';
import { uploadFile } from '@/api/tool/file'; import { uploadFile } from '@/api/tool/file';
import { useClipboard } from '@vueuse/core'; import { useClipboard } from '@vueuse/core';
import saveAs from 'file-saver'; import saveAs from 'file-saver';
const { copy } = useClipboard({ legacy: true }); const { copy } = useClipboard({ legacy: true });
const { t } = useI18n(); const { t } = useI18n();
const emit = defineEmits(['ok', 'cancel', 'update:visible']); const emit = defineEmits(['ok', 'cancel', 'update:open']);
const props = defineProps({ const props = defineProps({
visible: { open: {
type: Boolean, type: Boolean,
default: false, default: false,
}, },
@@ -45,7 +46,7 @@ const props = defineProps({
/**对话框对象信息状态类型 */ /**对话框对象信息状态类型 */
type ModalStateType = { type ModalStateType = {
/**新增框或修改框是否显示 */ /**新增框或修改框是否显示 */
visibleByEdit: boolean; openByEdit: boolean;
/**标题 */ /**标题 */
title: string; title: string;
/**表单数据 */ /**表单数据 */
@@ -66,7 +67,7 @@ type ModalStateType = {
/**对话框对象信息状态 */ /**对话框对象信息状态 */
let modalState: ModalStateType = reactive({ let modalState: ModalStateType = reactive({
visibleByEdit: false, openByEdit: false,
title: '授权文件', title: '授权文件',
from: { from: {
id: '', id: '',
@@ -136,12 +137,12 @@ function fnModalOk() {
* 进行表达规则校验 * 进行表达规则校验
*/ */
function fnModalCancel() { function fnModalCancel() {
modalState.visibleByEdit = false; modalState.openByEdit = false;
modalState.confirmLoading = false; modalState.confirmLoading = false;
modalStateFrom.resetFields(); modalStateFrom.resetFields();
modalState.uploadFiles = []; modalState.uploadFiles = [];
emit('cancel'); emit('cancel');
emit('update:visible', false); emit('update:open', false);
} }
/**表单上传前检查或转换压缩 */ /**表单上传前检查或转换压缩 */
@@ -227,7 +228,7 @@ function fnModalVisibleById(id: string) {
modalState.from.licensePath = ''; modalState.from.licensePath = '';
modalState.from.reload = props.reload; modalState.from.reload = props.reload;
modalState.title = t('views.ne.neLicense.updateTtile'); modalState.title = t('views.ne.neLicense.updateTtile');
modalState.visibleByEdit = true; modalState.openByEdit = true;
} else { } else {
message.error(res.msg, 3); message.error(res.msg, 3);
} }
@@ -252,7 +253,7 @@ function fnModalVisibleByTypeAndId(neType: string, neId: string) {
modalState.from.licensePath = ''; modalState.from.licensePath = '';
modalState.from.reload = props.reload; modalState.from.reload = props.reload;
modalState.title = t('views.ne.neLicense.updateTtile'); modalState.title = t('views.ne.neLicense.updateTtile');
modalState.visibleByEdit = true; modalState.openByEdit = true;
} else { } else {
message.error(res.msg, 3); message.error(res.msg, 3);
} }
@@ -265,7 +266,7 @@ function fnModalVisibleByTypeAndId(neType: string, neId: string) {
/**监听是否显示，初始数据 */ /**监听是否显示，初始数据 */
watch( watch(
() => props.visible, () => props.open,
val => { val => {
if (val) { if (val) {
if (props.editId) { if (props.editId) {
@@ -288,7 +289,7 @@ onMounted(() => {});
:destroyOnClose="true" :destroyOnClose="true"
:keyboard="false" :keyboard="false"
:mask-closable="false" :mask-closable="false"
:visible="modalState.visibleByEdit" :open="modalState.openByEdit"
:title="modalState.title" :title="modalState.title"
:confirm-loading="modalState.confirmLoading" :confirm-loading="modalState.confirmLoading"
@ok="fnModalOk" @ok="fnModalOk"
@@ -301,7 +302,7 @@ onMounted(() => {});
:label-col="{ span: 6 }" :label-col="{ span: 6 }"
:labelWrap="true" :labelWrap="true"
> >
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label-col="{ span: 12 }" :label-col="{ span: 12 }"

27
src/views/ne/neLicense/components/UploadLicenseFile.vue
View File

@@ -1,16 +1,17 @@
<script setup lang="ts"> <script setup lang="ts">
import { reactive, onMounted, watch, PropType, h } from 'vue'; import { reactive, onMounted, watch, PropType, h } from 'vue';
import { message, notification, Upload } from 'ant-design-vue/lib'; import { message, notification, Upload } from 'ant-design-vue/es';
import useI18n from '@/hooks/useI18n';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants'; import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import { UploadRequestOption } from 'ant-design-vue/lib/vc-upload/interface'; import { UploadRequestOption } from 'ant-design-vue/es/vc-upload/interface';
import { FileType } from 'ant-design-vue/lib/upload/interface'; import { FileType } from 'ant-design-vue/es/upload/interface';
import { ProModal } from 'antdv-pro-modal';
import { uploadFile } from '@/api/tool/file'; import { uploadFile } from '@/api/tool/file';
import { changeNeLicense } from '@/api/ne/neLicense'; import { changeNeLicense } from '@/api/ne/neLicense';
import useI18n from '@/hooks/useI18n';
const { t } = useI18n(); const { t } = useI18n();
const emit = defineEmits(['ok', 'cancel', 'update:visible']); const emit = defineEmits(['ok', 'cancel', 'update:open']);
const props = defineProps({ const props = defineProps({
visible: { open: {
type: Boolean, type: Boolean,
default: false, default: false,
}, },
@@ -24,7 +25,7 @@ const props = defineProps({
/**对话框对象信息状态类型 */ /**对话框对象信息状态类型 */
type ModalStateType = { type ModalStateType = {
/**新增框或修改框是否显示 */ /**新增框或修改框是否显示 */
visibleByUploadFile: boolean; openByUploadFile: boolean;
/**标题 */ /**标题 */
title: string; title: string;
/**授权文件路径 */ /**授权文件路径 */
@@ -37,7 +38,7 @@ type ModalStateType = {
/**对话框对象信息状态 */ /**对话框对象信息状态 */
let modalState: ModalStateType = reactive({ let modalState: ModalStateType = reactive({
visibleByUploadFile: false, openByUploadFile: false,
licensePath: '', licensePath: '',
uploadFiles: [], uploadFiles: [],
title: '授权文件', title: '授权文件',
@@ -117,12 +118,12 @@ async function fnModalOk() {
* 进行表达规则校验 * 进行表达规则校验
*/ */
function fnModalCancel() { function fnModalCancel() {
modalState.visibleByUploadFile = false; modalState.openByUploadFile = false;
modalState.confirmLoading = false; modalState.confirmLoading = false;
modalState.licensePath = ''; modalState.licensePath = '';
modalState.uploadFiles = []; modalState.uploadFiles = [];
emit('cancel'); emit('cancel');
emit('update:visible', false); emit('update:open', false);
} }
/**表单上传前检查或转换压缩 */ /**表单上传前检查或转换压缩 */
@@ -172,11 +173,11 @@ function fnUploadFile(up: UploadRequestOption) {
/**监听是否显示，初始数据 */ /**监听是否显示，初始数据 */
watch( watch(
() => props.visible, () => props.open,
val => { val => {
if (val) { if (val) {
modalState.title = t('views.ne.neLicense.updateTtile'); modalState.title = t('views.ne.neLicense.updateTtile');
modalState.visibleByUploadFile = true; modalState.openByUploadFile = true;
} }
} }
); );
@@ -190,7 +191,7 @@ onMounted(() => {});
:destroyOnClose="true" :destroyOnClose="true"
:keyboard="false" :keyboard="false"
:mask-closable="false" :mask-closable="false"
:visible="modalState.visibleByUploadFile" :open="modalState.openByUploadFile"
:title="modalState.title" :title="modalState.title"
:confirm-loading="modalState.confirmLoading" :confirm-loading="modalState.confirmLoading"
:cancel-button-props="{ disabled: modalState.confirmLoading }" :cancel-button-props="{ disabled: modalState.confirmLoading }"

16
src/views/ne/neLicense/index.vue
View File

@@ -1,9 +1,9 @@
<script setup lang="ts"> <script setup lang="ts">
import { reactive, ref, onMounted, toRaw, defineAsyncComponent } from 'vue'; import { reactive, ref, onMounted, toRaw, defineAsyncComponent } from 'vue';
import { PageContainer } from 'antdv-pro-layout'; import { PageContainer } from 'antdv-pro-layout';
import { Modal, TableColumnsType, message } from 'ant-design-vue/lib'; import { Modal, TableColumnsType, message } from 'ant-design-vue/es';
import { SizeType } from 'ant-design-vue/lib/config-provider'; import { SizeType } from 'ant-design-vue/es/config-provider';
import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface'; import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
import useNeInfoStore from '@/store/modules/neinfo'; import useNeInfoStore from '@/store/modules/neinfo';
import useI18n from '@/hooks/useI18n'; import useI18n from '@/hooks/useI18n';
import useDictStore from '@/store/modules/dict'; import useDictStore from '@/store/modules/dict';
@@ -208,7 +208,7 @@ function fnGetList(pageNum?: number) {
/**对话框对象信息状态类型 */ /**对话框对象信息状态类型 */
type ModalStateType = { type ModalStateType = {
/**新增框或修改框是否显示 */ /**新增框或修改框是否显示 */
visibleByEdit: boolean; openByEdit: boolean;
/**授权记录ID */ /**授权记录ID */
licenseId: string; licenseId: string;
/**确定按钮 loading */ /**确定按钮 loading */
@@ -217,7 +217,7 @@ type ModalStateType = {
/**对话框对象信息状态 */ /**对话框对象信息状态 */
let modalState: ModalStateType = reactive({ let modalState: ModalStateType = reactive({
visibleByEdit: false, openByEdit: false,
licenseId: '', licenseId: '',
confirmLoading: false, confirmLoading: false,
}); });
@@ -228,7 +228,7 @@ let modalState: ModalStateType = reactive({
*/ */
function fnModalVisibleByEdit(licenseId: string) { function fnModalVisibleByEdit(licenseId: string) {
modalState.licenseId = licenseId; modalState.licenseId = licenseId;
modalState.visibleByEdit = true; modalState.openByEdit = true;
} }
/** /**
@@ -245,7 +245,7 @@ function fnModalOk() {
* 进行表达规则校验 * 进行表达规则校验
*/ */
function fnModalCancel() { function fnModalCancel() {
modalState.visibleByEdit = false; modalState.openByEdit = false;
modalState.licenseId = ''; modalState.licenseId = '';
} }
@@ -528,7 +528,7 @@ onMounted(() => {
<!-- 文件上传框 --> <!-- 文件上传框 -->
<EditModal <EditModal
v-model:visible="modalState.visibleByEdit" v-model:open="modalState.openByEdit"
:edit-id="modalState.licenseId" :edit-id="modalState.licenseId"
@ok="fnModalOk" @ok="fnModalOk"
@cancel="fnModalCancel" @cancel="fnModalCancel"

14
src/views/ne/neQuickSetup/components/NeInfoConfig.vue
View File

@@ -1,5 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import { Form, Modal, message } from 'ant-design-vue/lib'; import { Form, Modal, message } from 'ant-design-vue/es';
import { onMounted, reactive, toRaw } from 'vue'; import { onMounted, reactive, toRaw } from 'vue';
import { addNeInfo, getNeInfoByTypeAndID, updateNeInfo } from '@/api/ne/neInfo'; import { addNeInfo, getNeInfoByTypeAndID, updateNeInfo } from '@/api/ne/neInfo';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants'; import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
@@ -344,7 +344,7 @@ onMounted(() => {
:label-col="{ span: 6 }" :label-col="{ span: 6 }"
:labelWrap="true" :labelWrap="true"
> >
<a-row :gutter="16"> <a-row>
<a-col :lg="6" :md="6" :xs="24" :offset="6"> <a-col :lg="6" :md="6" :xs="24" :offset="6">
<a-form-item <a-form-item
:label="t('views.ne.common.neType')" :label="t('views.ne.common.neType')"
@@ -368,7 +368,7 @@ onMounted(() => {
<template #title> <template #title>
{{ t('views.ne.common.neTypeTip') }} {{ t('views.ne.common.neTypeTip') }}
</template> </template>
<InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" /> <InfoCircleOutlined style="opacity: 0.45; color: inherit;" />
</a-tooltip> </a-tooltip>
</template> </template>
</a-input> </a-input>
@@ -392,7 +392,7 @@ onMounted(() => {
<template #title> <template #title>
{{ t('views.ne.common.neIdTip') }} {{ t('views.ne.common.neIdTip') }}
</template> </template>
<InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" /> <InfoCircleOutlined style="opacity: 0.45; color: inherit;" />
</a-tooltip> </a-tooltip>
</template> </template>
</a-input> </a-input>
@@ -400,7 +400,7 @@ onMounted(() => {
</a-col> </a-col>
</a-row> </a-row>
<a-row :gutter="16"> <a-row>
<a-col :lg="6" :md="6" :xs="24" :offset="6"> <a-col :lg="6" :md="6" :xs="24" :offset="6">
<a-form-item <a-form-item
:label="t('views.ne.common.ipAddr')" :label="t('views.ne.common.ipAddr')"
@@ -422,7 +422,7 @@ onMounted(() => {
{{ t('views.ne.common.ipAddrTip') }} {{ t('views.ne.common.ipAddrTip') }}
</div> </div>
</template> </template>
<InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" /> <InfoCircleOutlined style="opacity: 0.45; color: inherit;" />
</a-tooltip> </a-tooltip>
</template> </template>
</a-input> </a-input>
@@ -447,7 +447,7 @@ onMounted(() => {
<template #title> <template #title>
<div>{{ t('views.ne.common.portTip') }}</div> <div>{{ t('views.ne.common.portTip') }}</div>
</template> </template>
<InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" /> <InfoCircleOutlined style="opacity: 0.45; color: inherit;" />
</a-tooltip> </a-tooltip>
</template> </template>
</a-input-number> </a-input-number>

14
src/views/ne/neQuickSetup/components/NeInfoSoftwareInstall.vue
View File

@@ -1,5 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import { Modal, message } from 'ant-design-vue/lib'; import { Modal, message } from 'ant-design-vue/es';
import { defineAsyncComponent, onMounted, reactive, toRaw } from 'vue'; import { defineAsyncComponent, onMounted, reactive, toRaw } from 'vue';
import { fnToStepName, stepState } from '../hooks/useStep'; import { fnToStepName, stepState } from '../hooks/useStep';
import useI18n from '@/hooks/useI18n'; import useI18n from '@/hooks/useI18n';
@@ -10,7 +10,7 @@ import {
} from '@/constants/result-constants'; } from '@/constants/result-constants';
import { listNeSoftware, newNeVersion } from '@/api/ne/neSoftware'; import { listNeSoftware, newNeVersion } from '@/api/ne/neSoftware';
import { parseDateToStr } from '@/utils/date-utils'; import { parseDateToStr } from '@/utils/date-utils';
import { ColumnsType } from 'ant-design-vue/lib/table'; import { ColumnsType } from 'ant-design-vue/es/table';
const { t } = useI18n(); const { t } = useI18n();
const EditModal = defineAsyncComponent( const EditModal = defineAsyncComponent(
() => import('../../../ne/neSoftware/components/EditModal.vue') () => import('../../../ne/neSoftware/components/EditModal.vue')
@@ -152,7 +152,7 @@ type StateType = {
/**文件操作类型 上传 or 选择 */ /**文件操作类型 上传 or 选择 */
optionType: 'upload' | 'option'; optionType: 'upload' | 'option';
/**文件上传 */ /**文件上传 */
visibleByFile: boolean; openByFile: boolean;
/**网元拓展包列表类型 */ /**网元拓展包列表类型 */
depType: string[]; depType: string[];
/**软件包信息数据 */ /**软件包信息数据 */
@@ -172,7 +172,7 @@ type StateType = {
let state: StateType = reactive({ let state: StateType = reactive({
stepNext: false, stepNext: false,
optionType: 'option', optionType: 'option',
visibleByFile: false, openByFile: false,
depType: [], depType: [],
from: { from: {
id: undefined, id: undefined,
@@ -200,7 +200,7 @@ function fnOptionTypeChange() {
/**对话框弹出 */ /**对话框弹出 */
function fnModalOpen() { function fnModalOpen() {
state.visibleByFile = !state.visibleByFile; state.openByFile = !state.openByFile;
} }
/**对话框弹出确认执行函数*/ /**对话框弹出确认执行函数*/
@@ -210,7 +210,7 @@ function fnModalOk(e: any) {
/**对话框弹出关闭执行函数*/ /**对话框弹出关闭执行函数*/
function fnModalCancel() { function fnModalCancel() {
state.visibleByFile = false; state.openByFile = false;
} }
/**版本安装 */ /**版本安装 */
@@ -382,7 +382,7 @@ onMounted(() => {
<!-- 文件上传框 --> <!-- 文件上传框 -->
<EditModal <EditModal
v-model:visible="state.visibleByFile" v-model:open="state.openByFile"
@ok="fnModalOk" @ok="fnModalOk"
@cancel="fnModalCancel" @cancel="fnModalCancel"
></EditModal> ></EditModal>

12
src/views/ne/neQuickSetup/components/NeInfoSoftwareLicense.vue
View File

@@ -1,5 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import { Modal } from 'ant-design-vue/lib'; import { Modal } from 'ant-design-vue/es';
import { defineAsyncComponent, onMounted, onUnmounted, reactive } from 'vue'; import { defineAsyncComponent, onMounted, onUnmounted, reactive } from 'vue';
import { fnRestStepState, stepState } from '../hooks/useStep'; import { fnRestStepState, stepState } from '../hooks/useStep';
import useI18n from '@/hooks/useI18n'; import useI18n from '@/hooks/useI18n';
@@ -13,7 +13,7 @@ const EditModal = defineAsyncComponent(
/**对象信息信息状态类型 */ /**对象信息信息状态类型 */
type StateType = { type StateType = {
/**文件上传 */ /**文件上传 */
visibleByFile: boolean; openByFile: boolean;
/**授权信息数据 */ /**授权信息数据 */
from: { from: {
neType: string; neType: string;
@@ -31,7 +31,7 @@ type StateType = {
/**对象信息状态 */ /**对象信息状态 */
let state: StateType = reactive({ let state: StateType = reactive({
visibleByFile: false, openByFile: false,
from: { from: {
neType: '', neType: '',
neId: '', neId: '',
@@ -72,7 +72,7 @@ function fnModalOk(e: any) {
/**对话框弹出关闭执行函数*/ /**对话框弹出关闭执行函数*/
function fnModalCancel() { function fnModalCancel() {
state.visibleByFile = false; state.openByFile = false;
state.confirmLoading = false; state.confirmLoading = false;
} }
@@ -131,7 +131,7 @@ onUnmounted(() => {
type="primary" type="primary"
:disabled="state.from.sn !== ''" :disabled="state.from.sn !== ''"
:loading="state.timeCount < 30 || state.confirmLoading" :loading="state.timeCount < 30 || state.confirmLoading"
@click="() => (state.visibleByFile = !state.visibleByFile)" @click="() => (state.openByFile = !state.openByFile)"
> >
{{ t('views.ne.neQuickSetup.licenseUpload') }} {{ t('views.ne.neQuickSetup.licenseUpload') }}
</a-button> </a-button>
@@ -168,7 +168,7 @@ onUnmounted(() => {
<!-- 许可证上传框 --> <!-- 许可证上传框 -->
<EditModal <EditModal
v-model:visible="state.visibleByFile" v-model:open="state.openByFile"
:ne-type="state.from.neType" :ne-type="state.from.neType"
:ne-id="state.from.neId" :ne-id="state.from.neId"
:reload="true" :reload="true"

44
src/views/ne/neQuickSetup/components/Para5GForm.vue
View File

@@ -91,10 +91,10 @@ watch(
:label-col="{ span: 8 }" :label-col="{ span: 8 }"
:label-wrap="true" :label-wrap="true"
> >
<a-row :gutter="16"> <a-row>
<a-col :lg="16" :md="16" :xs="24"> <a-col :lg="16" :md="16" :xs="24">
<a-divider orientation="left">Basic</a-divider> <a-divider orientation="left">Basic</a-divider>
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item label="DNN_DATA" name="basic.dnn_data"> <a-form-item label="DNN_DATA" name="basic.dnn_data">
<a-input <a-input
@@ -106,7 +106,7 @@ watch(
<template #prefix> <template #prefix>
<a-tooltip placement="topLeft"> <a-tooltip placement="topLeft">
<template #title> DNN </template> <template #title> DNN </template>
<InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" /> <InfoCircleOutlined style="opacity: 0.45; color: inherit;" />
</a-tooltip> </a-tooltip>
</template> </template>
</a-input> </a-input>
@@ -128,7 +128,7 @@ watch(
<template #prefix> <template #prefix>
<a-tooltip placement="topLeft"> <a-tooltip placement="topLeft">
<template #title> 1-3 </template> <template #title> 1-3 </template>
<InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" /> <InfoCircleOutlined style="opacity: 0.45; color: inherit;" />
</a-tooltip> </a-tooltip>
</template> </template>
</a-input-number> </a-input-number>
@@ -168,7 +168,7 @@ watch(
<a-col :lg="8" :md="8" :xs="24"> <a-col :lg="8" :md="8" :xs="24">
<a-divider orientation="left">OMC</a-divider> <a-divider orientation="left">OMC</a-divider>
<a-row :gutter="16"> <a-row>
<a-col :lg="24" :md="24" :xs="24"> <a-col :lg="24" :md="24" :xs="24">
<a-form-item <a-form-item
label="OMC_IP" label="OMC_IP"
@@ -188,7 +188,7 @@ watch(
<template #title> <template #title>
Network Elemment send data tu EMS IP Network Elemment send data tu EMS IP
</template> </template>
<InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" /> <InfoCircleOutlined style="opacity: 0.45; color: inherit;" />
</a-tooltip> </a-tooltip>
</template> </template>
</a-input> </a-input>
@@ -197,7 +197,7 @@ watch(
</a-row> </a-row>
<template v-if="props.ne.amf"> <template v-if="props.ne.amf">
<a-divider orientation="left">AMF</a-divider> <a-divider orientation="left">AMF</a-divider>
<a-row :gutter="16"> <a-row>
<a-col :lg="24" :md="24" :xs="24"> <a-col :lg="24" :md="24" :xs="24">
<a-form-item label="N2_IP" name="external.amfn2_ip"> <a-form-item label="N2_IP" name="external.amfn2_ip">
<a-input <a-input
@@ -209,7 +209,7 @@ watch(
<template #prefix> <template #prefix>
<a-tooltip placement="topLeft"> <a-tooltip placement="topLeft">
<template #title> AMF N2 </template> <template #title> AMF N2 </template>
<InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" /> <InfoCircleOutlined style="opacity: 0.45; color: inherit;" />
</a-tooltip> </a-tooltip>
</template> </template>
</a-input> </a-input>
@@ -221,7 +221,7 @@ watch(
<a-col :lg="16" :md="16" :xs="24" v-if="props.ne.upf"> <a-col :lg="16" :md="16" :xs="24" v-if="props.ne.upf">
<a-divider orientation="left">UPF</a-divider> <a-divider orientation="left">UPF</a-divider>
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
label="UPF_TYPE" label="UPF_TYPE"
@@ -250,7 +250,7 @@ watch(
<template #prefix> <template #prefix>
<a-tooltip placement="topLeft"> <a-tooltip placement="topLeft">
<template #title> UE IP and maxk </template> <template #title> UE IP and maxk </template>
<InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" /> <InfoCircleOutlined style="opacity: 0.45; color: inherit;" />
</a-tooltip> </a-tooltip>
</template> </template>
</a-input> </a-input>
@@ -258,7 +258,7 @@ watch(
</a-col> </a-col>
</a-row> </a-row>
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item label="N3_IP" name="external.upfn3_ip"> <a-form-item label="N3_IP" name="external.upfn3_ip">
<a-input <a-input
@@ -270,7 +270,7 @@ watch(
<template #prefix> <template #prefix>
<a-tooltip placement="topLeft"> <a-tooltip placement="topLeft">
<template #title> netwrok ip </template> <template #title> netwrok ip </template>
<InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" /> <InfoCircleOutlined style="opacity: 0.45; color: inherit;" />
</a-tooltip> </a-tooltip>
</template> </template>
</a-input> </a-input>
@@ -285,7 +285,7 @@ watch(
<template #prefix> <template #prefix>
<a-tooltip placement="topLeft"> <a-tooltip placement="topLeft">
<template #title> geteway </template> <template #title> geteway </template>
<InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" /> <InfoCircleOutlined style="opacity: 0.45; color: inherit;" />
</a-tooltip> </a-tooltip>
</template> </template>
</a-input> </a-input>
@@ -309,7 +309,7 @@ watch(
<template #title> <template #title>
use `ip a` show info, to inet ip use `ip a` show info, to inet ip
</template> </template>
<InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" /> <InfoCircleOutlined style="opacity: 0.45; color: inherit;" />
</a-tooltip> </a-tooltip>
</template> </template>
</a-input> </a-input>
@@ -326,7 +326,7 @@ watch(
<template #title> <template #title>
use `ip a` show info, to inet ip use `ip a` show info, to inet ip
</template> </template>
<InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" /> <InfoCircleOutlined style="opacity: 0.45; color: inherit;" />
</a-tooltip> </a-tooltip>
</template> </template>
</a-input> </a-input>
@@ -334,7 +334,7 @@ watch(
</a-col> </a-col>
</a-row> </a-row>
<template v-if="fromState.external.upf_type === 'StandardUPF'"> <template v-if="fromState.external.upf_type === 'StandardUPF'">
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item label="N6_IP" name="external.upfn6_ip"> <a-form-item label="N6_IP" name="external.upfn6_ip">
<a-input <a-input
@@ -382,7 +382,7 @@ watch(
<a-col :lg="8" :md="8" :xs="24"> <a-col :lg="8" :md="8" :xs="24">
<template v-if="props.ne.ims"> <template v-if="props.ne.ims">
<a-divider orientation="left">IMS</a-divider> <a-divider orientation="left">IMS</a-divider>
<a-row :gutter="16"> <a-row>
<a-col :lg="24" :md="24" :xs="24"> <a-col :lg="24" :md="24" :xs="24">
<a-form-item label="SIP_IP" name="external.ims_sip_ip"> <a-form-item label="SIP_IP" name="external.ims_sip_ip">
<a-input <a-input
@@ -394,7 +394,7 @@ watch(
<template #prefix> <template #prefix>
<a-tooltip placement="topLeft"> <a-tooltip placement="topLeft">
<template #title> IMS SIP </template> <template #title> IMS SIP </template>
<InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" /> <InfoCircleOutlined style="opacity: 0.45; color: inherit;" />
</a-tooltip> </a-tooltip>
</template> </template>
</a-input> </a-input>
@@ -405,7 +405,7 @@ watch(
<template v-if="props.ne.mme"> <template v-if="props.ne.mme">
<a-divider orientation="left">MME</a-divider> <a-divider orientation="left">MME</a-divider>
<a-row :gutter="16"> <a-row>
<a-col :lg="24" :md="24" :xs="24"> <a-col :lg="24" :md="24" :xs="24">
<a-form-item label="S1_IP" name="external.mmes1_ip"> <a-form-item label="S1_IP" name="external.mmes1_ip">
<a-input <a-input
@@ -421,7 +421,7 @@ watch(
(S1AP), can be ethernet interface, virtual ethernet (S1AP), can be ethernet interface, virtual ethernet
interface, we don't advise wireless interfaces interface, we don't advise wireless interfaces
</template> </template>
<InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" /> <InfoCircleOutlined style="opacity: 0.45; color: inherit;" />
</a-tooltip> </a-tooltip>
</template> </template>
</a-input> </a-input>
@@ -436,7 +436,7 @@ watch(
<template #prefix> <template #prefix>
<a-tooltip placement="topLeft"> <a-tooltip placement="topLeft">
<template #title> Interface </template> <template #title> Interface </template>
<InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" /> <InfoCircleOutlined style="opacity: 0.45; color: inherit;" />
</a-tooltip> </a-tooltip>
</template> </template>
</a-input> </a-input>
@@ -453,7 +453,7 @@ watch(
<template #title> <template #title>
MME binded interface for S11-U communication (GTPV1-U) MME binded interface for S11-U communication (GTPV1-U)
</template> </template>
<InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" /> <InfoCircleOutlined style="opacity: 0.45; color: inherit;" />
</a-tooltip> </a-tooltip>
</template> </template>
</a-input> </a-input>

8
src/views/ne/neQuickSetup/components/Start.vue
View File

@@ -1,6 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { reactive, onMounted, toRaw } from 'vue'; import { reactive, onMounted, toRaw } from 'vue';
import { message, Form, Modal } from 'ant-design-vue/lib'; import { message, Form, Modal } from 'ant-design-vue/es';
import useI18n from '@/hooks/useI18n'; import useI18n from '@/hooks/useI18n';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants'; import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import { regExpIPv4, regExpIPv6 } from '@/utils/regular-utils'; import { regExpIPv4, regExpIPv6 } from '@/utils/regular-utils';
@@ -286,7 +286,7 @@ onMounted(() => {
<template #title> <template #title>
{{ t('views.ne.neQuickSetup.prettyNameTip') }} {{ t('views.ne.neQuickSetup.prettyNameTip') }}
</template> </template>
<InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" /> <InfoCircleOutlined style="opacity: 0.45; color: inherit" />
</a-tooltip> </a-tooltip>
</template> </template>
{{ state.info.prettyName }} {{ state.info.prettyName }}
@@ -320,7 +320,7 @@ onMounted(() => {
:label-wrap="true" :label-wrap="true"
style="margin-top: 20px; width: 68%" style="margin-top: 20px; width: 68%"
> >
<a-row :gutter="8"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.ne.neHost.addr')" :label="t('views.ne.neHost.addr')"
@@ -354,7 +354,7 @@ onMounted(() => {
</a-col> </a-col>
</a-row> </a-row>
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.ne.neHost.user')" :label="t('views.ne.neHost.user')"

29
src/views/ne/neSoftware/components/EditModal.vue
View File

@@ -1,21 +1,22 @@
<script setup lang="ts"> <script setup lang="ts">
import { reactive, onMounted, toRaw, watch } from 'vue'; import { reactive, onMounted, toRaw, watch } from 'vue';
import { message, Form, Upload, notification } from 'ant-design-vue/lib'; import { ProModal } from 'antdv-pro-modal';
import useI18n from '@/hooks/useI18n'; import { message, Form, Upload, notification } from 'ant-design-vue/es';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants'; import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import { NE_EXPAND_LIST, NE_TYPE_LIST } from '@/constants/ne-constants'; import { NE_EXPAND_LIST, NE_TYPE_LIST } from '@/constants/ne-constants';
import { UploadRequestOption } from 'ant-design-vue/lib/vc-upload/interface'; import { UploadRequestOption } from 'ant-design-vue/es/vc-upload/interface';
import { import {
addNeSoftware, addNeSoftware,
getNeSoftware, getNeSoftware,
updateNeSoftware, updateNeSoftware,
} from '@/api/ne/neSoftware'; } from '@/api/ne/neSoftware';
import { FileType } from 'ant-design-vue/lib/upload/interface'; import { FileType } from 'ant-design-vue/es/upload/interface';
import { uploadFileChunk } from '@/api/tool/file'; import { uploadFileChunk } from '@/api/tool/file';
import useI18n from '@/hooks/useI18n';
const { t } = useI18n(); const { t } = useI18n();
const emit = defineEmits(['ok', 'cancel', 'update:visible']); const emit = defineEmits(['ok', 'cancel', 'update:open']);
const props = defineProps({ const props = defineProps({
visible: { open: {
type: Boolean, type: Boolean,
default: false, default: false,
}, },
@@ -28,7 +29,7 @@ const props = defineProps({
/**对话框对象信息状态类型 */ /**对话框对象信息状态类型 */
type ModalStateType = { type ModalStateType = {
/**新增框或修改框是否显示 */ /**新增框或修改框是否显示 */
visibleByEdit: boolean; openByEdit: boolean;
/**标题 */ /**标题 */
title: string; title: string;
/**表单数据 */ /**表单数据 */
@@ -50,7 +51,7 @@ type ModalStateType = {
/**对话框对象信息状态 */ /**对话框对象信息状态 */
let modalState: ModalStateType = reactive({ let modalState: ModalStateType = reactive({
visibleByEdit: false, openByEdit: false,
title: '软件包文件', title: '软件包文件',
from: { from: {
id: '', id: '',
@@ -149,13 +150,13 @@ function fnModalOk() {
* 进行表达规则校验 * 进行表达规则校验
*/ */
function fnModalCancel() { function fnModalCancel() {
modalState.visibleByEdit = false; modalState.openByEdit = false;
modalState.confirmLoading = false; modalState.confirmLoading = false;
modalStateFrom.resetFields(); modalStateFrom.resetFields();
modalState.uploadFiles = []; modalState.uploadFiles = [];
modalState.uploadFilesDep = []; modalState.uploadFilesDep = [];
emit('cancel'); emit('cancel');
emit('update:visible', false); emit('update:open', false);
} }
/**表单上传前检查或转换压缩 */ /**表单上传前检查或转换压缩 */
@@ -316,7 +317,7 @@ function fnModalVisibleByEdit(id?: string) {
if (res.code === RESULT_CODE_SUCCESS) { if (res.code === RESULT_CODE_SUCCESS) {
Object.assign(modalState.from, res.data); Object.assign(modalState.from, res.data);
modalState.title = t('views.ne.neSoftware.uploadTitle'); modalState.title = t('views.ne.neSoftware.uploadTitle');
modalState.visibleByEdit = true; modalState.openByEdit = true;
} else { } else {
message.error(res.msg, 3); message.error(res.msg, 3);
} }
@@ -329,12 +330,12 @@ function fnModalVisibleByEdit(id?: string) {
return; return;
} }
modalState.title = t('views.ne.neSoftware.uploadTitle'); modalState.title = t('views.ne.neSoftware.uploadTitle');
modalState.visibleByEdit = true; modalState.openByEdit = true;
} }
/**监听是否显示，初始数据 */ /**监听是否显示，初始数据 */
watch( watch(
() => props.visible, () => props.open,
val => { val => {
if (val) fnModalVisibleByEdit(props.editId); if (val) fnModalVisibleByEdit(props.editId);
} }
@@ -350,7 +351,7 @@ onMounted(() => {});
:destroyOnClose="true" :destroyOnClose="true"
:keyboard="false" :keyboard="false"
:mask-closable="false" :mask-closable="false"
:visible="modalState.visibleByEdit" :open="modalState.openByEdit"
:title="modalState.title" :title="modalState.title"
:confirm-loading="modalState.confirmLoading" :confirm-loading="modalState.confirmLoading"
@ok="fnModalOk" @ok="fnModalOk"

25
src/views/ne/neSoftware/components/UploadMoreFile.vue
View File

@@ -1,17 +1,18 @@
<script setup lang="ts"> <script setup lang="ts">
import { reactive, onMounted, toRaw, watch } from 'vue'; import { reactive, onMounted, toRaw, watch } from 'vue';
import { message, Upload, notification } from 'ant-design-vue/lib'; import { ProModal } from 'antdv-pro-modal';
import type { UploadRequestOption } from 'ant-design-vue/lib/vc-upload/interface'; import { message, Upload, notification } from 'ant-design-vue/es';
import type { FileType, UploadFile } from 'ant-design-vue/lib/upload/interface'; import type { UploadRequestOption } from 'ant-design-vue/es/vc-upload/interface';
import type { FileType, UploadFile } from 'ant-design-vue/es/upload/interface';
import useI18n from '@/hooks/useI18n'; import useI18n from '@/hooks/useI18n';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants'; import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import { NE_TYPE_LIST, NE_EXPAND_LIST } from '@/constants/ne-constants'; import { NE_TYPE_LIST, NE_EXPAND_LIST } from '@/constants/ne-constants';
import { addNeSoftware } from '@/api/ne/neSoftware'; import { addNeSoftware } from '@/api/ne/neSoftware';
import { uploadFileChunk } from '@/api/tool/file'; import { uploadFileChunk } from '@/api/tool/file';
const { t } = useI18n(); const { t } = useI18n();
const emit = defineEmits(['ok', 'cancel', 'update:visible']); const emit = defineEmits(['ok', 'cancel', 'update:open']);
const props = defineProps({ const props = defineProps({
visible: { open: {
type: Boolean, type: Boolean,
default: false, default: false,
}, },
@@ -27,7 +28,7 @@ const NE_TYPE_EXP = NE_EXPAND_LIST.concat(NE_TYPE_LIST);
/**对话框对象信息状态类型 */ /**对话框对象信息状态类型 */
type ModalStateType = { type ModalStateType = {
/**新增框或修改框是否显示 */ /**新增框或修改框是否显示 */
visibleByMoreFile: boolean; openByMoreFile: boolean;
/**标题 */ /**标题 */
title: string; title: string;
/**表单数据 */ /**表单数据 */
@@ -48,7 +49,7 @@ type ModalStateType = {
/**对话框对象信息状态 */ /**对话框对象信息状态 */
let modalState: ModalStateType = reactive({ let modalState: ModalStateType = reactive({
visibleByMoreFile: false, openByMoreFile: false,
title: '软件包文件', title: '软件包文件',
from: [], from: [],
confirmLoading: false, confirmLoading: false,
@@ -154,13 +155,13 @@ async function fnModalOk() {
* 进行表达规则校验 * 进行表达规则校验
*/ */
function fnModalCancel() { function fnModalCancel() {
modalState.visibleByMoreFile = false; modalState.openByMoreFile = false;
modalState.confirmLoading = false; modalState.confirmLoading = false;
modalState.from = []; modalState.from = [];
modalState.uploadFiles = []; modalState.uploadFiles = [];
modalState.uploadFilesDep = []; modalState.uploadFilesDep = [];
emit('cancel'); emit('cancel');
emit('update:visible', false); emit('update:open', false);
} }
/**表单上传前检查或转换压缩 */ /**表单上传前检查或转换压缩 */
@@ -354,11 +355,11 @@ function fnUploadFileDep(up: UploadRequestOption) {
/**监听是否显示，初始数据 */ /**监听是否显示，初始数据 */
watch( watch(
() => props.visible, () => props.open,
val => { val => {
if (val) { if (val) {
modalState.title = t('views.ne.neSoftware.uploadTitle'); modalState.title = t('views.ne.neSoftware.uploadTitle');
modalState.visibleByMoreFile = true; modalState.openByMoreFile = true;
} }
} }
); );
@@ -372,7 +373,7 @@ onMounted(() => {});
:width="800" :width="800"
:keyboard="false" :keyboard="false"
:mask-closable="false" :mask-closable="false"
:visible="modalState.visibleByMoreFile" :open="modalState.openByMoreFile"
:title="modalState.title" :title="modalState.title"
:confirm-loading="modalState.confirmLoading" :confirm-loading="modalState.confirmLoading"
@ok="fnModalOk" @ok="fnModalOk"

27
src/views/ne/neSoftware/index.vue
View File

@@ -1,9 +1,9 @@
<script setup lang="ts"> <script setup lang="ts">
import { reactive, ref, onMounted, toRaw, defineAsyncComponent } from 'vue'; import { reactive, ref, onMounted, toRaw, defineAsyncComponent } from 'vue';
import { PageContainer } from 'antdv-pro-layout'; import { PageContainer } from 'antdv-pro-layout';
import { Modal, TableColumnsType, message } from 'ant-design-vue/lib'; import { Modal, TableColumnsType, message } from 'ant-design-vue/es';
import { SizeType } from 'ant-design-vue/lib/config-provider'; import { SizeType } from 'ant-design-vue/es/config-provider';
import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface'; import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
import useNeInfoStore from '@/store/modules/neinfo'; import useNeInfoStore from '@/store/modules/neinfo';
import useI18n from '@/hooks/useI18n'; import useI18n from '@/hooks/useI18n';
import { NE_TYPE_LIST } from '@/constants/ne-constants'; import { NE_TYPE_LIST } from '@/constants/ne-constants';
@@ -213,20 +213,20 @@ function fnGetList(pageNum?: number) {
/**对话框对象信息状态类型 */ /**对话框对象信息状态类型 */
type ModalStateType = { type ModalStateType = {
/**新增框或修改框是否显示 */ /**新增框或修改框是否显示 */
visibleByEdit: boolean; openByEdit: boolean;
/**新增框或修改框ID */ /**新增框或修改框ID */
editId: string; editId: string;
/**多文件上传 */ /**多文件上传 */
visibleByMoreFile: boolean; openByMoreFile: boolean;
/**确定按钮 loading */ /**确定按钮 loading */
confirmLoading: boolean; confirmLoading: boolean;
}; };
/**对话框对象信息状态 */ /**对话框对象信息状态 */
let modalState: ModalStateType = reactive({ let modalState: ModalStateType = reactive({
visibleByEdit: false, openByEdit: false,
editId: '', editId: '',
visibleByMoreFile: false, openByMoreFile: false,
confirmLoading: false, confirmLoading: false,
}); });
@@ -240,7 +240,7 @@ function fnModalVisibleByEdit(id?: string) {
} else { } else {
modalState.editId = id; modalState.editId = id;
} }
modalState.visibleByEdit = !modalState.visibleByEdit; modalState.openByEdit = !modalState.openByEdit;
} }
/** /**
@@ -257,8 +257,8 @@ function fnModalEditOk() {
*/ */
function fnModalEditCancel() { function fnModalEditCancel() {
modalState.editId = ''; modalState.editId = '';
modalState.visibleByEdit = false; modalState.openByEdit = false;
modalState.visibleByMoreFile = false; modalState.openByMoreFile = false;
} }
/**删除软件包 */ /**删除软件包 */
@@ -429,8 +429,7 @@ onMounted(() => {
type="primary" type="primary"
:disabled="tableState.selectedRowKeys.length > 1" :disabled="tableState.selectedRowKeys.length > 1"
@click.prevent=" @click.prevent="
() => () => (modalState.openByMoreFile = !modalState.openByMoreFile)
(modalState.visibleByMoreFile = !modalState.visibleByMoreFile)
" "
> >
<template #icon><UploadOutlined /></template> <template #icon><UploadOutlined /></template>
@@ -576,7 +575,7 @@ onMounted(() => {
<!-- 新增框或修改框 --> <!-- 新增框或修改框 -->
<EditModal <EditModal
v-model:visible="modalState.visibleByEdit" v-model:open="modalState.openByEdit"
:edit-id="modalState.editId" :edit-id="modalState.editId"
@ok="fnModalEditOk" @ok="fnModalEditOk"
@cancel="fnModalEditCancel" @cancel="fnModalEditCancel"
@@ -584,7 +583,7 @@ onMounted(() => {
<!-- 新增多文件上传框 --> <!-- 新增多文件上传框 -->
<UploadMoreFile <UploadMoreFile
v-model:visible="modalState.visibleByMoreFile" v-model:open="modalState.openByMoreFile"
:ne-type="tableState.selectedRowOne.neType" :ne-type="tableState.selectedRowOne.neType"
@ok="fnModalEditOk" @ok="fnModalEditOk"
@cancel="fnModalEditCancel" @cancel="fnModalEditCancel"

39
src/views/ne/neVersion/index.vue
View File

@@ -1,14 +1,15 @@
<script setup lang="ts"> <script setup lang="ts">
import { reactive, ref, onMounted, toRaw, defineAsyncComponent } from 'vue'; import { reactive, ref, onMounted, toRaw, defineAsyncComponent } from 'vue';
import { PageContainer } from 'antdv-pro-layout'; import { PageContainer } from 'antdv-pro-layout';
import { ProModal } from 'antdv-pro-modal';
import { import {
Modal, Modal,
TableColumnsType, TableColumnsType,
message, message,
notification, notification,
} from 'ant-design-vue/lib'; } from 'ant-design-vue/es';
import { SizeType } from 'ant-design-vue/lib/config-provider'; import { SizeType } from 'ant-design-vue/es/config-provider';
import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface'; import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
import useNeInfoStore from '@/store/modules/neinfo'; import useNeInfoStore from '@/store/modules/neinfo';
import { NE_TYPE_LIST } from '@/constants/ne-constants'; import { NE_TYPE_LIST } from '@/constants/ne-constants';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants'; import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
@@ -239,11 +240,11 @@ function fnGetList(pageNum?: number) {
/**对话框对象信息状态类型 */ /**对话框对象信息状态类型 */
type ModalStateType = { type ModalStateType = {
/**单文件上传 */ /**单文件上传 */
visibleByEdit: boolean; openByEdit: boolean;
/**多文件上传 */ /**多文件上传 */
visibleByMoreFile: boolean; openByMoreFile: boolean;
/**勾选升级情况 */ /**勾选升级情况 */
visibleByUpgrade: boolean; openByUpgrade: boolean;
/**操作数据进行版本升级 */ /**操作数据进行版本升级 */
operateDataUpgrade: any[]; operateDataUpgrade: any[];
/**确定按钮 loading */ /**确定按钮 loading */
@@ -252,9 +253,9 @@ type ModalStateType = {
/**对话框对象信息状态 */ /**对话框对象信息状态 */
let modalState: ModalStateType = reactive({ let modalState: ModalStateType = reactive({
visibleByEdit: false, openByEdit: false,
visibleByMoreFile: false, openByMoreFile: false,
visibleByUpgrade: false, openByUpgrade: false,
operateDataUpgrade: [], operateDataUpgrade: [],
confirmLoading: false, confirmLoading: false,
}); });
@@ -265,7 +266,7 @@ let modalState: ModalStateType = reactive({
*/ */
function fnModalEditOk() { function fnModalEditOk() {
fnGetList(1); fnGetList(1);
if (modalState.visibleByUpgrade) { if (modalState.openByUpgrade) {
fnModalEditCancel(); fnModalEditCancel();
} }
} }
@@ -275,9 +276,9 @@ function fnModalEditOk() {
* 进行表达规则校验 * 进行表达规则校验
*/ */
function fnModalEditCancel() { function fnModalEditCancel() {
modalState.visibleByEdit = false; modalState.openByEdit = false;
modalState.visibleByMoreFile = false; modalState.openByMoreFile = false;
modalState.visibleByUpgrade = false; modalState.openByUpgrade = false;
modalState.operateDataUpgrade = []; modalState.operateDataUpgrade = [];
} }
@@ -370,7 +371,7 @@ function fnRecordUpgradeConfirm() {
async function fnRecordUpgrade() { async function fnRecordUpgrade() {
if (modalState.confirmLoading) return; if (modalState.confirmLoading) return;
modalState.confirmLoading = true; modalState.confirmLoading = true;
modalState.visibleByUpgrade = true; modalState.openByUpgrade = true;
// 操作升级的网元数据 // 操作升级的网元数据
const selectRows = tableState.data.filter(item => const selectRows = tableState.data.filter(item =>
tableState.selectedRowKeys.includes(item.id) tableState.selectedRowKeys.includes(item.id)
@@ -511,7 +512,7 @@ onMounted(() => {
<a-button <a-button
type="primary" type="primary"
@click.prevent=" @click.prevent="
() => (modalState.visibleByEdit = !modalState.visibleByEdit) () => (modalState.openByEdit = !modalState.openByEdit)
" "
> >
<template #icon><UploadOutlined /></template> <template #icon><UploadOutlined /></template>
@@ -522,7 +523,7 @@ onMounted(() => {
:disabled="tableState.selectedRowKeys.length > 1" :disabled="tableState.selectedRowKeys.length > 1"
@click.prevent=" @click.prevent="
() => () =>
(modalState.visibleByMoreFile = !modalState.visibleByMoreFile) (modalState.openByMoreFile = !modalState.openByMoreFile)
" "
> >
<template #icon><UploadOutlined /></template> <template #icon><UploadOutlined /></template>
@@ -646,14 +647,14 @@ onMounted(() => {
<!-- 新增单文件上传 --> <!-- 新增单文件上传 -->
<EditModal <EditModal
v-model:visible="modalState.visibleByEdit" v-model:open="modalState.openByEdit"
@ok="fnModalEditOk" @ok="fnModalEditOk"
@cancel="fnModalEditCancel" @cancel="fnModalEditCancel"
></EditModal> ></EditModal>
<!-- 新增多文件上传框 --> <!-- 新增多文件上传框 -->
<UploadMoreFile <UploadMoreFile
v-model:visible="modalState.visibleByMoreFile" v-model:open="modalState.openByMoreFile"
:ne-type="tableState.selectedRowOne.neType" :ne-type="tableState.selectedRowOne.neType"
@ok="fnModalEditOk" @ok="fnModalEditOk"
@cancel="fnModalEditCancel" @cancel="fnModalEditCancel"
@@ -667,7 +668,7 @@ onMounted(() => {
:body-style="{ height: '520px', overflowY: 'scroll' }" :body-style="{ height: '520px', overflowY: 'scroll' }"
:keyboard="false" :keyboard="false"
:mask-closable="false" :mask-closable="false"
:visible="modalState.visibleByUpgrade" :open="modalState.openByUpgrade"
:title="t('views.ne.neVersion.upgradeModal')" :title="t('views.ne.neVersion.upgradeModal')"
:closable="false" :closable="false"
@ok="fnModalEditOk" @ok="fnModalEditOk"

6
src/views/neUser/base5G/index.vue
View File

@@ -1,9 +1,9 @@
<script setup lang="ts"> <script setup lang="ts">
import { reactive, ref, onMounted, toRaw } from 'vue'; import { reactive, ref, onMounted, toRaw } from 'vue';
import { PageContainer } from 'antdv-pro-layout'; import { PageContainer } from 'antdv-pro-layout';
import { TableColumnsType, message } from 'ant-design-vue/lib'; import { TableColumnsType, message } from 'ant-design-vue/es';
import { SizeType } from 'ant-design-vue/lib/config-provider'; import { SizeType } from 'ant-design-vue/es/config-provider';
import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface'; import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
import { listBase5G } from '@/api/neUser/base5G'; import { listBase5G } from '@/api/neUser/base5G';
import useI18n from '@/hooks/useI18n'; import useI18n from '@/hooks/useI18n';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants'; import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';

8
src/views/neUser/ims/index.vue
View File

@@ -1,10 +1,10 @@
<script setup lang="ts"> <script setup lang="ts">
import { reactive, ref, onMounted, toRaw } from 'vue'; import { reactive, ref, onMounted, toRaw } from 'vue';
import { PageContainer } from 'antdv-pro-layout'; import { PageContainer } from 'antdv-pro-layout';
import { message } from 'ant-design-vue/lib'; import { message } from 'ant-design-vue/es';
import { SizeType } from 'ant-design-vue/lib/config-provider'; import { SizeType } from 'ant-design-vue/es/config-provider';
import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface'; import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
import { ColumnsType } from 'ant-design-vue/lib/table'; import { ColumnsType } from 'ant-design-vue/es/table';
import { listUEInfoByIMS } from '@/api/neUser/ims'; import { listUEInfoByIMS } from '@/api/neUser/ims';
import useNeInfoStore from '@/store/modules/neinfo'; import useNeInfoStore from '@/store/modules/neinfo';
import useI18n from '@/hooks/useI18n'; import useI18n from '@/hooks/useI18n';

8
src/views/neUser/n3iwf/index.vue
View File

@@ -1,10 +1,10 @@
<script setup lang="ts"> <script setup lang="ts">
import { reactive, ref, onMounted, toRaw } from 'vue'; import { reactive, ref, onMounted, toRaw } from 'vue';
import { PageContainer } from 'antdv-pro-layout'; import { PageContainer } from 'antdv-pro-layout';
import { message } from 'ant-design-vue/lib'; import { message } from 'ant-design-vue/es';
import { SizeType } from 'ant-design-vue/lib/config-provider'; import { SizeType } from 'ant-design-vue/es/config-provider';
import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface'; import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
import { ColumnsType } from 'ant-design-vue/lib/table'; import { ColumnsType } from 'ant-design-vue/es/table';
import { listN3iwf } from '@/api/neUser/n3iwf'; import { listN3iwf } from '@/api/neUser/n3iwf';
import useNeInfoStore from '@/store/modules/neinfo'; import useNeInfoStore from '@/store/modules/neinfo';
import useI18n from '@/hooks/useI18n'; import useI18n from '@/hooks/useI18n';

8
src/views/neUser/nssf/index.vue
View File

@@ -1,10 +1,10 @@
<script setup lang="ts"> <script setup lang="ts">
import { reactive, ref, onMounted, toRaw } from 'vue'; import { reactive, ref, onMounted, toRaw } from 'vue';
import { PageContainer } from 'antdv-pro-layout'; import { PageContainer } from 'antdv-pro-layout';
import { message } from 'ant-design-vue/lib'; import { message } from 'ant-design-vue/es';
import { SizeType } from 'ant-design-vue/lib/config-provider'; import { SizeType } from 'ant-design-vue/es/config-provider';
import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface'; import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
import { ColumnsType } from 'ant-design-vue/lib/table'; import { ColumnsType } from 'ant-design-vue/es/table';
import { listNSSF } from '@/api/neUser/nssf'; import { listNSSF } from '@/api/neUser/nssf';
import useNeInfoStore from '@/store/modules/neinfo'; import useNeInfoStore from '@/store/modules/neinfo';
import useI18n from '@/hooks/useI18n'; import useI18n from '@/hooks/useI18n';

13
src/views/neUser/nssfAmf/index.vue
View File

@@ -1,19 +1,14 @@
<script setup lang="ts"> <script setup lang="ts">
import { reactive, ref, onMounted, toRaw } from 'vue'; import { reactive, onMounted } from 'vue';
import { PageContainer } from 'antdv-pro-layout'; import { PageContainer } from 'antdv-pro-layout';
import { message } from 'ant-design-vue/lib'; import { SizeType } from 'ant-design-vue/es/config-provider';
import { SizeType } from 'ant-design-vue/lib/config-provider'; import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface'; import { ColumnsType } from 'ant-design-vue/es/table';
import { ColumnsType } from 'ant-design-vue/lib/table';
import { listNSSFAMF } from '@/api/neUser/nssfAmf'; import { listNSSFAMF } from '@/api/neUser/nssfAmf';
import useNeInfoStore from '@/store/modules/neinfo';
import useI18n from '@/hooks/useI18n'; import useI18n from '@/hooks/useI18n';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants'; import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
const { t } = useI18n(); const { t } = useI18n();
/**网元参数 */
let neOtions = ref<Record<string, any>[]>([]);
/**表格状态类型 */ /**表格状态类型 */
type TabeStateType = { type TabeStateType = {
/**加载等待 */ /**加载等待 */

27
src/views/neUser/ue/index.vue
View File

@@ -1,10 +1,11 @@
<script setup lang="ts"> <script setup lang="ts">
import { reactive, ref, onMounted, toRaw } from 'vue'; import { reactive, ref, onMounted, toRaw } from 'vue';
import { PageContainer } from 'antdv-pro-layout'; import { PageContainer } from 'antdv-pro-layout';
import { message } from 'ant-design-vue/lib'; import { ProModal } from 'antdv-pro-modal';
import { SizeType } from 'ant-design-vue/lib/config-provider'; import { message } from 'ant-design-vue/es';
import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface'; import { SizeType } from 'ant-design-vue/es/config-provider';
import { ColumnsType } from 'ant-design-vue/lib/table'; import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
import { ColumnsType } from 'ant-design-vue/es/table';
import { listSMFSubscribers } from '@/api/neData/smf'; import { listSMFSubscribers } from '@/api/neData/smf';
import useNeInfoStore from '@/store/modules/neinfo'; import useNeInfoStore from '@/store/modules/neinfo';
import useI18n from '@/hooks/useI18n'; import useI18n from '@/hooks/useI18n';
@@ -160,9 +161,9 @@ function fnTableSize({ key }: MenuInfo) {
/**对话框对象信息状态类型 */ /**对话框对象信息状态类型 */
type ModalStateType = { type ModalStateType = {
/**详情框是否显示 */ /**详情框是否显示 */
visibleByView: boolean; openByView: boolean;
/**新增框或修改框是否显示 */ /**新增框或修改框是否显示 */
visibleByEdit: boolean; openByEdit: boolean;
/**标题 */ /**标题 */
title: string; title: string;
/**表单数据 */ /**表单数据 */
@@ -173,8 +174,8 @@ type ModalStateType = {
/**对话框对象信息状态 */ /**对话框对象信息状态 */
let modalState: ModalStateType = reactive({ let modalState: ModalStateType = reactive({
visibleByView: false, openByView: false,
visibleByEdit: false, openByEdit: false,
title: '在线信息', title: '在线信息',
from: { from: {
imsi: '', imsi: '',
@@ -204,7 +205,7 @@ function fnModalVisibleByVive(row: Record<string, any>) {
} }
modalState.from = Object.assign(modalState.from, row); modalState.from = Object.assign(modalState.from, row);
modalState.title = `${row.imsi}`; modalState.title = `${row.imsi}`;
modalState.visibleByView = true; modalState.openByView = true;
} }
/** /**
@@ -212,8 +213,8 @@ function fnModalVisibleByVive(row: Record<string, any>) {
* 进行表达规则校验 * 进行表达规则校验
*/ */
function fnModalCancel() { function fnModalCancel() {
modalState.visibleByEdit = false; modalState.openByEdit = false;
modalState.visibleByView = false; modalState.openByView = false;
} }
/**查询列表, pageNum初始页数 */ /**查询列表, pageNum初始页数 */
@@ -404,13 +405,13 @@ onMounted(() => {
<ProModal <ProModal
:drag="true" :drag="true"
:width="800" :width="800"
:visible="modalState.visibleByView" :open="modalState.openByView"
:title="modalState.title" :title="modalState.title"
@cancel="fnModalCancel" @cancel="fnModalCancel"
:footer="false" :footer="false"
> >
<a-form layout="horizontal" labelAlign="left" :labelWrap="false"> <a-form layout="horizontal" labelAlign="left" :labelWrap="false">
<a-row :gutter="8"> <a-row>
<a-col :lg="8" :md="8" :xs="24"> <a-col :lg="8" :md="8" :xs="24">
<a-form-item label="IMSI" name="imsi"> <a-form-item label="IMSI" name="imsi">
{{ modalState.from.imsi }} {{ modalState.from.imsi }}

40
src/views/perfManage/customTarget/index.vue
View File

@@ -1,18 +1,17 @@
<script setup lang="ts"> <script setup lang="ts">
import { reactive, onMounted, ref, toRaw } from 'vue'; import { reactive, onMounted, ref, toRaw } from 'vue';
import { PageContainer } from 'antdv-pro-layout'; import { PageContainer } from 'antdv-pro-layout';
import { Form, message, Modal } from 'ant-design-vue/lib'; import { ProModal } from 'antdv-pro-modal';
import { SizeType } from 'ant-design-vue/lib/config-provider'; import { Form, message, Modal } from 'ant-design-vue/es';
import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface'; import { SizeType } from 'ant-design-vue/es/config-provider';
import { ColumnsType } from 'ant-design-vue/lib/table'; import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
import { ColumnsType } from 'ant-design-vue/es/table';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants'; import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import useI18n from '@/hooks/useI18n'; import useI18n from '@/hooks/useI18n';
import useNeInfoStore from '@/store/modules/neinfo'; import useNeInfoStore from '@/store/modules/neinfo';
import { parseObjLineToHump } from '@/utils/parse-utils';
import { import {
addCustom, addCustom,
delCustom, delCustom,
getCustom,
listCustom, listCustom,
updateCustom, updateCustom,
} from '@/api/perfManage/customTarget'; } from '@/api/perfManage/customTarget';
@@ -208,9 +207,9 @@ function fnGetList(pageNum?: number) {
/**对话框对象信息状态类型 */ /**对话框对象信息状态类型 */
type ModalStateType = { type ModalStateType = {
/**详情框是否显示 */ /**详情框是否显示 */
visibleByView: boolean; openByView: boolean;
/**新增框或修改框是否显示 */ /**新增框或修改框是否显示 */
visibleByEdit: boolean; openByEdit: boolean;
/**标题 */ /**标题 */
title: string; title: string;
/**网元类型设备对象 */ /**网元类型设备对象 */
@@ -227,8 +226,8 @@ type ModalStateType = {
/**对话框对象信息状态 */ /**对话框对象信息状态 */
let modalState: ModalStateType = reactive({ let modalState: ModalStateType = reactive({
visibleByView: false, openByView: false,
visibleByEdit: false, openByEdit: false,
title: '', title: '',
neType: [], neType: [],
neTypPerformance: [], neTypPerformance: [],
@@ -340,13 +339,13 @@ function fnModalVisibleByEdit(row?: any, id?: any) {
if (!id) { if (!id) {
modalStateFrom.resetFields(); modalStateFrom.resetFields();
modalState.title = t('views.perfManage.customTarget.addCustom'); modalState.title = t('views.perfManage.customTarget.addCustom');
modalState.visibleByEdit = true; modalState.openByEdit = true;
fnSelectPerformanceInit(modalState.from.neType); fnSelectPerformanceInit(modalState.from.neType);
} else { } else {
fnSelectPerformanceInit(row.neType); fnSelectPerformanceInit(row.neType);
modalState.from = Object.assign(modalState.from, row); modalState.from = Object.assign(modalState.from, row);
modalState.title = t('views.perfManage.customTarget.editCustom'); modalState.title = t('views.perfManage.customTarget.editCustom');
modalState.visibleByEdit = true; modalState.openByEdit = true;
} }
} }
@@ -395,7 +394,7 @@ function fnModalOk() {
* 进行表达规则校验 * 进行表达规则校验
*/ */
function fnModalCancel() { function fnModalCancel() {
modalState.visibleByEdit = false; modalState.openByEdit = false;
modalState.confirmLoading = false; modalState.confirmLoading = false;
modalStateFrom.resetFields(); modalStateFrom.resetFields();
modalState.neType = []; modalState.neType = [];
@@ -465,10 +464,7 @@ onMounted(() => {
<a-form :model="queryParams" name="queryParams" layout="horizontal"> <a-form :model="queryParams" name="queryParams" layout="horizontal">
<a-row :gutter="16"> <a-row :gutter="16">
<a-col :lg="6" :md="12" :xs="24"> <a-col :lg="6" :md="12" :xs="24">
<a-form-item <a-form-item :label="t('views.ne.common.neType')" name="neType ">
:label="t('views.ne.common.neType')"
name="neType "
>
<a-auto-complete <a-auto-complete
v-model:value="queryParams.neType" v-model:value="queryParams.neType"
:options="neCascaderOptions" :options="neCascaderOptions"
@@ -609,7 +605,7 @@ onMounted(() => {
:destroyOnClose="true" :destroyOnClose="true"
:keyboard="false" :keyboard="false"
:mask-closable="false" :mask-closable="false"
:visible="modalState.visibleByEdit" v-model:open="modalState.openByEdit"
:title="modalState.title" :title="modalState.title"
:confirm-loading="modalState.confirmLoading" :confirm-loading="modalState.confirmLoading"
@ok="fnModalOk" @ok="fnModalOk"
@@ -621,7 +617,7 @@ onMounted(() => {
:label-col="{ span: 6 }" :label-col="{ span: 6 }"
:label-wrap="true" :label-wrap="true"
> >
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.ne.common.neType')" :label="t('views.ne.common.neType')"
@@ -640,7 +636,7 @@ onMounted(() => {
</a-col> </a-col>
</a-row> </a-row>
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.perfManage.customTarget.title')" :label="t('views.perfManage.customTarget.title')"
@@ -685,7 +681,7 @@ onMounted(() => {
</a-input> </a-input>
</a-form-item> </a-form-item>
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
name="perSelect" name="perSelect"
@@ -712,7 +708,7 @@ onMounted(() => {
</a-form-item> </a-form-item>
</a-col> </a-col>
</a-row> </a-row>
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.perfManage.customTarget.unit')" :label="t('views.perfManage.customTarget.unit')"

51
src/views/perfManage/goldTarget/index.vue
View File

@@ -24,10 +24,9 @@ import {
onBeforeUnmount, onBeforeUnmount,
} from 'vue'; } from 'vue';
import { PageContainer } from 'antdv-pro-layout'; import { PageContainer } from 'antdv-pro-layout';
import { message, Modal } from 'ant-design-vue/lib'; import { message, Modal } from 'ant-design-vue/es';
import { ColumnsType } from 'ant-design-vue/lib/table'; import { SizeType } from 'ant-design-vue/es/config-provider';
import { SizeType } from 'ant-design-vue/lib/config-provider'; import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
import TableColumnsDnd from '@/components/TableColumnsDnd/index.vue'; import TableColumnsDnd from '@/components/TableColumnsDnd/index.vue';
import { import {
RESULT_CODE_ERROR, RESULT_CODE_ERROR,
@@ -78,10 +77,10 @@ let neCascaderOptions = ref<Record<string, any>[]>([]);
let queryRangePicker = ref<[string, string]>(['', '']); let queryRangePicker = ref<[string, string]>(['', '']);
/**表格字段列 */ /**表格字段列 */
let tableColumns = ref<ColumnsType>([]); let tableColumns = ref<any[]>([]);
/**表格字段列排序 */ /**表格字段列排序 */
let tableColumnsDnd = ref<ColumnsType>([]); let tableColumnsDnd = ref<any[]>([]);
/**表格分页器参数 */ /**表格分页器参数 */
let tablePagination = reactive({ let tablePagination = reactive({
@@ -251,14 +250,18 @@ function fnGetListTitle() {
// 获取表头文字 // 获取表头文字
getKPITitle(state.neType[0]) getKPITitle(state.neType[0])
.then(res => {//处理getKPITitle返回的结果 .then(res => {
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {//检查值 //处理getKPITitle返回的结果
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
//检查值
tableColumns.value = []; //设为空数组 tableColumns.value = []; //设为空数组
const columns: ColumnsType = [];//初始化，构建新表头 const columns: any[] = []; //初始化，构建新表头
for (const item of res.data) {//遍历res.data for (const item of res.data) {
//遍历res.data
const kpiDisplay = item[`${language}Title`]; //提取标题kpiDisplay和ID标识kpiValue const kpiDisplay = item[`${language}Title`]; //提取标题kpiDisplay和ID标识kpiValue
const kpiValue = item[`kpiId`]; const kpiValue = item[`kpiId`];
columns.push({// columns.push({
//
title: kpiDisplay, title: kpiDisplay,
dataIndex: kpiValue, dataIndex: kpiValue,
align: 'left', align: 'left',
@@ -297,7 +300,8 @@ function fnGetListTitle() {
return false; return false;
} }
}) })
.then(result => {//result是前一个.then返回的值(true or false) .then(result => {
//result是前一个.then返回的值(true or false)
result && fnGetList(); result && fnGetList();
}); });
} }
@@ -338,23 +342,27 @@ function fnRanderChart() {
if (!container) return; //若没有，则退出函数 if (!container) return; //若没有，则退出函数
kpiChart.value = markRaw(echarts.init(container, 'light')); kpiChart.value = markRaw(echarts.init(container, 'light'));
//初始化Echarts图表实例，应用light主题，并赋值给kpiChart.value，markRaw是vue函数，用于标记对象为不可响应 //初始化Echarts图表实例，应用light主题，并赋值给kpiChart.value，markRaw是vue函数，用于标记对象为不可响应
const option: EChartsOption = {//定义图表的配置对象，tooltip的出发方式为axis const option: EChartsOption = {
//定义图表的配置对象，tooltip的出发方式为axis
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
position: function (pt: any) { position: function (pt: any) {
return [pt[0], '10%']; return [pt[0], '10%'];
}, },
}, },
xAxis: {//x类别轴 xAxis: {
//x类别轴
type: 'category', type: 'category',
boundaryGap: false, boundaryGap: false,
data: [], // 数据x轴 data: [], // 数据x轴
}, },
yAxis: {//y类别轴 yAxis: {
//y类别轴
type: 'value', type: 'value',
boundaryGap: [0, '100%'], boundaryGap: [0, '100%'],
}, },
legend: {//图例垂直滚动 legend: {
//图例垂直滚动
type: 'scroll', type: 'scroll',
orient: 'vertical', orient: 'vertical',
top: 40, top: 40,
@@ -367,13 +375,15 @@ function fnRanderChart() {
icon: 'circle', icon: 'circle',
selected: {}, selected: {},
}, },
grid: {//网格区域边距 grid: {
//网格区域边距
left: '10%', left: '10%',
right: '30%', right: '30%',
bottom: '20%', bottom: '20%',
}, },
dataZoom: [ dataZoom: [
{//启用图表的数据缩放，范围90%-100% {
//启用图表的数据缩放，范围90%-100%
type: 'inside', type: 'inside',
start: 90, start: 90,
end: 100, end: 100,
@@ -648,10 +658,7 @@ onBeforeUnmount(() => {
<a-form :model="queryParams" name="queryParamsFrom" layout="horizontal"> <a-form :model="queryParams" name="queryParamsFrom" layout="horizontal">
<a-row :gutter="16"> <a-row :gutter="16">
<a-col :lg="6" :md="12" :xs="24"> <a-col :lg="6" :md="12" :xs="24">
<a-form-item <a-form-item name="neType" :label="t('views.ne.common.neType')">
name="neType"
:label="t('views.ne.common.neType')"
>
<a-cascader <a-cascader
v-model:value="state.neType" v-model:value="state.neType"
:options="neCascaderOptions" :options="neCascaderOptions"

13
src/views/perfManage/kpiCReport/index.vue
View File

@@ -24,10 +24,9 @@ import {
onBeforeUnmount, onBeforeUnmount,
} from 'vue'; } from 'vue';
import { PageContainer } from 'antdv-pro-layout'; import { PageContainer } from 'antdv-pro-layout';
import { message, Modal } from 'ant-design-vue/lib'; import { message, Modal } from 'ant-design-vue/es';
import { ColumnsType } from 'ant-design-vue/lib/table'; import { SizeType } from 'ant-design-vue/es/config-provider';
import { SizeType } from 'ant-design-vue/lib/config-provider'; import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
import TableColumnsDnd from '@/components/TableColumnsDnd/index.vue'; import TableColumnsDnd from '@/components/TableColumnsDnd/index.vue';
import { import {
RESULT_CODE_ERROR, RESULT_CODE_ERROR,
@@ -79,10 +78,10 @@ let neCascaderOptions = ref<Record<string, any>[]>([]);
let queryRangePicker = ref<[string, string]>(['', '']); let queryRangePicker = ref<[string, string]>(['', '']);
/**表格字段列 */ /**表格字段列 */
let tableColumns = ref<ColumnsType>([]); let tableColumns = ref<any[]>([]);
/**表格字段列排序 */ /**表格字段列排序 */
let tableColumnsDnd = ref<ColumnsType>([]); let tableColumnsDnd = ref<any[]>([]);
/**表格分页器参数 */ /**表格分页器参数 */
let tablePagination = reactive({ let tablePagination = reactive({
@@ -264,7 +263,7 @@ function fnGetListTitle() {
return false; return false;
} }
tableColumns.value = []; tableColumns.value = [];
const columns: ColumnsType = []; const columns: any[] = [];
for (const item of res.data) { for (const item of res.data) {
const kpiDisplay = item[`unit`]? item[`title`]+ `(${item['unit']})`:item[`title`]; const kpiDisplay = item[`unit`]? item[`title`]+ `(${item['unit']})`:item[`title`];
const kpiValue = item[`kpiId`]; const kpiValue = item[`kpiId`];

505
src/views/perfManage/kpiKeyTarget/index.vue
View File

@@ -1,5 +1,4 @@
<script setup lang="ts"> <script setup lang="ts">
import { DragOutlined } from '@ant-design/icons-vue';
import { GridLayout, GridItem } from 'grid-layout-plus' import { GridLayout, GridItem } from 'grid-layout-plus'
import * as echarts from 'echarts'; import * as echarts from 'echarts';
import { PageContainer } from 'antdv-pro-layout'; import { PageContainer } from 'antdv-pro-layout';
@@ -12,12 +11,13 @@ import { parseDateToStr } from '@/utils/date-utils';
import dayjs, { Dayjs } from 'dayjs'; import dayjs, { Dayjs } from 'dayjs';
import useNeInfoStore from '@/store/modules/neinfo'; import useNeInfoStore from '@/store/modules/neinfo';
import { message } from 'ant-design-vue'; import { message } from 'ant-design-vue';
import { ColumnsType } from 'ant-design-vue/es/table';
import { generateColorRGBA } from '@/utils/generate-utils'; import { generateColorRGBA } from '@/utils/generate-utils';
import { LineSeriesOption } from 'echarts/charts'; import { LineSeriesOption } from 'echarts/charts';
import { SeriesOption } from 'echarts';
import { OptionsType, WS } from '@/plugins/ws-websocket'; import { OptionsType, WS } from '@/plugins/ws-websocket';
import { Select } from 'ant-design-vue';
import { useDebounceFn } from '@vueuse/core'; import { useDebounceFn } from '@vueuse/core';
import { DownOutlined } from '@ant-design/icons-vue';
import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
const { t, currentLocale } = useI18n(); const { t, currentLocale } = useI18n();
const neInfoStore = useNeInfoStore(); const neInfoStore = useNeInfoStore();
@@ -25,19 +25,18 @@ const neInfoStore = useNeInfoStore();
//WebSocket连接 //WebSocket连接
const ws = ref<WS | null>(null); const ws = ref<WS | null>(null);
//添加实时数据开关状态 //添加实时数据状态
const realTimeEnabled = ref(false); const realTimeEnabled = ref(false);
//实时数据开关 //实时数据开关
const handleRealTimeSwitch = (checked: any) => { const handleRealTimeSwitch = (checked: any) => {
fnRealTimeSwitch(!!checked); fnRealTimeSwitch(!!checked);
}; };
// 定义所有网元类型
// 定义所有可能的网元类型
const ALL_NE_TYPES = ['ims', 'amf', 'udm', 'smf', 'pcf','upf','mme','mocngw','smsc','cbc','ausf'] as const; const ALL_NE_TYPES = ['ims', 'amf', 'udm', 'smf', 'pcf','upf','mme','mocngw','smsc','cbc','ausf'] as const;
type AllChartType = typeof ALL_NE_TYPES[number]; type AllChartType = typeof ALL_NE_TYPES[number];
// 在 ALL_NE_TYPES 定义之后添加 // 在 ALL_NE_TYPES 定义之后添加 小写转大写
const neTypeOptions = ALL_NE_TYPES.map(type => ({ const neTypeOptions = ALL_NE_TYPES.map(type => ({
label: type.toUpperCase(), label: type.toUpperCase(),
value: type value: type
@@ -46,28 +45,43 @@ const neTypeOptions = ALL_NE_TYPES.map(type => ({
// 使用 ref 来使 networkElementTypes 变为响应式，并使用 ALL_NE_TYPES 初始化 // 使用 ref 来使 networkElementTypes 变为响应式，并使用 ALL_NE_TYPES 初始化
const networkElementTypes = ref<AllChartType[]>([...ALL_NE_TYPES]); const networkElementTypes = ref<AllChartType[]>([...ALL_NE_TYPES]);
// 添加选择的网元类型 // 选择的网元类型
const selectedNeTypes = ref<AllChartType[]>([]); const selectedNeTypes = ref<AllChartType[]>([]);
// 添加一个临时状态来存储最新的选择 // 临时状态 存储最新的选择
const latestSelectedTypes = ref<AllChartType[]>([]); const latestSelectedTypes = ref<AllChartType[]>([]);
//手动更新跟踪
const isManuallyUpdating = ref(false);
// 修改 watch 函数 // watch 监控函数
watch(selectedNeTypes, (newTypes) => { watch(selectedNeTypes, (newTypes) => {
console.log('Selected types changed:', newTypes); //if (isManuallyUpdating.value) return;
// 立即更新 UI
networkElementTypes.value = newTypes; networkElementTypes.value = newTypes;
// 更新临时状态
latestSelectedTypes.value = newTypes; latestSelectedTypes.value = newTypes;
// 触发防抖函数
debouncedUpdateCharts(); debouncedUpdateCharts();
// 更新 WebSocket 订阅
if (realTimeEnabled.value && ws.value) {
// 关闭现有连接
ws.value.close();
// 创建新的连接和更新后的订
const options: OptionsType = {
url: '/ws',
params: {
subGroupID: newTypes.map(type => `10_${type.toUpperCase()}_001`).join(','),
},
onmessage: wsMessage,
onerror: wsError,
};
ws.value.connect(options);
}
}, { deep: true }); }, { deep: true });
// 修改防抖函数 // 防抖函数
const debouncedUpdateCharts = useDebounceFn(() => { const debouncedUpdateCharts = useDebounceFn(() => {
// 比较当前选择和最新选择 // 比较当前选择和最新选择
if (JSON.stringify(latestSelectedTypes.value) !== JSON.stringify(selectedNeTypes.value)) { if (JSON.stringify(latestSelectedTypes.value) !== JSON.stringify(selectedNeTypes.value)) {
// 如果不致，以最新选择为准 // 如果不一致，以最新选择为准
selectedNeTypes.value = latestSelectedTypes.value; selectedNeTypes.value = latestSelectedTypes.value;
} }
@@ -92,8 +106,6 @@ const debouncedUpdateCharts = useDebounceFn(() => {
} }
}); });
console.log('Updated chartOrder:', chartOrder.value);
// 保存选中的网元类型到本地存储 // 保存选中的网元类型到本地存储
localStorage.setItem('selectedNeTypes', JSON.stringify(newTypes)); localStorage.setItem('selectedNeTypes', JSON.stringify(newTypes));
@@ -103,10 +115,8 @@ const debouncedUpdateCharts = useDebounceFn(() => {
}); });
}, 300); }, 300);
// 修改 initCharts 函数 // 改变状态时重新初始化图表 数
const initCharts = async () => { const initCharts = async () => {
console.log('Initializing charts for:', networkElementTypes.value);
// 清除不再需要的图表 // 清除不再需要的图表
Object.keys(chartStates).forEach((key) => { Object.keys(chartStates).forEach((key) => {
if (!networkElementTypes.value.includes(key as AllChartType)) { if (!networkElementTypes.value.includes(key as AllChartType)) {
@@ -123,7 +133,6 @@ const initCharts = async () => {
// 初始化或更新需要的图表 // 初始化或更新需要的图表
for (const type of networkElementTypes.value) { for (const type of networkElementTypes.value) {
console.log('Initializing chart for:', type);
if (!chartStates[type]) { if (!chartStates[type]) {
chartStates[type] = createChartState(); chartStates[type] = createChartState();
} }
@@ -137,19 +146,17 @@ const initCharts = async () => {
} }
} }
console.log('Finished initializing charts'); // 不要在这里保存布局，因为这可能会覆盖我们刚刚设置的布局
// localStorage.setItem('chartOrder', JSON.stringify(chartOrder.value));
// 保存更新后的布局
localStorage.setItem('chartOrder', JSON.stringify(chartOrder.value));
}; };
// 添加类型定义 // 位置类型定义(记录布局）
interface LayoutItem { interface LayoutItem {
x: number; x: number;
y: number; y: number;
w: number; w: number;
h: number; h: number;
i: AllChartType; // 将 ChartType 改为 AllChartType i: AllChartType;
} }
type Layout = LayoutItem[]; type Layout = LayoutItem[];
@@ -157,7 +164,7 @@ type Layout = LayoutItem[];
//构建响应式数组储存图表类型数据 //构建响应式数组储存图表类型数据
const chartOrder = ref<Layout>( const chartOrder = ref<Layout>(
JSON.parse(localStorage.getItem('chartOrder') || 'null') || JSON.parse(localStorage.getItem('chartOrder') || 'null') ||
networkElementTypes.value.map((type, index) => ({ networkElementTypes.value.map((type, index) => ({//系统默认布局
x: index % 2 * 6, // 每行两个图表，宽度为6 x: index % 2 * 6, // 每行两个图表，宽度为6
y: Math.floor(index / 2) * 4, // 每个图表据 4 个单位高度 y: Math.floor(index / 2) * 4, // 每个图表据 4 个单位高度
w: 6, // 宽度为6单位 w: 6, // 宽度为6单位
@@ -166,26 +173,32 @@ const chartOrder = ref<Layout>(
})) }))
); );
// 改变布局触发更新 // 监听带防抖
const handleLayoutUpdated = (newLayout: Layout) => { const handleLayoutUpdated = useDebounceFn((newLayout: Layout) => {
if (isManuallyUpdating.value) {
return;
}
const filteredLayout = newLayout.filter(item => networkElementTypes.value.includes(item.i)); const filteredLayout = newLayout.filter(item => networkElementTypes.value.includes(item.i));
if (JSON.stringify(filteredLayout) !== JSON.stringify(chartOrder.value)) { if (JSON.stringify(filteredLayout) !== JSON.stringify(chartOrder.value)) {
chartOrder.value = filteredLayout; chartOrder.value = filteredLayout;
// 保存布局到 localStorage
localStorage.setItem('chartOrder', JSON.stringify(chartOrder.value)); localStorage.setItem('chartOrder', JSON.stringify(chartOrder.value));
nextTick(() => { nextTick(() => {
chartOrder.value.forEach((item) => { chartOrder.value.forEach((item) => {
const state = chartStates[item.i]; const state = chartStates[item.i];
if (state?.chart.value) { if (state?.chart.value) {
state.chart.value.resize(); state.chart.value.resize();
renderChart(item.i);
} }
}); });
}); });
} else {
console.log('No change in layout, skipping update');
} }
}; }, 200); // 200ms 的防抖时间
// 监听 chartOrder 的变化 // 监听 chartOrder 的变化
watch(chartOrder, () => { watch(chartOrder, (newOrder, oldOrder) => {
if (JSON.stringify(newOrder) !== JSON.stringify(oldOrder)) {
nextTick(() => { nextTick(() => {
Object.values(chartStates).forEach(state => { Object.values(chartStates).forEach(state => {
if (state.chart.value) { if (state.chart.value) {
@@ -193,7 +206,8 @@ watch(chartOrder, () => {
} }
}); });
}); });
}); }
}, { deep: true });
// 定义表格状态类型 // 定义表格状态类型
type TableStateType = { type TableStateType = {
@@ -204,7 +218,6 @@ type TableStateType = {
selectedRowKeys: (string | number)[]; selectedRowKeys: (string | number)[];
}; };
// 创建可复用的状态 // 创建可复用的状态
const createChartState = () => { const createChartState = () => {
const chartDom = ref<HTMLElement | null>(null); const chartDom = ref<HTMLElement | null>(null);
@@ -215,7 +228,7 @@ const createChartState = () => {
chartDom, chartDom,
chart, chart,
observer, observer,
tableColumns: ref<ColumnsType>([]), tableColumns: ref<any[]>([]),
tableState: reactive<TableStateType>({ tableState: reactive<TableStateType>({
loading: false, loading: false,
size: 'small', size: 'small',
@@ -229,7 +242,7 @@ const createChartState = () => {
}; };
}; };
// 为每种图表类型创建状 // 图表类型状态
const chartStates: Record<AllChartType, ReturnType<typeof createChartState>> = Object.fromEntries( const chartStates: Record<AllChartType, ReturnType<typeof createChartState>> = Object.fromEntries(
networkElementTypes.value.map(type => [type, createChartState()]) networkElementTypes.value.map(type => [type, createChartState()])
) as Record<AllChartType, ReturnType<typeof createChartState>>; ) as Record<AllChartType, ReturnType<typeof createChartState>>;
@@ -240,17 +253,13 @@ interface RangePicker extends Record<AllChartType, [string, string]> {
ranges: Record<string, [Dayjs, Dayjs]>; ranges: Record<string, [Dayjs, Dayjs]>;
} }
// 创建日期选择器状态 // 日期选择器状态
const rangePicker = reactive<RangePicker>({ const rangePicker = reactive<RangePicker>({
...Object.fromEntries(networkElementTypes.value.map(type => [ ...Object.fromEntries(networkElementTypes.value.map(type => [
type, type,
// [
// dayjs('2024-09-20 00:00:00').valueOf().toString(),//拟数据的日期设2024.9.20
// dayjs('2024-09-20 23:59:59').valueOf().toString()
// ]
[ [
dayjs().startOf('day').valueOf().toString(), // 天 0 点 0 分 0 秒 dayjs().startOf('day').valueOf().toString(), // 0 点 0 分 0 秒
dayjs().valueOf().toString() // 当前时间 dayjs().valueOf().toString() // 此时
] ]
])) as Record<AllChartType, [string, string]>, ])) as Record<AllChartType, [string, string]>,
placeholder: [t('views.monitor.monitor.startTime'), t('views.monitor.monitor.endTime')] as [string, string], placeholder: [t('views.monitor.monitor.startTime'), t('views.monitor.monitor.endTime')] as [string, string],
@@ -262,7 +271,7 @@ const rangePicker = reactive<RangePicker>({
} as Record<string, [Dayjs, Dayjs]>, } as Record<string, [Dayjs, Dayjs]>,
}); });
// 创建可复用的图表初始化函数 // 可复用的图表初始化函数
const initChart = (type: AllChartType) => { const initChart = (type: AllChartType) => {
const tryInit = (retries = 3) => { const tryInit = (retries = 3) => {
nextTick(() => { nextTick(() => {
@@ -297,7 +306,7 @@ const initChart = (type: AllChartType) => {
xAxis: { xAxis: {
type: 'category', type: 'category',
boundaryGap: false, boundaryGap: false,
data: [], data: state.chartDataXAxisData,
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',
@@ -312,7 +321,7 @@ const initChart = (type: AllChartType) => {
color: '#646A73', color: '#646A73',
}, },
icon: 'circle', icon: 'circle',
selected: {}, selected: state.chartLegendSelected,
}, },
grid: { grid: {
left: '10%', left: '10%',
@@ -330,10 +339,10 @@ const initChart = (type: AllChartType) => {
end: 100, end: 100,
}, },
], ],
series: [], series: state.chartDataYSeriesData as SeriesOption[],
}; };
state.chart.value.setOption(option); state.chart.value.setOption(option);
state.chart.value.resize(); // 确保图表正确调整大小 state.chart.value.resize();
// 创建 ResizeObserver 实例 // 创建 ResizeObserver 实例
if (state.observer.value) { if (state.observer.value) {
@@ -345,7 +354,7 @@ const initChart = (type: AllChartType) => {
} }
}); });
// 开始观察图表容器 // 观察图表容器
state.observer.value.observe(container); state.observer.value.observe(container);
}); });
}; };
@@ -353,11 +362,9 @@ const initChart = (type: AllChartType) => {
tryInit(); tryInit();
}; };
// 可复用的数据获取函数
// 可复用的数据获函数
const fetchData = async (type: AllChartType) => { const fetchData = async (type: AllChartType) => {
const state = chartStates[type]; // 直接使用 type const state = chartStates[type]; // 直使用 type
const neId = '001'; const neId = '001';
state.tableState.loading = true; state.tableState.loading = true;
try { try {
@@ -386,31 +393,37 @@ const fetchData = async (type: AllChartType) => {
} }
}; };
//建立实时数据连接 //实时数连接开关
function fnRealTimeSwitch(bool: boolean) { function fnRealTimeSwitch(bool: boolean) {
realTimeEnabled.value = bool; realTimeEnabled.value = bool;
if (bool) { if (bool) {
if(!ws.value) { if(!ws.value) {
ws.value = new WS(); ws.value = new WS();
} }
// 清空所有图表的现有数据
Object.values(chartStates).forEach(state => { Object.values(chartStates).forEach(state => {
state.tableState.seached = false; state.tableState.seached = false;
state.chartDataXAxisData = [];
state.chartDataYSeriesData.forEach(series => {
series.data = [];
});
if (state.chart.value) {
state.chart.value.setOption({
xAxis: { data: [] },
series: state.chartDataYSeriesData
});
}
}); });
// 建立连接
const options: OptionsType = { const options: OptionsType = {
url: '/ws', url: '/ws',
params: { params: {
subGroupID: networkElementTypes.value.map(type => `10_${type.toUpperCase()}_001`).join(','), subGroupID: selectedNeTypes.value.map(type => `10_${type.toUpperCase()}_001`).join(','),
}, },
onmessage: wsMessage, onmessage: wsMessage,
onerror: wsError, onerror: wsError,
}; };
ws.value.connect(options); ws.value.connect(options);
} else if(ws.value) { } else if(ws.value) {
Object.values(chartStates).forEach(state => { Object.values(chartStates).forEach(state => {
state.tableState.seached = true; state.tableState.seached = true;
}); });
@@ -419,13 +432,13 @@ function fnRealTimeSwitch(bool: boolean) {
} }
} }
// 接收数据后错误回 // 接收数据后错误回调
function wsError() { function wsError() {
message.error(t('common.websocketError')); message.error(t('common.websocketError'));
} }
// 修改 wsMessage 数 // 接收数据回调
function wsMessage(res: Record<string, any>) { function wsMessage(res: Record<string, any>) {
const { code, data } = res; const { code, data } = res;
if (code === RESULT_CODE_ERROR) { if (code === RESULT_CODE_ERROR) {
@@ -437,53 +450,55 @@ function wsMessage(res: Record<string, any>) {
return; return;
} }
networkElementTypes.value.forEach((type) => { const neType = data.groupId.split('_')[1].toLowerCase() as AllChartType;
const state = chartStates[type];
const kpiEvent:any = data.data[type.toUpperCase()];
if (kpiEvent) { const state = chartStates[neType];
if (kpiEvent.timeGroup) { if (!state) {
const newTime = parseDateToStr(+kpiEvent.timeGroup); console.warn(`No chart state found for ${neType}`);
return;
}
const kpiEvent = data.data;
if (!kpiEvent) {
console.warn(`No data found for ${neType}`);
return;
}
const newTime = parseDateToStr(kpiEvent.timeGroup ? +kpiEvent.timeGroup : Date.now());
// 只有在实时数据模式下才更新图表
if (realTimeEnabled.value) {
// 更新X轴数据
state.chartDataXAxisData.push(newTime); state.chartDataXAxisData.push(newTime);
if (state.chartDataXAxisData.length > 100) { if (state.chartDataXAxisData.length > 100) {
state.chartDataXAxisData.shift(); state.chartDataXAxisData.shift();
} }
// 使用 appendData 方法追加数据 // 更新每个系列的数据
state.chartDataYSeriesData.forEach(series => { state.chartDataYSeriesData.forEach(series => {
if (kpiEvent[series.customKey as string] !== undefined) { const kpiKey = series.customKey as string;
const newValue = +kpiEvent[series.customKey as string]; if (kpiEvent[kpiKey] !== undefined) {
if (state.chart.value) { const newValue = +kpiEvent[kpiKey];
state.chart.value.appendData({ series.data.push([newTime, newValue]);
seriesIndex: state.chartDataYSeriesData.indexOf(series),
data: [[newTime, newValue]]
});
}
// 保持数据长度不超过100
if (series.data.length > 100) { if (series.data.length > 100) {
series.data.shift(); series.data.shift();
} }
} }
}); });
// 更新 X 轴 // 立即更新图表
if (state.chart.value) { if (state.chart.value) {
state.chart.value.setOption({ state.chart.value.setOption({
xAxis: { data: state.chartDataXAxisData } xAxis: { data: state.chartDataXAxisData },
series: state.chartDataYSeriesData as SeriesOption[]
}); });
} }
} }
} }
});
}
type LineDataItem = {
value: number;
[key: string]: any;
};
interface CustomSeriesOption extends Omit<LineSeriesOption, 'data'> { interface CustomSeriesOption extends Omit<LineSeriesOption, 'data'> {
customKey?: string; customKey?: string;
data: (number | LineDataItem)[]; data: Array<[string, number]>;
} }
// 创建可复用的图表渲染函数 // 创建可复用的图表渲染函数
const renderChart = (type: AllChartType) => { const renderChart = (type: AllChartType) => {
@@ -491,7 +506,7 @@ const renderChart = (type: AllChartType) => {
if (state.chart.value == null) { if (state.chart.value == null) {
return; return;
} }
// 重置数据 // 置数据
state.chartLegendSelected = {}; state.chartLegendSelected = {};
state.chartDataXAxisData = []; state.chartDataXAxisData = [];
state.chartDataYSeriesData = []; state.chartDataYSeriesData = [];
@@ -522,7 +537,7 @@ const renderChart = (type: AllChartType) => {
for (const item of orgData) { for (const item of orgData) {
state.chartDataXAxisData.push(parseDateToStr(+item.timeGroup)); state.chartDataXAxisData.push(parseDateToStr(+item.timeGroup));
for (const series of state.chartDataYSeriesData) { for (const series of state.chartDataYSeriesData) {
series.data.push(+item[series.customKey as string]); series.data.push([parseDateToStr(+item.timeGroup), +item[series.customKey as string]]);
} }
} }
@@ -535,7 +550,7 @@ const renderChart = (type: AllChartType) => {
type: 'category', type: 'category',
boundaryGap: false, boundaryGap: false,
}, },
series: state.chartDataYSeriesData, series: state.chartDataYSeriesData as SeriesOption[],
dataZoom: [ dataZoom: [
{ {
type: 'inside', type: 'inside',
@@ -553,7 +568,7 @@ const renderChart = (type: AllChartType) => {
}; };
// 获取头数据 // 获网元指标数据
const fetchKPITitle = async (type: AllChartType) => { const fetchKPITitle = async (type: AllChartType) => {
const language = currentLocale.value.split('_')[0] === 'zh' ? 'cn' : currentLocale.value.split('_')[0]; const language = currentLocale.value.split('_')[0] === 'zh' ? 'cn' : currentLocale.value.split('_')[0];
try { try {
@@ -591,7 +606,7 @@ onMounted(async () => {
selectedNeTypes.value = parsedSelectedNeTypes; selectedNeTypes.value = parsedSelectedNeTypes;
networkElementTypes.value = parsedSelectedNeTypes; networkElementTypes.value = parsedSelectedNeTypes;
} else { } else {
// 如果没有保存的选中网元类型，则使用默认选择 // 如果没有保存的选中网元类型，则用默认选择
selectedNeTypes.value = [...DEFAULT_NE_TYPES]; selectedNeTypes.value = [...DEFAULT_NE_TYPES];
networkElementTypes.value = [...DEFAULT_NE_TYPES]; networkElementTypes.value = [...DEFAULT_NE_TYPES];
// 保存这个默认选择到本地存储 // 保存这个默认选择到本地存储
@@ -601,24 +616,22 @@ onMounted(async () => {
// 初始化或更新 chartOrder // 初始化或更新 chartOrder
const savedLayout = localStorage.getItem('chartOrder'); const savedLayout = localStorage.getItem('chartOrder');
if (savedLayout) { if (savedLayout) {
const parsedLayout = JSON.parse(savedLayout); chartOrder.value = JSON.parse(savedLayout).filter((item: LayoutItem) =>
// 只保留当前选中的网元类型的布局 networkElementTypes.value.includes(item.i)
chartOrder.value = parsedLayout.filter((item: LayoutItem) => networkElementTypes.value.includes(item.i)); );
} }
// 如果 chartOrder 为空或者不包含所有选中的网元，重新创建布局 // 如果 chartOrder 为空或者不包含所有选中的网元，添加缺失的网元
if (chartOrder.value.length === 0 || chartOrder.value.length !== networkElementTypes.value.length) { const missingTypes = networkElementTypes.value.filter(type => !chartOrder.value.some(item => item.i === type));
chartOrder.value = networkElementTypes.value.map((type, index) => ({ missingTypes.forEach((type) => {
x: index % 2 * 6, chartOrder.value.push({
y: Math.floor(index / 2) * 4, x: (chartOrder.value.length % 2) * 6,
y: Math.floor(chartOrder.value.length / 2) * 4,
w: 6, w: 6,
h: 4, h: 4,
i: type, i: type,
})); });
} });
console.log('Initialized networkElementTypes:', networkElementTypes.value);
console.log('Initialized chartOrder:', chartOrder.value);
await initCharts(); await initCharts();
}); });
@@ -636,27 +649,205 @@ onUnmounted(() => {
state.observer.value.disconnect(); state.observer.value.disconnect();
} }
}); });
// 不需要显式取消防抖函数
}); });
</script>
const isSaving = ref(false);
const isRestoring = ref(false);
//保存布局按钮
const handleSaveLayout = async (info: MenuInfo) => {
if (typeof info.key === 'string' && !isSaving.value) {
isSaving.value = true;
isRestoring.value = true;
try {
await saveCurrentLayout(info.key);
} finally {
setTimeout(()=>{
isSaving.value = false;
isRestoring.value = false;
},700)
}
} else {
console.error('Invalid layout key or operation in progress');
}
};
//恢复布局按钮
const handleRestoreLayout = async (info: MenuInfo) => {
if (typeof info.key === 'string' && !isRestoring.value) {
isRestoring.value = true;
isSaving.value = true;
try {
await restoreSavedLayout(info.key);
} finally {
setTimeout(()=>{
isSaving.value = false;
isRestoring.value = false;
},700)
}
} else {
console.error('Invalid layout key or operation in progress');
}
};
// 保存当前布局
const saveCurrentLayout = async (layoutName: string) => {
const savedLayouts = JSON.parse(localStorage.getItem('savedLayouts') || '{}');
savedLayouts[layoutName] = {
layout: chartOrder.value,
selectedTypes: selectedNeTypes.value
};
localStorage.setItem('savedLayouts', JSON.stringify(savedLayouts));
message.success(t('views.perfManage.kpiKeyTarget.saveSuccess', { name: t(`views.perfManage.kpiKeyTarget.${layoutName}`)}));
};
//恢复已保存的布局
const restoreSavedLayout = async (layoutName: string) => {
const savedLayouts = JSON.parse(localStorage.getItem('savedLayouts') || '{}');
const savedLayout = savedLayouts[layoutName];
if (savedLayout && Array.isArray(savedLayout.selectedTypes) && Array.isArray(savedLayout.layout)) {
selectedNeTypes.value = savedLayout.selectedTypes;
networkElementTypes.value = savedLayout.selectedTypes;
// 更新布局
chartOrder.value = savedLayout.layout.filter((item: LayoutItem) =>
savedLayout.selectedTypes.includes(item.i)
);
// 如果有当前选中的网元类型不在保存的布局中，添加它们
const missingTypes = savedLayout.selectedTypes.filter((type: AllChartType) =>
!chartOrder.value.some(item => item.i === type)
);
missingTypes.forEach((type: AllChartType) => {
chartOrder.value.push({
x: (chartOrder.value.length % 2) * 6,
y: Math.floor(chartOrder.value.length / 2) * 4,
w: 6,
h: 4,
i: type,
});
});
localStorage.setItem('chartOrder', JSON.stringify(chartOrder.value));
localStorage.setItem('selectedNeTypes', JSON.stringify(selectedNeTypes.value));
await nextTick();
await initCharts();
message.success(t('views.perfManage.kpiKeyTarget.restoreSavedSuccess', { name: t(`views.perfManage.kpiKeyTarget.${layoutName}`)}));
} else {
message.warning(t('views.perfManage.kpiKeyTarget.noSavedLayout', { name: t(`views.perfManage.kpiKeyTarget.${layoutName}`)}));
}
};
// 应用全宽布局
const applyFullWidthLayout = () => {
isManuallyUpdating.value = true;
const newLayout = selectedNeTypes.value.map((type, index) => ({
x: 0,
y: index * 8,
w: 12,
h: 8,
i: type,
}));
nextTick(() => {
Object.assign(chartOrder.value, newLayout)
// chartOrder.value = newLayout;
localStorage.setItem('chartOrder', JSON.stringify(newLayout));
initCharts();
// 直接更新图表，不调用 handleLayoutUpdated
chartOrder.value.forEach((item) => {
const state = chartStates[item.i];
if (state?.chart.value) {
state.chart.value.resize();
renderChart(item.i);
}
});
isManuallyUpdating.value = false;
});
};
// 应用两列布局
const applyTwoColumnLayout = () => {
isManuallyUpdating.value = true;
const newLayout = selectedNeTypes.value.map((type, index) => ({
x: (index % 2) * 6,
y: Math.floor(index / 2) * 4,
w: 6,
h: 4,
i: type,
}));
nextTick(() => {
// chartOrder.value = newLayout;
Object.assign(chartOrder.value, newLayout)
localStorage.setItem('chartOrder', JSON.stringify(newLayout));
initCharts();
// 直接更新图表，不调用 handleLayoutUpdated
chartOrder.value.forEach((item) => {
const state = chartStates[item.i];
if (state?.chart.value) {
state.chart.value.resize();
renderChart(item.i);
}
});
isManuallyUpdating.value = false;
});
};
</script>
<template> <template>
<PageContainer> <PageContainer>
<a-card :bordered="false" class="control-card"> <a-card :bordered="false" class="control-card">
<a-form layout="inline"> <a-form layout="horizontal">
<a-form-item> <a-row :gutter="16">
<a-col :lg="4" :md="24" :xs="24">
<a-form-item :label="realTimeEnabled ? t('views.dashboard.cdr.realTimeDataStart') : t('views.dashboard.cdr.realTimeDataStop')">
<a-switch <a-switch
v-model:checked="realTimeEnabled" v-model:checked="realTimeEnabled"
@change="handleRealTimeSwitch" @change="handleRealTimeSwitch"
/> />
</a-form-item> </a-form-item>
<a-form-item> </a-col>
<span class="switch-label">{{ realTimeEnabled ? t('views.dashboard.cdr.realTimeDataStart') : t('views.dashboard.cdr.realTimeDataStop') }}</span> <a-col :lg="12" :md="24" :xs="24">
</a-form-item>
<a-form-item :label="t('views.ne.common.neType')" class="ne-type-select"> <a-form-item :label="t('views.ne.common.neType')" class="ne-type-select">
<a-checkbox-group v-model:value="selectedNeTypes" :options="neTypeOptions" /> <a-checkbox-group v-model:value="selectedNeTypes" :options="neTypeOptions" />
</a-form-item> </a-form-item>
</a-col>
<a-col :lg="6" :md="24" :xs="24">
<a-form-item>
<a-dropdown :disabled="isSaving">
<a-button :loading="isSaving">
{{ t('views.perfManage.kpiKeyTarget.saveLayout') }}
<DownOutlined />
</a-button>
<template #overlay>
<a-menu @click="handleSaveLayout">
<a-menu-item key="layout1">{{ t('views.perfManage.kpiKeyTarget.layout1') }}</a-menu-item>
<a-menu-item key="layout2">{{ t('views.perfManage.kpiKeyTarget.layout2') }}</a-menu-item>
<a-menu-item key="layout3">{{ t('views.perfManage.kpiKeyTarget.layout3') }}</a-menu-item>
</a-menu>
</template>
</a-dropdown>
<a-dropdown :disabled="isRestoring">
<a-button :loading="isRestoring">
{{ t('views.perfManage.kpiKeyTarget.restoreSaved') }}
<DownOutlined />
</a-button>
<template #overlay>
<a-menu @click="handleRestoreLayout">
<a-menu-item key="layout1">{{ t('views.perfManage.kpiKeyTarget.layout1') }}</a-menu-item>
<a-menu-item key="layout2">{{ t('views.perfManage.kpiKeyTarget.layout2') }}</a-menu-item>
<a-menu-item key="layout3">{{ t('views.perfManage.kpiKeyTarget.layout3') }}</a-menu-item>
</a-menu>
</template>
</a-dropdown>
<a-button @click="applyFullWidthLayout">
{{ t('views.perfManage.kpiKeyTarget.fullWidthLayout') }}
</a-button>
<a-button @click="applyTwoColumnLayout">
{{ t('views.perfManage.kpiKeyTarget.twoColumnLayout') }}
</a-button>
</a-form-item>
</a-col>
</a-row>
</a-form> </a-form>
</a-card> </a-card>
@@ -691,7 +882,12 @@ onUnmounted(() => {
drag-ignore-from=".no-drag" drag-ignore-from=".no-drag"
class="grid-item" class="grid-item"
> >
<div class="date-picker-wrapper"> <a-card :bordered="false" class="card-container">
<template #title>
<div class="card-header">
<div class="card-title">
<span>{{ item.i.toUpperCase() }}</span>
</div>
<a-range-picker <a-range-picker
v-model:value="rangePicker[item.i]" v-model:value="rangePicker[item.i]"
:allow-clear="false" :allow-clear="false"
@@ -701,16 +897,11 @@ onUnmounted(() => {
value-format="x" value-format="x"
:placeholder="rangePicker.placeholder" :placeholder="rangePicker.placeholder"
:ranges="rangePicker.ranges" :ranges="rangePicker.ranges"
style="width: 100%" style="width: 360px"
@change="() => fetchData(item.i)" @change="() => fetchData(item.i)"
class="no-drag"
></a-range-picker> ></a-range-picker>
</div> </div>
<a-card :bordered="false" class="card-container">
<template #title>
<div class="card-title">
<DragOutlined />
<span>{{ item.i.toUpperCase() }}</span>
</div>
</template> </template>
<div class='chart'> <div class='chart'>
<div :ref="el => { if (el && chartStates[item.i]) chartStates[item.i].chartDom.value = el as HTMLElement }"></div> <div :ref="el => { if (el && chartStates[item.i]) chartStates[item.i].chartDom.value = el as HTMLElement }"></div>
@@ -750,16 +941,20 @@ onUnmounted(() => {
flex-direction: column; flex-direction: column;
} }
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
cursor: move;
flex-wrap: wrap; /* 添加这行，允许内容换行 */
gap: 8px; /* 添加这行，为换行时的元素之间添加间隔 */
}
.card-title { .card-title {
display: flex; display: flex;
align-items: center; align-items: center;
cursor: move; flex-shrink: 0;
.anticon {
margin-right: 8px;
font-size: 16px;
color: #1890ff;
}
span { span {
font-size: 16px; font-size: 16px;
@@ -784,36 +979,9 @@ onUnmounted(() => {
white-space: nowrap; white-space: nowrap;
} }
.drag-handle {
display: flex;
align-items: center;
cursor: move;
.anticon {
margin-right: 8px;
font-size: 16px;
color: #1890ff;
}
span { :deep(.ant-card-body) {
font-size: 16px;
font-weight: 500;
}
}
.ne-type-select {
flex-grow: 1;
max-width: 100%;
:deep(.ant-checkbox-group) {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
}
:deep {
.ant-card-body {
flex: 1; flex: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -821,26 +989,35 @@ onUnmounted(() => {
overflow: hidden; overflow: hidden;
} }
.ant-form-item { :deep(.ant-form-item) {
margin-bottom: 0; margin-bottom: 0;
} }
.ant-form-item-label { :deep(.ant-form-item-label) {
font-weight: 500; font-weight: 500;
color: rgba(0, 0, 0, 0.85); color: rgba(0, 0, 0, 0.85);
} }
.anticon { :deep(.anticon) {
font-size: 16px; font-size: 16px;
color: #1890ff; color: #1890ff;
} }
.ant-select { :deep(.ant-select) {
min-width: 200px; min-width: 200px;
} }
.ant-card-head { :deep(.ant-card-head) {
cursor: move; padding: 8px 16px; /* 减小上下内边距 */
} }
:deep(.ant-card-head-title) {
padding: 8px 0; /* 减小上下内边距 */
width: 100%; // 确保标题占据全宽
}
:deep(.ant-range-picker) {
flex-shrink: 0; // 防止日期选择被压缩
max-width: 100%; // 确保在小屏幕上不会溢出
} }
</style> </style>

6
src/views/perfManage/perfData/index.vue
View File

@@ -1,9 +1,9 @@
<script setup lang="ts"> <script setup lang="ts">
import { reactive, ref, onMounted, toRaw } from 'vue'; import { reactive, ref, onMounted, toRaw } from 'vue';
import { PageContainer } from 'antdv-pro-layout'; import { PageContainer } from 'antdv-pro-layout';
import { SizeType } from 'ant-design-vue/lib/config-provider'; import { SizeType } from 'ant-design-vue/es/config-provider';
import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface'; import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
import { ColumnsType } from 'ant-design-vue/lib/table'; import { ColumnsType } from 'ant-design-vue/es/table';
import { parseDateToStr } from '@/utils/date-utils'; import { parseDateToStr } from '@/utils/date-utils';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants'; import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import { listperfData } from '@/api/perfManage/perfData'; import { listperfData } from '@/api/perfManage/perfData';

38
src/views/perfManage/perfThreshold/index.vue
View File

@@ -1,10 +1,11 @@
<script setup lang="ts"> <script setup lang="ts">
import { reactive, onMounted, ref, toRaw } from 'vue'; import { reactive, onMounted, toRaw } from 'vue';
import { PageContainer } from 'antdv-pro-layout'; import { PageContainer } from 'antdv-pro-layout';
import { Form, message, Modal } from 'ant-design-vue/lib'; import { ProModal } from 'antdv-pro-modal';
import { SizeType } from 'ant-design-vue/lib/config-provider'; import { Form, message, Modal } from 'ant-design-vue/es';
import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface'; import { SizeType } from 'ant-design-vue/es/config-provider';
import { ColumnsType } from 'ant-design-vue/lib/table'; import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
import { ColumnsType } from 'ant-design-vue/es/table';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants'; import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import useI18n from '@/hooks/useI18n'; import useI18n from '@/hooks/useI18n';
import useDictStore from '@/store/modules/dict'; import useDictStore from '@/store/modules/dict';
@@ -211,9 +212,9 @@ function fnGetList(pageNum?: number) {
/**对话框对象信息状态类型 */ /**对话框对象信息状态类型 */
type ModalStateType = { type ModalStateType = {
/**详情框是否显示 */ /**详情框是否显示 */
visibleByView: boolean; openByView: boolean;
/**新增框或修改框是否显示 */ /**新增框或修改框是否显示 */
visibleByEdit: boolean; openByEdit: boolean;
/**标题 */ /**标题 */
title: string; title: string;
/**网元类型设备对象 */ /**网元类型设备对象 */
@@ -228,8 +229,8 @@ type ModalStateType = {
/**对话框对象信息状态 */ /**对话框对象信息状态 */
let modalState: ModalStateType = reactive({ let modalState: ModalStateType = reactive({
visibleByView: false, openByView: false,
visibleByEdit: false, openByEdit: false,
title: '', title: '',
neType: [], neType: [],
neTypPerformance: [], neTypPerformance: [],
@@ -305,7 +306,7 @@ function fnModalVisibleByEdit(id?: string) {
if (!id) { if (!id) {
modalStateFrom.resetFields(); modalStateFrom.resetFields();
modalState.title = t('views.perfManage.perfThreshold.addThre'); modalState.title = t('views.perfManage.perfThreshold.addThre');
modalState.visibleByEdit = true; modalState.openByEdit = true;
} else { } else {
if (modalState.confirmLoading) return; if (modalState.confirmLoading) return;
const hide = message.loading(t('common.loading'), 0); const hide = message.loading(t('common.loading'), 0);
@@ -317,7 +318,7 @@ function fnModalVisibleByEdit(id?: string) {
fnSelectPerformanceInit(res.data.neType); fnSelectPerformanceInit(res.data.neType);
modalState.from = Object.assign(modalState.from, res.data); modalState.from = Object.assign(modalState.from, res.data);
modalState.title = t('views.perfManage.perfThreshold.editThre'); modalState.title = t('views.perfManage.perfThreshold.editThre');
modalState.visibleByEdit = true; modalState.openByEdit = true;
} else { } else {
message.error(t('views.perfManage.perfThreshold.errorThreInfo'), 3); message.error(t('views.perfManage.perfThreshold.errorThreInfo'), 3);
} }
@@ -345,7 +346,7 @@ function fnModalOk() {
content: t('common.msgSuccess', { msg: modalState.title }), content: t('common.msgSuccess', { msg: modalState.title }),
duration: 3, duration: 3,
}); });
modalState.visibleByEdit = false; modalState.openByEdit = false;
modalStateFrom.resetFields(); modalStateFrom.resetFields();
} else { } else {
message.error({ message.error({
@@ -370,7 +371,7 @@ function fnModalOk() {
* 进行表达规则校验 * 进行表达规则校验
*/ */
function fnModalCancel() { function fnModalCancel() {
modalState.visibleByEdit = false; modalState.openByEdit = false;
modalState.confirmLoading = false; modalState.confirmLoading = false;
modalStateFrom.resetFields(); modalStateFrom.resetFields();
modalState.neType = []; modalState.neType = [];
@@ -512,10 +513,7 @@ onMounted(() => {
<a-form :model="queryParams" name="queryParams" layout="horizontal"> <a-form :model="queryParams" name="queryParams" layout="horizontal">
<a-row :gutter="16"> <a-row :gutter="16">
<a-col :lg="6" :md="12" :xs="24"> <a-col :lg="6" :md="12" :xs="24">
<a-form-item <a-form-item :label="t('views.ne.common.neType')" name="neType ">
:label="t('views.ne.common.neType')"
name="neType "
>
<a-auto-complete <a-auto-complete
v-model:value="queryParams.neType" v-model:value="queryParams.neType"
:options="useNeInfoStore().getNeSelectOtions" :options="useNeInfoStore().getNeSelectOtions"
@@ -676,14 +674,14 @@ onMounted(() => {
:destroyOnClose="true" :destroyOnClose="true"
:keyboard="false" :keyboard="false"
:mask-closable="false" :mask-closable="false"
:visible="modalState.visibleByEdit" :open="modalState.openByEdit"
:title="modalState.title" :title="modalState.title"
:confirm-loading="modalState.confirmLoading" :confirm-loading="modalState.confirmLoading"
@ok="fnModalOk" @ok="fnModalOk"
@cancel="fnModalCancel" @cancel="fnModalCancel"
> >
<a-form name="modalStateFrom" layout="horizontal"> <a-form name="modalStateFrom" layout="horizontal">
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.ne.common.neType')" :label="t('views.ne.common.neType')"
@@ -716,7 +714,7 @@ onMounted(() => {
</a-select> </a-select>
</a-form-item> </a-form-item>
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.perfManage.perfThreshold.thresholdValue')" :label="t('views.perfManage.perfThreshold.thresholdValue')"

60
src/views/perfManage/taskManage/index.vue
View File

@@ -1,10 +1,11 @@
<script setup lang="ts"> <script setup lang="ts">
import { reactive, onMounted, ref, toRaw } from 'vue'; import { reactive, onMounted, ref, toRaw } from 'vue';
import { PageContainer } from 'antdv-pro-layout'; import { PageContainer } from 'antdv-pro-layout';
import { Form, message, Modal } from 'ant-design-vue/lib'; import { ProModal } from 'antdv-pro-modal';
import { SizeType } from 'ant-design-vue/lib/config-provider'; import { Form, message, Modal } from 'ant-design-vue/es';
import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface'; import { SizeType } from 'ant-design-vue/es/config-provider';
import { ColumnsType } from 'ant-design-vue/lib/table'; import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
import { ColumnsType } from 'ant-design-vue/es/table';
import { parseDateToStr } from '@/utils/date-utils'; import { parseDateToStr } from '@/utils/date-utils';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants'; import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import useI18n from '@/hooks/useI18n'; import useI18n from '@/hooks/useI18n';
@@ -244,9 +245,9 @@ function fnGetList(pageNum?: number) {
/**对话框对象信息状态类型 */ /**对话框对象信息状态类型 */
type ModalStateType = { type ModalStateType = {
/**详情框是否显示 */ /**详情框是否显示 */
visibleByView: boolean; openByView: boolean;
/**新增框或修改框是否显示 */ /**新增框或修改框是否显示 */
visibleByEdit: boolean; openByEdit: boolean;
/**标题 */ /**标题 */
title: string; title: string;
/**选择后清空 */ /**选择后清空 */
@@ -272,8 +273,8 @@ type ModalStateType = {
/**对话框对象信息状态 */ /**对话框对象信息状态 */
let modalState: ModalStateType = reactive({ let modalState: ModalStateType = reactive({
visibleByView: false, openByView: false,
visibleByEdit: false, openByEdit: false,
title: '', title: '',
initPeriods: [], initPeriods: [],
neType: [], neType: [],
@@ -453,7 +454,7 @@ function fnModalVisibleByVive(id: string) {
modalState.timeRangePicker = [res.data.startTime, res.data.endTime]; modalState.timeRangePicker = [res.data.startTime, res.data.endTime];
modalState.from = Object.assign(modalState.from, res.data); modalState.from = Object.assign(modalState.from, res.data);
modalState.title = t('views.perfManage.taskManage.viewTask'); modalState.title = t('views.perfManage.taskManage.viewTask');
modalState.visibleByView = true; modalState.openByView = true;
} else { } else {
message.error(t('views.perfManage.taskManage.errorTaskInfo'), 3); message.error(t('views.perfManage.taskManage.errorTaskInfo'), 3);
} }
@@ -468,7 +469,7 @@ function fnModalVisibleByEdit(id?: string) {
if (!id) { if (!id) {
modalStateFrom.resetFields(); modalStateFrom.resetFields();
modalState.title = t('views.perfManage.taskManage.addTask'); modalState.title = t('views.perfManage.taskManage.addTask');
modalState.visibleByEdit = true; modalState.openByEdit = true;
} else { } else {
if (modalState.confirmLoading) return; if (modalState.confirmLoading) return;
const hide = message.loading(t('common.loading'), 0); const hide = message.loading(t('common.loading'), 0);
@@ -528,7 +529,7 @@ function fnModalVisibleByEdit(id?: string) {
modalState.from.periods = []; modalState.from.periods = [];
} }
modalState.title = t('views.perfManage.taskManage.editTask'); modalState.title = t('views.perfManage.taskManage.editTask');
modalState.visibleByEdit = true; modalState.openByEdit = true;
} else { } else {
message.error(t('views.perfManage.taskManage.errorTaskInfo'), 3); message.error(t('views.perfManage.taskManage.errorTaskInfo'), 3);
} }
@@ -556,7 +557,7 @@ function fnModalOk() {
content: t('common.msgSuccess', { msg: modalState.title }), content: t('common.msgSuccess', { msg: modalState.title }),
duration: 3, duration: 3,
}); });
modalState.visibleByEdit = false; modalState.openByEdit = false;
modalStateFrom.resetFields(); modalStateFrom.resetFields();
} else { } else {
message.error({ message.error({
@@ -590,8 +591,8 @@ function updateStep(str: any) {
* 进行表达规则校验 * 进行表达规则校验
*/ */
function fnModalCancel() { function fnModalCancel() {
modalState.visibleByView = false; modalState.openByView = false;
modalState.visibleByEdit = false; modalState.openByEdit = false;
modalState.confirmLoading = false; modalState.confirmLoading = false;
modalStateFrom.resetFields(); modalStateFrom.resetFields();
modalState.timeRangePicker = ['', '']; modalState.timeRangePicker = ['', ''];
@@ -724,10 +725,7 @@ onMounted(() => {
<a-form :model="queryParams" name="queryParams" layout="horizontal"> <a-form :model="queryParams" name="queryParams" layout="horizontal">
<a-row :gutter="16"> <a-row :gutter="16">
<a-col :lg="6" :md="12" :xs="24"> <a-col :lg="6" :md="12" :xs="24">
<a-form-item <a-form-item :label="t('views.ne.common.neType')" name="neType ">
:label="t('views.ne.common.neType')"
name="neType "
>
<a-auto-complete <a-auto-complete
v-model:value="queryParams.neType" v-model:value="queryParams.neType"
:options="neInfoStore.getNeSelectOtions" :options="neInfoStore.getNeSelectOtions"
@@ -883,17 +881,14 @@ onMounted(() => {
<ProModal <ProModal
:drag="true" :drag="true"
:width="800" :width="800"
:visible="modalState.visibleByView" :open="modalState.openByView"
:title="modalState.title" :title="modalState.title"
@cancel="fnModalCancel" @cancel="fnModalCancel"
> >
<a-form layout="horizontal"> <a-form layout="horizontal">
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item :label="t('views.ne.common.neType')" name="neType">
:label="t('views.ne.common.neType')"
name="neType"
>
<a-cascader <a-cascader
:value="modalState.neType" :value="modalState.neType"
:options="neInfoStore.getNeCascaderOptions" :options="neInfoStore.getNeCascaderOptions"
@@ -926,7 +921,7 @@ onMounted(() => {
{{ modalState.neTypPerformanceList }} {{ modalState.neTypPerformanceList }}
</a-form-item> </a-form-item>
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
name="granulOption" name="granulOption"
@@ -949,7 +944,7 @@ onMounted(() => {
{{ modalState.initPeriods }} {{ modalState.initPeriods }}
</a-form-item> </a-form-item>
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.perfManage.taskManage.plan')" :label="t('views.perfManage.taskManage.plan')"
@@ -997,14 +992,14 @@ onMounted(() => {
:destroyOnClose="true" :destroyOnClose="true"
:keyboard="false" :keyboard="false"
:mask-closable="false" :mask-closable="false"
:visible="modalState.visibleByEdit" :open="modalState.openByEdit"
:title="modalState.title" :title="modalState.title"
:confirm-loading="modalState.confirmLoading" :confirm-loading="modalState.confirmLoading"
@ok="fnModalOk" @ok="fnModalOk"
@cancel="fnModalCancel" @cancel="fnModalCancel"
> >
<a-form name="modalStateFrom" layout="horizontal"> <a-form name="modalStateFrom" layout="horizontal">
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.ne.common.neType')" :label="t('views.ne.common.neType')"
@@ -1059,7 +1054,7 @@ onMounted(() => {
></a-range-picker> ></a-range-picker>
</a-form-item> </a-form-item>
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.perfManage.taskManage.granulOption')" :label="t('views.perfManage.taskManage.granulOption')"
@@ -1102,7 +1097,7 @@ onMounted(() => {
/> />
</a-form-item> </a-form-item>
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.perfManage.taskManage.plan')" :label="t('views.perfManage.taskManage.plan')"
@@ -1127,10 +1122,7 @@ onMounted(() => {
</a-col> </a-col>
</a-row> </a-row>
<a-form-item <a-form-item :label="t('views.traceManage.task.remark')" name="comment">
:label="t('views.traceManage.task.remark')"
name="comment"
>
<a-textarea <a-textarea
v-model:value="modalState.from.comment" v-model:value="modalState.from.comment"
:auto-size="{ minRows: 2, maxRows: 6 }" :auto-size="{ minRows: 2, maxRows: 6 }"

2
src/views/register.vue
View File

@@ -1,6 +1,6 @@
<script lang="ts" setup> <script lang="ts" setup>
import { GlobalFooter } from 'antdv-pro-layout'; import { GlobalFooter } from 'antdv-pro-layout';
import { Modal, message } from 'ant-design-vue/lib'; import { Modal, message } from 'ant-design-vue/es';
import { computed, onMounted, reactive, toRaw } from 'vue'; import { computed, onMounted, reactive, toRaw } from 'vue';
import { register } from '@/api/login'; import { register } from '@/api/login';
import { regExpPasswd, regExpUserName } from '@/utils/regular-utils'; import { regExpPasswd, regExpUserName } from '@/utils/regular-utils';

49
src/views/system/config/index.vue
View File

@@ -1,10 +1,11 @@
<script setup lang="ts"> <script setup lang="ts">
import { reactive, ref, onMounted, toRaw } from 'vue'; import { reactive, ref, onMounted, toRaw } from 'vue';
import { PageContainer } from 'antdv-pro-layout'; import { PageContainer } from 'antdv-pro-layout';
import { message, Modal, Form } from 'ant-design-vue/lib'; import { ProModal } from 'antdv-pro-modal';
import { SizeType } from 'ant-design-vue/lib/config-provider'; import { message, Modal, Form } from 'ant-design-vue/es';
import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface'; import { SizeType } from 'ant-design-vue/es/config-provider';
import { ColumnsType } from 'ant-design-vue/lib/table'; import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
import { ColumnsType } from 'ant-design-vue/es/table';
import { import {
exportConfig, exportConfig,
listConfig, listConfig,
@@ -182,9 +183,9 @@ function fnTableSelectedRowKeys(keys: (string | number)[]) {
/**对话框对象信息状态类型 */ /**对话框对象信息状态类型 */
type ModalStateType = { type ModalStateType = {
/**详情框是否显示 */ /**详情框是否显示 */
visibleByView: boolean; openByView: boolean;
/**新增框或修改框是否显示 */ /**新增框或修改框是否显示 */
visibleByEdit: boolean; openByEdit: boolean;
/**标题 */ /**标题 */
title: string; title: string;
/**表单数据 */ /**表单数据 */
@@ -195,8 +196,8 @@ type ModalStateType = {
/**对话框对象信息状态 */ /**对话框对象信息状态 */
let modalState: ModalStateType = reactive({ let modalState: ModalStateType = reactive({
visibleByView: false, openByView: false,
visibleByEdit: false, openByEdit: false,
title: '参数配置', title: '参数配置',
from: { from: {
configId: undefined, configId: undefined,
@@ -253,7 +254,7 @@ function fnModalVisibleByVive(configId: string | number) {
if (res.code === RESULT_CODE_SUCCESS && res.data) { if (res.code === RESULT_CODE_SUCCESS && res.data) {
modalState.from = Object.assign(modalState.from, res.data); modalState.from = Object.assign(modalState.from, res.data);
modalState.title = t('views.system.config.viewInfo'); modalState.title = t('views.system.config.viewInfo');
modalState.visibleByView = true; modalState.openByView = true;
} else { } else {
message.error(t('views.system.config.viewInfoErr'), 2); message.error(t('views.system.config.viewInfoErr'), 2);
} }
@@ -268,7 +269,7 @@ function fnModalVisibleByEdit(configId?: string | number) {
if (!configId) { if (!configId) {
modalStateFrom.resetFields(); modalStateFrom.resetFields();
modalState.title = t('views.system.config.addInfo'); modalState.title = t('views.system.config.addInfo');
modalState.visibleByEdit = true; modalState.openByEdit = true;
} else { } else {
if (modalState.confirmLoading) return; if (modalState.confirmLoading) return;
const hide = message.loading(t('common.loading'), 0); const hide = message.loading(t('common.loading'), 0);
@@ -279,7 +280,7 @@ function fnModalVisibleByEdit(configId?: string | number) {
if (res.code === RESULT_CODE_SUCCESS && res.data) { if (res.code === RESULT_CODE_SUCCESS && res.data) {
modalState.from = Object.assign(modalState.from, res.data); modalState.from = Object.assign(modalState.from, res.data);
modalState.title = t('views.system.config.editInfo'); modalState.title = t('views.system.config.editInfo');
modalState.visibleByEdit = true; modalState.openByEdit = true;
} else { } else {
message.error(t('views.system.config.viewInfoErr'), 2); message.error(t('views.system.config.viewInfoErr'), 2);
} }
@@ -308,7 +309,7 @@ function fnModalOk() {
key, key,
duration: 2, duration: 2,
}); });
modalState.visibleByEdit = false; modalState.openByEdit = false;
modalStateFrom.resetFields(); modalStateFrom.resetFields();
fnGetList(1); fnGetList(1);
} else { } else {
@@ -333,8 +334,8 @@ function fnModalOk() {
* 进行表达规则校验 * 进行表达规则校验
*/ */
function fnModalCancel() { function fnModalCancel() {
modalState.visibleByEdit = false; modalState.openByEdit = false;
modalState.visibleByView = false; modalState.openByView = false;
modalStateFrom.resetFields(); modalStateFrom.resetFields();
} }
@@ -559,7 +560,7 @@ onMounted(() => {
<a-card :bordered="false" :body-style="{ padding: '0px' }"> <a-card :bordered="false" :body-style="{ padding: '0px' }">
<!-- 插槽-卡片左侧侧 --> <!-- 插槽-卡片左侧侧 -->
<template #title> <template #title>
<div class="button-container"> <a-space :size="8" align="center">
<a-button <a-button
type="primary" type="primary"
@click.prevent="fnModalVisibleByEdit()" @click.prevent="fnModalVisibleByEdit()"
@@ -595,12 +596,12 @@ onMounted(() => {
<template #icon><ExportOutlined /></template> <template #icon><ExportOutlined /></template>
{{ t('common.export') }} {{ t('common.export') }}
</a-button> </a-button>
</div> </a-space>
</template> </template>
<!-- 插槽-卡片右侧 --> <!-- 插槽-卡片右侧 -->
<template #extra> <template #extra>
<div class="button-container"> <a-space :size="8" align="center">
<a-tooltip> <a-tooltip>
<template #title>{{ t('common.searchBarText') }}</template> <template #title>{{ t('common.searchBarText') }}</template>
<a-switch <a-switch
@@ -640,7 +641,7 @@ onMounted(() => {
</template> </template>
</a-dropdown> </a-dropdown>
</a-tooltip> </a-tooltip>
</div> </a-space>
</template> </template>
<!-- 表格列表 --> <!-- 表格列表 -->
@@ -705,12 +706,12 @@ onMounted(() => {
<ProModal <ProModal
:drag="true" :drag="true"
:width="800" :width="800"
:visible="modalState.visibleByView" :open="modalState.openByView"
:title="modalState.title" :title="modalState.title"
@cancel="fnModalCancel" @cancel="fnModalCancel"
> >
<a-form layout="horizontal" :label-col="{ span: 6 }" :label-wrap="true"> <a-form layout="horizontal" :label-col="{ span: 6 }" :label-wrap="true">
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.system.config.configName')" :label="t('views.system.config.configName')"
@@ -731,7 +732,7 @@ onMounted(() => {
</a-form-item> </a-form-item>
</a-col> </a-col>
</a-row> </a-row>
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.system.config.configKey')" :label="t('views.system.config.configKey')"
@@ -776,7 +777,7 @@ onMounted(() => {
:destroyOnClose="true" :destroyOnClose="true"
:keyboard="false" :keyboard="false"
:mask-closable="false" :mask-closable="false"
:visible="modalState.visibleByEdit" :open="modalState.openByEdit"
:title="modalState.title" :title="modalState.title"
:confirm-loading="modalState.confirmLoading" :confirm-loading="modalState.confirmLoading"
@ok="fnModalOk" @ok="fnModalOk"
@@ -788,7 +789,7 @@ onMounted(() => {
:label-col="{ span: 6 }" :label-col="{ span: 6 }"
:label-wrap="true" :label-wrap="true"
> >
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.system.config.configName')" :label="t('views.system.config.configName')"
@@ -818,7 +819,7 @@ onMounted(() => {
</a-col> </a-col>
</a-row> </a-row>
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.system.config.configKey')" :label="t('views.system.config.configKey')"

43
src/views/system/dept/index.vue
View File

@@ -1,10 +1,11 @@
<script setup lang="ts"> <script setup lang="ts">
import { reactive, onMounted, toRaw } from 'vue'; import { reactive, onMounted, toRaw } from 'vue';
import { PageContainer } from 'antdv-pro-layout'; import { PageContainer } from 'antdv-pro-layout';
import { message, Modal, Form } from 'ant-design-vue/lib'; import { ProModal } from 'antdv-pro-modal';
import { SizeType } from 'ant-design-vue/lib/config-provider'; import { message, Modal, Form } from 'ant-design-vue/es';
import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface'; import { SizeType } from 'ant-design-vue/es/config-provider';
import { ColumnsType } from 'ant-design-vue/lib/table'; import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
import { ColumnsType } from 'ant-design-vue/es/table';
import { import {
listDept, listDept,
getDept, getDept,
@@ -141,9 +142,9 @@ let treeDataAll: Record<string, any>[] = [];
/**对话框对象信息状态类型 */ /**对话框对象信息状态类型 */
type ModalStateType = { type ModalStateType = {
/**详情框是否显示 */ /**详情框是否显示 */
visibleByView: boolean; openByView: boolean;
/**新增框或修改框是否显示 */ /**新增框或修改框是否显示 */
visibleByEdit: boolean; openByEdit: boolean;
/**标题 */ /**标题 */
title: string; title: string;
/**表单数据 */ /**表单数据 */
@@ -156,8 +157,8 @@ type ModalStateType = {
/**对话框对象信息状态 */ /**对话框对象信息状态 */
let modalState: ModalStateType = reactive({ let modalState: ModalStateType = reactive({
visibleByView: false, openByView: false,
visibleByEdit: false, openByEdit: false,
title: '部门', title: '部门',
from: { from: {
deptId: undefined, deptId: undefined,
@@ -235,7 +236,7 @@ function fnModalVisibleByVive(deptId: string | number) {
} }
modalState.from = Object.assign(modalState.from, res.data); modalState.from = Object.assign(modalState.from, res.data);
modalState.title = t('views.system.dept.classInfo'); modalState.title = t('views.system.dept.classInfo');
modalState.visibleByView = true; modalState.openByView = true;
} else { } else {
message.error(t('common.getInfoFail'), 2); message.error(t('common.getInfoFail'), 2);
} }
@@ -258,7 +259,7 @@ function fnModalVisibleByEdit(
} }
modalState.treeData = treeDataAll; modalState.treeData = treeDataAll;
modalState.title = t('common.addText') + t('views.system.dept.classInfo'); modalState.title = t('common.addText') + t('views.system.dept.classInfo');
modalState.visibleByEdit = true; modalState.openByEdit = true;
} else { } else {
if (modalState.confirmLoading) return; if (modalState.confirmLoading) return;
const hide = message.loading(t('common.loading'), 0); const hide = message.loading(t('common.loading'), 0);
@@ -286,7 +287,7 @@ function fnModalVisibleByEdit(
} }
modalState.title = modalState.title =
t('common.editText') + t('views.system.dept.classInfo'); t('common.editText') + t('views.system.dept.classInfo');
modalState.visibleByEdit = true; modalState.openByEdit = true;
} else { } else {
message.error(t('common.getInfoFail'), 2); message.error(t('common.getInfoFail'), 2);
} }
@@ -317,7 +318,7 @@ function fnModalOk() {
content: t('common.msgSuccess', { msg: modalState.title }), content: t('common.msgSuccess', { msg: modalState.title }),
duration: 2, duration: 2,
}); });
modalState.visibleByEdit = false; modalState.openByEdit = false;
// 新增时清空上级部门树重新获取 // 新增时清空上级部门树重新获取
if (!from.deptId) { if (!from.deptId) {
treeDataAll = []; treeDataAll = [];
@@ -346,8 +347,8 @@ function fnModalOk() {
* 进行表达规则校验 * 进行表达规则校验
*/ */
function fnModalCancel() { function fnModalCancel() {
modalState.visibleByEdit = false; modalState.openByEdit = false;
modalState.visibleByView = false; modalState.openByView = false;
modalStateFrom.resetFields(); modalStateFrom.resetFields();
} }
@@ -605,7 +606,7 @@ onMounted(() => {
<ProModal <ProModal
:drag="true" :drag="true"
:width="800" :width="800"
:visible="modalState.visibleByView" :open="modalState.openByView"
:title="modalState.title" :title="modalState.title"
@cancel="fnModalCancel" @cancel="fnModalCancel"
> >
@@ -630,7 +631,7 @@ onMounted(() => {
<template #suffixIcon></template> <template #suffixIcon></template>
</a-tree-select> </a-tree-select>
</a-form-item> </a-form-item>
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.system.dept.className')" :label="t('views.system.dept.className')"
@@ -649,7 +650,7 @@ onMounted(() => {
</a-col> </a-col>
</a-row> </a-row>
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item :label="t('views.system.dept.status')" name="status"> <a-form-item :label="t('views.system.dept.status')" name="status">
<DictTag <DictTag
@@ -664,7 +665,7 @@ onMounted(() => {
</a-form-item> </a-form-item>
</a-col> </a-col>
</a-row> </a-row>
<a-row :gutter="16"> <a-row>
<a-col :lg="24" :md="24" :xs="24"> <a-col :lg="24" :md="24" :xs="24">
<a-form-item <a-form-item
:label="t('views.system.dept.admin')" :label="t('views.system.dept.admin')"
@@ -701,7 +702,7 @@ onMounted(() => {
:destroyOnClose="true" :destroyOnClose="true"
:keyboard="false" :keyboard="false"
:mask-closable="false" :mask-closable="false"
:visible="modalState.visibleByEdit" :open="modalState.openByEdit"
:title="modalState.title" :title="modalState.title"
:confirm-loading="modalState.confirmLoading" :confirm-loading="modalState.confirmLoading"
@ok="fnModalOk" @ok="fnModalOk"
@@ -752,7 +753,7 @@ onMounted(() => {
></a-input> ></a-input>
</a-form-item> </a-form-item>
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item :label="t('views.system.dept.status')" name="status"> <a-form-item :label="t('views.system.dept.status')" name="status">
<a-select <a-select
@@ -778,7 +779,7 @@ onMounted(() => {
</a-col> </a-col>
</a-row> </a-row>
<a-row :gutter="16"> <a-row>
<a-col :span="24"> <a-col :span="24">
<a-form-item <a-form-item
:label="t('views.system.dept.admin')" :label="t('views.system.dept.admin')"

59
src/views/system/dict/data.vue
View File

@@ -3,10 +3,11 @@ import { useRoute, useRouter } from 'vue-router';
import { getLocalColor, changePrimaryColor } from '@/hooks/useTheme'; import { getLocalColor, changePrimaryColor } from '@/hooks/useTheme';
import { reactive, ref, onMounted, toRaw } from 'vue'; import { reactive, ref, onMounted, toRaw } from 'vue';
import { PageContainer } from 'antdv-pro-layout'; import { PageContainer } from 'antdv-pro-layout';
import { Form, message, Modal } from 'ant-design-vue/lib'; import { ProModal } from 'antdv-pro-modal';
import { SizeType } from 'ant-design-vue/lib/config-provider'; import { Form, message, Modal } from 'ant-design-vue/es';
import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface'; import { SizeType } from 'ant-design-vue/es/config-provider';
import { ColumnsType } from 'ant-design-vue/lib/table'; import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
import { ColumnsType } from 'ant-design-vue/es/table';
import { import {
exportData, exportData,
listData, listData,
@@ -231,9 +232,9 @@ function fnTableSelectedRowKeys(keys: (string | number)[]) {
/**对话框对象信息状态类型 */ /**对话框对象信息状态类型 */
type ModalStateType = { type ModalStateType = {
/**详情框是否显示 */ /**详情框是否显示 */
visibleByView: boolean; openByView: boolean;
/**新增框或修改框是否显示 */ /**新增框或修改框是否显示 */
visibleByEdit: boolean; openByEdit: boolean;
/**标题 */ /**标题 */
title: string; title: string;
/**表单数据 */ /**表单数据 */
@@ -244,8 +245,8 @@ type ModalStateType = {
/**对话框对象信息状态 */ /**对话框对象信息状态 */
let modalState: ModalStateType = reactive({ let modalState: ModalStateType = reactive({
visibleByView: false, openByView: false,
visibleByEdit: false, openByEdit: false,
title: '字典数据', title: '字典数据',
from: { from: {
dictCode: undefined, dictCode: undefined,
@@ -293,7 +294,7 @@ const modalStateFrom = Form.useForm(
function fnModalVisibleByVive(row: Record<string, string>) { function fnModalVisibleByVive(row: Record<string, string>) {
modalState.from = Object.assign(modalState.from, row); modalState.from = Object.assign(modalState.from, row);
modalState.title = t('views.system.dictData.viewInfo'); modalState.title = t('views.system.dictData.viewInfo');
modalState.visibleByView = true; modalState.openByView = true;
} }
/** /**
@@ -305,7 +306,7 @@ function fnModalVisibleByEdit(dictCode?: string | number, record?: any) {
modalStateFrom.resetFields(); modalStateFrom.resetFields();
modalState.from.dictType = queryParams.dictType; modalState.from.dictType = queryParams.dictType;
modalState.title = t('views.system.dictData.addInfo'); modalState.title = t('views.system.dictData.addInfo');
modalState.visibleByEdit = true; modalState.openByEdit = true;
} else { } else {
if (modalState.confirmLoading) return; if (modalState.confirmLoading) return;
const hide = message.loading(t('common.loading'), 0); const hide = message.loading(t('common.loading'), 0);
@@ -316,7 +317,7 @@ function fnModalVisibleByEdit(dictCode?: string | number, record?: any) {
if (res.code === RESULT_CODE_SUCCESS) { if (res.code === RESULT_CODE_SUCCESS) {
modalState.from = Object.assign(modalState.from, res.data); modalState.from = Object.assign(modalState.from, res.data);
modalState.title = t('views.system.dictData.editInfo'); modalState.title = t('views.system.dictData.editInfo');
modalState.visibleByEdit = true; modalState.openByEdit = true;
} else { } else {
message.error(t('views.system.dictData.viewInfoErr'), 2); message.error(t('views.system.dictData.viewInfoErr'), 2);
} }
@@ -345,7 +346,7 @@ function fnModalOk() {
key, key,
duration: 2, duration: 2,
}); });
modalState.visibleByEdit = false; modalState.openByEdit = false;
modalStateFrom.resetFields(); modalStateFrom.resetFields();
fnGetList(); fnGetList();
} else { } else {
@@ -370,8 +371,8 @@ function fnModalOk() {
* 进行表达规则校验 * 进行表达规则校验
*/ */
function fnModalCancel() { function fnModalCancel() {
modalState.visibleByEdit = false; modalState.openByEdit = false;
modalState.visibleByView = false; modalState.openByView = false;
modalStateFrom.resetFields(); modalStateFrom.resetFields();
} }
@@ -579,7 +580,7 @@ onMounted(() => {
<a-card :bordered="false" :body-style="{ padding: '0px' }"> <a-card :bordered="false" :body-style="{ padding: '0px' }">
<!-- 插槽-卡片左侧侧 --> <!-- 插槽-卡片左侧侧 -->
<template #title> <template #title>
<div class="button-container"> <a-space :size="8" align="center">
<a-button type="default" @click.prevent="fnClose()"> <a-button type="default" @click.prevent="fnClose()">
<template #icon><CloseOutlined /></template> <template #icon><CloseOutlined /></template>
{{ t('common.close') }} {{ t('common.close') }}
@@ -610,12 +611,12 @@ onMounted(() => {
<template #icon><ExportOutlined /></template> <template #icon><ExportOutlined /></template>
{{ t('common.export') }} {{ t('common.export') }}
</a-button> </a-button>
</div> </a-space>
</template> </template>
<!-- 插槽-卡片右侧 --> <!-- 插槽-卡片右侧 -->
<template #extra> <template #extra>
<div class="button-container"> <a-space :size="8" align="center">
<a-tooltip> <a-tooltip>
<template #title>{{ t('common.searchBarText') }}</template> <template #title>{{ t('common.searchBarText') }}</template>
<a-switch <a-switch
@@ -655,7 +656,7 @@ onMounted(() => {
</template> </template>
</a-dropdown> </a-dropdown>
</a-tooltip> </a-tooltip>
</div> </a-space>
</template> </template>
<!-- 表格列表 --> <!-- 表格列表 -->
@@ -720,12 +721,12 @@ onMounted(() => {
<ProModal <ProModal
:drag="true" :drag="true"
:width="800" :width="800"
:visible="modalState.visibleByView" :open="modalState.openByView"
:title="modalState.title" :title="modalState.title"
@cancel="fnModalCancel" @cancel="fnModalCancel"
> >
<a-form layout="horizontal" :label-col="{ span: 6 }" :label-wrap="true"> <a-form layout="horizontal" :label-col="{ span: 6 }" :label-wrap="true">
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.system.dictData.dictType')" :label="t('views.system.dictData.dictType')"
@@ -749,7 +750,7 @@ onMounted(() => {
</a-form-item> </a-form-item>
</a-col> </a-col>
</a-row> </a-row>
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.system.dictData.dictCode')" :label="t('views.system.dictData.dictCode')"
@@ -770,7 +771,7 @@ onMounted(() => {
</a-form-item> </a-form-item>
</a-col> </a-col>
</a-row> </a-row>
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.system.dictData.dictLabel')" :label="t('views.system.dictData.dictLabel')"
@@ -788,7 +789,7 @@ onMounted(() => {
</a-form-item> </a-form-item>
</a-col> </a-col>
</a-row> </a-row>
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.system.dictData.tagType')" :label="t('views.system.dictData.tagType')"
@@ -809,7 +810,7 @@ onMounted(() => {
</a-form-item> </a-form-item>
</a-col> </a-col>
</a-row> </a-row>
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.system.dictData.tagTypeShow')" :label="t('views.system.dictData.tagTypeShow')"
@@ -857,7 +858,7 @@ onMounted(() => {
:destroyOnClose="true" :destroyOnClose="true"
:keyboard="false" :keyboard="false"
:mask-closable="false" :mask-closable="false"
:visible="modalState.visibleByEdit" :open="modalState.openByEdit"
:title="modalState.title" :title="modalState.title"
:confirm-loading="modalState.confirmLoading" :confirm-loading="modalState.confirmLoading"
@ok="fnModalOk" @ok="fnModalOk"
@@ -869,7 +870,7 @@ onMounted(() => {
:label-col="{ span: 6 }" :label-col="{ span: 6 }"
:label-wrap="true" :label-wrap="true"
> >
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.system.dictData.dictType')" :label="t('views.system.dictData.dictType')"
@@ -900,7 +901,7 @@ onMounted(() => {
</a-form-item> </a-form-item>
</a-col> </a-col>
</a-row> </a-row>
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.system.dictData.dictLabel')" :label="t('views.system.dictData.dictLabel')"
@@ -929,7 +930,7 @@ onMounted(() => {
</a-col> </a-col>
</a-row> </a-row>
<!-- 首页状态取色器 --> <!-- 首页状态取色器 -->
<a-row :gutter="16"> <a-row>
<a-col <a-col
:lg="12" :lg="12"
:md="12" :md="12"
@@ -977,7 +978,7 @@ onMounted(() => {
</a-col> </a-col>
</a-row> </a-row>
<!-- 非首页状态取色器 --> <!-- 非首页状态取色器 -->
<a-row :gutter="16" v-if="modalState.from.dictType !== 'index_status'"> <a-row v-if="modalState.from.dictType !== 'index_status'">
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.system.dictData.tagClass')" :label="t('views.system.dictData.tagClass')"

41
src/views/system/dict/index.vue
View File

@@ -2,10 +2,11 @@
import { useRouter, useRoute } from 'vue-router'; import { useRouter, useRoute } from 'vue-router';
import { reactive, ref, onMounted, toRaw } from 'vue'; import { reactive, ref, onMounted, toRaw } from 'vue';
import { PageContainer } from 'antdv-pro-layout'; import { PageContainer } from 'antdv-pro-layout';
import { message, Modal, Form } from 'ant-design-vue/lib'; import { ProModal } from 'antdv-pro-modal';
import { SizeType } from 'ant-design-vue/lib/config-provider'; import { message, Modal, Form } from 'ant-design-vue/es';
import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface'; import { SizeType } from 'ant-design-vue/es/config-provider';
import { ColumnsType } from 'ant-design-vue/lib/table'; import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
import { ColumnsType } from 'ant-design-vue/es/table';
import { import {
exportType, exportType,
listType, listType,
@@ -181,9 +182,9 @@ function fnTableSelectedRowKeys(keys: (string | number)[]) {
/**对话框对象信息状态类型 */ /**对话框对象信息状态类型 */
type ModalStateType = { type ModalStateType = {
/**详情框是否显示 */ /**详情框是否显示 */
visibleByView: boolean; openByView: boolean;
/**新增框或修改框是否显示 */ /**新增框或修改框是否显示 */
visibleByEdit: boolean; openByEdit: boolean;
/**标题 */ /**标题 */
title: string; title: string;
/**表单数据 */ /**表单数据 */
@@ -194,8 +195,8 @@ type ModalStateType = {
/**对话框对象信息状态 */ /**对话框对象信息状态 */
let modalState: ModalStateType = reactive({ let modalState: ModalStateType = reactive({
visibleByView: false, openByView: false,
visibleByEdit: false, openByEdit: false,
title: '字典类型', title: '字典类型',
from: { from: {
dictId: undefined, dictId: undefined,
@@ -248,7 +249,7 @@ function fnModalVisibleByVive(dictId: string | number) {
if (res.code === RESULT_CODE_SUCCESS && res.data) { if (res.code === RESULT_CODE_SUCCESS && res.data) {
modalState.from = Object.assign(modalState.from, res.data); modalState.from = Object.assign(modalState.from, res.data);
modalState.title = t('views.system.dict.dictInfo'); modalState.title = t('views.system.dict.dictInfo');
modalState.visibleByView = true; modalState.openByView = true;
} else { } else {
message.error(t('common.getInfoFail'), 2); message.error(t('common.getInfoFail'), 2);
} }
@@ -263,7 +264,7 @@ function fnModalVisibleByEdit(dictId?: string | number) {
if (!dictId) { if (!dictId) {
modalStateFrom.resetFields(); modalStateFrom.resetFields();
modalState.title = t('common.addText') + t('views.system.dict.dictType'); modalState.title = t('common.addText') + t('views.system.dict.dictType');
modalState.visibleByEdit = true; modalState.openByEdit = true;
} else { } else {
if (modalState.confirmLoading) return; if (modalState.confirmLoading) return;
const hide = message.loading(t('common.loading'), 0); const hide = message.loading(t('common.loading'), 0);
@@ -275,7 +276,7 @@ function fnModalVisibleByEdit(dictId?: string | number) {
modalState.from = Object.assign(modalState.from, res.data); modalState.from = Object.assign(modalState.from, res.data);
modalState.title = modalState.title =
t('common.editText') + t('views.system.dict.dictType'); t('common.editText') + t('views.system.dict.dictType');
modalState.visibleByEdit = true; modalState.openByEdit = true;
} else { } else {
message.error(t('common.getInfoFail'), 2); message.error(t('common.getInfoFail'), 2);
} }
@@ -304,7 +305,7 @@ function fnModalOk() {
key, key,
duration: 2, duration: 2,
}); });
modalState.visibleByEdit = false; modalState.openByEdit = false;
modalStateFrom.resetFields(); modalStateFrom.resetFields();
fnGetList(1); fnGetList(1);
} else { } else {
@@ -329,8 +330,8 @@ function fnModalOk() {
* 进行表达规则校验 * 进行表达规则校验
*/ */
function fnModalCancel() { function fnModalCancel() {
modalState.visibleByEdit = false; modalState.openByEdit = false;
modalState.visibleByView = false; modalState.openByView = false;
modalStateFrom.resetFields(); modalStateFrom.resetFields();
} }
@@ -559,7 +560,7 @@ onMounted(() => {
<a-card :bordered="false" :body-style="{ padding: '0px' }"> <a-card :bordered="false" :body-style="{ padding: '0px' }">
<!-- 插槽-卡片左侧侧 --> <!-- 插槽-卡片左侧侧 -->
<template #title> <template #title>
<div class="button-container"> <a-space :size="8" align="center">
<a-button <a-button
type="primary" type="primary"
@click.prevent="fnModalVisibleByEdit()" @click.prevent="fnModalVisibleByEdit()"
@@ -603,12 +604,12 @@ onMounted(() => {
<template #icon><ExportOutlined /></template> <template #icon><ExportOutlined /></template>
{{ t('common.export') }} {{ t('common.export') }}
</a-button> </a-button>
</div> </a-space>
</template> </template>
<!-- 插槽-卡片右侧 --> <!-- 插槽-卡片右侧 -->
<template #extra> <template #extra>
<div class="button-container"> <a-space :size="8" align="center">
<a-tooltip> <a-tooltip>
<template #title>{{ t('common.searchBarText') }}</template> <template #title>{{ t('common.searchBarText') }}</template>
<a-switch <a-switch
@@ -648,7 +649,7 @@ onMounted(() => {
</template> </template>
</a-dropdown> </a-dropdown>
</a-tooltip> </a-tooltip>
</div> </a-space>
</template> </template>
<!-- 表格列表 --> <!-- 表格列表 -->
@@ -725,7 +726,7 @@ onMounted(() => {
<ProModal <ProModal
:drag="true" :drag="true"
:width="800" :width="800"
:visible="modalState.visibleByView" :open="modalState.openByView"
:title="modalState.title" :title="modalState.title"
@cancel="fnModalCancel" @cancel="fnModalCancel"
> >
@@ -767,7 +768,7 @@ onMounted(() => {
:destroyOnClose="true" :destroyOnClose="true"
:keyboard="false" :keyboard="false"
:mask-closable="false" :mask-closable="false"
:visible="modalState.visibleByEdit" :open="modalState.openByEdit"
:title="modalState.title" :title="modalState.title"
:confirm-loading="modalState.confirmLoading" :confirm-loading="modalState.confirmLoading"
@ok="fnModalOk" @ok="fnModalOk"

8
src/views/system/log/login/index.vue
View File

@@ -1,10 +1,10 @@
<script setup lang="ts"> <script setup lang="ts">
import { reactive, ref, onMounted, toRaw } from 'vue'; import { reactive, ref, onMounted, toRaw } from 'vue';
import { PageContainer } from 'antdv-pro-layout'; import { PageContainer } from 'antdv-pro-layout';
import { message, Modal } from 'ant-design-vue/lib'; import { message, Modal } from 'ant-design-vue/es';
import { SizeType } from 'ant-design-vue/lib/config-provider'; import { SizeType } from 'ant-design-vue/es/config-provider';
import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface'; import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
import { ColumnsType } from 'ant-design-vue/lib/table'; import { ColumnsType } from 'ant-design-vue/es/table';
import { import {
exportSysLogLogin, exportSysLogLogin,
listSysLogLogin, listSysLogLogin,

27
src/views/system/log/operate/index.vue
View File

@@ -1,10 +1,11 @@
<script setup lang="ts"> <script setup lang="ts">
import { reactive, ref, onMounted, toRaw } from 'vue'; import { reactive, ref, onMounted, toRaw } from 'vue';
import { PageContainer } from 'antdv-pro-layout'; import { PageContainer } from 'antdv-pro-layout';
import { message, Modal } from 'ant-design-vue/lib'; import { ProModal } from 'antdv-pro-modal';
import { SizeType } from 'ant-design-vue/lib/config-provider'; import { message, Modal } from 'ant-design-vue/es';
import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface'; import { SizeType } from 'ant-design-vue/es/config-provider';
import { ColumnsType } from 'ant-design-vue/lib/table'; import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
import { ColumnsType } from 'ant-design-vue/es/table';
import { import {
exportSysLogOperate, exportSysLogOperate,
listSysLogOperate, listSysLogOperate,
@@ -208,7 +209,7 @@ function fnTableSelectedRowKeys(keys: (string | number)[]) {
/**对话框对象信息状态类型 */ /**对话框对象信息状态类型 */
type ModalStateType = { type ModalStateType = {
/**详情框是否显示 */ /**详情框是否显示 */
visibleByView: boolean; openByView: boolean;
/**标题 */ /**标题 */
title: string; title: string;
/**表单数据 */ /**表单数据 */
@@ -217,7 +218,7 @@ type ModalStateType = {
/**对话框对象信息状态 */ /**对话框对象信息状态 */
let modalState: ModalStateType = reactive({ let modalState: ModalStateType = reactive({
visibleByView: false, openByView: false,
title: '操作日志', title: '操作日志',
from: { from: {
operId: undefined, operId: undefined,
@@ -245,14 +246,14 @@ let modalState: ModalStateType = reactive({
function fnModalVisibleByVive(row: Record<string, string>) { function fnModalVisibleByVive(row: Record<string, string>) {
modalState.from = Object.assign(modalState.from, row); modalState.from = Object.assign(modalState.from, row);
modalState.title = t('views.system.log.operate.logInfo'); modalState.title = t('views.system.log.operate.logInfo');
modalState.visibleByView = true; modalState.openByView = true;
} }
/** /**
* 对话框弹出关闭执行函数 * 对话框弹出关闭执行函数
*/ */
function fnModalCancel() { function fnModalCancel() {
modalState.visibleByView = false; modalState.openByView = false;
} }
/**记录删除 */ /**记录删除 */
@@ -609,12 +610,12 @@ onMounted(() => {
<ProModal <ProModal
:drag="true" :drag="true"
:width="800" :width="800"
:visible="modalState.visibleByView" :open="modalState.openByView"
:title="modalState.title" :title="modalState.title"
@cancel="fnModalCancel" @cancel="fnModalCancel"
> >
<a-form layout="horizontal" :label-col="{ span: 6 }" :label-wrap="true"> <a-form layout="horizontal" :label-col="{ span: 6 }" :label-wrap="true">
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.system.log.operate.operId')" :label="t('views.system.log.operate.operId')"
@@ -639,7 +640,7 @@ onMounted(() => {
</a-form-item> </a-form-item>
</a-col> </a-col>
</a-row> </a-row>
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.system.log.operate.workType')" :label="t('views.system.log.operate.workType')"
@@ -661,7 +662,7 @@ onMounted(() => {
</a-form-item> </a-form-item>
</a-col> </a-col>
</a-row> </a-row>
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.system.log.operate.RequestIp')" :label="t('views.system.log.operate.RequestIp')"
@@ -682,7 +683,7 @@ onMounted(() => {
</a-form-item> </a-form-item>
</a-col> </a-col>
</a-row> </a-row>
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.system.log.operate.useTime')" :label="t('views.system.log.operate.useTime')"

62
src/views/system/menu/index.vue
View File

@@ -1,9 +1,10 @@
<script setup lang="ts"> <script setup lang="ts">
import { PageContainer } from 'antdv-pro-layout'; import { PageContainer } from 'antdv-pro-layout';
import { message, Modal, Form } from 'ant-design-vue/lib'; import { ProModal } from 'antdv-pro-modal';
import { SizeType } from 'ant-design-vue/lib/config-provider'; import { message, Modal, Form } from 'ant-design-vue/es';
import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface'; import { SizeType } from 'ant-design-vue/es/config-provider';
import { ColumnsType } from 'ant-design-vue/lib/table'; import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
import { ColumnsType } from 'ant-design-vue/es/table';
import IconFont from '@/components/IconFont/index.vue'; import IconFont from '@/components/IconFont/index.vue';
import { iconFonts } from '@/assets/js/icon_font_8d5l8fzk5b87iudi'; import { iconFonts } from '@/assets/js/icon_font_8d5l8fzk5b87iudi';
import { reactive, onMounted, toRaw } from 'vue'; import { reactive, onMounted, toRaw } from 'vue';
@@ -213,9 +214,9 @@ function fnTreeDataChange(value: any) {
/**对话框对象信息状态类型 */ /**对话框对象信息状态类型 */
type ModalStateType = { type ModalStateType = {
/**详情框是否显示 */ /**详情框是否显示 */
visibleByView: boolean; openByView: boolean;
/**新增框或修改框是否显示 */ /**新增框或修改框是否显示 */
visibleByEdit: boolean; openByEdit: boolean;
/**标题 */ /**标题 */
title: string; title: string;
/**表单数据 */ /**表单数据 */
@@ -228,8 +229,8 @@ type ModalStateType = {
/**对话框对象信息状态 */ /**对话框对象信息状态 */
let modalState: ModalStateType = reactive({ let modalState: ModalStateType = reactive({
visibleByView: false, openByView: false,
visibleByEdit: false, openByEdit: false,
title: '菜单', title: '菜单',
from: { from: {
menuId: undefined, menuId: undefined,
@@ -317,7 +318,7 @@ function fnModalVisibleByVive(menuId: string | number) {
if (res.code === RESULT_CODE_SUCCESS && res.data) { if (res.code === RESULT_CODE_SUCCESS && res.data) {
modalState.from = Object.assign(modalState.from, res.data); modalState.from = Object.assign(modalState.from, res.data);
modalState.title = t('views.system.menu.menuInfo'); modalState.title = t('views.system.menu.menuInfo');
modalState.visibleByView = true; modalState.openByView = true;
} else { } else {
message.error(t('common.getInfoFail'), 2); message.error(t('common.getInfoFail'), 2);
} }
@@ -342,7 +343,7 @@ function fnModalVisibleByEdit(
modalState.from.parentType = parentType; modalState.from.parentType = parentType;
} }
modalState.title = t('common.addText') + t('views.system.menu.menuInfo'); modalState.title = t('common.addText') + t('views.system.menu.menuInfo');
modalState.visibleByEdit = true; modalState.openByEdit = true;
} else { } else {
if (modalState.confirmLoading) return; if (modalState.confirmLoading) return;
const hide = message.loading(t('common.loading'), 0); const hide = message.loading(t('common.loading'), 0);
@@ -354,7 +355,7 @@ function fnModalVisibleByEdit(
modalState.from = Object.assign(modalState.from, res.data); modalState.from = Object.assign(modalState.from, res.data);
modalState.title = modalState.title =
t('common.editText') + t('views.system.menu.menuInfo'); t('common.editText') + t('views.system.menu.menuInfo');
modalState.visibleByEdit = true; modalState.openByEdit = true;
} else { } else {
message.error(t('common.getInfoFail'), 2); message.error(t('common.getInfoFail'), 2);
} }
@@ -395,7 +396,7 @@ function fnModalOk() {
key, key,
duration: 2, duration: 2,
}); });
modalState.visibleByEdit = false; modalState.openByEdit = false;
modalStateFrom.resetFields(); modalStateFrom.resetFields();
treeDataAll = []; treeDataAll = [];
fnGetList(); fnGetList();
@@ -421,8 +422,8 @@ function fnModalOk() {
* 进行表达规则校验 * 进行表达规则校验
*/ */
function fnModalCancel() { function fnModalCancel() {
modalState.visibleByEdit = false; modalState.openByEdit = false;
modalState.visibleByView = false; modalState.openByView = false;
modalStateFrom.resetFields(); modalStateFrom.resetFields();
} }
@@ -720,7 +721,7 @@ onMounted(() => {
<ProModal <ProModal
:drag="true" :drag="true"
:width="800" :width="800"
:visible="modalState.visibleByView" :open="modalState.openByView"
:title="modalState.title" :title="modalState.title"
@cancel="fnModalCancel" @cancel="fnModalCancel"
> >
@@ -753,7 +754,7 @@ onMounted(() => {
> >
{{ modalState.from.menuName }} {{ modalState.from.menuName }}
</a-form-item> </a-form-item>
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item :label="t('views.system.menu.menuId')" name="menuId"> <a-form-item :label="t('views.system.menu.menuId')" name="menuId">
{{ modalState.from.menuId }} {{ modalState.from.menuId }}
@@ -768,7 +769,7 @@ onMounted(() => {
</a-form-item> </a-form-item>
</a-col> </a-col>
</a-row> </a-row>
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.system.menu.menuType')" :label="t('views.system.menu.menuType')"
@@ -804,7 +805,7 @@ onMounted(() => {
</a-col> </a-col>
</a-row> </a-row>
<a-row :gutter="16"> <a-row>
<a-col <a-col
:lg="12" :lg="12"
:md="12" :md="12"
@@ -830,10 +831,7 @@ onMounted(() => {
</a-col> </a-col>
</a-row> </a-row>
<a-row <a-row v-if="modalState.from.menuType !== MENU_TYPE_BUTTON">
:gutter="16"
v-if="modalState.from.menuType !== MENU_TYPE_BUTTON"
>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item :label="t('views.system.menu.local')" name="isFrame"> <a-form-item :label="t('views.system.menu.local')" name="isFrame">
<a-tag color="default"> <a-tag color="default">
@@ -917,7 +915,7 @@ onMounted(() => {
:destroyOnClose="true" :destroyOnClose="true"
:keyboard="false" :keyboard="false"
:mask-closable="false" :mask-closable="false"
:visible="modalState.visibleByEdit" :open="modalState.openByEdit"
:title="modalState.title" :title="modalState.title"
:confirm-loading="modalState.confirmLoading" :confirm-loading="modalState.confirmLoading"
@ok="fnModalOk" @ok="fnModalOk"
@@ -955,7 +953,7 @@ onMounted(() => {
</a-tree-select> </a-tree-select>
</a-form-item> </a-form-item>
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.system.menu.menuName')" :label="t('views.system.menu.menuName')"
@@ -1010,10 +1008,7 @@ onMounted(() => {
</a-radio-group> </a-radio-group>
</a-form-item> </a-form-item>
<a-row <a-row v-if="modalState.from.menuType !== MENU_TYPE_BUTTON">
:gutter="16"
v-if="modalState.from.menuType !== MENU_TYPE_BUTTON"
>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item :label="t('views.system.menu.menuTitle')" name="icon"> <a-form-item :label="t('views.system.menu.menuTitle')" name="icon">
<a-select <a-select
@@ -1052,7 +1047,7 @@ onMounted(() => {
}} }}
</div> </div>
</template> </template>
<InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" /> <InfoCircleOutlined style="opacity: 0.45; color: inherit" />
</a-tooltip> </a-tooltip>
</template> </template>
</a-input> </a-input>
@@ -1060,10 +1055,7 @@ onMounted(() => {
</a-col> </a-col>
</a-row> </a-row>
<a-row <a-row v-if="modalState.from.menuType !== MENU_TYPE_BUTTON">
:gutter="16"
v-if="modalState.from.menuType !== MENU_TYPE_BUTTON"
>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item :label="t('views.system.menu.local')" name="isFrame"> <a-form-item :label="t('views.system.menu.local')" name="isFrame">
<a-select <a-select
@@ -1143,7 +1135,7 @@ onMounted(() => {
{{ t('views.system.menu.componentTip') }} {{ t('views.system.menu.componentTip') }}
</div> </div>
</template> </template>
<InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" /> <InfoCircleOutlined style="opacity: 0.45; color: inherit" />
</a-tooltip> </a-tooltip>
</template> </template>
</a-input> </a-input>
@@ -1165,7 +1157,7 @@ onMounted(() => {
{{ t('views.system.menu.perms') }} {{ t('views.system.menu.perms') }}
</div> </div>
</template> </template>
<InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" /> <InfoCircleOutlined style="opacity: 0.45; color: inherit" />
</a-tooltip> </a-tooltip>
</template> </template>
</a-input> </a-input>

51
src/views/system/post/index.vue
View File

@@ -1,10 +1,11 @@
<script setup lang="ts"> <script setup lang="ts">
import { reactive, onMounted, toRaw } from 'vue'; import { reactive, onMounted, toRaw } from 'vue';
import { PageContainer } from 'antdv-pro-layout'; import { PageContainer } from 'antdv-pro-layout';
import { message, Modal, Form } from 'ant-design-vue/lib'; import { ProModal } from 'antdv-pro-modal';
import { SizeType } from 'ant-design-vue/lib/config-provider'; import { message, Modal, Form } from 'ant-design-vue/es';
import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface'; import { SizeType } from 'ant-design-vue/es/config-provider';
import { ColumnsType } from 'ant-design-vue/lib/table'; import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
import { ColumnsType } from 'ant-design-vue/es/table';
import { import {
exportPost, exportPost,
listPost, listPost,
@@ -171,9 +172,9 @@ function fnTableSelectedRowKeys(keys: (string | number)[]) {
/**对话框对象信息状态类型 */ /**对话框对象信息状态类型 */
type ModalStateType = { type ModalStateType = {
/**详情框是否显示 */ /**详情框是否显示 */
visibleByView: boolean; openByView: boolean;
/**新增框或修改框是否显示 */ /**新增框或修改框是否显示 */
visibleByEdit: boolean; openByEdit: boolean;
/**标题 */ /**标题 */
title: string; title: string;
/**表单数据 */ /**表单数据 */
@@ -184,8 +185,8 @@ type ModalStateType = {
/**对话框对象信息状态 */ /**对话框对象信息状态 */
let modalState: ModalStateType = reactive({ let modalState: ModalStateType = reactive({
visibleByView: false, openByView: false,
visibleByEdit: false, openByEdit: false,
title: '岗位', title: '岗位',
from: { from: {
postId: undefined, postId: undefined,
@@ -240,7 +241,7 @@ function fnModalVisibleByVive(postId: string | number) {
if (res.code === RESULT_CODE_SUCCESS && res.data) { if (res.code === RESULT_CODE_SUCCESS && res.data) {
modalState.from = Object.assign(modalState.from, res.data); modalState.from = Object.assign(modalState.from, res.data);
modalState.title = t('views.system.post.positionInfo'); modalState.title = t('views.system.post.positionInfo');
modalState.visibleByView = true; modalState.openByView = true;
} else { } else {
message.error(t('common.getInfoFail'), 2); message.error(t('common.getInfoFail'), 2);
} }
@@ -256,7 +257,7 @@ function fnModalVisibleByEdit(postId?: string | number) {
modalStateFrom.resetFields(); modalStateFrom.resetFields();
modalState.title = modalState.title =
t('common.addText') + t('views.system.post.positionInfo'); t('common.addText') + t('views.system.post.positionInfo');
modalState.visibleByEdit = true; modalState.openByEdit = true;
} else { } else {
if (modalState.confirmLoading) return; if (modalState.confirmLoading) return;
const hide = message.loading(t('common.loading'), 0); const hide = message.loading(t('common.loading'), 0);
@@ -268,7 +269,7 @@ function fnModalVisibleByEdit(postId?: string | number) {
modalState.from = Object.assign(modalState.from, res.data); modalState.from = Object.assign(modalState.from, res.data);
modalState.title = modalState.title =
t('common.editText') + t('views.system.post.positionInfo'); t('common.editText') + t('views.system.post.positionInfo');
modalState.visibleByEdit = true; modalState.openByEdit = true;
} else { } else {
message.error(t('common.getInfoFail'), 2); message.error(t('common.getInfoFail'), 2);
} }
@@ -297,7 +298,7 @@ function fnModalOk() {
key, key,
duration: 2, duration: 2,
}); });
modalState.visibleByEdit = false; modalState.openByEdit = false;
modalStateFrom.resetFields(); modalStateFrom.resetFields();
fnGetList(1); fnGetList(1);
} else { } else {
@@ -322,8 +323,8 @@ function fnModalOk() {
* 进行表达规则校验 * 进行表达规则校验
*/ */
function fnModalCancel() { function fnModalCancel() {
modalState.visibleByEdit = false; modalState.openByEdit = false;
modalState.visibleByView = false; modalState.openByView = false;
modalStateFrom.resetFields(); modalStateFrom.resetFields();
} }
@@ -497,7 +498,7 @@ onMounted(() => {
<a-card :bordered="false" :body-style="{ padding: '0px' }"> <a-card :bordered="false" :body-style="{ padding: '0px' }">
<!-- 插槽-卡片左侧侧 --> <!-- 插槽-卡片左侧侧 -->
<template #title> <template #title>
<div class="button-container"> <a-space :size="8" align="center">
<a-button <a-button
type="primary" type="primary"
@click.prevent="fnModalVisibleByEdit()" @click.prevent="fnModalVisibleByEdit()"
@@ -524,12 +525,12 @@ onMounted(() => {
<template #icon><ExportOutlined /></template> <template #icon><ExportOutlined /></template>
{{ t('common.export') }} {{ t('common.export') }}
</a-button> </a-button>
</div> </a-space>
</template> </template>
<!-- 插槽-卡片右侧 --> <!-- 插槽-卡片右侧 -->
<template #extra> <template #extra>
<div class="button-container"> <a-space :size="8" align="center">
<a-tooltip> <a-tooltip>
<template #title>{{ t('common.searchBarText') }}</template> <template #title>{{ t('common.searchBarText') }}</template>
<a-switch <a-switch
@@ -569,7 +570,7 @@ onMounted(() => {
</template> </template>
</a-dropdown> </a-dropdown>
</a-tooltip> </a-tooltip>
</div> </a-space>
</template> </template>
<!-- 表格列表 --> <!-- 表格列表 -->
@@ -634,12 +635,12 @@ onMounted(() => {
<ProModal <ProModal
:drag="true" :drag="true"
:width="800" :width="800"
:visible="modalState.visibleByView" :open="modalState.openByView"
:title="modalState.title" :title="modalState.title"
@cancel="fnModalCancel" @cancel="fnModalCancel"
> >
<a-form layout="horizontal" :label-col="{ span: 6 }" :label-wrap="true"> <a-form layout="horizontal" :label-col="{ span: 6 }" :label-wrap="true">
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.system.post.positionId')" :label="t('views.system.post.positionId')"
@@ -659,7 +660,7 @@ onMounted(() => {
</a-form-item> </a-form-item>
</a-col> </a-col>
</a-row> </a-row>
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.system.post.positionSort')" :label="t('views.system.post.positionSort')"
@@ -680,7 +681,7 @@ onMounted(() => {
</a-form-item> </a-form-item>
</a-col> </a-col>
</a-row> </a-row>
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.system.post.positionName')" :label="t('views.system.post.positionName')"
@@ -725,7 +726,7 @@ onMounted(() => {
:destroyOnClose="true" :destroyOnClose="true"
:keyboard="false" :keyboard="false"
:mask-closable="false" :mask-closable="false"
:visible="modalState.visibleByEdit" :open="modalState.openByEdit"
:title="modalState.title" :title="modalState.title"
:confirm-loading="modalState.confirmLoading" :confirm-loading="modalState.confirmLoading"
@ok="fnModalOk" @ok="fnModalOk"
@@ -737,7 +738,7 @@ onMounted(() => {
:label-col="{ span: 6 }" :label-col="{ span: 6 }"
:label-wrap="true" :label-wrap="true"
> >
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.system.post.positionName')" :label="t('views.system.post.positionName')"
@@ -765,7 +766,7 @@ onMounted(() => {
</a-col> </a-col>
</a-row> </a-row>
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.system.post.positionCode')" :label="t('views.system.post.positionCode')"

2
src/views/system/quick-start/components/Done.vue
View File

@@ -1,6 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { stepState, fnToStepName } from '../hooks/useStep'; import { stepState, fnToStepName } from '../hooks/useStep';
import { Modal } from 'ant-design-vue/lib'; import { Modal } from 'ant-design-vue/es';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants'; import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import { removeToken } from '@/plugins/auth-token'; import { removeToken } from '@/plugins/auth-token';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';

29
src/views/system/quick-start/components/NeInfoConfig.vue
View File

@@ -1,5 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { Modal, message } from 'ant-design-vue/lib'; import { ProModal } from 'antdv-pro-modal';
import { Modal, message } from 'ant-design-vue/es';
import { nextTick, onMounted, reactive, ref, toRaw } from 'vue'; import { nextTick, onMounted, reactive, ref, toRaw } from 'vue';
import { import {
addNeInfo, addNeInfo,
@@ -53,7 +54,7 @@ const tabState: TabStateType = reactive({
/**对话框对象信息状态类型 */ /**对话框对象信息状态类型 */
type ModalStateType = { type ModalStateType = {
/**新增框或修改框是否显示 */ /**新增框或修改框是否显示 */
visibleByEdit: boolean; openByEdit: boolean;
/**标题 */ /**标题 */
title: string; title: string;
/**表单数据 */ /**表单数据 */
@@ -66,7 +67,7 @@ type ModalStateType = {
/**对话框对象信息状态 */ /**对话框对象信息状态 */
let modalState: ModalStateType = reactive({ let modalState: ModalStateType = reactive({
visibleByEdit: false, openByEdit: false,
title: '网元配置', title: '网元配置',
from: { from: {
id: undefined, id: undefined,
@@ -274,7 +275,7 @@ function fnModalVisibleByEdit(record?: any) {
}, },
], ],
}; };
modalState.visibleByEdit = true; modalState.openByEdit = true;
} else { } else {
//获取单个网元信息 当修改时 //获取单个网元信息 当修改时
if (modalState.confirmLoading) return; if (modalState.confirmLoading) return;
@@ -287,7 +288,7 @@ function fnModalVisibleByEdit(record?: any) {
if (res.code === RESULT_CODE_SUCCESS) { if (res.code === RESULT_CODE_SUCCESS) {
Object.assign(modalState.from, res.data); Object.assign(modalState.from, res.data);
modalState.title = t('views.configManage.neManage.editNe'); modalState.title = t('views.configManage.neManage.editNe');
modalState.visibleByEdit = true; modalState.openByEdit = true;
} else { } else {
message.error(t('common.getInfoFail'), 2); message.error(t('common.getInfoFail'), 2);
} }
@@ -361,7 +362,7 @@ function fnDelete(data: any) {
* 进行表达规则校验 * 进行表达规则校验
*/ */
function fnModalCancel() { function fnModalCancel() {
modalState.visibleByEdit = false; modalState.openByEdit = false;
modalState.confirmLoading = false; modalState.confirmLoading = false;
tabState.confirmLoading = false; tabState.confirmLoading = false;
} }
@@ -609,7 +610,7 @@ onMounted(() => {
:destroyOnClose="true" :destroyOnClose="true"
:keyboard="false" :keyboard="false"
:mask-closable="false" :mask-closable="false"
:visible="modalState.visibleByEdit" :open="modalState.openByEdit"
:title="modalState.title" :title="modalState.title"
:confirm-loading="modalState.confirmLoading" :confirm-loading="modalState.confirmLoading"
@ok="fnModalOk" @ok="fnModalOk"
@@ -623,7 +624,7 @@ onMounted(() => {
:model="modalState.from" :model="modalState.from"
autocomplete="off" autocomplete="off"
> >
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.ne.common.neType')" :label="t('views.ne.common.neType')"
@@ -652,7 +653,7 @@ onMounted(() => {
<template #title> <template #title>
{{ t('views.ne.common.neTypeTip') }} {{ t('views.ne.common.neTypeTip') }}
</template> </template>
<InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" /> <InfoCircleOutlined style="opacity: 0.45; color: inherit;" />
</a-tooltip> </a-tooltip>
</template> </template>
</a-input> </a-input>
@@ -680,7 +681,7 @@ onMounted(() => {
<template #title> <template #title>
{{ t('views.ne.common.neIdTip') }} {{ t('views.ne.common.neIdTip') }}
</template> </template>
<InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" /> <InfoCircleOutlined style="opacity: 0.45; color: inherit;" />
</a-tooltip> </a-tooltip>
</template> </template>
</a-input> </a-input>
@@ -688,7 +689,7 @@ onMounted(() => {
</a-col> </a-col>
</a-row> </a-row>
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.ne.common.ipAddr')" :label="t('views.ne.common.ipAddr')"
@@ -716,7 +717,7 @@ onMounted(() => {
{{ t('views.ne.common.ipAddrTip') }} {{ t('views.ne.common.ipAddrTip') }}
</div> </div>
</template> </template>
<InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" /> <InfoCircleOutlined style="opacity: 0.45; color: inherit;" />
</a-tooltip> </a-tooltip>
</template> </template>
</a-input> </a-input>
@@ -731,7 +732,7 @@ onMounted(() => {
</a-divider> </a-divider>
<!-- 主机连接配置 --> <!-- 主机连接配置 -->
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item :label="t('views.ne.neHost.addr')"> <a-form-item :label="t('views.ne.neHost.addr')">
<a-input <a-input
@@ -758,7 +759,7 @@ onMounted(() => {
</a-col> </a-col>
</a-row> </a-row>
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item :label="t('views.ne.neHost.user')"> <a-form-item :label="t('views.ne.neHost.user')">
<a-input <a-input

5
src/views/system/quick-start/components/NeInfoConfigPara5G.vue
View File

@@ -1,5 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import { Modal, message } from 'ant-design-vue/lib'; import { Modal, message } from 'ant-design-vue/es';
import { onMounted, reactive, toRaw } from 'vue'; import { onMounted, reactive, toRaw } from 'vue';
import { fnToStepName } from '../hooks/useStep'; import { fnToStepName } from '../hooks/useStep';
import useI18n from '@/hooks/useI18n'; import useI18n from '@/hooks/useI18n';
@@ -147,6 +147,9 @@ function fnGetList() {
case 'N3IWF': case 'N3IWF':
state.from.sbi.n3iwf_ip = item.ip; state.from.sbi.n3iwf_ip = item.ip;
break; break;
case 'SMSC':
state.from.sbi.smsc_ip = item.ip;
break;
} }
} }
} }

25
src/views/system/quick-start/components/NeInfoSoftwareInstall.vue
View File

@@ -1,6 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { Modal, TableColumnsType } from 'ant-design-vue/lib';
import { defineAsyncComponent, onMounted, reactive, ref } from 'vue'; import { defineAsyncComponent, onMounted, reactive, ref } from 'vue';
import { ProModal } from 'antdv-pro-modal';
import { Modal, TableColumnsType } from 'ant-design-vue/es';
import { fnToStepName } from '../hooks/useStep'; import { fnToStepName } from '../hooks/useStep';
import useI18n from '@/hooks/useI18n'; import useI18n from '@/hooks/useI18n';
import useDictStore from '@/store/modules/dict'; import useDictStore from '@/store/modules/dict';
@@ -68,9 +69,9 @@ type StateType = {
/**勾选单行记录 */ /**勾选单行记录 */
selectedRowOne: any; selectedRowOne: any;
/**多文件上传 */ /**多文件上传 */
visibleByMoreFile: boolean; openByMoreFile: boolean;
/**勾选安装弹窗 */ /**勾选安装弹窗 */
visibleByInstall: boolean; openByInstall: boolean;
/**操作数据进行版本升级 */ /**操作数据进行版本升级 */
operateDataUpgrade: any[]; operateDataUpgrade: any[];
/**确定按钮 loading */ /**确定按钮 loading */
@@ -83,8 +84,8 @@ let state: StateType = reactive({
data: [], data: [],
selectedRowKeys: [], selectedRowKeys: [],
selectedRowOne: { neType: '' }, selectedRowOne: { neType: '' },
visibleByMoreFile: false, openByMoreFile: false,
visibleByInstall: false, openByInstall: false,
operateDataUpgrade: [], operateDataUpgrade: [],
confirmLoading: false, confirmLoading: false,
}); });
@@ -106,15 +107,15 @@ function fnTableSelectedRowKeys(
/**对话框弹出确认执行函数*/ /**对话框弹出确认执行函数*/
function fnModalOk() { function fnModalOk() {
fnGetList(); fnGetList();
if (state.visibleByInstall) { if (state.openByInstall) {
fnModalCancel(); fnModalCancel();
} }
} }
/**对话框弹出关闭执行函数*/ /**对话框弹出关闭执行函数*/
function fnModalCancel() { function fnModalCancel() {
state.visibleByMoreFile = false; state.openByMoreFile = false;
state.visibleByInstall = false; state.openByInstall = false;
state.operateDataUpgrade = []; state.operateDataUpgrade = [];
} }
@@ -133,7 +134,7 @@ function fnRecordInstallConfirm() {
async function fnRecordInstall() { async function fnRecordInstall() {
if (state.confirmLoading) return; if (state.confirmLoading) return;
state.confirmLoading = true; state.confirmLoading = true;
state.visibleByInstall = true; state.openByInstall = true;
// 操作升级的网元数据 // 操作升级的网元数据
const selectRows = state.data.filter(item => const selectRows = state.data.filter(item =>
state.selectedRowKeys.includes(item.id) state.selectedRowKeys.includes(item.id)
@@ -280,7 +281,7 @@ onMounted(() => {
type="dashed" type="dashed"
:disabled="state.selectedRowKeys.length > 1" :disabled="state.selectedRowKeys.length > 1"
@click.prevent=" @click.prevent="
() => (state.visibleByMoreFile = !state.visibleByMoreFile) () => (state.openByMoreFile = !state.openByMoreFile)
" "
> >
<template #icon><UploadOutlined /></template> <template #icon><UploadOutlined /></template>
@@ -308,7 +309,7 @@ onMounted(() => {
<!-- 新增多文件上传框 --> <!-- 新增多文件上传框 -->
<UploadMoreFile <UploadMoreFile
v-model:visible="state.visibleByMoreFile" v-model:open="state.openByMoreFile"
:ne-type="state.selectedRowOne.neType" :ne-type="state.selectedRowOne.neType"
@ok="fnModalOk" @ok="fnModalOk"
@cancel="fnModalCancel" @cancel="fnModalCancel"
@@ -321,7 +322,7 @@ onMounted(() => {
:body-style="{ height: '520px', overflowY: 'scroll' }" :body-style="{ height: '520px', overflowY: 'scroll' }"
:keyboard="false" :keyboard="false"
:mask-closable="false" :mask-closable="false"
:visible="state.visibleByInstall" :open="state.openByInstall"
:title="t('views.system.quickStart.stepInstallModal')" :title="t('views.system.quickStart.stepInstallModal')"
:closable="false" :closable="false"
@ok="fnModalOk" @ok="fnModalOk"

12
src/views/system/quick-start/components/NeInfoSoftwareLicense.vue
View File

@@ -1,5 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import { Modal, TableColumnsType, message } from 'ant-design-vue/lib'; import { Modal, TableColumnsType, message } from 'ant-design-vue/es';
import { defineAsyncComponent, h, onMounted, reactive, ref } from 'vue'; import { defineAsyncComponent, h, onMounted, reactive, ref } from 'vue';
import { fnToStepName, stepState } from '../hooks/useStep'; import { fnToStepName, stepState } from '../hooks/useStep';
import useI18n from '@/hooks/useI18n'; import useI18n from '@/hooks/useI18n';
@@ -64,7 +64,7 @@ type StateType = {
/**勾选记录 */ /**勾选记录 */
selectedRowKeys: (string | number)[]; selectedRowKeys: (string | number)[];
/**授权文件上传 */ /**授权文件上传 */
visibleByLicenseFile: boolean; openByLicenseFile: boolean;
/**授权文件上传勾选指定到网元授权列表 */ /**授权文件上传勾选指定到网元授权列表 */
neLicenseList: any[]; neLicenseList: any[];
/**确定按钮 loading */ /**确定按钮 loading */
@@ -76,7 +76,7 @@ let state: StateType = reactive({
loading: false, loading: false,
data: [], data: [],
selectedRowKeys: [], selectedRowKeys: [],
visibleByLicenseFile: false, openByLicenseFile: false,
neLicenseList: [], neLicenseList: [],
confirmLoading: false, confirmLoading: false,
}); });
@@ -93,7 +93,7 @@ function fnModalOk() {
/**对话框弹出关闭执行函数*/ /**对话框弹出关闭执行函数*/
function fnModalCancel() { function fnModalCancel() {
state.visibleByLicenseFile = false; state.openByLicenseFile = false;
} }
/**对话框弹出打开执行函数 */ /**对话框弹出打开执行函数 */
@@ -108,7 +108,7 @@ function fnModalOpen() {
state.neLicenseList = []; state.neLicenseList = [];
} }
state.visibleByLicenseFile = !state.visibleByLicenseFile; state.openByLicenseFile = !state.openByLicenseFile;
} }
/**勾选刷新网元状态 */ /**勾选刷新网元状态 */
@@ -278,7 +278,7 @@ onMounted(() => {
<!-- 授权文件上传框 --> <!-- 授权文件上传框 -->
<UploadLicenseFile <UploadLicenseFile
v-model:visible="state.visibleByLicenseFile" v-model:open="state.openByLicenseFile"
:licenseList="state.neLicenseList" :licenseList="state.neLicenseList"
@ok="fnModalOk" @ok="fnModalOk"
@cancel="fnModalCancel" @cancel="fnModalCancel"

6
src/views/system/quick-start/components/SystemConfig.vue
View File

@@ -4,12 +4,12 @@ import useI18n from '@/hooks/useI18n';
import { nextTick, onMounted, reactive, watch } from 'vue'; import { nextTick, onMounted, reactive, watch } from 'vue';
import useAppStore from '@/store/modules/app'; import useAppStore from '@/store/modules/app';
import { parseUrlPath } from '@/plugins/file-static-url'; import { parseUrlPath } from '@/plugins/file-static-url';
import { Modal, message } from 'ant-design-vue/lib'; import { Modal, message } from 'ant-design-vue/es';
import { transferStaticFile, uploadFile } from '@/api/tool/file'; import { transferStaticFile, uploadFile } from '@/api/tool/file';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants'; import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import { sessionGet } from '@/utils/cache-session-utils'; import { sessionGet } from '@/utils/cache-session-utils';
import { FileType } from 'ant-design-vue/lib/upload/interface'; import { FileType } from 'ant-design-vue/es/upload/interface';
import { UploadRequestOption } from 'ant-design-vue/lib/vc-upload/interface'; import { UploadRequestOption } from 'ant-design-vue/es/vc-upload/interface';
import { changeValue } from '@/api/system/config'; import { changeValue } from '@/api/system/config';
import { bootloaderAccount } from '@/api/system/quick-start/bootloader'; import { bootloaderAccount } from '@/api/system/quick-start/bootloader';
const { t, currentLocale } = useI18n(); const { t, currentLocale } = useI18n();

7
src/views/system/quick-start/index.vue
View File

@@ -79,12 +79,17 @@ onMounted(() => {
// background: url('./../assets/black_dot.png') 0% 0% / 14px 14px repeat; // background: url('./../assets/black_dot.png') 0% 0% / 14px 14px repeat;
background-image: url(@/assets/background.jpg); background-image: url(@/assets/background_light.jpg);
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; background-size: cover;
background-position: center center; background-position: center center;
} }
[data-theme='dark'] .container {
background-image: url(@/assets/background_dark.jpg);
background-color: #141414;
}
.build-card { .build-card {
position: absolute; position: absolute;
top: 50%; top: 50%;

26
src/views/system/role/auth-user.vue
View File

@@ -2,10 +2,10 @@
import { useRoute, useRouter } from 'vue-router'; import { useRoute, useRouter } from 'vue-router';
import { reactive, onMounted, toRaw } from 'vue'; import { reactive, onMounted, toRaw } from 'vue';
import { PageContainer } from 'antdv-pro-layout'; import { PageContainer } from 'antdv-pro-layout';
import { message, Modal } from 'ant-design-vue/lib'; import { message, Modal } from 'ant-design-vue/es';
import { SizeType } from 'ant-design-vue/lib/config-provider'; import { SizeType } from 'ant-design-vue/es/config-provider';
import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface'; import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
import { ColumnsType } from 'ant-design-vue/lib/table'; import { ColumnsType } from 'ant-design-vue/es/table';
import AuthUserSelect from './components/auth-user-select.vue'; import AuthUserSelect from './components/auth-user-select.vue';
import { authUserAllocatedList, authUserChecked } from '@/api/system/role'; import { authUserAllocatedList, authUserChecked } from '@/api/system/role';
import { parseDateToStr } from '@/utils/date-utils'; import { parseDateToStr } from '@/utils/date-utils';
@@ -176,14 +176,14 @@ function fnTableSelectedRowKeys(keys: (string | number)[]) {
/**对话框对象信息状态类型 */ /**对话框对象信息状态类型 */
type ModalStateType = { type ModalStateType = {
/**选择用户框是否显示 */ /**选择用户框是否显示 */
visibleBySelectUser: boolean; openBySelectUser: boolean;
/**标题 */ /**标题 */
title: string; title: string;
}; };
/**对话框对象信息状态 */ /**对话框对象信息状态 */
let modalState: ModalStateType = reactive({ let modalState: ModalStateType = reactive({
visibleBySelectUser: false, openBySelectUser: false,
title: t('views.system.role.distributeUser'), title: t('views.system.role.distributeUser'),
}); });
@@ -191,7 +191,7 @@ let modalState: ModalStateType = reactive({
* 对话框弹出显示为 选择用户 * 对话框弹出显示为 选择用户
*/ */
function fnModalVisibleBySelectUser() { function fnModalVisibleBySelectUser() {
modalState.visibleBySelectUser = true; modalState.openBySelectUser = true;
} }
/** /**
@@ -211,7 +211,7 @@ function fnModalOk(userIds: string[] | number[]) {
roleId: roleId, roleId: roleId,
}).then(res => { }).then(res => {
if (res.code === RESULT_CODE_SUCCESS) { if (res.code === RESULT_CODE_SUCCESS) {
modalState.visibleBySelectUser = false; modalState.openBySelectUser = false;
message.success({ message.success({
content: t('views.system.role.suss', { content: t('views.system.role.suss', {
oper: t('views.system.role.giveUser'), oper: t('views.system.role.giveUser'),
@@ -390,7 +390,7 @@ onMounted(() => {
<a-card :bordered="false" :body-style="{ padding: '0px' }"> <a-card :bordered="false" :body-style="{ padding: '0px' }">
<!-- 插槽-卡片左侧侧 --> <!-- 插槽-卡片左侧侧 -->
<template #title> <template #title>
<div class="button-container"> <a-space :size="8" align="center">
<a-button type="default" @click.prevent="fnClose()"> <a-button type="default" @click.prevent="fnClose()">
<template #icon><CloseOutlined /></template> <template #icon><CloseOutlined /></template>
{{ t('common.cancel') }} {{ t('common.cancel') }}
@@ -413,12 +413,12 @@ onMounted(() => {
<template #icon><UsergroupDeleteOutlined /></template> <template #icon><UsergroupDeleteOutlined /></template>
{{ t('views.system.role.batchCancel') }} {{ t('views.system.role.batchCancel') }}
</a-button> </a-button>
</div> </a-space>
</template> </template>
<!-- 插槽-卡片右侧 --> <!-- 插槽-卡片右侧 -->
<template #extra> <template #extra>
<div class="button-container"> <a-space :size="8" align="center">
<a-tooltip> <a-tooltip>
<template #title>{{ t('common.searchBarText') }}</template> <template #title>{{ t('common.searchBarText') }}</template>
<a-switch <a-switch
@@ -458,7 +458,7 @@ onMounted(() => {
</template> </template>
</a-dropdown> </a-dropdown>
</a-tooltip> </a-tooltip>
</div> </a-space>
</template> </template>
<!-- 表格列表 --> <!-- 表格列表 -->
@@ -505,7 +505,7 @@ onMounted(() => {
<AuthUserSelect <AuthUserSelect
:role-id="roleId" :role-id="roleId"
:title="modalState.title" :title="modalState.title"
v-model:visible="modalState.visibleBySelectUser" v-model:open="modalState.openBySelectUser"
@ok="fnModalOk" @ok="fnModalOk"
/> />
</PageContainer> </PageContainer>

19
src/views/system/role/components/auth-user-select.vue
View File

@@ -1,8 +1,9 @@
<script setup lang="ts"> <script setup lang="ts">
import { reactive, toRaw, watch } from 'vue'; import { reactive, toRaw, watch } from 'vue';
import { message } from 'ant-design-vue/lib'; import { message } from 'ant-design-vue/es';
import { SizeType } from 'ant-design-vue/lib/config-provider'; import { SizeType } from 'ant-design-vue/es/config-provider';
import { ColumnsType } from 'ant-design-vue/lib/table'; import { ColumnsType } from 'ant-design-vue/es/table';
import { ProModal } from 'antdv-pro-modal';
import { authUserAllocatedList } from '@/api/system/role'; import { authUserAllocatedList } from '@/api/system/role';
import { parseDateToStr } from '@/utils/date-utils'; import { parseDateToStr } from '@/utils/date-utils';
import useDictStore from '@/store/modules/dict'; import useDictStore from '@/store/modules/dict';
@@ -10,13 +11,13 @@ import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import useI18n from '@/hooks/useI18n'; import useI18n from '@/hooks/useI18n';
const { t } = useI18n(); const { t } = useI18n();
const { getDict } = useDictStore(); const { getDict } = useDictStore();
const emit = defineEmits(['ok', 'cancel', 'update:visible']); const emit = defineEmits(['ok', 'cancel', 'update:open']);
const props = defineProps({ const props = defineProps({
title: { title: {
type: String, type: String,
default: '标题', default: '标题',
}, },
visible: { open: {
type: Boolean, type: Boolean,
default: false, default: false,
}, },
@@ -203,13 +204,13 @@ function fnModalOk() {
message.error(t('views.system.role.selectPls'), 2); message.error(t('views.system.role.selectPls'), 2);
return; return;
} }
emit('update:visible', false); emit('update:open', false);
emit('ok', userIds); emit('ok', userIds);
} }
/**弹框取消按钮事件 */ /**弹框取消按钮事件 */
function fnModalCancel() { function fnModalCancel() {
emit('update:visible', false); emit('update:open', false);
emit('cancel'); emit('cancel');
} }
@@ -227,7 +228,7 @@ function init() {
/**监听是否显示，初始数据 */ /**监听是否显示，初始数据 */
watch( watch(
() => props.visible, () => props.open,
val => { val => {
if (val) init(); if (val) init();
} }
@@ -240,7 +241,7 @@ watch(
:destroyOnClose="true" :destroyOnClose="true"
:forceFullscreen="true" :forceFullscreen="true"
:title="props.title" :title="props.title"
:visible="props.visible" :open="props.open"
:keyboard="false" :keyboard="false"
:mask-closable="false" :mask-closable="false"
@ok="fnModalOk" @ok="fnModalOk"

71
src/views/system/role/index.vue
View File

@@ -2,10 +2,11 @@
import { useRouter, useRoute } from 'vue-router'; import { useRouter, useRoute } from 'vue-router';
import { reactive, ref, onMounted, toRaw } from 'vue'; import { reactive, ref, onMounted, toRaw } from 'vue';
import { PageContainer } from 'antdv-pro-layout'; import { PageContainer } from 'antdv-pro-layout';
import { message, Modal, Form } from 'ant-design-vue/lib'; import { ProModal } from 'antdv-pro-modal';
import { SizeType } from 'ant-design-vue/lib/config-provider'; import { message, Modal, Form } from 'ant-design-vue/es';
import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface'; import { SizeType } from 'ant-design-vue/es/config-provider';
import { ColumnsType } from 'ant-design-vue/lib/table'; import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
import { ColumnsType } from 'ant-design-vue/es/table';
import { import {
exportRole, exportRole,
addRole, addRole,
@@ -21,7 +22,7 @@ import { roleDeptTreeSelect } from '@/api/system/dept';
import { saveAs } from 'file-saver'; import { saveAs } from 'file-saver';
import { parseDateToStr } from '@/utils/date-utils'; import { parseDateToStr } from '@/utils/date-utils';
import useDictStore from '@/store/modules/dict'; import useDictStore from '@/store/modules/dict';
import { DataNode } from 'ant-design-vue/lib/tree'; import { DataNode } from 'ant-design-vue/es/tree';
import { parseTreeKeys, parseTreeNodeKeys } from '@/utils/parse-tree-utils'; import { parseTreeKeys, parseTreeNodeKeys } from '@/utils/parse-tree-utils';
import { hasPermissions } from '@/plugins/auth-user'; import { hasPermissions } from '@/plugins/auth-user';
import { MENU_PATH_INLINE } from '@/constants/menu-constants'; import { MENU_PATH_INLINE } from '@/constants/menu-constants';
@@ -225,11 +226,11 @@ let deptTree: TreeDataType = {
/**对话框对象信息状态类型 */ /**对话框对象信息状态类型 */
type ModalStateType = { type ModalStateType = {
/**详情框是否显示 */ /**详情框是否显示 */
visibleByView: boolean; openByView: boolean;
/**新增框或修改框是否显示 */ /**新增框或修改框是否显示 */
visibleByEdit: boolean; openByEdit: boolean;
/**分配角色数据权限修改框是否显示 */ /**分配角色数据权限修改框是否显示 */
visibleByDataScope: boolean; openByDataScope: boolean;
/**标题 */ /**标题 */
title: string; title: string;
/**表单数据 */ /**表单数据 */
@@ -244,9 +245,9 @@ type ModalStateType = {
/**对话框对象信息状态 */ /**对话框对象信息状态 */
let modalState: ModalStateType = reactive({ let modalState: ModalStateType = reactive({
visibleByView: false, openByView: false,
visibleByEdit: false, openByEdit: false,
visibleByDataScope: false, openByDataScope: false,
title: '角色', title: '角色',
from: { from: {
roleId: undefined, roleId: undefined,
@@ -330,7 +331,7 @@ function fnModalVisibleByVive(roleId: string | number) {
modalState.from.menuIds = checkedKeys; modalState.from.menuIds = checkedKeys;
} }
modalState.title = t('views.system.role.roleInfo'); modalState.title = t('views.system.role.roleInfo');
modalState.visibleByView = true; modalState.openByView = true;
} else { } else {
message.error(t('common.getInfoFail'), 2); message.error(t('common.getInfoFail'), 2);
} }
@@ -347,7 +348,7 @@ function fnModalVisibleByEdit(roleId?: string | number) {
if (menuTree.treeData.length > 0) { if (menuTree.treeData.length > 0) {
modalState.menuTree.treeData = menuTree.treeData; modalState.menuTree.treeData = menuTree.treeData;
modalState.title = t('common.addText') + t('views.system.role.roleInfo'); modalState.title = t('common.addText') + t('views.system.role.roleInfo');
modalState.visibleByEdit = true; modalState.openByEdit = true;
} else { } else {
if (modalState.confirmLoading) return; if (modalState.confirmLoading) return;
const hide = message.loading(t('common.loading'), 0); const hide = message.loading(t('common.loading'), 0);
@@ -363,7 +364,7 @@ function fnModalVisibleByEdit(roleId?: string | number) {
modalState.menuTree.treeData = res.data; modalState.menuTree.treeData = res.data;
modalState.title = modalState.title =
t('common.addText') + t('views.system.role.roleInfo'); t('common.addText') + t('views.system.role.roleInfo');
modalState.visibleByEdit = true; modalState.openByEdit = true;
} }
}); });
} }
@@ -388,7 +389,7 @@ function fnModalVisibleByEdit(roleId?: string | number) {
} }
modalState.title = modalState.title =
t('common.editText') + t('views.system.role.roleInfo'); t('common.editText') + t('views.system.role.roleInfo');
modalState.visibleByEdit = true; modalState.openByEdit = true;
} else { } else {
message.error(t('common.getInfoFail'), 2); message.error(t('common.getInfoFail'), 2);
} }
@@ -417,7 +418,7 @@ function fnModalOk() {
key, key,
duration: 2, duration: 2,
}); });
modalState.visibleByEdit = false; modalState.openByEdit = false;
modalStateFrom.resetFields(); modalStateFrom.resetFields();
fnGetList(1); fnGetList(1);
} else { } else {
@@ -442,9 +443,9 @@ function fnModalOk() {
* 进行表达规则校验 * 进行表达规则校验
*/ */
function fnModalCancel() { function fnModalCancel() {
modalState.visibleByEdit = false; modalState.openByEdit = false;
modalState.visibleByView = false; modalState.openByView = false;
modalState.visibleByDataScope = false; modalState.openByDataScope = false;
modalStateFrom.resetFields(); modalStateFrom.resetFields();
modalState.menuTree.checkedKeys = []; modalState.menuTree.checkedKeys = [];
modalState.menuTree.expandedKeys = []; modalState.menuTree.expandedKeys = [];
@@ -527,7 +528,7 @@ function fnModalOkDataScope() {
content: t('common.msgSuccess', { msg: modalState.title }), content: t('common.msgSuccess', { msg: modalState.title }),
duration: 2, duration: 2,
}); });
modalState.visibleByDataScope = false; modalState.openByDataScope = false;
modalStateFrom.resetFields(); modalStateFrom.resetFields();
} else { } else {
message.error({ message.error({
@@ -569,7 +570,7 @@ function fnRecordDataScope(roleId: string | number) {
modalState.from.deptIds = checkedKeys; modalState.from.deptIds = checkedKeys;
} }
modalState.title = t('views.system.role.distribute'); modalState.title = t('views.system.role.distribute');
modalState.visibleByDataScope = true; modalState.openByDataScope = true;
} else { } else {
message.error(t('common.getInfoFail'), 2); message.error(t('common.getInfoFail'), 2);
} }
@@ -823,7 +824,7 @@ onMounted(() => {
<a-card :bordered="false" :body-style="{ padding: '0px' }"> <a-card :bordered="false" :body-style="{ padding: '0px' }">
<!-- 插槽-卡片左侧侧 --> <!-- 插槽-卡片左侧侧 -->
<template #title> <template #title>
<div class="button-container"> <a-space :size="8" align="center">
<a-button <a-button
type="primary" type="primary"
@click.prevent="fnModalVisibleByEdit()" @click.prevent="fnModalVisibleByEdit()"
@@ -850,7 +851,7 @@ onMounted(() => {
<template #icon><ExportOutlined /></template> <template #icon><ExportOutlined /></template>
{{ t('common.export') }} {{ t('common.export') }}
</a-button> </a-button>
</div> </a-space>
</template> </template>
<!-- 插槽-卡片右侧 --> <!-- 插槽-卡片右侧 -->
@@ -1003,12 +1004,12 @@ onMounted(() => {
:drag="true" :drag="true"
:width="800" :width="800"
:destroyOnClose="false" :destroyOnClose="false"
:visible="modalState.visibleByView" :open="modalState.openByView"
:title="modalState.title" :title="modalState.title"
@cancel="fnModalCancel" @cancel="fnModalCancel"
> >
<a-form layout="horizontal" :label-col="{ span: 6 }" :label-wrap="true"> <a-form layout="horizontal" :label-col="{ span: 6 }" :label-wrap="true">
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item :label="t('views.system.role.roleId')" name="roleId"> <a-form-item :label="t('views.system.role.roleId')" name="roleId">
{{ modalState.from.roleId }} {{ modalState.from.roleId }}
@@ -1025,7 +1026,7 @@ onMounted(() => {
</a-form-item> </a-form-item>
</a-col> </a-col>
</a-row> </a-row>
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.system.role.roleSort')" :label="t('views.system.role.roleSort')"
@@ -1046,7 +1047,7 @@ onMounted(() => {
</a-form-item> </a-form-item>
</a-col> </a-col>
</a-row> </a-row>
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.system.role.roleName')" :label="t('views.system.role.roleName')"
@@ -1109,7 +1110,7 @@ onMounted(() => {
:destroyOnClose="true" :destroyOnClose="true"
:keyboard="false" :keyboard="false"
:mask-closable="false" :mask-closable="false"
:visible="modalState.visibleByEdit" :open="modalState.openByEdit"
:title="modalState.title" :title="modalState.title"
:confirm-loading="modalState.confirmLoading" :confirm-loading="modalState.confirmLoading"
@ok="fnModalOk" @ok="fnModalOk"
@@ -1121,7 +1122,7 @@ onMounted(() => {
:label-col="{ span: 6 }" :label-col="{ span: 6 }"
:label-wrap="true" :label-wrap="true"
> >
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.system.role.roleName')" :label="t('views.system.role.roleName')"
@@ -1149,7 +1150,7 @@ onMounted(() => {
</a-col> </a-col>
</a-row> </a-row>
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.system.role.roleKey')" :label="t('views.system.role.roleKey')"
@@ -1164,7 +1165,7 @@ onMounted(() => {
{{ t('views.system.role.roleKeyTip') }} {{ t('views.system.role.roleKeyTip') }}
</div> </div>
</template> </template>
<InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" /> <InfoCircleOutlined style="opacity: 0.45; color: inherit" />
</a-tooltip> </a-tooltip>
</template> </template>
</a-input> </a-input>
@@ -1254,7 +1255,7 @@ onMounted(() => {
:destroyOnClose="true" :destroyOnClose="true"
:keyboard="false" :keyboard="false"
:mask-closable="false" :mask-closable="false"
:visible="modalState.visibleByDataScope" :open="modalState.openByDataScope"
:title="modalState.title" :title="modalState.title"
:confirm-loading="modalState.confirmLoading" :confirm-loading="modalState.confirmLoading"
@ok="fnModalOkDataScope" @ok="fnModalOkDataScope"
@@ -1266,7 +1267,7 @@ onMounted(() => {
:label-col="{ span: 6 }" :label-col="{ span: 6 }"
:label-wrap="true" :label-wrap="true"
> >
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item :label="t('views.system.role.roleId')" name="roleId"> <a-form-item :label="t('views.system.role.roleId')" name="roleId">
{{ modalState.from.roleId }} {{ modalState.from.roleId }}
@@ -1283,7 +1284,7 @@ onMounted(() => {
</a-form-item> </a-form-item>
</a-col> </a-col>
</a-row> </a-row>
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.system.role.roleSort')" :label="t('views.system.role.roleSort')"
@@ -1304,7 +1305,7 @@ onMounted(() => {
</a-form-item> </a-form-item>
</a-col> </a-col>
</a-row> </a-row>
<a-row :gutter="16"> <a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item <a-form-item
:label="t('views.system.role.roleName')" :label="t('views.system.role.roleName')"

Some files were not shown because too many files have changed in this diff Show More