React + TypeScript + antd 常见开发场景

时间戳转格式

// 获取当前时间戳（示例）
const timestamp = Date.now(); // 或者使用特定的时间戳值

// 创建一个新的Date对象，并传入时间戳
const date = new Date(timestamp);

// 获取年、月、日的值
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要+1，然后使用padStart方法补零
const day = String(date.getDate()).padStart(2, '0'); // 使用padStart方法补零

// 将年、月、日拼接为所需的日期格式
const formattedDate = `${year}-${month}-${day}`;

console.log(formattedDate); // 输出：2018-09-12


===========================================================方法二

const dateString = "Fri Aug 25 2023 14:10:13 GMT+0800 (中国标准时间)";
const regex = /\w{3} (\w{3} \d{2} \d{4}).*/; // 匹配并提取日期部分

const match = dateString.match(regex);
const formattedDate = match ? match[1] : "";

console.log(formattedDate); // 输出：2023-08-25

禁用的表单

import { Button, Form, Input } from "antd";
import React, { useEffect, useRef } from "react";
const { TextArea } = Input;
const FormPage = () => {
  const formRef = useRef<any>(null);

  const data = [
    {
      id: 1,
      num: 10991,
      name: "黑色耳机",
      commodityType: "RJ",
      text: "如果它们不相关，那么存在多个 state 变量是一个好主意，例如本例中的 index 和 showMore。但是，如果你发现经常同时更改两个 state 变量，那么最好将它们合并为一个。",
      textDate: "2023-10-01 10:36:03",
    },
  ];
  // 方法一
  //   useEffect(() => {
  //     formRef.current?.setFieldsValue(data[0]);
  //   }, []);

  return (
    <div className="box">
      <div>
        {/* 方法二 */}
        <Button onClick={() => formRef.current?.setFieldsValue(data[0])}>
          填入内容
        </Button>
      </div>
      <Form
        ref={formRef}
        disabled
        name="basic"
        labelCol={{ span: 3 }}
        wrapperCol={{ span: 16 }}
      >
        <Form.Item label="物品号码" name="num">
          <Input />
        </Form.Item>
        <Form.Item label="物品名称" name="name">
          <Input />
        </Form.Item>
        <Form.Item label="物品名称（类型）" name="commodityType">
          <Input />
        </Form.Item>
        <Form.Item label="物品详细概述" name="text">
          <TextArea />
        </Form.Item>
        <Form.Item label="物品录入时间" name="textDate">
          <TextArea />
        </Form.Item>
      </Form>
    </div>
  );
};

export default FormPage;

删除多选表格

import React, { useState } from "react";
import { Button, Table, message } from "antd";
import type { ColumnsType } from "antd/es/table";

// 可选择删除列表

interface DataType {
  key: React.Key;
  name: string;
  age: number;
  address: string;
}

const columns: ColumnsType<DataType> = [
  {
    title: "Name",
    dataIndex: "name",
  },
  {
    title: "Age",
    dataIndex: "age",
  },
  {
    title: "Address",
    dataIndex: "address",
  },
  {
    title: "Controls",
    dataIndex: "Controls",
    render: () => <Button>显示</Button>,
  },
];

// for (let i = 6; i < 46; i++) {
//   data.push({
//     key: i,
//     name: `Edward King ${i}`,
//     age: 32,
//     address: `London, Park Lane no. ${i}`,
//   });
// }

