先上圖：
實現這個回顯有兩種實現方式：
第一種：在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