新增收货单功能

src/components/BaseInfo/BaseInfo.tsx

-import { Card } from 'antd';
+import { Card, Col, Row } from 'antd';
 import React from 'react';
 
 interface BaseInfoPorps {
@@ -33,13 +33,13 @@ function BaseInfoItem({ label, children }: {
   children: JSX.Element | string | React.ReactNode
 }) {
   return (
-    <div className='base_info_item flex text-lg'>
-      <div className='label flex-4 flex items-center flex-grow-0 w-100 text-gray-400'>
-        {label}
-      </div>
-      <div className='value flex items-center flex-auto'>
-        {typeof children === 'string' ? <span>{children}</span> : children}
-      </div>
+    <div className='base_info_item'>
+      <Row>
+        <Col span={4}>{label}</Col>
+        <Col span={20}>
+          {typeof children === 'string' ? <div>{children}</div> : children}
+        </Col>
+      </Row>
     </div>
   )
 }

src/components/FormItem/FormItem.tsx

@@ -2,7 +2,11 @@ import { Form, FormItemProps } from "antd";
 
 function FormItem<values = any>(prosp: FormItemProps<values>) {
   return (
-    <Form.Item {...prosp} style={{ margin: 0 }} className="w-full" />
+    <Form.Item
+      labelAlign="left"
+      labelCol={{ span: 4 }}
+      wrapperCol={{ span: 20 }}
+      {...prosp} className="w-full" />
   );
 }
 

src/pages/order/assets/context/harver-material.tsx

+import { Input } from 'antd';
+import React, { useCallback, useContext, useState } from 'react';
+import { HarvestMaterialMock } from '../mock/HarvestMaterialMock';
+
+/**
+ * HarvestMaterial table dataSource context,只限制使用HarvestMaterial Context
+ */
+export const HarvestMaterialContext = React.createContext({
+  dataSource: HarvestMaterialMock
+})
+
+export const HarvestMaterialContextProvider = HarvestMaterialContext.Provider
+export const HarvestMaterialContextConsumer = HarvestMaterialContext.Consumer
+
+/**
+ * 
+ * @param props Table修个的时候，需要参数
+ * @returns 
+ */
+export function HarvestMaterialInput(props: {
+  value: any, //input 显示的值
+  index: number // table 当前的 index下标
+  keyUp: string  // dataSource 对应的row key
+}) {
+
+  const context = useContext(HarvestMaterialContext);
+  const { value, index, keyUp } = props;
+  const [inputVal, setInputVal] = useState<any>(value)
+
+  const handleChange = (e) => {
+    const { dataSource } = context;
+    const targetVal = e.target.value
+    dataSource[index][keyUp] = targetVal
+    context.dataSource = dataSource;
+    setInputVal(targetVal)
+  }
+
+  return <Input value={inputVal} onChange={handleChange} />
+}
\ No newline at end of file

src/pages/order/assets/context/index.ts

+export * from './harver-material';
\ No newline at end of file

src/pages/order/assets/handles/HandleFormSubmit.ts

+import { FormInstance, message } from "antd"
+
+
+export class HandleFormSubmit {
+
+  #form: FormInstance
+  #tableData: any[]
+
+  constructor(form: FormInstance) {
+    this.#form = form
+  }
+
+  getTableData() {
+    return this.#tableData;
+  }
+
+  getSubmitRequest(): (vals: any) => Promise<any> {
+    return () => Promise.resolve('');
+  }
+
+  setTableData(tableData) {
+    this.#tableData = tableData;
+  }
+
+  handleBeforeFields(): boolean {
+    return false
+  }
+
+  handleBeforeRequestParamas(...args): any {
+    return {};
+  }
+
+  validateFormFields() {
+    return this.#form.validateFields().then(values => {
+      var params = this.handleBeforeRequestParamas(values, this.getTableData());
+      return this.getSubmitRequest()(params)
+    })
+  }
+
+  submit() {
+    if (this.handleBeforeFields()) return;
+    return this.validateFormFields()
+  }
+
+}
+
+export class ReceivingNoteAddService extends HandleFormSubmit {
+  handleBeforeFields(): boolean {
+    let b = this.getTableData().some((v) => Number(v.ConsigneeNum) < v.DeliveryNum)
+    if (b) {
+      message.error('收货数量不能少于送货数量')
+    }
+    return b;
+  }
+
+  handleBeforeRequestParamas(...args: any[]) {
+    let result: any = {};
+    result = args[0]
+
+    result.table = args[1].map(v => {
+      return {
+        MaterialNo: v.MaterialNo,
+        ConsigneeNum: Number(v.ConsigneeNum)
+      }
+    })
+
+    return result;
+  }
+
+  getSubmitRequest(): (vals: any) => Promise<any> {
+    return (vals: any) => Promise.resolve(vals)
+  }
+
+}
+