const TablePage: React.FC = () => {
  /* 
    selectedRowKeys	指定选中项的 key 数组，需要和 onChange 进行配合
    在此处，通过 rowSelection.selectedRowKeys 来控制选中项。
    */
  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
  // loading 页面是否加载中
  const [loading, setLoading] = useState(false);

  const [data, setData] = useState([
    { key: "t", name: "唐诗", age: 18, address: "唐朝" },
    { key: "s", name: "宋词", age: 18, address: "宋朝" },
    { key: "y", name: "元曲", age: 18, address: "元朝" },
    { key: "m", name: "明文", age: 18, address: "明朝" },
    { key: "q", name: "清小说", age: 18, address: "清朝" },
  ]);

  // 点击了清空
  const start = () => {
    setLoading(true);
    // ajax request after empty completing
    setTimeout(() => {
      setSelectedRowKeys([]);
      setLoading(false);
    }, 1000);
  };

  // onSelectChange 触发了选择改变
  const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
    console.log("selectedRowKeys changed: ", newSelectedRowKeys);
    setSelectedRowKeys(newSelectedRowKeys);
  };

  // 开启可选则按钮
  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
  };

  //禁用
  const hasSelected = selectedRowKeys.length > 0;

  // 删除
  const deleteList = () => {
    console.log(selectedRowKeys);
    const dataVale = data.filter((item) => !selectedRowKeys.includes(item.key));
    setData(dataVale);
    console.log(dataVale);
    // 提示框
    message.success("删除成功！");
  };
  return (
    <div>
      <div style={{ marginBottom: 16 }}>
        <Button
          type="primary"
          onClick={start}
          disabled={!hasSelected}
          loading={loading}
        >
          清空
        </Button>{" "}
        &nbsp;
        <Button onClick={deleteList}>删除</Button>
        <span style={{ marginLeft: 8 }}>
          {hasSelected ? `你选择了 ${selectedRowKeys.length} 个 ` : ""}
        </span>
      </div>
      {/* 
      rowSelection :表格行是否可选择，配置项
      columns	表格列的配置描述
      dataSource	数据数组
      */}
      <Table rowSelection={rowSelection} columns={columns} dataSource={data} />
    </div>
  );
};

export default TablePage;

文字内容

import Button from "antd/lib/button";
import "./index.css";
import { ShareAltOutlined } from "@ant-design/icons";
const TextContent = () => {
  return (
    <div className="box">
      <div className="textContent">
        <p>1. 当一个组件需要在多次渲染间“记住”某些信息时使用 state 变量。 </p>
        <p>2. Hook 是以 `use` 开头的特殊函数。它们能让你 “hook” 到像 state 这样的 React 特性中。</p>
      </div>
      <br />
      <div>
        <Button type="primary">
          提交表单校验 <ShareAltOutlined />
        </Button>
      </div>
    </div>
  );
};

export default TextContent;
================================================css
.textContent {
  border: solid 1px #c9c9c9;
  background-color: #f7f8fa;
  padding: 10px;
  width: 680px;
}

.textContent p {
  margin: 0;
  padding: 0;
  color: #636364;
}

.textContent p:first-child {
  /* 样式规则 */
  margin: 0 0 10px 0;
}

筛选对象

const filteredData = Object.fromEntries(
  Object.entries(dataList).filter(([key, value]) => value !== undefined)
);

======================add
specificationModel/create

1.  dataLength: 32
1.  goodsSpecificationModel: "2|1|34|wer|we|we|we|we|fg|gf|fgd"
1.  headId: "01H7HWTXWRWJMF6Z30BG556H0T"

自封装表格

import "./index.css";
import React from "react";
import { Switch } from "antd";
import { useState } from "react";

const TableModule = () => {
  const data: any = [
    {
      materialNo: "asfcas21345r1c",
      goodsName: "红茶",
      codeTs: 11012,
      antd: "109",
    },
    {
      materialNo: "asfcas21345r1c",
      goodsName: "鼠标垫",
      codeTs: 11013,
      antd: "109",
    },
    {
      materialNo: "asfcas21345r1c",
      goodsName: "楼房",
      codeTs: 11014,
      antd: "109",
    },
  ];

  const table = ["商品料号", "商品名称", "商品编码"];
  //

  const uniqueData: any = [];
  const uniqueValues: any = {};

  for (const obj of data) {
    const values = Object.values(obj).join("-");
    if (!uniqueValues[values]) {
      uniqueValues[values] = true;
      uniqueData.push(obj);
    }
  }
  console.log(36, uniqueData);

  return (
    <div className="box">
      <div className="table-container">
        <div className="header-column">
          {table.map((item, index) => {
            return (
              <div key={index} className="header-row">
                {item}
              </div>
            );
          })}
        </div>
        {data.map((item: any) => {
          return (
            <div className="data-column" key={item.codeTs}>
              <div className="data-row">{item.codeTs}</div>
              <div className="data-row">{item.goodsName}</div>
              <div className="data-row">{item.materialNo}</div>
            </div>
          );
        })}
      </div>
    </div>
  );
};

export default TableModule;
==============================================css

.table-container {
  box-shadow: 0 0 0 1px #b0b0b0;
  display: flex;
}

.header-column,
.data-column {
  border-left: 1px solid #b0b0b0;
  flex: 1;
}

.header-row,
.data-row {
  border-top: 1px solid #b0b0b0;
  padding: 8px;
}
.header-row {
  background-color: #efefef;
}

.header-row:last-child,
.data-row:last-child {
  border-bottom: 1px solid #b0b0b0;
}

