vip.jsx 26 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798
  1. import React, { Component } from "react";
  2. import { AutoComplete, Button, Form, Input, message, Modal, Select, Spin, Tag, Radio } from "antd";
  3. import $ from "jquery";
  4. import ImgList from "../../common/imgList";
  5. import { splitUrl } from "../../tools";
  6. import { vipYear } from "../../dataDic";
  7. const FormItem = Form.Item;
  8. const Option = Select.Option;
  9. const RadioGroup = Radio.Group;
  10. const formItemLayout = {
  11. labelCol: { span: 8 },
  12. wrapperCol: { span: 14 },
  13. };
  14. const PicturesWall = React.createClass({
  15. getInitialState() {
  16. return {
  17. previewVisible: false,
  18. previewImage: "",
  19. fileList: this.props.pictureUrl,
  20. };
  21. },
  22. getDefaultProps() {
  23. return {
  24. changeClick: this.modifyChange,
  25. };
  26. },
  27. handleCancel() {
  28. this.setState({ previewVisible: false });
  29. },
  30. handlePreview(file) {
  31. this.setState({
  32. previewImage: file.url || file.thumbUrl,
  33. previewVisible: true,
  34. });
  35. },
  36. handleChange(info) {
  37. let fileList = info.fileList;
  38. this.setState({ fileList });
  39. this.props.fileList(fileList);
  40. },
  41. componentWillReceiveProps(nextProps) {
  42. this.state.fileList = nextProps.pictureUrl;
  43. },
  44. render() {
  45. const { fileList } = this.state;
  46. return (
  47. <div style={{ display: "inline-block" }}>
  48. <ImgList
  49. domId={this.props.domId}
  50. uploadConfig={{
  51. action: globalConfig.context + "/api/admin/orderProject/uploadMemberFile",
  52. data: { sign: "order_invoice_file" },
  53. multiple: true,
  54. listType: "picture-card",
  55. }}
  56. onChange={(infor) => {
  57. this.handleChange(infor);
  58. }}
  59. fileList={fileList}
  60. />
  61. </div>
  62. );
  63. },
  64. });
  65. class ProjectOperationVip extends Component {
  66. constructor(props) {
  67. super(props);
  68. this.state = {
  69. commodityName: '',
  70. commodityQuantity: 1,
  71. patentType: 0,
  72. officialCost: '',
  73. costReduction: '',
  74. commodityPrice: '',
  75. main: '',
  76. taskComment: '',
  77. declarationBatch: '',
  78. ifCertificationFee: '',
  79. displayFees: "none",
  80. customerArr: [],
  81. patentTypeList: [],
  82. loading: false,
  83. patentTransfer: props.dataInfor ? props.dataInfor.patentTransfer : 0, //收否为专利转让 0 否 1 是
  84. orgCodeUrl: [],
  85. serviceLife: [],
  86. histYear: [], //已派年份
  87. isEdit: false,//是否可编辑
  88. addyear: undefined,//
  89. isGive: 0,//是否赠送
  90. }
  91. this.onSubmit = this.onSubmit.bind(this);
  92. this.httpChange = this.httpChange.bind(this);
  93. this.selectAuto = this.selectAuto.bind(this);
  94. this.setValue = this.setValue.bind(this);
  95. this.getOrgCodeUrl = this.getOrgCodeUrl.bind(this);
  96. }
  97. componentDidMount() {
  98. this.setValue();
  99. }
  100. setValue() {
  101. const { dataInfor } = this.props;
  102. if (!(dataInfor && Object.keys(dataInfor).length > 0)) {
  103. } else {
  104. this.setState({
  105. fid: dataInfor.id,
  106. commodityId: dataInfor.commodityId, //项目ID
  107. commodityName: dataInfor.commodityName, //项目名称
  108. commodityQuantity: dataInfor.commodityQuantity, // 数量
  109. memberType: dataInfor.memberType.toString(),// 付款情况
  110. taskComment: dataInfor.taskComment, // 备注
  111. orgCodeUrl: dataInfor.pictureUrl ? splitUrl(dataInfor.pictureUrl, ",", globalConfig.avatarHost + "/upload") : [],// 附件
  112. yearSum: dataInfor.yearSum,//会员总服务年限
  113. serviceLife: JSON.parse(dataInfor.serviceLife) || [],//会员服务年限
  114. serviceYear: dataInfor.serviceYear,//本次派单
  115. contract_term: dataInfor.contract_term,//合同期
  116. });
  117. }
  118. }
  119. //
  120. getOrgCodeUrl(e) {
  121. this.setState({ orgCodeUrl: e });
  122. }
  123. // 新建会员项目
  124. onSubmit() {
  125. let pictureUrl = [];
  126. if (this.state.orgCodeUrl.length) {
  127. let picArr = [];
  128. this.state.orgCodeUrl.map(function (item) {
  129. if (
  130. item.response &&
  131. item.response.data &&
  132. item.response.data.length
  133. ) {
  134. picArr.push(item.response.data);
  135. }
  136. });
  137. pictureUrl = picArr.join(",");
  138. }
  139. if (this.state.commodityId === undefined || !this.state.commodityId) {
  140. message.warning("服务名称不匹配!");
  141. return
  142. }
  143. let reg = /^([0]|[1-9][0-9]*)$/;
  144. if (
  145. !this.state.commodityQuantity ||
  146. !reg.test(this.state.commodityQuantity)
  147. ) {
  148. message.warning("请输入正确商品数量!");
  149. return
  150. }
  151. if (this.state.memberType === undefined) {
  152. message.warning("请选择付款情况!");
  153. return
  154. }
  155. if (this.state.yearSum === undefined) {
  156. message.warning("请选择会员总服务年限!");
  157. return
  158. }
  159. if (this.state.serviceLife.length === 0) {
  160. message.warning("请添加会员服务年限!");
  161. return
  162. }
  163. if (this.state.serviceLife.length != this.state.yearSum) {
  164. message.warning("会员服务年限与总年限不符合!");
  165. return
  166. }
  167. if (this.state.serviceYear === undefined) {
  168. message.warning("请选择本次派单年份!");
  169. return
  170. }
  171. if (this.state.contract_term.length === 0) {
  172. message.warning("请添加合同期!");
  173. return
  174. }
  175. if (this.state.memberType == "1" || this.state.memberType == "2") {
  176. if (typeof pictureUrl !== "string") {
  177. message.warning("请上传附件!");
  178. return
  179. }
  180. }
  181. this.setState({
  182. loading: true,
  183. });
  184. let infor = {
  185. orderNo: this.props.orderNo, //订单编号
  186. commodityId: this.state.commodityId, //项目编号
  187. commodityName: this.state.commodityName, //项目名称
  188. commodityQuantity: this.state.commodityQuantity, //商品数量
  189. commodityPrice: 0, //签单总价
  190. taskComment: this.state.taskComment, //服务说明
  191. memberType: this.state.memberType,//会员付款状态
  192. yearSum: this.state.yearSum,//会员总服务年限
  193. serviceLife: JSON.stringify(this.state.serviceLife),//会员服务年限
  194. serviceYear: this.state.serviceYear,//本次派单
  195. contract_term: JSON.stringify(this.state.contract_term),//合同期
  196. pictureUrl: pictureUrl.length ? pictureUrl : "",//附件
  197. }
  198. $.ajax({
  199. method: "POST",
  200. dataType: "json",
  201. crossDomain: false,
  202. url: globalConfig.context + "/api/admin/orderProject/addMemberProject",
  203. data: infor,
  204. }).done(
  205. function (data) {
  206. this.setState({
  207. loading: false,
  208. });
  209. if (!data.error.length) {
  210. Modal.success({
  211. title: '保存成功!',
  212. content: (
  213. <div>
  214. 已提出会员项目申请!请在
  215. <span style={{ color: "red" }}>“订单管理-我的会员项目“</span>
  216. 跟进查看会员项目的审核状态,审核通过,即表示添加会员项目完成!!!
  217. </div>),
  218. });
  219. this.props.onCancel();
  220. } else {
  221. message.warning(data.error[0].message);
  222. }
  223. }.bind(this)
  224. );
  225. }
  226. // 修改会员项目
  227. onChange() {
  228. let pictureUrl = [];
  229. if (this.state.orgCodeUrl.length) {
  230. let picArr = [];
  231. this.state.orgCodeUrl.map(function (item) {
  232. if (
  233. item.response &&
  234. item.response.data &&
  235. item.response.data.length
  236. ) {
  237. picArr.push(item.response.data);
  238. }
  239. });
  240. pictureUrl = picArr.join(",");
  241. }
  242. if (this.state.commodityId === undefined || !this.state.commodityId) {
  243. message.warning("服务名称不匹配!");
  244. return
  245. }
  246. let reg = /^([0]|[1-9][0-9]*)$/;
  247. if (
  248. !this.state.commodityQuantity ||
  249. !reg.test(this.state.commodityQuantity)
  250. ) {
  251. message.warning("请输入正确商品数量!");
  252. return false;
  253. }
  254. if (this.state.memberType === undefined) {
  255. message.warning("请选择付款情况!");
  256. return
  257. }
  258. if (this.state.yearSum === undefined) {
  259. message.warning("请选择会员总服务年限!");
  260. return
  261. }
  262. if (this.state.serviceLife.length === 0) {
  263. message.warning("请添加会员服务年限!");
  264. return
  265. }
  266. if (this.state.serviceLife.length != this.state.yearSum) {
  267. message.warning("会员服务年限与总年限不符合!");
  268. return
  269. }
  270. if (this.state.serviceYear === undefined) {
  271. message.warning("请选择本次派单年份!");
  272. return
  273. }
  274. if (this.state.contract_term.length === 0) {
  275. message.warning("请添加合同期!");
  276. return
  277. }
  278. if (this.state.memberType == "1" || this.state.memberType == "2") {
  279. if (typeof pictureUrl !== "string") {
  280. message.warning("请上传附件!");
  281. return
  282. }
  283. }
  284. this.setState({
  285. loading: true,
  286. });
  287. $.ajax({
  288. method: "POST",
  289. dataType: "json",
  290. crossDomain: false,
  291. url: globalConfig.context + "/api/admin/orderProject/updateMemberProject",
  292. data: {
  293. id: this.state.fid, //任务ID
  294. commodityId: this.state.commodityId, //项目ID
  295. commodityName: this.state.commodityName, //项目名称
  296. orderNo: this.props.orderNo, //订单编号
  297. commodityQuantity: this.state.commodityQuantity, //数量
  298. taskComment: this.state.taskComment, //备注
  299. memberType: this.state.memberType,//会员付款状态
  300. yearSum: this.state.yearSum,//会员总服务年限
  301. serviceLife: JSON.stringify(this.state.serviceLife),//会员服务年限
  302. serviceYear: this.state.serviceYear,//本次派单
  303. contract_term: JSON.stringify(this.state.contract_term),//合同期
  304. pictureUrl: pictureUrl.length ? pictureUrl : "",//附件
  305. },
  306. }).done(
  307. function (data) {
  308. this.setState({
  309. loading: false,
  310. });
  311. if (!data.error.length) {
  312. message.success("保存成功!");
  313. this.props.onCancel();
  314. } else {
  315. message.warning(data.error[0].message);
  316. }
  317. }.bind(this)
  318. );
  319. }
  320. //
  321. httpChange(e) {
  322. this.setState({
  323. commodityName: e,
  324. });
  325. if (e.length >= 1) {
  326. this.supervisor(e);
  327. }
  328. }
  329. //加载(自动补全)
  330. supervisor(e) {
  331. //服务名称自动补全
  332. let api = "/api/admin/order/getBusinessProjectByName";
  333. $.ajax({
  334. method: "get",
  335. dataType: "json",
  336. crossDomain: false,
  337. url: globalConfig.context + api,
  338. data: {
  339. businessName: e,
  340. cname: "高新会员服务",
  341. },
  342. success: function (data) {
  343. let thedata = data.data;
  344. if (!thedata) {
  345. if (data.error && data.error.length) {
  346. message.warning(data.error[0].message);
  347. }
  348. thedata = {};
  349. }
  350. this.setState({
  351. customerArr: thedata,
  352. });
  353. }.bind(this),
  354. }).always(
  355. function () {
  356. }.bind(this)
  357. );
  358. }
  359. //上级主管输入框失去焦点是判断客户是否存在
  360. selectAuto(value) {
  361. const { customerArr } = this.state;
  362. const { newData } = this.props
  363. const newdataSources = JSON.stringify(customerArr) == "{}" ? [] : customerArr;
  364. let cid = newdataSources.find((item) => item.bname == value).id
  365. this.setState({
  366. commodityName: value,
  367. commodityId: cid,
  368. histYear: [],
  369. });
  370. if (newData && newData.length > 0) {
  371. let llist = []
  372. for (var i = 0; i < newData.length; i++) {
  373. if (newData[i].commodityId == cid) {
  374. llist.push(newData[i].serviceYear)
  375. }
  376. }
  377. this.setState({
  378. histYear: llist
  379. })
  380. for (var i = newData.length - 1; i >= 0; i--) {
  381. if (newData[i].commodityId == cid) {
  382. this.setState({
  383. yearSum: newData[i].yearSum.toString(), // 会员总服务年限
  384. serviceLife: JSON.parse(newData[i].serviceLife) || [], // 会员服务年限
  385. isEdit: true, // 不可编辑
  386. })
  387. } else {
  388. this.setState({
  389. yearSum: undefined,
  390. serviceLife: [],
  391. isEdit: false, // 可编辑
  392. })
  393. }
  394. return
  395. }
  396. }
  397. }
  398. handleClose(removedTag) {
  399. let serviceLife = this.state.serviceLife.filter(tag => { return tag !== removedTag });
  400. this.setState({ serviceLife });
  401. }
  402. render() {
  403. let options = this.state.customerArr.map((group, index) => (
  404. <Select.Option key={index} value={group.bname}>
  405. {group.bname}
  406. </Select.Option>
  407. ));
  408. let contList = vipYear.map(its => (
  409. <Option key={its}>{its}</Option>
  410. ));
  411. const { readOnly } = this.props;
  412. const { histYear, isEdit } = this.state
  413. return (
  414. <Modal
  415. maskClosable={false}
  416. visible={this.props.visible}
  417. onOk={this.props.onCancel}
  418. onCancel={this.props.onCancel}
  419. width="900px"
  420. title={readOnly ? "会员详情" : !this.state.fid ? "添加会员项目" : "编辑会员项目"}
  421. footer=""
  422. className="admin-desc-content"
  423. >
  424. <Form
  425. layout="horizontal"
  426. >
  427. <Spin spinning={this.state.loading}>
  428. <div className="clearfix">
  429. <FormItem
  430. className="half-item"
  431. {...formItemLayout}
  432. label="服务名称"
  433. >
  434. {readOnly ? this.state.commodityName :
  435. <AutoComplete
  436. className="certain-category-search"
  437. dropdownClassName="certain-category-search-dropdown"
  438. dropdownMatchSelectWidth={false}
  439. style={{ width: "200px" }}
  440. dataSource={options}
  441. placeholder="输入服务名称"
  442. value={this.state.commodityName}
  443. onChange={this.httpChange}
  444. filterOption={true}
  445. onSelect={this.selectAuto}
  446. >
  447. <Input />
  448. </AutoComplete>}
  449. {!readOnly && <span className="mandatory">*</span>}
  450. </FormItem>
  451. <FormItem
  452. className="half-item"
  453. {...formItemLayout}
  454. label="服务数量"
  455. >
  456. {readOnly ? this.state.commodityQuantity :
  457. <Input
  458. placeholder="请输入服务数量"
  459. value={this.state.commodityQuantity}
  460. style={{ width: "200px" }}
  461. disabled={true}
  462. onChange={(e) => {
  463. this.setState({ commodityQuantity: e.target.value });
  464. }}
  465. ref="commodityQuantity"
  466. />}
  467. {!readOnly && <span className="mandatory">*</span>}
  468. <div
  469. style={{
  470. color: "red",
  471. position: "relative",
  472. left: "0"
  473. }}
  474. >注:会员项目单次限制,只能派一年</div>
  475. </FormItem>
  476. <FormItem
  477. className="half-item"
  478. {...formItemLayout}
  479. label="付款情况"
  480. >
  481. {readOnly ?
  482. [
  483. { value: "0", key: "已付会员节点全款" },
  484. { value: "1", key: "已付部分期款,需特批" },
  485. { value: "2", key: "未付款,需特批" }][this.state.memberType] :
  486. <Select
  487. placeholder="选择付款情况"
  488. style={{ width: "200px" }}
  489. value={this.state.memberType}
  490. onChange={(e) => {
  491. this.setState({ memberType: e });
  492. }}
  493. >
  494. {[
  495. { value: "0", key: "已付会员节点全款" },
  496. { value: "1", key: "已付部分期款,需特批" },
  497. { value: "2", key: "未付款,需特批" }].map(function (item) {
  498. return (
  499. <Select.Option key={item.value}>
  500. {item.key}
  501. </Select.Option>
  502. );
  503. })}
  504. </Select>}
  505. {!readOnly && <span className="mandatory">*</span>}
  506. </FormItem>
  507. <FormItem
  508. className="half-item"
  509. {...formItemLayout}
  510. label="会员总服务年限"
  511. >
  512. {readOnly ?
  513. this.state.yearSum == null ? "" :
  514. [
  515. { value: "0", key: "" },
  516. { value: "1", key: "一年" },
  517. { value: "2", key: "二年" },
  518. { value: "3", key: "三年" },
  519. { value: "4", key: "四年" },
  520. { value: "5", key: "五年" },
  521. ][this.state.yearSum]["key"] :
  522. <Select
  523. placeholder="请选择会员总服务年限"
  524. disabled={isEdit}
  525. style={{ width: "200px" }}
  526. value={this.state.yearSum}
  527. onChange={(e) => {
  528. this.setState({
  529. yearSum: e,
  530. serviceLife: [],
  531. });
  532. }}
  533. >
  534. {[
  535. { value: "1", key: "一年" },
  536. { value: "2", key: "二年" },
  537. { value: "3", key: "三年" },
  538. { value: "4", key: "四年" },
  539. { value: "5", key: "五年" },
  540. ].map(function (item) {
  541. return (
  542. <Select.Option key={item.value}>
  543. {item.key}
  544. </Select.Option>
  545. );
  546. })}
  547. </Select>}
  548. {!readOnly && <span className="mandatory">*</span>}
  549. </FormItem>
  550. <FormItem
  551. className="half-item"
  552. {...formItemLayout}
  553. label="会员服务年限"
  554. >
  555. <div>
  556. {
  557. this.state.serviceLife.map((tag) =>
  558. <Tag closable={!isEdit} key={tag} afterClose={() => this.handleClose(tag)}>
  559. {tag}
  560. </Tag>
  561. )
  562. }
  563. {
  564. !isEdit && (this.state.serviceLife.length < this.state.yearSum) &&
  565. <Button
  566. size="small"
  567. type="primary"
  568. onClick={() => {
  569. this.setState({
  570. addYears: true,
  571. addyear: undefined,
  572. isGive: 0,
  573. })
  574. }}>
  575. + 添加服务年限
  576. </Button>
  577. }
  578. </div>
  579. {/* {
  580. readOnly ?
  581. this.state.serviceLife.toString() :
  582. <Select
  583. disabled={isEdit}
  584. mode="multiple"
  585. style={{ width: '200px' }}
  586. placeholder="请选择服务年限"
  587. value={this.state.serviceLife}
  588. onChange={(e) => {
  589. this.setState({
  590. serviceLife: e,
  591. serviceYear: undefined,
  592. })
  593. }}
  594. >
  595. {contList}
  596. </Select>
  597. } */}
  598. {/* {!readOnly && <span className="mandatory">*</span>} */}
  599. </FormItem>
  600. <FormItem
  601. className="half-item"
  602. {...formItemLayout}
  603. label="本次派单"
  604. >
  605. {readOnly ?
  606. this.state.serviceYear :
  607. <Select
  608. placeholder="请选择本次派单年份"
  609. style={{ width: "200px" }}
  610. value={this.state.serviceYear}
  611. onChange={(e) => {
  612. this.setState({ serviceYear: e });
  613. }}
  614. >
  615. {this.state.serviceLife.length > 0 && this.state.serviceLife.map(function (item) {
  616. return (
  617. <Select.Option key={item} disabled={histYear.includes(item)}>
  618. {item}
  619. </Select.Option>
  620. );
  621. })}
  622. </Select>}
  623. {!readOnly && <span className="mandatory">*</span>}
  624. </FormItem>
  625. <FormItem
  626. className="half-item"
  627. {...formItemLayout}
  628. label="合同期"
  629. >
  630. {
  631. readOnly ?
  632. this.state.contract_term.toString() :
  633. <Select
  634. mode="multiple"
  635. style={{ width: '200px' }}
  636. placeholder="请选择合同期"
  637. value={this.state.contract_term}
  638. onChange={e => {
  639. this.setState({
  640. contract_term: e,
  641. })
  642. }}
  643. >
  644. {contList}
  645. </Select>
  646. }
  647. {!readOnly && <span className="mandatory">*</span>}
  648. </FormItem>
  649. {
  650. (this.state.memberType == "1" || this.state.memberType == "2") &&
  651. <div className="clearfix">
  652. <FormItem
  653. labelCol={{ span: 4 }}
  654. wrapperCol={{ span: 16 }}
  655. label="上传附件"
  656. >
  657. <PicturesWall
  658. domId={'vip'}
  659. fileList={this.getOrgCodeUrl}
  660. pictureUrl={this.state.orgCodeUrl}
  661. />
  662. {!readOnly && <span className="mandatory">*</span>}
  663. </FormItem>
  664. <div style={{ color: "red", marginLeft: 144, marginBottom: 15 }}>
  665. 特批需上传附件图,请上传客户同意我方继续服务并安排给我司付款的聊天记录截图,
  666. <p>若没有客户同意继续服务及会安排付款的截图,特派流程将无法走下去,以免造成派单耽搁</p>
  667. </div>
  668. </div>
  669. }
  670. <div className="clearfix">
  671. <FormItem
  672. labelCol={{ span: 4 }}
  673. wrapperCol={{ span: 16 }}
  674. label="项目说明"
  675. >
  676. {readOnly ? this.state.taskComment :
  677. <Input
  678. type="textarea"
  679. placeholder="如:派2022年会员服务,总会员服务三年,客户付款情况说明"
  680. autosize={{ minRows: 4 }}
  681. value={this.state.taskComment}
  682. onChange={(e) => {
  683. this.setState({ taskComment: e.target.value });
  684. }}
  685. />}
  686. </FormItem>
  687. <div style={{ color: "red", marginLeft: 144 }}>
  688. 请详细说明项目服务时间,总服务时间及付款情况,如:<span style={{ color: "#333" }}>派2022年会员服务,总会员服务三年,客户付款情况说明</span>
  689. <p>未付款时,需进行特批审核,请详细说明预计付款时间等详细情况</p>
  690. </div>
  691. </div>
  692. {readOnly ? null : <FormItem
  693. wrapperCol={{ span: 12, offset: 4 }}
  694. className="half-middle"
  695. >
  696. <Button
  697. className="submitSave"
  698. type="primary"
  699. onClick={() => {
  700. if (!this.state.fid) {
  701. this.onSubmit()
  702. } else {
  703. this.onChange()
  704. }
  705. }}
  706. >
  707. 保存
  708. </Button>
  709. <Button
  710. className="submitSave"
  711. type="ghost"
  712. onClick={this.props.onCancel}
  713. >
  714. 取消
  715. </Button>
  716. </FormItem>}
  717. </div>
  718. </Spin>
  719. </Form>
  720. {
  721. this.state.addYears &&
  722. <Modal
  723. title="添加服务年限"
  724. visible={this.state.addYears}
  725. okText="添加"
  726. onOk={() => {
  727. let slist = this.state.serviceLife
  728. if (this.state.isGive == 0) {
  729. slist.push(this.state.addyear)
  730. } else if (this.state.isGive == 1) {
  731. let newYear = this.state.addyear + "(赠送)"
  732. slist.push(newYear)
  733. }
  734. this.setState({
  735. serviceLife: slist,
  736. addYears: false
  737. })
  738. }}
  739. onCancel={() => {
  740. this.setState({
  741. addYears: false
  742. })
  743. }}
  744. >
  745. <Select
  746. style={{ width: '200px', marginRight: 50 }}
  747. placeholder="请选择年份"
  748. onChange={e => {
  749. this.setState({
  750. addyear: e,
  751. })
  752. }}
  753. >
  754. {
  755. vipYear.map(its => (
  756. <Option
  757. key={its}
  758. disabled={this.state.serviceLife.toString().includes(its)}
  759. >{its}</Option>
  760. ))
  761. }
  762. </Select>
  763. <RadioGroup
  764. onChange={e => {
  765. this.setState({
  766. isGive: e.target.value
  767. })
  768. }}
  769. value={this.state.isGive}
  770. >
  771. <Radio value={0}>非赠送</Radio>
  772. <Radio value={1}>赠送</Radio>
  773. </RadioGroup>
  774. </Modal>
  775. }
  776. </Modal>
  777. )
  778. }
  779. }
  780. export default ProjectOperationVip;