Browse Source

feat(category): add category table

Lind 4 years ago
parent
commit
448be10de7

+ 6 - 0
config/routes.ts

@@ -93,6 +93,12 @@
         component: './device/Product',
       },
       {
+        path: '/device/category',
+        name: 'category',
+        icon: 'smile',
+        component: './device/Category',
+      },
+      {
         hideInMenu: true,
         path: '/device/product/detail/:id',
         name: 'product-detail',

+ 20 - 6
src/components/BaseCrud/index.tsx

@@ -11,6 +11,8 @@ import type { ISchema } from '@formily/json-schema';
 import { CurdModel } from '@/components/BaseCrud/model';
 import type { ISchemaFieldProps } from '@formily/react/lib/types';
 import type { ModalProps } from 'antd/lib/modal/Modal';
+import type { TablePaginationConfig } from 'antd/lib/table/interface';
+import type { SearchConfig } from '@jetlinks/pro-table/lib/components/Form/FormRender';
 
 export type Option = {
   model: 'edit' | 'preview' | 'add';
@@ -34,6 +36,8 @@ export type Props<T> = {
   modelConfig?: ModalProps;
   request?: (params: any) => Promise<Partial<RequestData<T>>>;
   toolBar?: React.ReactNode[];
+  pagination?: false | TablePaginationConfig;
+  search?: false | SearchConfig;
 };
 
 const BaseCrud = <T extends Record<string, any>>(props: Props<T>) => {
@@ -51,6 +55,8 @@ const BaseCrud = <T extends Record<string, any>>(props: Props<T>) => {
     modelConfig,
     request,
     toolBar,
+    pagination,
+    search,
   } = props;
 
   return (
@@ -64,15 +70,23 @@ const BaseCrud = <T extends Record<string, any>>(props: Props<T>) => {
           type: 'multiple',
         }}
         rowKey="id"
-        search={{
-          labelWidth: 'auto',
-        }}
+        search={
+          search === false
+            ? false
+            : {
+                labelWidth: 'auto',
+              }
+        }
         form={{
           syncToUrl: false,
         }}
-        pagination={{
-          pageSize: 10,
-        }}
+        pagination={
+          pagination === false
+            ? false
+            : {
+                pageSize: 10,
+              }
+        }
         dateFormatter="string"
         headerTitle={title}
         defaultParams={defaultParams}

+ 144 - 0
src/pages/device/Category/index.tsx

@@ -0,0 +1,144 @@
+import { PageContainer } from '@ant-design/pro-layout';
+import Service from '@/pages/device/Category/service';
+import type { ProColumns } from '@jetlinks/pro-table';
+import { EditOutlined, MinusOutlined, PlusOutlined } from '@ant-design/icons';
+import { Tooltip } from 'antd';
+import { useIntl } from '@@/plugin-locale/localeExports';
+import { useRef } from 'react';
+import type { ActionType } from '@jetlinks/pro-table';
+import BaseCrud from '@/components/BaseCrud';
+import type { ISchema } from '@formily/json-schema';
+
+const service = new Service('device/category');
+const Category = () => {
+  const actionRef = useRef<ActionType>();
+
+  const intl = useIntl();
+  const columns: ProColumns<CategoryItem>[] = [
+    {
+      title: '分类ID',
+      align: 'left',
+      width: 200,
+      dataIndex: 'id',
+    },
+    {
+      title: '标识',
+      align: 'left',
+      dataIndex: 'key',
+    },
+    {
+      title: '分类名称',
+      dataIndex: 'name',
+      align: 'center',
+    },
+    {
+      title: '说明',
+      dataIndex: 'description',
+      width: 300,
+      align: 'center',
+      ellipsis: true,
+    },
+    {
+      title: '操作',
+      valueType: 'option',
+      align: 'center',
+      render: (text, record) => [
+        <a
+          onClick={() => {
+            console.log(record);
+          }}
+        >
+          <Tooltip
+            title={intl.formatMessage({
+              id: 'pages.data.option.edit',
+              defaultMessage: '编辑',
+            })}
+          >
+            <EditOutlined />
+          </Tooltip>
+        </a>,
+        <a onClick={() => {}}>
+          <Tooltip title="添加子分类">
+            <PlusOutlined />
+          </Tooltip>
+        </a>,
+        <a>
+          <Tooltip
+            title={intl.formatMessage({
+              id: 'pages.data.option.remove',
+              defaultMessage: '删除',
+            })}
+          >
+            <MinusOutlined />
+          </Tooltip>
+        </a>,
+      ],
+    },
+  ];
+
+  const schema: ISchema = {
+    type: 'object',
+    properties: {
+      id: {
+        title: 'ID',
+        'x-decorator': 'FormItem',
+        'x-component': 'Input',
+        required: true,
+        name: 'id',
+      },
+      name: {
+        title: '名称',
+        'x-decorator': 'FormItem',
+        'x-component': 'Input',
+        required: true,
+        name: 'name',
+      },
+      key: {
+        title: '标识',
+        'x-decorator': 'FormItem',
+        'x-component': 'Input',
+        required: true,
+        name: 'name',
+      },
+      description: {
+        type: 'string',
+        title: '描述信息',
+        'x-decorator': 'FormItem',
+        'x-component': 'Input.TextArea',
+        'x-component-props': {
+          rows: 3,
+        },
+        name: 'description',
+      },
+    },
+  };
+
+  return (
+    <PageContainer>
+      <BaseCrud
+        request={async () => {
+          const response = await service.queryTree();
+          return {
+            code: response.message,
+            result: {
+              data: response.result as CategoryItem[],
+              pageIndex: 0,
+              pageSize: 0,
+              total: 0,
+            },
+            status: response.status,
+          };
+        }}
+        search={false}
+        pagination={false}
+        columns={columns}
+        service={service}
+        title="产品分类"
+        schema={schema}
+        actionRef={actionRef}
+      />
+    </PageContainer>
+  );
+};
+
+export default Category;

+ 9 - 0
src/pages/device/Category/service.ts

@@ -0,0 +1,9 @@
+import BaseService from '@/utils/BaseService';
+import { request } from '@@/plugin-request/request';
+
+class Service extends BaseService<CategoryItem> {
+  queryTree = (params?: Record<string, any>) =>
+    request(`${this.uri}/_tree`, { params, method: 'GET' });
+}
+
+export default Service;

+ 10 - 0
src/pages/device/Category/typings.d.ts

@@ -0,0 +1,10 @@
+type CategoryItem = {
+  id: string;
+  name: string;
+  level: number;
+  key: string;
+  parentId: string;
+  path: string;
+  sortIndex: number;
+  children?: Category[];
+};