import React, { Component } from 'react'
import { Input, Divider, Checkbox,Form,Button,message,Modal} from 'antd';
import Mobx from './../mobx/index';
import { observer } from 'mobx-react';
import { Netx } from '../../MyApi'
const CheckboxGroup = Checkbox.Group;
const FormItem = Form.Item;
@observer
class NewSalesman extends Component {
constructor(props) {
super(props);
this.Mobx= Mobx.testStore;
this.state={
checkList:[]
}
}
//新增业务员
handleSubmit=(e)=>{
e.preventDefault();
this.props.form.validateFields((err, values) => {
if (!err) {
if(values.status===true){
values.status=1
}else{
values.status=0;
}
values.id=this.Mobx.operator.id;
values.access_id=Array.from(new Set(this.Mobx.operator.access_id));
this.qr_add_staff(values)
}
})
}
//保存___发送给服务器
async qr_add_staff(obj){
let qr_add_staff =await Netx.qr_add_staff(obj);
if(qr_add_staff.status===1){//成功的标记
message.success(qr_add_staff.info.tips);
this.props.form.resetFields();
this.Mobx.ResetOperator();
let shuju=this.Mobx.jurisdiction
for(var i=0;i<shuju.length;i++){
shuju[i].indeterminate=false
}
this.props.camel();
}else{//失败的标记
message.error(qr_add_staff.info.tips);
}
this.props.refresh();
}
onChange(index,checkedList) {
let dataList = this.Mobx.jurisdiction;
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.Mobx.AlterJurisdiction(dataList);
this.Mobx.AlterOperator('access_id', Array.from(new Set(checkedList)));
this.Mobx.AlterOperator('checkedAll', Array.from(new Set(checkedList)));
}
//检测数组是否包含另一个数组
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=e.target.checked;
let data=this.Mobx.jurisdiction;
data[index]['indeterminate']=flag;
let arr=[];
if(flag){
let list =this.Mobx.jurisdiction[index].child
for(var i=0;i<list.length;i++){
let value= list[i].value
arr.push(value);//放到新数组里
}
for(var n=0;n<this.Mobx.operator.checkedAll.length;n++){
arr.push(this.Mobx.operator.checkedAll[n])
}
this.Mobx.AlterOperator('checkedAll',Array.from(new Set(arr)));
this.Mobx.AlterOperator('access_id',Array.from(new Set(arr)));
}else{
let list =this.Mobx.jurisdiction[index].child;
let arr2=[];
arr2=this.Mobx.operator.checkedAll
for(var s=0;s<list.length;s++){
var index1 = arr2.indexOf(list[s].value);
arr2.splice(index1, 1);
}
this.Mobx.AlterOperator('checkedAll',Array.from(new Set(arr2)));
this.Mobx.AlterOperator('access_id',Array.from(new Set(arr2)));
}
}
//点击取消
cancel(){
this.props.camel();
}
//权限列表
render_jurisdiction1(){
return this.Mobx.jurisdiction.map((info,index)=>{
return <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.Mobx.operator.access_id} onChange={this.onChange.bind(this,index)} />
<Divider></Divider>
</div>
}
)
}
render_jurisdiction2(){
return( <p style={{width: '310px',textAlign: 'center',margin:'12px auto'}}>该账号是系统的管理员,默认拥有所有权限,且处于启用状态,不可停用。</p> )
}
render() {
const { getFieldDecorator } = this.props.form;
let Enable=null;
if(this.props.default==="非默认"){
Enable=(
<FormItem
style={{textAlign:'right',marginBottom:'0px'}}
wrapperCol={{ span: 12 }}
>
{getFieldDecorator('status',{ valuePropName: 'checked',initialValue:this.Mobx.operator.status || false, })(
<Checkbox >
启用
</Checkbox>
)}
</FormItem>
)
}
return (
<div>
<Modal
title={this.props.title}
visible={this.props.visible}
onCancel={this.props.camel}
maskClosable={false}
width={561}
style={{ minWidth: '561px' }}
bodyStyle={{ padding: '0px' }}
centered={false}
footer={[
<Button key="1" type="primary" onClick={this.handleSubmit.bind(this)}>
确定
</Button>,
<Button key="2" type="primary" style={{marginLeft:'8px'}} onClick={this.cancel.bind(this)}>
取消
</Button>
]}
>
{/* border:'1px solid red' */}
<div style={{padding: '20px 20px 0px 20px',}}>
<Form onSubmit={this.handleSubmit}>
<FormItem
label="登录名"
labelCol={{ span: 5 }}
wrapperCol={{ span: 12 }}
>
{getFieldDecorator('name', {
rules: [{ required: true, message: '请输入登录员名!' }],
initialValue:this.Mobx.operator.name
})(
<Input placeholder="请输入登录员名"/>
)}
</FormItem>
<FormItem
label="操作员:"
labelCol={{ span: 5 }}
wrapperCol={{ span: 12 }}
>
{getFieldDecorator('nickname', {
rules: [{ required: true, message: '请输入操作员姓名' }],
initialValue:this.Mobx.operator.nickname
})(
<Input placeholder="请输入操作员姓名"/>
)}
</FormItem>
<FormItem
label="密码:"
labelCol={{ span: 5 }}
wrapperCol={{ span: 12 }}
>
{getFieldDecorator('pwd', {
rules: [{ required: true, message: '请输入密码!' }],
initialValue:this.Mobx.operator.pwd
})(
<Input placeholder="请输入密码"/>
)}
</FormItem>
<Divider dashed={true} orientation="left" style={{ width: '100%' }}>权限分配</Divider>
{this.props.default==="非默认"? this.render_jurisdiction1():this.render_jurisdiction2()}
{Enable}
</Form>
</div>
</Modal>
</div>
)
}
}
export default NewSalesman = Form.create()(NewSalesman);