技术标签: 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>{
" "}
<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;
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
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
/* 设置滚动条的整体样式 */
::-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; /* 轨道的背景颜色 */
}
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;
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;
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>
<Button>修改</Button>
<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;
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>
<Button>修改</Button>
<Dropdown menu={
{
items }} trigger={
["click"]} placement="bottomRight">
<Button type="primary">更多</Button>
</Dropdown>
</div>
);
};
export default ButtonModule;
文章浏览阅读2w次,点赞7次,收藏51次。四个步骤1.创建C++ Win32项目动态库dll 2.在Win32项目动态库中添加 外部依赖项 lib头文件和lib库3.导出C接口4.c#调用c++动态库开始你的表演...①创建一个空白的解决方案,在解决方案中添加 Visual C++ , Win32 项目空白解决方案的创建:添加Visual C++ , Win32 项目这......_c#调用lib
文章浏览阅读4.6k次。苹方字体是苹果系统上的黑体,挺好看的。注重颜值的网站都会使用,例如知乎:font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, W..._ubuntu pingfang
文章浏览阅读159次。表单表单概述表单标签表单域按钮控件demo表单标签表单标签基本语法结构<form action="处理数据程序的url地址“ method=”get|post“ name="表单名称”></form><!--action,当提交表单时,向何处发送表单中的数据,地址可以是相对地址也可以是绝对地址--><!--method将表单中的数据传送给服务器处理,get方式直接显示在url地址中,数据可以被缓存,且长度有限制;而post方式数据隐藏传输,_html表单的处理程序有那些
文章浏览阅读1.2k次。使用说明:开启Google的登陆二步验证(即Google Authenticator服务)后用户登陆时需要输入额外由手机客户端生成的一次性密码。实现Google Authenticator功能需要服务器端和客户端的支持。服务器端负责密钥的生成、验证一次性密码是否正确。客户端记录密钥后生成一次性密码。下载谷歌验证类库文件放到项目合适位置(我这边放在项目Vender下面)https://github.com/PHPGangsta/GoogleAuthenticatorPHP代码示例://引入谷_php otp 验证器
文章浏览阅读4.3k次,点赞5次,收藏11次。matplotlib.plot画图横坐标混乱及间隔处理_matplotlib更改横轴间距
文章浏览阅读2.2k次。①Storage driver 处理各镜像层及容器层的处理细节,实现了多层数据的堆叠,为用户 提供了多层数据合并后的统一视图②所有 Storage driver 都使用可堆叠图像层和写时复制(CoW)策略③docker info 命令可查看当系统上的 storage driver主要用于测试目的,不建议用于生成环境。_docker 保存容器
文章浏览阅读834次,点赞27次,收藏13次。网络拓扑结构是指计算机网络中各组件(如计算机、服务器、打印机、路由器、交换机等设备)及其连接线路在物理布局或逻辑构型上的排列形式。这种布局不仅描述了设备间的实际物理连接方式,也决定了数据在网络中流动的路径和方式。不同的网络拓扑结构影响着网络的性能、可靠性、可扩展性及管理维护的难易程度。_网络拓扑csdn
文章浏览阅读1.8k次,点赞5次,收藏8次。IOS系统Date的坑要创建一个指定时间的new Date对象时,通常的做法是:new Date("2020-09-21 11:11:00")这行代码在 PC 端和安卓端都是正常的,而在 iOS 端则会提示 Invalid Date 无效日期。在IOS年月日中间的横岗许换成斜杠,也就是new Date("2020/09/21 11:11:00")通常为了兼容IOS的这个坑,需要做一些额外的特殊处理,笔者在开发的时候经常会忘了兼容IOS系统。所以就想试着重写Date函数,一劳永逸,避免每次ne_date.prototype 将所有 ios
文章浏览阅读5.3k次。方法一:用PLSQL Developer工具。 1 在PLSQL Developer的sql window里输入select * from test for update; 2 按F8执行 3 打开锁, 再按一下加号. 鼠标点到第一列的列头,使全列成选中状态,然后粘贴,最后commit提交即可。(前提..._excel导入pl/sql
文章浏览阅读83次。Git常用命令速查手册1、初始化仓库git init2、将文件添加到仓库git add 文件名 # 将工作区的某个文件添加到暂存区 git add -u # 添加所有被tracked文件中被修改或删除的文件信息到暂存区,不处理untracked的文件git add -A # 添加所有被tracked文件中被修改或删除的文件信息到暂存区,包括untracked的文件...
文章浏览阅读202次。分享119个ASP.NET源码总有一个是你想要的_千博二手车源码v2023 build 1120
文章浏览阅读1.8k次。版权声明:转载请注明出处 http://blog.csdn.net/irean_lau。目录(?)[+]1、缺省构造函数。2、缺省拷贝构造函数。3、 缺省析构函数。4、缺省赋值运算符。5、缺省取址运算符。6、 缺省取址运算符 const。[cpp] view plain copy_空类默认产生哪些类成员函数