diff --git a/src/views/ne/neInfo/index.vue b/src/views/ne/neInfo/index.vue index 03364c9d..f9fd5aa4 100644 --- a/src/views/ne/neInfo/index.vue +++ b/src/views/ne/neInfo/index.vue @@ -2,11 +2,10 @@ import { reactive, onMounted, toRaw } from 'vue'; import { PageContainer } from 'antdv-pro-layout'; import { message, Modal, Form } 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 { - getNeInfo, - addNeInfo, - updateNeInfo, - delNeInfo, exportSet, startNf, restartNf, @@ -14,16 +13,22 @@ import { importFile, listServerFile, } from '@/api/configManage/neManage'; - -import { listNeInfo } from '@/api/ne/neInfo'; -import { updateNeConfigReload } from '@/api/configManage/configParam'; import useI18n from '@/hooks/useI18n'; import { FileType } from 'ant-design-vue/lib/upload/interface'; import { UploadRequestOption } from 'ant-design-vue/lib/vc-upload/interface'; import { RESULT_CODE_SUCCESS } from '@/constants/result-constants'; import useNeInfoStore from '@/store/modules/neinfo'; -import useNeOptions from './useNeOptions'; -const { fnNeRestart, fnNeStop, fnNeLogFile } = useNeOptions(); +import { + listNeInfo, + getNeInfo, + addNeInfo, + updateNeInfo, + delNeInfo, +} from '@/api/ne/neInfo'; +import { NE_TYPE_LIST } from '@/constants/ne-constants'; +import { testNeHost } from '@/api/ne/neHost'; +import useDictStore from '@/store/modules/dict'; +const { getDict } = useDictStore(); const { t } = useI18n(); /**表格所需option */ @@ -54,13 +59,171 @@ function fnQueryReset() { pageNum: 1, pageSize: 20, }); + tablePagination.current = 1; + tablePagination.pageSize = 20; fnGetList(); } +/**表格状态类型 */ +type TabeStateType = { + /**加载等待 */ + loading: boolean; + /**紧凑型 */ + size: SizeType; + /**斑马纹 */ + striped: boolean; + /**搜索栏 */ + seached: boolean; + /**记录数据 */ + data: object[]; + /**勾选记录 */ + selectedRowKeys: (string | number)[]; +}; + +/**表格状态 */ +let tableState: TabeStateType = reactive({ + loading: false, + size: 'middle', + striped: false, + seached: false, + data: [], + selectedRowKeys: [], +}); + +/**表格字段列 */ +let tableColumns: ColumnsType = [ + { + title: t('views.configManage.neManage.neType'), + dataIndex: 'neType', + align: 'left', + width: 100, + }, + { + title: t('views.configManage.neManage.neId'), + dataIndex: 'neId', + align: 'left', + width: 100, + }, + { + title: t('views.configManage.neManage.uid'), + dataIndex: 'rmUid', + align: 'left', + width: 150, + }, + { + title: t('views.configManage.neManage.neName'), + dataIndex: 'neName', + align: 'left', + width: 120, + }, + { + title: t('views.configManage.neManage.ip'), + dataIndex: 'ip', + align: 'left', + width: 120, + }, + { + title: t('views.configManage.neManage.port'), + dataIndex: 'port', + align: 'left', + width: 50, + }, + { + title: '状态', + dataIndex: 'serverState', + key: 'serverState', + align: 'left', + width: 100, + }, + { + title: t('common.operate'), + key: 'id', + align: 'left', + }, +]; + +/**表格分页器参数 */ +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 fnTableStriped(_record: unknown, index: number): any { + return tableState.striped && index % 2 === 1 ? 'table-striped' : undefined; +} + +/**表格多选 */ +function fnTableSelectedRowKeys(keys: (string | number)[]) { + tableState.selectedRowKeys = keys; +} + +/**字典数据 */ +let dict: { + /**主机类型 */ + neHostType: DictType[]; + /**分组 */ + neHostGroupId: DictType[]; + /**认证模式 */ + neHostAuthMode: DictType[]; +} = reactive({ + neHostType: [], + neHostGroupId: [], + neHostAuthMode: [], +}); + +/** + * 对话框弹出测试连接 + */ +function fnModalTest() { + testNeHost({}) + .then(res => { + if (res.code === RESULT_CODE_SUCCESS) { + message.success({ + content: t('views.ne.neHost.testOk'), + duration: 2, + }); + } else { + message.error({ + content: `${res.msg}`, + duration: 2, + }); + } + }) + .finally(() => { + modalState.confirmLoading = false; + }); +} + /**对话框对象信息状态类型 */ type ModalStateType = { - /**详情框是否显示 */ - visibleByView: boolean; /**新增框或修改框是否显示 */ visibleByEdit: boolean; /**导入是否显示 */ @@ -77,23 +240,50 @@ type ModalStateType = { /**对话框对象信息状态 */ let modalState: ModalStateType = reactive({ - visibleByView: false, visibleByEdit: false, visibleByImport: false, title: '网元', from: { - dn: '', - ip: '', - neAddress: '', - neId: '', + id: undefined, + neId: '001', + neType: 'OMC', neName: '', - neType: '', - port: '', - province: '', - pvFlag: '', - rmUid: '', + ip: '', + port: 3030, + pvFlag: 'PNF', + rmUid: '4400HX1OMC001', + neAddress: '', + dn: '', vendorName: '', - sync: true, + province: '', + // 主机 + hosts: [ + { + hostId: undefined, + hostType: 'ssh', + groupId: '0', + title: '', + addr: '', + port: 22, + user: 'user', + authMode: '0', + password: 'user', + privateKey: '', + passPhrase: '', + remark: '', + }, + { + hostId: undefined, + hostType: 'telnet', + groupId: '0', + title: '', + addr: '', + port: 4100, + user: 'user', + password: 'user', + remark: '', + }, + ], }, importFrom: { neId: '', @@ -113,46 +303,31 @@ const modalStateFrom = Form.useForm( neType: [ { required: true, - message: - t('views.configManage.neManage.neType') + t('common.unableNull'), + message: '请输入网元类型', }, ], neId: [ { required: true, - message: t('views.configManage.neManage.neId') + t('common.unableNull'), + message: '请输入网元标识', }, ], rmUid: [ { required: true, - message: t('views.configManage.neManage.uid') + t('common.unableNull'), + message: '请输入资源唯一标识', }, ], ip: [ { required: true, - message: t('views.configManage.neManage.ip') + t('common.unableNull'), - }, - ], - port: [ - { - required: true, - message: t('views.configManage.neManage.port') + t('common.unableNull'), - }, - ], - pvFlag: [ - { - required: true, - message: - t('views.configManage.neManage.pvflag') + t('common.unableNull'), + message: '请输入网元IP地址', }, ], neName: [ { required: true, - message: - t('views.configManage.neManage.neName') + t('common.unableNull'), + message: '请输入网元名称', }, ], }) @@ -201,10 +376,10 @@ function fnModalVisibleByEdit(row?: Record) { hide(); if (res.code === RESULT_CODE_SUCCESS) { modalState.from = Object.assign(modalState.from, res.data); - modalState.title = t('views.configManage.neManage.editNe'); + modalState.title = '编辑网元信息'; modalState.visibleByEdit = true; } else { - message.error(t('views.configManage.neManage.getInfo'), 2); + message.error(t('common.getInfoFail'), 2); } }); } @@ -225,20 +400,14 @@ function fnModalOk() { result .then(res => { if (res.code === RESULT_CODE_SUCCESS) { - if (res.data?.error || res.data?.affectedRows === 0) { - message.error({ - content: `${t('views.configManage.neManage.operFail')}`, - duration: 3, - }); - } else { - message.success({ - content: t('common.msgSuccess', { msg: modalState.title }), - duration: 3, - }); - modalState.visibleByEdit = false; - modalStateFrom.resetFields(); - fnGetList(1); - } + message.success({ + content: '操作成功', + duration: 3, + }); + fnModalCancel(); + fnGetList(1); + // 刷新缓存的网元信息 + useNeInfoStore().fnRefreshNelist(); } else { message.error({ content: `${t('views.configManage.neManage.operFail')}`, @@ -249,8 +418,6 @@ function fnModalOk() { .finally(() => { hide(); modalState.confirmLoading = false; - // 刷新缓存的网元信息 - useNeInfoStore().fnRefreshNelist(); }); }) .catch(e => { @@ -258,6 +425,15 @@ function fnModalOk() { }); } +/** + * 对话框弹出关闭执行函数 + * 进行表达规则校验 + */ +function fnModalCancel() { + modalState.visibleByEdit = false; + modalStateFrom.resetFields(); +} + /** * 导入对话框弹出确认执行函数 * 进行表达规则校验 @@ -309,21 +485,10 @@ function fnImportModalOk() { * 进行表达规则校验 */ function fnImportModalCancel() { - modalState.visibleByView = false; modalState.visibleByImport = false; importStateFrom.resetFields(); } -/** - * 对话框弹出关闭执行函数 - * 进行表达规则校验 - */ -function fnModalCancel() { - modalState.visibleByEdit = false; - modalState.visibleByView = false; - modalStateFrom.resetFields(); -} - /** * 网元导出配置 * @param row 网元编号ID @@ -354,26 +519,6 @@ function fnRecordExport(row: Record) { }); } -/** - * 记录多项选择 - */ -function fnRecordMore(type: string | number, row: Record) { - if (type === 'delete') { - fnRecordDelete(row); - return; - } - - if (type === 'export') { - fnRecordExport(row); - } - - if (type === 'import') { - modalState.importFrom = Object.assign(modalState.importFrom, row); - modalState.title = t('views.configManage.neManage.import'); - modalState.visibleByImport = true; - } -} - /**查询网元远程服务器备份文件 */ function typeChange(value: any) { if (value === 'server') { @@ -409,43 +554,74 @@ function fnUploadFile(up: UploadRequestOption) { modalState.importFrom.file = up.file; } -/**信息对象信息状态类型 */ -type InfoStateType = { - /**显示搜索区 */ - seached: boolean; - /**加载等待 */ - loading: boolean; - /**数据总数 */ - total: number; - data: Record[]; -}; +/** + * 记录删除 + * @param id 编号 + */ +function fnRecordDelete(id: string) { + if (!id) return; + let msg = ''; + if (id === '0') { + const neInfo: any = tableState.data.find( + (item: any) => item.id === tableState.selectedRowKeys[0] + ); + if (neInfo) { + msg = neInfo.neName; + } + msg = `${msg}... ${tableState.selectedRowKeys.length}`; + id = tableState.selectedRowKeys.join(','); + } else { + const neInfo: any = tableState.data.find((item: any) => item.id === id); + if (neInfo) { + msg = neInfo.neName; + } + } -/**信息对象信息状态 */ -const infoState: InfoStateType = reactive({ - seached: false, - loading: false, - total: 0, - data: [], -}); + Modal.confirm({ + title: t('common.tipTitle'), + content: `确认删除网元名称为【${msg}】的数据项?`, + onOk() { + modalState.confirmLoading = true; + const hide = message.loading(t('common.loading'), 0); + delNeInfo(id) + .then(res => { + if (res.code === RESULT_CODE_SUCCESS) { + message.success({ + content: `操作成功`, + duration: 3, + }); + fnGetList(1); + } else { + message.error({ + content: `${res.msg}`, + duration: 3, + }); + } + }) + .finally(() => { + hide(); + modalState.confirmLoading = false; + }); + }, + }); +} -/**查询网元列表, pageNum初始页数 */ +/**查询列表, pageNum初始页数 */ function fnGetList(pageNum?: number) { - if (infoState.loading) return; - infoState.loading = true; + if (tableState.loading) return; + tableState.loading = true; if (pageNum) { queryParams.pageNum = pageNum; } - // 超过总数不请求 - const infoDataLen = infoState.data.length; - if (infoDataLen >= infoState.total && infoState.total !== 0) { - infoState.loading = false; - return; - } listNeInfo(toRaw(queryParams)).then(res => { if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.rows)) { - infoState.total = res.total; + // 取消勾选 + if (tableState.selectedRowKeys.length > 0) { + tableState.selectedRowKeys = []; + } + tablePagination.total = res.total; // 遍历处理资源情况数值 - const rows = res.rows.map(item => { + tableState.data = res.rows.map(item => { const neState = item.serverState; let sysCpuUsage = 0; let nfCpuUsage = 0; @@ -499,91 +675,67 @@ function fnGetList(pageNum?: number) { return item; }); - infoState.data = infoState.data.concat(rows); - // 页数+ - if (infoDataLen < infoState.total) { - queryParams.pageNum += 1; - } } - infoState.loading = false; + tableState.loading = false; }); } /** - * 卡片更多菜单项 - * @param key 菜单key + * 记录多项选择 */ -function fnMoreMenu(key: string | number) { - // 刷新当前 - if (key === 'reload') { +function fnRecordMore(type: string | number, row: Record) { + if (type === 'delete') { + // fnRecordDelete(row); + return; } - // 关闭当前 - if (key === 'current') { - } - // 关闭其他 - if (key === 'other') { - } - // 关闭全部 - if (key === 'all') { - Modal.confirm({ - title: t('common.tipTitle'), - content: t('views.tool.terminal.allTip'), - onOk() { - // hostState.show = false; - // tabState.panes.splice(1); - // tabState.activeKey = '0'; - }, - }); - } -} -/** - * 网元删除 - * @param row 网元编号ID - */ -function fnRecordDelete(row: Record) { - Modal.confirm({ - title: t('common.tipTitle'), - content: t('views.configManage.neManage.delSure', { msg: row.neName }), - onOk() { - infoState.loading = true; - const key = 'delNotice'; - message.loading({ content: t('common.loading'), key }); - delNeInfo(row) - .then(res => { - if (res.code === RESULT_CODE_SUCCESS) { - if (res.data.data && res.data.data.affectedRows) { - message.success({ - content: t('common.msgSuccess', { - msg: t('common.deleteText'), - }), - key, - duration: 2, - }); - infoState.loading = false; - fnGetList(); - // 刷新缓存的网元信息 - useNeInfoStore().fnRefreshNelist(); - } - } else { - message.error({ - content: `${res.msg}`, - key: key, - duration: 2, - }); - } - }) - .finally(() => { - infoState.loading = false; - }); - }, - }); + if (type === 'export') { + // fnRecordExport(row); + } + + if (type === 'start') { + // fnRecordStart(row); + } + + if (type === 'restart') { + // fnRecordRestart(row); + } + + if (type === 'stop') { + // fnRecordStop(row); + } + + if (type === 'reload') { + // fnNeReload(row); + } + + if (type === 'import') { + modalState.importFrom = Object.assign(modalState.importFrom, row); + modalState.title = t('views.configManage.neManage.import'); + modalState.visibleByImport = true; + } } onMounted(() => { - // 刷新缓存的网元信息 - useNeInfoStore() - .fnRefreshNelist() + // 初始字典数据 + Promise.allSettled([ + getDict('ne_host_type'), + getDict('ne_host_groupId'), + getDict('ne_host_authMode'), + ]) + .then(resArr => { + if (resArr[0].status === 'fulfilled') { + dict.neHostType = resArr[0].value; + } + if (resArr[1].status === 'fulfilled') { + dict.neHostGroupId = resArr[1].value; + } + if (resArr[2].status === 'fulfilled') { + dict.neHostAuthMode = resArr[2].value; + } + // 刷新缓存的网元信息 + return useNeInfoStore().fnRefreshNelist(); + }) .finally(() => { // 获取列表数据 fnGetList(); @@ -594,7 +746,7 @@ onMounted(() => { @@ -649,200 +811,235 @@ onMounted(() => { + + + + + + + + + + + + + - - + - -