PackageEdit.js 5.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224
  1. import React, { Component } from 'react';
  2. import { Card, Modal, Form, Button, Tag, Icon } from 'antd';
  3. import { connect } from 'dva';
  4. import { routerRedux } from 'dva/router';
  5. import TableForm from './TableForm';
  6. import FooterToolbar from '../../../components/FooterToolbar';
  7. import Selector from '../../../components/AXTableSelector/Selector';
  8. import { addRowKey } from '../../../utils/utils';
  9. import { Hotax } from '../../../utils/config';
  10. @connect(({ loading, shelves, tag }) => ({
  11. tag,
  12. shelves,
  13. tLoading: loading.models.tag,
  14. submitting: loading.models.shelves,
  15. }))
  16. @Form.create()
  17. export default class PackageEdit extends Component {
  18. constructor(props) {
  19. super(props);
  20. const { location } = props;
  21. const { state } = location;
  22. const { merchantId, pid, productType } = state;
  23. this.state = {
  24. pid,
  25. merchantId,
  26. productType,
  27. tagSelectorDestroy: true,
  28. };
  29. }
  30. componentDidMount() {
  31. const { merchantId, pid } = this.state;
  32. this.props.dispatch({
  33. type: 'shelves/fetchItemDetail',
  34. payload: {
  35. pid,
  36. merchantId,
  37. },
  38. });
  39. }
  40. handleGoodsCreate=(data) => {
  41. const { pid, merchantId } = this.state;
  42. this.props.dispatch({
  43. type: 'shelves/createItemPrice',
  44. payload: {
  45. ...data,
  46. ...this.state,
  47. productType: Hotax.PRODUCT_PACKAGE,
  48. status: Hotax.STATUS_NORMAL,
  49. },
  50. states: {
  51. pid,
  52. merchantId,
  53. },
  54. });
  55. };
  56. handleGoodsUpdate=(data) => {
  57. const { pid, merchantId } = this.state;
  58. this.props.dispatch({
  59. type: 'shelves/updateItemPrice',
  60. payload: {
  61. ...data,
  62. ...this.state,
  63. },
  64. states: {
  65. pid,
  66. merchantId,
  67. },
  68. });
  69. };
  70. handleGoodsDelete=(data) => {
  71. const { pid, merchantId } = this.state;
  72. this.props.dispatch({
  73. type: 'shelves/deleteItemPrice',
  74. payload: data,
  75. states: {
  76. pid,
  77. merchantId,
  78. },
  79. });
  80. };
  81. handleTagClose=(index) => {
  82. const { pid, merchantId } = this.state;
  83. const { shelves } = this.props;
  84. const { currentItem } = shelves;
  85. const { tags } = currentItem;
  86. const newTags = tags.filter((item, location) => location !== index);
  87. const newTagIds = newTags.map(item => item.id);
  88. this.props.dispatch({
  89. type: 'shelves/updateItemTags',
  90. payload: {
  91. pid,
  92. merchantId,
  93. tags: newTagIds,
  94. },
  95. states: {
  96. pid,
  97. merchantId,
  98. },
  99. });
  100. };
  101. handleTagSelectorModalShow = () => {
  102. this.setState({
  103. tagSelectorDestroy: false,
  104. });
  105. const { merchantId } = this.state;
  106. this.props.dispatch({
  107. type: 'tag/fetchTagList',
  108. payload: { merchantId },
  109. });
  110. };
  111. handleTagSelectorCancel = () => {
  112. this.setState({
  113. tagSelectorDestroy: true,
  114. });
  115. };
  116. handleTagSelectorChange = (params) => {
  117. const { merchantId } = this.state;
  118. this.props.dispatch({
  119. type: 'tag/fetchTagList',
  120. payload: { merchantId, ...params },
  121. });
  122. };
  123. handleTagSelectorFinish = (rows) => {
  124. const { pid, merchantId } = this.state;
  125. const newTagIds = (rows || []).map(row => row.id);
  126. this.props.dispatch({
  127. type: 'shelves/updateItemTags',
  128. payload: {
  129. pid,
  130. merchantId,
  131. tags: newTagIds,
  132. },
  133. states: {
  134. pid,
  135. merchantId,
  136. },
  137. });
  138. this.setState({
  139. tagSelectorDestroy: true,
  140. });
  141. };
  142. handlePageBack=() => {
  143. this.props.dispatch(routerRedux.push({
  144. pathname: '/shelves/package',
  145. state: this.props.location.state,
  146. }));
  147. };
  148. render() {
  149. const { tagSelectorDestroy } = this.state;
  150. const { submitting, tLoading, shelves, tag, form } = this.props;
  151. const { getFieldDecorator } = form;
  152. const { currentItem } = shelves;
  153. const { goods, tags } = currentItem;
  154. return (
  155. <div>
  156. <Card title="价格管理" style={{ marginBottom: 16 }}>
  157. {getFieldDecorator('goods', {
  158. initialValue: addRowKey(goods),
  159. })(
  160. <TableForm
  161. loading={submitting}
  162. onCreate={this.handleGoodsCreate}
  163. onUpdate={this.handleGoodsUpdate}
  164. onDelete={this.handleGoodsDelete}
  165. />
  166. )}
  167. </Card>
  168. <Card title="栏目管理" style={{ marginBottom: 70 }}>
  169. {tags && tags.map((item, index) => (
  170. <Tag
  171. closable
  172. afterClose={() => this.handleTagClose(index)}
  173. color="#87d068"
  174. key={item.id}
  175. >
  176. {item.name}
  177. </Tag>
  178. ))}
  179. <Tag
  180. style={{ borderStyle: 'dashed' }}
  181. onClick={this.handleTagSelectorModalShow}
  182. >
  183. <Icon type="plus" />添加栏目
  184. </Tag>
  185. {!tagSelectorDestroy && (
  186. <Modal
  187. width={1100}
  188. footer={null}
  189. visible
  190. title="标签列表"
  191. maskClosable={false}
  192. onCancel={this.handleMerchantSelectorCancel}
  193. >
  194. <Selector
  195. multiple
  196. loading={tLoading}
  197. selectorName="Tag"
  198. list={tag.list}
  199. pageNo={tag.pageNo}
  200. pageSize={tag.pageSize}
  201. totalSize={tag.totalSize}
  202. selectedRows={tags}
  203. onCancel={this.handleTagSelectorCancel}
  204. onChange={this.handleTagSelectorChange}
  205. onFinish={this.handleTagSelectorFinish}
  206. />
  207. </Modal>
  208. )}
  209. </Card>
  210. <FooterToolbar style={{ width: '100%' }}>
  211. <Button
  212. type="primary"
  213. onClick={this.handlePageBack}
  214. style={{ marginRight: 10 }}
  215. >返回上一页
  216. </Button>
  217. </FooterToolbar>
  218. </div>
  219. );
  220. }
  221. }