feat: 开票功能开发

曾国涛
1 parent 38661cba
Showing 3 changed files with 108 additions and 31 deletions
src/pages/Invoice/components/InvoiceDetailTable.tsx
src/pages/Invoice/components/InvoiceProjectSelect.tsx
src/pages/Order/components/InvoicingDrawerForm.tsx
 import InvoiceDetailImportModal from '@/pages/Invoice/components/InvoiceDetailImportModal';
 import { InvoiceProjectSelect } from '@/pages/Invoice/components/InvoiceProjectSelect';
-import { EditableProTable, ProColumns } from '@ant-design/pro-components';
-import { useEffect, useState } from 'react';
+import {
+  ActionType,
+  EditableProTable,
+  ProCard,
+  ProColumns,
+  ProFormField,
+} from '@ant-design/pro-components';
+import { useEffect, useRef, useState } from 'react';
 export default ({ recordId, details, updateDetails, readOnly }) => {
   const [editableKeys, setEditableRowKeys] = useState([]);
-
+  const [invoiceProject, setInvoiceProject] = useState({});
+  const ref = useRef<ActionType>();
   useEffect(() => {
     updateDetails(details);
   }, []);
@@ -17,10 +24,16 @@ export default ({ recordId, details, updateDetails, readOnly }) =&gt; {
     {
       title: '项目名称',
       dataIndex: 'projectName',
+      width: 200,
       ellipsis: true,
       readonly: readOnly,
       renderFormItem: () => {
-        return <InvoiceProjectSelect />;
+        return (
+          <InvoiceProjectSelect
+            setInvoiceProject={setInvoiceProject}
+            readOnly={readOnly}
+          />
+        );
       },
     },
     {
@@ -89,12 +102,13 @@ export default ({ recordId, details, updateDetails, readOnly }) =&gt; {
       <EditableProTable
         headerTitle="可编辑表格"
         columns={columns}
+        actionRef={ref}
         rowKey="tid"
         scroll={{
           x: 960,
         }}
         value={details}
-        onChange={updateDetails}
+        controlled={true}
         recordCreatorProps={
           readOnly
             ? false
@@ -118,11 +132,36 @@ export default ({ recordId, details, updateDetails, readOnly }) =&gt; {
           },
           onValuesChange: (record, recordList) => {
-            updateDetails(recordList);
+            console.log('reList' + JSON.stringify(recordList));
+            console.log(record);
+            console.log('ip' + JSON.stringify(invoiceProject));
+            //修改recordList中tid为record.tid的元素,将它的specification属性设置为invoiceProject的specification属性
+            const records = recordList.map((item) => {
+              if (item.tid === record.tid) {
+                item.specification = invoiceProject?.specification;
+                item.unit = invoiceProject?.unit;
+                item.taxRate = invoiceProject?.taxRate * 100;
+              }
+              return item;
+            });
+            console.log('res' + JSON.stringify(records));
+            updateDetails(records);
           },
-          onChange: setEditableRowKeys,
         }}
       />
+      <ProCard title="表格数据" headerBordered collapsible defaultCollapsed>
+        <ProFormField
+          ignoreFormItem
+          fieldProps={{
+            style: {
+              width: '100%',
+            },
+          }}
+          mode="read"
+          valueType="jsonCode"
+          text={JSON.stringify(details)}
+        />
+      </ProCard>
     </>
   );
 };
 import { postServiceConstListInvoiceDetailNames } from '@/services';
-import { enumToSelect } from '@/utils';
-import { ProFormSelect } from '@ant-design/pro-components';
+import { Select, Tooltip } from 'antd';
+import { useState } from 'react';
-export const InvoiceProjectSelect = () => {
+export const InvoiceProjectSelect = ({
+  readOnly,
+  value,
+  onChange,
+  setInvoiceProject,
+}) => {
+  const [options, setOptions] = useState<any[]>([]);
+  // 定义防抖函数
+  let timeoutId = null;
   const fetchOptions = async (keywords) => {
-    const res = await postServiceConstListInvoiceDetailNames({
-      data: {
-        nameLike: keywords,
-      },
-    });
-    const data = res.data;
-    console.log('invoiceProject' + JSON.stringify(data));
-    return enumToSelect(data);
+    clearTimeout(timeoutId);
+    timeoutId = setTimeout(async () => {
+      const res = await postServiceConstListInvoiceDetailNames({
+        data: {
+          nameLike: keywords,
+        },
+      });
+      const data = res.data;
+      console.log('invoiceProject' + JSON.stringify(data));
+      setOptions(
+        data.map((item) => {
+          return {
+            label: item.name,
+            value: item.id,
+            ...item,
+          };
+        }),
+      );
+      // 这里可以放置实际的搜索逻辑，比如发起网络请求等
+    }, 500); // 设置延迟时间，单位毫秒
   };
-  return (
-    <ProFormSelect
+  return readOnly ? (
+    <Tooltip title={value}>{value}</Tooltip>
+  ) : (
+    <Select
       key="project"
-      width={500}
+      /*readonly={readonly}*/
       showSearch
-      name="project"
       placeholder="请选择开票项目"
-      fieldProps={{
-        filterOption() {
-          return true;
-        },
+      onChange={(e) => {
+        setInvoiceProject(options.find((item) => item.value === e));
+        onChange(e);
       }}
-      debounceTime={1000}
-      request={async (value, {}) => {
-        const keywords = value.keywords;
-        const data = await fetchOptions(keywords);
-        return data;
+      defaultValue={value}
+      options={options}
+      onSearch={(e) => {
+        fetchOptions(e);
       }}
     />
   );
 // import { PlusOutlined } from '@ant-design/icons';
+import { InvoiceProjectSelect } from '@/pages/Invoice/components/InvoiceProjectSelect';
 import {
   postServiceConstInvoiceType,
   postServiceConstInvoicingType,
@@ -164,6 +165,24 @@ export default ({ dataList, mainOrder, setVisible, onClose }) =&gt; {
           headers: { Authorization: localStorage.getItem('token') },
         }}
       />
+      <ProFormList
+        name="invoiceDetails"
+        label="开票明细"
+        rules={[
+          {
+            required: true,
+            validator: async (_, value) => {
+              console.log(value);
+              if (value && value.length > 0) {
+                return;
+              }
+              throw new Error('至少要有一项！');
+            },
+          },
+        ]}
+      >
+        <InvoiceProjectSelect readOnly={true} />
+      </ProFormList>
       <ProFormTextArea
         name="applyInvoicingNotes"
         label="备注"