Merge branch 'feature/orderlist_setting' into uat

src/pages/orderList/index.scss

+.analy-content{
+  .operate-content{
+    display: flex;
+    justify-content: space-between;
+    .form-item{
+      flex: 1;
+    }
+    .search-group{
+      width: 200px;
+      margin-left: 30px;
+    }
+  }
+  
+  .export{
+    display: flex;
+    justify-content: flex-end;
+  }
+}

src/pages/orderList/index.tsx

@@ -25,6 +25,10 @@ interface FilterData {
   current?: number;
   limit?: number;
 }
+interface ITableColumns {
+  column: string,
+  title: string
+}
 
 const OrderList: React.FC = () => {
   const [class_name, set_className] = useState('');
@@ -36,6 +40,7 @@ const OrderList: React.FC = () => {
   const [totalCount, set_totalCount] = useState(0);
   const [current, set_current] = useState(1);
   const [limit, set_limit] = useState(PAGE_SIZE);
+  const [tableColunmSetting, setTableColunmSetting] = useState<Array<string>>([])
 
   const [form] = Form.useForm();
   const formItemLayout = {
@@ -60,8 +65,28 @@ const OrderList: React.FC = () => {
       current,
       limit
     });
+    getTableColumnSetting()
   }, []);
 
+  const getTableColumnSetting = () => {
+    api(`/51business/api/course/back/column/all`, {
+      type: 'GET',
+      data: {}
+    }).then(res => {
+      console.log(res)
+      let list: Array<string> = []
+      if (res && res.list && res.list.length > 0) {
+        res.list.map((item: ITableColumns) => {
+          list.push(item.column)
+          return null
+        })
+      } else {
+        list = ['order_no', 'class_name', 'pay', 'pay_time']
+      }
+      setTableColunmSetting(list)
+    });
+  }
+
   const getList = ({
     class_name = '',
     user_name = '',
@@ -154,8 +179,8 @@ const OrderList: React.FC = () => {
     <BasicPage>
       <div className="analy-content">
         <Form {...formItemLayout} form={form} onFinish={onFinish}>
-          <Row {...{ gutter: { xs: 8, sm: 16, md: 24 } }}>
-            <Col span="6">
+          <div className="operate-content">
+            <div className="form-item">
               <FormItem label="已购课程名称：" name="class_name">
                 <Input
                   placeholder="请输入"
@@ -164,8 +189,8 @@ const OrderList: React.FC = () => {
                   }}
                 />
               </FormItem>
-            </Col>
-            <Col span="6">
+            </div>
+            <div className="form-item">
               <FormItem label="用户姓名：" name="userName">
                 <Input
                   placeholder="请输入"
@@ -174,8 +199,8 @@ const OrderList: React.FC = () => {
                   }}
                 />
               </FormItem>
-            </Col>
-            <Col span="6">
+            </div>
+            <div className="form-item">
               <FormItem label="下单时间：" name="dates">
                 <RangePicker
                   locale={locale}
@@ -184,22 +209,8 @@ const OrderList: React.FC = () => {
                   }}
                 />
               </FormItem>
-            </Col>
-          </Row>
-          <Row
-            style={{ padding: '12px 0' }}
-            {...{ gutter: { xs: 8, sm: 16, md: 24 } }}
-          >
-            <Col md={12} sm={24}>
-              <Button
-                type="primary"
-                style={{ marginRight: '12px' }}
-                onClick={download}
-              >
-                导出订单信息表
-              </Button>
-            </Col>
-            <Col md={12} sm={24} style={{ textAlign: 'right' }}>
+            </div>
+            <div className="search-group">
               <Form.Item>
                 <Button
                   type="primary"
