|
@@ -1,4 +1,4 @@
|
|
|
-import React, { PureComponent } from 'react';
|
|
|
+import React from 'react';
|
|
|
import PropTypes from 'prop-types';
|
|
|
import queryString from 'query-string';
|
|
|
import { connect } from 'dva';
|
|
@@ -9,166 +9,163 @@ import Search from './search';
|
|
|
import ModalForm from './modal';
|
|
|
import PageHeaderLayout from '../../../layouts/PageHeaderLayout';
|
|
|
|
|
|
-@connect(state => ({ resource: state.resource }))
|
|
|
-export default class Gallery extends PureComponent {
|
|
|
- static propTypes = {
|
|
|
- resource: PropTypes.object,
|
|
|
- location: PropTypes.object,
|
|
|
- dispatch: PropTypes.func,
|
|
|
- };
|
|
|
-
|
|
|
- render() {
|
|
|
- const { location, dispatch, resource } = this.props;
|
|
|
+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;
|
|
|
|
|
|
- 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;
|
|
|
+ // 把携带的参数中空值项删除
|
|
|
+ Object.keys(filters).map(key => { filters[key] ? null : delete filters[key] });
|
|
|
+ // 如果搜索内容不为空则添加进filters中
|
|
|
+ if (field && keyword) {
|
|
|
+ filters[field] = keyword;
|
|
|
+ }
|
|
|
|
|
|
- // 把携带的参数中空值项删除
|
|
|
- Object.keys(filters).map(key => { filters[key] ? null : delete filters[key] });
|
|
|
- // 如果搜索内容不为空则添加进filters中
|
|
|
- if (field && keyword) {
|
|
|
- filters[field] = keyword;
|
|
|
+ // 表头的搜索添加组件属性
|
|
|
+ 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',
|
|
|
+ },
|
|
|
+ });
|
|
|
}
|
|
|
+ };
|
|
|
+
|
|
|
+ // 列表组件的属性
|
|
|
+ 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]);
|
|
|
|
|
|
- // 表头的搜索添加组件属性
|
|
|
- const searchProps = {
|
|
|
- field,
|
|
|
- keyword,
|
|
|
- onSearch: (payload) => {
|
|
|
- if (!payload.keyword.length) {
|
|
|
- delete payload.field;
|
|
|
- delete payload.keyword;
|
|
|
+ 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),
|
|
|
+ })
|
|
|
+ );
|
|
|
}
|
|
|
- dispatch(routerRedux.push({
|
|
|
- pathname,
|
|
|
- search: queryString.stringify({
|
|
|
- ...payload
|
|
|
- })
|
|
|
- }));
|
|
|
- },
|
|
|
- onAdd: () => {
|
|
|
- dispatch({
|
|
|
- type: 'resource/getSignAndShowModal',
|
|
|
- payload: {
|
|
|
- modalType: 'create',
|
|
|
- },
|
|
|
- });
|
|
|
- }
|
|
|
- };
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 删除一条数据后,刷新页面保持筛选数据不变
|
|
|
+ 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),
|
|
|
+ })
|
|
|
+ );
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ };
|
|
|
|
|
|
- // 列表组件的属性
|
|
|
- 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]);
|
|
|
+ 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',
|
|
|
+ });
|
|
|
+ },
|
|
|
+ };
|
|
|
|
|
|
- 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),
|
|
|
- })
|
|
|
- );
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
- };
|
|
|
+ return (
|
|
|
+ <PageHeaderLayout>
|
|
|
+ <Card>
|
|
|
+ <Search { ...searchProps } />
|
|
|
+ <TableList { ...listProps } />
|
|
|
+ <ModalForm { ...modalProps } />
|
|
|
+ </Card>
|
|
|
+ </PageHeaderLayout>
|
|
|
+ );
|
|
|
+}
|
|
|
|
|
|
- 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',
|
|
|
- });
|
|
|
- },
|
|
|
- };
|
|
|
+Gallery.propTypes = {
|
|
|
+ resource: PropTypes.object,
|
|
|
+ location: PropTypes.object,
|
|
|
+ dispatch: PropTypes.func,
|
|
|
+};
|
|
|
|
|
|
- return (
|
|
|
- <PageHeaderLayout>
|
|
|
- <Card>
|
|
|
- <Search { ...searchProps } />
|
|
|
- <TableList { ...listProps } />
|
|
|
- <ModalForm { ...modalProps } />
|
|
|
- </Card>
|
|
|
- </PageHeaderLayout>
|
|
|
- );
|
|
|
- }
|
|
|
-}
|
|
|
+export default connect(({ resource }) => ({ resource }))(Gallery);
|