Merge branch 'main' of github.com:xuqssq/uppmkt-admin
This commit is contained in:
‘Liammcl’
@@ -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,127 +418,137 @@ 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) => (
|
||||
<div
|
||||
key={itemField.key}
|
||||
className="grid grid-cols-[3fr_4fr_1fr_1fr_2fr_1fr_40px] gap-4 mb-4 items-start"
|
||||
>
|
||||
<Form.Item
|
||||
{...itemField}
|
||||
name={[itemField.name, "name"]}
|
||||
className="!mb-0"
|
||||
{itemFields.map((itemField, itemIndex) => {
|
||||
const { key, ...restItemField } = itemField;
|
||||
return (
|
||||
<div
|
||||
key={key}
|
||||
className="grid grid-cols-[3fr_4fr_1fr_1fr_2fr_1fr_40px] gap-4 mb-4 items-start"
|
||||
>
|
||||
<Input placeholder="服务项目名称" />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
{...itemField}
|
||||
name={[itemField.name, "description"]}
|
||||
className="!mb-0"
|
||||
>
|
||||
<Input placeholder="请输入描述/备注" />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
{...itemField}
|
||||
name={[itemField.name, "unit"]}
|
||||
className="!mb-0"
|
||||
>
|
||||
<Select
|
||||
placeholder="选择单位"
|
||||
loading={loadingUnits}
|
||||
showSearch
|
||||
allowClear
|
||||
style={{ minWidth: "120px" }}
|
||||
options={units.map((unit) => ({
|
||||
label: unit.attributes.name,
|
||||
value: unit.attributes.name,
|
||||
}))}
|
||||
onDropdownVisibleChange={(open) => {
|
||||
if (open) fetchUnits();
|
||||
}}
|
||||
dropdownRender={(menu) => (
|
||||
<>
|
||||
{menu}
|
||||
<Divider style={{ margin: "12px 0" }} />
|
||||
<div style={{ padding: "4px" }}>
|
||||
<Input.Search
|
||||
placeholder="输入新单位名称"
|
||||
enterButton={<PlusOutlined />}
|
||||
onSearch={async (value) => {
|
||||
if (!value.trim()) return;
|
||||
if (
|
||||
await handleAddUnit(value.trim())
|
||||
) {
|
||||
const currentItems =
|
||||
form.getFieldValue([
|
||||
"sections",
|
||||
field.name,
|
||||
"items",
|
||||
]);
|
||||
currentItems[itemField.name].unit =
|
||||
value.trim();
|
||||
form.setFieldValue(
|
||||
["sections", field.name, "items"],
|
||||
currentItems
|
||||
);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
<Form.Item
|
||||
{...restItemField}
|
||||
name={[itemField.name, "name"]}
|
||||
className="!mb-0"
|
||||
>
|
||||
<Input placeholder="服务项目名称" />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
{...restItemField}
|
||||
name={[itemField.name, "description"]}
|
||||
className="!mb-0"
|
||||
>
|
||||
<Input placeholder="请输入描述/备注" />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
{...restItemField}
|
||||
name={[itemField.name, "unit"]}
|
||||
className="!mb-0"
|
||||
>
|
||||
<Select
|
||||
placeholder="选择单位"
|
||||
loading={loadingUnits}
|
||||
showSearch
|
||||
allowClear
|
||||
style={{ minWidth: "120px" }}
|
||||
options={units.map((unit) => ({
|
||||
label: unit.attributes.name,
|
||||
value: unit.attributes.name,
|
||||
}))}
|
||||
onDropdownVisibleChange={(open) => {
|
||||
if (open) fetchUnits();
|
||||
}}
|
||||
dropdownRender={(menu) => (
|
||||
<>
|
||||
{menu}
|
||||
<Divider style={{ margin: "12px 0" }} />
|
||||
<div style={{ padding: "4px" }}>
|
||||
<Input.Search
|
||||
placeholder="输入新单位名称"
|
||||
enterButton={<PlusOutlined />}
|
||||
onSearch={async (value) => {
|
||||
if (!value.trim()) return;
|
||||
if (
|
||||
await handleAddUnit(value.trim())
|
||||
) {
|
||||
const currentItems =
|
||||
form.getFieldValue([
|
||||
"sections",
|
||||
field.name,
|
||||
"items",
|
||||
]);
|
||||
currentItems[
|
||||
itemField.name
|
||||
].unit = value.trim();
|
||||
form.setFieldValue(
|
||||
[
|
||||
"sections",
|
||||
field.name,
|
||||
"items",
|
||||
],
|
||||
currentItems
|
||||
);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
{...restItemField}
|
||||
name={[itemField.name, "quantity"]}
|
||||
className="!mb-0"
|
||||
>
|
||||
<InputNumber
|
||||
placeholder="数量"
|
||||
min={0}
|
||||
className="w-full"
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
{...restItemField}
|
||||
name={[itemField.name, "price"]}
|
||||
className="!mb-0"
|
||||
>
|
||||
<InputNumber
|
||||
placeholder="单价"
|
||||
min={0}
|
||||
className="w-full"
|
||||
/>
|
||||
</Form.Item>
|
||||
<ItemSubtotal
|
||||
quantity={
|
||||
formValues?.sections?.[sectionIndex]?.items?.[
|
||||
itemIndex
|
||||
]?.quantity
|
||||
}
|
||||
price={
|
||||
formValues?.sections?.[sectionIndex]?.items?.[
|
||||
itemIndex
|
||||
]?.price
|
||||
}
|
||||
currentCurrency={currentCurrency}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
{...itemField}
|
||||
name={[itemField.name, "quantity"]}
|
||||
className="!mb-0"
|
||||
>
|
||||
<InputNumber
|
||||
placeholder="数量"
|
||||
min={0}
|
||||
className="w-full"
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
{...itemField}
|
||||
name={[itemField.name, "price"]}
|
||||
className="!mb-0"
|
||||
>
|
||||
<InputNumber
|
||||
placeholder="单价"
|
||||
min={0}
|
||||
className="w-full"
|
||||
/>
|
||||
</Form.Item>
|
||||
<ItemSubtotal
|
||||
quantity={
|
||||
formValues?.sections?.[sectionIndex]?.items?.[
|
||||
itemIndex
|
||||
]?.quantity
|
||||
}
|
||||
price={
|
||||
formValues?.sections?.[sectionIndex]?.items?.[
|
||||
itemIndex
|
||||
]?.price
|
||||
}
|
||||
currentCurrency={currentCurrency}
|
||||
/>
|
||||
{!isView && itemFields.length > 1 && (
|
||||
<Button
|
||||
type="text"
|
||||
danger
|
||||
icon={<DeleteOutlined />}
|
||||
onClick={() => removeItem(itemField.name)}
|
||||
className="flex items-center justify-center"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
{!isView && itemFields.length > 1 && (
|
||||
<Button
|
||||
type="text"
|
||||
danger
|
||||
icon={<DeleteOutlined />}
|
||||
onClick={() => removeItem(itemField.name)}
|
||||
className="flex items-center justify-center"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
||||
{!isView && (
|
||||
<Button
|
||||
@@ -586,21 +572,74 @@ const SectionList = ({
|
||||
))}
|
||||
</div>
|
||||
|
||||
{!isView && (
|
||||
<div className="mt-6 flex justify-center">
|
||||
<Button
|
||||
type="dashed"
|
||||
onClick={() => {
|
||||
setTemplateModalVisible(true);
|
||||
fetchAvailableSections();
|
||||
}}
|
||||
icon={<PlusOutlined />}
|
||||
className="w-1/3 border-2 hover:border-blue-400 hover:text-blue-500"
|
||||
>
|
||||
新建模块
|
||||
</Button>
|
||||
<div className="flex items-center justify-center mt-6">
|
||||
{!isView && (
|
||||
<div className="w-full flex justify-center">
|
||||
<Button
|
||||
type="dashed"
|
||||
onClick={() => {
|
||||
setTemplateModalVisible(true);
|
||||
fetchAvailableSections();
|
||||
}}
|
||||
icon={<PlusOutlined />}
|
||||
className="w-1/3 border-2 hover:border-blue-400 hover:text-blue-500"
|
||||
>
|
||||
新建模块
|
||||
</Button>
|
||||
</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>}
|
||||
@@ -619,5 +658,4 @@ const SectionList = ({
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
export default SectionList;
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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',
|
||||
|
||||
@@ -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">
|
||||
|
||||
46
src/utils/exchange_rate.js
Normal file
46
src/utils/exchange_rate.js
Normal file
@@ -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));
|
||||
};
|
||||
Reference in New Issue
Block a user