diff --git a/src/pages/StreamerSpace/components/PartnerComponent/index.js b/src/pages/StreamerSpace/components/PartnerComponent/index.js new file mode 100644 index 0000000..02fccf5 --- /dev/null +++ b/src/pages/StreamerSpace/components/PartnerComponent/index.js @@ -0,0 +1,445 @@ +import React, { + useContext, + useEffect, + useRef, + useState, + useCallback, + useMemo, +} from "react"; +import { Button, Form, Input, Popconfirm, Table, Select, message } from "antd"; +import baseRequest from "../../../../utils/baseRequest"; +const EditableContext = React.createContext(null); +const EditableRow = ({ index, ...props }) => { + const [form] = Form.useForm(); + const handleCheck = () => { + return true; + }; + return ( +
+ + + +
+ ); +}; +const EditableCell = ({ + title, + editable, + children, + dataIndex, + record, + zone_third_partner_sharing_ratio, + handleSave, + handleSetEditable, + handleDelete, + handleSubmit, + currentSharingRatioTotal, + ...restProps +}) => { + const [editing, setEditing] = useState(false); + const inputRef = useRef(null); + const form = useContext(EditableContext); + useEffect(() => { + setEditing(record?.editable || !record?.id); + if (record?.editable || !record?.id) { + form.setFieldsValue({ + collaborator_user_id: record?.["collaborator_user_id"], + sharing_ratio: record?.["sharing_ratio"], + }); + } + }, [record, form]); + + const save = async () => { + try { + const values = await form.validateFields(); + // toggleEdit(); + handleSave({ + ...record, + ...values, + }); + } catch (errInfo) { + console.log("Save failed:", errInfo); + } + }; + let childNode = children; + childNode = + dataIndex === "operation" ? ( + <> + <> + {record?.id ? ( + <> + {!editing ? ( + + ) : ( + + )} + + ) : ( + + )} + + {record?.id && ( + handleDelete(record.id)} + > + + + )} + + ) : editing && record?.key !== undefined ? ( + + {dataIndex === "collaborator_user_id" ? ( + + ) : ( + + )} + + ) : ( +
+ {dataIndex === "sharing_ratio" + ? `${ + record[dataIndex] && + parseFloat((record[dataIndex] * 100)?.toPrecision(2)) + }%` + : children} +
+ ); + return {childNode}; +}; +const PartnerComponent = ({ + getDataSource, + zid, + visitor_role, + zone_third_partner_sharing_ratio, +}) => { + const [dataSource, setDataSource] = useState([]); + const [count, setCount] = useState(0); + useEffect(() => { + getDataSource(dataSource); + }, [dataSource]); + useEffect(() => { + getData(); + }, []); + const getData = async (changedId, type, changeKey) => { + try { + const base = baseRequest(); + const detailResponse = await fetch(`/op/zone_collaborator/list`, { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ + zid, + visitor_role, + ...base, + }), + }); + const detailData = await detailResponse.json(); + if (detailData.ret === -1) { + alert(detailData.msg); + return; + } + setCount(detailData.data.offset); + setDataSource((prev) => { + if (!prev.length) { + return detailData.data.list.map( + ({ collaborator_account, sharing_ratio, id }, index) => { + return { + collaborator_user_id: collaborator_account.user_id, + sharing_ratio, + id, + editable: false, + key: index, + }; + } + ); + } + const changedItem = detailData.data.list.find((item) => { + if (type === "create") { + return item.collaborator_account.user_id === changedId; + } + return item.id === changedId; + }); + // debugger; + if (type === "create") { + return prev.map((item, index) => { + return item.key === changeKey + ? { + collaborator_user_id: + changedItem?.collaborator_account.user_id, + sharing_ratio: changedItem?.sharing_ratio, + id: changedItem?.id, + editable: false, + key: index, + } + : item; + }); + } + + if (!changedItem && changedId) { + return prev.filter((item) => item.id !== changedId); + } + return prev.map((item, index) => { + return item.id === changedId && changedItem + ? { + collaborator_user_id: changedItem?.collaborator_account.user_id, + sharing_ratio: changedItem?.sharing_ratio, + id: changedItem?.id, + editable: false, + key: index, + } + : item; + }); + }); + } catch (error) { + console.error(error); + } + }; + const handleDelete = useCallback(async (id) => { + try { + const base = baseRequest(); + const detailResponse = await fetch(`/op/zone_collaborator/delete`, { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ + id, + ...base, + }), + }); + const detailData = await detailResponse.json(); + if (detailData.ret === -1) { + alert(detailData.msg); + return; + } + message.success("删除成功"); + getData(id); + } catch (error) { + console.error(error); + } + }, []); + const handleSetEditable = (key) => { + const newData = dataSource.map((item) => { + return { ...item, editable: item.key === key ? true : item.editable }; + }); + setDataSource(newData); + }; + const handleSubmit = async (data, type) => { + // 创建接口要改,不能上传数组,因为更新是单条 + try { + const base = baseRequest(); + const baseBody = + type === "create" + ? { + collaborator_user_id: parseInt(data.collaborator_user_id), + } + : { id: data.id }; + const detailResponse = await fetch( + `/op/zone_collaborator/${type === "create" ? "create" : "update"}`, + { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ + ...baseBody, + zid, + sharing_ratio: data.sharing_ratio, + ...base, + }), + } + ); + const detailData = await detailResponse.json(); + if (detailData.ret === -1) { + alert(detailData.msg); + return; + } + message.success("提交成功"); + await getData( + type === "create" ? parseInt(data.collaborator_user_id) : data.id, + type, + data.key + ); + } catch (error) { + console.error(error); + } + }; + const [defaultColumns] = useState([ + { + title: "ID", + dataIndex: "collaborator_user_id", + editable: false, + }, + { + title: "合伙人分成比例", + dataIndex: "sharing_ratio", + editable: false, + width: 160, + }, + { + title: "操作", + dataIndex: "operation", + width: 160, + editable: false, + }, + ]); + const handleAdd = (newKey) => { + const newData = { + key: newKey, + collaborator_user_id: "", + sharing_ratio: "", + editable: false, + }; + // debugger; + setDataSource((pre) => [...pre, newData]); + setCount(newKey + 1); + }; + const handleSave = useCallback( + (row) => { + const newData = [...dataSource]; + const index = newData.findIndex((item) => row.key === item.key); + const item = newData[index]; + newData.splice(index, 1, { + ...item, + ...row, + }); + setDataSource(newData); + }, + [dataSource] + ); + const components = { + body: { + row: EditableRow, + cell: EditableCell, + }, + }; + const columns = useMemo(() => { + const newColumns = defaultColumns.map((col) => { + // if (!col.editable) { + // return col; + // } + return { + ...col, + onCell: (record) => ({ + record, + editable: col.editable, + dataIndex: col.dataIndex, + title: col.title, + with: col.width, + currentSharingRatioTotal: dataSource.reduce( + (total, item) => + total + (item.key === record.key ? 0 : item.sharing_ratio), + 0 + ), + zone_third_partner_sharing_ratio, + handleSave, + handleSetEditable, + handleDelete, + handleSubmit, + }), + }; + }); + return newColumns; + }, [ + defaultColumns, + handleSave, + handleDelete, + handleSetEditable, + handleSubmit, + ]); + return ( +
+ + "editable-row"} + bordered + dataSource={dataSource} + columns={columns} + pagination={{ + pageSize: 5, + total: count, + }} + /> + + ); +}; +export default PartnerComponent; diff --git a/src/pages/StreamerSpace/index.jsx b/src/pages/StreamerSpace/index.jsx index 962b67a..4ea8fc8 100644 --- a/src/pages/StreamerSpace/index.jsx +++ b/src/pages/StreamerSpace/index.jsx @@ -13,12 +13,14 @@ import { } from "antd"; import baseRequest from "../../utils/baseRequest"; import { useNavigate } from "react-router-dom"; - +import PartnerComponent from "./components/PartnerComponent"; //tab内容 const StreamerSpaceContent = () => { const navigate = useNavigate(); const { TextArea } = Input; const [superSingles, setSuperSingles] = useState([]); + // 合伙人数据 + const [partners, setPartners] = useState([]); //展示的表头 const [showColumns, setShowColumns] = useState([ "baseInfo", @@ -226,6 +228,14 @@ const StreamerSpaceContent = () => { 添加代运营 )} + {record.ratio.zone_third_partner?.third_partner_account?.mid && ( + + )} @@ -1367,6 +1427,35 @@ const StreamerSpaceContent = () => { )} + {/* 编辑合伙人Modal是否可见 */} + {isPartnerModalOpen && ( + { + setPartnersModalOpen(false); + setDefaultValues({}); + const searchValue = searchForm.getFieldsValue(); + if (searchValue.id) { + search(searchValue); + } else { + getAllSpace(); + } + }} + style={{ minWidth: 600 }} + > +
+

合伙人设置

+ +
+
+ )} ); };