Compare commits
10 Commits
36392b9bde
...
5d3642f516
Author | SHA1 | Date | |
---|---|---|---|
5d3642f516 | |||
d2edaa57e9 | |||
293df6e0a1 | |||
1d928b8a23 | |||
53ac383f5b | |||
b2ce1fe392 | |||
909adfead4 | |||
c4e66e2e52 | |||
d27e2d9aae | |||
820226c08d |
|
@ -11,6 +11,7 @@
|
||||||
script
|
script
|
||||||
|
|
||||||
README.md
|
README.md
|
||||||
|
.dockerignore
|
||||||
docker-compose.yaml
|
docker-compose.yaml
|
||||||
Dockerfile
|
Dockerfile
|
||||||
|
node_modules
|
|
@ -5,7 +5,8 @@
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "vite",
|
"dev": "vite",
|
||||||
"build": "tsc && vite build && pwsh scripts/build.ps1",
|
"build": "tsc && vite build",
|
||||||
|
"deploy": "tsc && vite build && pwsh scripts/build.ps1",
|
||||||
"preview": "vite preview"
|
"preview": "vite preview"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
|
|
@ -1,8 +1,5 @@
|
||||||
docker build . -t registry.cn-hangzhou.aliyuncs.com/fadinglight/bill-react:dev
|
$server_path='fadinglight:/root/docker/caddy/site/www'
|
||||||
|
|
||||||
docker push registry.cn-hangzhou.aliyuncs.com/fadinglight/bill-react:dev
|
ssh fadinglight "rm ${server_path}/* -r"
|
||||||
|
|
||||||
ssh aliyun "cd /root/docker/bill-sys/;
|
scp -r dist/* $server_path
|
||||||
docker compose down;
|
|
||||||
docker pull registry.cn-hangzhou.aliyuncs.com/fadinglight/bill-react:dev;
|
|
||||||
docker compose up -d"
|
|
|
@ -2,7 +2,7 @@ docker build . -t registry.cn-hangzhou.aliyuncs.com/fadinglight/bill-react:dev
|
||||||
|
|
||||||
docker push registry.cn-hangzhou.aliyuncs.com/fadinglight/bill-react:dev
|
docker push registry.cn-hangzhou.aliyuncs.com/fadinglight/bill-react:dev
|
||||||
|
|
||||||
ssh aliyun "cd /root/docker/bill-sys/;
|
ssh fadinglight "cd /root/docker/bill-sys/;
|
||||||
docker compose down;
|
docker compose down;
|
||||||
docker pull registry.cn-hangzhou.aliyuncs.com/fadinglight/bill-go:dev;
|
docker pull registry.cn-hangzhou.aliyuncs.com/fadinglight/bill-go:dev;
|
||||||
docker compose up -d"
|
docker compose up -d"
|
||||||
|
|
|
@ -1,6 +1,5 @@
|
||||||
import Layout from './components/layout'
|
import Layout from './components/layout'
|
||||||
import { Routes, Route } from 'react-router-dom'
|
import { Routes, Route } from 'react-router-dom'
|
||||||
import {useEffect} from "react";
|
|
||||||
import Home from './pages/Home/Home'
|
import Home from './pages/Home/Home'
|
||||||
import NotFound from './pages/NotFound'
|
import NotFound from './pages/NotFound'
|
||||||
import { Bill, BillContext } from "./store";
|
import { Bill, BillContext } from "./store";
|
||||||
|
@ -9,13 +8,6 @@ import Record from "./pages/Record/Record";
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
const billStore = new Bill()
|
const billStore = new Bill()
|
||||||
const now = new Date()
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
billStore.fetch(now.getFullYear(), now.getMonth() + 1)
|
|
||||||
.then()
|
|
||||||
.catch(console.dir)
|
|
||||||
}, [])
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="App">
|
<div className="App">
|
||||||
|
|
|
@ -2,16 +2,16 @@ import request from "./request";
|
||||||
import {IBill} from "../model";
|
import {IBill} from "../model";
|
||||||
|
|
||||||
export async function getBills(year: number, month: number) {
|
export async function getBills(year: number, month: number) {
|
||||||
const data = await request.get(`/search/${year}/${month}`)
|
const data = await request.get(`/bill/${year}/${month}`)
|
||||||
return data.data
|
return data.data
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function getClass() {
|
export async function getLabels() {
|
||||||
const data = await request.get(`/class`)
|
const data = await request.get(`/label/`)
|
||||||
return data.data
|
return data.data
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function createBill(bill: IBill) {
|
export async function postBills(bills: Array<IBill>) {
|
||||||
const data = await request.post(`/create`, bill)
|
const data = await request.post(`/bill/`, bills)
|
||||||
return data.data
|
return data.data
|
||||||
}
|
}
|
|
@ -1,7 +1,7 @@
|
||||||
import axios from "axios";
|
import axios from "axios";
|
||||||
|
|
||||||
const request = axios.create({
|
const request = axios.create({
|
||||||
baseURL: "/api",
|
baseURL: "/api/",
|
||||||
timeout: 30000,
|
timeout: 30000,
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
|
@ -17,6 +17,7 @@ interface IProps {
|
||||||
data: BarData[];
|
data: BarData[];
|
||||||
title?: string;
|
title?: string;
|
||||||
subTitle?: string;
|
subTitle?: string;
|
||||||
|
onClickItem?: (date: string) => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
export const Bar = (props: IProps) => {
|
export const Bar = (props: IProps) => {
|
||||||
|
@ -37,6 +38,23 @@ export const Bar = (props: IProps) => {
|
||||||
subtext: subTitle ?? "",
|
subtext: subTitle ?? "",
|
||||||
left: 'center'
|
left: 'center'
|
||||||
},
|
},
|
||||||
|
tooltip: {
|
||||||
|
show: true,
|
||||||
|
trigger: "item",
|
||||||
|
triggerOn: "mousemove|click",
|
||||||
|
axisPointer: {
|
||||||
|
type: "line"
|
||||||
|
},
|
||||||
|
showContent: true,
|
||||||
|
alwaysShowContent: false,
|
||||||
|
showDelay: 0,
|
||||||
|
hideDelay: 100,
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 14
|
||||||
|
},
|
||||||
|
borderWidth: 0,
|
||||||
|
padding: 5
|
||||||
|
},
|
||||||
xAxis: {
|
xAxis: {
|
||||||
type: 'category',
|
type: 'category',
|
||||||
data: data.map(item => {
|
data: data.map(item => {
|
||||||
|
@ -64,29 +82,16 @@ export const Bar = (props: IProps) => {
|
||||||
}),
|
}),
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
tooltip: {
|
|
||||||
show: true,
|
|
||||||
trigger: "item",
|
|
||||||
triggerOn: "mousemove|click",
|
|
||||||
axisPointer: {
|
|
||||||
type: "line"
|
|
||||||
},
|
|
||||||
showContent: true,
|
|
||||||
alwaysShowContent: false,
|
|
||||||
showDelay: 0,
|
|
||||||
hideDelay: 100,
|
|
||||||
textStyle: {
|
|
||||||
fontSize: 14
|
|
||||||
},
|
|
||||||
borderWidth: 0,
|
|
||||||
padding: 5
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
}, [data, title, subTitle])
|
}, [data, title, subTitle])
|
||||||
|
|
||||||
|
|
||||||
const bar = useMemo(() => {
|
const bar = useMemo(() => {
|
||||||
return chartRef.current ? echarts.init(chartRef.current, undefined, { renderer: "svg" }) : null;
|
const chart = chartRef.current ? echarts.init(chartRef.current, undefined, { renderer: "svg" }) : null;
|
||||||
|
chart?.on('click', (params) => {
|
||||||
|
const date = dayjs(props.data[0].x).format("YYYY-") + params.name
|
||||||
|
if (props.onClickItem) props.onClickItem(date)
|
||||||
|
})
|
||||||
|
return chart
|
||||||
}, [chartRef.current])
|
}, [chartRef.current])
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
|
|
@ -14,6 +14,8 @@ import {
|
||||||
TitleComponentOption,
|
TitleComponentOption,
|
||||||
TooltipComponent,
|
TooltipComponent,
|
||||||
TooltipComponentOption,
|
TooltipComponentOption,
|
||||||
|
LegendComponent,
|
||||||
|
LegendComponentOption,
|
||||||
GridComponent,
|
GridComponent,
|
||||||
GridComponentOption,
|
GridComponentOption,
|
||||||
// 数据集组件
|
// 数据集组件
|
||||||
|
@ -34,6 +36,7 @@ export type ECOption = echarts.ComposeOption<
|
||||||
| PieSeriesOption
|
| PieSeriesOption
|
||||||
| TitleComponentOption
|
| TitleComponentOption
|
||||||
| TooltipComponentOption
|
| TooltipComponentOption
|
||||||
|
| LegendComponentOption
|
||||||
| GridComponentOption
|
| GridComponentOption
|
||||||
| DatasetComponentOption>;
|
| DatasetComponentOption>;
|
||||||
|
|
||||||
|
@ -41,6 +44,7 @@ export type ECOption = echarts.ComposeOption<
|
||||||
echarts.use([
|
echarts.use([
|
||||||
TitleComponent,
|
TitleComponent,
|
||||||
TooltipComponent,
|
TooltipComponent,
|
||||||
|
LegendComponent,
|
||||||
GridComponent,
|
GridComponent,
|
||||||
DatasetComponent,
|
DatasetComponent,
|
||||||
TransformComponent,
|
TransformComponent,
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
.pie {
|
.pie {
|
||||||
width: 100%;
|
width: 400px;
|
||||||
height: 100%;
|
height: 400px;
|
||||||
}
|
}
|
||||||
|
|
|
@ -33,15 +33,15 @@ export default function Pie(props: IProps) {
|
||||||
},
|
},
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: 'item',
|
trigger: 'item',
|
||||||
formatter: '{a} <br/>{b} : {c} ({d}%)',
|
formatter: '{b} : ¥{c} ({d}%)',
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
orient: 'vertical',
|
||||||
|
left: 'left'
|
||||||
},
|
},
|
||||||
// legend: {
|
|
||||||
// orient: 'vertical',
|
|
||||||
// left: 'left',
|
|
||||||
// },
|
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
name: "金额",
|
// name: "金额",
|
||||||
type: "pie",
|
type: "pie",
|
||||||
radius: ['40%', '70%'],
|
radius: ['40%', '70%'],
|
||||||
// roseType: "radius",
|
// roseType: "radius",
|
||||||
|
@ -52,14 +52,14 @@ export default function Pie(props: IProps) {
|
||||||
|
|
||||||
},
|
},
|
||||||
label: {
|
label: {
|
||||||
show: true,
|
show: false,
|
||||||
// position: "top",
|
// position: "top",
|
||||||
margin: 8,
|
margin: 8,
|
||||||
formatter: "{b}: {c}"
|
formatter: "{b}: {c}"
|
||||||
},
|
},
|
||||||
emphasis: {
|
emphasis: {
|
||||||
label: {
|
label: {
|
||||||
show: true
|
show: false,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data: data.map(item => {
|
data: data.map(item => {
|
||||||
|
|
|
@ -6,9 +6,9 @@ import 'antd/dist/antd.css';
|
||||||
import './index.css'
|
import './index.css'
|
||||||
|
|
||||||
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
|
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
|
||||||
<React.StrictMode>
|
// <React.StrictMode>
|
||||||
<BrowserRouter>
|
<BrowserRouter>
|
||||||
<App />
|
<App />
|
||||||
</BrowserRouter>
|
</BrowserRouter>
|
||||||
</React.StrictMode>
|
// </React.StrictMode>
|
||||||
)
|
)
|
||||||
|
|
|
@ -1,8 +1,8 @@
|
||||||
import dayjs from 'dayjs'
|
import dayjs from 'dayjs'
|
||||||
|
|
||||||
export enum BillType {
|
export enum BillType {
|
||||||
consume = 0,
|
CONSUME = 0,
|
||||||
income,
|
INCOME,
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface IBill {
|
export interface IBill {
|
||||||
|
@ -21,7 +21,7 @@ export function EmptyBill(): IBill {
|
||||||
return {
|
return {
|
||||||
date: dayjs().format("YYYY-MM-DD"),
|
date: dayjs().format("YYYY-MM-DD"),
|
||||||
money: 0,
|
money: 0,
|
||||||
type: BillType.consume,
|
type: BillType.CONSUME,
|
||||||
cls: "",
|
cls: "",
|
||||||
label: "",
|
label: "",
|
||||||
options: "",
|
options: "",
|
||||||
|
|
|
@ -9,4 +9,13 @@
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.monthBar {
|
||||||
|
height: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cards {
|
||||||
|
display: grid;
|
||||||
|
grid: repeat(2, auto) / auto-flow auto;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -6,7 +6,7 @@ import { useContext, useEffect, useState } from "react";
|
||||||
import { BillContext } from "../../store";
|
import { BillContext } from "../../store";
|
||||||
import { observer } from "mobx-react-lite";
|
import { observer } from "mobx-react-lite";
|
||||||
import Pie from "../../components/charts/pie";
|
import Pie from "../../components/charts/pie";
|
||||||
import { Card, DatePicker, Radio, Space } from "antd";
|
import { Card, Modal, DatePicker, Radio, Space } from "antd";
|
||||||
import moment from 'moment';
|
import moment from 'moment';
|
||||||
import 'moment/locale/zh-cn';
|
import 'moment/locale/zh-cn';
|
||||||
import dayjs from 'dayjs'
|
import dayjs from 'dayjs'
|
||||||
|
@ -47,10 +47,22 @@ const Home = () => {
|
||||||
}
|
}
|
||||||
|
|
||||||
const typeOpt = [
|
const typeOpt = [
|
||||||
{ label: '支出', value: BillType.consume },
|
{ label: '支出', value: BillType.CONSUME },
|
||||||
{ label: '收入', value: BillType.income },
|
{ label: '收入', value: BillType.INCOME },
|
||||||
];
|
];
|
||||||
const [billType, setBillType] = useState(BillType.consume)
|
const [billType, setBillType] = useState(BillType.CONSUME)
|
||||||
|
|
||||||
|
// 点击bar弹出当天pie
|
||||||
|
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||||
|
const [modalTitle, setModalTitle] = useState("");
|
||||||
|
const [modalData, setModalData] = useState<{
|
||||||
|
x: string
|
||||||
|
y: number
|
||||||
|
}[]>([]);
|
||||||
|
|
||||||
|
// 显示单个cls的饼状图,查看cls内部的label的消费情况,
|
||||||
|
// 这里有一个cls列表
|
||||||
|
const clsesForShow = ["餐饮", "恋爱"]
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={styles.home}>
|
<div className={styles.home}>
|
||||||
|
@ -74,8 +86,44 @@ const Home = () => {
|
||||||
</Card>
|
</Card>
|
||||||
</Space>
|
</Space>
|
||||||
</div>
|
</div>
|
||||||
<Bar data={transformer(billStore.groupByDate(billType))} />
|
<div className={styles.monthBar}>
|
||||||
<Pie data={transformer(billStore.groupByClass(billType))} />
|
<Bar
|
||||||
|
data={transformer(billStore.groupByDate(billType))}
|
||||||
|
onClickItem={date => {
|
||||||
|
setIsModalOpen(true)
|
||||||
|
setModalTitle(date)
|
||||||
|
setModalData(transformer(billStore.groupByClass(billType, date)))
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className={styles.cards}>
|
||||||
|
<Card >
|
||||||
|
<Pie
|
||||||
|
title="本月消费分类"
|
||||||
|
data={transformer(billStore.groupByClass(billType))}
|
||||||
|
/>
|
||||||
|
</Card>
|
||||||
|
{
|
||||||
|
clsesForShow.map(cls => {
|
||||||
|
return (<Card key={cls.toString()}>
|
||||||
|
<Pie
|
||||||
|
title={cls}
|
||||||
|
data={transformer(billStore.groupByLabelOfClass(cls))}
|
||||||
|
/>
|
||||||
|
</Card>)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
<Modal
|
||||||
|
visible={isModalOpen}
|
||||||
|
onOk={() => setIsModalOpen(false)}
|
||||||
|
onCancel={() => setIsModalOpen(false)}
|
||||||
|
title={modalTitle}
|
||||||
|
>
|
||||||
|
<Pie
|
||||||
|
data={modalData}
|
||||||
|
/>
|
||||||
|
</Modal>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
@ -7,7 +7,7 @@ import {BillContext} from "../../store";
|
||||||
import { observer } from "mobx-react-lite";
|
import { observer } from "mobx-react-lite";
|
||||||
import styles from "./Record.module.scss"
|
import styles from "./Record.module.scss"
|
||||||
import { BaseSelectRef } from "rc-select/lib/BaseSelect";
|
import { BaseSelectRef } from "rc-select/lib/BaseSelect";
|
||||||
import {createBill} from "../../api/bills";
|
import { postBills } from "../../api/bills";
|
||||||
|
|
||||||
|
|
||||||
function Record() {
|
function Record() {
|
||||||
|
@ -28,6 +28,9 @@ function Record() {
|
||||||
if (!!clsRef.current) clsRef.current.focus()
|
if (!!clsRef.current) clsRef.current.focus()
|
||||||
}, [clsRef])
|
}, [clsRef])
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
billStore.fetchLabels().then()
|
||||||
|
}, [])
|
||||||
|
|
||||||
// table
|
// table
|
||||||
const columns = [
|
const columns = [
|
||||||
|
@ -50,7 +53,7 @@ function Record() {
|
||||||
title: "金额",
|
title: "金额",
|
||||||
key: "money",
|
key: "money",
|
||||||
render: (_: any, record: IBill) => {
|
render: (_: any, record: IBill) => {
|
||||||
const isConsume = record.type === BillType.consume
|
const isConsume = record.type === BillType.CONSUME
|
||||||
const color = isConsume ? "red" : "green"
|
const color = isConsume ? "red" : "green"
|
||||||
const flag = isConsume ? "-" : "+"
|
const flag = isConsume ? "-" : "+"
|
||||||
return <Tag color={color}>{flag}{record.money}</Tag>
|
return <Tag color={color}>{flag}{record.money}</Tag>
|
||||||
|
@ -79,8 +82,8 @@ function Record() {
|
||||||
const [datasource, setDataSource] = useState<IBill[]>([])
|
const [datasource, setDataSource] = useState<IBill[]>([])
|
||||||
|
|
||||||
const typeOpt = [
|
const typeOpt = [
|
||||||
{label: '支出', value: BillType.consume},
|
{ label: '支出', value: BillType.CONSUME },
|
||||||
{label: '收入', value: BillType.income},
|
{ label: '收入', value: BillType.INCOME },
|
||||||
];
|
];
|
||||||
|
|
||||||
// 提交到表格
|
// 提交到表格
|
||||||
|
@ -93,7 +96,7 @@ function Record() {
|
||||||
bill.money = Number(money)
|
bill.money = Number(money)
|
||||||
bill.options = options
|
bill.options = options
|
||||||
const checkBill = () => {
|
const checkBill = () => {
|
||||||
return bill.cls !== '' && (billType === BillType.income || bill.label !== '') && bill.money > 0
|
return bill.cls !== '' && (billType === BillType.INCOME || bill.label !== '') && bill.money > 0
|
||||||
}
|
}
|
||||||
const reset = () => {
|
const reset = () => {
|
||||||
setCls("")
|
setCls("")
|
||||||
|
@ -117,26 +120,22 @@ function Record() {
|
||||||
const [uploadLoading, setUploadLoading] = useState(false)
|
const [uploadLoading, setUploadLoading] = useState(false)
|
||||||
const upload = async () => {
|
const upload = async () => {
|
||||||
setUploadLoading(true)
|
setUploadLoading(true)
|
||||||
const failures = []
|
datasource.forEach(it => Reflect.deleteProperty(it, "key"))
|
||||||
for (let bill of datasource) {
|
|
||||||
try {
|
try {
|
||||||
const {id} = await createBill(bill)
|
await postBills(datasource)
|
||||||
if (!id) failures.push(bill)
|
setDataSource([])
|
||||||
} catch (e) {
|
} catch (err) {
|
||||||
failures.push(bill)
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
setDataSource(failures)
|
|
||||||
setUploadLoading(false)
|
setUploadLoading(false)
|
||||||
}
|
}
|
||||||
|
|
||||||
let classData: string[]
|
let classData: string[] = []
|
||||||
switch (billType) {
|
switch (billType) {
|
||||||
case BillType.consume:
|
case BillType.CONSUME:
|
||||||
classData = Object.keys(cls2label.consume)
|
classData = cls2label.consume.map(it => it.name)
|
||||||
break
|
break
|
||||||
case BillType.income:
|
case BillType.INCOME:
|
||||||
classData = cls2label.income
|
classData = cls2label.income.map(it => it.name)
|
||||||
break
|
break
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -170,14 +169,14 @@ function Record() {
|
||||||
value={cls === "" ? null : cls}
|
value={cls === "" ? null : cls}
|
||||||
onChange={c => {
|
onChange={c => {
|
||||||
setCls(c)
|
setCls(c)
|
||||||
if (billType === BillType.consume) setLabel(cls2label.consume[c][0])
|
// if (billType === BillType.CONSUME) setLabel(cls2label.consume[c][0])
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{
|
{
|
||||||
classData.map(c => <Select.Option key={c} value={c}>{c}</Select.Option>)
|
classData.map(c => <Select.Option key={c} value={c}>{c}</Select.Option>)
|
||||||
}
|
}
|
||||||
</Select>
|
</Select>
|
||||||
{billType === BillType.consume && (
|
{billType === BillType.CONSUME && (
|
||||||
<Select
|
<Select
|
||||||
style={{ width: 120 }}
|
style={{ width: 120 }}
|
||||||
// showSearch
|
// showSearch
|
||||||
|
@ -189,7 +188,8 @@ function Record() {
|
||||||
value={label === "" ? null : label}
|
value={label === "" ? null : label}
|
||||||
onChange={setLabel}>
|
onChange={setLabel}>
|
||||||
{cls !== "" &&
|
{cls !== "" &&
|
||||||
cls2label.consume[cls]
|
cls2label.consume
|
||||||
|
.find(it => it.name === cls)?.labels
|
||||||
.map(la => <Select.Option key={la} value={la}>{la}</Select.Option>)
|
.map(la => <Select.Option key={la} value={la}>{la}</Select.Option>)
|
||||||
}
|
}
|
||||||
<Select.Option key={"other"} value={"其他"}>{"其他"}</Select.Option>)
|
<Select.Option key={"other"} value={"其他"}>{"其他"}</Select.Option>)
|
||||||
|
|
|
@ -1,8 +1,10 @@
|
||||||
import { makeAutoObservable, runInAction } from "mobx";
|
import { makeAutoObservable, runInAction } from "mobx";
|
||||||
import { createContext } from "react";
|
import { createContext } from "react";
|
||||||
import { createBill, getBills, getClass } from "../api/bills";
|
import { postBills, getBills, getLabels } from "../api/bills";
|
||||||
import { BillType, IBill } from "../model";
|
import { BillType, IBill } from "../model";
|
||||||
import * as R from "ramda"
|
import * as R from "ramda"
|
||||||
|
import { BillLabel } from "./types";
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 仅存储一个月的数据
|
* 仅存储一个月的数据
|
||||||
|
@ -10,11 +12,10 @@ import * as R from "ramda"
|
||||||
export class Bill {
|
export class Bill {
|
||||||
private _bills: IBill[] = [];
|
private _bills: IBill[] = [];
|
||||||
// _cls2label: IClass = {consume: new Map<string, string[]>(), income: []}
|
// _cls2label: IClass = {consume: new Map<string, string[]>(), income: []}
|
||||||
private _cls2label: { consume: Record<string, string[]>, income: [] } = { consume: {}, income: [] }
|
private _cls2label: BillLabel = { consume: [], income: [] }
|
||||||
|
|
||||||
constructor() {
|
constructor() {
|
||||||
makeAutoObservable(this)
|
makeAutoObservable(this)
|
||||||
this.fetchClass().then()
|
|
||||||
}
|
}
|
||||||
|
|
||||||
get bills() {
|
get bills() {
|
||||||
|
@ -34,8 +35,8 @@ export class Bill {
|
||||||
return functions(this._bills)
|
return functions(this._bills)
|
||||||
}
|
}
|
||||||
|
|
||||||
groupByClass(type?: BillType) {
|
groupByClass(type?: BillType, date?: string) {
|
||||||
const classFun = R.filter((bill: IBill) => R.of(bill.type).length === 0 || bill.type === type)
|
const classFun = R.filter((bill: IBill) => R.of(bill.type).length === 0 || bill.type === type && (date ? bill.date === date : true))
|
||||||
const functions = R.compose(
|
const functions = R.compose(
|
||||||
R.groupBy((bill: IBill) => bill.cls),
|
R.groupBy((bill: IBill) => bill.cls),
|
||||||
classFun,
|
classFun,
|
||||||
|
@ -43,6 +44,16 @@ export class Bill {
|
||||||
return functions(this._bills)
|
return functions(this._bills)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
groupByLabelOfClass(className: string) {
|
||||||
|
const classFun = R.filter((bill: IBill) => R.of(bill.type).length === 0 || bill.cls === className)
|
||||||
|
const functions = R.compose(
|
||||||
|
R.groupBy((bill: IBill) => bill.label),
|
||||||
|
classFun,
|
||||||
|
)
|
||||||
|
return functions(this._bills)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
get listDailyMoney() {
|
get listDailyMoney() {
|
||||||
return this.groupByDate
|
return this.groupByDate
|
||||||
}
|
}
|
||||||
|
@ -63,7 +74,7 @@ export class Bill {
|
||||||
(s: number) => s.toFixed(2),
|
(s: number) => s.toFixed(2),
|
||||||
R.sum,
|
R.sum,
|
||||||
R.map((bill: IBill) => bill.money),
|
R.map((bill: IBill) => bill.money),
|
||||||
R.filter((bill: IBill) => bill.type === BillType.consume),
|
R.filter((bill: IBill) => bill.type === BillType.CONSUME),
|
||||||
)
|
)
|
||||||
return functions(this._bills)
|
return functions(this._bills)
|
||||||
}
|
}
|
||||||
|
@ -74,16 +85,16 @@ export class Bill {
|
||||||
(s: number) => s.toFixed(2),
|
(s: number) => s.toFixed(2),
|
||||||
R.sum,
|
R.sum,
|
||||||
R.map((bill: IBill) => bill.money),
|
R.map((bill: IBill) => bill.money),
|
||||||
R.filter((bill: IBill) => bill.type === BillType.income),
|
R.filter((bill: IBill) => bill.type === BillType.INCOME),
|
||||||
)
|
)
|
||||||
return functions(this._bills)
|
return functions(this._bills)
|
||||||
}
|
}
|
||||||
|
|
||||||
getTotalMoney(type?: BillType) {
|
getTotalMoney(type?: BillType) {
|
||||||
switch (type) {
|
switch (type) {
|
||||||
case BillType.income:
|
case BillType.INCOME:
|
||||||
return this.incomeMoney
|
return this.incomeMoney
|
||||||
case BillType.consume:
|
case BillType.CONSUME:
|
||||||
return this.consumeMoney
|
return this.consumeMoney
|
||||||
default:
|
default:
|
||||||
return this.totalMoney
|
return this.totalMoney
|
||||||
|
@ -98,7 +109,7 @@ export class Bill {
|
||||||
|
|
||||||
|
|
||||||
async add(bill: IBill) {
|
async add(bill: IBill) {
|
||||||
const { id } = await createBill(bill)
|
const { id } = await postBills([bill])
|
||||||
bill.id = id
|
bill.id = id
|
||||||
runInAction(() => {
|
runInAction(() => {
|
||||||
this._bills.push(bill);
|
this._bills.push(bill);
|
||||||
|
@ -108,12 +119,22 @@ export class Bill {
|
||||||
async fetch(year: number, month: number) {
|
async fetch(year: number, month: number) {
|
||||||
const data = await getBills(year, month)
|
const data = await getBills(year, month)
|
||||||
runInAction(() => {
|
runInAction(() => {
|
||||||
this._bills = data
|
this._bills = data.map((data: any) => {
|
||||||
|
return {
|
||||||
|
id: data.id,
|
||||||
|
type: data.type.toUpperCase === 'INCOME' ? BillType.INCOME : BillType.CONSUME,
|
||||||
|
date: data.date,
|
||||||
|
money: data.money,
|
||||||
|
cls: data.cls,
|
||||||
|
label: data.label,
|
||||||
|
options: data.options
|
||||||
|
}
|
||||||
|
})
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
async fetchClass() {
|
async fetchLabels() {
|
||||||
const cls2label = await getClass()
|
const cls2label = await getLabels()
|
||||||
runInAction(() => {
|
runInAction(() => {
|
||||||
this._cls2label = cls2label
|
this._cls2label = cls2label
|
||||||
})
|
})
|
||||||
|
|
9
src/store/types.ts
Normal file
9
src/store/types.ts
Normal file
|
@ -0,0 +1,9 @@
|
||||||
|
export type BillLabel = {
|
||||||
|
consume: Array<BillLabelOption>,
|
||||||
|
income: Array<BillLabelOption>,
|
||||||
|
}
|
||||||
|
|
||||||
|
type BillLabelOption = {
|
||||||
|
name: string,
|
||||||
|
labels: Array<string>,
|
||||||
|
}
|
|
@ -7,7 +7,7 @@ export default defineConfig({
|
||||||
server: {
|
server: {
|
||||||
proxy: {
|
proxy: {
|
||||||
"/api/": {
|
"/api/": {
|
||||||
target: "http://www.fadinglight.cn:8080/",
|
target: "https://bill.fadinglight.cn/api/",
|
||||||
changeOrigin: true,
|
changeOrigin: true,
|
||||||
rewrite: (path) => path.replace(/^\/api/, ""),
|
rewrite: (path) => path.replace(/^\/api/, ""),
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue
Block a user