模态框

import "./index.css";
import React, { useState } from "react";
import { Button, Checkbox, Form, Input, Modal, Select } from "antd";
import { useEffect } from "react";
import { InfoCircleOutlined } from "@ant-design/icons";

const { Option } = Select;

type FieldType = {
  username?: string;
  password?: string;
  remember?: string;
};

const ModalBox: React.FC = () => {
  const [open, setOpen] = useState(false);
  const [confirmLoading, setConfirmLoading] = useState(false);
  const [specification, setSpecification] = useState<any>("");
  const [form] = Form.useForm();

  //   const [zf, setZf] = useState("");
  //   const [energy, setEnergy] = useState("");
  //   const [dbz, setDbz] = useState("");
  //   const [tshhw, setTshhw] = useState("");
  //   const [tang, setTang] = useState("");
  //   const [na, setNa] = useState("");
  //   const [wss, setWss] = useState("");

  const onFinish = (values: any) => {
    console.log("Success:", values);
  };

  const onFinishFailed = (errorInfo: any) => {
    console.log("Failed:", errorInfo);
  };

  const onChangeEnergy = (value: string) => {
    console.log(value);
  };
  const onChangeWss = (value: string) => {
    console.log(value);
  };
  const onValuesChange = (value: any) => {
    // setZf(value.zf && zf);
    // setEnergy(value.energy && energy);
    // setDbz(value.dbz && dbz);
    // setTshhw(value.tshhw && tshhw);
    // setTang(value.tang && tang);
    // setNa(value.na && na);
    // setWss(value.wss && wss);
    console.log(50, value);
  };
  useEffect(() => {
    const getFormValueData = () => {};
  }, [specification]);

  // 显示模态框
  const showModal = () => {
    setOpen(true);
  };

  // 点击了确定
  const handleOk = () => {
    setConfirmLoading(true);
    setTimeout(() => {
      setOpen(false);
      setConfirmLoading(false);
    }, 1000);
  };

  // 点击了取消
  const handleCancel = () => {
    console.log("Clicked cancel button");
    setOpen(false);
  };

  return (
    <div className="box">
      <Button type="primary" onClick={showModal}>
        添加
      </Button>
      <Modal
        title="申报规范"
        width={"40%"}
        open={open}
        onOk={handleOk}
        confirmLoading={confirmLoading}
        onCancel={handleCancel}
      >
        <div className="modalInputBox">
          <span>商品信息：</span>
          <Input className="modalInput" disabled value="100237-普洱茶" />
        </div>

        <div>
          <br />
          <h3 className="modal-h">规格型号 （根据 LZ 公司规定，需全部填写）</h3>
          <div className="modal-form">
            <Form
              labelCol={{ span: 4 }}
              wrapperCol={{ span: 19 }}
              name="basic"
              initialValues={{ remember: true }}
              // 提交表单且数据验证成功后回调事件
              onFinish={onFinish}
              // 提交表单且数据验证失败后回调事件
              onFinishFailed={onFinishFailed}
              autoComplete="off"
              // 字段值更新时触发回调事件
              //   onValuesChange={onValuesChange}
              layout="horizontal"
              labelWrap
            >
              <Form.Item
                label="能量"
                name="energy"
                rules={[{ required: true, message: "请填写内容" }]}
                tooltip={{
                  title: "补充能量，增强体质",
                  icon: <InfoCircleOutlined />,
                }}
              >
                <Select onChange={onChangeEnergy} allowClear>
                  <Option value="100g">100g</Option>
                  <Option value="500g">500g</Option>
                  <Option value="1000g">1000g</Option>
                </Select>
              </Form.Item>
              <Form.Item
                label="蛋白质"
                name="dbz"
                tooltip="蛋白质"
                rules={[{ required: true, message: "请填写内容" }]}
              >
                <Input />
              </Form.Item>
              <Form.Item
                label="脂肪"
                name="zf"
                rules={[{ required: true, message: "请填写内容" }]}
              >
                <Input />
              </Form.Item>
              <Form.Item
                label="碳水化合物"
                name="tshhw"
                rules={[{ required: true, message: "请填写内容" }]}
              >
                <Input />
              </Form.Item>
              <Form.Item
                label="--糖"
                name="tang"
                rules={[{ required: true, message: "请填写内容" }]}
              >
                <Input />
              </Form.Item>
              <Form.Item
                label="钠"
                name="na"
                rules={[{ required: true, message: "请填写内容" }]}
              >
                <Input />
              </Form.Item>
              <Form.Item
                label="茶多酚柑皮因子"
                name="tang"
                rules={[{ required: true, message: "请填写内容" }]}
              >
                <Input />
              </Form.Item>
              <Form.Item
                label="维生素"
                name="wss"
                rules={[{ required: true, message: "请填写内容" }]}
              >
                <Select onChange={onChangeWss} allowClear>
                  <Option value="维生素 A">维生素 A</Option>
                  <Option value="维生素 B">维生素 B</Option>
                  <Option value="维生素 C">维生素 C</Option>
                </Select>
              </Form.Item>
              <Form.Item
                label="碳酸氢钠"
                name="tsqn"
                rules={[{ required: true, message: "请填写内容" }]}
              >
                <Input />
              </Form.Item>
            </Form>
          </div>
        </div>

        <div className="modalInputBox">
          <br />
          <span>规格型号：</span>
          <Input
            className="modalInput"
            disabled
            // value={
            //   zf +
            //   "|" +
            //   energy +
            //   "|" +
            //   dbz +
            //   "|" +
            //   tshhw +
            //   "|" +
            //   tang +
            //   "|" +
            //   na +
            //   "|" +
            //   wss
            // }
          />
        </div>
      </Modal>
    </div>
  );
};

