|
@@ -32,7 +32,7 @@ function DIYTable(props: IProps) {
|
|
const [tableData, setTableData] = useState<TableDataType[]>([{ index: 1 }]);
|
|
const [tableData, setTableData] = useState<TableDataType[]>([{ index: 1 }]);
|
|
|
|
|
|
// table列配置
|
|
// table列配置
|
|
- const tableColumnDef = [
|
|
|
|
|
|
+ const tableColumnDef: ColumnsType<any> = [
|
|
{
|
|
{
|
|
title: '序号',
|
|
title: '序号',
|
|
dataIndex: 'index',
|
|
dataIndex: 'index',
|
|
@@ -40,6 +40,67 @@ function DIYTable(props: IProps) {
|
|
},
|
|
},
|
|
];
|
|
];
|
|
|
|
|
|
|
|
+ const [commitValue, setCommitValue] = useState<any[]>([]);
|
|
|
|
+
|
|
|
|
+ const handleValueChange = (value: any, id: string, label: string) => {
|
|
|
|
+ let ids = id.split(';');
|
|
|
|
+ let [rowIndex, colIndex] = ids[0].split(',').map(item => Number(item));
|
|
|
|
+ let [columnID, _tableID] = ids[1].split('>');
|
|
|
|
+ let [columnLabel, _tableLabel] = label.split('>');
|
|
|
|
+
|
|
|
|
+ const cell = {
|
|
|
|
+ name: columnLabel,
|
|
|
|
+ id: columnID,
|
|
|
|
+ type: columnID.split('_')[0],
|
|
|
|
+ value: [value],
|
|
|
|
+ };
|
|
|
|
+ // 组装可能用到的数据
|
|
|
|
+ const cols = [];
|
|
|
|
+ cols[colIndex] = cell;
|
|
|
|
+ const rows = [];
|
|
|
|
+ rows[rowIndex] = cols;
|
|
|
|
+
|
|
|
|
+ const newValues = JSON.parse(JSON.stringify(commitValue)) || [];
|
|
|
|
+
|
|
|
|
+ if (newValues.length !== 0 && newValues[rowIndex] !== undefined) {
|
|
|
|
+ newValues.forEach((row: any, rindex: number) => {
|
|
|
|
+ if (rindex === rowIndex) {
|
|
|
|
+ if (row[colIndex] !== undefined) {
|
|
|
|
+ row.forEach((_col: any, cindex: number) => {
|
|
|
|
+ if (cindex === colIndex) {
|
|
|
|
+ row[colIndex] = cell;
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ } else {
|
|
|
|
+ row[colIndex] = cell;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ } else {
|
|
|
|
+ newValues[rowIndex] = cols;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ const textNode = columns?.find(item => item.componentName === 'TextNote');
|
|
|
|
+ if (textNode) {
|
|
|
|
+ const textNodeIndex = columns?.findIndex(item => item.componentName === 'TextNote');
|
|
|
|
+ const textCell = {
|
|
|
|
+ name: textNode.props.label,
|
|
|
|
+ id: textNode.props.id,
|
|
|
|
+ type: textNode.componentName,
|
|
|
|
+ value: [textNode.props.placeholder],
|
|
|
|
+ };
|
|
|
|
+ newValues.forEach(item => {
|
|
|
|
+ if (textNodeIndex !== -1) {
|
|
|
|
+ item[textNodeIndex] = textCell;
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ }
|
|
|
|
+ console.log(newValues);
|
|
|
|
+
|
|
|
|
+ setCommitValue(newValues);
|
|
|
|
+ onChange(newValues);
|
|
|
|
+ };
|
|
|
|
+
|
|
// 表单填写时的表格生成
|
|
// 表单填写时的表格生成
|
|
const handleGenerateTable = () => {
|
|
const handleGenerateTable = () => {
|
|
if (columns !== undefined && columns.length) {
|
|
if (columns !== undefined && columns.length) {
|
|
@@ -64,7 +125,9 @@ function DIYTable(props: IProps) {
|
|
style={{ padding: '0', margin: '0' }}
|
|
style={{ padding: '0', margin: '0' }}
|
|
options={column.props.options}
|
|
options={column.props.options}
|
|
disabled={column.props.disabled}
|
|
disabled={column.props.disabled}
|
|
- onChange={onChange}
|
|
|
|
|
|
+ onChange={value => {
|
|
|
|
+ handleValueChange(value, id, `${columnLabel}>${table.props.label}`);
|
|
|
|
+ }}
|
|
/>
|
|
/>
|
|
);
|
|
);
|
|
};
|
|
};
|
|
@@ -81,7 +144,9 @@ function DIYTable(props: IProps) {
|
|
placeholder={column.props.placeholder}
|
|
placeholder={column.props.placeholder}
|
|
format={column.props.format}
|
|
format={column.props.format}
|
|
disabled={column.props.disabled}
|
|
disabled={column.props.disabled}
|
|
- onChange={onChange}
|
|
|
|
|
|
+ onChange={value => {
|
|
|
|
+ handleValueChange(value, id, `${columnLabel}>${table.props.label}`);
|
|
|
|
+ }}
|
|
/>
|
|
/>
|
|
);
|
|
);
|
|
};
|
|
};
|
|
@@ -98,7 +163,9 @@ function DIYTable(props: IProps) {
|
|
style={{ padding: '4px 11px' }}
|
|
style={{ padding: '4px 11px' }}
|
|
disabled={column.props.disabled}
|
|
disabled={column.props.disabled}
|
|
unit={column.props.unit}
|
|
unit={column.props.unit}
|
|
- onChange={onChange}
|
|
|
|
|
|
+ onChange={value => {
|
|
|
|
+ handleValueChange(value, id, `${columnLabel}>${table.props.label}`);
|
|
|
|
+ }}
|
|
/>
|
|
/>
|
|
);
|
|
);
|
|
};
|
|
};
|
|
@@ -111,7 +178,7 @@ function DIYTable(props: IProps) {
|
|
disabled={column.props.disabled}
|
|
disabled={column.props.disabled}
|
|
placeholder={column.props.placeholder}
|
|
placeholder={column.props.placeholder}
|
|
onChange={e =>
|
|
onChange={e =>
|
|
- onChange?.(e.target.value, id, `${columnLabel}>${table.props.label}`)
|
|
|
|
|
|
+ handleValueChange?.(e.target.value, id, `${columnLabel}>${table.props.label}`)
|
|
}
|
|
}
|
|
/>
|
|
/>
|
|
);
|
|
);
|