技术标签: 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;
文章浏览阅读645次。这个肯定是末尾的IDAT了,因为IDAT必须要满了才会开始一下个IDAT,这个明显就是末尾的IDAT了。,对应下面的create_head()代码。,对应下面的create_tail()代码。不要考虑爆破,我已经试了一下,太多情况了。题目来源:UNCTF。_攻防世界困难模式攻略图文
文章浏览阅读2.9k次,点赞3次,收藏10次。偶尔会用到,记录、分享。1. 数据库导出1.1 切换到dmdba用户su - dmdba1.2 进入达梦数据库安装路径的bin目录,执行导库操作 导出语句:./dexp cwy_init/[email protected]:5236 file=cwy_init.dmp log=cwy_init_exp.log 注释: cwy_init/init_123..._达梦数据库导入导出
文章浏览阅读1.9k次。1. 在官网上下载KindEditor文件,可以删掉不需要要到的jsp,asp,asp.net和php文件夹。接着把文件夹放到项目文件目录下。2. 修改html文件,在页面引入js文件:<script type="text/javascript" src="./kindeditor/kindeditor-all.js"></script><script type="text/javascript" src="./kindeditor/lang/zh-CN.js"_kindeditor.js
文章浏览阅读2.3k次,点赞6次,收藏14次。SPI的详情简介不必赘述。假设我们通过SPI发送0xAA,我们的数据线就会变为10101010,通过修改不同的内容,即可修改SPI中0和1的持续时间。比如0xF0即为前半周期为高电平,后半周期为低电平的状态。在SPI的通信模式中,CPHA配置会影响该实验,下图展示了不同采样位置的SPI时序图[1]。CPOL = 0,CPHA = 1:CLK空闲状态 = 低电平,数据在下降沿采样,并在上升沿移出CPOL = 0,CPHA = 0:CLK空闲状态 = 低电平,数据在上升沿采样,并在下降沿移出。_stm32g431cbu6
文章浏览阅读1.2k次,点赞2次,收藏8次。数据链路层习题自测问题1.数据链路(即逻辑链路)与链路(即物理链路)有何区别?“电路接通了”与”数据链路接通了”的区别何在?2.数据链路层中的链路控制包括哪些功能?试讨论数据链路层做成可靠的链路层有哪些优点和缺点。3.网络适配器的作用是什么?网络适配器工作在哪一层?4.数据链路层的三个基本问题(帧定界、透明传输和差错检测)为什么都必须加以解决?5.如果在数据链路层不进行帧定界,会发生什么问题?6.PPP协议的主要特点是什么?为什么PPP不使用帧的编号?PPP适用于什么情况?为什么PPP协议不_接收方收到链路层数据后,使用crc检验后,余数为0,说明链路层的传输时可靠传输
文章浏览阅读587次。软件测试工程师移民加拿大 无证移民,未受过软件工程师的教育(第1部分) (Undocumented Immigrant With No Education to Software Engineer(Part 1))Before I start, I want you to please bear with me on the way I write, I have very little gen...
文章浏览阅读304次。Thinkpad X250笔记本电脑,装的是FreeBSD,进入BIOS修改虚拟化配置(其后可能是误设置了安全开机),保存退出后系统无法启动,显示:secure boot failed ,把自己惊出一身冷汗,因为这台笔记本刚好还没开始做备份.....根据错误提示,到bios里面去找相关配置,在Security里面找到了Secure Boot选项,发现果然被设置为Enabled,将其修改为Disabled ,再开机,终于正常启动了。_安装完系统提示secureboot failure
文章浏览阅读10w+次,点赞93次,收藏352次。1、用strtok函数进行字符串分割原型: char *strtok(char *str, const char *delim);功能:分解字符串为一组字符串。参数说明:str为要分解的字符串,delim为分隔符字符串。返回值:从str开头开始的一个个被分割的串。当没有被分割的串时则返回NULL。其它:strtok函数线程不安全,可以使用strtok_r替代。示例://借助strtok实现split#include <string.h>#include <stdio.h&_c++ 字符串分割
文章浏览阅读2.3k次。1 .高斯日记 大数学家高斯有个好习惯:无论如何都要记日记。他的日记有个与众不同的地方,他从不注明年月日,而是用一个整数代替,比如:4210后来人们知道,那个整数就是日期,它表示那一天是高斯出生后的第几天。这或许也是个好习惯,它时时刻刻提醒着主人:日子又过去一天,还有多少时光可以用于浪费呢?高斯出生于:1777年4月30日。在高斯发现的一个重要定理的日记_2013年第四届c a组蓝桥杯省赛真题解答
文章浏览阅读851次,点赞17次,收藏22次。摘要:本文利用供需算法对核极限学习机(KELM)进行优化,并用于分类。
文章浏览阅读1.1k次。一、系统弱密码登录1、在kali上执行命令行telnet 192.168.26.1292、Login和password都输入msfadmin3、登录成功,进入系统4、测试如下:二、MySQL弱密码登录:1、在kali上执行mysql –h 192.168.26.129 –u root2、登录成功,进入MySQL系统3、测试效果:三、PostgreSQL弱密码登录1、在Kali上执行psql -h 192.168.26.129 –U post..._metasploitable2怎么进入
文章浏览阅读257次。本文将为初学者提供Python学习的详细指南,从Python的历史、基础语法和数据类型到面向对象编程、模块和库的使用。通过本文,您将能够掌握Python编程的核心概念,为今后的编程学习和实践打下坚实基础。_python人工智能开发从入门到精通pdf