React + TypeScript + antd 常见开发场景

news/2024/7/15 19:12:39 标签: react.js, typescript, javascript

时间戳转格式


// 获取当前时间戳(示例)
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;


http://www.niftyadmin.cn/n/4955536.html

相关文章

软件测试-测试策略

版本1 测试策略 目录 版本1​​​​​​​测试策略 版本2测试策略 一、版本分析 测试-----6天 预发----2天 1、XXX业务1 2、XXX业务2 3、XXX业务3 二、测试策略 测试类型分析方向测试目标及用例参考是否需要测试测试结论备注功能测试对比测试用例和策划文档&#xff0c;评估…

创建型模式——工厂模式

工厂模式提供了一种将对象的实例化过程封装在工厂类中的方式。通过使用工厂模式&#xff0c;可以将对象的创建与使用代码分离&#xff0c;提供一种统一的接口来创建不同类型的对象。 在工厂模式中&#xff0c;我们在创建对象时不会对客户端暴露创建逻辑&#xff0c;并且是通过…

【MySQL】JSON 格式字段处理

MySQL 5.7 版本后已支持 JSON 格式&#xff0c;这虽是 MySQL 的一小步&#xff0c;但可以说是程序开发的一大步&#xff0c;再也不用将 JSON 内容塞到 VARCHAR 类型字段了&#xff0c;程序设计也会变得更加灵活。网上大多只针对JSONObject 对象类型&#xff0c;本文也将详解 JS…

16----公式

本节我们来学习如何在markdown中打印公式 Markdown是一种轻量级标记语言&#xff0c;常用于撰写文档、博客和论坛帖子。虽然Markdown本身并不支持数学公式&#xff0c;但可以使用一些扩展来实现公式的显示。在支持公式扩展的 Markdown 解析器中&#xff0c;我们可以使用 Katex …

.NET6.0 System.Drawing.Common 通用解决办法

最近有不少小伙伴在升级 .NET 6 时遇到了 System.Drawing.Common 的问题&#xff0c;同时很多库的依赖还都是 System.Drawing.Common &#xff0c;而 .NET 6 默认情况下只在 Windows 上支持使用&#xff0c;Linux 上默认不支持这就导致在 Linux 环境上使用会有问题&#xff0c;…

axi4 exclusive 原子操作

axi4 exclusive 原子操作 axi4

SpringBoot常用注解 - @Controller

Controller : Controller是加在类上面的注解&#xff0c;使得类里面的每个方法都返回一个视图页面 实际开发中&#xff0c;有时候只是让后端的结果返回到前端&#xff0c;而不作为新的视图页面&#xff0c;此时需要结合 ResponseBody&#xff0c;让这个方法返回给前端的不是一个…

React+Typescript 状态管理

好 本文 我们来说说状态管理 也就是我们的 state 我们直接顺便写一个组件 参考代码如下 import * as React from "react";interface IProps {title: string,age: number }interface IState {count:number }export default class hello extends React.Component<I…