yongxu-web/src/pages/ReportingManagement/edit.tsx

import React, { useEffect, useState } from 'react';
import {
  Cascader,
  Col,
  DatePicker,
  Form,
  Input,
  InputNumber,
  Modal,
  Row,
  Select,
  message,
} from 'antd';
import { cityQuery, createReporting, editReporting } from '@/services/ReportingManagement';
import moment from 'moment';
import UploadCommon from '@/components/UploadImage';

interface userEditPros {
  visible: boolean;
  editCallback: () => void;
  detailData: any;
}

const { TextArea } = Input;

/**
 * 报备编辑页面
 * @param props
 * @constructor
 */
const Edit: React.FC<userEditPros> = (props) => {
  const { visible, editCallback, detailData } = props;
  const [form] = Form.useForm();
  const [cityList, setCityList] = useState([]);
  const [filesList, setFilesList] = useState([]);

  // 获取城市列表
  const getCityList = () => {
    cityQuery({ q: 'tree' }).then((res) => {
      if (res?.code === 0) {
        const arr = res?.data?.list;
        setCityList(arr);
      }
    });
  };

  useEffect(() => {
    getCityList();
  }, []);

  const onOk = () => {
    form.validateFields().then((values) => {
      if (values) {
        const data = { ...values };
        if (values.success_probability) {
          data.success_probability = values.success_probability.toString();
        }
        if (values.success_probability_analysis) {
          data.success_probability_analysis = values.success_probability_analysis;
        }
        if (values.planned_fixture_date) {
          data.planned_fixture_date = moment(values.planned_fixture_date).format('YYYY-MM-DD');
        }
        if (values.files && values.files.length) {
          data.files = filesList;
        }
        if (detailData) {
          data.record_id = detailData.record_id;
          const cityInfo = values.city
            .split('')
            .filter((x: { charCodeAt: () => number }) => x.charCodeAt() != 32)
            .join('')
            .split('/');
          data.province = cityInfo[0];
          data.city = cityInfo[1];
          data.district = cityInfo[2];
          editReporting(data)
            .then((res) => {
              if (res && res.code === 0) {
                message.success('编辑成功');
                editCallback();
              } else {
                message.error('编辑失败');
              }
            })
            .catch((e) => {
              message.error(e?.message);
            });
        } else {
          data.province = values.city[0];
          data.city = values.city[1];
          data.district = values.city[2];
          createReporting(data)
            .then((res) => {
              if (res && res.code === 0) {
                message.success('新增成功');
                editCallback();
              } else {
                message.error('新增失败');
              }
            })
            .catch((e) => {
              message.error(e?.message);
            });
        }
      }
    });
  };

  // 上传图片回调
  const onUploadChange = (files: any) => {
    if (files && files.length) {
      const arr: any = [];
      files.forEach((el: any) => {
        arr.push({ url: el?.response?.data?.url || '' });
      });
      setFilesList(arr);
    }
  };

  const onCancel = () => {
    editCallback();
  };

  const formItemLayout = {
    labelCol: {
      span: 7,
    },
    wrapperCol: {
      span: 15,
    },
  };

  const formItemLayoutTwo = {
    labelCol: {
      span: 4,
    },
    wrapperCol: {
      span: 19,
    },
  };

  return (
    <Modal
      title={`${detailData ? '编辑' : '新增'}`}
      open={visible}
      onOk={onOk}
      onCancel={onCancel}
      width={800}
    >
      <Form form={form}>
        <Row>
          <Col span={12}>
            <Form.Item
              {...formItemLayout}
              name="project_name"
              label="工程名称"
              rules={[{ required: true, message: '请输入工程名称' }]}
              initialValue={detailData?.project_name || ''}
            >
              <Input placeholder="请输入工程名称" />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              {...formItemLayout}
              name="city"
              label="城市"
              rules={[{ required: true, message: '请选择城市' }]}
              initialValue={
                detailData && JSON.stringify(detailData) !== '{}'
                  ? `${detailData?.province}` +
                    ' / ' +
                    `${detailData?.city}` +
                    ' / ' +
                    `${detailData?.district}`
                  : ''
              }
            >
              <Cascader
                options={cityList}
                fieldNames={{ label: 'name', value: 'name', children: 'children' }}
                placeholder="请选择城市"
              />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              {...formItemLayout}
              name="street"
              label="街道"
              rules={[{ required: true, message: '请输入街道' }]}
              initialValue={detailData?.street || ''}
            >
              <Input placeholder="请输入街道" />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              {...formItemLayout}
              name="rode"
              label="路"
              rules={[{ required: true, message: '请输入路' }]}
              initialValue={detailData?.rode || ''}
            >
              <Input placeholder="请输入路" />
            </Form.Item>
          </Col>
          <Col span={24}>
            <Form.Item
              {...formItemLayoutTwo}
              name="address"
              label="详细地址"
              rules={[{ required: true, message: '请输入详细地址' }]}
              initialValue={detailData?.address || ''}
            >
              <TextArea rows={4} placeholder="请输入详细地址" />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              {...formItemLayout}
              name="area"
              label="建筑面积"
              rules={[{ required: true, message: '请输入建筑面积' }]}
              initialValue={detailData?.area || ''}
            >
              <Input placeholder="请输入建筑面积" />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              {...formItemLayout}
              name="bidding_form"
              label="招标形式"
              rules={[{ required: true, message: '请选择招标形式' }]}
              initialValue={detailData?.bidding_form || undefined}
            >
              <Select
                placeholder="请选择招标形式"
                options={[
                  {
                    value: '1',
                    label: '内部仪标',
                  },
                  {
                    value: '2',
                    label: '公开招标',
                  },
                  {
                    value: '3',
                    label: '提供方案书',
                  },
                ]}
              />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              {...formItemLayout}
              name="project_effect"
              label="项目用途"
              rules={[{ required: true, message: '请选择项目用途' }]}
              initialValue={detailData?.project_effect || undefined}
            >
              <Select
                placeholder="请选择项目用途"
                options={[
                  {
                    value: '1',
                    label: '酒店餐饮',
                  },
                  {
                    value: '2',
                    label: '商务办公',
                  },
                  {
                    value: '3',
                    label: '政府项目',
                  },
                  {
                    value: '4',
                    label: '工矿企业',
                  },
                  {
                    value: '5',
                    label: '文教卫生',
                  },
                  {
                    value: '6',
                    label: '商业建筑',
                  },
                  {
                    value: '7',
                    label: '房产配套',
                  },
                  {
                    value: '8',
                    label: '其他',
                  },
                ]}
              />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              {...formItemLayout}
              name="project_progress"
              label="工程进展"
              rules={[{ required: true, message: '请选择工程进展' }]}
              initialValue={detailData?.project_progress || undefined}
            >
              <Select
                placeholder="请选择工程进展"
                options={[
                  {
                    value: '1',
                    label: '了解信息',
                  },
                  {
                    value: '2',
                    label: '确认经销商',
                  },
                  {
                    value: '3',
                    label: '方案报价',
                  },
                  {
                    value: '4',
                    label: '邀请招标',
                  },
                  {
                    value: '5',
                    label: '投标询价',
                  },
                  {
                    value: '6',
                    label: '价格竞争',
                  },
                  {
                    value: '7',
                    label: '商务谈判',
                  },
                  {
                    value: '8',
                    label: '合同准备',
                  },
                  {
                    value: '9',
                    label: '收到定金',
                  },
                ]}
              />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              {...formItemLayout}
              name="air_conditioner_type"
              label="空调类型"
              rules={[{ required: true, message: '请选择空调类型' }]}
              initialValue={detailData?.air_conditioner_type || undefined}
            >
              <Select
                placeholder="请选择空调类型"
                options={[
                  {
                    value: '6s水机',
                    label: '6s水机',
                  },
                  {
                    value: '8s水机',
                    label: '8s水机',
                  },
                  {
                    value: '7.2kw氟机',
                    label: '7.2kw氟机',
                  },
                  {
                    value: '12kw氟机',
                    label: '12kw氟机',
                  },
                  {
                    value: '12kw水机',
                    label: '12kw水机',
                  },
                ]}
              />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              {...formItemLayout}
              name="contact_person"
              label="甲方联系人"
              rules={[{ required: true, message: '请输入甲方联系人' }]}
              initialValue={detailData?.contact_person || ''}
            >
              <Input placeholder="请输入甲方联系人" />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              {...formItemLayout}
              name="phone"
              label="联系方式"
              rules={[{ required: true, message: '请输入联系方式' }]}
              initialValue={detailData?.phone || ''}
            >
              <Input placeholder="请输入联系方式" />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              {...formItemLayout}
              name="planned_fixture_date"
              label="计划成交日期"
              rules={[{ required: true, message: '请输入计划成交日期' }]}
              initialValue={
                detailData?.planned_fixture_date ? moment(detailData?.planned_fixture_date) : ''
              }
            >
              <DatePicker style={{ width: '235px' }} />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              {...formItemLayout}
              name="follow_people"
              label="跟进人"
              rules={[{ required: true, message: '请输入跟进人' }]}
              initialValue={detailData?.follow_people || ''}
            >
              <Input placeholder="请输入跟进人" />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              {...formItemLayout}
              name="success_probability"
              label="成功几率"
              rules={[{ required: true, message: '请输入成功几率' }]}
              initialValue={detailData?.success_probability || ''}
            >
              <InputNumber
                min={0}
                max={100}
                placeholder="请输入成功几率"
                addonAfter="%"
                style={{ width: '235px' }}
              />
            </Form.Item>
          </Col>
          <Col span={24}>
            <Form.Item
              {...formItemLayoutTwo}
              name="success_probability_analysis"
              label="成功几率分析"
              rules={[{ required: false, message: '请输入成功几率分析' }]}
              initialValue={detailData?.success_probability_analysis || ''}
            >
              <TextArea rows={4} placeholder="请输入成功几率分析" />
            </Form.Item>
          </Col>
          <Col span={24}>
            <Form.Item
              {...formItemLayoutTwo}
              name="files"
              label="上传图片"
              initialValue={detailData?.files || []}
            >
              <UploadCommon
                value={detailData?.files ? detailData?.files : []}
                onChange={onUploadChange}
                maxCount={9}
              />
            </Form.Item>
          </Col>
        </Row>
      </Form>
    </Modal>
  );
};
export default Edit;