先上图：
实现这个回显有两种实现方式：
第一种：在java后台实现：
@Override
public Page<LogQueryVo> query( PageQueryParam<LogQueryDto> pageQueryParam,
String collegeId) {
if (StringUtils.isNotEmpty(collegeId)) {
collegeId = collegeId.replaceAll(" GLDWH ", " KKDWH ");
}
String yearTerm = pageQueryParam.getParam().getYearTerm();
//一进入查询主页按当前选课学年学期查询
if (yearTerm == "") {
String semester = courseHeatStatisticsMapper.getSemester(); // 查询选课学年学期
pageQueryParam.getParam().setYearTerm(semester); // 设置选课学年学期
}
// 分页和排序
PageHelper.startPage(pageQueryParam.getPageNo(), pageQueryParam.getPageSize());
List<LogQueryVo> logQueryVolist = logQueryMapper.select(pageQueryParam.getParam(), collegeId);
PageInfo<LogQueryVo> pageInfo = new PageInfo<LogQueryVo>(logQueryVolist);
Page<LogQueryVo> page = new Page<LogQueryVo>();
page.setTotal((int) pageInfo.getTotal());
page.setRows(pageInfo.getList());
return page;
}
显示学年学期只需要在前端发送一个请求就可以了。
但是这种做法可能效率比较低。
=============================================================================================
在前端处理显示当前的学年学期，然后每次改变学年学期下拉框时，再重新发送请求到后台查询数据，这样不用每次查询时都要在后台查询一次学年学期。
前端代码：
class ProcessLogQueryBox extends Component {
constructor(props) {
super(props);
this.state = {
display: 'block',
iconCX: 'caret-down',
yearTermList: [] , //学年学期下拉
yearTerm:'',
nowYearTerm:'' //默认选中当前学年学期
}
}
componentWillMount(){
//获取当前学年学期
post("/choose-course-manage-server/courseHeatStatistics/selectSemester").then((reData) => {
this.setState({
nowYearTerm:reData.data
})
this.props.modifySearchParam("yearTerm", reData.data)
this.onSearch();
});
}
//收缩查询条件
handleClickShow = () => {
if (this.state.display == 'block') {
this.setState({display: 'none', iconCX: 'caret-up'})
} else {
this.setState({display: 'block', iconCX: 'caret-down'})
}
}
//查询
onSearch=(val)=>{
this.props.onSearch(val);
}
//重置
reset = () => {
this.setState({
nowYearTerm:''
})
//清空表单中的数据的功能，不过本组件功能的实现因为是使用的子组件的表单在修改值onChange的时候就改了父组件的state，所以重置值需要在父组件的重置方法中加上searchParam:{},
this.props.form.resetFields();
//调用父组件的方法。使用this.props表示父组件的属性
this.props.resetSearchParam();
}
//获取学年学期下拉框
getYearTermList = () => {
CollegeGradeProAxios.getAcadYear(data => {
this.setState({yearTermList: data});
});
}
//渲染页面
render() {
const span = 6;
const formItemLayout = {
labelCol: {span: 8},
wrapperCol: {span: 16}
}
const {getFieldDecorator} = this.props.form;
return (
<div className="manage-main">
{/*======================================查询条件============================================*/}
<Form layout="inline" className="manage-form">
<Row gutter={24} className="manage-form-default">
<Col span={span}>
<FormItem {...formItemLayout} label="学年学期">
{getFieldDecorator('yearTerm',{initialValue:this.state.nowYearTerm})(
<ComSelect
showSearch
placeholder="请选择"
allowClear
optionFilterProp="children"
onChange={(value) => this.props.modifySearchParam("yearTerm", value)}
onFocus={this.getYearTermList}
>
{this.state.yearTermList.map(val =>
<Option key={val.acadYearSemester}>{val.acadYearSemester}</Option>
)}
</ComSelect>
)}
</FormItem>
</Col>
<Col span={span}>
<FormItem {...formItemLayout} label="学号">
{getFieldDecorator('stuNum')(
<Input
onChange={(e) => this.props.modifySearchParam("stuNum", e.target.value)}
/>
)}
</FormItem>
</Col>
<Col span={span}>
<FormItem {...formItemLayout} label="课程名称">
{getFieldDecorator('courseName')(
<Input
onChange={(e) => this.props.modifySearchParam("courseName", e.target.value)}
/>
)}
</FormItem>
</Col>
<Col span={span}>
<div className="manage-form-default-btn">
<Button type="primary" htmlType="submit"
onClick={this.onSearch}>查询</Button>
<Button htmlType="submit"
onClick={this.reset}>重置</Button>
<span onClick={() => this.setState({iconCX: !this.state.iconCX})}
className="manage-form-default-icon">
{this.state.iconCX ? '展开' : '收起'}
<Icon type={this.state.iconCX ? 'down' : 'up'}/>
</span>
</div>
</Col>
</Row>
<Row gutter={24} className="manage-form-bot"
style={{display: this.state.iconCX ? 'none' : 'block'}}>
<Col span={span}>
<FormItem {...formItemLayout} label="IP地址">
{getFieldDecorator('ipAddress')(
<Input
onChange={(e) => this.props.modifySearchParam("ipAddress", e.target.value)}
/>
)}
</FormItem>
</Col>
<Col span={span}>
<FormItem {...formItemLayout} label="第几志愿">
{getFieldDecorator('volunteerNum')(
<Input
onChange={(e) => this.props.modifySearchParam("volunteerNum", e.target.value)}
/>
)}
</FormItem>
</Col>
<Col span={span}>
<FormItem {...formItemLayout} label="选课方式">
{getFieldDecorator('electiveWay')(
<ComSelect placeholder="请选择"
allowClear
optionFilterProp="children"
onChange={(value) => this.props.modifySearchParam("electiveWay", value)}
>
<Option key={'0'}>抢选</Option>
<Option key={'1'}>筛选</Option>
<Option key={'2'}>志愿（体育）</Option>
</ComSelect>
)}
</FormItem>
</Col>
<Col span={span}>
<FormItem {...formItemLayout} label="是否跨校区选课">
{getFieldDecorator('crossCampus')(
<ComSelect placeholder="请选择"
allowClear
optionFilterProp="children"
onChange={(value) => this.props.modifySearchParam("crossCampus", value)}
>
<Option key={1} value="1">{"是"}</Option>
<Option key={0} value="0">{"否"}</Option>
</ComSelect>
)}
</FormItem>
</Col>
<Col span={span}>
<FormItem {...formItemLayout} label="是否跨专业选课">
{getFieldDecorator('crossProfessional')(
<ComSelect placeholder="请选择"
allowClear
optionFilterProp="children"
onChange={(value) => this.props.modifySearchParam("crossProfessional", value)}
>
<Option key={1}>{"是"}</Option>
<Option key={0}>{"否"}</Option>
</ComSelect>
)}
</FormItem>
</Col>
<Col span={span}>
<FormItem {...formItemLayout} label="选课成功标志">
{getFieldDecorator('successFlag')(
<ComSelect placeholder="请选择"
allowClear
optionFilterProp="children"
onChange={(value) => this.props.modifySearchParam("successFlag", value)}
>
<Option key={1}>{"退选"}</Option>
<Option key={2}>{"失败"}</Option>
<Option key={3}>{"待筛选"}</Option>
<Option key={4}>{"已选"}</Option>
</ComSelect>
)}
</FormItem>
</Col>
</Row>
</Form>
</div>
)
}
}
const ProcessLogQueryBoxForm = Form.create()(ProcessLogQueryBox);
export default ProcessLogQueryBoxForm