feat: 手动开票页面

柏杨
1 parent 40715ed1
Showing 3 changed files with 504 additions and 78 deletions
src/pages/Invoice/waitProcessRecord/components/ManualInvoiceModal.tsx
src/pages/Invoice/waitProcessRecord/index.tsx
src/pages/Order/OrderList/ApplyForInvoicingModal.tsx
+import { RESPONSE_CODE } from '@/constants/enum';
+import { PAYEE_OPTIONS } from '@/pages/Order/constant';
+import { postServiceOrderInvoicing } from '@/services';
+import {
+  ModalForm,
+  ProFormDatePicker,
+  ProFormDigit,
+  ProFormSelect,
+  ProFormText,
+} from '@ant-design/pro-components';
+import { Form, message } from 'antd';
+import { useState } from 'react';
+
+interface ManualInvoiceModalProps {
+  record: any;
+  onSuccess?: () => void;
+}
+
+const ManualInvoiceModal: React.FC<ManualInvoiceModalProps> = ({
+  record,
+  onSuccess,
+}) => {
+  const [form] = Form.useForm();
+  const [visible, setVisible] = useState(false);
+
+  // 转换PAYEE_OPTIONS为Select组件需要的格式
+  const payeeOptions = Object.entries(PAYEE_OPTIONS).map(([value, label]) => ({
+    value,
+    label,
+  }));
+
+  return (
+    <ModalForm
+      title="手动开票"
+      trigger={
+        <a
+          key="invoice"
+          style={{ color: '#1890ff' }}
+          onClick={() => setVisible(true)}
+        >
+          开票
+        </a>
+      }
+      width={600}
+      layout={'horizontal'}
+      form={form}
+      open={visible}
+      onOpenChange={setVisible}
+      autoFocusFirstInput
+      modalProps={{
+        destroyOnClose: true,
+      }}
+      initialValues={{
+        purchaser: record.partyAName,
+        payee: record.partyB,
+        money: record.price,
+      }}
+      submitTimeout={2000}
+      onFinish={async (values) => {
+        try {
+          const body = {
+            invoiceIdentificationNumber: values.purchaser,
+            invoicingTime: values.invoicingTime,
+            purchaser: values.purchaser,
+            financialReceiptIssuanceTime:
+              values.financialReceiptIssuanceTime || values.invoicingTime,
+            collectMoneyTime: values.collectMoneyTime || values.invoicingTime,
+            invoiceNumber: values.invoiceNumber,
+            payee: values.payee,
+            money: values.money,
+            afterInvoicingStatus: [record.type],
+            mainOrderIds: record.mainOrderIds,
+            invoiceRecordIds: [record.id],
+          };
+
+          // 根据现有组件实现，使用data来传递参数
+          const res = await postServiceOrderInvoicing({
+            data: body,
+          });
+
+          if (res.result === RESPONSE_CODE.SUCCESS) {
+            message.success('开票成功');
+            if (onSuccess) {
+              onSuccess();
+            }
+            return true;
+          } else {
+            message.error('开票失败');
+            return false;
+          }
+        } catch (error) {
+          message.error('操作失败');
+          return false;
+        }
+      }}
+    >
+      <ProFormText
+        width="md"
+        name="purchaser"
+        label="抬头名称"
+        rules={[{ required: true, message: '请输入抬头名称' }]}
+        disabled
+      />
+
+      <ProFormText
+        width="md"
+        name="invoiceType"
+        label="发票类型"
+        initialValue="普票"
+        disabled
+      />
+
+      <ProFormDigit
+        width="md"
+        name="money"
+        label="发票金额"
+        fieldProps={{
+          precision: 2,
+          prefix: '¥',
+        }}
+        rules={[{ required: true, message: '请输入发票金额' }]}
+        disabled
+      />
+
+      <ProFormSelect
+        width="md"
+        name="payee"
+        label="收款单位"
+        options={payeeOptions}
+        rules={[{ required: true, message: '请选择收款单位' }]}
+        disabled
+      />
+
+      <ProFormText
+        width="md"
+        name="invoiceNumber"
+        label="发票号码"
+        rules={[{ required: true, message: '请输入发票号码' }]}
+      />
+
+      <ProFormDatePicker
+        width="md"
+        name="invoicingTime"
+        label="开票时间"
+        rules={[{ required: true, message: '请选择开票时间' }]}
+        fieldProps={{
+          format: 'YYYY-MM-DD',
+        }}
+      />
+    </ModalForm>
+  );
+};
+
+export default ManualInvoiceModal;
@@ -2,6 +2,7 @@ import { RESPONSE_CODE } from &#39;@/constants/enum&#39;;
 import InvoiceRecordDetailModal from '@/pages/Invoice/InvoiceRecord/components/InvoiceRecordDetailModal';
 import InvoiceModal from '@/pages/Invoice/waitProcessRecord/components/InvoiceModal';
 import InvoicingModal from '@/pages/Invoice/waitProcessRecord/components/InvoicingModal';
