Skip to content

H
H5Public
提交 f5908a97 authored 作者: 周盛's avatar 周盛
浏览文件
操作

Filter优化

上级 cf39cd4a
隐藏空白字符变更
内嵌 并排
正在显示 包含 133 行增加 和 52 行删除
HighStateComponent/Filter/apiConfig.js
浏览文件 @ f5908a97
export default {
// 业务处理接口
APPLYRECORD: '/TrainStationApplyApi/getPage', // 申请记录
HANDLEAPPLY:'TrainStationApplyApi/cancelApply', // 完成办理但不开放领取 ids cancelStatusKey=1 完成办理并开放领取cancelStatusKey=2
HANDLERECORD: '/TrainStationApplyApi/getPage', // 办理记录
OPENRECEIVE: '/TrainStationApplyApi/openReceive', // 开放领取 ids cancelStatusKey =2
// 查询接口
GETGRADELIST: '/CommonApi/getGradeList', // 获取年级
GETINSTITUTION: '/InstitutionApi/queryAllInstitution', // 获取院系
GETMAJOR:'/MajorApi/queryMajorByInstitutionId', // 获取专业 institutionId
GETCLAZZLIST:'/ClazzApi/queryClazzByInstitutionIdAndMajorId' //获取班级 gradeId: majorId:
GETMAJORBYIDS: '/MajorApi/queryMajorByInstitutionIds', // 通过ids 获取专业
GETCLAZZLIST:'/ClazzApi/queryClazzByInstitutionIdAndMajorId', //获取班级 gradeId: majorId:
GETCLAZZLISTBYIDS: '/ClazzApi/queryClazzByMajorIds', // 通过ids 获取专业
}
\ No newline at end of file
HighStateComponent/Filter/index.js
浏览文件 @ f5908a97
......@@ -7,20 +7,20 @@ import PropTypes from 'prop-types';
const queryOptions = async() => {
const gradeList = await getWebInfo({},api.GETGRADELIST);
const institutionList = await getWebInfo({},api.GETINSTITUTION);
return {
gradeList,
institutionList,
}
}
export default class Filter extends React.Component{
constructor(props){
super(props);
this.state ={
role: 2,
inputValue:'',
formValues: {
institutionIds: [],
majorIds:[],
clazzIds: [],
},
options: {
......@@ -34,25 +34,69 @@ export default class Filter extends React.Component{
componentDidMount() {
this.fetchOptions();
this.fetchRoleType();
}
// 获取角色类型信息
fetchRoleType = async() => {
const res = await getMobileInfo({},'/CommonApi/currentUser');
if(res && !res.errCode) {
const { options } = this.state;
var role = res.type;
options.institutionList = res.institutionModelList.map(i=> ({key: i.name,value: i.id}));
if(role === 0) {
this.setState({
role,
options
})
}
}
}
// 获取年级和系列表
// 获取 key value
fetchOptions = async() => {
const res = await queryOptions();
if(!res || !res.gradeList || !res.institutionList) return false;
if(!res || !res.gradeList) return false;
const gradeList = res.gradeList.map(i=> ({key: i.name,value: i.id}));
const institutionList = res.institutionList.map(i=> ({key: i.fullName,value: i.id}));
this.setState({
options: {
gradeList,
institutionList,
institutionList: [],
majorList:[],
clazzList: [],
}
})
}
// 获取专业
fetchMajorList = (params={}) => {
const { options } = this.state;
getWebInfo(params,api.GETMAJOR).then(res=> {
if(res && !res.errCode) {
const majorList = res.map(i=> ({key: i.name,value: i.id}));
options.majorList = majorList;
this.setState({
options
})
}
})
}
// 通过系ids获取专业
fetchMajorListByIds = (params={}) => {
const { options } = this.state;
getWebInfo(params,api.GETMAJORBYIDS).then(res=> {
if(res && !res.errCode) {
const majorList = res.map(i=> ({key: i.name,value: i.id}));
options.majorList = majorList;
this.setState({
options
})
}
})
}
// 获取班级列表
fetchClazzList = (params={}) => {
const { options } = this.state;
......@@ -67,13 +111,13 @@ export default class Filter extends React.Component{
})
}
// 获取专业列表
fetchMajorList = (params={}) => {
// 通过专业ids获取班级列表
fetchClazzListByIds = (params={}) => {
const { options } = this.state;
getWebInfo(params,api.GETMAJOR).then(res=> {
getWebInfo(params,api.GETCLAZZLISTBYIDS).then(res=> {
if(res && !res.errCode) {
const majorList = res.map(i=> ({key: i.name,value: i.id}));
options.majorList = majorList;
const clazzList = res.map(i=> ({key: i.fullName,value: i.id}));
options.clazzList = clazzList;
this.setState({
options
})
......@@ -81,12 +125,11 @@ export default class Filter extends React.Component{
})
}
// 选择时处理函数
// 搜索条件变化处理
formChange = (key,value) => {
let { formValues } = this.state;
let { formValues , role } = this.state;
// 判断是否第二次取消
if(key === 'clazzIds') {
if(key === 'clazzIds' || key === 'institutionIds' || key === 'majorIds') {
if(formValues[key].indexOf(value) !== -1){
formValues[key] = formValues[key].filter(i=> i!==value);
}
......@@ -99,23 +142,19 @@ export default class Filter extends React.Component{
else formValues[key]= value;
}
// 年级变化时
if(key === 'gradeId') {
delete formValues.institutionId;
delete formValues.majorId
formValues.clazzIds=[];
formValues.majorIds = [];
formValues.clazzIds= [];
}
// 专业变化时
if(key === 'institutionId') {
this.fetchMajorList({institutionId:value});
delete formValues.majorId
if(key === 'institutionIds') {
this.fetchMajorListByIds({institutionIds:formValues.institutionIds.join(',')});
formValues.majorIds = [];
formValues.clazzIds = [];
}
// 专业变化时
if(key === 'majorId') {
this.fetchClazzList({institutionId: formValues.institutionId, majorId: value,gradeId: formValues.gradeId});
if(key === 'majorIds') {
this.fetchClazzListByIds({majorIds: formValues.majorIds.join(',')});
formValues.clazzIds = [];
}
......@@ -124,17 +163,17 @@ export default class Filter extends React.Component{
})
}
// 学号/姓名 输入处理
// 搜索框输入处理
inputChange = (e) => {
const { formValues } = this.state;
var value = Number(e.target.value);
if(isNaN(value)){
formValues.name = e.target.value;
if(formValues.studentNo) delete formVlaues.studentNo;
if(formValues.studentNo) delete formValues.studentNo;
}
else{
formValues.studentNo = value;
if(formValues.name) delete formVlaues.name;
if(formValues.name) delete formValues.name;
}
this.setState({
......@@ -143,13 +182,12 @@ export default class Filter extends React.Component{
})
}
// 选择列表状态生成
// 搜索条件DOM生成
generateItem = (keyName,dataList) => {
const { formValues } = this.state;
// 判断是否选中
// 判断类名
const isSelect =(value) => {
if(keyName === 'clazzIds') {
if(keyName === 'institutionIds' || keyName === 'majorIds' || keyName === 'clazzIds') {
if(formValues[keyName].indexOf(value) !== -1) return true;
}
else if(formValues[keyName] === value){
......@@ -162,7 +200,7 @@ export default class Filter extends React.Component{
{dataList.map(i=> (
<div className={isSelect(i.value)? 'cusLabelFocus' : 'cusLabel'}
key={i.value}
onTouchStart={() => this.formChange(keyName,i.value)} >{i.key}</div>))
onClick={() => this.formChange(keyName,i.value)} >{i.key}</div>))
}
</div>
)
......@@ -171,23 +209,69 @@ export default class Filter extends React.Component{
// 搜索处理
search = () =>{
const { formValues } = this.state;
const clazzIds = formValues.clazzIds.join(',');
this.props.getPage({...formValues,clazzIds});
const temp = {...formValues};
// 判断系是否为空
if(formValues.institutionIds.length !== 0){
temp.institutionIds = formValues.institutionIds.join(',');
}
else {
delete temp.institutionIds;
}
// 判断专业是否为空
if(formValues.majorIds.length !== 0){
temp.majorIds = formValues.majorIds.join(',');
}
else {
delete temp.majorIds;
}
// 判断班级是否为空
if(formValues.clazzIds.length !== 0){
temp.clazzIds = formValues.clazzIds.join(',');
}
else {
delete temp.clazzIds;
}
this.props.getPage({...temp});
this.props.Toggle && this.props.Toggle();
}
// 重置搜索条件
reset =() => {
this.setState({
formValues: {
institutionIds: [],
majorIds:[],
clazzIds: [],
}
})
}
render(){
// 生成选择
createSelect = () => {
const { gradeList, institutionList, majorList, clazzList } = this.state.options;
const { gradeId, institutionId , majorId } = this.state.formValues;
const { gradeId, institutionIds , majorIds } = this.state.formValues;
const { role } = this.state;
if(role === 0){
return (
<>
<p style={{color: '#666666'}}>年级选择</p>
{this.generateItem('gradeId',gradeList)}
{ gradeId ? (<><p style={{color: '#666666'}}>学院选择</p>
{this.generateItem('institutionIds',institutionList)}</>) : null}
{ institutionIds.length ? (<><p style={{color: '#666666'}}>专业选择</p>
{this.generateItem('majorIds',majorList)}</>) : null}
{ majorIds.length ? <><p style={{color: '#666666'}}>班级选择</p>
{this.generateItem('clazzIds',clazzList)}</> : null }
</>
)
}
return null;
}
render(){
return (
<div className='siderBar'>
<div className='searchBox'>
......@@ -203,19 +287,12 @@ export default class Filter extends React.Component{
<div className='mainContent'>
<WhiteSpace size='lg'/>
<WingBlank size='lg'>
<p style={{color: '#666666'}}>年级选择</p>
{this.generateItem('gradeId',gradeList)}
{ gradeId ? (<><p style={{color: '#666666'}}>学院选择</p>
{this.generateItem('institutionId',institutionList)}</>) : null}
{ institutionId ? (<><p style={{color: '#666666'}}>专业选择</p>
{this.generateItem('majorId',majorList)}</>) : null}
{ majorId? <><p style={{color: '#666666'}}>班级选择</p>
{this.generateItem('clazzIds',clazzList)}</> : null }
{this.createSelect()}
</WingBlank>
</div>
<div className='buttonBox'>
<div onTouchStart={this.reset}>重置</div>
<div onTouchStart={this.search}>确定</div>
<div onClick={this.reset}>重置</div>
<div onClick={this.search}>确定</div>
</div>
</div>
)
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论