form-designer-xinyi 1.0.0

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

@@ -0,0 +1,189 @@
+import { type ComponentConfigModel } from "@epic-designer/utils";
+export default {
+  component: async () => (await import("ant-design-vue")).TimePicker,
+  groupName: "表单",
+  icon: "epic-icon-time",
+  defaultSchema: {
+    label: "时间选择器",
+    type: "time",
+    field: "time",
+    input: true,
+    componentProps: {
+      valueFormat: "HH:mm:ss",
+      format: "HH:mm:ss",
+      placeholder: "请输入",
+    },
+  },
+  config: {
+    attribute: [
+      {
+        label: "字段名",
+        type: "input",
+        field: "field",
+      },
+      {
+        label: "标题",
+        type: "input",
+        field: "label",
+      },
+      {
+        label: "默认值",
+        type: "time",
+        field: "componentProps.defaultValue",
+      },
+      {
+        label: "占位内容",
+        type: "input",
+        field: "componentProps.placeholder",
+      },
+      {
+        label: "显示格式",
+        type: "input",
+        componentProps: {
+          placeholder: "请输入",
+        },
+        field: "componentProps.format",
+      },
+      {
+        label: "数据格式",
+        type: "input",
+        componentProps: {
+          placeholder: "请输入",
+        },
+        field: "componentProps.valueFormat",
+      },
+      {
+        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: "number",
+        field: "componentProps.hourStep",
+        componentProps: {
+          placeholder: "请输入",
+        },
+      },
+      {
+        label: "分钟选项间隔",
+        type: "number",
+        field: "componentProps.minuteStep",
+        componentProps: {
+          placeholder: "请输入",
+        },
+      },
+      {
+        label: "秒选项间隔",
+        type: "number",
+        field: "componentProps.secondStep",
+        componentProps: {
+          placeholder: "请输入",
+        },
+      },
+      {
+        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: "12小时制",
+        type: "switch",
+        field: "componentProps.use12Hours",
+        changeSync: true,
+        onChange({ values, value }) {
+          values.componentProps.defaultValue = null;
+          if (value) {
+            values.componentProps.format = "h:mm:ss a";
+            values.componentProps.valueFormat = "h:mm:ss a";
+          } else {
+            values.componentProps.format = "HH:mm:ss";
+            values.componentProps.valueFormat = "HH:mm:ss";
+          }
+        },
+      },
+      {
+        label: "无边框",
+        type: "switch",
+        componentProps: {
+          checkedValue: false,
+          unCheckedValue: true,
+        },
+        field: "componentProps.bordered",
+      },
+      {
+        label: "禁止键盘输入",
+        type: "switch",
+        field: "componentProps.inputReadOnly",
+      },
+      {
+        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: "值变化时",
+      },
+    ],
+  },
+  bindModel: "value",
+} as ComponentConfigModel;

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

