ball_admin/src/pages/active/index.tsx

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