feat: update

zhongnanhuang
1 parent 91ecba53
Showing 4 changed files with 152 additions and 94 deletions
.umirc.ts
src/pages/Order/components/OrderDrawer.tsx
src/pages/Order/index.tsx
src/pages/OrderPrint/index.tsx
@@ -13,7 +13,7 @@ export default defineConfig({
   },
   proxy: {
     '/service/': {
-      target: 'http://localhost:8085/',
+      target: 'http://39.108.227.113:8085/',
       changeOrigin: true,
       // pathRewrite: { '^/api': '' },
     },
@@ -9,7 +9,6 @@ import {
   ProCard,
   ProFormDateTimePicker,
   ProFormDigit,
-  ProFormGroup,
   ProFormList,
   ProFormSelect,
   ProFormText,
@@ -25,8 +24,37 @@ import {
 } from '../constant';
 export default ({ onClose, data }) => {
-  console.log('');
-  const [form] = Form.useForm<{ name: string; company: string }>();
+  const [form] = Form.useForm<{
+    salesCode: '';
+    customerName: '';
+    customerContactNumber: '';
+    institution: '';
+    institutionContactName: '';
+    customerShippingAddress: '';
+    totalPayment: '';
+    paymentChannel: '';
+    paymentMethod: '';
+    productBelongBusiness: '';
+    invoicingStatus: '';
+    invoiceIdentificationNumber: '';
+    invoicingTime: '';
+    bank: '';
+    bankAccountNumber: '';
+    notes: '';
+    list: [
+      {
+        productCode: '';
+        productName: '';
+        quantity: '';
+        productPrice: '';
+        parameters: '';
+        subOrderPayment: '';
+        unit: '';
+        serialNumber: '';
+        notes: '';
+      },
+    ];
+  }>();
   const actionRef = useRef<
     FormListActionType<{
       name: string;
@@ -39,8 +67,18 @@ export default ({ onClose, data }) =&gt; {
     form.setFieldsValue({ ...data });
   }, [data]);
-  function autoFillProductInfo(action) {
-    console.log(action);
+  /**
+   *
+   * @param option 商品名称所对应的商品数据
+   * @param currentRowData list中当前行的数据
+   */
+  function autoFillProductInfo(option: any, currentRowData: any) {
+    let copyList = form.getFieldValue('list');
+    let currentData = copyList[currentRowData.field.key];
+    currentData.productCode = option.productCode;
+    currentData.parameters = option.specifications;
+    currentData.unit = option.unit;
+    form.setFieldValue('list', copyList);
   }
   return (
@@ -344,95 +382,97 @@ export default ({ onClose, data }) =&gt; {
             });
           },
         }}
-        itemRender={({ listDom, action }, {}) => {
+        itemRender={(doms, listMeta) => {
           // const list = actionRef.current?.getList();
           return (
             <ProCard
               bordered
-              extra={action}
+              extra={doms.action}
               title={'商品' + rowNumber.current++}
               style={{
                 marginBlockEnd: 8,
               }}
             >
-              {listDom}
+              {[
+                <ProFormSelect
+                  key={listMeta.field.key}
+                  label="商品名称"
+                  width="lg"
+                  showSearch
+                  name="productName"
+                  placeholder="请搜索商品"
+                  onChange={(_, option) => {
+                    autoFillProductInfo(option, listMeta);
+                  }}
+                  request={async (value) => {
+                    const { data } =
+                      await postServiceOrderQueryProductInformation({
+                        data: { productName: value.keyWords },
+                      });
+                    return data.map((p: any) => {
+                      return { ...p, label: p.productName, value: p.id };
+                    });
+                  }}
+                />,
+                doms.listDom,
+              ]}
             </ProCard>
           );
         }}
         actionRef={actionRef}
       >
-        <ProFormGroup key="group">
-          <ProFormSelect
-            label="商品名称"
-            width="lg"
-            showSearch
-            name="productName"
-            placeholder="请搜索商品"
-            onChange={() => {
-              autoFillProductInfo(actionRef);
-            }}
-            request={async (value) => {
-              const { data } = await postServiceOrderQueryProductInformation({
-                data: { productName: value.keyWords },
-              });
-              return data.map((p: any) => {
-                return { ...p, label: p.productName, value: p.id };
-              });
-            }}
-          />
-          <ProFormText
-            width="lg"
-            name="productCode"
-            disabled
-            label="商品编码"
-            placeholder="未输入商品名称"
-          />
-          <ProFormText
-            width="lg"
-            disabled
-            name="parameters"
-            label="商品参数"
-            placeholder="请输入商品参数"
-          />
-          <ProFormText
-            width="lg"
-            name="quantity"
-            label="商品数量"
-            placeholder="请输入商品数量"
-          />
-          <ProFormDigit
-            width="lg"
-            name="productPrice"
-            label="商品单价"
-            placeholder="请输入商品单价"
-          />
-          <ProFormText
-            width="lg"
-            name="unit"
-            disabled
-            label="价格单位"
-            placeholder="请输入价格单位"
-          />
+        <ProFormText
+          width="lg"
+          name="productCode"
+          disabled
+          label="商品编码"
+          placeholder="未输入商品名称"
+        />
+        <ProFormText
+          width="lg"
+          disabled
+          name="parameters"
+          label="商品参数"
+          placeholder="请输入商品参数"
+        />
+        <ProFormText
+          width="lg"
+          name="quantity"
+          label="商品数量"
+          placeholder="请输入商品数量"
+        />
+        <ProFormDigit
+          width="lg"
+          name="productPrice"
+          label="商品单价"
+          placeholder="请输入商品单价"
+        />
+        <ProFormText
+          width="lg"
+          name="unit"
+          disabled
+          label="价格单位"
+          placeholder="请输入价格单位"
+        />
-          <ProFormDigit
-            width="lg"
-            name="subOrderPayment"
-            label="子订单金额"
-            placeholder="请输入子订单金额"
-          />
-          <ProFormText
-            width="lg"
-            name="serialNumber"
-            label="物流单号"
-            placeholder="请输入物流单号"
-          />
-          <ProFormText
-            width="lg"
-            name="notes"
-            label="备注"
-            placeholder="请输入备注"
-          />
-        </ProFormGroup>
+        <ProFormDigit
+          width="lg"
+          name="subOrderPayment"
+          label="子订单金额"
+          placeholder="请输入子订单金额"
+        />
+        <ProFormText
+          width="lg"
+          name="serialNumber"
+          label="物流单号"
+          placeholder="请输入物流单号"
+        />
+        <ProFormText
+          width="lg"
+          name="notes"
+          label="备注"
+          placeholder="请输入备注"
+        />
       </ProFormList>
       {/* <ProFormDateRangePicker name="contractTime" label="合同生效时间" /> */}
@@ -28,6 +28,7 @@ const OrderPage = () =&gt; {
   const [deliverVisible, setDeliverVisible] = useState<boolean>(false);
   const [expandedRowKeys, setExpandedRowKeys] = useState<Key[]>([]);
   const [orderRow, setOrderRow] = useState<Partial<OrderType>>({});
+  const [mainOrderAllItemKeys, setMainOrderAllItemKeys] = useState([]);
   const [selectedRows, setSelectedRows] = useState({});
   const [selectedRowObj, setSelectedRowObj] = useState({});
@@ -41,7 +42,14 @@ const OrderPage = () =&gt; {
     setSelectedItems(newSelectedItems);
   };
+  const handleAllExpand = () => {
+    if (expandedRowKeys.length === mainOrderAllItemKeys.length) {
+      setExpandedRowKeys([]);
+      return;
+    }
+    setExpandedRowKeys(mainOrderAllItemKeys);
+  };
   // 主订单内容渲染
   const MainOrderColumnRender = ({ record }: { record: OrderListItemType }) => {
     const handleExpand = (key: number) => {
@@ -61,7 +69,7 @@ const OrderPage = () =&gt; {
           >
             <Flex wrap="wrap" gap="middle">
               <div>{record.createTime}</div>
-              <div>订单编号：{record.main_order_id}</div>
+              <div>订单编号：{record.id}</div>
             </Flex>
           </Checkbox>
         </Flex>
@@ -330,6 +338,7 @@ const OrderPage = () =&gt; {
         rowKey="id"
         pagination={{
           showQuickJumper: true,
+          pageSize: 10,
         }}
         expandedRowKeys={expandedRowKeys}
         expandable={{ expandedRowRender }}
@@ -342,10 +351,7 @@ const OrderPage = () =&gt; {
         request={async (
           // 第一个参数 params 查询表单和 params 参数的结合
           // 第一个参数中一定会有 pageSize 和  current ，这两个参数是 antd 的规范
-          params: {
-            pageSize: 10;
-            current: 1;
-          },
+          params,
           sorter,
           filter,
         ) => {
@@ -357,13 +363,23 @@ const OrderPage = () =&gt; {
             filter,
             data: params,
           });
-          console.log(data);
+          setMainOrderAllItemKeys(data?.data?.map((d) => d.id)); //存储所有主订单的key，一键展开用
           return {
             data: data?.data || [],
+            total: data?.total || 0,
           };
         }}
         toolBarRender={() => [
-          <Button key="show">一键展开</Button>,
+          <Button
+            key="show"
+            onClick={() => {
+              handleAllExpand();
+            }}
+          >
+            {mainOrderAllItemKeys.length !== expandedRowKeys.length
+              ? '一键展开'
+              : '一键收起'}
+          </Button>,
           <Button key="out" onClick={() => setOrderDrawerVisible(true)}>
             新增
           </Button>,
@@ -19,7 +19,9 @@ function InvoiceDetails() {
     <div className="grid grid-cols-2 gap-4 mb-6 text-sm">
       <div>
         <p>单位名称: 某某科技有限公司</p>
+        <p>联系人: 张三</p>
         <p>联系电话: 18583817221</p>
+        <p>送货地址: 广东省东莞市</p>
       </div>
       <div className="text-right">
         <p>编号: Canrd-DZ-2023-1101-004</p>
@@ -34,24 +36,24 @@ function ProductsTable() {
     <div className="mb-6">
       <table className="w-full text-sm border border-gray-300 table-fixed">
         <thead>
-          <tr className="bg-gray-200">
+          <tr className="">
             <th className="w-1/4 p-2 border border-gray-300 border-solid">
-              名称
+              序号
             </th>
             <th className="w-1/6 p-2 border border-gray-300 border-solid">
-              规格
+              订单号
             </th>
             <th className="w-1/6 p-2 border border-gray-300 border-solid">
-              单位
+              货品名称
             </th>
             <th className="w-1/12 p-2 border border-gray-300 border-solid">
-              数量
+              规格
             </th>
             <th className="w-1/6 p-2 border border-gray-300 border-solid">
-              单价
+              单位
             </th>
             <th className="w-1/6 p-2 border border-gray-300 border-solid">
-              金额
+              数量
             </th>
             <th className="w-1/4 p-2 border border-gray-300 border-solid">
               备注