antd select多选_react 使用antd的多选功能做一个单选与全选效果
import React from 'react';
import { Table,Form,Input,Button,Popconfirm,Select} from'antd';
import LoadingMixin from'../../../libs/loading.common.mixin';
import RequestMixin from'../../../libs/request.mixin';
import NotificationMixin from'../../../libs/notification.mixin';
import Helper from'../../../libs/helper';
import ModalWrapper from'../../../libs/modalwrapper';
import'./index.css';
import AddOrUpdateModal from'./addorupdatemodal';
import BindUserModal from'./bindusermodal';
const FormItem=Form.Item;
const createForm=Form.create;
const Option=Select.Option;
let equipmentList=React.createClass({
mixins: [LoadingMixin,NotificationMixin,RequestMixin],
getInitialState(){return{
data: [],
pagination: {showQuickJumper:true,showTotal: total =>`共 ${total} 条`},
loading:false,
tableCompanyName:[],
param:[]
}
},
componentWillMount() {this.tableCompanyName();
},
tableCompanyName(){this.get({
url:"Api/lists/module/company/key/dac509bd90a82719a3569291e12c24a6f1af4bac",
param: {
},
noLoading:true}).then(result=>{
let companyName=result.result;
let companyMap=[]if(companyName==null||companyName.length==0){
companyMap=[]
}else{for(var i=0;i
companyMap[companyName[i].id]=companyName[i].title;
}
}this.setState({
tableCompanyName: companyMap,
},this.fetch)
});
},
fetch(pageNum= 1, pageSize = 10) {this.get({
url:"Api/lists/module/frame/key/dac509bd90a82719a3569291e12c24a6f1af4bac",
param: {
companyid:this.state.param.companyid ? this.state.param.companyid :'',
frameid:this.state.param.frameid ? this.state.param.frameid :'',
has_kinect:this.state.param.has_kinect ? this.state.param.has_kinect :'',
p: pageNum,
n: pageSize
},
noLoading:true}).then(result=>{
const pagination= this.state.pagination;
pagination.total=Number(result.count);
const tableList=result.result;
const tableCompanyName= this.state.tableCompanyName;
const companyMap=tableCompanyName;for (var i=0;i
tableList[i].has_kinect&& tableList[i].has_kinect == 0 ? tableList[i].has_kinect='普通':tableList[i].has_kinect='体感'
if(tableList[i].companyid){
tableList[i].title=companyMap[tableList[i].companyid]
}else{
tableList[i].title= ''}
}this.setState({
loading:false,
data: tableList||[],
pagination,
});
}).catch(e =>{
const pagination= this.state.pagination;
pagination.total= 0;this.setState({
loading:false,
data: [],
pagination,
})
});
},
handleSubmit(e) {var that = this;
e&&e.preventDefault();this.props.form.validateFieldsAndScroll((err, values) =>{if (!err) {
let params={}
params.companyid=values.companyid;
params.frameid=values.frameid;
params.has_kinect=values.has_kinect;//console.log("查询条件paramsparams",params);
this.setState({param: params},this.tableCompanyName);
}
});
},
handleReset(e) {
e&&e.preventDefault();this.props.form.resetFields();//this.searchQuery();
},
handleTableChange(pagination, filters, sorter) {
const pager= this.state.pagination;
pager.current=pagination.current;this.setState({
pagination: pager,
});this.fetch(pagination.current, pagination.pageSize);
},
handleClose(record) {var that = this;if (!record) return;this.post({
url:"Api/batchDelete/module/frame/key/dac509bd90a82719a3569291e12c24a6f1af4bac",
param: {
ids: record.id
},
noLoading:true}).then(result=>{if(result.result) {
that.success("操作成功");
that.fetch();
}
});
},//addOrUpdate(modal,e) {
//e && e.preventDefault() ;
//e && e.stopPropagation();
//console.log("this.state.tableCompanyName----------",this.state.tableCompanyName);
//new ModalWrapper(AddOrUpdateModal, "addOrUpdateModal", () => {
//this.fetch();
//}, null, {
//shopList:this.state.shopList,
//title: modal && modal.id ? '编辑设备' : '新增设备',
//item: modal && modal.id ? Helper.copyObject(modal) : {},
//isEdit: modal && modal.id ? true:false,
//tableCompanyName: modal && modal.id ? this.state.tableCompanyName:this.state.tableCompanyName,
//}).show();
//},
handleBindCache(modal,e) {
e&&e.preventDefault() ;
e&&e.stopPropagation();//console.log("modal---缓存管理--",modal);
new ModalWrapper(AddOrUpdateModal, "addOrUpdateModal", () =>{this.fetch();
},null, {shopList:this.state.shopList,title: '缓存管理',item: modal && modal.id ?Helper.copyObject(modal) : {}}).show();
},
handleBindUser(modal,e) {
e&&e.preventDefault() ;
e&&e.stopPropagation();//console.log("modal---人员管理--",modal);
new ModalWrapper(BindUserModal, "bindUserModal", () =>{this.fetch();
},null, {
shopList:this.state.shopList,
title:'人员管理',
item: modal&& modal.id ?Helper.copyObject(modal) : {}
}).show();
},
render() {
const { getFieldDecorator }= this.props.form;
let columns=[
{ title:'编号',dataIndex: 'id', key: 'id', width: '5%'},
{ title:'设备编码', dataIndex: 'frameid', key: 'frameid', width: '20%'},
{ title:'公司名称', dataIndex: 'title', key: '#2', width: '25%'},
{ title:'类型', dataIndex: 'has_kinect', key: 'has_kinect', width: '5%'},
{ title:'绑定上限', dataIndex: 'bind_limit', key: 'bind_limit', width: '5%'},
{ title:'备注', dataIndex: 'mark',key: 'mark', width: '15%'},
{ title:'操作', key: '#', width: '25%',
render: (text, record)=>{return(
缓存管理
人员管理
{/**/}
{/*删除*/}
{/**/}
)
}
}
];return(
设备管理
{
getFieldDecorator('frameid')(
)
}
{
getFieldDecorator('companyid',{
initialValue:this.state.param && this.state.param.companyid || '',
})(
--公司名称--
{this.state.tableCompanyName && this.state.tableCompanyName.map((item,key,index) =>{//console.log("-key.toString()--------",key.toString())
return( {item}
)
})
}
)
}
{
getFieldDecorator('has_kinect',{
initialValue:this.state.param && this.state.param.has_kinect || '',
})(
--请选择类型--
普通
体感
)
}
查询
{/*添加*/}
{/*重置*/}
columns={columns}
dataSource={this.state.data}
onChange={this.handleTableChange}
pagination={this.state.pagination}
scroll={{ y: 600}}
rowKey={(record) =>record.id}>
)
}
});
equipmentList=createForm()(equipmentList);
exportdefault equipmentList;