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><Formref={formRef}disabledname="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 completingsetTimeout(() => {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 }}><Buttontype="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/create1.  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><Modaltitle="申报规范"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"><FormlabelCol={{ span: 4 }}wrapperCol={{ span: 19 }}name="basic"initialValues={{ remember: true }}// 提交表单且数据验证成功后回调事件onFinish={onFinish}// 提交表单且数据验证失败后回调事件onFinishFailed={onFinishFailed}autoComplete="off"// 字段值更新时触发回调事件//   onValuesChange={onValuesChange}layout="horizontal"labelWrap><Form.Itemlabel="能量"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.Itemlabel="蛋白质"name="dbz"tooltip="蛋白质"rules={[{ required: true, message: "请填写内容" }]}><Input /></Form.Item><Form.Itemlabel="脂肪"name="zf"rules={[{ required: true, message: "请填写内容" }]}><Input /></Form.Item><Form.Itemlabel="碳水化合物"name="tshhw"rules={[{ required: true, message: "请填写内容" }]}><Input /></Form.Item><Form.Itemlabel="--糖"name="tang"rules={[{ required: true, message: "请填写内容" }]}><Input /></Form.Item><Form.Itemlabel="钠"name="na"rules={[{ required: true, message: "请填写内容" }]}><Input /></Form.Item><Form.Itemlabel="茶多酚柑皮因子"name="tang"rules={[{ required: true, message: "请填写内容" }]}><Input /></Form.Item><Form.Itemlabel="维生素"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.Itemlabel="碳酸氢钠"name="tsqn"rules={[{ required: true, message: "请填写内容" }]}><Input /></Form.Item></Form></div></div><div className="modalInputBox"><br /><span>规格型号：</span><InputclassName="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"><Stepsdirection="vertical"current={1}size="small"items={[{title: (<divclassName="finishedBox"onClick={() => setEditState(!editState)}><p className="finishedText"><span>审核通过 2023-01-04</span><span className="finishedSpan"></span><span>13:14:35</span></p><pclassName={editState? "finishedCuntent ": "finishedCuntent finishedNone"}>一级审核人员：大河，审核已通过</p></div>),icon: <CheckCircleFilled />,},{title: (<divclassName="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: (<divclassName="finishedBox"onClick={() => setEditState(!editState)}><p className="finishedText"><span>审核通过 2023-01-04</span><span className="finishedSpan"></span><span>13:14:35</span></p><pclassName={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><Searchstyle={{ marginBottom: 8 }}placeholder="搜索"onChange={onChange}/>{/* expandedKeys	（受控）展开指定的树节点onExpand   展开/收起节点时触发autoExpandParent	是否自动展开父节点 */}<TreeonExpand={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 "><TreeshowLine={<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"><Formref={formRef}name="search-form"initialValues={{}}onFinish={onFinish}layout="inline"labelWrap><Row><Col span={8}><Form.ItemclassName="inline-form-item"label="标签1342312312312323"><input className="inline-input" /></Form.Item></Col><Col span={8}><Form.ItemclassName="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 = () => {//------------------------------------------dataconst [form] = Form.useForm();const formRef = useRef();const itemLayout = {labelCol: {span: 5,},wrapperCol: {span: 19,},};//------------------------------------------functionconst onFinish = (values) => {console.log("Success:", values);};const onReset = () => {form.resetFields();};//------------------------------------------htmlreturn (<Formform={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"><Tablecolumns={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: (<atarget="_blank"rel="noopener noreferrer"href="https://www.antgroup.com"><div className="but">删除</div></a>),},{key: "2",label: (<atarget="_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;