import { LightningElement,api, track } from 'lwc';
|
|
export default class JzSearchForm extends LightningElement {
|
@api name;
|
@api options = [];
|
|
connectedCallback(){
|
this.initJzSearchForm(this.options);
|
}
|
|
/**
|
* 初始化搜索控件内容
|
* [
|
* {
|
* label: 描述值 必填
|
* type: isInput:为true时与Lwc input 中类型一致，其它可为不填
|
* name: 控件名称 - 用与搜索中传入后台的参数名 必填
|
* value: 控件默认值
|
* isInput: 为true时，显示Lwc中input框
|
* isCombobox: 为true时，显示Lwc中lightning-combobox下拉框
|
* options: 为Combobox时，填写下拉框值 [{label: 'New', value: 'new'},...]
|
* },
|
* ...
|
* ]
|
* of jzSearchFormConfig
|
*/
|
@track jzSearchFormConfig = [];
|
@track searchParams = {};
|
|
initJzSearchForm(init){
|
let temp = [];
|
init.forEach((item,index)=>{
|
temp.push({...item});
|
if(item.value)this.searchParams[item.name] = item.value;
|
if(item.isCombobox) temp[index].options = [{label: '全部', value: ''}, ...item.options];
|
})
|
this.jzSearchFormConfig = temp;
|
}
|
|
// 值改变
|
handleChange(event) {
|
const name = event.target.name;
|
this.searchParams[name] = event.target.value;
|
}
|
|
// 点击搜索获取搜索框中数据
|
searchData(event) {
|
// Prevent default behavior of anchor tag click which is to navigate to the href url
|
event.preventDefault();
|
const getSearchParamsEvent = new CustomEvent('getsearchparams', {
|
detail: {searchParams: this.searchParams}
|
});
|
this.dispatchEvent(getSearchParamsEvent);
|
}
|
|
}
|
