import { render } from "@testing-library/react";
import React, {
useEffect,
useState,
useRef,
FC,
PropsWithChildren,
} from "react";
import { Checkbox, Space, List, Button, NavBar, Toast } from "antd-mobile";
import { selectEmployeeList, bindTaskStep } from "../sevices/codeing/codeing";
import { Item } from "rc-menu";
interface IPerson {
onConfirm: () => void;
taskStepId: number;
}
interface ICheck {
code: string;
name: string;
}
const ListItemWithCheckbox: FC<
PropsWithChildren<{
item: string;
}>
> = (props) => {
const checkboxRef = useRef<any>(null);
return (
<List.Item
prefix={
<div onClick={(e) => e.stopPropagation()}>
<Checkbox value={props.item} ref={checkboxRef} />
</div>
}
onClick={() => {
checkboxRef.current?.toggle();
}}
arrow={false}
>
{props.item}
</List.Item>
);
};
const PersonManage: React.FC<IPerson> = (props: any) => {
const [person, setPerson] = useState<Array<ICheck>>([]);
const [value, setValue] = useState(["Apple"]);
const { taskStepId } = props;
useEffect(() => {
(async function fn() {
const response = await selectEmployeeList(null);
setPerson(response.data);
console.log(response, "response");
})();
}, []);
const handleSave = async () => {
if (value.length == 0) {
Toast.show({
icon: "fail",
content: "请至少选择一项人员绑定",
});
return false;
}
const response = await bindTaskStep({
empIds: value,
taskStepId: taskStepId,
});
if (response.code == 200) {
props.onConfirm();
Toast.show({
icon: "success",
content: "绑定人员成功",
});
} else {
Toast.show({
icon: "fail",
content: response.msg,
});
}
};
const back = () => {
props.onConfirm();
Toast.show({
content: "返回任务界面",
duration: 1000,
});
};
return (
<div>
<NavBar back="返回" onBack={back}>
绑定人员
</NavBar>
<div className="">
<Checkbox.Group
onChange={(v) => {
setValue(v as string[]);
}}
>
<Checkbox.Group>
<List>
{person &&
person.map((item: any, index) => (
<ListItemWithCheckbox key={item.id} item={} />
))}
</List>
</Checkbox.Group>
{/* <List.Item onClick={() => {}}>
{person &&
person.map((item: any, index) => (
<Checkbox value={item.id}>
[{item.id}]{}
</Checkbox>
))}
</List.Item> */}
</Checkbox.Group>
<Button block color="primary" size="large" onClick={handleSave}>
确定绑定
</Button>
</div>
</div>
);
};