gzdyh/yzy_h5.git

import React, { useState, useEffect } from 'react';
import './index.less';
import './partyInfo.less';
import DingUpload from '../components/DingUpload';
import { Radio, Message, Space } from '@arco-design/web-react';
import * as $$ from '../../../utils/utility';
import { AchieveFilled, AgencyOutlined, Preview, Delete, WarningFilled } from 'dd-icons';
import { ax, showToast, setLocal, isDebug, clearLocal, getQueryString, catchApiError, confirmModal } from '../../../utils/utility';
import { InputItem, Button, TextareaItem, DatePicker, Rate, Slider, Stepper, Switch, Select, Upload, Toast, Card } from 'dingtalk-design-mobile';
import CustomFormView from '../../../components/CustomFormView';
import fileUploadIcon from '../../../assets/img/file_upload.png';
import fileDeleteIcon from '../../../assets/img/file_delete.png';
import { useHistory } from 'react-router-dom';
 
// 设置缓存的键名
const PARTY_INFO_CACHE_KEY = 'party_info_form_data';
// 设置表单是否已清空的标志键名
const FORM_CLEARED_FLAG_KEY = 'party_info_form_cleared';
 
const appUrl = $$.appUrl;
 
// 获取新的时间ID接口
function getNewTimeCaseId() {
    return $$.ax.request({ url: `caseUtils/getNewTimeCaseId`, type: 'get', service: 'utils' });
}
 
