vue2-client 1.15.132 → 1.15.133

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,194 +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
- // 是否启用 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>
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>
@@ -0,0 +1,32 @@
1
+ <script>
2
+ import XCharge from './XCharge.vue'
3
+ export default {
4
+ name: 'XChargeDemo',
5
+ components: {
6
+ XCharge,
7
+ },
8
+ data () {
9
+ return {
10
+ queryParamsName: '收费组件Config'
11
+ }
12
+ },
13
+ methods: {
14
+ change1 (e, item) {
15
+ console.log(e, item)
16
+ },
17
+ method (value) {
18
+ console.log(value)
19
+ }
20
+ }
21
+ }
22
+ </script>
23
+
24
+ <template>
25
+ <x-charge :queryParamsName="queryParamsName" @method="method" @change="change1"></x-charge>
26
+ </template>
27
+
28
+ <style scoped>
29
+ .test{
30
+ margin-right: 10px;
31
+ }
32
+ </style>
@@ -1,119 +1,119 @@
1
- <template>
2
- <div class="table-container" :style="{ height: tableHeight }">
3
- <a-table
4
- :columns="processedColumns"
5
- :dataSource="tableData"
6
- :pagination="false"
7
- :bordered="false"
8
- :rowKey="rowKey"
9
- :scroll="{ y: scrollY }"
10
- />
11
- </div>
12
- </template>
13
-
14
- <script>
15
- import { getConfigByName, runLogic } from '@vue2-client/services/api/common'
16
-
17
- export default {
18
- props: {
19
- queryParamsName: String,
20
- rowKey: {
21
- type: String,
22
- default: 'id'
23
- },
24
- parameter: {
25
- type: Object,
26
- default: () => ({})
27
- }
28
- },
29
- data () {
30
- return {
31
- columns: [],
32
- tableData: [],
33
- tableHeight: 'auto', // 默认高度
34
- scrollY: undefined
35
- }
36
- },
37
- watch: {
38
- queryParamsName: {
39
- immediate: true,
40
- handler (val) {
41
- val && this.init(val, this.parameter)
42
- }
43
- }
44
- },
45
- computed: {
46
- processedColumns () {
47
- return this.columns.map(column => ({
48
- ...column,
49
- customHeaderCell: column.headerStyle
50
- ? () => ({ style: column.headerStyle })
51
- : undefined
52
- }))
53
- }
54
- },
55
- methods: {
56
- init (config, parameterData) {
57
- getConfigByName(config, 'af-his', res => {
58
- // 从配置中获取表格高度
59
- this.tableHeight = res.tableHeight || '400px' // 默认400px
60
- this.columns = res.columns || []
61
-
62
- runLogic(res.logicName, parameterData, 'af-his').then(result => {
63
- this.tableData = result.map((item, index) => ({
64
- ...item,
65
- key: item[this.rowKey] || `row_${index}`
66
- }))
67
-
68
- this.$nextTick(() => {
69
- this.scrollY = this.tableHeight
70
- })
71
- })
72
- })
73
- }
74
- }
75
- }
76
- </script>
77
-
78
- <style scoped>
79
- /* 表格容器 */
80
- .table-container {
81
- overflow: hidden;
82
- display: flex;
83
- flex-direction: column;
84
- }
85
-
86
- /* 基础无边框样式 */
87
- /deep/ .ant-table {
88
- border: none !important;
89
- flex: 1;
90
- display: flex;
91
- flex-direction: column;
92
- }
93
-
94
- /deep/ .ant-table-content {
95
- flex: 1;
96
- display: flex;
97
- flex-direction: column;
98
- }
99
-
100
- /deep/ .ant-table-body {
101
- flex: 1;
102
- overflow-y: auto !important;
103
- }
104
-
105
- /deep/ .ant-table-tbody > tr > td {
106
- border-bottom: none !important;
107
- padding: 6px !important;
108
- }
109
-
110
- /deep/ .ant-table-thead > tr > th {
111
- border-bottom: none !important;
112
- background: none !important;
113
- padding: 8px 6px !important;
114
- position: sticky;
115
- top: 0;
116
- z-index: 1;
117
- background-color: white !important;
118
- }
119
- </style>
1
+ <template>
2
+ <div class="table-container" :style="{ height: tableHeight }">
3
+ <a-table
4
+ :columns="processedColumns"
5
+ :dataSource="tableData"
6
+ :pagination="false"
7
+ :bordered="false"
8
+ :rowKey="rowKey"
9
+ :scroll="{ y: scrollY }"
10
+ />
11
+ </div>
12
+ </template>
13
+
14
+ <script>
15
+ import { getConfigByName, runLogic } from '@vue2-client/services/api/common'
16
+
17
+ export default {
18
+ props: {
19
+ queryParamsName: String,
20
+ rowKey: {
21
+ type: String,
22
+ default: 'id'
23
+ },
24
+ parameter: {
25
+ type: Object,
26
+ default: () => ({})
27
+ }
28
+ },
29
+ data () {
30
+ return {
31
+ columns: [],
32
+ tableData: [],
33
+ tableHeight: 'auto', // 默认高度
34
+ scrollY: undefined
35
+ }
36
+ },
37
+ watch: {
38
+ queryParamsName: {
39
+ immediate: true,
40
+ handler (val) {
41
+ val && this.init(val, this.parameter)
42
+ }
43
+ }
44
+ },
45
+ computed: {
46
+ processedColumns () {
47
+ return this.columns.map(column => ({
48
+ ...column,
49
+ customHeaderCell: column.headerStyle
50
+ ? () => ({ style: column.headerStyle })
51
+ : undefined
52
+ }))
53
+ }
54
+ },
55
+ methods: {
56
+ init (config, parameterData) {
57
+ getConfigByName(config, 'af-his', res => {
58
+ // 从配置中获取表格高度
59
+ this.tableHeight = res.tableHeight || '400px' // 默认400px
60
+ this.columns = res.columns || []
61
+
62
+ runLogic(res.logicName, parameterData, 'af-his').then(result => {
63
+ this.tableData = result.map((item, index) => ({
64
+ ...item,
65
+ key: item[this.rowKey] || `row_${index}`
66
+ }))
67
+
68
+ this.$nextTick(() => {
69
+ this.scrollY = this.tableHeight
70
+ })
71
+ })
72
+ })
73
+ }
74
+ }
75
+ }
76
+ </script>
77
+
78
+ <style scoped>
79
+ /* 表格容器 */
80
+ .table-container {
81
+ overflow: hidden;
82
+ display: flex;
83
+ flex-direction: column;
84
+ }
85
+
86
+ /* 基础无边框样式 */
87
+ /deep/ .ant-table {
88
+ border: none !important;
89
+ flex: 1;
90
+ display: flex;
91
+ flex-direction: column;
92
+ }
93
+
94
+ /deep/ .ant-table-content {
95
+ flex: 1;
96
+ display: flex;
97
+ flex-direction: column;
98
+ }
99
+
100
+ /deep/ .ant-table-body {
101
+ flex: 1;
102
+ overflow-y: auto !important;
103
+ }
104
+
105
+ /deep/ .ant-table-tbody > tr > td {
106
+ border-bottom: none !important;
107
+ padding: 6px !important;
108
+ }
109
+
110
+ /deep/ .ant-table-thead > tr > th {
111
+ border-bottom: none !important;
112
+ background: none !important;
113
+ padding: 8px 6px !important;
114
+ position: sticky;
115
+ top: 0;
116
+ z-index: 1;
117
+ background-color: white !important;
118
+ }
119
+ </style>