PackageCreate.js 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394
  1. import React, { Component } from 'react';
  2. import pathToRegexp from 'path-to-regexp';
  3. import { connect } from 'dva';
  4. import { routerRedux } from 'dva/router';
  5. import { message, Form, Modal, Card, Button, Input, InputNumber, Table, Switch, Select, Radio } from 'antd';
  6. import { renderProductType, statusToBool, boolToStatus, addRowKey } from '../../../utils/utils';
  7. import Selector from '../../../components/AXTableSelector/Selector';
  8. import FooterToolbar from '../../../components/FooterToolbar/index';
  9. import styles from './PackageCreate.less';
  10. const Message = message;
  11. const fieldLabels = {
  12. code: '套餐包编号',
  13. name: '套餐包名称',
  14. status: '套餐包状态',
  15. };
  16. const formItemLayout = {
  17. labelCol: {
  18. xs: { span: 24 },
  19. sm: { span: 3 },
  20. },
  21. wrapperCol: {
  22. xs: { span: 24 },
  23. sm: { span: 14 },
  24. md: { span: 12 },
  25. },
  26. };
  27. @connect(({loading, product}) => ({
  28. product,
  29. pLoading: loading.models.product,
  30. }))
  31. @Form.create()
  32. export default class PackageCreatePage extends Component {
  33. state = {
  34. productType: 'Course',
  35. selectorModalDestroy: true,
  36. };
  37. componentWillMount() {
  38. const match = pathToRegexp('/product/package/create').exec(this.props.location.pathname);
  39. if (match) {
  40. this.cleanPageState();
  41. }
  42. }
  43. componentDidMount() {
  44. const matchId = this.isEdit();
  45. if (matchId) {
  46. this.props.dispatch({
  47. type: 'product/fetchProductItem',
  48. payload: { pid: matchId },
  49. });
  50. }
  51. }
  52. isEdit = () => {
  53. const { location } = this.props;
  54. const match = pathToRegexp('/product/package/edit/:id').exec(location.pathname);
  55. if (match) {
  56. return match[1];
  57. }
  58. return false;
  59. }
  60. cleanPageState = () => {
  61. this.props.dispatch({
  62. type: 'product/cleanItemState',
  63. payload: {},
  64. });
  65. }
  66. selectorDataFetcher = (name, params) => {
  67. switch (name) {
  68. case 'Course':
  69. this.props.dispatch({
  70. type: 'product/fetchCourseList',
  71. payload: params,
  72. });
  73. return;
  74. case 'Support':
  75. this.props.dispatch({
  76. type: 'product/fetchSupportList',
  77. payload: params,
  78. });
  79. return;
  80. }
  81. }
  82. handleRadioChange = (e) => {
  83. this.setState({
  84. productType: e.target.value,
  85. });
  86. this.selectorDataFetcher(e.target.value);
  87. }
  88. handleSelectorModalShow = () => {
  89. this.setState({
  90. selectorModalDestroy: false,
  91. });
  92. this.selectorDataFetcher(this.state.productType);
  93. }
  94. handleSelectorChange = (params) => {
  95. this.selectorDataFetcher(
  96. this.state.productType,
  97. params
  98. );
  99. }
  100. handleSelectorFinish = (rows) => {
  101. this.setState({
  102. selectorModalDestroy: true,
  103. });
  104. this.props.dispatch({
  105. type: 'product/fixCurrentItem',
  106. payload: {
  107. products: rows,
  108. },
  109. });
  110. }
  111. handleSelectorCancel = () => {
  112. this.setState({
  113. selectorModalDestroy: true,
  114. });
  115. }
  116. handleDragSortTableChange = (rows) => {
  117. this.props.dispatch({
  118. type: 'product/fixCurrentItem',
  119. payload: {
  120. products: rows
  121. },
  122. });
  123. }
  124. handlePriceInputChange = (field, key, value) => {
  125. const { product } = this.props;
  126. const { currentItem } = product;
  127. const { products = [] } = currentItem;
  128. let newData =[...products]
  129. newData = newData.map(item => {
  130. if (item.id === key) {
  131. return {
  132. ...item,
  133. [`${field}Price`]: value,
  134. };
  135. } else {
  136. return {...item};
  137. }
  138. });
  139. this.props.dispatch({
  140. type: 'product/fixCurrentItem',
  141. payload: {
  142. products: newData
  143. }
  144. });
  145. }
  146. handlePageBack = () => {
  147. this.props.dispatch(routerRedux.push({
  148. pathname: '/product/package',
  149. state: this.props.location.state,
  150. }));
  151. }
  152. handlePageSubmit = (e) => {
  153. e.preventDefault();
  154. this.props.form.validateFieldsAndScroll((err, values) => {
  155. if (!err) {
  156. // 表单字段处理
  157. const { status, ...rest } = values;
  158. values = { status: boolToStatus(status), ...rest };
  159. // products字段处理
  160. const { product } = this.props;
  161. const { currentItem } = product;
  162. const { products } = currentItem;
  163. let productList = [];
  164. let submittable = true;
  165. if (products) {
  166. for (let index in products) {
  167. let product = products[index];
  168. if (!product.cpPrice || !product.merchantPrice) {
  169. Message.error('还有价格未填写!');
  170. submittable = false;
  171. break;
  172. }
  173. productList.push({
  174. pid: product.pid,
  175. type: product.type,
  176. cpPrice: product.cpPrice,
  177. merchantPrice: product.merchantPrice,
  178. });
  179. }
  180. }
  181. // 参数未正确填写不可提交
  182. if (!submittable) {
  183. return;
  184. }
  185. const matchId = this.isEdit();
  186. if (matchId) {
  187. const params = {
  188. id: matchId,
  189. products: productList,
  190. ...values,
  191. };
  192. this.props.dispatch({
  193. type: 'product/updatePackageItem',
  194. payload: params,
  195. states: this.props.location.state,
  196. });
  197. } else {
  198. const params = {
  199. products: productList,
  200. ...values,
  201. };
  202. this.props.dispatch({
  203. type: 'product/createPackageItem',
  204. payload: params,
  205. states: this.props.location.state,
  206. });
  207. }
  208. }
  209. });
  210. }
  211. render() {
  212. const { form, pLoading, product } = this.props;
  213. const { selectorModalDestroy, productType } = this.state;
  214. const { currentItem } = product;
  215. const { code, name, status, products = [] } = currentItem;
  216. const { getFieldDecorator } = form;
  217. const productColumns = [{
  218. title: '序号',
  219. dataIndex: 'index',
  220. key: 0,
  221. align: 'center',
  222. render: (text, record, index) => index + 1,
  223. width: 50,
  224. }, {
  225. title: '产品编号',
  226. dataIndex: 'code',
  227. key: 1,
  228. width: '22%',
  229. }, {
  230. title: '产品名称',
  231. dataIndex: 'name',
  232. key: 2,
  233. }, {
  234. title: '产品类型',
  235. dataIndex: 'type',
  236. key: 3,
  237. align: 'center',
  238. render: (text) => renderProductType(text),
  239. width: '10%',
  240. }, {
  241. title: '供应商价格(¥)',
  242. dataIndex: 'cpPrice',
  243. key: 4,
  244. align: 'center',
  245. render: (text, record) => (
  246. <InputNumber
  247. min={0}
  248. value={text}
  249. style={{width: '100%'}}
  250. onChange={(value) => this.handlePriceInputChange('cp', record.key, value)}
  251. />
  252. ),
  253. width: '15%',
  254. }, {
  255. title: '平台方价格(¥)',
  256. dataIndex: 'merchantPrice',
  257. key: 5,
  258. align: 'center',
  259. render: (text, record) => (
  260. <InputNumber
  261. min={0}
  262. value={text}
  263. style={{width: '100%'}}
  264. onChange={(value) => this.handlePriceInputChange('merchant', record.key, value)}
  265. />
  266. ),
  267. width: '15%',
  268. }];
  269. const renderCardName = () => {
  270. return (
  271. <div className={styles.cardName}>
  272. <span>
  273. <a onClick={this.handleSelectorModalShow}>课程配套</a>
  274. </span>
  275. </div>
  276. );
  277. }
  278. const renderModalTitle = () => {
  279. return (
  280. <Radio.Group
  281. value={productType}
  282. onChange={this.handleRadioChange}
  283. className={styles.radio}
  284. >
  285. <Radio.Button value="Course">课程</Radio.Button>
  286. <Radio.Button value="Support">配套</Radio.Button>
  287. </Radio.Group>
  288. );
  289. }
  290. const getProductModal = () => {
  291. return (
  292. <Modal
  293. visible
  294. width={1100}
  295. footer={null}
  296. title={renderModalTitle()}
  297. maskClosable={false}
  298. onCancel={this.handleSelectorCancel}
  299. >
  300. <Selector
  301. multiple
  302. loading={pLoading}
  303. selectorName={productType}
  304. fixedName="Product"
  305. list={product.list}
  306. pageNo={product.pageNo}
  307. pageSize={product.pageSize}
  308. totalSize={product.totalSize}
  309. onCancel={this.handleSelectorCancel}
  310. onChange={this.handleSelectorChange}
  311. onFinish={this.handleSelectorFinish}
  312. />
  313. </Modal>
  314. );
  315. }
  316. return (
  317. <div>
  318. {/* 基础信息Card */}
  319. <Card title="基础信息" style={{marginBottom: 16}}>
  320. <Form>
  321. <Form.Item hasFeedback label={fieldLabels.code} {...formItemLayout}>
  322. {getFieldDecorator('code', {
  323. rules: [
  324. {
  325. required: true, message: '请填写套餐包编号',
  326. }, {
  327. pattern: /^[a-zA-Z0-9|-]+$/g, message: '编号包含非法字符',
  328. }
  329. ],
  330. initialValue: code,
  331. })(
  332. <Input
  333. placeholder="请输入"
  334. disabled={this.isEdit() ? true : false}
  335. />
  336. )}
  337. </Form.Item>
  338. <Form.Item hasFeedback label={fieldLabels.name} {...formItemLayout}>
  339. {getFieldDecorator('name', {
  340. rules: [{ required: true, message: '请填写套餐包名称' }],
  341. initialValue: name,
  342. })(
  343. <Input placeholder="请输入" />
  344. )}
  345. </Form.Item>
  346. <Form.Item label={fieldLabels.status} {...formItemLayout}>
  347. {getFieldDecorator('status', {
  348. valuePropName: 'checked',
  349. initialValue: statusToBool(status),
  350. })(
  351. <Switch
  352. checkedChildren="正常"
  353. unCheckedChildren="删除"
  354. />
  355. )}
  356. </Form.Item>
  357. </Form>
  358. </Card>
  359. <Card title={renderCardName()} style={{marginBottom: 70}}>
  360. <Table
  361. bordered
  362. pagination={false}
  363. className={styles.table}
  364. dataSource={addRowKey(products)}
  365. columns={productColumns}
  366. />
  367. {!selectorModalDestroy && getProductModal()}
  368. </Card>
  369. <FooterToolbar style={{ width: '100%' }}>
  370. <Button
  371. onClick={this.handlePageBack}
  372. style={{ marginRight: 10 }}
  373. >取消
  374. </Button>
  375. <Button
  376. type="primary"
  377. onClick={this.handlePageSubmit}
  378. >提交
  379. </Button>
  380. </FooterToolbar>
  381. </div>
  382. );
  383. }
  384. }