admin/src/pages/supportability/index.jsx

import React, { useState, useEffect } from "react";
import { useNavigate } from "react-router-dom";
import {
  Button,
  Row,
  Col,
  Form,
  Input,
  InputNumber,
  Card,
  Checkbox,
} from "antd";
import {
  getSupportCapabilityDetail,
  updateSupportCapability,
} from "@/services/supportCapability";

const configList = [
  {
    //12个
    title: "常规膳食保障",
    children: [
      {
        name: "dietDaily",
        label: "单日整体膳食供应能力(人次)",
      },
      {
        name: "dietSingle",
        label: "单次整体膳食供应能力(人)",
      },
      {
        name: "dietStationDaily",
        label: "单日站内膳食供应能力(人次)",
      },
      {
        name: "dietStationSingle",
        label: "单次站内膳食供应能力(人)",
      },
      {
        name: "dietRemoteDaily",
        label: "单日远程膳食供应能力(人次)",
      },
      {
        name: "dietRemoteSingle",
        label: "单次远程膳食供应能力(人)",
      },
      {
        name: "dietSocializationDaily",
        label: "单日社会化膳食供应能力(人次)",
      },
      {
        name: "dietSocializationSingle",
        label: "单次社会化膳食供应能力(人)",
      },
      {
        name: "dietTempDailyNum",
        label: "单日临时制膳点数量(个)",
      },
      {
        name: "dietTempSingleNum",
        label: "单次临时制膳点数量(个)",
      },
      {
        name: "dietTempDaily",
        label: "单日临时制膳点供应能力(人次)",
      },
      {
        name: "dietTempSingle",
        label: "单次临时制膳点供应能力(人)",
      },
    ],
  },
  {
    title: "应急膳食保障",
    children: [
      {
        name: "dietDailyEmergency",
        label: "应急单日整体膳食供应能力(人次)",
        key: 13,
      },
      {
        name: "dietSingleEmergency",
        label: "应急单次整体膳食供应能力(人)",
        key: 14,
      },
      {
        name: "dietStationDailyEmergency",
        label: "应急单日站内膳食供应能力(人次)",
        key: 15,
      },
      {
        name: "dietStationSingleEmergency",
        label: "应急单次站内膳食供应能力(人)",
        key: 16,
      },
      {
        name: "dietRemoteDailyEmergency",
        label: "应急单日远程膳食供应能力(人次)",
        key: 17,
      },
      {
        name: "dietRemoteSingleEmergency",
        label: "应急单次远程膳食供应能力(人)",
        key: 18,
      },
      {
        name: "dietSocializationDailyEmergency",
        label: "应急单日社会化膳食供应能力(人次)",
        key: 19,
      },
      {
        name: "dietSocializationSingleEmergency",
        label: "应急单次社会化膳食供应能力(人)",
        key: 20,
      },
      {
        name: "dietTempDailyNumEmergency",
        label: "应急单日临时制膳点数量(个)",
        key: 21,
      },
      {
        name: "dietTempSingleNumEmergency",
        label: "应急单次临时制膳点数量(个)",
        key: 22,
      },
      {
        name: "dietTempDailyEmergency",
        label: "应急单日临时制膳点供应能力(人次)",
        key: 23,
      },
      {
        name: "dietTempSingleEmergency",
        label: "应急单次临时制膳点供应能力(人)",
        key: 24,
      },
    ],
  },
  {
    title: "常规住宿保障",
    children: [
      {
        name: "stayCapability",
        label: "整体住宿供应能力(人)",
        key: 25,
      },
      {
        name: "stayStation",
        label: "站内住宿供应能力(人)",
        key: 26,
      },
      {
        name: "staySocialization",
        label: "社会化住宿供应能力(人)",
        key: 27,
      },
    ],
  },
  {
    title: "应急住宿保障",
    children: [
      {
        name: "stayCapabilityEmergency",
        label: "应急整体住宿供应能力(人)",
        key: 28,
      },
      {
        name: "stayStationEmergency",
        label: "应急站内住宿供应能力(人)",
        key: 29,
      },
      {
        name: "staySocializationEmergency",
        label: "应急社会化住宿供应能力(人)",
        key: 30,
      },
    ],
  },
  {
    title: "运输送出保障车辆",
    children: [
      {
        name: "cartNum",
        label: "车辆总数(台)",
        key: 31,
      },
      {
        name: "cookingCart",
        label: "野外自行式炊事车(台)",
        key: 32,
      },
      {
        name: "transportVehicle",
        label: "送餐车(台)",
        key: 33,
      },
    ],
  },
  {
    title: "物资保障",
    children: [
      {
        name: "supportCapability",
        label: "物资供应能力(人)",
        key: 34,
      },
    ],
  },
];

export default (props) => {

  const [form] = Form.useForm();

  const [loading, setLoading] = useState(false);

  const onFinish = (values) => {
    setLoading(true);
    updateSupportCapability(1, {
      ...values,
      serviceCapability: values.serviceCapability
        ? values.serviceCapability?.join(",")
        : null,
    })
      .then((res) => {
        setLoading(false);
      })
      .catch(() => {});
  };

  useEffect(() => {
    getSupportCapabilityDetail(1).then((res) => {
      console.log(res, "getSupportCapabilityDetail");
      if (res) {
        form.setFieldsValue({
          ...res,
          serviceCapability: res.serviceCapability
            ? res.serviceCapability?.split(",")
            : null,
        });
      }
    });
  }, [form]);

  return (
    <Card>
      <Form layout="vertical" form={form} onFinish={onFinish}>
        {configList?.map((x, index1) => (
          <div key={index1}>
            <h3 style={{ marginBottom: "1.5em", fontWeight: 700 }}>
              {x.title}
            </h3>
            <Row gutter={48}>
              {x?.children?.map((item, index2) => (
                <Col span={6} key={index2}>
                  <Form.Item label={item.label} name={item.name}>
                    <InputNumber style={{ width: "100%" }} precision={0} />
                  </Form.Item>
                </Col>
              ))}
            </Row>
          </div>
        ))}
        <h3 style={{ marginBottom: "1.5em", fontWeight: 700 }}>服务能力</h3>
        <Form.Item name="serviceCapability">
          <Checkbox.Group
            options={[
              "洗澡",
              "WIFI",
              "电脑",
              "报纸/图书",
              "手机充电",
              "代购",
              "休息",
            ]}
          />
        </Form.Item>
        <Row gutter={48}>
          <Col offset={6} span={12}>
            <Button type="primary" htmlType="submit" loading={loading}>
              提交
            </Button>

          </Col>
        </Row>
      </Form>
    </Card>
  );
};