README

Visual Studio Code HTML Snippets

DISABLING THIS EXTENSION AS IT CURRENTLY CONFLICTS WTH EXISTING VS CODE jltd component EXTENSION

jltd Component

list

import {
  DatePicker, JButtonGroup, JDatePicker, JForm, JInput, JSelect, JTable, PageHeaderLayout,
} from 'jltd';
import moment from 'moment';
import React, { Component } from 'react';
import { FormattedMessage } from 'react-intl';

const { RangePicker } = JDatePicker;

class List extends Component {
  constructor(props) {
    super(props);
    this.state = {
      current: 1,
      pageSize: 10,
      selectedRowKeys: [],
      selectedRows: [],
    };
  }

  // table行选中
  onSelectChange = (selectedRowKeys, selectedRows) => {
    console.log('selectedRowKeys changed: ', selectedRowKeys);
    console.log('selectedRows changed: ', selectedRows);
    this.setState({
      selectedRowKeys,
      selectedRows,
    });
  };

  // 分页变化
  onPageChange = (current, pageSize) => {
    this.setState({
      current,
      pageSize,
    });
  };

  // 搜索表单
  renderSearchForm = () => {
    const datas = [
      {
        label: '业务单号',
        node: <JInput />,
        fileId: 'fileId1',
        span: 8,
      }, {
        label: '业务类型',
        node: <JSelect params={{ codeType: 'ASNINV_BUSINESS_TYPE' }} />,
        fileId: 'fileId2',
        span: 8,
      }, {
        label: '创建日期',
        node: <RangePicker />,
        value: [moment(new Date()).subtract(3, 'months'), moment()],
        fileId: 'fileId3',
        span: 8,
      }, {
        label: '截止日期',
        node: <DatePicker />,
        fileId: 'fileId4',
        span: 8,
      },
    ];
    return (
      <JForm
        datas={datas}
        isSearch
        getRefForm={e => this.form = e}
        onSearchClick={() => {
          const data = this.form && this.form.values();
          if (data) {
            console.log(data);
          }
        }}
      />
    );
  }

  // 操作按钮
  renderButtonGroup = () => {
    const btnData = [
      {
        text: '提交',
        onClick: () => { },
      },
      {
        text: '取消',
        onClick: () => { },
      },
      {
        text: '删除',
        onClick: () => { },
      },
    ];
    return (
      <JButtonGroup
        data={btnData}
        extra={<span>总共9条拒单订单，请及时处理！</span>}
      />
    );
  }

  // 列表页
  renderTable = () => {
    const { selectedRowKeys, current, pageSize } = this.state;
    const dataSourceParams = { url: '/storage/carrierAsnRecord/queryList', method: 'GET' };
    const columnsParams = {
      url: '../customerList/initColumns?listCode=WMS_Storage_Center_Inbound_Task',
      params: {},
    };
    const saveColumnsParams = {
      url: '/customListColumns',
      params: {},
    };
    const columnsRender = [{
      dataIndex: 'warAsnNum',
      render: (text, record) => {
        return (
          <a style={{ textDecoration: 'none' }}>{text}</a>
        );
      },
    }];
    const columns = [
      {
        title: '异常编号',
        dataIndex: 'shopCode1',
        key: 'shopCode',

      }, {
        title: '业务单号',
        dataIndex: 'shopCode2',
        key: 'shopCode',
      }, {
        title: '客户',
        dataIndex: 'shopCode3',
        key: 'shopCode',
      },
    ];
    const rowSelection = {
      // fixed: 'left',
      selectedRowKeys,
      onChange: this.onSelectChange,
    };
    // 封装的分页
    const pagination = {
      current,
      showSizeChanger: true,
      showQuickJumper: true,
      onChange: this.onPageChange,
      pageSize,
      showTotal: total => (
        <FormattedMessage
          id="jlt.storage.text.showtotal"
          description="总共 {value} 记录"
          defaultMessage="总共 {value} 记录"
          values={{ value: total }}
        />
      ),
    };
    return (
      <JTable
        rowKey="rowKey"
        ref={(table) => {
          this.table = table;
        }}
        // 本地用法
        // columns={columns}
        // dataSource={list}
        columnsParams={columnsParams}
        dataSourceParams={dataSourceParams}
        columnsRender={columnsRender}
        rowSelection={rowSelection}
        saveColumnsParams={saveColumnsParams}
        // 是否要展示自定义筛选的功能 false 为不展示
        FilterColumns
        pagination={{
          ...pagination,
          onChange: (current, pageSize) => {
            this.table.getDataSource({}, current, pageSize);
            this.onPageChange(current, pageSize);
          },
        }}
      />
    );
  }

