feat(invoice): optimize invoice components and add Chinese currency conversion utility

- Add dynamic invoice type display in Invoice.tsx. - Refactor InvoiceDetailTable.tsx to simplify code and remove unnecessary comments. - Optimize data processing and UI display in InvoiceModal.tsx. - Improve component structure and add orderId mapping in InvoiceRecordDetailModal.tsx. - Enhance InvoicingDrawerForm.tsx with total price calculation and validation.- Implement Chinese currency conversion function in numberUtil.ts. - Various code cleanups and documentation improvements.

feat(invoice): optimize invoice components and add Chinese currency conversion utility
- Add dynamic invoice type display in Invoice.tsx. - Refactor InvoiceDetailTable.tsx to simplify code and remove unnecessary comments. - Optimize data processing and UI display in InvoiceModal.tsx. - Improve component structure and add orderId mapping in InvoiceRecordDetailModal.tsx. - Enhance InvoicingDrawerForm.tsx with total price calculation and validation.- Implement Chinese currency conversion function in numberUtil.ts. - Various code cleanups and documentation improvements.
曾国涛
1 parent 04358c9a
Showing 10 changed files with 246 additions and 87 deletions
src/pages/Invoice/components/Invoice.tsx
src/pages/Invoice/components/InvoiceDetailTable.tsx
src/pages/Invoice/components/InvoiceModal.tsx
src/pages/Invoice/components/InvoiceProjectSelect.tsx
src/pages/Invoice/components/InvoiceRecordDetailModal.tsx
src/pages/Invoice/index.tsx
src/pages/Order/components/InvoicingDrawerForm.tsx
src/pages/Order/components/OrderDrawer.tsx
src/services/definition.ts
src/utils/numberUtil.ts
@@ -154,7 +154,11 @@ export default ({ data }) =&gt; {
             发票号码：<InvoiceInfo>{data.invoiceNumber}</InvoiceInfo>
           </Col>
           <Col className="title col_18 no-border">
-            电子发票（增值税专用发票）
+            电子发票（
+            {data.type === 'SPECIAL_TICKET'
+              ? '增值税专用发票'
+              : '增值税普通发票'}
+            ）
           </Col>
           <UnderLine className="UnderLine">
             <div></div>
@@ -3,13 +3,14 @@ import { InvoiceProjectSelect } from &#39;@/pages/Invoice/components/InvoiceProjectS
 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);
@@ -26,12 +27,7 @@ export default ({ recordId, details, updateDetails, readOnly }) =&gt; {
       ellipsis: true,
       readonly: readOnly,
       renderFormItem: () => {
-        return (
-          <InvoiceProjectSelect
-            setInvoiceProject={setInvoiceProject}
-            readOnly={readOnly}
-          />
-        );
+        return <InvoiceProjectSelect readOnly={readOnly} />;
       },
     },
     {
@@ -131,46 +127,27 @@ export default ({ recordId, details, updateDetails, readOnly }) =&gt; {
           onValuesChange: (record, recordList) => {
             //修改recordList中tid为record.tid的元素,将它的specification属性设置为invoiceProject的specification属性
             const records = recordList.map((item) => {
-              if (
-                record &&
-                item.tid === record.tid &&
-                item.projectName !==
-                  '*' +
-                    invoiceProject.productAndServiceCatagoryAbbreviation +
-                    '*' +
-                    invoiceProject?.name &&
-                item.specification !== invoiceProject?.specification
-              ) {
-                console.log(item.projectName);
-                console.log(invoiceProject?.name);
-                item.projectName =
-                  '*' +
-                  invoiceProject.productAndServiceCatagoryAbbreviation +
-                  '*' +
-                  invoiceProject?.name;
-                item.specification = invoiceProject?.specification;
-                item.unit = invoiceProject?.unit;
-                item.taxRate = invoiceProject?.taxRate * 100;
-              }
               return item;
             });
             updateDetails(records);
           },
         }}
       />
-      {/*{<ProCard title="表格数据" headerBordered collapsible defaultCollapsed>
-        <ProFormField
-          ignoreFormItem
-          fieldProps={{
-            style: {
-              width: '100%',
-            },
-          }}
-          mode="read"
-          valueType="jsonCode"
-          text={JSON.stringify(details)}
-        />
-      </ProCard>}*/}
+      {
+        <ProCard title="表格数据" headerBordered collapsible defaultCollapsed>
+          <ProFormField
+            ignoreFormItem
+            fieldProps={{
+              style: {
+                width: '100%',
+              },
+            }}
+            mode="read"
+            valueType="jsonCode"
+            text={JSON.stringify(details)}
+          />
+        </ProCard>
+      }
     </>
   );
 };
