From c77a6366a7a06d23ebb68f69284bb3b4df1af27d Mon Sep 17 00:00:00 2001 From: clz Date: Mon, 5 Sep 2022 17:57:22 +0800 Subject: [PATCH] =?UTF-8?q?feat=F0=9F=94=AB:=20=E8=AE=B0=E8=B4=A6=E5=8A=9F?= =?UTF-8?q?=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.tsx | 2 + src/api/bills.ts | 11 +++ src/components/layout/index.tsx | 24 ++--- src/model/index.ts | 26 ++++- src/pages/Home/Home.tsx | 21 ++-- src/pages/Record/Record.module.scss | 2 + src/pages/Record/Record.tsx | 147 +++++++++++++++++++++++++++- src/store/index.ts | 30 ++++-- 8 files changed, 230 insertions(+), 33 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 409fd90..184b895 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -8,6 +8,7 @@ import {MdEditor} from './components/editor' import NotFound from './pages/NotFound' import {Bill, BillContext} from "./store"; import './App.css' +import Record from "./pages/Record/Record"; function App() { const billStore = new Bill() @@ -26,6 +27,7 @@ function App() { }/> }/> + }/> }/> }/> }/> diff --git a/src/api/bills.ts b/src/api/bills.ts index c52c711..f4fe86c 100644 --- a/src/api/bills.ts +++ b/src/api/bills.ts @@ -1,6 +1,17 @@ import request from "./request"; +import {IBill} from "../model"; export async function getBills(year: number, month: number) { const data = await request.get(`/search/${year}/${month}`) return data.data +} + +export async function getClass() { + const data = await request.get(`/class`) + return data.data +} + +export async function createBill(bill: IBill) { + const data = await request.post(`/create`, bill) + return data.data } \ No newline at end of file diff --git a/src/components/layout/index.tsx b/src/components/layout/index.tsx index b6e283c..dd7eec0 100644 --- a/src/components/layout/index.tsx +++ b/src/components/layout/index.tsx @@ -1,5 +1,5 @@ import styles from './index.module.scss' -import {NavLink} from "react-router-dom"; +import {NavLink, useLocation, useRoutes} from "react-router-dom"; import React, {ReactElement, useState} from 'react'; import { Menu, @@ -7,7 +7,7 @@ import { Layout as AntLayout } from 'antd'; import { - EditOutlined, + EditOutlined, FormOutlined, HomeOutlined, LoginOutlined, WechatOutlined @@ -21,17 +21,18 @@ interface IProps { export default function Layout(props: IProps) { const {children, home} = props - const {Header, Content, Footer, Sider} = AntLayout; - const items = [ - {label: Home, key: 'home', icon: }, - {label: Login, key: 'login', icon: }, - {label: Chat, key: 'chat', icon: }, - {label: Editor, key: 'editor', icon: }, + {label: Home, key: '/home', icon: }, + {label: Record, key: '/record', icon: }, + {label: Login, key: '/login', icon: }, + {label: Chat, key: '/chat', icon: }, + {label: Editor, key: '/editor', icon: }, ] const SiderMenu = (sprops: { theme?: MenuTheme }) => { + const location = useLocation() + const siderTitleCSS: React.CSSProperties = { color: "white", fontSize: "30px", @@ -39,7 +40,7 @@ export default function Layout(props: IProps) { } const [collapsed, setCollapsed] = useState(false) return ( - - + ) } diff --git a/src/model/index.ts b/src/model/index.ts index c17271b..69cf4f0 100644 --- a/src/model/index.ts +++ b/src/model/index.ts @@ -1,8 +1,32 @@ +export enum BillType { + consume = 0, + income, +} + export interface IBill { - _id?: string, + id?: string, + type: BillType date: string, money: number, cls: string, label: string, options?: string +} + + +export function EmptyBill(): IBill { + const now = new Date(); + return { + date: `${now.getFullYear()}-${now.getMonth() + 1}-${now.getDate()}`, + money: 0, + type: BillType.consume, + cls: "", + label: "", + options: "", + } +} + +export interface IClass { + consume: Map, + income: string[], } \ No newline at end of file diff --git a/src/pages/Home/Home.tsx b/src/pages/Home/Home.tsx index 5fd9ae6..e631f3e 100644 --- a/src/pages/Home/Home.tsx +++ b/src/pages/Home/Home.tsx @@ -1,15 +1,14 @@ import styles from "./Home.module.scss" import * as R from 'ramda' -import { IBill } from "../../model" +import {IBill} from "../../model" import Bar from "../../components/charts/bar" -import { useContext, useEffect, useState } from "react"; -import { BillContext } from "../../store"; -import { observer } from "mobx-react-lite"; +import {useContext, useEffect, useState} from "react"; +import {BillContext} from "../../store"; +import {observer} from "mobx-react-lite"; import Pie from "../../components/charts/pie"; -import { Card, ConfigProvider, DatePicker } from "antd"; +import {Card, DatePicker} from "antd"; import moment from 'moment'; import 'moment/locale/zh-cn'; -import locale from 'antd/es/locale/zh_CN'; const Home = () => { const billStore = useContext(BillContext) @@ -29,7 +28,7 @@ const Home = () => { const [month, setMonth] = useState(now.getMonth() + 1) useEffect(() => { - billStore.fetch(year, month) + billStore.fetch(year, month).then() }, [year, month]) const changeDate = (date: moment.Moment | null, datestring: string) => { @@ -51,11 +50,11 @@ const Home = () => { value={moment(`${year}-${month}`, 'YYYY-MM')} onChange={changeDate} /> - + - - - + + + ) } diff --git a/src/pages/Record/Record.module.scss b/src/pages/Record/Record.module.scss index e69de29..ae52429 100644 --- a/src/pages/Record/Record.module.scss +++ b/src/pages/Record/Record.module.scss @@ -0,0 +1,2 @@ +.record { +} \ No newline at end of file diff --git a/src/pages/Record/Record.tsx b/src/pages/Record/Record.tsx index b221065..d4548fe 100644 --- a/src/pages/Record/Record.tsx +++ b/src/pages/Record/Record.tsx @@ -1,9 +1,150 @@ +import { + Button, + DatePicker, + Input, + InputNumber, + message, + Radio, + Select, + Space +} from "antd"; +import {useContext, useEffect, useRef, useState} from "react"; +import {BillType, EmptyBill} from "../../model"; +import moment from "moment/moment"; +import {BillContext} from "../../store"; +import {observer} from "mobx-react-lite"; import styles from "./Record.module.scss" +import {BaseSelectRef} from "rc-select/lib/BaseSelect"; + +function Record() { + + const billStore = useContext(BillContext) + const cls2label = billStore.cls2label + + const emptyBill = EmptyBill() + const [billType, setBillType] = useState(emptyBill.type) + const [date, setDate] = useState(emptyBill.date) + const [cls, setCls] = useState(emptyBill.cls) + const [label, setLabel] = useState(emptyBill.label) + const [money, setMoney] = useState("") + const [options, setOptions] = useState(emptyBill.options) + + const clsRef = useRef(null) + useEffect(() => { + if (!!clsRef.current) clsRef.current.focus() + }, [clsRef]) -export default function Record() { + const typeOpt = [ + {label: '支出', value: BillType.consume}, + {label: '收入', value: BillType.income}, + ]; + + const submit = async () => { + const bill = EmptyBill() + bill.type = billType + bill.date = date + bill.cls = cls + bill.label = label + bill.money = Number(money) + bill.options = options + const checkBill = () => { + return bill.cls !== '' && bill.label !== '' && bill.money !== 0 + } + const reset = () => { + setCls("") + setLabel("") + setMoney("") + setOptions("") + if (!!clsRef.current) { + clsRef.current.focus() + } + } + + if (checkBill()) { + await billStore.add(bill) + reset() + } else { + message.error("请输入完整") + } + } return ( - <> +
+
+ + setBillType(e.target.value)} + /> + setDate(dateStr)} + /> + + + e.key === "Enter" && submit()} + /> + setOptions(value.target.value)} + rows={1} + placeholder="备注" + onKeyDown={e => e.key === "Enter" && submit()} + /> + + +
+
+
) -} \ No newline at end of file +} + +export default observer(Record) \ No newline at end of file diff --git a/src/store/index.ts b/src/store/index.ts index d7dd738..329b8ff 100644 --- a/src/store/index.ts +++ b/src/store/index.ts @@ -1,7 +1,7 @@ -import { makeAutoObservable, runInAction } from "mobx"; -import { createContext } from "react"; -import { getBills } from "../api/bills"; -import { IBill } from "../model"; +import {makeAutoObservable, runInAction} from "mobx"; +import {createContext} from "react"; +import {createBill, getBills, getClass} from "../api/bills"; +import {IBill} from "../model"; import * as R from "ramda" /** @@ -9,9 +9,16 @@ import * as R from "ramda" */ export class Bill { bills: IBill[] = []; + // _cls2label: IClass = {consume: new Map(), income: []} + _cls2label: { consume: Record, income: [] } = {consume: {}, income: []} constructor() { makeAutoObservable(this) + this.fetchClass().then() + } + + get cls2label() { + return this._cls2label } get listAllByDate() { @@ -43,8 +50,12 @@ export class Bill { } - add(bill: IBill) { - this.bills.push(bill); + async add(bill: IBill) { + const {id} = await createBill(bill) + bill.id = id + runInAction(() => { + this.bills.push(bill); + }) } async fetch(year: number, month: number) { @@ -53,6 +64,13 @@ export class Bill { this.bills = data }) } + + async fetchClass() { + const cls2label = await getClass() + runInAction(() => { + this._cls2label = cls2label + }) + } } export const BillContext = createContext(new Bill());