  render() {
    return (
      <PageHeaderLayout title="">
        {this.renderSearchForm()}
        {this.renderButtonGroup()}
        {this.renderTable()}
      </PageHeaderLayout>
    );
  }
}

export default List;

detail

import {
  Card, JDetail, JEllipsis, JTable, PageHeaderLayout, Tabs, Tag, JStep,
} from 'jltd';
import moment from 'moment/moment';
import React from 'react';

class JDetailPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      tabType: 'info',
    };
  }

  renderForm = () => {
    const text = '占位字符';
    let color = '';
    switch (text) {
      case 10:
        color = '#00b6f5';
        break;
      case 11:
        color = '#aa8dff';
        break;
      case 12:
        color = '#aa8dff';
        break;
      case 13:
        color = '#aa8dff';
        break;
      case 14:
        color = '#3dbe8f';
        break;
      case 15:
        color = '#ff7668';
        break;
      default:
        color = '#ff7668';
    }
    const orderInfo = [
      {
        label: '要货单号',
        node: text || '- -',
      },
      {
        label: '门店名称',
        node: text || '- -',
      },
      {
        label: '订货清单',
        node: text || '- -',
      },
      {
        label: '联系人',
        node: text || '- -',
      },
      {
        label: '联系电话',
        node: text || '- -',
      },
      {
        label: '要求送达时间',
        node: text
          ? moment().format('YYYY-MM-DD HH:mm')
          : '- -',
      },
      {
        label: '收货地址',
        node: text || '',
        span: 16,
      },
      {
        label: '门店仓库',
        node: text || '- -',
      },
      {
        label: '要货备注',
        node: text,
        span: 24,
      },
      {
        label: '创建人',
        node: text || '- -',
      },
      {
        label: '创建时间',
        node: text
          ? moment().format('YYYY-MM-DD HH:mm')
          : '- -',
      },
      {
        label: '最后修改人',
        node: text || '- -',
      },
      {
        label: '最后修改时间',
        node: text
          ? moment().format('YYYY-MM-DD HH:mm')
          : '- -',
      },
      {
        label: '提交时间',
        node: text
          ? moment().format('YYYY-MM-DD HH:mm')
          : '- -',
      },
      {
        label: '订单状态',
        node: (
          <Tag color={color}>
            订单状态
          </Tag>
        ),
      },
    ];
    return (
      <Card className="padding0">
        <JDetail
          title="基本信息"
          data={orderInfo}
        />
      </Card>
    );
  }

  // tabs的change事件
  onChange = (e) => {
    this.setState({ tabType: e });
  };

  renderLogisy = () => {
    const text = '步骤占位字符串';
    const steps = [
      {
        title: '待提交',
        icon: 'waitOrder',
        tag: '10',
        description: text,
      },
      {
        title: '待审核',
        icon: 'waitOrder',
        tag: '11',
        description: text,
      },
      {
        title: '待发货',
        icon: 'waitDeliver',
        tag: '12',
        description: text,
      },
      {
        title: '待签收',
        icon: 'deliver',
        tag: '13',
        description: text,
      },
      {
        title: '已完成',
        icon: 'sign',
        tag: '14',
        description: text,
      },
    ];

    // table 的 columns数据查询
    const columnsParams = {
      url: '/customerList/initColumns?listCode=DETAIL_LOGISTIC_LIST',
      params: {},
    };

    // table 的 columns数据是否选中的保存
    const saveColumnsParams = {
      url: '/customListColumns',
      params: {},
    };


    const columnsRender = [
      {
        dataIndex: '',
        render: (text, rowData, index) => {
          return index + 1;
        },
      },
      {
        dataIndex: 'custEloNo',
        render: (text, rowData) => {
          return (
            <a
              href={`/ssm/index.html#/ssm/logisticsOrderDetail?eloNo=${rowData.eloNo}&eloType=${
                rowData.eloType
              }&tenantId=${rowData.tenantId}`}
            >
              {text}
            </a>
          );
        },
      },
      {
        dataIndex: 'createTime',
        render: text => (text === '' || !text ? '- -' : moment(text).format('YYYY-MM-DD HH:mm')),
      },
    ];

    return (
      <Tabs.TabPane
        tab="订单跟踪"
        key="logistics"
      >
        <div>
          <JStep current={2} steps={steps} labelPlacement="vertical" />
          <div style={{ marginTop: '20px' }}>
            <JTable
              ref={(talbe) => {
                this.table = talbe;
              }}
              dataSource={[]}
              columnsParams={columnsParams}
              columnsRender={columnsRender}
              saveColumnsParams={saveColumnsParams}
              rowKey="eloId"
            />
          </div>
        </div>
      </Tabs.TabPane>
    );
  }

  renderTable = () => {
    // table 的 columns数据查询
    const columnsParams = {
      url: '/customerList/initColumns?listCode=FB_DemandForGoodsDetail_GoodsList_Store',
      params: {},
    };

    // table 的 columns数据是否选中的保存
    const saveColumnsParams = {
      url: '/customListColumns',
      params: {},
    };

    const columnsRender = [
      {
        dataIndex: 'packType',
        render: (value) => {
          const text = String(value) === '10'
            ? '包装货'
            : '散货';
          return <div>{text}</div>;
        },
      },
      {
        dataIndex: 'remark',
        render: (text) => {
          return (
            <JEllipsis lines={2}>
              {text}
            </JEllipsis>
          );
        },
      },
    ];

    return (
      <Tabs.TabPane
        tab="商品信息"
        key="info"
      >
        <JTable
          dataSource={[]}
          // scoll={{ x: 1680, y: 600 }}
          columnsParams={columnsParams}
          columnsRender={columnsRender}
          saveColumnsParams={saveColumnsParams}
          rowKey="id"
        />
      </Tabs.TabPane>
    );
  }

  renderInfo = () => {
    // table 的 columns数据查询
    const columnsParams = {
      url: '/customerList/initColumns?listCode=FB_DemandForGoodsDetail_SignList',
      params: {},
    };

    // table 的 columns数据是否选中的保存
    const saveColumnsParams = {
      url: '/customListColumns',
      params: {},
    };

    // #表头render
    const columnsRender = [
      {
        dataIndex: '',
        render: (text, rowData, index) => {
          return index + 1;
        },
      },
      {
        dataIndex: 'signPic',
        render: (text, rowData) => {
          return rowData.fbOmsEsFiles && rowData.fbOmsEsFiles.length !== 0 ? (
            <span
              onClick={() => this.onTableImages(rowData.fbOmsEsFiles)}
              style={{ color: '#098fd2' }}
            >
              {'图片'}
              (
              {rowData.fbOmsEsFiles.length}
              )
            </span>
          ) : null;
        },
      },
    ];
    return (
      <Tabs.TabPane
        tab={window.intlFormat('jlt.fboms.label.DEMANDDETAIL_SIGN_INFO', '签收信息')}
        key="signInfo"
      >
        <JTable
          rowKey="id"
          dataSource={[]}
          columnsParams={columnsParams}
          saveColumnsParams={saveColumnsParams}
          columnsRender={columnsRender}
        />
      </Tabs.TabPane>
    );
  }

  renderTabs = () => {
    const { tabType } = this.state;
    return (
      <Tabs activeKey={tabType} onChange={this.onChange} style={{ margin: '16px 0' }}>
        {this.renderTable()}
        {this.renderInfo()}
        {this.renderLogisy()}

      </Tabs>
    );
  }

  render() {
    return (
      <PageHeaderLayout
        title="要货需求详情"
        showBackBtn
      >
        {this.renderForm()}
        {this.renderTabs()}
      </PageHeaderLayout>
    );
  }
}

