阿里低代码插件扩展（系统管理插件）

在阿里低代码DEMO上扩展系统管理插件

效果如下： 能够进行系统的添加、编辑和删除

新建一个react组件

（1）引入 ILowCodePluginContext，再调用skeleton的add方法进行配置添加

// 项目切换、添加插件
import React from 'react';
import {
  ILowCodePluginContext,
  config
} from '@alilc/lowcode-engine';
// fusion/next UI库
import { Select, Button, Dialog, Message } from '@alifd/next';
const { Option } = Select;

import PubSub from 'pubsub-js'

// 自定义组件
import PSTree from './child-components/PS-Tree'
import PSForm from './child-components/PS-Form'
// import scenarios from '../../universal/scenarios.json';

// api引入
import Api from 'src/api/api'
// 网络请求
import { getSystem, addSystem, updateSystem, delSystem } from 'src/network/data'
import { nanoid } from "nanoid";

import './index.scss';
// const getCurrentScenarioName = () => {
//   // return 'index'
//   const list = location.href.split('/');
//   return list[list.length - 1].replace('.html', '');
// }

class Switcher extends React.Component {

  state = {
    isShowDialog: false, // 是否显示弹框
    footerActions: [], // 控制底部按钮显示
    // 项目目录
    treeData: [
      {
        // label: "系统",
        // key: "system",
        // selectable: false,
        // children: [
        //   {
        //     label: "大数据分析",
        //     key: "bigdata",
        //     // row_id: 1,
        //     data: {
        //       "row_id": 4,
        //       "name": "实时舆情",
        //       "style": "2",
        //       "remark": "舆情分析系统",
        //     }


        //     // selectable: false,
        //     // disabled: true
        //   },
        // ]
      }
    ],
    // 项目配置
    formData: {

    },
    defaultData: [
      {
        "label": "DEMO",
        "key": "project1"
      }
    ],
    // 点击新增后默认选中
    // defaultSelectedKeys: []
    // 新增按钮是否禁用
    newAddBtnIsDisabled: false,
    selectValue: '', // 选择的系统

  };
  componentDidMount() {
    // 加载系统
    this.getSystemData().then(()=>{
      this.defaultChooseFirstNode()
    })
    

  }
  // 获取系统数据
  getSystemData = async () => {
    let params = {
      page: 1,
      pageNum: 10
    }
    let res = await getSystem(params)
    console.log("查询的数据", res);
    this.dealData(res?.data?.list.reverse())
    // })
    return new Promise((resolve, reject) => {
      resolve('success')
    })
  }
  // 新增系统
  addSystem = (data: any) => {
    let params = {
      name: data.name,
      style: data._style,
      remark: data.remark
    }
    addSystem(params).then(async (res) => {
      console.log(res, '新增');
      Message.success("添加成功！");
      await this.getSystemData()
      this.clickTreeNode()

    }).catch(err => {
      Message.error(err);
    })
    this.setState({
      newAddBtnIsDisabled: false
    })
  }
  // 修改系统
  updateSystem = (data: any, id: any) => {
    let params = {
      data: {
        name: data.name,
        style: data._style,
        remark: data.remark
      },
      row_id: id
    }
    updateSystem(params).then(res => {
      console.log(res, '修改');
      Message.success("修改成功！");
      this.getSystemData()
    }).catch(err => {
      Message.error(err);
    })
    this.setState({
      newAddBtnIsDisabled: false
    })
  }
  // 删除系统
  delSystem = (id: any) => {
    let flag: boolean = true
    let params = {
      row_id: id
    }
    delSystem(params).then(async (res) => {
      Message.success("删除成功！");
      flag = true
      await this.getSystemData()
      // 判断当前选择的系统是否是刚刚删除的
      // 若是，就清空当前选择的值
      let index = this.state.treeData[0].children.findIndex(item => {
        return item.row_id == this.state.selectValue
      })
      if (index == -1) {
        this.setState({
          selectValue: ''
        })
      }
    }).catch(err => {
      flag = false
      Message.error(err);
    })
    return new Promise((resolve, reject) => {
      if (flag) {
        resolve(flag)
      } else {
        reject(flag)
      }
    })
  }
  // 处理数据
  dealData = (data: any) => {
    let newData: Array<object> = []
    data.forEach((item: any) => {
      newData.push({
        label: item.name,
        key: item.row_id,
        row_id: item.row_id,
        data: {
          name: item.name,
          style: item.style,
          remark: item.remark
        }

      })
    });
    this.setState({
      treeData: [{
        label: "系统",
        key: "system",
        selectable: false,
        children: [...newData]
      }]
    })
  }
  // 点击系统回调
  handleShowProject = (e: any) => {
    console.log(e);
    this.setState({ isShowDialog: true })
  };
  // 关闭弹框
  onClose = (e: any) => {
    console.log(e);
    this.setState({ isShowDialog: false })
    this.getSystemData()
    this.setState({
      newAddBtnIsDisabled: false
    })
  };
  handleSystemChange = (value: any, actionType: String, item: any) => {
    console.log("当前系统row_id", value, actionType, item);
    PubSub.publish('currentSystem', value)

    let style = (this.state.treeData[0] as any).children.find(item => {
      return item.key == value
    })?.data.style
    // 全局设置当前编辑的系统
    config.set('currentSystem', {
      systemId: value,
      style,
      systemName: item.label,
    })
    this.setState({
      selectValue: value
    })
  }
  // 点击新增按钮 新增系统
  handleAddSystem = () => {
    let id = nanoid()
    const node = {
      label: "新增",
      key: id,
      row_id: id,
      data: {
        name: '新增',
        style: '0',
        remark: ''
      }
    }
    this.setState({
      treeData: [{
        label: "系统",
        key: "system",
        selectable: false,
        children: [...(this.state.treeData[0] as any).children, node]
      }],
      newAddBtnIsDisabled: true
    }, () => { // 更新完成后的回调
      // this.setState({
      //   defaultSelectedKeys: [node.key]
      // })
      this.clickTreeNode()
      // }, 1000)

    })



  }
  // 点击新增的树节点
  clickTreeNode = (index?: number) => {
    let elementNode = document.getElementsByClassName('next-tree-node-inner')
    // setTimeout(() => {
    // let elementNode = document.querySelector('.next-selected')
    console.log(elementNode[1], '新增节点');
    if (index !== undefined) {

      elementNode[index].click()
      console.log("点击第一个");

    } else {
      elementNode[elementNode.length - 1].click()
    }

  }
  // 默认选择第一个系统节点
  defaultChooseFirstNode = ()=>{
    
    
    
    // 获取系统下拉并点击
    (document.querySelector('.system-select') as any)?.click()
    // 获取系统option节点并点击第一个
    setTimeout(()=>{
      let elementNode = document.querySelectorAll('[role="option"]') as any
      // console.log(elementNode, '系统节点');
      elementNode[0]?.click()
      // 点击页面管理
      ;(document.querySelector('.page-manage') as any)?.click()
      // 点击第一个页面
      
    },100)
    setTimeout(()=>{
      (document.getElementsByClassName('next-nav-item')[0] as any)?.click()
    },1000)
    
    // 获取页面节点并点击
    
    
    // console.log(systemNode, '系统节点');
  }

