vue2-client 1.13.19 → 1.13.21
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,121 +1,128 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<div class="x-input-wrapper">
|
|
3
|
-
<div class="input-container">
|
|
4
|
-
<span v-if="config?.label" class="input-label">{{ config.label }}</span>
|
|
5
|
-
<div class="input-wrapper">
|
|
6
|
-
<a-input
|
|
7
|
-
v-model="innerValue"
|
|
8
|
-
v-bind="$attrs"
|
|
9
|
-
:placeholder="config?.placeholder"
|
|
10
|
-
:size="config?.size"
|
|
11
|
-
:maxLength="config?.maxLength"
|
|
12
|
-
:disabled="config?.disabled"
|
|
13
|
-
:allowClear="config?.allowClear"
|
|
14
|
-
@change="handleInput"
|
|
15
|
-
@pressEnter="handleSearch"
|
|
16
|
-
>
|
|
17
|
-
<template v-if="config?.prefix" #prefix>
|
|
18
|
-
<a-icon :type="config.prefix" @click="handleSearch" class="clickable-icon" />
|
|
19
|
-
</template>
|
|
20
|
-
<template v-if="config?.suffix" #suffix>
|
|
21
|
-
<a-icon :type="config.suffix" @click="handleSearch" class="clickable-icon" />
|
|
22
|
-
</template>
|
|
23
|
-
</a-input>
|
|
24
|
-
</div>
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
</
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
this
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
:
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
:
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
1
|
+
<template>
|
|
2
|
+
<div class="x-input-wrapper">
|
|
3
|
+
<div class="input-container">
|
|
4
|
+
<span v-if="config?.label" class="input-label">{{ config.label }}</span>
|
|
5
|
+
<div class="input-wrapper">
|
|
6
|
+
<a-input
|
|
7
|
+
v-model="innerValue"
|
|
8
|
+
v-bind="$attrs"
|
|
9
|
+
:placeholder="config?.placeholder"
|
|
10
|
+
:size="config?.size"
|
|
11
|
+
:maxLength="config?.maxLength"
|
|
12
|
+
:disabled="config?.disabled"
|
|
13
|
+
:allowClear="config?.allowClear"
|
|
14
|
+
@change="handleInput"
|
|
15
|
+
@pressEnter="handleSearch"
|
|
16
|
+
>
|
|
17
|
+
<template v-if="config?.prefix" #prefix>
|
|
18
|
+
<a-icon :type="config.prefix" @click="handleSearch" class="clickable-icon" />
|
|
19
|
+
</template>
|
|
20
|
+
<template v-if="config?.suffix" #suffix>
|
|
21
|
+
<a-icon :type="config.suffix" @click="handleSearch" class="clickable-icon" />
|
|
22
|
+
</template>
|
|
23
|
+
</a-input>
|
|
24
|
+
</div>
|
|
25
|
+
<span v-if="config?.tail" class="input-tail">{{ config.tail }}</span>
|
|
26
|
+
</div>
|
|
27
|
+
</div>
|
|
28
|
+
</template>
|
|
29
|
+
|
|
30
|
+
<script>
|
|
31
|
+
import { getConfigByName, runLogic } from '@vue2-client/services/api/common'
|
|
32
|
+
|
|
33
|
+
export default {
|
|
34
|
+
name: 'XInput',
|
|
35
|
+
inheritAttrs: false,
|
|
36
|
+
props: {
|
|
37
|
+
value: {
|
|
38
|
+
type: [String, Number],
|
|
39
|
+
default: ''
|
|
40
|
+
},
|
|
41
|
+
queryParamsName: {
|
|
42
|
+
type: String,
|
|
43
|
+
default: ''
|
|
44
|
+
}
|
|
45
|
+
},
|
|
46
|
+
data () {
|
|
47
|
+
return {
|
|
48
|
+
innerValue: this.value || '',
|
|
49
|
+
config: null
|
|
50
|
+
}
|
|
51
|
+
},
|
|
52
|
+
created () {
|
|
53
|
+
this.getData(this.queryParamsName)
|
|
54
|
+
},
|
|
55
|
+
emits: ['search'],
|
|
56
|
+
methods: {
|
|
57
|
+
runLogic,
|
|
58
|
+
async getData (data) {
|
|
59
|
+
getConfigByName(data, 'af-his', res => {
|
|
60
|
+
this.config = res
|
|
61
|
+
if (res.defaultValue !== undefined) {
|
|
62
|
+
this.innerValue = res.defaultValue
|
|
63
|
+
}
|
|
64
|
+
})
|
|
65
|
+
},
|
|
66
|
+
handleInput (e) {
|
|
67
|
+
const value = e.target.value
|
|
68
|
+
this.innerValue = value
|
|
69
|
+
this.$emit('search', value)
|
|
70
|
+
},
|
|
71
|
+
handleSearch () {
|
|
72
|
+
// 统一的搜索事件:将当前输入值发送给父组件
|
|
73
|
+
this.$emit('search', this.innerValue)
|
|
74
|
+
}
|
|
75
|
+
},
|
|
76
|
+
watch: {
|
|
77
|
+
value: {
|
|
78
|
+
handler (newValue) {
|
|
79
|
+
this.innerValue = newValue
|
|
80
|
+
},
|
|
81
|
+
immediate: true
|
|
82
|
+
},
|
|
83
|
+
queryParamsName: {
|
|
84
|
+
handler (newValue) {
|
|
85
|
+
this.getData(newValue)
|
|
86
|
+
},
|
|
87
|
+
deep: true
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
</script>
|
|
92
|
+
|
|
93
|
+
<style scoped>
|
|
94
|
+
.x-input-wrapper {
|
|
95
|
+
position: relative;
|
|
96
|
+
display: inline-block;
|
|
97
|
+
width: 100%;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.input-container {
|
|
101
|
+
display: flex;
|
|
102
|
+
align-items: center;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.input-label {
|
|
106
|
+
white-space: nowrap;
|
|
107
|
+
color: rgba(0, 0, 0, 0.85);
|
|
108
|
+
padding-right: 8px; /* 标签右侧固定间距 */
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
.input-label {
|
|
112
|
+
white-space: nowrap;
|
|
113
|
+
color: rgba(0, 0, 0, 0.85);
|
|
114
|
+
padding-left: 4px; /* 标签左侧固定间距 */
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
.input-wrapper {
|
|
118
|
+
flex: 1; /* 输入框占据剩余空间 */
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
:deep(.clickable-icon) {
|
|
122
|
+
cursor: pointer;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
:deep(.clickable-icon:hover) {
|
|
126
|
+
color: #1890ff;
|
|
127
|
+
}
|
|
128
|
+
</style>
|
|
@@ -13,16 +13,18 @@ XInput 是一个封装了 Ant Design Vue 的输入框组件,提供搜索功能
|
|
|
13
13
|
|
|
14
14
|
组件通过 `queryParamsName` 属性获取配置,配置内容如下:
|
|
15
15
|
|
|
16
|
-
| 参数
|
|
17
|
-
|
|
18
|
-
| size
|
|
19
|
-
| prefix
|
|
20
|
-
| defaultValue | 默认值
|
|
21
|
-
| disabled
|
|
22
|
-
| placeholder
|
|
23
|
-
| allowClear
|
|
24
|
-
| suffix
|
|
25
|
-
| maxLength
|
|
16
|
+
| 参数 | 说明 | 类型 | 默认值 |
|
|
17
|
+
|--------------|--------|---------------| --- |
|
|
18
|
+
| size | 输入框大小 | string | 'default' |
|
|
19
|
+
| prefix | 前缀图标类型 | string | '' |
|
|
20
|
+
| defaultValue | 默认值 | string/number | '' |
|
|
21
|
+
| disabled | 是否禁用 | boolean | false |
|
|
22
|
+
| placeholder | 占位文本 | string | '' |
|
|
23
|
+
| allowClear | 是否允许清除 | boolean | true |
|
|
24
|
+
| suffix | 后缀图标类型 | string | 'search' |
|
|
25
|
+
| maxLength | 最大输入长度 | number | 50 |
|
|
26
|
+
| label | 输入框前文字 | String | '' |
|
|
27
|
+
| tail | 输入框后文字 | String | '' |
|
|
26
28
|
|
|
27
29
|
## 事件
|
|
28
30
|
|
|
@@ -36,8 +38,8 @@ XInput 是一个封装了 Ant Design Vue 的输入框组件,提供搜索功能
|
|
|
36
38
|
|
|
37
39
|
```vue
|
|
38
40
|
<template>
|
|
39
|
-
<x-input
|
|
40
|
-
v-model="searchValue"
|
|
41
|
+
<x-input
|
|
42
|
+
v-model="searchValue"
|
|
41
43
|
@search="handleSearch"
|
|
42
44
|
/>
|
|
43
45
|
</template>
|
|
@@ -80,8 +82,8 @@ export default {
|
|
|
80
82
|
|
|
81
83
|
```vue
|
|
82
84
|
<template>
|
|
83
|
-
<x-input
|
|
84
|
-
v-model="searchValue"
|
|
85
|
+
<x-input
|
|
86
|
+
v-model="searchValue"
|
|
85
87
|
query-params-name="customInputConfig"
|
|
86
88
|
@search="handleSearch"
|
|
87
89
|
/>
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<a-card :bordered="false">
|
|
3
|
-
<a-tabs :tabBarGutter="10" :activeKey="activeKey" @change="tabPaneChange">
|
|
3
|
+
<a-tabs :tabBarGutter="10" :activeKey="activeKey" @change="tabPaneChange" :hideAdd="true" :tabBarStyle="{ display: showTabBar ? 'block' : 'none' }">
|
|
4
4
|
<a-tab-pane
|
|
5
5
|
:forceRender="true"
|
|
6
6
|
v-for="(tab, index) in config.data"
|
|
@@ -50,7 +50,8 @@ export default {
|
|
|
50
50
|
activeKey: 0,
|
|
51
51
|
// 配置
|
|
52
52
|
config: undefined,
|
|
53
|
-
attr: {}
|
|
53
|
+
attr: {},
|
|
54
|
+
showTabBar: true // 默认显示页签
|
|
54
55
|
}
|
|
55
56
|
},
|
|
56
57
|
computed: {
|
|
@@ -133,11 +134,15 @@ export default {
|
|
|
133
134
|
this.getConfig()
|
|
134
135
|
} else if (this.localConfig) {
|
|
135
136
|
this.config = this.localConfig
|
|
137
|
+
// 设置是否显示页签
|
|
138
|
+
this.showTabBar = this.localConfig.showTabBar !== false
|
|
136
139
|
}
|
|
137
140
|
},
|
|
138
141
|
getConfig () {
|
|
139
142
|
getConfigByName(this.configName, this.serverName, res => {
|
|
140
143
|
this.config = res
|
|
144
|
+
// 设置是否显示页签
|
|
145
|
+
this.showTabBar = res.showTabBar !== false
|
|
141
146
|
}, this.env === 'dev')
|
|
142
147
|
},
|
|
143
148
|
getEventHandlers (tab, index) {
|
|
@@ -107,8 +107,12 @@ export default {
|
|
|
107
107
|
console.warn('未找到父级a-row元素')
|
|
108
108
|
return []
|
|
109
109
|
}
|
|
110
|
-
|
|
111
|
-
|
|
110
|
+
|
|
111
|
+
// 修改这里:只获取直接子元素中的.ant-col-12
|
|
112
|
+
const allCols = Array.from(row.children).filter(child =>
|
|
113
|
+
child.className.includes('ant-col-12')
|
|
114
|
+
)
|
|
115
|
+
|
|
112
116
|
// 过滤掉当前a-col,返回其他所有a-col
|
|
113
117
|
return allCols.filter(col => col !== currentCol)
|
|
114
118
|
} catch (error) {
|