column-width-config.ts 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  1. /*
  2. * Licensed to the Apache Software Foundation (ASF) under one or more
  3. * contributor license agreements. See the NOTICE file distributed with
  4. * this work for additional information regarding copyright ownership.
  5. * The ASF licenses this file to You under the Apache License, Version 2.0
  6. * (the "License"); you may not use this file except in compliance with
  7. * the License. You may obtain a copy of the License at
  8. *
  9. * http://www.apache.org/licenses/LICENSE-2.0
  10. *
  11. * Unless required by applicable law or agreed to in writing, software
  12. * distributed under the License is distributed on an "AS IS" BASIS,
  13. * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  14. * See the License for the specific language governing permissions and
  15. * limitations under the License.
  16. */
  17. import { isNumber, sumBy } from 'lodash'
  18. import type {
  19. TableColumns,
  20. CommonColumnInfo
  21. } from 'naive-ui/es/data-table/src/interface'
  22. export const COLUMN_WIDTH_CONFIG = {
  23. selection: {
  24. width: 50
  25. },
  26. index: {
  27. width: 50
  28. },
  29. linkName: {
  30. width: 200,
  31. ellipsis: {
  32. tooltip: true
  33. }
  34. },
  35. linkEllipsis: {
  36. style: 'max-width: 180px;line-height: 1.5'
  37. },
  38. name: {
  39. width: 200,
  40. ellipsis: {
  41. tooltip: true
  42. }
  43. },
  44. state: {
  45. width: 120
  46. },
  47. type: {
  48. width: 130
  49. },
  50. version: {
  51. width: 80
  52. },
  53. time: {
  54. width: 180
  55. },
  56. timeZone: {
  57. width: 220
  58. },
  59. operation: (number: number): CommonColumnInfo => ({
  60. fixed: 'right',
  61. width: Math.max(30 * number + 12 * (number - 1) + 24, 100)
  62. }),
  63. userName: {
  64. width: 120,
  65. ellipsis: {
  66. tooltip: true
  67. }
  68. },
  69. ruleType: {
  70. width: 120
  71. },
  72. note: {
  73. width: 180,
  74. ellipsis: {
  75. tooltip: true
  76. }
  77. },
  78. dryRun: {
  79. width: 140
  80. },
  81. times: {
  82. width: 120
  83. },
  84. duration: {
  85. width: 120
  86. },
  87. yesOrNo: {
  88. width: 100,
  89. ellipsis: {
  90. tooltip: true
  91. }
  92. },
  93. size: {
  94. width: 100
  95. },
  96. tag: {
  97. width: 160
  98. },
  99. checkbox:{
  100. width: 20
  101. },
  102. copy: {
  103. width: 50
  104. }
  105. }
  106. export const calculateTableWidth = (columns: TableColumns) =>
  107. sumBy(columns, (column) => (isNumber(column.width) ? column.width : 0))
  108. export const DefaultTableWidth = 1800