2BCmsBrowser/src/routes/Support/Edit/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 './support';
import ResourceSelectModal from './resource';
import { Codes, ossHost } from '../../../utils/config';

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

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

  state = { curClickedBtn: null };

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'merchant/query',
      payload: {
        pageSize: 1000,
        pageNo: 1,
        domain: Codes.CODE_CP,
      }
    })
  }

  // 展示选择模态框 - 加载第一页数据
  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,
          }
        });
      } else if (btnName == 'imgBtn' || btnName == 'cvImgBtn') {
        dispatch({ type: 'supportDetail/showResourceModal' });
        dispatch({
          type: 'resource/query',
          payload: {
            pageNo: 1,
            pageSize: 10,
            type: Codes.CODE_IMAGE,
          }
        });
      }
    })
  }

  // 取消/关闭 - 隐藏选择模态框
  handleModalCancel = () => {
    const { curClickedBtn } = this.state;
    const { dispatch } = this.props;
    if (curClickedBtn == 'supportBtn') {
      dispatch({ type: 'supportDetail/hideSupportModal' });
    }
    if (curClickedBtn == 'imgBtn' || curClickedBtn == 'cvImgBtn') {
      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.map(item => item.path) },
      });
    } else if (curClickedBtn == 'cvImgBtn') {
      dispatch({
        type: 'supportDetail/saveCoverImg',
        payload: { coverUrl: data.path },
      });
    }
  }

  // 搜索
  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;

    if (curClickedBtn == 'supportBtn') {
      dispatch({
        type: `support/query`,
        payload: { ...newData, pageNo: 1, pageSize: 10, status: Codes.CODE_NORMAL },
      });
    } else if (curClickedBtn == 'imgBtn' || curClickedBtn == 'cvImgBtn') {
      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' || curClickedBtn == 'cvImgBtn') {
      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; }

      // 过滤掉gmtCreated, gmtModified, status三个字段
      const { supportList, imgList, gmtCreated, gmtModified, ...rest } = currentItem;
      let newImgList;
      let newSupportList;
      if (Array.isArray(imgList) && imgList.length) {
        newImgList = imgList;
      } else {
        newImgList = [];
      }
      // 如果supportList是个list且内容不为空
      if (Array.isArray(supportList) && supportList.length) {
        newSupportList = supportList.map(item => item.id);
      } else {
        newSupportList = [];
      }

      // 最终提交的数据
      const data = {
        ...rest,
        ...getFieldsValue(),
        imgList: newImgList,
        supportList: newSupportList,
      };

      // 其他参数
      if (operType == 'create') {
        data.type = Codes.CODE_SUPPORT;
        data.status = Codes.CODE_NORMAL;
      }

      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/initState' });
    dispatch(
      routerRedux.push({
        pathname: '/product/support',
        search: queryString.stringify(filters),
      })
    );
  }

  render() {
    const {
      merchant,
      resource,
      support,
      supportDetail,
      form: {
        getFieldDecorator
      },
    } = this.props;
    const {
      itemLoading,
      currentItem,
      filters,
      supportModalVisible,
      resourceModalVisible
    } = supportDetail;
    const {
      cpId,
      name,
      code,
      digest,
      detail,
      coverUrl,
      imgList,
      supportList,
    } = currentItem;
    const { curClickedBtn } = this.state;

    // 待选表格去掉分页的跳转及变换页码
    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: 'sort',
      key: 'sort',
      render: (text, record, index) => index + 1,
    },{
      title: '缩略图',
      dataIndex: 'path',
      key: 'path',
      render: (text, record) => (
          <Popover
            content={<img alt="" src={`${ossHost}/${text}`} width={350} />}
            title={record.name}
          >
            <img alt="" src={`${ossHost}/${text}`} 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="配套详情：" hasFeedback {...formItemLayout}>
                {getFieldDecorator('detail', {
                  initialValue: detail,
                })(<TextArea />)}
              </FormItem>
              <FormItem label="所属供应商：" {...formItemLayout}>
                {getFieldDecorator('cpId', {
                  initialValue: cpId,
                })(
                  <Select placeholder="请选择">{merchant.list.map(item => <Option value={item.id} key={item.id}>{item.name}</Option>)}</Select>
                )}
              </FormItem>
              <FormItem label="封面图片" {...formItemLayout}>
                <Button onClick={() => this.handleModalShow('cvImgBtn')} type="primary" icon="select" size="small">选择</Button>
                {!coverUrl? null :
                  <Card
                    hoverable
                    bordered
                    cover={<img alt="" src={coverUrl.startsWith('http') ? coverUrl : `${ossHost}/${coverUrl}`} />}
                    style={{ width: 240, marginTop: 20 }}
                  >
                  </Card>}
              </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 || []).map((item,index) => ({ id: index, path: item }))}
                  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
              mode={curClickedBtn == 'imgBtn' ? 'multiple' : 'single'}
              rowKeyName="id"
              modalVisible={resourceModalVisible}
              style={{ top: 20 }}
              width={600}
              onOk={this.handleModalOk}
              onCancel={this.handleModalCancel}
              onSearch={this.handleModalSearch}
              selTableData={[]}
              fsTableDataSource={resource.list || []}
              fsTableLoading={resource.listLoading}
              fsTablePagination={resource.pagination}
              fsTableOnChange={this.handleModalTableChange}
            />
          </Card>
        </Spin>
      </PageHeaderLayout>
    );
  }
}