91 lines
2.8 KiB
JavaScript
91 lines
2.8 KiB
JavaScript
import React, { useState } from 'react';
|
||
import { Button, Checkbox, Drawer } from 'antd';
|
||
import { HolderOutlined } from '@ant-design/icons';
|
||
import { createDefaultFieldConfig, FIELD_LABELS } from './fieldConfig';
|
||
|
||
/**
|
||
* 字段配置抽屉：
|
||
* - 勾选控制列显隐
|
||
* - 拖动把手（整行可拖）调整列顺序，表格实时按新顺序渲染
|
||
* - 配置即改即存（localStorage），刷新后保持
|
||
*/
|
||
const FieldConfigDrawer = ({
|
||
open,
|
||
onClose,
|
||
config,
|
||
onChange,
|
||
fieldLabels = FIELD_LABELS,
|
||
createDefaultConfig = createDefaultFieldConfig,
|
||
tip = '勾选控制列显示，拖动调整列顺序；配置自动保存在本机。',
|
||
}) => {
|
||
const [dragIndex, setDragIndex] = useState(null);
|
||
|
||
const moveField = (from, to) => {
|
||
if (from === to) return;
|
||
const order = [...config.order];
|
||
const [item] = order.splice(from, 1);
|
||
order.splice(to, 0, item);
|
||
onChange({ ...config, order });
|
||
};
|
||
|
||
const toggleField = (key, checked) => {
|
||
const hidden = checked
|
||
? config.hidden.filter((item) => item !== key)
|
||
: [...config.hidden, key];
|
||
onChange({ ...config, hidden });
|
||
};
|
||
|
||
return (
|
||
<Drawer
|
||
title="字段配置"
|
||
width={360}
|
||
open={open}
|
||
onClose={onClose}
|
||
footer={(
|
||
<div className="pricing-calc-field-config__footer">
|
||
<Button onClick={() => onChange(createDefaultConfig())}>恢复默认</Button>
|
||
<Button type="primary" onClick={onClose}>完成</Button>
|
||
</div>
|
||
)}
|
||
>
|
||
<p className="pricing-calc-field-config__tip">
|
||
{tip}
|
||
</p>
|
||
<ul className="pricing-calc-field-config__list">
|
||
{config.order.map((key, index) => {
|
||
const isHidden = config.hidden.includes(key);
|
||
return (
|
||
<li
|
||
key={key}
|
||
className={`pricing-calc-field-config__item${index === dragIndex ? ' is-dragging' : ''}${isHidden ? ' is-off' : ''}`}
|
||
draggable
|
||
onDragStart={(event) => {
|
||
event.dataTransfer.effectAllowed = 'move';
|
||
setDragIndex(index);
|
||
}}
|
||
onDragEnter={() => {
|
||
if (dragIndex !== null && dragIndex !== index) {
|
||
moveField(dragIndex, index);
|
||
setDragIndex(index);
|
||
}
|
||
}}
|
||
onDragOver={(event) => event.preventDefault()}
|
||
onDragEnd={() => setDragIndex(null)}
|
||
>
|
||
<HolderOutlined className="pricing-calc-field-config__grip" />
|
||
<Checkbox
|
||
checked={!isHidden}
|
||
onChange={(event) => toggleField(key, event.target.checked)}
|
||
>
|
||
{fieldLabels[key] || key}
|
||
</Checkbox>
|
||
</li>
|
||
);
|
||
})}
|
||
</ul>
|
||
</Drawer>
|
||
);
|
||
};
|
||
|
||
export default FieldConfigDrawer;
|