style: 数据列表列宽固定操作

This commit is contained in:
TsMask
2023-11-01 19:16:32 +08:00
parent 6cfe080a94
commit e97943bf10
7 changed files with 112 additions and 30 deletions

View File

@@ -69,21 +69,25 @@ let tableColumns: ColumnsType = [
title: t('common.rowId'), title: t('common.rowId'),
dataIndex: 'id', dataIndex: 'id',
align: 'center', align: 'center',
width: 1,
}, },
{ {
title: t('views.configManage.backupManage.neType'), title: t('views.configManage.backupManage.neType'),
dataIndex: 'neType', dataIndex: 'neType',
align: 'center', align: 'center',
width: 2,
}, },
{ {
title: t('views.configManage.backupManage.neID'), title: t('views.configManage.backupManage.neID'),
dataIndex: 'neId', dataIndex: 'neId',
align: 'center', align: 'center',
width: 2,
}, },
{ {
title: t('views.configManage.backupManage.fileName'), title: t('views.configManage.backupManage.fileName'),
dataIndex: 'fileName', dataIndex: 'fileName',
align: 'center', align: 'center',
width: 3,
}, },
{ {
title: t('views.configManage.backupManage.createAt'), title: t('views.configManage.backupManage.createAt'),
@@ -93,11 +97,14 @@ let tableColumns: ColumnsType = [
if (!opt.value) return ''; if (!opt.value) return '';
return parseDateToStr(opt.value); return parseDateToStr(opt.value);
}, },
width: 3,
}, },
{ {
title: t('common.operate'), title: t('common.operate'),
key: 'id', key: 'id',
align: 'center', align: 'center',
fixed: 'right',
width: 2,
}, },
]; ];
@@ -395,15 +402,15 @@ onMounted(() => {
:selected-keys="[tableState.size as string]" :selected-keys="[tableState.size as string]"
@click="fnTableSize" @click="fnTableSize"
> >
<a-menu-item key="default">{{ <a-menu-item key="default">
t('common.size.default') {{ t('common.size.default') }}
}}</a-menu-item> </a-menu-item>
<a-menu-item key="middle">{{ <a-menu-item key="middle">
t('common.size.middle') {{ t('common.size.middle') }}
}}</a-menu-item> </a-menu-item>
<a-menu-item key="small">{{ <a-menu-item key="small">
t('common.size.small') {{ t('common.size.small') }}
}}</a-menu-item> </a-menu-item>
</a-menu> </a-menu>
</template> </template>
</a-dropdown> </a-dropdown>
@@ -420,7 +427,7 @@ onMounted(() => {
:data-source="tableState.data" :data-source="tableState.data"
:size="tableState.size" :size="tableState.size"
:pagination="tablePagination" :pagination="tablePagination"
:scroll="{ x: true }" :scroll="{ x: 1200, y: 400 }"
> >
<template #bodyCell="{ column, record }"> <template #bodyCell="{ column, record }">
<template v-if="column.key === 'id'"> <template v-if="column.key === 'id'">

View File

@@ -64,26 +64,31 @@ let tableColumns: ColumnsType = [
title: t('views.configManage.license.neType'), title: t('views.configManage.license.neType'),
dataIndex: 'neType', dataIndex: 'neType',
align: 'center', align: 'center',
width: 2,
}, },
{ {
title: t('views.configManage.license.neId'), title: t('views.configManage.license.neId'),
dataIndex: 'neId', dataIndex: 'neId',
align: 'center', align: 'center',
width: 2,
}, },
{ {
title: t('views.configManage.license.fileName'), title: t('views.configManage.license.fileName'),
dataIndex: 'fileName', dataIndex: 'fileName',
align: 'center', align: 'center',
width: 3,
}, },
{ {
title: t('views.configManage.license.comment'), title: t('views.configManage.license.comment'),
dataIndex: 'comment', dataIndex: 'comment',
align: 'center', align: 'center',
width: 5,
}, },
{ {
title: t('views.configManage.license.createTime'), title: t('views.configManage.license.createTime'),
dataIndex: 'createdAt', dataIndex: 'createdAt',
align: 'center', align: 'center',
width: 2,
}, },
]; ];
@@ -400,7 +405,7 @@ onMounted(() => {
:data-source="tableState.data" :data-source="tableState.data"
:size="tableState.size" :size="tableState.size"
:pagination="tablePagination" :pagination="tablePagination"
:scroll="{ x: true }" :scroll="{ x: 1000 }"
> >
</a-table> </a-table>
</a-card> </a-card>

View File

@@ -86,51 +86,61 @@ let tableColumns: ColumnsType = [
title: '网元类型', title: '网元类型',
dataIndex: 'neType', dataIndex: 'neType',
align: 'center', align: 'center',
width: 3,
}, },
{ {
title: '网元内部标识', title: '网元内部标识',
dataIndex: 'neId', dataIndex: 'neId',
align: 'center', align: 'center',
width: 3,
}, },
{ {
title: '资源唯一标识', title: '资源唯一标识',
dataIndex: 'rmUid', dataIndex: 'rmUid',
align: 'center', align: 'center',
width: 5,
}, },
{ {
title: '网元名称', title: '网元名称',
dataIndex: 'neName', dataIndex: 'neName',
align: 'center', align: 'center',
width: 5,
}, },
{ {
title: 'IP地址', title: 'IP地址',
dataIndex: 'ip', dataIndex: 'ip',
align: 'center', align: 'center',
width: 5,
}, },
{ {
title: '端口', title: '端口',
dataIndex: 'port', dataIndex: 'port',
align: 'center', align: 'center',
width: 3,
}, },
{ {
title: '网元虚拟化标识', title: '网元虚拟化标识',
dataIndex: 'pvFlag', dataIndex: 'pvFlag',
align: 'center', align: 'center',
width: 5,
}, },
{ {
title: '网元所在省份', title: '网元所在省份',
dataIndex: 'province', dataIndex: 'province',
align: 'center', align: 'center',
width: 5,
}, },
{ {
title: '厂商名称', title: '厂商名称',
dataIndex: 'vendorName', dataIndex: 'vendorName',
align: 'center', align: 'center',
width: 5,
}, },
{ {
title: '网络标识', title: '网络标识',
dataIndex: 'dn', dataIndex: 'dn',
align: 'center', align: 'center',
width: 5,
}, },
{ {
title: '修改时间', title: '修改时间',
@@ -140,11 +150,14 @@ let tableColumns: ColumnsType = [
if (!opt.value) return ''; if (!opt.value) return '';
return parseDateToStr(opt.value); return parseDateToStr(opt.value);
}, },
width: 5,
}, },
{ {
title: t('common.operate'), title: t('common.operate'),
key: 'id', key: 'id',
align: 'center', align: 'center',
fixed: 'right',
width: 5,
}, },
]; ];
@@ -749,7 +762,7 @@ onMounted(() => {
:data-source="tableState.data" :data-source="tableState.data"
:size="tableState.size" :size="tableState.size"
:pagination="tablePagination" :pagination="tablePagination"
:scroll="{ x: true,y:400 }" :scroll="{ x: 2000, y:400 }"
> >
<template #bodyCell="{ column, record }"> <template #bodyCell="{ column, record }">
<template v-if="column.key === 'id'"> <template v-if="column.key === 'id'">

View File

@@ -81,34 +81,38 @@ let tableColumns: ColumnsType = [
title: '网元类型', title: '网元类型',
dataIndex: 'neType', dataIndex: 'neType',
align: 'center', align: 'center',
width: 2,
}, },
{ {
title: '网元内部标识', title: '网元内部标识',
dataIndex: 'neId', dataIndex: 'neId',
align: 'center', align: 'center',
width: 2,
}, },
{ {
title: '版本', title: '版本',
dataIndex: 'version', dataIndex: 'version',
align: 'center', align: 'center',
width: 2,
}, },
{ {
title: '升级前版本', title: '升级前版本',
dataIndex: 'preVersion', dataIndex: 'preVersion',
align: 'center', align: 'center',
width: '60px', width: 2,
}, },
{ {
title: '回退前版本', title: '回退前版本',
dataIndex: 'newVersion', dataIndex: 'newVersion',
align: 'center', align: 'center',
width: '60px', width: 2,
}, },
{ {
title: '状态', title: '状态',
dataIndex: 'status', dataIndex: 'status',
key: 'status', key: 'status',
align: 'center', align: 'center',
width: 2,
}, },
{ {
title: '激活时间', title: '激活时间',
@@ -118,6 +122,7 @@ let tableColumns: ColumnsType = [
if (!opt.value) return ''; if (!opt.value) return '';
return parseDateToStr(opt.value); return parseDateToStr(opt.value);
}, },
width: 2,
}, },
]; ];
@@ -254,7 +259,7 @@ watch(
:loading="tableState.loading" :loading="tableState.loading"
:data-source="tableState.data" :data-source="tableState.data"
:size="tableState.size" :size="tableState.size"
:scroll="{ y: 400, x: true }" :scroll="{ x: 1200, y: 400 }"
:pagination="tablePagination" :pagination="tablePagination"
> >
</a-table> </a-table>

View File

@@ -76,16 +76,19 @@ let tableColumns: ColumnsType = [
title: t('views.configManage.softwareManage.neType'), title: t('views.configManage.softwareManage.neType'),
dataIndex: 'neType', dataIndex: 'neType',
align: 'center', align: 'center',
width: 2,
}, },
{ {
title: t('views.configManage.softwareManage.fileName'), title: t('views.configManage.softwareManage.fileName'),
dataIndex: 'fileName', dataIndex: 'fileName',
align: 'center', align: 'center',
width: 2,
}, },
{ {
title: t('views.configManage.softwareManage.version'), title: t('views.configManage.softwareManage.version'),
dataIndex: 'version', dataIndex: 'version',
align: 'center', align: 'center',
width: 2,
}, },
{ {
title: t('views.configManage.softwareManage.updateTime'), title: t('views.configManage.softwareManage.updateTime'),
@@ -95,16 +98,20 @@ let tableColumns: ColumnsType = [
if (!opt.value) return ''; if (!opt.value) return '';
return parseDateToStr(opt.value); return parseDateToStr(opt.value);
}, },
width: 2,
}, },
{ {
title: t('views.configManage.softwareManage.description'), title: t('views.configManage.softwareManage.description'),
dataIndex: 'comment', dataIndex: 'comment',
align: 'center', align: 'center',
width: 2,
}, },
{ {
title: t('common.operate'), title: t('common.operate'),
key: 'id', key: 'id',
align: 'center', align: 'center',
fixed: 'right',
width: 2,
}, },
]; ];
@@ -691,7 +698,7 @@ onMounted(() => {
:data-source="tableState.data" :data-source="tableState.data"
:size="tableState.size" :size="tableState.size"
:pagination="tablePagination" :pagination="tablePagination"
:scroll="{ x: true }" :scroll="{ x: 1200, y: 400 }"
> >
<template #bodyCell="{ column, record }"> <template #bodyCell="{ column, record }">
<template v-if="column.key === 'id'"> <template v-if="column.key === 'id'">

View File

@@ -122,42 +122,50 @@ let tableColumns: ColumnsType = [
title: t('views.faultManage.activeAlarm.alarmId'), title: t('views.faultManage.activeAlarm.alarmId'),
dataIndex: 'alarmId', dataIndex: 'alarmId',
align: 'center', align: 'center',
width: 8,
}, },
{ {
title: t('views.faultManage.activeAlarm.neId'), title: t('views.faultManage.activeAlarm.neId'),
dataIndex: 'neId', dataIndex: 'neId',
align: 'center', align: 'center',
width: 8,
}, },
{ {
title: t('views.faultManage.activeAlarm.neName'), title: t('views.faultManage.activeAlarm.neName'),
dataIndex: 'neName', dataIndex: 'neName',
align: 'center', align: 'center',
width: 8,
}, },
{ {
title: t('views.faultManage.activeAlarm.neType'), title: t('views.faultManage.activeAlarm.neType'),
dataIndex: 'neType', dataIndex: 'neType',
align: 'center', align: 'center',
width: 5,
}, },
{ {
title: t('views.faultManage.activeAlarm.origLevel'), title: t('views.faultManage.activeAlarm.origLevel'),
align: 'center', align: 'center',
key: 'origSeverity', key: 'origSeverity',
width: 5,
}, },
{ {
title: t('views.faultManage.activeAlarm.alarmCode'), title: t('views.faultManage.activeAlarm.alarmCode'),
dataIndex: 'alarmCode', dataIndex: 'alarmCode',
align: 'center', align: 'center',
width: 5,
}, },
{ {
title: t('views.faultManage.activeAlarm.alarmTitle'), title: t('views.faultManage.activeAlarm.alarmTitle'),
dataIndex: 'alarmTitle', dataIndex: 'alarmTitle',
align: 'center', align: 'center',
width: 5,
}, },
{ {
title: t('views.faultManage.activeAlarm.eventTime'), title: t('views.faultManage.activeAlarm.eventTime'),
dataIndex: 'eventTime', dataIndex: 'eventTime',
align: 'center', align: 'center',
sorter: true, sorter: (a: any, b: any) => 1,
width: 8,
}, },
{ {
title: t('views.faultManage.activeAlarm.alarmType'), title: t('views.faultManage.activeAlarm.alarmType'),
@@ -176,16 +184,19 @@ let tableColumns: ColumnsType = [
} }
return opt.value; return opt.value;
}, },
width: 5,
}, },
{ {
title: t('views.faultManage.activeAlarm.pvFlag'), title: t('views.faultManage.activeAlarm.pvFlag'),
dataIndex: 'pvFlag', dataIndex: 'pvFlag',
align: 'center', align: 'center',
width: 5,
}, },
{ {
title: t('views.faultManage.activeAlarm.clearUser'), title: t('views.faultManage.activeAlarm.clearUser'),
dataIndex: 'clearUser', dataIndex: 'clearUser',
align: 'center', align: 'center',
width: 10,
}, },
{ {
title: t('views.faultManage.activeAlarm.clearType'), title: t('views.faultManage.activeAlarm.clearType'),
@@ -202,6 +213,7 @@ let tableColumns: ColumnsType = [
} }
return opt.value; return opt.value;
}, },
width: 5,
}, },
{ {
title: t('views.faultManage.activeAlarm.ackState'), title: t('views.faultManage.activeAlarm.ackState'),
@@ -217,16 +229,20 @@ let tableColumns: ColumnsType = [
} }
return opt.value; return opt.value;
}, },
width: 5,
}, },
{ {
title: t('views.faultManage.activeAlarm.ackUser'), title: t('views.faultManage.activeAlarm.ackUser'),
dataIndex: 'ackUser', dataIndex: 'ackUser',
align: 'center', align: 'center',
width: 5,
}, },
{ {
title: t('common.operate'), title: t('common.operate'),
key: 'alarm_id', key: 'alarm_id',
align: 'center', align: 'center',
fixed: 'right',
width: 5,
}, },
]; ];
@@ -239,52 +255,61 @@ let alarmTableColumns: ColumnsType = [
title: t('views.faultManage.activeAlarm.alarmTitle'), title: t('views.faultManage.activeAlarm.alarmTitle'),
dataIndex: '告警名称', dataIndex: '告警名称',
align: 'center', align: 'center',
width: 3,
}, },
{ {
title: t('views.faultManage.activeAlarm.locationInfo'), title: t('views.faultManage.activeAlarm.locationInfo'),
dataIndex: '告警定位信息', dataIndex: '告警定位信息',
align: 'center', align: 'center',
width: 5,
}, },
{ {
title: t('views.faultManage.activeAlarm.addInfo'), title: t('views.faultManage.activeAlarm.addInfo'),
dataIndex: '告警帮助信息', dataIndex: '告警帮助信息',
align: 'center', align: 'center',
width: 8,
}, },
{ {
title: t('views.faultManage.activeAlarm.alarmType'), title: t('views.faultManage.activeAlarm.alarmType'),
dataIndex: '告警类型', dataIndex: '告警类型',
align: 'center', align: 'center',
width: 5,
}, },
{ {
title: t('views.faultManage.activeAlarm.origLevel'), title: t('views.faultManage.activeAlarm.origLevel'),
dataIndex: '告警级别', dataIndex: '告警级别',
align: 'center', align: 'center',
width: 3,
}, },
{ {
title: t('views.faultManage.activeAlarm.alarmCode'), title: t('views.faultManage.activeAlarm.alarmCode'),
dataIndex: '告警编号', dataIndex: '告警编号',
align: 'center', align: 'center',
width: 3,
}, },
{ {
title: t('views.faultManage.activeAlarm.specificProblem'), title: t('views.faultManage.activeAlarm.specificProblem'),
dataIndex: '告警问题原因', dataIndex: '告警问题原因',
align: 'center', align: 'center',
width: 5,
}, },
{ {
title: t('views.faultManage.activeAlarm.clearType'), title: t('views.faultManage.activeAlarm.clearType'),
dataIndex: '清除类型', dataIndex: '清除类型',
align: 'center', align: 'center',
width: 3,
}, },
{ {
title: t('views.faultManage.activeAlarm.realTitle'), title: t('views.faultManage.activeAlarm.realTitle'),
dataIndex: '英文标题', dataIndex: '英文标题',
align: 'center', align: 'center',
width: 5,
}, },
{ {
title: t('views.faultManage.activeAlarm.objectNf'), title: t('views.faultManage.activeAlarm.objectNf'),
dataIndex: '适用网元', dataIndex: '适用网元',
align: 'center', align: 'center',
width: 2,
}, },
]; ];
@@ -986,7 +1011,7 @@ onMounted(() => {
:data-source="alarmTableState.data" :data-source="alarmTableState.data"
:size="alarmTableState.size" :size="alarmTableState.size"
:pagination="false" :pagination="false"
:scroll="{ x: true, y: 450 }" :scroll="{ x: 2000, y: 560 }"
> >
</a-table> </a-table>
</a-drawer> </a-drawer>
@@ -1001,11 +1026,12 @@ onMounted(() => {
:data-source="tableState.data" :data-source="tableState.data"
:size="tableState.size" :size="tableState.size"
:row-selection="{ :row-selection="{
columnWidth: 2,
selectedRowKeys: state.selectedRowKeys, selectedRowKeys: state.selectedRowKeys,
onChange: onSelectChange, onChange: onSelectChange,
}" }"
:pagination="tablePagination" :pagination="tablePagination"
:scroll="{ x: true }" :scroll="{ x: 2000, y: 400 }"
> >
<template #bodyCell="{ column, record }"> <template #bodyCell="{ column, record }">
<template v-if="column.key === 'origSeverity'"> <template v-if="column.key === 'origSeverity'">
@@ -1044,6 +1070,7 @@ onMounted(() => {
<!-- 详情框 --> <!-- 详情框 -->
<a-modal <a-modal
width="800px" width="800px"
:body-style="{ height: '520px', overflowY: 'scroll' }"
:keyboard="false" :keyboard="false"
:mask-closable="false" :mask-closable="false"
:visible="modalState.visibleByView" :visible="modalState.visibleByView"

View File

@@ -111,41 +111,49 @@ let tableColumns: ColumnsType = [
title: t('views.faultManage.activeAlarm.alarmId'), title: t('views.faultManage.activeAlarm.alarmId'),
dataIndex: 'alarmId', dataIndex: 'alarmId',
align: 'center', align: 'center',
width: 5,
}, },
{ {
title: t('views.faultManage.activeAlarm.neId'), title: t('views.faultManage.activeAlarm.neId'),
dataIndex: 'neId', dataIndex: 'neId',
align: 'center', align: 'center',
width: 5,
}, },
{ {
title: t('views.faultManage.activeAlarm.neName'), title: t('views.faultManage.activeAlarm.neName'),
dataIndex: 'neName', dataIndex: 'neName',
align: 'center', align: 'center',
width: 5,
}, },
{ {
title: t('views.faultManage.activeAlarm.neType'), title: t('views.faultManage.activeAlarm.neType'),
dataIndex: 'neType', dataIndex: 'neType',
align: 'center', align: 'center',
width: 5,
}, },
{ {
title: t('views.faultManage.activeAlarm.origLevel'), title: t('views.faultManage.activeAlarm.origLevel'),
align: 'center', align: 'center',
key: 'origSeverity', key: 'origSeverity',
width: 5,
}, },
{ {
title: t('views.faultManage.activeAlarm.alarmCode'), title: t('views.faultManage.activeAlarm.alarmCode'),
dataIndex: 'alarmCode', dataIndex: 'alarmCode',
align: 'center', align: 'center',
width: 5,
}, },
{ {
title: t('views.faultManage.activeAlarm.alarmTitle'), title: t('views.faultManage.activeAlarm.alarmTitle'),
dataIndex: 'alarmTitle', dataIndex: 'alarmTitle',
align: 'center', align: 'center',
width: 5,
}, },
{ {
title: t('views.faultManage.activeAlarm.eventTime'), title: t('views.faultManage.activeAlarm.eventTime'),
dataIndex: 'eventTime', dataIndex: 'eventTime',
align: 'center', align: 'center',
width: 5,
}, },
{ {
title: t('views.faultManage.activeAlarm.alarmType'), title: t('views.faultManage.activeAlarm.alarmType'),
@@ -164,16 +172,19 @@ let tableColumns: ColumnsType = [
} }
return opt.value; return opt.value;
}, },
width: 5,
}, },
{ {
title: t('views.faultManage.activeAlarm.pvFlag'), title: t('views.faultManage.activeAlarm.pvFlag'),
dataIndex: 'pvFlag', dataIndex: 'pvFlag',
align: 'center', align: 'center',
width: 5,
}, },
{ {
title: t('views.faultManage.activeAlarm.clearUser'), title: t('views.faultManage.activeAlarm.clearUser'),
dataIndex: 'clearUser', dataIndex: 'clearUser',
align: 'center', align: 'center',
width: 5,
}, },
{ {
title: t('views.faultManage.activeAlarm.clearType'), title: t('views.faultManage.activeAlarm.clearType'),
@@ -190,6 +201,7 @@ let tableColumns: ColumnsType = [
} }
return opt.value; return opt.value;
}, },
width: 5,
}, },
{ {
title: t('views.faultManage.activeAlarm.ackState'), title: t('views.faultManage.activeAlarm.ackState'),
@@ -205,16 +217,20 @@ let tableColumns: ColumnsType = [
} }
return opt.value; return opt.value;
}, },
width: 5,
}, },
{ {
title: t('views.faultManage.activeAlarm.ackUser'), title: t('views.faultManage.activeAlarm.ackUser'),
dataIndex: 'ackUser', dataIndex: 'ackUser',
align: 'center', align: 'center',
width: 5,
}, },
{ {
title: t('common.operate'), title: t('common.operate'),
key: 'alarm_id', key: 'alarm_id',
align: 'center', align: 'center',
fixed: 'right',
width: 5,
}, },
]; ];
@@ -730,15 +746,15 @@ onMounted(() => {
:selected-keys="[tableState.size as string]" :selected-keys="[tableState.size as string]"
@click="fnTableSize" @click="fnTableSize"
> >
<a-menu-item key="default">{{ <a-menu-item key="default">
t('common.size.default') {{ t('common.size.default') }}
}}</a-menu-item> </a-menu-item>
<a-menu-item key="middle">{{ <a-menu-item key="middle">
t('common.size.middle') {{ t('common.size.middle') }}
}}</a-menu-item> </a-menu-item>
<a-menu-item key="small">{{ <a-menu-item key="small">
t('common.size.small') {{ t('common.size.small') }}
}}</a-menu-item> </a-menu-item>
</a-menu> </a-menu>
</template> </template>
</a-dropdown> </a-dropdown>
@@ -755,11 +771,12 @@ onMounted(() => {
:data-source="tableState.data" :data-source="tableState.data"
:size="tableState.size" :size="tableState.size"
:row-selection="{ :row-selection="{
columnWidth: 3,
selectedRowKeys: state.selectedRowKeys, selectedRowKeys: state.selectedRowKeys,
onChange: onSelectChange, onChange: onSelectChange,
}" }"
:pagination="tablePagination" :pagination="tablePagination"
:scroll="{ x: true }" :scroll="{ x: 2000, y: 400 }"
> >
<template #bodyCell="{ column, record }"> <template #bodyCell="{ column, record }">
<template v-if="column.key === 'origSeverity'"> <template v-if="column.key === 'origSeverity'">
@@ -787,6 +804,7 @@ onMounted(() => {
<!-- 详情框 --> <!-- 详情框 -->
<a-modal <a-modal
width="800px" width="800px"
:body-style="{ height: '520px', overflowY: 'scroll' }"
:keyboard="false" :keyboard="false"
:mask-closable="false" :mask-closable="false"
:visible="modalState.visibleByView" :visible="modalState.visibleByView"