253 lines
10 KiB
TypeScript
253 lines
10 KiB
TypeScript
import { useEffect, useMemo, useState } from 'react';
|
|
import { useNavigate, useParams } from 'react-router-dom';
|
|
import { ImagePlus } from 'lucide-react';
|
|
import { adminApi, type FileRef, type TenantOption } from '@/api/adminApi';
|
|
import { Breadcrumb, Button, FileActions, Input, Select, Textarea } from '@/components/ui';
|
|
|
|
type EnterpriseForm = {
|
|
name: string;
|
|
creditCode: string;
|
|
province: string;
|
|
city: string;
|
|
address: string;
|
|
contactName: string;
|
|
contactIdCard: string;
|
|
contactPhone: string;
|
|
contactEmail: string;
|
|
photoFileObjectId: string;
|
|
photoFileName: string;
|
|
photoContentType: string;
|
|
};
|
|
|
|
type EnterpriseFormErrors = Partial<Record<keyof EnterpriseForm, string>>;
|
|
|
|
const provinceOptions = [
|
|
{ label: '请选择省/直辖市', value: '' },
|
|
...'北京,上海,广东,山东,河南,江苏,浙江,四川,重庆,湖北,湖南,陕西'.split(',').map((item) => ({ label: item, value: item })),
|
|
];
|
|
|
|
const cityOptionsByProvince: Record<string, Array<{ label: string; value: string }>> = {
|
|
北京: [{ label: '北京市', value: '北京市' }],
|
|
上海: [{ label: '上海市', value: '上海市' }],
|
|
广东: ['广州市', '深圳市', '东莞市'].map((item) => ({ label: item, value: item })),
|
|
山东: ['济南市', '青岛市', '烟台市'].map((item) => ({ label: item, value: item })),
|
|
河南: ['郑州市', '洛阳市', '开封市'].map((item) => ({ label: item, value: item })),
|
|
江苏: ['南京市', '苏州市', '无锡市'].map((item) => ({ label: item, value: item })),
|
|
浙江: ['杭州市', '宁波市', '温州市'].map((item) => ({ label: item, value: item })),
|
|
四川: ['成都市', '绵阳市', '德阳市'].map((item) => ({ label: item, value: item })),
|
|
重庆: [{ label: '重庆市', value: '重庆市' }],
|
|
湖北: ['武汉市', '宜昌市', '襄阳市'].map((item) => ({ label: item, value: item })),
|
|
湖南: ['长沙市', '株洲市', '湘潭市'].map((item) => ({ label: item, value: item })),
|
|
陕西: ['西安市', '咸阳市', '宝鸡市'].map((item) => ({ label: item, value: item })),
|
|
};
|
|
|
|
const emptyForm: EnterpriseForm = {
|
|
name: '',
|
|
creditCode: '',
|
|
province: '',
|
|
city: '',
|
|
address: '',
|
|
contactName: '',
|
|
contactIdCard: '',
|
|
contactPhone: '',
|
|
contactEmail: '',
|
|
photoFileObjectId: '',
|
|
photoFileName: '',
|
|
photoContentType: '',
|
|
};
|
|
|
|
function formFromTenant(tenant: TenantOption): EnterpriseForm {
|
|
const profile = tenant.enterpriseProfile;
|
|
return {
|
|
name: tenant.name,
|
|
creditCode: profile?.creditCode ?? '',
|
|
province: profile?.province ?? '',
|
|
city: profile?.city ?? '',
|
|
address: profile?.address ?? '',
|
|
contactName: profile?.contactName ?? '',
|
|
contactIdCard: profile?.contactIdCard ?? '',
|
|
contactPhone: profile?.contactPhone ?? '',
|
|
contactEmail: profile?.contactEmail ?? '',
|
|
photoFileObjectId: profile?.photoFileObjectId ?? '',
|
|
photoFileName: profile?.photoFileObjectId ? '已上传企业照片' : '',
|
|
photoContentType: '',
|
|
};
|
|
}
|
|
|
|
export function AdminCustomerFormPage() {
|
|
const navigate = useNavigate();
|
|
const { enterpriseId } = useParams();
|
|
const isEdit = Boolean(enterpriseId);
|
|
const [form, setForm] = useState<EnterpriseForm>(emptyForm);
|
|
const [errors, setErrors] = useState<EnterpriseFormErrors>({});
|
|
const [error, setError] = useState('');
|
|
const [saving, setSaving] = useState(false);
|
|
const [uploadingPhoto, setUploadingPhoto] = useState(false);
|
|
|
|
useEffect(() => {
|
|
if (!enterpriseId) {
|
|
setForm(emptyForm);
|
|
return;
|
|
}
|
|
adminApi.getTenant(enterpriseId)
|
|
.then((tenant) => {
|
|
setForm(formFromTenant(tenant));
|
|
setError('');
|
|
})
|
|
.catch((failure: Error) => setError(failure.message || '企业信息加载失败'));
|
|
}, [enterpriseId]);
|
|
|
|
const cityOptions = useMemo(() => [
|
|
{ label: '请选择市/区', value: '' },
|
|
...(cityOptionsByProvince[form.province] ?? []),
|
|
], [form.province]);
|
|
|
|
function updateForm<K extends keyof EnterpriseForm>(key: K, value: EnterpriseForm[K]) {
|
|
setForm((current) => ({
|
|
...current,
|
|
[key]: value,
|
|
...(key === 'province' ? { city: '' } : {}),
|
|
}));
|
|
setErrors((current) => ({ ...current, [key]: undefined }));
|
|
}
|
|
|
|
function validateForm() {
|
|
const nextErrors: EnterpriseFormErrors = {};
|
|
if (!form.name.trim()) nextErrors.name = '请填写企业名称';
|
|
if (!form.creditCode.trim()) nextErrors.creditCode = '请填写统一社会信用代码';
|
|
if (!form.contactName.trim()) nextErrors.contactName = '请填写联系人姓名';
|
|
if (!form.contactPhone.trim()) nextErrors.contactPhone = '请填写手机号';
|
|
setErrors(nextErrors);
|
|
return Object.keys(nextErrors).length === 0;
|
|
}
|
|
|
|
function submitForm() {
|
|
if (!validateForm()) return;
|
|
setSaving(true);
|
|
const { photoContentType, photoFileName, ...payload } = form;
|
|
const request = isEdit && enterpriseId
|
|
? adminApi.updateTenant(enterpriseId, payload)
|
|
: adminApi.createTenant(payload);
|
|
request
|
|
.then(() => navigate('/admin/customers'))
|
|
.catch((failure: Error) => setError(failure.message || '企业保存失败'))
|
|
.finally(() => setSaving(false));
|
|
}
|
|
|
|
function uploadEnterprisePhoto(file: File | undefined) {
|
|
if (!file) return;
|
|
setUploadingPhoto(true);
|
|
adminApi.uploadFileObject(file, { purpose: 'enterprise_photo', prefix: 'enterprise-photos' })
|
|
.then((fileObject) => {
|
|
setForm((current) => ({
|
|
...current,
|
|
photoContentType: fileObject.contentType,
|
|
photoFileObjectId: fileObject.id,
|
|
photoFileName: fileObject.fileName,
|
|
}));
|
|
setError('');
|
|
})
|
|
.catch((failure: Error) => setError(failure.message || '企业照片上传失败'))
|
|
.finally(() => setUploadingPhoto(false));
|
|
}
|
|
|
|
const photoFile: FileRef | null = form.photoFileObjectId
|
|
? { contentType: form.photoContentType, fileName: form.photoFileName || '企业照片', fileObjectId: form.photoFileObjectId }
|
|
: null;
|
|
|
|
return (
|
|
<section className="page-stack enterprise-form-page">
|
|
<div className="page-heading">
|
|
<div>
|
|
<Breadcrumb items={[isEdit ? '编辑企业' : '创建企业']} />
|
|
<p>填写企业基本信息、证照地址和联系人信息，保存到真实企业档案。</p>
|
|
</div>
|
|
</div>
|
|
{error ? <p className="form-error">{error}</p> : null}
|
|
|
|
<div className="surface enterprise-form-card">
|
|
<section className="ui-detail-section">
|
|
<div className="ui-detail-section__header">
|
|
<div>
|
|
<h3>基本信息</h3>
|
|
<p>企业主体、证照识别和通讯地址。</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="enterprise-upload-panel">
|
|
<span>企业照片</span>
|
|
<label className="enterprise-upload-button">
|
|
<ImagePlus size={28} />
|
|
{uploadingPhoto ? '上传中...' : form.photoFileName || '上传企业照片'}
|
|
<input
|
|
accept="image/png,image/jpeg,image/webp"
|
|
disabled={uploadingPhoto}
|
|
onChange={(event) => uploadEnterprisePhoto(event.target.files?.[0])}
|
|
style={{ display: 'none' }}
|
|
type="file"
|
|
/>
|
|
</label>
|
|
<FileActions file={photoFile} />
|
|
<p>{form.photoFileObjectId ? `文件对象：${form.photoFileObjectId}` : '支持 JPG、PNG、WebP，上传后随企业档案保存。'}</p>
|
|
</div>
|
|
|
|
<div className="form-grid form-grid--two">
|
|
<Input error={errors.name} label="企业名称" onChange={(event) => updateForm('name', event.target.value)} placeholder="请填写企业全称" required value={form.name} />
|
|
<Input
|
|
error={errors.creditCode}
|
|
hint="修改此项将同步更新该企业档案。"
|
|
label="统一社会信用代码"
|
|
onChange={(event) => updateForm('creditCode', event.target.value)}
|
|
placeholder="请填写统一社会信用代码或纳税识别号"
|
|
required
|
|
value={form.creditCode}
|
|
/>
|
|
</div>
|
|
|
|
<div className="form-grid form-grid--two">
|
|
<Select label="省/直辖市" onChange={(event) => updateForm('province', event.target.value)} options={provinceOptions} value={form.province} />
|
|
<Select label="市/区" onChange={(event) => updateForm('city', event.target.value)} options={cityOptions} value={form.city} />
|
|
</div>
|
|
|
|
<Textarea
|
|
hint="通讯地址可以与营业执照上的地址不一致。"
|
|
label="通讯地址"
|
|
onChange={(event) => updateForm('address', event.target.value)}
|
|
placeholder="请填写详细通讯地址"
|
|
rows={4}
|
|
value={form.address}
|
|
/>
|
|
</section>
|
|
|
|
<section className="ui-detail-section">
|
|
<div className="ui-detail-section__header">
|
|
<div>
|
|
<h3>联系人信息</h3>
|
|
<p>建议填写联系人（法人或财务主管）的真实信息。</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="enterprise-info-tip">
|
|
为方便给企业提供更好的服务，建议填写联系人（法人或财务主管）的真实信息。
|
|
</div>
|
|
|
|
<div className="form-grid form-grid--two">
|
|
<Input error={errors.contactName} label="联系人姓名" onChange={(event) => updateForm('contactName', event.target.value)} placeholder="请填写企业联系人姓名" required value={form.contactName} />
|
|
<Input label="身份证号" onChange={(event) => updateForm('contactIdCard', event.target.value)} placeholder="请填写企业联系人身份证号" value={form.contactIdCard} />
|
|
</div>
|
|
|
|
<div className="form-grid form-grid--two">
|
|
<Input error={errors.contactPhone} label="手机号" onChange={(event) => updateForm('contactPhone', event.target.value)} placeholder="请填写企业联系人手机号" required value={form.contactPhone} />
|
|
<Input label="电子邮箱" onChange={(event) => updateForm('contactEmail', event.target.value)} placeholder="请填写企业联系人邮箱" type="email" value={form.contactEmail} />
|
|
</div>
|
|
</section>
|
|
|
|
<div className="enterprise-form-footer">
|
|
<Button disabled={saving} onClick={submitForm}>{saving ? '保存中...' : isEdit ? '保存企业' : '创建企业'}</Button>
|
|
<Button onClick={() => navigate('/admin/customers')} variant="ghost">取消</Button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|