form generator

src/views/tool/build/DraggableItem.jsx

@@ -0,0 +1,239 @@
+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) => {
+              // console.log(event);
+              // // console.log(this.currentItem.__config__.defaultValue);
+              // this.$set(config, "defaultValue", event);
+              // // console.log(this.currentItem.__config__.defaultValue);
+              this.currentItem.__config__.defaultValue = event;
+              // config.defaultValue = 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) => {
+          this.currentItem.__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);
+  },
+});