关键词：
前言
我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷
代码案例LogItem.js
import React, useState, useEffect, useCallback, memo from react;
import
Modal,
Input,
message,
Form,
Select,
Table,
Button,
Row,
Col,
Card,
DatePicker,
Cascader,
Tabs,
Typography, InputNumber
from antd;
import Menu from ../service;
import
useQueryOrderDetailMutation, useManufactureAddMutation
from @/restapi/service/order/order
import
useLazyQueryBaseCustomerQuery,
useLazyQueryCategoryListQuery, useLazyQueryColorTypeListQuery, useLazyQuerySizeTypeListQuery,
useLazyQueryStyleDataListQuery
from "@/restapi/service/commonselect/tablerestapi";
import styles from "./indexOrder.module.less";
import SingleValueType from rc-cascader/lib/Cascader;
import useQueryRegionListMutation from "@/restapi/service/factory/factory";
import moment from "moment";
import useNavigate from "react-router";
const Option = Select
const TabPane = Tabs;
interface AddOrEditMenuFormProps
id?: number;
export interface AddOrEditMenuProps
visible: boolean;
menu: Menu | null;
onClose: () => void;
onConfirm: (obj: any) => void;
list: any[]
type ListItemType =
code?: string | number;
id?: string;
name?: string;
interface Option
id?: string;
name?: string;
children?: Option[];
const isEditing = (record: any) =>
return record.editable;
;
type ValueType = SingleValueType | SingleValueType[]
const AddScModel: React.FC<any> = (props) =>
const addData = props
const navigate = useNavigate()
const [form] = Form.useForm();
const [formKuan] = Form.useForm();
const [data, setData] = useState<any>([]); //存放表格内容
const [disFlag, setDisFlag] = useState<boolean>(false)
const [region, setRegion] = useState<Array<Option>>()
const [regionData, setRegionData] = useState<ValueType>()
const [customeList, setCustomList] = useState<ListItemType[]>([])
const [styleList, setStyleList] = useState<Array<ListItemType>>([])
const [styleList2, setStyleList2] = useState<Array<ListItemType>>([])
//存储数据
const [styleList3, setStyleList3] = useState<Array<ListItemType>>([])
const [sizeList, setSizeList] = useState<ListItemType[]>([])
const [getStyle, setGetStyle] = useState<any>("");
const [queryBaseCustomer] = useLazyQueryBaseCustomerQuery();
const [queryRegionList] = useQueryRegionListMutation()
const [queryCategoryList] = useLazyQueryCategoryListQuery()
const [queryColorList] = useLazyQueryColorTypeListQuery()
const [querySizeList] = useLazyQuerySizeTypeListQuery()
const [queryOrderDetailList] = useQueryOrderDetailMutation()
const [queryStyleDataList] = useLazyQueryStyleDataListQuery()
const [manufactureAdd] = useManufactureAddMutation()
const [activeKey, setActiveKey] = useState<string>();
const [editingKey, setEditingKey] = useState("");
const columnsTab = [
title: 颜色,
dataIndex: colorId,
width: 300,
editable: false,
componentType: select,
message: 请输入颜色,
render: (text: any) =>
return getColor(text)
,
title: 尺码,
editable: false,
dataIndex: sizeId,
width: 300,
componentType: select,
message: 请输入尺码,
render: (text: any) =>
return getSize(text)
,
title: 合同数量,
editable: false,
dataIndex: ordCount,
width: 300,
componentType: input,
message: 请输入合同数量
,
title: 生产数量,
editable: true,
dataIndex: count,
width: 300,
componentType: input,
message: 请输入生产数量
,
title: 操作,
dataIndex: ,
width: 300,
fixed: right,
render: (text: any, record: any, index: number) =>
// 判断是否进入编辑状态
const editable = isEditing(record);
return editable ? (
<span>
<a
onClick=() => save(record.id, record)
style=
marginRight: 8
>
保存
</a>
<a onClick=() => cancel(record.id)>取消</a>
</span>
) : (
<div>
<Typography.Link
disabled=editingKey !== ""
onClick=() => edit(record)
>
编辑
</Typography.Link>
<Button type="link" onClick=() => delInfo(record, index)>删除</Button>
</div>
);
]
//行编辑
const getColor = (value: any) =>
let text: any =
styleList.forEach((item) =>
if (value == item.id)
text = item.name
)
return text
const getSize = (value: any) =>
let text: any =
sizeList.forEach((item) =>
if (value == item.id)
text = item.name
)
return text
const delInfo = useCallback((record: any, index: number) =>
console.log(record, index, "data")
const list = [...data]
console.log(list)
list.splice(index, 1)
setData(list)
, [data])
const save = async (key: any, record: any) =>
try
const row: any = await formKuan.validateFields();
if (record.ordCount < row.count)
message.warning(生产数量不能大于合同数量,请重新输入!)
return false
const newData = [...data];
const index = newData.findIndex((item: any) => key === item.id);
if (index > -1)
const item: any = newData[index];
item.editable = false;
newData.splice(index, 1, ...item, ...row );
setData(newData);
setEditingKey("");
else
newData.push(row);
setData(newData);
setEditingKey("");
catch (errInfo)
console.log("保存失败", errInfo);
;
const edit = async (record: any) =>
formKuan.setFieldsValue(
editable: true,
...record
);
setEditingKey(record.id);
//切换成编辑状态
const newData: any = [...data];
const index = newData.findIndex((item: any) => record.id === item.id);
if (index > -1)
const item = ...newData[index], editable: true ;
newData.splice(index, 1, ...item );
setData(newData)
;
const cancel = (id: any) =>
const newData = [...data];
const index = newData.findIndex((item: any) => id === item.id);
if (index > -1)
const item: any = newData[index];
item.editable = false;
newData.splice(index, 1, ...item );
setData(newData);
setEditingKey("");
;
const EditableCell = (
editing,
dataIndex,
title,
inputType,
record,
index,
children,
...restProps
:
editing: any,
dataIndex: any,
title: any,
inputType: any,
record: any,
index: any,
children: any
) =>
const inputNode = <InputNumber min=1 style= width: "300px" autoComplete="off" />
const selectNode = dataIndex == sizeId ? <Select
style= width: "300px"
placeholder="请选择尺寸"
optionFilterProp="children"
>
sizeList && sizeList.map((item: any) => (
<Option value=item.id>item.name</Option>
))
</Select> : <Select
style= width: "300px"
placeholder="请选择颜色"
optionFilterProp="children"
>
styleList && styleList.map((item: any) => (
<Option value=item.id>item.name</Option>
))
</Select>
return (
<td ...restProps>
editing ? (
<Form.Item
name=dataIndex
style=
margin: 0
rules=[
required: false,
message: `请输入$title!`
]
>
inputType == input ? inputNode : selectNode
</Form.Item>
) : (
children
)
</td>
);
;
// 依据是否可编辑返回不同元素
const mergedColumns = columnsTab.map((col: any) =>
if (!col.editable)
return col;
return
...col,
onCell: (record: any) => (
record,
inputType: col.componentType,
dataIndex: col.dataIndex,
title: col.title,
editing: isEditing(record)
)
;
);
const onOk = () =>
if (data.length == 0)
message.warning(请添加款式!)
else
form.validateFields().then(res =>
console.log(res, "res")
const values = res
const info: any =
...values,
;
console.log(info, "info")
if (info.id)
else
info.orderId = form.getFieldValue("id")
info.itemList = data.filter((item: any) =>
return item.styleId === getStyle
)
manufactureAdd(info)
.unwrap()
.then((response: any) =>
if (response.code === 200)
// navigate("/productionOrder")
message.success(添加成功)
);
);
const onClose = () =>
form.resetFields()
props.onClose()
;
useEffect(() =>
querySizeList("t_sys_institution")
.unwrap()
.then((response: any) =>
console.log(response, "response")
let arr: ListItemType[] = []
response.data && response.data.map((item: any) =>
arr.push( code: item.code, id: item.id, name: item.name )
)
console.log(arr, "arr")
setSizeList(arr)
);
, [])
//查看款式得接口
useEffect(() =>
queryColorList("")
.unwrap()
.then((response: any) =>
if (response.code === 200)
let arr: ListItemType[] = []
response.data && response.data.map((item: any) =>
arr.push( code: item.code, id: item.id, name: item.name )
)
setStyleList(arr)
);
, []);
//查看省市区的接口
useEffect(() =>
queryRegionList("/style/type/getComboBox")
.unwrap()
.then((response: any) =>
if (response.code === 200)
setRegion(response.data)
);
, []);
//查看款式
useEffect(() =>
queryBaseCustomer("t_sales_order")
.unwrap()
.then((response: any) =>
console.log(response, "response")
let arr: ListItemType[] = []
response.data && response.data.map((item: any) =>
arr.push( code: item.code, id: item.id, name: item.name )
)
setCustomList(arr)
);
, [])
const setFormValue = (value: any) =>
form.setFieldsValue(
...value,
areaAll: [value.province, value.city, value.area]
)
const queryDetail = (obj: any) =>
queryOrderDetailList( orderId: obj.id )
.unwrap()
.then((response: any) =>
if (response.code == 200)
let arr: ListItemType[] = []
const list: any = [...response.data.typeList]
list && list.map((item: any) =>
arr.push( code: item.code, id: item.styleId, name: item.styleName )
)
setStyleList2(arr)
setStyleList3(arr)
const newDate = [...response.data.itemList]
setData(
newDate.map((item: any) =>
return ...item, editable: false, ordCount: item.count
)
)
setActiveKey(arr[0].id)
)
;
const makeStyle = (value: any) =>
setGetStyle(value)
const remove = (targetKey: string) =>
let newActiveKey = activeKey;
let lastIndex = -1;
styleList2.forEach((item, i) =>
if (item.id == targetKey)
lastIndex = i - 1;
);
console.log(lastIndex, "lastIndex")
const newPanes = styleList2.filter(item => item.id != targetKey);
if (newPanes.length > 0)
setStyleList2(newPanes);
setActiveKey(newPanes[0].id);
else
setStyleList2([]);
setActiveKey("");
// console.log([...data].filter((item: any) =>
// return targetKey != item.styleId
// ), targetKey)
// setData([...data].filter((item: any) =>
// return targetKey != item.styleId
// ))
// console.log(newPanes,"newPanes")
// setStyleList2(newPanes);
// setActiveKey(newActiveKey);
;
const onChange = (newActiveKey: string) =>
console.log(data, "data")
setActiveKey(newActiveKey);
;
const onEdit = (targetKey: any, action: add | remove) =>
if (action === add)
// add();
else
remove(targetKey);
;
useEffect(() =>
const dataObj = ...props.addData
dataObj.planDate = moment(dataObj.planDate)
setFormValue(dataObj)
queryDetail(props.addData)
console.log(props)
, [props.addData])
const handleRecover = () =>
setStyleList2(styleList3)
setActiveKey(styleList3[0].id)
console.log(addData,"addDataaddDataaddData")
return (
<div>
<div className=styles[fontFlag]>
基本信息
</div>
<Card style= marginTop: "20px" >
<Row style= marginTop: "20px" gutter=24>
<Col span=6>
客户名称:addData?.customerName
</Col>
<Col span=6>
订单号:addData?.orderCode
</Col>
<Col span=6>
合同号:addData?.contractNumber
</Col>
/* <Col span=6>
交货日期:croppData?.plan_date
</Col> */
/* <Col span=6>
款式名称:croppData?.style_name
</Col> */
/* <Col span=6>
款式编码:croppData?.style_number
</Col> */
</Row>
</Card>
/* <Card className=styles[marginTen]>
<Form
disabled
form=form
labelCol=
sm: span: 5 ,
wrapperCol=
sm: span: 16 ,
>
<Row gutter=24>
<Col span=7>
<Form.Item
label="客户名称"
name="customerId"
rules=[ required: false, message: 请输入客户名称 ]
>
<Select
showSearch
style= width: 200
placeholder="请输入客户名称"
optionFilterProp="children"
>
customeList && customeList.map((item: any) => (
<Option value=item.id>item.name</Option>
))
</Select>
</Form.Item>
</Col>
<Col span=7>
<Form.Item
label="合同号"
name="contractNumber"
rules=[ required: false, message: 请输入合同号 ]
>
<Input />
</Form.Item>
</Col>
<Col span=7>
<Form.Item
label="订单编号"
name="orderCode"
rules=[ required: false, message: 请输入订单编号 ]
>
<Input />
</Form.Item>
</Col>
</Row>
</Form>
</Card> */
<div className=styles[kuanFlag]>
<div>
款式信息
</div>
</div>
<div className=styles[kuanFlag]>
<Button onClick=handleRecover type=primary>恢复</Button>
</div>
<div className=styles[marginTopHeight]>
/* <Select
style= width: 200
placeholder="请选择所属款式"
optionFilterProp="children"
key=getStyle
defaultValue=getStyle
onChange=makeStyle
>
styleList2 && styleList2.map((item: any) => (
<Option value=item.id>item.name</Option>
))
</Select> */
<Tabs
hideAdd
onChange=onChange
activeKey=activeKey
type="editable-card"
onEdit=onEdit
>
styleList2 && styleList2.map((pane, index) => (
<TabPane closable tab=pane.name key=pane.id>
</TabPane>
))
</Tabs>
</div>
<div className=styles[marginBack]>
<Form form=formKuan component=false>
<Table
className="user-table"
rowKey="id"
components=
body:
cell: EditableCell
dataSource=data.filter((item: any) => item.styleId == activeKey)
columns=mergedColumns
pagination=false
summary=data =>
let totalCount = 0;
data.forEach((item: any) =>
if (item.styleId === activeKey)
totalCount += parseInt(item.count);
);
return (
<>
<Table.Summary.Row>
<Table.Summary.Cell index=0>合计</Table.Summary.Cell>
<Table.Summary.Cell index=1>
</Table.Summary.Cell>
<Table.Summary.Cell index=2>
</Table.Summary.Cell>
<Table.Summary.Cell index=3>
<span>totalCount</span>
</Table.Summary.Cell>
</Table.Summary.Row>
</>
);
/>
</Form>
</div>
<Card>
<div className=styles[bottomBtn]>
<Button onClick=onClose className=styles[kuanButtonContent]>取消</Button>
<Button type="primary" className=styles[kuanButtonContent] onClick=onOk>保存</Button>
</div>
</Card>
</div>
);
export default memo(AddScModel);
#yyds干货盘点#react笔记之学习之空列表提示
前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从头再来歌谣的意志是永恒的放弃很容易但是坚持一定很... 查看详情
#yyds干货盘点#react笔记之学习之显示日期
前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从头再来歌谣的意志是永恒的放弃很容易但是坚持一定很... 查看详情
#yyds干货盘点#react笔记之学习之双向绑定
前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从头再来歌谣的意志是永恒的放弃很容易但是坚持一定很... 查看详情
#yyds干货盘点#react笔记之学习之props父子传值
前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从头再来歌谣的意志是永恒的放弃很容易但是坚持一定很... 查看详情
#yyds干货盘点#react笔记之学习之state注意事项
前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从头再来歌谣的意志是永恒的放弃很容易但是坚持一定很... 查看详情
#yyds干货盘点#react笔记之学习之useref()和dom对象
前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从头再来歌谣的意志是永恒的放弃很容易但是坚持一定很... 查看详情
#yyds干货盘点#react笔记之学习之存储到一个state对象中
前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从头再来歌谣的意志是永恒的放弃很容易但是坚持一定很... 查看详情
#yyds干货盘点react笔记之学习之props父子传值
前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从头再来歌谣的意志是永恒的放弃很容易但是坚持一定很... 查看详情
#yyds干货盘点#react前端优化小结笔记
编译阶段的优化主要是webpack开发环境时重复构建更快1.include缩小编译的范围rules:[test:/\\.js$/,use:[loader:babel-loader,options:cacheDirectory:true,persets:[@babel/preset-react],plugins:[@babel/plugin-proposal-class-properties]],i 查看详情
#yyds干货盘点react笔记之项目准备
前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从头再来歌谣的意志是永恒的放弃很容易但是坚持一定很... 查看详情
#yyds干货盘点react笔记之引入fontawesome
前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从头再来歌谣的意志是永恒的放弃很容易但是坚持一定很... 查看详情
#yyds干货盘点react笔记之学习之事件
前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从头再来歌谣的意志是永恒的放弃很容易但是坚持一定很... 查看详情
#yyds干货盘点react笔记之react.fragment
前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从头再来歌谣的意志是永恒的放弃很容易但是坚持一定很... 查看详情
#yyds干货盘点#名企真题专题：删除重复字符
1.简述：描述牛牛有一个由小写字母组成的字符串s,在s中可能有一些字母重复出现。比如在"banana"中,字母a和字母n分别出现了三次和两次。但是牛牛不喜欢重复。对于同一个字母,他只想保留第一次出现并删除掉后面出现的字母。... 查看详情
#yyds干货盘点#如何定位浏览器页面崩溃
问题现象在实际项目开发中，我们常常会遇到类似如下页面崩溃的问题，导致浏览器页面崩溃的原因一般都是JSHeap堆内存溢出，但此类问题一般控制台都不会报错，所以其定位问题的经验和手段很关键，下文是我在实际项目中遇... 查看详情
react笔记之学习之useref()和dom对象
前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从头再来歌谣的意志是永恒的放弃很容易但是坚持一定很... 查看详情
#yyds干货盘点#名企真题专题：游戏任务标记
1.简述：描述游戏里面有很多各式各样的任务，其中有一种任务玩家只能做一次，这类任务一共有1024个，任务ID范围[1,1024]。请用32个unsignedint类型来记录着1024个任务是否已经完成。初始状态都是未完成。输入两个参数，都是任务... 查看详情
#yyds干货盘点歌谣学前端之react中jsx
前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从头再来歌谣的意志是永恒的放弃很容易但是坚持一定很... 查看详情