form-designer-xinyi 1.0.0

package/packages/ui/antd/cascader/index.ts

@@ -0,0 +1,197 @@
+import { type ComponentConfigModel } from "@epic-designer/utils";
+export default {
+  component: async () => (await import("ant-design-vue")).Cascader,
+  groupName: "表单",
+  icon: "epic-icon-guanlian",
+  defaultSchema: {
+    label: "级联选择器",
+    type: "cascader",
+    field: "cascader",
+    input: true,
+    componentProps: {
+      options: [
+        {
+          label: "选项1",
+          value: "选项1",
+        },
+        {
+          label: "选项2",
+          value: "选项2",
+        },
+      ],
+      placeholder: "请选择",
+    },
+  },
+  config: {
+    attribute: [
+      {
+        label: "字段名",
+        type: "input",
+        field: "field",
+      },
+      {
+        label: "标题",
+        type: "input",
+        field: "label",
+      },
+      {
+        label: "默认值",
+        type: "cascader",
+        field: "componentProps.defaultValue",
+      },
+      {
+        label: "占位内容",
+        type: "input",
+        field: "componentProps.placeholder",
+      },
+      {
+        label: "尺寸",
+        type: "select",
+        componentProps: {
+          placeholder: "请选择",
+          allowClear: true,
+          options: [
+            {
+              label: "large",
+              value: "large",
+            },
+            {
+              label: "middle",
+              value: "middle",
+            },
+            {
+              label: "small",
+              value: "small",
+            },
+          ],
+        },
+        field: "componentProps.size",
+      },
+      {
+        label: "弹出框位置",
+        type: "select",
+        componentProps: {
+          placeholder: "请选择",
+          options: [
+            {
+              label: "bottomLeft",
+              value: "bottomLeft",
+            },
+            {
+              label: "bottomRight",
+              value: "bottomRight",
+            },
+            {
+              label: "topLeft",
+              value: "topLeft",
+            },
+            {
+              label: "topRight",
+              value: "topRight",
+            },
+          ],
+        },
+        field: "componentProps.placement",
+      },
+      {
+        label: "可搜索",
+        type: "switch",
+        field: "componentProps.showSearch",
+      },
+      {
+        label: "无边框",
+        type: "switch",
+        componentProps: {
+          checkedValue: false,
+          unCheckedValue: true,
+        },
+        field: "componentProps.bordered",
+      },
+      {
+        label: "多选",
+        type: "switch",
+        field: "componentProps.multiple",
+      },
+      {
+        label: "标签最大长度",
+        type: "number",
+        field: "componentProps.maxTagTextLength",
+        componentProps: {
+          placeholder: "请输入",
+        },
+        show: ({ values }) => values.componentProps.multiple,
+      },
+      {
+        label: "标签显示数量",
+        type: "number",
+        field: "componentProps.maxTagCount",
+        componentProps: {
+          placeholder: "请输入",
+        },
+        show: ({ values }) => values.componentProps.multiple,
+      },
+
+      {
+        label: "回填方式",
+        type: "select",
+        componentProps: {
+          options: [
+            {
+              label: "SHOW_PARENT",
+              value: "SHOW_PARENT",
+            },
+            {
+              label: "SHOW_CHILD",
+              value: "SHOW_CHILD",
+            },
+          ],
+          placeholder: "请选择",
+        },
+        field: "componentProps.showCheckedStrategy",
+        show: ({ values }) => values.componentProps.multiple,
+      },
+
+      {
+        label: "可清空",
+        type: "switch",
+        field: "componentProps.allowClear",
+      },
+      {
+        label: "禁用",
+        type: "switch",
+        field: "componentProps.disabled",
+      },
+      {
+        label: "隐藏",
+        type: "switch",
+        field: "componentProps.hidden",
+      },
+      {
+        label: "选项管理",
+        type: "EOptionsEditor",
+        layout: "vertical",
+        field: "componentProps.options",
+        componentProps: {
+          tree: true,
+        },
+      },
+      {
+        label: "表单校验",
+        type: "ERuleEditor",
+        layout: "vertical",
+        field: "rules",
+        describe: "校验规则需要配合表单使用",
+        componentProps: {
+          ruleType: "array",
+        },
+      },
+    ],
+    event: [
+      {
+        type: "change",
+        describe: "值变化时",
+      },
+    ],
+  },
+  bindModel: "value",
+} as ComponentConfigModel;