export default ModalBox;

========================================================css
.modalInputBox {
  margin: 0 0 0 7%;
}
.modalInput {
  width: 80%;
}

.modal-h {
  font-weight: 700;
}

.modal-form {
  width: 100%;
  height: 300px;
  overflow: auto;
  border: solid 1px #e0e0e0;
  padding: 10px;
}

/* 修改滚动条轨道的样式 */
::-webkit-scrollbar {
  width: 10px; /* 设置滚动条的宽度 */
}

/* 修改滚动条的滑块样式 */
::-webkit-scrollbar-thumb {
  background-color: #e0e0e0; /* 设置滚动条滑块的背景色 */
  border-radius: 5px;
}

/* 修改滚动条的滑轨样式 */
::-webkit-scrollbar-track {
  background-color: #f1f1f1; /* 设置滚动条轨道的背景色 */
}

步骤条

import React from "react";
import { Steps } from "antd";
import { CheckCircleFilled } from "@ant-design/icons";
import "./index.css";
import { useState } from "react";

const StepsModule: React.FC = () => {
  const [editState, setEditState] = useState(false);
  return (
    <div className="box">
      <Steps
        direction="vertical"
        current={1}
        size="small"
        items={[
          {
            title: (
              <div
                className="finishedBox"
                onClick={() => setEditState(!editState)}
              >
                <p className="finishedText">
                  <span>审核通过 2023-01-04</span>
                  <span className="finishedSpan"></span>
                  <span>13:14:35</span>
                </p>
                <p
                  className={
                    editState
                      ? "finishedCuntent "
                      : "finishedCuntent finishedNone"
                  }
                >
                  一级审核人员：大河，审核已通过
                </p>
              </div>
            ),
            icon: <CheckCircleFilled />,
          },
          {
            title: (
              <div
                className="finishedBox"
                onClick={() => setEditState(!editState)}
              >
                <p className="finishedText">
                  <span>审核通过 2023-01-04</span>
                  <span className="finishedSpan"></span>
                  <span>13:14:35</span>
                </p>
                <p className="finishedCuntent ">
                  一级审核人员：大河，审核已通过
                </p>
              </div>
            ),
            icon: <CheckCircleFilled />,
          },
          {
            title: (
              <div
                className="finishedBox"
                onClick={() => setEditState(!editState)}
              >
                <p className="finishedText">
                  <span>审核通过 2023-01-04</span>
                  <span className="finishedSpan"></span>
                  <span>13:14:35</span>
                </p>
                <p
                  className={
                    editState
                      ? "finishedCuntent "
                      : "finishedCuntent finishedNone"
                  }
                >
                  一级审核人员：大河，审核已通过
                </p>
              </div>
            ),
            icon: <CheckCircleFilled />,
          },
        ]}
      />
    </div>
  );
};

export default StepsModule;

============================================================css

.finishedBox {
  width: 300px;
  display: flex;
  flex-direction: column;
  padding: 0;
  margin: 0 0 20px 0;
  border: solid 1px #1677ff;
}

.finishedText {
  color: #1677ff;
  font-weight: 500;
  margin: 5px 5px 5px 10px;
}

