极客观点
项目管理
HarmonyOS
import React, { Component } from 'react';
import SearchList from './SearchList/SearchList';
import {Select ,Row, Col,Button,Icon,Input,Form,DatePicker,Table} from 'antd';
const FormItem=Form.Item;
import './search.css';
import '../../styles/antd.css'
const Option = Select.Option;
import moment from 'moment';
const RangePicker = DatePicker.RangePicker;
import {appHistory} from '../app';
import { getStore } from '../../base/common-func';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import * as Actions from '../../actions/customer-management';
// 搜索列表
class SearchComponent extends Component{
constructor(props, context){
super(props, context);
this.state={
secondChannels:[],
thirdChannels:[],
}
this.FirstChange = this.FirstChange.bind(this);
this.SecondChange = this.SecondChange.bind(this);
this.onChange=this.onChange.bind(this);
}
onChange=(dates, dateStrings)=> {
console.log('From: ', dates[0], ', to: ', dates[1]);
console.log('From: ', dateStrings[0], ', to: ', dateStrings[1]);
}
handleReset=()=>{
this.props.form.resetFields();
}
FirstChange(value) {
var id=parseInt(value);
var channel2List = [];
var {oneChannel} = this.props.customerManagement;
oneChannel.forEach(function(element) {
if(element.parentId == id){
channel2List.push(element);
}
}, this);
this.setState({secondChannels:channel2List});
console.log(`selected ${value}`);
}
SecondChange(value) {
var id=parseInt(value);
var channel2List = [];
var {oneChannel} = this.props.customerManagement;
oneChannel.forEach(function(element) {
if(element.parentId == id){
channel2List.push(element);
}
}, this);
this.setState({thirdChannels:channel2List});
console.log(`selected ${value}`);
}
handelChannel(){
var {oneChannel} = this.props.customerManagement;
var array =[];
oneChannel.forEach(function(element) {
if(element.level == 0){
array.push(element);
}
}, this);
return array;
}
componentDidMount(){
//this.props.actions._getDataForCustomerManag();
this.props.actions._getCarType();
this.props.actions. _getGuestStatus();
this.props.actions._getIntention();
this.props.actions._getGuestStatus();
this.props.actions._getOneChannel();
this.props.actions._getElectricity();
}
handleSearch = (e) => {
e.preventDefault();
this.props.form.validateFields((err, values) => {
console.log('Received values of form: ', values);
});
}
getCarType(){
this.props.actions._getCarType();
}
getElectricity(){
this.props.actions._getElectricity();
}
getGuestStatus(){
this.props.actions. _getGuestStatus();
}
getIntention(){
this.props.actions._getIntention();
}
getOneChannel(){
this.props.actions._getOneChannel();
}
getOptionsView(list){
var { languageType } = this.props.common;
return list.map(v=><Option key={v.id}>{languageType == 'zh_cn'?v.nameCn:v.nameEn}</Option>);
}
getOptionsView2(list){
var { languageType } = this.props.common;
return list.map(v=><Option key={v.id}>{languageType == 'zh_cn'?v.nameCn:v.nameEn}</Option>);
}
getOptionsGuestView(list){
var { languageType } = this.props.common;
return list.map(v=><Option key={v.id}>{languageType == 'zh_cn'?v.valueCn:v.valueEn}</Option>);
}
render(){
var {carTypes,guestStatus,intention,oneChannel,electricity} = this.props.customerManagement;
var {secondChannels,thirdChannels}=this.state;
var channel=this.handelChannel();
var {Beginning_and_ending_time,begin_end_Check} =this.props.common.languageKeyMap;
return(
<div className="wrapper-search">
{/*高级搜索标题*/}
<Row>
<Col span={2} className="search_title" style={{fontWeight:"bold"}}>高级搜索</Col>
<Col span={22}><div className="line"></div></Col>
</Row>
{/*搜索的条件和搜索列表*/}
<div style={{marginTop:20 }}>
<Form className="ant-advanced-search-form"
onSubmit={this.handleSearch}>
<Row style={{marginLeft:120}} >
<Col span={2}>
<FormItem label="意向车型:" style={{fontSize:12,color:'black'
}}>
</FormItem>
</Col>
<Col span={5}>
<Select defaultValue="0" style={{width:160}} onChange={this.handleChange} >
<Option value="0" style="font-weight:bold">请选择</Option>
{this.getOptionsView(carTypes)}
</Select>
</Col>
<Col span={2}>
<FormItem label="潜客状态:">
</FormItem>
</Col>
<Col span={6}>
<Select defaultValue="0" style={{width:160}} onChange={this.handleChange} >
<Option value="0" style="font-weight:bold">请选择</Option>
{this.getOptionsGuestView(guestStatus)}
</Select>
</Col>
<Col span={2}>
<FormItem label="意向级别:">
</FormItem>
</Col>
<Col span={7}style={{paddingLeft:8}}>
<Select defaultValue="0" style={{width:160}} onChange={this.handleChange} >
<Option value="0" style="font-weight:bold">请选择</Option>
{this.getOptionsGuestView(intention)}
</Select>
</Col>
</Row>
<div>
<Row style={{marginLeft:120}} >
<Col span={2}>
<FormItem label="一级渠道:">
</FormItem>
</Col>
<Col span={5}>
<Select defaultValue="0" style={{width:160}} onChange={this.FirstChange} onSelect={this.handeSelect} >
<Option value="0" style="font-weight:bold">请选择</Option>
{this.getOptionsView(channel)}
</Select>
</Col>
<Col span={2}>
<FormItem label="二级渠道:">
</FormItem>
</Col>
<Col span={6}>
<Select defaultValue="0" style={{width:160}} onChange={this.SecondChange}>
<Option value="0" style="font-weight:bold">请选择</Option>
{this.getOptionsView2(secondChannels)}
</Select>
</Col>
<Col span={2}>
<FormItem label="三级渠道:">
</FormItem>
</Col>
<Col span={7} style={{paddingLeft:8}}>
<Select defaultValue="0" style={{width:160}} onChange={this.handleChange} >
<Option value="0" style="font-weight:bold">请选择</Option>
{this.getOptionsView2(thirdChannels)}
</Select>
</Col>
</Row>
</div>
<div>
<Row style={{marginLeft:120}} >
<Col span={2}>
<FormItem label="时间条件:">
</FormItem>
</Col>
<Col span={5}>
<Select defaultValue="0" style={{width:160}} onChange={this.handleChange} >
<Option value="0" style="font-weight:bold">请选择</Option>
<Option value="jack">{Beginning_and_ending_time}</Option>
<Option value="lucy">{begin_end_Check}</Option>
<Option value="disabled" disabled>Disabled</Option>
<Option value="Yiminghe">yiminghe</Option>
</Select>
</Col>
<Col span={2}>
<FormItem label="起止时间:">
</FormItem>
</Col>
<Col span={6} >
<RangePicker
style={{width:160}}
placeholder={{placeholder:""}}
ranges={{ Today: [moment(), moment()], 'This Month': [moment(), moment().endOf('month')] }}
showTime
format="YYYY/MM/DD HH:mm:ss"
onChange={this.onChange}
/>
</Col>
<Col span={2}>
<FormItem label="PMP电销专员:">
</FormItem>
</Col>
<Col span={7} style={{paddingLeft:8}}>
<Select defaultValue="0" style={{width:160}} onChange={this.handleChange} >
<Option value="0" style="font-weight:bold">请选择</Option>
<Option value="jack">Jack</Option>
<Option value="lucy">Lucy</Option>
<Option value="disabled" disabled>Disabled</Option>
<Option value="Yiminghe">yiminghe</Option>
</Select>
</Col>
</Row>
</div>
<Row style={{marginLeft:120}}>
<Col span={2}>
<FormItem label="PMP电销顾问:">
</FormItem>
</Col>
<Col span={8}style={{paddingLeft:8}}>
<Select defaultValue="0" style={{width:160}} onChange={this.handleChange} >
<Option value="0" style="font-weight:bold">请选择</Option>
{this.getOptionsView(electricity)}
</Select>
</Col>
</Row>
</Form>
<Row style={{marginRight:6}}>
<Col span={24} style={{ textAlign: 'right' }}>
<Button style={{ marginRight: 30 }} onClick={this.handleReset} >
重置
</Button>
<Button style={{marginRight: 5}} className="btn btn-success">搜索</Button>
</Col>
</Row>
<Row >
<div style={{marginTop:8,paddingBottom:30}}>
<Col span={2} className="search_title" >搜索结果</Col>
<Col span={22}><div className="line"></div></Col>
</div>
</Row>
<Row style={{padding:5}}>
<Col span={2} className='num' >
数量:num
</Col>
<Col span={22} style={{ textAlign: 'right' }}>
<div style={{marginRight:5}}>
<Button style={{marginRight:30}}>导入</Button>
<Button style={{marginRight:30}}>导出</Button>
<Button style={{marginRight:30}}>分派 PMP 电销专员</Button>
<Button >分派 PMP 电销顾问</Button>
</div>
</Col>
</Row>
<Row style={{marginTop:10,textAlign:"center"}}>
<SearchList/>
</Row>
</div>
<div>
</div>
</div>
)
}
}
SearchComponent.propTypes = {}
SearchComponent.defaultProps = {}
export default connect(
state => ({ customerManagement: state.customerManagement,common:state.common }),
dispatch => ({ actions: bindActionCreators(Actions, dispatch) })
)(SearchComponent)
这里的重置按钮的逻辑是怎么样的
阅读 4.7k
撰写回答
你尚未登录，登录后可以
- 和开发者交流问题的细节
- 关注并接收问题和回答的更新提醒
- 参与内容的编辑和改进，让解决方法与时俱进
推荐问题
Next.js做纯前端是否可行？
最近在学习Next.js存在一个疑问，如果只需要做前端界面的渲染和交互后端逻辑都用java来做，是否还需要使用Next.js，还是说直接使用React+Tailwind css更好4 回答1.8k 阅读
请问，是否可以设定Table的宽度，或者不让其超过父容器呢？
我写了一个可编辑Cell的List： {代码...} 使用方式： {代码...} 现在的问题是，比如：内容过长会直接冲出父容器：请问，是否可以设定Table的宽度，或者不让其超过父容器呢？2 回答1.2k 阅读✓ 已解决
如何处理 npm 包依赖的依赖？
dependencies、devDependencies 还是 peerDependencies? dependencies 用户在使用我的包时，会自动安装 b，但是其实不需要安装b。peerDependencies 要求用户的项目中安装了 b , devDependencies 在 npm i 时，不会自动，符合我的期望，但是我发现 npm 上很多开发者没有把依赖安装到 devDependencies，而是 dependencies...1 回答1.1k 阅读✓ 已解决
如何在React中阻止子组件手势穿透父组件？
在嵌套组件中，子组件的点击事件会触发父组件的相同手势。例如，子组件是一个按钮，父组件是一个可点击的卡片，点击按钮时卡片的点击事件也会触发。如何实现仅子组件响应手势，阻止事件传递到父组件？4 回答1.6k 阅读
对于git的使用不解，还望解答，万分感谢！？
有几点疑问：1、比如远程上有n个分支，我在pull的时候如何才能更新哪个分支的内容呢？2、还是说n各分支都可以各自更新，最后汇总到master，我只需要pull master分支就好，但是这样会不会出现另一个问题，就是自己修改的文件，别人同时也在修改，这样再汇总master的时候就会有冲突，又如何知道谁的代码是最终的？3、看到...1 回答795 阅读✓ 已解决
next.js ssr编写组件的正确姿势？
非专业前端，既要用服务端渲染，又要用状态管理事件处理的问题。next.js服务端组件，react相关的钩子函数，状态管理，全局状态管理，事件处理全不能用。要用到事件处理，状态管理的话只能用客户端组件吗？那又要ssr利于seo怎么搞呢？我想的是页面主要内容用ssr生成，需要处理事件，状态的组件只能包装一个客户端组件，在...2 回答984 阅读✓ 已解决
请问 react 什么情况下你会将组件分到一个文件中，什么情况组件写在同一个文件中？
react 的官方文档提倡及时分组件， 但是没有提到什么情况将组件独立到文件中，你是怎么操作的？2 回答1.1k 阅读
resetFields ：重置一组输入控件的值（为 initialValue）与状态，如不传入参数，则重置所有组件 。