const timestamp = Date. now ( ) ;
const date = new Date ( timestamp) ;
const year = date. getFullYear ( ) ;
const month = String ( date. getMonth ( ) + 1 ) . padStart ( 2 , '0' ) ;
const day = String ( date. getDate ( ) ) . padStart ( 2 , '0' ) ;
const formattedDate = ` ${ year} - ${ month} - ${ day} ` ; console. log ( formattedDate) ; === === === === === === === === === === === === === === === === === === === == 方法二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) ; 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" , } , ] ; return ( < div className= "box" > < div> { } < Button onClick= { ( ) => formRef. current?. setFieldsValue ( data[ 0 ] ) } > 填入内容< / Button> < / div> < Formref= { formRef} disabledname= "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> , } ,
] ;
const TablePage : React. FC = ( ) => { const [ selectedRowKeys, setSelectedRowKeys] = useState< React. Key[ ] > ( [ ] ) ; 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 ) ; setTimeout ( ( ) => { setSelectedRowKeys ( [ ] ) ; setLoading ( false ) ; } , 1000 ) ; } ; 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 } } > < Buttontype= "primary" onClick= { start} disabled= { ! hasSelected} loading= { loading} > 清空< / Button> { " " } & nbsp; < Button onClick= { deleteList} > 删除< / Button> < span style= { { marginLeft : 8 } } > { hasSelected ? ` 你选择了 ${ selectedRowKeys. length} 个 ` : "" } < / span> < / div> { } < 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 ` < / 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/ create1. 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 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) => { 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> < Modaltitle= "申报规范" 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" > < FormlabelCol= { { span : 4 } } wrapperCol= { { span : 19 } } name= "basic" initialValues= { { remember : true } } onFinish= { onFinish} onFinishFailed= { onFinishFailed} autoComplete= "off" layout= "horizontal" labelWrap> < Form. Itemlabel= "能量" 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. Itemlabel= "蛋白质" name= "dbz" tooltip= "蛋白质" rules= { [ { required : true , message : "请填写内容" } ] } > < Input / > < / Form. Item> < Form. Itemlabel= "脂肪" name= "zf" rules= { [ { required : true , message : "请填写内容" } ] } > < Input / > < / Form. Item> < Form. Itemlabel= "碳水化合物" name= "tshhw" rules= { [ { required : true , message : "请填写内容" } ] } > < Input / > < / Form. Item> < Form. Itemlabel= "--糖" name= "tang" rules= { [ { required : true , message : "请填写内容" } ] } > < Input / > < / Form. Item> < Form. Itemlabel= "钠" name= "na" rules= { [ { required : true , message : "请填写内容" } ] } > < Input / > < / Form. Item> < Form. Itemlabel= "茶多酚柑皮因子" name= "tang" rules= { [ { required : true , message : "请填写内容" } ] } > < Input / > < / Form. Item> < Form. Itemlabel= "维生素" 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. Itemlabel= "碳酸氢钠" name= "tsqn" rules= { [ { required : true , message : "请填写内容" } ] } > < Input / > < / Form. Item> < / Form> < / div> < / div> < div className= "modalInputBox" > < br / > < span> 规格型号：< / span> < InputclassName= "modalInput" disabled/ > < / 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" > < Stepsdirection= "vertical" current= { 1 } size= "small" items= { [ { title : ( < divclassName= "finishedBox" onClick= { ( ) => setEditState ( ! editState) } > < p className= "finishedText" > < span> 审核通过 2023 - 01 - 04 < / span> < span className= "finishedSpan" > < / span> < span> 13 : 14 : 35 < / span> < / p> < pclassName= { editState? "finishedCuntent " : "finishedCuntent finishedNone" } > 一级审核人员：大河，审核已通过< / p> < / div> ) , icon : < CheckCircleFilled / > , } , { title : ( < divclassName= "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 : ( < divclassName= "finishedBox" onClick= { ( ) => setEditState ( ! editState) } > < p className= "finishedText" > < span> 审核通过 2023 - 01 - 04 < / span> < span className= "finishedSpan" > < / span> < span> 13 : 14 : 35 < / span> < / p> < pclassName= { 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 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 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> < Searchstyle= { { marginBottom : 8 } } placeholder= "搜索" onChange= { onChange} / > { } < TreeonExpand= { onExpand} expandedKeys= { expandedKeys} autoExpandParent= { autoExpandParent} treeData= { treeDataList} / > < / div> ) ;
} ; export default TestPage;
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 " > < TreeshowLine= { < 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" > < Formref= { formRef} name= "search-form" initialValues= { { } } onFinish= { onFinish} layout= "inline" labelWrap> < Row> < Col span= { 8 } > < Form. ItemclassName= "inline-form-item" label= "标签1342312312312323" > < input className= "inline-input" / > < / Form. Item> < / Col> < Col span= { 8 } > < Form. ItemclassName= "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 FormC = ( ) => { const [ form] = Form. useForm ( ) ; const formRef = useRef ( ) ; const itemLayout = { labelCol : { span : 5 , } , wrapperCol : { span : 19 , } , } ; const onFinish = ( values ) => { console. log ( "Success:" , values) ; } ; const onReset = ( ) => { form. resetFields ( ) ; } ; return ( < Formform= { form} ref= { formRef} name= "search-form" initialValues= { { } } onFinish= { onFinish} > < Row> < Col span= { 6 } > < Form. Item name= "productId" label= "产品ID" { ... itemLayout} > < Input / > < / Form. Item> < / Col> < Col span= { 6 } > < Form. Item name= "productName" label= "产品名称" { ... itemLayout} > < Input / > < / Form. Item> < / Col> < Col span= { 6 } > < Form. Item name= "industry" label= "所属品类" { ... itemLayout} > < Input / > < / Form. Item> < / Col> < Col span= { 6 } > < Form. Item name= "eqType" label= "设备类型" { ... itemLayout} > < Input / > < / Form. Item> < / Col> < Col span= { 6 } > < Form. Item name= "agreeType" label= "协议类型21313231" { ... itemLayout} > < Input / > < / Form. Item> < / Col> < Col span= { 6 } > < Form. Item name= "creatTime" label= "创建时间" { ... itemLayout} > < Input / > < / Form. Item> < / Col> < Col span= { 6 } > < Form. Item { ... itemLayout} > < Button type= "primary" htmlType= "submit" > 查询< / Button> < Button htmlType= "button" onClick= { onReset} > 重置< / Button> < / Form. Item> < / Col> < / Row> < / Form> ) ;
} ; export default FormC; import { Table, Button } from "antd" ;
import "./index.css" ;
import { useState, forwardRef, useImperativeHandle, useRef, createContext,
} from "react" ;
import { titleData, mokeData } from "../../moke/index" ;
import Form from "../form" ; export const ThemeContext = createContext ( null ) ; const Tabulation = forwardRef ( ( { newValue } , ref) => { const [ newMokeData, setNewMokeData] = useState ( mokeData) ; const [ ControlsNewValue, setControlsNewValue] = useState ( ) ; const [ echoData, setEchoData] = useState ( { ciqName : "种用大麦" , ciqType : "D/M" , codeTs : "1003100000" , } ) ; const columns = [ { title : titleData[ 0 ] , key : "1" , dataIndex : "key" , rowScope : "row" , width : 100 , } , { title : titleData[ 1 ] , dataIndex : "ciqCode" , key : "2" , width : 200 , } , { title : titleData[ 2 ] , dataIndex : "ciqName" , key : "3" , width : 200 , } , { title : titleData[ 3 ] , dataIndex : "ciqType" , key : "4" , width : 200 , } , { title : titleData[ 4 ] , dataIndex : "codeTs" , key : "5" , width : 200 , } , { title : titleData[ 5 ] , dataIndex : "commRate" , key : "6" , width : 200 , } , { title : titleData[ 6 ] , dataIndex : "createTime" , key : "7" , width : 200 , } , { title : titleData[ 7 ] , dataIndex : "createUserId" , key : "8" , width : 300 , } , { title : titleData[ 8 ] , dataIndex : "createUserId" , key : titleData[ 8 ] . length + 1 , width : 300 , } , { title : titleData[ 9 ] , dataIndex : "dclUnit" , key : titleData[ 9 ] . length + 1 , width : 200 , } , { title : titleData[ 10 ] , dataIndex : "deleted" , key : titleData[ 10 ] . length + 1 , width : 200 , } , { title : titleData[ 10 ] , dataIndex : "deleted" , key : titleData[ 10 ] . length + 1 , width : 200 , } , { title : titleData[ 10 ] , dataIndex : "deleted" , key : titleData[ 10 ] . length + 1 , width : 200 , } , { title : "操作列" , key : "operation" , fixed : "right" , width : 250 , render : ( id ) => ( < div> < Button onClick= { ( ) => viewData ( id) } > 查看< / Button> & nbsp; & nbsp; < Button> 修改< / Button> & nbsp; & nbsp; < Button type= "primary" > 更多< / Button> < / div> ) , } , ] ; const viewData = ( id ) => { setEchoData ( id) ; formRef. current. showModal ( ) ; console. log ( "ck" , id, echoData) ; } ; const editMokeData = ( ) => { setControlsNewValue ( { id : 1 , key : Date. now ( ) , ... newValue, codeTs : "1003100000" , commRate : "null" , createTime : 1690334576223 , createUserId : "01H321BXCVNJMK38KE3BJ29EKE" , createUserName : "张三" , dclUnit : "002" , deleted : 0 , firstUnit : "1009" , goodsModel : "0:品牌类型|1:出口享惠情况|2:是否改良种用|3:品种|4:GTIN|5:CAS|6:其他" , goodsName : "种用大麦" , } ) ; console. log ( newValue) ; setNewMokeData ( [ ... newMokeData, ControlsNewValue] ) ; } ; useImperativeHandle ( ref, ( ) => ( { editMokeData, } ) ) ; const formRef = useRef ( null ) ; return ( < ThemeContext. Provider value= { echoData} > < div className= "box" > < Tablecolumns= { 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 : ( < atarget= "_blank" rel= "noopener noreferrer" href= "https://www.antgroup.com" > < div className= "but" > 删除< / div> < / a> ) , } , { key : "2" , label : ( < atarget= "_blank" rel= "noopener noreferrer" href= "https://www.aliyun.com" > < div className= "but" > 变更< / div> < / a> ) , } ,
] ; const ButtonModule = ( ) => { return ( < div> < Button> 查看< / Button> & nbsp; < Button> 修改< / Button> & nbsp; < Dropdown menu= { { items } } trigger= { [ "click" ] } placement= "bottomRight" > < Button type= "primary" > 更多< / Button> < / Dropdown> & nbsp; < / div> ) ;
} ; export default ButtonModule; 
![[Go版]算法通关村第十二关青铜——不简单的字符串转换问题](http://pic.xiahunao.cn/[Go版]算法通关村第十二关青铜——不简单的字符串转换问题)