package/packages/ui/antd/checkbox/index.ts

@@ -0,0 +1,99 @@
+import { type ComponentConfigModel } from "@epic-designer/utils";
+export default {
+  component: async () => (await import("ant-design-vue")).CheckboxGroup,
+  groupName: "表单",
+  icon: "epic-icon-duoxuan1",
+  defaultSchema: {
+    label: "多选框",
+    type: "checkbox",
+    field: "checkbox",
+    input: true,
+    componentProps: {
+      options: [
+        {
+          label: "选项1",
+          value: "选项1",
+        },
+        {
+          label: "选项2",
+          value: "选项2",
+        },
+      ],
+    },
+  },
+  config: {
+    attribute: [
+      {
+        label: "字段名",
+        type: "input",
+        field: "field",
+      },
+      {
+        label: "标题",
+        type: "input",
+        field: "label",
+      },
+      {
+        label: "默认值",
+        type: "checkbox",
+        field: "componentProps.defaultValue",
+      },
+      {
+        label: "尺寸",
+        type: "select",
+        componentProps: {
+          placeholder: "请选择",
+          allowClear: true,
+          options: [
+            {
+              label: "large",
+              value: "large",
+            },
+            {
+              label: "middle",
+              value: "middle",
+            },
+            {
+              label: "small",
+              value: "small",
+            },
+          ],
+        },
+        field: "componentProps.size",
+      },
+      {
+        label: "禁用",
+        type: "switch",
+        field: "componentProps.disabled",
+      },
+      {
+        label: "隐藏",
+        type: "switch",
+        field: "componentProps.hidden",
+      },
+      {
+        label: "选项管理",
+        type: "EOptionsEditor",
+        layout: "vertical",
+        field: "componentProps.options",
+      },
+      {
+        label: "表单校验",
+        type: "ERuleEditor",
+        layout: "vertical",
+        field: "rules",
+        describe: "校验规则需要配合表单使用",
+        componentProps: {
+          ruleType: "array",
+        },
+      },
+    ],
+    event: [
+      {
+        type: "change",
+        describe: "值变化时",
+      },
+    ],
+  },
+  bindModel: "value",
+} as ComponentConfigModel;

package/packages/ui/antd/col/col.ts

@@ -0,0 +1,31 @@
+import { defineComponent, h, renderSlot, type PropType } from "vue";
+import { Col } from "ant-design-vue";
+import { type ComponentSchema } from "@epic-designer/core/types/epic-designer";
+export default defineComponent({
+  props: {
+    componentSchema: {
+      type: Object as PropType<ComponentSchema>,
+      require: true,
+      default: () => ({}),
+    },
+  },
+  setup(props, { attrs, slots }) {
+    return () => {
+      const componentSchema = {
+        ...props.componentSchema,
+        title: props.componentSchema?.label ?? "",
+      } as any;
+      const children = componentSchema.children;
+      delete componentSchema.children;
+
+      return h(Col, componentSchema, {
+        default: () =>
+          renderSlot(slots, "edit-node", {}, () =>
+            children.map((subcomponentSchema: ComponentSchema) =>
+              renderSlot(slots, "node", { componentSchema: subcomponentSchema })
+            )
+          ),
+      });
+    };
+  },
+});

package/packages/ui/antd/col/index.ts

