feat(product): 采购管理添加产品选择功能

- 在采购管理页面添加产品选择下拉框 - 实现产品数据的异步加载和动态更新 - 优化采购单的创建和编辑功能，支持产品信息的自动填充

feat(product): 采购管理添加产品选择功能
- 在采购管理页面添加产品选择下拉框 - 实现产品数据的异步加载和动态更新 - 优化采购单的创建和编辑功能，支持产品信息的自动填充
曾国涛
1 parent a1e377cf
Showing 6 changed files with 360 additions and 24 deletions
src/models/enum.ts
src/pages/product/procure/components/AddOrUpdate.tsx
src/pages/product/procure/index.tsx
src/pages/product/product/index.tsx
src/pages/product/productCollect/index.tsx
src/services/request.ts
@@ -3,6 +3,7 @@ import {
   postServiceConstInvoiceReissueRecordStatus,
   postServiceConstPayees,
   postServiceConstProductCollectBillStatus,
+  postServiceConstProducts,
   postServiceConstStores,
 } from '@/services';
 import { useCallback } from 'react';
@@ -28,11 +29,16 @@ export default () =&gt; {
     const result = await postServiceConstStores();
     return result.data;
   }, []);
+  const getProducts = useCallback(async () => {
+    const res = await postServiceConstProducts();
+    return res.data;
+  }, []);
   return {
     getPayees,
     getInvoiceReissueRecordStatus,
     getInvoiceFlushStatus,
     getProductCollectBillAuditStatus,
     getWarehouse,
+    getProducts,
   };
 };
