addPicModal.jsx 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102
  1. import React from "react";
  2. import { Spin, Button, Tabs, Table, message, Modal, Upload, Form, Input } from "antd";
  3. import { splitUrl } from "@/tools";
  4. import PicturesWall from "./picturesWall";
  5. import "./remove.less"
  6. const FormItem = Form.Item;
  7. const AddPicModal = React.createClass({
  8. getInitialState() {
  9. return {
  10. newVisible: false,
  11. rotateDeg: 0,
  12. voucherUrl: [],
  13. };
  14. },
  15. componentWillReceiveProps(nextProps) {
  16. this.setState({
  17. newVisible: nextProps.ShowModal,
  18. });
  19. },
  20. handleOk() {
  21. this.setState({
  22. newVisible: false,
  23. });
  24. },
  25. add() {
  26. if(this.state.voucherUrl.length == 0) {
  27. message.warning("请上传图片")
  28. return
  29. }
  30. if(this.state.remarks == "" || this.state.remarks == undefined) {
  31. message.warning("请填写图片备注")
  32. return
  33. }
  34. this.props.add(this.state.voucherUrl[0].response.data, this.state.remarks);
  35. this.setState({
  36. voucherUrl: [],
  37. remarks: undefined,
  38. });
  39. },
  40. getVoucherUrl(e) {
  41. this.setState({
  42. voucherUrl: e,
  43. });
  44. },
  45. cancel() {
  46. this.props.cancel()
  47. this.setState({
  48. voucherUrl: [],
  49. remarks: undefined
  50. })
  51. },
  52. render() {
  53. return (
  54. <Modal
  55. visible={this.props.visible}
  56. width={400}
  57. okText={"保存"}
  58. style={{ zIndex: 9999 }}
  59. onOk={this.add}
  60. onCancel={this.cancel}
  61. >
  62. <div className="clearfix">
  63. <FormItem
  64. className="half-item"
  65. labelCol={{ span: 6 }}
  66. wrapperCol={{ span: 30 }}
  67. label="附件"
  68. >
  69. <PicturesWall
  70. domId={'addPicModal1'}
  71. fileList={this.getVoucherUrl}
  72. pictureUrl={this.state.voucherUrl}
  73. url="/api/admin/personnel/uploadFile"
  74. sign="personnel_file"
  75. />
  76. </FormItem>
  77. <FormItem
  78. className="half-item"
  79. labelCol={{ span: 6 }}
  80. wrapperCol={{ span: 30 }}
  81. label="备注"
  82. >
  83. <Input
  84. placeholder="输入备注"
  85. style={{ width: 80 }}
  86. value={this.state.remarks}
  87. onChange={(e) => {
  88. this.setState({
  89. remarks: e.target.value,
  90. });
  91. }}
  92. />
  93. </FormItem>
  94. </div>
  95. </Modal>
  96. );
  97. },
  98. });
  99. export default AddPicModal;