.finishedSpan {
  width: 60px;
  display: inline-block;
}

.finishedCuntent {
  padding: 0 0 5px 10px;
  margin: 0;
}

.finishedNone {
  display: none;
}

搜索框

import type { ProFormColumnsType } from "@ant-design/pro-components";
import { BetaSchemaForm } from "@ant-design/pro-components";


type DataItem = {
  name: string;
  state: string;
};

const columns: ProFormColumnsType<DataItem>[] = [
  {
    valueType: "dependency",
    name: ["type"],
    columns: ({ type }) => {
      return [
        {
          dataIndex: "discount",
          width: "m",
        },
      ];
    },
  },
];

const MainPage = () => {
  return (
    <>
      <BetaSchemaForm<DataItem>
        layoutType="QueryFilter"
        onFinish={async (values) => {
          console.log(values);
        }}
        columns={columns}
      />
    </>
  );
};

// export default
export default MainPage;

Tree 树

import React, { useMemo, useState } from "react";
import { Input, Tree } from "antd";
import type { DataNode } from "antd/es/tree";
import "./index.css";

const { Search } = Input;

const defaultData: DataNode[] = [
  {
    key: "adult",
    title: "成年人",
    children: [
      {
        key: "man",
        title: "男人",
        children: [
          {
            key: "father",
            title: "父亲",
          },
        ],
      },
      {
        key: "woman",
        title: "女人",
        children: [
          {
            key: "mother",
            title: "母亲",
          },
        ],
      },
    ],
  },
  {
    key: "juveniles",
    title: "未成年人",
    children: [
      {
        key: "boy",
        title: "男孩",
        children: [
          {
            key: "son",
            title: "儿子",
          },
        ],
      },
      {
        key: "girl",
        title: "女孩",
        children: [
          {
            key: "daughter",
            title: "女儿",
          },
        ],
      },
    ],
  },
];

const dataList: { key: React.Key; title: string }[] = [];
const generateList = (data: DataNode[]) => {
  for (let i = 0; i < data.length; i++) {
    const node = data[i];
    const { key } = node;
    dataList.push({ key, title: key as string });
    if (node.children) {
      generateList(node.children);
    }
  }
};
generateList(defaultData);

const getParentKey = (key: React.Key, tree: DataNode[]): React.Key => {
  let parentKey: React.Key;
  for (let i = 0; i < tree.length; i++) {
    const node = tree[i];
    if (node.children) {
      if (node.children.some((item) => item.key === key)) {
        parentKey = node.key;
      } else if (getParentKey(key, node.children)) {
        parentKey = getParentKey(key, node.children);
      }
    }
  }
  return parentKey!;
};

const TestPage: React.FC = () => {
  const [expandedKeys, setExpandedKeys] = useState<React.Key[]>([]);
  const [searchValue, setSearchValue] = useState("");
  const [autoExpandParent, setAutoExpandParent] = useState(true);
  // 展开/收起节点时触发
  const onExpand = (newExpandedKeys: React.Key[]) => {
    setExpandedKeys(newExpandedKeys);
    setAutoExpandParent(false);
  };
  //   const onChangeClict = (e) => {
  //     console.log("触发搜索");
  //     onChange(e);
  //   };

  // 触发搜索
  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { value } = e.target;
    const newExpandedKeys = dataList
      .map((item) => {
        if (item.title.indexOf(value) > -1) {
          return getParentKey(item.key, defaultData);
        }
        return null;
      })
      .filter((item, i, self) => item && self.indexOf(item) === i);
    setExpandedKeys(newExpandedKeys as React.Key[]);
    setSearchValue(value);
    setAutoExpandParent(true);
  };

  // 数据
  const treeDataList = useMemo(() => {
    const loop = (data: DataNode[]): DataNode[] =>
      data.map((item) => {
        const strTitle = item.title as string;
        const index = strTitle.indexOf(searchValue);
        const beforeStr = strTitle.substring(0, index);
        const afterStr = strTitle.slice(index + searchValue.length);
        const title =
          index > -1 ? (
            <span>
              {beforeStr}
              <span className="site-tree-search-value">{searchValue}</span>
              {afterStr}
            </span>
          ) : (
            <span>{strTitle}</span>
          );
        if (item.children) {
          return { title, key: item.key, children: loop(item.children) };
        }

        return {
          title,
          key: item.key,
        };
      });

    return loop(defaultData);
  }, [searchValue]);

  return (
    <div>
      <Search
        style={{ marginBottom: 8 }}
        placeholder="搜索"
        onChange={onChange}
      />
      {/* 
      expandedKeys	（受控）展开指定的树节点
      onExpand   展开/收起节点时触发
      autoExpandParent	是否自动展开父节点 
      */}
      <Tree
        onExpand={onExpand}
        expandedKeys={expandedKeys}
        autoExpandParent={autoExpandParent}
        treeData={treeDataList}
      />
    </div>
  );
};

