addPicModal.jsx 2.3 KB

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