form-designer-xinyi 1.0.0

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

@@ -0,0 +1,114 @@
+import { type PropType, defineComponent, h, nextTick, computed, ref, watch } from 'vue'
+import { ElMessage, ElUpload, ElButton, type UploadProps, type UploadUserFile, type UploadRawFile } from 'element-plus'
+export default defineComponent({
+  props: {
+    modelValue: {
+      type: Array as PropType<UploadUserFile[]>,
+      default: () => []
+    }
+  },
+  emits: ['update:modelValue'],
+  setup (props, { emit, attrs }) {
+    const fileList = ref<UploadUserFile[]>([])
+    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 handleChange : UploadProps['onChange']  (e: UploadUserFile[]) => {
+    //   nextTick(() => { fileList.value = e })
+    // }
+    const handleChange: UploadProps['onChange'] = (uploadFile, uploadFiles): void => {
+      nextTick(() => { fileList.value = uploadFiles })
+    }
+    // 处理数据结果
+    // 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'
+    //       ElMessage.error('上传失败')
+    //       return
+    //     }
+    //     // 赋值url
+    //     info.file.url = url
+    //   }
+    //
+    //   if (info.file.status === 'error') {
+    //     ElMessage.error('upload error')
+    //   }
+    // }
+
+    // 上传前处理
+    const beforeUpload: UploadProps['beforeUpload'] = (file: UploadRawFile): 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 handleSuccess: UploadProps['onSuccess'] = (response, uploadFile, uploadFiles) => {
+      console.log(uploadFiles)
+    }
+    const handleError: UploadProps['onError'] = (error, uploadFile, uploadFiles) => {
+      ElMessage.error('上传失败')
+      console.error(error)
+    }
+    // ts报错先忽略了
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-expect-error
+    const getUploadProps = computed<UploadProps>(() => ({
+      ...attrs,
+      "file-list": fileList.value,
+      onBeforeUpload: beforeUpload,
+      onChange: handleChange,
+      onSuccess: handleSuccess,
+      onError: handleError
+    }))
+
+    return () => {
+      return h('div', null, {
+        default: () => [
+          h(ElUpload, getUploadProps.value, {
+            default: () => [
+              h(
+                ElButton,
+                {},
+                {
+                  default: () => [
+                    h('span', {
+                      class: 'iconfont epic-icon-shangchuan1',
+                      style: { 'margin-right': '2px' }
+                    }),
+                    h('span', null, { default: () => '上传文件' })
+                  ]
+                }
+              )
+            ]
+          })
+        ]
+      })
+    }
+  }
+})

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

@@ -0,0 +1,86 @@
+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",
+      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;

package/packages/ui/elementPlus/upload-image/uploadImage.ts

@@ -0,0 +1,151 @@
+import { type PropType, defineComponent, h, nextTick, computed, ref, watch } from 'vue'
+import { ElUpload, ElMessage, ElImageViewer, type UploadProps, type UploadUserFile } from 'element-plus'
+
+// 封装上传文件组件
+export default defineComponent({
+  props: {
+    modelValue: {
+      type: Array as PropType<UploadUserFile[]>,
+      default: () => []
+    }
+  },
+  emits: ['update:modelValue'],
+  setup (props, { emit, attrs }) {
+    const fileList = ref<UploadUserFile[]>([])
+
+    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 }
+    )
+
+    const handleChange: UploadProps['onChange'] = (uploadFile, uploadFiles): void => {
+      nextTick(() => { fileList.value = uploadFiles })
+    }
+
+    // 处理数据结果
+    // 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: UploadProps['onSuccess'] = (response, uploadFile, uploadFiles) => {
+      console.log(uploadFiles)
+    }
+    const handleError: UploadProps['onError'] = (error, uploadFile, uploadFiles) => {
+      ElMessage.error('上传失败')
+      console.error(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;
+    }
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-expect-error
+    const getUploadProps = computed<UploadProps>(() => ({
+      ...attrs,
+      'file-list':fileList.value,
+      'list-type': 'picture-card',
+      accept: 'image/gif,image/jpeg,image/jpg,image/png,image/svg',
+      onBeforeUpload: beforeUpload,
+      onChange: handleChange,
+      onSuccess: handleSuccess,
+      onError: handleError,
+      onPreview: handlePreview
+    }))
+
+    /**
+     * 预览功能
+     * @param {*} e
+     */
+    const handlePreview: UploadProps['onPreview'] = (uploadFile) => {
+      if (!uploadFile.url) return
+      imgUrl.value = uploadFile.url
+      setVisible(true)
+    }
+
+    return () => {
+      // const type = attrs.type;
+      return h(
+        'div',
+        {
+          class: 'epic-upload-image'
+        },
+        {
+          default: () => [
+            h(ElUpload, getUploadProps.value, {
+              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: () => '点击上传' }
+                    )
+                  ]
+                })
+              ]
+            }),
+            (() => {
+              if (!visible.value) {
+                return
+              }
+              return h(ElImageViewer, {
+                urlList: [imgUrl.value],
+                onClose: () => { setVisible(false) }
+              })
+            })()
+          ]
+        }
+      )
+    }
+  }
+})

