2BCmsBrowser/src/routes/Support/detail/index.js

import React, { PureComponent } from 'react';
import { routerRedux } from 'dva/router';
import PropTypes from 'prop-types';
import queryString from 'query-string';
import { connect } from 'dva';
import { Spin, Popover, Badge, Table, Radio, Card, Form, Input, Icon, Button, Select } from 'antd';
import PageHeaderLayout from '../../../layouts/PageHeaderLayout';
import SupportSelectSortModal from './supportModal';
import ResourceSelectModal from './resourceModal';
import { Codes } from '../../../utils/config';

const FormItem = Form.Item;
const Option = Select.Option;
const { TextArea } = Input;

@Form.create()
@connect(state => ({
  resource: state.resource,
  support: state.support,
  supportDetail: state.supportDetail,
}))
export default class SupportDetail extends PureComponent {
  static propTypes = {
    supportDetail: PropTypes.object,
  };

  state = {
    curClickedBtn: null,       //记录点击的按钮
  };

  // 展示选择模态框 - 加载第一页数据
  handleModalShow = (btnName) => {
    this.setState({
      curClickedBtn: btnName,
    }, () => {
      const { dispatch } = this.props;
      if (btnName === 'supportBtn') {
        dispatch({ type: 'supportDetail/showSupportModal' });
        dispatch({
          type: 'support/query',
          payload: {
            pageNo: 1,
            pageSize: 10,
            status: Codes.CODE_NORMAL,
          }
        });
      }
      if (btnName === 'imgBtn') {
        dispatch({ type: 'supportDetail/showResourceModal' });
        dispatch({
          type: 'resource/query',
          payload: {
            pageNo: 1,
            pageSize: 10,
            status: Codes.CODE_NORMAL,
            type: Codes.CODE_IMAGE,
          }
        });
      }
    })
  }

  // 取消/关闭 - 隐藏选择模态框
  handleModalCancel = () => {
    const { curClickedBtn } = this.state;
    const { dispatch } = this.props;
    if (curClickedBtn === 'supportBtn') {
      dispatch({ type: 'supportDetail/hideSupportModal' });
    }
    if (curClickedBtn === 'imgBtn') {
      dispatch({ type: 'supportDetail/hideResourceModal' });
    }
  }

  // 提交 - 保存选择和排序完的数据到model中
  handleModalOk = (data) => {
    const { curClickedBtn } = this.state;
    const { dispatch } = this.props;
    if (curClickedBtn === 'supportBtn') {
      dispatch({
        type: 'supportDetail/saveSupportList',
        payload: { supportList: data }
      });
    } else if (curClickedBtn === 'imgBtn') {
      dispatch({
        type: 'supportDetail/saveImgList',
        payload: { imgList: data },
      });
    }
  }

  // 搜索
  handleModalSearch = (data) => {
    const { curClickedBtn } = this.state;
    const { dispatch } = this.props;
    const newData = { ...data };
    if (newData.keyword) {
      newData[newData.field] = newData.keyword;
      delete newData.field;
      delete newData.keyword;
    } else {
      delete newData.field;
      delete newData.keyword;
    }
    if (curClickedBtn === 'supportBtn') {
      dispatch({
        type: `support/query`,
        payload: { ...newData, pageNo: 1, pageSize: 10, status: Codes.CODE_NORMAL },
      });
    } else if (curClickedBtn === 'imgBtn') {
      dispatch({
        type: `resource/query`,
        payload: { ...newData, pageNo: 1, pageSize: 10, status: Codes.CODE_NORMAL, type: Codes.CODE_IMAGE },
      });
    }
  }

  // 翻页 - 资源列表
  handleModalTableChange = (pagination, filterArgs, filters) => {
    const { curClickedBtn } = this.state;
    const { dispatch } = this.props;
    const newFilters = { ...filters };
    if (newFilters.keyword) {
      newFilters[newFilters.field] = newFilters.keyword;
      delete newFilters.field;
      delete newFilters.keyword;
    } else {
      delete newFilters.field;
      delete newFilters.keyword;
    }
    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 = { ...newFilters, ...tableFilters, pageNo: pagination.current, pageSize: pagination.pageSize };
    Object.keys(data).map(key => data[key] ? null : delete data[key]);

    if (curClickedBtn === 'supportBtn') {
      dispatch({ type: `support/query`, payload: { ...data, status: Codes.CODE_NORMAL } });
    } else if (curClickedBtn === 'imgBtn') {
      dispatch({ type: `resource/query`, payload: { ...data, status: Codes.CODE_NORMAL, type: Codes.CODE_IMAGE } });
    }
  }

  handlePageSubmit = (e) => {
    e.preventDefault()
    const {
      dispatch,
      form: {
        validateFields,
        getFieldsValue,
        resetFields
      },
      supportDetail: {
        operType,
        currentItem,
        filters,
      }
    } = this.props;
    validateFields((errors) => {
      if (errors) { return; }
      const data = {
        ...currentItem,
        ...getFieldsValue(),
      };
      dispatch({
        type: `supportDetail/${operType}`,
        payload: data,
        callback: () => {
          dispatch(
            routerRedux.push({
              pathname: '/product/support',
              search: queryString.stringify(filters),
            })
          );
        }
      })
      resetFields();
    });
  }

