import React, { useState, useEffect } from 'react';
|
import { Button, Toast } from 'dingtalk-design-mobile';
|
import CustomFormView from '../../../components/CustomFormView';
|
import { transfer } from './partyInfoForm';
|
import NavBarPage from '../../../components/NavBarPage';
|
import dd from 'gdt-jsapi';
|
|
const CustomFormExample = () => {
|
// 获取表单配置
|
const formConfig = transfer();
|
|
// 表单数据状态
|
const [formData, setFormData] = useState({});
|
|
// 处理表单变更
|
const handleFormChange = (newValues, name) => {
|
setFormData(newValues);
|
console.log('表单数据变更:', name, newValues);
|
};
|
|
// 处理人员选择
|
const handleSelectPerson = (name, url) => {
|
Toast.info({
|
content: `正在选择: ${name}`,
|
});
|
|
// 这里可以调用钉钉选人接口
|
dd.biz.contact.complexPicker({
|
title: '选择人员',
|
corpId: '',
|
multiple: true,
|
limitTips: '最多选择10个人',
|
maxUsers: 10,
|
responseUserOnly: true,
|
success: (res) => {
|
const selectedNames = res.users.map(user => user.name).join(',');
|
setFormData({
|
...formData,
|
[name]: selectedNames
|
});
|
}
|
});
|
};
|
|
// 处理文件上传
|
const handleUpload = (item) => {
|
Toast.info({
|
content: '选择文件上传',
|
});
|
|
// 这里可以调用钉钉上传文件接口
|
dd.biz.util.uploadAttachment({
|
type: 'image',
|
compression: true,
|
multiple: true,
|
max: 9,
|
spaceId: item.ownerType || '',
|
success: (res) => {
|
if (res.data && res.data.length > 0) {
|
const fileList = res.data.map((file, index) => ({
|
id: `temp_${Date.now()}_${index}`,
|
name: file.fileName || `附件${index + 1}`,
|
url: file.spaceId,
|
type: file.fileType
|
}));
|
|
const newFileList = [...(formData.fileList || []), ...fileList];
|
setFormData({
|
...formData,
|
fileList: newFileList
|
});
|
}
|
}
|
});
|
};
|
|
// 表单提交
|
const handleSubmit = () => {
|
// 检查必填字段
|
let missingRequired = false;
|
|
formConfig.forEach(group => {
|
group.list.forEach(item => {
|
if (item.require && (!formData[item.name] || formData[item.name] === '')) {
|
missingRequired = true;
|
Toast.info({
|
content: `请填写必填项: ${item.label}`,
|
});
|
return;
|
}
|
});
|
});
|
|
if (missingRequired) {
|
return;
|
}
|
|
// 提交表单数据
|
Toast.success({
|
content: '表单提交成功',
|
});
|
|
console.log('提交的表单数据:', formData);
|
};
|
|
return (
|
<div className="custom-form-example">
|
<NavBarPage
|
title="自定义表单示例"
|
leftButton={() => {}}
|
/>
|
|
<CustomFormView
|
formConfig={formConfig}
|
formData={formData}
|
onChange={handleFormChange}
|
onSelectPerson={handleSelectPerson}
|
onUpload={handleUpload}
|
/>
|
|
<div style={{
|
padding: '16px',
|
position: 'fixed',
|
bottom: 0,
|
left: 0,
|
right: 0,
|
background: '#fff',
|
boxShadow: '0 -2px 8px rgba(0, 0, 0, 0.1)'
|
}}>
|
<Button type="primary" block onClick={handleSubmit}>
|
提交
|
</Button>
|
</div>
|
|
<div style={{ height: '70px' }} />
|
</div>
|
);
|
};
|
|
export default CustomFormExample;
|
