vue2-client 1.16.44 → 1.16.46

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "vue2-client",
3
- "version": "1.16.44",
3
+ "version": "1.16.46",
4
4
  "private": false,
5
5
  "scripts": {
6
6
  "serve": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve --no-eslint",
@@ -1,244 +1,256 @@
1
- <script setup>
2
- import XFormTable from '@vue2-client/base-client/components/common/XFormTable/XFormTable.vue'
3
- import { ref, computed, useAttrs } from 'vue'
4
-
5
- const props = defineProps({
6
- // HFormTable特有的属性
7
- tableStyle: {
8
- type: String,
9
- default: 'formtable-col1'
10
- }
11
- })
12
-
13
- // 兼容多种样式配置
14
- const attrs = useAttrs()
15
- const wrapperClassObject = computed(() => {
16
- const a = attrs
17
- const classes = {}
18
-
19
- // 通用布尔样式开关(以存在/空字符串/'true' 为真)
20
- const booleanStyleKeys = [
21
- 'button-row-0margin',
22
- 'top-hidden'
23
- ]
24
- for (const key of booleanStyleKeys) {
25
- const val = a[key]
26
- const truthy = val === true || val === '' || val === 'true'
27
- if (truthy) classes[`h-form-table-${key}`] = true
28
- }
29
-
30
- // 兼容通过 attrs 透传的分页样式:将值映射为当前样式中存在的类名
31
- const paginationAttr = a && a.paginationStyle
32
- if (paginationAttr && ['pagination-center', 'custom-pagination'].includes(paginationAttr)) {
33
- classes[`h-form-table-${paginationAttr}`] = true
34
- }
35
- return classes
36
- })
37
-
38
- // 通过暴露的实例访问 $slots,避免直接依赖 Composition API 的 useSlots
39
- // 在模板中使用 `$slots` 遍历以保持与 Vue2 兼容
40
- // 创建对XFormTable组件的引用
41
- const xFormTableRef = ref()
42
-
43
- // 暴露方法给父组件使用
44
- defineExpose({
45
- // 为了兼容性,保留getXFormTableInstance方法
46
- getXFormTableInstance: () => xFormTableRef.value
47
- })
48
-
49
- // 计算是否使用自定义分页(兼容 attrs 透传与 tableStyle 配置)
50
- const isCustomPagination = computed(() => {
51
- const a = attrs
52
- const paginationAttr = (a && a.paginationStyle) || ''
53
- return props.tableStyle === 'custom-pagination' || paginationAttr === 'custom-pagination'
54
- })
55
- </script>
56
-
57
- <template>
58
- <div
59
- class="h-form-table-wrapper"
60
- :class="[
61
- `h-form-table-${tableStyle}`,
62
- wrapperClassObject
63
- ]"
64
- >
65
- <x-form-table
66
- ref="xFormTableRef"
67
- v-bind="$attrs"
68
- :customPagination="isCustomPagination"
69
- v-on="$listeners"
70
- >
71
- <template v-for="(_, name) in $slots" #[name]="slotData">
72
- <slot :name="name" v-bind="slotData" />
73
- </template>
74
- </x-form-table>
75
- </div>
76
- </template>
77
-
78
- <style scoped lang="less">
79
- .h-form-table-wrapper {
80
- // 基础样式
81
- :deep(.table-wrapper) {
82
- .ant-table {
83
- .ant-table-row {
84
- margin: 0px;
85
-
86
- .ant-form-item {
87
- margin: 0px;
88
-
89
- .ant-form-item-control-wrapper {
90
- .ant-form-item-control {
91
- line-height: 0px;
92
-
93
- .ant-select-selection--multiple {
94
- padding-bottom: 2px;
95
- }
96
- }
97
- width: 100%;
98
- }
99
- }
100
- }
101
- font-size: 16px;
102
- }
103
-
104
- .ant-alert-info {
105
- display: none;
106
- }
107
- }
108
-
109
- :deep(.ant-card) {
110
- margin: -10px 0px 29px 0px;
111
- }
112
-
113
- :deep(.ant-btn) {
114
- border: 0px;
115
- box-shadow: none;
116
- padding: 0px;
117
- color: #5D5C5C;
118
- font-weight: bold;
119
- letter-spacing: 0em;
120
- font-size: 18px;
121
- line-height: normal;
122
- font-family: "Source Han Sans";
123
- }
124
-
125
- :deep(.ant-card-body) {
126
- padding: 0 6px;
127
- }
128
-
129
- :deep(.ant-table-small) {
130
- border-width: 0;
131
-
132
- .ant-table-fixed {
133
- border-radius: 0;
134
- border-bottom: 1px solid #f0f0f0;
135
- }
136
- }
137
-
138
- // 表格高度样式
139
- &.h-form-table-height {
140
- :deep(.table-wrapper) {
141
- .ant-select-open ~ .ant-table-content {
142
- height: 500px !important;
143
- }
144
- }
145
- }
146
-
147
- // 表格样式
148
- &.h-form-table-table {
149
- :deep(.ant-table-small .ant-table-fixed-header) {
150
- .ant-table-content {
151
- .ant-table-content {
152
- .ant-table-body {
153
- border-radius: 0 0 4px 4px;
154
- overflow: visible !important;
155
- }
156
- }
157
- }
158
- }
159
- }
160
-
161
- // 隐藏按钮区域
162
- &.h-form-table-button-area-hide {
163
- :deep(.ant-btn) {
164
- display: none;
165
- }
166
-
167
- :deep(.table-wrapper) {
168
- margin-top: -39px;
169
- }
170
- }
171
-
172
- // 顶部区域隐藏(与按钮隐藏一致的视觉需求)
173
- &.h-form-table-top-hidden {
174
- :deep(.ant-btn) {
175
- display: none;
176
- }
177
-
178
- :deep(.table-wrapper) {
179
- margin-top: -39px;
180
- }
181
- }
182
-
183
- // 列样式1
184
- &.h-form-table-formtable-col1 {
185
- :deep(.table-wrapper) {
186
- .ant-row {
187
- .ant-col span {
188
- border: none;
189
- width: auto;
190
- margin-bottom: auto;
191
- }
192
- }
193
-
194
- .ant-table {
195
- .ant-table-body {
196
- .ant-table-fixed colgroup col:nth-child(2) {
197
- width: 50px;
198
- min-width: 50px;
199
- }
200
- }
201
-
202
- .ant-table-header {
203
- .ant-table-fixed colgroup col:nth-child(2) {
204
- width: 50px;
205
- min-width: 50px;
206
- }
207
- }
208
- }
209
- }
210
- }
211
-
212
- // 底部分页居中 & 自定义分页样式(共用样式)
213
- &.h-form-table-bottom-center,
214
- &.h-form-table-custom-pagination {
215
- :deep(.table-wrapper) {
216
- .ant-row-flex-start {
217
- position: relative;
218
- display: flex;
219
- align-items: center;
220
- margin-top: 24px !important;
221
-
222
- // 防止第一个子元素无限拉伸,影响分页居中
223
- > :first-child {
224
- flex: 0 0 auto;
225
- }
226
-
227
- // 将第二个子元素(分页)绝对居中
228
- > :nth-child(2) {
229
- position: absolute;
230
- left: 50%;
231
- transform: translateX(-50%);
232
- }
233
- }
234
- }
235
- }
236
-
237
- // 按钮行0margin
238
- &.h-form-table-button-row-0margin {
239
- :deep(.ant-row) {
240
- margin: 0px;
241
- }
242
- }
243
- }
244
- </style>
1
+ <script setup>
2
+ import XFormTable from '@vue2-client/base-client/components/common/XFormTable/XFormTable.vue'
3
+ import { ref, computed, useAttrs } from 'vue'
4
+
5
+ const props = defineProps({
6
+ // HFormTable特有的属性
7
+ tableStyle: {
8
+ type: String,
9
+ default: 'formtable-col1'
10
+ }
11
+ })
12
+
13
+ // 兼容多种样式配置
14
+ const attrs = useAttrs()
15
+ const wrapperClassObject = computed(() => {
16
+ const a = attrs
17
+ const classes = {}
18
+
19
+ // 通用布尔样式开关(以存在/空字符串/'true' 为真)
20
+ const booleanStyleKeys = [
21
+ 'button-row-0margin',
22
+ 'top-hidden',
23
+ 'dialog-style'
24
+ ]
25
+ for (const key of booleanStyleKeys) {
26
+ const val = a[key]
27
+ const truthy = val === true || val === '' || val === 'true'
28
+ if (truthy) classes[`h-form-table-${key}`] = true
29
+ }
30
+
31
+ // 兼容通过 attrs 透传的分页样式:将值映射为当前样式中存在的类名
32
+ const paginationAttr = a && a.paginationStyle
33
+ if (paginationAttr && ['pagination-center', 'custom-pagination'].includes(paginationAttr)) {
34
+ classes[`h-form-table-${paginationAttr}`] = true
35
+ }
36
+ return classes
37
+ })
38
+
39
+ // 通过暴露的实例访问 $slots,避免直接依赖 Composition API 的 useSlots
40
+ // 在模板中使用 `$slots` 遍历以保持与 Vue2 兼容
41
+ // 创建对XFormTable组件的引用
42
+ const xFormTableRef = ref()
43
+
44
+ // 暴露方法给父组件使用
45
+ defineExpose({
46
+ // 为了兼容性,保留getXFormTableInstance方法
47
+ getXFormTableInstance: () => xFormTableRef.value
48
+ })
49
+
50
+ // 计算是否使用自定义分页(兼容 attrs 透传与 tableStyle 配置)
51
+ const isCustomPagination = computed(() => {
52
+ const a = attrs
53
+ const paginationAttr = (a && a.paginationStyle) || ''
54
+ return props.tableStyle === 'custom-pagination' || paginationAttr === 'custom-pagination'
55
+ })
56
+ </script>
57
+
58
+ <template>
59
+ <div
60
+ class="h-form-table-wrapper"
61
+ :class="[
62
+ `h-form-table-${tableStyle}`,
63
+ wrapperClassObject
64
+ ]"
65
+ >
66
+ <x-form-table
67
+ ref="xFormTableRef"
68
+ v-bind="$attrs"
69
+ :customPagination="isCustomPagination"
70
+ v-on="$listeners"
71
+ >
72
+ <template v-for="(_, name) in $slots" #[name]="slotData">
73
+ <slot :name="name" v-bind="slotData" />
74
+ </template>
75
+ </x-form-table>
76
+ </div>
77
+ </template>
78
+
79
+ <style scoped lang="less">
80
+ .h-form-table-wrapper {
81
+ // 基础样式
82
+ :deep(.table-wrapper) {
83
+ .ant-table {
84
+ .ant-table-row {
85
+ margin: 0px;
86
+
87
+ .ant-form-item {
88
+ margin: 0px;
89
+
90
+ .ant-form-item-control-wrapper {
91
+ .ant-form-item-control {
92
+ line-height: 0px;
93
+
94
+ .ant-select-selection--multiple {
95
+ padding-bottom: 2px;
96
+ }
97
+ }
98
+ width: 100%;
99
+ }
100
+ }
101
+ }
102
+ font-size: 16px;
103
+ }
104
+
105
+ .ant-alert-info {
106
+ display: none;
107
+ }
108
+ }
109
+
110
+ :deep(.ant-card) {
111
+ margin: -10px 0px 29px 0px;
112
+ }
113
+
114
+ :deep(.ant-btn) {
115
+ border: 0px;
116
+ box-shadow: none;
117
+ padding: 0px;
118
+ color: #5D5C5C;
119
+ font-weight: bold;
120
+ letter-spacing: 0em;
121
+ font-size: 18px;
122
+ line-height: normal;
123
+ font-family: "Source Han Sans";
124
+ }
125
+
126
+ :deep(.ant-card-body) {
127
+ padding: 0 6px;
128
+ }
129
+
130
+ :deep(.ant-table-small) {
131
+ border-width: 0;
132
+
133
+ .ant-table-fixed {
134
+ border-radius: 0;
135
+ border-bottom: 1px solid #f0f0f0;
136
+ }
137
+ }
138
+
139
+ // 表格高度样式
140
+ &.h-form-table-height {
141
+ :deep(.table-wrapper) {
142
+ .ant-select-open ~ .ant-table-content {
143
+ height: 500px !important;
144
+ }
145
+ }
146
+ }
147
+
148
+ // 表格样式
149
+ &.h-form-table-table {
150
+ :deep(.ant-table-small .ant-table-fixed-header) {
151
+ .ant-table-content {
152
+ .ant-table-content {
153
+ .ant-table-body {
154
+ border-radius: 0 0 4px 4px;
155
+ overflow: visible !important;
156
+ }
157
+ }
158
+ }
159
+ }
160
+ }
161
+ &.h-form-table-dialog-style {
162
+ /* 选择前面的兄弟元素 */
163
+ :global(.ant-col.ant-col-24[name="trGroup"]:has(+ .ant-card .ant-card-body .h-form-table-wrapper.h-form-table-dialog-style)) {
164
+ padding-top: 0px !important;
165
+ padding-left: 0px !important;
166
+ }
167
+
168
+ :global(.ant-card-body:has(.h-form-table-wrapper.h-form-table-dialog-style)) {
169
+ padding-top: 0px !important;
170
+ padding-left: 0px !important;
171
+ }
172
+ }
173
+ // 隐藏按钮区域
174
+ &.h-form-table-button-area-hide {
175
+ :deep(.ant-btn) {
176
+ display: none;
177
+ }
178
+
179
+ :deep(.table-wrapper) {
180
+ margin-top: -39px;
181
+ }
182
+ }
183
+
184
+ // 顶部区域隐藏(与按钮隐藏一致的视觉需求)
185
+ &.h-form-table-top-hidden {
186
+ :deep(.ant-btn) {
187
+ display: none;
188
+ }
189
+
190
+ :deep(.table-wrapper) {
191
+ margin-top: -39px;
192
+ }
193
+ }
194
+
195
+ // 列样式1
196
+ &.h-form-table-formtable-col1 {
197
+ :deep(.table-wrapper) {
198
+ .ant-row {
199
+ .ant-col span {
200
+ border: none;
201
+ width: auto;
202
+ margin-bottom: auto;
203
+ }
204
+ }
205
+
206
+ .ant-table {
207
+ .ant-table-body {
208
+ .ant-table-fixed colgroup col:nth-child(2) {
209
+ width: 50px;
210
+ min-width: 50px;
211
+ }
212
+ }
213
+
214
+ .ant-table-header {
215
+ .ant-table-fixed colgroup col:nth-child(2) {
216
+ width: 50px;
217
+ min-width: 50px;
218
+ }
219
+ }
220
+ }
221
+ }
222
+ }
223
+
224
+ // 底部分页居中 & 自定义分页样式(共用样式)
225
+ &.h-form-table-bottom-center,
226
+ &.h-form-table-custom-pagination {
227
+ :deep(.table-wrapper) {
228
+ .ant-row-flex-start {
229
+ position: relative;
230
+ display: flex;
231
+ align-items: center;
232
+ margin-top: 24px !important;
233
+
234
+ // 防止第一个子元素无限拉伸,影响分页居中
235
+ > :first-child {
236
+ flex: 0 0 auto;
237
+ }
238
+
239
+ // 将第二个子元素(分页)绝对居中
240
+ > :nth-child(2) {
241
+ position: absolute;
242
+ left: 50%;
243
+ transform: translateX(-50%);
244
+ }
245
+ }
246
+ }
247
+ }
248
+
249
+ // 按钮行0margin
250
+ &.h-form-table-button-row-0margin {
251
+ :deep(.ant-row) {
252
+ margin: 0px;
253
+ }
254
+ }
255
+ }
256
+ </style>
@@ -68,6 +68,7 @@
68
68
  width="60vw"
69
69
  :dialogStyle="{ top: '20px' }"
70
70
  wrapClassName="image-preview-modal"
71
+ :zIndex="1010"
71
72
  >
72
73
  <div class="image-preview-container">
73
74
  <img
@@ -388,6 +388,7 @@ export default {
388
388
  // 基于根容器类进行样式整合:x-collapse-wrapper.xcollapse-style1
389
389
  .x-collapse-wrapper {
390
390
  &.xcollapse-style1 {
391
+ height: 1185px;
391
392
  .header-content {
392
393
  gap: 6px; // 圆点与title1更紧凑的基础间距
393
394
  }
@@ -432,7 +433,7 @@ export default {
432
433
  }
433
434
 
434
435
  :deep(.ant-collapse > .ant-collapse-item) {
435
- width: 550px;
436
+ width: 100%;
436
437
  height: 410px;
437
438
  margin: 16px 0; // 面板之间留白
438
439
  border-radius: 6px; // 分离的圆角