import React from "react";
|
import { message } from "antd";
|
import { uploadFile } from "../../api/business";
|
|
/**
|
* 这是个基础的编辑表单，
|
* 封装了一些公共的方法，比如初始化数据，字段变化的处理等
|
* 继承的子类需要实现initEditableData方法，返回一个对象，表示表单的初始值
|
* 子类可以通过handleFieldChange方法来处理表单字段的变化
|
*/
|
class BaseForm extends React.Component {
|
state = {
|
editableData: {},
|
isEdit: false
|
};
|
|
formItemLayout = {
|
labelCol: {
|
sm: { span: 4 },
|
},
|
wrapperCol: {
|
sm: { span: 16 },
|
},
|
};
|
|
// 组件挂载
|
componentDidMount() {
|
this.initView()
|
}
|
|
// 组件更新
|
componentDidUpdate(prevProps) {
|
if (!prevProps.visible && this.props.visible) {
|
|
// create copy of current row data
|
let isEdit = !!this.props.currentRowData;
|
let data = isEdit ? this.props.currentRowData : this.initEditableData();
|
|
// 这里初始化
|
this.setState({
|
editableData: data,
|
isEdit: isEdit
|
}, () => {
|
this.viewWillAppear()
|
});
|
}
|
|
// 如果组件隐藏了，清空数据
|
if (prevProps.visible && !this.props.visible) {
|
this.setState({
|
editableData: {}
|
});
|
}
|
}
|
|
// 针对于一般的文本输入框
|
handleFieldChange = (field) => (e) => {
|
const value = e.target ? e.target.value : e;
|
this.setFieldValue(field, value);
|
}
|
|
// 针对日期输入框
|
handleDateFieldChange = (field) => (date, dateString) => {
|
this.setFieldValue(field, dateString);
|
}
|
// 针对于数字输入框
|
handleNumberChange = (field) => (value) => {
|
this.setFieldValue(field, value);
|
}
|
|
// 针对级联选择框
|
handleCascaderChange = (field) => (value) => {
|
if (value.length > 0) {
|
this.setFieldValue(field, value[value.length - 1]);
|
}
|
}
|
|
// 针对于下拉框
|
handleSelectChange = (field, callback) => (e) => {
|
const value = e ? e.key : '';
|
this.setFieldValue(field, value, callback);
|
}
|
|
// 针对多选下拉框
|
handleMultipleSelectChange = (field, callback) => (e) => {
|
const value = e ? e.map(item => item.key) : [];
|
this.setFieldValue(field, value, callback);
|
}
|
|
// 针对于下拉框
|
// 针对实体选择框
|
handleEntitySelectChange = (field, callback) => (e) => {
|
const value = e ? { id: e.key } : null;
|
this.setFieldValue(field, value, callback);
|
}
|
// 针对多选实体选择框
|
handleMultipleEntitiesSelectChange = (field, callback) => (e) => {
|
const value = e ? e.map(item => ({ id: item.key })) : [];
|
this.setFieldValue(field, value, callback);
|
}
|
|
// 针对如CompanyInfo这种实体且包含属性的下拉框
|
handleEntityFieldSelectChange = (field, entityField) => (e) => {
|
let entity = this.state.editableData[field] || {};
|
entity[entityField] = e ? e.target.value : '';
|
this.setFieldValue(field, entity);
|
}
|
|
// 针对AddressInfo
|
handleAddressFieldSelectChange = (field, entityField, callback) => (e) => {
|
let entity = this.state.editableData[field] || {};
|
entity[entityField] = e ? e.label : '';
|
this.setFieldValue(field, entity);
|
callback && callback(e);
|
}
|
|
// 设置字段值
|
setFieldValue = (field, value, callback) => {
|
this.setState(prevState => ({
|
editableData: {
|
...prevState.editableData,
|
[field]: value
|
}
|
}), () => {
|
if (callback) {
|
callback(value)
|
}
|
});
|
}
|
|
// **** 处理数组字段的变化 ****
|
// 针对问题中的规范、建议行为字段的处理
|
|
// 针对字符串数组的处理
|
setStringArrayFieldValue = (field, index, e) => {
|
const value = e.target ? e.target.value : e;
|
let array = this.state.editableData[field] || [];
|
array[index] = value;
|
this.setFieldValue(field, array);
|
}
|
|
// 针对实体数组的处理
|
setEntityArrayFieldValue = (field, entityField, index, defaultVal, e) => {
|
const value = e.target ? e.target.value : e;
|
let array = this.state.editableData[field] || [];
|
let entity = array[index] || defaultVal;
|
entity[entityField] = value;
|
array[index] = entity;
|
this.setFieldValue(field, array);
|
}
|
|
// 针对数组删除的处理
|
handleDeleteArrayItem = (field, index) => {
|
let array = this.state.editableData[field] || [];
|
array.splice(index, 1);
|
this.setFieldValue(field, array);
|
}
|
|
// 针对数组添加的处理
|
handleAddArrayItem = (field, item) => {
|
let array = this.state.editableData[field] || [];
|
array.push(item);
|
this.setFieldValue(field, array);
|
}
|
|
/**
|
* 上传文件
|
*/
|
uploadAttachment = (field, data) => {
|
this.uploading = true
|
uploadFile(data.file)
|
.then(response => {
|
this.uploading = false
|
if (response.data.status === 'OK') {
|
data.onSuccess(response, data.file);
|
this.setFieldValue(field, response.data.data)
|
}
|
}).catch(error => {
|
message.error('上传失败' + error)
|
});
|
}
|
|
/**
|
* 初始化表单要编辑的实体数据
|
*/
|
initEditableData() {
|
return {
|
}
|
}
|
|
/**
|
* 在整个表单初始化的时候调用
|
* 适合加载一些Options
|
*/
|
initView() {
|
}
|
|
/**
|
* 在表单出现之前调用
|
* 适合加载当前表单特有的数据
|
*/
|
viewWillAppear() {
|
|
}
|
|
// 渲染表单
|
render() {
|
return null;
|
}
|
}
|
|
export default BaseForm;
|