  handlePageCancel = () => {
    const { dispatch, supportDetail: { filters } } = this.props;
    dispatch({ type: 'supportDetail/clearPage' });
    dispatch(
      routerRedux.push({
        pathname: '/product/support',
        search: queryString.stringify(filters),
      })
    );
  }

  render() {
    const { dispatch, form: { getFieldDecorator }, resource, support, supportDetail } = this.props;
    const { itemLoading, currentItem, filters, supportModalVisible, resourceModalVisible } = supportDetail;
    const { imgList = [], supportList = [], name, code, digest } = currentItem;

    // 待选表格去掉分页的跳转及变换页码
    if (resource && resource.pagination) {
      delete resource.pagination.showQuickJumper;
      delete resource.pagination.showSizeChanger;
    }

    const supportTableColumns = [{
      title: '配套编号',
      dataIndex: 'code',
      key: 'code',
    },{
      title: '配套名称',
      dataIndex: 'name',
      key: 'name',
    }];

    const imgTableColumns = [{
      title: '缩略图',
      dataIndex: 'url',
      key: 'url',
      render: (text, record) => (
          <Popover
            content={<img alt="" src={record.url} width={350} />}
            title={record.name}
          >
            <img alt="" src={record.url} width={70} />
          </Popover>
      ),
    },{
      title: '图片编号',
      dataIndex: 'code',
      key: 'code',
    },{
      title: '图片名称',
      dataIndex: 'name',
      key: 'name',
    }];

    const formItemLayout = {
      labelCol: {
        span: 7,
      },
      wrapperCol: {
        span: 12,
      },
    };
    const submitFormLayout = {
      wrapperCol: {
        xs: { span: 24, offset: 0 },
        sm: { span: 10, offset: 7 },
      },
    };

    return (
      <PageHeaderLayout>
        <Spin spinning={itemLoading}>
          <Card title="配套信息">
            <Form layout="horizontal" onSubmit={this.handlePageSubmit}>
              <FormItem label="配套编号：" hasFeedback {...formItemLayout}>
                {getFieldDecorator('code', {
                  rules: [{ required: true, type: 'string', message: "编号为必填项!" }],
                  initialValue: code,
                })(<Input />)}
              </FormItem>
              <FormItem label="配套名称：" hasFeedback {...formItemLayout}>
                {getFieldDecorator('name', {
                  rules: [{ required: true, type: 'string', message: "名称为必填项!" }],
                  initialValue: name,
                })(<Input />)}
              </FormItem>
              <FormItem label="配套简述：" hasFeedback {...formItemLayout}>
                {getFieldDecorator('digest', {
                  initialValue: digest,
                })(<TextArea />)}
              </FormItem>
              <FormItem label="选择图片" {...formItemLayout}>
                <Button onClick={() => this.handleModalShow('imgBtn')} type="primary" size="small" icon="edit">编辑</Button>
              </FormItem>
              <FormItem wrapperCol={{ offset: 7, span: 12 }}>
                <Table
                  locale={{
                    emptyText: <span style={{ color: "#C6D0D6" }}>&nbsp;&nbsp;<Icon type="frown-o"/>
                      该配套下不包含任何图片，请选择!</span>
                  }}
                  dataSource={imgList}
                  columns={imgTableColumns}
                  rowKey={record => record.id}
                  bordered
                  pagination={false}
                />
              </FormItem>
              <FormItem label="相关配套" {...formItemLayout}>
                <Button onClick={() => this.handleModalShow('supportBtn')} type="primary" size="small" icon="edit">编辑</Button>
              </FormItem>
              <FormItem wrapperCol={{ offset: 7, span: 12 }}>
                <Table
                  locale={{
                    emptyText: <span style={{ color: "#C6D0D6" }}>&nbsp;&nbsp;<Icon type="frown-o"/>
                      暂无与该配套相关的配套，请选择!</span>
                  }}
                  dataSource={supportList}
                  columns={supportTableColumns}
                  rowKey={record => record.id}
                  bordered
                  pagination={false}
                />
              </FormItem>
              <FormItem {...submitFormLayout} style={{ marginTop: 32 }}>
                <Button onClick={this.handlePageCancel}>取消</Button>
                <Button type="primary" style={{ marginLeft: 35 }} htmlType="submit">提交</Button>
              </FormItem>
            </Form>
            {/*周边的模态选择框*/}
            <SupportSelectSortModal
              rowKeyName="id"
              modalVisible={supportModalVisible}
              style={{ top: 20 }}
              width={600}
              onCancel={this.handleModalCancel}
              onOk={this.handleModalOk}
              onSearch={this.handleModalSearch}
              selTableData={supportList}
              fsTableDataSource={support.list || []}
              fsTableLoading={support.listLoading}
              fsTablePagination={support.pagination}
              fsTableOnChange={this.handleModalTableChange}
            />
            {/*图片资源的模态选择框*/}
            <ResourceSelectModal
              rowKeyName="id"
              modalVisible={resourceModalVisible}
              style={{ top: 20 }}
              width={600}
              onOk={this.handleModalOk}
              onCancel={this.handleModalCancel}
              onSearch={this.handleModalSearch}
              selTableData={imgList}
              fsTableDataSource={resource.list || []}
              fsTableLoading={resource.listLoading}
              fsTablePagination={resource.pagination}
              fsTableOnChange={this.handleModalTableChange}
            />
          </Card>
        </Spin>
      </PageHeaderLayout>
    );
  }
}