Hotax/src/routes/Shelves/TableForm.js

import React, { PureComponent, Fragment } from 'react';
import {
  Table,
  Button,
  Select,
  InputNumber,
  Popconfirm,
  Divider,
  Modal,
  message,
} from 'antd';
import Selector from '../../components/AXTableSelector/Selector';
import { chargeUnitMap, durationMap, genAbsolutePicUrl, sortMap } from '../../utils/utils';
import shopqr from '../../assets/shopqr.png';
import styles from './TableForm.less';

export default class TableForm extends PureComponent {
  constructor(props) {
    super(props);

    this.state = {
      data: props.value,
      loading: props.loading,
      currentKey: null,
    };
  }
  componentWillReceiveProps(nextProps) {
    if ('value' in nextProps && (!this.props.value || !this.props.value.length) ) {
      this.setState({
        data: nextProps.value,
      });
    }
  }
  getRowByKey(key, newData) {
    return (newData || this.state.data).filter(item => item.key === key)[0];
  }
  index = 0;
  cacheOriginData = {};
  toggleEditable=(e, key) => {
    e.preventDefault();
    const newData = this.state.data.map(item => ({ ...item }));
    const target = this.getRowByKey(key, newData);
    if (target) {
      // 进入编辑状态时保存原始数据
      if (!target.editable) {
        this.cacheOriginData[key] = { ...target };
      }
      target.editable = !target.editable;
      this.setState({ data: newData });
    }
  };
  chargeUnitSelectable=(value) => {
    const tmp = this.state.data.find(item => item.chargeUnit === value);
    return tmp !== undefined;
  };
  remove(record) {
    const { key, isNew } = record;
    const newData = this.state.data.filter(item => item.key !== key);
    this.setState({ data: newData });
    if (!isNew) {
      this.props.onDelete({ goodsId: key });
    }
  }
  newPrice = () => {
    const newData = this.state.data.map(item => ({ ...item }));
    newData.push({
      key: `NEW_TEMP_ID_${this.index}`,
      cpPrice: '',
      merchantPrice: '',
      terminalPrice: '',
      editable: true,
      isNew: true,
    });
    this.index += 1;
    this.setState({ data: newData });
  };
  handleFieldChange(value, fieldName, key) {
    const newData = this.state.data.map(item => ({ ...item }));
    const target = this.getRowByKey(key, newData);
    if (target) {
      target[fieldName] = value;
      this.setState({ data: newData });
    }
  }
  handleSelectChange(value, key) {
    const newData = this.state.data.map(item => ({ ...item }));
    const target = this.getRowByKey(key, newData);
    if (target) {
      target.chargeUnit = value;
      target.duration = durationMap[value];
      this.setState({ data: newData });
    }
  }
  handleQRSelectShow(key) {
    this.setState({
      currentKey: key,
    }, () => this.props.onQRShow());
  }
  handleQRSelectFinish(rows) {
    const newData = this.state.data.map(item => ({ ...item }));
    const target = this.getRowByKey(this.state.currentKey, newData);
    if (target) {
      target.shopQR = rows[0].path;
      this.setState({ data: newData });
    }
    this.props.onQRHide();
  }
  saveRow(e, key) {
    e.persist();
    if (this.clickedCancel) {
      this.clickedCancel = false;
      return;
    }
    const target = this.getRowByKey(key) || {};
    if (!target.chargeUnit || !target.cpPrice || !target.merchantPrice || !target.terminalPrice) {
      message.error('请填写完整价格信息');
      e.target.focus();
      return;
    }
    const { id, chargeUnit, cpPrice, merchantPrice, terminalPrice, duration, shopQR } = target;
    const sort = sortMap[chargeUnit];
    if (target.isNew) {
      this.props.onCreate({
        sort,
        cpPrice,
        shopQR,
        duration,
        chargeUnit,
        merchantPrice,
        terminalPrice,
      });
    } else {
      this.props.onUpdate({
        id,
        sort,
        shopQR,
        cpPrice,
        duration,
        chargeUnit,
        merchantPrice,
        terminalPrice,
      });
    }
    delete target.isNew;
    this.toggleEditable(e, key);
  }
  cancel(e, key) {
    this.clickedCancel = true;
    e.preventDefault();
    const newData = this.state.data.map(item => ({ ...item }));
    const target = this.getRowByKey(key, newData);
    if (this.cacheOriginData[key]) {
      Object.assign(target, this.cacheOriginData[key]);
      target.editable = false;
      delete this.cacheOriginData[key];
    }
    this.setState({ data: newData });
    this.clickedCancel = false;
  }
  render() {
    const columns = [{
      title: '计价单位',
      dataIndex: 'chargeUnit',
      key: 'chargeUnit',
      width: '13%',
      align: 'center',
      render: (text, record) => {
        if (record.editable) {
          return (
            <Select
              placeholder="请选择"
              style={{ width: '100%' }}
              value={text}
              onChange={value => this.handleSelectChange(value, record.key)}
              className={styles.select}
            >
              {
                Object.keys(chargeUnitMap).map(key => (
                  <Select.Option
                    key={key}
                    value={key}
                    disabled={this.chargeUnitSelectable(key)}
                  >
                    {chargeUnitMap[key]}
                  </Select.Option>
                ))
              }
            </Select>
          );
        }
        return text;
      },
    }, {
      title: '时长(天)',
      dataIndex: 'duration',
      key: 'duration',
      width: '10%',
      align: 'center',
    }, {
      title: '二维码',
      dataIndex: 'shopQR',
      key: 'shopQR',
      width: '10%',
      align: 'center',
      render: (text, record) => {
        const { editable, key } = record;
        return (
          <div className={styles.qrWrapper}>
            {
              editable && (
                <div className={styles.qrBtn}>
                  <a onClick={() => this.handleQRSelectShow(key)}>{!text ? '选择' : '更换'}</a>
                </div>
              )
            }
            <img src={!text ? shopqr : genAbsolutePicUrl(text)} alt="二维码" />
          </div>
        );
      },
    }, {
      title: '供应商售价(¥)',
      dataIndex: 'cpPrice',
      key: 'cpPrice',
      width: '18%',
      align: 'center',
      render: (text, record) => {
        if (record.editable) {
          return (
            <InputNumber
              min={1}
              value={text}
              onChange={e => this.handleFieldChange(e, 'cpPrice', record.key)}
              style={{ width: '100%' }}
              placeholder="请输入"
            />
          );
        }
        return text;
      },
    }, {
      title: '平台方售价(¥)',
      dataIndex: 'merchantPrice',
      key: 'merchantPrice',
      width: '18%',
      align: 'center',
      render: (text, record) => {
        if (record.editable) {
          return (
            <InputNumber
              min={1}
              value={text}
              onChange={value => this.handleFieldChange(value, 'merchantPrice', record.key)}
              style={{ width: '100%' }}
              placeholder="请输入"
            />
          );
        }
        return text;
      },
    }, {
      title: '终端显示价格(¥)',
      dataIndex: 'terminalPrice',
      key: 'terminalPrice',
      width: '18%',
      align: 'center',
      render: (text, record) => {
        if (record.editable) {
          return (
            <InputNumber
              min={1}
              value={text}
              onChange={value => this.handleFieldChange(value, 'terminalPrice', record.key)}
              style={{ width: '100%' }}
              placeholder="请输入"
            />
          );
        }
        return text;
      },
    }, {
      title: '操作',
      key: 'action',
      align: 'center',
      render: (text, record) => {
        if (!!record.editable && this.state.loading) {
          return null;
        }
        if (record.editable) {
          if (record.isNew) {
            return (
              <span>
                <a onClick={e => this.saveRow(e, record.key)}>添加</a>
                <Divider type="vertical" />
                <Popconfirm title="是否要删除此价格？" onConfirm={() => this.remove(record)}>
                  <a>删除</a>
                </Popconfirm>
              </span>
            );
          }
          return (
            <span>
              <a onClick={e => this.saveRow(e, record.key)}>保存</a>
              <Divider type="vertical" />
              <a onClick={e => this.cancel(e, record.key)}>取消</a>
            </span>
          );
        }
        return (
          <span>
            <a onClick={e => this.toggleEditable(e, record.key)}>编辑</a>
            <Divider type="vertical" />
            <Popconfirm title="是否要删除此价格？" onConfirm={() => this.remove(record)}>
              <a>删除</a>
            </Popconfirm>
          </span>
        );
      },
    }];
    /* 二维码选择模态框 */
    const getResourceModal = () => {
      return (
        <Modal
          width={1100}
          footer={null}
          visible
          title="图片资源"
          maskClosable={false}
          onCancel={this.props.onQRHide}
        >
          <Selector
            multiple={false}
            loading={this.props.qrLoading}
            selectorName="PictureSingle"
            list={this.props.qrData.list}
            pageNo={this.props.qrData.pageNo}
            pageSize={this.props.qrData.pageSize}
            totalSize={this.props.qrData.totalSize}
            onCancel={this.props.onQRHide}
            onChange={this.props.onQRChange}
            onFinish={rows => this.handleQRSelectFinish(rows)}
          />
        </Modal>
      );
    };

    return (
      <Fragment>
        <Table
          bordered
          pagination={false}
          columns={columns}
          loading={this.state.loading}
          dataSource={this.state.data}
          rowClassName={() => {
            return styles.editable;
          }}
        />
        {!this.props.qrDestroy && getResourceModal()}
        <Button
          style={{ width: '100%', marginTop: 16, marginBottom: 8 }}
          type="dashed"
          onClick={this.newPrice}
          icon="plus"
        >
          新增价格
        </Button>
      </Fragment>
    );
  }
}