form-designer-xinyi 1.0.0

package/packages/ui/elementPlus/slider/index.ts

@@ -0,0 +1,237 @@
+import { type ComponentConfigModel } from "@epic-designer/utils";
+export default {
+  component: async () => (await import("element-plus")).ElSlider,
+  groupName: "表单",
+  icon: "epic-icon-menu",
+  defaultSchema: {
+    label: "滑块",
+    type: "slider",
+    field: "slider",
+    input: true,
+    componentProps: {
+      placement: "top-start",
+      showTooltip: true,
+    },
+  },
+  config: {
+    attribute: [
+      {
+        label: "字段名",
+        type: "input",
+        field: "field",
+      },
+      {
+        label: "标题",
+        type: "input",
+        field: "label",
+      },
+
+      {
+        label: "默认值",
+        type: "slider",
+        field: "componentProps.defaultValue",
+      },
+      {
+        label: "尺寸",
+        type: "select",
+        componentProps: {
+          placeholder: "请选择",
+          clearable: true,
+          options: [
+            {
+              label: "large",
+              value: "large",
+            },
+            {
+              label: "default",
+              value: "default",
+            },
+            {
+              label: "small",
+              value: "small",
+            },
+          ],
+        },
+        field: "componentProps.size",
+      },
+      {
+        label: "最小值",
+        type: "number",
+        field: "componentProps.min",
+        componentProps: {
+          placeholder: "请输入",
+        },
+        onChange: ({ value, values, componentAttributes }) => {
+          const componentIndex = componentAttributes.value.findIndex(
+            (item) => item.field === "componentProps.max"
+          );
+          const componentConfig = componentAttributes.value[componentIndex];
+          componentConfig.componentProps = {
+            min: value,
+          };
+          if ((values.componentProps.max ?? 0) < value) {
+            values.componentProps.max = value;
+          }
+        },
+      },
+      {
+        label: "最大值",
+        type: "number",
+        field: "componentProps.max",
+        componentProps: {
+          placeholder: "请输入",
+        },
+        onChange: ({ value, values, componentAttributes }) => {
+          const componentIndex = componentAttributes.value.findIndex(
+            (item) => item.field === "componentProps.min"
+          );
+          const componentConfig = componentAttributes.value[componentIndex];
+          componentConfig.componentProps = {
+            max: value,
+          };
+          if ((values.componentProps.min ?? 0) > value) {
+            values.componentProps.min = value;
+          }
+        },
+      },
+      {
+        label: "步长",
+        type: "number",
+        field: "componentProps.step",
+        componentProps: {
+          placeholder: "请输入",
+        },
+      },
+      {
+        label: "显示间断点",
+        type: "switch",
+        field: "componentProps.showStops",
+      },
+      {
+        label: "提示信息",
+        type: "switch",
+        field: "componentProps.showTooltip",
+      },
+      {
+        label: "开启选择范围",
+        type: "switch",
+        field: "componentProps.range",
+      },
+      {
+        label: "垂直模式",
+        type: "switch",
+        field: "componentProps.vertical",
+      },
+      {
+        label: "高度",
+        type: "EInputSize",
+        field: "componentProps.height",
+        show: ({ values }) => {
+          return values.componentProps.vertical;
+        },
+      },
+      {
+        label: "显示数字框",
+        type: "switch",
+        field: "componentProps.showInput",
+        onChange: ({ value, values }) => {
+          value ? (values.componentProps.showInputControls = true) : null;
+        },
+      },
+      {
+        label: "控制按钮",
+        type: "switch",
+        field: "componentProps.showInputControls",
+        show: ({ values }) => values.componentProps.showInput,
+      },
+      {
+        label: "提示框位置",
+        type: "select",
+        defaultValue: "bottom-start",
+        componentProps: {
+          options: [
+            {
+              label: "top",
+              value: "top",
+            },
+            {
+              label: "top-start",
+              value: "top-start",
+            },
+            {
+              label: "top-end",
+              value: "top-end",
+            },
+            {
+              label: "bottom",
+              value: "bottom",
+            },
+            {
+              label: "bottom-start",
+              value: "bottom-start",
+            },
+            {
+              label: "bottom-end",
+              value: "bottom-end",
+            },
+            {
+              label: "left",
+              value: "left",
+            },
+            {
+              label: "left-start",
+              value: "left-start",
+            },
+            {
+              label: "left-end",
+              value: "left-end",
+            },
+            {
+              label: "right",
+              value: "right",
+            },
+            {
+              label: "right-start",
+              value: "right-start",
+            },
+            {
+              label: "right-end",
+              value: "right-end",
+            },
+          ],
+        },
+        field: "componentProps.placement",
+      },
+      {
+        label: "禁用",
+        type: "switch",
+        field: "componentProps.disabled",
+      },
+      {
+        label: "隐藏",
+        type: "switch",
+        field: "componentProps.hidden",
+      },
+      {
+        label: "表单校验",
+        type: "ERuleEditor",
+        layout: "vertical",
+        field: "rules",
+        describe: "校验规则需要配合表单使用",
+        componentProps: {
+          ruleType: "number",
+        },
+      },
+    ],
+    event: [
+      {
+        type: "input",
+        describe: "拖拽实时触发",
+      },
+      {
+        type: "change",
+        describe: "拖拽结束改变值时",
+      },
+    ],
+  },
+} as ComponentConfigModel;

