筆記/朱季謙

在寫React前端邏輯時,經常遇到可以切換不同條件的列表查詢功能,例如下邊截圖這樣的,其實,這塊程式碼基本都一個邏輯,可以一次性將實現過程記錄下來,待以後再遇到時,直接根據筆記複用即可。

一、首先,是前端React頁面程式碼,這類搜尋框,一般都是放在Form表單當中,然後使用有字首下拉框選項的Input元件,這類模式的元件是在Input元件當中實現一個addonBefore屬性即可,如下程式碼:

  render () {
let { getFieldDecorator } = this.props.form;
return (
<Form onSubmit={this.submit} layout={'inline'}>
<FormItem>
{getFieldDecorator('searchUser', {
initialValue: ""
})(
<Input allowClear placeholder="請輸入搜尋條件"
addonBefore={
getFieldDecorator('condition', {
initialValue: 'name'
})(
<Select style={{ width: 100 }}>
<Option value="name">學生姓名</Option>
<Option value="class">班級</Option>
<Option value="studentNo">學號</Option>
</Select>
)
}
/>
)}
</FormItem>
</Form>
);
}

二、寫好表單頁面後,就可以對該表單邏輯進行開發。因為該搜尋框對應多種方式,但輸入框只有一個,也就是多對一的情況,故而需要做一些轉換,需要將輸入框的值,相應轉換為對應下拉框選項的值,因此,可以用switch判斷來做轉換,當然,你也可以用if-else,我試過if-else的效果,看起來就是一坨......

稍微解釋一下這段程式碼,假如下拉框是以“學生姓名”為維度來搜尋,那麼表單的getFieldDecorator('condition')屬性值即“name”,也就是values.condition==“name”,就會跳轉至values.name = values.searchValue,就意味著是搜尋條件name的值,為對應輸入框的值values.searchValue。在表單當中,輸入框的屬性label是getFieldDecorator('searchUser')。

  submit = (e) => {
e.preventDefault()
let { form, getStudentList } = this.props
let values = {}
form.validateFieldsAndScroll({ first: true },
((errors, value) => {
if (errors) {
message.error(getFormFirstErrorMsg(errors));
} else {
values = trimObjectValues(value);
switch (values.condition) {
case "name":
values.name = values.searchValue;
break;
case "className":
values.className = values.searchValue
break;
case "studentNo":
values.studentNo = values.searchValue
break;
default:
break;
}
getStudentList(params);
}
}))
}

3、最後,就是後端邏輯實現

@Data
public class Student {
private String name;
private String className;
private String sex;
}
public interface StudentMapper extends BaseMapper<Student> {}

這裡使用了Mybatis plus的ORM框架,可以直接使用lambda表示式的搜尋條件進行,因為搜尋條件搜尋,故而,需要用like的模糊搜尋,搜尋條件是name+"%",沒有兩邊都用"%",是因為若第一個模糊條件有索引的話,那麼"%"+name+"%"將會造成索引失效。

public List<Student> getStudents(Student reqVO) {
String name = reqVO.getName();
String className = reqVO.getClassName();
String sex = reqVO.getSex();
List<Student> students = studentMapper.selectList(
new QueryWrapper<Student>().lambda() .like(StringUtils.isNotEmpty(name),Student::getName,name+"%") .like(StringUtils.isNotEmpty(className),Student::getClassName,className+"%") .like(StringUtils.isNotEmpty(sex),Student::getSex,sex+"%") );
return students;
}