package/packages/ui/hooks/index.ts

@@ -0,0 +1 @@
+export * from './logic'

package/packages/ui/hooks/logic.ts

@@ -0,0 +1,129 @@
+import { PageManager } from './../../utils/manager/pageManager';
+import { reactive, watch, inject } from 'vue'
+import type { FormDataModel } from '@epic-designer/core/types/epic-designer'
+import { deepEqual } from '@epic-designer/utils'
+import { LogicRules, ConditionItem, Condition, ActionItem } from '../antd/formLogic/types'
+export function useFormLogic(clearValidate: any = null) {
+    const formData = reactive<FormDataModel>({})
+    const pageManager = inject('pageManager') as PageManager
+    let logicRules: LogicRules = []
+
+    watch(() => formData, () => {
+        logicRules.forEach(rule => {
+            // 验证是否满足规则条件
+            if (validateConditions(rule.condition)) {
+                // 满足条件,执行动作
+                rule.actions.forEach(action => {
+                    handleAction(action)
+                })
+            } else {
+                // 不满足条件,执行动作（反向）
+                rule.actions.forEach(action => {
+                    handleAction(action, true)
+                })
+            }
+        })
+
+    }, { deep: true })
+
+    function validateConditions(condition: Condition) {
+        if (condition.operator === 'and') {
+            return condition.conditions.every(conditionItem => {
+                if (!conditionItem.field) return true
+                const fieldValue = formData[conditionItem.field];
+                return validateField(fieldValue, conditionItem);
+            });
+        }
+
+        if (condition.operator === 'or') {
+            return condition.conditions.some(conditionItem => {
+                if (!conditionItem.field) return true
+                const fieldValue = formData[conditionItem.field];
+                return validateField(fieldValue, conditionItem);
+            });
+        }
+
+        return true;
+    }
+
+    function validateField(value: any, conditionItem: ConditionItem): boolean {
+        if (!conditionItem.value) return false
+        switch (conditionItem.operator) {
+            case 'eq':
+                return typeof value === 'object' ? deepEqual(value, conditionItem.value) : value === conditionItem.value;
+            case 'neq':
+                return typeof value === 'object' ? !deepEqual(value, conditionItem.value) : value !== conditionItem.value;
+            case 'gt':
+                // 确保 value 和 conditionItem.value 都是数字或可以比较的字符串
+                return (typeof value === 'number' || typeof value === 'string') && value > conditionItem.value;
+            case 'gte':
+                // 确保 value 和 conditionItem.value 都是数字或可以比较的字符串
+                return (typeof value === 'number' || typeof value === 'string') && value >= conditionItem.value;
+            case 'lt':
+                // 确保 value 和 conditionItem.value 都是数字或可以比较的字符串
+                return (typeof value === 'number' || typeof value === 'string') && value < conditionItem.value;
+            case 'lte':
+                // 确保 value 和 conditionItem.value 都是数字或可以比较的字符串
+                return (typeof value === 'number' || typeof value === 'string') && value <= conditionItem.value;
+            case 'in':
+                //  value 可以是conditionItem.value中的一个元素
+                return conditionItem.value.includes(value);
+            case 'nin':
+                //  value 不能是conditionItem.value中的一个元素
+                return !conditionItem.value.includes(value);
+            case 'null':
+                return value === null || value === undefined || value === '';
+            case 'notNull':
+                return value !== null && value !== undefined && value !== '';
+            default:
+                // 未知操作符，默认返回 true
+                return true;
+        }
+    }
+
+    // 执行特定动作
+    function handleAction(action: ActionItem, reverse = false) {
+        if (!action.field) return
+
+        const instance = pageManager.find(action.field) as any
+
+        switch (action.trigger) {
+            case 'hide':
+                instance.setAttr('hidden', !reverse)
+                break
+            case 'show':
+                instance.setAttr('hidden', reverse)
+                break
+            case 'required':
+                instance.setAttr('required', !reverse); clearValidate?.();
+                break
+            case 'notRequired':
+                instance.setAttr('required', reverse); clearValidate?.();
+                break
+            case 'readonly':
+                instance.setAttr('readOnly', !reverse)
+                break
+            case 'readWrite':
+                instance.setAttr('readOnly', reverse)
+                break
+            case 'disabled':
+                instance.setAttr('disabled', !reverse)
+                break
+            case 'enabled':
+                instance.setAttr('disabled', reverse)
+                break
+            case 'setValue':
+                !reverse && action.value && instance.setValue((pageManager.find(action.value) as any).getValue())
+        }
+
+    }
+
+    function setLogicRules(rules: LogicRules) {
+        logicRules = rules
+    }
+
+    return {
+        formData,
+        setLogicRules
+    }
+}

