operationPayNode.js 14 KB

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