export default JDetailPage;

add

import {
  Tabs, JInputNumber, InputNumber, Popconfirm, Icon, JTable, Button, Affix, JCard, JForm, JInput, JModalSearch, Cascader, JSelect, Form, message, PageHeaderLayout, Radio, JDatePicker,
} from 'jltd';
import moment from 'moment/moment';
import * as React from 'react';
import city from '../utils/city';

const { TabPane } = Tabs;

const Search = JInput.Search;


class JAddPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false, // 货主名称的modal
      goodsModalVisible: false,
      simpleGoods: [],
      complexGoods: [],
      ComplexGoodsModalVisible: false,
      selectedRowKeys: [], // 选中的记录
      selectedRowKeys1: [], // 选中的记录
    };
  }

onSubmit = () => {
  const { form } = this.props;
  // 获取表单的值
  console.log('submit', form.getFieldsValue());
  // 表单验证
  form.validateFields((err, value) => {
    if (err) {
      message.error('请完善信息');
    }
    // 保存操作
  });
}

// Table1的商品信息按钮
renderSimpleButton = () => {
  return (
    <div>
      <Button onClick={() => { this.setState({ goodsModalVisible: true }); }}>选择商品</Button>
      <Button>删除</Button>
    </div>
  );
}

// Table2的商品信息按钮
renderComplexButton = () => {
  return (
    <div>
      <Button onClick={() => { this.setState({ ComplexGoodsModalVisible: true }); }}>选择商品</Button>
      <Button>删除</Button>
    </div>
  );
}

