fe_service_ebtp_frontend/src/pages/EvalSiteManage/SitePerson/components/SitePersonModal.tsx

import React, { useEffect, useState } from 'react';
import { Form, Input, Modal, Spin, Select, Button, Radio, RadioChangeEvent } from 'antd';
import ExtendUpload from "@/utils/ExtendUpload";
import { getFileListByBid } from '@/utils/DownloadUtils';


interface SitePersonModalProps {
  title: any;
  modalVisible: boolean;
  formDisabled: boolean;
  values: any;
  onSubmit: any;
  type: string;
  onCancel: () => void;
  placeList: any[];
}
const layout = {
  labelCol: { span: 7 },
  wrapperCol: { span: 12 },
};
const SitePersonModal: React.FC<SitePersonModalProps> = (props) => {
  const [form] = Form.useForm();
  // const weboffice = useRef<Weboffice>(null);
  const { title, modalVisible, formDisabled, type, values, onSubmit: handleUpdate, onCancel, placeList } = props;
  //loading
  const [loading, setLoading] = useState<boolean>(false);
  const [value, setValue] = useState<string>("1");

  const onChange = (e: RadioChangeEvent) => {
    console.log('radio checked', e.target.value);
    setValue(e.target.value);
  };


  useEffect(() => {
    if (JSON.stringify(values) !== "{}") {
      form.setFieldsValue({
        "id": values.id,
        "evalPlaceId": {label: values.eroomName,value: values.evalPlaceId},
        "facePic": values.facePic,
        "sex": values.sex,
        "personName": values.personName,
        "identityCard": values.identityCard
      });
    }
  }, [values])



  const onOk = async () => {
    const fieldsValue = await form.validateFields();
    setLoading(true)
    fieldsValue["evalPlaceId"] = fieldsValue.evalPlaceId.value
    console.log(fieldsValue)
    
    await getFileListByBid(fieldsValue.facePic).then(res => {
      fieldsValue["facePicName"] = res[0].name
    })
    console.log(fieldsValue)
    await handleUpdate({ ...fieldsValue }).finally(() => {
      setLoading(false)
    });
  };


  const renderFooter = () => {
    if (type == "read") {
      return (
        <>
          <Button onClick={onCancel}>关闭</Button>
        </>
      );
    } else {
      return (
        <>
          <Button type="primary" loading={loading} onClick={onOk}>确认</Button>
          <Button onClick={onCancel}>取消</Button>
        </>
      );
    }
  }

  return (
    <Modal
      destroyOnClose={true}
      title={title}
      visible={modalVisible}
      onCancel={() => onCancel()}
      width={"60%"}
      centered
      footer={renderFooter()}
    >
      <Spin spinning={loading}>
        <Form
          {...layout}
          name="nest-messages"
          form={form}
          preserve={false}
        >
          <Form.Item name="id" label="id" hidden>
            <Input hidden />
          </Form.Item>
          <Form.Item name="evalPlaceId" label="选择评标场所" >
            <Select placeholder="请选择评标场所" labelInValue disabled={formDisabled}>
              {
                placeList.map((item: any, index: any) => {
                  return (
                    <Select.Option value={item.id}>{item.placeName}</Select.Option>
                  )
                })
              }
            </Select>
          </Form.Item>

          <Form.Item
            label="人员姓名"
            name="personName"
            rules={[
              {
                required: true,
                message: '当前项不可为空',
              },
            ]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="身份证号"
            name="identityCard"
            rules={[
              {
                required: true,
                message: '当前项不可为空',
              },
              {
                pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
                message: '输入的身份证号不正确',
              },
            ]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="性别"
            name="sex"
            rules={[
              {
                required: true,
                message: '当前项不可为空',
              },
            ]}
          >
            {/* 1-男性，2-女性 */}
            <Radio.Group onChange={onChange} value={value}>
              <Radio value="1">男性</Radio>
              <Radio value="2">女性 </Radio>
            </Radio.Group>
          </Form.Item>
          <Form.Item
            label="人脸照片"
            name="facePic"
            extra="请上传清晰人脸正面照片，要求.jpg格式图片，文件大下不得超过60kb"
            rules={[
              {
                required: true,
                message: '当前项不可为空',
              },
            ]}
          >
            <ExtendUpload bid={values.facePic} btnName="上传" maxCount={1} maxSize={0.057} uploadProps={{ accept: ".jpg" }}>
              {/* maxSize={0.057} */}
            </ExtendUpload>
          </Form.Item>
        </Form>
      </Spin>
    </Modal>
  );
};

export default SitePersonModal;