operationPayNode.js 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316
  1. import React,{Component} from 'react';
  2. import {Button, DatePicker, Form, Input, message, Modal, Select, Spin, InputNumber} from "antd";
  3. import { cuiJieDian } from '@/dataDic.js'
  4. import moment from "moment";
  5. import PropTypes from 'prop-types';
  6. import $ from "jquery";
  7. const formItemLayout = {
  8. labelCol: { span: 8 },
  9. wrapperCol: { span: 14 },
  10. }
  11. class OperationPayNode extends Component{
  12. constructor(props) {
  13. super(props);
  14. this.state={
  15. loading: false,
  16. thirdCompanyName: '', //供应商名称
  17. paySubject: [],
  18. paySubjectName: '', //可简化
  19. }
  20. }
  21. componentDidMount() {
  22. this.getCsortData()
  23. }
  24. //保存付款节点
  25. savePayNode() {
  26. let api
  27. if (this.props.thirdId) {
  28. //修改
  29. api = '/api/admin/company/updatePaymentNode'
  30. } else {
  31. //新增
  32. api = '/api/admin/company/addPaymentNode'
  33. }
  34. let customerId=0;
  35. this.props.supplierList.some((value)=>{
  36. if(value.companyName === this.state.thirdCompanyName){
  37. customerId = value.id
  38. return true;
  39. }
  40. });
  41. if(!this.state.thirdCompanyName){
  42. message.error('请选择供应商名称');
  43. return;
  44. }
  45. if(!this.state.paySubjectName){
  46. message.error('请选择付款科目');
  47. return;
  48. }
  49. if(!this.state.payNodeQuantity){
  50. message.error('请输入数量');
  51. return;
  52. }
  53. let data = {
  54. id: this.props.thirdId, //id
  55. tid: this.state.tid, //订单编号
  56. cid: customerId,//对应的第三方信息
  57. companyName: this.state.thirdCompanyName.split('-')[0], //第三方名称
  58. quantity: this.state.payNodeQuantity, //数量
  59. dunType: this.state.dunType, //催款节点
  60. projectType: this.state.cSort, //项目分类
  61. }
  62. if(this.state.paySubjectName === '0'){
  63. if(!this.state.partyTimes){
  64. message.error('请选择付款时间');
  65. return;
  66. }
  67. data.partyTimes = this.state.partyTimes //付款时间
  68. }
  69. if(this.props.projectType !== 2){ //其他类型 0正常 1专利 2软著 3审计
  70. data.totalAmount = this.state.currentTotalPrice //总价
  71. data.unitPrice = this.state.thirdUnitPrice //单价
  72. }
  73. this.setState({
  74. loading: true,
  75. })
  76. $.ajax({
  77. url: globalConfig.context + api,
  78. method: 'post',
  79. dataType: 'json',
  80. crossDomain: false,
  81. data: data,
  82. }).done(
  83. function (data) {
  84. this.setState({
  85. loading: false,
  86. })
  87. if (!data.error.length) {
  88. message.success('保存成功!');
  89. this.props.onCancel();
  90. } else {
  91. message.warning(data.error[0].message)
  92. }
  93. }.bind(this)
  94. )
  95. }
  96. // 付款节点自动计算总金额
  97. payNodeCalculatedAmount(num) {
  98. let currentTotalPrice,quantity,unitPrice;
  99. //获取当前供应商名称对应的单价并更新
  100. this.props.thirdInfoList.forEach((item) => {
  101. if (item.companyName === this.state.thirdCompanyName) {
  102. currentTotalPrice = num ? item.unitPrice * num : item.quantity * item.unitPrice;
  103. currentTotalPrice = currentTotalPrice.toFixed(6);
  104. quantity = num ? num : item.quantity;
  105. unitPrice = item.unitPrice;
  106. }
  107. })
  108. this.props.from.setFieldsValue({
  109. quantity :num ? num : quantity
  110. })
  111. if(this.props.projectType !== 2){
  112. this.setState({
  113. currentTotalPrice: currentTotalPrice,
  114. thirdUnitPrice: unitPrice
  115. })
  116. }
  117. }
  118. // 获取csort下的数据
  119. getCsortData() {
  120. cuiJieDian.map((item) => {
  121. if (item.value == localStorage.getItem('cSort')) {
  122. this.setState({
  123. paySubject: item.children,
  124. })
  125. }
  126. })
  127. }
  128. render() {
  129. const { getFieldDecorator } = this.props.form;
  130. const { payNodeInfor } = this.props;
  131. return (
  132. <Modal
  133. visible={this.props.visible}
  134. onCancel={this.props.onCancel}
  135. width={800}
  136. title={this.props.thirdId ? "修改付款节点" : "新增付款节点"}
  137. footer=""
  138. className="admin-desc-content"
  139. >
  140. <Form
  141. layout="horizontal"
  142. style={{ paddingBottom: '40px' }}
  143. >
  144. <Spin spinning={this.state.loading}>
  145. <div className="clearfix">
  146. <div className="clearfix">
  147. <Form.Item {...formItemLayout} label="供应商名称">
  148. {getFieldDecorator('companyName', {
  149. initialValue: payNodeInfor.companyName,
  150. rules: [{ required: true, message: '请选择供应商' }],
  151. })(
  152. <Select
  153. onChange={(val) => {
  154. this.setState(
  155. {
  156. thirdCompanyName: val,
  157. },
  158. () => this.payNodeCalculatedAmount()
  159. ) //更新完state调用
  160. }}
  161. defaultValue="请选择供应商"
  162. style={{ width: 220 }}
  163. >
  164. {this.props.supplierList.map((item, index) => (
  165. <Select.Option value={item.companyName} key={index}>
  166. {item.companyName}
  167. </Select.Option>
  168. ))}
  169. </Select>
  170. )}
  171. </Form.Item>
  172. </div>
  173. <div className="clearfix">
  174. <Form.Item {...formItemLayout} label="付款科目">
  175. {getFieldDecorator('dunType', {
  176. initialValue: payNodeInfor.dunType,
  177. rules: [{ required: true, message: '请选择付款科目' }],
  178. })(
  179. <Select
  180. onChange={(val) => {
  181. this.setState({
  182. paySubjectName: val,
  183. dunType: val,
  184. })
  185. }}
  186. defaultValue="请选择付款科目"
  187. style={{ width: 220 }}
  188. >
  189. {this.state.paySubject.map((item, index) => (
  190. <Select.Option value={item.value} key={index}>
  191. {item.key}
  192. </Select.Option>
  193. ))}
  194. <Select.Option key={0} value={0}>
  195. 自定义
  196. </Select.Option>
  197. </Select>)}
  198. </Form.Item>
  199. </div>
  200. <div className="clearfix">
  201. {parseInt(this.state.paySubjectName) === 0 ? <Form.Item {...formItemLayout} label="付款时间">
  202. {getFieldDecorator('partyTimes', {
  203. initialValue: payNodeInfor.partyTimes,
  204. rules: [{ required: true, message: '请选择付款时间' }],
  205. })(
  206. <DatePicker
  207. // value={
  208. // this.state.partyTimes
  209. // ? moment(this.state.partyTimes)
  210. // : null
  211. // }
  212. // onChange={(data, dataString) => {
  213. // this.setState({ partyTimes: dataString })
  214. // }}
  215. style={{ width: '220px' }}
  216. />
  217. )}
  218. </Form.Item> : <div/>}
  219. </div>
  220. <div className="clearfix">
  221. <Form.Item {...formItemLayout} label="数量">
  222. {getFieldDecorator('quantity', {
  223. initialValue: payNodeInfor.quantity,
  224. rules: [{ required: true, message: '请输入数量' }],
  225. })(
  226. <InputNumber
  227. min={1}
  228. precision={0}
  229. disabled={payNodeInfor.quantity <= 1}
  230. placeholder="请输入数量"
  231. onChange={(e) => {
  232. this.payNodeCalculatedAmount(e)
  233. }}
  234. style={{ width: '220px' }}
  235. />
  236. )}
  237. </Form.Item>
  238. </div>
  239. {this.props.projectType !== 2 ? <div className="clearfix">
  240. <Form.Item {...formItemLayout} label="总价(万元)">
  241. {getFieldDecorator('quantity', {
  242. initialValue: payNodeInfor.quantity,
  243. rules: [{ required: true, message: '请输入数量' }],
  244. })(
  245. <Input
  246. type={'number'}
  247. value={this.state.currentTotalPrice}
  248. placeholder="请输入总价"
  249. onChange={(e) =>
  250. this.setState({
  251. currentTotalPrice: e.target.value,
  252. })
  253. }
  254. style={{ width: '220px' }}
  255. />
  256. )}
  257. </Form.Item>
  258. </div> : <div/>}
  259. <div className="clearfix">
  260. <div className="addSave" style={{ marginTop: '15px' }}>
  261. <Button
  262. className="cancel"
  263. type="primary"
  264. onClick={this.savePayNode}
  265. style={{ marginLeft: '300px' }}
  266. htmlType="submit"
  267. >
  268. 保存
  269. </Button>
  270. <Button
  271. className="cancel"
  272. type="ghost"
  273. onClick={this.handleCancelclose}
  274. style={{ marginLeft: '50px' }}
  275. >
  276. 取消
  277. </Button>
  278. </div>
  279. </div>
  280. </div>
  281. </Spin>
  282. </Form>
  283. </Modal>
  284. )
  285. }
  286. }
  287. OperationPayNode.propTypes = {
  288. visible : PropTypes.bool.isRequired, //控制组件是否显示
  289. onCancel : PropTypes.func.isRequired, //取消方法
  290. thirdId : PropTypes.number.isRequired, //供应商ID
  291. thirdInfoList: PropTypes.array.isRequired, //第三方信息列表
  292. supplierList: PropTypes.array.isRequired, //第三方信息列表已存在的供应商名字和id信息 用于添加付款节点时的选择对应供应商
  293. payNodeInfor: PropTypes.object.isRequired, //选择的支付节点信息(来自支付节点列表)
  294. projectType: PropTypes.number.isRequired, //项目类型 0正常 1专利 2软著 3审计
  295. }
  296. OperationPayNode.defaultProps = {
  297. visible : false,
  298. onCancel: ()=>{},
  299. thirdInfoList: [],
  300. supplierList: [],
  301. payNodeInfor: {},
  302. }
  303. const WrappedNormalLoginForm = Form.create()(OperationPayNode);
  304. export default WrappedNormalLoginForm;