230 lines
5.8 KiB
TypeScript
230 lines
5.8 KiB
TypeScript
import { Button, Space, Modal, Switch, Tooltip } from "antd";
|
|
import { inject, observer } from "mobx-react";
|
|
import type { ColumnsType } from "antd/es/table";
|
|
import BTable from "@/components/BTable";
|
|
import { useEffect, useState } from "react";
|
|
import { UserDataType } from "@/model/userModel";
|
|
import { Store } from "antd/lib/form/interface";
|
|
import SimpleForm from "@/components/form/simple_form";
|
|
import { FormInstance } from "antd/es/form/Form";
|
|
import React from "react";
|
|
import ActiveConfig from "@/service/apiConfig/active";
|
|
import dayjs from "dayjs";
|
|
const Active = (props: Store) => {
|
|
const { activityStore } = props;
|
|
const [projectConfig, setProjectConfig] = useState<any>([]);
|
|
const [id, setId] = useState<any>(null);
|
|
const [record, setRecord] = useState<any>(null);
|
|
const formRef = React.useRef<FormInstance>(null);
|
|
const [isModalOpen, setIsModalOpen] = useState(false);
|
|
const columns: ColumnsType<UserDataType> = [
|
|
{
|
|
title: "活动标题",
|
|
dataIndex: "title",
|
|
width: 200,
|
|
},
|
|
{
|
|
title: "活动描述",
|
|
dataIndex: "desc",
|
|
width: 200,
|
|
},
|
|
{
|
|
title: "活动图片",
|
|
dataIndex: "activeIcon",
|
|
width: 200,
|
|
ellipsis: {
|
|
showTitle: false,
|
|
},
|
|
render: (address) => (
|
|
<Tooltip placement="topLeft" title={address}>
|
|
{address}
|
|
</Tooltip>
|
|
),
|
|
},
|
|
{
|
|
title: "活动人数",
|
|
dataIndex: "peopleNum",
|
|
width: 200,
|
|
},
|
|
{
|
|
title: "活动地址",
|
|
dataIndex: "address",
|
|
width: 200,
|
|
},
|
|
{
|
|
title: "折扣",
|
|
dataIndex: "discount",
|
|
width: 200,
|
|
},
|
|
{
|
|
title: "活动开始时间",
|
|
dataIndex: "startTime",
|
|
width: 200,
|
|
},
|
|
{
|
|
title: "活动结束时间",
|
|
dataIndex: "endTime",
|
|
width: 200,
|
|
},
|
|
{
|
|
title: "活动状态",
|
|
width: 200,
|
|
render: (any, record) => <span>{record.status ? "开启" : "关闭"}</span>,
|
|
},
|
|
{
|
|
width: 200,
|
|
title: "发起人",
|
|
dataIndex: "userId",
|
|
},
|
|
{
|
|
title: "操作",
|
|
width: 200,
|
|
fixed: "right",
|
|
dataIndex: "id",
|
|
render: (any, record) => (
|
|
<div>
|
|
<Space direction="vertical">
|
|
<Space wrap>
|
|
<Switch
|
|
defaultChecked
|
|
onChange={(bools) => {
|
|
onChange(bools, record);
|
|
}}
|
|
/>
|
|
<Button
|
|
type="dashed"
|
|
danger
|
|
size="small"
|
|
onClick={() => {
|
|
activityStore.deleteItem(record.id);
|
|
}}
|
|
>
|
|
删除
|
|
</Button>
|
|
<Button
|
|
type="dashed"
|
|
size="small"
|
|
onClick={() => {
|
|
editAction(record);
|
|
}}
|
|
>
|
|
编辑
|
|
</Button>
|
|
</Space>
|
|
</Space>
|
|
</div>
|
|
),
|
|
},
|
|
];
|
|
const editAction = (record) => {
|
|
record.startTime = dayjs(record.startTime, "YYYY-MM-DD");
|
|
record.endTime = dayjs(record.endTime, "YYYY-MM-DD");
|
|
setProjectConfig(defaultConfig);
|
|
setIsModalOpen(true);
|
|
formRef.current?.setFieldsValue(record);
|
|
setRecord(record);
|
|
setId(record.id);
|
|
};
|
|
const onChange = (bools, record) => {
|
|
activityStore.putItem(record.id, {
|
|
status: bools,
|
|
activeName: record.activeName,
|
|
discount: record.discount,
|
|
startTime: record.startTime,
|
|
endTime: record.endTime,
|
|
});
|
|
};
|
|
const defaultConfig = [
|
|
{
|
|
type: "input",
|
|
label: "活动名称",
|
|
name: "activeName",
|
|
value: "",
|
|
rules: [{ required: true, message: "请输入活动名称!" }],
|
|
},
|
|
|
|
{
|
|
type: "input",
|
|
label: "折扣",
|
|
name: "discount",
|
|
value: "",
|
|
},
|
|
{
|
|
type: "Date",
|
|
label: "活动开始时间",
|
|
name: "startTime",
|
|
value: "",
|
|
},
|
|
{
|
|
type: "Date",
|
|
label: "活动结束时间",
|
|
name: "endTime",
|
|
value: "",
|
|
},
|
|
];
|
|
|
|
useEffect(() => {
|
|
activityStore.getlist(ActiveConfig.LIST);
|
|
}, [activityStore]);
|
|
const onFinish = (values: any) => {
|
|
values["startTime"] = values["startTime"].format("YYYY.MM.DD");
|
|
values["endTime"] = values["endTime"].format("YYYY.MM.DD");
|
|
if (!id) {
|
|
activityStore.add(values);
|
|
} else {
|
|
activityStore.putItem(id, values);
|
|
}
|
|
setIsModalOpen(false);
|
|
};
|
|
const onFinishFailed = () => {};
|
|
const addAction = () => {
|
|
setProjectConfig(defaultConfig);
|
|
setId(null);
|
|
setRecord(null);
|
|
setIsModalOpen(true);
|
|
formRef.current?.setFieldsValue(record);
|
|
};
|
|
return (
|
|
<div style={{ padding: "10px" }}>
|
|
<Button
|
|
style={{ marginBottom: "10px" }}
|
|
className="projectContentAdd"
|
|
onClick={() => addAction()}
|
|
>
|
|
添加活动
|
|
</Button>
|
|
<Modal
|
|
title="活动信息"
|
|
width={800}
|
|
open={isModalOpen}
|
|
onCancel={() => setIsModalOpen(false)}
|
|
afterClose={() => formRef.current?.resetFields()}
|
|
onOk={() => formRef.current?.submit()}
|
|
>
|
|
<SimpleForm
|
|
formRef={formRef}
|
|
createCallback={() => {
|
|
formRef.current?.setFieldsValue(record);
|
|
}}
|
|
formName="card_basic"
|
|
colProps={4}
|
|
subBtnName="提交"
|
|
formDatas={projectConfig}
|
|
onFinish={onFinish}
|
|
initialValues={true}
|
|
onFinishFailed={onFinishFailed}
|
|
/>
|
|
</Modal>
|
|
<Space direction="vertical" size="middle" style={{ display: "flex" }}>
|
|
<BTable
|
|
store={activityStore}
|
|
columns={columns}
|
|
dataSource={activityStore.list}
|
|
/>
|
|
</Space>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default inject("activityStore")(observer(Active));
|