onOk = (selectKeys, selectedRow) => {
  this.setState({
    simpleGoods: selectedRow,
    goodsModalVisible: false,
  });
}

onOk1 = (selectKeys, selectedRow) => {
  this.setState({
    complexGoods: selectedRow,
    ComplexGoodsModalVisible: false,
  });
}

onCancel = () => {
  this.setState({
    goodsModalVisible: false,
  });
}

onCancel1 = () => {
  this.setState({ ComplexGoodsModalVisible: false });
}

// 行选择事件
onRowSelectChangeEvent = (selectedRowKeys, selectedRows) => {
  this.setState({
    selectedRowKeys,
  });
};

// 行选择事件
onRowSelectChangeEvent1 = (selectedRowKeys, selectedRows) => {
  this.setState({
    selectedRowKeys1: selectedRowKeys,
  });
};

// 简单的商品信息表格
renderSimpleTable = () => {
  const columns = [
    {
      title: '商品编码',
      dataIndex: 'wsSkuCode',
      width: 100,
    },
    {
      title: '商品名称',
      dataIndex: 'wsSkuName',
      width: 100,
    },
    {
      title: '包装规格',
      dataIndex: 'packSpeci',
      width: 100,
    },
    {
      title: <div>
        <span style={{ color: '#ff0000' }}>*</span>
        {'数量'}
             </div>,
      dataIndex: 'goodsNum',
      type: 'input',
      width: 100,
      render: (value, rowData) => {
        return rowData.packType === '10' ? (
          <InputNumber
            min={1}
            max={999999999}
            precision={rowData.precision}
            defaultValue={value || 1}
          />
        ) : (
          <InputNumber
            min={0.001}
            max={999999998.999}
            precision={rowData.precision}
            defaultValue={value || 1}
          />
        );
      },
    },
    {
      title: <div>
        <span style={{ color: '#ff0000' }}>*</span>
        {'单位'}
      </div>,
      dataIndex: 'goodsUnit',
      type: 'select',
      width: 100,
      render: (text, rowData, index) => <JInput defaultValue={rowData.defaultUnitName} disabled />,
    },
    {
      title: '生产日期',
      dataIndex: 'productionTime',
      type: 'input',
      width: 180,
      render: (text, rowData) => {
        return (
          <JDatePicker
            format="YYYY-MM-DD"
            limitEndTime={moment()}
            onChange={(newValue, dateStr) => {
              if (newValue) {
                rowData.productionTime = moment(newValue).format('YYYY-MM-DD');
                if (rowData.wsShelfLife) {
                  rowData.expiryDate = moment(dateStr)
                    .add(rowData.wsShelfLife, 'day')
                    .format('YYYY-MM-DD');
                }
              }
            }}
            allowClear
          />
        );
      },
    },
    {
      title: '保质期（天）',
      dataIndex: 'wsShelfLife',
      width: 150,
    },
    {
      title: '失效日期',
      dataIndex: 'expiryDate',
      type: 'input',
      width: 100,
    },
    {
      title: '批次号',
      dataIndex: 'lotNo',
      type: 'input',
      width: 100,
      render: (text, rowData) => {
        return (
          <JInput
            defaultValue={rowData.lotNo || ''}
            maxLength={50}
          />
        );
      },
    },
    {
      title: '商品状态',
      dataIndex: 'productStatus',
      type: 'input',
      width: 100,
      render: (text, rowData) => {
        return (
          <JSelect
            allowClear
            params={{ codeType: 'PRODUCT_STATUS' }}
          />
        );
      },
    },
    {
      title: '商品备注',
      dataIndex: 'remark',
      width: 150,
      render: (text, record) => {
        return (
          <JInput
            maxLength={140}
          />
        );
      },
    },
    {
      title: '操作',
      dataIndex: '',
      width: 80,
      render: (text, rowData) => {
        return (
          <Popconfirm title="是否确认删除?" onConfirm={() => { }}>
            <Icon type="delete" />
          </Popconfirm>
        );
      },
    },
  ];
  const { simpleGoods, selectedRowKeys } = this.state;
  const rowSelection = {
    selectedRowKeys,
    onChange: this.onRowSelectChangeEvent,
  };
  return (
    <JTable
      columns={columns}
      FilterColumns={false}
      dataSource={simpleGoods}
      rowKey="wsId"
      rowSelection={rowSelection}
      pagination={{
        defaultPageSize: 10,
        pageSizeOptions: ['5', '8', '10', '20', '50', '100'],
        // total,
        // current,
        // pageSize,
        onChange: (current, pageSize) => {
        // 在这边动态改变current 和pageSize的值 实现分页器切换
        // this.onPageChangeEvent(current, pageSize);
        },
      }}
    />
  );
}

