订单编辑界面表格样式调整

src/routes/Order/Add/index.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { Card, List, Form, Table, Button, Input, Select } from 'antd';
+import { Popover, Card, List, Form, Table, Button, Input, InputNumber, Select, Dropdown, Menu, Icon } from 'antd';
 import { connect } from 'dva';
 import { routerRedux } from 'dva/router';
 
@@ -7,8 +7,8 @@ import PageHeaderLayout from '../../../layouts/PageHeaderLayout';
 import FooterToolbar from '../../../components/FooterToolbar';
 import TerminalSelectModal from './terminal';
 import MerchantProductSelectModal from './product';
-// import GoodsSelectModal from './product';
-import { pageSize } from '../../../utils/config';
+import { productType, pageSize } from '../../../utils/config';
+import styles from './index.less';
 
 @Form.create()
 @connect(state => ({
@@ -92,8 +92,41 @@ export default class CreateOrder extends Component {
 
   render() {
     const { orderItem, terminal, mproduct, form } = this.props;
-    const { terminalModalShow, productModalShow, currentItem } = orderItem;
-    const { userCode, userName, campusName, merchantName, merchantId, goods } = currentItem;
+    const { terminalModalShow, productModalShow } = orderItem;
+    const currentItem = {
+      userCode: '15790324883489',
+      userName: '教室六',
+      campusName: '北京-北京市 西城区-科贸A座',
+      merchantName: '贝尔安亲',
+      merchantId: '555',
+      products: [{
+        id: 'p1',
+        code: 'P-01',
+        name: '语文一年级上册',
+        type: 'COURSE',
+        coverUrl: 'https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png',
+        goods: [{
+          id: '1',
+          chargeUnit: '年',
+          cpPrice: 2000,
+          merchantPrice: 3000,
+          terminalPrice: 4000,
+        },{
+          id: '2',
+          chargeUnit: '半年',
+          cpPrice: 1000,
+          merchantPrice: 2000,
+          terminalPrice: 3000,
+        },{
+          id: '3',
+          chargeUnit: '季',
+          cpPrice: 500,
+          merchantPrice: 800,
+          terminalPrice: 1000,
+        }],
+      }],
+    };
+    const { userCode, userName, campusName, merchantName, merchantId, products } = currentItem;
 
     const formItemLayout = {
       labelCol: {
@@ -108,46 +141,67 @@ export default class CreateOrder extends Component {
     };
 
     const columns = [{
-      title: '产品图片',
+      title: '产品信息',
       dataIndex: 'coverUrl',
       key: 0,
+      render: (text, record) => (
+        <Popover
+          content={
+            <Card hoverable style={{ width: 350, height: 550 }} cover={<img alt="" src={text}/>}>
+              <Card.Meta
+                title={`${record.name}/${record.code}`}
+                description={`类型: ${productType[record.type]}`}
+              />
+            </Card>
+          }
+        >
+          <img src={text} width={50} />
+        </Popover>
+      ),
     },{
-      title: '产品编号',
-      dataIndex: 'code',
-      key: 1,
-    },{
-      title: '产品名称',
-      dataIndex: 'name',
-      key: 2,
-    },{
-      title: '产品类型',
-      dataIndex: 'type',
-      key: 3,
-    },{
-      title: '产品价格',
+      title: '价格类型',
       dataIndex: 'goods',
-      key: 4,
+      key: 1,
       render: (text, record) => (
-        <Select>
-          {record.goods.map(item => <Select.Option value={item.id} key={item.id}>{item.cpPrice}</Select.Option>)}
-        </Select>
+        <Dropdown
+          overlay={
+            <Menu>
+              {record.goods.map(item => <Menu.Item key={item.id}>{`${item.terminalPrice}¥/${item.chargeUnit}`}</Menu.Item>)}
+            </Menu>
+          }
+        ><a>付费方式<Icon type="down" /></a>
+        </Dropdown>
       ),
     },{
       title: '优惠价格',
       dataIndex: 'adjustPrice',
-      key: 5,
+      key: 2,
+      render: (text, record) => (
+        <InputNumber
+          min={0}
+          formatter={value => `¥ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
+          parser={value => value.replace(/\¥\s?|(,*)/g, '')}
+        />
+      ),
     },{
       title: '实际售价',
       dataIndex: 'finalPrice',
-      key: 6,
+      key: 3,
     },{
       title: '数量',
       dataIndex: 'quantity',
-      key: 7,
+      key: 4,
+      render: (text, record) => (
+        <InputNumber
+          min={1}
+          formatter={value => `X ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
+          parser={value => value.replace(/\X\s?|(,*)/g, '')}
+        />
+      ),
     },{
       title: '单位',
       dataIndex: 'chargeUnit',
-      key: 8,
+      key: 5,
     }];
 
     return (
@@ -175,10 +229,11 @@ export default class CreateOrder extends Component {
             <Form.Item label="添加商品" {...formItemLayout}>
               <Button onClick={this.handleProductSelectBtnClick} disabled={merchantId ? false : true} type="primary" size="small" icon="plus-circle-o">添加</Button>
               <Table
+                className={styles.table}
                 rowKey={record => record.id}
                 pagination={false}
                 columns={columns}
-                dataSource={goods}
+                dataSource={products}
               />
             </Form.Item>
           </Form>
@@ -196,10 +251,11 @@ export default class CreateOrder extends Component {
             fsTablePagination={terminal.pagination}
             fsTableOnChange={this.handleTerminalModalTableChange}
           />
+          {/*渠道产品选择弹框*/}
           <MerchantProductSelectModal
             rowKeyName="id"
             modalVisible={productModalShow}
-            selTableData={goods || []}
+            selTableData={products || []}
             style={{ top: 20 }}
             width={660}
             fsTableDataSource={mproduct.list}
@@ -210,17 +266,6 @@ export default class CreateOrder extends Component {
             onSearch={this.handleProductModalSearch}
             fsTableOnChange={this.handleProductModalTableChange}
           />
-          {/*
-          <GoodsSelectModal
-            style={{ top: 20 }}
-            width={800}
-            modalVisible={productModalShow}
-            onOk={this.handleProductModalOk}
-            onCancel={this.handleProductModalCancel}
-            pagination={mproduct.pagination}
-            dataSource={mproduct.list}
-          />
-          */}
         </Card>
         <FooterToolbar>
           <Button>取消</Button>

src/routes/Order/Add/index.less

@@ -0,0 +1,66 @@
+@import "~antd/lib/style/themes/default.less";
+@import "../../../utils/utils.less";
+
+.table {
+  :global {
+    .ant-table-tbody > tr > td,
+    .ant-table-thead > tr > th {
+
+      &:nth-child(1) {
+        width: 15%;
+      }
+
+      &:nth-child(2) {
+        width: 20%;
+      }
+
+      &:nth-child(3) {
+        width: 20%;
+      }
+
+      &:nth-child(4) {
+        width: 20%;
+      }
+
+      &:nth-child(5) {
+        width: 15%;
+      }
+
+      &:nth-child(6) {
+        width: 10%;
+      }
+    }
+
+    .ant-table-thead {
+      & > tr {
+        transition: none;
+        display: block;
+
+        & > th {
+          display: inline-flex;
+          align-items: left;
+          justify-content: left;
+        }
+      }
+    }
+
+    .ant-table-tbody {
+      & > tr {
+        transition: none;
+        display: block;
+        border-bottom: 1px solid #f5f5f5;
+
+        & > td {
+          border-bottom: none;
+          display: inline-flex;
+          align-items: left;
+          justify-content: left;
+        }
+
+        &.ant-table-expanded-row-level-1 > td {
+          height: auto;
+        }
+      }
+    }
+  }
+}

src/routes/Resource/gallery/index.js

@@ -97,10 +97,10 @@ export default class Gallery extends Component {
         })
       },
       // 删除一条数据后，刷新页面保持筛选数据不变
-      onDeleteItem: (id) => {
+      onDeleteItem: (data) => {
         dispatch({
           type: 'resource/delete',
-          payload: id,
+          payload: data,
           callback: () => {
             dispatch(
               routerRedux.push({

src/routes/Resource/gallery/modal.js

@@ -6,23 +6,6 @@ import { Codes, statuses } from '../../../utils/config';
 
 @Form.create()
 export default class ModalForm extends PureComponent {
-  // static propTypes = {
-  //   item: PropTypes.object,
-  //   form: PropTypes.object,
-  //   onOk: PropTypes.func,
-  //   onCancel: PropTypes.func,
-  // };
-  //
-  // constructor(props) {
-  //   super(props);
-  //   this.state = { item: props.item };
-  // }
-  //
-  // componentWillReceiveProps(nextProps) {
-  //   if (nextProps.item) {
-  //     this.setState({ item: { ...nextProps.item } });
-  //   }
-  // }
 
   // 图片上传成功
   handleSingleUpload = (file, fileName, signature) => {
@@ -62,7 +45,11 @@ export default class ModalForm extends PureComponent {
       if (errors) return;
       const data = { ...getFieldsValue() };
       if (modalType === 'update') {
+        const { status } = item;
         data.id = item.id;
+        data.status = status;
+      } else if (modalType === 'create') {
+        data.status = Codes.CODE_NORMAL;
       }
       onOk(data);
     });

src/routes/Resource/gallery/table.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import moment from 'moment';
 import classnames from 'classnames';
 import queryString from 'query-string';
-import { Popover, Modal, Table, Menu, Icon, Badge } from 'antd';
+import { Divider, Popover, Modal, Table, Menu, Icon, Badge } from 'antd';
 import AnimTableBody from '../../../components/Animation/AnimTableBody';
 import { statuses, Codes } from '../../../utils/config'
 import styles from './table.less';
@@ -13,7 +13,7 @@ export default class TableList extends PureComponent {
   handleOperateItem = (record) => {
     const { onDeleteItem, onRecoverItem } = this.props;
     Modal.confirm({
-      title: `您确定要${record.status === Codes.CODE_NORMAL ? '删除' : '恢复'}该条记录?`,
+      title: `您确定要${record.status === Codes.CODE_NORMAL ? '删除' : '恢复'}该图片?`,
       onOk () {
         if (record.status === Codes.CODE_NORMAL) {
           onDeleteItem({ id: record.id });
@@ -56,16 +56,16 @@ export default class TableList extends PureComponent {
       dataIndex: 'status',
       key: 'status',
       render: (text, record) => {
-        const statusMap = {'NORMAL': 'success', 'DEL': 'error'};
+        const statusMap = {[Codes.CODE_NORMAL]: 'success', [Codes.CODE_DELETE]: 'error'};
         return (<Badge status={statusMap[record.status]} text={statuses[record.status]} />);
       },
       filters: Object.keys(statuses).map(key => ({ text: statuses[key], value: key })),
       filterMultiple: false,
       filteredValue: [curStatus],
     },{
-      title: '添加时间',
-      dataIndex: 'gmtCreated',
-      key: 'gmtCreated',
+      title: '修改时间',
+      dataIndex: 'gmtModified',
+      key: 'gmtModified',
       render: (text, record) => (
         <div>{moment(text).format('YYYY-MM-DD')}</div>
       )
@@ -76,8 +76,8 @@ export default class TableList extends PureComponent {
       render: (text, record) => (
         <div>
           <a onClick={() => onEditItem(record)}>编辑</a>
-          <span className={styles.splitLine} />
-            <a onClick={() => this.handleOperateItem(record)}>{record.status === Codes.CODE_NORMAL ? '删除' : '恢复'}</a>
+          <Divider type="vertical" />
+          <a onClick={() => this.handleOperateItem(record)}>{record.status === Codes.CODE_NORMAL ? '删除' : '恢复'}</a>
         </div>
       )
     }];

src/routes/Resource/gallery/table.less

@@ -76,11 +76,3 @@
     }
   }
 }
-
-.splitLine {
-  background: @border-color-split;
-  display: inline-block;
-  margin: 0 8px;
-  width: 1px;
-  height: 12px;
-}