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

2023-11-01 19:16:32 +08:00
parent 6cfe080a94
commit e97943bf10
7 changed files with 112 additions and 30 deletions
--- a/src/views/configManage/backupManage/index.vue
+++ b/src/views/configManage/backupManage/index.vue
@@ -69,21 +69,25 @@ 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.createAt'),
@@ -93,11 +97,14 @@ let tableColumns: ColumnsType = [
      if (!opt.value) return '';
      return parseDateToStr(opt.value);
    },
+    width: 3,
  },
  {
    title: t('common.operate'),
    key: 'id',
    align: 'center',
+    fixed: 'right',
+    width: 2,
  },
 ];

@@ -395,15 +402,15 @@ onMounted(() => {
                  :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-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>
@@ -420,7 +427,7 @@ onMounted(() => {
        :data-source="tableState.data"
        :size="tableState.size"
        :pagination="tablePagination"
-        :scroll="{ x: true }"
+        :scroll="{ x: 1200, y: 400 }"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'id'">
--- a/src/views/configManage/license/index.vue
+++ b/src/views/configManage/license/index.vue
@@ -64,26 +64,31 @@ let tableColumns: ColumnsType = [
    title: t('views.configManage.license.neType'),
    dataIndex: 'neType',
    align: 'center',
+    width: 2,
  },
  {
    title: t('views.configManage.license.neId'),
    dataIndex: 'neId',
    align: 'center',
+    width: 2,
  },
  {
    title: t('views.configManage.license.fileName'),
    dataIndex: 'fileName',
    align: 'center',
+    width: 3,
  },
  {
    title: t('views.configManage.license.comment'),
    dataIndex: 'comment',
    align: 'center',
+    width: 5,
  },
  {
    title: t('views.configManage.license.createTime'),
    dataIndex: 'createdAt',
    align: 'center',
+    width: 2,
  },
 ];

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

@@ -749,7 +762,7 @@ onMounted(() => {
        :data-source="tableState.data"
        :size="tableState.size"
        :pagination="tablePagination"
-        :scroll="{ x: true,y:400 }"
+        :scroll="{ x: 2000, y:400 }"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'id'">
--- a/src/views/configManage/softwareManage/components/software-history.vue
+++ b/src/views/configManage/softwareManage/components/software-history.vue
@@ -81,34 +81,38 @@ let tableColumns: ColumnsType = [
    title: '网元类型',
    dataIndex: 'neType',
    align: 'center',
+    width: 2,
  },
  {
    title: '网元内部标识',
    dataIndex: 'neId',
    align: 'center',
+    width: 2,
  },
  {
    title: '版本',
    dataIndex: 'version',
    align: 'center',
+    width: 2,
  },
  {
    title: '升级前版本',
    dataIndex: 'preVersion',
    align: 'center',
-    width: '60px',
+    width: 2,
  },
  {
    title: '回退前版本',
    dataIndex: 'newVersion',
    align: 'center',
-    width: '60px',
+    width: 2,
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    align: 'center',
+    width: 2,
  },
  {
    title: '激活时间',
@@ -118,6 +122,7 @@ let tableColumns: ColumnsType = [
      if (!opt.value) return '';
      return parseDateToStr(opt.value);
    },
+    width: 2,
  },
 ];

@@ -254,7 +259,7 @@ watch(
      :loading="tableState.loading"
      :data-source="tableState.data"
      :size="tableState.size"
-      :scroll="{ y: 400, x: true }"
+      :scroll="{ x: 1200, y: 400 }"
      :pagination="tablePagination"
    >
    </a-table>
--- a/src/views/configManage/softwareManage/index.vue
+++ b/src/views/configManage/softwareManage/index.vue
@@ -76,16 +76,19 @@ let tableColumns: ColumnsType = [
    title: t('views.configManage.softwareManage.neType'),
    dataIndex: 'neType',
    align: 'center',
+    width: 2,
  },
  {
    title: t('views.configManage.softwareManage.fileName'),
    dataIndex: 'fileName',
    align: 'center',
+    width: 2,
  },
  {
    title: t('views.configManage.softwareManage.version'),
    dataIndex: 'version',
    align: 'center',
+    width: 2,
  },
  {
    title: t('views.configManage.softwareManage.updateTime'),
@@ -95,16 +98,20 @@ let tableColumns: ColumnsType = [
      if (!opt.value) return '';
      return parseDateToStr(opt.value);
    },
+    width: 2,
  },
  {
    title: t('views.configManage.softwareManage.description'),
    dataIndex: 'comment',
    align: 'center',
+    width: 2,
  },
  {
    title: t('common.operate'),
    key: 'id',
    align: 'center',
+    fixed: 'right',
+    width: 2,
  },
 ];

@@ -691,7 +698,7 @@ onMounted(() => {
        :data-source="tableState.data"
        :size="tableState.size"
        :pagination="tablePagination"
-        :scroll="{ x: true }"
+        :scroll="{ x: 1200, y: 400 }"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'id'">
--- a/src/views/faultManage/active-alarm/index.vue
+++ b/src/views/faultManage/active-alarm/index.vue
@@ -122,42 +122,50 @@ let tableColumns: ColumnsType = [
    title: t('views.faultManage.activeAlarm.alarmId'),
    dataIndex: 'alarmId',
    align: 'center',
+    width: 8,
  },
  {
    title: t('views.faultManage.activeAlarm.neId'),
    dataIndex: 'neId',
    align: 'center',
+    width: 8,
  },
  {
    title: t('views.faultManage.activeAlarm.neName'),
    dataIndex: 'neName',
    align: 'center',
+    width: 8,
  },
  {
    title: t('views.faultManage.activeAlarm.neType'),
    dataIndex: 'neType',
    align: 'center',
+    width: 5,
  },
  {
    title: t('views.faultManage.activeAlarm.origLevel'),
    align: 'center',
    key: 'origSeverity',
+    width: 5,
  },
  {
    title: t('views.faultManage.activeAlarm.alarmCode'),
    dataIndex: 'alarmCode',
    align: 'center',
+    width: 5,
  },
  {
    title: t('views.faultManage.activeAlarm.alarmTitle'),
    dataIndex: 'alarmTitle',
    align: 'center',
+    width: 5,
  },
  {
    title: t('views.faultManage.activeAlarm.eventTime'),
    dataIndex: 'eventTime',
    align: 'center',
-    sorter: true,
+    sorter: (a: any, b: any) => 1,
+    width: 8,
  },
  {
    title: t('views.faultManage.activeAlarm.alarmType'),
@@ -176,16 +184,19 @@ let tableColumns: ColumnsType = [
      }
      return opt.value;
    },
+    width: 5,
  },
  {
    title: t('views.faultManage.activeAlarm.pvFlag'),
    dataIndex: 'pvFlag',
    align: 'center',
+    width: 5,
  },
  {
    title: t('views.faultManage.activeAlarm.clearUser'),
    dataIndex: 'clearUser',
    align: 'center',
+    width: 10,
  },
  {
    title: t('views.faultManage.activeAlarm.clearType'),
@@ -202,6 +213,7 @@ let tableColumns: ColumnsType = [
      }
      return opt.value;
    },
+    width: 5,
  },
  {
    title: t('views.faultManage.activeAlarm.ackState'),
@@ -217,16 +229,20 @@ let tableColumns: ColumnsType = [
      }
      return opt.value;
    },
+    width: 5,
  },
  {
    title: t('views.faultManage.activeAlarm.ackUser'),
    dataIndex: 'ackUser',
    align: 'center',
+    width: 5,
  },
  {
    title: t('common.operate'),
    key: 'alarm_id',
    align: 'center',
+    fixed: 'right',
+    width: 5,
  },
 ];

@@ -239,52 +255,61 @@ let alarmTableColumns: ColumnsType = [
    title: t('views.faultManage.activeAlarm.alarmTitle'),
    dataIndex: '告警名称',
    align: 'center',
+    width: 3,
  },
  {
    title: t('views.faultManage.activeAlarm.locationInfo'),
    dataIndex: '告警定位信息',
    align: 'center',
+    width: 5,
  },
  {
    title: t('views.faultManage.activeAlarm.addInfo'),
    dataIndex: '告警帮助信息',
    align: 'center',
+    width: 8,
  },
  {
    title: t('views.faultManage.activeAlarm.alarmType'),
    dataIndex: '告警类型',
    align: 'center',
+    width: 5,
  },
  {
    title: t('views.faultManage.activeAlarm.origLevel'),
    dataIndex: '告警级别',
    align: 'center',
+    width: 3,
  },
  {
    title: t('views.faultManage.activeAlarm.alarmCode'),
    dataIndex: '告警编号',
    align: 'center',
+    width: 3,
  },
  {
    title: t('views.faultManage.activeAlarm.specificProblem'),
    dataIndex: '告警问题原因',
    align: 'center',
+    width: 5,
  },
  {
    title: t('views.faultManage.activeAlarm.clearType'),
    dataIndex: '清除类型',
    align: 'center',
+    width: 3,
  },
  {
    title: t('views.faultManage.activeAlarm.realTitle'),
    dataIndex: '英文标题',
    align: 'center',
+    width: 5,
  },
-
  {
    title: t('views.faultManage.activeAlarm.objectNf'),
    dataIndex: '适用网元',
    align: 'center',
+    width: 2,
  },
 ];

@@ -986,7 +1011,7 @@ onMounted(() => {
            :data-source="alarmTableState.data"
            :size="alarmTableState.size"
            :pagination="false"
-            :scroll="{ x: true, y: 450 }"
+            :scroll="{ x: 2000, y: 560 }"
          >
          </a-table>
        </a-drawer>
@@ -1001,11 +1026,12 @@ onMounted(() => {
        :data-source="tableState.data"
        :size="tableState.size"
        :row-selection="{
+          columnWidth: 2,
          selectedRowKeys: state.selectedRowKeys,
          onChange: onSelectChange,
        }"
        :pagination="tablePagination"
-        :scroll="{ x: true }"
+        :scroll="{ x: 2000, y: 400 }"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'origSeverity'">
@@ -1044,6 +1070,7 @@ onMounted(() => {
    <!-- 详情框 -->
    <a-modal
      width="800px"
+      :body-style="{ height: '520px', overflowY: 'scroll' }"
      :keyboard="false"
      :mask-closable="false"
      :visible="modalState.visibleByView"
--- a/src/views/faultManage/history-alarm/index.vue
+++ b/src/views/faultManage/history-alarm/index.vue
@@ -111,41 +111,49 @@ let tableColumns: ColumnsType = [
    title: t('views.faultManage.activeAlarm.alarmId'),
    dataIndex: 'alarmId',
    align: 'center',
+    width: 5,
  },
  {
    title: t('views.faultManage.activeAlarm.neId'),
    dataIndex: 'neId',
    align: 'center',
+    width: 5,
  },
  {
    title: t('views.faultManage.activeAlarm.neName'),
    dataIndex: 'neName',
    align: 'center',
+    width: 5,
  },
  {
    title: t('views.faultManage.activeAlarm.neType'),
    dataIndex: 'neType',
    align: 'center',
+    width: 5,
  },
  {
    title: t('views.faultManage.activeAlarm.origLevel'),
    align: 'center',
    key: 'origSeverity',
+    width: 5,
  },
  {
    title: t('views.faultManage.activeAlarm.alarmCode'),
    dataIndex: 'alarmCode',
    align: 'center',
+    width: 5,
  },
  {
    title: t('views.faultManage.activeAlarm.alarmTitle'),
    dataIndex: 'alarmTitle',
    align: 'center',
+    width: 5,
  },
  {
    title: t('views.faultManage.activeAlarm.eventTime'),
    dataIndex: 'eventTime',
    align: 'center',
+    width: 5,
  },
  {
    title: t('views.faultManage.activeAlarm.alarmType'),
@@ -164,16 +172,19 @@ let tableColumns: ColumnsType = [
      }
      return opt.value;
    },
+    width: 5,
  },
  {
    title: t('views.faultManage.activeAlarm.pvFlag'),
    dataIndex: 'pvFlag',
    align: 'center',
+    width: 5,
  },
  {
    title: t('views.faultManage.activeAlarm.clearUser'),
    dataIndex: 'clearUser',
    align: 'center',
+    width: 5,
  },
  {
    title: t('views.faultManage.activeAlarm.clearType'),
@@ -190,6 +201,7 @@ let tableColumns: ColumnsType = [
      }
      return opt.value;
    },
+    width: 5,
  },
  {
    title: t('views.faultManage.activeAlarm.ackState'),
@@ -205,16 +217,20 @@ let tableColumns: ColumnsType = [
      }
      return opt.value;
    },
+    width: 5,
  },
  {
    title: t('views.faultManage.activeAlarm.ackUser'),
    dataIndex: 'ackUser',
    align: 'center',
+    width: 5,
  },
  {
    title: t('common.operate'),
    key: 'alarm_id',
    align: 'center',
+    fixed: 'right',
+    width: 5,
  },
 ];

@@ -730,15 +746,15 @@ onMounted(() => {
                  :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-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>
@@ -755,11 +771,12 @@ onMounted(() => {
        :data-source="tableState.data"
        :size="tableState.size"
        :row-selection="{
+          columnWidth: 3,
          selectedRowKeys: state.selectedRowKeys,
          onChange: onSelectChange,
        }"
        :pagination="tablePagination"
-        :scroll="{ x: true }"
+        :scroll="{ x: 2000, y: 400 }"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'origSeverity'">
@@ -787,6 +804,7 @@ onMounted(() => {
    <!-- 详情框 -->
    <a-modal
      width="800px"
+      :body-style="{ height: '520px', overflowY: 'scroll' }"
      :keyboard="false"
      :mask-closable="false"
      :visible="modalState.visibleByView"