vue2-client 1.15.137 → 1.15.138

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.
Files changed (8) hide show
  1. package/package.json +111 -111
  2. package/src/base-client/components/common/HIS/HButtons/HButtons.vue +324 -392
  3. package/src/base-client/components/common/HIS/HFormTable/HFormTable.vue +197 -165
  4. package/src/base-client/components/common/HIS/HTab/HTab.vue +281 -281
  5. package/src/base-client/components/common/XTimeline/XTimeline.vue +4 -4
  6. package/src/base-client/components/his/XCharge/XChargeDemo.vue +32 -0
  7. package/src/base-client/components/his/XSimpleTable/XSimpleTable.vue +119 -119
  8. package/src/router/async/router.map.js +2 -2
package/src/base-client/components/common/HIS/HButtons/HButtons.vue CHANGED
@@ -1,392 +1,324 @@
1
- <script setup lang="ts">
2
- import XButtons from '@vue2-client/base-client/components/common/XButtons/XButtons.vue'
3
- import { ref } from 'vue'
4
-
5
- defineProps({
6
- // HButtons特有的属性
7
- buttonStyle: {
8
- type: String,
9
- default: 'button24'
10
- }
11
- })
12
-
13
- // 内部 XButtons 实例引用
14
- const xButtonsRef = ref()
15
-
16
- // 暴露方法：获取内部 XButtons 实例
17
- defineExpose({
18
- getXButtonsInstance: function () { return xButtonsRef.value }
19
- })
20
- </script>
21
-
22
- <template>
23
- <div
24
- class="h-buttons-wrapper"
25
- :class="[
26
- `h-buttons-${buttonStyle}`
27
- ]"
28
- >
29
- <x-buttons
30
- ref="xButtonsRef"
31
- v-bind="$attrs"
32
- v-on="$listeners"
33
- >
34
- <template v-for="(_, name) in $slots" #[name]="slotData">
35
- <slot :name="name" v-bind="slotData" />
36
- </template>
37
- </x-buttons>
38
- </div>
39
- </template>
40
-
41
- <style scoped lang="less">
42
- .h-buttons-wrapper {
43
- // 基础样式
44
- :deep(.ant-btn-group) {
45
- .ant-btn {
46
- border-radius: 6px;
47
- background-color: #FFFFFF;
48
- border: 1px solid #9499A0;
49
- color: #313131;
50
- font-weight: normal;
51
- letter-spacing: 0em;
52
- width: 110px;
53
- font-size: 16px;
54
- font-family: "Source Han Sans";
55
- line-height: normal;
56
- margin-right: 25px;
57
- height: 32px;
58
- }
59
- }
60
- // button24样式
61
- &.h-buttons-button24 {
62
- :deep(.ant-btn-group) {
63
- .ant-btn {
64
- border: 1px solid #CDCDCD;
65
- color: #5D5C5C;
66
- font-weight: normal;
67
- letter-spacing: 0em;
68
- font-size: 16px;
69
- line-height: normal;
70
- margin-right: 25px;
71
- border-radius: 6px;
72
- background-color: #FFFFFF;
73
- // 这个不合理
74
- // top: -100px;
75
- width: fit-content;
76
- min-width: 110px;
77
- font-family: "Source Han Sans";
78
- height: 32px;
79
- }
80
- }
81
- }
82
- // button23样式
83
- &.h-buttons-button23 {
84
- :deep(.ant-btn-group) {
85
- .ant-btn {
86
- border: none;
87
- padding: 0 !important;
88
- color: #FFFFFF;
89
- font-weight: normal;
90
- letter-spacing: 0em;
91
- font-size: 16px;
92
- line-height: normal;
93
- border-radius: 50%;
94
- background-color: #1890FF;
95
- margin-left: 10px;
96
- top: -88px;
97
- width: 30px;
98
- font-family: "Source Han Sans";
99
- height: 30px;
100
- }
101
- }
102
- }
103
- // +号样式
104
- &.h-buttons-table-height-button23 {
105
- :deep(.ant-btn-group) {
106
- display: inline-flex;
107
- align-items: center;
108
- height: 100%;
109
-
110
- .ant-btn {
111
- display: inline-flex;
112
- align-items: center;
113
- justify-content: center;
114
- border: none;
115
- padding: 0 !important;
116
- color: #FFFFFF;
117
- font-weight: normal;
118
- letter-spacing: 0em;
119
- font-size: 16px;
120
- line-height: normal;
121
- border-radius: 50%;
122
- background-color: #1890FF;
123
- margin-left: 10px;
124
- width: 30px;
125
- font-family: "Source Han Sans";
126
- height: 30px;
127
- /* 自适应上移：按按钮自身高度百分比位移 */
128
- transform: translateY(-100%);
129
- }
130
- }
131
- }
132
- // 居中+悬停高亮的新样式
133
- &.h-buttons-plus-center {
134
- :deep(.ant-btn-group) {
135
- display: flex;
136
- align-items: center;
137
- justify-content: center;
138
- gap: 16px;
139
-
140
- .ant-btn {
141
- display: inline-flex;
142
- align-items: center;
143
- justify-content: center;
144
- border: 1px solid #CDCDCD;
145
- background-color: #FFFFFF;
146
- color: #5D5C5C;
147
- border-radius: 6px;
148
- min-width: 110px;
149
- height: 32px;
150
- font-size: 16px;
151
- font-family: "Source Han Sans";
152
- transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
153
-
154
- &:hover {
155
- background-color: #0057FE;
156
- border-color: #0057FE;
157
- color: #FFFFFF;
158
- }
159
- /* 支持通过 data-type 改变悬停颜色 */
160
- &[data-type='success']:hover {
161
- background-color: #34C76E;
162
- border-color: #34C76E;
163
- color: #FFFFFF;
164
- }
165
- }
166
- }
167
- }
168
- // button-left样式 - 按钮从左到右排列
169
- &.h-buttons-button-left {
170
- :deep(.ant-btn-group) {
171
- width: 100%;
172
- display: flex;
173
- flex-wrap: nowrap;
174
- justify-content: flex-start;
175
- gap: 12px;
176
- .ant-btn {
177
- border: 1px solid #CDCDCD;
178
- color: #5D5C5C;
179
- font-weight: normal;
180
- letter-spacing: 0em;
181
- font-size: 16px;
182
- line-height: normal;
183
- border-radius: 6px;
184
- background-color: #FFFFFF;
185
- font-family: "Source Han Sans";
186
- height: 32px;
187
- flex: 0 0 auto;
188
- min-width: 124px;
189
- width: auto;
190
- white-space: nowrap;
191
- overflow: hidden;
192
- margin-right: 0px;
193
- text-overflow: ellipsis;
194
- }
195
- }
196
- }
197
- // button-center样式 - 按钮居中排列
198
- &.h-buttons-button-center {
199
- :deep(.ant-btn-group) {
200
- width: 100%;
201
- display: flex;
202
- flex-wrap: nowrap;
203
- justify-content: center;
204
- gap: 12px;
205
- .ant-btn {
206
- border: 1px solid #CDCDCD;
207
- color: #5D5C5C;
208
- font-weight: normal;
209
- letter-spacing: 0em;
210
- font-size: 16px;
211
- line-height: normal;
212
- border-radius: 6px;
213
- background-color: #FFFFFF;
214
- font-family: "Source Han Sans";
215
- height: 32px;
216
- flex: 0 0 auto;
217
- min-width: 124px;
218
- width: auto;
219
- white-space: nowrap;
220
- overflow: hidden;
221
- margin-right: 0px;
222
- text-overflow: ellipsis;
223
- }
224
- }
225
- }
226
- // button-right样式 - 按钮从右到左排列
227
- &.h-buttons-button-right {
228
- :deep(.ant-btn-group) {
229
- width: 100%;
230
- display: flex;
231
- flex-wrap: nowrap;
232
- justify-content: flex-end;
233
- gap: 12px;
234
- .ant-btn {
235
- border: 1px solid #CDCDCD;
236
- color: #5D5C5C;
237
- font-weight: normal;
238
- letter-spacing: 0em;
239
- font-size: 16px;
240
- line-height: normal;
241
- border-radius: 6px;
242
- background-color: #FFFFFF;
243
- font-family: "Source Han Sans";
244
- height: 32px;
245
- flex: 0 0 auto;
246
- width: auto;
247
- min-width: 124px;
248
- white-space: nowrap;
249
- overflow: hidden;
250
- margin-right: 0px;
251
- text-overflow: ellipsis;
252
- }
253
- }
254
- }
255
- // button-space-between样式 - 按钮两端对齐（两个按钮时分布在两端）
256
- &.h-buttons-button-space-between {
257
- :deep(.ant-btn-group) {
258
- width: 100%;
259
- display: flex;
260
- flex-wrap: nowrap;
261
- justify-content: space-between;
262
- .ant-btn {
263
- border: 1px solid #CDCDCD;
264
- color: #5D5C5C;
265
- font-weight: normal;
266
- letter-spacing: 0em;
267
- font-size: 16px;
268
- line-height: normal;
269
- border-radius: 6px;
270
- background-color: #FFFFFF;
271
- font-family: "Source Han Sans";
272
- height: 32px;
273
- width: auto;
274
- flex: 0 0 auto;
275
- min-width: 124px;
276
- white-space: nowrap;
277
- overflow: hidden;
278
- margin-right: 0px;
279
- text-overflow: ellipsis;
280
- }
281
- }
282
- }
283
- // button-icon-tiles样式 - 左侧彩色图标块 + 右侧文字
284
- &.h-buttons-button-icon-tiles {
285
- :deep(.ant-btn-group) {
286
- width: 100%;
287
- display: flex;
288
- flex-wrap: wrap; // 允许自动换行
289
- justify-content: flex-start; // 左对齐
290
- gap: 0; // 取消统一间距
291
-
292
- .ant-btn {
293
- position: relative;
294
- display: inline-flex;
295
- align-items: center;
296
- gap: 10px; // 控制图标与文字间距
297
- border: 1px solid #E6E8EB;
298
- background-color: #FFFFFF;
299
- color: #313131;
300
- font-size: 14px;
301
- height: 44px;
302
- padding: 0 10px 0 10px;
303
- border-radius: 8px;
304
- min-width: 116px;
305
- box-shadow: 0 2px 0 rgba(0,0,0,0.02);
306
- margin-right: 12px; // 用margin控制横向间距，末尾一排自然换行
307
- }
308
-
309
- .ant-btn .anticon {
310
- width: 26px;
311
- height: 26px;
312
- display: inline-flex;
313
- align-items: center;
314
- justify-content: center;
315
- border-radius: 6px;
316
- color: #fff;
317
- font-size: 14px;
318
- flex: 0 0 26px; // 固定正方形，防止随文本挤压变形
319
- box-sizing: border-box;
320
- }
321
-
322
- /* 默认蓝色，支持通过 data-type 改变色块（success/warning/error/default）*/
323
- .ant-btn .anticon { background: #3FA7FF; }
324
- .ant-btn[data-type='success'] .anticon { background: #34C76E; }
325
- .ant-btn[data-type='warning'] .anticon { background: #FFA940; }
326
- .ant-btn[data-type='error'] .anticon { background: #FF7875; }
327
- .ant-btn[disabled] .anticon { background: #BFBFBF; }
328
-
329
- /* 图标与文字间距在有图标时更自然 */
330
- .ant-btn > .anticon + span { margin-left: 10px; }
331
- }
332
- }
333
- // 水印图标与按钮容器布局调整
334
- &.h-buttons-button-watermark-icon {
335
- :deep(.watermark-icon) { transform: translate(-50%, -54%) !important; }
336
- :deep(.x-button) { display: flex !important; }
337
- :deep(.ant-btn-group) {
338
- margin: 0 auto;
339
- display: block;
340
- }
341
- }
342
- &.h-buttons-0padding-button {
343
- padding: 0px 4px;
344
- }
345
- // button25样式 用于会诊申请侧边栏按钮样式
346
- &.h-buttons-button25 {
347
- :deep(.x-buttons) {
348
- margin: -20px 3px -20px 3px;
349
-
350
- .ant-btn-group {
351
- width: 173px;
352
- justify-content: space-between;
353
-
354
- .ant-btn {
355
- border-radius: 6px;
356
- border: 1px solid #9499A0;
357
- font-size: 16px;
358
- height: 32px;
359
- background-color: #FFFFFF;
360
- color: #313131;
361
- width: 173px;
362
- }
363
- }
364
- }
365
- }
366
- // 居中样式 用于门诊收费左侧按钮样式（三个按钮居中样式）
367
- &.h-buttons-out-button {
368
- :deep(.x-buttons) {
369
- margin-top: -1vw;
370
- display: flex;
371
- justify-content: center;
372
- .ant-btn-group {
373
- .ant-btn {
374
- border: 1px solid #9499A0;
375
- color: #313131;
376
- font-weight: normal;
377
- letter-spacing: 0em;
378
- font-size: 16px;
379
- line-height: normal;
380
- box-sizing: border-box;
381
- margin-right: 12px;
382
- border-radius: 6px;
383
- background-color: #FFFFFF;
384
- width: 132px;
385
- font-family: "Source Han Sans";
386
- height: 32px;
387
- }
388
- }
389
- }
390
- }
391
- }
392
- </style>
1
+ <script setup lang="ts">
2
+ import XButtons from '@vue2-client/base-client/components/common/XButtons/XButtons.vue'
3
+ import { ref } from 'vue'
4
+
5
+ defineProps({
6
+ // HButtons特有的属性
7
+ buttonStyle: {
8
+ type: String,
9
+ default: 'button24'
10
+ }
11
+ })
12
+
13
+ // 内部 XButtons 实例引用
14
+ const xButtonsRef = ref()
15
+
16
+ // 暴露方法：获取内部 XButtons 实例
17
+ defineExpose({
18
+ getXButtonsInstance: function () { return xButtonsRef.value }
19
+ })
20
+ </script>
21
+
22
+ <template>
23
+ <div
24
+ class="h-buttons-wrapper"
25
+ :class="[
26
+ `h-buttons-${buttonStyle}`
27
+ ]"
28
+ >
29
+ <x-buttons
30
+ ref="xButtonsRef"
31
+ v-bind="$attrs"
32
+ v-on="$listeners"
33
+ >
34
+ <template v-for="(_, name) in $slots" #[name]="slotData">
35
+ <slot :name="name" v-bind="slotData" />
36
+ </template>
37
+ </x-buttons>
38
+ </div>
39
+ </template>
40
+
41
+ <style scoped lang="less">
42
+ .h-buttons-wrapper {
43
+ // 基础样式
44
+ :deep(.ant-btn-group) {
45
+ .ant-btn {
46
+ border-radius: 6px;
47
+ background-color: #FFFFFF;
48
+ border: 1px solid #9499A0;
49
+ color: #313131;
50
+ font-weight: normal;
51
+ letter-spacing: 0em;
52
+ width: 110px;
53
+ font-size: 16px;
54
+ font-family: "Source Han Sans";
55
+ line-height: normal;
56
+ margin-right: 25px;
57
+ height: 32px;
58
+ }
59
+ }
60
+ // button24样式
61
+ &.h-buttons-button24 {
62
+ :deep(.ant-btn-group) {
63
+ .ant-btn {
64
+ border: 1px solid #CDCDCD;
65
+ color: #5D5C5C;
66
+ // top: -100px;
67
+ width: fit-content;
68
+ min-width: 110px;
69
+ }
70
+ }
71
+ }
72
+ // button23样式
73
+ &.h-buttons-button23 {
74
+ :deep(.ant-btn-group) {
75
+ .ant-btn {
76
+ border: none;
77
+ padding: 0 !important;
78
+ color: #FFFFFF;
79
+ border-radius: 50%;
80
+ background-color: #1890FF;
81
+ margin-left: 10px;
82
+ top: -88px;
83
+ width: 30px;
84
+ height: 30px;
85
+ }
86
+ }
87
+ }
88
+ // +号样式
89
+ &.h-buttons-table-height-button23 {
90
+ :deep(.ant-btn-group) {
91
+ display: inline-flex;
92
+ align-items: center;
93
+ height: 100%;
94
+
95
+ .ant-btn {
96
+ display: inline-flex;
97
+ align-items: center;
98
+ justify-content: center;
99
+ border: none;
100
+ padding: 0 !important;
101
+ color: #FFFFFF;
102
+ border-radius: 50%;
103
+ background-color: #1890FF;
104
+ margin-left: 10px;
105
+ width: 30px;
106
+ height: 30px;
107
+ /* 自适应上移：按按钮自身高度百分比位移 */
108
+ transform: translateY(-100%);
109
+ }
110
+ }
111
+ }
112
+ // 居中+悬停高亮的新样式
113
+ &.h-buttons-plus-center {
114
+ :deep(.ant-btn-group) {
115
+ display: flex;
116
+ align-items: center;
117
+ justify-content: center;
118
+ gap: 16px;
119
+
120
+ .ant-btn {
121
+ display: inline-flex;
122
+ align-items: center;
123
+ justify-content: center;
124
+ border: 1px solid #CDCDCD;
125
+ color: #5D5C5C;
126
+ min-width: 110px;
127
+ transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
128
+
129
+ &:hover {
130
+ background-color: #0057FE;
131
+ border-color: #0057FE;
132
+ color: #FFFFFF;
133
+ }
134
+ /* 支持通过 data-type 改变悬停颜色 */
135
+ &[data-type='success']:hover {
136
+ background-color: #34C76E;
137
+ border-color: #34C76E;
138
+ color: #FFFFFF;
139
+ }
140
+ }
141
+ }
142
+ }
143
+ // button-left样式 - 按钮从左到右排列
144
+ &.h-buttons-button-left {
145
+ :deep(.ant-btn-group) {
146
+ width: 100%;
147
+ display: flex;
148
+ flex-wrap: nowrap;
149
+ justify-content: flex-start;
150
+ gap: 12px;
151
+ .ant-btn {
152
+ border: 1px solid #CDCDCD;
153
+ color: #5D5C5C;
154
+ flex: 0 0 auto;
155
+ min-width: 124px;
156
+ width: auto;
157
+ white-space: nowrap;
158
+ overflow: hidden;
159
+ margin-right: 0px;
160
+ text-overflow: ellipsis;
161
+ }
162
+ }
163
+ }
164
+ // button-center样式 - 按钮居中排列
165
+ &.h-buttons-button-center {
166
+ :deep(.ant-btn-group) {
167
+ width: 100%;
168
+ display: flex;
169
+ flex-wrap: nowrap;
170
+ justify-content: center;
171
+ gap: 12px;
172
+ .ant-btn {
173
+ border: 1px solid #CDCDCD;
174
+ color: #5D5C5C;
175
+ flex: 0 0 auto;
176
+ min-width: 124px;
177
+ width: auto;
178
+ white-space: nowrap;
179
+ overflow: hidden;
180
+ margin-right: 0px;
181
+ text-overflow: ellipsis;
182
+ }
183
+ }
184
+ }
185
+ // button-right样式 - 按钮从右到左排列
186
+ &.h-buttons-button-right {
187
+ :deep(.ant-btn-group) {
188
+ width: 100%;
189
+ display: flex;
190
+ flex-wrap: nowrap;
191
+ justify-content: flex-end;
192
+ gap: 12px;
193
+ .ant-btn {
194
+ border: 1px solid #CDCDCD;
195
+ color: #5D5C5C;
196
+ flex: 0 0 auto;
197
+ width: auto;
198
+ min-width: 124px;
199
+ white-space: nowrap;
200
+ overflow: hidden;
201
+ margin-right: 0px;
202
+ text-overflow: ellipsis;
203
+ }
204
+ }
205
+ }
206
+ // button-space-between样式 - 按钮两端对齐（两个按钮时分布在两端）
207
+ &.h-buttons-button-space-between {
208
+ :deep(.ant-btn-group) {
209
+ width: 100%;
210
+ display: flex;
211
+ flex-wrap: nowrap;
212
+ justify-content: space-between;
213
+ .ant-btn {
214
+ border: 1px solid #CDCDCD;
215
+ color: #5D5C5C;
216
+ width: auto;
217
+ flex: 0 0 auto;
218
+ min-width: 124px;
219
+ white-space: nowrap;
220
+ overflow: hidden;
221
+ margin-right: 0px;
222
+ text-overflow: ellipsis;
223
+ }
224
+ }
225
+ }
226
+ // button-icon-tiles样式 - 左侧彩色图标块 + 右侧文字
227
+ &.h-buttons-button-icon-tiles {
228
+ :deep(.ant-btn-group) {
229
+ width: 100%;
230
+ display: flex;
231
+ flex-wrap: wrap; // 允许自动换行
232
+ justify-content: flex-start; // 左对齐
233
+ gap: 0; // 取消统一间距
234
+
235
+ .ant-btn {
236
+ position: relative;
237
+ display: inline-flex;
238
+ align-items: center;
239
+ gap: 10px; // 控制图标与文字间距
240
+ border: 1px solid #E6E8EB;
241
+ font-size: 14px;
242
+ height: 44px;
243
+ padding: 0 10px 0 10px;
244
+ border-radius: 8px;
245
+ min-width: 116px;
246
+ box-shadow: 0 2px 0 rgba(0,0,0,0.02);
247
+ margin-right: 12px; // 用margin控制横向间距，末尾一排自然换行
248
+ }
249
+
250
+ .ant-btn .anticon {
251
+ width: 26px;
252
+ height: 26px;
253
+ display: inline-flex;
254
+ align-items: center;
255
+ justify-content: center;
256
+ border-radius: 6px;
257
+ color: #fff;
258
+ font-size: 14px;
259
+ flex: 0 0 26px; // 固定正方形，防止随文本挤压变形
260
+ box-sizing: border-box;
261
+ }
262
+
263
+ /* 默认蓝色，支持通过 data-type 改变色块（success/warning/error/default）*/
264
+ .ant-btn .anticon { background: #3FA7FF; }
265
+ .ant-btn[data-type='success'] .anticon { background: #34C76E; }
266
+ .ant-btn[data-type='warning'] .anticon { background: #FFA940; }
267
+ .ant-btn[data-type='error'] .anticon { background: #FF7875; }
268
+ .ant-btn[disabled] .anticon { background: #BFBFBF; }
269
+
270
+ /* 图标与文字间距在有图标时更自然 */
271
+ .ant-btn > .anticon + span { margin-left: 10px; }
272
+ }
273
+ }
274
+ // 水印图标与按钮容器布局调整
275
+ &.h-buttons-button-watermark-icon {
276
+ :deep(.watermark-icon) { transform: translate(-50%, -54%) !important; }
277
+ :deep(.x-button) { display: flex !important; }
278
+ :deep(.ant-btn-group) {
279
+ margin: 0 auto;
280
+ display: block;
281
+ }
282
+ }
283
+ &.h-buttons-0padding-button {
284
+ padding: 0px 4px;
285
+ }
286
+ // button25样式 用于会诊申请侧边栏按钮样式
287
+ &.h-buttons-button25 {
288
+ :deep(.x-buttons) {
289
+ margin: -20px 3px -20px 3px;
290
+
291
+ .ant-btn-group {
292
+ width: 173px;
293
+ justify-content: space-between;
294
+
295
+ .ant-btn {
296
+ width: 173px;
297
+ }
298
+ }
299
+ }
300
+ }
301
+ // 居中样式 用于门诊收费左侧按钮样式（三个按钮居中样式）
302
+ &.h-buttons-out-button {
303
+ :deep(.x-buttons) {
304
+ margin-top: -1vw;
305
+ display: flex;
306
+ justify-content: center;
307
+ .ant-btn-group {
308
+ display: flex;
309
+ flex-wrap: nowrap;
310
+ gap: 12px;
311
+ .ant-btn {
312
+ box-sizing: border-box;
313
+ margin-right: 0px;
314
+ width: auto;
315
+ min-width: 130px;
316
+ white-space: nowrap;
317
+ overflow: hidden;
318
+ text-overflow: ellipsis;
319
+ }
320
+ }
321
+ }
322
+ }
323
+ }
324
+ </style>