form-designer-xinyi 1.0.0

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

@@ -0,0 +1,82 @@
+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: "input",
+        field: "componentProps.name",
+        componentProps: {
+          placeholder: "请输入",
+        },
+      },
+      {
+        label: "允许上传最大数量",
+        type: "number",
+        field: "componentProps.max",
+        componentProps: {
+          min: 0,
+          placeholder: "请输入",
+        },
+      },
+      {
+        label: "展示文件列表",
+        type: "switch",
+        field: "componentProps.showFileList",
+      },
+      {
+        label: "多选",
+        type: "switch",
+        field: "componentProps.multiple",
+      },
+      {
+        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/naiveUi/upload-file/uploadFile.ts

@@ -0,0 +1,78 @@
+import { type PropType, defineComponent, h, nextTick, ref, watch } from 'vue'
+import { NUpload, NButton } from 'naive-ui'
+import type { UploadFileInfo } from 'naive-ui'
+import { type OnFinish, type OnError } from 'naive-ui/es/upload/src/interface'
+
+export default defineComponent({
+  props: {
+    modelValue: {
+      type: Array as PropType<UploadFileInfo []>,
+      default: () => []
+    }
+  },
+  emits: ['update:modelValue'],
+  setup (props, { emit, attrs }) {
+    const fileList = ref<UploadFileInfo[]>([])
+    watch(fileList, (e) => {
+      emit('update:modelValue', 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: UploadFileInfo[]): void {
+      console.log('onChange called->', e)
+      nextTick(() => { fileList.value = e })
+    }
+
+    const handleError: OnError = ({ file, event }) => {
+      console.log('OnError called->', file, event)
+    }
+    const handleSuccess: OnFinish = ({ file, event }) => {
+      console.log('OnFinish called->', file, event)
+      const resInfo = event?.target as any
+      const resData = JSON.parse(resInfo.response ?? '{}')
+      file.url = resData.data?.url
+    }
+
+    return () => {
+      return h('div', null, {
+        default: () => [
+          h(NUpload, {
+            ...attrs,
+            'onUpdate:file-list': handleUpdate,
+            "file-list": fileList.value,
+            onError: handleError,
+            onFinish: handleSuccess,
+            'default-upload': true
+          }, {
+            default: () => [
+              h(
+                NButton,
+                {},
+                {
+                  default: () => [
+                    h('span', {
+                      class: 'iconfont epic-icon-shangchuan1',
+                      style: { 'margin-right': '2px' }
+                    }),
+                    h('span', null, { default: () => '上传文件' })
+                  ]
+                }
+              )
+            ]
+          })
+        ]
+      })
+    }
+  }
+})

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

@@ -0,0 +1,82 @@
+import { type ComponentConfigModel } from "@epic-designer/utils";
+export default {
+  component: () => import("./uploadImage"),
+  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: "input",
+        field: "componentProps.name",
+        componentProps: {
+          placeholder: "请输入",
+        },
+      },
+      {
+        label: "允许上传最大数量",
+        type: "number",
+        field: "componentProps.max",
+        componentProps: {
+          min: 0,
+          placeholder: "请输入",
+        },
+      },
+      {
+        label: "展示文件列表",
+        type: "switch",
+        field: "componentProps.showFileList",
+      },
+      {
+        label: "多选",
+        type: "switch",
+        field: "componentProps.multiple",
+      },
+      {
+        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/naiveUi/upload-image/uploadImage.ts

@@ -0,0 +1,152 @@
+import { type PropType, defineComponent, h, nextTick, ref, watch } from "vue";
+import { NUpload } from "naive-ui";
+import type { UploadFileInfo } from "naive-ui";
+import type { OnFinish, OnError } from "naive-ui/es/upload/src/interface";
+
+export default defineComponent({
+  props: {
+    modelValue: {
+      type: Array as PropType<UploadFileInfo[]>,
+      default: () => [],
+    },
+  },
+  emits: ["update:modelValue"],
+  setup(props, { emit, attrs }) {
+    const fileList = ref<UploadFileInfo[]>([]);
+
+    // const imgUrl = ref('')
+    // const visible = ref(false)
+    // const setVisible = (value: boolean): void => {
+    //   visible.value = value
+    // }
+
+    watch(fileList, (e) => {
+      emit("update:modelValue", 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: UploadFileInfo[]): void {
+      console.log("onChange called->", e);
+      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 handleSuccess: OnFinish = ({ file, event }) => {
+      console.log("OnFinish called->", file, event);
+      const resInfo = event?.target as any;
+      const resData = JSON.parse(resInfo.response ?? "{}");
+      file.url = resData.data?.url;
+    };
+    const handleError: OnError = ({ file, event }) => {
+      console.log("OnError called->", file, event);
+    };
+
+    // 上传前处理
+    // 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;
+    // }
+
+    /**
+     * 预览功能
+     * @param {*} e
+     */
+    // const handlePreview: OnPreview = (file) => {
+    //   console.log(file)
+    //   if (!file.url) return
+    //   imgUrl.value = file.url
+    //   setVisible(true)
+    // }
+
+    return () => {
+      // const type = attrs.type;
+      return h(
+        "div",
+        {
+          class: "epic-upload-image",
+        },
+        {
+          default: () => [
+            h(
+              NUpload,
+              {
+                ...attrs,
+                "list-type": "image-card",
+                accept: "image/gif,image/jpeg,image/jpg,image/png,image/svg",
+                "onUpdate:file-list": handleUpdate,
+                "file-list": fileList.value,
+                onFinish: handleSuccess,
+                onError: handleError,
+              },
+              {
+                default: () => [
+                  h(
+                    "div",
+                    { style: { "text-align": "center" } },
+                    {
+                      default: () => [
+                        h("span", {
+                          class: "iconfont epic-icon-shangchuan1 text-md",
+                          style: { "margin-right": "2px" },
+                        }),
+                        h(
+                          "div",
+                          { class: "ant-upload-text" },
+                          { default: () => "点击上传" }
+                        ),
+                      ],
+                    }
+                  ),
+                ],
+              }
+            ),
+          ],
+        }
+      );
+    };
+  },
+});

package/packages/ui/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "@epic-designer/ui",
+  "version": "1.0.0",
+  "description": "epic-designer base ui",
+  "main": "index.ts",
+  "scripts": {
+  },
+  "author": "kchengz",
+  "devDependencies": {
+    "ant-design-vue": "^4.2.1",
+    "element-plus": "^2.7.2",
+    "naive-ui": "^2.38.1",
+    "vite-plugin-dts": "^3.9.0"
+  },
+  "dependencies": {
+    "dayjs": "^1.11.11"
+  }
+}

package/packages/ui/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "jsx": "preserve",
+    "sourceMap": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "lib": ["ESNext", "DOM"],
+    "strictNullChecks": true,
+    "skipLibCheck": true
+  },
+  "include": ["./**/*", "*.ts", "*.json", "*.cjs"],
+  "exclude": ["node_modules", "dist", "vite.config.ts"]
+}

package/packages/utils/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 kchengz
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/packages/utils/common/common.ts

@@ -0,0 +1,18 @@
+/**
+ * 防抖函数
+ * @param handler
+ * @param delay
+ * @returns
+ */
+export function debounce(handler: Function, delay: number) {
+  let timer: any = null;
+  return (...args: any[]) => {
+      if (timer) {
+      clearTimeout(timer);
+    }
+    timer = setTimeout(() => {
+
+      handler.apply(this, args);
+    }, delay);
+  };
+}

package/packages/utils/common/component.ts

@@ -0,0 +1,22 @@
+import {
+    defineAsyncComponent,
+    type AsyncComponentLoader,
+    type Component,
+  } from "vue";
+  
+  
+  /**
+   * * 异步加载组件
+   * @param loader
+   * @returns
+   */
+  export const loadAsyncComponent = (
+    loader: AsyncComponentLoader<any>,
+    loadingComponent?: Component
+  ): any =>
+    defineAsyncComponent({
+      loader,
+      loadingComponent,
+      delay: 80,
+    });
+