const PartyInfo = ({
    setIsSelectPage,
    selectedType,
    setSelectedType,
    isManualInput,
    setIsManualInput,
    selectedCompany,
    role = 'applicant',
    isFromCaseDes = false,
    mainId,
    editObj,
    setMainId,
}) => {
    const [formValues, setFormValues] = useState(editObj);
    const [businessLicenseFiles, setBusinessLicenseFiles] = useState([]);
    const [legalPersonFiles, setLegalPersonFiles] = useState([]);
    const [idCardMaterialFiles, setIdCardMaterialFiles] = useState([]);
    const [idCardMaterialResponses, setIdCardMaterialResponses] = useState([]);
    const [cachedNaturalPersons, setCachedNaturalPersons] = useState([]);
    const [caseId, setCaseId] = useState(''); // 存储从接口获取的ID
    const history = useHistory();
 
    // 设置表单初始值
    useEffect(() => {
        if (selectedType === 'natural') {
            setFormValues((prev) => ({
                ...editObj,
                ...prev,
                // 民族默认值：汉族
                nation: '09_00005-1',
                nationName: '汉族',
                // 性别默认值：男
                sex: '09_00003-1',
                sexName: '男',
                // 是否有个人极端倾向默认值：否
                extreme: '1',
                extremeName: '否',
            }));
        }
    }, [selectedType, editObj]);
 
    // 根据 selectedType 获取当事人类型信息
 
    const handleSubmit = () => {
        // natural 对应 09_01001-1
        // legal 对应 09_01001-2
        // nonlegal 对应 09_01001-3
        let perClass = '';
        let perClassName = '';
 
        switch (selectedType) {
            case 'natural':
                perClass = '09_01001-1';
                perClassName = '自然人';
                break;
            case 'legal':
                perClass = '09_01001-2';
                perClassName = '法人';
                break;
            case 'nonlegal':
                perClass = '09_01001-3';
                perClassName = '非法人组织';
                break;
            default:
                break;
        }
 
        console.log('提交表单:', { ...formValues, perClass, perClassName });
        // 将之前保存的数据与现在的数据一起保存
        const dataList = $$.getLocal('case_personnel_cache');
        if (dataList) {
            dataList.push({ ...formValues, perClass, perClassName });
        } else {
            dataList = [{ ...formValues, perClass, perClassName }];
        }
        $$.setLocal('case_personnel_cacheList', dataList);
        history.goBack(-1);
    };
 
    const handleFormChange = (data, name) => {
        setFormValues({ ...formValues, ...data });
    };
 
    const handleSelectPerson = (name, value) => {
        setFormValues({ ...formValues, [name]: value });
    };
 
    const handleUpload = (name, value) => {
        setFormValues({ ...formValues, [name]: value });
    };
 
    const handleTypeSelect = (type) => {
        setSelectedType(type);
        if (type !== 'legal') {
            setIsManualInput(false);
        }
    };
 
    // 渲染缓存的自然人卡片
    const renderCachedNaturalPersons = () => {
        // 不显示历史填写记录
        return null;
    };
 
    // 构建自然人表单配置
    const getNaturalPersonFormConfig = () => [
        {
            list: [
                {
                    type: 'textBrief',
                    name: 'trueName',
                    label: '姓名',
                    placeholder: '请填写',
                    require: true,
                    itemStyle: {
                        paddingTop: '12px',
                    },
                },
                {
                    type: 'textBrief',
                    name: 'mobile',
                    label: '联系方式',
                    placeholder: '请填写手机号码',
                },
            ],
        },
        {
            list: [
                {
                    type: 'select',
                    name: 'certiType',
                    desc: 'certiTypeName',
                    placeholder: '请选择',
                    label: '证件类型',
                    list: $$.selectOption.cardType,
                },
                {
                    type: 'textBrief',
                    name: 'certiNo',
                    label: '证件号码',
                    placeholder: '请填写完整证件号码',
                },
                {
                    type: 'textarea',
                    name: 'addr',
                    label: '联系地址',
                    placeholder: '请填写详细地址',
                    tabs: 2,
                },
                {
                    type: 'textarea',
                    name: 'placeAddr',
                    label: '户籍地址',
                    placeholder: '请填写详细地址',
                    tabs: 2,
                },
                {
                    type: 'textarea',
                    name: 'workUnit',
                    label: '工作单位',
                    placeholder: '请填写单位全名',
                    tabs: 2,
                },
                {
                    type: 'select',
                    name: 'nation',
                    desc: 'nationName',
                    placeholder: '请选择',
                    label: '民族',
                    list: $$.selectOption.nation,
                },
                {
                    type: 'radio',
                    name: 'sex',
                    desc: 'sexName',
                    label: '性别',
                    list: $$.selectOption.sex,
                },
            ],
        },
        {
            list: [
                {
                    type: 'radio',
                    name: 'extreme',
                    label: (
                        <span style={{ color: '#F53F3F' }}>
                            <img src={require('../../../assets/img/riskMask.png')} style={{ marginRight: '4px' }} />
                            是否有个人极端倾向
                        </span>
                    ),
                    list: [
                        { label: '是', value: '0' },
                        { label: '否', value: '1' },
                    ],
                },
            ],
        },
        {
            list: [
                {
                    type: 'dingUpload',
                    name: 'idCardMaterial',
                    label: '身份证明材料',
                    placeholder: '请上传',
                    mainId: new Date().getTime(),
                    ownerType: '22_00018-202',
                    ownerId: formValues.id || '',
                },
            ],
        },
    ];
 
    // 构建法人表单配置
    const getLegalPersonFormConfig = () => [
        {
            list: [
                {
                    type: 'textBrief',
                    name: 'companyName',
                    label: '企业名称',
                    placeholder: '请填写',
                    require: true,
                    itemStyle: {
                        paddingTop: '12px',
                    },
                },
                {
                    type: 'textBrief',
                    name: 'contactPhone',
                    label: '联系方式',
                    placeholder: '请填写手机号码',
                    require: true,
                },
                {
                    type: 'textBrief',
                    name: 'companyLocation',
                    label: '组织所在地',
                    placeholder: '请填写',
                },
                {
                    type: 'textBrief',
                    name: 'creditCode',
                    label: '统一社会信用代码',
                    placeholder: '请填写',
                },
                {
                    type: 'select',
                    name: 'companyType',
                    label: '企业类型',
                    list: [
                        { label: 'A', value: '1' },
                        { label: 'B', value: '2' },
                        { label: 'C', value: '3' },
                    ],
                },
                {
                    type: 'textBrief',
                    name: 'legalRepresentative',
                    label: '法定代表人',
                    placeholder: '请填写',
                },
                {
                    type: 'textBrief',
                    name: 'address',
                    label: '住所',
                    placeholder: '请填写',
                },
            ],
        },
        {
            list: [
                {
                    type: 'dingUpload',
                    name: 'businessLicense',
                    label: '企业登记材料',
                    placeholder: '请上传',
                    ownerType: '22_00018-203',
                    ownerId: caseId || '',
                },
                {
                    type: 'dingUpload',
                    name: 'legalPersonId',
                    label: '法定代表人身份证明材料',
                    placeholder: '请上传',
                    ownerType: '22_00018-204',
                    ownerId: caseId || '',
                },
            ],
        },
    ];
 
    // 构建非法人组织表单配置
    const getNonLegalFormConfig = () => [
        {
            list: [
                {
                    type: 'textBrief',
                    name: 'companyName',
                    label: '组织名称',
                    placeholder: '请填写',
                    require: true,
                    itemStyle: {
                        paddingTop: '12px',
                    },
                },
                {
                    type: 'textBrief',
                    name: 'contactPhone',
                    label: '联系方式',
                    placeholder: '请填写手机号码',
                    require: true,
                },
                {
                    type: 'textBrief',
                    name: 'companyLocation',
                    label: '组织所在地',
                    placeholder: '请填写',
                },
                {
                    type: 'textBrief',
                    name: 'creditCode',
                    label: '统一社会信用代码',
                    placeholder: '请填写',
                },
                {
                    type: 'select',
                    name: 'companyType',
                    label: '组织类型',
                    list: [
                        { label: 'A', value: '1' },
                        { label: 'B', value: '2' },
                        { label: 'C', value: '3' },
                    ],
                },
                {
                    type: 'textBrief',
                    name: 'legalRepresentative',
                    label: '负责人',
                    placeholder: '请填写',
                },
                {
                    type: 'textBrief',
                    name: 'address',
                    label: '住所',
                    placeholder: '请填写',
                },
            ],
        },
        {
            list: [
                {
                    type: 'dingUpload',
                    name: 'businessLicense',
                    label: '组织登记材料',
                    placeholder: '请上传',
                    ownerType: '22_00018-203',
                    ownerId: caseId || '',
                },
                {
                    type: 'dingUpload',
                    name: 'legalPersonId',
                    label: '负责人身份证明材料',
                    placeholder: '请上传',
                    ownerType: '22_00018-204',
                    ownerId: caseId || '',
                },
            ],
        },
    ];
 
    // 从接口获取新的ID
    const getAppId = async () => {
        try {
            // 先尝试从sessionStorage获取新案件ID
            const storedCaseId = sessionStorage.getItem('newCaseId');
 
            if (storedCaseId) {
                setCaseId(storedCaseId);
                // 如果外部提供了setMainId方法，也更新外部的mainId
                if (setMainId) {
                    setMainId(storedCaseId);
                }
                return;
            }
 
            // 如果sessionStorage中没有，再从接口获取
            const res = await getNewTimeCaseId();
            if (res.type && res.data) {
                console.log('从接口获取新案件ID:', res.data);
                setCaseId(res.data);
                // 如果外部提供了setMainId方法，也更新外部的mainId
                if (setMainId) {
                    setMainId(res.data);
                }
                // 存储到sessionStorage，以便其他组件使用
                sessionStorage.setItem('newCaseId', res.data);
            } else {
                $$.showToast({ content: '获取案件ID失败' });
            }
        } catch (error) {
            console.error('获取ID错误:', error);
            $$.showToast({ content: '获取案件ID失败' });
        }
    };
 
    // 组件挂载时获取新ID
    useEffect(() => {
        // 如果已有mainId则使用现有的，否则获取新ID
        if (mainId) {
            setCaseId(mainId);
        } else {
            getAppId();
        }
    }, []);
 
    return (
        <div className="party-info-container">
            <div className="content-wrapper">
                <div className="personnel-type section">
                    <div className="personnel-type-title">人员类型</div>
                    <div className="personnel-type-content">
                        <div className={`type-option ${selectedType === 'natural' ? 'selected' : ''}`} onClick={() => handleTypeSelect('natural')}>
                            {selectedType === 'natural' && <AchieveFilled className="selected-icon" />}
                            <div className="type-icon natural-person"></div>
                            <div className="type-name">自然人</div>
                        </div>
                        <div className={`type-option ${selectedType === 'legal' ? 'selected' : ''}`} onClick={() => handleTypeSelect('legal')}>
                            {selectedType === 'legal' && <AchieveFilled className="selected-icon" />}
                            <div className="type-icon legal-person"></div>
                            <div className="type-name">法人</div>
                        </div>
                        <div className={`type-option ${selectedType === 'nonlegal' ? 'selected' : ''}`} onClick={() => handleTypeSelect('nonlegal')}>
                            {selectedType === 'nonlegal' && <AchieveFilled className="selected-icon" />}
                            <div className="type-icon non-legal-person"></div>
                            <div className="type-name">非法人组织</div>
                        </div>
                    </div>
                </div>
 
                {/* 自然人 */}
                {selectedType === 'natural' && (
                    <div className="natural-person-content-wrapper">
                        <CustomFormView
                            formConfig={getNaturalPersonFormConfig()}
                            formData={formValues}
                            onChange={handleFormChange}
                            onSelectPerson={handleSelectPerson}
                            onUpload={handleUpload}
                        />
                    </div>
                )}
 
                {/* 法人 */}
                {selectedType === 'legal' && (
                    <>
                        {!isManualInput ? (
                            <>
                                <div id="companyInfo" onClick={() => setIsSelectPage(true)}>
                                    <div
                                        className="select-company-item"
                                        style={{ padding: '0 0 0 16px', backgroundColor: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}
                                    >
                                        <div className="select-company-label">企业信息</div>
                                        <div className="select-company-value">
                                            <Select mode="single" placeholder="请选择" />
                                        </div>
                                    </div>
                                </div>
                            </>
                        ) : (
                            <>
                                <CustomFormView
                                    formConfig={getLegalPersonFormConfig()}
                                    formData={formValues}
                                    onChange={handleFormChange}
                                    onSelectPerson={handleSelectPerson}
                                    onUpload={handleUpload}
                                />
                            </>
                        )}
                    </>
                )}
 
                {/* 非法人组织 */}
                {selectedType === 'nonlegal' && (
                    <>
                        {!isManualInput ? (
                            <>
                                <div id="companyInfo" onClick={() => setIsSelectPage(true)}>
                                    <div
                                        className="select-company-item"
                                        style={{ padding: '0 0 0 16px', backgroundColor: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}
                                    >
                                        <div className="select-company-label">组织信息</div>
                                        <div className="select-company-value">
                                            <Select mode="single" placeholder="请选择" options={[]} />
                                        </div>
                                    </div>
                                </div>
                            </>
                        ) : (
                            <>
                                <CustomFormView
                                    formConfig={getNonLegalFormConfig()}
                                    formData={formValues}
                                    onChange={handleFormChange}
                                    onSelectPerson={handleSelectPerson}
                                    onUpload={handleUpload}
                                />
                            </>
                        )}
                    </>
                )}
            </div>
 
            <div style={{ backgroundColor: '#f2f3f5', height: '8px', width: '100%' }}></div>
 
            {(isManualInput || selectedType === 'natural') && (
                <div className="bottom-button-area">
                    <Button className="save-button" type="primary" onClick={handleSubmit}>
                        <p className="save-button-text">保存</p>
                    </Button>
                </div>
            )}
        </div>
    );
};
 
export default PartyInfo;