|
@@ -0,0 +1,188 @@
|
|
|
+import React, { PureComponent } from 'react';
|
|
|
+import { Card, Form, Input, Button } from 'antd';
|
|
|
+import { connect } from 'dva';
|
|
|
+import { routerRedux } from 'dva/router';
|
|
|
+import PageHeaderLayout from '../../../layouts/PageHeaderLayout';
|
|
|
+import Uploader from '../../../components/AXUpload';
|
|
|
+import { Hotax } from '../../../utils/config';
|
|
|
+
|
|
|
+const formItemLayout = {
|
|
|
+ labelCol: {
|
|
|
+ xs: { span: 24 },
|
|
|
+ sm: { span: 6 },
|
|
|
+ },
|
|
|
+ wrapperCol: {
|
|
|
+ xs: { span: 24 },
|
|
|
+ sm: { span: 14 },
|
|
|
+ md: { span: 12 },
|
|
|
+ },
|
|
|
+};
|
|
|
+const submitFormLayout = {
|
|
|
+ wrapperCol: {
|
|
|
+ xs: { span: 24, offset: 0 },
|
|
|
+ sm: { span: 12, offset: 6 },
|
|
|
+ },
|
|
|
+};
|
|
|
+
|
|
|
+function getFileObject(params) {
|
|
|
+ if (!params) { return; }
|
|
|
+ const { img } = params;
|
|
|
+ const { format, ...rest } = img || {};
|
|
|
+ return { ...rest, type: `image/${format}` };
|
|
|
+}
|
|
|
+
|
|
|
+@Form.create()
|
|
|
+@connect(({ loading }) => ({
|
|
|
+ submitting: loading.models.resource,
|
|
|
+}))
|
|
|
+export default class AudioBookCreatePage extends PureComponent {
|
|
|
+ constructor(props) {
|
|
|
+ super(props);
|
|
|
+ const { state } = props.location;
|
|
|
+ const { audioBookItem } = state || {};
|
|
|
+ this.state = {
|
|
|
+ fileList: audioBookItem ? [getFileObject(audioBookItem)] : [],
|
|
|
+ ...(audioBookItem || {}),
|
|
|
+ };
|
|
|
+ }
|
|
|
+ handleOnChangeEvent = (fileList) => {
|
|
|
+ this.setState({ fileList });
|
|
|
+ return fileList;
|
|
|
+ };
|
|
|
+ handlePageBack = () => {
|
|
|
+ const { UIParams, Queryers } = this.props.location.state || {};
|
|
|
+ this.props.dispatch(
|
|
|
+ routerRedux.push({
|
|
|
+ pathname: '/resource/audiobook',
|
|
|
+ state: {
|
|
|
+ UIParams,
|
|
|
+ Queryers,
|
|
|
+ },
|
|
|
+ })
|
|
|
+ );
|
|
|
+ };
|
|
|
+ handlePageSubmit = (e) => {
|
|
|
+ e.preventDefault();
|
|
|
+ this.props.form.validateFieldsAndScroll((err, values) => {
|
|
|
+ if (!err) {
|
|
|
+ const { id, img, audio } = this.state;
|
|
|
+ const { audioPath, audioFormat, fileList, ...params } = values;
|
|
|
+ // 1.提取图片信息
|
|
|
+ let newImg = {};
|
|
|
+ if (Array.isArray(this.state.fileList) && this.state.fileList.length) {
|
|
|
+ const { path, type, size, url } = this.state.fileList[0];
|
|
|
+ newImg = {
|
|
|
+ ...img,
|
|
|
+ url,
|
|
|
+ path,
|
|
|
+ size,
|
|
|
+ format: type ? type.split('/')[1] : '',
|
|
|
+ type: Hotax.RESOURCE_IMAGE,
|
|
|
+ status: (img || {}).status ? img.status : Hotax.STATUS_NORMAL,
|
|
|
+ };
|
|
|
+ }
|
|
|
+ // 2.提取音频信息
|
|
|
+ const newAudio = {
|
|
|
+ ...audio,
|
|
|
+ path: audioPath,
|
|
|
+ format: audioFormat,
|
|
|
+ type: Hotax.RESOURCE_AUDIO,
|
|
|
+ status: (audio || {}).status ? audio.status : Hotax.STATUS_NORMAL,
|
|
|
+ };
|
|
|
+ // 3.需提交的数据
|
|
|
+ const newParams = {
|
|
|
+ ...params,
|
|
|
+ img: newImg,
|
|
|
+ audio: newAudio,
|
|
|
+ status: Hotax.STATUS_NORMAL,
|
|
|
+ };
|
|
|
+ const { UIParams, Queryers } = this.props.location.state || {};
|
|
|
+ if (id) {
|
|
|
+ this.props.dispatch({
|
|
|
+ type: 'resource/updateAudioBook',
|
|
|
+ payload: { id, ...newParams },
|
|
|
+ states: { UIParams, Queryers },
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ this.props.dispatch({
|
|
|
+ type: 'resource/createAudioBook',
|
|
|
+ payload: newParams,
|
|
|
+ states: { UIParams, Queryers },
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ };
|
|
|
+ render() {
|
|
|
+ const { form, submitting } = this.props;
|
|
|
+ const { getFieldDecorator } = form;
|
|
|
+ const { fileList, code, name, audio } = this.state;
|
|
|
+
|
|
|
+ return (
|
|
|
+ <PageHeaderLayout>
|
|
|
+ <Card>
|
|
|
+ <Form onSubmit={this.handlePageSubmit}>
|
|
|
+ <Form.Item label="有声读物编号" hasFeedback {...formItemLayout}>
|
|
|
+ {getFieldDecorator('code', {
|
|
|
+ rules: [{
|
|
|
+ required: true, message: '编号不能为空!',
|
|
|
+ }, {
|
|
|
+ pattern: /^[a-zA-Z0-9|-]+$/ig, message: '编号格式错误!',
|
|
|
+ }],
|
|
|
+ initialValue: code,
|
|
|
+ })(
|
|
|
+ <Input />
|
|
|
+ )}
|
|
|
+ </Form.Item>
|
|
|
+ <Form.Item label="有声读物名称" hasFeedback {...formItemLayout}>
|
|
|
+ {getFieldDecorator('name', {
|
|
|
+ rules: [{ required: true, message: '名称不能为空!' }],
|
|
|
+ initialValue: name,
|
|
|
+ })(
|
|
|
+ <Input />
|
|
|
+ )}
|
|
|
+ </Form.Item>
|
|
|
+ <Form.Item label="上传配图" {...formItemLayout}>
|
|
|
+ {getFieldDecorator('fileList', {
|
|
|
+ getValueFromEvent: this.handleOnChangeEvent,
|
|
|
+ })(
|
|
|
+ <Uploader
|
|
|
+ fileList={fileList}
|
|
|
+ accept="image"
|
|
|
+ multiple={false}
|
|
|
+ totalLimit={1}
|
|
|
+ />
|
|
|
+ )}
|
|
|
+ </Form.Item>
|
|
|
+ <Form.Item label="音频路径" {...formItemLayout}>
|
|
|
+ {getFieldDecorator('audioPath', {
|
|
|
+ rules: [{ required: true, message: '音频路径不能为空!' }],
|
|
|
+ initialValue: (audio || {}).path,
|
|
|
+ })(
|
|
|
+ <Input />
|
|
|
+ )}
|
|
|
+ </Form.Item>
|
|
|
+ <Form.Item label="音频格式" {...formItemLayout}>
|
|
|
+ {getFieldDecorator('audioFormat', {
|
|
|
+ rules: [{ required: true, message: '音频格式不能为空!' }],
|
|
|
+ initialValue: (audio || {}).format || 'mp3',
|
|
|
+ })(
|
|
|
+ <Input disabled />
|
|
|
+ )}
|
|
|
+ </Form.Item>
|
|
|
+ <Form.Item {...submitFormLayout} style={{ marginTop: 32 }}>
|
|
|
+ <Button onClick={this.handlePageBack}>取消</Button>
|
|
|
+ <Button
|
|
|
+ type="primary"
|
|
|
+ htmlType="submit"
|
|
|
+ loading={submitting}
|
|
|
+ style={{ marginLeft: 8 }}
|
|
|
+ >提交
|
|
|
+ </Button>
|
|
|
+ </Form.Item>
|
|
|
+ </Form>
|
|
|
+ </Card>
|
|
|
+ </PageHeaderLayout>
|
|
|
+ );
|
|
|
+ }
|
|
|
+}
|