kede-client/js/component/manageCenter/set/userManagementS/addjurisdiction.jsx

import React from 'react';
import { Icon,  Modal, message,  AutoComplete,Spin, Input, Select, Button, Form,Upload } from 'antd';
import ajax from 'jquery/src/ajax/xhr.js';
import $ from 'jquery/src/ajax';
import './userMangagement.less';
import {urlType} from '../../../dataDic.js';
const Option = AutoComplete.Option;

const Addjurisdiction = Form.create()(React.createClass({
    getInitialState() {
        return {
            loading: false,
            visible:false
        };
    },
    //保存
    handleSubmit(e) {
    	e.preventDefault();
    	let theType;
    	if(this.props.userDetaile){
			if (!this.state.auto) {
				message.warning('请输入上级模块')
				return false;
			}
		}
    	let api=this.props.userDetaile?'/api/admin/updateById':'/api/admin/addSupPermission';
        this.props.form.validateFields((err, values) => {
            if (!err) {
                this.setState({
                    loading: true
                });
                $.ajax({
                  method: "POST",
                  dataType: "json",
                  crossDomain: false,
                  url: globalConfig.context + api,
                  data: {
                    id: this.state.ids,
                    name: this.state.name, //接口名称
                    url: this.state.url, //接口路径
                    type: this.state.urlType || "0",
                    superId: this.state.auto, //接口上级模板功能
                    showOrder: this.state.showOrder,
                  },
                }).done(
                  function (data) {
                    this.setState({
                      loading: false,
                    });
                    if (!data.error.length) {
                      message.success("保存成功！");
                      this.props.closeDesc(false, true);
                    } else {
                      message.warning(data.error[0].message);
                    }
                  }.bind(this)
                );
            }
        });
    },
    //主管初始加载(自动补全)
	supervisor(e){
		$.ajax({
            method: "post",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + "/api/admin/selectName",
            data:{
            	name:e
            },
            success: function (data) {
				       let thedata=data.data;
				    if (!thedata) {
                    if (data.error && data.error.length) {
                        message.warning(data.error[0].message);
                    };
                    thedata = {};
              };
					this.setState({
						customerArr:thedata,
                    });
				}.bind(this),
			}).always(function () {
            this.setState({
                loading: false
            });
        }.bind(this));
	},
	//上级主管输入框失去焦点是判断客户是否存在
	selectAuto(value,options){
		this.setState({
			auto:value
		})
	},
	blurChange(e){
		let theType;
		let contactLists=this.state.customerArr||[];
			if (e) {
            contactLists.map(function (item) {
                if (item.name == e.toString()) {
                    theType=item.id
                }
           });
   	    }
		this.setState({
			theTypes:theType
		})
	},
	//值改变时请求客户名称
	httpChange(e){
		if(e.length>=1){
			this.supervisor(e);
		}
		this.setState({
			auto:e
		})
	},
	//查看基本详情基本信息
    loaduser(record){
    	if(record){
    	$.ajax({
            method: "post",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + '/api/admin/selectAllById',
            data: {
              id: record.id
            },
            success: function (data) {
                let thisData = data.data;
                if (!thisData) {
                    if (data.error && data.error.length) {
                        message.warning(data.error[0].message);
                    };
                    thisData = {};
                };
                this.setState({
                  ids: thisData.id,
                  name: thisData.name, //接口名称
                  urlType: thisData.type.toString(),
                  url: thisData.url, //接口路径
                  preModule: thisData.preModule, //接口上级模板功能
                  createId: thisData.createId,
                  createTime: new Date(thisData.createTime).toLocaleString(),
                  updateTime: new Date(thisData.updateTime).toLocaleString(),
                  autNo: thisData.autNo,
                  auto: thisData.superId,
                  showOrder: thisData.showOrder,
                });
            }.bind(this),
       }).always(function () {
            this.setState({
                loading: false
            });
        }.bind(this));
       }
    },
    handleOk(e) {
        this.setState({
            visible: false,
        });
        this.props.closeDesc(false, true);
    },
    handleCancel(e) {
        this.setState({
            visible: false,
        });
        this.props.closeDesc(false);
    },
    componentWillReceiveProps(nextProps) {
    	this.state.visible = nextProps.showDesc;
    	this.state.Detaile=nextProps.userDetaile;
		if(!nextProps.userDetaile){
			this.state.name='';
			this.state.url='';
			this.state.urlType=undefined;
   		}else{
    		this.loaduser(nextProps.datauser)
    	   }
      },
    render() {
        const theData = this.state.datauser||{};
        const { getFieldDecorator } = this.props.form;
        const FormItem = Form.Item
        const formItemLayout = {
            labelCol: { span: 8 },
            wrapperCol: { span: 14 },
        };
        const dataSources=this.state.customerArr || [];
        const options = dataSources.map((group,index) =>
				      <Option key={index} value={group.name}>{group.name}</Option>
				     )
        return (
          <div>
            <Modal
              maskClosable={false}
              visible={this.state.visible}
              onOk={this.handleOk}
              onCancel={this.handleCancel}
              width="600px"
              title={this.props.userDetaile ? "权限详情" : "新建权限"}
              footer=""
              className="admin-desc-content"
            >
              <Form
                layout="horizontal"
                onSubmit={this.handleSubmit}
                id="demand-form"
              >
                <Spin spinning={this.state.loading}>
                  <div className="clearfix">
                    <FormItem
                      className="half-middle"
                      {...formItemLayout}
                      label="接口名称"
                    >
                      <Input
                        placeholder="接口名称"
                        value={this.state.name}
                        style={{ width: "230px" }}
                        onChange={(e) => {
                          this.setState({ name: e.target.value });
                        }}
                        required="required"
                      />
                      <span className="mandatory">*</span>
                    </FormItem>
                    <FormItem
                      className="half-middle"
                      {...formItemLayout}
                      label="接口路径"
                    >
                      <Input
                        placeholder="接口路径"
                        value={this.state.url}
                        style={{ width: "230px" }}
                        onChange={(e) => {
                          this.setState({ url: e.target.value });
                        }}
                        required="required"
                      />
                      <span className="mandatory">*</span>
                    </FormItem>
                    <FormItem
                      className="half-middle"
                      {...formItemLayout}
                      label="接口类型"
                    >
                      {this.props.userDetaile ? (
                        <Select
                          placeholder="选择接口类型"
                          style={{ width: "230px" }}
                          value={this.state.urlType}
                          onChange={(e) => {
                            this.setState({ urlType: e });
                          }}
                        >
                          {urlType.map(function (item) {
                            return (
                              <Select.Option key={item.value}>
                                {item.key}
                              </Select.Option>
                            );
                          })}
                        </Select>
                      ) : (
                        <span>导航</span>
                      )}
                    </FormItem>
                  </div>
                    {this.props.userDetaile ? <div
                    className="clearfix"
                  >
                    <FormItem
                      className="half-middle"
                      {...formItemLayout}
                      label="上级功能模块"
                    >
                      <AutoComplete
                        className="certain-category-search"
                        dropdownClassName="certain-category-search-dropdown"
                        dropdownMatchSelectWidth={false}
                        dropdownStyle={{ width: 230 }}
                        size="large"
                        style={{ width: "230px" }}
                        dataSource={options}
                        placeholder="输入名称"
                        value={this.state.auto}
                        onChange={this.httpChange}
                        filterOption={true}
                        onBlur={this.blurChange}
                        onSelect={this.selectAuto}
                      >
                        <Input />
                      </AutoComplete>
                      <span className="mandatory">*</span>
                    </FormItem>
                    <FormItem
                      className="half-middle"
                      {...formItemLayout}
                      label="排序"
                    >
                      <Input
                        placeholder="排序数字"
                        value={this.state.showOrder}
                        style={{ width: "230px" }}
                        onChange={(e) => {
                          this.setState({ showOrder: e.target.value });
                        }}
                        required="required"
                      />
                    </FormItem>
                    <FormItem
                      className="half-middle"
                      {...formItemLayout}
                      label="权限编号"
                    >
                      <span>{this.state.autNo}</span>
                    </FormItem>
                    <FormItem
                      className="half-middle"
                      {...formItemLayout}
                      label="创建人"
                    >
                      <span>{this.state.createId}</span>
                    </FormItem>
                    <FormItem
                      className="half-middle"
                      {...formItemLayout}
                      label="创建时间"
                    >
                      <span>{this.state.createTime}</span>
                    </FormItem>
                    <FormItem
                      className="half-middle"
                      {...formItemLayout}
                      label="更新时间"
                    >
                      <span>{this.state.updateTime}</span>
                    </FormItem>
                  </div> : null}
                  <FormItem className="half-middle">
                    <Button
                      className="set-submit"
                      type="primary"
                      htmlType="submit"
                      style={{ marginLeft: "150px" }}
                    >
                      保存
                    </Button>
                    <Button
                      className="set-submit"
                      type="ghost"
                      onClick={this.handleCancel}
                    >
                      取消
                    </Button>
                  </FormItem>
                </Spin>
              </Form>
            </Modal>
          </div>
        );
    }
}));

export default Addjurisdiction;