ball_admin/src/pages/active/index.tsx

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));