feat🔫: new labels

src/pages/Record/Record.tsx

@@ -1,13 +1,13 @@
-import {Button, DatePicker, Input, InputNumber, message, Radio, Select, Space, Table, Tag} from "antd";
+import { Button, DatePicker, Input, InputNumber, message, Radio, Select, Space, Table, Tag } from "antd";
-import {ArrowDownOutlined, CloudUploadOutlined, DeleteOutlined,} from "@ant-design/icons";
+import { ArrowDownOutlined, CloudUploadOutlined, DeleteOutlined, } from "@ant-design/icons";
-import {useContext, useEffect, useRef, useState} from "react";
+import { useContext, useEffect, useRef, useState } from "react";
-import {BillType, EmptyBill, IBill} from "../../model";
+import { BillType, EmptyBill, IBill } from "../../model";
 import moment from "moment/moment";
-import {BillContext} from "../../store";
+import { BillContext } from "../../store";
-import {observer} from "mobx-react-lite";
+import { observer } from "mobx-react-lite";
 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 { createBill } from "../../api/bills";
 
 
 function Record() {
@@ -69,7 +69,7 @@ function Record() {
                     <Button
                         type="primary"
                         danger
-                        icon={<DeleteOutlined/>}
+                        icon={<DeleteOutlined />}
                         onClick={() => setDataSource(datasource.filter(bill => bill !== record))}
                     />
                 </Space>
@@ -79,8 +79,8 @@ function Record() {
     const [datasource, setDataSource] = useState<IBill[]>([])
 
     const typeOpt = [
-        {label: '支出', value: BillType.CONSUME},
+        { label: '支出', value: BillType.CONSUME },
-        {label: '收入', value: BillType.INCOME},
+        { label: '收入', value: BillType.INCOME },
     ];
 
     // 提交到表格
@@ -120,7 +120,7 @@ function Record() {
         const failures = []
         for (let bill of datasource) {
             try {
-                const {id} = await createBill(bill)
+                const { id } = await createBill(bill)
                 if (!id) failures.push(bill)
             } catch (e) {
                 failures.push(bill)
@@ -133,10 +133,10 @@ function Record() {
     let classData: string[] = []
     switch (billType) {
         case BillType.CONSUME:
-            classData = Object.keys(cls2label.consume)
+            classData = cls2label.consume.map(it => it.name)
             break
         case BillType.INCOME:
-            classData = cls2label.income
+            classData = cls2label.income.map(it => it.name)
             break
     }
 
@@ -145,7 +145,7 @@ function Record() {
             <div className={styles.new}>
                 <Space align="start">
                     <Radio.Group
-                        style={{width: 120}}
+                        style={{ width: 120 }}
                         options={typeOpt}
                         optionType="button"
                         buttonStyle="solid"
@@ -153,14 +153,14 @@ function Record() {
                         onChange={e => setBillType(e.target.value)}
                     />
                     <DatePicker
-                        style={{width: 120}}
+                        style={{ width: 120 }}
                         allowClear={false}
                         value={moment(date, 'YYYY-MM-DD')}
                         onChange={(_, dateStr) => setDate(dateStr)}
                     />
                     <Select
                         ref={clsRef}
-                        style={{width: 120}}
+                        style={{ width: 120 }}
                         // showSearch
                         placeholder="类别"
                         optionFilterProp="children"
@@ -170,7 +170,7 @@ function Record() {
                         value={cls === "" ? null : cls}
                         onChange={c => {
                             setCls(c)
-                            if (billType === BillType.CONSUME) setLabel(cls2label.consume[c][0])
+                            // if (billType === BillType.CONSUME) setLabel(cls2label.consume[c][0])
                         }}
                     >
                         {
@@ -179,7 +179,7 @@ function Record() {
                     </Select>
                     {billType === BillType.CONSUME && (
                         <Select
-                            style={{width: 120}}
+                            style={{ width: 120 }}
                             // showSearch
                             placeholder="标签"
                             optionFilterProp="children"
@@ -189,14 +189,15 @@ function Record() {
                             value={label === "" ? null : label}
                             onChange={setLabel}>
                             {cls !== "" &&
-                                cls2label.consume[cls]
+                                cls2label.consume
+                                    .find(it => it.name === cls)?.labels
                                     .map(la => <Select.Option key={la} value={la}>{la}</Select.Option>)
                             }
                             <Select.Option key={"other"} value={"其他"}>{"其他"}</Select.Option>)
                         </Select>
                     )}
                     <InputNumber
-                        style={{width: 120}}
+                        style={{ width: 120 }}
                         placeholder="money"
                         prefix="￥"
                         value={money}
@@ -204,7 +205,7 @@ function Record() {
                         onKeyDown={e => e.key === "Enter" && submit()}
                     />
                     <Input.TextArea
-                        style={{width: 180}}
+                        style={{ width: 180 }}
                         rows={1}
                         placeholder="备注"
                         value={options}
@@ -213,7 +214,7 @@ function Record() {
                     />
                     <Button
                         type="primary"
-                        icon={<ArrowDownOutlined/>}
+                        icon={<ArrowDownOutlined />}
                         onKeyUp={e => e.key === "Tab" && clsRef.current!.focus()}
                         onClick={submit}
                     >
@@ -228,7 +229,7 @@ function Record() {
                     size="small"
                 />
                 <Button
-                    icon={<CloudUploadOutlined/>}
+                    icon={<CloudUploadOutlined />}
                     type="primary"
                     loading={uploadLoading}
                     onClick={upload}

src/store/index.ts

@@ -3,6 +3,8 @@ import { createContext } from "react";
 import { createBill, getBills, getLabels } from "../api/bills";
 import { BillType, IBill } from "../model";
 import * as R from "ramda"
+import { BillLabel } from "./types";
+
 
 /**
  * 仅存储一个月的数据
@@ -10,7 +12,7 @@ import * as R from "ramda"
 export class Bill {
     private _bills: IBill[] = [];
     // _cls2label: IClass = {consume: new Map<string, string[]>(), income: []}
-    private _cls2label: { consume: [], income: [] } = { consume: [], income: [] }
+    private _cls2label: BillLabel = { consume: [], income: [] }
 
     constructor() {
         makeAutoObservable(this)
@@ -135,7 +137,7 @@ export class Bill {
     async fetchLabels() {
         const cls2label = await getLabels()
         runInAction(() => {
-            this._cls2label == cls2label
+            this._cls2label = cls2label
         })
     }
 }

src/store/types.ts

@@ -0,0 +1,9 @@
+export type BillLabel = {
+    consume: Array<BillLabelOption>,
+    income: Array<BillLabelOption>,
+}
+
+type BillLabelOption = {
+    name: string,
+    labels: Array<string>,
+}