@riil-frontend/component-page-config/es/components/edit-layout/EditTabDrawer.js

page config components,include components list,component attribute panel and page canvas

import _Drawer from "@alifd/next/es/drawer";
import _Button from "@alifd/next/es/button";
import _Dialog from "@alifd/next/es/dialog";
import _extends from "@babel/runtime/helpers/extends";
import _Form from "@alifd/next/es/form";
import _Input from "@alifd/next/es/input";
import _Table from "@alifd/next/es/table";
import React, { useState, useEffect } from "react";
import FooterLayout from "@riil-frontend/component-footer-layout";
import AddDataGroup from "@riil-frontend/component-add-data-group";
import DragLayoutCanvas from "../drag-panel";
import "./EditTabDrawer.scss";

var EditTabDrawer = function EditTabDrawer(props) {
  var visible = props.visible,
      _onClose = props.onClose,
      _onOk = props.onOk,
      appPageConfig = props.appPageConfig;
  var configs = appPageConfig.configs;

  var _useState = useState([]),
      tableData = _useState[0],
      setTableData = _useState[1];

  var columnNodes = [/*#__PURE__*/React.createElement(_Table.Column, {
    key: "pageName",
    cell: function cell(val, index, record) {
      return layerNameInput(val, index, record, "pageName");
    },
    title: "\u9875\u7B7E\u540D\u79F0",
    dataIndex: "pageName"
  })];

  var layerNameInput = function layerNameInput(val, index, record, dataIndex) {
    return /*#__PURE__*/React.createElement(_Form.Item, {
      label: "",
      required: true,
      requiredTrigger: "onBlur",
      requiredMessage: "\u540D\u79F0\u4E0D\u80FD\u4E3A\u7A7A"
    }, /*#__PURE__*/React.createElement(_Input, {
      maxLength: 6,
      onChange: function onChange(v, e) {
        layerNameChange(v, record, dataIndex);
      },
      value: val,
      style: {
        width: "100%"
      },
      name: dataIndex + index,
      disabled: record.disabled
    }));
  };

  var layerNameChange = function layerNameChange(value, record, dataIndex) {
    var newData = tableData.map(function (ele) {
      if (ele.myRowKey === record.myRowKey) {
        ele[dataIndex] = value;
        return ele;
      } else {
        return ele;
      }
    });
    setTableData(newData);
  };

  useEffect(function () {
    var tbdata = configs.map(function (ele) {
      return {
        pageName: ele.pageName,
        pageId: ele.pageId,
        myRowKey: ele.pageId
      };
    });
    setTableData(tbdata);
  }, [configs]);

  var convertSubmitData = function convertSubmitData() {
    var _appPageConfig$config, _appPageConfig$config2;

    //使用第一个页签的layoutConfig作为模板，实现新建相同配置的页签模板
    var firstLayout = (appPageConfig === null || appPageConfig === void 0 ? void 0 : (_appPageConfig$config = appPageConfig.configs) === null || _appPageConfig$config === void 0 ? void 0 : (_appPageConfig$config2 = _appPageConfig$config[0]) === null || _appPageConfig$config2 === void 0 ? void 0 : _appPageConfig$config2.layoutConfig) || {};
    var oldDataObj = {};
    configs.forEach(function (ele) {
      oldDataObj[ele.pageId] = ele;
    });
    var newData = tableData.map(function (ele) {
      if (oldDataObj[ele.pageId]) {
        return _extends({}, oldDataObj[ele.pageId], {
          pageName: ele.pageName
        });
      } else {
        var layoutConfig = _extends({}, DragLayoutCanvas.defaultProps.pageConfig.layoutConfig, firstLayout);

        return {
          pageId: ele.myRowKey,
          pageName: ele.pageName,
          layoutConfig: layoutConfig,
          widgets: []
        };
      }
    });
    return _extends({}, appPageConfig, {
      configs: newData
    });
  };

  var onSubmit = function onSubmit(v, e) {
    if (!e) {
      var isDelOld = false;

      var _loop = function _loop(index) {
        var ele = configs[index];
        var isIn = !!tableData.find(function (item) {
          return item.pageId === ele.pageId;
        });

        if (!isIn) {
          isDelOld = true;
          return "break";
        }
      };

      for (var index = 0; index < configs.length; index++) {
        var _ret = _loop(index);

        if (_ret === "break") break;
      }

      if (isDelOld) {
        _Dialog.confirm({
          content: "此操作中有删除页签操作，是否确定删除？",
          onOk: function onOk() {
            var newApp = convertSubmitData();

            _onOk(newApp);

            _onClose();
          }
        });
      } else {
        var newApp = convertSubmitData();

        _onOk(newApp);

        _onClose();
      }
    }
  };

  return /*#__PURE__*/React.createElement(_Drawer, {
    width: 408,
    visible: true,
    onClose: function onClose() {
      _onClose();
    },
    closeable: "close",
    bodyStyle: {
      height: "calc(100% - 46px)",
      padding: 0
    },
    title: "\u7F16\u8F91\u9875\u7B7E"
  }, /*#__PURE__*/React.createElement(_Form, {
    style: {
      height: "100%"
    }
  }, /*#__PURE__*/React.createElement(FooterLayout, {
    className: "edit-tab-drawer-footer-layout",
    footer: [/*#__PURE__*/React.createElement(_Form.Item, null, /*#__PURE__*/React.createElement(_Form.Submit, {
      type: "primary",
      key: 5,
      onClick: onSubmit,
      validate: true
    }, "\u786E\u5B9A")), /*#__PURE__*/React.createElement(_Button, {
      key: 6,
      onClick: function onClick() {
        _onClose();
      }
    }, "\u53D6\u6D88")],
    align: "right"
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      height: "100%"
    }
  }, /*#__PURE__*/React.createElement(AddDataGroup, {
    minDataLength: 1,
    isShowAddButton: true,
    canDrag: true,
    tableData: tableData,
    isShowDeleteButton: true,
    onChange: function onChange(val) {
      setTableData(val);
    },
    addDisabled: false,
    value: tableData,
    ColumnNodes: columnNodes,
    defaultRowData: {
      pageName: "",
      disabled: false
    }
  })))));
};

export default EditTabDrawer;