@@ -0,0 +1,88 @@
+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",
+    },
+  },
+  config: {
+    attribute: [
+      {
+        label: "字段名",
+        type: "input",
+        field: "field",
+      },
+      {
+        label: "标题",
+        type: "input",
+        field: "label",
+      },
+      {
+        label: "请求地址",
+        type: "input",
+        field: "componentProps.action",
+      },
+      {
+        label: "列表样式",
+        type: "select",
+        field: "componentProps.listType",
+        componentProps: {
+          placeholder: "请选择",
+          allowClear: true,
+          options: [
+            {
+              label: "text",
+              value: "text",
+            },
+            {
+              label: "picture",
+              value: "picture",
+            },
+          ],
+        },
+      },
+      {
+        label: "多选",
+        type: "switch",
+        field: "componentProps.multiple",
+      },
+      {
+        label: "允许上传最大数量",
+        type: "number",
+        field: "componentProps.maxCount",
+        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;

package/packages/ui/antd/upload-file/uploadFile.ts

@@ -0,0 +1,117 @@
+import {
+  type PropType,
+  defineComponent,
+  h,
+  nextTick,
+  computed,
+  ref,
+  watch,
+} from "vue";
+import { Upload, Button, message } from "ant-design-vue";
+import type { UploadChangeParam, UploadProps } from "ant-design-vue";
+
+// 封装上传文件组件
+export default defineComponent({
+  props: {
+    modelValue: {
+      type: Array as PropType<UploadProps["fileList"]>,
+      default: () => [],
+    },
+  },
+  emits: ["update:modelValue", "change"],
+  setup(props, { emit, attrs }) {
+    const fileList = ref<UploadProps["fileList"]>([]);
+    watch(fileList, (e) => {
+      emit("update:modelValue", e);
+      emit("change", e);
+    });
+    // 处理传递进来的值
+    watch(
+      () => props.modelValue,
+      (e) => {
+        if (e != null && e.length > 0 && fileList.value != null) {
+          // props modelValue 等于 data 不进行处理
+          if (fileList.value === e) return;
+          fileList.value.length = 0;
+
+          fileList.value.push(...e);
+        }
+      },
+      { deep: true, immediate: true }
+    );
+
+    function handleUpdate(e: UploadProps["fileList"]): void {
+      nextTick(() => {
+        fileList.value = e;
+      });
+    }
+
+    // 处理数据结果
+    const handleChange = (info: UploadChangeParam): void => {
+      if (info.file.status === "uploading") {
+        return;
+      }
+
+      if (info.file.status === "done") {
+        // Get this url from response in real world.
+        const url = info.file.response?.data?.url;
+        if (!info.file.url && !url) {
+          info.file.status = "error";
+          message.error("上传失败");
+          return;
+        }
+        // 赋值url
+        info.file.url = url;
+      }
+
+      if (info.file.status === "error") {
+        message.error("upload error");
+      }
+    };
+
+    // 上传前处理
+    const beforeUpload = (file: any): void => {
+      // const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
+      // if (!isJpgOrPng) {
+      //   message.error('您只能上传JPG/PNG文件!');
+      // }
+      // const isLt2M = file.size / 1024 / 1024 < 2;
+      // if (!isLt2M) {
+      //   message.error('图片大小超过 2MB!');
+      // }
+      // return isJpgOrPng && isLt2M;
+    };
+
+    const getUploadProps = computed<UploadProps>(() => ({
+      ...attrs,
+      "onUpdate:file-list": handleUpdate,
+      "file-list": fileList.value,
+      "onBefore-upload": beforeUpload,
+      onChange: handleChange,
+    }));
+
+    return () => {
+      return h("div", null, {
+        default: () => [
+          h(Upload, getUploadProps.value, {
+            default: () => [
+              h(
+                Button,
+                {},
+                {
+                  default: () => [
+                    h("span", {
+                      class: "iconfont epic-icon-shangchuan1",
+                      style: { "margin-right": "2px" },
+                    }),
+                    h("span", null, { default: () => "上传文件" }),
+                  ],
+                }
+              ),
+            ],
+          }),
+        ],
+      });
+    };
+  },
+});

package/packages/ui/antd/upload-image/index.ts

@@ -0,0 +1,69 @@
+import { type ComponentConfigModel } from "@epic-designer/utils";
+export default {
+  component: () => import("./uploadImage.vue"),
+  groupName: "表单",
+  icon: "epic-icon-image",
+  defaultSchema: {
+    label: "上传图片",
+    type: "upload-image",
+    field: "uploadImage",
+    input: true,
+    componentProps: {
+      action: "https://epic.kcz66.com/static/upload-img.json",
+    },
+  },
+  config: {
+    attribute: [
+      {
+        label: "字段名",
+        type: "input",
+        field: "field",
+      },
+      {
+        label: "标题",
+        type: "input",
+        field: "label",
+      },
+      {
+        label: "请求地址",
+        type: "input",
+        field: "componentProps.action",
+      },
+      {
+        label: "多选",
+        type: "switch",
+        field: "componentProps.multiple",
+      },
+      {
+        label: "允许上传最大数量",
+        type: "number",
+        field: "componentProps.maxCount",
+        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;

package/packages/ui/antd/upload-image/uploadImage.vue

@@ -0,0 +1,148 @@
+<template>
+  <div class="epic-upload-image">
+    <Upload v-bind="getUploadProps">
+      <div v-if="(fileList?.length ?? 0) < (props.maxCount ?? 999)">
+        <span class="iconfont epic-icon-shangchuan1 mr-2px"></span>
+        <div class="ant-upload-text">点击上传</div>
+      </div>
+    </Upload>
+    <Image
+      style="display: none"
+      :src="imgUrl"
+      :preview="{
+        visible,
+        onVisibleChange: setVisible,
+      }"
+      @error="previewError"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {
+  type PropType,
+  defineComponent,
+  h,
+  nextTick,
+  computed,
+  ref,
+  watch,
+  useAttrs
+} from "vue";
+import { Upload, message, Image } from "ant-design-vue";
+import type {
+  UploadChangeParam,
+  UploadProps,
+  UploadFile,
+} from "ant-design-vue";
+const attrs = useAttrs()
+const props = defineProps({
+  modelValue: {
+      type: Array as PropType<UploadProps["fileList"]>,
+      default: () => [],
+    },
+    maxCount:{
+      type: Number,
+    }
+})
+
+const emits = defineEmits(["update:modelValue", "change"])
+
+    const fileList = ref<UploadProps["fileList"]>([]);
+
+    const imgUrl = ref("");
+    const visible = ref(false);
+    const setVisible = (value: boolean): void => {
+      visible.value = value;
+    };
+
+    watch(fileList, (e) => {
+      emits("update:modelValue", e);
+      emits("change", e);
+    });
+    // 处理传递进来的值
+    watch(
+      () => props.modelValue,
+      (e) => {
+        if (e != null && e.length > 0 && fileList.value != null) {
+          // props modelValue 等于 data 不进行处理
+          if (fileList.value === e) return;
+          fileList.value.length = 0;
+          fileList.value.push(...e);
+        }
+      },
+      { deep: true, immediate: true }
+    );
+
+    function handleUpdate(e: UploadProps["fileList"]): void {
+      nextTick(() => {
+        fileList.value = e;
+      });
+    }
+
+    // 处理数据结果
+    const handleChange = (info: UploadChangeParam): void => {
+      if (info.file.status === "uploading") {
+        return;
+      }
+
+      if (info.file.status === "done") {
+        // Get this url from response in real world.
+        const url: string | undefined = info.file.response?.data?.url;
+        if (!info.file.url && !url) {
+          info.file.status = "error";
+          message.error("上传失败");
+          return;
+        }
+        // 赋值url
+        info.file.url = url;
+        info.file.thumbUrl = url;
+      }
+
+      if (info.file.status === "error") {
+        message.error("upload error");
+      }
+    };
+
+    // 上传前处理
+    const beforeUpload = (file: any): void => {
+      // const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
+      // if (!isJpgOrPng) {
+      //   message.error('您只能上传JPG/PNG文件!');
+      // }
+      // const isLt2M = file.size / 1024 / 1024 < 2;
+      // if (!isLt2M) {
+      //   message.error('图片大小超过 2MB!');
+      // }
+      // return isJpgOrPng && isLt2M;
+    };
+
+    const getUploadProps = computed<UploadProps>(() => ({
+      ...attrs,
+      "list-type": "picture-card",
+      accept: "image/gif,image/jpeg,image/jpg,image/png,image/svg",
+      "onUpdate:file-list": handleUpdate,
+      "file-list": fileList.value,
+      "onBefore-upload": beforeUpload,
+      onChange: handleChange,
+      onPreview: handlePreview,
+    }));
+
+    /**
+     * 预览功能
+     * @param {*} e
+     */
+    function handlePreview(e: UploadFile): void {
+      if (!e.url) return;
+      imgUrl.value = e.url;
+      setVisible(true);
+    }
+
+    /**
+     * 预览异常处理
+     */
+    function previewError(): void {
+      if (!imgUrl.value) return;
+      message.error("图片地址无法访问!");
+    }
+</script>

package/packages/ui/elementPlus/button/button.ts

@@ -0,0 +1,25 @@
+import { defineComponent, h, renderSlot, type PropType } from 'vue'
+import { ElButton } from 'element-plus'
+import { type ComponentSchema } from '@epic-designer/core/types/epic-designer'
+
+// 二次封装组件
+export default defineComponent({
+  props: {
+    componentSchema: {
+      type: Object as PropType<ComponentSchema>,
+      default: () => ({})
+    }
+  },
+  setup (props, { emit, slots }) {
+    return () => {
+      const componentProps: Record<string, any> = {
+        ...props.componentSchema?.componentProps
+      }
+
+      return h(ElButton, componentProps, {
+        default: () =>
+          renderSlot(slots, 'default', {}, () => [props.componentSchema?.label])
+      })
+    }
+  }
+})