fix

2024-12-28 17:32:16 +08:00
parent b97cdd4685
commit 579cc76f83
5 changed files with 256 additions and 179 deletions
--- a/src/components/SectionList/index.jsx
+++ b/src/components/SectionList/index.jsx
@@ -22,12 +22,15 @@ import { v4 as uuidv4 } from "uuid";
 import { supabase } from "@/config/supabase";
 import { supabaseService } from "@/hooks/supabaseService";
 const { Text } = Typography;
+import { defaultSymbol, formatExchangeRate } from "@/utils/exchange_rate";
 const SectionList = ({
  form,
  isView,
  formValues,
  type,
  currentCurrency = "TWD",
+  taxRate,
+  setTaxRate,
 }) => {
  const [editingSectionIndex, setEditingSectionIndex] = useState(null);
  const [editingSectionName, setEditingSectionName] = useState("");
@@ -36,33 +39,6 @@ const SectionList = ({
  const [loading, setLoading] = useState(false);
  const [units, setUnits] = useState([]);
  const [loadingUnits, setLoadingUnits] = useState(false);
-  const CURRENCY_SYMBOLS = {
-    CNY: "¥",
-    TWD: "NT$",
-    USD: "$",
-  };
-
-  const calculateItemAmount = (quantity, price) => {
-    const safeQuantity = Number(quantity) || 0;
-    const safePrice = Number(price) || 0;
-    return safeQuantity * safePrice;
-  };
-
-  const calculateSectionTotal = (items = []) => {
-    if (!Array.isArray(items)) return 0;
-    return items.reduce((sum, item) => {
-      if (!item) return sum;
-      return sum + calculateItemAmount(item.quantity, item.price);
-    }, 0);
-  };
-
-  const formatCurrency = (amount) => {
-    const safeAmount = Number(amount) || 0;
-    return `${CURRENCY_SYMBOLS[currentCurrency] || "NT$"}${safeAmount.toLocaleString("zh-TW", {
-      minimumFractionDigits: 2,
-      maximumFractionDigits: 2,
-    })}`;
-  };

  const fetchAvailableSections = async () => {
    try {
@@ -236,7 +212,7 @@ const SectionList = ({
                            {item.name}
                          </span>
                          <span className="text-sm text-gray-500 ml-2">
-                            {formatCurrency(item.price)}
+                            {formatExchangeRate(currentCurrency, item.price)}
                          </span>
                        </div>
                      ))}
@@ -250,7 +226,8 @@ const SectionList = ({
                  <div className="mt-4 pt-4 border-t flex justify-between items-center">
                    <span className="text-sm text-gray-600">总金额</span>
                    <span className="text-base font-medium text-blue-500">
-                      {formatCurrency(
+                      {formatExchangeRate(
+                        currentCurrency,
                        (section.attributes.items || []).reduce(
                          (sum, item) =>
                            sum + (item.price * (item.quantity || 1) || 0),
@@ -323,7 +300,7 @@ const SectionList = ({
    return (
      <div className="text-right">
        <span className="text-gray-500">
-          {formatCurrency(subtotal, currentCurrency)}
+          {formatExchangeRate(currentCurrency, subtotal)}
        </span>
      </div>
    );
@@ -345,13 +322,12 @@ const SectionList = ({
        <span className="text-gray-500">
          小计总额：
          <span className="text-blue-500 font-medium ml-2">
-            {formatCurrency(total, currentCurrency)}
+            {formatExchangeRate(currentCurrency, total)}
          </span>
        </span>
      </div>
    );
  });
-
  return (
    <>
      <Form.List name="sections">
@@ -442,32 +418,36 @@ const SectionList = ({
                          <div>描述/备注</div>
                          <div>单位</div>
                          <div className="text-center">数量</div>
-                          <div className="text-center">单价</div>
+                          <div className="text-center">
+                            单价({defaultSymbol})
+                          </div>
                          <div className="text-right">小计</div>
                          <div></div>
                        </div>

-                        {itemFields.map((itemField, itemIndex) => (
+                        {itemFields.map((itemField, itemIndex) => {
+                          const { key, ...restItemField } = itemField;
+                          return (
                            <div
-                            key={itemField.key}
+                              key={key}
                              className="grid grid-cols-[3fr_4fr_1fr_1fr_2fr_1fr_40px] gap-4 mb-4 items-start"
                            >
                              <Form.Item
-                              {...itemField}
+                                {...restItemField}
                                name={[itemField.name, "name"]}
                                className="!mb-0"
                              >
                                <Input placeholder="服务项目名称" />
                              </Form.Item>
                              <Form.Item
-                              {...itemField}
+                                {...restItemField}
                                name={[itemField.name, "description"]}
                                className="!mb-0"
                              >
                                <Input placeholder="请输入描述/备注" />
                              </Form.Item>
                              <Form.Item
-                              {...itemField}
+                                {...restItemField}
                                name={[itemField.name, "unit"]}
                                className="!mb-0"
                              >
@@ -503,10 +483,15 @@ const SectionList = ({
                                                  field.name,
                                                  "items",
                                                ]);
-                                            currentItems[itemField.name].unit =
-                                              value.trim();
+                                              currentItems[
+                                                itemField.name
+                                              ].unit = value.trim();
                                              form.setFieldValue(
-                                              ["sections", field.name, "items"],
+                                                [
+                                                  "sections",
+                                                  field.name,
+                                                  "items",
+                                                ],
                                                currentItems
                                              );
                                            }
@@ -518,7 +503,7 @@ const SectionList = ({
                                />
                              </Form.Item>
                              <Form.Item
-                              {...itemField}
+                                {...restItemField}
                                name={[itemField.name, "quantity"]}
                                className="!mb-0"
                              >
@@ -529,7 +514,7 @@ const SectionList = ({
                                />
                              </Form.Item>
                              <Form.Item
-                              {...itemField}
+                                {...restItemField}
                                name={[itemField.name, "price"]}
                                className="!mb-0"
                              >
@@ -562,7 +547,8 @@ const SectionList = ({
                                />
                              )}
                            </div>
-                        ))}
+                          );
+                        })}

                        {!isView && (
                          <Button
@@ -586,8 +572,9 @@ const SectionList = ({
              ))}
            </div>

+            <div className="flex items-center justify-center mt-6">
              {!isView && (
-              <div className="mt-6 flex justify-center">
+                <div className="w-full flex justify-center">
                  <Button
                    type="dashed"
                    onClick={() => {
@@ -602,6 +589,58 @@ const SectionList = ({
                </div>
              )}

+              <div className="flex w-fit flex-shrink-0 flex-col gap-1">
+                <span className="text-gray-500 flex items-center">
+                  税前总额：
+                  <span className="text-blue-500 font-medium ml-2">
+                    {formatExchangeRate(
+                      currentCurrency,
+                      formValues?.sections?.reduce((sum, section) => {
+                        return (
+                          sum +
+                          section.items.reduce((sum, item) => {
+                            return sum + item.price * item.quantity;
+                          }, 0)
+                        );
+                      }, 0)
+                    )}
+                  </span>
+                </span>
+
+                <div className="text-gray-500 flex items-center">
+                  税率：
+                  <div className="text-blue-500 font-medium ml-2">
+                    <InputNumber
+                      suffix="%"
+                      style={{ width: 120 }}
+                      min={0}
+                      max={100}
+                      value={taxRate}
+                      onChange={(value) => setTaxRate(value)}
+                    />
+                  </div>
+                </div>
+
+                <span className="text-gray-500 flex items-center">
+                  税后总额：
+                  <span className="text-blue-500 font-medium ml-2">
+                    {formatExchangeRate(
+                      currentCurrency,
+                      formValues?.sections?.reduce((sum, section) => {
+                        return (
+                          sum +
+                          section.items.reduce((sum, item) => {
+                            return sum + item.price * item.quantity;
+                          }, 0)
+                        );
+                      }, 0) *
+                        (1 + taxRate / 100)
+                    )}
+                  </span>
+                </span>
+              </div>
+            </div>
+
            <Modal
              title={<h3 className="text-lg font-medium">选择模版</h3>}
              open={templateModalVisible}
@@ -619,5 +658,4 @@ const SectionList = ({
  );
 };

-
 export default SectionList;
--- a/src/pages/company/quotation/detail/index.jsx
+++ b/src/pages/company/quotation/detail/index.jsx
@@ -734,7 +734,7 @@ const QuotationForm = () => {
          </Card>

          <Card
-            className="shadow-sm rounded-lg"
+            className="shadow-sm rounded-lg mt-6"
            type="inner"
            title={
              <span className="flex items-center space-x-2 text-gray-700">
@@ -750,6 +750,8 @@ const QuotationForm = () => {
              isView={isView}
              formValues={formValues}
              currentCurrency={currentCurrency}
+              taxRate={taxRate}
+              setTaxRate={setTaxRate}
            />
          </Card>
        </Form>
--- a/src/pages/company/quotation/index.jsx
+++ b/src/pages/company/quotation/index.jsx
@@ -4,11 +4,8 @@ import { PlusOutlined, EditOutlined, DeleteOutlined, EyeOutlined, CopyOutlined,
 import { useResources } from '@/hooks/resource/useResource';
 import { useNavigate } from 'react-router-dom';
 import { supabase } from '@/config/supabase'
-const CURRENCY_SYMBOLS = {
-  CNY: "¥",
-  TWD: "NT$",
-  USD: "$",
-};
+import { formatExchangeRate,EXCHANGE_RATE,defaultSymbol } from '@/utils/exchange_rate';
+
 const QuotationPage = () => {
  const navigate = useNavigate();
  const [pagination, setPagination] = useState({ current: 1, pageSize: 10 });
@@ -150,19 +147,18 @@ const QuotationPage = () => {
      align: 'right',
      render: (attributes) => {
        // 获取货币符号
-        const currencySymbol = CURRENCY_SYMBOLS[attributes.currency] || '¥';
+        const currencySymbol = EXCHANGE_RATE[attributes?.currency]?.symbol || defaultSymbol;

        return (
          <div className="space-y-1">
            <div className="flex justify-between items-center text-sm">
              <Typography.Text type="secondary" style={{ fontSize: '12px' }}>
-                税前：{currencySymbol}{attributes.beforeTaxAmount?.toLocaleString()}
+                税前：{formatExchangeRate(attributes?.currency, attributes.beforeTaxAmount)}
              </Typography.Text>
            </div>
            <div className="flex justify-between items-center">
              <Statistic
-                value={attributes.afterTaxAmount}
-                prefix={currencySymbol}
+                value={formatExchangeRate(attributes?.currency, attributes.afterTaxAmount)}
                precision={2}
                valueStyle={{
                  fontSize: '16px',
--- a/src/pages/company/quotation/view/index.jsx
+++ b/src/pages/company/quotation/view/index.jsx
@@ -7,12 +7,7 @@ import html2canvas from 'html2canvas';
 import jsPDF from 'jspdf';

 const { Title, Text } = Typography;
-
-const CURRENCY_SYMBOLS = {
-  CNY: "¥",
-  TWD: "NT$",
-  USD: "$",
-};
+import { EXCHANGE_RATE,defaultSymbol } from '@/utils/exchange_rate';

 const QuotationPreview = () => {
  const { id } = useParams();
@@ -132,7 +127,7 @@ const QuotationPreview = () => {
  if (!quotation) return null;

  const { attributes } = quotation;
-  const currencySymbol = CURRENCY_SYMBOLS[attributes.currency] || '¥';
+  const currencySymbol = EXCHANGE_RATE[attributes.currency]?.symbol || defaultSymbol;

  return (
    <div className="max-w-4xl mx-auto p-6">
--- a/src/utils/exchange_rate.js
+++ b/src/utils/exchange_rate.js
@@ -0,0 +1,46 @@
+export const defaultSymbol = "NT$";
+
+export const EXCHANGE_RATE = {
+  CNY: {
+    symbol: "¥",
+    rate: 4.5, //1人民币约等于4.5新台币
+  },
+  TWD: {
+    symbol: "NT$",
+    rate: 1,
+  },
+  USD: {
+    symbol: "$",
+    rate: 32.82, //1美元约等于32.82新台币
+  },
+};
+
+export const formatCurrency = (currency, amount) => {
+  const safeAmount = Number(amount) || 0;
+  return `${EXCHANGE_RATE[currency].symbol || "NT$"}${safeAmount.toLocaleString(
+    "zh-TW",
+    {
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 2,
+    }
+  )}`;
+};
+
+export const getExchangeRate = (fromCurrency, amount) => {
+  // 如果没有传入货币类型、金额，或货币类型不存在，则返回原金额
+  if (!fromCurrency || !amount || !EXCHANGE_RATE[fromCurrency]) {
+    return amount || 0;
+  }
+
+  // 因为是以新台币为基准，所以需要将其他货币转换为新台币金额
+  if (fromCurrency === "TWD") {
+    return amount;
+  }
+
+  // 其他货币转换为新台币
+  return (amount / EXCHANGE_RATE[fromCurrency].rate).toFixed(2);
+};
+
+export const formatExchangeRate = (currency, amount) => {
+  return formatCurrency(currency, getExchangeRate(currency, amount));
+};