addPicModal.jsx 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101
  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. fileList={this.getVoucherUrl}
  71. pictureUrl={this.state.voucherUrl}
  72. url="/api/admin/personnel/uploadFile"
  73. sign="personnel_file"
  74. />
  75. </FormItem>
  76. <FormItem
  77. className="half-item"
  78. labelCol={{ span: 6 }}
  79. wrapperCol={{ span: 30 }}
  80. label="备注"
  81. >
  82. <Input
  83. placeholder="输入备注"
  84. style={{ width: 80 }}
  85. value={this.state.remarks}
  86. onChange={(e) => {
  87. this.setState({
  88. remarks: e.target.value,
  89. });
  90. }}
  91. />
  92. </FormItem>
  93. </div>
  94. </Modal>
  95. );
  96. },
  97. });
  98. export default AddPicModal;