feat: tagEditor

src/pages/prod/category/config.tsx

@@ -0,0 +1,155 @@
+import type {
+  ProColumns,
+  ProFormColumnsType,
+} from '@ant-design/pro-components';
+import dayjs from 'dayjs';
+import TagEditor from '@/components/TagEditor';
+export const baseTenantColumns: ProColumns<API.CategoryDO>[] = [
+  {
+    title: '类目名称',
+    dataIndex: 'categoryName',
+    width: 100,
+  },
+  {
+    title: '类目ID',
+    dataIndex: 'categoryId',
+  },
+  {
+    title: '类目层级',
+    dataIndex: 'grade',
+    hideInSearch: true, // 在搜索表单中隐藏
+  },
+  {
+    title: '父级类目',
+    dataIndex: 'parentName',
+
+    hideInSearch: true, // 在搜索表单中隐藏
+  },
+  {
+    title: '排序权重',
+    dataIndex: 'sort',
+    hideInSearch: true, // 在搜索表单中隐藏
+  },
+  {
+    title: '状态',
+    dataIndex: 'status',
+    valueType: 'switch',
+    hideInSearch: true,
+  },
+  {
+    title: '创建时间',
+    dataIndex: 'createTime',
+    valueType: 'dateRange',
+    hideInSearch: true, // 在搜索表单中隐藏
+    render: (_, record: API.CategoryDO) =>
+      dayjs(record.createTime).format('YYYY-MM-DD HH:mm:ss'),
+  },
+];
+
+export const formColumns = (data: {
+  type: string;
+  grade: number;
+}): ProFormColumnsType[] => [
+  {
+    title: '类目',
+    dataIndex: 'grade',
+    valueType: 'radio',
+    fieldProps: {
+      value: data.grade || 1,
+      options: [
+        { label: '一级类目', value: 1 },
+        { label: '二级类目', value: 2 },
+        { label: '三级类目', value: 3 },
+      ],
+      disabled: data.type === 'create',
+    },
+  },
+  {
+    title: '类目名称',
+    dataIndex: 'username',
+    formItemProps: {
+      rules: [
+        {
+          required: true,
+          message: '请输入用户名',
+        },
+      ],
+    },
+  },
+  {
+    title: '排序权重',
+    dataIndex: 'sort',
+    valueType: 'digit',
+  },
+  {
+    title: '类目描述',
+    dataIndex: 'description',
+    valueType: 'textarea',
+    renderFormItem: () => {
+      return 1;
+    },
+  },
+  {
+    title: '关联父级',
+    dataIndex: 'parentId',
+    valueType: 'select',
+    hideInForm: data.grade - 1 === 0,
+  },
+  {
+    title: '类目icon',
+    dataIndex: 'icon',
+  },
+  {
+    title: '类目标签',
+    dataIndex: 'tages',
+    renderFormItem: () => {
+      return (
+        <TagEditor
+          placeholder="输入标签名称"
+          maxCount={10}
+          tagProps={{
+            color: 'blue',
+          }}
+        />
+      );
+    },
+  },
+  {
+    title: '类目状态',
+    dataIndex: 'status',
+    hideInForm: data.type === 'create',
+  },
+  {
+    title: '类目ID',
+    dataIndex: 'categoryId',
+    hideInForm: data.type === 'create',
+  },
+  {
+    title: '创建时间',
+    dataIndex: 'createTime',
+    valueType: 'dateTime',
+    hideInForm: data.type === 'create',
+  },
+  {
+    title: '创建人',
+    dataIndex: 'creator',
+    hideInForm: data.type === 'create',
+  },
+  {
+    title: '更新时间',
+    dataIndex: 'updateTime',
+    valueType: 'dateTime',
+    hideInForm: data.type === 'create',
+  },
+  {
+    title: '更新人',
+    dataIndex: 'updator',
+    hideInForm: data.type === 'create',
+  },
+];
+
+// {
+//   title: "模板内容",
+//   dataIndex: "content",
+//   valueType: "textarea",
+// },

src/pages/prod/category/index.tsx

@@ -0,0 +1,132 @@
+import { PlusOutlined } from '@ant-design/icons';
+import {
+  type ActionType,
+  type ProColumns,
+  ProCoreActionType,
+} 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]}
+          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;

src/pages/prod/list/index.tsx

@@ -0,0 +1,5 @@
+const ProdList = () => {
+  return <div>ProdList</div>;
+};
+
+export default ProdList;