#yyds干货盘点# react笔记之学习之完成删除功能
2022-12-22 16:07:04 来源：51CTO博客
(相关资料图)
前言
我是歌谣 我有个兄弟 巅峰的时候排名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 } = Selectconst { 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 = (props) => { const { addData } = props const navigate = useNavigate() const [form] = Form.useForm(); const [formKuan] = Form.useForm(); const [data, setData] = useState([]); //存放表格内容 const [disFlag, setDisFlag] = useState(false) const [region, setRegion] = useState>() const [regionData, setRegionData] = useState() const [customeList, setCustomList] = useState([]) const [styleList, setStyleList] = useState>([]) const [styleList2, setStyleList2] = useState>([]) //存储数据 const [styleList3, setStyleList3] = useState>([]) const [sizeList, setSizeList] = useState([]) const [getStyle, setGetStyle] = useState(""); 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(); 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 ? ( save(record.id, record)} style={{ marginRight: 8 }} > 保存 cancel(record.id)}>取消 ) : ( edit(record)} > 编辑 ); } } ] //行编辑 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 = {editing ? ( {inputType == "input" ? inputNode : selectNode} ) : ( children )} ); }; // 依据是否可编辑返回不同元素 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 ( 基本信息
{/* */} 款式信息 {/* */} {styleList2 && styleList2.map((pane, index) => ( ))}