- 添加订单列表

admin-web/config/proxy/proxy.dev.js

@@ -6,9 +6,9 @@ export default {
     changeOrigin: true,
     pathRewrite: {},
   },
-  '/server/api/': {
+  '/order-api/': {
-    target: 'https://preview.pro.ant.design/',
+    target: 'http://127.0.0.1:18084/',
     changeOrigin: true,
-    pathRewrite: { '^/server': '' },
+    pathRewrite: {},
   },
 };

admin-web/src/components/Dictionary/DictionaryText.js

@@ -14,7 +14,7 @@ export default class DictionaryText extends PureComponent {
           if (dicValues) {
             return dicValues[dicValue];
           }
-          return null;
+          return dicValue;
         }}
       </DictionaryContext.Consumer>
     );

admin-web/src/locales/zh-CN/menu.js

@@ -50,5 +50,6 @@ export default {
   'menu.product.product-spu-add': '商品添加',
   'menu.product.product-category-list': '商品分类',
   // 订单
+  'menu.order': '订单管理',
   'menu.order.order-list': '订单管理',
 };

admin-web/src/models/admin/dictionaryContext.js

@@ -18,8 +18,7 @@ export default {
         const dicKey = item.enumValue;
         const dicTreeItem = {};
         item.values.map(item2 => {
-          dicTreeItem.text = item2.displayName;
+          dicTreeItem[item2.value] = item2.displayName;
-          dicTreeItem.value = item2.value;
           return true;
         });
         dicTreeMap[dicKey] = dicTreeItem;

admin-web/src/models/order/orderList.js

@@ -0,0 +1,43 @@
+import { message } from 'antd';
+import { orderPage, updateOrderItem } from '../../services/order';
+
+export default {
+  namespace: 'orderList',
+
+  state: {
+    list: [],
+  },
+
+  effects: {
+    *queryPage({ payload }, { call, put }) {
+      const response = yield call(orderPage, payload);
+      message.info('查询成功!');
+      yield put({
+        type: 'queryPageSuccess',
+        payload: {
+          list: response.data,
+        },
+      });
+    },
+    *updateOrderItem({ payload }, { call, put }) {
+      const { params } = payload;
+      const response = yield call(updateOrderItem, params);
+      message.info('查询成功!');
+      yield put({
+        type: 'queryPageSuccess',
+        payload: {
+          list: response.data,
+        },
+      });
+    },
+  },
+
+  reducers: {
+    queryPageSuccess(state, { payload }) {
+      return {
+        ...state,
+        ...payload,
+      };
+    },
+  },
+};

admin-web/src/pages/Order/OrderList.jsx

@@ -0,0 +1,240 @@
+import React, { PureComponent } from 'react';
+import moment from 'moment';
+import { connect } from 'dva';
+import {
+  Button,
+  Card,
+  Col,
+  Dropdown,
+  Form,
+  Icon,
+  Input,
+  List,
+  Menu,
+  Modal,
+  Row,
+  Select,
+} from 'antd';
+
+import PageHeaderWrapper from '@/components/PageHeaderWrapper';
+import DictionaryText from '@/components/Dictionary/DictionaryText';
+import dictionary from '@/utils/dictionary';
+
+import styles from './OrderList.less';
+
+const FormItem = Form.Item;
+const SelectOption = Select.Option;
+
+const OrderList = props => {
+  const { list, loading } = props;
+
+  const paginationProps = {
+    showSizeChanger: true,
+    showQuickJumper: true,
+    pageSize: 5,
+    total: 50,
+  };
+
+  const deleteItem = id => {
+    const { dispatch } = props;
+    dispatch({
+      type: 'list/submit',
+      payload: { id },
+    });
+  };
+
+  const handleEditor = currentItem => {
+    const { handleEditorClick } = props;
+    if (handleEditorClick) {
+      handleEditorClick(currentItem);
+    }
+  };
+
+  const handleMoreMenu = (key, currentItem) => {
+    if (key === 'edit') {
+      handleEditor(currentItem);
+    } else if (key === 'delete') {
+      Modal.confirm({
+        title: '删除任务',
+        content: '确定删除该任务吗？',
+        okText: '确认',
+        cancelText: '取消',
+        onOk: () => deleteItem(currentItem.id),
+      });
+    }
+  };
+
+  const ListContent = ({ data }) => (
+    <div className={styles.listContent}>
+      <div className={styles.listContentItem}>
+        <span>金额: {data.price / 100} 元</span>
+        <p>编号: {data.orderNo}</p>
+      </div>
+      <div className={styles.listContentItem}>
+        <span>
+          付款时间: {data.paymentTime ? moment(data.paymentTime).format('YYYY-MM-DD HH:mm') : ''}
+        </span>
+        <p>创建时间：{moment(data.createTime).format('YYYY-MM-DD HH:mm')}</p>
+      </div>
+      <div className={styles.listContentItem}>
+        <span>
+          订单状态: <DictionaryText dicKey={dictionary.ORDER_STATUS} dicValue={data.status} />
+        </span>
+      </div>
+    </div>
+  );
+
+  const MoreBtn = () => (
+    <Dropdown
+      overlay={
+        <Menu onClick={({ key }) => handleMoreMenu(key, props.current)}>
+          <Menu.Item key="edit">编辑</Menu.Item>
+          <Menu.Item key="delete">删除</Menu.Item>
+        </Menu>
+      }
+    >
+      <a>
+        更多 <Icon type="down" />
+      </a>
+    </Dropdown>
+  );
+
+  return (
+    <List
+      size="large"
+      rowKey="id"
+      loading={loading}
+      pagination={paginationProps}
+      dataSource={list}
+      renderItem={item => (
+        <List.Item
+          actions={[
+            <a
+              onClick={e => {
+                e.preventDefault();
+                handleEditor(item);
+              }}
+            >
+              编辑
+            </a>,
+            <MoreBtn current={item} />,
+          ]}
+        >
+          <ListContent data={item} />
+        </List.Item>
+      )}
+    />
+  );
+};
+
+// SearchForm
+const SearchForm = props => {
+  const {
+    form: { getFieldDecorator },
+  } = props;
+
+  const handleFormReset = () => {};
+
+  const handleSearch = () => {};
+
+  return (
+    <Form onSubmit={handleSearch} layout="inline">
+      <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
+        <Col md={8} sm={24}>
+          <FormItem label="规则名称">
+            {getFieldDecorator('name')(<Input placeholder="请输入" />)}
+          </FormItem>
+        </Col>
+        <Col md={8} sm={24}>
+          <FormItem label="使用状态">
+            {getFieldDecorator('status')(
+              <Select placeholder="请选择" style={{ width: '100%' }}>
+                <SelectOption value="0">关闭</SelectOption>
+                <SelectOption value="1">运行中</SelectOption>
+              </Select>
+            )}
+          </FormItem>
+        </Col>
+        <Col md={8} sm={24}>
+          <span className={styles.submitButtons}>
+            <Button type="primary" htmlType="submit">
+              查询
+            </Button>
+            <Button style={{ marginLeft: 8 }} onClick={handleFormReset}>
+              重置
+            </Button>
+          </span>
+        </Col>
+      </Row>
+    </Form>
+  );
+};
+
+@connect(({ orderList, loading }) => ({
+  list: orderList.list,
+  orderList,
+  loading: loading.models.orderList,
+}))
+@Form.create()
+class BasicList extends PureComponent {
+  state = {
+    current: {},
+  };
+
+  componentDidMount() {
+    const { dispatch } = this.props;
+    dispatch({
+      type: 'orderList/queryPage',
+      payload: {
+        pageNo: 0,
+        pageSize: 10,
+      },
+    });
+  }
+
+  handleEditorClick = () => {
+    // this.setState({
+    //   visible: true,
+    //   current: item,
+    // });
+    console.info('edit');
+  };
+
+  handleSubmit = e => {
+    e.preventDefault();
+    const { dispatch, form } = this.props;
+    const { current } = this.state;
+    const id = current ? current.id : '';
+
+    form.validateFields((err, fieldsValue) => {
+      if (err) return;
+      dispatch({
+        type: 'list/submit',
+        payload: { id, ...fieldsValue },
+      });
+    });
+  };
+
+  render() {
+    return (
+      <PageHeaderWrapper>
+        <div className={styles.standardList}>
+          <Card
+            className={styles.listCard}
+            bordered={false}
+            title="订单列表"
+            style={{ marginTop: 24 }}
+            bodyStyle={{ padding: '0 32px 40px 32px' }}
+          >
+            <div className={styles.tableListForm}>
+              <SearchForm {...this.props} />
+            </div>
+            <OrderList {...this.props} handleEditorClick={this.handleEditorClick} />
+          </Card>
+        </div>
+      </PageHeaderWrapper>
+    );
+  }
+}
+
+export default BasicList;

admin-web/src/pages/Order/OrderList.less

@@ -0,0 +1,237 @@
+@import '~antd/lib/style/themes/default.less';
+@import '~@/utils/utils.less';
+
+.standardList {
+  :global {
+    .ant-card-head {
+      border-bottom: none;
+    }
+    .ant-card-head-title {
+      padding: 24px 0;
+      line-height: 32px;
+    }
+    .ant-card-extra {
+      padding: 24px 0;
+    }
+    .ant-list-pagination {
+      margin-top: 24px;
+      text-align: right;
+    }
+    .ant-avatar-lg {
+      width: 48px;
+      height: 48px;
+      line-height: 48px;
+    }
+  }
+  .headerInfo {
+    position: relative;
+    text-align: center;
+    & > span {
+      display: inline-block;
+      margin-bottom: 4px;
+      color: @text-color-secondary;
+      font-size: @font-size-base;
+      line-height: 22px;
+    }
+    & > p {
+      margin: 0;
+      color: @heading-color;
+      font-size: 24px;
+      line-height: 32px;
+    }
+    & > em {
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 1px;
+      height: 56px;
+      background-color: @border-color-split;
+    }
+  }
+  .listContent {
+    display: flex;
+    flex: 1;
+    flex-direction: row;
+    font-size: 0;
+
+    .listContentItem {
+      flex: 1;
+      margin-left: 40px;
+      color: @text-color-secondary;
+      font-size: @font-size-base;
+      vertical-align: middle;
+      > span {
+        line-height: 20px;
+      }
+      > p {
+        margin-top: 4px;
+        margin-bottom: 0;
+        line-height: 22px;
+      }
+    }
+  }
+  .extraContentSearch {
+    width: 272px;
+    margin-left: 16px;
+  }
+}
+
+@media screen and (max-width: @screen-xs) {
+  .standardList {
+    :global {
+      .ant-list-item-content {
+        display: block;
+        flex: none;
+        width: 100%;
+      }
+      .ant-list-item-action {
+        margin-left: 0;
+      }
+    }
+    .listContent {
+      margin-left: 0;
+      & > div {
+        margin-left: 0;
+      }
+    }
+    .listCard {
+      :global {
+        .ant-card-head-title {
+          overflow: visible;
+        }
+      }
+    }
+  }
+}
+
+@media screen and (max-width: @screen-sm) {
+  .standardList {
+    .extraContentSearch {
+      width: 100%;
+      margin-left: 0;
+    }
+    .headerInfo {
+      margin-bottom: 16px;
+      & > em {
+        display: none;
+      }
+    }
+  }
+}
+
+@media screen and (max-width: @screen-md) {
+  .standardList {
+    .listContent {
+      & > div {
+        display: block;
+      }
+      & > div:last-child {
+        top: 0;
+        width: 100%;
+      }
+    }
+  }
+  .listCard {
+    :global {
+      .ant-radio-group {
+        display: block;
+        margin-bottom: 8px;
+      }
+    }
+  }
+}
+
+@media screen and (max-width: @screen-lg) and (min-width: @screen-md) {
+  .standardList {
+    .listContent {
+      & > div {
+        display: block;
+      }
+      & > div:last-child {
+        top: 0;
+        width: 100%;
+      }
+    }
+  }
+}
+
+@media screen and (max-width: @screen-xl) {
+  .standardList {
+    .listContent {
+      & > div {
+        margin-left: 24px;
+      }
+      & > div:last-child {
+        top: 0;
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 1400px) {
+  .standardList {
+    .listContent {
+      text-align: right;
+      & > div:last-child {
+        top: 0;
+      }
+    }
+  }
+}
+
+.standardListForm {
+  :global {
+    .ant-form-item {
+      margin-bottom: 12px;
+      &:last-child {
+        margin-bottom: 32px;
+        padding-top: 4px;
+      }
+    }
+  }
+}
+
+.formResult {
+  width: 100%;
+  [class^='title'] {
+    margin-bottom: 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/services/order.js

@@ -0,0 +1,18 @@
+import { stringify } from '@/utils/request.qs';
+import request from '@/utils/request';
+
+// order
+export async function orderPage(params) {
+  return request(`/order-api/admins/order/page?${stringify(params)}`, {
+    method: 'GET',
+  });
+}
+
+export async function updateOrderItem(params) {
+  return request(`/order-api/admins/order_item/update?${stringify(params)}`, {
+    method: 'PUT',
+    body: {
+      ...params,
+    },
+  });
+}

admin-web/src/utils/dictionary.js

@@ -0,0 +1,8 @@
+// 字典定义
+
+const DictionaryConstants = {
+  GENDER: 'gender',
+  ORDER_STATUS: 'order_status',
+};
+
+export default DictionaryConstants;