src/pages/order/assets/mock/HarvestMaterialMock.ts

@@ -23,7 +23,7 @@ export const HarvestMaterialMock = [
     OrderCreatedAt: "OrderCreatedAt",
     OredrNum: "OredrNum",
     DeliveryNum: 1000,
-    ConsigneeNum: "ConsigneeNum",
+    ConsigneeNum: 1000,
   },
   {
     MaterialNo: "1",
@@ -36,7 +36,7 @@ export const HarvestMaterialMock = [
     OrderCreatedAt: "OrderCreatedAt",
     OredrNum: "OredrNum",
     DeliveryNum: 1000,
-    ConsigneeNum: "ConsigneeNum",
+    ConsigneeNum: 1000,
   },
   {
     MaterialNo: "1",
@@ -49,7 +49,7 @@ export const HarvestMaterialMock = [
     OrderCreatedAt: "OrderCreatedAt",
     OredrNum: "OredrNum",
     DeliveryNum: 1000,
-    ConsigneeNum: "ConsigneeNum",
+    ConsigneeNum: 1000,
   },
   {
     MaterialNo: "1",
@@ -62,6 +62,6 @@ export const HarvestMaterialMock = [
     OrderCreatedAt: "OrderCreatedAt",
     OredrNum: "OredrNum",
     DeliveryNum: 1000,
-    ConsigneeNum: "ConsigneeNum",
+    ConsigneeNum: 1000,
   }
-];
\ No newline at end of file
+];

src/pages/order/constants/page-table-column.tsx

-import { Input } from "antd";
+import { HarvestMaterialInput } from "../assets/context";
 import { BrandColumn, ClassColumn, ConsigneeNumColumn, DeliveryNumColumn, MaterialNameColumn, MaterialNoColumn, OrderCreatedAtColumn, OrderNoColumn, OredrNumColumn, UntilColumn } from "./table-column";
 
 export const DeliveryNoteAddFromTableColumn = [
@@ -13,8 +13,12 @@ export const DeliveryNoteAddFromTableColumn = [
   DeliveryNumColumn,
   {
     ...ConsigneeNumColumn,
-    width: 100,
-    render: (_, rcode) => rcode.ConsigneeNum,
+    width: 140,
+    render: (_, rcode, index) => {
+      return (
+        <HarvestMaterialInput value={rcode.DeliveryNum} index={index} keyUp="ConsigneeNum" />
+      )
+    },
     editable: true,
   }
 ]

src/pages/order/receivingNote/deliveryNoteManage/add.tsx

 import AnchorPage, { AnchorsItem } from "@/components/AnchorPage"
 import { BaseInfo } from "@/components/BaseInfo"
-import { useState } from "react"
+import { useContext, useState } from "react"
 import {
   BillsInfo, DeliveryInfo, LogisticsInfo, Harvest, HarvestMaterial,
   ReceiptAddLabel, ReceiptAbstractLabel, SupplyMembersLabel, NoteLabel, DeliveryTimeLabel,
   ConsigneeLabel, DeliveryAddrLabel, DeliveryOrderNoLabel, ConsigneePhoneLabel, ConsigneeTimeLabel, LogisticsCompanyLabel, LogisticsCarNoLabel, LogisticsNoLabel
 } from '../../constants'
-import { DatePicker, Form, Input, Table } from 'antd'
+import { Button, DatePicker, Form, Input, message, Table } from 'antd'
 import { FormItem } from '@/components/FormItem'
 import { DeliveryNoteAddFromTableColumn } from "../../constants/page-table-column"
 import { HarvestMaterialMock } from "../../assets/mock/HarvestMaterialMock"
+import { HarvestMaterialContext, HarvestMaterialContextProvider } from '../../assets/context'
+import { ReceivingNoteAddService } from "../../assets/handles/HandleFormSubmit"
 
+const { useForm } = Form;
 
 function DeliveryNoteAddForm() {
 
+  const [harvestMaterial, setHarvestMaterial] = useState(() => useContext(HarvestMaterialContext))
+
   const [anchors, setAnchors] = useState<AnchorsItem[]>(() => {
     return [
       BillsInfo,
@@ -24,47 +29,64 @@ function DeliveryNoteAddForm() {
     ]
   })
 
-  const [harvestMaterial, setHarvestMaterial] = useState(() => HarvestMaterialMock)
+  const [form] = useForm()
+
+  const service = new ReceivingNoteAddService(form)
+  service.setTableData(harvestMaterial.dataSource)
+
+  function handleSubmit() {
+    service.submit().then(res => {
+      console.log(res)
+    })
+  }
 
   return (
     <AnchorPage title={ReceiptAddLabel}
-      anchors={anchors}>
+      anchors={anchors}
+      extra={
+        <Button onClick={() => handleSubmit()}>
+          提交
+        </Button>
+      }
+    >
+      <Form form={form}>
+        <BaseInfo title={BillsInfo.name} id={BillsInfo.key}>
 
-      <BaseInfo title={BillsInfo.name} id={BillsInfo.key}>
-        <BaseInfo.BaseInfoItem label={ReceiptAbstractLabel}>
-          <FormItem>
+          <FormItem label={ReceiptAbstractLabel} name="ReceiptAbstractLabel" rules={[
+            { required: true }
+          ]}>
             <Input />
           </FormItem>
-        </BaseInfo.BaseInfoItem>
-        <BaseInfo.BaseInfoItem label={SupplyMembersLabel}>
-          <FormItem>
+
+          <FormItem label={SupplyMembersLabel} name="SupplyMembersLabel" rules={[
+            { required: true }
+          ]}>
             <Input />
           </FormItem>
-        </BaseInfo.BaseInfoItem>
-        <BaseInfo.BaseInfoItem label={NoteLabel}>
-          <FormItem>
+
+          <FormItem label={NoteLabel} name="NoteLabel" rules={[
+            { required: true }
+          ]}>
             <Input />
           </FormItem>
-        </BaseInfo.BaseInfoItem>
-      </BaseInfo>
 
-      <BaseInfo title={Harvest.name} id={Harvest.key}>
-        <BaseInfo.BaseInfoItem label={ConsigneeTimeLabel}>
-          <FormItem>
+        </BaseInfo>
+
+        <BaseInfo title={Harvest.name} id={Harvest.key}>
+          <FormItem label={ConsigneeTimeLabel}>
             <DatePicker className="w-full" />
           </FormItem>
-        </BaseInfo.BaseInfoItem>
-        <BaseInfo.BaseInfoItem label={ConsigneeLabel}>
-          <FormItem>
+
+          <FormItem label={ConsigneeLabel}>
             <Input />
           </FormItem>
-        </BaseInfo.BaseInfoItem>
-        <BaseInfo.BaseInfoItem label={ConsigneePhoneLabel}>
-          <FormItem>
+
+          <FormItem label={ConsigneePhoneLabel}>
             <Input />
           </FormItem>
-        </BaseInfo.BaseInfoItem>
-      </BaseInfo>
+        </BaseInfo>
+
+      </Form>
 
       <BaseInfo title={DeliveryInfo.name} id={DeliveryInfo.key}>
         <BaseInfo.BaseInfoItem label={DeliveryOrderNoLabel}>
@@ -72,7 +94,7 @@ function DeliveryNoteAddForm() {
         </BaseInfo.BaseInfoItem>
         <BaseInfo.BaseInfoItem label={DeliveryAddrLabel}>
           <div className="#LogisticsAddr">
-            <div className="#LogisticsAddrDisc leading-10">
+            <div className="#LogisticsAddrDisc">
               广东省广州市海珠区新港东路1068号中洲中心
             </div>
             <div className="#LogisticsAddrName">
@@ -105,12 +127,12 @@ function DeliveryNoteAddForm() {
       </BaseInfo>
 
       <BaseInfo title={HarvestMaterial.name} id={HarvestMaterial.key} cols={1}>
-
-        <Table className="w-full"
-          dataSource={harvestMaterial}
-          columns={DeliveryNoteAddFromTableColumn}
-        />
-
+        <HarvestMaterialContextProvider value={{ dataSource: HarvestMaterialMock }}>
+          <Table className="w-full"
+            dataSource={harvestMaterial.dataSource}
+            columns={DeliveryNoteAddFromTableColumn}
+          />
+        </HarvestMaterialContextProvider>
       </BaseInfo>
 
     </AnchorPage>