@@ -6,15 +6,15 @@ import { useEffect, useState } from &#39;react&#39;;
 export default ({ recordId, getRecord, button }) => {
   const [data, setData] = useState<any>({});
+  const getData = async () => {
+    let ret = await postServiceInvoiceGetInvoiceRecord({
+      query: {
+        id: recordId,
+      },
+    });
+    setData(ret.data);
+  };
   useEffect(() => {
-    const getData = async () => {
-      let ret = await postServiceInvoiceGetInvoiceRecord({
-        query: {
-          id: recordId,
-        },
-      });
-      setData(ret.data);
-    };
     if (recordId) {
       getData();
     }
@@ -25,8 +25,12 @@ export default ({ recordId, getRecord, button }) =&gt; {
       title="预览发票"
       trigger={button ? button : <a type="primary">预览</a>}
       onOpenChange={(open) => {
-        if (open && getRecord) {
-          setData(getRecord());
+        if (open) {
+          if (getRecord) {
+            setData(getRecord());
+          } else {
+            getData();
+          }
         }
       }}
       width={1200}
@@ -2,12 +2,7 @@ import { postServiceConstListInvoiceDetailNames } from &#39;@/services&#39;;
 import { Select, Tooltip } from 'antd';
 import { useState } from 'react';
-export const InvoiceProjectSelect = ({
-  readOnly,
-  value,
-  onChange,
-  setInvoiceProject,
-}) => {
+export const InvoiceProjectSelect = ({ readOnly, value, onChange }) => {
   const [options, setOptions] = useState<any[]>([]);
   // 定义防抖函数
   let timeoutId = null;
@@ -20,16 +15,22 @@ export const InvoiceProjectSelect = ({
         },
       });
       const data = res.data;
-      console.log('invoiceProject' + JSON.stringify(data));
+
       setOptions(
         data.map((item) => {
+          console.log(item);
           return {
+            key: item.id,
             label:
               '*' +
               item.productAndServiceCatagoryAbbreviation +
               '*' +
               item?.name,
-            value: item.id,
+            value:
+              '*' +
+              item.productAndServiceCatagoryAbbreviation +
+              '*' +
+              item?.name,
             ...item,
           };
         }),
@@ -48,7 +49,6 @@ export const InvoiceProjectSelect = ({
       placeholder="请选择开票项目"
       filterOption={(input, option) => (option?.label ?? '').includes(input)}
       onChange={(e) => {
-        setInvoiceProject(options.find((item) => item.value === e));
         onChange(e);
       }}
       defaultValue={value}
@@ -51,6 +51,7 @@ export default ({ id, setVisible }) =&gt; {
         id: id,
       },
     });
+    console.log(ret.data);
     const updatedInvoiceDetails = ret.data.invoiceDetails?.map(
       (item, index) => ({
         ...item, // 保留原有属性
@@ -79,7 +80,23 @@ export default ({ id, setVisible }) =&gt; {
                 id: id,
               },
             });
-            return ret.data;
+            const data = ret.data;
+            const orderIdMap = data.orderIdMap;
+            const orderIdList = [];
+            //遍历orderIdMap属性。
+            for (const key in orderIdMap) {
+              if (key in Object.getOwnPropertyNames(orderIdMap)) {
+                const orderId = {
+                  mainId: key,
+                  subIds: orderIdMap[key],
+                };
+                orderIdList.push(orderId);
+              }
+            }
+            return {
+              ...data,
+              orderIdList: orderIdList,
+            };
           }}
           submitter={{
             render: () => {
@@ -233,7 +250,7 @@ export default ({ id, setVisible }) =&gt; {
               />
               <ProFormFieldSet
                 name="list"
-                label="子订单号"
+                label="订单号"
                 transform={(value: any) => ({
                   list: value,
                   startTime: value[0],
@@ -241,21 +258,37 @@ export default ({ id, setVisible }) =&gt; {
                 })}
               >
                 <ProFormList
-                  name="subOrderIds"
+                  name="orderIdList"
                   creatorButtonProps={false}
                   itemRender={({}, { record }) => {
                     return (
-                      <>
+                      <Space>
                         <Button
+                          key={record.mainId}
                           className="pl-1 pr-0"
                           type="link"
                           target="_blank"
-                          href={'/order?subOrderId=' + record}
+                          href={'/order?id=' + record.mainId}
                         >
-                          {record}
+                          {record.mainId}
                         </Button>
+                        (
+                        {record.subIds.map((item) => {
+                          return (
+                            <Button
+                              key={item}
+                              className="pl-1 pr-0"
+                              type="link"
+                              target="_blank"
+                              href={'/order?subOrderId=' + item}
+                            >
+                              {item}
+                            </Button>
+                          );
+                        })}
+                        )
                         <Divider type="vertical" />
-                      </>
+                      </Space>
                     );
                   }}
                 >
@@ -319,14 +319,14 @@ const InvoicePage = () =&gt; {
       render: (text, record) => {
         return [
           /*<InvoiceRecordDetailModal
-                      key="detail"
-                      id={record.id}
-                      subOrderIds={record.subOrderIds}
-                      onClose={()=>{
-                        waitDealrecordActionRef.current?.reload();
-                      }
-                      }
-                    />*/
+                                key="detail"
+                                id={record.id}
+                                subOrderIds={record.subOrderIds}
+                                onClose={()=>{
+                                  waitDealrecordActionRef.current?.reload();
+                                }
+                                }
+                              />*/
           <a
             key="detail"
             onClick={() => {
@@ -9,6 +9,7 @@ import {
   postServiceInvoiceQueryCompanyInfo,
 } from '@/services';
 import { enumToSelect } from '@/utils';
+import { convertCurrency } from '@/utils/numberUtil';
 import {
   DrawerForm,
   ProCard,
@@ -51,7 +52,19 @@ export default ({ dataList, setVisible, onClose }) =&gt; {
             <InvoiceModal
               key={'invoicePreview'}
               button={<Button type="primary"> 发票预览 </Button>}
-              getRecord={form.getFieldsValue}
+              getRecord={() => {
+                const totalPrice = dataList.reduce(
+                  (accumulator, currentValue) => {
+                    return accumulator + currentValue.subOrderPayment;
+                  },
+                  0,
+                );
+                return {
+                  ...form.getFieldsValue(),
+                  totalPrice: totalPrice,
+                  totalPriceText: convertCurrency(totalPrice),
+                };
+              }}
             />,
             ...defaultDoms,
           ];
@@ -148,6 +161,7 @@ export default ({ dataList, setVisible, onClose }) =&gt; {
         width="md"
         name="partyATaxid"
         label="购方税号"
+        rules={[{ required: true, message: '购方税号必填' }]}
         placeholder="请输入名称"
       />
       <ProFormText
@@ -244,6 +258,7 @@ export default ({ dataList, setVisible, onClose }) =&gt; {
         name="invoiceDetails"
         label="开票明细"
         initialValue={dataList.map((item) => {
+          console.log('item:' + JSON.stringify(item));
           return {
             subOrderId: item.id,
             /*projectName: item.productName,*/
@@ -251,7 +266,7 @@ export default ({ dataList, setVisible, onClose }) =&gt; {
             unit: item.unit,
             quantity: item.quantity,
             price: item.productPrice,
-            totalPrice: item.totalPayment,
+            totalPrice: item.subOrderPayment,
           };
         })}
         rules={[
@@ -342,13 +357,36 @@ export default ({ dataList, setVisible, onClose }) =&gt; {
                 label="规格型号"
                 rules={[
                   {
-                    message: '规格型号不能超过20个字符!',
-                    max: 20,
-                  },
-                  {
                     message: '规格型号不能为空!',
                     required: true,
                   },
+                  {
+                    validator: (_, value) => {
+                      let len = 0;
+                      // 判断是否为全角字符
+                      for (let i = 0; i < value.length; i++) {
+                        // 获取字符的Unicode值
+                        const code = value.charCodeAt(i);
+                        // 判断是否为全角字符
+                        if (
+                          (code >= 0xff01 && code <= 0xff5e) ||
+                          (code >= 0x4e00 && code <= 0x9fff)
+                        ) {
+                          len += 2; // 全角字符
+                        } else {
+                          len += 1; // 半角字符
+                        }
+                      }
+                      console.log(value);
+                      console.log(len);
+                      if (len <= 40) {
+                        return Promise.resolve();
+                      }
+                      return Promise.reject(
+                        new Error('规格型号不能超过40个字符!'),
+                      );
+                    },
+                  },
                 ]}
                 placeholder="请输入名称"
               />
@@ -1721,10 +1721,7 @@ export default ({ onClose, data, subOrders, orderOptType }) =&gt; {
                       optionItemRender(item) {
                         if (item.type === 'add') {
                           return (
-                            <div
-                              style={{ fontSize: '11px' }}
-                              title={item.name + '（新增商品信息）'}
-                            >
+                            <div title={item.name + '（新增商品信息）'}>
                               <span style={{ color: '#333333' }}>
                                 {item.label}
                               </span>
@@ -1735,7 +1732,6 @@ export default ({ onClose, data, subOrders, orderOptType }) =&gt; {
                         }
                         return (
                           <div
-                            style={{ fontSize: '11px' }}
                             title={
                               item.label +
                               ' | ' +
@@ -768,6 +768,9 @@ export interface ApplyInvoiceDto {
    */
   isUrgentText?: string;
   logicDelete?: boolean;
+  orderIdMap?: {
+    [propertyName: string]: Array<number>;
+  };
   /**
    * @description
    *   买方注册地址
@@ -1500,6 +1503,9 @@ export interface InvoiceRecordDto {
    */
   isUrgentText?: string;
   logicDelete?: boolean;
+  orderIdMap?: {
+    [propertyName: string]: Array<number>;
+  };
   /**
    * @description
    *   买方注册地址
@@ -7,3 +7,104 @@ export function getRandomNumber(numDigits: number) {
   const max = Math.pow(10, numDigits) - 1;
   return Math.floor(Math.random() * (max - min + 1)) + min;
 }
+
+//代码如下所示：
+export function convertCurrency(moneyParm) {
+  let money = moneyParm;
+  //汉字的数字
+  let cnNums = new Array(
+    '零',
+    '壹',
+    '贰',
+    '叁',
+    '肆',
+    '伍',
+    '陆',
+    '柒',
+    '捌',
+    '玖',
+  );
+  //基本单位
+  let cnIntRadice = new Array('', '拾', '佰', '仟');
+  //对应整数部分扩展单位
+  let cnIntUnits = new Array('', '万', '亿', '兆');
+  //对应小数部分单位
+  let cnDecUnits = new Array('角', '分', '毫', '厘');
+  //整数金额时后面跟的字符
+  let cnInteger = '整';
+  //整型完以后的单位
+  let cnIntLast = '圆';
+  //最大处理的数字
+  let maxNum = 999999999999999.9999;
+  //金额整数部分
+  let integerNum;
+  //金额小数部分
+  let decimalNum;
+  //输出的中文金额字符串
+  let chineseStr = '';
+  //分离金额后用的数组，预定义
+  let parts;
+  if (money === '') {
+    return '';
+  }
+  money = parseFloat(money);
+  if (money >= maxNum) {
+    //超出最大处理数字
+    return '';
+  }
+  if (money === 0) {
+    chineseStr = cnNums[0] + cnIntLast + cnInteger;
+    return chineseStr;
+  }
+  //转换为字符串
+  let moneyText = money.toString();
+  if (moneyText.indexOf('.') === -1) {
+    integerNum = moneyText;
+    decimalNum = '';
+  } else {
+    parts = moneyText.split('.');
+    integerNum = parts[0];
+    decimalNum = parts[1].substr(0, 4);
+  }
+  //获取整型部分转换
+  if (parseInt(integerNum, 10) > 0) {
+    let zeroCount = 0;
+    let IntLen = integerNum.length;
+    for (let i = 0; i < IntLen; i++) {
+      const n = integerNum.substr(i, 1);
+      const p = IntLen - i - 1;
+      const q = p / 4;
+      const m = p % 4;
+      if (n === '0') {
+        zeroCount++;
+      } else {
+        if (zeroCount > 0) {
+          chineseStr += cnNums[0];
+        }
+        //归零
+        zeroCount = 0;
+        chineseStr += cnNums[parseInt(n)] + cnIntRadice[m];
+      }
+      if (m === 0 && zeroCount < 4) {
+        chineseStr += cnIntUnits[q];
+      }
+    }
+    chineseStr += cnIntLast;
+  }
+  //小数部分
+  if (decimalNum !== '') {
+    let decLen = decimalNum.length;
+    for (let k = 0; k < decLen; k++) {
+      let n = decimalNum.substr(k, 1);
+      if (n !== '0') {
+        chineseStr += cnNums[Number(n)] + cnDecUnits[k];
+      }
+    }
+  }
+  if (chineseStr === '') {
+    chineseStr += cnNums[0] + cnIntLast + cnInteger;
+  } else if (decimalNum === '') {
+    chineseStr += cnInteger;
+  }
+  return chineseStr;
+}