ruoyi-ui/src/views/tool/build/DraggableItem.jsx

import draggable from "vuedraggable";
import render from "@/utils/generator/render";
import { defineComponent } from "vue";
import { CopyDocument, Delete } from "@element-plus/icons-vue";

const components = {
  itemBtns(currentItem, index, list) {
    const { onCopyItem, onDeleteItem } = this.$attrs;
    return [
      <span
        class="drawing-item-copy"
        title="复制"
        onClick={(event) => {
          onCopyItem(currentItem, list);
          event.stopPropagation();
        }}
      >
        <el-icon>
          <CopyDocument />
        </el-icon>
      </span>,
      <span
        class="drawing-item-delete"
        title="删除"
        onClick={(event) => {
          onDeleteItem(index, list);
          event.stopPropagation();
        }}
      >
        <el-icon>
          <Delete />
        </el-icon>
      </span>,
    ];
  },
};
const layouts = {
  colFormItem(
    // h,
    currentItem,
    index,
    list
  ) {
    const { onActiveItem } = this.$attrs;
    const config = currentItem.__config__;
    // console.log(arguments, "argu");
    const child = renderChildren.apply(this, arguments);

    let className =
      this.activeId === config.formId
        ? "drawing-item active-from-item"
        : "drawing-item";
    if (this.formConf.unFocusedComponentBorder)
      className += " unfocus-bordered";
    let labelWidth = config.labelWidth ? `${config.labelWidth}px` : null;
    if (config.showLabel === false) labelWidth = "0";
    // console.log(child);
    return (
      <el-col
        span={config.span}
        class={className}
        onClick={(event) => {
          onActiveItem(currentItem);
          event.stopPropagation();
        }}
      >
        <el-form-item
          label-width={labelWidth}
          label={config.showLabel ? config.label : ""}
          required={config.required}
        >
          <render
            key={config.renderKey}
            conf={currentItem}
            onInput={(event) => {
              config.defaultValue = event;
            }}
          >
            {{
              default: child,
            }}
          </render>
        </el-form-item>
        {components.itemBtns.apply(this, arguments)}
      </el-col>
    );
  },
  rowFormItem(
    // h,
    currentItem,
    index,
    list
  ) {
    const { onActiveItem } = this.$attrs;
    const config = currentItem.__config__;
    // console.log(config);
    const className =
      this.activeId === config.formId
        ? "drawing-row-item active-from-item"
        : "drawing-row-item";
    let child = renderChildren.apply(this, arguments);

    if (currentItem.type === "flex") {
      child = (
        <el-row
          type={currentItem.type}
          justify={currentItem.justify}
          align={currentItem.align}
        >
          {child}
        </el-row>
      );
    }
    return (
      <el-col span={config.span}>
        <el-row
          gutter={config.gutter}
          class={className}
          onClick={(event) => {
            onActiveItem(currentItem);
            event.stopPropagation();
          }}
        >
          <span class="component-name">{config.componentName}</span>
          <draggable
            list={config.children || []}
            style={{
              width: "100%",
              height: "100%",
              display: "flex",
            }}
            animation={340}
            group="componentsGroup"
            class="drag-wrapper"
            item-key="id"
            draggable
          >
            {{
              item: ({ element, index }) => {
                const layout = layouts[element.__config__.layout];
                console.log(element, "element");
                if (layout) {
                  return layout.call(this, element, index, config.children);
                }
                return layoutIsNotFound.call(this);
              },
            }}
          </draggable>
          {components.itemBtns.apply(this, arguments)}
        </el-row>
      </el-col>
    );
  },
  raw(
    // h,
    currentItem,
    index,
    list
  ) {
    const config = currentItem.__config__;
    const child = renderChildren.apply(this, arguments);
    return (
      <render
        key={config.renderKey}
        conf={currentItem}
        onInput={(event) => {
          config.defaultValue = event;
        }}
      >
        {child}
      </render>
    );
  },
};

function renderChildren(
  // // h,
  currentItem,
  index,
  list
) {
  const config = currentItem.__config__;
  // // console.log(config, "config");
  if (!Array.isArray(config.children)) return null;
  return config.children.map((el, i) => {
    const layout = layouts[el.__config__.layout];
    // console.log(el.__config__.layout, `row's child`);
    if (layout) {
      return layout.call(
        this,
        // // h,
        el,
        i,
        config.children
      );
    }
    return layoutIsNotFound.call(this);
  });
}

function layoutIsNotFound() {
  throw new Error(`没有与${this.currentItem.__config__.layout}匹配的layout`);
}

export default defineComponent({
  name: "DraggableItem",
  components: {
    render,
    draggable,
  },
  props: ["currentItem", "index", "drawingList", "activeId", "formConf"],
  methods: {
    set(val) {
      this.currentItem.__config__.defaultValue = val;
    },
  },
  render() {
    // // console.log(this.currentItem.__config__.layout);
    const layout = layouts[this.currentItem.__config__.layout];
    // // console.log(this.currentItem);
    // // console.log(layout, "layout");
    if (layout) {
      return layout.call(
        this,
        // // h,
        this.currentItem,
        this.index,
        this.drawingList
      );
    }
    return layoutIsNotFound.call(this);
  },
});