|
@@ -0,0 +1,158 @@
|
|
|
+import React, { PureComponent } from 'react';
|
|
|
+import PropTypes from 'prop-types';
|
|
|
+import { message, Form, Switch, Input, Modal } from 'antd';
|
|
|
+import Uploader from '../../../components/Uploader';
|
|
|
+import { Codes, statuses } from '../../../utils/config';
|
|
|
+
|
|
|
+@Form.create()
|
|
|
+export default class ModalForm extends PureComponent {
|
|
|
+ constructor(props) {
|
|
|
+ super(props);
|
|
|
+ this.state = {
|
|
|
+ filePath: '',
|
|
|
+ fileCode: props.item.code,
|
|
|
+ };
|
|
|
+ }
|
|
|
+ componentWillReceiveProps(nextProps) {
|
|
|
+ if (nextProps.item.code) {
|
|
|
+ this.setState({ fileCode: nextProps.item.code });
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ handleSingleUpload = (file, ossFileName, signature) => {
|
|
|
+ const { onUpload, onRemove } = this.props;
|
|
|
+ if (file) {
|
|
|
+ const separatorIndex = file.name.lastIndexOf('.');
|
|
|
+ const name = file.name.substring(0, separatorIndex);
|
|
|
+ const suffix = file.name.substring(separatorIndex + 1, file.name.length);
|
|
|
+ const data = {
|
|
|
+ name,
|
|
|
+ format: suffix,
|
|
|
+ size: file.size,
|
|
|
+ path: `${signature.dir}${ossFileName}`,
|
|
|
+ url: `${signature.host}/${signature.dir}${ossFileName}`,
|
|
|
+ };
|
|
|
+ message.success('图片上传成功!');
|
|
|
+ onUpload(data);
|
|
|
+ } else {
|
|
|
+
|
|
|
+ const data = { format: null, size: null, url: null, path: null };
|
|
|
+ onRemove(data);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ handleCodeInputChange = (e) => {
|
|
|
+ this.setState({
|
|
|
+ fileCode: e.target.value,
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ handleOk = () => {
|
|
|
+ const {
|
|
|
+ form: {
|
|
|
+ validateFields,
|
|
|
+ getFieldsValue,
|
|
|
+ resetFields,
|
|
|
+ },
|
|
|
+ item,
|
|
|
+ onOk,
|
|
|
+ modalType,
|
|
|
+ } = this.props;
|
|
|
+ validateFields((errors) => {
|
|
|
+ if (errors) return;
|
|
|
+ const data = { ...getFieldsValue() };
|
|
|
+ data.code = this.state.fileCode;
|
|
|
+ if (modalType == 'update') {
|
|
|
+ const { id, status, type } = item;
|
|
|
+ data.id = id;
|
|
|
+ data.type = type;
|
|
|
+ data.status = status;
|
|
|
+ } else if (modalType == 'create') {
|
|
|
+ data.status = Codes.CODE_NORMAL;
|
|
|
+ data.type = Codes.CODE_IMAGE;
|
|
|
+ }
|
|
|
+ onOk(data);
|
|
|
+ resetFields();
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ handleCancel = () => {
|
|
|
+ const { onCancel, form } = this.props;
|
|
|
+ const { resetFields } = form;
|
|
|
+ onCancel();
|
|
|
+ resetFields();
|
|
|
+ this.setState({ fileCode: '' });
|
|
|
+ }
|
|
|
+
|
|
|
+ render() {
|
|
|
+ const { item, form, modalType, ...modalProps } = this.props;
|
|
|
+ const { fileCode } = this.state;
|
|
|
+ const { getFieldDecorator, getFieldsValue } = form;
|
|
|
+ const { name, format, size, url, path } = item;
|
|
|
+
|
|
|
+ const formItemLayout = {
|
|
|
+ labelCol: {
|
|
|
+ span: 7,
|
|
|
+ },
|
|
|
+ wrapperCol: {
|
|
|
+ span: 14,
|
|
|
+ },
|
|
|
+ };
|
|
|
+
|
|
|
+ const modalOpts = {
|
|
|
+ ...modalProps,
|
|
|
+ onOk: this.handleOk,
|
|
|
+ onCancel: this.handleCancel,
|
|
|
+ };
|
|
|
+
|
|
|
+ return (
|
|
|
+ <Modal {...modalOpts}>
|
|
|
+ <Form layout="horizontal">
|
|
|
+ <Form.Item label="图片编号:" {...formItemLayout}>
|
|
|
+ <Input
|
|
|
+ value={fileCode}
|
|
|
+ onChange={this.handleCodeInputChange}
|
|
|
+ placeholder="请输入"
|
|
|
+ />
|
|
|
+ </Form.Item>
|
|
|
+ <Form.Item label="图片名称:" {...formItemLayout}>
|
|
|
+ {getFieldDecorator('name', {
|
|
|
+ initialValue: name,
|
|
|
+ })(
|
|
|
+ <Input placeholder="请输入" />
|
|
|
+ )}
|
|
|
+ </Form.Item>
|
|
|
+ <Form.Item label="图片路径:" {...formItemLayout}>
|
|
|
+ {getFieldDecorator('path', {
|
|
|
+ initialValue: path,
|
|
|
+ })(
|
|
|
+ <Input disabled={true} />
|
|
|
+ )}
|
|
|
+ </Form.Item>
|
|
|
+ <Form.Item label="图片格式:" {...formItemLayout}>
|
|
|
+ {getFieldDecorator('format', {
|
|
|
+ initialValue: format,
|
|
|
+ })(
|
|
|
+ <Input disabled={true}/>
|
|
|
+ )}
|
|
|
+ </Form.Item>
|
|
|
+ <Form.Item label="图片大小:" {...formItemLayout}>
|
|
|
+ {getFieldDecorator('size', {
|
|
|
+ initialValue: size,
|
|
|
+ })(
|
|
|
+ <Input disabled={true} suffix={"字节"} />
|
|
|
+ )}
|
|
|
+ </Form.Item>
|
|
|
+ <Form.Item label="单图上传" {...formItemLayout}>
|
|
|
+ <Uploader
|
|
|
+ accept="image"
|
|
|
+ fileUrl={url}
|
|
|
+ fileCode={fileCode}
|
|
|
+ onUpload={this.handleSingleUpload}
|
|
|
+ />
|
|
|
+ </Form.Item>
|
|
|
+ </Form>
|
|
|
+ </Modal>
|
|
|
+ );
|
|
|
+ }
|
|
|
+}
|