ゼロから、簡単なショッピングプラットフォームを構築します（10）：
https ：//blog.csdn.net/time_____/article/details/108442619
プロジェクトのソースコード（継続的な更新）：https：//gitee.com/DieHunter/myCode/ツリー/マスター/ショッピングの
記事は、前の記事の注文管理バックエンドインターフェイスに従って、フロントエンド機能を実装します。主な機能は、新しい注文、注文リスト、注文の削除、注文ステータスの変更です。
フロントエンド：
- まず、新しい注文機能を実装し、ユーザーと製品を追加する以前の方法に従っていくつかのコードを変更し、送信されたフォームを変更します。注文に使用できるAntDフォームのネストされたフィールドを動的に追加または削除する機能があります。製品の増減は、
Form.Listを使用して、操作する配列と操作モードオブジェクト（追加：追加、削除：削除、移動：移動）の2つのパラメーターを持つレンダリング関数を提供します。
効果を達成する<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構造、データ構造は次のとおりです。
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)(); }
- 新しい機能が完了すると、前のテーブル表示と同じ注文リストの表示機能が以下で実現されます。さまざまなパラメータ（フォームフィールドと構成）がテーブルコンポーネントに渡され、さまざまなテーブル表示の効果が得られます。これが埋め込まれたテーブルです。問題のセット。各注文は複数の異なる製品に対応しているため、フロントエンド効果は次のように
なります。ここに含まれるサブテーブルは、新しいテーブルサブコンポーネントで表示でき、テーブルコンポーネントの下に新しいコンポーネントが作成されます。注文で購入したアイテムのリストを表示するために使用されるexpandTab.jsという名前
展開可能な属性が新しい属性であるテーブルコンポーネントを調整し、注文リストの表示ステータスを注文かどうかで判断します。showOrderItem関数の機能は、サブテーブルを生成することです。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 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関数（新しいテーブルサブコンポーネントを生成します）
残りの機能は、機能、製品、ユーザー管理と同じです。showOrderItem = (record) => { return ( <Table rowKey={(record) => record._id} scroll={ { x: 1000 }} columns={new expandTab(this)} dataSource={record.shopList} pagination={false} ></Table> ); }; - 注文ステータスを変更して注文を削除します。注文を削除するには、上記で生成されたテーブルにボタンを直接追加して、メインインターフェイスで削除イベントを実行します。clickHandler関数は以前に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(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; } }
これらのメソッドを、子コンポーネントが呼び出す子コンポーネントの部分メソッドとして親コンポーネントのプロパティにバインドします。順序の変更は、削除と同じです。次の効果が得られます。変更時にドロップダウンリスト変更イベントを追加する必要があり、clickHandler関数も実行されます。インターフェイスを介してバックエンドに渡します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)(); };
- 上記は、新しいフロントエンド注文管理のすべての内容です
次号では、モールのフロントエンドセクションの紹介を開始し、後でパッケージ化して、Appおよびuniappと組み合わせて使用します。