| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505 | import React from "react";import {  Modal,  message,  Spin,  Input,  Select,  Button,  Form,  Col,  Cascader,  Tag,  Tooltip,  AutoComplete,  Icon,} from "antd";import $ from "jquery/src/ajax";import { areaSelect } from "@/NewDicProvinceList";import { socialAttribute, customerSource } from "@/dataDic.js";import TextArea from "antd/es/input/TextArea";const confirm = Modal.confirm;const AchievementDetailForm = Form.create()(  React.createClass({    getInitialState() {      return {        loading: false,        data: {},        detailApi: "",        businessScope: [],        inputVisible: false,        cooperationProjects: [],        selectCooperationProjects: [],      };    },    handleSubmit(e) {      // this.props.closeDesc();      e.preventDefault();      this.props.form.validateFields((err, values) => {        if (values.name.length > 64) {          message.warning("渠道名称字数不超过64个");          return false;        }        let regu =          /[`~!#$%^&*'_[\]+=<>?:"{}|~!#¥%……&*=-@-!{}|/《》?:“”【】、;;‘’,,.。、\s+]/g;        if (regu.test(values.name)) {          message.warning("渠道名称不能存在特殊符号!");          return false;        }        if (/.*[\u4e00-\u9fa5]+.*$/.test(values.contacts)) {        } else {          message.error("请填写正确的联系人,且至少包含一个汉字");          return false;        }        if (/.*[\u4e00-\u9fa5]+.*$/.test(values.position)) {        } else {          message.error("请填写正确的职位,且至少包含一个汉字");          return false;        }        if (!values.ProvinceCity[1]) {          message.warning("请选择地区");          return false;        }        if (values.contacts.length > 32) {          message.warning("联系人字数不超过32个");          return false;        }        if (values.contactMobile.length > 13) {          message.warning("电话号码字数不超过13个");          return false;        }        if (values.introduction.length === 0) {          message.warning("请填写渠道简介");          return false;        }        if (!values.channelType) {          message.warning("请选择渠道类别");          return false;        }        // let arr = [];        // for (let i of this.state.selectCooperationProjects) {        //   arr.push(i.label);        // }        if (!err) {          this.setState({            loading: true,          });          $.ajax({            method: "POST",            dataType: "json",            crossDomain: false,            url: globalConfig.context + "/api/admin/customer/addChannel",            data: {              name: values.name,              contacts: values.contacts,              contactMobile: values.contactMobile,              province: values.ProvinceCity[0], //省              city: values.ProvinceCity[1], //市              area: values.ProvinceCity[2], //区              position: values.position,              introduction: values.introduction,              channelType: values.channelType,            },          }).done(            function (data) {              this.setState({                loading: false,              });              if (!data.error.length) {                message.success("保存成功!");                // this.setState({                //   verification: false,                // });                this.props.closeDesc();              } else {                message.warning(data.error[0].message);              }            }.bind(this)          );        }      });    },    componentWillMount() {      this.state.name = "";      this.state.content = "";      this.state.position = "";      this.state.telnum = "";      // this.state.societyTagt='0';      this.state.customerSource = "0";      this.state.inputValue = "";      this.state.businessScope = [];      this.state.inputVisible = false;      this.state.cooperationProjects = [];      this.state.selectCooperationProjects = [];    },    componentWillReceiveProps(nextProps) {      if (!this.props.visible && nextProps.visible) {        this.state.name = "";        this.state.content = "";        this.state.position = "";        this.state.telnum = "";        this.state.inputValue = "";        this.state.businessScope = [];        this.state.inputVisible = false;        this.state.cooperationProjects = [];        this.state.selectCooperationProjects = [];        // this.state.societyTagt='0';        this.props.form.resetFields();      }    },    handleClose(removedTag) {      let businessScope = this.state.businessScope.filter((tag) => {        return tag !== removedTag;      });      this.setState({ businessScope });    },    handleCloseCooperation(removedTag) {      let selectCooperationProjects =        this.state.selectCooperationProjects.filter((tag) => {          return tag.value !== removedTag.value;        });      this.setState({ selectCooperationProjects });    },    showInput() {      let str = this.state.businessScope.join("/");      this.setState({        inputVisible: true,        inputValue: str,      });    },    handleInputConfirm() {      let inputValue = this.state.inputValue;      let arr = inputValue.split("/");      let lv = true;      for (let i of arr) {        if (i.length > 16) {          message.warning("单个标签字数不能超过16个字符");          lv = false;          return;        }      }      if (lv) {        arr = Array.from(new Set(arr));        arr = arr.filter((v) => v);        this.setState({          businessScope: arr,          inputVisible: false,          inputValue: "",        });      }    },    //加载(自动补全)    supervisor(value) {      $.ajax({        method: "get",        dataType: "json",        crossDomain: false,        url: globalConfig.context + "/api/admin/order/getBusinessProjectByName",        data: {          businessName: value,        },        success: function (data) {          let thedata = data.data;          if (data.error.length === 0) {            this.setState({              cooperationProjects: thedata,            });          } else {            message.warning(data.error[0].message);          }        }.bind(this),      }).always(function () { }.bind(this));    },    onSelect(value) {      let arr = this.state.cooperationProjects.filter((v) => v.id === value);      let arr1 = this.state.selectCooperationProjects.filter(        (v) => v.value === value      );      if (arr.length > 0) {        if (arr1.length > 0) {          message.warning("选项已存在");        } else {          this.state.selectCooperationProjects.push({            label: arr[0].bname,            value: arr[0].id,          });          this.setState({            selectCooperationProjects: this.state.selectCooperationProjects,          });        }      }    },    checkUserName() {      this.setState({        verification: false,      });      if (!this.props.form.getFieldValue("name")) {        message.warning("请输入公司名称");        return;      }      $.ajax({        method: "get",        dataType: "json",        crossDomain: false,        url: globalConfig.context + "/api/admin/customer/checkUserName",        data: {          userName: this.props.form.getFieldValue("name"),        },        success: function (data) {          if (data.error.length === 0) {            if (!data.data) {              this.setState({                verification: true,              });            } else {              Modal.info({                title: "提醒",                content: (                  <div>                    <p style={{ color: "red" }}>                      企业客户已存在!请在“客户管理-企业客户-企业客户查询”输入企业全称查询所属人信息                    </p>                  </div>                ),              });              this.setState({                verification: false,              });            }          } else {            message.warning(data.error[0].message);          }        }.bind(this),      }).always(function () { }.bind(this));    },    render() {      const theData = this.state.data || {};      const { getFieldDecorator } = this.props.form;      const FormItem = Form.Item;      const formItemLayout = {        labelCol: { span: 6 },        wrapperCol: { span: 14 },      };      return (        <div>          <Form            layout="horizontal"            onSubmit={this.handleSubmit}            id="demand-form"          >            <Spin spinning={this.state.loading}>              <div>                <div className="clearfix">                  <FormItem                    className="mid-item"                    {...formItemLayout}                    label="渠道名称"                  >                    {getFieldDecorator("name", {                      rules: [{ required: true, message: "此项为必填项!" }],                      initialValue: this.state.name,                    })(                      <span                        style={{                          display: "flex",                          alignItems: "center",                          position: "relative",                        }}                      >                        <Input placeholder="渠道名称" />                        {this.state.verification && (                          <Icon                            type="check-circle"                            style={{                              fontSize: 16,                              color: "#30e031",                              position: "absolute",                              right: "80px",                            }}                          />                        )}                        <Button                          onClick={this.checkUserName}                          type="primary"                          style={{ marginLeft: "10px" }}                        >                          验证                        </Button>                      </span>                    )}                  </FormItem>                </div>                <div className="clearfix">                  <FormItem                    className="mid-item"                    {...formItemLayout}                    label="渠道类别"                  >                    {getFieldDecorator("channelType", {                      rules: [{ required: true, message: "此项为必填项!" }],                      initialValue: this.state.channelType,                    })(                      <Select placeholder="请选择">                        <Select.Option value={1}>政府部门</Select.Option>                        <Select.Option value={2}>民主党派</Select.Option>                        <Select.Option value={3}>园区</Select.Option>                        <Select.Option value={4}>民间组织</Select.Option>                        <Select.Option value={5}>其他战略合作单位</Select.Option>                      </Select>                    )}                  </FormItem>                </div>                <div className="clearfix">                  <FormItem {...formItemLayout} label="省-市-区">                    {getFieldDecorator("ProvinceCity", {                      rules: [{ required: true, message: "此项为必填项!" }],                      initialValue: this.state.ProvinceCity,                    })(                      <Cascader options={areaSelect()} placeholder="选择城市" />                    )}                  </FormItem>                </div>                <div className="clearfix">                  <FormItem                    className="mid-item"                    {...formItemLayout}                    label="联系人"                  >                    {getFieldDecorator("contacts", {                      rules: [{ required: true, message: "此项为必填项!" }],                      initialValue: this.state.contacts,                    })(<Input placeholder="联系人姓名" />)}                  </FormItem>                </div>                <div className="clearfix">                  <FormItem                    className="mid-item"                    {...formItemLayout}                    label="职位"                  >                    {getFieldDecorator("position", {                      rules: [{ required: true, message: "此项为必填项!" }],                      initialValue: this.state.position,                    })(<Input placeholder="联系人职位" />)}                  </FormItem>                </div>                <div className="clearfix">                  <FormItem                    className="mid-item"                    {...formItemLayout}                    label="联系电话"                  >                    {getFieldDecorator("contactMobile", {                      rules: [{ required: true, message: "此项为必填项!" }],                      initialValue: this.state.contactMobile,                    })(                      <Input placeholder="请填写手机号,仅填座机号时,请后续补充手机号" />                    )}                  </FormItem>                </div>                <div className="clearfix">                  <FormItem                    className="mid-item"                    {...formItemLayout}                    required                    label="渠道简介"                  >                    {getFieldDecorator("introduction", {                      rules: [{ required: true, message: "此项为必填项!" }],                      initialValue: this.state.introduction,                    })(                      <TextArea                        style={{ width: "330px", height: "100px" }}                        placeholder="请填写渠道简介"                        value={this.state.inputValue}                        onChange={(e) => {                          this.setState({                            inputValue: e.target.value,                          });                        }}                      />                    )}                  </FormItem>                </div>              </div>              <FormItem wrapperCol={{ span: 12, offset: 6 }}>                <Button                  type="primary"                  htmlType="submit"                  style={{ marginRight: "50px" }}                >                  保存                </Button>                <Button type="ghost" onClick={this.props.closeDesc}>                  取消                </Button>              </FormItem>            </Spin>          </Form>        </div>      );    },  }));const AddChannel = React.createClass({  getInitialState() {    return {      visible: false,      tabsKey: 1,      loading: false,      dataSource: [],    };  },  handleCancel(e) {    this.props.closeDesc();  },  handleOk(e) {    this.setState({      visible: false,    });    this.props.closeDesc();    // this.props.closeDesc(false, true);  },  componentWillReceiveProps(nextProps) {    if (!this.state.visible && nextProps.showDesc) {      this.state.tabsKey = "1";    }    this.state.visible = nextProps.showDesc;  },  render() {    const { showDesc } = this.props;    return (      <div className="patent-desc">        <Modal          maskClosable={false}          visible={showDesc == "add"}          onOk={this.checkPatentProcess}          onCancel={this.handleCancel}          width="600px"          title="新建渠道"          footer=""          className="admin-desc-content"        >          <Spin spinning={this.state.loading}>            <AchievementDetailForm              data={this.props.data}              newmodal={this.props.newmodal}              closeDesc={this.handleCancel}              visible={this.state.visible}              handleOk={this.handleOk}            />          </Spin>        </Modal>      </div>    );  },});export default Form.create({})(AddChannel);
 |