130 lines
3.4 KiB
TypeScript
130 lines
3.4 KiB
TypeScript
import { PlusOutlined } from '@ant-design/icons';
|
|
import type { ActionType, ProColumns } from '@ant-design/pro-components';
|
|
import type { TabsProps } from 'antd';
|
|
import { Tabs } from 'antd';
|
|
import { useCallback, useRef, useState } from 'react';
|
|
import ConfigurableDrawerForm, {
|
|
type ConfigurableDrawerFormRef,
|
|
} from '@/components/DrawerForm';
|
|
import EnhancedProTable from '@/components/EnhancedProTable';
|
|
import type { ToolbarAction } from '@/components/EnhancedProTable/types';
|
|
import { formStatusType } from '@/constants';
|
|
import { getCategoryList } from '@/services/prodApi/category';
|
|
import { baseTenantColumns, formColumns } from './config';
|
|
|
|
const ProdCategory = () => {
|
|
const tableRef = useRef<ActionType>(null);
|
|
const [type, setType] = useState<'create' | 'update' | 'test'>('create');
|
|
const [grade, setGrade] = useState<string>('');
|
|
const configurableDrawerRef = useRef<ConfigurableDrawerFormRef>(null);
|
|
const onChange = useCallback(
|
|
(key: string) => {
|
|
setGrade(key);
|
|
},
|
|
[grade],
|
|
);
|
|
|
|
const onFetch = async (params: API.getProductCategoryCategoryListParams) => {
|
|
const data = await getCategoryList({
|
|
...params,
|
|
grade: grade ? Number(grade) : undefined,
|
|
});
|
|
return {
|
|
data: data,
|
|
success: true,
|
|
};
|
|
};
|
|
|
|
const handleAdd = () => {
|
|
setType('create');
|
|
configurableDrawerRef.current?.open();
|
|
};
|
|
|
|
const toolbarActions: ToolbarAction[] = [
|
|
{
|
|
key: 'add',
|
|
label: '新建',
|
|
type: 'primary',
|
|
icon: <PlusOutlined />,
|
|
onClick: handleAdd,
|
|
},
|
|
];
|
|
const handleEdit = async (row: API.CategoryDO) => {
|
|
setType('update');
|
|
configurableDrawerRef.current?.open(row);
|
|
};
|
|
const handleSubmit = async (values: API.CategoryDO) => {
|
|
console.log('values', values);
|
|
// const success = await handleAdd(values as API.CategoryDO);
|
|
// if (success) {
|
|
// handleClose();
|
|
// }
|
|
return true;
|
|
};
|
|
|
|
const actionColumns: ProColumns<API.CategoryDO> = {
|
|
title: '操作',
|
|
dataIndex: 'option',
|
|
valueType: 'option',
|
|
fixed: 'right',
|
|
width: 120,
|
|
render: (_text: React.ReactNode, record: API.CategoryDO, _: number) => [
|
|
<a key="edit" onClick={() => handleEdit(record)}>
|
|
编辑
|
|
</a>,
|
|
<a key="detail">详情</a>,
|
|
],
|
|
};
|
|
|
|
const columns = [...baseTenantColumns, actionColumns];
|
|
const renderChildren = () => {
|
|
return (
|
|
<>
|
|
<EnhancedProTable<API.CategoryDO>
|
|
ref={tableRef}
|
|
columns={columns}
|
|
rowKey="categoryId"
|
|
request={onFetch}
|
|
toolbarActions={toolbarActions}
|
|
headerTitle="短信渠道"
|
|
showIndex={false}
|
|
showSelection={false}
|
|
/>
|
|
<ConfigurableDrawerForm
|
|
ref={configurableDrawerRef}
|
|
title={formStatusType[type]}
|
|
// width="50vw"
|
|
columns={formColumns({ grade: Number(grade), type })}
|
|
onSubmit={handleSubmit}
|
|
/>
|
|
</>
|
|
);
|
|
};
|
|
|
|
const items: TabsProps['items'] = [
|
|
{
|
|
key: '',
|
|
label: '全部分类',
|
|
children: renderChildren(),
|
|
},
|
|
{
|
|
key: '3',
|
|
label: '三级分类',
|
|
children: renderChildren(),
|
|
},
|
|
{
|
|
key: '2',
|
|
label: '二级分类',
|
|
children: renderChildren(),
|
|
},
|
|
{
|
|
key: '1',
|
|
label: '一级分类',
|
|
children: renderChildren(),
|
|
},
|
|
];
|
|
return <Tabs defaultActiveKey={grade} items={items} onChange={onChange} />;
|
|
};
|
|
|
|
export default ProdCategory;
|