feat(product): 优化采购管理功能

- 重构采购管理页面，增加更多筛选条件和操作功能- 新增采购单号、创建人等搜索条件 - 添加采购明细的可编辑表格功能 - 集成产品选择接口，实现产品信息自动填充 -优化附件展示方式，支持多附件查看 - 新增审核功能，支持采购单审核操作

feat(product): 优化采购管理功能
- 重构采购管理页面，增加更多筛选条件和操作功能- 新增采购单号、创建人等搜索条件 - 添加采购明细的可编辑表格功能 - 集成产品选择接口，实现产品信息自动填充 -优化附件展示方式，支持多附件查看 - 新增审核功能，支持采购单审核操作
曾国涛
1 parent a46cc9ad
Showing 2 changed files with 313 additions and 74 deletions
src/pages/product/procure/index.tsx
src/pages/product/productCollect/components/AddOrUpdate.tsx
 import ButtonConfirm from '@/components/ButtomConfirm';
 import { RESPONSE_CODE } from '@/constants/enum';
 import AddOrUpdate from '@/pages/product/procure/components/AddOrUpdate';
-import { postProcureBillDelete, postProcureBillPage } from '@/services';
+import {
+  postProcureBillDelete,
+  postProcureBillPage,
+  postServiceConstProcureBillAuditStatus,
+} from '@/services';
+import { enumToSelect } from '@/utils';
 import { ProTable, type ActionType } from '@ant-design/pro-components';
 import { message } from 'antd';
 import { useRef } from 'react';
+import Audit from './components/Audit';
 export default () => {
   const actionRef = useRef<ActionType>();
   const columns = [
     {
+      title: '单号',
+      dataIndex: 'id',
+      ellipsis: true,
+      hideInSearch: true,
+    },
+    {
       title: '创建时间',
       dataIndex: 'createTime',
       ellipsis: true,
@@ -52,32 +64,84 @@ export default () =&gt; {
       hideInSearch: true,
     },
     {
+      title: '采购单号',
+      dataIndex: 'id',
+      ellipsis: true,
+      hideInTable: true,
+    },
+    {
+      title: '创建人',
+      dataIndex: 'createByNameLike',
+      ellipsis: true,
+      hideInTable: true,
+    },
+    {
+      title: '创建时间',
+      valueType: 'dateTimeRange',
+      hideInTable: true,
+      search: {
+        transform: (value) => {
+          if (value) {
+            return {
+              createTimeGe: value[0],
+              createTimeLe: value[1],
+            };
+          }
+        },
+      },
+    },
+    {
+      title: '审核状态',
+      valueType: 'select',
+      key: 'auditStatus',
+      dataIndex: 'auditStatus',
+      filters: true,
+      onFilter: true,
+      hideInTable: true,
+      request: async () => {
+        const res = await postServiceConstProcureBillAuditStatus();
+        return enumToSelect(res.data);
+      },
+    },
+    {
       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);
+        record.paths?.includes('UPDATE') && (
+          <AddOrUpdate
+            key="update"
+            record={record}
+            onfinish={() => {
               actionRef.current?.reload();
-            }
-          }}
-        />,
+            }}
+          />
+        ),
+        record.paths?.includes('UPDATE') && (
+          <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();
+              }
+            }}
+          />
+        ),
+        record.paths?.includes('AUDIT') && (
+          <Audit
+            recordId={record.id}
+            onClose={() => {
+              actionRef.current?.reload();
+            }}
+          ></Audit>
+        ),
       ],
     },
   ];
@@ -128,7 +192,41 @@ export default () =&gt; {
               },
               { title: '数量', dataIndex: 'number', key: 'number' },
               { title: '小计', dataIndex: 'totalPrice', key: 'totalPrice' },
-              { title: '附件', dataIndex: 'annex', key: 'annex' },
+              {
+                title: '附件',
+                dataIndex: 'annex',
+                key: 'annex',
+                render: (_, record) => (
+                  <div>
+                    {record.annexList?.map((url, index) => {
+                      const shortName =
+                        url.split('/').pop()?.slice(0, 15) ||
+                        `附件 ${index + 1}`;
+                      return (
+                        <a
+                          key={index}
+                          href={url}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          title={url} // 悬停显示完整链接
+                          style={{
+                            display: 'block',
+                            marginBottom: '4px',
+                            whiteSpace: 'nowrap',
+                            overflow: 'hidden',
+                            textOverflow: 'ellipsis',
+                            maxWidth: '200px', // 限制显示宽度
+                          }}
+                        >
+                          {shortName.length < url.split('/').pop()?.length
+                            ? `${shortName}...`
+                            : shortName}
+                        </a>
+                      );
+                    })}
+                  </div>
+                ),
+              },
               { title: '备注', dataIndex: 'notes', key: 'notes' },
             ]}
             headerTitle={false}
@@ -139,7 +237,6 @@ export default () =&gt; {
           />
         ),
       }}
