fix(compiler): 新增栏目页面

src/pages/cms/ColumnList/index.tsx

@@ -0,0 +1,209 @@
+import React, { useEffect, useState } from 'react';
+import { PageContainer } from '@ant-design/pro-components';
+import { Button, Card, Form, Input, Modal, Space, Table } from 'antd';
+import { PlusCircleOutlined, ReloadOutlined, SearchOutlined } from '@ant-design/icons';
+import type { ColumnsType } from 'antd/es/table';
+import moment from 'moment';
+import { queryColumn } from '@/services/cms/ColumnList';
+
+interface DataType {
+  name: string;
+  record_id: string;
+}
+
+/**
+ * 栏目列表
+ * @constructor
+ */
+const ColumnList: React.FC = () => {
+  const [form] = Form.useForm();
+  const [loading, setLoading] = useState(false);
+  const [searchData, setSearchData] = useState<object | null>({});
+  const [visible, setVisible] = useState(false);
+  const [editData, setEditData] = useState(null);
+  const [pagination, setPagination] = useState({ total: 0, current: 1, pageSize: 10 });
+  const [dataList, setDataList]: any = useState([]);
+
+  // 获取列表数据
+  const getList = () => {
+    const params = {
+      q: 'page',
+      current: pagination.current,
+      pageSize: pagination.pageSize,
+      ...searchData,
+    };
+    queryColumn(params).then((res) => {
+      console.log('res----', res, visible, editData);
+      setDataList([]);
+      setPagination({ total: 0, current: 1, pageSize: 10 });
+    });
+  };
+
+  useEffect(() => {
+    getList();
+  }, []);
+
+  //  搜索
+  const onFinish = () => {
+    form.validateFields().then((data) => {
+      setLoading(true);
+      setSearchData(data);
+    });
+  };
+  //  重置
+  const onReset = () => {
+    form.resetFields();
+    setLoading(true);
+    setSearchData(null);
+  };
+  // 新增弹框
+  const onAdd = () => {
+    setEditData(null);
+    setVisible(true);
+  };
+  // 打开编辑弹框
+  const toEdit = (data: any) => {
+    setEditData(data);
+    setVisible(true);
+  };
+  //  分页切换
+  const tableChange = (page: any) => {
+    // setLoading(true);
+    const param = {
+      q: 'page',
+      current: page.current,
+      pageSize: page.pageSize,
+      ...searchData,
+    };
+    console.log(param);
+  };
+  // 删除
+  const toDel = (record: any) => {
+    Modal.confirm({
+      title: '删除',
+      content: `确认删除项目：[${record.name}]`,
+      onOk: () => {
+        console.log('删除项目');
+      },
+    });
+    console.log(record);
+  };
+  // 编辑弹框回调
+  // const handleEdit = () => {
+  //   setVisible(false);
+  // };
+  const columns: ColumnsType<DataType> = [
+    {
+      title: '序号',
+      align: 'center',
+      key: 'index',
+      render: (_: any, row: any, index: number) => index + 1,
+    },
+    {
+      title: '栏目名称',
+      dataIndex: 'name',
+      key: 'name',
+    },
+    {
+      title: '编号',
+      dataIndex: 'code',
+      key: 'code',
+    },
+    {
+      title: '上级栏目名称',
+      dataIndex: 'parent_name',
+      key: 'parent_name',
+    },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      key: 'status',
+    },
+    {
+      title: '创建者',
+      dataIndex: 'creator',
+      key: 'creator',
+    },
+    {
+      title: '创建时间',
+      dataIndex: 'create_at',
+      key: 'create_at',
+      render: (v) => v && <span>{moment(v).format('YYYY-MM-DD HH:mm')}</span>,
+    },
+    {
+      title: '备注',
+      dataIndex: 'memo',
+      key: 'memo',
+    },
+    {
+      title: '操作',
+      key: 'action',
+      render: (_, record) => (
+        <Space size="middle">
+          <a
+            onClick={() => {
+              toEdit(record);
+            }}
+          >
+            编辑
+          </a>
+          <a
+            style={{ color: 'red' }}
+            onClick={() => {
+              toDel(record);
+            }}
+          >
+            删除
+          </a>
+        </Space>
+      ),
+    },
+  ];
+  const paginationProps = {
+    showSizeChanger: true,
+    showQuickJumper: true,
+    showTotal: (total: number) => {
+      return <span> 共 {total}条 </span>;
+    },
+    ...pagination,
+  };
+  return (
+    <PageContainer>
+      <div>
+        <Card>
+          <Form form={form} layout="inline" onFinish={onFinish}>
+            <Form.Item name="name" label="栏目名称">
+              <Input placeholder="请输入栏目名称" />
+            </Form.Item>
+            <Form.Item style={{ marginBottom: '10px' }}>
+              <Space>
+                <Button type="primary" htmlType="submit">
+                  <SearchOutlined />
+                  查询
+                </Button>
+                <Button htmlType="button" onClick={onReset}>
+                  <ReloadOutlined />
+                  重置
+                </Button>
+              </Space>
+            </Form.Item>
+          </Form>
+          <Button htmlType="button" type="primary" style={{ margin: '20px 0' }} onClick={onAdd}>
+            <PlusCircleOutlined />
+            新增栏目
+          </Button>
+          <Table
+            columns={columns}
+            dataSource={dataList}
+            rowKey={(record) => record.record_id}
+            pagination={paginationProps}
+            loading={loading}
+            onChange={tableChange}
+          />
+          {/*{visible && <Edit visible={visible} editCallback={handleEdit} params={editData} />}*/}
+        </Card>
+      </div>
+    </PageContainer>
+  );
+};
+export default ColumnList;

src/services/cms/ColumnList.ts

@@ -0,0 +1,10 @@
+import { request } from 'umi';
+import { stringify } from 'qs';
+
+/**
+ * 栏目列表数据查询
+ * @param param
+ */
+export async function queryColumn(param: object) {
+  return request(`web/v1/columns?${stringify(param)}`);
+}