|
@@ -0,0 +1,374 @@
|
|
|
+import React, { PureComponent } from 'react';
|
|
|
+import { routerRedux } from 'dva/router';
|
|
|
+import PropTypes from 'prop-types';
|
|
|
+import queryString from 'query-string';
|
|
|
+import { connect } from 'dva';
|
|
|
+import { Upload, Spin, Switch, Popover, Badge, Table, Radio, Card, Form, Input, Icon, Button, Select } from 'antd';
|
|
|
+import PageHeaderLayout from '../../../layouts/PageHeaderLayout';
|
|
|
+import CourseSelectModal from './course';
|
|
|
+import SupportSelectModal from './support';
|
|
|
+import PackageSelectModal from './package';
|
|
|
+import { Codes, productType } from '../../../utils/config';
|
|
|
+import styles from './index.less';
|
|
|
+
|
|
|
+const RadioGroup = Radio.Group;
|
|
|
+const FormItem = Form.Item;
|
|
|
+const Option = Select.Option;
|
|
|
+const { Meta } = Card;
|
|
|
+const { TextArea } = Input;
|
|
|
+
|
|
|
+@Form.create()
|
|
|
+@connect(state => ({
|
|
|
+ course: state.course,
|
|
|
+ support: state.support,
|
|
|
+ combo: state.combo,
|
|
|
+ merchant: state.merchant,
|
|
|
+ goodsDetail: state.goodsDetail,
|
|
|
+}))
|
|
|
+export default class GoodsAdd extends PureComponent {
|
|
|
+ state = {
|
|
|
+ radioType: Codes.CODE_COURSE,
|
|
|
+ curClickedBtn: null,
|
|
|
+ courseModalVisible: false,
|
|
|
+ supportModalVisible: false,
|
|
|
+ packageModalVisible: false,
|
|
|
+ selectItem: null,
|
|
|
+ };
|
|
|
+
|
|
|
+ componentDidMount() {
|
|
|
+ const { dispatch } = this.props;
|
|
|
+ dispatch({
|
|
|
+ type: 'merchant/query',
|
|
|
+ payload: {
|
|
|
+ pageNo: 1,
|
|
|
+ pageSize: 1000,
|
|
|
+ status: Codes.CODE_NORMAL,
|
|
|
+ domain: Codes.CODE_PJ,
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ handleRadioOnChange = (e) => {
|
|
|
+ this.setState({ radioType: e.target.value });
|
|
|
+ }
|
|
|
+
|
|
|
+ handleModalSearch = (data) => {
|
|
|
+ const { curClickedBtn } = this.state;
|
|
|
+ const { dispatch } = this.props;
|
|
|
+ const newData = { ...data };
|
|
|
+ if (newData.keyword) {
|
|
|
+ newData[newData.field] = newData.keyword;
|
|
|
+ delete newData.field;
|
|
|
+ delete newData.keyword;
|
|
|
+ } else {
|
|
|
+ delete newData.field;
|
|
|
+ delete newData.keyword;
|
|
|
+ }
|
|
|
+ if (curClickedBtn === Codes.CODE_COURSE) {
|
|
|
+ dispatch({
|
|
|
+ type: 'course/query',
|
|
|
+ payload: { ...newData, pageNo: 1, pageSize: 10, status: Codes.CODE_NORMAL },
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ handleModalOk = (data) => {
|
|
|
+ const { curClickedBtn } = this.state;
|
|
|
+ const { dispatch } = this.props;
|
|
|
+ if (curClickedBtn === Codes.CODE_COURSE) {
|
|
|
+ this.setState({
|
|
|
+ selectItem: data,
|
|
|
+ courseModalVisible: false,
|
|
|
+ });
|
|
|
+ } else if(curClickedBtn === Codes.CODE_SUPPORT) {
|
|
|
+ this.setState({
|
|
|
+ selectItem: data,
|
|
|
+ supportModalVisible: false,
|
|
|
+ });
|
|
|
+ } else if (curClickedBtn === Codes.CODE_PACKAGE) {
|
|
|
+ this.setState({
|
|
|
+ selectItem: data,
|
|
|
+ packageModalVisible: false,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ handleModalCancel = () => {
|
|
|
+ const { curClickedBtn } = this.state;
|
|
|
+ const { dispatch } = this.props;
|
|
|
+ if (curClickedBtn === Codes.CODE_COURSE) {
|
|
|
+ this.setState({ courseModalVisible: false });
|
|
|
+ } else if (curClickedBtn === Codes.CODE_SUPPORT) {
|
|
|
+ this.setState({ supportModalVisible: false });
|
|
|
+ } else if (curClickedBtn === Codes.CODE_PACKAGE) {
|
|
|
+ this.setState({ packageModalVisible: false });
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ handleModalShow = (name) => {
|
|
|
+ const { dispatch } = this.props;
|
|
|
+ if (name === Codes.CODE_COURSE) {
|
|
|
+ this.setState({
|
|
|
+ curClickedBtn: name,
|
|
|
+ courseModalVisible: true,
|
|
|
+ }, () => {
|
|
|
+ dispatch({
|
|
|
+ type: 'course/query',
|
|
|
+ payload: {
|
|
|
+ pageNo: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ status: Codes.CODE_NORMAL,
|
|
|
+ }
|
|
|
+ });
|
|
|
+ })
|
|
|
+ } else if (name === Codes.CODE_SUPPORT) {
|
|
|
+ this.setState({
|
|
|
+ curClickedBtn: name,
|
|
|
+ supportModalVisible: true,
|
|
|
+ }, () => {
|
|
|
+ dispatch({
|
|
|
+ type: 'support/query',
|
|
|
+ payload: {
|
|
|
+ pageNo: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ status: Codes.CODE_NORMAL,
|
|
|
+ }
|
|
|
+ });
|
|
|
+ })
|
|
|
+ } else if (name === Codes.CODE_PACKAGE) {
|
|
|
+ this.setState({
|
|
|
+ curClickedBtn: name,
|
|
|
+ packageModalVisible: true,
|
|
|
+ }, () => {
|
|
|
+ dispatch({
|
|
|
+ type: 'combo/query',
|
|
|
+ payload: {
|
|
|
+ pageNo: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ status: Codes.CODE_NORMAL,
|
|
|
+ }
|
|
|
+ });
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ handleModalTableChange = () => {
|
|
|
+ const { curClickedBtn } = this.state;
|
|
|
+ const { dispatch } = this.props;
|
|
|
+ const newFilters = { ...filters };
|
|
|
+ if (newFilters.keyword) {
|
|
|
+ newFilters[newFilters.field] = newFilters.keyword;
|
|
|
+ delete newFilters.field;
|
|
|
+ delete newFilters.keyword;
|
|
|
+ } else {
|
|
|
+ delete newFilters.field;
|
|
|
+ delete newFilters.keyword;
|
|
|
+ }
|
|
|
+ const getValue = obj => Object.keys(obj).map(key => obj[key]).join(',');
|
|
|
+ const tableFilters = Object.keys(filterArgs).reduce((obj, key) => {
|
|
|
+ const newObj = { ...obj };
|
|
|
+ newObj[key] = getValue(filterArgs[key]);
|
|
|
+ return newObj;
|
|
|
+ }, {});
|
|
|
+
|
|
|
+ const data = { ...newFilters, ...tableFilters, pageNo: pagination.current, pageSize: pagination.pageSize };
|
|
|
+ Object.keys(data).map(key => data[key] ? null : delete data[key]);
|
|
|
+ if (curClickedBtn === Codes.CODE_COURSE) {
|
|
|
+ dispatch({ type: 'course/query', payload: { ...data, status: Codes.CODE_NORMAL } });
|
|
|
+ } else if (curClickedBtn === Codes.CODE_SUPPORT) {
|
|
|
+ dispatch({ type: 'support/query', payload: { ...data, status: Codes.CODE_NORMAL } });
|
|
|
+ } else if (curClickedBtn === Codes.CODE_PACKAGE) {
|
|
|
+ dispatch({ type: 'combo/query', payload: { ...data, status: Codes.CODE_PACKAGE } });
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ handlePageSubmit = (e) => {
|
|
|
+ e.preventDefault();
|
|
|
+ const {
|
|
|
+ dispatch,
|
|
|
+ form: {
|
|
|
+ validateFields,
|
|
|
+ getFieldsValue,
|
|
|
+ resetFields,
|
|
|
+ },
|
|
|
+ goodsDetail: {
|
|
|
+ filters,
|
|
|
+ }
|
|
|
+ } = this.props;
|
|
|
+ const {
|
|
|
+ selectItem,
|
|
|
+ radioType,
|
|
|
+ } = this.state;
|
|
|
+ validateFields(errors => {
|
|
|
+ if (errors) return;
|
|
|
+ const data = {
|
|
|
+ ...getFieldsValue(['merchantId', 'status']),
|
|
|
+ pid: selectItem.pid,
|
|
|
+ };
|
|
|
+ data.status ? data.status = Codes.CODE_NORMAL : data.status = Codes.CODE_DELETE;
|
|
|
+ dispatch({
|
|
|
+ type: `goodsDetail/createMerchantProduct`,
|
|
|
+ payload: data,
|
|
|
+ callback: () => {
|
|
|
+ dispatch(
|
|
|
+ routerRedux.push({
|
|
|
+ pathname: '/goods',
|
|
|
+ search: queryString.stringify(filters),
|
|
|
+ })
|
|
|
+ );
|
|
|
+ resetFields();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ handlePageCancel = () => {
|
|
|
+ const { dispatch, goodsDetail: { filters } } = this.props;
|
|
|
+ dispatch(
|
|
|
+ routerRedux.push({
|
|
|
+ pathname: '/goods',
|
|
|
+ search: queryString.stringify(filters),
|
|
|
+ })
|
|
|
+ );
|
|
|
+ }
|
|
|
+
|
|
|
+ renderLabelName = () => {
|
|
|
+ const { radioType } = this.state;
|
|
|
+ switch (radioType) {
|
|
|
+ case Codes.CODE_COURSE:
|
|
|
+ return '选择课程';
|
|
|
+ break;
|
|
|
+ case Codes.CODE_SUPPORT:
|
|
|
+ return '选择配套';
|
|
|
+ break;
|
|
|
+ case Codes.CODE_PACKAGE:
|
|
|
+ return '选择课程包';
|
|
|
+ break;
|
|
|
+ default:
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ render() {
|
|
|
+ const formItemLayout = {
|
|
|
+ labelCol: {
|
|
|
+ span: 7,
|
|
|
+ },
|
|
|
+ wrapperCol: {
|
|
|
+ span: 12,
|
|
|
+ },
|
|
|
+ };
|
|
|
+ const submitFormLayout = {
|
|
|
+ wrapperCol: {
|
|
|
+ xs: { span: 24, offset: 0 },
|
|
|
+ sm: { span: 10, offset: 7 },
|
|
|
+ },
|
|
|
+ };
|
|
|
+ const {
|
|
|
+ form: {
|
|
|
+ getFieldDecorator
|
|
|
+ },
|
|
|
+ item = {},
|
|
|
+ course,
|
|
|
+ merchant,
|
|
|
+ support,
|
|
|
+ combo
|
|
|
+ } = this.props;
|
|
|
+ const {
|
|
|
+ radioType,
|
|
|
+ selectItem,
|
|
|
+ courseModalVisible,
|
|
|
+ supportModalVisible,
|
|
|
+ packageModalVisible,
|
|
|
+ } = this.state;
|
|
|
+
|
|
|
+ return (
|
|
|
+ <PageHeaderLayout>
|
|
|
+ <Card>
|
|
|
+ <Form layout="horizontal" onSubmit={this.handlePageSubmit}>
|
|
|
+ <FormItem label="选择渠道:" {...formItemLayout}>
|
|
|
+ {getFieldDecorator('merchantId', {
|
|
|
+ rules: [{ required: true, type: 'string', message: '此项为必选项!' }],
|
|
|
+ })(<Select placeholder="请选择" style={{ width: '43%' }}>{merchant.list.map(item => <Option value={item.id} key={item.id}>{item.name}</Option>)}</Select>)}
|
|
|
+ </FormItem>
|
|
|
+ <FormItem label="产品类型:" {...formItemLayout}>
|
|
|
+ {getFieldDecorator('type', {
|
|
|
+ rules: [{ required: true, type: 'string', message: '请选择产品类型!' }],
|
|
|
+ initialValue: radioType,
|
|
|
+ })(
|
|
|
+ <RadioGroup onChange={this.handleRadioOnChange}>
|
|
|
+ {Object.keys(productType).map(key =>
|
|
|
+ <Radio value={key} key={key}>{productType[key]}</Radio>)
|
|
|
+ }
|
|
|
+ </RadioGroup>
|
|
|
+ )}
|
|
|
+ </FormItem>
|
|
|
+ <FormItem label={this.renderLabelName()} {...formItemLayout}>
|
|
|
+ <Button size="small" type="primary" icon="select" onClick={() => this.handleModalShow(radioType)}>选择</Button>
|
|
|
+ </FormItem>
|
|
|
+ <FormItem {...submitFormLayout}>
|
|
|
+ {selectItem ?
|
|
|
+ <Card
|
|
|
+ title={selectItem.name}
|
|
|
+ hoverable
|
|
|
+ cover={<img alt="暂无封面图片" src={selectItem.coverUrl} />}
|
|
|
+ style={{ width: '50%' }}
|
|
|
+ >
|
|
|
+ </Card> :
|
|
|
+ <Button type="dashed" className={styles.newButton}>未选择</Button>
|
|
|
+ }
|
|
|
+ </FormItem>
|
|
|
+ <FormItem label="上架状态:" {...formItemLayout}>
|
|
|
+ {getFieldDecorator('status', {
|
|
|
+ valuePropsName: 'checked',
|
|
|
+ })(<Switch defaultChecked={false} checkedChildren="出售" unCheckedChildren="下架" />)}
|
|
|
+ </FormItem>
|
|
|
+ <FormItem {...submitFormLayout} style={{ marginTop: 32 }}>
|
|
|
+ <Button onClick={this.handlePageCancel}>取消</Button>
|
|
|
+ <Button type="primary" style={{ marginLeft: 35 }} htmlType="submit">提交</Button>
|
|
|
+ </FormItem>
|
|
|
+ </Form>
|
|
|
+ {}
|
|
|
+ <CourseSelectModal
|
|
|
+ rowKeyName="id"
|
|
|
+ modalVisible={courseModalVisible}
|
|
|
+ style={{ top: 30 }}
|
|
|
+ onOk={this.handleModalOk}
|
|
|
+ onCancel={this.handleModalCancel}
|
|
|
+ onSearch={this.handleModalSearch}
|
|
|
+ fsTableDataSource={course.list || []}
|
|
|
+ fsTableLoading={course.listLoading}
|
|
|
+ fsTablePagination={course.pagination}
|
|
|
+ fsTableOnChange={this.handleModalTableChange}
|
|
|
+ />
|
|
|
+ {}
|
|
|
+ <SupportSelectModal
|
|
|
+ rowKeyName="id"
|
|
|
+ modalVisible={supportModalVisible}
|
|
|
+ style={{ top: 30 }}
|
|
|
+ onOk={this.handleModalOk}
|
|
|
+ onCancel={this.handleModalCancel}
|
|
|
+ onSearch={this.handleModalSearch}
|
|
|
+ fsTableDataSource={support.list || []}
|
|
|
+ fsTableLoading={support.listLoading}
|
|
|
+ fsTablePagination={support.pagination}
|
|
|
+ fsTableOnChange={this.handleModalTableChange}
|
|
|
+ />
|
|
|
+ {}
|
|
|
+ <PackageSelectModal
|
|
|
+ rowKeyName="id"
|
|
|
+ modalVisible={packageModalVisible}
|
|
|
+ style={{ top: 30 }}
|
|
|
+ onOk={this.handleModalOk}
|
|
|
+ onCancel={this.handleModalCancel}
|
|
|
+ onSearch={this.handleModalSearch}
|
|
|
+ fsTableDataSource={combo.list || []}
|
|
|
+ fsTableLoading={combo.listLoading}
|
|
|
+ fsTablePagination={combo.pagination}
|
|
|
+ fsTableOnChange={this.handleModalTableChange}
|
|
|
+ />
|
|
|
+ </Card>
|
|
|
+ </PageHeaderLayout>
|
|
|
+ );
|
|
|
+ }
|
|
|
+}
|