@@ -207,13 +218,24 @@ const OrderList: React.FC = () => {
                   style={{ marginRight: '12px' }}
                 >
                   查询
-                </Button>
+            </Button>
                 <Button htmlType="button" onClick={resetData}>
                   重置
-                </Button>
+            </Button>
               </Form.Item>
-            </Col>
-          </Row>
+            </div>
+          </div>
+
+          <div className="export">
+            <Button
+              type="primary"
+              style={{ marginRight: '30px' }}
+              onClick={download}
+            >
+              导出订单信息表
+          </Button>
+          </div>
+
         </Form>
       </div>
       <List
@@ -222,6 +244,7 @@ const OrderList: React.FC = () => {
         current={current}
         totalCount={totalCount}
         handleTableChange={handleTableChange}
+        tableColunmSetting={tableColunmSetting}
       />
     </BasicPage>
   );

src/pages/orderList/list.tsx

 import React from 'react';
 import { Table } from 'antd';
-const { Column } = Table;
+import tableColumnsSetting from './tableColumnsSetting'
+
 
 interface DeatilI {
   id: string | number;
@@ -11,81 +12,32 @@ interface DeatilI {
   pay_time: string;
 }
 
-interface ColsI {
-  title: string;
-  dataIndex: string;
-  key: string | number;
-}
-
 interface DataSourceI {
   dataSource: DeatilI[];
   pageSize: number;
   current: number;
   totalCount: number;
   handleTableChange: any;
+  tableColunmSetting: Array<string>
+}
+interface IColumnsValue {
+  title: string;
+  dataIndex: string;
+  key: string | number;
+  render?: Function
 }
 
-const columns = [
-  {
-    title: '订单号',
-    dataIndex: 'order_no',
-    key: 'order_no'
-  },
-  {
-    title: '已购课程名称',
-    dataIndex: 'class_name',
-    key: 'class_name'
-  },
-  {
-    title: '用户姓名',
-    dataIndex: 'address',
-    key: 'address',
-    render: (row: any) => {
-      return <span>{row.name}</span>;
-    }
-  },
-  {
-    title: '收货地址',
-    dataIndex: 'address',
-    key: 'address',
-    render: (row: any) => {
-      return (
-        <span>
-          {row.province}
-          {row.city}
-          {row.area}
-          {row.address}
-        </span>
-      );
-    }
-  },
-  {
-    title: '联系电话',
-    dataIndex: 'address',
-    key: 'address',
-    render: (row: any) => {
-      return <span>{row.phone}</span>;
-    }
-  },
-  {
-    title: '付款金额（元）',
-    dataIndex: 'pay',
-    key: 'pay'
-  },
-  {
-    title: '下单时间',
-    dataIndex: 'pay_time',
-    key: 'pay_time'
-  }
-];
-
-const Cols = (list: ColsI[]) => {
-  return list.map((item: any) => {
-    return <Column {...item} key={item.key} />;
-  });
-};
 
 const List: React.FC<DataSourceI> = props => {
+  const columns: Array<any> = []
+  props.tableColunmSetting.map((item) => {
+    for (let key in tableColumnsSetting) {
+      if (key === item) {
+        columns.push(tableColumnsSetting[key])
+      }
+    }
+    return null
+  })
   return (
     <div style={{ padding: '30px' }}>
       <Table
@@ -100,8 +52,9 @@ const List: React.FC<DataSourceI> = props => {
           showTotal: (total, range) =>
             `每页${range[1] - range[0] + 1}条，总计${total} 条`
         }}
+        columns={columns}
       >
-        {Cols(columns)}
+
       </Table>
     </div>
   );

src/pages/orderList/tableColumnsSetting.tsx

+import React from 'react'
+interface IObjectStringKeys {
+  [key: string]: IColumnsValue;
+}
+interface IColumnsValue {
+  title: string;
+  dataIndex: string;
+  key: string | number;
+  render?: Function
+}
+const TableColumnsSetting: IObjectStringKeys = {
+  order_no: {
+    title: '订单号',
+    dataIndex: 'order_no',
+    key: 'order_no'
+  },
+  class_name: {
+    title: '已购课程名称',
+    dataIndex: 'class_name',
+    key: 'class_name'
+  },
+  name: {
+    title: '用户姓名',
+    dataIndex: 'address',
+    key: 'name',
+    render: (row: any) => {
+      return <span>{row.name ? row.name : '--'}</span>;
+    }
+  },
+  address_name: {
+    title: '用户姓名(收货人)',
+    dataIndex: 'address',
+    key: 'name',
+    render: (row: any) => {
+      return <span>{row.name ? row.name : '--'}</span>;
+    }
+  },
+  address: {
+    title: '收货地址',
+    dataIndex: 'address',
+    key: 'address',
+    render: (row: any) => {
+      const address = `${row.province ? row.province : ''}${row.city ? row.city : ''}${row.area ? row.area : ''}${row.address ? row.address : ''}`
+      return (
+        <span>
+          {
+            address ? address : '--'
+          }
+        </span>
+      );
+    }
+  },
+  phone: {
+    title: '联系电话',
+    dataIndex: 'address',
+    key: 'phone',
+    render: (row: any) => {
+      return <span>{row.phone ? row.phone : '--'}</span>;
+    }
+  },
+  pay: {
+    title: '付款金额（元）',
+    dataIndex: 'pay',
+    key: 'pay'
+  },
+  pay_time: {
+    title: '下单时间',
+    dataIndex: 'pay_time',
+    key: 'pay_time'
+  },
+  child_name: {
+    title: '孩子姓名',
+    dataIndex: 'columns',
+    key: 'child_name',
+    render: (row: any) => {
+      return <span>{row.child_name ? row.child_name : '--'}</span>;
+    }
+  },
+  child_age: {
+    title: '孩子年龄',
+    dataIndex: 'columns',
+    key: 'child_age',
+    render: (row: any) => {
+      return <span>{row.child_age ? row.child_age : '--'}</span>;
+    }
+  },
+  child_grade: {
+    title: '孩子年级',
+    dataIndex: 'columns',
+    key: 'child_grade',
+    render: (row: any) => {
+      return <span>{row.child_grade ? row.child_grade : '--'}</span>;
+    }
+  },
+  city: {
+    title: '所在城市',
+    dataIndex: 'columns',
+    key: 'city',
+    render: (row: any) => {
+      return <span>{row.city ? row.city : '--'}</span>;
+    }
+  }
+}
+
+export default TableColumnsSetting
\ No newline at end of file