+import { postProcureBillAddOrModify } from '@/services';
+import { useModel } from '@@/exports';
+import {
+  EditableProTable,
+  ModalForm,
+  ProCard,
+  ProColumns,
+  ProForm,
+  ProFormDependency,
+  ProFormField,
+  ProFormSwitch,
+  ProFormTextArea,
+} from '@ant-design/pro-components';
+import { Button, Form, message } from 'antd';
+import React, { useEffect, useRef, useState } from 'react';
+
+export default ({ record, onfinish }) => {
+  const [editableKeys, setEditableRowKeys] = useState<React.Key[]>([]);
+  const [controlled, setControlled] = useState<boolean>(false);
+  const [processedRecord, setProcessedRecord] = useState(record);
+  const formRef = useRef(null);
+  const editorFormRef = useRef(null);
+  const { getProducts } = useModel('enum');
+
+  // 使用 useEffect 为 procureBillDetailList 中的每个元素添加 key
+  useEffect(() => {
+    if (record?.procureBillDetailList) {
+      const updatedProcureBillDetailList = record.procureBillDetailList.map(
+        (item) => ({
+          ...item,
+          key: item.key || `key-${Math.random().toString(36).substr(2, 9)}`, // 动态生成唯一 key
+        }),
+      );
+      setProcessedRecord({
+        ...record,
+        procureBillDetailList: updatedProcureBillDetailList,
+      });
+    }
+  }, [record]);
+
+  const columns: ProColumns[] = [
+    {
+      title: '商品',
+      dataIndex: 'productId',
+      valueType: 'select',
+      request: async () => {
+        const res = await getProducts();
+        return res.map((item) => ({
+          ...item,
+          label: item.name,
+          value: item.id,
+          productUnitName: item.baseUnitName,
+          productUnitPrice: item.unitPrice,
+        }));
+      },
+      fieldProps: (_, { rowIndex }) => ({
+        onSelect: (value, option) => {
+          console.log('option111111' + JSON.stringify(option));
+          const currentTableData = editorFormRef.current?.getRowsData?.();
+          if (currentTableData) {
+            const updatedData = [...currentTableData];
+            updatedData[rowIndex] = {
+              ...updatedData[rowIndex],
+              productUnitName: option.productUnitName,
+              productUnitPrice: option.productUnitPrice,
+            };
+            formRef.current?.setFieldsValue({
+              procureBillDetailList: updatedData,
+            });
+          }
+        },
+      }),
+    },
+    {
+      title: '单位',
+      dataIndex: 'productUnitName',
+      valueType: 'text',
+      editable: false,
+    },
+    {
+      title: '单价',
+      dataIndex: 'productUnitPrice',
+      valueType: 'digit',
+      editable: false,
+    },
+    {
+      title: '数量',
+      dataIndex: 'number',
+      valueType: 'digit',
+    },
+    {
+      title: '备注',
+      dataIndex: 'created_at',
+      valueType: 'textarea',
+    },
+    {
+      title: '附件',
+      dataIndex: 'annex',
+      render: () => {},
+      renderFormItem: () => {},
+    },
+    {
+      title: '操作',
+      valueType: 'option',
+      render: (text, record, _, action) => [
+        <a
+          key="editable"
+          onClick={() => {
+            action?.startEditable?.(record.key);
+          }}
+        >
+          编辑
+        </a>,
+        <a
+          key="delete"
+          onClick={() => {
+            const tableDataSource = formRef.current?.getFieldValue(
+              'procureBillDetailList',
+            );
+            formRef.current?.setFieldsValue({
+              table: tableDataSource.filter((item) => item.key !== record.key),
+            });
+          }}
+        >
+          删除
+        </a>,
+      ],
+    },
+  ];
+
+  const [form] = Form.useForm();
+  return (
+    <ModalForm
+      formRef={formRef}
+      initialValues={processedRecord}
+      validateTrigger="onBlur"
+      title="新建表单"
+      trigger={
+        record?.id ? (
+          <Button type="link">修改</Button>
+        ) : (
+          <Button type="primary">新建</Button>
+        )
+      }
+      form={form}
+      autoFocusFirstInput
+      modalProps={{
+        destroyOnClose: true,
+        onCancel: () => console.log('run'),
+      }}
+      submitTimeout={2000}
+      onFinish={async (values) => {
+        const res = await postProcureBillAddOrModify({
+          data: {
+            ...record,
+            ...values,
+          },
+        });
+        if (res) {
+          message.success(res.message);
+          onfinish();
+        }
+        return true;
+      }}
+    >
+      <EditableProTable
+        rowKey="key"
+        scroll={{
+          x: 960,
+        }}
+        editableFormRef={editorFormRef}
+        headerTitle="可编辑表格"
+        maxLength={5}
+        name="procureBillDetailList"
+        controlled={controlled}
+        recordCreatorProps={{
+          position: 'bottom',
+          record: () => ({
+            key: `key-${Math.random().toString(36).substr(2, 9)}`,
+          }),
+        }}
+        toolBarRender={() => [
+          <ProFormSwitch
+            key="render"
+            fieldProps={{
+              style: {
+                marginBlockEnd: 0,
+              },
+              checked: controlled,
+              onChange: (value) => {
+                setControlled(value);
+              },
+            }}
+            checkedChildren="数据更新通知 Form"
+            unCheckedChildren="保存后通知 Form"
+            noStyle
+          />,
+          <Button
+            key="rows"
+            onClick={() => {
+              const rows = editorFormRef.current?.getRowsData?.();
+              console.log(rows);
+            }}
+          >
+            获取 table 的数据
+          </Button>,
+        ]}
+        columns={columns}
+        editable={{
+          type: 'multiple',
+          editableKeys,
+          onChange: setEditableRowKeys,
+          actionRender: (row, config, defaultDom) => {
+            return [defaultDom.save, defaultDom.delete, defaultDom.cancel];
+          },
+        }}
+      />
+      <ProForm.Item>
+        <ProCard title="表格数据" headerBordered collapsible defaultCollapsed>
+          <ProFormDependency name={['procureBillDetailList']}>
+            {({ procureBillDetailList }) => (
+              <ProFormField
+                ignoreFormItem
+                fieldProps={{
+                  style: {
+                    width: '100%',
+                  },
+                }}
+                mode="read"
+                valueType="jsonCode"
+                text={JSON.stringify(procureBillDetailList)}
+              />
+            )}
+          </ProFormDependency>
+        </ProCard>
+      </ProForm.Item>
+      <ProFormTextArea name="notes" label="备注" />
+    </ModalForm>
+  );
+};
+import ButtonConfirm from '@/components/ButtomConfirm';
 import { RESPONSE_CODE } from '@/constants/enum';
