从零开始，搭建一个简单的购物平台（十一）

从零开始，搭建一个简单的购物平台（十）：
https://blog.csdn.net/time_____/article/details/108442619
项目源码（持续更新）：https://gitee.com/DieHunter/myCode/tree/master/shopping
这篇文章接着上篇的订单管理后端接口，对前端功能进行实现，主要功能有：新增订单，订单列表，订单删除，订单状态修改。

前端：

• 首先先实现新增订单功能，照着之前的新增用户和商品的方法修改一些代码，提交的form表单也要修改一下，AntD表单中有一个动态增减嵌套字段的功能，可以用于订单商品的增减
  
  使用Form.List提供一个渲染函数，其中有两个参数，分别是需要操作的数组和操作方式对象（add：新增，remove：删除，move：移动）

  <Form.List name="shopList">
            {(shopList, { add, remove }) => (
              <div>
                {shopList.map((field) => (
                  <Row gutter={20} key={field.key}>
                    <Col span={10}>
                      <Form.Item
                        {...field}
                        name={[field.name, "shopName"]}
                        fieldKey={[field.fieldKey, "shopName"]}
                        rules={[{ required: true, message: "请输入商品名称" }]}
                      >
                        <Input placeholder="请输入商品名称" allowClear />
                      </Form.Item>
                    </Col>
                    <Col span={8}>
                      <Form.Item
                        {...field}
                        name={[field.name, "shopCount"]}
                        fieldKey={[field.fieldKey, "shopCount"]}
                        rules={[{ required: true, message: "请输入购买数量" }]}
                      >
                        <InputNumber
                          style={{ width: "100%" }}
                          min={1}
                          max={99}
                          placeholder="数量"
                          allowClear
                        />
                      </Form.Item>
                    </Col>
                    <Col span={2}>
                      <MinusCircleOutlined
                        onClick={() => {
                          remove(field.name);
                        }}
                      />
                    </Col>
                  </Row>
                ))}
                <Row gutter={20}>
                  <Col span={20}>
                    <Button
                      type="dashed"
                      onClick={() => {
                        add();
                      }}
                      style={{ width: "100%" }}
                    >
                      <PlusOutlined /> 添加商品
                    </Button>
                  </Col>
                </Row>
              </div>
            )}
          </Form.List>

  实现效果
  
• 实现提交功能并对接接口，提交函数与之前的新增用户和新增商品一致，只是参数不同，所以可以直接复用，提交的函数和shopList结构以及data结构如下

  sendData(val) {
      console.log(val.shopList)
      if (!val.shopList || !val.shopList.length) {
        message.warning("请选择至少一件商品");
        return;
      }
      val.token = this.$utils.getStorage(StorageName.token);
      console.log(val)
      Bussiness.sendInfo.bind(this, ServerApi.order.addOrder, val)();
    }

  
  
