vue2-client 1.15.133 → 1.15.137

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 (9) hide show
  1. package/package.json +111 -111
  2. package/src/base-client/components/common/HIS/HButtons/HButtons.vue +392 -297
  3. package/src/base-client/components/common/HIS/HFormTable/HFormTable.vue +165 -165
  4. package/src/base-client/components/common/HIS/HTab/HTab.vue +281 -194
  5. package/src/base-client/components/common/XButtons/XButtons.vue +1 -0
  6. package/src/base-client/components/his/XSimpleTable/XSimpleTable.vue +119 -119
  7. package/src/pages/WorkflowDetail/WorkflowPageDetail/WorkFlowHandle.vue +1 -1
  8. package/src/router/async/router.map.js +2 -2
  9. package/src/base-client/components/his/XCharge/XChargeDemo.vue +0 -32
package/src/base-client/components/common/HIS/HButtons/HButtons.vue CHANGED
@@ -1,297 +1,392 @@
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
-
61
- // button24样式
62
- &.h-buttons-button24 {
63
- :deep(.ant-btn-group) {
64
- .ant-btn {
65
- border: 1px solid #CDCDCD;
66
- color: #5D5C5C;
67
- font-weight: normal;
68
- letter-spacing: 0em;
69
- font-size: 16px;
70
- line-height: normal;
71
- margin-right: 25px;
72
- border-radius: 6px;
73
- background-color: #FFFFFF;
74
- // 这个不合理
75
- // top: -100px;
76
- width: fit-content;
77
- min-width: 110px;
78
- font-family: "Source Han Sans";
79
- height: 32px;
80
- }
81
- }
82
- }
83
-
84
- // button23样式
85
- &.h-buttons-button23 {
86
- :deep(.ant-btn-group) {
87
- .ant-btn {
88
- border: none;
89
- padding: 0 !important;
90
- color: #FFFFFF;
91
- font-weight: normal;
92
- letter-spacing: 0em;
93
- font-size: 16px;
94
- line-height: normal;
95
- border-radius: 50%;
96
- background-color: #1890FF;
97
- margin-left: 10px;
98
- top: -88px;
99
- width: 30px;
100
- font-family: "Source Han Sans";
101
- height: 30px;
102
- }
103
- }
104
- }
105
-
106
- // +号样式
107
- &.h-buttons-table-height-button23 {
108
- :deep(.ant-btn-group) {
109
- display: inline-flex;
110
- align-items: center;
111
- height: 100%;
112
-
113
- .ant-btn {
114
- display: inline-flex;
115
- align-items: center;
116
- justify-content: center;
117
- border: none;
118
- padding: 0 !important;
119
- color: #FFFFFF;
120
- font-weight: normal;
121
- letter-spacing: 0em;
122
- font-size: 16px;
123
- line-height: normal;
124
- border-radius: 50%;
125
- background-color: #1890FF;
126
- margin-left: 10px;
127
- width: 30px;
128
- font-family: "Source Han Sans";
129
- height: 30px;
130
- /* 自适应上移：按按钮自身高度百分比位移 */
131
- transform: translateY(-100%);
132
- }
133
- }
134
- }
135
-
136
- // 居中+悬停高亮的新样式
137
- &.h-buttons-plus-center {
138
- :deep(.ant-btn-group) {
139
- display: flex;
140
- align-items: center;
141
- justify-content: center;
142
- gap: 16px;
143
-
144
- .ant-btn {
145
- display: inline-flex;
146
- align-items: center;
147
- justify-content: center;
148
- border: 1px solid #CDCDCD;
149
- background-color: #FFFFFF;
150
- color: #5D5C5C;
151
- border-radius: 6px;
152
- min-width: 110px;
153
- height: 32px;
154
- font-size: 16px;
155
- font-family: "Source Han Sans";
156
- transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
157
-
158
- &:hover {
159
- background-color: #0057FE;
160
- border-color: #0057FE;
161
- color: #FFFFFF;
162
- }
163
- }
164
- }
165
- }
166
-
167
- // button-left样式 - 按钮从左到右排列
168
- &.h-buttons-button-left {
169
- :deep(.ant-btn-group) {
170
- width: 100%;
171
- display: flex;
172
- flex-wrap: nowrap;
173
- justify-content: flex-start;
174
- gap: 12px;
175
- .ant-btn {
176
- border: 1px solid #CDCDCD;
177
- color: #5D5C5C;
178
- font-weight: normal;
179
- letter-spacing: 0em;
180
- font-size: 16px;
181
- line-height: normal;
182
- border-radius: 6px;
183
- background-color: #FFFFFF;
184
- font-family: "Source Han Sans";
185
- height: 32px;
186
- flex: 0 0 auto;
187
- min-width: 110px;
188
- width: auto;
189
- white-space: nowrap;
190
- overflow: hidden;
191
- margin-right: 0px;
192
- text-overflow: ellipsis;
193
- }
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: 110px;
218
- width: auto;
219
- white-space: nowrap;
220
- overflow: hidden;
221
- margin-right: 0px;
222
- text-overflow: ellipsis;
223
- }
224
- }
225
- }
226
-
227
- // button-right样式 - 按钮从右到左排列
228
- &.h-buttons-button-right {
229
- :deep(.ant-btn-group) {
230
- width: 100%;
231
- display: flex;
232
- flex-wrap: nowrap;
233
- justify-content: flex-end;
234
- gap: 12px;
235
- .ant-btn {
236
- border: 1px solid #CDCDCD;
237
- color: #5D5C5C;
238
- font-weight: normal;
239
- letter-spacing: 0em;
240
- font-size: 16px;
241
- line-height: normal;
242
- border-radius: 6px;
243
- background-color: #FFFFFF;
244
- font-family: "Source Han Sans";
245
- height: 32px;
246
- flex: 0 0 auto;
247
- width: auto;
248
- min-width: 110px;
249
- white-space: nowrap;
250
- overflow: hidden;
251
- margin-right: 0px;
252
- text-overflow: ellipsis;
253
- }
254
- }
255
- }
256
-
257
- // button-space-between样式 - 按钮两端对齐（两个按钮时分布在两端）
258
- &.h-buttons-button-space-between {
259
- :deep(.ant-btn-group) {
260
- width: 100%;
261
- display: flex;
262
- flex-wrap: nowrap;
263
- justify-content: space-between;
264
- .ant-btn {
265
- border: 1px solid #CDCDCD;
266
- color: #5D5C5C;
267
- font-weight: normal;
268
- letter-spacing: 0em;
269
- font-size: 16px;
270
- line-height: normal;
271
- border-radius: 6px;
272
- background-color: #FFFFFF;
273
- font-family: "Source Han Sans";
274
- height: 32px;
275
- width: auto;
276
- flex: 0 0 auto;
277
- min-width: 110px;
278
- white-space: nowrap;
279
- overflow: hidden;
280
- margin-right: 0px;
281
- text-overflow: ellipsis;
282
- }
283
- }
284
- }
285
-
286
- // 水印图标与按钮容器布局调整
287
- &.h-buttons-button-watermark-icon {
288
- :deep(.watermark-icon) { transform: translate(-50%, -54%) !important; }
289
- :deep(.x-button) { display: flex !important; }
290
- :deep(.ant-btn-group) {
291
- margin: 0 auto;
292
- display: block;
293
- }
294
- }
295
-
296
- }
297
- </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
+ 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>