-import { postProcureBillPage } from '@/services';
-import { DownOutlined } from '@ant-design/icons';
-import { ProTable } from '@ant-design/pro-components';
-import { Button } from 'antd';
+import AddOrUpdate from '@/pages/product/procure/components/AddOrUpdate';
+import { postProcureBillDelete, postProcureBillPage } from '@/services';
+import { ProTable, type ActionType } from '@ant-design/pro-components';
+import { message } from 'antd';
+import { useRef } from 'react';
  
 export default () => {
+  const actionRef = useRef<ActionType>();
   const columns = [
     {
       title: '创建时间',
@@ -48,10 +51,40 @@ export default () =&gt; {
       width: 180,
       hideInSearch: true,
     },
+    {
+      title: '操作',
+      valueType: 'option',
+      key: 'option',
+      render: (text, record) => [
+        <AddOrUpdate
+          key="update"
+          record={record}
+          onfinish={() => {
+            actionRef.current?.reload();
+          }}
+        />,
+        <ButtonConfirm
+          key="delete"
+          className="p-0"
+          title={'确认删除该记录？'}
+          text="删除"
+          onConfirm={async () => {
+            let res = await postProcureBillDelete({
+              query: { id: record.id },
+            });
+            if (res) {
+              message.success(res.message);
+              actionRef.current?.reload();
+            }
+          }}
+        />,
+      ],
+    },
   ];
  
   return (
     <ProTable
+      actionRef={actionRef}
       columns={columns}
       request={async (params) => {
         const res = await postProcureBillPage({
@@ -78,8 +111,24 @@ export default () =&gt; {
         expandedRowRender: (record) => (
           <ProTable
             columns={[
-              { title: '商品名称', dataIndex: 'totalPrice', key: 'totalPrice' },
+              {
+                title: '商品名称',
+                dataIndex: 'productName',
+                key: 'productName',
+              },
+              {
+                title: '单位',
+                dataIndex: 'productUnitName',
+                key: 'productUnitName',
+              },
+              {
+                title: '单价',
+                dataIndex: 'productUnitPrice',
+                key: 'productUnitPrice',
+              },
               { title: '数量', dataIndex: 'number', key: 'number' },
+              { title: '小计', dataIndex: 'totalPrice', key: 'totalPrice' },
+              { title: '附件', dataIndex: 'annex', key: 'annex' },
               { title: '备注', dataIndex: 'notes', key: 'notes' },
             ]}
             headerTitle={false}
@@ -92,17 +141,14 @@ export default () =&gt; {
       }}
       search={false}
       dateFormatter="string"
-      headerTitle="嵌套表格"
+      headerTitle="采购管理"
       options={false}
       toolBarRender={() => [
-        <Button key="show">查看日志</Button>,
-        <Button key="out">
-          导出数据
-          <DownOutlined />
-        </Button>,
-        <Button key="primary" type="primary">
-          创建应用
-        </Button>,
+        <AddOrUpdate
+          key="add"
+          record={undefined}
+          onfinish={() => actionRef.current?.reload()}
+        />,
       ]}
     />
   );
@@ -7,14 +7,6 @@ import { ProTable } from &#39;@ant-design/pro-components&#39;;
 import { message } from 'antd';
 import { useRef } from 'react';
  
-export const waitTimePromise = async (time: number = 100) => {
-  return new Promise((resolve) => {
-    setTimeout(() => {
-      resolve(true);
-    }, time);
-  });
-};
-
 export default () => {
   const actionRef = useRef<ActionType>();
   const columns: ProColumns[] = [
@@ -96,8 +96,6 @@ export default () =&gt; {
       hideInTable: true,
       request: async () => {
         const res = await postServiceConstStores();
-        console.log('Stores' + JSON.stringify(res));
-        console.log('Stores' + JSON.stringify(res.data));
         return enumToSelect(res.data);
       },
     },
@@ -16346,6 +16346,60 @@ export const postServiceConstProductCollectBillStatus = /* #__PURE__ */ (() =&gt; {
   return request;
 })();
  
+/** @description response type for postServiceConstProducts */
+export interface PostServiceConstProductsResponse {
+  /**
+   * @description
+   *   OK
+   */
+  200: ServerResult;
+  /**
+   * @description
+   *   Created
+   */
+  201: any;
+  /**
+   * @description
+   *   Unauthorized
+   */
+  401: any;
+  /**
+   * @description
+   *   Forbidden
+   */
+  403: any;
+  /**
+   * @description
+   *   Not Found
+   */
+  404: any;
+}
+
+export type PostServiceConstProductsResponseSuccess =
+  PostServiceConstProductsResponse[200];
+/**
+ * @description
+ *   商品列表
+ * @tags front-const-controller
+ * @produces *
+ * @consumes application/json
+ */
+export const postServiceConstProducts = /* #__PURE__ */ (() => {
+  const method = 'post';
+  const url = '/service/const/products';
+  function request(): Promise<PostServiceConstProductsResponseSuccess> {
+    return requester(request.url, {
+      method: request.method,
+    }) as unknown as Promise<PostServiceConstProductsResponseSuccess>;
+  }
+
+  /** http method */
+  request.method = method;
+  /** request url */
+  request.url = url;
+  return request;
+})();
+
 /** @description response type for postServiceConstStores */
 export interface PostServiceConstStoresResponse {
   /**