expandedRowRender = () => {
  return (
    <Tabs defaultActiveKey="1" animated={false}>
      <TabPane
        tab="基本信息"
        key="1"
      >
        <div>基本信息Tab</div>
      </TabPane>
      <TabPane
        tab="包装规格"
        key="2"
      >
        <div>包装规格Tab</div>
      </TabPane>
      <TabPane
        tab="温湿度要求"
        key="3"
      >
        <div>温湿度要求Tab</div>
      </TabPane>
      <TabPane
        tab="批次要求"
        key="4"
      >
        <div>批次要求Tab</div>
      </TabPane>
      <TabPane
        tab="其他信息"
        key="6"
      >
        <div>其他信息Tab</div>
      </TabPane>
    </Tabs>
  );
}

// 复杂的商品信息表格
renderComplexTable = () => {
  const columns = [
    {
      title: '商品编码',
      dataIndex: 'wsSkuCode',
      width: 200,
      render: (text, rowData, index) => <JInput defaultValue={rowData.wsSkuCode} disabled />,
    },
    {
      title: '商品名称',
      dataIndex: 'wsSkuName',
      width: 160,
    },
    {
      title: '商品数量',
      dataIndex: 'skuCount',
      width: 160,
      render: (text, record) => {
        return (
          <div onClick={(e) => {
            e.stopPropagation();
          }}
          >
            <JInputNumber />
          </div>
        );
      },
    },
    {
      title: '数量单位',
      dataIndex: 'minUnitName',
      width: 120,
    },
    {
      title: '明细数量',
      dataIndex: 'detailCount',
      width: 120,
    },
    {
      title: '明细单位',
      dataIndex: 'defaultUnitName',
      width: 120,
    },
    {
      title: '净重(kg)',
      dataIndex: 'skuNw',
      width: 110,
      render: () => {
        return (
          <div onClick={(e) => {
            e.stopPropagation();
          }}
          >
            <JInputNumber />
          </div>
        );
      },
    },
    {
      title: '毛重(kg)',
      dataIndex: 'skuGw',
      width: 110,
      render: () => {
        return (
          <div onClick={(e) => {
            e.stopPropagation();
          }}
          >
            <JInputNumber />
          </div>
        );
      },
    },
    {
      title: '体积(m³)',
      dataIndex: 'skuVolume',
      width: 110,
      render: () => {
        return (
          <div onClick={(e) => {
            e.stopPropagation();
          }}
          >
            <JInputNumber />
          </div>

        );
      },
    },
    {
      title: '操作',
      dataIndex: '',
      width: 80,
      render: (text, rowData) => {
        return (
          <Popconfirm title="是否确认删除?" onConfirm={() => { }}>
            <Icon type="delete" />
          </Popconfirm>
        );
      },
    },
  ];
  const { complexGoods, selectedRowKeys1 } = this.state;
  const rowSelection = {
    selectedRowKeys: selectedRowKeys1,
    onChange: this.onRowSelectChangeEvent1,
  };
  return (
    <JTable
      columns={columns}
      FilterColumns={false}
      dataSource={complexGoods}
      rowKey="wsId"
      rowSelection={rowSelection}
      expandedRowRender={this.expandedRowRender}
      pagination={{
        defaultPageSize: 10,
        pageSizeOptions: ['5', '8', '10', '20', '50', '100'],
        // total,
        // current,
        // pageSize,
        onChange: (current, pageSize) => {
        // this.onPageChangeEvent(current, pageSize);
        },
      }}
    />
  );
}