export default TestPage;

封装axios

// 封装axios
import axios from 'axios'

const instance = axios.create({
  baseURL: 'http://geek.itheima.net/v1_0/',
  timeout: 5000
})

// 添加请求拦截器
instance.interceptors.request.use(
  function (config) {
    // 在发送请求之前做些什么
    return config
  },
  function (error) {
    // 对请求错误做些什么
    return Promise.reject(error)
  }
)

// 添加响应拦截器
instance.interceptors.response.use(
  function (response) {
    // 对响应数据做点什么
    return response
  },
  function (error) {
    // 对响应错误做点什么
    return Promise.reject(error)
  }
)

export default instance

CSS滚动样式

/* 设置滚动条的整体样式 */
::-webkit-scrollbar {
  width: 10px; /* 滚动条的宽度 */
  height: 8px;

  background-color: #f2f2f2; /* 滚动条的背景颜色 */
}

/* 设置滚动条的滑块样式 */
::-webkit-scrollbar-thumb {
  margin: 4px 0;
  background-color: #d9dadc; /* 滑块的颜色 */
  border-radius: 5px; /* 滑块的圆角 */
}

/* 设置滚动条鼠标悬停时滑块的样式 */
::-webkit-scrollbar-thumb:hover {
  background-color: #9a9a9a; /* 鼠标悬停时滑块的颜色 */
  box-shadow: 2px 2px 5px;
}

/* 设置滚动条轨道样式 */
::-webkit-scrollbar-track {
  background-color: #ebebeb; /* 轨道的背景颜色 */
}

Tree

import "./index.css";
import {
  CarryOutOutlined,
  CaretDownOutlined,
  FormOutlined,
  CheckOutlined,
} from "@ant-design/icons";
import { Select, Switch, Tree } from "antd";
import { useState } from "react";

const treeData = [
  {
    title: "parent 1",
    key: "0-0",
    icon: <CarryOutOutlined />,
    children: [
      {
        title: "parent 1-0",
        key: "0-0-0",
        icon: <CarryOutOutlined />,
        children: [
          {
            title: "leaf",
            key: "0-0-0-0",
            icon: <CarryOutOutlined />,
          },
          {
            title: (
              <>
                <div>multiple line title</div>
                <div>multiple line title</div>
              </>
            ),
            key: "0-0-0-1",
            icon: <CarryOutOutlined />,
          },
          {
            title: "leaf",
            key: "0-0-0-2",
            icon: <CarryOutOutlined />,
          },
        ],
      },
      {
        title: "parent 1-1",
        key: "0-0-1",
        icon: <CarryOutOutlined />,
        children: [
          {
            title: "leaf",
            key: "0-0-1-0",
            icon: <CarryOutOutlined />,
          },
        ],
      },
      {
        title: "parent 1-2",
        key: "0-0-2",
        icon: <CarryOutOutlined />,
        children: [
          {
            title: "leaf",
            key: "0-0-2-0",
            icon: <CarryOutOutlined />,
          },
          {
            title: "leaf",
            key: "0-0-2-1",
            icon: <CarryOutOutlined />,
            switcherIcon: <FormOutlined />,
          },
        ],
      },
    ],
  },
  {
    title: "parent 2",
    key: "0-1",
    icon: <CarryOutOutlined />,
    children: [
      {
        title: "parent 2-0",
        key: "0-1-0",
        icon: <CarryOutOutlined />,
        children: [
          {
            title: "leaf",
            key: "0-1-0-0",
            icon: <CarryOutOutlined />,
          },
          {
            title: "leaf",
            key: "0-1-0-1",
            icon: <CarryOutOutlined />,
          },
        ],
      },
    ],
  },
];

const Treemodule = () => {
  return (
    <div className="box-tree ">
      <Tree
        showLine={<CheckOutlined />}
        defaultExpandedKeys={["0-0"]}
        switcherIcon={<CaretDownOutlined />}
        treeData={treeData}
      />
    </div>
  );
};

