import React, { PureComponent } from 'react';
import { Select, Button, Icon } from 'antd';
import { withRouter } from 'umi';
import Search from 'src/components/common/Search';
import { filterOption } from 'src/utils/util.js';
const { Option } = Select;
class Operate extends PureComponent {
constructor(props) {
super(props);
this.state = {
searchParam: {},
dataList: [
{
id:'',
name:'',
age:'',
}
]
};
}
componentDidMount() {
}
searchForm = () => {
const regionList=[
{name:'手持估重仪',code:'470100030001'},
{name:'弥雾机',code:'460400190001'},
{name:'公猪牵引车',code:'460100060001'},
{name:'电动捡猪车',code:'460100040003'},
{name:'平房板下清粪机器',code:'460100020002'},
]
const companyList =[
{name:'设备正常',code:'0'},
{name:'部分故障',code:'1'},
{name:'全部故障',code:'2'},
{name:'不清楚状态',code:'3'},
]
const formItem = [
{
key: 'fregionCode',
width: '295px',
label: '设备名称',
component: (
<Select
showSearch
mode="multiple"
filterOption={filterOption}
maxTagCount={1}
onChange={(value) => {
this.getAllCompanyList(value.toString());
}}
>
{regionList.map((item) => {
return (
<Option value={item.code} key={item.code} label={item.name}>
{item.name}
</Option>
);
})}
</Select>
),
},
{
key: '设备状态',
width: '295px',
label: '子公司',
component: (
<Select
showSearch
mode="multiple"
filterOption={filterOption}
maxTagCount={1}
allowClear={true}
>
{companyList.map((item) => {
return (
<Option
value={item.code}
key={item.code}
>
{item.name}
</Option>
);
})}
</Select>
),
},
];
return (
<Search
formItem={formItem}
searchHandler={(searchParam) => {
this.setState(
{
searchParam,
},
() => this.getTableData(),
);
}}
/>
);
};
changeFields = ({ name, value, i }) => {
const { dataList } = this.state
let newDataList = JSON.parse(JSON.stringify(dataList))
newDataList[i][name] = value
this.setState({
dataList: newDataList
})
}
handelAddItem = () => {
const { dataList } = this.state
let newDataList = JSON.parse(JSON.stringify(dataList))
newDataList.push( {
id:'',
name:'',
age:'',
})
this.setState({
dataList: newDataList
})
}
testDom = ()=> {
const { dataList } = this.state
return (
<div>
{
dataList.map((item,i)=>{
return (
<div>
id:<input value={item.id} onChange={({target:{value}})=>{
this.changeFields({name:'id',value,i:i})
}}/>
name:<input value={item.name} value={item.name}
onChange={({target:{value}})=>{
this.changeFields({name:'name',value,i:i})
}}
/>
age<input value={item.age} value={item.age}
onChange={({target:{value}})=>{
this.changeFields({name:'age',value,i:i})
}}
/>
</div>
)
})
}
<Button onClick={this.handelAddItem}>点击添加</Button>
<Button onClick={()=>{
console.log(this.state.dataList);
}}>查看state</Button>
</div>
)
}
render() {
return (
<div>
{this.searchForm()}
{this.testDom()}
</div>
);
}
}
export default withRouter(Operate);
复杂页面处理
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
- 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
推荐阅读更多精彩内容
- StatusView Android 空页面|错误页面|加载中页面处理,支持所有的布局,使用简单方便 使用步骤 1...
- 在开发时经常会遇到底部输入框的需求, 比如聊天界面, 评论, 直播弹幕等等, 但是在微信小程序内存在一个问题, 在...
- tableView是常用的控件,在没有数据的时候显示一片空白并不美观,应当对此情况进行处理。在项目中长期实践得出的...