技术标签: 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;
文章浏览阅读1.6k次。安装配置gi、安装数据库软件、dbca建库见下:http://blog.csdn.net/kadwf123/article/details/784299611、检查集群节点及状态:[root@rac2 ~]# olsnodes -srac1 Activerac2 Activerac3 Activerac4 Active[root@rac2 ~]_12c查看crs状态
文章浏览阅读1.3w次,点赞45次,收藏99次。我个人用的是anaconda3的一个python集成环境,自带jupyter notebook,但在我打开jupyter notebook界面后,却找不到对应的虚拟环境,原来是jupyter notebook只是通用于下载anaconda时自带的环境,其他环境要想使用必须手动下载一些库:1.首先进入到自己创建的虚拟环境(pytorch是虚拟环境的名字)activate pytorch2.在该环境下下载这个库conda install ipykernelconda install nb__jupyter没有pytorch环境
文章浏览阅读5.2k次,点赞19次,收藏28次。选择scoop纯属意外,也是无奈,因为电脑用户被锁了管理员权限,所有exe安装程序都无法安装,只可以用绿色软件,最后被我发现scoop,省去了到处下载XXX绿色版的烦恼,当然scoop里需要管理员权限的软件也跟我无缘了(譬如everything)。推荐添加dorado这个bucket镜像,里面很多中文软件,但是部分国外的软件下载地址在github,可能无法下载。以上两个是官方bucket的国内镜像,所有软件建议优先从这里下载。上面可以看到很多bucket以及软件数。如果官网登陆不了可以试一下以下方式。_scoop-cn
文章浏览阅读4.5k次,点赞2次,收藏3次。首先要有一个color-picker组件 <el-color-picker v-model="headcolor"></el-color-picker>在data里面data() { return {headcolor: ’ #278add ’ //这里可以选择一个默认的颜色} }然后在你想要改变颜色的地方用v-bind绑定就好了,例如:这里的:sty..._vue el-color-picker
文章浏览阅读640次。基于芯片日益增长的问题,所以内核开发者们引入了新的方法,就是在内核中只保留函数,而数据则不包含,由用户(应用程序员)自己把数据按照规定的格式编写,并放在约定的地方,为了不占用过多的内存,还要求数据以根精简的方式编写。boot启动时,传参给内核,告诉内核设备树文件和kernel的位置,内核启动时根据地址去找到设备树文件,再利用专用的编译器去反编译dtb文件,将dtb还原成数据结构,以供驱动的函数去调用。firmware是三星的一个固件的设备信息,因为找不到固件,所以内核启动不成功。_exynos 4412 刷机
文章浏览阅读2w次,点赞24次,收藏42次。Linux系统配置jdkLinux学习教程,Linux入门教程(超详细)_linux配置jdk
文章浏览阅读3.3k次,点赞5次,收藏19次。xlabel('\delta');ylabel('AUC');具体符号的对照表参照下图:_matlab微米怎么输入
文章浏览阅读119次。顺序读写指的是按照文件中数据的顺序进行读取或写入。对于文本文件,可以使用fgets、fputs、fscanf、fprintf等函数进行顺序读写。在C语言中,对文件的操作通常涉及文件的打开、读写以及关闭。文件的打开使用fopen函数,而关闭则使用fclose函数。在C语言中,可以使用fread和fwrite函数进行二进制读写。 Biaoge 于2024-03-09 23:51发布 阅读量:7 ️文章类型:【 C语言程序设计 】在C语言中,用于打开文件的函数是____,用于关闭文件的函数是____。
文章浏览阅读3.4k次,点赞2次,收藏13次。跟随鼠标移动的粒子以grid(SOP)为partical(SOP)的资源模板,调整后连接【Geo组合+point spirit(MAT)】,在连接【feedback组合】适当调整。影响粒子动态的节点【metaball(SOP)+force(SOP)】添加mouse in(CHOP)鼠标位置到metaball的坐标,实现鼠标影响。..._touchdesigner怎么让一个模型跟着鼠标移动
文章浏览阅读178次。项目运行环境配置:Jdk1.8 + Tomcat7.0 + Mysql + HBuilderX(Webstorm也行)+ Eclispe(IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持)。项目技术:Springboot + mybatis + Maven +mysql5.7或8.0+html+css+js等等组成,B/S模式 + Maven管理等等。环境需要1.运行环境:最好是java jdk 1.8,我们在这个平台上运行的。其他版本理论上也可以。_基于java技术的停车场管理系统实现与设计
文章浏览阅读3.5k次。前言对于MediaPlayer播放器的源码分析内容相对来说比较多,会从Java-&amp;gt;Jni-&amp;gt;C/C++慢慢分析,后面会慢慢更新。另外,博客只作为自己学习记录的一种方式,对于其他的不过多的评论。MediaPlayerDemopublic class MainActivity extends AppCompatActivity implements SurfaceHolder.Cal..._android多媒体播放源码分析 时序图
文章浏览阅读2.4k次,点赞41次,收藏13次。java 数据结构与算法 ——快速排序法_快速排序法