renderForm1 = () => {
  const { form } = this.props;
  // 第一个form数据
  const datas1 = [
    // input类型
    {
      label: '订单号',
      span: 8,
      fileId: 'test1',
      node: <JInput />,
    },
    // 搜索类型
    {
      label: '货主名称',
      node: <Search
        placeholder="请选择货主"
        onSearch={() => { this.setState({ visible: true }); }}
      />,
      fileId: 'test2',
      rules: [{ required: true, message: '请选择货主' }],
      span: 8,
    },
    // 单选类型
    {
      label: '是否退货',
      value: 'Y',
      node: (
        <Radio.Group
          onChange={() => {
            console.log('Radio.Group onChange');
          }}
        >
          <Radio value="Y">
是
          </Radio>
          <Radio value="N">
否
          </Radio>
        </Radio.Group>
      ),
      rules: [{ required: true }],
      fileId: 'test3',
      span: 8,
    },
    {
      label: '退货原因',
      node: <JInput />,
      fileId: 'test4',
      rules: [{ required: true }],
      span: 8,
    },
  ];
  return (
    <div>
      <JCard title="基础信息">
        <JForm
          renderAll
          datas={datas1}
          form={form}
        />
      </JCard>
      {/* 货主的modal */}
      {this.renderCustomerModal()}
    </div>
  );
}