export default Treemodule;

Form

import React from "react";
import "./index.css";
import { Button, Form, Input, Select, Row, Col } from "antd";
import type { FormInstance } from "antd/es/form";

const { Option } = Select;

const itemLayout = {
  labelCol: {
    span: 5,
  },
  wrapperCol: {
    span: 19,
  },
};

const FromE = () => {
  const formRef = React.useRef<FormInstance>(null);

  const onGenderChange = (value: string) => {
    switch (value) {
      case "male":
        formRef.current?.setFieldsValue({
          note: 1111,
          num: 1001,
          computeNum: "只",
        });
        break;
      case "female":
        formRef.current?.setFieldsValue({ note: 2222 });
        break;
      case "other":
        formRef.current?.setFieldsValue({ note: 3333 });
        break;
      default:
        break;
    }
  };

  const onFinish = (values: any) => {
    console.log(values);
  };

  return (
    <div className="from-box">
      <Form
        ref={formRef}
        name="search-form"
        initialValues={{}}
        onFinish={onFinish}
        layout="inline"
        labelWrap
      >
        <Row>
          <Col span={8}>
            <Form.Item
              className="inline-form-item"
              label="标签1342312312312323"
            >
              <input className="inline-input" />
            </Form.Item>
          </Col>
          <Col span={8}>
            <Form.Item
              className="inline-form-item"
              label="标签1342312312312323"
            >
              <input className="inline-input" />
            </Form.Item>
          </Col>
          <Col span={8}>
            <Form.Item className="inline-form-item" label="标2312312323">
              <input className="inline-input" />
            </Form.Item>
          </Col>
          <Col span={8}>
            <Form.Item className="inline-form-item" label="标签13">
              <input className="inline-input" />
            </Form.Item>
          </Col>
          <Col span={8}>
            <Form.Item className="inline-form-item" label="标312312312323">
              <input className="inline-input" />
            </Form.Item>
          </Col>
          <Col span={8}>
            <Form.Item className="inline-form-item" label="标2323">
              <input className="inline-input" />
            </Form.Item>
          </Col>
        </Row>
      </Form>
    </div>
  );
};

export default FromE;

简单 Form

import { Button, Form, Input, Col, Row } from "antd";
import { useRef } from "react";
import "./index.css";
// const { Option } = Select;

const FormC = () => {
  //------------------------------------------data
  const [form] = Form.useForm();
  const formRef = useRef();
  const itemLayout = {
    labelCol: {
      span: 5,
    },
    wrapperCol: {
      span: 19,
    },
  };
  //------------------------------------------function
  const onFinish = (values) => {
    console.log("Success:", values);
  };
  const onReset = () => {
    form.resetFields();
  };
  //------------------------------------------html
  return (
    <Form
      form={form}
      ref={formRef}
      name="search-form"
      initialValues={{}}
      onFinish={onFinish}
    >
      <Row>
        <Col span={6}>
          <Form.Item name="productId" label="产品ID" {...itemLayout}>
            <Input />
          </Form.Item>
        </Col>
        <Col span={6}>
          <Form.Item name="productName" label="产品名称" {...itemLayout}>
            <Input />
          </Form.Item>
        </Col>
        <Col span={6}>
          <Form.Item name="industry" label="所属品类" {...itemLayout}>
            <Input />
          </Form.Item>
        </Col>
        <Col span={6}>
          <Form.Item name="eqType" label="设备类型" {...itemLayout}>
            <Input />
          </Form.Item>
        </Col>
        <Col span={6}>
          <Form.Item name="agreeType" label="协议类型21313231" {...itemLayout}>
            <Input />
          </Form.Item>
        </Col>
        <Col span={6}>
          <Form.Item name="creatTime" label="创建时间" {...itemLayout}>
            <Input />
          </Form.Item>
        </Col>
        <Col span={6}>
          <Form.Item {...itemLayout}>
            <Button type="primary" htmlType="submit">
              查询
            </Button>
            <Button htmlType="button" onClick={onReset}>
              重置
            </Button>
          </Form.Item>
        </Col>
      </Row>
    </Form>
  );
};

export default FormC;

表格

import { Table, Button } from "antd";
import "./index.css";
import {
  useState,
  forwardRef,
  useImperativeHandle,
  useRef,
  createContext,
} from "react";
import { titleData, mokeData } from "../../moke/index";
import Form from "../form";

export const ThemeContext = createContext(null);

