u
This commit is contained in:
oneao committed
1 parent
34240d2e16
commit
bf350d8d35
21 files changed
+670
-304
No files matched your search
@@ -5,6 +5,7 @@ import (
|
||||
"allapp/api/types"
|
||||
"allapp/db"
|
||||
"allapp/db/repo"
|
||||
"allapp/utils/errorx"
|
||||
"allapp/utils/pgtypex"
|
||||
"allapp/utils/requestx"
|
||||
"allapp/utils/responsex"
|
||||
@@ -57,6 +58,7 @@ func ListFinanceRecords(c fiber.Ctx) error {
|
||||
RecordTime: pgtypex.TimePtrToPgDate(startTime),
|
||||
RecordTime_2: pgtypex.TimePtrToPgDate(endTime),
|
||||
Column4: categoryId,
|
||||
Column5: dto.CategoryType,
|
||||
})
|
||||
|
||||
if err != nil {
|
||||
@@ -131,7 +133,7 @@ func UpdateFinanceRecord(c fiber.Ctx) error {
|
||||
}
|
||||
|
||||
err = db.Queries.UpdateFinanceRecord(c.Context(), repo.UpdateFinanceRecordParams{
|
||||
ID: uniqueid.NextId(),
|
||||
ID: dto.Id,
|
||||
CategoryID: dto.CategoryId,
|
||||
Amount: pgtypex.StringToNumeric(dto.Amount),
|
||||
Remark: pgtypex.StringToText(dto.Remark),
|
||||
@@ -161,3 +163,38 @@ func DeleteFinanceRecord(c fiber.Ctx) error {
|
||||
|
||||
return responsex.OK(c, nil)
|
||||
}
|
||||
|
||||
// GetFinanceRecordDetail 删除记账记录
|
||||
func GetFinanceRecordDetail(c fiber.Ctx) error {
|
||||
dto := new(types.FinanceRecordDetailDTO)
|
||||
if err := requestx.BindAndValidate(c, dto); err != nil {
|
||||
return err
|
||||
}
|
||||
|
||||
recordDetail, err := db.Queries.GetFinanceRecordDetail(c.Context(), dto.Id)
|
||||
|
||||
if err != nil {
|
||||
if errorx.IsNotFound(err) {
|
||||
return responsex.Error(c, "该条记录不存在")
|
||||
}
|
||||
return err
|
||||
}
|
||||
|
||||
vo := new(types.FinanceRecordDetailVO)
|
||||
|
||||
vo.Id = recordDetail.ID
|
||||
vo.CategoryId = recordDetail.CategoryID
|
||||
vo.Amount = pgtypex.NumericToString(recordDetail.Amount)
|
||||
vo.RecordTime = pgtypex.DateToString(recordDetail.RecordTime)
|
||||
vo.Remark = pgtypex.TextToString(recordDetail.Remark)
|
||||
|
||||
vo.CreateTime = pgtypex.TimestamptzToMillis(recordDetail.CreateTime)
|
||||
vo.CreateMemberId = recordDetail.CreateBy
|
||||
vo.CreateMemberName = pgtypex.TextToString(recordDetail.CreateMemberName)
|
||||
|
||||
vo.UpdateTime = pgtypex.TimestamptzToMillis(recordDetail.UpdateTime)
|
||||
vo.UpdateMemberId = recordDetail.UpdateBy
|
||||
vo.UpdateMemberName = pgtypex.TextToString(recordDetail.UpdateMemberName)
|
||||
|
||||
return responsex.OK(c, vo)
|
||||
}
|
||||
@@ -52,6 +52,7 @@ func SetupRouters(app *fiber.App) {
|
||||
financeRouter.Post("/record/create", finance.CreateFinanceRecord)
|
||||
financeRouter.Post("/record/update", finance.UpdateFinanceRecord)
|
||||
financeRouter.Post("/record/delete", finance.DeleteFinanceRecord)
|
||||
financeRouter.Post("/record/detail", finance.GetFinanceRecordDetail)
|
||||
|
||||
// authGroup.Get("/user/profile", user.GetProfile)
|
||||
// spaceGroup.Get("/space/info", space.GetInfo)
|
||||
|
||||
@@ -63,9 +63,10 @@ type FinanceRecord struct {
|
||||
}
|
||||
|
||||
type ListFinanceRecordsDTO struct {
|
||||
StartTime string `json:"start_time"`
|
||||
EndTime string `json:"end_time"`
|
||||
CategoryId int64 `json:"category_id"`
|
||||
StartTime string `json:"start_time"`
|
||||
EndTime string `json:"end_time"`
|
||||
CategoryId int64 `json:"category_id"`
|
||||
CategoryType int16 `json:"category_type"`
|
||||
}
|
||||
|
||||
type ListFinanceRecordsVO struct {
|
||||
@@ -93,3 +94,21 @@ type UpdateFinanceRecordDTO struct {
|
||||
type DeleteFinanceRecordDTO struct {
|
||||
Id int64 `json:"id" validate:"required"`
|
||||
}
|
||||
|
||||
type FinanceRecordDetailDTO struct {
|
||||
Id int64 `json:"id" validate:"required"`
|
||||
}
|
||||
|
||||
type FinanceRecordDetailVO struct {
|
||||
Id int64 `json:"id"`
|
||||
CategoryId int64 `json:"category_id"`
|
||||
Amount string `json:"amount"`
|
||||
RecordTime string `json:"record_time"`
|
||||
Remark string `json:"remark"`
|
||||
CreateTime int64 `json:"create_time"`
|
||||
CreateMemberId int64 `json:"create_member_id"`
|
||||
CreateMemberName string `json:"create_member_name"`
|
||||
UpdateTime int64 `json:"update_time"`
|
||||
UpdateMemberId int64 `json:"update_member_id"`
|
||||
UpdateMemberName string `json:"update_member_name"`
|
||||
}
|
||||
@@ -4,16 +4,14 @@ SELECT
|
||||
su.member_name
|
||||
FROM finance_record fr
|
||||
LEFT JOIN space_member su
|
||||
ON fr.space_id = su.space_id
|
||||
AND fr.update_by = su.user_id
|
||||
ON fr.space_id = su.space_id AND fr.update_by = su.user_id
|
||||
LEFT JOIN finance_category_space fcs ON fr.category_id = fcs.id
|
||||
WHERE
|
||||
fr.space_id = $1
|
||||
AND fr.record_time >= $2
|
||||
AND fr.record_time < $3
|
||||
AND (
|
||||
$4 = 0
|
||||
OR fr.category_id = $4
|
||||
)
|
||||
AND fr.category_id = COALESCE(NULLIF($4::bigint, 0), fr.category_id)
|
||||
AND fcs.type = COALESCE(NULLIF($5::smallint, 0), fcs.type)
|
||||
ORDER BY
|
||||
fr.record_time DESC,
|
||||
fr.create_time DESC;
|
||||
@@ -37,4 +35,23 @@ WHERE id = $1;
|
||||
DELETE FROM finance_record WHERE id = $1;
|
||||
|
||||
-- name: DeleteFinanceRecordByCategoryId :exec
|
||||
DELETE FROM finance_record WHERE category_id = $1;
|
||||
DELETE FROM finance_record WHERE category_id = $1;
|
||||
|
||||
-- name: GetFinanceRecordDetail :one
|
||||
SELECT
|
||||
fr.id,
|
||||
fr.category_id,
|
||||
fr.amount,
|
||||
fr.record_time,
|
||||
fr.remark,
|
||||
fr.create_by,
|
||||
fr.create_time,
|
||||
cm.nickname AS create_member_name,
|
||||
fr.update_by,
|
||||
fr.update_time,
|
||||
um.nickname AS update_member_name
|
||||
FROM finance_record fr
|
||||
LEFT JOIN "user" cm ON cm.id = fr.create_by
|
||||
LEFT JOIN "user" um ON um.id = fr.update_by
|
||||
WHERE fr.id = $1
|
||||
LIMIT 1;
|
||||
@@ -29,6 +29,59 @@ func (q *Queries) DeleteFinanceRecordByCategoryId(ctx context.Context, categoryI
|
||||
return err
|
||||
}
|
||||
|
||||
const getFinanceRecordDetail = `-- name: GetFinanceRecordDetail :one
|
||||
SELECT
|
||||
fr.id,
|
||||
fr.category_id,
|
||||
fr.amount,
|
||||
fr.record_time,
|
||||
fr.remark,
|
||||
fr.create_by,
|
||||
fr.create_time,
|
||||
cm.nickname AS create_member_name,
|
||||
fr.update_by,
|
||||
fr.update_time,
|
||||
um.nickname AS update_member_name
|
||||
FROM finance_record fr
|
||||
LEFT JOIN "user" cm ON cm.id = fr.create_by
|
||||
LEFT JOIN "user" um ON um.id = fr.update_by
|
||||
WHERE fr.id = $1
|
||||
LIMIT 1
|
||||
`
|
||||
|
||||
type GetFinanceRecordDetailRow struct {
|
||||
ID int64
|
||||
CategoryID int64
|
||||
Amount pgtype.Numeric
|
||||
RecordTime pgtype.Date
|
||||
Remark pgtype.Text
|
||||
CreateBy int64
|
||||
CreateTime pgtype.Timestamptz
|
||||
CreateMemberName pgtype.Text
|
||||
UpdateBy int64
|
||||
UpdateTime pgtype.Timestamptz
|
||||
UpdateMemberName pgtype.Text
|
||||
}
|
||||
|
||||
func (q *Queries) GetFinanceRecordDetail(ctx context.Context, id int64) (GetFinanceRecordDetailRow, error) {
|
||||
row := q.db.QueryRow(ctx, getFinanceRecordDetail, id)
|
||||
var i GetFinanceRecordDetailRow
|
||||
err := row.Scan(
|
||||
&i.ID,
|
||||
&i.CategoryID,
|
||||
&i.Amount,
|
||||
&i.RecordTime,
|
||||
&i.Remark,
|
||||
&i.CreateBy,
|
||||
&i.CreateTime,
|
||||
&i.CreateMemberName,
|
||||
&i.UpdateBy,
|
||||
&i.UpdateTime,
|
||||
&i.UpdateMemberName,
|
||||
)
|
||||
return i, err
|
||||
}
|
||||
|
||||
const insertFinanceRecord = `-- name: InsertFinanceRecord :exec
|
||||
INSERT INTO finance_record(id,category_id,space_id,amount,record_time,remark,create_by,update_by,create_time,update_time)
|
||||
VALUES ($1,$2,$3,$4,$5,$6,$7,$8,NOW(),NOW())
|
||||
@@ -65,16 +118,14 @@ SELECT
|
||||
su.member_name
|
||||
FROM finance_record fr
|
||||
LEFT JOIN space_member su
|
||||
ON fr.space_id = su.space_id
|
||||
AND fr.update_by = su.user_id
|
||||
ON fr.space_id = su.space_id AND fr.update_by = su.user_id
|
||||
LEFT JOIN finance_category_space fcs ON fr.category_id = fcs.id
|
||||
WHERE
|
||||
fr.space_id = $1
|
||||
AND fr.record_time >= $2
|
||||
AND fr.record_time < $3
|
||||
AND (
|
||||
$4 = 0
|
||||
OR fr.category_id = $4
|
||||
)
|
||||
AND fr.category_id = COALESCE(NULLIF($4::bigint, 0), fr.category_id)
|
||||
AND fcs.type = COALESCE(NULLIF($5::smallint, 0), fcs.type)
|
||||
ORDER BY
|
||||
fr.record_time DESC,
|
||||
fr.create_time DESC
|
||||
@@ -84,7 +135,8 @@ type ListFinanceRecordsParams struct {
|
||||
SpaceID int64
|
||||
RecordTime pgtype.Date
|
||||
RecordTime_2 pgtype.Date
|
||||
Column4 interface{}
|
||||
Column4 int64
|
||||
Column5 int16
|
||||
}
|
||||
|
||||
type ListFinanceRecordsRow struct {
|
||||
@@ -107,6 +159,7 @@ func (q *Queries) ListFinanceRecords(ctx context.Context, arg ListFinanceRecords
|
||||
arg.RecordTime,
|
||||
arg.RecordTime_2,
|
||||
arg.Column4,
|
||||
arg.Column5,
|
||||
)
|
||||
if err != nil {
|
||||
return nil, err
|
||||
|
||||
@@ -110,4 +110,3 @@ create table finance_record
|
||||
update_by bigint not null,
|
||||
update_time timestamp with time zone default now()
|
||||
);
|
||||
|
||||
@@ -10,7 +10,7 @@ export default function TestScreen() {
|
||||
const spaceStore = useSpaceStore()
|
||||
const navigation = useNavigation()
|
||||
|
||||
console.log(navigation.getState()?.routes)
|
||||
console.log(navigation.getState()?.routeNames)
|
||||
|
||||
return (
|
||||
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
|
||||
|
||||
@@ -46,6 +46,7 @@ export default function CategorySheet({
|
||||
|
||||
const handleSelect = useCallback(
|
||||
(item: FinanceCategory) => {
|
||||
console.log(item)
|
||||
onSelect?.(item)
|
||||
onClose?.()
|
||||
},
|
||||
@@ -74,9 +75,9 @@ export default function CategorySheet({
|
||||
{
|
||||
title: '筛选',
|
||||
data: [
|
||||
createVirtualCategory(-1, '全部', -1),
|
||||
createVirtualCategory(-2, '支出', 0),
|
||||
createVirtualCategory(-3, '收入', 1),
|
||||
createVirtualCategory(0, '全部', -1),
|
||||
createVirtualCategory(-1, '支出', 0),
|
||||
createVirtualCategory(-2, '收入', 1),
|
||||
],
|
||||
},
|
||||
{
|
||||
|
||||
@@ -1,16 +1,15 @@
|
||||
import type { FinanceRecord, FinanceRecordGroup } from '@/types/finance/record'
|
||||
import React, { useCallback, useState } from 'react'
|
||||
import type { FinanceRecord } from '@/types/finance/record'
|
||||
import React, { useCallback, useEffect, useState } from 'react'
|
||||
import { Pressable, RefreshControl, SectionList, Text, Vibration, View } from 'react-native'
|
||||
import { LucideIcon } from '@/components/common/ao'
|
||||
import EmptyState from '@/components/common/EmptyStatus'
|
||||
import MoneyCategoryIcon from '@/components/common/MoneyCategoryIcon'
|
||||
import { Menu, MenuItem, MenuItemLabel, MenuSeparator } from '@/components/ui/menu'
|
||||
import { useMoneyCategoryStore } from '@/store/moneyCategory'
|
||||
import { useFinanceStore } from '@/store/finance'
|
||||
import { useUserStore } from '@/store/user'
|
||||
import { MoneyCategoryEnum } from '@/types/money/category'
|
||||
import { FinanceCategoryEnum } from '@/types/finance/category'
|
||||
|
||||
interface StaticTransactionsProps {
|
||||
records: FinanceRecordGroup[]
|
||||
onUpdate?: (data: FinanceRecord) => void
|
||||
onDelete?: (id: number) => void
|
||||
onDetail?: (id: number) => void
|
||||
@@ -19,18 +18,18 @@ interface StaticTransactionsProps {
|
||||
}
|
||||
|
||||
export default function StaticTransactions({
|
||||
records,
|
||||
onUpdate,
|
||||
onDelete,
|
||||
onDetail,
|
||||
onLoadMore,
|
||||
onRefreshData,
|
||||
}: StaticTransactionsProps) {
|
||||
const moneyCategoryStore = useMoneyCategoryStore()
|
||||
const financeStore = useFinanceStore()
|
||||
const userID = useUserStore().userInfo?.id
|
||||
const [refreshing, setRefreshing] = useState(false)
|
||||
const [loadingMore, setLoadingMore] = useState(false)
|
||||
const [selectedId, setSelectedId] = useState<number | null>(null)
|
||||
const [sections, setSections] = useState<any[]>([])
|
||||
|
||||
const handleRefresh = useCallback(async () => {
|
||||
if (!onRefreshData)
|
||||
@@ -56,12 +55,14 @@ export default function StaticTransactions({
|
||||
}
|
||||
}, [onLoadMore, loadingMore])
|
||||
|
||||
const sections = records.map(group => ({
|
||||
title: group.record_time,
|
||||
totalIncome: group.income,
|
||||
totalExpense: group.expense,
|
||||
data: group.records,
|
||||
}))
|
||||
useEffect(() => {
|
||||
setSections(financeStore.records.map(group => ({
|
||||
title: group.record_time,
|
||||
totalIncome: group.income,
|
||||
totalExpense: group.expense,
|
||||
data: group.records,
|
||||
})))
|
||||
}, [financeStore.records])
|
||||
|
||||
return (
|
||||
<SectionList
|
||||
@@ -115,7 +116,7 @@ export default function StaticTransactions({
|
||||
)}
|
||||
|
||||
renderItem={({ item }) => {
|
||||
const category = moneyCategoryStore.getCategoryById(item.category_id)
|
||||
const category = financeStore.getCategoryById(item.category_id)
|
||||
return (
|
||||
<Menu
|
||||
style={{
|
||||
@@ -174,7 +175,7 @@ export default function StaticTransactions({
|
||||
<Text
|
||||
className="text-sm text-gray-600 text-right"
|
||||
>
|
||||
{category?.type === MoneyCategoryEnum.Income ? '+' : '-'}
|
||||
{category?.type === FinanceCategoryEnum.Income ? '+' : '-'}
|
||||
{' '}
|
||||
{item.amount}
|
||||
</Text>
|
||||
@@ -184,32 +185,27 @@ export default function StaticTransactions({
|
||||
)
|
||||
}}
|
||||
>
|
||||
{
|
||||
userID === item.member_id && (
|
||||
<>
|
||||
<MenuItem
|
||||
key="update"
|
||||
textValue="update"
|
||||
className="flex gap-3"
|
||||
style={{
|
||||
minWidth: 150,
|
||||
height: 42,
|
||||
paddingTop: 0,
|
||||
paddingBottom: 0,
|
||||
alignItems: 'center',
|
||||
borderRadius: 0,
|
||||
}}
|
||||
onPress={() => {
|
||||
onUpdate?.(item)
|
||||
}}
|
||||
>
|
||||
<LucideIcon icon="Pencil" size={18} />
|
||||
<MenuItemLabel className="text-lg">更新</MenuItemLabel>
|
||||
</MenuItem>
|
||||
<MenuSeparator />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
<MenuItem
|
||||
key="update"
|
||||
textValue="update"
|
||||
className="flex gap-3"
|
||||
style={{
|
||||
minWidth: 150,
|
||||
height: 42,
|
||||
paddingTop: 0,
|
||||
paddingBottom: 0,
|
||||
alignItems: 'center',
|
||||
borderRadius: 0,
|
||||
}}
|
||||
onPress={() => {
|
||||
onUpdate?.(item)
|
||||
}}
|
||||
>
|
||||
<LucideIcon icon="Pencil" size={18} />
|
||||
<MenuItemLabel className="text-lg">更新</MenuItemLabel>
|
||||
</MenuItem>
|
||||
<MenuSeparator />
|
||||
|
||||
<MenuItem
|
||||
key="delete"
|
||||
@@ -231,6 +227,7 @@ export default function StaticTransactions({
|
||||
<MenuItemLabel className="text-lg">删除</MenuItemLabel>
|
||||
</MenuItem>
|
||||
<MenuSeparator />
|
||||
|
||||
<MenuItem
|
||||
key="detail"
|
||||
textValue="detail"
|
||||
|
||||
@@ -1,17 +1,17 @@
|
||||
import type { DateMorePickerMode } from '@/components/common/ao/DateMorePicker'
|
||||
import type { FinanceCategory } from '@/types/finance/category'
|
||||
import { useFocusEffect, useRouter } from 'expo-router'
|
||||
import React, { useCallback, useEffect, useState } from 'react'
|
||||
import { Image, Text, TouchableOpacity, View } from 'react-native'
|
||||
import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context'
|
||||
import { toast } from 'sonner-native'
|
||||
import { ADateMorePicker, ADatePicker, ADrawer, AListItem, LucideIcon } from '@/components/common/ao'
|
||||
import { resolveDateRange } from '@/components/common/ao/DateMorePicker'
|
||||
import { Fab, FabIcon } from '@/components/ui/fab'
|
||||
import { AddIcon } from '@/components/ui/icon'
|
||||
import { listFinanceRecordsApi } from '@/request/api/finance/record'
|
||||
import { deleteMoneyRecordApi, listMoneyRecordsApi } from '@/request/api/money/record'
|
||||
import { deleteFinanceRecordApi, listFinanceRecordsApi } from '@/request/api/finance/record'
|
||||
import { useFinanceStore } from '@/store/finance'
|
||||
import { getCurrentYearMonth, normalizeDateTime } from '@/utils/time'
|
||||
import { toast } from '@/utils/toast'
|
||||
import { getCurrentYearMonth } from '@/utils/time'
|
||||
import CategorySheet from './components/CategorySheet'
|
||||
import TransactionsList from './components/TransactionsList'
|
||||
|
||||
@@ -27,10 +27,14 @@ export default function Money() {
|
||||
const [showDatePicker, setShowDatePicker] = useState(false)
|
||||
const [dateMode, setDateMode] = useState<DateMorePickerMode>('month')
|
||||
|
||||
const [searchParams, setSearchParams] = useState({
|
||||
const [searchParams, setSearchParams] = useState<{
|
||||
startTime: string
|
||||
endTime: string
|
||||
category: FinanceCategory | null
|
||||
}>({
|
||||
startTime: getCurrentYearMonth(),
|
||||
endTime: '',
|
||||
category: -1,
|
||||
category: null,
|
||||
})
|
||||
|
||||
const [showCategorySheet, setShowCategorySheet] = useState(false)
|
||||
@@ -41,21 +45,23 @@ export default function Money() {
|
||||
function fetchFinanceRecords() {
|
||||
const resolveDate = resolveDateRange(dateMode, searchParams.startTime)
|
||||
|
||||
let searchType = 0
|
||||
|
||||
if (searchParams.category) {
|
||||
if (searchParams.category.id === -1 || searchParams.category.id === -2) {
|
||||
searchType = searchParams.category.type
|
||||
}
|
||||
}
|
||||
|
||||
listFinanceRecordsApi({
|
||||
start_time: resolveDate.startTime,
|
||||
end_time: resolveDate.endTime,
|
||||
category_id: 0,
|
||||
category_id: searchParams.category ? searchParams.category.id : 0,
|
||||
category_type: searchType,
|
||||
}).then((res) => {
|
||||
if (res.isSuccess) {
|
||||
financeStore.setRecords(res.data.records || [])
|
||||
}
|
||||
else {
|
||||
toast.show({
|
||||
title: res.message || '查询错误，请稍后再试',
|
||||
})
|
||||
}
|
||||
}).catch((err) => {
|
||||
console.log(err)
|
||||
})
|
||||
}
|
||||
|
||||
@@ -63,15 +69,25 @@ export default function Money() {
|
||||
useCallback(() => {
|
||||
financeStore.ensureCategoriesLoaded()
|
||||
fetchFinanceRecords()
|
||||
}, [searchParams.startTime, searchParams.endTime]),
|
||||
}, [searchParams.startTime, searchParams.endTime, searchParams.category]),
|
||||
)
|
||||
|
||||
async function handleDeleteRecord(id: number) {
|
||||
await deleteMoneyRecordApi({
|
||||
id,
|
||||
const toastId = toast.loading('正在删除...', {
|
||||
duration: Infinity,
|
||||
})
|
||||
|
||||
fetchFinanceRecords()
|
||||
await deleteFinanceRecordApi({
|
||||
id,
|
||||
}).then((res) => {
|
||||
if (res.isSuccess) {
|
||||
toast.success('删除成功')
|
||||
|
||||
fetchFinanceRecords()
|
||||
}
|
||||
}).finally(() => {
|
||||
toast.dismiss(toastId)
|
||||
})
|
||||
}
|
||||
|
||||
function timeModeTip() {
|
||||
@@ -117,7 +133,11 @@ export default function Money() {
|
||||
onPress={() => setShowCategorySheet(true)}
|
||||
className="flex flex-row items-center gap-1"
|
||||
>
|
||||
<Text className="font-semibold text-lg">分类</Text>
|
||||
<Text className="font-semibold text-lg">
|
||||
{
|
||||
searchParams.category ? searchParams.category.name : '分类'
|
||||
}
|
||||
</Text>
|
||||
<LucideIcon icon="ChevronDown" size={16} color="#666" clickable={false} />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
@@ -180,7 +200,6 @@ export default function Money() {
|
||||
|
||||
<View className="flex-1 mt-2">
|
||||
<TransactionsList
|
||||
records={financeStore.records}
|
||||
onUpdate={(data) => {
|
||||
router.push({
|
||||
pathname: '/finance/record/editor',
|
||||
@@ -188,7 +207,7 @@ export default function Money() {
|
||||
})
|
||||
}}
|
||||
onDetail={(id) => {
|
||||
router.navigate({
|
||||
router.push({
|
||||
pathname: '/finance/record/detail',
|
||||
params: { id },
|
||||
})
|
||||
@@ -248,15 +267,16 @@ export default function Money() {
|
||||
|
||||
<CategorySheet
|
||||
open={showCategorySheet}
|
||||
value={searchParams.category}
|
||||
value={searchParams.category?.id}
|
||||
moneyCategories={financeStore.categories}
|
||||
onClose={() => {
|
||||
setShowCategorySheet(false)
|
||||
}}
|
||||
onSelect={(category) => {
|
||||
console.log(category)
|
||||
setSearchParams(prev => ({
|
||||
...prev,
|
||||
category: category.id,
|
||||
category,
|
||||
}))
|
||||
}}
|
||||
/>
|
||||
|
||||
@@ -181,7 +181,7 @@ export default function Auth() {
|
||||
|
||||
userStore.setUserInfo({
|
||||
token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjo3Nzk4OTU0MTkxMjE3MzMsImlhdCI6MTc3MjU0MDU1OH0.M5KqfPWdpOAlCCtZrJRxwKc8bRpGBjEt9BNCfgBZgnc',
|
||||
id: 778115032100933,
|
||||
id: 779895419121733,
|
||||
nickname: 'Zhang',
|
||||
avatar: 'http://thirdqq.qlogo.cn/ek_qqapp/AQHVialeUibE42oV8RvTTVZ4tyRlPYeJrUibWTwtCPfV68E4rSzn9cw00GkXQ3QDTiawwhjoqQb7/100',
|
||||
})
|
||||
@@ -194,7 +194,7 @@ export default function Auth() {
|
||||
// name: '(tabs)' as never,
|
||||
// }],
|
||||
// })
|
||||
// console.log(navigation.getState()?.routeNames)
|
||||
console.log(navigation.getState()?.routeNames)
|
||||
|
||||
// ('/')
|
||||
}
|
||||
|
||||
@@ -10,7 +10,7 @@ import { AButton, ATab, LucideIcon } from '@/components/common/ao'
|
||||
import MoneyCategoryIcon from '@/components/common/MoneyCategoryIcon'
|
||||
import CustomHeader from '@/components/custom/Header'
|
||||
import { Spinner } from '@/components/ui/spinner'
|
||||
import { createFinanceCategoryApi, deleteFinanceCategoryApi, updateFinanceCategoryApi } from '@/request/api/finance/category'
|
||||
import { createFinanceCategoryApi, deleteFinanceCategoryApi, updateFinanceCategoryApi, updateFinanceCategorySortNumberApi } from '@/request/api/finance/category'
|
||||
import { useFinanceStore } from '@/store/finance'
|
||||
import { useMoneyCategoryStore } from '@/store/moneyCategory'
|
||||
import { useSpaceStore } from '@/store/space'
|
||||
@@ -209,7 +209,23 @@ export default function MoneyCategorySetting() {
|
||||
const newData = dragData.data
|
||||
|
||||
if (JSON.stringify(categories) !== JSON.stringify(newData)) {
|
||||
moneyCategoryStore.updateSortNumbers(newData, selectedTab)
|
||||
const updateData: any[] = []
|
||||
newData.forEach((item, index) => {
|
||||
item.sort_number = index
|
||||
|
||||
updateData.push({
|
||||
id: item.id,
|
||||
sort_number: index,
|
||||
})
|
||||
})
|
||||
|
||||
financeStore.setCategories(newData)
|
||||
|
||||
updateFinanceCategorySortNumberApi({
|
||||
categories: updateData,
|
||||
}).then((res) => {
|
||||
console.log(res)
|
||||
})
|
||||
}
|
||||
}}
|
||||
/>
|
||||
|
||||
@@ -0,0 +1,155 @@
|
||||
import type { FinanceCategory } from '@/types/finance/category'
|
||||
import type { FinanceRecordDetail } from '@/types/finance/record'
|
||||
import { useFocusEffect, useLocalSearchParams, useRouter } from 'expo-router'
|
||||
import { useCallback, useEffect, useState } from 'react'
|
||||
import { ActivityIndicator, Text, View } from 'react-native'
|
||||
import { toast } from 'sonner-native'
|
||||
import { AButton, ACell, ACellGroup, AModal } from '@/components/common/ao'
|
||||
import MoneyCategoryIcon from '@/components/common/MoneyCategoryIcon'
|
||||
import CustomHeader from '@/components/custom/Header'
|
||||
import { deleteFinanceRecordApi, getFinanceRecordDetailApi } from '@/request/api/finance/record'
|
||||
import { useFinanceStore } from '@/store/finance'
|
||||
import { useNavStore } from '@/store/navigation'
|
||||
import { MoneyCategoryEnum } from '@/types/money/category'
|
||||
import { toDateTimeString } from '@/utils/time'
|
||||
|
||||
export default function MoneyRecordDetail() {
|
||||
const router = useRouter()
|
||||
const financeStore = useFinanceStore()
|
||||
const navStore = useNavStore()
|
||||
|
||||
const { id: detailId } = useLocalSearchParams<{ id: string }>()
|
||||
|
||||
const [showDeleteModal, setShowDeleteModal] = useState(false)
|
||||
const [detail, setDetail] = useState<FinanceRecordDetail | null>(null)
|
||||
const [loading, setLoading] = useState(true)
|
||||
|
||||
const [category, setCategory] = useState<FinanceCategory | null>(null)
|
||||
|
||||
useFocusEffect(
|
||||
useCallback(() => {
|
||||
if (detailId) {
|
||||
setLoading(true)
|
||||
|
||||
getFinanceRecordDetailApi({
|
||||
id: Number(detailId),
|
||||
}).then((res) => {
|
||||
if (res.isSuccess) {
|
||||
setDetail(res.data)
|
||||
setLoading(false)
|
||||
|
||||
const category = financeStore.getCategoryById(res.data.category_id)
|
||||
if (category) {
|
||||
setCategory(category)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}, []),
|
||||
)
|
||||
|
||||
return (
|
||||
<>
|
||||
<View className="flex-1">
|
||||
<CustomHeader title="账单详情" />
|
||||
<View className="flex-1">
|
||||
{
|
||||
loading
|
||||
? (
|
||||
<View className="flex-1 items-center justify-center">
|
||||
<ActivityIndicator size="large" color="#333" />
|
||||
</View>
|
||||
)
|
||||
: (
|
||||
<>
|
||||
<View className="flex flex-col items-center">
|
||||
<MoneyCategoryIcon name={category?.icon} size={56} />
|
||||
<Text className="mt-1">{category?.name}</Text>
|
||||
</View>
|
||||
|
||||
<ACellGroup showDivider={false} className="mt-4">
|
||||
<ACell title="类别" rightText={category?.type === MoneyCategoryEnum.Expense ? '支出' : '收入'} />
|
||||
<ACell title="金额" rightText={detail?.amount} />
|
||||
<ACell title="备注" rightText={detail?.remark} />
|
||||
<ACell title="日期" rightText={detail?.record_time} />
|
||||
<ACell title="创建人" rightText={detail?.create_member_name} />
|
||||
<ACell title="创建时间" rightText={toDateTimeString(detail?.create_time || '')} />
|
||||
{
|
||||
detail?.create_member_id !== detail?.update_member_id && (
|
||||
<>
|
||||
<ACell title="更新人" rightText={detail?.update_member_name} />
|
||||
<ACell title="更新时间" rightText={toDateTimeString(detail?.update_time || '')} />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
</ACellGroup>
|
||||
|
||||
<View className="flex flex-row px-4 mt-4 gap-4">
|
||||
|
||||
<AButton
|
||||
className="flex-1"
|
||||
action="negative"
|
||||
variant="outline"
|
||||
onPress={() => {
|
||||
setShowDeleteModal(true)
|
||||
}}
|
||||
>
|
||||
删除
|
||||
</AButton>
|
||||
<AButton
|
||||
className="flex-1"
|
||||
onPress={() => {
|
||||
router.navigate({
|
||||
pathname: '/finance/record/editor',
|
||||
params: { id: detailId },
|
||||
})
|
||||
}}
|
||||
>
|
||||
编辑
|
||||
</AButton>
|
||||
</View>
|
||||
</>
|
||||
)
|
||||
}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<AModal
|
||||
isOpen={showDeleteModal}
|
||||
title="提示"
|
||||
body="确认删除该条账单？"
|
||||
onConfirm={async () => {
|
||||
setShowDeleteModal(false)
|
||||
if (!detail) {
|
||||
toast.warning('当前记录无效')
|
||||
router.back()
|
||||
return
|
||||
}
|
||||
|
||||
const toastId = toast.loading('正在删除...', {
|
||||
duration: Infinity,
|
||||
})
|
||||
|
||||
await deleteFinanceRecordApi({
|
||||
id: detail?.id,
|
||||
}).then((res) => {
|
||||
if (res.isSuccess) {
|
||||
toast.success('删除成功')
|
||||
|
||||
router.back()
|
||||
}
|
||||
}).finally(() => {
|
||||
toast.dismiss(toastId)
|
||||
})
|
||||
}}
|
||||
onCancel={() => {
|
||||
setShowDeleteModal(false)
|
||||
}}
|
||||
onClose={() => {
|
||||
setShowDeleteModal(false)
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -1,3 +1,4 @@
|
||||
import type { FinanceRecord } from '@/types/finance/record'
|
||||
import Big from 'big.js'
|
||||
import { useEffect, useState } from 'react'
|
||||
import { Keyboard, Pressable, StyleSheet, Text, TouchableWithoutFeedback, View } from 'react-native'
|
||||
@@ -39,23 +40,15 @@ const keys: KeydownItem[] = [
|
||||
|
||||
interface AmountKeyboardProps {
|
||||
show?: boolean
|
||||
record_time?: string
|
||||
amount?: string
|
||||
remark?: string
|
||||
|
||||
// 回调：当键盘输入或修改数据时触发
|
||||
onChange?: (data: { record_time: string, amount: string, remark: string }) => void
|
||||
record: FinanceRecord
|
||||
|
||||
// 可选：点击完成按钮触发
|
||||
onDone?: () => void
|
||||
onDone?: (record: FinanceRecord) => void
|
||||
}
|
||||
|
||||
export default function AmountKeyboard({
|
||||
show = false,
|
||||
record_time = '',
|
||||
amount = '',
|
||||
remark = '',
|
||||
onChange,
|
||||
record,
|
||||
onDone,
|
||||
}: AmountKeyboardProps) {
|
||||
// 自定义键盘计算过程
|
||||
@@ -67,43 +60,36 @@ export default function AmountKeyboard({
|
||||
// 键盘高度
|
||||
const keyboardHeight = useKeyboardHeight()
|
||||
|
||||
// 使用一个对象管理三个字段
|
||||
const [internalData, setInternalData] = useState({
|
||||
record_time: record_time || getCurrentDate(),
|
||||
amount: amount || '0',
|
||||
remark: remark || '',
|
||||
const [innerRecord, setInnerRecord] = useState<FinanceRecord>({
|
||||
id: 0,
|
||||
category_id: 0,
|
||||
amount: '',
|
||||
remark: '',
|
||||
record_time: getCurrentDate(),
|
||||
member_id: 0,
|
||||
member_name: '',
|
||||
})
|
||||
|
||||
// 如果父组件 props 变化，需要同步
|
||||
useEffect(() => {
|
||||
setInternalData({
|
||||
record_time: record_time || getCurrentDate(),
|
||||
amount: amount || '0',
|
||||
remark: remark || '',
|
||||
setInnerRecord(record)
|
||||
setKeydownInput(record.amount || '')
|
||||
}, [record])
|
||||
|
||||
useEffect(() => {
|
||||
setInnerRecord((prev) => {
|
||||
if (!keydownInput) {
|
||||
return { ...prev, amount: '0' }
|
||||
}
|
||||
try {
|
||||
const result = calculateWithBig(keydownInput)
|
||||
return { ...prev, amount: result }
|
||||
}
|
||||
catch {
|
||||
return { ...prev, amount: '0' }
|
||||
}
|
||||
})
|
||||
}, [record_time, amount, remark])
|
||||
|
||||
useEffect(() => {
|
||||
if (!keydownInput) {
|
||||
handleChange({ amount: '0' })
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
const computed = calculateWithBig(keydownInput)
|
||||
handleChange({ amount: computed })
|
||||
}
|
||||
catch {
|
||||
handleChange({ amount: '0' })
|
||||
}
|
||||
}, [keydownInput])
|
||||
|
||||
const handleChange = (newData: Partial<typeof internalData>) => {
|
||||
const updated = { ...internalData, ...newData }
|
||||
setInternalData(updated)
|
||||
onChange?.(updated)
|
||||
}
|
||||
|
||||
// 计算过程
|
||||
const handlePress = (key: string | number) => {
|
||||
setKeydownInput((prev) => {
|
||||
@@ -113,7 +99,8 @@ export default function AmountKeyboard({
|
||||
newInput = prev.slice(0, -1)
|
||||
}
|
||||
else if (key === 'clear') {
|
||||
setInternalData({
|
||||
setInnerRecord({
|
||||
...innerRecord,
|
||||
record_time: getCurrentDate(),
|
||||
amount: '0',
|
||||
remark: '',
|
||||
@@ -121,7 +108,7 @@ export default function AmountKeyboard({
|
||||
return ''
|
||||
}
|
||||
else if (key === '/') {
|
||||
onDone?.()
|
||||
onDone?.(innerRecord)
|
||||
return prev
|
||||
}
|
||||
else {
|
||||
@@ -206,7 +193,7 @@ export default function AmountKeyboard({
|
||||
newInput = prev + keyStr
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
return newInput
|
||||
})
|
||||
}
|
||||
@@ -271,10 +258,11 @@ export default function AmountKeyboard({
|
||||
}
|
||||
|
||||
return (
|
||||
<View style={{
|
||||
backgroundColor: '#fff',
|
||||
elevation: 20,
|
||||
}}
|
||||
<View
|
||||
style={{
|
||||
backgroundColor: '#fff',
|
||||
elevation: 20,
|
||||
}}
|
||||
>
|
||||
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
|
||||
<View className="h-28 flex pl-4 pr-4 justify-center">
|
||||
@@ -284,19 +272,24 @@ export default function AmountKeyboard({
|
||||
onPress={() => setShowDatePicker(true)}
|
||||
>
|
||||
<LucideIcon icon="Calendar" size={16} color="#60a5fa" clickable={false} />
|
||||
<Text className="text-gray-600 text-sm">{internalData.record_time}</Text>
|
||||
<Text className="text-gray-600 text-sm">{innerRecord.record_time}</Text>
|
||||
<LucideIcon icon="ChevronDown" size={12} color="#aaa" clickable={false} />
|
||||
</Pressable>
|
||||
<Text className="text-3xl text-blue-700 text-right">{internalData.amount}</Text>
|
||||
<Text className="text-3xl text-blue-700 text-right">{innerRecord.amount}</Text>
|
||||
</View>
|
||||
|
||||
<Text className="text-gray-400 text-right">{keydownInput}</Text>
|
||||
<AInput
|
||||
value={internalData.remark}
|
||||
value={innerRecord.remark}
|
||||
placeholder="备注"
|
||||
className="bg-[#f2f3f5] border-0"
|
||||
size="sm"
|
||||
onChangeText={val => handleChange({ remark: val })}
|
||||
onChangeText={(val) => {
|
||||
setInnerRecord({
|
||||
...innerRecord,
|
||||
remark: val,
|
||||
})
|
||||
}}
|
||||
onFocus={() => setRemarkIsFocused(true)}
|
||||
onBlur={() => setRemarkIsFocused(false)}
|
||||
/>
|
||||
@@ -352,14 +345,18 @@ export default function AmountKeyboard({
|
||||
<ADatePicker
|
||||
pickerTitle="记账时间"
|
||||
mode="date"
|
||||
date={internalData.record_time}
|
||||
date={innerRecord.record_time}
|
||||
show={showDatePicker}
|
||||
onClose={() => {
|
||||
setShowDatePicker(false)
|
||||
}}
|
||||
onConfirm={(date) => {
|
||||
setShowDatePicker(false)
|
||||
handleChange({ record_time: date })
|
||||
|
||||
setInnerRecord({
|
||||
...innerRecord,
|
||||
record_time: date,
|
||||
})
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
|
||||
@@ -29,7 +29,7 @@ export default function MoenyRecordEditor() {
|
||||
const defaultFinanceRecord: FinanceRecord = {
|
||||
id: -1,
|
||||
category_id: -1,
|
||||
amount: '0.00',
|
||||
amount: '',
|
||||
remark: '',
|
||||
record_time: getCurrentDate(),
|
||||
member_id: -1,
|
||||
@@ -58,26 +58,26 @@ export default function MoenyRecordEditor() {
|
||||
}, [])
|
||||
|
||||
// 保存记录
|
||||
function handleSaveRecord() {
|
||||
async function handleSaveRecord(record: FinanceRecord) {
|
||||
if (selectedCategory === null) {
|
||||
toast.warning('请选择分类')
|
||||
return
|
||||
}
|
||||
|
||||
if (financeRecord.amount === '0.00') {
|
||||
if (record.amount === '0.00') {
|
||||
toast.warning('请输入金额')
|
||||
return
|
||||
}
|
||||
|
||||
const amount = financeRecord.amount.replace(/^-+/, '')
|
||||
const innerAmount = record.amount.replace(/^-+/, '')
|
||||
|
||||
if (updateId) {
|
||||
updateFinanceRecordApi({
|
||||
await updateFinanceRecordApi({
|
||||
id: financeRecord.id,
|
||||
category_id: selectedCategory.id,
|
||||
amount,
|
||||
remark: financeRecord.remark,
|
||||
record_time: financeRecord.record_time,
|
||||
amount: innerAmount,
|
||||
remark: record.remark,
|
||||
record_time: record.record_time,
|
||||
}).then((res) => {
|
||||
if (res.isSuccess) {
|
||||
router.back()
|
||||
@@ -85,11 +85,11 @@ export default function MoenyRecordEditor() {
|
||||
})
|
||||
}
|
||||
else {
|
||||
createFinanceRecordApi({
|
||||
amount,
|
||||
await createFinanceRecordApi({
|
||||
amount: innerAmount,
|
||||
category_id: selectedCategory.id,
|
||||
remark: financeRecord.remark,
|
||||
record_time: financeRecord.record_time,
|
||||
remark: record.remark,
|
||||
record_time: record.record_time,
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.isSuccess) {
|
||||
@@ -116,7 +116,7 @@ export default function MoenyRecordEditor() {
|
||||
<TouchableOpacity
|
||||
className="w-[30%] flex items-center px-4 flex-row"
|
||||
onPress={() => {
|
||||
router.navigate('/finance/category/setting')
|
||||
router.push('/finance/category')
|
||||
}}
|
||||
>
|
||||
<LucideIcon icon="LayoutList" />
|
||||
@@ -169,17 +169,7 @@ export default function MoenyRecordEditor() {
|
||||
|
||||
<AmountKeyboard
|
||||
show={showKeydown}
|
||||
record_time={financeRecord.record_time}
|
||||
amount={financeRecord.amount}
|
||||
remark={financeRecord.remark}
|
||||
onChange={(data) => {
|
||||
setFinanceRecord({
|
||||
...financeRecord,
|
||||
record_time: data.record_time,
|
||||
amount: data.amount,
|
||||
remark: data.remark,
|
||||
})
|
||||
}}
|
||||
record={financeRecord}
|
||||
onDone={handleSaveRecord}
|
||||
/>
|
||||
</View>
|
||||
|
||||
@@ -47,7 +47,6 @@ const AInput = forwardRef<React.ComponentRef<typeof InputField>, AInputProps>(
|
||||
isFocused={isFocused}
|
||||
className={className}
|
||||
style={style}
|
||||
|
||||
>
|
||||
{leftIcon && (
|
||||
<InputSlot className="pl-3">
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import type { CreateFinanceRecordParams, DeleteFinanceRecordParams, ListFinanceRecordsParams, ListFinanceRecordsResult, UpdateFinanceRecordParams } from '@/types/finance/record'
|
||||
import type { CreateFinanceRecordParams, DeleteFinanceRecordParams, GetFinanceRecordDetailParams, GetFinanceRecordDetailResult, ListFinanceRecordsParams, ListFinanceRecordsResult, UpdateFinanceRecordParams } from '@/types/finance/record'
|
||||
import alovaInstance from '../../index'
|
||||
|
||||
const API_PREFIX = '/finance/record'
|
||||
@@ -18,3 +18,7 @@ export function updateFinanceRecordApi(params: UpdateFinanceRecordParams) {
|
||||
export function deleteFinanceRecordApi(params: DeleteFinanceRecordParams) {
|
||||
return alovaInstance.Post<ResponseData<void>>(`${API_PREFIX}/delete`, params)
|
||||
}
|
||||
|
||||
export function getFinanceRecordDetailApi(params: GetFinanceRecordDetailParams) {
|
||||
return alovaInstance.Post<ResponseData<GetFinanceRecordDetailResult>>(`${API_PREFIX}/detail`, params)
|
||||
}
|
||||
@@ -31,8 +31,8 @@ function isWhiteListed(url: string) {
|
||||
}
|
||||
|
||||
const alovaInstance = createAlova({
|
||||
// baseURL: 'http://192.168.5.6:8086/app',
|
||||
baseURL: 'http://192.168.1.137:8086/app',
|
||||
baseURL: 'http://192.168.5.6:8086/app',
|
||||
// baseURL: 'http://192.168.1.137:8086/app',
|
||||
requestAdapter: axiosRequestAdapter(),
|
||||
timeout: 5000,
|
||||
cacheFor: null,
|
||||
|
||||
@@ -16,7 +16,6 @@ interface FinanceState {
|
||||
createCategory: (category: FinanceCategory) => void
|
||||
updateCategory: (category: FinanceCategory) => void
|
||||
deleteCategory: (id: number) => void
|
||||
updateCategorySortNumber: (data: FinanceCategory[], type: number) => void
|
||||
isDuplicateCategory: (name: string, type: number, excludeId: number | null) => boolean
|
||||
getDefaultGroupRow: (iconName: string) => number
|
||||
getCategoryById: (id: number) => FinanceCategory | null
|
||||
@@ -301,16 +300,6 @@ export const useFinanceStore = create<FinanceState>()(
|
||||
const finalCategories = allCategories.filter(c => c.id !== id)
|
||||
set({ categories: finalCategories })
|
||||
},
|
||||
updateCategorySortNumber: (data, type) => {
|
||||
const allCategories = get().categories
|
||||
const otherCategories = allCategories.filter(c => c.type !== type)
|
||||
const updatedData = data.map((item, index) => ({
|
||||
...item,
|
||||
sort_number: index,
|
||||
}))
|
||||
|
||||
set({ categories: [...otherCategories, ...updatedData] })
|
||||
},
|
||||
isDuplicateCategory: (name, type, excludeId) => {
|
||||
const categories = get().categories || []
|
||||
return categories.some(c =>
|
||||
|
||||
@@ -19,6 +19,7 @@ export interface ListFinanceRecordsParams {
|
||||
start_time: string
|
||||
end_time: string
|
||||
category_id: number
|
||||
category_type: number
|
||||
}
|
||||
|
||||
export interface ListFinanceRecordsResult {
|
||||
@@ -43,3 +44,27 @@ export interface UpdateFinanceRecordParams {
|
||||
export interface DeleteFinanceRecordParams {
|
||||
id: number
|
||||
}
|
||||
|
||||
export interface FinanceRecordDetail {
|
||||
id: number
|
||||
category_id: number
|
||||
amount: string
|
||||
remark: string
|
||||
record_time: string
|
||||
|
||||
create_time: number
|
||||
create_member_id: number
|
||||
create_member_name: string
|
||||
|
||||
update_time: number
|
||||
update_member_id: number
|
||||
update_member_name: string
|
||||
}
|
||||
|
||||
export interface GetFinanceRecordDetailParams {
|
||||
id: number
|
||||
}
|
||||
|
||||
export interface GetFinanceRecordDetailResult extends FinanceRecordDetail {
|
||||
|
||||
}
|
||||
+166
-119
@@ -1,130 +1,177 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
import type { FinanceRecord } from '@/types/finance/record'
|
||||
import Big from 'big.js'
|
||||
import { useEffect, useState } from 'react'
|
||||
import { Keyboard, Pressable, StyleSheet, Text, TouchableWithoutFeedback, View } from 'react-native'
|
||||
import { ADatePicker, AInput, LucideIcon } from '@/components/common/ao/index'
|
||||
import { useKeyboardHeight } from '@/hooks/useKeyboardHeight'
|
||||
import { getCurrentDate } from '@/utils/time'
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>加入其它空间 Demo</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
background: #f5f6f8;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
interface KeydownItem {
|
||||
key: string | number
|
||||
content: React.ReactNode
|
||||
}
|
||||
|
||||
interface AmountKeyboardProps {
|
||||
show?: boolean
|
||||
record: FinanceRecord
|
||||
|
||||
// 可选：点击完成按钮触发
|
||||
onDone?: (record: FinanceRecord) => void
|
||||
}
|
||||
|
||||
export default function AmountKeyboard({
|
||||
show = false,
|
||||
record,
|
||||
onDone,
|
||||
}: AmountKeyboardProps) {
|
||||
// 自定义键盘计算过程
|
||||
const [keydownInput, setKeydownInput] = useState('')
|
||||
// 日期选择
|
||||
const [showDatePicker, setShowDatePicker] = useState(false)
|
||||
// 备注聚焦
|
||||
const [remarkIsFocused, setRemarkIsFocused] = useState(false)
|
||||
// 键盘高度
|
||||
const keyboardHeight = useKeyboardHeight()
|
||||
|
||||
const [innerRecord, setInnerRecord] = useState<FinanceRecord>({
|
||||
id: 0,
|
||||
category_id: 0,
|
||||
amount: '',
|
||||
remark: '',
|
||||
record_time: '',
|
||||
member_id: 0,
|
||||
member_name: '',
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
setInnerRecord(record)
|
||||
setKeydownInput(record.amount || '0.00')
|
||||
}, [record])
|
||||
|
||||
useEffect(() => {
|
||||
if (!keydownInput) {
|
||||
setInnerRecord({
|
||||
...innerRecord,
|
||||
amount: '0',
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
/* 页面列表项 */
|
||||
.space-option {
|
||||
padding: 16px;
|
||||
background: #fff;
|
||||
margin: 16px;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
try {
|
||||
setInnerRecord({
|
||||
...innerRecord,
|
||||
amount: calculateWithBig(keydownInput),
|
||||
})
|
||||
}
|
||||
|
||||
.space-option:hover {
|
||||
background: #f0f0f0;
|
||||
catch {
|
||||
setInnerRecord({
|
||||
...innerRecord,
|
||||
amount: '0',
|
||||
})
|
||||
}
|
||||
}, [keydownInput])
|
||||
|
||||
/* modal 背景 */
|
||||
.modal-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
display: none;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
return (
|
||||
<View style={{
|
||||
backgroundColor: '#fff',
|
||||
elevation: 20,
|
||||
}}
|
||||
>
|
||||
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
|
||||
<View className="h-28 flex pl-4 pr-4 justify-center">
|
||||
<View className="flex flex-row items-center justify-between">
|
||||
<Pressable
|
||||
className="flex flex-row items-center gap-1.5 px-2 py-1.5 rounded-md bg-gray-50 active:opacity-70"
|
||||
onPress={() => setShowDatePicker(true)}
|
||||
>
|
||||
<LucideIcon icon="Calendar" size={16} color="#60a5fa" clickable={false} />
|
||||
<Text className="text-gray-600 text-sm">{innerRecord.record_time}</Text>
|
||||
<LucideIcon icon="ChevronDown" size={12} color="#aaa" clickable={false} />
|
||||
</Pressable>
|
||||
<Text className="text-3xl text-blue-700 text-right">{innerRecord.amount}</Text>
|
||||
</View>
|
||||
|
||||
/* modal 内容 */
|
||||
.modal {
|
||||
background: #fff;
|
||||
border-radius: 16px;
|
||||
padding: 24px;
|
||||
width: 90%;
|
||||
max-width: 400px;
|
||||
}
|
||||
<Text className="text-gray-400 text-right">{keydownInput}</Text>
|
||||
<AInput
|
||||
value={innerRecord.remark}
|
||||
placeholder="备注"
|
||||
className="bg-[#f2f3f5] border-0"
|
||||
size="sm"
|
||||
onChangeText={(val) => {
|
||||
setInnerRecord({
|
||||
...innerRecord,
|
||||
remark: val,
|
||||
})
|
||||
}}
|
||||
onFocus={() => setRemarkIsFocused(true)}
|
||||
onBlur={() => setRemarkIsFocused(false)}
|
||||
/>
|
||||
</View>
|
||||
</TouchableWithoutFeedback>
|
||||
<View className="flex flex-row flex-wrap" style={{ height: 220 }}>
|
||||
{keys.map((item, idx) => {
|
||||
const isFirstCol = idx % 4 === 0
|
||||
const isFirstRow = idx < 4
|
||||
const isLastCol = (idx + 1) % 4 === 0
|
||||
const isLastRow = idx >= 12
|
||||
|
||||
.modal h2 {
|
||||
margin: 0 0 16px 0;
|
||||
font-size: 20px;
|
||||
color: #333;
|
||||
}
|
||||
return (
|
||||
<Pressable
|
||||
key={item.key}
|
||||
onPress={() => handlePress(item.key)}
|
||||
style={{
|
||||
width: '25%',
|
||||
height: '25%',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
borderTopWidth: isFirstRow ? 0.3 : 0,
|
||||
borderLeftWidth: isFirstCol ? 0.3 : 0,
|
||||
borderRightWidth: !isLastCol ? 0.3 : 0,
|
||||
borderBottomWidth: !isLastRow ? 0.3 : 0,
|
||||
borderColor: '#ddd',
|
||||
}}
|
||||
>
|
||||
{({ pressed }) => {
|
||||
const defaultBg = item.key === '/' ? '#e6d7b8' : '#fff'
|
||||
const pressedBg = item.key === '/' ? '#f5e9d4' : '#f2f2f2'
|
||||
|
||||
.modal input {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
margin-bottom: 16px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #ccc;
|
||||
font-size: 16px;
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<View
|
||||
style={{
|
||||
...StyleSheet.absoluteFillObject,
|
||||
backgroundColor: pressed ? pressedBg : defaultBg,
|
||||
}}
|
||||
/>
|
||||
{item.content}
|
||||
</>
|
||||
)
|
||||
}}
|
||||
</Pressable>
|
||||
)
|
||||
})}
|
||||
</View>
|
||||
{remarkIsFocused && keyboardHeight > 220 && (
|
||||
<View style={{ height: keyboardHeight + 10 - 220 }} />
|
||||
)}
|
||||
|
||||
.modal button {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
border-radius: 8px;
|
||||
border: none;
|
||||
background: #333;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
<ADatePicker
|
||||
pickerTitle="记账时间"
|
||||
mode="date"
|
||||
date={innerRecord.record_time}
|
||||
show={showDatePicker}
|
||||
onClose={() => {
|
||||
setShowDatePicker(false)
|
||||
}}
|
||||
onConfirm={(date) => {
|
||||
setShowDatePicker(false)
|
||||
|
||||
.modal .scan-button {
|
||||
background: #f0f0f0;
|
||||
color: #333;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<!-- 加入其它空间选项 -->
|
||||
<div class="space-option" id="joinSpaceBtn">
|
||||
<span>加入其它空间</span>
|
||||
<span>→</span>
|
||||
</div>
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal-backdrop" id="modalBackdrop">
|
||||
<div class="modal">
|
||||
<h2>加入空间</h2>
|
||||
<input type="text" placeholder="请输入邀请码" id="inviteInput" />
|
||||
<button id="joinBtn">加入</button>
|
||||
<button class="scan-button" id="scanBtn">扫码加入</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const joinBtnEl = document.getElementById('joinSpaceBtn');
|
||||
const modalEl = document.getElementById('modalBackdrop');
|
||||
|
||||
joinBtnEl.addEventListener('click', () => {
|
||||
modalEl.style.display = 'flex';
|
||||
});
|
||||
|
||||
modalEl.addEventListener('click', (e) => {
|
||||
if (e.target === modalEl) {
|
||||
modalEl.style.display = 'none';
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById('joinBtn').addEventListener('click', () => {
|
||||
const code = document.getElementById('inviteInput').value;
|
||||
alert(`尝试加入空间：${code}`);
|
||||
});
|
||||
|
||||
document.getElementById('scanBtn').addEventListener('click', () => {
|
||||
alert('扫码功能触发（可接入扫码库）');
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
setInnerRecord({
|
||||
...innerRecord,
|
||||
record_time: date,
|
||||
})
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
Reference in new issue
Block a user