addchannel.jsx 17 KB

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