const Tabulation = forwardRef(({ newValue }, ref) => {
  const [newMokeData, setNewMokeData] = useState(mokeData);
  const [ControlsNewValue, setControlsNewValue] = useState();
  const [echoData, setEchoData] = useState({
    ciqName: "种用大麦",
    ciqType: "D/M",
    codeTs: "1003100000",
  });
  const columns = [
    {
      title: titleData[0],
      key: "1",
      dataIndex: "key",
      rowScope: "row",
      width: 100,
    },
    {
      title: titleData[1],
      dataIndex: "ciqCode",
      key: "2",
      width: 200,
    },
    {
      title: titleData[2],
      dataIndex: "ciqName",
      key: "3",
      width: 200,
    },
    {
      title: titleData[3],
      dataIndex: "ciqType",
      key: "4",
      width: 200,
    },
    {
      title: titleData[4],
      dataIndex: "codeTs",
      key: "5",
      width: 200,
    },
    {
      title: titleData[5],
      dataIndex: "commRate",
      key: "6",
      width: 200,
    },
    {
      title: titleData[6],
      dataIndex: "createTime",
      key: "7",
      width: 200,
    },
    {
      title: titleData[7],
      dataIndex: "createUserId",
      key: "8",
      width: 300,
    },
    {
      title: titleData[8],
      dataIndex: "createUserId",
      key: titleData[8].length + 1,
      width: 300,
    },
    {
      title: titleData[9],
      dataIndex: "dclUnit",
      key: titleData[9].length + 1,
      width: 200,
    },
    {
      title: titleData[10],
      dataIndex: "deleted",
      key: titleData[10].length + 1,
      width: 200,
    },
    {
      title: titleData[10],
      dataIndex: "deleted",
      key: titleData[10].length + 1,
      width: 200,
    },
    {
      title: titleData[10],
      dataIndex: "deleted",
      key: titleData[10].length + 1,
      width: 200,
    },
    {
      title: "操作列",
      key: "operation",
      fixed: "right",
      width: 250,
      render: (id) => (
        <div>
          <Button onClick={() => viewData(id)}>查看</Button>&nbsp;&nbsp;
          <Button>修改</Button>&nbsp;&nbsp;
          <Button type="primary">更多</Button>
        </div>
      ),
    },
  ];

  const viewData = (id) => {
    setEchoData(id);
    formRef.current.showModal();
    console.log("ck", id, echoData);
  };

  const editMokeData = () => {
    setControlsNewValue({
      id: 1,
      key: Date.now(),
      ...newValue,
      codeTs: "1003100000",
      commRate: "null",
      createTime: 1690334576223,
      createUserId: "01H321BXCVNJMK38KE3BJ29EKE",
      createUserName: "张三",
      dclUnit: "002",
      deleted: 0,
      firstUnit: "1009",
      goodsModel:
        "0:品牌类型|1:出口享惠情况|2:是否改良种用|3:品种|4:GTIN|5:CAS|6:其他",
      goodsName: "种用大麦",
    });
    console.log(newValue);

    setNewMokeData([...newMokeData, ControlsNewValue]);
  };

  useImperativeHandle(ref, () => ({
    editMokeData,
  }));

  const formRef = useRef(null);
  return (
    <ThemeContext.Provider value={echoData}>
      <div className="box">
        <Table
          columns={columns}
          dataSource={newMokeData}
          scroll={{
            x: 1300,
            y: 200,
          }}
        />
        <Form ref={formRef}></Form>
      </div>
    </ThemeContext.Provider>
  );
});

export default Tabulation;

Button

import type { MenuProps } from "antd";
import { Button, Dropdown } from "antd";
import "./index.css";

const items: MenuProps["items"] = [
  {
    key: "1",
    label: (
      <a
        target="_blank"
        rel="noopener noreferrer"
        href="https://www.antgroup.com"
      >
        <div className="but">删除</div>
      </a>
    ),
  },
  {
    key: "2",
    label: (
      <a
        target="_blank"
        rel="noopener noreferrer"
        href="https://www.aliyun.com"
      >
        <div className="but">变更</div>
      </a>
    ),
  },
];

const ButtonModule = () => {
  return (
    <div>
      <Button>查看</Button>
      &nbsp;
      <Button>修改</Button>
      &nbsp;
      <Dropdown menu={{ items }} trigger={["click"]} placement="bottomRight">
        <Button type="primary">更多</Button>
      </Dropdown>
      &nbsp;
    </div>
  );
};

export default ButtonModule;