- 订单售后退货流程 未完成

admin-web/src/pages/OrderRefunds/OrderRefundsList.js

+import React, { PureComponent } from 'react';
+import { connect } from 'dva';
+import { Card, Tabs } from 'antd';
+import PageHeaderWrapper from '../../components/PageHeaderWrapper';
+import TableSearch from './TableSearch';
+import styles from '../List/TableList.less';
+
+/**
+ * 订单售后列表
+ */
+@connect(({ loading }) => ({
+  loading: loading.models.orderList,
+}))
+class OrderRefundsList extends PureComponent {
+  handleTabsChange = value => {
+    console.log(value);
+  };
+
+  render() {
+    return (
+      <PageHeaderWrapper>
+        <Card>
+          <div className={styles.tableListForm}>
+            <TableSearch />
+          </div>
+
+          <Tabs defaultActiveKey={null} onChange={this.handleTabsChange}>
+            <Tabs.TabPane tab="全部" key={null} />
+            <Tabs.TabPane tab="待处理" key={1} />
+            <Tabs.TabPane tab="已处理" key={2} />
+            <Tabs.TabPane tab="已完成" key={4} />
+          </Tabs>
+        </Card>
+      </PageHeaderWrapper>
+    );
+  }
+}
+
+export default OrderRefundsList;

admin-web/src/pages/OrderRefunds/OrderRefundsList.less

+@import '../../../node_modules/antd/lib/style/themes/default.less';
+@import '~@/utils/utils.less';
+
+.tableList {
+  .tableListOperator {
+    margin-bottom: 16px;
+    button {
+      margin-right: 8px;
+    }
+  }
+}
+
+.tableListForm {
+  :global {
+    .ant-form-item {
+      display: flex;
+      margin-right: 0;
+      margin-bottom: 24px;
+      > .ant-form-item-label {
+        width: auto;
+        padding-right: 8px;
+        line-height: 32px;
+      }
+      .ant-form-item-control {
+        line-height: 32px;
+      }
+    }
+    .ant-form-item-control-wrapper {
+      flex: 1;
+    }
+  }
+  .submitButtons {
+    display: block;
+    margin-bottom: 24px;
+    white-space: nowrap;
+  }
+}
+
+@media screen and (max-width: @screen-lg) {
+  .tableListForm :global(.ant-form-item) {
+    margin-right: 24px;
+  }
+}
+
+@media screen and (max-width: @screen-md) {
+  .tableListForm :global(.ant-form-item) {
+    margin-right: 8px;
+  }
+}

admin-web/src/pages/OrderRefunds/TableSearch.js

+import React from 'react';
+import { Button, Col, Form, Input, Row, DatePicker } from 'antd';
+
+const FormItem = Form.Item;
+
+/**
+ * table 查询
+ *
+ * @type {React.ComponentClass<RcBaseFormProps & Omit<FormComponentProps, keyof FormComponentProps>>}
+ */
+const TableSearch = Form.create()(props => {
+  const { getFieldDecorator } = props.form;
+  console.log('props.form', props.form);
+
+  function onSubmit() {}
+
+  function handleFormReset() {}
+
+  return (
+    <Form onSubmit={onSubmit} layout="inline">
+      <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
+        <Col md={8} sm={24}>
+          <FormItem label="订单id">
+            {getFieldDecorator('id')(<Input placeholder="请输入订单id" />)}
+          </FormItem>
+        </Col>
+        <Col md={8} sm={24}>
+          <FormItem label="订单号">
+            {getFieldDecorator('orderNo')(<Input placeholder="请输入订单号" />)}
+          </FormItem>
+        </Col>
+      </Row>
+
+      <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
+        <Col md={8} sm={24}>
+          <FormItem label="创建时间">
+            {getFieldDecorator('createTime')(<DatePicker.RangePicker />)}
+          </FormItem>
+        </Col>
+        <Col md={8} sm={24}>
+          <span>
+            <Button type="primary" htmlType="submit">
+              查询
+            </Button>
+            <Button style={{ marginLeft: 8 }} onClick={handleFormReset}>
+              重置
+            </Button>
+          </span>
+        </Col>
+      </Row>
+    </Form>
+  );
+});
+
+export default TableSearch;