• 新增功能完成后，下面实现订单列表的展示功能，与之前的表格展示相同，在table组件中传入不同的参数（即表单字段及配置）以实现不同表格显示的效果，这里有一个表格嵌套的问题，每一个订单对应着不同的多个商品，所以前端的效果应该是这样的
  
  这里涉及到的子表格可以用一个新的表格子组件来显示，在table组件下新建一个新的组件，命名expandTab.js，用于显示订单中购买的商品列表

  import React from "react";
  import config from "../../config/config";
  import ShopType from "../../config/shopType";
  const { shopType } = ShopType;
  const { FilePath } = config;
  export default class expandTab {
    constructor(_this) {
      return [
        {
          align: "center",
          title: "商品名",
          key: "shopName",
          dataIndex: "shopName",
          width: 50,
        },
        {
          align: "center",
          title: "商品类型",
          key: "shopType",
          dataIndex: "shopType",
          width: 50,
          render: (text) => {
            return <div>{shopType[text].name}</div>;
          },
        },
        {
          align: "center",
          title: "商品图片",
          key: "shopPic",
          dataIndex: "shopPic",
          width: 60,
          render: (imgPath) => {
            return (
              <img
                src={FilePath + imgPath}
                alt=""
                style={{ width: 60, margin: "0 auto" }}
              />
            );
          },
        },
        {
          align: "center",
          title: "单价",
          key: "shopPrice",
          dataIndex: "shopPrice",
          width: 30,
          render: (price) => {
            return <div>{price + "元"}</div>;
          },
        },{
          align: "center",
          title: "购买数量",
          key: "shopCount",
          dataIndex: "shopCount",
          width: 30,
        },
      ];
    }
  }
  

  在Table组件中做一个适配，其中expandable属性是新增的属性，根据是否是order来判断订单列表显示状态，showOrderItem函数的作用是生成子表格

          <Table
            scroll={{ x: 1000 }}
            rowKey={(record) => record._id}
            columns={this.state.columns}
            dataSource={this.state.list}
            expandable={
              this.state.tableType === "order"
                ? {
                    indentSize: 0,
                    expandedRowRender: this.showOrderItem,
                  }
                : null
            }
            pagination={false}
          ></Table>

  showOrderItem函数（生成新的Table子组件） 

    showOrderItem = (record) => {
      return (
        <Table
          rowKey={(record) => record._id}
          scroll={{ x: 1000 }}
          columns={new expandTab(this)}
          dataSource={record.shopList}
          pagination={false}
        ></Table>
      );
    };

  其余函数与功能和商品及用户管理相同
• 修改订单状态和删除订单，删除订单可以直接在上述生成的表格中添加按钮，执行到主界面的删除事件，在table.js中之前写过一个clickHandler函数

  {
          align: "center",
          title: "操作",
          width: 50,
          fixed: "right",
          render: (record) => {
            return (
              <div>
                <Popconfirm
                  title="是否删除？"
                  onConfirm={_this.clickHandler.bind(_this, record, "delete")}
                  okText="是"
                  cancelText="否"
                  disabled={record.userType === "admin" ? true : false}
                >
                  <Button
                    type="danger"
                    disabled={record.userType === "admin" ? true : false}
                  >
                    删除
                  </Button>
                </Popconfirm>
              </div>
            );
          },
        },

  clickHandler函数（用于所有对表格数据操作的汇总，再分配到主页面中，触发对应事件）：

   clickHandler(record, type) {
      switch (type) {
        case "add": //添加
          this.props.addInfo();
          break;
        case "change": //修改
          this.props.changeInfo(record);
          break;
        case "delete": //删除
          this.props.deleteInfo(record);
          break;
        case "allow": //冻结
          this.props.freezeInfo(record);
          break;
        case "state": //订单状态
          this.props.orderState(...arguments);
          break;
        default:
          break;
      }
    }

  以下是订单管理主页面中的方法：

    addOrder = () => {//新增订单，触发bussiness中的新增接口
      Events.emit(EventName.ADD_ORDER, FormDefaultVal.shop);
      this.drawerChild.showDrawer("addOrder");
    };
    changePage = (pageConfig) => {//分页
      this.setState({ pageConfig });
      this.getList();
    };
    orderState = (data, type, state) => {//修改订单状态，触发bussiness中的修改接口
      data.token = this.$utils.getStorage(StorageName.token);
      data.orderState = state;
      Bussiness.orderState.bind(this, ServerApi.order.updateOrder, data)();
    };
    getList = () => {//获取订单列表，触发bussiness中的获取列表函数
      Bussiness.getInfo.bind(this, ServerApi.order.orderList)();
    };
    deleteOrder = (record) => {//删除订单，触发bussiness中的删除接口
      Bussiness.delInfo.bind(this, ServerApi.order.delOrder, record)();
    };

  将这些方法绑定到父组件属性中作为子组件局部方法，以供子组件调用，修改订单与删除相同，达到以下效果，要在修改时添加下拉列表修改事件，同样执行clickHandler函数，并且将数据通过接口传到后端
  
• 以上就是新增的订单管理前端部分所有内容

下一期将开始商城的前端板块介绍，后期将结合App和uniapp打包及使用