|
@@ -4,9 +4,9 @@ import { connect } from 'dva';
|
|
|
import { routerRedux } from 'dva/router';
|
|
|
import { Form, Modal, Card, Button, Input, Switch, Row, Col, Carousel, Select } from 'antd';
|
|
|
import { renderStatus, statusToBool, boolToStatus, genAbsolutePicUrl } from '../../../utils/utils';
|
|
|
-import AXDragSortTable from '../../../components/AXDragSortTable/index';
|
|
|
+import AXDragSortTable from '../../../components/AXDragSortTable';
|
|
|
import Selector from '../../../components/AXTableSelector/Selector';
|
|
|
-import FooterToolbar from '../../../components/FooterToolbar/index';
|
|
|
+import FooterToolbar from '../../../components/FooterToolbar';
|
|
|
import styles from './SupportCreate.less';
|
|
|
|
|
|
const fieldLabels = {
|
|
@@ -33,7 +33,7 @@ const formItemLayout = {
|
|
|
},
|
|
|
};
|
|
|
|
|
|
-@connect(({loading, product, resource, merchant}) => ({
|
|
|
+@connect(({ loading, product, resource, merchant }) => ({
|
|
|
product,
|
|
|
resource,
|
|
|
merchant,
|
|
@@ -64,7 +64,7 @@ export default class SupportCreatePage extends Component {
|
|
|
}
|
|
|
this.props.dispatch({
|
|
|
type: 'merchant/fetchMerchantList',
|
|
|
- payload: {pageSize: 1000}, // TODO 以后商户多了需要改写交互样式
|
|
|
+ payload: { pageSize: 1000 }, // TODO 以后商户多了需要改写交互样式
|
|
|
});
|
|
|
}
|
|
|
isEdit = () => {
|
|
@@ -74,13 +74,13 @@ export default class SupportCreatePage extends Component {
|
|
|
return match[1];
|
|
|
}
|
|
|
return false;
|
|
|
- }
|
|
|
+ };
|
|
|
cleanPageState = () => {
|
|
|
this.props.dispatch({
|
|
|
type: 'product/cleanItemState',
|
|
|
payload: {},
|
|
|
});
|
|
|
- }
|
|
|
+ };
|
|
|
selectorDataFetcher = (name, params) => {
|
|
|
switch (name) {
|
|
|
case 'cover':
|
|
@@ -88,45 +88,49 @@ export default class SupportCreatePage extends Component {
|
|
|
type: 'resource/fetchImageList',
|
|
|
payload: params,
|
|
|
});
|
|
|
- return;
|
|
|
+ break;
|
|
|
case 'carousel':
|
|
|
this.props.dispatch({
|
|
|
type: 'resource/fetchImageList',
|
|
|
payload: params,
|
|
|
});
|
|
|
- return;
|
|
|
+ break;
|
|
|
case 'support':
|
|
|
this.props.dispatch({
|
|
|
type: 'product/fetchSupportList',
|
|
|
payload: params,
|
|
|
});
|
|
|
- return;
|
|
|
+ break;
|
|
|
+ default:
|
|
|
+ break;
|
|
|
}
|
|
|
- }
|
|
|
+ };
|
|
|
currentItemFormatter = (name, rows) => {
|
|
|
let payload;
|
|
|
switch (name) {
|
|
|
case 'cover':
|
|
|
- payload = {coverUrl: rows[0].path};
|
|
|
+ payload = { coverUrl: rows[0].path };
|
|
|
break;
|
|
|
case 'carousel':
|
|
|
- payload = {imgList: rows.map(row => row.path)};
|
|
|
+ payload = { imgList: rows.map(row => row.path) };
|
|
|
break;
|
|
|
case 'support':
|
|
|
- payload = {supportList: rows};
|
|
|
+ payload = { supportList: rows };
|
|
|
+ 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,
|
|
@@ -136,33 +140,33 @@ export default class SupportCreatePage extends Component {
|
|
|
payload,
|
|
|
type: 'product/fixCurrentItem',
|
|
|
});
|
|
|
- }
|
|
|
+ };
|
|
|
handleDragSortTableChange = (name, rows) => {
|
|
|
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/support',
|
|
|
+ pathname: '/product/support/list',
|
|
|
state: this.props.location.state,
|
|
|
}));
|
|
|
- }
|
|
|
+ };
|
|
|
handlePageSubmit = (e) => {
|
|
|
e.preventDefault();
|
|
|
this.props.form.validateFieldsAndScroll((err, values) => {
|
|
|
if (!err) {
|
|
|
// 从表单提取基础信息字段
|
|
|
- let { status, title, subTitle, name, ...rest } = values;
|
|
|
- name = `${title}_${subTitle}`;
|
|
|
- values = { name, title, subTitle, status: boolToStatus(status), ...rest };
|
|
|
+ const { status, title, subTitle, name, ...rest } = values;
|
|
|
+ const newName = `${title}_${subTitle}`;
|
|
|
+ const newVals = { newName, title, subTitle, status: boolToStatus(status), ...rest };
|
|
|
|
|
|
// 从props中提取coverUrl、imgList、supportList字段
|
|
|
const { product } = this.props;
|
|
@@ -183,7 +187,7 @@ export default class SupportCreatePage extends Component {
|
|
|
coverUrl,
|
|
|
supportList: supportIdList,
|
|
|
id: matchId,
|
|
|
- ...values,
|
|
|
+ ...newVals,
|
|
|
};
|
|
|
this.props.dispatch({
|
|
|
type: 'product/updateSupportItem',
|
|
@@ -195,7 +199,7 @@ export default class SupportCreatePage extends Component {
|
|
|
imgList,
|
|
|
coverUrl,
|
|
|
supportList: supportIdList,
|
|
|
- ...values,
|
|
|
+ ...newVals,
|
|
|
};
|
|
|
this.props.dispatch({
|
|
|
type: 'product/createSupportItem',
|
|
@@ -205,74 +209,77 @@ export default class SupportCreatePage extends Component {
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
- }
|
|
|
+ };
|
|
|
|
|
|
render() {
|
|
|
const {
|
|
|
- form, submitting, rLoading, pLoading, product, resource, merchant
|
|
|
+ form, submitting, rLoading, pLoading, product, resource, merchant,
|
|
|
} = this.props;
|
|
|
const {
|
|
|
supportSelectorDestroy, coverSelectorDestroy, carouselSelectorDestroy,
|
|
|
} = this.state;
|
|
|
const {
|
|
|
- currentItem
|
|
|
+ currentItem,
|
|
|
} = product;
|
|
|
const {
|
|
|
code, title, subTitle, name, digest, detail, status, coverUrl, cpId,
|
|
|
imgList = [], supportList = [],
|
|
|
} = currentItem;
|
|
|
const {
|
|
|
- getFieldDecorator
|
|
|
+ getFieldDecorator,
|
|
|
} = form;
|
|
|
|
|
|
- const lessonColumns = [{
|
|
|
- title: '课编号',
|
|
|
- dataIndex: 'code',
|
|
|
- key: 1,
|
|
|
- width: '20%',
|
|
|
- }, {
|
|
|
- title: '课名称',
|
|
|
- dataIndex: 'title',
|
|
|
- key: 2,
|
|
|
- width: '30%',
|
|
|
- }, {
|
|
|
- title: '状态',
|
|
|
- dataIndex: 'status',
|
|
|
- key: 3,
|
|
|
- render: (text) => renderStatus(text),
|
|
|
- }];
|
|
|
const supportColumns = [{
|
|
|
title: '配套编号',
|
|
|
dataIndex: 'code',
|
|
|
key: 1,
|
|
|
width: '20%',
|
|
|
+ render: (text, record) => (
|
|
|
+ <a
|
|
|
+ className="a-link"
|
|
|
+ target="_blank"
|
|
|
+ rel="noopener noreferrer"
|
|
|
+ href={`/product/support/edit/${record.id}`}
|
|
|
+ >
|
|
|
+ {text}
|
|
|
+ </a>
|
|
|
+ ),
|
|
|
}, {
|
|
|
title: '配套名称',
|
|
|
dataIndex: 'name',
|
|
|
key: 2,
|
|
|
width: '30%',
|
|
|
+ render: (text, record) => (
|
|
|
+ <a
|
|
|
+ className="a-link"
|
|
|
+ target="_blank"
|
|
|
+ rel="noopener noreferrer"
|
|
|
+ href={`/product/support/edit/${record.id}`}
|
|
|
+ >
|
|
|
+ {text}
|
|
|
+ </a>
|
|
|
+ ),
|
|
|
}, {
|
|
|
title: '配套状态',
|
|
|
dataIndex: 'status',
|
|
|
key: 3,
|
|
|
- render: (text) => renderStatus(text),
|
|
|
+ render: text => renderStatus(text),
|
|
|
}];
|
|
|
|
|
|
const getMerchants = () => {
|
|
|
- let { list } = merchant;
|
|
|
- let options = list.map(item => ({
|
|
|
+ const { list } = merchant;
|
|
|
+ return list.map(item => ({
|
|
|
text: item.name,
|
|
|
key: item.id,
|
|
|
}));
|
|
|
- return options;
|
|
|
- }
|
|
|
+ };
|
|
|
|
|
|
const getResourceModal = (isCover) => {
|
|
|
return (
|
|
|
<Modal
|
|
|
width={isCover ? 900 : 1100}
|
|
|
footer={null}
|
|
|
- visible={true}
|
|
|
+ visible
|
|
|
title="图片资源"
|
|
|
maskClosable={false}
|
|
|
onCancel={() => this.handleSelectorCancel(isCover ? 'cover' : 'carousel')}
|
|
@@ -283,27 +290,27 @@ export default class SupportCreatePage extends Component {
|
|
|
pageNo={resource.pageNo}
|
|
|
pageSize={resource.pageSize}
|
|
|
totalSize={resource.totalSize}
|
|
|
- multiple={isCover ? false : true}
|
|
|
+ multiple={!isCover}
|
|
|
selectorName={isCover ? 'PictureSingle' : 'Index'}
|
|
|
onCancel={() => this.handleSelectorCancel(isCover ? 'cover' : 'carousel')}
|
|
|
- onChange={(data) => this.handleSelectorChange(isCover ? 'cover' : 'carousel', data)}
|
|
|
- onFinish={(rows) => this.handleSelectorFinish(isCover ? 'cover' : 'carousel', rows)}
|
|
|
+ onChange={data => this.handleSelectorChange(isCover ? 'cover' : 'carousel', data)}
|
|
|
+ onFinish={rows => this.handleSelectorFinish(isCover ? 'cover' : 'carousel', rows)}
|
|
|
/>
|
|
|
</Modal>
|
|
|
);
|
|
|
- }
|
|
|
+ };
|
|
|
const getSupportModal = () => {
|
|
|
return (
|
|
|
<Modal
|
|
|
width={1100}
|
|
|
footer={null}
|
|
|
- visible={true}
|
|
|
+ visible
|
|
|
title="配套资源"
|
|
|
maskClosable={false}
|
|
|
onCancel={() => this.handleSelectorCancel('support')}
|
|
|
>
|
|
|
<Selector
|
|
|
- multiple={true}
|
|
|
+ multiple
|
|
|
loading={pLoading}
|
|
|
selectorName="Support"
|
|
|
list={product.list}
|
|
@@ -311,12 +318,12 @@ export default class SupportCreatePage extends Component {
|
|
|
pageSize={product.pageSize}
|
|
|
totalSize={product.totalSize}
|
|
|
onCancel={() => this.handleSelectorCancel('support')}
|
|
|
- onChange={(data) => this.handleSelectorChange('support', data)}
|
|
|
- onFinish={(rows) => this.handleSelectorFinish('support', rows)}
|
|
|
+ onChange={data => this.handleSelectorChange('support', data)}
|
|
|
+ onFinish={rows => this.handleSelectorFinish('support', rows)}
|
|
|
/>
|
|
|
</Modal>
|
|
|
);
|
|
|
- }
|
|
|
+ };
|
|
|
|
|
|
const renderSupportCardName = () => {
|
|
|
return (
|
|
@@ -326,7 +333,7 @@ export default class SupportCreatePage extends Component {
|
|
|
</span>
|
|
|
</div>
|
|
|
);
|
|
|
- }
|
|
|
+ };
|
|
|
const renderCoverCardName = () => {
|
|
|
return (
|
|
|
<div className={styles.cardName}>
|
|
@@ -335,7 +342,7 @@ export default class SupportCreatePage extends Component {
|
|
|
</span>
|
|
|
</div>
|
|
|
);
|
|
|
- }
|
|
|
+ };
|
|
|
const renderCarouselCardName = () => {
|
|
|
return (
|
|
|
<div className={styles.cardName}>
|
|
@@ -344,11 +351,11 @@ export default class SupportCreatePage extends Component {
|
|
|
</span>
|
|
|
</div>
|
|
|
);
|
|
|
- }
|
|
|
+ };
|
|
|
return (
|
|
|
<div>
|
|
|
{/* 基础信息Card */}
|
|
|
- <Card title="基础信息" style={{marginBottom: 16}}>
|
|
|
+ <Card title="基础信息" style={{ marginBottom: 16 }}>
|
|
|
<Form>
|
|
|
<Form.Item hasFeedback label={fieldLabels.code} {...formItemLayout}>
|
|
|
{getFieldDecorator('code', {
|
|
@@ -357,25 +364,22 @@ export default class SupportCreatePage extends Component {
|
|
|
required: true, message: '请填写配套编号',
|
|
|
}, {
|
|
|
pattern: /^[a-zA-Z0-9|-]+$/g, message: '编号包含非法字符',
|
|
|
- }
|
|
|
+ },
|
|
|
],
|
|
|
initialValue: code,
|
|
|
})(
|
|
|
- <Input
|
|
|
- placeholder="请输入"
|
|
|
- disabled={this.isEdit() ? true : false}
|
|
|
- />
|
|
|
+ <Input placeholder="请输入" />
|
|
|
)}
|
|
|
</Form.Item>
|
|
|
- {this.isEdit() &&
|
|
|
+ {this.isEdit() && (
|
|
|
<Form.Item label={fieldLabels.name} {...formItemLayout}>
|
|
|
{getFieldDecorator('name', {
|
|
|
initialValue: name,
|
|
|
})(
|
|
|
- <Input disabled={true} />
|
|
|
+ <Input disabled />
|
|
|
)}
|
|
|
</Form.Item>
|
|
|
- }
|
|
|
+ )}
|
|
|
<Form.Item hasFeedback label={fieldLabels.title} {...formItemLayout}>
|
|
|
{getFieldDecorator('title', {
|
|
|
rules: [{ required: true, message: '请填写配套标题' }],
|
|
@@ -399,11 +403,11 @@ export default class SupportCreatePage extends Component {
|
|
|
})(
|
|
|
<Select placeholder="请选择">
|
|
|
{
|
|
|
- getMerchants().map(item =>
|
|
|
+ getMerchants().map(item => (
|
|
|
<Select.Option key={item.key} value={item.key}>
|
|
|
{item.text}
|
|
|
</Select.Option>
|
|
|
- )
|
|
|
+ ))
|
|
|
}
|
|
|
</Select>
|
|
|
)}
|
|
@@ -436,13 +440,13 @@ export default class SupportCreatePage extends Component {
|
|
|
</Form>
|
|
|
</Card>
|
|
|
{/* 封面及走马灯选择Card */}
|
|
|
- <Card title="封面 | 图册" style={{marginBottom: 16}}>
|
|
|
+ <Card title="封面 | 图册" style={{ marginBottom: 16 }}>
|
|
|
<Row gutter={16}>
|
|
|
<Col
|
|
|
- md={{span: 10, offset: 1}}
|
|
|
- lg={{span: 8, offset: 2}}
|
|
|
- xl={{span: 6, offset: 4}}
|
|
|
- xxl={{span: 4, offset: 5}}
|
|
|
+ md={{ span: 10, offset: 1 }}
|
|
|
+ lg={{ span: 8, offset: 2 }}
|
|
|
+ xl={{ span: 6, offset: 4 }}
|
|
|
+ xxl={{ span: 4, offset: 5 }}
|
|
|
>
|
|
|
<Card
|
|
|
hoverable
|
|
@@ -455,10 +459,10 @@ export default class SupportCreatePage extends Component {
|
|
|
</Card>
|
|
|
</Col>
|
|
|
<Col
|
|
|
- md={{span: 10, offset: 2}}
|
|
|
- lg={{span: 8, offset: 4}}
|
|
|
- xl={{span: 6, offset: 4}}
|
|
|
- xxl={{span: 4, offset: 5}}
|
|
|
+ md={{ span: 10, offset: 2 }}
|
|
|
+ lg={{ span: 8, offset: 4 }}
|
|
|
+ xl={{ span: 6, offset: 4 }}
|
|
|
+ xxl={{ span: 4, offset: 5 }}
|
|
|
>
|
|
|
<Card
|
|
|
hoverable
|
|
@@ -468,8 +472,8 @@ export default class SupportCreatePage extends Component {
|
|
|
<Carousel autoplay>
|
|
|
{
|
|
|
imgList.map(
|
|
|
- (path,index) => (
|
|
|
- <img key={index} src={genAbsolutePicUrl(path)} alt="" />
|
|
|
+ path => (
|
|
|
+ <img key={path} src={genAbsolutePicUrl(path)} alt="" />
|
|
|
)
|
|
|
)
|
|
|
}
|
|
@@ -481,11 +485,11 @@ export default class SupportCreatePage extends Component {
|
|
|
</Row>
|
|
|
</Card>
|
|
|
{/* 相关周边配套选择Card */}
|
|
|
- <Card title={renderSupportCardName()} style={{marginBottom: 70}}>
|
|
|
+ <Card title={renderSupportCardName()} style={{ marginBottom: 70 }}>
|
|
|
<AXDragSortTable
|
|
|
columns={supportColumns}
|
|
|
data={supportList}
|
|
|
- onChange={(rows) => this.handleDragSortTableChange('support', rows)}
|
|
|
+ onChange={rows => this.handleDragSortTableChange('support', rows)}
|
|
|
/>
|
|
|
{!supportSelectorDestroy && getSupportModal()}
|
|
|
</Card>
|