|
@@ -0,0 +1,412 @@
|
|
|
+import React, { Component } from 'react';
|
|
|
+import moment from 'moment';
|
|
|
+import pathToRegexp from 'path-to-regexp';
|
|
|
+import { connect } from 'dva';
|
|
|
+import { routerRedux } from 'dva/router';
|
|
|
+import {
|
|
|
+ Form, Modal, Card, Button, Input, Switch, Row, Col, Carousel, Select, DatePicker } from 'antd';
|
|
|
+import { statusToBool, boolToStatus, genAbsolutePicUrl } from '../../../utils/utils';
|
|
|
+import Selector from '../../../components/AXTableSelector/Selector';
|
|
|
+import FooterToolbar from '../../../components/FooterToolbar/index';
|
|
|
+import styles from './TrainingCreate.less';
|
|
|
+
|
|
|
+const fieldLabels = {
|
|
|
+ code: '师训编号',
|
|
|
+ title: '师训主题',
|
|
|
+ dateDesc: '活动时间范围',
|
|
|
+ openTime: '活动开始时间',
|
|
|
+ closeTime: '活动结束时间',
|
|
|
+ merchant: '内容提供商',
|
|
|
+ coverUrl: '师训封面图',
|
|
|
+ imgList: '详情大图列表',
|
|
|
+ status: '状态',
|
|
|
+};
|
|
|
+const formItemLayout = {
|
|
|
+ labelCol: {
|
|
|
+ xs: { span: 24 },
|
|
|
+ sm: { span: 3 },
|
|
|
+ },
|
|
|
+ wrapperCol: {
|
|
|
+ xs: { span: 24 },
|
|
|
+ sm: { span: 14 },
|
|
|
+ md: { span: 12 },
|
|
|
+ },
|
|
|
+};
|
|
|
+
|
|
|
+@connect(({ loading, product, resource, merchant }) => ({
|
|
|
+ product,
|
|
|
+ resource,
|
|
|
+ merchant,
|
|
|
+ pLoading: loading.models.product,
|
|
|
+ rLoading: loading.models.resource,
|
|
|
+ submitting: loading.models.product,
|
|
|
+}))
|
|
|
+@Form.create()
|
|
|
+export default class TrainingCreatePage extends Component {
|
|
|
+ state = {
|
|
|
+ coverSelectorDestroy: true,
|
|
|
+ carouselSelectorDestroy: true,
|
|
|
+ };
|
|
|
+ componentWillMount() {
|
|
|
+ const match = pathToRegexp('/product/training/create').exec(this.props.location.pathname);
|
|
|
+ if (match) {
|
|
|
+ this.cleanPageState();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ componentDidMount() {
|
|
|
+ const matchId = this.isEdit();
|
|
|
+ if (matchId) {
|
|
|
+ this.props.dispatch({
|
|
|
+ type: 'product/fetchProductItem',
|
|
|
+ payload: { pid: matchId },
|
|
|
+ });
|
|
|
+ }
|
|
|
+ this.props.dispatch({
|
|
|
+ type: 'merchant/fetchMerchantList',
|
|
|
+ payload: {pageSize: 1000}, // TODO 以后商户多了需要改写交互样式
|
|
|
+ });
|
|
|
+ }
|
|
|
+ isEdit = () => {
|
|
|
+ const { location } = this.props;
|
|
|
+ const match = pathToRegexp('/product/training/edit/:id').exec(location.pathname);
|
|
|
+ if (match) {
|
|
|
+ return match[1];
|
|
|
+ }
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ cleanPageState = () => {
|
|
|
+ this.props.dispatch({
|
|
|
+ type: 'product/cleanItemState',
|
|
|
+ payload: {},
|
|
|
+ });
|
|
|
+ }
|
|
|
+ selectorDataFetcher = (name, params) => {
|
|
|
+ switch (name) {
|
|
|
+ case 'cover':
|
|
|
+ this.props.dispatch({
|
|
|
+ type: 'resource/fetchImageList',
|
|
|
+ payload: params,
|
|
|
+ });
|
|
|
+ break;
|
|
|
+ case 'carousel':
|
|
|
+ this.props.dispatch({
|
|
|
+ type: 'resource/fetchImageList',
|
|
|
+ payload: params,
|
|
|
+ });
|
|
|
+ break;
|
|
|
+ default:
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ currentItemFormatter = (name, rows) => {
|
|
|
+ let payload;
|
|
|
+ switch (name) {
|
|
|
+ case 'cover':
|
|
|
+ payload = { coverUrl: rows[0].path };
|
|
|
+ break;
|
|
|
+ case 'carousel':
|
|
|
+ payload = { imgList: rows.map(row => row.path) };
|
|
|
+ break;
|
|
|
+ default:
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ return payload;
|
|
|
+ }
|
|
|
+ handleSelectorModalShow = (name) => {
|
|
|
+ this.setState({
|
|
|
+ [`${name}SelectorDestroy`]: false,
|
|
|
+ });
|
|
|
+ this.selectorDataFetcher(name);
|
|
|
+ }
|
|
|
+ handleSelectorChange = (name, params) => {
|
|
|
+ this.selectorDataFetcher(name, params);
|
|
|
+ }
|
|
|
+ handleSelectorFinish = (name, rows) => {
|
|
|
+ this.setState({
|
|
|
+ [`${name}SelectorDestroy`]: true,
|
|
|
+ });
|
|
|
+ const payload = this.currentItemFormatter(name, rows);
|
|
|
+ this.props.dispatch({
|
|
|
+ payload,
|
|
|
+ type: 'product/fixCurrentItem',
|
|
|
+ });
|
|
|
+ }
|
|
|
+ handleSelectorCancel = (name) => {
|
|
|
+ this.setState({
|
|
|
+ [`${name}SelectorDestroy`]: true,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ handlePageBack = () => {
|
|
|
+ this.props.dispatch(routerRedux.push({
|
|
|
+ pathname: '/product/training',
|
|
|
+ state: this.props.location.state,
|
|
|
+ }));
|
|
|
+ }
|
|
|
+ handlePageSubmit = (e) => {
|
|
|
+ e.preventDefault();
|
|
|
+ this.props.form.validateFieldsAndScroll((err, values) => {
|
|
|
+ if (!err) {
|
|
|
+ // 从表单提取基础信息字段
|
|
|
+ const { status, title, openTime, closeTime, ...rest } = values;
|
|
|
+ const postData = {
|
|
|
+ title,
|
|
|
+ openTime: parseInt(moment(openTime).format('x'), 10),
|
|
|
+ closeTime: parseInt(moment(closeTime).format('x'), 10),
|
|
|
+ status: boolToStatus(status),
|
|
|
+ ...rest,
|
|
|
+ };
|
|
|
+
|
|
|
+ // 从props中提取coverUrl、imgList字段
|
|
|
+ const { product } = this.props;
|
|
|
+ const { currentItem } = product;
|
|
|
+ const { imgList, coverUrl } = currentItem;
|
|
|
+
|
|
|
+ // 更新或者创建操作
|
|
|
+ const matchId = this.isEdit();
|
|
|
+ if (matchId) {
|
|
|
+ const params = {
|
|
|
+ imgList,
|
|
|
+ coverUrl,
|
|
|
+ id: matchId,
|
|
|
+ ...postData,
|
|
|
+ };
|
|
|
+ this.props.dispatch({
|
|
|
+ type: 'product/updateTrainingItem',
|
|
|
+ payload: params,
|
|
|
+ states: this.props.location.state,
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ const params = {
|
|
|
+ imgList,
|
|
|
+ coverUrl,
|
|
|
+ ...postData,
|
|
|
+ };
|
|
|
+ this.props.dispatch({
|
|
|
+ type: 'product/createTrainingItem',
|
|
|
+ payload: params,
|
|
|
+ states: this.props.location.state,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ render() {
|
|
|
+ const { form, submitting, rLoading, product, resource, merchant } = this.props;
|
|
|
+ const { coverSelectorDestroy, carouselSelectorDestroy } = this.state;
|
|
|
+ const { currentItem } = product;
|
|
|
+ const {
|
|
|
+ code, title, dateDesc, openTime, closeTime, status, coverUrl, cpId, imgList = [],
|
|
|
+ } = currentItem;
|
|
|
+ const { getFieldDecorator } = form;
|
|
|
+
|
|
|
+
|
|
|
+ const getMerchants = () => {
|
|
|
+ const { list } = merchant;
|
|
|
+ const options = list.map(item => ({
|
|
|
+ text: item.name,
|
|
|
+ key: item.id,
|
|
|
+ }));
|
|
|
+ return options;
|
|
|
+ }
|
|
|
+
|
|
|
+ const getResourceModal = (isCover) => {
|
|
|
+ return (
|
|
|
+ <Modal
|
|
|
+ visible
|
|
|
+ title="图片资源"
|
|
|
+ width={isCover ? 900 : 1100}
|
|
|
+ footer={null}
|
|
|
+ maskClosable={false}
|
|
|
+ onCancel={() => this.handleSelectorCancel(isCover ? 'cover' : 'carousel')}
|
|
|
+ >
|
|
|
+ <Selector
|
|
|
+ loading={rLoading}
|
|
|
+ list={resource.list}
|
|
|
+ pageNo={resource.pageNo}
|
|
|
+ pageSize={resource.pageSize}
|
|
|
+ totalSize={resource.totalSize}
|
|
|
+ multiple={isCover ? false : true}
|
|
|
+ selectorName={isCover ? 'PictureSingle' : 'Picture'}
|
|
|
+ onCancel={() => this.handleSelectorCancel(isCover ? 'cover' : 'carousel')}
|
|
|
+ onChange={(data) => this.handleSelectorChange(isCover ? 'cover' : 'carousel', data)}
|
|
|
+ onFinish={(rows) => this.handleSelectorFinish(isCover ? 'cover' : 'carousel', rows)}
|
|
|
+ />
|
|
|
+ </Modal>
|
|
|
+ );
|
|
|
+ }
|
|
|
+ const renderCoverCardName = () => {
|
|
|
+ return (
|
|
|
+ <div className={styles.cardName}>
|
|
|
+ <span>
|
|
|
+ <a onClick={() => this.handleSelectorModalShow('cover')}>师训封面</a>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+ }
|
|
|
+ const renderCarouselCardName = () => {
|
|
|
+ return (
|
|
|
+ <div className={styles.cardName}>
|
|
|
+ <span>
|
|
|
+ <a onClick={() => this.handleSelectorModalShow('carousel')}>详情大图</a>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+ }
|
|
|
+ return (
|
|
|
+ <div>
|
|
|
+ {/* 基础信息Card */}
|
|
|
+ <Card title="基础信息" style={{ marginBottom: 16 }}>
|
|
|
+ <Form>
|
|
|
+ <Form.Item hasFeedback label={fieldLabels.code} {...formItemLayout}>
|
|
|
+ {getFieldDecorator('code', {
|
|
|
+ rules: [
|
|
|
+ {
|
|
|
+ required: true, message: '请填写师训编号',
|
|
|
+ }, {
|
|
|
+ pattern: /^[a-zA-Z0-9|-]+$/g, message: '编号包含非法字符',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ initialValue: code,
|
|
|
+ })(
|
|
|
+ <Input
|
|
|
+ placeholder="请输入"
|
|
|
+ disabled={this.isEdit() ? true : false}
|
|
|
+ />
|
|
|
+ )}
|
|
|
+ </Form.Item>
|
|
|
+ <Form.Item hasFeedback label={fieldLabels.title} {...formItemLayout}>
|
|
|
+ {getFieldDecorator('title', {
|
|
|
+ rules: [{ required: true, message: '请填写师训主题' }],
|
|
|
+ initialValue: title,
|
|
|
+ })(
|
|
|
+ <Input placeholder="请输入" />
|
|
|
+ )}
|
|
|
+ </Form.Item>
|
|
|
+ <Form.Item hasFeedback label={fieldLabels.dateDesc} {...formItemLayout}>
|
|
|
+ {getFieldDecorator('dateDesc', {
|
|
|
+ rules: [{ required: true, message: '请填写师训活动时间范围' }],
|
|
|
+ initialValue: dateDesc,
|
|
|
+ })(
|
|
|
+ <Input placeholder="请输入" />
|
|
|
+ )}
|
|
|
+ </Form.Item>
|
|
|
+ <Form.Item hasFeedback label={fieldLabels.openTime} {...formItemLayout}>
|
|
|
+ {getFieldDecorator('openTime', {
|
|
|
+ rules: [{ required: true, message: '请选择开始时间' }],
|
|
|
+ initialValue: openTime && moment(openTime),
|
|
|
+ })(
|
|
|
+ <DatePicker
|
|
|
+ showTime
|
|
|
+ placeholder="选择开始时间"
|
|
|
+ format="YYYY-MM-DD HH:mm:ss"
|
|
|
+ style={{ width: '100%' }}
|
|
|
+ />
|
|
|
+ )}
|
|
|
+ </Form.Item>
|
|
|
+ <Form.Item hasFeedback label={fieldLabels.closeTime} {...formItemLayout}>
|
|
|
+ {getFieldDecorator('closeTime', {
|
|
|
+ rules: [{ required: true, message: '请选择结束时间' }],
|
|
|
+ initialValue: closeTime && moment(closeTime),
|
|
|
+ })(
|
|
|
+ <DatePicker
|
|
|
+ showTime
|
|
|
+ placeholder="选择结束时间"
|
|
|
+ format="YYYY-MM-DD HH:mm:ss"
|
|
|
+ style={{ width: '100%' }}
|
|
|
+ />
|
|
|
+ )}
|
|
|
+ </Form.Item>
|
|
|
+ <Form.Item hasFeedback label={fieldLabels.merchant} {...formItemLayout}>
|
|
|
+ {getFieldDecorator('cpId', {
|
|
|
+ rules: [{ required: true, message: '请选择供应商' }],
|
|
|
+ initialValue: cpId,
|
|
|
+ })(
|
|
|
+ <Select placeholder="请选择">
|
|
|
+ {
|
|
|
+ getMerchants().map(item => (
|
|
|
+ <Select.Option key={item.key} value={item.key}>
|
|
|
+ {item.text}
|
|
|
+ </Select.Option>
|
|
|
+ ))
|
|
|
+ }
|
|
|
+ </Select>
|
|
|
+ )}
|
|
|
+ </Form.Item>
|
|
|
+ <Form.Item label={fieldLabels.status} {...formItemLayout}>
|
|
|
+ {getFieldDecorator('status', {
|
|
|
+ valuePropName: 'checked',
|
|
|
+ initialValue: statusToBool(status),
|
|
|
+ })(
|
|
|
+ <Switch
|
|
|
+ checkedChildren="正常"
|
|
|
+ unCheckedChildren="删除"
|
|
|
+ />
|
|
|
+ )}
|
|
|
+ </Form.Item>
|
|
|
+ </Form>
|
|
|
+ </Card>
|
|
|
+ {/* 封面及走马灯选择Card */}
|
|
|
+ <Card title="封面 | 图册" style={{ marginBottom: 70 }}>
|
|
|
+ <Row gutter={16}>
|
|
|
+ <Col
|
|
|
+ md={{ span: 12, offset: 1 }}
|
|
|
+ lg={{ span: 8, offset: 2 }}
|
|
|
+ xl={{ span: 8, offset: 2 }}
|
|
|
+ xxl={{ span: 6, offset: 5 }}
|
|
|
+ >
|
|
|
+ <Card
|
|
|
+ hoverable
|
|
|
+ title={renderCoverCardName()}
|
|
|
+ >
|
|
|
+ <div className={styles.cover}>
|
|
|
+ {coverUrl && (
|
|
|
+ <img src={genAbsolutePicUrl(coverUrl)} alt="" />
|
|
|
+ )}
|
|
|
+ </div>
|
|
|
+ {!coverSelectorDestroy && getResourceModal(true)}
|
|
|
+ </Card>
|
|
|
+ </Col>
|
|
|
+ <Col
|
|
|
+ md={{ span: 10, offset: 2 }}
|
|
|
+ lg={{ span: 8, offset: 4 }}
|
|
|
+ xl={{ span: 6, offset: 4 }}
|
|
|
+ xxl={{ span: 4, offset: 5 }}
|
|
|
+ >
|
|
|
+ <Card
|
|
|
+ hoverable
|
|
|
+ title={renderCarouselCardName()}
|
|
|
+ >
|
|
|
+ <div className={styles.carousel}>
|
|
|
+ <Carousel autoplay>
|
|
|
+ {
|
|
|
+ imgList.map(
|
|
|
+ path => (
|
|
|
+ <img key={path} src={genAbsolutePicUrl(path)} alt="" />
|
|
|
+ )
|
|
|
+ )
|
|
|
+ }
|
|
|
+ </Carousel>
|
|
|
+ </div>
|
|
|
+ {!carouselSelectorDestroy && getResourceModal(false)}
|
|
|
+ </Card>
|
|
|
+ </Col>
|
|
|
+ </Row>
|
|
|
+ </Card>
|
|
|
+ <FooterToolbar style={{ width: '100%' }}>
|
|
|
+ <Button
|
|
|
+ onClick={this.handlePageBack}
|
|
|
+ style={{ marginRight: 10 }}
|
|
|
+ >取消
|
|
|
+ </Button>
|
|
|
+ <Button
|
|
|
+ type="primary"
|
|
|
+ loading={submitting}
|
|
|
+ onClick={this.handlePageSubmit}
|
|
|
+ >提交
|
|
|
+ </Button>
|
|
|
+ </FooterToolbar>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+ }
|
|
|
+}
|