feat: 类目管理
This commit is contained in:
@@ -1,49 +1,84 @@
|
||||
import type {
|
||||
ProColumns,
|
||||
ProCoreActionType,
|
||||
ProFormColumnsType,
|
||||
} from '@ant-design/pro-components';
|
||||
import dayjs from 'dayjs';
|
||||
import TagEditor from '@/components/TagEditor';
|
||||
import TinyMCEEditor from '@/components/Tinymce';
|
||||
} from "@ant-design/pro-components";
|
||||
import dayjs from "dayjs";
|
||||
import TagEditor from "@/components/TagEditor";
|
||||
import TinyMCEEditor from "@/components/Tinymce";
|
||||
import {
|
||||
getCategoryList,
|
||||
putCategoryUpdate,
|
||||
} from "@/services/prodApi/category";
|
||||
import { Input, message, Modal, Switch } from "antd";
|
||||
export const baseTenantColumns: ProColumns<API.CategoryDO>[] = [
|
||||
{
|
||||
title: '类目名称',
|
||||
dataIndex: 'categoryName',
|
||||
title: "类目名称",
|
||||
dataIndex: "categoryName",
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '类目ID',
|
||||
dataIndex: 'categoryId',
|
||||
title: "类目ID",
|
||||
dataIndex: "categoryId",
|
||||
},
|
||||
{
|
||||
title: '类目层级',
|
||||
dataIndex: 'grade',
|
||||
title: "类目层级",
|
||||
dataIndex: "grade",
|
||||
hideInSearch: true, // 在搜索表单中隐藏
|
||||
},
|
||||
{
|
||||
title: '父级类目',
|
||||
dataIndex: 'parentName',
|
||||
title: "父级类目",
|
||||
dataIndex: "parentName",
|
||||
|
||||
hideInSearch: true, // 在搜索表单中隐藏
|
||||
},
|
||||
{
|
||||
title: '排序权重',
|
||||
dataIndex: 'sort',
|
||||
title: "排序权重",
|
||||
dataIndex: "sort",
|
||||
hideInSearch: true, // 在搜索表单中隐藏
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
valueType: 'switch',
|
||||
title: "状态",
|
||||
dataIndex: "status",
|
||||
valueType: "switch",
|
||||
hideInSearch: true,
|
||||
render: (
|
||||
_,
|
||||
record: API.CategoryDO,
|
||||
_index: number,
|
||||
action: ProCoreActionType | undefined
|
||||
) => (
|
||||
<Switch
|
||||
checked={record.status === 1}
|
||||
checkedChildren="开启"
|
||||
unCheckedChildren="禁用"
|
||||
onChange={(checked) => {
|
||||
Modal.confirm({
|
||||
title: "确认操作",
|
||||
content: `确认要"${checked ? "启用" : "禁用"}${
|
||||
record.categoryName
|
||||
}"类目吗?`,
|
||||
onOk: async () => {
|
||||
console.log(checked);
|
||||
await putCategoryUpdate({
|
||||
status: checked ? 1 : 0,
|
||||
categoryId: record.categoryId,
|
||||
});
|
||||
message.success("修改成功");
|
||||
action?.reload();
|
||||
},
|
||||
});
|
||||
}}
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createTime',
|
||||
valueType: 'dateRange',
|
||||
title: "创建时间",
|
||||
dataIndex: "createTime",
|
||||
valueType: "dateRange",
|
||||
hideInSearch: true, // 在搜索表单中隐藏
|
||||
render: (_, record: API.CategoryDO) =>
|
||||
dayjs(record.createTime).format('YYYY-MM-DD HH:mm:ss'),
|
||||
dayjs(record.createTime).format("YYYY-MM-DD HH:mm:ss"),
|
||||
},
|
||||
];
|
||||
|
||||
@@ -52,100 +87,129 @@ export const formColumns = (data: {
|
||||
grade: number;
|
||||
}): ProFormColumnsType[] => [
|
||||
{
|
||||
title: '类目',
|
||||
dataIndex: 'grade',
|
||||
valueType: 'radio',
|
||||
title: "类目",
|
||||
dataIndex: "grade",
|
||||
valueType: "radio",
|
||||
fieldProps: {
|
||||
value: data.grade || 1,
|
||||
options: [
|
||||
{ label: '一级类目', value: 1 },
|
||||
{ label: '二级类目', value: 2 },
|
||||
{ label: '三级类目', value: 3 },
|
||||
{ label: "一级类目", value: 1 },
|
||||
{ label: "二级类目", value: 2 },
|
||||
{ label: "三级类目", value: 3 },
|
||||
],
|
||||
disabled: data.type === 'create',
|
||||
disabled: data.type === "update",
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '类目名称',
|
||||
dataIndex: 'username',
|
||||
title: "类目名称",
|
||||
dataIndex: "categoryName",
|
||||
formItemProps: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入用户名',
|
||||
message: "请输入用户名",
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '排序权重',
|
||||
dataIndex: 'sort',
|
||||
valueType: 'digit',
|
||||
title: "排序权重",
|
||||
dataIndex: "sort",
|
||||
valueType: "digit",
|
||||
},
|
||||
{
|
||||
title: '类目描述',
|
||||
dataIndex: 'description',
|
||||
valueType: 'textarea',
|
||||
title: "类目描述",
|
||||
dataIndex: "description",
|
||||
valueType: "textarea",
|
||||
renderFormItem: () => {
|
||||
return <TinyMCEEditor />;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '关联父级',
|
||||
dataIndex: 'parentId',
|
||||
valueType: 'select',
|
||||
hideInForm: data.grade - 1 === 0,
|
||||
title: "关联父级",
|
||||
dataIndex: "parentId",
|
||||
valueType: "select",
|
||||
hideInForm: data.grade - 1 <= 0,
|
||||
fieldProps: {
|
||||
fieldNames: { label: "categoryName", value: "categoryId" },
|
||||
},
|
||||
request: async () => {
|
||||
const grade = data.grade ? data.grade - 1 : undefined;
|
||||
const res = await getCategoryList({ grade });
|
||||
return res;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '类目icon',
|
||||
dataIndex: 'icon',
|
||||
title: "类目icon",
|
||||
dataIndex: "icon",
|
||||
},
|
||||
{
|
||||
title: '类目标签',
|
||||
dataIndex: 'tages',
|
||||
title: "类目标签",
|
||||
dataIndex: "tag",
|
||||
renderFormItem: () => {
|
||||
return (
|
||||
<TagEditor
|
||||
placeholder="输入标签名称"
|
||||
maxCount={10}
|
||||
tagProps={{
|
||||
color: 'blue',
|
||||
color: "blue",
|
||||
}}
|
||||
/>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '类目状态',
|
||||
dataIndex: 'status',
|
||||
hideInForm: data.type === 'create',
|
||||
title: "类目状态",
|
||||
dataIndex: "status",
|
||||
hideInForm: data.type === "create",
|
||||
fieldProps: {
|
||||
disabled: data.type === "update",
|
||||
},
|
||||
renderFormItem: (_schema, _config, form) => {
|
||||
const status = form.getFieldValue("type");
|
||||
return <Input value={status ? "开启" : "禁用"} disabled />;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '类目ID',
|
||||
dataIndex: 'categoryId',
|
||||
hideInForm: data.type === 'create',
|
||||
title: "类目ID",
|
||||
dataIndex: "categoryId",
|
||||
hideInForm: data.type === "create",
|
||||
fieldProps: {
|
||||
disabled: data.type === "update",
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createTime',
|
||||
valueType: 'dateTime',
|
||||
hideInForm: data.type === 'create',
|
||||
title: "创建时间",
|
||||
dataIndex: "createTime",
|
||||
valueType: "dateTime",
|
||||
hideInForm: data.type === "create",
|
||||
fieldProps: {
|
||||
disabled: data.type === "update",
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '创建人',
|
||||
dataIndex: 'creator',
|
||||
hideInForm: data.type === 'create',
|
||||
title: "创建人",
|
||||
dataIndex: "creator",
|
||||
hideInForm: data.type === "create",
|
||||
fieldProps: {
|
||||
disabled: data.type === "update",
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '更新时间',
|
||||
dataIndex: 'updateTime',
|
||||
valueType: 'dateTime',
|
||||
hideInForm: data.type === 'create',
|
||||
title: "更新时间",
|
||||
dataIndex: "updateTime",
|
||||
valueType: "dateTime",
|
||||
hideInForm: data.type === "create",
|
||||
fieldProps: {
|
||||
disabled: data.type === "update",
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '更新人',
|
||||
dataIndex: 'updator',
|
||||
hideInForm: data.type === 'create',
|
||||
title: "更新人",
|
||||
dataIndex: "updator",
|
||||
hideInForm: data.type === "create",
|
||||
fieldProps: {
|
||||
disabled: data.type === "update",
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
@@ -1,27 +1,32 @@
|
||||
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 { 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';
|
||||
} from "@/components/DrawerForm";
|
||||
import EnhancedProTable from "@/components/EnhancedProTable";
|
||||
import type { ToolbarAction } from "@/components/EnhancedProTable/types";
|
||||
import { formStatusType } from "@/constants";
|
||||
import {
|
||||
getCategoryList,
|
||||
postCategoryCreate,
|
||||
putCategoryUpdate,
|
||||
} 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 [type, setType] = useState<"create" | "update" | "test">("create");
|
||||
const [grade, setGrade] = useState<number>();
|
||||
const configurableDrawerRef = useRef<ConfigurableDrawerFormRef>(null);
|
||||
const [id, setId] = useState<number>(0);
|
||||
const onChange = useCallback(
|
||||
(key: string) => {
|
||||
setGrade(key);
|
||||
setGrade(Number(key));
|
||||
},
|
||||
[grade],
|
||||
[grade]
|
||||
);
|
||||
|
||||
const onFetch = async (params: API.getProductCategoryCategoryListParams) => {
|
||||
@@ -36,37 +41,46 @@ const ProdCategory = () => {
|
||||
};
|
||||
|
||||
const handleAdd = () => {
|
||||
setType('create');
|
||||
configurableDrawerRef.current?.open();
|
||||
setType("create");
|
||||
configurableDrawerRef.current?.open({ grade: grade ? grade : 1 });
|
||||
};
|
||||
|
||||
const toolbarActions: ToolbarAction[] = [
|
||||
{
|
||||
key: 'add',
|
||||
label: '新建',
|
||||
type: 'primary',
|
||||
key: "add",
|
||||
label: "新建",
|
||||
type: "primary",
|
||||
icon: <PlusOutlined />,
|
||||
onClick: handleAdd,
|
||||
},
|
||||
];
|
||||
const handleEdit = async (row: API.CategoryDO) => {
|
||||
setType('update');
|
||||
setType("update");
|
||||
row.categoryId && setId(row.categoryId);
|
||||
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 handleSubmit = useCallback(
|
||||
async (values: API.CategoryDO) => {
|
||||
if (type === "create") {
|
||||
await postCategoryCreate(values);
|
||||
} else {
|
||||
await putCategoryUpdate({
|
||||
...values,
|
||||
categoryId: id,
|
||||
});
|
||||
}
|
||||
tableRef.current?.reload();
|
||||
return true;
|
||||
},
|
||||
|
||||
[id, type]
|
||||
);
|
||||
|
||||
const actionColumns: ProColumns<API.CategoryDO> = {
|
||||
title: '操作',
|
||||
dataIndex: 'option',
|
||||
valueType: 'option',
|
||||
fixed: 'right',
|
||||
title: "操作",
|
||||
dataIndex: "option",
|
||||
valueType: "option",
|
||||
fixed: "right",
|
||||
width: 120,
|
||||
render: (_text: React.ReactNode, record: API.CategoryDO, _: number) => [
|
||||
<a key="edit" onClick={() => handleEdit(record)}>
|
||||
@@ -96,34 +110,42 @@ const ProdCategory = () => {
|
||||
// width="50vw"
|
||||
columns={formColumns({ grade: Number(grade), type })}
|
||||
onSubmit={handleSubmit}
|
||||
footer={undefined}
|
||||
bodyStyle={{}}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const items: TabsProps['items'] = [
|
||||
const items: TabsProps["items"] = [
|
||||
{
|
||||
key: '',
|
||||
label: '全部分类',
|
||||
key: "",
|
||||
label: "全部分类",
|
||||
children: renderChildren(),
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
label: '三级分类',
|
||||
key: "3",
|
||||
label: "三级分类",
|
||||
children: renderChildren(),
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
label: '二级分类',
|
||||
key: "2",
|
||||
label: "二级分类",
|
||||
children: renderChildren(),
|
||||
},
|
||||
{
|
||||
key: '1',
|
||||
label: '一级分类',
|
||||
key: "1",
|
||||
label: "一级分类",
|
||||
children: renderChildren(),
|
||||
},
|
||||
];
|
||||
return <Tabs defaultActiveKey={grade} items={items} onChange={onChange} />;
|
||||
return (
|
||||
<Tabs
|
||||
defaultActiveKey={grade as unknown as string}
|
||||
items={items}
|
||||
onChange={onChange}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProdCategory;
|
||||
|
||||
Reference in New Issue
Block a user