businessForm.jsx 22 KB

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