addchannel.jsx 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507
  1. import React from "react";
  2. import {
  3. Modal,
  4. message,
  5. Spin,
  6. Input,
  7. Select,
  8. Button,
  9. Form,
  10. Col,
  11. Cascader,
  12. Tag,
  13. Tooltip,
  14. AutoComplete,
  15. Icon,
  16. } from "antd";
  17. import $ from "jquery/src/ajax";
  18. import { areaSelect } from "@/NewDicProvinceList";
  19. import { socialAttribute, customerSource } from "@/dataDic.js";
  20. import TextArea from "antd/es/input/TextArea";
  21. const confirm = Modal.confirm;
  22. const AchievementDetailForm = Form.create()(
  23. React.createClass({
  24. getInitialState() {
  25. return {
  26. loading: false,
  27. data: {},
  28. detailApi: "",
  29. businessScope: [],
  30. inputVisible: false,
  31. cooperationProjects: [],
  32. selectCooperationProjects: [],
  33. };
  34. },
  35. handleSubmit(e) {
  36. // this.props.closeDesc();
  37. e.preventDefault();
  38. this.props.form.validateFields((err, values) => {
  39. if (values.name.length > 64) {
  40. message.warning("渠道名称字数不超过64个");
  41. return false;
  42. }
  43. let regu =
  44. /[`~!#$%^&*'_[\]+=<>?:"{}|~!#¥%……&*=-@-!{}|/《》?:“”【】、;;‘’,,.。、\s+]/g;
  45. if (regu.test(values.name)) {
  46. message.warning("渠道名称不能存在特殊符号!");
  47. return false;
  48. }
  49. if (/.*[\u4e00-\u9fa5]+.*$/.test(values.contacts)) {
  50. } else {
  51. message.error("请填写正确的联系人,且至少包含一个汉字");
  52. return false;
  53. }
  54. if (/.*[\u4e00-\u9fa5]+.*$/.test(values.position)) {
  55. } else {
  56. message.error("请填写正确的职位,且至少包含一个汉字");
  57. return false;
  58. }
  59. if (!values.ProvinceCity[1]) {
  60. message.warning("请选择地区");
  61. return false;
  62. }
  63. if (values.contacts.length > 32) {
  64. message.warning("联系人字数不超过32个");
  65. return false;
  66. }
  67. if (values.contactMobile.length > 13) {
  68. message.warning("电话号码字数不超过13个");
  69. return false;
  70. }
  71. if (values.introduction.length === 0) {
  72. message.warning("请填写渠道简介");
  73. return false;
  74. }
  75. if (!values.channelType) {
  76. message.warning("请选择渠道类别");
  77. return false;
  78. }
  79. // let arr = [];
  80. // for (let i of this.state.selectCooperationProjects) {
  81. // arr.push(i.label);
  82. // }
  83. if (!err) {
  84. this.setState({
  85. loading: true,
  86. });
  87. $.ajax({
  88. method: "POST",
  89. dataType: "json",
  90. crossDomain: false,
  91. url: globalConfig.context + "/api/admin/customer/addChannel",
  92. data: {
  93. name: values.name,
  94. contacts: values.contacts,
  95. contactMobile: values.contactMobile,
  96. province: values.ProvinceCity[0], //省
  97. city: values.ProvinceCity[1], //市
  98. area: values.ProvinceCity[2], //区
  99. position: values.position,
  100. introduction: values.introduction,
  101. channelType: values.channelType,
  102. },
  103. }).done(
  104. function (data) {
  105. this.setState({
  106. loading: false,
  107. });
  108. if (!data.error.length) {
  109. message.success("保存成功!");
  110. // this.setState({
  111. // verification: false,
  112. // });
  113. this.props.closeDesc();
  114. } else {
  115. message.warning(data.error[0].message);
  116. }
  117. }.bind(this)
  118. );
  119. }
  120. });
  121. },
  122. componentWillMount() {
  123. this.state.name = "";
  124. this.state.content = "";
  125. this.state.position = "";
  126. this.state.telnum = "";
  127. // this.state.societyTagt='0';
  128. this.state.customerSource = "0";
  129. this.state.inputValue = "";
  130. this.state.businessScope = [];
  131. this.state.inputVisible = false;
  132. this.state.cooperationProjects = [];
  133. this.state.selectCooperationProjects = [];
  134. },
  135. componentWillReceiveProps(nextProps) {
  136. if (!this.props.visible && nextProps.visible) {
  137. this.state.name = "";
  138. this.state.content = "";
  139. this.state.position = "";
  140. this.state.telnum = "";
  141. this.state.inputValue = "";
  142. this.state.businessScope = [];
  143. this.state.inputVisible = false;
  144. this.state.cooperationProjects = [];
  145. this.state.selectCooperationProjects = [];
  146. // this.state.societyTagt='0';
  147. this.props.form.resetFields();
  148. }
  149. },
  150. handleClose(removedTag) {
  151. let businessScope = this.state.businessScope.filter((tag) => {
  152. return tag !== removedTag;
  153. });
  154. this.setState({ businessScope });
  155. },
  156. handleCloseCooperation(removedTag) {
  157. let selectCooperationProjects =
  158. this.state.selectCooperationProjects.filter((tag) => {
  159. return tag.value !== removedTag.value;
  160. });
  161. this.setState({ selectCooperationProjects });
  162. },
  163. showInput() {
  164. let str = this.state.businessScope.join("/");
  165. this.setState({
  166. inputVisible: true,
  167. inputValue: str,
  168. });
  169. },
  170. handleInputConfirm() {
  171. let inputValue = this.state.inputValue;
  172. let arr = inputValue.split("/");
  173. let lv = true;
  174. for (let i of arr) {
  175. if (i.length > 16) {
  176. message.warning("单个标签字数不能超过16个字符");
  177. lv = false;
  178. return;
  179. }
  180. }
  181. if (lv) {
  182. arr = Array.from(new Set(arr));
  183. arr = arr.filter((v) => v);
  184. this.setState({
  185. businessScope: arr,
  186. inputVisible: false,
  187. inputValue: "",
  188. });
  189. }
  190. },
  191. //加载(自动补全)
  192. supervisor(value) {
  193. $.ajax({
  194. method: "get",
  195. dataType: "json",
  196. crossDomain: false,
  197. url: globalConfig.context + "/api/admin/order/getBusinessProjectByName",
  198. data: {
  199. businessName: value,
  200. },
  201. success: function (data) {
  202. let thedata = data.data;
  203. if (data.error.length === 0) {
  204. this.setState({
  205. cooperationProjects: thedata,
  206. });
  207. } else {
  208. message.warning(data.error[0].message);
  209. }
  210. }.bind(this),
  211. }).always(function () {}.bind(this));
  212. },
  213. onSelect(value) {
  214. let arr = this.state.cooperationProjects.filter((v) => v.id === value);
  215. let arr1 = this.state.selectCooperationProjects.filter(
  216. (v) => v.value === value
  217. );
  218. if (arr.length > 0) {
  219. if (arr1.length > 0) {
  220. message.warning("选项已存在");
  221. } else {
  222. this.state.selectCooperationProjects.push({
  223. label: arr[0].bname,
  224. value: arr[0].id,
  225. });
  226. this.setState({
  227. selectCooperationProjects: this.state.selectCooperationProjects,
  228. });
  229. }
  230. }
  231. },
  232. checkUserName() {
  233. this.setState({
  234. verification: false,
  235. });
  236. if (!this.props.form.getFieldValue("name")) {
  237. message.warning("请输入公司名称");
  238. return;
  239. }
  240. $.ajax({
  241. method: "get",
  242. dataType: "json",
  243. crossDomain: false,
  244. url: globalConfig.context + "/api/admin/customer/checkUserName",
  245. data: {
  246. userName: this.props.form.getFieldValue("name"),
  247. },
  248. success: function (data) {
  249. if (data.error.length === 0) {
  250. if (!data.data) {
  251. this.setState({
  252. verification: true,
  253. });
  254. } else {
  255. Modal.info({
  256. title: "提醒",
  257. content: (
  258. <div>
  259. <p>
  260. 企业客户已存在!请在“客户管理-企业客户-企业客户查询”输入企业全称查询所属人信息
  261. </p>
  262. </div>
  263. ),
  264. });
  265. this.setState({
  266. verification: false,
  267. });
  268. }
  269. } else {
  270. message.warning(data.error[0].message);
  271. }
  272. }.bind(this),
  273. }).always(function () {}.bind(this));
  274. },
  275. render() {
  276. const theData = this.state.data || {};
  277. const { getFieldDecorator } = this.props.form;
  278. const FormItem = Form.Item;
  279. const formItemLayout = {
  280. labelCol: { span: 6 },
  281. wrapperCol: { span: 14 },
  282. };
  283. return (
  284. <div>
  285. <Form
  286. layout="horizontal"
  287. onSubmit={this.handleSubmit}
  288. id="demand-form"
  289. >
  290. <Spin spinning={this.state.loading}>
  291. <div>
  292. <div className="clearfix">
  293. <FormItem
  294. className="mid-item"
  295. {...formItemLayout}
  296. label="渠道名称"
  297. >
  298. {getFieldDecorator("name", {
  299. rules: [{ required: true, message: "此项为必填项!" }],
  300. initialValue: this.state.name,
  301. })(
  302. <span
  303. style={{
  304. display: "flex",
  305. alignItems: "center",
  306. position: "relative",
  307. }}
  308. >
  309. <Input placeholder="渠道名称" />
  310. {this.state.verification && (
  311. <Icon
  312. type="check-circle"
  313. style={{
  314. fontSize: 16,
  315. color: "#30e031",
  316. position: "absolute",
  317. right: "80px",
  318. }}
  319. />
  320. )}
  321. <Button
  322. onClick={this.checkUserName}
  323. type="primary"
  324. style={{ marginLeft: "10px" }}
  325. >
  326. 验证
  327. </Button>
  328. </span>
  329. )}
  330. </FormItem>
  331. </div>
  332. <div className="clearfix">
  333. <FormItem {...formItemLayout} label="省-市-区">
  334. {getFieldDecorator("ProvinceCity", {
  335. rules: [{ required: true, message: "此项为必填项!" }],
  336. initialValue: this.state.ProvinceCity,
  337. })(
  338. <Cascader options={areaSelect()} placeholder="选择城市" />
  339. )}
  340. </FormItem>
  341. </div>
  342. <div className="clearfix">
  343. <FormItem
  344. className="mid-item"
  345. {...formItemLayout}
  346. label="联系人"
  347. >
  348. {getFieldDecorator("contacts", {
  349. rules: [{ required: true, message: "此项为必填项!" }],
  350. initialValue: this.state.contacts,
  351. })(<Input placeholder="联系人姓名" />)}
  352. </FormItem>
  353. </div>
  354. <div className="clearfix">
  355. <FormItem
  356. className="mid-item"
  357. {...formItemLayout}
  358. label="职位"
  359. >
  360. {getFieldDecorator("position", {
  361. rules: [{ required: true, message: "此项为必填项!" }],
  362. initialValue: this.state.position,
  363. })(<Input placeholder="联系人职位" />)}
  364. </FormItem>
  365. </div>
  366. <div className="clearfix">
  367. <FormItem
  368. className="mid-item"
  369. {...formItemLayout}
  370. label="渠道类别"
  371. >
  372. {getFieldDecorator("channelType", {
  373. rules: [{ required: true, message: "此项为必填项!" }],
  374. initialValue: this.state.channelType,
  375. })(
  376. <Select placeholder="请选择">
  377. <Select.Option value={1}>政府部门</Select.Option>
  378. <Select.Option value={2}>民主党派</Select.Option>
  379. <Select.Option value={3}>园区</Select.Option>
  380. <Select.Option value={4}>民间组织</Select.Option>
  381. <Select.Option value={5}>
  382. 其他战略合作单位
  383. </Select.Option>
  384. </Select>
  385. )}
  386. </FormItem>
  387. </div>
  388. <div className="clearfix">
  389. <FormItem
  390. className="mid-item"
  391. {...formItemLayout}
  392. label="联系电话"
  393. >
  394. {getFieldDecorator("contactMobile", {
  395. rules: [{ required: true, message: "此项为必填项!" }],
  396. initialValue: this.state.contactMobile,
  397. })(
  398. <Input placeholder="请填写手机号,仅填座机号时,请后续补充手机号" />
  399. )}
  400. </FormItem>
  401. </div>
  402. <div className="clearfix">
  403. <FormItem
  404. className="mid-item"
  405. {...formItemLayout}
  406. required
  407. label="渠道简介"
  408. >
  409. {getFieldDecorator("introduction", {
  410. rules: [{ required: true, message: "此项为必填项!" }],
  411. initialValue: this.state.introduction,
  412. })(
  413. <TextArea
  414. style={{ width: "330px", height: "100px" }}
  415. placeholder="请填写渠道简介"
  416. value={this.state.inputValue}
  417. onChange={(e) => {
  418. this.setState({
  419. inputValue: e.target.value,
  420. });
  421. }}
  422. />
  423. )}
  424. </FormItem>
  425. </div>
  426. </div>
  427. <FormItem wrapperCol={{ span: 12, offset: 6 }}>
  428. <Button
  429. type="primary"
  430. htmlType="submit"
  431. style={{ marginRight: "50px" }}
  432. >
  433. 保存
  434. </Button>
  435. <Button type="ghost" onClick={this.props.closeDesc}>
  436. 取消
  437. </Button>
  438. </FormItem>
  439. </Spin>
  440. </Form>
  441. </div>
  442. );
  443. },
  444. })
  445. );
  446. const AddChannel = React.createClass({
  447. getInitialState() {
  448. return {
  449. visible: false,
  450. tabsKey: 1,
  451. loading: false,
  452. dataSource: [],
  453. };
  454. },
  455. handleCancel(e) {
  456. this.props.closeDesc();
  457. },
  458. handleOk(e) {
  459. this.setState({
  460. visible: false,
  461. });
  462. this.props.closeDesc();
  463. // this.props.closeDesc(false, true);
  464. },
  465. componentWillReceiveProps(nextProps) {
  466. if (!this.state.visible && nextProps.showDesc) {
  467. this.state.tabsKey = "1";
  468. }
  469. this.state.visible = nextProps.showDesc;
  470. },
  471. render() {
  472. const { showDesc } = this.props;
  473. return (
  474. <div className="patent-desc">
  475. <Modal
  476. maskClosable={false}
  477. visible={showDesc == "add"}
  478. onOk={this.checkPatentProcess}
  479. onCancel={this.handleCancel}
  480. width="600px"
  481. title="新建渠道"
  482. footer=""
  483. className="admin-desc-content"
  484. >
  485. <Spin spinning={this.state.loading}>
  486. <AchievementDetailForm
  487. data={this.props.data}
  488. newmodal={this.props.newmodal}
  489. closeDesc={this.handleCancel}
  490. visible={this.state.visible}
  491. handleOk={this.handleOk}
  492. />
  493. </Spin>
  494. </Modal>
  495. </div>
  496. );
  497. },
  498. });
  499. export default Form.create({})(AddChannel);