zcloud-gbs-emergencyRescue-react/src/pages/Container/Enterprise/EmergencyResource/EmergencyShelter/Add/index.js

import { Connect } from "@cqsjjb/jjb-dva-runtime";
import { message } from "antd";
import { useEffect, useState } from "react";
import AreaCascader from "zy-react-library/components/Cascader/Area";
import FormBuilder from "zy-react-library/components/FormBuilder";
import Map from "zy-react-library/components/Map";
import Page from "zy-react-library/components/Page";
import DictionarySelect from "zy-react-library/components/Select/Dictionary";
import { FORM_ITEM_RENDER_ENUM } from "zy-react-library/enum/formItemRender";
import useGetUrlQuery from "zy-react-library/hooks/useGetUrlQuery";
import { PHONE, TEL_PHONE } from "zy-react-library/regular";
import { getLabelName } from "zy-react-library/utils";
import { NS_EMERGENCY_SHELTER, NS_GLOBAL } from "~/enumerate/namespace";

function Add(props) {
  const query = useGetUrlQuery();
  const [form] = FormBuilder.useForm();

  const [corpInfoList, setCorpInfoList] = useState([]);

  const getData = async () => {
    if (!query.id)
      return;

    const { data } = await props["emergencyShelterInfo"]({ id: query.id });
    form.setFieldsValue({
      ...data,
      regionCode: data.regionCode ? data.regionCode.split(",") : [],
    });
  };

  const getCorpInfoList = async () => {
    const { data } = await props["corpInfoListAll"]({ enterpriseType: 2 });
    setCorpInfoList(data);
  };

  useEffect(() => {
    getData();
    getCorpInfoList();
  }, []);

  const onSubmit = async (values) => {
    const { success } = await props[query.id ? "emergencyShelterUpdate" : "emergencyShelterAdd"]({
      ...values,
      regionCode: values.regionCode && values.regionCode.join(","),
      id: query.id,
    });
    if (success) {
      message.success(query.id ? "编辑成功" : "新增成功");
      props.history.goBack();
    }
  };

  return (
    <Page headerTitle={query.id ? "编辑" : "新增"} isShowFooter={false}>
      <FormBuilder
        loading={props.emergencyShelter.emergencyShelterLoading}
        options={[
          { name: "placeName", label: "避难所名称" },
          {
            name: "placeType",
            label: "场所类型",
            render: (
              <DictionarySelect
                dictValue="emergencyShelterType"
                onGetLabel={(label) => {
                  form.setFieldValue("placeTypeName", label);
                }}
              />
            ),
          },
          { name: "placeTypeName", label: "场所类型名称", onlyForLabel: true },
          { name: "detailAddress", label: "详情地址", required: false, span: 24 },
          { key: "map", customizeRender: true, span: 24, render: (<Map type="cesium" />) },
          { name: "contactPerson", label: "联系人" },
          {
            name: "contactPhoneFixed",
            label: "联系人固定电话",
            rules: [{ pattern: TEL_PHONE, message: "请输入正确的电话号码" }],
          },
          {
            name: "contactPhoneMobile",
            label: "联系人移动电话",
            required: false,
            rules: [{ pattern: PHONE, message: "请输入正确的手机号" }],
          },
          { name: "enterpriseName", label: "企业名称", required: false },
          {
            name: "regionCode",
            label: "所属区域",
            render: (
              <AreaCascader
                changeOnSelect
                onGetNodePaths={(nodes) => {
                  form.setFieldValue("regionCodeName", nodes.map(node => node.label).join("/"));
                }}
              />
            ),
            required: false,
          },
          { name: "regionCodeName", label: "所属区域名称", onlyForLabel: true },
          {
            name: "affiliatedUnit",
            label: "所属单位",
            render: FORM_ITEM_RENDER_ENUM.SELECT,
            items: corpInfoList,
            itemsField: { labelKey: "corpName", valueKey: "id" },
            required: false,
            componentProps: {
              onChange: (value) => {
                form.setFieldValue("affiliatedUnitName", getLabelName({
                  list: corpInfoList,
                  status: value,
                  idKey: "id",
                  nameKey: "corpName",
                }));
              },
            },
          },
          { name: "affiliatedUnitName", label: "所属单位名称", onlyForLabel: true },
        ]}
        form={form}
        onFinish={onSubmit}
      />
    </Page>
  );
}

export default Connect([NS_EMERGENCY_SHELTER, NS_GLOBAL], true)(Add);