inforChange.jsx 25 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526
  1. import React, { Component } from "react";
  2. import { AutoComplete, Button, Cascader, Input, message, Modal, Popconfirm, Select, Spin, Table, Tag, Tooltip } from "antd";
  3. import { areaSelect, getProvince } from '@/NewDicProvinceList';
  4. import $ from "jquery/src/ajax";
  5. import TextArea from "antd/es/input/TextArea";
  6. class InforChange extends Component {
  7. constructor(props) {
  8. super(props);
  9. this.state = {
  10. visible: false,
  11. changeType: 0,
  12. colunmn: [
  13. {
  14. title: "操作人名称",
  15. dataIndex: "adminName",
  16. key: "adminName",
  17. },
  18. {
  19. title: "客户名称",
  20. dataIndex: "name",
  21. key: "name",
  22. render: (text) => {
  23. return (
  24. <Tooltip title={text}>
  25. <div style={{
  26. maxWidth: '150px',
  27. overflow: 'hidden',
  28. textOverflow: "ellipsis",
  29. whiteSpace: 'nowrap',
  30. }}>{text}</div>
  31. </Tooltip>
  32. )
  33. }
  34. },
  35. {
  36. title: "操作时间",
  37. dataIndex: "createTimes",
  38. key: "createTimes",
  39. },
  40. ],
  41. dataSource: [],
  42. inputVisible: false,
  43. inputValue: '',
  44. dataArrar: [],
  45. cooperationProjects: [],
  46. orgCode: props.data.orgCode,
  47. locationProvince: props.data.locationProvince,
  48. businessScope: props.data.businessScope,
  49. intendedProject: props.data.intendedProject
  50. }
  51. this.onChange = this.onChange.bind(this);
  52. this.onCancel = this.onCancel.bind(this);
  53. this.loadData = this.loadData.bind(this);
  54. this.onOk = this.onOk.bind(this);
  55. this.showInput = this.showInput.bind(this);
  56. this.handleInputConfirm = this.handleInputConfirm.bind(this);
  57. this.handleClose = this.handleClose.bind(this);
  58. this.handleCloseCooperation = this.handleCloseCooperation.bind(this);
  59. this.supervisor = this.supervisor.bind(this);
  60. this.onSelect = this.onSelect.bind(this);
  61. }
  62. onChange(type) {
  63. this.setState({
  64. visible: true,
  65. changeType: type,
  66. })
  67. }
  68. onCancel() {
  69. this.setState({
  70. visible: false,
  71. loading: false,
  72. changeType: 0,
  73. dataArrar: []
  74. })
  75. }
  76. loadData() {
  77. this.setState({
  78. loading: true
  79. });
  80. $.ajax({
  81. method: "get",
  82. dataType: "json",
  83. crossDomain: false,
  84. url: globalConfig.context + "/api/admin/customer/listUserName",
  85. data: {
  86. uid: this.props.enterpriseId,
  87. },
  88. success: function (data) {
  89. if (data.error.length || data.data.list == "") {
  90. if (data.error && data.error.length) {
  91. message.warning(data.error[0].message);
  92. }
  93. } else {
  94. this.setState({
  95. initialName: data.data[0] ? data.data[0].name : ''
  96. })
  97. data.data.splice(0, 1);
  98. this.setState({
  99. dataSource: data.data,
  100. });
  101. }
  102. }.bind(this),
  103. }).always(
  104. function () {
  105. this.setState({
  106. loading: false,
  107. });
  108. }.bind(this)
  109. );
  110. }
  111. onOk() {
  112. const { dataArrar } = this.state;
  113. if (this.state.changeType === 3 && !/^[A-Z0-9]{15}$|^[A-Z0-9]{17}$|^[A-Z0-9]{18}$|^[A-Z0-9]{20}$/.test(dataArrar)) {
  114. message.warning('请输入正确的统一社会信用代码')
  115. return
  116. }
  117. if (this.state.changeType === 0 && dataArrar.length === 0) {
  118. message.warning('请输入省-市-区');
  119. return;
  120. }
  121. if (this.state.changeType === 1 && dataArrar.length === 0) {
  122. message.warning('请输入企业主管产品/服务');
  123. return;
  124. }
  125. if (this.state.changeType === 2 && dataArrar.length === 0) {
  126. message.warning('请输入意向合作项目');
  127. return;
  128. }
  129. this.setState({
  130. loading: true
  131. });
  132. let data = {
  133. uid: this.props.enterpriseId,
  134. }
  135. if (this.state.changeType === 0) {
  136. data.province = dataArrar[0] || undefined;
  137. data.city = dataArrar[1] || undefined;
  138. data.area = dataArrar[2] || undefined;
  139. }
  140. if (this.state.changeType === 1) {
  141. data.businessScope = dataArrar.join(',')
  142. }
  143. if (this.state.changeType === 2) {
  144. let arr = [];
  145. for (let i of dataArrar) {
  146. arr.push(i.label)
  147. }
  148. data.intendedProject = arr.join(',')
  149. }
  150. if (this.state.changeType === 3) {
  151. data.orgCode = dataArrar
  152. }
  153. $.ajax({
  154. url: globalConfig.context + "/api/admin/customer/updateUserDate",
  155. method: "post",
  156. data: data
  157. }).done(
  158. function (data) {
  159. this.setState({
  160. loading: false
  161. });
  162. if (data.error.length === 0) {
  163. message.success("恭喜您,更改成功!");
  164. if (this.state.changeType === 0) {
  165. this.setState({
  166. locationProvince: getProvince(dataArrar[0], dataArrar[1], dataArrar[2])
  167. })
  168. }
  169. if (this.state.changeType === 1) {
  170. this.setState({
  171. businessScope: dataArrar.join(',')
  172. })
  173. }
  174. if (this.state.changeType === 2) {
  175. let arr = [];
  176. for (let i of dataArrar) {
  177. arr.push(i.label)
  178. }
  179. this.setState({
  180. intendedProject: arr.join(',')
  181. })
  182. }
  183. if (this.state.changeType === 3) {
  184. this.setState({
  185. orgCode: dataArrar
  186. })
  187. }
  188. this.onCancel();
  189. } else {
  190. message.warning(data.error[0].message);
  191. }
  192. }.bind(this)
  193. )
  194. }
  195. showInput() {
  196. let str = this.state.dataArrar.join('/')
  197. this.setState({
  198. inputVisible: true,
  199. inputValue: str
  200. });
  201. }
  202. handleInputConfirm() {
  203. let inputValue = this.state.inputValue;
  204. let arr = inputValue.split('/');
  205. let lv = true;
  206. for (let i of arr) {
  207. if (i.length > 16) {
  208. message.warning('单个标签字数不能超过16个字符')
  209. lv = false;
  210. return;
  211. }
  212. }
  213. if (lv) {
  214. arr = Array.from(new Set(arr));
  215. arr = arr.filter(v => v);
  216. this.setState({
  217. dataArrar: arr,
  218. inputVisible: false,
  219. inputValue: '',
  220. });
  221. }
  222. }
  223. handleClose(removedTag) {
  224. let dataArrar = this.state.dataArrar.filter(tag => { return tag !== removedTag });
  225. this.setState({ dataArrar });
  226. }
  227. handleCloseCooperation(removedTag) {
  228. let dataArrar = this.state.dataArrar.filter(tag => { return tag.value !== removedTag.value });
  229. this.setState({ dataArrar });
  230. }
  231. supervisor(value) {
  232. $.ajax({
  233. method: "get",
  234. dataType: "json",
  235. crossDomain: false,
  236. url: globalConfig.context + '/api/admin/order/getBusinessProjectByName',
  237. data: {
  238. businessName: value
  239. },
  240. success: function (data) {
  241. let thedata = data.data;
  242. if (data.error.length === 0) {
  243. this.setState({
  244. cooperationProjects: thedata,
  245. });
  246. } else {
  247. message.warning(data.error[0].message);
  248. }
  249. }.bind(this),
  250. }).always(
  251. function () {
  252. }.bind(this)
  253. );
  254. }
  255. onSelect(value) {
  256. let arr = this.state.cooperationProjects.filter(v => v.id === value);
  257. let arr1 = this.state.dataArrar.filter(v => v.value === value);
  258. if (arr.length > 0) {
  259. if (arr1.length > 0) {
  260. message.warning('选项已存在');
  261. } else {
  262. this.state.dataArrar.push({
  263. label: arr[0].bname,
  264. value: arr[0].id,
  265. })
  266. this.setState({
  267. dataArrar: this.state.dataArrar
  268. })
  269. }
  270. }
  271. }
  272. render() {
  273. return (
  274. <div style={{
  275. fontSize: 14,
  276. fontWeight: "bold",
  277. marginTop: 20,
  278. }}>
  279. <div style={{
  280. display: 'flex',
  281. alignItems: 'center',
  282. paddingBottom: '5px'
  283. }}>
  284. <div style={{ width: '123px', color: "#58A3FF" }}>统一社会信用代码:</div>
  285. <div style={{ color: "#58A3FF" }}>
  286. {
  287. !this.state.orgCode ? "待补充" : this.state.orgCode
  288. }
  289. </div>
  290. {this.props.type === 'modify' && <Button style={{ marginLeft: '5px' }} type="primary" onClick={(e) => { e.stopPropagation(); this.onChange(3) }}>修改</Button>}
  291. {this.props.type === 'modify' && <span style={{ color: "red", marginLeft: 20 }}>如,科德集团则填写91430105670766451M</span>}
  292. </div>
  293. <div style={{
  294. display: 'flex',
  295. alignItems: 'center',
  296. paddingBottom: '5px'
  297. }}>
  298. <div style={{ width: '123px' }}>省-市-区:</div>
  299. <div>
  300. {
  301. this.state.locationProvince
  302. }
  303. </div>
  304. {this.props.type === 'modify' && <Button style={{ marginLeft: '5px' }} type="primary" onClick={(e) => { e.stopPropagation(); this.onChange(0) }}>修改</Button>}
  305. </div>
  306. <div style={{
  307. display: 'flex',
  308. alignItems: 'center',
  309. paddingBottom: '5px'
  310. }}>
  311. <div style={{ width: '123px' }}>企业主营产品/服务:</div>
  312. <div>
  313. {
  314. this.state.businessScope
  315. }
  316. </div>
  317. {this.props.type === 'modify' && <Button style={{ marginLeft: '5px' }} type="primary" onClick={(e) => { e.stopPropagation(); this.onChange(1) }}>修改</Button>}
  318. </div>
  319. <div style={{
  320. display: 'flex',
  321. alignItems: 'center',
  322. paddingBottom: '5px'
  323. }}>
  324. <div style={{ width: '123px' }}>意向合作项目:</div>
  325. <div>
  326. {
  327. this.state.intendedProject
  328. }
  329. </div>
  330. {this.props.type === 'modify' && <Button style={{ marginLeft: '5px' }} type="primary" onClick={(e) => { e.stopPropagation(); this.onChange(2) }}>修改</Button>}
  331. </div>
  332. <Modal
  333. footer={null}
  334. maskClosable={false}
  335. width={this.props.type === 'journal' ? '1200px' : this.props.type === 'modify' ? '400px' : '800px'}
  336. title={this.props.type === 'journal' ? '操作日志' : this.props.type === 'modify' ? '信息修改' : ''}
  337. visible={this.state.visible}
  338. onCancel={this.onCancel}>
  339. <div>
  340. {this.props.type === 'modify' ?
  341. <div className='enterpriseNameContent'>
  342. <div className='enterpriseNameItem'>
  343. <div className='enterpriseNameTitle'>
  344. {
  345. this.state.changeType === 0 ? '省-市-区' :
  346. this.state.changeType === 1 ? '企业主管产品/服务' :
  347. this.state.changeType === 2 ? '意向合作项目' :
  348. this.state.changeType === 3 ? '统一社会信用代码' : ''
  349. }
  350. :
  351. </div>
  352. <div className='enterpriseNameValue'>
  353. {
  354. this.state.changeType === 0 ? this.state.locationProvince :
  355. this.state.changeType === 1 ? this.state.businessScope :
  356. this.state.changeType === 2 ? this.state.intendedProject :
  357. this.state.changeType === 3 ? this.state.orgCode : ''
  358. }
  359. </div>
  360. </div>
  361. <div className='enterpriseNameItem'>
  362. <div className='enterpriseNameTitle'>更改:</div>
  363. <div className='enterpriseNameValue'>
  364. {
  365. this.state.changeType === 0 ? <Cascader
  366. options={areaSelect()}
  367. placeholder="选择城市"
  368. onChange={(e, pre) => {
  369. this.setState({
  370. dataArrar: e
  371. })
  372. }}
  373. /> :
  374. this.state.changeType === 1 ?
  375. <div>
  376. <div>
  377. {this.state.dataArrar.map((tag) => {
  378. const isLongTag = tag.length > 20;
  379. const tagElem = (
  380. <Tag closable key={tag} afterClose={() => this.handleClose(tag)}>
  381. {isLongTag ? `${tag.slice(0, 20)}...` : tag}
  382. </Tag>
  383. );
  384. return isLongTag ? <Tooltip title={tag} key={tag}>{tagElem}</Tooltip> : tagElem;
  385. })}
  386. {
  387. !this.state.inputVisible &&
  388. <Button
  389. size="small"
  390. type="primary"
  391. onClick={this.showInput}>
  392. + 新增主营产品
  393. </Button>
  394. }
  395. </div>
  396. {this.state.inputVisible && (<div>
  397. <TextArea
  398. style={{ width: '300px', height: '100px' }}
  399. value={this.state.inputValue}
  400. onChange={(e) => {
  401. this.setState({
  402. inputValue: e.target.value
  403. })
  404. }} />
  405. <div style={{ color: '#f00' }}>提示:请用 / 符号隔开关键字</div>
  406. <div>
  407. <Button
  408. size="small"
  409. type="primary"
  410. onClick={this.handleInputConfirm}>
  411. 确定
  412. </Button>
  413. <Button
  414. size="small"
  415. style={{ marginLeft: '5px' }}
  416. onClick={() => {
  417. this.setState({
  418. inputVisible: false,
  419. inputValue: ''
  420. })
  421. }}>
  422. 取消
  423. </Button>
  424. </div>
  425. </div>)}
  426. </div>
  427. :
  428. this.state.changeType === 2 ?
  429. <div>
  430. <div style={{ paddingBottom: this.state.dataArrar.length === 0 ? 0 : '10px' }}>
  431. {this.state.dataArrar.map((tag, index) => {
  432. const isLongTag = tag.label.length > 20;
  433. const tagElem = (
  434. <Tag closable key={tag.label} afterClose={() => this.handleCloseCooperation(tag)}>
  435. {isLongTag ? `${tag.label.slice(0, 20)}...` : tag.label}
  436. </Tag>
  437. );
  438. return isLongTag ? <Tooltip title={tag.label} key={tag.label}>{tagElem}</Tooltip> : tagElem;
  439. })}
  440. </div>
  441. <div>
  442. <AutoComplete
  443. style={{ width: 200 }}
  444. onSearch={this.supervisor}
  445. onSelect={this.onSelect}
  446. placeholder="请输入关键字"
  447. >
  448. {
  449. this.state.cooperationProjects.map(function (item) {
  450. return <Select.Option key={item.id} value={item.id}>{item.bname}</Select.Option>
  451. })
  452. }
  453. </AutoComplete>
  454. </div>
  455. </div>
  456. :
  457. this.state.changeType === 3 ?
  458. <div>
  459. <div>
  460. <Input
  461. style={{ width: 200 }}
  462. placeholder="请输入统一社会信用代码"
  463. onChange={(e) => {
  464. this.setState({
  465. dataArrar: e.target.value
  466. })
  467. }}
  468. />
  469. </div>
  470. <div style={{ color: "red", position: "absolute" }}>如,科德集团则填写91430105670766451M</div>
  471. </div>
  472. : ''
  473. }
  474. </div>
  475. </div>
  476. </div> : this.props.type === 'journal' ?
  477. <div>
  478. <Spin spinning={this.state.loading} >
  479. <Table
  480. columns={this.state.colunmn}
  481. dataSource={this.state.dataSource}
  482. pagination={false}
  483. scroll={{ x: "max-content", y: 0 }}
  484. bordered
  485. size="small"
  486. />
  487. </Spin>
  488. </div> : null
  489. }
  490. {
  491. this.props.type === 'modify' ?
  492. <Popconfirm placement="top" title="确定要修改吗?" onConfirm={(e) => {
  493. e.stopPropagation();
  494. this.onOk();
  495. }} okText="确定" cancelText="取消">
  496. <Button type='primary'>
  497. 确定修改
  498. </Button>
  499. </Popconfirm> : null
  500. }
  501. </div>
  502. </Modal >
  503. </div >
  504. )
  505. }
  506. }
  507. export default InforChange;