MerchantCreate.js 9.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285
  1. import React, { PureComponent } from 'react';
  2. import pathToRegexp from 'path-to-regexp';
  3. import { Card, Form, Input, Button, Radio, Switch } from 'antd';
  4. import { connect } from 'dva';
  5. import { routerRedux } from 'dva/router';
  6. import PageHeaderLayout from '../../layouts/PageHeaderLayout';
  7. import FooterToolbar from '../../components/FooterToolbar';
  8. import { Hotax } from '../../utils/config';
  9. import { statusToBool, boolToStatus } from '../../utils/utils';
  10. import styles from './MerchantCreate.less';
  11. const fieldLabels = {
  12. type: '商户类型',
  13. name: '商户名称',
  14. code: '商户编号',
  15. simple: '商户简称',
  16. contactName: '商户联系人',
  17. mobile: '联系电话',
  18. depositBank: '开户银行',
  19. bankAccount: '银行账户',
  20. licenseId: '营业执照',
  21. taxNumber: '纳税人识别号',
  22. receiptType: '发票类型',
  23. };
  24. const domains = [{
  25. title: '平台方',
  26. value: Hotax.DOMAIN_LJ,
  27. }, {
  28. title: '渠道商',
  29. value: Hotax.DOMAIN_PJ,
  30. }, {
  31. title: '供应商',
  32. value: Hotax.DOMAIN_CP,
  33. }];
  34. const receipts = [{
  35. title: '普通发票',
  36. value: 'COMMON',
  37. }, {
  38. title: '增值税发票',
  39. value: 'SPECIAL',
  40. }];
  41. const formItemLayout = {
  42. labelCol: {
  43. xs: { span: 24 },
  44. sm: { span: 6 },
  45. },
  46. wrapperCol: {
  47. xs: { span: 24 },
  48. sm: { span: 14 },
  49. md: { span: 12 },
  50. },
  51. };
  52. @Form.create()
  53. @connect(({ loading, merchant }) => ({
  54. merchant,
  55. submitting: loading.models.merchant,
  56. }))
  57. export default class MerchantCreatePage extends PureComponent {
  58. componentWillMount() {
  59. // 如果是添加商户操作,进入此页面时把state清一下
  60. const { location } = this.props;
  61. const match = pathToRegexp('/merchant/create').exec(location.pathname);
  62. if (match) {
  63. this.cleanPageState();
  64. }
  65. }
  66. componentDidMount() {
  67. const matchId = this.isEdit();
  68. if (matchId) {
  69. this.props.dispatch({
  70. type: 'merchant/fetchMerchantItem',
  71. payload: { id: matchId },
  72. });
  73. }
  74. }
  75. isEdit = () => {
  76. // 根据路径判断操作类型并决定是否需加载该条目信息<create/edit>
  77. const { location } = this.props;
  78. const match = pathToRegexp('/merchant/edit/:id').exec(location.pathname);
  79. if (match) {
  80. return match[1];
  81. }
  82. return false;
  83. };
  84. cleanPageState = () => {
  85. this.props.dispatch({
  86. type: 'merchant/cleanItemState',
  87. payload: {},
  88. });
  89. };
  90. handlePageBack = () => {
  91. this.props.dispatch(routerRedux.push({
  92. pathname: '/merchant/list',
  93. state: this.props.location.state,
  94. }));
  95. };
  96. handlePageSubmit = (e) => {
  97. e.preventDefault();
  98. this.props.form.validateFieldsAndScroll((err, values) => {
  99. if (!err) {
  100. const { status, ...rest } = values;
  101. const matchId = this.isEdit();
  102. rest.status = boolToStatus(status);
  103. if (matchId) {
  104. rest.id = matchId;
  105. this.props.dispatch({
  106. type: 'merchant/updateMerchantItem',
  107. payload: rest,
  108. states: this.props.location.state,
  109. });
  110. } else {
  111. this.props.dispatch({
  112. type: 'merchant/createMerchantItem',
  113. payload: rest,
  114. states: this.props.location.state,
  115. });
  116. }
  117. }
  118. });
  119. };
  120. render() {
  121. const { submitting, merchant, form } = this.props;
  122. const { getFieldDecorator } = form;
  123. const { currentItem } = merchant;
  124. // 是否可编辑
  125. const isEditable = !!this.isEdit();
  126. return (
  127. <PageHeaderLayout>
  128. <Card style={{ marginBottom: 70 }}>
  129. <Form>
  130. <Form.Item label={fieldLabels.type} {...formItemLayout}>
  131. {getFieldDecorator('domain', {
  132. rules: [{ required: true, message: '请选择商户类型!' }],
  133. initialValue: currentItem.domain || Hotax.DOMAIN_PJ,
  134. })(
  135. <Radio.Group disabled={isEditable} className={styles.radio}>
  136. {
  137. domains.map(item =>
  138. (
  139. <Radio.Button
  140. key={item.value}
  141. value={item.value}
  142. >{item.title}
  143. </Radio.Button>
  144. )
  145. )
  146. }
  147. </Radio.Group>
  148. )}
  149. </Form.Item>
  150. <Form.Item hasFeedback label={fieldLabels.code} {...formItemLayout}>
  151. {getFieldDecorator('code', {
  152. rules: [
  153. {
  154. required: true, message: '请填写商户编号!',
  155. }, {
  156. pattern: /^[0-9]{4,6}$/g, message: '请输入4-6位数字编号!',
  157. },
  158. ],
  159. initialValue: currentItem.code,
  160. })(
  161. <Input disabled={isEditable} placeholder="请输入" />
  162. )}
  163. </Form.Item>
  164. <Form.Item hasFeedback label={fieldLabels.name} {...formItemLayout}>
  165. {getFieldDecorator('name', {
  166. rules: [{ required: true, message: '请填写商户名称!' }],
  167. initialValue: currentItem.name,
  168. })(
  169. <Input placeholder="请输入" />
  170. )}
  171. </Form.Item>
  172. <Form.Item hasFeedback label={fieldLabels.simple} {...formItemLayout}>
  173. {getFieldDecorator('simple', {
  174. rules: [{ required: true, message: '请填写商户简称!' }],
  175. initialValue: currentItem.simple,
  176. })(
  177. <Input placeholder="请输入" />
  178. )}
  179. </Form.Item>
  180. <Form.Item hasFeedback label={fieldLabels.contactName} {...formItemLayout}>
  181. {getFieldDecorator('contactName', {
  182. rules: [{ required: true, message: '请填写商户联系人!' }],
  183. initialValue: currentItem.contactName,
  184. })(
  185. <Input placeholder="请输入" />
  186. )}
  187. </Form.Item>
  188. <Form.Item hasFeedback label={fieldLabels.mobile} {...formItemLayout}>
  189. {getFieldDecorator('mobile', {
  190. rules: [
  191. {
  192. required: true, message: '请填写联系电话!',
  193. }, {
  194. pattern: /^[1][34578][0-9]{9}$/g, message: '请输入11位有效手机号!',
  195. }],
  196. initialValue: currentItem.mobile,
  197. })(
  198. <Input placeholder="请输入" />
  199. )}
  200. </Form.Item>
  201. <Form.Item hasFeedback label={fieldLabels.depositBank} {...formItemLayout}>
  202. {getFieldDecorator('depositBank', {
  203. rules: [{
  204. required: true, message: '开户银行不能为空!',
  205. }],
  206. initialValue: currentItem.depositBank,
  207. })(
  208. <Input placeholder="请输入" />
  209. )}
  210. </Form.Item>
  211. <Form.Item hasFeedback label={fieldLabels.bankAccount} {...formItemLayout}>
  212. {getFieldDecorator('bankAccount', {
  213. rules: [{
  214. required: true, message: '银行账号不能为空!',
  215. }, {
  216. pattern: /^[0-9]{1,22}$/g, message: '请输入有效的银行账户!',
  217. }],
  218. initialValue: currentItem.bankAccount,
  219. })(
  220. <Input placeholder="请输入" />
  221. )}
  222. </Form.Item>
  223. <Form.Item label={fieldLabels.licenseId} {...formItemLayout}>
  224. {getFieldDecorator('licenseId', {
  225. initialValue: currentItem.licenseId,
  226. })(
  227. <Input placeholder="请输入" />
  228. )}
  229. </Form.Item>
  230. <Form.Item label={fieldLabels.taxNumber} {...formItemLayout}>
  231. {getFieldDecorator('taxNumber', {
  232. initialValue: currentItem.taxNumber,
  233. })(
  234. <Input placeholder="请输入" />
  235. )}
  236. </Form.Item>
  237. <Form.Item label={fieldLabels.receiptType} {...formItemLayout}>
  238. {getFieldDecorator('receiptType', {
  239. initialValue: currentItem.receiptType || 'COMMON',
  240. })(
  241. <Radio.Group className={styles.radio}>
  242. {
  243. receipts.map(item =>
  244. (
  245. <Radio.Button
  246. key={item.value}
  247. value={item.value}
  248. >{item.title}
  249. </Radio.Button>
  250. )
  251. )
  252. }
  253. </Radio.Group>
  254. )}
  255. </Form.Item>
  256. <Form.Item label="状态" {...formItemLayout}>
  257. {getFieldDecorator('status', {
  258. valuePropName: 'checked',
  259. initialValue: status ? statusToBool(currentItem.status) : true,
  260. })(
  261. <Switch
  262. checkedChildren="启用"
  263. unCheckedChildren="不启用"
  264. />
  265. )}
  266. </Form.Item>
  267. </Form>
  268. </Card>
  269. <FooterToolbar style={{ width: '100%' }}>
  270. <Button onClick={this.handlePageBack} style={{ marginRight: 10 }}>
  271. 取消
  272. </Button>
  273. <Button type="primary" onClick={this.handlePageSubmit} loading={submitting}>
  274. 提交
  275. </Button>
  276. </FooterToolbar>
  277. </PageHeaderLayout>
  278. );
  279. }
  280. }