clz/bill-react
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix🛠️: crypto.uuid

Browse Source
This commit is contained in:
clz 2022-09-06 18:41:14 +08:00
parent d7659d83b9
commit e4f0428c7e
1 changed files with 20 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
src/pages/Record/Record.tsx
View File

@ -12,14 +12,14 @@ import {
ArrowDownOutlined, ArrowDownOutlined,
CloudUploadOutlined, DeleteOutlined, CloudUploadOutlined, DeleteOutlined,
} from "@ant-design/icons"; } 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 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 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() { function Record() {
@ -76,7 +76,7 @@ function Record() {
<Button <Button
type="primary" type="primary"
danger danger
icon={<DeleteOutlined/>} icon={<DeleteOutlined />}
onClick={() => setDataSource(datasource.filter(bill => bill !== record))} onClick={() => setDataSource(datasource.filter(bill => bill !== record))}
/> />
</Space> </Space>
@ -86,8 +86,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 },
]; ];
// 提交到表格 // 提交到表格
@ -113,7 +113,7 @@ function Record() {
} }
if (checkBill()) { if (checkBill()) {
Reflect.set(bill, "key", crypto.randomUUID()) Reflect.set(bill, "key", Date.now().toString() + Math.random().toString())
setDataSource([bill, ...datasource]) setDataSource([bill, ...datasource])
reset() reset()
} else { } else {
@ -128,7 +128,7 @@ function Record() {
const failures = [] const failures = []
for (let bill of datasource) { for (let bill of datasource) {
try { try {
const {id} = await createBill(bill) const { id } = await createBill(bill)
if (!id) failures.push(bill) if (!id) failures.push(bill)
} catch (e) { } catch (e) {
failures.push(bill) failures.push(bill)
@ -157,7 +157,7 @@ function Record() {
/> />
<Select <Select
ref={clsRef} ref={clsRef}
style={{width: 120}} style={{ width: 120 }}
showSearch showSearch
placeholder="类别" placeholder="类别"
optionFilterProp="children" optionFilterProp="children"
@ -175,7 +175,7 @@ function Record() {
} }
</Select> </Select>
<Select <Select
style={{width: 120}} style={{ width: 120 }}
showSearch showSearch
placeholder="标签" placeholder="标签"
optionFilterProp="children" optionFilterProp="children"
@ -191,7 +191,7 @@ function Record() {
<Select.Option key={"other"} value={"其他"}>{"其他"}</Select.Option>) <Select.Option key={"other"} value={"其他"}>{"其他"}</Select.Option>)
</Select> </Select>
<InputNumber <InputNumber
style={{width: 120}} style={{ width: 120 }}
placeholder="money" placeholder="money"
prefix="￥" prefix="￥"
value={money} value={money}
@ -207,7 +207,7 @@ function Record() {
/> />
<Button <Button
type="primary" type="primary"
icon={<ArrowDownOutlined/>} icon={<ArrowDownOutlined />}
onKeyUp={e => e.key === "Tab" onKeyUp={e => e.key === "Tab"
&& clsRef.current!.focus() && clsRef.current!.focus()
} }
@ -218,9 +218,12 @@ function Record() {
</Space> </Space>
</div> </div>
<div className={styles.table}> <div className={styles.table}>
<Table dataSource={datasource} columns={columns}></Table> <Table
dataSource={datasource}
columns={columns}
/>
<Button <Button
icon={<CloudUploadOutlined/>} icon={<CloudUploadOutlined />}
type="primary" type="primary"
loading={uploadLoading} loading={uploadLoading}
onClick={upload} onClick={upload}