-      search={false}
       dateFormatter="string"
       headerTitle="采购管理"
       options={false}
 import { postProductCollectBillAddOrModify } from '@/services';
 import { useModel } from '@@/exports';
 import {
+  ActionType,
+  EditableProTable,
   ModalForm,
-  ProFormDigit,
-  ProFormSelect,
-  ProFormText,
+  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');
+  const actionRef = useRef<ActionType>();
+  useEffect(() => {
+    if (record?.details) {
+      const updateddetails = record.details.map((item) => ({
+        ...item,
+        key: item.key || `key-${Math.random().toString(36).substr(2, 9)}`, // 动态生成唯一 key
+      }));
+      setProcessedRecord({
+        ...record,
+        details: updateddetails,
+      });
+    }
+  }, [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) => {
+          const currentTableData = editorFormRef.current?.getRowsData?.();
+          if (currentTableData) {
+            const updatedData = [...currentTableData];
+            updatedData[rowIndex] = {
+              ...updatedData[rowIndex],
+              productUnitName: option.productUnitName,
+              productUnitPrice: option.productUnitPrice,
+            };
+            formRef.current?.setFieldsValue({
+              details: updatedData,
+            });
+          }
+        },
+      }),
+    },
+    {
+      title: '单位',
+      dataIndex: 'productUnitName',
+      valueType: 'text',
+      editable: false,
+    },
+    {
+      title: '单价',
+      dataIndex: 'productUnitPrice',
+      valueType: 'digit',
+      editable: false,
+    },
+    {
+      title: '数量',
+      dataIndex: 'number',
+      valueType: 'digit',
+    },
+    {
+      title: '备注',
+      dataIndex: 'notes',
+      valueType: 'textarea',
+    },
+    {
+      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('details');
+            formRef.current?.setFieldsValue({
+              table: tableDataSource.filter((item) => item.key !== record.key),
+            });
+          }}
+        >
+          删除
+        </a>,
+      ],
+    },
+  ];
-export default ({ record, onFinish }) => {
   const [form] = Form.useForm();
-  const { getWarehouse } = useModel('enum');
   return (
     <ModalForm
+      formRef={formRef}
+      initialValues={processedRecord}
+      validateTrigger="onBlur"
       title="新建表单"
       trigger={
         record?.id ? (
@@ -24,66 +133,99 @@ export default ({ record, onFinish }) =&gt; {
       }
       form={form}
       autoFocusFirstInput
+      width={1500}
       modalProps={{
         destroyOnClose: true,
         onCancel: () => console.log('run'),
       }}
       submitTimeout={2000}
       onFinish={async (values) => {
-        let res = await postProductCollectBillAddOrModify({
-          data: values,
+        const res = await postProductCollectBillAddOrModify({
+          data: {
+            ...record,
+            ...values,
+          },
         });
         if (res) {
           message.success(res.message);
-          onFinish();
+          onfinish();
         }
         return true;
       }}
     >
-      <ProFormDigit
-        label="id"
-        name="id"
-        initialValue={record?.id}
-        width="sm"
-        hidden={true}
-      />
-      <ProFormText
-        width="md"
-        initialValue={record?.productName}
-        name="productName"
-        label="申领物品"
-        rules={[{ required: true, message: '申领物品必填' }]}
-      />
-      <ProFormDigit
-        label="申领数量"
-        name="productNumber"
-        initialValue={record?.productNumber}
-        width="sm"
-        min={1}
-        rules={[{ required: true, message: '申领数量必填' }]}
-      />
-      <ProFormSelect
-        width="md"
-        request={async () => {
-          const res = await getWarehouse();
-          console.log('options:' + res);
-          let options = Object.entries(res).map(([value, label]) => ({
-            label,
-            value,
-          }));
-          console.log('options:' + options);
-          return options;
+      <EditableProTable
+        rowKey="key"
+        scroll={{
+          x: 960,
+        }}
+        editableFormRef={editorFormRef}
+        headerTitle="可编辑表格"
+        maxLength={5}
+        name="details"
+        controlled={controlled}
+        recordCreatorProps={{
+          position: 'bottom',
+          record: () => ({
+            key: `key-${Math.random().toString(36).substr(2, 9)}`,
+          }),
+        }}
+        actionRef={actionRef}
+        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];
+          },
         }}
-        // initialValue={record?.warehouseCode}
-        name="warehouseCode"
-        label="申领仓库"
-        rules={[{ required: true, message: '申领仓库为必填项' }]}
-      />
-      <ProFormTextArea
-        initialValue={record?.applyRemarks}
-        name="applyRemarks"
-        label="申领备注"
       />
+      <ProForm.Item>
+        <ProCard title="表格数据" headerBordered collapsible defaultCollapsed>
+          <ProFormDependency name={['details']}>
+            {({ details }) => (
+              <ProFormField
+                ignoreFormItem
+                fieldProps={{
+                  style: {
+                    width: '100%',
+                  },
+                }}
+                mode="read"
+                valueType="jsonCode"
+                text={JSON.stringify(details)}
+              />
+            )}
+          </ProFormDependency>
+        </ProCard>
+      </ProForm.Item>
+      <ProFormTextArea name="auditRemarks" label="备注" />
     </ModalForm>
   );
 };