payment.jsx 9.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310
  1. import React, { Component } from "react";
  2. import { message, Modal, Spin, Form, Select, Input, Button, Tabs } from "antd";
  3. import $ from "jquery/src/ajax";
  4. import PicturesWall from "../../order/orderNew/changeComponent/picturesWall";
  5. // 发起付款
  6. class Payment extends Component {
  7. constructor(props) {
  8. super(props);
  9. this.state = {
  10. loading: false,
  11. list: [],
  12. };
  13. this.onChange = this.onChange.bind(this);
  14. this.onBlur = this.onBlur.bind(this);
  15. }
  16. componentDidMount() {
  17. }
  18. // 获取下级列表信息
  19. getList() {
  20. $.ajax({
  21. method: "get",
  22. dataType: "json",
  23. crossDomain: false,
  24. url: globalConfig.context + "/api/admin/amb/Invest/getInvestAmbList",
  25. data: {
  26. id: this.props.myAmbId
  27. },
  28. success: function (data) {
  29. if (data.error && data.error.length === 0) {
  30. if (data.data) {
  31. this.setState({
  32. list: data.data || []
  33. });
  34. }
  35. } else {
  36. message.warning(data.error[0].message);
  37. }
  38. }.bind(this),
  39. }).always(
  40. function () {
  41. }.bind(this)
  42. );
  43. }
  44. onChange(e) {
  45. const { value } = e.target;
  46. const reg = /^-?(0|[1-9][0-9]*)(\.[0-9]*)?$/;
  47. if ((!isNaN(value) && reg.test(value)) || value === '') {
  48. this.setState({
  49. amount: value
  50. })
  51. }
  52. }
  53. onBlur() {
  54. const { amount } = this.state
  55. if (!!amount && amount.charAt(amount.length - 1) === '.') {
  56. this.setState({
  57. amount: amount.slice(0, -1)
  58. })
  59. }
  60. }
  61. getOrgCodeUrl(e) {
  62. this.setState({ orgCodeUrl: e });
  63. }
  64. onSubmit() {
  65. return
  66. const { myAmbId, onCancel, details = false } = this.props
  67. const { otherAmbId, amount, comment } = this.state
  68. if (!otherAmbId) {
  69. message.warning("请选择您需投人的下级单位");
  70. return
  71. }
  72. if (!amount) {
  73. message.warning("请填写您的投资款");
  74. return
  75. }
  76. if (!comment) {
  77. message.warning("请填写备注说明");
  78. return
  79. }
  80. let theorgCodeUrl = [];
  81. if (this.state.orgCodeUrl.length) {
  82. let picArr = [];
  83. this.state.orgCodeUrl.map(function (item) {
  84. if (
  85. item.response &&
  86. item.response.data &&
  87. item.response.data.length
  88. ) {
  89. picArr.push(item.response.data);
  90. }
  91. });
  92. theorgCodeUrl = picArr.join(",");
  93. } else {
  94. message.info("请上传附件")
  95. return
  96. }
  97. this.setState({
  98. loading: true
  99. })
  100. // 发起
  101. let infor = {
  102. myAmbId, // 我的阿米巴
  103. otherAmbId, // 对方阿米巴
  104. amount, // 金额
  105. comment, // 备注
  106. status: 1, // 状态 0草稿 1发起
  107. }
  108. // 重新发起
  109. let infor1 = {
  110. myAmbId, // 我的阿米巴
  111. otherAmbId, // 对方阿米巴
  112. amount, // 金额
  113. comment, // 备注
  114. status: 1, // 状态 0草稿 1发起
  115. id: details.id,
  116. }
  117. $.ajax({
  118. method: "POST",
  119. dataType: "json",
  120. crossDomain: false,
  121. url: globalConfig.context +
  122. (
  123. !!details
  124. ? "/api/admin/amb/Invest/updateTransfer"
  125. : "/api/admin/amb/Invest/addTransfer"
  126. ),
  127. data: !!details ? infor1 : infor,
  128. }).done(
  129. function (data) {
  130. this.setState({
  131. loading: false,
  132. });
  133. if (!data.error.length) {
  134. message.success("发起成功!");
  135. onCancel(true)
  136. } else {
  137. message.warning(data.error[0].message);
  138. }
  139. }.bind(this)
  140. );
  141. }
  142. render() {
  143. const { list } = this.state
  144. const { visible, onCancel } = this.props
  145. const FormItem = Form.Item;
  146. const TabPane = Tabs.TabPane;
  147. const formItemLayout = {
  148. labelCol: { span: 4 },
  149. wrapperCol: { span: 16 },
  150. };
  151. const tabstyle = {
  152. marginBottom: 15,
  153. padding: "0 20px",
  154. color: "red",
  155. }
  156. return (
  157. <Modal
  158. maskClosable={false}
  159. visible={visible == "pay"}
  160. title="填写付款申请单"
  161. footer=""
  162. width="60%"
  163. onCancel={() => { onCancel(false) }}
  164. >
  165. <Spin spinning={this.state.loading}>
  166. <div>
  167. {/* <div style={{ textAlign: "center", fontSize: "20px", marginBottom: 40 }}>发起投资</div> */}
  168. <div style={{ width: "80%", margin: "0 auto" }}>
  169. <Tabs>
  170. <TabPane tab="内部结算" key={0}>
  171. <div style={tabstyle}>内部划拨:公共费用分摊或巴与巴之间的合作</div>
  172. </TabPane>
  173. <TabPane tab="费用报销(共对私报销)" key={1}>
  174. <div style={tabstyle}>费用报销:包括员工销款(如差旅费等等)</div>
  175. </TabPane>
  176. <TabPane tab="招待费" key={2}>
  177. <div style={tabstyle}></div>
  178. </TabPane>
  179. <TabPane tab="其他费用" key={3}>
  180. <div style={tabstyle}></div>
  181. </TabPane>
  182. <TabPane tab="借款" key={4}>
  183. <div style={tabstyle}></div>
  184. </TabPane>
  185. <TabPane tab="工资奖金" key={5}>
  186. <div style={tabstyle}></div>
  187. </TabPane>
  188. </Tabs>
  189. </div>
  190. <Form>
  191. <FormItem
  192. {...formItemLayout}
  193. label={<span><span style={{ color: "red" }}>*</span>付款巴</span>}
  194. >
  195. <Select
  196. showSearch
  197. style={{ width: 200 }}
  198. placeholder="请选择您需投人的下级单位"
  199. value={this.state.otherAmbId}
  200. optionFilterProp="children"
  201. onChange={e => { this.setState({ otherAmbId: e }) }}
  202. filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
  203. >
  204. {
  205. list.map((item) =>
  206. <Option value={item.id} key={item.id}>{item.name}</Option>
  207. )
  208. }
  209. </Select>
  210. </FormItem>
  211. <FormItem
  212. {...formItemLayout}
  213. label={<span><span style={{ color: "red" }}>*</span>金额(万元)</span>}
  214. >
  215. <Input
  216. placeholder="请填写您的金额"
  217. style={{ width: 200, marginRight: 20 }}
  218. value={this.state.amount}
  219. onChange={this.onChange}
  220. onBlur={this.onBlur}
  221. />
  222. <span style={{ color: "red" }}>注:请填写本次费用金额</span>
  223. </FormItem>
  224. <FormItem
  225. {...formItemLayout}
  226. label="内容及说明"
  227. >
  228. <Input
  229. type="textarea"
  230. style={{ width: "60%" }}
  231. placeholder="内容及说明"
  232. autosize={{ minRows: 3 }}
  233. value={this.state.comment}
  234. onChange={(e) => {
  235. this.setState({ comment: e.target.value });
  236. }}
  237. />
  238. </FormItem>
  239. <FormItem
  240. {...formItemLayout}
  241. label={<span><span style={{ color: "red" }}>*</span>备注</span>}
  242. >
  243. <Input
  244. type="textarea"
  245. style={{ width: "60%" }}
  246. placeholder="备注"
  247. autosize={{ minRows: 3 }}
  248. value={this.state.comment}
  249. onChange={(e) => {
  250. this.setState({ comment: e.target.value });
  251. }}
  252. />
  253. </FormItem>
  254. <FormItem
  255. {...formItemLayout}
  256. label={<span><span style={{ color: "red" }}>*</span>上传附件</span>}
  257. >
  258. <PicturesWall
  259. fileList={this.getOrgCodeUrl}
  260. pictureUrl={this.state.orgCodeUrl}
  261. url="/api/admin/uploadImg"
  262. bindId={""}
  263. sign="amb_payment"
  264. deleteApi="/api/admin/deleteImg"
  265. />
  266. <p>图片建议:要清晰。</p>
  267. </FormItem>
  268. <FormItem
  269. wrapperCol={{ span: 12, offset: 9 }}
  270. >
  271. <div style={{ marginTop: 30 }}>
  272. <Button
  273. type="primary"
  274. onClick={() => {
  275. this.onSubmit();
  276. }}
  277. >
  278. 提交申请
  279. </Button>
  280. <Button
  281. type="ghost"
  282. style={{ marginLeft: 20 }}
  283. onClick={() => { onCancel(false) }}
  284. >
  285. 取消
  286. </Button>
  287. </div>
  288. </FormItem>
  289. </Form>
  290. </div>
  291. </Spin>
  292. </Modal>
  293. );
  294. }
  295. }
  296. export default Payment;