package/packages/ui/elementPlus/switch/index.ts

@@ -0,0 +1,159 @@
+import { type ComponentConfigModel } from "@epic-designer/utils";
+export default {
+  component: async () => (await import("element-plus")).ElSwitch,
+  groupName: "表单",
+  icon: "epic-icon-kaiguan3",
+  defaultSchema: {
+    label: "开关",
+    type: "switch",
+    field: "switch",
+    input: true,
+    componentProps: {
+      defaultValue: false,
+    },
+  },
+  config: {
+    attribute: [
+      {
+        label: "字段名",
+        type: "input",
+        field: "field",
+      },
+      {
+        label: "标题",
+        type: "input",
+        field: "label",
+      },
+      {
+        label: "默认值",
+        type: "switch",
+        field: "componentProps.defaultValue",
+      },
+      {
+        label: "ON状态值",
+        type: "input",
+        field: "componentProps.activeValue",
+        componentProps: {
+          placeholder: "请输入",
+        },
+        onChange(e) {
+          setTimeout(() => setDefaultValue(e));
+        },
+      },
+      {
+        label: "OFF状态值",
+        type: "input",
+        field: "componentProps.inactiveValue",
+        componentProps: {
+          placeholder: "请输入",
+        },
+        onChange(e) {
+          setTimeout(() => setDefaultValue(e));
+        },
+      },
+      {
+        label: "ON状态描述",
+        type: "input",
+        field: "componentProps.activeText",
+        componentProps: {
+          placeholder: "请输入",
+        },
+      },
+      {
+        label: "OFF状态描述",
+        type: "input",
+        field: "componentProps.inactiveText",
+        componentProps: {
+          placeholder: "请输入",
+        },
+      },
+      {
+        label: "尺寸",
+        type: "select",
+        componentProps: {
+          placeholder: "请选择",
+          clearable: true,
+          options: [
+            {
+              label: "large",
+              value: "large",
+            },
+            {
+              label: "default",
+              value: "default",
+            },
+            {
+              label: "small",
+              value: "small",
+            },
+          ],
+        },
+        field: "componentProps.size",
+      },
+      {
+        label: "宽度",
+        type: "number",
+        field: "componentProps.width",
+        componentProps: {
+          min: 50,
+          placeholder: "请输入",
+        },
+      },
+      {
+        label: "文本点内显示",
+        type: "switch",
+        field: "componentProps.inlinePrompt",
+      },
+      {
+        label: "禁用",
+        type: "switch",
+        field: "componentProps.disabled",
+      },
+      {
+        label: "隐藏",
+        type: "switch",
+        field: "componentProps.hidden",
+      },
+      {
+        label: "表单校验",
+        type: "ERuleEditor",
+        layout: "vertical",
+        field: "rules",
+        describe: "校验规则需要配合表单使用",
+        componentProps: {
+          ruleType: "boolean",
+        },
+      },
+    ],
+    event: [
+      {
+        type: "change",
+        describe: "状态发生变化时",
+      },
+    ],
+  },
+} as ComponentConfigModel;
+
+// 设置默认值
+function setDefaultValue(e) {
+  let defaultValue = e.values.componentProps?.inactiveValue || false;
+  // 如果inactiveValue === ''，则在下一个事件循环中删除 inactiveValue 属性
+  if (e.values.componentProps.unCheckedValue === "") {
+    delete e.values.componentProps.unCheckedValue;
+  }
+
+  // 如果activeValue === ''，则在下一个事件循环中删除 activeValue 属性
+  if (e.values.componentProps.activeValue === "") {
+    delete e.values.componentProps.activeValue;
+  }
+
+  // 检查是否已经有了 componentProps 对象，如果有，将默认值赋给 defaultValue 属性
+  if (e.values.componentProps) {
+    e.values.componentProps.defaultValue = defaultValue;
+  } else {
+    // 如果没有 componentProps 对象，则创建一个新对象并添加 defaultValue 属性
+    e.values.componentProps = {
+      defaultValue,
+    };
+  }
+}

package/packages/ui/elementPlus/textarea/index.ts

