技术标签: 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;
文章浏览阅读3.4k次,点赞8次,收藏42次。一、什么是内部类?or 内部类的概念内部类是定义在另一个类中的类;下面类TestB是类TestA的内部类。即内部类对象引用了实例化该内部对象的外围类对象。public class TestA{ class TestB {}}二、 为什么需要内部类?or 内部类有什么作用?1、 内部类方法可以访问该类定义所在的作用域中的数据,包括私有数据。2、内部类可以对同一个包中的其他类隐藏起来。3、 当想要定义一个回调函数且不想编写大量代码时,使用匿名内部类比较便捷。三、 内部类的分类成员内部_成员内部类和局部内部类的区别
文章浏览阅读118次。分布式系统要求拆分分布式思想的实质搭配要求分布式系统要求按照某些特定的规则将项目进行拆分。如果将一个项目的所有模板功能都写到一起,当某个模块出现问题时将直接导致整个服务器出现问题。拆分按照业务拆分为不同的服务器,有效的降低系统架构的耦合性在业务拆分的基础上可按照代码层级进行拆分(view、controller、service、pojo)分布式思想的实质分布式思想的实质是为了系统的..._分布式系统运维工具
文章浏览阅读174次。1.数据源准备2.数据处理step1:数据表处理应用函数:①VLOOKUP函数; ② CONCATENATE函数终表:step2:数据透视表统计分析(1) 透视表汇总不同渠道用户数, 金额(2)透视表汇总不同日期购买用户数,金额(3)透视表汇总不同用户购买订单数,金额step3:讲第二步结果可视化, 比如, 柱形图(1)不同渠道用户数, 金额(2)不同日期..._exce l趋势分析数据量
文章浏览阅读3.3k次。堡垒机可以为企业实现服务器、网络设备、数据库、安全设备等的集中管控和安全可靠运行,帮助IT运维人员提高工作效率。通俗来说,就是用来控制哪些人可以登录哪些资产(事先防范和事中控制),以及录像记录登录资产后做了什么事情(事后溯源)。由于堡垒机内部保存着企业所有的设备资产和权限关系,是企业内部信息安全的重要一环。但目前出现的以下问题产生了很大安全隐患:密码设置过于简单,容易被暴力破解;为方便记忆,设置统一的密码,一旦单点被破,极易引发全面危机。在单一的静态密码验证机制下,登录密码是堡垒机安全的唯一_horizon宁盾双因素配置
文章浏览阅读7.7k次,点赞4次,收藏16次。Chrome作为一款挺不错的浏览器,其有着诸多的优良特性,并且支持跨平台。其支持(Windows、Linux、Mac OS X、BSD、Android),在绝大多数情况下,其的安装都很简单,但有时会由于网络原因,无法安装,所以在这里总结下Chrome的安装。Windows下的安装:在线安装:离线安装:Linux下的安装:在线安装:离线安装:..._chrome linux debian离线安装依赖
文章浏览阅读153次。中国发达城市榜单每天都在刷新,但无非是北上广轮流坐庄。北京拥有最顶尖的文化资源,上海是“摩登”的国际化大都市,广州是活力四射的千年商都。GDP和发展潜力是衡量城市的数字指...
文章浏览阅读3.3k次。前言spark在java使用比较少,多是scala的用法,我这里介绍一下我在项目中使用的代码配置详细算法的使用请点击我主页列表查看版本jar版本说明spark3.0.1scala2.12这个版本注意和spark版本对应,只是为了引jar包springboot版本2.3.2.RELEASEmaven<!-- spark --> <dependency> <gro_使用java调用spark注册进去的程序
文章浏览阅读4.8k次。汽车零部件开发工具巨头V公司全套bootloader中UDS协议栈源代码,自己完成底层外设驱动开发后,集成即可使用,代码精简高效,大厂出品有量产保证。:139800617636213023darcy169_uds协议栈 源代码
文章浏览阅读4.6k次,点赞20次,收藏148次。AUTOSAR基础篇之OS(下)前言首先,请问大家几个小小的问题,你清楚:你知道多核OS在什么场景下使用吗?多核系统OS又是如何协同启动或者关闭的呢?AUTOSAR OS存在哪些功能安全等方面的要求呢?多核OS之间的启动关闭与单核相比又存在哪些异同呢?。。。。。。今天,我们来一起探索并回答这些问题。为了便于大家理解,以下是本文的主题大纲:[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JCXrdI0k-1636287756923)(https://gite_autosar 定义了 5 种多核支持类型
文章浏览阅读2.2k次,点赞6次,收藏14次。原因:自己写的头文件没有被加入到方案的包含目录中去,无法被检索到,也就无法打开。将自己写的头文件都放入header files。然后在VS界面上,右键方案名,点击属性。将自己头文件夹的目录添加进去。_vs2013打不开自己定义的头文件
文章浏览阅读3.3w次,点赞80次,收藏342次。此时,可以将系统中所有用户的 Session 数据全部保存到 Redis 中,用户在提交新的请求后,系统先从Redis 中查找相应的Session 数据,如果存在,则再进行相关操作,否则跳转到登录页面。此时,可以将系统中所有用户的 Session 数据全部保存到 Redis 中,用户在提交新的请求后,系统先从Redis 中查找相应的Session 数据,如果存在,则再进行相关操作,否则跳转到登录页面。当数据量很大时,count 的数量的指定可能会不起作用,Redis 会自动调整每次的遍历数目。_redis命令
文章浏览阅读449次,点赞3次,收藏3次。URP的设计目标是在保持高性能的同时,提供更多的渲染功能和自定义选项。与普通项目相比,会多出Presets文件夹,里面包含着一些设置,包括本色,声音,法线,贴图等设置。全局只有主光源和附加光源,主光源只支持平行光,附加光源数量有限制,主光源和附加光源在一次Pass中可以一起着色。URP:全局只有主光源和附加光源,主光源只支持平行光,附加光源数量有限制,一次Pass可以计算多个光源。可编程渲染管线:渲染策略是可以供程序员定制的,可以定制的有:光照计算和光源,深度测试,摄像机光照烘焙,后期处理策略等等。_urp渲染管线