+import ManualInvoiceModal from '@/pages/Invoice/waitProcessRecord/components/ManualInvoiceModal';
 import ManualInvoicingModal from '@/pages/Invoice/waitProcessRecord/components/ManualInvoicingModal';
 import { PAYEE_OPTIONS } from '@/pages/Order/constant';
 import {
@@ -20,6 +21,7 @@ import {
   Popconfirm,
   Space,
   Table,
+  Tabs,
   Tooltip,
   message,
 } from 'antd';
@@ -27,12 +29,15 @@ import { useEffect, useRef, useState } from &#39;react&#39;;
  
 const InvoiceRecord = () => {
   const waitDealrecordActionRef = useRef<ActionType>();
+  const manualInvoiceActionRef = useRef<ActionType>();
   const [invoiceTypeValueEnum, setInvoiceTypeValueEnum] = useState({});
   const [invoicingTypeValueEnum, setInvoicingTypeValueEnum] = useState({});
   const [salesCodeValueEnum, setSalesCodeValueEnum] = useState({});
   const [invoiceRecordDetailVisible, setInvoiceRecordDetailVisible] =
     useState(false);
   const [invoiceRecord, setInvoiceRecord] = useState({});
+  const [activeTab, setActiveTab] = useState('auto');
+
   useEffect(() => {
     async function extracted() {
       let invoiceTypeRet = await postServiceConstInvoiceType();
@@ -65,7 +70,11 @@ const InvoiceRecord = () =&gt; {
   }, []);
  
   const reloadRecordTable = () => {
-    waitDealrecordActionRef.current?.reload();
+    if (activeTab === 'auto') {
+      waitDealrecordActionRef.current?.reload();
+    } else {
+      manualInvoiceActionRef.current?.reload();
+    }
   };
  
   const waitDealRecordColumns = [
@@ -287,11 +296,11 @@ const InvoiceRecord = () =&gt; {
       valueEnum: {
         true: {
           text: '是',
-          status: true,
+          status: 'true',
         },
         false: {
           text: '否',
-          status: false,
+          status: 'false',
         },
       },
     },
@@ -319,15 +328,6 @@ const InvoiceRecord = () =&gt; {
       width: 200,
       render: (text, record) => {
         return [
-          /*<InvoiceRecordDetailModal
-                                          key="detail"
-                                          id={record.id}
-                                          subOrderIds={record.subOrderIds}
-                                          onClose={()=>{
-                                            waitDealrecordActionRef.current?.reload();
-                                          }
-                                          }
-                                        />*/
           <>
             {record.paths.includes('DETAIL') && (
               <a
@@ -368,7 +368,7 @@ const InvoiceRecord = () =&gt; {
                   if (res.result === RESPONSE_CODE.SUCCESS) {
                     message.success('取消成功');
                   }
-                  waitDealrecordActionRef?.current?.reload();
+                  reloadRecordTable();
                 }}
                 okText="确定"
                 cancelText="取消"
@@ -383,74 +383,330 @@ const InvoiceRecord = () =&gt; {
       },
     },
   ];
-  return (
-    <div className="invoice-index">
-      <ProTable
-        columns={waitDealRecordColumns}
-        actionRef={waitDealrecordActionRef}
-        cardBordered
-        pagination={{
-          showSizeChanger: true, // 显示可以选择每页显示条数的下拉菜单
-          pageSizeOptions: ['10', '20', '50', '100'], // 设置可以选择的每页显示条数选项
-        }}
-        rowSelection={{
-          selections: [Table.SELECTION_ALL, Table.SELECTION_INVERT],
-          alwaysShowAlert: true,
-        }}
-        tableAlertOptionRender={({ selectedRowKeys, selectedRows }) => {
-          console.log(selectedRows);
-          console.log(selectedRowKeys);
-          return (
-            <Space size={16}>
-              <InvoicingModal
-                reloadRecordTable={reloadRecordTable}
-                key="button"
-                selectedRowKeys={selectedRowKeys}
-              />
-            </Space>
-          );
-        }}
-        request={async (params) => {
-          let res = await postServiceInvoiceQueryInvoiceRecordList({
-            data: {
-              ...params,
-              statusIn: [
-                'WAITING_FOR_INVOICING',
-                'AUDITING',
-                'AUDITING_NOT_PASSED',
-              ],
-              needBuildDetails: true,
-              needBuildSubOrders: true,
-            },
+
+  // 手动开票表格列配置
+  const manualInvoiceColumns = [
+    {
+      dataIndex: 'index',
+      valueType: 'indexBorder',
+      hideInSearch: true,
+      ellipsis: true,
+      width: 48,
+    },
+    {
+      title: '开票编号',
+      valueType: 'text',
+      dataIndex: 'id',
+      copyable: true,
+      hideInSearch: true,
+      ellipsis: true,
+      width: 100,
+    },
+    {
+      title: '订单号',
+      valueType: 'text',
+      dataIndex: 'mainOrderIds',
+      hideInSearch: true,
+      ellipsis: true,
+      width: 150,
+    },
+    {
+      title: '开票金额',
+      valueType: 'money',
+      dataIndex: 'price',
+      width: 100,
+      hideInSearch: true,
+      ellipsis: true,
+    },
+    {
+      title: '购方名称',
+      valueType: 'text',
+      dataIndex: 'partyAName',
+      width: 150,
+      hideInSearch: true,
+      ellipsis: true,
+    },
+    {
+      title: '收款单位',
+      valueType: 'text',
+      hideInSearch: true,
+      width: 150,
+      dataIndex: 'partyBName',
+      ellipsis: true,
+    },
+    {
+      title: '开票类型',
+      valueType: 'Text',
+      dataIndex: 'typeText',
+      width: 100,
+      hideInSearch: true,
+      ellipsis: true,
+    },
+    {
+      title: '是否加急',
+      valueType: 'Text',
+      dataIndex: 'isUrgentText',
+      width: 80,
+      hideInSearch: true,
+      ellipsis: true,
+    },
+    {
+      title: '附件',
+      key: 'filePaths',
+      ellipsis: true,
+      width: 100,
+      hideInSearch: true,
+      render: (_, record) => {
+        if (record.filePaths && record.filePaths.length > 0) {
+          return record.filePaths.map((item) => {
+            // Extract filename from URL
+            const url = item;
+            const filenameMatch = url.match(/\/([^/]+)\?/);
+            const filename = filenameMatch ? filenameMatch[1] : 'file';
+
+            // Decode the filename to handle URL encoding
+            const decodedFilename = decodeURIComponent(filename);
+
+            // Get the clean filename without timestamp prefix if present
+            const cleanFilename = decodedFilename.replace(/^\d+-\d+-/, '');
+
+            return (
+              <div style={{ marginBottom: '5px' }} key={url}>
+                <a
+                  href={url}
+                  rel="noopener noreferrer"
+                  download={cleanFilename}
+                >
+                  {cleanFilename}
+                </a>
+              </div>
+            );
           });
-          return {
-            data: res?.data?.data,
-            total: res?.data?.total || 0,
-          };
-        }}
-        columnsState={{
-          persistenceKey: 'pro-table-singe-demos',
-          persistenceType: 'localStorage',
-          defaultValue: {
-            option: { fixed: 'right', disable: true },
+        }
+        return '-';
+      },
+    },
+    {
+      title: '申请时间',
+      dataIndex: 'createTime',
+      valueType: 'dateTime',
+      width: 160,
+      hideInSearch: true,
+      ellipsis: true,
+    },
+    {
+      title: '申请人',
+      valueType: 'text',
+      hideInSearch: false,
+      ellipsis: true,
+      width: 100,
+      dataIndex: 'createByName',
+    },
+    {
+      title: '操作',
+      valueType: 'option',
+      key: 'option',
+      width: 120,
+      render: (_, record) => {
+        return [
+          <ManualInvoiceModal
+            key="invoice"
+            record={record}
+            onSuccess={() => reloadRecordTable()}
+          />,
+          <Popconfirm
+            key="cancel"
+            title="取消开票"
+            description="确认取消开票?"
+            onConfirm={async () => {
+              let res = await postServiceInvoiceCancelInvoiceRecord({
+                data: {
+                  invoiceRecordIds: [record.id],
+                },
+              });
+              if (res.result === RESPONSE_CODE.SUCCESS) {
+                message.success('取消成功');
+              }
+              reloadRecordTable();
+            }}
+            okText="确定"
+            cancelText="取消"
+          >
+            <a key="cancel" style={{ color: '#ff4d4f' }}>
+              取消
+            </a>
+          </Popconfirm>,
+        ];
+      },
+    },
+    // 搜索项
+    {
+      title: '订单号',
+      valueType: 'Text',
+      dataIndex: 'mainOrderIds',
+      hideInTable: true,
+    },
+    {
+      title: '购方名称',
+      valueType: 'Text',
+      dataIndex: 'partyANameLike',
+      hideInTable: true,
+    },
+    {
+      title: '收款单位',
+      valueType: 'select',
+      dataIndex: 'partyB',
+      filters: true,
+      onFilter: true,
+      hideInTable: true,
+      valueEnum: enumToProTableEnumValue(PAYEE_OPTIONS),
+    },
+    {
+      title: '发票类型',
+      valueType: 'select',
+      dataIndex: 'type',
+      filters: true,
+      onFilter: true,
+      hideInTable: true,
+      valueEnum: enumToProTableEnumValue(invoiceTypeValueEnum),
+    },
+    {
+      title: '是否加急',
+      valueType: 'select',
+      dataIndex: 'isUrgent',
+      filters: true,
+      onFilter: true,
+      hideInTable: true,
+      valueEnum: {
+        true: {
+          text: '是',
+          status: 'true',
+        },
+        false: {
+          text: '否',
+          status: 'false',
+        },
+      },
+    },
+    {
+      title: '申请时间',
+      dataIndex: 'createTime',
+      valueType: 'dateTimeRange',
+      width: 200,
+      hideInTable: true,
+      search: {
+        transform: (value) => {
+          if (value) {
+            return {
+              createTimeGe: value[0],
+              createTimeLe: value[1],
+            };
+          }
+        },
+      },
+    },
+  ];
+
+  const renderProTable = (isManual) => {
+    const tableProps = {
+      columns: isManual ? manualInvoiceColumns : waitDealRecordColumns,
+      actionRef: isManual ? manualInvoiceActionRef : waitDealrecordActionRef,
+      cardBordered: true,
+      pagination: {
+        showSizeChanger: true, // 显示可以选择每页显示条数的下拉菜单
+        pageSizeOptions: ['10', '20', '50', '100'], // 设置可以选择的每页显示条数选项
+      },
+      request: async (params) => {
+        let res = await postServiceInvoiceQueryInvoiceRecordList({
+          data: {
+            ...params,
+            isManual: isManual,
+            statusIn: [
+              'WAITING_FOR_INVOICING',
+              'AUDITING',
+              'AUDITING_NOT_PASSED',
+            ],
+            needBuildDetails: true,
+            needBuildSubOrders: true,
           },
-          onChange(value) {
-            console.log('value: ', value);
+        });
+        return {
+          data: res?.data?.data,
+          total: res?.data?.total || 0,
+        };
+      },
+      columnsState: {
+        persistenceKey: isManual
+          ? 'manual-invoice-table'
+          : 'auto-invoice-table',
+        persistenceType: 'localStorage',
+        defaultValue: {
+          option: { fixed: 'right', disable: true },
+        },
+        onChange(value) {
+          console.log('value: ', value);
+        },
+      },
+      rowKey: 'id',
+      search: {
+        labelWidth: 'auto',
+      },
+      options: {
+        setting: {
+          listsHeight: 400,
+        },
+      },
+      form: {},
+      dateFormatter: 'string',
+      headerTitle: isManual ? '手动开票列表' : '自动开票列表',
+      scroll: { x: 2000, y: 500 },
+    };
+
+    // 如果不是手动开票，添加多选功能
+    if (!isManual) {
+      tableProps.rowSelection = {
+        selections: [Table.SELECTION_ALL, Table.SELECTION_INVERT],
+        alwaysShowAlert: true,
+      };
+
+      tableProps.tableAlertOptionRender = ({
+        selectedRowKeys,
+        selectedRows,
+      }) => {
+        console.log(selectedRows);
+        console.log(selectedRowKeys);
+        return (
+          <Space size={16}>
+            <InvoicingModal
+              reloadRecordTable={reloadRecordTable}
+              key="button"
+              selectedRowKeys={selectedRowKeys}
+            />
+          </Space>
+        );
+      };
+    }
+
+    return <ProTable {...tableProps} />;
+  };
+
+  return (
+    <div className="invoice-index">
+      <Tabs
+        activeKey={activeTab}
+        onChange={(key) => setActiveTab(key)}
+        items={[
+          {
+            key: 'auto',
+            label: '自动开票',
+            children: renderProTable(false),
           },
-        }}
-        rowKey="id"
-        search={{
-          labelWidth: 'auto',
-        }}
-        options={{
-          setting: {
-            listsHeight: 400,
+          {
+            key: 'manual',
+            label: '手动开票',
+            children: renderProTable(true),
           },
-        }}
-        form={{}}
-        dateFormatter="string"
-        headerTitle="待开票列表"
-        scroll={{ x: 2000, y: 500 }}
+        ]}
       />
       {invoiceRecordDetailVisible ? (
         <InvoiceRecordDetailModal
@@ -458,7 +714,7 @@ const InvoiceRecord = () =&gt; {
           id={invoiceRecord.id}
           setVisible={setInvoiceRecordDetailVisible}
           reloadTable={() => {
-            waitDealrecordActionRef?.current?.reload();
+            reloadRecordTable();
           }}
         />
       ) : (
@@ -107,6 +107,7 @@ export default ({ setCheckVisible, isEdit, subOrders, onClose }) =&gt; {
     receivingCompany: string;
     isUrgent: boolean;
     deadline: string;
+    invoiceType: string; // 新增发票类型字段
   }>();
  
   useEffect(() => {
@@ -317,6 +318,21 @@ export default ({ setCheckVisible, isEdit, subOrders, onClose }) =&gt; {
         options={receivingCompanyOptions}
         rules={[{ required: true, message: '开票收款单位必填' }]}
       />
+
+      {/* 新增发票类型选择 */}
+      <ProFormSelect
+        placeholder="选择发票类型"
+        name="invoiceType"
+        width="lg"
+        key="invoiceType"
+        label="发票类型"
+        options={[
+          { label: '普票', value: 'ORDINARY_TICKET' },
+          { label: '专票', value: 'SPECIAL_TICKET' },
+        ]}
+        rules={[{ required: true, message: '发票类型必填' }]}
+      />
+
       <ProFormSelect
         placeholder="选择是否加急"
         name="isUrgent"