图片上传逻辑修改

src/components/Uploader/index.js

@@ -53,10 +53,11 @@ export default class Uploader extends PureComponent {
   }
 
   componentWillReceiveProps(nextProps) {
-    // 当前属性中的文件对象是一个列表并且接受到的属性中files不为空
-    if (Array.isArray(this.props.files) && !this.props.files.length && !!nextProps.files.length) {
+    // // 当前属性中的文件对象是一个列表并且接受到的属性中files不为空
+    // if (Array.isArray(this.props.files) && !this.props.files.length && !!nextProps.files.length) {
+    //   this.setState({ files: getFileList(nextProps.files) });
+    // }
       this.setState({ files: getFileList(nextProps.files) });
-    }
   }
 
   render() {
@@ -115,7 +116,7 @@ export default class Uploader extends PureComponent {
           onUpload(renderFiles(fileList, 1), fileName, signature);
         } else if (file.status === 'error') {
           message.error('图片上传失败!');
-          this.setState({ files: [] });
+          // this.setState({ files: [] });
         }
       },
       onRemove: (file) => {

src/models/resource.js

@@ -91,15 +91,18 @@ export default modelExtend(pageModel, {
     changeLoading(state, { payload }) {
       return { ...state, ...payload };
     },
-
     showModal(state, { payload }) {
       return { ...state, ...payload, modalVisible: true };
     },
-
     hideModal(state) {
-      return { ...state, modalVisible: false };
+      return { ...state, modalVisible: false, currentItem: {} };
+    },
+    updateItem(state, action) {
+      return {
+        ...state,
+        currentItem: { ...state.currentItem, ...action.payload },
+      };
     },
-
     closeVideo(state) {
       return { ...state, isPaused: true, modalVisible: false };
     },

src/routes/Order/Add/index.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { Card, List, Form, Table, Button, Input } from 'antd';
+import { Card, List, Form, Table, Button, Input, Select } from 'antd';
 import { connect } from 'dva';
 import { routerRedux } from 'dva/router';
 
@@ -127,6 +127,11 @@ export default class CreateOrder extends Component {
       title: '产品价格',
       dataIndex: 'goods',
       key: 4,
+      render: (text, record) => (
+        <Select>
+          {record.goods.map(item => <Select.Option value={item.id} key={item.id}>{item.cpPrice}</Select.Option>)}
+        </Select>
+      ),
     },{
       title: '优惠价格',
       dataIndex: 'adjustPrice',

src/routes/Resource/gallery/index.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import queryString from 'query-string';
 import { connect } from 'dva';
@@ -9,163 +9,174 @@ import Search from './search';
 import ModalForm from './modal';
 import PageHeaderLayout from '../../../layouts/PageHeaderLayout';
 
-function Gallery ({ location, dispatch, resource }) {
-  location.query = queryString.parse(location.search);
-  const { query, pathname } = location;
-  const { field, keyword, ...filters } = query;
-  const { list, listLoading, pagination, currentItem, itemLoading, modalVisible, modalType, signature } = resource;
+@connect(state => ({resource: state.resource}))
+export default class Gallery extends Component {
 
-  // 把携带的参数中空值项删除
-  Object.keys(filters).map(key => { filters[key] ? null : delete filters[key] });
-  // 如果搜索内容不为空则添加进filters中
-  if (field && keyword) {
-    filters[field] = keyword;
-  }
+  render() {
+    const { location, dispatch, resource } = this.props;
+    location.query = queryString.parse(location.search);
+    const { query, pathname } = location;
+    const { field, keyword, ...filters } = query;
+    const { list, listLoading, pagination, currentItem, itemLoading, modalVisible, modalType, signature } = resource;
 
-  // 表头的搜索添加组件属性
-  const searchProps = {
-    field,
-    keyword,
-    onSearch: (payload) => {
-      if (!payload.keyword.length) {
-        delete payload.field;
-        delete payload.keyword;
-      }
-      dispatch(routerRedux.push({
-        pathname,
-        search: queryString.stringify({
-          ...payload
-        })
-      }));
-    },
-    onAdd: () => {
-      dispatch({
-        type: 'resource/showModal',
-        payload: {
-          modalType: 'create',
-        },
-      });
+    // 把携带的参数中空值项删除
+    Object.keys(filters).map(key => { filters[key] ? null : delete filters[key] });
+    // 如果搜索内容不为空则添加进filters中
+    if (field && keyword) {
+      filters.field = field;
+      filters.keyword = keyword;
     }
-  };
-
-  // 列表组件的属性
-  const listProps = {
-    pagination,
-    location,
-    curStatus: filters.status,
-    dataSource: list,
-    loading: listLoading,
-    onChange: (pagination, filterArgs) => {
-      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 = { ...filters, ...tableFilters };
-      Object.keys(data).map(key => data[key] ? null : delete data[key]);
 
-      dispatch(routerRedux.push({
-        pathname,
-        search: queryString.stringify({
-          ...data,
-          pageNo: pagination.current,
-          pageSize: pagination.pageSize
-        }),
-      }));
-    },
-    onEditItem: (item) => {
-      dispatch({
-        type: 'resource/showModal',
-        payload: {
-          modalType: 'update',
-          currentItem: item,
-        },
-        callback: () => {
-          dispatch(
-            routerRedux.push({
-              pathname,
-              search: queryString.stringify(filters),
-            })
-          );
+    // 表头的搜索添加组件属性
+    const searchProps = {
+      field,
+      keyword,
+      onSearch: (payload) => {
+        if (!payload.keyword.length) {
+          delete payload.field;
+          delete payload.keyword;
         }
-      })
-    },
-    // 删除一条数据后，刷新页面保持筛选数据不变
-    onDeleteItem: (id) => {
-      dispatch({
-        type: 'resource/delete',
-        payload: id,
-        callback: () => {
-          dispatch(
-            routerRedux.push({
-              pathname,
-              search: queryString.stringify(filters),
-            })
-          );
-        }
-      });
-    },
-    // 恢复一条数据后，刷新页面并保持筛选数据不变
-    onRecoverItem: (payload) => {
-      dispatch({
-        type: 'resource/recover',
-        payload,
-        callback: () => {
-          dispatch(
-            routerRedux.push({
-              pathname,
-              search: queryString.stringify(filters),
-            })
-          );
-        }
-      });
-    }
-  };
+        dispatch(routerRedux.push({
+          pathname,
+          search: queryString.stringify({
+            ...payload
+          })
+        }));
+      },
+      onAdd: () => {
+        dispatch({
+          type: 'resource/showModal',
+          payload: {
+            modalType: 'create',
+          },
+        });
+      }
+    };
 
-  const modalProps = {
-    item: modalType === 'create' ? {} : currentItem,
-    visible: modalVisible,
-    maskClosable: false,
-    signature,
-    title: `${modalType === 'create' ? '添加图片' : '编辑图片'}`,
-    wrapClassName: 'vertical-center-modal',
-    onOk (data) {
-      dispatch({
-        type: `resource/${modalType}`,
-        payload: data,
-        callback: () => {
-          dispatch(
-            routerRedux.push({
-              pathname,
-              search: queryString.stringify(filters),
-            })
-          );
-        },
-      });
-    },
-    onCancel () {
-      dispatch({
-        type: 'resource/hideModal',
-      });
-    },
-  };
+    // 列表组件的属性
+    const listProps = {
+      pagination,
+      location,
+      curStatus: filters.status,
+      dataSource: list,
+      loading: listLoading,
+      onChange: (pagination, filterArgs) => {
+        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 = { ...filters, ...tableFilters };
+        Object.keys(data).map(key => data[key] ? null : delete data[key]);
 
-  return (
-    <PageHeaderLayout>
-      <Card>
-        <Search { ...searchProps } />
-        <TableList { ...listProps } />
-        <ModalForm { ...modalProps } />
-      </Card>
-    </PageHeaderLayout>
-  );
-}
+        dispatch(routerRedux.push({
+          pathname,
+          search: queryString.stringify({
+            ...data,
+            pageNo: pagination.current,
+            pageSize: pagination.pageSize
+          }),
+        }));
+      },
+      onEditItem: (item) => {
+        dispatch({
+          type: 'resource/showModal',
+          payload: {
+            modalType: 'update',
+            currentItem: item,
+          },
+          callback: () => {
+            dispatch(
+              routerRedux.push({
+                pathname,
+                search: queryString.stringify(filters),
+              })
+            );
+          }
+        })
+      },
+      // 删除一条数据后，刷新页面保持筛选数据不变
+      onDeleteItem: (id) => {
+        dispatch({
+          type: 'resource/delete',
+          payload: id,
+          callback: () => {
+            dispatch(
+              routerRedux.push({
+                pathname,
+                search: queryString.stringify(filters),
+              })
+            );
+          }
+        });
+      },
+      // 恢复一条数据后，刷新页面并保持筛选数据不变
+      onRecoverItem: (payload) => {
+        dispatch({
+          type: 'resource/recover',
+          payload,
+          callback: () => {
+            dispatch(
+              routerRedux.push({
+                pathname,
+                search: queryString.stringify(filters),
+              })
+            );
+          }
+        });
+      }
+    };
 
-Gallery.propTypes = {
-  resource: PropTypes.object,
-  location: PropTypes.object,
-  dispatch: PropTypes.func,
-};
+    const modalProps = {
+      item: currentItem,
+      visible: modalVisible,
+      maskClosable: false,
+      signature,
+      modalType,
+      title: `${modalType === 'create' ? '添加图片' : '编辑图片'}`,
+      wrapClassName: 'vertical-center-modal',
+      onOk (data) {
+        dispatch({
+          type: `resource/${modalType}`,
+          payload: data,
+          callback: () => {
+            dispatch(
+              routerRedux.push({
+                pathname,
+                search: queryString.stringify(filters),
+              })
+            );
+          },
+        });
+      },
+      onCancel () {
+        dispatch({
+          type: 'resource/hideModal',
+        });
+      },
+      onUpload (data) {
+        dispatch({
+          type: 'resource/updateItem',
+          payload: data,
+        });
+      },
+      onRemove (data) {
+        dispatch({
+          type: 'resource/updateItem',
+          payload: data,
+        });
+      }
+    };
 
-export default connect(({ resource }) => ({ resource }))(Gallery);
+    return (
+      <PageHeaderLayout>
+        <Card>
+          <Search { ...searchProps } />
+          <TableList { ...listProps } />
+          <ModalForm { ...modalProps } />
+        </Card>
+      </PageHeaderLayout>
+    );
+  }
+}

src/routes/Resource/gallery/modal.js

@@ -4,30 +4,29 @@ import { message, Form, Switch, Input, Modal } from 'antd';
 import Uploader from '../../../components/Uploader';
 import { Codes, statuses } from '../../../utils/config';
 
-const FormItem = Form.Item;
-
 @Form.create()
 export default class ModalForm extends PureComponent {
-  static propTypes = {
-    item: PropTypes.object,
-    form: PropTypes.object,
-    onOk: PropTypes.func,
-    onCancel: PropTypes.func,
-  };
-
-  constructor(props) {
-    super(props);
-    this.state = { item: props.item };
-  }
-
-  componentWillReceiveProps(nextProps) {
-    if (nextProps.item) {
-      this.setState({ item: { ...nextProps.item } });
-    }
-  }
+  // static propTypes = {
+  //   item: PropTypes.object,
+  //   form: PropTypes.object,
+  //   onOk: PropTypes.func,
+  //   onCancel: PropTypes.func,
+  // };
+  //
+  // constructor(props) {
+  //   super(props);
+  //   this.state = { item: props.item };
+  // }
+  //
+  // componentWillReceiveProps(nextProps) {
+  //   if (nextProps.item) {
+  //     this.setState({ item: { ...nextProps.item } });
+  //   }
+  // }
 
   // 图片上传成功
   handleSingleUpload = (file, fileName, signature) => {
+    const { onUpload, onRemove } = this.props;
     if (file) {
       const separatorIndex = file.name.lastIndexOf('.');
       const name = file.name.substring(0, separatorIndex);
@@ -37,39 +36,47 @@ export default class ModalForm extends PureComponent {
         format: suffix,
         size: file.size,
         code: name,
+        path: `${signature.dir}${fileName}`,
         url: `${signature.host}/${signature.dir}${fileName}`,
       };
       message.success('图片上传成功!');
-      this.setState({ item: { ...this.state.item, ...data } });
+      onUpload(data);
     } else {
-      // 图片被移除，重置state为空
-      this.setState({ item: {} });
+      // 图片被移除
+      const data = { format: null, size: null, url: null, path: null };
+      onRemove(data);
     }
   }
 
   handleOk = () => {
-    const { form: { validateFields, getFieldsValue }, item, onOk } = this.props;
+    const {
+      form: {
+        validateFields,
+        getFieldsValue
+      },
+      item,
+      onOk,
+      modalType,
+    } = this.props;
     validateFields((errors) => {
-      if (errors) { return; }
-      const data = {
-        ...getFieldsValue(),
-      };
-      item.id ? data.id = item.id : null;
+      if (errors) return;
+      const data = { ...getFieldsValue() };
+      if (modalType === 'update') {
+        data.id = item.id;
+      }
       onOk(data);
     });
   }
 
   handleCancel = () => {
-    const { onCancel, form: { resetFields } } = this.props;
-    //退出模态框，把state中的item重置为空
-    this.setState({ item: {} });
-    resetFields();
+    const { onCancel } = this.props;
     onCancel();
   }
 
   render() {
-    const { signature, form: { getFieldDecorator }, ...modalProps } = this.props;
-    const { item } = this.state;
+    const { item, signature, form, ...modalProps } = this.props;
+    const { getFieldDecorator } = form;
+    const { code, name, format, size, url, path } = item;
 
     const formItemLayout = {
       labelCol: {
@@ -87,45 +94,44 @@ export default class ModalForm extends PureComponent {
     };
 
     return (
-      <Modal key={this.props.item.id} {...modalOpts}>
+      <Modal {...modalOpts}>
         <Form layout="horizontal">
-          <FormItem label="单图上传" {...formItemLayout}>
+          <Form.Item label="单图上传" {...formItemLayout}>
             <Uploader
               accept="image"
-              files={item.url}
+              files={url}
               signature={signature}
               onUpload={::this.handleSingleUpload}
             />
-          </FormItem>
-          <FormItem label="图片编号：" hasFeedback {...formItemLayout}>
+          </Form.Item>
+          <Form.Item label="图片编号：" hasFeedback {...formItemLayout}>
             {getFieldDecorator('code', {
               rules: [{ required: true, type: 'string', message: "此项为必填项!" }],
-              initialValue: item.code,
+              initialValue: code,
             })(<Input />)}
-          </FormItem>
-          <FormItem label="图片名称：" hasFeedback {...formItemLayout}>
+          </Form.Item>
+          <Form.Item label="图片名称：" hasFeedback {...formItemLayout}>
             {getFieldDecorator('name', {
               rules: [{ required: true, type: 'string', message: "此项为必填项!" }],
-              initialValue: item.name,
+              initialValue: name,
             })(<Input />)}
-          </FormItem>
-          <FormItem label="图片格式：" {...formItemLayout}>
+          </Form.Item>
+          <Form.Item label="图片路径：" hasFeedback {...formItemLayout}>
+            {getFieldDecorator('path', {
+              rules: [{ required: true, type: 'string', message: "此项为必填项!" }],
+              initialValue: path,
+            })(<Input placeholder="上传图片后自动生成"/>)}
+          </Form.Item>
+          <Form.Item label="图片格式：" {...formItemLayout}>
             {getFieldDecorator('format', {
-              initialValue: item.format,
-            })(<Input placeholder="自动生成" />)}
-          </FormItem>
-          <FormItem label="图片大小：" {...formItemLayout}>
+              initialValue: format,
+            })(<Input placeholder="上传图片后自动生成" />)}
+          </Form.Item>
+          <Form.Item label="图片大小：" {...formItemLayout}>
             {getFieldDecorator('size', {
-              initialValue: item.size,
-            })(<Input placeholder="自动生成" suffix={"字节"} />)}
-          </FormItem>
-          {/*
-          <FormItem label="使用状态：" {...formItemLayout}>
-            {getFieldDecorator('status', {
-              valuePropsName: 'checked',
-          })(<Switch defaultChecked={item.status || Codes.CODE_NORMAL === Codes.CODE_NORMAL ? true : false} checkedChildren="使用中" unCheckedChildren="已删除" />)}
-          </FormItem>
-          */}
+              initialValue: size,
+            })(<Input placeholder="上传图片后自动生成" suffix={"字节"} />)}
+          </Form.Item>
         </Form>
       </Modal>
     );

src/services/resource.js

@@ -4,6 +4,7 @@ import { resources, resource, signature } from '../utils/api';
 import { saveLocalSignature, getLocalSignature } from '../utils/helper';
 
 export async function getSignature (params) {
+  /*
   const localSignature = getLocalSignature();
   const expireTime = Math.floor((new Date()).getTime() / 1000 + 5).toString(); // 5s缓冲时间
   // oss签名不存在或者已经过了有效期则请求新的签名
@@ -13,6 +14,10 @@ export async function getSignature (params) {
   } else {
     return { data: localSignature };
   }
+  */
+  // 每次都重新请求签名  TODO: 保存签名到本地减少请求次数
+  // return request(`${signature}?${stringify(params)}`);
+  return request(`http://127.0.0.1:8700`);
 }
 
 export async function query (params) {
@@ -24,12 +29,12 @@ export async function create(params) {
     method: 'POST',
     body: JSON.stringify(params),
   };
-  return request(`${resource.replace('/:id', '')}`, options);
+  return request(`${resource}`, options);
 }
 
 export async function remove ({ id }) {
   const options = { method: 'DELETE' };
-  return request(`${resource.replace('/:id', `/${id}`)}`, options);
+  return request(`${resource}/${id}`, options);
 }
 
 export async function update(params) {
@@ -37,5 +42,5 @@ export async function update(params) {
     method: 'PUT',
     body: JSON.stringify(params),
   };
-  return request(`${resource.replace('/:id', '')}`, options);
+  return request(`${resource}`, options);
 }

src/utils/api.js

@@ -2,7 +2,7 @@ import config from './config';
 
 module.exports = {
   resources: `${config.apiHost}/resource/list`,
-  resource: `${config.apiHost}/resource/:id`,
+  resource: `${config.apiHost}/resource`,
   signature: `${config.apiHost}/oss/signature`,
   cmsUsers: `${config.apiHost}/cms/user/list`,
   cmsUser: `${config.apiHost}/cms/user`,