FEV2 / fw-cms

  import React, { useState, useEffect } from "react";
  import { Modal, Form, Input, Select, message, Radio } from "antd";
  import { useStore } from "../index";

  import { CompanyBusinessTypeEnum, CompanyCategoryTypeEnum, SubjectTypeEnum } from "@/pages/finance/entitys";

  import PositionSelector from "@/components/PositionSelector";
  import Contact from "./ContactsInput";
  import Account from "./AccountsInput";
  import { createCompanyApi, updateCompanyApi, getDetailComAccountApi } from "../api";

  import AdressSelect from "@/pages/finance/TradeCompany/components/AdressSelect";

  
  const FormItem = Form.Item;
  const { Option } = Select;
  
  export default function CreateModal() {

    const { visible, setVisible, current, setCurrent, setLoading, comBussinessList, comBussinessLoading, brandList } =
      useStore();

    const [form] = Form.useForm();
    const [savelLoading, setSavelLoading] = useState(false);

    const [creditCodeDesc, setCreditCodeDesc] = useState<string>("社会信用代码");

  
    useEffect(() => {
      if (visible) {
        initData(current.id);
      }
    }, [visible, current.id]);
  
    async function initData(rowId?: number) {
      try {
        let item: TradeCompany.CompDetailVO = {};
        if (rowId) {
          const { data = {} } = await getDetailComAccountApi(rowId);
          item = data;
        }

        form.setFieldsValue({

          ...item,

          compName: item.compName,
          compShortName: item.compShortName,
          subjectType: item.subjectType,

          compType: item.compType || [],

          compCategory: item.compCategory || CompanyCategoryTypeEnum["供应商"],
          compAddress: item.compAddress,
          creditCode: item.creditCode,

          brandId: item.brandId,

          location: item.compAddress
            ? {
                // address: "",
                //@ts-ignored;

                address: item.lonLatAddress||"",

                point: {
                  lng: item.longitude,
                  lat: item.latitude,
                },
              }
            : undefined,

          contacts: (item.contacts || []).map((it, i) => ({ ...it, key: i + 1 })),
          accounts: (item.accounts || []).map((it, i) => ({ ...it, key: i + 1 })),
        });

      } catch (e: any) {

        message.error(e.message);
        setVisible(false);
      }
    }
  
    function submit(item: any) {
      const param = {
        id: current.id,
        ...item,

        longitude: Number(item.longitude),
        latitude: Number(item.latitude),

        lonLatAddress: item.location? item.location.address : "",

      };
      setSavelLoading(true);
      const saveApi = current.id ? updateCompanyApi : createCompanyApi;

      saveApi(param)
        .then((res) => {
          message.success("保存成功");
          setLoading(true);
          setVisible(false);
          setSavelLoading(false);
        })
        .catch((err) => {
          message.error(err.message);
          setSavelLoading(false);
        });

    }
  
    function onCancel() {
      setVisible(false);
    }
  
    function changeSubjectType(value: number) {
      if (value === 1) {
        setCreditCodeDesc("身份证号码");
      } else {
        setCreditCodeDesc("社会信用代码");
      }
    }
  
    return (
      <Modal
        title={`${current.id ? "编辑" : "新增"}往来单位`}
        visible={visible}
        onOk={form.submit}
        onCancel={onCancel}
        maskClosable={false}
        confirmLoading={savelLoading}
        afterClose={() => {
          setCurrent({});
        }}
        width="60%"
      >

        <Form form={form} onFinish={submit} labelCol={{ span: 4 }} wrapperCol={{ span: 18 }}>

          <FormItem name="compName" label="往来单位名称" rules={[{ required: true, message: "请填入往来单位名称" }]}>
            <Input placeholder="请填入往来单位名称" maxLength={64} />
          </FormItem>
          <FormItem name="compShortName" label="往来单位简称" rules={[{ required: true, message: "请填入往来单位简称" }]}>
            <Input placeholder="请填入往来单位简称" maxLength={64} />
          </FormItem>
          <FormItem name="subjectType" label="单位主体类型" rules={[{ required: true, message: "请选择主体类型" }]}>
            <Select placeholder="请选择主体类型" showSearch onChange={changeSubjectType}>

              {[
                SubjectTypeEnum["个人"],
                SubjectTypeEnum["公司"],
                SubjectTypeEnum["个体工商户"],
                SubjectTypeEnum["公共组织"],
              ].map((i) => (

                <Option key={i} value={i}>
                  {SubjectTypeEnum[i]}
                </Option>
              ))}
            </Select>
          </FormItem>
          <FormItem name="compCategory" label="单位类别" rules={[{ required: true, message: "请选择类别" }]}>

            <Radio.Group>

              <Radio value={CompanyCategoryTypeEnum["供应商"]}>供应商</Radio>
              <Radio value={CompanyCategoryTypeEnum["服务商"]}>服务商</Radio>
            </Radio.Group>
          </FormItem>

          <FormItem name="compType" label="业务类型" rules={[{ required: true, message: "请选项类型" }]}>

            <Select
              placeholder="请选择类型"
              mode="multiple"
              showSearch
              optionFilterProp="children"
              loading={comBussinessLoading}
            >

              {comBussinessList.map((item) => (
                <Option key={item.id} value={item.id}>
                  {item.name}
                </Option>
              ))}
            </Select>
          </FormItem>

          <FormItem noStyle shouldUpdate={(prevValues, currentValues) => prevValues.compType != currentValues.compType}>
            {({ getFieldValue }): any => {
              const _compType = getFieldValue("compType");
              return _compType?.includes(CompanyBusinessTypeEnum["新车采购（主机厂）"]) ||
                _compType?.includes(CompanyBusinessTypeEnum["配件采购"]) ? (

                <FormItem name="brandId" label="品牌" rules={[{ required: true, message: "请选择品牌" }]}>
                  <Select placeholder="请选择品牌" showSearch optionFilterProp="children">
                    {brandList?.map((item) => (
                      <Option key={item.id} value={item.id}>
                        {item.name}
                      </Option>
                    ))}
                  </Select>
                </FormItem>
              ) : null;

            }}
          </FormItem>

          <FormItem
            name="creditCode"
            label={creditCodeDesc}
            rules={[{ required: true, message: "请输入" + creditCodeDesc }]}
          >
            <Input placeholder={`请输入${creditCodeDesc}`} maxLength={30} />
          </FormItem>

          <FormItem name="compAddress" label="通信地址" rules={[{ required: true, message: "请输入地址" }]}>

            <Input placeholder="请输入通信地址" />

          </FormItem>

          {/* <FormItem name="location" label="地理位置" rules={[{ required: true, message: "请配置地址" }]}> */}
          {/* <PositionSelector style={{ width: "100%" }} /> */}
          <AdressSelect form={form} />
          {/* </FormItem> */}

          <FormItem name="contacts" label="联系方式" rules={[{ required: true }]}>

            <Contact />
          </FormItem>

          <FormItem name="accounts" label="账户信息" c rules={[{ required: true }]}>

            <Account />
          </FormItem>
        </Form>
      </Modal>
    );
  }