project-admin/src/pages/dictionary/scene/index.jsx

import React from "react";
import { PlusOutlined, DeleteOutlined } from "@ant-design/icons";
import { Button, Card, Row, Col, Tree, Tooltip, Popconfirm, Spin } from "antd";
import Page from "@/components/Page";
import { getTdSceneMgtList, deleteTdSceneMgt } from "@/service/tdSceneMgt";
import { arr2Tree } from "@/utils/array";
import useBool from "@/utils/hooks/useBool";
import Form from "./components/Form";

import styles from "./styles.module.less";

export default (props) => {
  const [loading, startLoading, stopLoading] = useBool();
  const [list, setList] = React.useState([]);
  const [current, setCurrernt] = React.useState({});
  const [parentId, setParentId] = React.useState();

  const [parentList, treeData] = React.useMemo(() => {
    const plist = [{ sceneId: "-1", sceneName: "根节点" }].concat(list);
    const [tree] = arr2Tree(
      (list || []).map((x) => ({
        title: x.sceneName,
        key: x.sceneId,
        parentId: x.parentId,
        raw: x,
      }))
    );
    return [plist, tree];
  }, [list]);

  const changeCurrent = (row) => {
    setCurrernt(row);
    setParentId(row?.parentId || "-1");
  };

  const onSelect = (selectedKeys, e) => {
    changeCurrent(e.node.raw);
  };

  const onClick = (row) => {
    changeCurrent(row);
  };
  // console.log(current)
  // console.log(parentList)

  const onAdd = (parent = "-1") => {
    console.log(111);
    const a = {};
    setParentId(parent);
    setCurrernt(a);
  };

  const onDelete = (row) => {
    deleteTdSceneMgt(row.sceneId).then(() => {
      queryList();
    });
  };

  const queryList = React.useCallback(() => {
    startLoading();
    getTdSceneMgtList({ pageSize: 500 }).then((res) => {
      setList(res.records || []);
      stopLoading();
      // changeCurrent();
      // const list = [];
    });
  }, []);

  const onFormChange = () => {
    // 重新查一次数据
    queryList();
  };

  React.useEffect(() => {
    queryList();
  }, []);
  return (
    <Page>
      <Row gutter={24} className={styles.treeRow}>
        <Col span={8} style={{ overflow: "hidden" }}>
          <Card
            title="场景"
            onSelect={onSelect}
            extra={
              <Button type="link" onClick={() => onAdd()}>
                新增
              </Button>
            }
          >
            <Spin spinning={loading}>
              <Tree
                height="100%"
                blockNode
                defaultExpandParent={true}
                treeData={treeData}
                // onSelect={onSelect}
                titleRender={(node) => (
                  <div
                    style={{ display: "flex" }}
                    onClick={(e) => e.stopPropagation()}
                  >
                    <div
                      style={{
                        lineHeight: "32px",
                        flex: 1,
                        width: 0,
                      }}
                      onClick={() => onClick(node.raw)}
                    >
                      <div
                        style={{
                          overflow: "hidden",
                          whiteSpace: "nowrap",
                          textOverflow: "ellipsis",
                        }}
                      >
                        {node.title}
                      </div>
                    </div>
                    <div style={{ width: "80px", flex: "none" }}>
                      <Tooltip title="新增子节点">
                        <Button
                          type="link"
                          icon={<PlusOutlined />}
                          onClick={() => onAdd(node.raw.sceneId)}
                        ></Button>
                      </Tooltip>
                      <Tooltip title="删除节点">
                        <Popconfirm
                          title="确认进行删除操作?"
                          onConfirm={() => onDelete(node.raw)}
                        >
                          <Button
                            type="link"
                            danger
                            icon={<DeleteOutlined />}
                          ></Button>
                        </Popconfirm>
                      </Tooltip>
                    </div>
                  </div>
                )}
              />
            </Spin>
          </Card>
        </Col>
        <Col span={16}>
          {parentId && (
            <Card>
              <Form
                row={current}
                parentId={parentId}
                list={parentList}
                onChange={onFormChange}
              />
            </Card>
          )}
        </Col>
      </Row>
    </Page>
  );
};