businessForm.jsx 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665
  1. import React from 'react';
  2. import $ from 'jquery/src/ajax';
  3. import {
  4. Icon,
  5. Tooltip,
  6. Modal,
  7. message,
  8. Spin,
  9. Upload,
  10. Input,
  11. Select,
  12. Button,
  13. Radio,
  14. Form,
  15. Cascader,
  16. Tag,
  17. InputNumber
  18. } from 'antd';
  19. import { citySelect } from '@/NewDicProvinceListAll';
  20. import { splitUrl ,getReleaseStateList} from '@/tools.js';
  21. //图片组件
  22. const PicturesWall = React.createClass({
  23. getInitialState() {
  24. return {
  25. previewVisible: false,
  26. previewImage: '',
  27. fileList: []
  28. };
  29. },
  30. handleCancel() {
  31. this.setState({ previewVisible: false });
  32. },
  33. handlePreview(file) {
  34. this.setState({
  35. previewImage: file.url || file.thumbUrl,
  36. previewVisible: true
  37. });
  38. },
  39. handleChange(info) {
  40. let fileList = info.fileList;
  41. this.setState({ fileList });
  42. this.props.fileList(fileList);
  43. },
  44. componentWillReceiveProps(nextProps) {
  45. this.state.fileList = nextProps.pictureUrl;
  46. },
  47. render() {
  48. const { previewVisible, previewImage, fileList } = this.state;
  49. const uploadButton = (
  50. <div>
  51. <Icon type="plus" />
  52. <div className="ant-upload-text">点击上传</div>
  53. </div>
  54. );
  55. return (
  56. <div style={{ display: 'inline-block' }}>
  57. <Upload
  58. action={globalConfig.context + '/api/user/jtBusiness/project/uploadPicture'}
  59. data={{ sign: 'jt_project_picture' }}
  60. listType="picture-card"
  61. fileList={fileList}
  62. onPreview={this.handlePreview}
  63. onChange={this.handleChange}
  64. >
  65. {fileList.length >= 1 ? null : uploadButton}
  66. </Upload>
  67. <Modal maskClosable={false} visible={previewVisible} footer={null} onCancel={this.handleCancel}>
  68. <img alt="example" style={{ width: '100%' }} src={previewImage} />
  69. </Modal>
  70. </div>
  71. );
  72. }
  73. });
  74. const DemandDetailForm = Form.create()(
  75. React.createClass({
  76. getInitialState() {
  77. return {
  78. visible: false,
  79. loading: false,
  80. auditStatus: 0,
  81. textFileList: [],
  82. videoFileList: [],
  83. pictureUrl: [],
  84. orgCodeUrl: [],
  85. companyLogoUrl: [],
  86. tags: []
  87. };
  88. },
  89. loadData(id) {
  90. this.setState({
  91. loading: true
  92. });
  93. $.ajax({
  94. method: 'get',
  95. dataType: 'json',
  96. crossDomain: false,
  97. url: globalConfig.context + '/api/user/jtBusiness/project/detail',
  98. data: {
  99. id: id
  100. },
  101. success: function(data) {
  102. if (!data.data) {
  103. if (data.error && data.error.length) {
  104. message.warning(data.error[0].message);
  105. }
  106. } else {
  107. let thisdata = data.data;
  108. let ProvinceCityArr = [];
  109. ProvinceCityArr.push(thisdata.province, thisdata.city);
  110. this.setState({
  111. id: thisdata.id, //业务名称
  112. name: thisdata.name, //业务名称
  113. categoryId: thisdata.categoryId, //业务品类
  114. number: thisdata.number,
  115. price: thisdata.price, //市场价
  116. activityPrice: thisdata.activityPrice ? thisdata.activityPrice : '', //最低折扣
  117. memberPrice: thisdata.memberPrice ? thisdata.memberPrice : '', //会员价
  118. offset: thisdata.offset ? thisdata.offset : '',
  119. activityFlag: thisdata.activityFlag ? thisdata.activityFlag.toString() : '', //活动生效标识
  120. ProvinceCity: ProvinceCityArr,
  121. introduce: thisdata.introduce,
  122. createTime: thisdata.createTime ? new Date(thisdata.createTime).toLocaleString() : '',
  123. value: thisdata.value,
  124. applyConditions: thisdata.applyConditions,
  125. orgCodeUrl: thisdata.minImgUrl
  126. ? splitUrl(thisdata.minImgUrl, ',', globalConfig.avatarHost + '/upload')
  127. : [],
  128. companyLogoUrl: thisdata.maxImgUrl
  129. ? splitUrl(thisdata.maxImgUrl, ',', globalConfig.avatarHost + '/upload')
  130. : []
  131. });
  132. }
  133. }.bind(this)
  134. }).always(
  135. function() {
  136. this.setState({
  137. loading: false
  138. });
  139. }.bind(this)
  140. );
  141. },
  142. //左侧图片地址
  143. getOrgCodeUrl(e) {
  144. this.setState({ orgCodeUrl: e });
  145. },
  146. //右侧图片地址
  147. getCompanyLogoUrl(e) {
  148. this.setState({ companyLogoUrl: e });
  149. },
  150. //编辑部门,保存
  151. handleSubmit(e,index) {
  152. e.preventDefault();
  153. if (!this.state.name) {
  154. message.warning('请输入项目名称');
  155. return;
  156. }
  157. if ((this.state.name).length>16) {
  158. message.warning('项目名称在16个字以内');
  159. return false;
  160. };
  161. if (!this.state.categoryId||!this.state.categoryId[1]) {
  162. message.warning('请选择项目二级业务品类');
  163. return;
  164. }
  165. if (!this.state.ProvinceCity.length) {
  166. message.warning('请选择省份');
  167. return;
  168. }
  169. if (!this.state.price) {
  170. message.warning('请输入正确的市场价');
  171. return;
  172. }
  173. if(this.state.advertisement&&(this.state.advertisement).length>30){
  174. message.warning('项目营销说明字数不得超过30个字。');
  175. return;
  176. }
  177. this.setState({
  178. loading: true
  179. });
  180. let minPictureUrl = [];
  181. if (this.state.orgCodeUrl.length) {
  182. let picArr = [];
  183. this.state.orgCodeUrl.map(function(item) {
  184. if (item.response && item.response.data && item.response.data.length) {
  185. picArr.push(item.response.data);
  186. }
  187. });
  188. minPictureUrl = picArr.join(',');
  189. }
  190. let maxPictureUrl = [];
  191. if (this.state.companyLogoUrl.length) {
  192. let picArr = [];
  193. this.state.companyLogoUrl.map(function(item) {
  194. if (item.response && item.response.data && item.response.data.length) {
  195. picArr.push(item.response.data);
  196. }
  197. });
  198. maxPictureUrl = picArr.join(',');
  199. }
  200. $.ajax({
  201. method: 'post',
  202. dataType: 'json',
  203. crossDomain: false,
  204. url: globalConfig.context + '/api/user/jtBusiness/project/update',
  205. data: {
  206. auditStatus:index,
  207. id: this.state.id, //业务名称
  208. name: this.state.name, //业务名称
  209. categoryId: this.state.categoryId[1], //业务品类
  210. price: this.state.price, //市场价
  211. advertisement:this.state.advertisement,//项目营销说明
  212. activityPrice: this.state.activityPrice ? this.state.activityPrice : '0', //最低折扣
  213. memberPrice: this.state.memberPrice ? this.state.memberPrice : '0', //会员价
  214. offset: this.state.offset ? this.state.offset : '0',
  215. activityFlag: this.state.activityFlag, //活动生效标识
  216. province: this.state.ProvinceCity ? this.state.ProvinceCity[0] : '', //是否全国
  217. city: this.state.ProvinceCity ? this.state.ProvinceCity[1] : '',
  218. introduce: this.state.introduce,
  219. value: this.state.value,
  220. isHot: this.state.isHot,
  221. minImgUrl: minPictureUrl.length ? minPictureUrl : '',
  222. maxImgUrl: maxPictureUrl.length ? maxPictureUrl : '',
  223. applyConditions: this.state.applyConditions
  224. }
  225. }).done(
  226. function(data) {
  227. if (!data.error.length) {
  228. message.success('保存成功!');
  229. this.setState({
  230. loading: false,
  231. editvisible: false
  232. });
  233. } else {
  234. message.warning(data.error[0].message);
  235. }
  236. this.props.handOk();
  237. }.bind(this)
  238. );
  239. },
  240. loadData(ids) {
  241. $.ajax({
  242. method: 'get',
  243. dataType: 'json',
  244. crossDomain: false,
  245. url: globalConfig.context + '/api/user/jtBusiness/project/detail',
  246. data: {
  247. id: ids
  248. },
  249. success: function(data) {
  250. if (!data.data) {
  251. if (data.error && data.error.length) {
  252. message.warning(data.error[0].message);
  253. }
  254. } else {
  255. let categoryIdArr=[];
  256. let thisdata = data.data;
  257. let ProvinceCityArr = [];
  258. ProvinceCityArr.push(thisdata.province, thisdata.city);
  259. (this.props.categoryList).map(item=>{
  260. if(item.children.length){
  261. (item.children).map(atem=>{
  262. if(atem.value==thisdata.categoryId){
  263. categoryIdArr.push(item.value,atem.value)
  264. }
  265. })
  266. }
  267. })
  268. this.setState({
  269. id: thisdata.id, //业务名称
  270. name: thisdata.name, //业务名称
  271. categoryId: categoryIdArr, //业务品类
  272. number: thisdata.number,
  273. auditInfo:thisdata.auditInfo,
  274. price: thisdata.price, //市场价
  275. activityPrice: thisdata.activityPrice ? thisdata.activityPrice : '', //最低折扣
  276. memberPrice: thisdata.memberPrice ? thisdata.memberPrice : '', //会员价
  277. offset: thisdata.offset ? thisdata.offset : '',
  278. activityFlag: thisdata.activityFlag ? thisdata.activityFlag.toString() : '', //活动生效标识
  279. ProvinceCity: ProvinceCityArr,
  280. introduce: thisdata.introduce,
  281. createTime: thisdata.createTime ? new Date(thisdata.createTime).toLocaleString() : '',
  282. value: thisdata.value,
  283. isHot:thisdata.isHot,
  284. auditStatus:thisdata.auditStatus,
  285. applyConditions: thisdata.applyConditions,
  286. orgCodeUrl: thisdata.minImgUrl
  287. ? splitUrl(thisdata.minImgUrl, ',', globalConfig.avatarHost + '/upload')
  288. : [],
  289. companyLogoUrl: thisdata.maxImgUrl
  290. ? splitUrl(thisdata.maxImgUrl, ',', globalConfig.avatarHost + '/upload')
  291. : []
  292. });
  293. }
  294. }.bind(this)
  295. }).always(
  296. function() {
  297. this.setState({
  298. loading: false
  299. });
  300. }.bind(this)
  301. );
  302. },
  303. submission(e, index) {
  304. this.handleSubmit(e, index);
  305. $.ajax({
  306. method: 'get',
  307. dataType: 'json',
  308. crossDomain: false,
  309. async: true,
  310. url: globalConfig.context + '/api/user/jtBusiness/project/publish',
  311. data: {
  312. id: this.state.id,
  313. auditStatus:1
  314. }
  315. }).done(
  316. function(data) {
  317. if (!data.error.length) {
  318. this.setState({
  319. loading: false
  320. });
  321. } else {
  322. message.warning(data.error[0].message);
  323. }
  324. }.bind(this)
  325. );
  326. },
  327. cancelFun() {
  328. this.props.closeDesc();
  329. },
  330. componentWillMount() {
  331. if (this.props.data.id) {
  332. this.loadData(this.props.data.id);
  333. }
  334. },
  335. componentWillReceiveProps(nextProps) {
  336. if (!this.props.visible && nextProps.visible) {
  337. this.state.textFileList = [];
  338. this.state.videoFileList = [];
  339. if (nextProps.data.id) {
  340. this.loadData(nextProps.data.id);
  341. }
  342. }
  343. },
  344. render() {
  345. const FormItem = Form.Item;
  346. let categoryList = this.props.categoryList||[];
  347. return (
  348. <div className="patent-desc">
  349. <Form layout="horizontal" onSubmit={(e)=>{this.handleSubmit(e,0)}} id="demand-form">
  350. <Spin spinning={this.state.loading}>
  351. <div className="clearfix" style={{ paddingLeft: '86px' }}>
  352. <FormItem
  353. className="half-item"
  354. labelCol={{ span: 4 }}
  355. wrapperCol={{ span: 12 }}
  356. label={
  357. <span>
  358. <strong style={{ color: 'red' }}>*</strong>项目名称
  359. </span>
  360. }
  361. >
  362. <Input
  363. placeholder="项目名称"
  364. value={this.state.name}
  365. onChange={(e) => {
  366. this.setState({ name: e.target.value });
  367. }}
  368. />
  369. </FormItem>
  370. <FormItem
  371. className="half-item"
  372. labelCol={{ span: 4 }}
  373. wrapperCol={{ span: 12 }}
  374. label={
  375. <span>
  376. <strong style={{ color: 'red' }}>*</strong>业务品类
  377. </span>
  378. }
  379. >
  380. <Cascader
  381. options={categoryList}
  382. value={this.state.categoryId}
  383. placeholder="业务品类"
  384. onChange={(e, pre) => {
  385. this.setState({ categoryId: e });
  386. }}
  387. />
  388. </FormItem>
  389. </div>
  390. <div className="clearfix" style={{ paddingLeft: '86px' }}>
  391. <FormItem
  392. className="half-item"
  393. labelCol={{ span: 4 }}
  394. wrapperCol={{ span: 12 }}
  395. label={
  396. <span>
  397. <strong style={{ color: 'red' }}>*</strong>省-市
  398. </span>
  399. }
  400. >
  401. <Cascader
  402. options={citySelect()}
  403. value={this.state.ProvinceCity}
  404. placeholder="选择市"
  405. onChange={(e, pre) => {
  406. this.setState({ ProvinceCity: e });
  407. }}
  408. />
  409. </FormItem>
  410. <FormItem
  411. className="half-item"
  412. labelCol={{ span: 4 }}
  413. wrapperCol={{ span: 12 }}
  414. label={
  415. <span>
  416. <strong style={{ color: 'red' }}>*</strong>热点
  417. </span>
  418. }
  419. >
  420. <Radio.Group
  421. onChange={(e) => {
  422. this.setState({ isHot: e.target.value });
  423. }}
  424. value={this.state.isHot}
  425. >
  426. <Radio value={0}>否</Radio>
  427. <Radio value={1}>是</Radio>
  428. </Radio.Group>
  429. </FormItem>
  430. </div>
  431. <div className="clearfix" style={{ paddingLeft: '86px' }}>
  432. <FormItem
  433. className="half-item"
  434. labelCol={{ span: 4 }}
  435. wrapperCol={{ span: 12 }}
  436. label={
  437. <span>
  438. <strong style={{ color: 'red' }}>*</strong>市场价
  439. </span>
  440. }
  441. >
  442. <InputNumber
  443. placeholder="市场价"
  444. value={this.state.price}
  445. style={{ width: 120 }}
  446. onChange={(e) => {
  447. this.setState({ price: e });
  448. }}
  449. required="required"
  450. />
  451. <span style={{ marginLeft: 10 }}>万元</span>
  452. </FormItem>
  453. <FormItem
  454. className="half-item"
  455. labelCol={{ span: 4 }}
  456. wrapperCol={{ span: 12 }}
  457. label="活动价"
  458. >
  459. <InputNumber
  460. placeholder="活动价"
  461. value={this.state.activityPrice}
  462. style={{ width: 120 }}
  463. onChange={(e) => {
  464. this.setState({ activityPrice: e });
  465. }}
  466. min={0}
  467. max={999999}
  468. step={0.01}
  469. />
  470. <span style={{ marginLeft: 10 }}>万元</span>
  471. </FormItem>
  472. <FormItem
  473. className="half-item"
  474. labelCol={{ span: 4 }}
  475. wrapperCol={{ span: 12 }}
  476. label="最低折扣"
  477. >
  478. <InputNumber
  479. placeholder="最低折扣(如:0.5)"
  480. value={this.state.offset}
  481. style={{ width: '50%' }}
  482. onChange={(e) => {
  483. this.setState({ offset: e });
  484. }}
  485. min={0}
  486. max={1}
  487. step={0.01}
  488. />
  489. </FormItem>
  490. <FormItem
  491. className="half-item"
  492. labelCol={{ span: 4 }}
  493. wrapperCol={{ span: 12 }}
  494. label="会员价"
  495. >
  496. <InputNumber
  497. placeholder="会员价"
  498. value={this.state.memberPrice}
  499. style={{ width: '120px' }}
  500. onChange={(e) => {
  501. this.setState({ memberPrice: e });
  502. }}
  503. min={0}
  504. max={999999}
  505. step={0.01}
  506. />
  507. <span style={{ marginLeft: 10 }}>万元</span>
  508. </FormItem>
  509. <FormItem
  510. className="half-item"
  511. labelCol={{ span: 4 }}
  512. wrapperCol={{ span: 12 }}
  513. label="活动生效"
  514. >
  515. <Select
  516. placeholder="活动生效"
  517. value={this.state.activityFlag}
  518. style={{ width: '94%' }}
  519. onChange={(e) => {
  520. this.setState({ activityFlag: e });
  521. }}
  522. >
  523. <Select.Option key="0">无效</Select.Option>
  524. <Select.Option key="1">有效</Select.Option>
  525. </Select>
  526. </FormItem>
  527. <FormItem
  528. className="half-item"
  529. labelCol={{ span: 4 }}
  530. wrapperCol={{ span: 12 }}
  531. label="创建时间"
  532. >
  533. <span style={{ width: '94%' }}>{this.state.createTime}</span>
  534. </FormItem>
  535. <FormItem
  536. className="half-item"
  537. labelCol={{ span: 4 }}
  538. wrapperCol={{ span: 12 }}
  539. label="发布状态">
  540. <span>{getReleaseStateList(this.state.auditStatus)}</span>
  541. </FormItem>
  542. </div>
  543. <div className="clearfix">
  544. {this.state.auditInfo?<FormItem
  545. labelCol={{ span: 4 }}
  546. wrapperCol={{ span: 12 }}
  547. label="拒绝原因">
  548. <span>{this.state.auditInfo}</span>
  549. </FormItem>:''}
  550. </div>
  551. <div className="clearfix">
  552. <FormItem labelCol={{ span: 4 }} wrapperCol={{ span: 12 }} label="业务项目服务内容">
  553. <Input
  554. type="textarea"
  555. rows={4}
  556. placeholder="业务项目服务内容"
  557. value={this.state.introduce}
  558. onChange={(e) => {
  559. this.setState({ introduce: e.target.value });
  560. }}
  561. />
  562. </FormItem>
  563. </div>
  564. <div className="clearfix">
  565. <FormItem labelCol={{ span: 4 }} wrapperCol={{ span: 12 }} label="项目营销说明">
  566. <Input
  567. type="textarea"
  568. rows={4}
  569. placeholder="项目营销说明"
  570. value={this.state.advertisement}
  571. onChange={(e) => {
  572. this.setState({ advertisement: e.target.value });
  573. }}
  574. />
  575. </FormItem>
  576. </div>
  577. <div className="clearfix">
  578. <FormItem labelCol={{ span: 4 }} wrapperCol={{ span: 12 }} label="业务项目价值及作用">
  579. <Input
  580. type="textarea"
  581. rows={4}
  582. placeholder="业务项目价值及作用"
  583. value={this.state.value}
  584. onChange={(e) => {
  585. this.setState({ value: e.target.value });
  586. }}
  587. />
  588. </FormItem>
  589. </div>
  590. <div className="clearfix">
  591. <FormItem labelCol={{ span: 4 }} wrapperCol={{ span: 12 }} label="业务项目客户基本条件">
  592. <Input
  593. type="textarea"
  594. rows={4}
  595. placeholder="业务项目客户基本条件"
  596. value={this.state.applyConditions}
  597. onChange={(e) => {
  598. this.setState({ applyConditions: e.target.value });
  599. }}
  600. />
  601. </FormItem>
  602. </div>
  603. <div className="clearfix pictures">
  604. <FormItem
  605. className="half-item"
  606. labelCol={{ span: 8 }}
  607. wrapperCol={{ span: 10 }}
  608. label="业务项目图标(小)"
  609. >
  610. <PicturesWall
  611. pictureSign="business_project_min_picture"
  612. fileList={this.getOrgCodeUrl}
  613. pictureUrl={this.state.orgCodeUrl}
  614. />
  615. <p>图片建议:图片要清晰。(72*72)</p>
  616. </FormItem>
  617. <FormItem
  618. className="half-item"
  619. labelCol={{ span: 8 }}
  620. wrapperCol={{ span: 12 }}
  621. label="业务项目图标(大)"
  622. >
  623. <PicturesWall
  624. pictureSign="business_project_max_picture"
  625. fileList={this.getCompanyLogoUrl}
  626. pictureUrl={this.state.companyLogoUrl}
  627. />
  628. <p>图片建议:图片要清晰。(330*230)</p>
  629. </FormItem>
  630. </div>
  631. <Button
  632. className="set-submit"
  633. type="primary"
  634. htmlType="submit"
  635. style={{ marginLeft: '160px', marginBottom: '20px', marginTop: '20px' }}
  636. >
  637. 保存
  638. </Button>
  639. <Button
  640. className="set-submit"
  641. type="ghost"
  642. onClick={(e) => {
  643. this.submission(e,1)
  644. }}
  645. >
  646. 提交审核
  647. </Button>
  648. <Button
  649. className="set-submit"
  650. type="ghost"
  651. onClick={this.cancelFun}
  652. >
  653. 取消
  654. </Button>
  655. </Spin>
  656. </Form>
  657. </div>
  658. );
  659. }
  660. })
  661. );
  662. export default DemandDetailForm;