inforChange.jsx 25 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528
  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. this.props.onCancel();
  153. }
  154. $.ajax({
  155. url: globalConfig.context + "/api/admin/customer/updateUserDate",
  156. method: "post",
  157. data: data
  158. }).done(
  159. function (data) {
  160. this.setState({
  161. loading: false
  162. });
  163. if (data.error.length === 0) {
  164. message.success("恭喜您,更改成功!");
  165. if (this.state.changeType === 0) {
  166. this.setState({
  167. locationProvince: getProvince(dataArrar[0], dataArrar[1], dataArrar[2])
  168. })
  169. }
  170. if (this.state.changeType === 1) {
  171. this.setState({
  172. businessScope: dataArrar.join(',')
  173. })
  174. }
  175. if (this.state.changeType === 2) {
  176. let arr = [];
  177. for (let i of dataArrar) {
  178. arr.push(i.label)
  179. }
  180. this.setState({
  181. intendedProject: arr.join(',')
  182. })
  183. }
  184. if (this.state.changeType === 3) {
  185. this.setState({
  186. orgCode: dataArrar
  187. })
  188. this.props.onCancel();
  189. }
  190. this.onCancel();
  191. } else {
  192. message.warning(data.error[0].message);
  193. }
  194. }.bind(this)
  195. )
  196. }
  197. showInput() {
  198. let str = this.state.dataArrar.join('/')
  199. this.setState({
  200. inputVisible: true,
  201. inputValue: str
  202. });
  203. }
  204. handleInputConfirm() {
  205. let inputValue = this.state.inputValue;
  206. let arr = inputValue.split('/');
  207. let lv = true;
  208. for (let i of arr) {
  209. if (i.length > 16) {
  210. message.warning('单个标签字数不能超过16个字符')
  211. lv = false;
  212. return;
  213. }
  214. }
  215. if (lv) {
  216. arr = Array.from(new Set(arr));
  217. arr = arr.filter(v => v);
  218. this.setState({
  219. dataArrar: arr,
  220. inputVisible: false,
  221. inputValue: '',
  222. });
  223. }
  224. }
  225. handleClose(removedTag) {
  226. let dataArrar = this.state.dataArrar.filter(tag => { return tag !== removedTag });
  227. this.setState({ dataArrar });
  228. }
  229. handleCloseCooperation(removedTag) {
  230. let dataArrar = this.state.dataArrar.filter(tag => { return tag.value !== removedTag.value });
  231. this.setState({ dataArrar });
  232. }
  233. supervisor(value) {
  234. $.ajax({
  235. method: "get",
  236. dataType: "json",
  237. crossDomain: false,
  238. url: globalConfig.context + '/api/admin/order/getBusinessProjectByName',
  239. data: {
  240. businessName: value
  241. },
  242. success: function (data) {
  243. let thedata = data.data;
  244. if (data.error.length === 0) {
  245. this.setState({
  246. cooperationProjects: thedata,
  247. });
  248. } else {
  249. message.warning(data.error[0].message);
  250. }
  251. }.bind(this),
  252. }).always(
  253. function () {
  254. }.bind(this)
  255. );
  256. }
  257. onSelect(value) {
  258. let arr = this.state.cooperationProjects.filter(v => v.id === value);
  259. let arr1 = this.state.dataArrar.filter(v => v.value === value);
  260. if (arr.length > 0) {
  261. if (arr1.length > 0) {
  262. message.warning('选项已存在');
  263. } else {
  264. this.state.dataArrar.push({
  265. label: arr[0].bname,
  266. value: arr[0].id,
  267. })
  268. this.setState({
  269. dataArrar: this.state.dataArrar
  270. })
  271. }
  272. }
  273. }
  274. render() {
  275. return (
  276. <div style={{
  277. fontSize: 14,
  278. fontWeight: "bold",
  279. marginTop: 20,
  280. }}>
  281. <div style={{
  282. display: 'flex',
  283. alignItems: 'center',
  284. paddingBottom: '5px'
  285. }}>
  286. <div style={{ width: '123px', color: "#58A3FF" }}>统一社会信用代码:</div>
  287. <div style={{ color: "#58A3FF" }}>
  288. {
  289. !this.state.orgCode ? "待补充" : this.state.orgCode
  290. }
  291. </div>
  292. {this.props.type === 'modify' && <Button style={{ marginLeft: '5px' }} type="primary" onClick={(e) => { e.stopPropagation(); this.onChange(3) }}>修改</Button>}
  293. {this.props.type === 'modify' && <span style={{ color: "red", marginLeft: 20 }}>如,科德集团则填写91430105670766451M</span>}
  294. </div>
  295. <div style={{
  296. display: 'flex',
  297. alignItems: 'center',
  298. paddingBottom: '5px'
  299. }}>
  300. <div style={{ width: '123px' }}>省-市-区:</div>
  301. <div>
  302. {
  303. this.state.locationProvince
  304. }
  305. </div>
  306. {this.props.type === 'modify' && <Button style={{ marginLeft: '5px' }} type="primary" onClick={(e) => { e.stopPropagation(); this.onChange(0) }}>修改</Button>}
  307. </div>
  308. <div style={{
  309. display: 'flex',
  310. alignItems: 'center',
  311. paddingBottom: '5px'
  312. }}>
  313. <div style={{ width: '123px' }}>企业主营产品/服务:</div>
  314. <div>
  315. {
  316. this.state.businessScope
  317. }
  318. </div>
  319. {this.props.type === 'modify' && <Button style={{ marginLeft: '5px' }} type="primary" onClick={(e) => { e.stopPropagation(); this.onChange(1) }}>修改</Button>}
  320. </div>
  321. <div style={{
  322. display: 'flex',
  323. alignItems: 'center',
  324. paddingBottom: '5px'
  325. }}>
  326. <div style={{ width: '123px' }}>意向合作项目:</div>
  327. <div>
  328. {
  329. this.state.intendedProject
  330. }
  331. </div>
  332. {this.props.type === 'modify' && <Button style={{ marginLeft: '5px' }} type="primary" onClick={(e) => { e.stopPropagation(); this.onChange(2) }}>修改</Button>}
  333. </div>
  334. <Modal
  335. footer={null}
  336. maskClosable={false}
  337. width={this.props.type === 'journal' ? '1200px' : this.props.type === 'modify' ? '400px' : '800px'}
  338. title={this.props.type === 'journal' ? '操作日志' : this.props.type === 'modify' ? '信息修改' : ''}
  339. visible={this.state.visible}
  340. onCancel={this.onCancel}>
  341. <div>
  342. {this.props.type === 'modify' ?
  343. <div className='enterpriseNameContent'>
  344. <div className='enterpriseNameItem'>
  345. <div className='enterpriseNameTitle'>
  346. {
  347. this.state.changeType === 0 ? '省-市-区' :
  348. this.state.changeType === 1 ? '企业主管产品/服务' :
  349. this.state.changeType === 2 ? '意向合作项目' :
  350. this.state.changeType === 3 ? '统一社会信用代码' : ''
  351. }
  352. :
  353. </div>
  354. <div className='enterpriseNameValue'>
  355. {
  356. this.state.changeType === 0 ? this.state.locationProvince :
  357. this.state.changeType === 1 ? this.state.businessScope :
  358. this.state.changeType === 2 ? this.state.intendedProject :
  359. this.state.changeType === 3 ? this.state.orgCode : ''
  360. }
  361. </div>
  362. </div>
  363. <div className='enterpriseNameItem'>
  364. <div className='enterpriseNameTitle'>更改:</div>
  365. <div className='enterpriseNameValue'>
  366. {
  367. this.state.changeType === 0 ? <Cascader
  368. options={areaSelect()}
  369. placeholder="选择城市"
  370. onChange={(e, pre) => {
  371. this.setState({
  372. dataArrar: e
  373. })
  374. }}
  375. /> :
  376. this.state.changeType === 1 ?
  377. <div>
  378. <div>
  379. {this.state.dataArrar.map((tag) => {
  380. const isLongTag = tag.length > 20;
  381. const tagElem = (
  382. <Tag closable key={tag} afterClose={() => this.handleClose(tag)}>
  383. {isLongTag ? `${tag.slice(0, 20)}...` : tag}
  384. </Tag>
  385. );
  386. return isLongTag ? <Tooltip title={tag} key={tag}>{tagElem}</Tooltip> : tagElem;
  387. })}
  388. {
  389. !this.state.inputVisible &&
  390. <Button
  391. size="small"
  392. type="primary"
  393. onClick={this.showInput}>
  394. + 新增主营产品
  395. </Button>
  396. }
  397. </div>
  398. {this.state.inputVisible && (<div>
  399. <TextArea
  400. style={{ width: '300px', height: '100px' }}
  401. value={this.state.inputValue}
  402. onChange={(e) => {
  403. this.setState({
  404. inputValue: e.target.value
  405. })
  406. }} />
  407. <div style={{ color: '#f00' }}>提示:请用 / 符号隔开关键字</div>
  408. <div>
  409. <Button
  410. size="small"
  411. type="primary"
  412. onClick={this.handleInputConfirm}>
  413. 确定
  414. </Button>
  415. <Button
  416. size="small"
  417. style={{ marginLeft: '5px' }}
  418. onClick={() => {
  419. this.setState({
  420. inputVisible: false,
  421. inputValue: ''
  422. })
  423. }}>
  424. 取消
  425. </Button>
  426. </div>
  427. </div>)}
  428. </div>
  429. :
  430. this.state.changeType === 2 ?
  431. <div>
  432. <div style={{ paddingBottom: this.state.dataArrar.length === 0 ? 0 : '10px' }}>
  433. {this.state.dataArrar.map((tag, index) => {
  434. const isLongTag = tag.label.length > 20;
  435. const tagElem = (
  436. <Tag closable key={tag.label} afterClose={() => this.handleCloseCooperation(tag)}>
  437. {isLongTag ? `${tag.label.slice(0, 20)}...` : tag.label}
  438. </Tag>
  439. );
  440. return isLongTag ? <Tooltip title={tag.label} key={tag.label}>{tagElem}</Tooltip> : tagElem;
  441. })}
  442. </div>
  443. <div>
  444. <AutoComplete
  445. style={{ width: 200 }}
  446. onSearch={this.supervisor}
  447. onSelect={this.onSelect}
  448. placeholder="请输入关键字"
  449. >
  450. {
  451. this.state.cooperationProjects.map(function (item) {
  452. return <Select.Option key={item.id} value={item.id}>{item.bname}</Select.Option>
  453. })
  454. }
  455. </AutoComplete>
  456. </div>
  457. </div>
  458. :
  459. this.state.changeType === 3 ?
  460. <div>
  461. <div>
  462. <Input
  463. style={{ width: 200 }}
  464. placeholder="请输入统一社会信用代码"
  465. onChange={(e) => {
  466. this.setState({
  467. dataArrar: e.target.value
  468. })
  469. }}
  470. />
  471. </div>
  472. <div style={{ color: "red", position: "absolute" }}>如,科德集团则填写91430105670766451M</div>
  473. </div>
  474. : ''
  475. }
  476. </div>
  477. </div>
  478. </div> : this.props.type === 'journal' ?
  479. <div>
  480. <Spin spinning={this.state.loading} >
  481. <Table
  482. columns={this.state.colunmn}
  483. dataSource={this.state.dataSource}
  484. pagination={false}
  485. scroll={{ x: "max-content", y: 0 }}
  486. bordered
  487. size="small"
  488. />
  489. </Spin>
  490. </div> : null
  491. }
  492. {
  493. this.props.type === 'modify' ?
  494. <Popconfirm placement="top" title="确定要修改吗?" onConfirm={(e) => {
  495. e.stopPropagation();
  496. this.onOk();
  497. }} okText="确定" cancelText="取消">
  498. <Button type='primary'>
  499. 确定修改
  500. </Button>
  501. </Popconfirm> : null
  502. }
  503. </div>
  504. </Modal >
  505. </div >
  506. )
  507. }
  508. }
  509. export default InforChange;