renderForm2 = () => {
  const { form } = this.props;
  // 第二个form数据
  const datas2 = [
    {
      label: '发货方编码',
      span: 8,
      fileId: 'test6',
      node: <JInput />,
    },
    {
      label: '发货方编码',
      span: 8,
      fileId: 'test7',
      node: <JDatePicker format="YYYY-MM-DD" />,
      value: moment(),
    },
    // 数据字典类型
    {
      label: '业务类型',
      span: 8,
      fileId: 'test8',
      node: (
        <JSelect allowClear params={{ codeType: 'ASNINV_BUSINESS_TYPE' }} />
      ),
      initialValue: '10',
    },
    {
      label: '区域地址',
      span: 8,
      fileId: 'test9',
      node: (
        <Cascader
          options={city}
          onChange={(value, options) => {
            console.log(value, options);
          }}
        />
      ),
    },

    {
      label: '订单备注',
      node: <JInput.TextArea rows={4} maxLength={140} />,
      fileId: 'test10',
      span: 24,
    },
  ];
  return (
    <JCard title="发货方信息">
      <JForm
        renderAll
        datas={datas2}
        form={form}
      />
    </JCard>
  );
}

renderBack = () => {
  return (
    <Affix offsetBottom={0}>
      <div
        style={{
          marginTop: '12px', borderTop: '1px solid #e9e9e9', background: '#fff', boxShadow: '0 -2px 2px #e9e9e9', position: 'fixed', bottom: '0', zIndex: '10', width: '100%', height: '57px', padding: '12px 24px',
        }}
      >
        <Button type="primary" onClick={this.onSubmit}>保存</Button>
      </div>
    </Affix>
  );
}

renderCustomerModal = () => {
  const { form } = this.props;
  const { visible } = this.state;
  const columns = [
    {
      title: '货主编码',
      dataIndex: 'ccCustomerCode',
      width: 400,
    },
    {
      title: '货主名称',
      dataIndex: 'ccCustomerName',
    },
  ];
  return (
    <JModalSearch
      width={900}
      title="选择货主"
      onCancel={() => {
        this.setState({ visible: false });
      }}
      onChange={(selectKey, selectedRows) => {
        console.log(selectKey, selectedRows);
        if (selectedRows.length < 1) {
          message.error('请选择一条数据');
          return;
        }
        this.setState({ visible: false });
        form.setFieldsValue({ test2: selectedRows[0].ccCustomerName });
      }}
      visible={visible}
      JFormData={[
        {
          label: '货主编码',
          node: <JInput />,
          fileId: 'ccCustomerCodeLike',
          span: 8,
        },
        {
          label: '货主名称',
          node: <JInput />,
          fileId: 'ccCustomerNameLike',
          span: 8,
        },
      ]}
      dataSourceParams={{
        url: '../invoicing/getCustomerPage',
        method: 'get',
      }}
      columnsParams={{
        columns,
      }}
      rowKey="id"
      type="radio"
    />
  );
}

renderTable1 = () => {
  const { goodsModalVisible } = this.state;
  // Table1 modal的 columns
  const columns1 = [
    {
      title: '商品编码',
      dataIndex: 'wsSkuCode',
      width: 250,
    },
    {
      title: '商品名称',
      dataIndex: 'wsSkuName',
      width: 250,
    },
    {
      title: '商品简称',
      dataIndex: 'abbrev',
      width: 250,
    },
    {
      title: '商品分类',
      dataIndex: 'wsShortName',
      width: 250,
    },
    {
      title: '包装规格',
      dataIndex: 'packSpeci',
      width: 250,
    },
    {
      title: '保质期',
      dataIndex: 'wsShelfLife',
      width: 250,
    },
    {
      title: '默认下单单位',
      dataIndex: 'defaultUnitName',
      width: 250,
    },
  ];
  return (
    <div>
      <JCard title="商品信息1">
        {this.renderSimpleButton()}
        {this.renderSimpleTable()}
      </JCard>
      {/* Table1的modal */}
      <JModalSearch
        width={1000}
        title="选择商品"
        onCancel={this.onCancel}
        onChange={this.onOk}
        visible={goodsModalVisible}
        JFormData={[
          {
            label: '商品编码',
            node: <JInput />,
            fileId: 'wsSkuCode',
            span: 8,
          },
          {
            label: '商品名称',
            node: <JInput />,
            fileId: 'wsSkuName',
            span: 8,
          },
        ]}
        dataSourceParams={{
          url: '../invoicing/selectSkuPageWithOutIsSerial',
          method: 'get',
          params: {
            exactOwnerCode: 'CU20190902000002',
          },
        }}
        columnsParams={{
          columns: columns1,
        }}
        rowKey="wsId"
      />
    </div>

  );
}