@@ -0,0 +1,154 @@
+import { type ComponentConfigModel } from "@epic-designer/utils";
+export default {
+  component: async () => (await import("element-plus")).ElInput,
+  icon: "epic-icon-edit",
+  groupName: "表单",
+  defaultSchema: {
+    label: "文本域",
+    type: "textarea",
+    field: "textarea",
+    input: true,
+    componentProps: {
+      placeholder: "请输入",
+      type: "textarea",
+    },
+  },
+  config: {
+    attribute: [
+      {
+        label: "字段名",
+        type: "input",
+        field: "field",
+      },
+      {
+        label: "标题",
+        type: "input",
+        field: "label",
+      },
+      {
+        label: "默认值",
+        type: "textarea",
+        field: "componentProps.defaultValue",
+      },
+      {
+        label: "占位内容",
+        type: "input",
+        field: "componentProps.placeholder",
+      },
+      {
+        label: "尺寸",
+        type: "select",
+        componentProps: {
+          placeholder: "请选择",
+          clearable: true,
+          options: [
+            {
+              label: "large",
+              value: "large",
+            },
+            {
+              label: "default",
+              value: "default",
+            },
+            {
+              label: "small",
+              value: "small",
+            },
+          ],
+        },
+        field: "componentProps.size",
+      },
+      {
+        label: "最大输入长度",
+        type: "number",
+        field: "componentProps.maxlength",
+        componentProps: {
+          placeholder: "请输入",
+          min: 0
+        },
+      },
+      {
+        label: "统计字数",
+        type: "switch",
+        field: "componentProps.showWordLimit",
+        show: ({ values }) => {
+          return values.componentProps.maxlength;
+        },
+      },
+      {
+        label: "最小行数",
+        type: "number",
+        field: "componentProps.autosize.minRows",
+        componentProps: {
+          placeholder: "请输入",
+        },
+      },
+      {
+        label: "最大行数",
+        type: "number",
+        field: "componentProps.autosize.maxRows",
+        componentProps: {
+          placeholder: "请输入",
+        },
+      },
+      {
+        label: "可清空",
+        type: "switch",
+        field: "componentProps.clearable",
+      },
+      {
+        label: "禁用",
+        type: "switch",
+        field: "componentProps.disabled",
+      },
+      {
+        label: "隐藏",
+        type: "switch",
+        field: "componentProps.hidden",
+      },
+      {
+        label: "表单校验",
+        type: "ERuleEditor",
+        layout: "vertical",
+        field: "rules",
+        describe: "校验规则需要配合表单使用",
+      },
+    ],
+    event: [
+      {
+        type: "input",
+        describe: "输入值",
+      },
+      {
+        type: "change",
+        describe: "值修改",
+      },
+      {
+        type: "focus",
+        describe: "获取焦点",
+      },
+      {
+        type: "blur",
+        describe: "失去焦点",
+      },
+    ],
+    action: [
+      {
+        type: "focus",
+        describe: "使 input 获取焦点",
+      },
+      {
+        type: "blur",
+        describe: "使 input 失去焦点",
+      },
+      {
+        type: "clear",
+        describe: "清除 input 值",
+      },
+      {
+        type: "select",
+        describe: "选中 input 中的文字",
+      },
+    ],
+  },
+} as ComponentConfigModel;

package/packages/ui/elementPlus/upload-file/index.ts

@@ -0,0 +1,86 @@
+import { type ComponentConfigModel } from "@epic-designer/utils";
+export default {
+  component: () => import("./uploadFile"),
+  groupName: "表单",
+  icon: "epic-icon-upload",
+  defaultSchema: {
+    label: "上传文件",
+    type: "upload-file",
+    field: "uploadFile",
+    input: true,
+    componentProps: {
+      action: "https://epic.kcz66.com/static/upload-img.json",
+      name: "file",
+      showFileList: true,
+    },
+  },
+  config: {
+    attribute: [
+      {
+        label: "字段名",
+        type: "input",
+        field: "field",
+      },
+      {
+        label: "标题",
+        type: "input",
+        field: "label",
+      },
+      {
+        label: "请求地址",
+        type: "input",
+        field: "componentProps.action",
+      },
+      {
+        label: "上传文件字段",
+        type: "input",
+        field: "componentProps.name",
+      },
+      {
+        label: "多选",
+        type: "switch",
+        field: "componentProps.multiple",
+      },
+      {
+        label: "展示文件列表",
+        type: "switch",
+        field: "componentProps.showFileList",
+      },
+      {
+        label: "拖拽上传",
+        type: "switch",
+        field: "componentProps.drag",
+      },
+      {
+        label: "允许上传最大数量",
+        type: "number",
+        field: "componentProps.limit",
+        componentProps: {
+          min: 0,
+          placeholder: "请输入",
+        },
+      },
+      {
+        label: "禁用",
+        type: "switch",
+        field: "componentProps.disabled",
+      },
+      {
+        label: "隐藏",
+        type: "switch",
+        field: "componentProps.hidden",
+      },
+      {
+        label: "表单校验",
+        type: "ERuleEditor",
+        layout: "vertical",
+        field: "rules",
+        describe: "校验规则需要配合表单使用",
+        componentProps: {
+          ruleType: "array",
+        },
+      },
+    ],
+  },
+  bindModel: "modelValue",
+} as ComponentConfigModel;