@@ -0,0 +1,22 @@
+import { type ComponentConfigModel } from '@epic-designer/utils'
+export default {
+  component:  () => import('./col'),
+  defaultSchema: {
+    label: '栅格布局-列',
+    type: 'col',
+    children: [],
+    componentProps: {
+      span: 6
+    }
+  },
+  config: {
+    attribute: [
+      {
+        label: '占位格数',
+        type: 'number',
+        field: 'componentProps.span'
+      }
+
+    ]
+  }
+} as ComponentConfigModel

package/packages/ui/antd/color-picker/index.ts

@@ -0,0 +1,107 @@
+import { type ComponentConfigModel } from "@epic-designer/utils";
+export default {
+  component: async () => (await import("ant-design-vue")).Input,
+  groupName: "表单",
+  icon: "epic-icon-yanse",
+  defaultSchema: {
+    label: "颜色选择器",
+    type: "color-picker",
+    field: "color-picker",
+    input: true,
+    componentProps: {
+      type: "color",
+      style: {
+        width: "80px",
+      },
+    },
+  },
+  config: {
+    attribute: [
+      {
+        label: "字段名",
+        type: "input",
+        field: "field",
+      },
+      {
+        label: "标题",
+        type: "input",
+        field: "label",
+      },
+      {
+        label: "默认值",
+        type: "input",
+        field: "componentProps.defaultValue",
+      },
+      {
+        label: "尺寸",
+        type: "select",
+        componentProps: {
+          placeholder: "请选择",
+          allowClear: true,
+          options: [
+            {
+              label: "large",
+              value: "large",
+            },
+            {
+              label: "middle",
+              value: "middle",
+            },
+            {
+              label: "small",
+              value: "small",
+            },
+          ],
+        },
+        field: "componentProps.size",
+      },
+      {
+        label: "无边框",
+        type: "switch",
+        componentProps: {
+          checkedValue: false,
+          unCheckedValue: true,
+        },
+        field: "componentProps.bordered",
+      },
+      {
+        label: "可清空",
+        type: "switch",
+        field: "componentProps.allowClear",
+      },
+      {
+        label: "禁用",
+        type: "switch",
+        field: "componentProps.disabled",
+      },
+      {
+        label: "隐藏",
+        type: "switch",
+        field: "componentProps.hidden",
+      },
+      {
+        label: "表单校验",
+        type: "ERuleEditor",
+        layout: "vertical",
+        field: "rules",
+        describe: "校验规则需要配合表单使用",
+      },
+    ],
+    event: [
+      {
+        type: "change",
+        describe: "值修改时",
+      },
+      {
+        type: "focus",
+        describe: "获取焦点时",
+      },
+      {
+        type: "blur",
+        describe: "失去焦点时",
+      },
+    ],
+    action: [],
+  },
+  bindModel: "value",
+} as ComponentConfigModel;

package/packages/ui/antd/date-picker/datePicker.ts

@@ -0,0 +1,47 @@
+import { defineComponent, h, watch } from "vue";
+import { DatePicker } from "ant-design-vue";
+// 二次封装组件
+export default defineComponent({
+  name: "EDatePicker",
+  emits: ["update:modelValue", "change", "blur"],
+  props: {
+    modelValue: {
+      type: [String, Object, Array],
+      default: null,
+    },
+    type: {
+      type: String,
+      default: "date",
+    },
+  },
+  setup(props, { emit }) {
+    watch(
+      () => props.type,
+      () => {
+        handleUpdate();
+      }
+    );
+
+    function handleUpdate(e = null): void {
+      emit("update:modelValue", e);
+      emit("change", e);
+      emit("blur", e);
+    }
+    return () => {
+      let cmp: any = DatePicker;
+
+      const compProps: Record<string, any> = {
+        value: props.modelValue,
+        showTime: props.type.includes("time"),
+        picker: props.type.replace(/range$/, ""),
+        "onUpdate:value": handleUpdate,
+      };
+
+      // 判断日期类型，渲染相应组件
+      if (props.type.includes("range")) {
+        cmp = DatePicker.RangePicker;
+      }
+      return h(cmp, compProps);
+    };
+  },
+});