businessForm.jsx 19 KB

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