ERPTurbo_Admin/packages/app-operation/src/components/Company/CompanyList.tsx

import {
	BizContainer,
	BizValueType,
	CompanyPaymentAccountList,
	ModeType,
	ProFormUploadMaterial,
} from '@/components';
import { business } from '@/services';
import { useIntl } from '@@/exports';
import { ProColumns, ProFormText } from '@ant-design/pro-components';
import { ProDescriptionsItemProps } from '@ant-design/pro-descriptions';
import React from 'react';

interface ICompanyListProps {
	ghost?: boolean;
	companyId?: BusinessAPI.CompanyVO['companyId'];
	search?: boolean;
	onValueChange?: () => void;
	mode?: ModeType;
	trigger?: () => React.ReactNode;
}
export default function CompanyList(props: ICompanyListProps) {
	const {
		ghost = false,
		companyId,
		search = true,
		mode = 'page',
		trigger,
		onValueChange,
	} = props;
	const intl = useIntl();
	const intlPrefix = 'company';

	const columns: ProColumns<BusinessAPI.CompanyVO, BizValueType>[] = [
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.logo' }),
			dataIndex: 'logo',
			key: 'logo',
			valueType: 'image',
			search: false,
		},
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.shortName' }),
			dataIndex: 'shortName',
			key: 'shortName',
			renderText: (text: string) => <span className="font-medium">{text}</span>,
		},
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.fullName' }),
			dataIndex: 'fullName',
			key: 'fullName',
			renderText: (text: string) => <span className="font-medium">{text}</span>,
		},
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.taxNumber' }),
			dataIndex: 'taxNumber',
			key: 'taxNumber',
			valueType: 'text',
		},
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.contactPerson' }),
			dataIndex: 'contactPerson',
			key: 'contactPerson',
			valueType: 'text',
			search: false,
		},
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.contactPhone' }),
			dataIndex: 'contactPhone',
			key: 'contactPhone',
			valueType: 'text',
			search: false,
		},
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.address' }),
			dataIndex: 'address',
			key: 'address',
			valueType: 'text',
			search: false,
		},
	];

	const formContext = [
		<ProFormUploadMaterial
			key={'logo'}
			name={'logoList'}
			label={intl.formatMessage({ id: intlPrefix + '.form.logo.label' })}
			placeholder={intl.formatMessage({
				id: intlPrefix + '.form.logo.placeholder',
			})}
			transform={(value) => {
				console.log('transform', value);
				return {
					logoList: value,
					logo: value[0],
				};
			}}
			fieldProps={{
				maxCount: 1,
			}}
		/>,
		<ProFormText
			key={'shortName'}
			name={'shortName'}
			label={intl.formatMessage({ id: intlPrefix + '.form.shortName.label' })}
			required={true}
			placeholder={intl.formatMessage({
				id: intlPrefix + '.form.shortName.placeholder',
			})}
			rules={[
				{
					required: true,
					message: intl.formatMessage({
						id: intlPrefix + '.form.shortName.required',
					}),
				},
			]}
		/>,
		<ProFormText
			key={'fullName'}
			name={'fullName'}
			label={intl.formatMessage({ id: intlPrefix + '.form.fullName.label' })}
			required={true}
			placeholder={intl.formatMessage({
				id: intlPrefix + '.form.fullName.placeholder',
			})}
			rules={[
				{
					required: true,
					message: intl.formatMessage({
						id: intlPrefix + '.form.fullName.required',
					}),
				},
			]}
		/>,
		<ProFormText
			key={'taxNumber'}
			name={'taxNumber'}
			label={intl.formatMessage({ id: intlPrefix + '.form.taxNumber.label' })}
			required={true}
			placeholder={intl.formatMessage({
				id: intlPrefix + '.form.taxNumber.placeholder',
			})}
			rules={[
				{
					required: true,
					message: intl.formatMessage({
						id: intlPrefix + '.form.taxNumber.required',
					}),
				},
			]}
		/>,
		<ProFormText
			key={'contactPerson'}
			name={'contactPerson'}
			label={intl.formatMessage({
				id: intlPrefix + '.form.contactPerson.label',
			})}
			required={true}
			placeholder={intl.formatMessage({
				id: intlPrefix + '.form.contactPerson.placeholder',
			})}
			rules={[
				{
					required: true,
					message: intl.formatMessage({
						id: intlPrefix + '.form.contactPerson.required',
					}),
				},
			]}
			tooltip={intl.formatMessage({
				id: intlPrefix + '.form.contactPerson.tooltip',
			})}
		/>,
		<ProFormText
			key={'contactPhone'}
			name={'contactPhone'}
			label={intl.formatMessage({
				id: intlPrefix + '.form.contactPhone.label',
			})}
			required={true}
			placeholder={intl.formatMessage({
				id: intlPrefix + '.form.contactPhone.placeholder',
			})}
			rules={[
				{
					required: true,
					message: intl.formatMessage({
						id: intlPrefix + '.form.contactPhone.required',
					}),
				},
			]}
			tooltip={intl.formatMessage({
				id: intlPrefix + '.form.contactPhone.tooltip',
			})}
		/>,
		<ProFormText
			key={'address'}
			name={'address'}
			label={intl.formatMessage({ id: intlPrefix + '.form.address.label' })}
			required={true}
			placeholder={intl.formatMessage({
				id: intlPrefix + '.form.address.placeholder',
			})}
			rules={[
				{
					required: true,
					message: intl.formatMessage({
						id: intlPrefix + '.form.address.required',
					}),
				},
			]}
			tooltip={intl.formatMessage({
				id: intlPrefix + '.form.address.tooltip',
			})}
		/>,
	];

	const detailColumns: ProDescriptionsItemProps<
		BusinessAPI.CompanyVO,
		BizValueType
	>[] = columns as ProDescriptionsItemProps<
		BusinessAPI.CompanyVO,
		BizValueType
	>[];

	const detailContext = (
		companyVO: BusinessAPI.CompanyVO,
		onValueChange: () => void,
	) => {
		return [
			{
				label: `付款账户`,
				key: 'companyPaymentAccountList',
				children: (
					<CompanyPaymentAccountList
						companyVO={companyVO}
						ghost={true}
						search={false}
						onValueChange={onValueChange}
					/>
				),
			},
		];
	};

	return (
		<BizContainer<
			typeof business.company,
			BusinessAPI.CompanyVO,
			BusinessAPI.CompanyPageQry,
			BusinessAPI.CompanyCreateCmd,
			BusinessAPI.CompanyUpdateCmd
		>
			rowKey={'companyId'}
			permission={'operation-company'}
			func={business.company}
			method={'company'}
			methodUpper={'Company'}
			intlPrefix={intlPrefix}
			modeType={mode}
			onValueChange={onValueChange}
			container={{
				ghost,
			}}
			remark={{
				mode: 'editor',
			}}
			status
			page={{
				fieldProps: {
					bordered: true,
					ghost,
					//@ts-ignore
					search,
				},
				columns,
			}}
			create={{
				formType: 'drawer',
				formContext,
				initValues: {
					status: true,
				},
			}}
			update={{
				formType: 'drawer',
				formContext,
			}}
			destroy={{}}
			detail={{
				rowId: companyId,
				formType: 'drawer',
				columns: detailColumns,
				formContext: detailContext,
				trigger,
			}}
		/>
	);
}