diff --git a/src/pages/StreamerSpace/components/PartnerComponent/index.jsx b/src/pages/StreamerSpace/components/PartnerComponent/index.jsx
new file mode 100644
index 0000000..02fccf5
--- /dev/null
+++ b/src/pages/StreamerSpace/components/PartnerComponent/index.jsx
@@ -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 (
+ <Form form={form} component={false} onFinish={handleCheck}>
+ <EditableContext.Provider value={form}>
+ <tr {...props} />
+ </EditableContext.Provider>
+ </Form>
+ );
+};
+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 ? (
+ <Button
+ type="text"
+ onClick={() => handleSetEditable(record.key)}
+ >
+ <span className="text-blue-400">编辑</span>
+ </Button>
+ ) : (
+ <Button
+ type="primary"
+ onClick={() => handleSubmit(record, "update")}
+ >
+ 确定
+ </Button>
+ )}
+ </>
+ ) : (
+ <Button
+ type="primary"
+ onClick={async () => {
+ form
+ .validateFields()
+ .then((values) => {
+ handleSubmit({ ...values, key: record.key }, "create");
+ })
+ .catch((errorInfo) => {
+ console.log("Failed:", errorInfo);
+ });
+ // debugger;
+ }}
+ >
+ <span>创建</span>
+ </Button>
+ )}
+ </>
+ {record?.id && (
+ <Popconfirm
+ title="确定要删除吗?"
+ okText="确定"
+ cancelText="取消"
+ onConfirm={() => handleDelete(record.id)}
+ >
+ <Button type="text">
+ <span className="text-red-400">删除</span>
+ </Button>
+ </Popconfirm>
+ )}
+ </>
+ ) : editing && record?.key !== undefined ? (
+ <Form.Item
+ style={{ margin: 0 }}
+ name={dataIndex}
+ rules={[{ required: true, message: `${title} 是必填的.` }]}
+ >
+ {dataIndex === "collaborator_user_id" ? (
+ <Input
+ ref={inputRef}
+ // onPressEnter={save}
+ onBlur={save}
+ placeholder="请输入ID"
+ allowClear
+ disabled={record?.id}
+ />
+ ) : (
+ <Select
+ ref={inputRef}
+ // onPressEnter={save}
+ onBlur={save}
+ placeholder="请选择分成比例"
+ >
+ {
+ // 分成比例
+ Array.from(
+ {
+ length:
+ zone_third_partner_sharing_ratio * 100 -
+ currentSharingRatioTotal * 100,
+ },
+ (_, index) => (
+ <Select.Option
+ key={index}
+ value={parseFloat(((index + 1) / 100).toFixed(2))}
+ >
+ {`${index + 1} %`}
+ </Select.Option>
+ )
+ )
+ }
+ </Select>
+ )}
+ </Form.Item>
+ ) : (
+ <div
+ className="editable-cell-value-wrap"
+ style={{ paddingInlineEnd: 24 }}
+ // onClick={toggleEdit}
+ >
+ {dataIndex === "sharing_ratio"
+ ? `${
+ record[dataIndex] &&
+ parseFloat((record[dataIndex] * 100)?.toPrecision(2))
+ }%`
+ : children}
+ </div>
+ );
+ return <td {...restProps}>{childNode}</td>;
+};
+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 (
+ <div>
+ <Button
+ onClick={() => handleAdd(count)}
+ type="primary"
+ style={{
+ marginBottom: 16,
+ }}
+ >
+ 添加合伙人
+ </Button>
+ <Table
+ components={components}
+ rowClassName={() => "editable-row"}
+ bordered
+ dataSource={dataSource}
+ columns={columns}
+ pagination={{
+ pageSize: 5,
+ total: count,
+ }}
+ />
+ </div>
+ );
+};
+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 = () => {
添加代运营
</Button>
)}
+ {record.ratio.zone_third_partner?.third_partner_account?.mid && (
+ <Button
+ type="primary"
+ onClick={() => handlePartnersModal(record)}
+ >
+ 编辑合伙人
+ </Button>
+ )}
<Button
onClick={() =>
navigate(`/editSpacePost?user_id=${record.baseInfo.id}`)
@@ -689,6 +699,12 @@ const StreamerSpaceContent = () => {
// setShowData([]);
setDefaultValues({});
setIsAddAgencyModalOpen(false);
+ const searchValue = searchForm.getFieldsValue();
+ if (searchValue.id) {
+ search(searchValue);
+ } else {
+ getAllSpace();
+ }
};
//点击添加代运营Modal取消按钮
const handleAddAgencyModalCancel = () => {
@@ -721,8 +737,11 @@ const StreamerSpaceContent = () => {
console.error(error);
}
};
+
//选中用户
const [selectedUser, setSelectedUser] = useState();
+ //选中合伙人
+ const [selectedPartners, setSelectedPartners] = useState([]);
const handleSelected = () => {
if (selectedUser) {
setSelectedUser();
@@ -742,6 +761,8 @@ const StreamerSpaceContent = () => {
//编辑代运营Modal是否可见
const [isAgencyModalOpen, setIsAgencyModalOpen] = useState(false);
+ //编辑合伙人Modal是否可见
+ const [isPartnerModalOpen, setPartnersModalOpen] = useState(false);
//点击编辑代运营按钮
const handleAgencyModal = (record) => {
setDefaultValues(record);
@@ -749,6 +770,11 @@ const StreamerSpaceContent = () => {
setSelectedUser();
setUserInfo();
};
+ //点击编辑代运营按钮
+ const handlePartnersModal = (record) => {
+ setDefaultValues(record);
+ setPartnersModalOpen(true);
+ };
//提交编辑代运营表单
const handleSubmitAgencySetting = async (value) => {
if (!value.sharing_ratio?.toString() || !value.is_hided?.toString()) {
@@ -798,6 +824,25 @@ const StreamerSpaceContent = () => {
alert(_data.msg);
return;
}
+ const _response2 = await fetch(`/op/zone_collaborator/create_batch`, {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ body: JSON.stringify({
+ list: partners.map((item) => ({
+ zid: defaultValues.key,
+ collaborator_user_id: parseInt(item.collaborator_mid),
+ sharing_ratio: parseInt(item.sharing_ratio, 10) / 100,
+ })),
+ ...base,
+ }),
+ });
+ const _data2 = await _response2.json();
+ if (_data2.ret === -1) {
+ alert(_data2.msg);
+ return;
+ }
} catch (error) {
console.error(error);
}
@@ -805,6 +850,12 @@ const StreamerSpaceContent = () => {
// setShowData([]);
setDefaultValues({});
setIsAgencyModalOpen(false);
+ const searchValue = searchForm.getFieldsValue();
+ if (searchValue.id) {
+ search(searchValue);
+ } else {
+ getAllSpace();
+ }
};
//删除代运营
@@ -831,6 +882,12 @@ const StreamerSpaceContent = () => {
// setShowData([]);
setDefaultValues({});
setIsAgencyModalOpen(false);
+ const searchValue = searchForm.getFieldsValue();
+ if (searchValue.id) {
+ search(searchValue);
+ } else {
+ getAllSpace();
+ }
} catch (error) {
console.error(error);
}
@@ -887,7 +944,7 @@ const StreamerSpaceContent = () => {
onFinishFailed={onModalFormFinishFailed}
autoComplete="off"
>
- <div className="flex flex-col overflow-y-scroll">
+ <div className="flex flex-col">
<div className="flex flex-row mb-4">
<Image
width={80}
@@ -1091,7 +1148,7 @@ const StreamerSpaceContent = () => {
open={isAddAgencyModalOpen}
onCancel={handleAddAgencyModalCancel}
>
- <div className="flex flex-col overflow-y-scroll">
+ <div className="flex flex-col">
<div className="flex flex-row mb-4">
<Image
width={80}
@@ -1222,8 +1279,10 @@ const StreamerSpaceContent = () => {
footer={null}
open={isAgencyModalOpen}
onCancel={handleAgencyModalCancel}
+ onClose={handleAgencyModalCancel}
+ style={{ minWidth: 600 }}
>
- <div className="flex flex-col overflow-y-scroll">
+ <div className="flex flex-col">
<div className="flex flex-row mb-4">
<Image
width={80}
@@ -1359,6 +1418,7 @@ const StreamerSpaceContent = () => {
<option value={0}>否</option>
</select>
</Form.Item>
+
<Button type="primary" htmlType="submit">
确认
</Button>
@@ -1367,6 +1427,35 @@ const StreamerSpaceContent = () => {
</div>
</Modal>
)}
+ {/* 编辑合伙人Modal是否可见 */}
+ {isPartnerModalOpen && (
+ <Modal
+ footer={null}
+ open={isPartnerModalOpen}
+ onCancel={() => {
+ setPartnersModalOpen(false);
+ setDefaultValues({});
+ const searchValue = searchForm.getFieldsValue();
+ if (searchValue.id) {
+ search(searchValue);
+ } else {
+ getAllSpace();
+ }
+ }}
+ style={{ minWidth: 600 }}
+ >
+ <div className="flex flex-col">
+ <p className="mb-4">合伙人设置</p>
+ <PartnerComponent
+ getDataSource={setPartners}
+ zid={defaultValues?.key}
+ zone_third_partner_sharing_ratio={
+ defaultValues?.ratio?.zone_third_partner?.sharing_ratio
+ }
+ />
+ </div>
+ </Modal>
+ )}
</div>
);
};