React ant design Checkbox多選框
後臺資料
import React, { Component } from 'react';
import { Input,Divider,Form,Button ,Checkbox,message} from 'antd';
import { Netx } from '../../MyApi'
// import { set } from 'mobx';
const CheckboxGroup = Checkbox.Group;
const FormItem = Form.Item;
class editSalesman extends Component {
constructor(props) {
super(props);
this.state = {
obj:this.props.editObj,
checkedList:this.props.editObj.access_id,//選中的那些
checkedAll:[],
checkAll: false,
data:[
{
id:1,
desc:"我的訂單",
name:"myOrder",
indeterminate:false,
child:[
{id:1,label:"新訂單",value:1},
{id:2,label:"待付款",value:2},
{id:3,label:"待收貨",value:3},
{id:4,label:"待評價",value:4},
{id:5,label:"全部訂單",value:5},
]
},{
id:2,
desc:"許可權管理",
name:"jurisdiction",
indeterminate:false,
child:[
{id:6,label:"門市資訊",value:6},
{id:7,label:"收貨地址",value:7},
{id:8,label:"意見反饋",value:8},
{id:9,label:"操作員管理",value:9},
{id:10,label:"編號管理",value:10},
]
}
]
}
}
componentWillReceiveProps(nextProps){
this.setState({
obj:nextProps.editObj,
checkedList:nextProps.editObj.access_id
})
}
//編輯儲存
handleSubmit=(e)=>{
e.preventDefault();
this.props.form.validateFields((err, values) => {
if (!err) {
console.info("form物件:"+JSON.stringify(values))
if(values.pwd===undefined){
values.pwd=''
message.error("密碼不能為空")
return false;
}
if(values.status===true){
values.status=1
}else{
values.status=0;
}
console.info(this.state.checkedAll)
values.id=1;
this.state.checkedAll
values.access_id=this.state.checkedAll
console.info("發給伺服器的物件:"+JSON.stringify(values))
// this.qr_add_staff(values)
}
if(this.props.form.getFieldValue("name")==''){
message.error("登入名不能為空")
return false;
}
if(this.props.form.getFieldValue("nickname")==''){
message.error("操作員不能為空")
return false;
}
if(this.props.form.getFieldValue("pwd")==''){
message.error("密碼不能為空")
return false;
}
this.props.close();
})
}
//儲存___傳送給伺服器
async qr_add_staff(obj){
// let qr_add_staff =Netx.qr_add_staff(obj);
// if(qr_add_staff.status==1){//成功的標記
// message.success(qr_add_staff.info.tips);
// //返回的修改的操作員資訊
// console.log(`返回的修改的操作員資訊${qr_add_staff.data.vo}`)
// }else{//失敗的標記
// message.error(qr_add_staff.info.tips);
// }
}
onChange(index,checkedList) {
// console.log("選中的"+checkedList)
// console.log(`物件的索引`+index)
let dataList = this.state.data;
let arr=[];
for(var j=0;j<dataList[index].child.length;j++){
arr.push(dataList[index].child[j].value)
}
let flag= this.containAnotherArr(checkedList,arr)
if(flag){
dataList[index].indeterminate=true
}else{
dataList[index].indeterminate=false
}
this.setState({
checkedList,
checkedAll:checkedList,
// data:dataList
});
}
//檢測陣列是否包含另一個數組
containAnotherArr(aa,bb){
if(!(aa instanceof Array)||!(bb instanceof Array)||((aa.length < bb.length))){
return false;
}
var aaStr = aa.toString();
for (var i = 0 ;i < bb.length;i++) {
if(aaStr.indexOf(bb[i]) < 0) return false;
}
return true;
}
onCheckAllChange(index,e){
// let flag= this.state.data[index].indeterminate
let flag=e.target.checked//檢視全選是否選中的值
let data=this.state.data;//拿到物件
data[index]['indeterminate']=flag;//根據是否選中設定相應的屬性
var arr =[];//空陣列
if(flag){//如果是真的
let list =this.state.data[index].child//迴圈遍歷屬性為陣列的子選項
for(var i=0;i<list.length;i++){
let value= list[i].value
arr.push(value);//放到新數組裡
}
for(var n=0;n<this.state.checkedAll.length;n++){//迴圈遍歷陣列
arr.push(this.state.checkedAll[n])
}
this.setState({checkedAll:arr,checkedList:arr,data:data,})
}else{
let list =this.state.data[index].child
var arr2=[];
arr2=this.state.checkedAll
for(var s=0;s<list.length;s++){
var index = arr2.indexOf(list[s].value);
arr2.splice(index, 1);
}
this.setState({
checkedList:arr2,
checkedAll:arr2,
data:data,
});
}
}
//點選取消
cancel(){
this.props.form.resetFields();
this.props.close();
}
render() {
const { getFieldDecorator } = this.props.form;
return (
<div style={{padding: '20px'}}>
<Form onSubmit={this.handleSubmit}>
<FormItem>
</FormItem>
<FormItem
label="登入名"
labelCol={{ span: 5 }}
wrapperCol={{ span: 12 }}
>
{getFieldDecorator('name',{initialValue:this.state.obj.name},{
rules: [{ required: true, message: '請輸入登入員名!' }],
})(
<Input placeholder="請輸入登入員名"/>
)}
</FormItem>
<FormItem
label="操作員:"
labelCol={{ span: 5 }}
wrapperCol={{ span: 12 }}
>
{getFieldDecorator('nickname',{initialValue:this.state.obj.nickname}, {
rules: [{ required: true, message: '請輸入操作員姓名' }],
})(
<Input placeholder="請輸入操作員姓名"/>
)}
</FormItem>
<FormItem
label="密碼:"
labelCol={{ span: 5 }}
wrapperCol={{ span: 12 }}
>
{getFieldDecorator('pwd',{initialValue:this.state.obj.pwd},{
rules: [{ required: true, message: '請輸入密碼!' }],
})(
<Input placeholder="請輸入密碼"/>
)}
</FormItem>
<Divider dashed={true} orientation="left" style={{ width: '100%' }}>許可權分配</Divider>
{
this.state.data.map((info,index)=>
<div key={index}>
<Checkbox
onChange={this.onCheckAllChange.bind(this,index)}
checked={info.indeterminate}
>
{info.desc}
</Checkbox>
<CheckboxGroup style={{marginLeft:'20px',marginTop:'20px'}} options={info.child} value={this.state.checkedList} onChange={this.onChange.bind(this,index)} />
<Divider></Divider>
</div>
)
}
<FormItem
style={{marginLeft:'126px'}}
labelCol={{ span: 5 }}
wrapperCol={{ span: 12 }}
>
{getFieldDecorator('status',{ valuePropName: 'checked' })(
<Checkbox >
啟用
</Checkbox>
)}
<Button type="primary" htmlType="submit">
儲存
</Button>
<Button type="primary" style={{marginLeft:'8px'}} onClick={this.cancel.bind(this)}>
取消
</Button>
</FormItem>
</Form>
</div>
)
}
}
export default editSalesman = Form.create()(editSalesman);