renderTable2 = () => {
  const { ComplexGoodsModalVisible } = this.state;
  // 第二个table modal的 columns
  const columns2 = [
    {
      title: '商品编码',
      dataIndex: 'wsSkuCode',
      width: 80,
    },
    {
      title: '商品名称',
      dataIndex: 'wsSkuName',
      width: 80,
    },
    {
      title: '商品分类',
      dataIndex: 'wsShortName',
      width: 80,
    },
    {
      title: '包装规格',
      dataIndex: 'packSpeci',
      width: 80,
    },
    {
      title: '默认下单单位',
      dataIndex: 'defaultUnitName',
      width: 80,
    },
  ];
  const data = [
    {
      label: '总数量',
      span: 8,
      fileId: 'test11',
      node: <JInputNumber disabled precision={3} max={999999999999.999} />,
    },
    {
      label: '总净重(kg)',
      span: 8,
      fileId: 'test12',
      node: <JInputNumber precision={3} max={999999999999.999} />,
    },
    {
      label: '总毛重(kg)',
      span: 8,
      fileId: 'test13',
      node: <JInputNumber precision={3} max={999999999999.999} />,
    },
    {
      label: '总体积(m³)',
      span: 8,
      fileId: 'test14',
      node: <JInputNumber precision={3} max={999999999999.999} />,
    },
    {
      label: '总运输件数',
      span: 8,
      fileId: 'test15',
      node: <JInputNumber precision={3} max={999999999999.999} />,
    },
    {
      label: '订单总额(含税)',
      span: 8,
      fileId: 'test16',
      node: <JInputNumber precision={3} max={999999999999.999} />,
    },
  ];
  const { form } = this.props;
  return (
    <div>
      <JCard title="商品信息2">
        {this.renderComplexButton()}
        {this.renderComplexTable()}
        <div style={{ marginTop: '10px' }}>
          <JForm datas={data} renderAll form={form} />
        </div>

      </JCard>
      {/* 第二个table的modal */}
      <JModalSearch
        width={1000}
        title="选择商品"
        onCancel={this.onCancel1}
        onChange={this.onOk1}
        visible={ComplexGoodsModalVisible}
        JFormData={[
          {
            label: '商品编码',
            node: <JInput />,
            fileId: 'skuNo',
            span: 8,
          },
          {
            label: '商品名称',
            node: <JInput />,
            fileId: 'skuName',
            span: 8,
          },
        ]}
        dataSourceParams={{
          url: '../ssm/courier/logistical/findSkuPage',
          method: 'get',
          params: {
            ownerCode: 'CU20190902000002',
          },
        }}
        columnsParams={{
          columns: columns2,
        }}
        rowKey="wsId"
      />
    </div>
  );
}

render() {
  return (
    <div>
      {/* 页头 */}
      <PageHeaderLayout
        title="新增退货订单"
        showBackBtn
        style={{ marginBottom: '57px' }}
      >
        {/* 第一个表单 */}
        {this.renderForm1()}

        {/* 第二个表单 */}
        {this.renderForm2()}

        {/* 第一个Table */}
        {this.renderTable1()}

        {/* 第二个Table */}
        {this.renderTable2()}

      </PageHeaderLayout>
      {/* 返回按钮 */}
      {this.renderBack()}


    </div>

  );
}
}

export default Form.create()(JAddPage);