# 超级搜索
<hlta-superSearch
@valueChange="searchItemChange"
ref="dom_superSearch"
class="hlta-s-search-item"
:search-items="searchItems"
:item="searchItem"
:query-url="queryUrl"
:gSize="'large'"
:displayShowRow="2"
>
<div slot="moreBtn">
<ta-button
class="mt-10"
@click="add"
type="primary"
icon="plus"
v-if="!socialOrg"
>
新增
</ta-button>
<ta-button v-if="!socialOrg" class="ml-10 mt-10" @click="deleteByIds" type="primary" icon="delete">
批量删除
</ta-button>
</div>
</hlta-superSearch>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
export default {
name: "socialOrg",
components: {
socialOrgInfo,
socialOrgView,
},
// props: ['show'],
extends: superTableMx,
// mixins:[superTableMx],
data() {
return {
// ...
searchItems: [
{
type: "text",
placeholder: "输入机构名称",
property: "socialOrgName",
colSpan: 6,
cb_change: (value) => {
console.log("输入组织名称/信用代码:", value);
},
},
{
type: "text",
placeholder: "输入统一信用代码",
property: "unifiedCreditCode",
colSpan: 6,
cb_change: (value) => {
console.log("输入组织名称/信用代码:", value);
},
},
{
type: "select",
placeholder: "评估等级",
property: "evaluationLevelList",
collectionType: "EVALUATIONLEVEL",
// width:300,
colSpan: 6,
cb_select: (value) => {
console.log("cb_change:---评估等级", value);
},
},
{
type: "multiSingleSelected",
placeholder: "行政区划",
property: "admsArea",
// property: "admsAreaList",
treeId: 'result',
replaceFields:{
title: 'areaName', key: 'areaCode', value: 'areaCode',
},
treeDataLabel: 'areaName',
treeDataValue: 'areaCode',
treeNodeId: 'areaCode',
url: 'area/select',
treeCheckable: false,
multiple: false,
urlParam: {selected:'330000000000'},
treeDataAsync: [],
},
{
type: "date",
placeholder: "成立日期",
property: "establishTime",
colSpan: 6,
// colSpan: 24,
// labelCol:{
// span:0,
// },
// wrapperCol:{
// span:6
// },
// styles:{
// width:'89.7%'
// }
},
{
type: "checkGroupDict",
collectionType: "ORGANIZATIONTYPE",
property: "socialOrgTypeList",
// width: 200,
// Talabel: '社会组织类型',
label: '社会组织类型',
newline:1,
colSpan:21,
floatLabelStyle:{
paddingLeft:'10px'
},
labelCol: {
span: 0,
},
wrapperCol: {
span: 24,
},
},
{
type: "checkGroupDict",
collectionType: "YESORNO",
property: "hasPublicQualificationList",
// width: 600,
// Talabel: '是否获取公募资格',
label: '是否获取公募资格',
newline:1,
colSpan:15,
floatLabelStyle:{
paddingLeft:'10px'
},
labelCol: {
span: 0,
},
wrapperCol: {
span: 24,
},
},
],
searchItem: {},
// ...
};
},
created() {
},
mounted() {},
methods: {
//批量删除
deleteByIds() {
this.$confirm({
title: '删除',
content: '确定批量删除吗？',
onOk: () => {
let param = {};
let idList = []
let selectRecords = this.$refs.sTable.$refs.mTable.getCheckboxRecords()
selectRecords.map(item=>{
idList.push(item.id)
})
param.idList = idList
if(param.idList.length==0){
this.$message.warning('至少选择一行')
return
}
this.Base.submit(null, {
method: 'post',
url: 'socialOrg/delete',
data: param,
autoQs: false,
}).then(data => {
this.$message.success('删除成功!')
this.doQuery()
}).catch(() => {
this.$message.error('删除失败!!!')
})
}})
},
reTable(){
this.doQuery()
},
searchItemChange(item) {
console.log(
"searchItemChange===",
item,
"this.searchItem:",
this.searchItem
);
// let allChange = this.form99.getAllChangeEventArgs()
// console.log("allChange==",allChange);
},
},
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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
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
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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
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
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
# prop(属性)
| 参数 | 说明 | 类型 | 默认值 | 必传项 |
|---|---|---|---|---|
| search-items | 初始化-数据模型 | Array | 具体用法详见options | Y |
| item | 查询信息数据归集 | object | false | Y |
| query-url | 接口请求地址 | string | - | Y |
| gSize | 输入部件尺寸 | string | 和404ui文档一致，3档可调，大/中/小 | Y |
| displayShowRow | 默认展示几行 | Number | 超出范围的部件默认隐藏 | Y |
# options(可选项配置)
# search-items
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| type | 部件类型 | string | text / textarea / select / date / month / year / quarter / rangeDate / rangeMonth / dupAloneSelected / cascader / cascader1 / multiSingleSelected / checkGroupDict / |
| property | api键名 | string | 和接口文档描述的键名称一致 |
| placeholder | 占位显示文本 | string | - |
| colSpan | 行列布局 | number | 默认1行占6列 |
| newline | 断行器，开启后默认折行，后面元素另启一行 | number | false , 0 |
| labelCol | 部件label全属性控制器 | object | { span: 0 } |
| wrapperCol | 局部部件外衣容器属性全控制 | object | { span:24} |
| floatLabelStyle | 浮动模式布局下的label属性全控制 | object | { paddingLeft: '10px', } |
| collectionType | 字典名称，用于返回对应中文内容 | string | |
| width | 局部部件块整体宽度自定义调节 | string |
更多属性用法详见：ta404ui1.5.x版本中的taform组件释义
# Events(事件)
| 方法名称 | 说明 | 返回类型 | 参数 | 调用方式 |
|---|---|---|---|---|
| valueChange | 返回super-search交互完成后的数据集，可以做一些个性化 | Function | - | |
| fnQuery | 动态调用查询superTable数据 | - | - | this.$refs[组件自定义名称].fnQuery() |
| fnReset | 重置superSearch所有键入信息 | - | - | this.$refs[组件自定义名称].fnReset() |
# slots(插槽)
| 属性 | 说明 | 默认值 |
|---|---|---|
| moreBtn | 更多自定义按钮 | {} |
# protocol(规约)
> 1. 该组件外层要包裹fh-face-plate组件 > 2. hlta-superSearch组件目前只支持和hlta-superTable组件一套搭配使用 > 3. hlta-superSearch组件标签上要定义ref锚点名称 >