Files
fe.ems.vue3/src/views/ne/neVersion/index.vue

724 lines
20 KiB
Vue

<script setup lang="ts">
import { reactive, ref, onMounted, toRaw, defineAsyncComponent } from 'vue';
import { PageContainer } from 'antdv-pro-layout';
import {
Modal,
TableColumnsType,
message,
notification,
} 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 useNeInfoStore from '@/store/modules/neinfo';
import { NE_TYPE_LIST } from '@/constants/ne-constants';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import { listNeVersion, operateNeVersion } from '@/api/ne/neVersion';
import { parseDateToStr } from '@/utils/date-utils';
import useI18n from '@/hooks/useI18n';
import useDictStore from '@/store/modules/dict';
import useMaskStore from '@/store/modules/mask';
const maskStore = useMaskStore();
const { t } = useI18n();
const { getDict } = useDictStore();
// 异步加载组件
const EditModal = defineAsyncComponent(
() => import('../neSoftware/components/EditModal.vue')
);
const UploadMoreFile = defineAsyncComponent(
() => import('../neSoftware/components/UploadMoreFile.vue')
);
/**字典数据-状态 */
let dictStatus = ref<DictType[]>([]);
/**网元参数 */
let neOtions = ref<Record<string, any>[]>([]);
/**查询参数 */
let queryParams = reactive({
/**网元类型 */
neType: undefined,
/**网元ID */
neId: '',
/**当前页数 */
pageNum: 1,
/**每页条数 */
pageSize: 20,
});
/**查询参数重置 */
function fnQueryReset() {
queryParams = Object.assign(queryParams, {
neType: undefined,
neId: '',
pageNum: 1,
pageSize: 20,
});
tablePagination.current = 1;
tablePagination.pageSize = 20;
fnGetList();
}
/**表格状态类型 */
type TabeStateType = {
/**加载等待 */
loading: boolean;
/**紧凑型 */
size: SizeType;
/**搜索栏 */
seached: boolean;
/**记录数据 */
data: any[];
/**勾选记录 */
selectedRowKeys: (string | number)[];
/**勾选单行记录 */
selectedRowOne: any;
};
/**表格状态 */
let tableState: TabeStateType = reactive({
loading: false,
size: 'middle',
seached: false,
data: [],
selectedRowKeys: [],
/**勾选单行记录 */
selectedRowOne: { neType: '' },
});
/**表格字段列 */
let tableColumns = ref<TableColumnsType>([
{
title: t('common.rowId'),
dataIndex: 'id',
align: 'left',
width: 100,
},
{
title: t('views.ne.common.neType'),
dataIndex: 'neType',
align: 'left',
width: 100,
},
{
title: t('views.ne.common.neId'),
dataIndex: 'neId',
align: 'left',
width: 100,
},
{
title: t('views.ne.neVersion.version'),
dataIndex: 'version',
align: 'left',
width: 150,
resizable: true,
minWidth: 150,
maxWidth: 200,
},
{
title: t('views.ne.neVersion.preVersion'),
dataIndex: 'preVersion',
align: 'left',
width: 150,
resizable: true,
minWidth: 150,
maxWidth: 200,
},
{
title: t('views.ne.neVersion.newVersion'),
dataIndex: 'newVersion',
align: 'left',
width: 150,
resizable: true,
minWidth: 150,
maxWidth: 200,
},
{
title: t('views.ne.neVersion.status'),
key: 'status',
dataIndex: 'status',
align: 'left',
width: 120,
},
{
title: t('common.updateTime'),
dataIndex: 'updateTime',
align: 'left',
customRender(opt) {
if (!opt.value) return '';
return parseDateToStr(opt.value);
},
width: 150,
},
{
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 fnTableSelectedRowKeys(
keys: (string | number)[],
selectedRows: any[]
) {
tableState.selectedRowKeys = keys;
// 勾选单个上传
if (selectedRows.length === 1) {
tableState.selectedRowOne = selectedRows[0];
} else {
tableState.selectedRowOne = { neType: '' };
}
}
/**查询列表, pageNum初始页数 */
function fnGetList(pageNum?: number) {
if (tableState.loading) return;
tableState.loading = true;
if (pageNum) {
queryParams.pageNum = pageNum;
}
listNeVersion(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);
}
} else {
tablePagination.total = 0;
tableState.data = [];
}
tableState.loading = false;
});
}
/**对话框对象信息状态类型 */
type ModalStateType = {
/**单文件上传 */
visibleByEdit: boolean;
/**多文件上传 */
visibleByMoreFile: boolean;
/**勾选升级情况 */
visibleByUpgrade: boolean;
/**操作数据进行版本升级 */
operateDataUpgrade: any[];
/**确定按钮 loading */
confirmLoading: boolean;
};
/**对话框对象信息状态 */
let modalState: ModalStateType = reactive({
visibleByEdit: false,
visibleByMoreFile: false,
visibleByUpgrade: false,
operateDataUpgrade: [],
confirmLoading: false,
});
/**
* 对话框弹出确认执行函数
* 进行表达规则校验
*/
function fnModalEditOk() {
fnGetList(1);
if (modalState.visibleByUpgrade) {
fnModalEditCancel();
}
}
/**
* 对话框弹出关闭执行函数
* 进行表达规则校验
*/
function fnModalEditCancel() {
modalState.visibleByEdit = false;
modalState.visibleByMoreFile = false;
modalState.visibleByUpgrade = false;
modalState.operateDataUpgrade = [];
}
/**版本控制升级回退 */
function fnRecordVersion(
action: 'upgrade' | 'rollback',
row: Record<string, any>
) {
let contentTip = `${action} version packages?`;
if (action === 'upgrade') {
contentTip = t('views.ne.neVersion.upgradeTip');
if (row.newVersion === '' || row.newVersion === '-') {
message.warning(t('views.ne.neVersion.upgradeTipEmpty'), 3);
return;
}
if (row.newVersion === row.version) {
message.warning(t('views.ne.neVersion.upgradeTipEqual'), 3);
return;
}
}
if (action === 'rollback') {
contentTip = t('views.ne.neVersion.rollbackTip');
if (row.preVersion === '' || row.preVersion === '-') {
message.warning(t('views.ne.neVersion.rollbackTipEmpty'), 3);
return;
}
if (row.preVersion === row.version) {
message.warning(t('views.ne.neVersion.rollbackTipEqual'), 3);
return;
}
}
Modal.confirm({
title: t('common.tipTitle'),
content: contentTip,
onOk() {
if (modalState.confirmLoading) return;
modalState.confirmLoading = true;
const notificationKey = 'NE_VERSION_' + action;
notification.info({
key: notificationKey,
message: t('common.tipTitle'),
description: `${row.neType} ${t('common.loading')}`,
duration: 0,
});
let preinput = {};
if (row.neType.toUpperCase() === 'IMS') {
preinput = { pisCSCF: 'y', updateMFetc: 'No', updateMFshare: 'No' };
}
operateNeVersion({
neType: row.neType,
neId: row.neId,
action: action,
preinput: preinput,
})
.then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
// OMC自升级
if (row.neType.toUpperCase() === 'OMC') {
if (res.code === RESULT_CODE_SUCCESS) {
maskStore.handleMaskType('reload');
} else {
message.error(t('views.ne.neVersion.upgradeFail'), 3);
}
return;
}
fnGetList(1);
} else {
message.error(t('views.ne.neVersion.upgradeFail'), 3);
}
})
.finally(() => {
notification.close(notificationKey);
modalState.confirmLoading = false;
});
},
});
}
/**版本升级弹出确认是否升级 */
function fnRecordUpgradeConfirm() {
Modal.confirm({
title: t('common.tipTitle'),
content: t('views.ne.neVersion.upgradeBatchTip'),
onOk() {
fnRecordUpgrade();
},
});
}
/**版本升级进行 */
async function fnRecordUpgrade() {
if (modalState.confirmLoading) return;
modalState.confirmLoading = true;
modalState.visibleByUpgrade = true;
// 操作升级的网元数据
const selectRows = tableState.data.filter(item =>
tableState.selectedRowKeys.includes(item.id)
);
for (const row of selectRows) {
if (row.newVersion === '-' || row.newVersion === '') {
modalState.operateDataUpgrade.push({
neType: row.neType,
neId: row.neId,
status: 'fail',
log: t('views.ne.neVersion.upgradeNotNewVer'),
});
continue;
}
// OMC跳过操作
if (row.neType.toUpperCase() === 'OMC') {
modalState.operateDataUpgrade.push({
neType: row.neType,
neId: row.neId,
status: 'fail',
log: t('views.ne.neVersion.upgradeOMCVer'),
});
continue;
}
// 开始升级
let preinput = {};
if (row.neType.toUpperCase() === 'IMS') {
preinput = { pisCSCF: 'y', updateMFetc: 'No', updateMFshare: 'No' };
}
const installData = {
neType: row.neType,
neId: row.neId,
action: 'upgrade',
preinput: preinput,
};
try {
const res = await operateNeVersion(installData);
const operateData = {
neType: row.neType,
neId: row.neId,
status: 'fail',
log: t('common.operateErr'),
};
if (res.code === RESULT_CODE_SUCCESS) {
operateData.status = 'done';
operateData.log = t('views.ne.neVersion.upgradeDone');
} else {
operateData.status = 'fail';
operateData.log = t('views.ne.neVersion.upgradeFail');
}
modalState.operateDataUpgrade.unshift(operateData);
} catch (error) {
console.error(error);
}
}
// 结束
modalState.confirmLoading = false;
}
onMounted(() => {
// 初始字典数据
getDict('ne_version_status').then(res => {
dictStatus.value = res;
});
// 获取网元网元列表
useNeInfoStore()
.fnNelist()
.then(res => {
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
neOtions.value = useNeInfoStore().getNeSelectOtions;
} else {
message.warning({
content: t('common.noData'),
duration: 2,
});
}
})
.finally(() => {
// 获取列表数据
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.ne.common.neType')" name="neType ">
<a-auto-complete
v-model:value="queryParams.neType"
:options="NE_TYPE_LIST.map(v => ({ value: v }))"
allow-clear
:placeholder="t('common.inputPlease')"
/>
</a-form-item>
</a-col>
<a-col :lg="6" :md="12" :xs="24">
<a-form-item :label="t('views.ne.common.neId')" name="neId">
<a-input
v-model:value="queryParams.neId"
allow-clear
:placeholder="t('common.inputPlease')"
></a-input>
</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="
() => (modalState.visibleByEdit = !modalState.visibleByEdit)
"
>
<template #icon><UploadOutlined /></template>
{{ t('views.ne.neSoftware.upload') }}
</a-button>
<a-button
type="primary"
:disabled="tableState.selectedRowKeys.length > 1"
@click.prevent="
() =>
(modalState.visibleByMoreFile = !modalState.visibleByMoreFile)
"
>
<template #icon><UploadOutlined /></template>
<template v-if="tableState.selectedRowOne.neType">
{{ t('views.ne.neSoftware.upload') }}
{{ tableState.selectedRowOne.neType }}
</template>
<template v-else>
{{ t('views.ne.neSoftware.uploadBatch') }}
</template>
</a-button>
<a-button
type="primary"
:ghost="true"
:disabled="tableState.selectedRowKeys.length <= 0"
:loading="modalState.confirmLoading"
@click.prevent="fnRecordUpgradeConfirm()"
>
<template #icon><ThunderboltOutlined /></template>
{{ t('views.ne.neVersion.upgradeBatch') }}
</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()">
<template #icon><ReloadOutlined /></template>
</a-button>
</a-tooltip>
<a-tooltip placement="topRight">
<template #title>{{ t('common.sizeText') }}</template>
<a-dropdown placement="bottomRight" 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: tableColumns.length * 120 }"
@resizeColumn="(w:number, col:any) => (col.width = w)"
:row-selection="{
type: 'checkbox',
columnWidth: '48px',
selectedRowKeys: tableState.selectedRowKeys,
onChange: fnTableSelectedRowKeys,
}"
>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'status'">
<DictTag :options="dictStatus" :value="record.status" />
</template>
<template v-if="column.key === 'id'">
<a-space :size="8" align="center">
<a-tooltip placement="topRight">
<template #title>
{{ t('views.ne.neVersion.upgrade') }}
</template>
<a-button
type="link"
@click.prevent="fnRecordVersion('upgrade', record)"
>
<template #icon><ThunderboltOutlined /></template>
</a-button>
</a-tooltip>
<a-tooltip placement="topRight">
<template #title>
{{ t('views.ne.neVersion.rollback') }}
</template>
<a-button
type="link"
@click.prevent="fnRecordVersion('rollback', record)"
>
<template #icon><RollbackOutlined /></template>
</a-button>
</a-tooltip>
</a-space>
</template>
</template>
</a-table>
</a-card>
<!-- 新增单文件上传 -->
<EditModal
v-model:visible="modalState.visibleByEdit"
@ok="fnModalEditOk"
@cancel="fnModalEditCancel"
></EditModal>
<!-- 新增多文件上传框 -->
<UploadMoreFile
v-model:visible="modalState.visibleByMoreFile"
:ne-type="tableState.selectedRowOne.neType"
@ok="fnModalEditOk"
@cancel="fnModalEditCancel"
></UploadMoreFile>
<!-- 勾选网元版本进行升级框 -->
<ProModal
:drag="true"
:width="800"
:destroyOnClose="true"
:body-style="{ height: '520px', overflowY: 'scroll' }"
:keyboard="false"
:mask-closable="false"
:visible="modalState.visibleByUpgrade"
:title="t('views.ne.neVersion.upgradeModal')"
:closable="false"
@ok="fnModalEditOk"
@cancel="fnModalEditCancel"
>
<template #footer>
<a-button
key="submit"
type="primary"
:disabled="modalState.confirmLoading"
@click="fnModalEditOk"
>
{{ t('common.close') }}
</a-button>
</template>
<p>
<a-alert
v-if="modalState.confirmLoading"
:message="t('common.loading')"
type="info"
show-icon
>
<template #icon>
<LoadingOutlined />
</template>
</a-alert>
</p>
<p v-for="o in modalState.operateDataUpgrade" :key="o.neId">
<a-alert
:message="`${o.neType}-${o.neId}`"
:description="o.log"
:type="o.status === 'done' ? 'success' : 'error'"
show-icon
>
<template #icon>
<CheckCircleOutlined v-if="o.status === 'done'" />
<InfoCircleOutlined v-else />
</template>
</a-alert>
</p>
</ProModal>
</PageContainer>
</template>
<style lang="less" scoped>
.table :deep(.ant-pagination) {
padding: 0 24px;
}
</style>