vue2-client 1.15.131 → 1.15.132

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.
@@ -1,165 +1,165 @@
1
- <script setup lang="ts">
2
- import XFormTable from '@vue2-client/base-client/components/common/XFormTable/XFormTable.vue'
3
- import { ref } from 'vue'
4
-
5
- defineProps({
6
- // HFormTable特有的属性
7
- tableStyle: {
8
- type: String,
9
- default: 'formtable-col1'
10
- }
11
- })
12
-
13
- // 创建对XFormTable组件的引用
14
- const xFormTableRef = ref()
15
-
16
- // 暴露方法给父组件使用
17
- defineExpose({
18
- // 为了兼容性,保留getXFormTableInstance方法
19
- getXFormTableInstance: () => xFormTableRef.value
20
- })
21
- </script>
22
-
23
- <template>
24
- <div
25
- class="h-form-table-wrapper"
26
- :class="[
27
- `h-form-table-${tableStyle}`
28
- ]"
29
- >
30
- <x-form-table
31
- ref="xFormTableRef"
32
- v-bind="$attrs"
33
- v-on="$listeners"
34
- >
35
- <template v-for="(_, name) in $slots" #[name]="slotData">
36
- <slot :name="name" v-bind="slotData" />
37
- </template>
38
- </x-form-table>
39
- </div>
40
- </template>
41
-
42
- <style scoped lang="less">
43
- .h-form-table-wrapper {
44
- // 基础样式
45
- :deep(.table-wrapper) {
46
- .ant-table {
47
- .ant-table-row {
48
- margin: 0px;
49
-
50
- .ant-form-item {
51
- margin: 0px;
52
-
53
- .ant-form-item-control-wrapper {
54
- .ant-form-item-control {
55
- line-height: 0px;
56
-
57
- .ant-select-selection--multiple {
58
- padding-bottom: 2px;
59
- }
60
- }
61
- width: 100%;
62
- }
63
- }
64
- }
65
- font-size: 16px;
66
- }
67
-
68
- .ant-alert-info {
69
- display: none;
70
- }
71
- }
72
-
73
- :deep(.ant-card) {
74
- margin: -10px 0px 29px 0px;
75
- }
76
-
77
- :deep(.ant-btn) {
78
- border: 0px;
79
- box-shadow: none;
80
- padding: 0px;
81
- color: #5D5C5C;
82
- font-weight: bold;
83
- letter-spacing: 0em;
84
- font-size: 18px;
85
- line-height: normal;
86
- font-family: "Source Han Sans";
87
- }
88
-
89
- :deep(.ant-card-body) {
90
- padding: 0 6px;
91
- }
92
-
93
- :deep(.ant-table-small) {
94
- border-width: 0;
95
-
96
- .ant-table-fixed {
97
- border-radius: 0;
98
- border-bottom: 1px solid #f0f0f0;
99
- }
100
- }
101
-
102
- // 表格高度样式
103
- &.h-form-table-height {
104
- :deep(.table-wrapper) {
105
- .ant-select-open ~ .ant-table-content {
106
- height: 500px !important;
107
- }
108
- }
109
- }
110
-
111
- // 表格样式
112
- &.h-form-table-table {
113
- :deep(.ant-table-small .ant-table-fixed-header) {
114
- .ant-table-content {
115
- .ant-table-content {
116
- .ant-table-body {
117
- border-radius: 0 0 4px 4px;
118
- overflow: visible !important;
119
- }
120
- }
121
- }
122
- }
123
- }
124
-
125
- // 隐藏按钮区域
126
- &.h-form-table-button-area-hide {
127
- :deep(.ant-btn) {
128
- display: none;
129
- }
130
-
131
- :deep(.table-wrapper) {
132
- margin-top: -39px;
133
- }
134
- }
135
-
136
- // 列样式1
137
- &.h-form-table-formtable-col1 {
138
- :deep(.table-wrapper) {
139
- .ant-row {
140
- .ant-col span {
141
- border: none;
142
- width: auto;
143
- margin-bottom: auto;
144
- }
145
- }
146
-
147
- .ant-table {
148
- .ant-table-body {
149
- .ant-table-fixed colgroup col:nth-child(2) {
150
- width: 50px;
151
- min-width: 50px;
152
- }
153
- }
154
-
155
- .ant-table-header {
156
- .ant-table-fixed colgroup col:nth-child(2) {
157
- width: 50px;
158
- min-width: 50px;
159
- }
160
- }
161
- }
162
- }
163
- }
164
- }
165
- </style>
1
+ <script setup lang="ts">
2
+ import XFormTable from '@vue2-client/base-client/components/common/XFormTable/XFormTable.vue'
3
+ import { ref } from 'vue'
4
+
5
+ defineProps({
6
+ // HFormTable特有的属性
7
+ tableStyle: {
8
+ type: String,
9
+ default: 'formtable-col1'
10
+ }
11
+ })
12
+
13
+ // 创建对XFormTable组件的引用
14
+ const xFormTableRef = ref()
15
+
16
+ // 暴露方法给父组件使用
17
+ defineExpose({
18
+ // 为了兼容性,保留getXFormTableInstance方法
19
+ getXFormTableInstance: () => xFormTableRef.value
20
+ })
21
+ </script>
22
+
23
+ <template>
24
+ <div
25
+ class="h-form-table-wrapper"
26
+ :class="[
27
+ `h-form-table-${tableStyle}`
28
+ ]"
29
+ >
30
+ <x-form-table
31
+ ref="xFormTableRef"
32
+ v-bind="$attrs"
33
+ v-on="$listeners"
34
+ >
35
+ <template v-for="(_, name) in $slots" #[name]="slotData">
36
+ <slot :name="name" v-bind="slotData" />
37
+ </template>
38
+ </x-form-table>
39
+ </div>
40
+ </template>
41
+
42
+ <style scoped lang="less">
43
+ .h-form-table-wrapper {
44
+ // 基础样式
45
+ :deep(.table-wrapper) {
46
+ .ant-table {
47
+ .ant-table-row {
48
+ margin: 0px;
49
+
50
+ .ant-form-item {
51
+ margin: 0px;
52
+
53
+ .ant-form-item-control-wrapper {
54
+ .ant-form-item-control {
55
+ line-height: 0px;
56
+
57
+ .ant-select-selection--multiple {
58
+ padding-bottom: 2px;
59
+ }
60
+ }
61
+ width: 100%;
62
+ }
63
+ }
64
+ }
65
+ font-size: 16px;
66
+ }
67
+
68
+ .ant-alert-info {
69
+ display: none;
70
+ }
71
+ }
72
+
73
+ :deep(.ant-card) {
74
+ margin: -10px 0px 29px 0px;
75
+ }
76
+
77
+ :deep(.ant-btn) {
78
+ border: 0px;
79
+ box-shadow: none;
80
+ padding: 0px;
81
+ color: #5D5C5C;
82
+ font-weight: bold;
83
+ letter-spacing: 0em;
84
+ font-size: 18px;
85
+ line-height: normal;
86
+ font-family: "Source Han Sans";
87
+ }
88
+
89
+ :deep(.ant-card-body) {
90
+ padding: 0 6px;
91
+ }
92
+
93
+ :deep(.ant-table-small) {
94
+ border-width: 0;
95
+
96
+ .ant-table-fixed {
97
+ border-radius: 0;
98
+ border-bottom: 1px solid #f0f0f0;
99
+ }
100
+ }
101
+
102
+ // 表格高度样式
103
+ &.h-form-table-height {
104
+ :deep(.table-wrapper) {
105
+ .ant-select-open ~ .ant-table-content {
106
+ height: 500px !important;
107
+ }
108
+ }
109
+ }
110
+
111
+ // 表格样式
112
+ &.h-form-table-table {
113
+ :deep(.ant-table-small .ant-table-fixed-header) {
114
+ .ant-table-content {
115
+ .ant-table-content {
116
+ .ant-table-body {
117
+ border-radius: 0 0 4px 4px;
118
+ overflow: visible !important;
119
+ }
120
+ }
121
+ }
122
+ }
123
+ }
124
+
125
+ // 隐藏按钮区域
126
+ &.h-form-table-button-area-hide {
127
+ :deep(.ant-btn) {
128
+ display: none;
129
+ }
130
+
131
+ :deep(.table-wrapper) {
132
+ margin-top: -39px;
133
+ }
134
+ }
135
+
136
+ // 列样式1
137
+ &.h-form-table-formtable-col1 {
138
+ :deep(.table-wrapper) {
139
+ .ant-row {
140
+ .ant-col span {
141
+ border: none;
142
+ width: auto;
143
+ margin-bottom: auto;
144
+ }
145
+ }
146
+
147
+ .ant-table {
148
+ .ant-table-body {
149
+ .ant-table-fixed colgroup col:nth-child(2) {
150
+ width: 50px;
151
+ min-width: 50px;
152
+ }
153
+ }
154
+
155
+ .ant-table-header {
156
+ .ant-table-fixed colgroup col:nth-child(2) {
157
+ width: 50px;
158
+ min-width: 50px;
159
+ }
160
+ }
161
+ }
162
+ }
163
+ }
164
+ }
165
+ </style>
@@ -1,111 +1,194 @@
1
- <script setup lang="ts">
2
- import XTab from '@vue2-client/base-client/components/common/XTab/XTab.vue'
3
- import { ref } from 'vue'
4
-
5
- defineProps({
6
- // HTab特有的属性
7
- hasTopMargin: {
8
- type: Boolean,
9
- default: true
10
- }
11
- })
12
-
13
- // 创建对XTab组件的引用
14
- const xTabRef = ref()
15
-
16
- // 暴露方法给父组件使用
17
- defineExpose({
18
- // 为了兼容性,保留getXTabInstance方法
19
- getXTabInstance: () => xTabRef.value,
20
- })
21
- </script>
22
-
23
- <template>
24
- <div class="h-tab-wrapper" :class="{ 'h-tab-has-top-margin': hasTopMargin }">
25
- <x-tab
26
- ref="xTabRef"
27
- v-bind="$attrs"
28
- v-on="$listeners"
29
- >
30
- <template v-for="(_, name) in $slots" #[name]="slotData">
31
- <slot :name="name" v-bind="slotData" />
32
- </template>
33
- </x-tab>
34
- </div>
35
- </template>
36
-
37
- <style scoped lang="less">
38
- .h-tab-wrapper {
39
- // 基础样式
40
- :deep(.ant-tabs-tab-next) {
41
- display: none;
42
- }
43
-
44
- :deep(.ant-tabs-nav) {
45
- .ant-tabs-tab-next-icon {
46
- display: none;
47
- }
48
-
49
- .ant-tabs-tab {
50
- background-color: transparent;
51
- border-radius: 6px 6px 0 0;
52
- color: #5D5C5C;
53
- font-weight: bold;
54
- width: 134px;
55
- font-size: 18px;
56
- line-height: 10px;
57
- font-family: "Source Han Sans";
58
- transition: all 0.3s;
59
- height: 32px;
60
- text-align: center;
61
- }
62
-
63
- .ant-tabs-tab-active {
64
- background-color: #0057FE;
65
- color: #ffffff;
66
- width: 134px;
67
- line-height: 10px;
68
- height: 32px;
69
- text-align: center;
70
- }
71
- }
72
-
73
- :deep(.ant-tabs-bar) {
74
- border-bottom: 2px solid #0057FE;
75
- }
76
-
77
- :deep(.ant-tabs-tab-arrow-show) {
78
- display: none;
79
- }
80
-
81
- :deep(.ant-tabs-ink-bar) {
82
- background-color: transparent;
83
- bottom: -1px;
84
- display: none;
85
- height: 0;
86
- }
87
-
88
- :deep(.ant-tabs-tab-prev-icon-target) {
89
- display: none;
90
- }
91
-
92
- // 带顶部边距的样式
93
- &.h-tab-has-top-margin {
94
- :deep(.ant-tabs-nav) {
95
- margin-top: 6px;
96
- }
97
-
98
- :deep(.ant-tabs-bar) {
99
- margin: 0 6px;
100
- }
101
-
102
- :deep(.ant-card-body) {
103
- padding: 6px 0;
104
-
105
- .ant-card-body {
106
- padding: 6px;
107
- }
108
- }
109
- }
110
- }
111
- </style>
1
+ <script setup lang="ts">
2
+ import XTab from '@vue2-client/base-client/components/common/XTab/XTab.vue'
3
+ import { ref } from 'vue'
4
+
5
+ defineProps({
6
+ // HTab特有的属性
7
+ hasTopMargin: {
8
+ type: Boolean,
9
+ default: true
10
+ },
11
+ // 是否启用 style7 样式(细下划线、自适应)
12
+ useStyle7: {
13
+ type: Boolean,
14
+ default: false
15
+ },
16
+ // 是否叠加圆点样式(仅在 useStyle7 为 true 时生效)
17
+ useCycle: {
18
+ type: Boolean,
19
+ default: false
20
+ }
21
+ })
22
+
23
+ // 创建对XTab组件的引用
24
+ const xTabRef = ref()
25
+
26
+ // 暴露方法给父组件使用
27
+ defineExpose({
28
+ // 为了兼容性,保留getXTabInstance方法
29
+ getXTabInstance: () => xTabRef.value,
30
+ })
31
+ </script>
32
+
33
+ <template>
34
+ <div class="h-tab-wrapper" :class="{ 'h-tab-has-top-margin': hasTopMargin, 'h-tab-style7': useStyle7, 'h-tab-cycle': useStyle7 && useCycle }">
35
+ <x-tab
36
+ ref="xTabRef"
37
+ v-bind="$attrs"
38
+ v-on="$listeners"
39
+ >
40
+ <template v-for="(_, name) in $slots" #[name]="slotData">
41
+ <slot :name="name" v-bind="slotData" />
42
+ </template>
43
+ </x-tab>
44
+ </div>
45
+ </template>
46
+
47
+ <style scoped lang="less">
48
+ .h-tab-wrapper {
49
+ // 基础样式
50
+ :deep(.ant-tabs-tab-next) {
51
+ display: none;
52
+ }
53
+
54
+ :deep(.ant-tabs-nav) {
55
+ .ant-tabs-tab-next-icon {
56
+ display: none;
57
+ }
58
+
59
+ .ant-tabs-tab {
60
+ background-color: transparent;
61
+ border-radius: 6px 6px 0 0;
62
+ color: #5D5C5C;
63
+ font-weight: bold;
64
+ width: 134px;
65
+ font-size: 18px;
66
+ line-height: 10px;
67
+ font-family: "Source Han Sans";
68
+ transition: all 0.3s;
69
+ height: 32px;
70
+ text-align: center;
71
+ }
72
+
73
+ .ant-tabs-tab-active {
74
+ background-color: #0057FE;
75
+ color: #ffffff;
76
+ width: 134px;
77
+ line-height: 10px;
78
+ height: 32px;
79
+ text-align: center;
80
+ }
81
+ }
82
+
83
+ :deep(.ant-tabs-bar) {
84
+ border-bottom: 2px solid #0057FE;
85
+ }
86
+
87
+ :deep(.ant-tabs-tab-arrow-show) {
88
+ display: none;
89
+ }
90
+
91
+ :deep(.ant-tabs-ink-bar) {
92
+ background-color: transparent;
93
+ bottom: -1px;
94
+ display: none;
95
+ height: 0;
96
+ }
97
+
98
+ :deep(.ant-tabs-tab-prev-icon-target) {
99
+ display: none;
100
+ }
101
+
102
+ // 带顶部边距的样式
103
+ &.h-tab-has-top-margin {
104
+ :deep(.ant-tabs-nav) {
105
+ margin-top: 6px;
106
+ }
107
+
108
+ :deep(.ant-tabs-bar) {
109
+ margin: 0 6px;
110
+ }
111
+
112
+ :deep(.ant-card-body) {
113
+ padding: 6px 0;
114
+
115
+ .ant-card-body {
116
+ padding: 6px;
117
+ }
118
+ }
119
+ }
120
+
121
+ // 通用样式7:细下划线、透明背景、可配置宽度
122
+ &.h-tab-style7 {
123
+ :deep(.ant-tabs-tab-next),
124
+ :deep(.ant-tabs-tab-prev-icon-target),
125
+ :deep(.ant-tabs-tab-next-icon) { display: none; }
126
+
127
+ :deep(.ant-tabs-bar) { border-bottom: 2px solid transparent; }
128
+
129
+ :deep(.ant-tabs-ink-bar) {
130
+ display: block;
131
+ background-color: #0057FE;
132
+ bottom: 8px;
133
+ height: 2px;
134
+ /* 宽度交给 antd 自身计算,避免固定值影响自适应 */
135
+ margin-left: 0;
136
+ }
137
+
138
+ :deep(.ant-tabs-nav) {
139
+ display: flex;
140
+ flex-wrap: wrap;
141
+ gap: 8px;
142
+ .ant-tabs-tab {
143
+ background-color: transparent;
144
+ border-radius: 0;
145
+ color: #333333;
146
+ font-weight: 500;
147
+ /* 自适应宽度,允许通过变量覆盖最小宽度 */
148
+ min-width: var(--tab-min-width, 96px);
149
+ width: auto;
150
+ padding: 0 12px;
151
+ font-size: 16px;
152
+ line-height: 10px;
153
+ font-family: "Source Han Sans";
154
+ transition: all 0.3s;
155
+ height: 40px;
156
+ text-align: center;
157
+ margin-right: 0 !important;
158
+ }
159
+ .ant-tabs-tab-active {
160
+ background-color: transparent;
161
+ color: #0057FE;
162
+ font-weight: 600;
163
+ width: auto;
164
+ line-height: 10px;
165
+ height: 40px;
166
+ text-align: center;
167
+ }
168
+ }
169
+
170
+ // 可选:标签左侧圆点
171
+ &.h-tab-cycle {
172
+ :deep(.ant-tabs-tab) {
173
+ position: relative;
174
+ padding-left: 18px !important;
175
+ margin-right: 20px !important;
176
+ }
177
+ :deep(.ant-tabs-tab::before) {
178
+ content: "" !important;
179
+ position: absolute !important;
180
+ left: 0 !important;
181
+ top: 50% !important;
182
+ transform: translateY(-50%) !important;
183
+ width: 8px !important;
184
+ height: 8px !important;
185
+ background: #0057FE !important;
186
+ border-radius: 50% !important;
187
+ display: block !important;
188
+ }
189
+ :deep(.ant-tabs-nav) { display: flex !important; flex-wrap: nowrap !important; }
190
+ }
191
+ }
192
+
193
+ }
194
+ </style>