kede-client/js/component/manageCenter/channelList/channelunit/addchannel.jsx

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 (!values.channelType) {
          message.warning("请选择渠道类别");
          return false;
        }
        if (values.channelType != 1) {
          if (!values.ProvinceCity[1]) {
            message.warning("请选择地区");
            return false;
          }
          if (/.*[\u4e00-\u9fa5]+.*$/.test(values.contacts)) {
          } else {
            message.error("请填写正确的联系人，且至少包含一个汉字");
            return false;
          }
          if (values.contacts.length > 32) {
            message.warning("联系人字数不超过32个");
            return false;
          }
          if (/.*[\u4e00-\u9fa5]+.*$/.test(values.position)) {
          } else {
            message.error("请填写正确的职位，且至少包含一个汉字");
            return false;
          }
          if (values.contactMobile.length > 13) {
            message.warning("联系电话字数不超过13个");
            return false;
          }
          if (values.introduction.length === 0) {
            message.warning("请填写渠道简介");
            return false;
          }
        }
        // let arr = [];
        // for (let i of this.state.selectCooperationProjects) {
        //   arr.push(i.label);
        // }
        if (!err) {
          this.setState({
            loading: true,
          });
          let info = values.channelType != 1 ?
            {
              name: values.name,
              channelType: values.channelType,
              province: values.ProvinceCity[0], //省
              city: values.ProvinceCity[1], //市
              area: values.ProvinceCity[2], //区
              contacts: values.contacts,
              position: values.position,
              contactMobile: values.contactMobile,
              introduction: values.introduction,
            } :
            {
              name: values.name,
              channelType: values.channelType,
            }
          $.ajax({
            method: "POST",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + "/api/admin/customer/addChannel",
            data: info,
          }).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, getFieldsValue } = 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={2}>民主党派</Select.Option>
                        <Select.Option value={3}>园区</Select.Option>
                        <Select.Option value={4}>民间组织</Select.Option>
                        <Select.Option value={5}>战略合作单位</Select.Option>
                        <Select.Option value={1}>其他</Select.Option>
                      </Select>
                    )}
                  </FormItem>
                </div>
                {
                  !!getFieldsValue().channelType && getFieldsValue().channelType != 1 &&
                  <div className="clearfix">
                    <FormItem {...formItemLayout} label="省-市-区">
                      {getFieldDecorator("ProvinceCity", {
                        rules: [{ required: true, message: "此项为必填项!" }],
                        initialValue: this.state.ProvinceCity,
                      })(
                        <Cascader options={areaSelect()} placeholder="选择城市" />
                      )}
                    </FormItem>
                  </div>
                }
                {
                  !!getFieldsValue().channelType && getFieldsValue().channelType != 1 &&
                  <div className="clearfix">
                    <FormItem
                      className="mid-item"
                      {...formItemLayout}
                      label="联系人"
                    >
                      {getFieldDecorator("contacts", {
                        rules: [{ required: true, message: "此项为必填项!" }],
                        initialValue: this.state.contacts,
                      })(<Input placeholder="联系人姓名" />)}
                    </FormItem>
                  </div>
                }
                {
                  !!getFieldsValue().channelType && getFieldsValue().channelType != 1 &&
                  <div className="clearfix">
                    <FormItem
                      className="mid-item"
                      {...formItemLayout}
                      label="职位"
                    >
                      {getFieldDecorator("position", {
                        rules: [{ required: true, message: "此项为必填项!" }],
                        initialValue: this.state.position,
                      })(<Input placeholder="联系人职位" />)}
                    </FormItem>
                  </div>
                }
                {
                  !!getFieldsValue().channelType && getFieldsValue().channelType != 1 &&
                  <div className="clearfix">
                    <FormItem
                      className="mid-item"
                      {...formItemLayout}
                      label="联系电话"
                    >
                      {getFieldDecorator("contactMobile", {
                        rules: [{ required: true, message: "此项为必填项!" }],
                        initialValue: this.state.contactMobile,
                      })(
                        <Input placeholder="请填写手机号,仅填座机号时,请后续补充手机号" />
                      )}
                    </FormItem>
                  </div>
                }
                {
                  !!getFieldsValue().channelType && getFieldsValue().channelType != 1 &&
                  <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);