ERPTurbo_Admin/packages/app-operation/src/components/Setting/WxMaConfig.tsx

import { MaterialList, ProFormUploadMaterial } from '@/components';
import { business } from '@/services';
import { formatParam } from '@/utils/formatParam';
import { formLayout } from '@/utils/formLayout';
import {
	ActionType,
	ProForm,
	ProFormText,
	ProFormUploadDragger,
} from '@ant-design/pro-components';
import { Col, message, Row, Space } from 'antd';
import { useRef } from 'react';

export default function WxMaConfig() {
	const actionRef = useRef<ActionType>();
	return (
		<ProForm<BusinessAPI.WxMaConfigValue>
			{...formLayout()}
			request={async () => {
				const { data } = await business.setting.showSetting({
					settingShowQry: {
						settingKey: 'WX_MA_CONFIG',
					},
				});

				const wxMaConfigValue =
					data?.settingValue as BusinessAPI.WxMaConfigValue;
				return {
					...wxMaConfigValue,
					wxMaLogoList: [wxMaConfigValue?.wxMaLogo],
				} as BusinessAPI.WxMaConfigValue;
			}}
			onFinish={async (values) => {
				await business.setting.updateSetting({
					settingKey: 'WX_MA_CONFIG',
					settingValue: {
						...values,
						settingKey: 'WX_MA_CONFIG',
					},
				});

				message.success('更新小程序配置成功');
			}}
			submitter={{
				render: (_, dom) => {
					return (
						<Row>
							<Col span={14} offset={4}>
								<Space>{dom}</Space>
							</Col>
						</Row>
					);
				},
			}}
		>
			<ProFormText hidden={true} name={'settingId'} />
			<ProFormText
				name="wxMaName"
				label="小程序名称"
				placeholder={'请输入小程序名称'}
				required={true}
				rules={[
					{
						required: true,
						message: '小程序名称为必填项',
					},
				]}
			/>
			<ProFormText
				name="appId"
				label="AppID(小程序ID)"
				placeholder={'请输入小程序AppID'}
				required={true}
				rules={[
					{
						required: true,
						message: '小程序AppID为必填项',
					},
				]}
			/>
			<ProFormText.Password
				name="appSecret"
				label="AppSecret(小程序密钥)"
				placeholder={'请输入小程序AppSecret'}
				required={true}
				rules={[
					{
						required: true,
						message: '小程序AppSecret为必填项',
					},
				]}
			/>
			<ProFormText
				name="wxMaOriginalId"
				label="小程序原始ID"
				placeholder={'请输入小程序原始ID'}
				required={true}
				rules={[
					{
						required: true,
						message: '小程序原始ID为必填项',
					},
				]}
			/>
			<ProFormUploadMaterial
				key={'wxMaLogo'}
				label={'小程序Logo'}
				name={'wxMaLogoList'}
				transform={(value) => {
					return {
						wxMaLogo: value[0],
					};
				}}
				fieldProps={{
					maxCount: 1,
					actionRef: actionRef,
					toolBarRender: () => [
						<MaterialList
							key={'create'}
							ghost={true}
							mode={'create'}
							search={false}
							onValueChange={() => actionRef.current?.reload()}
						/>,
					],
					request: async (params, sorter, filter) => {
						const { data, success, totalCount } =
							await business.material.pageMaterial({
								materialPageQry: formatParam<typeof params>(
									params,
									sorter,
									filter,
								),
							});

						return {
							data: data || [],
							total: totalCount,
							success,
						};
					},
				}}
			/>
			<ProFormUploadDragger
				key={'wxMaCheckFile'}
				label={'校验文件上传'}
				tooltip={'添加业务域名的时候需要上传校验文件'}
				name={'wxMaCheckFileList'}
				accept={'.txt'}
				max={1}
				transform={(file) => {
					return {
						wxMaCheckFile: file[0],
					};
				}}
			/>
		</ProForm>
	);
}