src/pages/contract/ExpressChargingStandardSetting/components/AddModel/index.tsx

import React, { useCallback, useEffect, useState } from "react";
import { Modal, Skeleton, Select, Form, message, InputNumber } from "antd";
import * as API from '../../api';
import _ from "lodash";
interface Props {
    visible:boolean;
    row?:API.Item;
    compList:any[];
    cityList:any[];
    onCancel:()=>void;
    onRefresh:() => void;
}
function AddModel({visible, row, compList, cityList, onCancel, onRefresh}:Props) {
    const [form] = Form.useForm();
    const [loading, setLoading] = useState<boolean>(false);
    const { id } = row || {};
    useEffect(() => {
        if (id) {
            const { tradeCompName, sendAreaName, firstWeight, continuedWeight, arriveAreaName } = row || {};
            form.setFieldsValue({
                tradeComp: compList.filter(it => tradeCompName === it.name).map(item => ({value: item.id, label: item.name}))[0],
                sendArea: cityList.filter(it => sendAreaName === it.fullName).map(item => ({value: item.bh, label: item.fullName}))[0],
                firstWeight,
                continuedWeight,
                arriveAreas: cityList.filter(it => arriveAreaName === it.fullName).map(item => ({value: item.bh, label: item.fullName}))[0]
            });
        }
    }, [row]);
    
    /**
     * @description: 确定
     * @param {*}
     * @return {*}
     */
    const handleSave = (feildValue:any) => {
        setLoading(true);
        const {tradeComp, sendArea, arriveAreas, firstWeight, continuedWeight} = feildValue;
        const _arriveAreas = id ? [{ ...arriveAreas }].map(item => ({arriveAreaNo: item.value, arriveAreaName: item.label})) 
        : arriveAreas.length && arriveAreas.map((item:any) => ({arriveAreaNo: item.value, arriveAreaName: item.label}));
        const params = {
            expressChargeStandardId: id,
            tradeCompId: tradeComp.value,
            tradeCompName: tradeComp.label,
            tradeCompShortName: compList && compList.filter(item => item.id == tradeComp.value)[0].shortName,
            sendAreaNo: sendArea.value,
            sendAreaName: sendArea.label,
            firstWeight,
            continuedWeight,
            arriveAreas: _arriveAreas
        };
        API.addStandardSave({ ...params })
        .then(res => {
            message.success("操作成功");
            _onCancel();
            setLoading(false);
            onRefresh();
        }).catch(err => {
            message.error(err?.message);
            setLoading(false);
        });
    }; 
    /**
     * @description: 关闭弹框
     * @param {*}
     * @return {*}
     */
    const _onCancel = () => {
        onCancel && onCancel();
        form.resetFields();
    };
        
    return (
      <Modal
        title={`${id ? '编辑':'新增'}快递收费标准`}
        visible={visible}
        confirmLoading={loading}
        onCancel={_onCancel}
        onOk={form.submit}
        cancelButtonProps={{ hidden: true }}
        width="50%"
        bodyStyle={{minHeight: 300}}
      >
        <Skeleton loading={false}>
          <Form form={form} onFinish={handleSave} wrapperCol={{ span: 18 }} labelCol={{ span: 4 }}>
            <Form.Item
              label="快递公司"
              name="tradeComp"
              rules={[{required: true, message: '请选择快递公司'}]}
            >
              <Select
                placeholder="请选择快递公司"
                showSearch
                allowClear
                optionFilterProp="children"
                labelInValue
                onSelect={(it:any) => {
                    const item = compList.filter((i:any) => it.value === i.id);
                }}
                filterOption={(input, option: any) => option?.children.indexOf(input) >= 0}
              >
                {
                    compList.map(item => (
                      <Select.Option value={item.id} key={item.id}>
                        {item.name}
                      </Select.Option>
                    ))
                }
              </Select>
            </Form.Item>
            <Form.Item
              label="寄件地区"
              name="sendArea"
              rules={[{required: true, message: '请选择寄件地区'}]}
            >
              <Select
                placeholder="请选择寄件地区"
                showSearch
                allowClear
                optionFilterProp="children"
                labelInValue
                onSelect={(it:any) => {
                    const item = cityList.filter((i:any) => it.value === i.id);
                }}
                filterOption={(input, option: any) => option?.children.indexOf(input) >= 0}
              >
                {
                    cityList.map(item => (
                      <Select.Option value={item.bh} key={item.bh}>
                        {item.fullName}
                      </Select.Option>
                    ))
                }
              </Select>
            </Form.Item>
            <Form.Item
              label="到达地区"
              name="arriveAreas"
              rules={[{required: true, message: '请选择到达地区'}]}
            >
              <Select
                placeholder={`请选择到达地区${id ? '' : '(支持多选)'}`}
                mode={id ? undefined : 'multiple'}
                showSearch
                allowClear
                showArrow
                optionFilterProp="children"
                labelInValue
                onSelect={(it:any) => {
                    const item = cityList.filter((i:any) => it.value === i.id);
                }}
                filterOption={(input, option: any) => option?.children.indexOf(input) >= 0}
              >
                {
                    cityList.map(item => (
                      <Select.Option value={item.bh} key={item.bh}>
                        {item.fullName}
                      </Select.Option>
                    ))
                }
              </Select>
            </Form.Item>
            <Form.Item
              label="首重"
              name="firstWeight"
              rules={[{required: true, message: '请填写首重'}]}
            >
              <InputNumber placeholder="请填写" addonAfter="元" max={100000000} min={0} precision={2} /> 
            </Form.Item>
            <Form.Item
              label="续重"
              name="continuedWeight"
              rules={[{required: true, message: '请填写续重'}]}
            >
              <InputNumber placeholder="请填写" addonAfter="元/kg" max={100000000} min={0} precision={2} /> 
            </Form.Item>
          </Form>
        </Skeleton>
      </Modal>
    );
}
export default AddModel;