  render(): React.ReactNode {
    const { isShowDialog, footerActions, treeData, newAddBtnIsDisabled } = this.state
    console.log("渲染");

    return (
      <div className='project-switcher'>
        {/* 弹框 */}
        <Dialog
          className='project-switcher-dialog'
          v2
          title="系统配置"
          visible={isShowDialog}
          onClose={this.onClose}
          footer={false}
        >
          {/* 左侧树 */}
          <div className='project'>
            <div className="p-left">
              <PSTree treeData={treeData} handleAddSystem={this.handleAddSystem} newAddBtnIsDisabled={newAddBtnIsDisabled} ></PSTree>
            </div>
            <div className="p-right">
              <PSForm addSystem={this.addSystem} updateSystem={this.updateSystem} delSystem={this.delSystem} newAddBtnIsDisabled={newAddBtnIsDisabled} />
            </div>
          </div>


          {/* 右侧属性配置 */}
        </Dialog>
        <Select
          id="basic-demo"
          onChange={this.handleSystemChange}
          placeholder="请选择系统"
          style={{ width: 220 }}
          value={this.state.selectValue}
          className='system-select'
        >
          {/* defaultValue={treeData[0]['children'][0].key} */}
          {
            (treeData as any)[0]['children']?.map((system: any) => <Option value={system.key} data={system.data}>{system.label}</Option>)
          }
        </Select>
        <Button type="primary" onClick={this.handleShowProject} className='project-btn'>
          系统
        </Button>
      </div >

    )
  }
}
projectSwitcher.pluginName = 'projectSwitcher';

// 在此处进行注册
export const projectSwitcher = (ctx: ILowCodePluginContext) => {
  return {
    name: 'projectSwitcher',
    async init() {
      const { skeleton } = ctx;

      skeleton.add({
        name: 'projectSwitcher',
        area: 'topArea', // 选择top区域
        type: 'Widget', // 插件类型Widget
        props: {
          align: 'right', // 右对齐，在右侧显示
          // width: 80,
        },
        content: Switcher, // 上方的组件
      });
    },
  };
};
// 插件名称
projectSwitcher.pluginName = 'projectSwitcher';

（2）在场景中引入并进行注册