package/packages/ui/index.ts

@@ -0,0 +1,22 @@
+import { pluginManager } from "@epic-designer/utils";
+
+
+export function setupAntd() {
+  import("./antd").then(({ setupAntd }) => {
+    setupAntd.bind(null, pluginManager)();
+  });
+}
+
+export function setupElementPlus() {
+  import("./elementPlus").then(({ setupElementPlus }) => {
+    setupElementPlus.bind(null, pluginManager)();
+  });
+}
+
+export function setupNaiveUi() {
+  import("./naiveUi").then(({ setupNaiveUi }) => {
+    setupNaiveUi.bind(null, pluginManager)();
+  });
+}
+
+

package/packages/ui/naiveUi/button/button.ts

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

package/packages/ui/naiveUi/button/index.ts

@@ -0,0 +1,146 @@
+import { type ComponentConfigModel } from "@epic-designer/utils";
+export default {
+  component: () => import("./button"),
+  groupName: "表单",
+  icon: "epic-icon-button-remove",
+  defaultSchema: {
+    label: "按钮",
+    type: "button",
+    field: "input",
+    input: false,
+    componentProps: {
+      bordered: true,
+      type: "default",
+      size: "medium",
+    },
+  },
+  config: {
+    attribute: [
+      {
+        label: "标题",
+        type: "input",
+        field: "label",
+      },
+      {
+        label: "类型",
+        type: "select",
+        componentProps: {
+          placeholder: "请选择",
+          options: [
+            {
+              label: "default",
+              value: "default",
+            },
+            {
+              label: "tertiary",
+              value: "tertiary",
+            },
+            {
+              label: "primary",
+              value: "primary",
+            },
+            {
+              label: "success",
+              value: "success",
+            },
+            {
+              label: "info",
+              value: "info",
+            },
+            {
+              label: "warning",
+              value: "warning",
+            },
+            {
+              label: "error",
+              value: "error",
+            },
+          ],
+        },
+        field: "componentProps.type",
+      },
+      {
+        label: "尺寸",
+        type: "select",
+        defaultValue: "default",
+        componentProps: {
+          placeholder: "请选择",
+          options: [
+            {
+              label: "tiny",
+              value: "tiny",
+            },
+            {
+              label: "large",
+              value: "large",
+            },
+            {
+              label: "medium",
+              value: "medium",
+            },
+            {
+              label: "small",
+              value: "small",
+            },
+          ],
+        },
+        field: "componentProps.size",
+      },
+      {
+        label: "是否块级",
+        type: "switch",
+        field: "componentProps.block",
+      },
+      {
+        label: "显示边框",
+        type: "switch",
+        field: "componentProps.bordered",
+      },
+      {
+        label: "虚线框",
+        type: "switch",
+        field: "componentProps.dashed",
+      },
+      {
+        label: "圆角按钮",
+        type: "switch",
+        field: "componentProps.round",
+      },
+      {
+        label: "圆形按钮",
+        type: "switch",
+        field: "componentProps.circle",
+      },
+      {
+        label: "按钮颜色",
+        type: "color-picker",
+        field: "componentProps.color",
+      },
+      {
+        label: "是否透明",
+        type: "switch",
+        field: "componentProps.ghost",
+      },
+      {
+        label: "禁用",
+        type: "switch",
+        field: "componentProps.disabled",
+      },
+      {
+        label: "隐藏",
+        type: "switch",
+        field: "componentProps.hidden",
+      },
+    ],
+    event: [
+      {
+        type: "click",
+        describe: "点击按钮时",
+      },
+      {
+        type: "dblclick",
+        describe: "双击按钮时",
+      },
+    ],
+  },
+} as ComponentConfigModel;