CouponLog.tsx
3.74 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
import React, { useState, useEffect } from "react";
import { getCouponLog, setCouponDelay } from "../api";
import useInitial from "@/hooks/useInitail";
import {
Modal,
Table,
Form,
DatePicker,
Button,
message,
} from "antd";
import moment from 'moment';
interface Props {
couponLog: { visible: boolean; id: number; no: string, delay?: boolean };
setCouponLog: Function;
onChange: () => void;
}
// 日志类型
enum LogTypeEnum {
"创建",
"待生效",
"待使用",
"已锁定",
"已使用 ",
"已过期",
"已作废 ",
"激活 ",
"延期",
}
const { Column } = Table;
function CouponLog({ couponLog, setCouponLog, onChange }: Props) {
const [form] = Form.useForm();
const { data, setParams, params, loading } = useInitial(
getCouponLog,
[],
couponLog.id,
!couponLog.id
);
useEffect(() => {
if (couponLog.visible) {
setParams(params, true);
}
}, [couponLog]);
const [confirmLoading, setConfirmLoading] = useState(false);
const onFinish = () => {
console.log("提交延迟");
form
.validateFields()
.then((field) => {
setConfirmLoading(true);
setCouponDelay({ ...field, id: couponLog.id })
.then((res) => {
message.success("优惠券延期成功", 2);
setCouponLog({ ...couponLog, visible: false });
onChange && onChange();
})
.catch((err) => message.error(err.message))
.finally(() => setConfirmLoading(false));
})
.catch((error) => message.error(error.message, 2));
};
return (
<Modal
title={couponLog.delay ? "优惠券延期" : "优惠券记录"}
visible={couponLog.visible}
onCancel={() => setCouponLog({ visible: false })}
afterClose={() => form.resetFields()}
footer={
!couponLog.delay
? null
: [
<Button
key="submit"
type="primary"
loading={confirmLoading}
onClick={() => form.submit()}
>
确定
</Button>,
<Button
key="back"
onClick={() => setCouponLog({ visible: false })}
>
取消
</Button>,
]
}
>
{couponLog.delay ? (
<>
<Form onFinish={onFinish} form={form}>
<Form.Item label="优惠券编码">
<div>{couponLog.no}</div>
</Form.Item>
<Form.Item
label="延期时间"
style={{ width: "100%" }}
name="delayTime"
rules={[{ required: true, message: "请选择延期时间!" }]}
>
<DatePicker showTime style={{ width: "100%" }} />
</Form.Item>
</Form>
</>
) : (
<Table
dataSource={data}
loading={loading}
rowKey="id"
>
<Column
title="日志类型"
dataIndex="type"
key="type"
render={(text) => (
<span>{text !== undefined ? LogTypeEnum[text] : "--"}</span>
)}
/>
<Column
title="调用系统"
dataIndex="gateName"
key="gateName"
render={(text) => <span>{text || "--"}</span>}
/>
<Column
title="创建时间"
dataIndex="createTime"
key="createTime"
render={(text) => <span>{text ? moment(text).format("YYYY-MM-DD HH:mm") : "--"}</span>}
/>
<Column
title="备注"
dataIndex="remark"
key="type"
render={(text) => <span>{text || "--"}</span>}
/>
</Table>
)}
</Modal>
);
}
export default CouponLog;