@epic-designer/antd 1.0.5

package/src/col/col.ts

@@ -0,0 +1,38 @@
+import type { ComponentSchema } from '@epic-designer/types';
+
+import type { PropType } from 'vue';
+
+import { defineComponent, h, renderSlot } from 'vue';
+
+import { Col } from 'ant-design-vue';
+
+export default defineComponent({
+  props: {
+    componentSchema: {
+      default: () => ({}),
+      require: true,
+      type: Object as PropType<ComponentSchema>,
+    },
+  },
+  setup(props, { 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/src/col/index.ts

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

package/src/color-picker/index.ts

@@ -0,0 +1,109 @@
+import type { ComponentConfigModel } from '@epic-designer/types';
+
+export default {
+  bindModel: 'value',
+  component: async () => (await import('ant-design-vue')).Input,
+  config: {
+    action: [],
+    attribute: [
+      {
+        field: 'field',
+        label: '字段名',
+        type: 'input',
+      },
+      {
+        field: 'label',
+        label: '标题',
+        type: 'input',
+      },
+      {
+        field: 'componentProps.defaultValue',
+        label: '默认值',
+        type: 'input',
+      },
+      {
+        componentProps: {
+          allowClear: true,
+          options: [
+            {
+              label: '大号',
+              value: 'large',
+            },
+            {
+              label: '中等',
+              value: 'middle',
+            },
+            {
+              label: '小型',
+              value: 'small',
+            },
+          ],
+          placeholder: '请选择',
+        },
+        field: 'componentProps.size',
+        label: '尺寸',
+        type: 'select',
+      },
+      {
+        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: 'switch',
+      },
+      {
+        description: '校验规则需要配合表单使用',
+        field: 'rules',
+        label: '表单校验',
+        layout: 'vertical',
+        type: 'ERuleEditor',
+      },
+    ],
+    event: [
+      {
+        description: '值修改时',
+        type: 'change',
+      },
+      {
+        description: '获取焦点时',
+        type: 'focus',
+      },
+      {
+        description: '失去焦点时',
+        type: 'blur',
+      },
+    ],
+  },
+  defaultSchema: {
+    componentProps: {
+      style: {
+        width: '80px',
+      },
+      type: 'color',
+    },
+    field: 'color-picker',
+    input: true,
+    label: '颜色选择器',
+    type: 'color-picker',
+  },
+  groupName: '表单',
+  icon: 'icon--epic--palette-outline',
+  sort: 950,
+} as ComponentConfigModel;

package/src/date-picker/datePicker.ts

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

package/src/date-picker/index.ts

@@ -0,0 +1,301 @@
+import type { ComponentConfigModel } from '@epic-designer/types';
+
+export default {
+  bindModel: 'modelValue',
+  component: () => import('./datePicker'),
+  config: {
+    attribute: [
+      {
+        field: 'field',
+        label: '字段名',
+        type: 'input',
+      },
+      {
+        componentProps: {
+          placeholder: '请输入',
+        },
+        field: 'label',
+        label: '标题',
+        type: 'input',
+      },
+      {
+        field: 'componentProps.defaultValue',
+        label: '默认值',
+        type: 'date',
+      },
+      {
+        changeSync: true,
+        componentProps: {
+          options: [
+            {
+              label: '日期',
+              value: 'date',
+            },
+            {
+              label: '周',
+              value: 'week',
+            },
+            {
+              label: '月份',
+              value: 'month',
+            },
+            {
+              label: '季度',
+              value: 'quarter',
+            },
+            {
+              label: '年份',
+              value: 'year',
+            },
+            {
+              label: '日期范围',
+              value: 'daterange',
+            },
+            {
+              label: '周范围',
+              value: 'weekrange',
+            },
+            {
+              label: '月份范围',
+              value: 'monthrange',
+            },
+            {
+              label: '季度范围',
+              value: 'quarterrange',
+            },
+            {
+              label: '年份范围',
+              value: 'yearrange',
+            },
+          ],
+        },
+        field: 'componentProps.type',
+        label: '日期类型',
+        onChange({ value, values }) {
+          values.componentProps.defaultValue = null;
+          values.componentProps.placeholder = [
+            'daterange',
+            'monthrange',
+            'quarterrange',
+            'weekrange',
+            'yearrange',
+          ].includes(value)
+            ? ['请输入', '请输入']
+            : '请输入';
+
+          if (['date', 'daterange'].includes(value)) {
+            values.componentProps.format = 'YYYY-MM-DD';
+            values.componentProps.valueFormat = 'YYYY-MM-DD';
+          } else if (['week', 'weekrange'].includes(value)) {
+            values.componentProps.format = 'ww [周]';
+            values.componentProps.valueFormat = 'YYYY-MM-DD';
+          } else if (['month', 'monthrange'].includes(value)) {
+            values.componentProps.format = 'YYYY-MM';
+            values.componentProps.valueFormat = 'YYYY-MM';
+          } else if (['quarter', 'quarterrange'].includes(value)) {
+            values.componentProps.format = 'YYYY-Q季度';
+            values.componentProps.valueFormat = 'YYYY-Q季度';
+          } else if (['"yearrange"', 'year'].includes(value)) {
+            values.componentProps.format = 'YYYY';
+            values.componentProps.valueFormat = 'YYYY';
+          }
+        },
+        type: 'select',
+      },
+      {
+        field: 'componentProps.showTime',
+        label: '增加时间选择',
+        onChange: ({ value, values }) => {
+          if (value) {
+            values.componentProps.valueFormat = 'YYYY-MM-DD HH:mm:ss';
+            values.componentProps.format = 'YYYY-MM-DD HH:mm:ss';
+          } else {
+            values.componentProps.valueFormat = 'YYYY-MM-DD';
+            values.componentProps.format = 'YYYY-MM-DD';
+          }
+        },
+        show({ values }) {
+          return ['date', 'daterange'].includes(values.componentProps.type);
+        },
+        type: 'switch',
+      },
+      {
+        componentProps: {
+          placeholder: '请输入',
+        },
+        field: 'componentProps.placeholder',
+        label: '占位内容',
+        show: ({ values }) =>
+          ![
+            'daterange',
+            'monthrange',
+            'quarterrange',
+            'weekrange',
+            'yearrange',
+          ].includes(values.componentProps.type),
+        type: 'input',
+      },
+      {
+        componentProps: {
+          placeholder: '请输入',
+        },
+        field: 'componentProps.placeholder.0',
+        label: '开始占位符',
+        show: ({ values }) =>
+          [
+            'daterange',
+            'monthrange',
+            'quarterrange',
+            'weekrange',
+            'yearrange',
+          ].includes(values.componentProps.type),
+        type: 'input',
+      },
+
+      {
+        componentProps: {
+          placeholder: '请输入',
+        },
+        field: 'componentProps.placeholder.1',
+        label: '结束占位符',
+        show: ({ values }) =>
+          [
+            'daterange',
+            'monthrange',
+            'quarterrange',
+            'weekrange',
+            'yearrange',
+          ].includes(values.componentProps.type),
+        type: 'input',
+      },
+      {
+        componentProps: {
+          placeholder: '请输入',
+        },
+        field: 'componentProps.format',
+        label: '显示格式',
+        type: 'input',
+      },
+      {
+        componentProps: {
+          placeholder: '请输入',
+        },
+        field: 'componentProps.valueFormat',
+        label: '数据格式',
+        type: 'input',
+      },
+      {
+        componentProps: {
+          allowClear: true,
+          options: [
+            {
+              label: '大号',
+              value: 'large',
+            },
+            {
+              label: '中等',
+              value: 'middle',
+            },
+            {
+              label: '小型',
+              value: 'small',
+            },
+          ],
+          placeholder: '请选择',
+        },
+        field: 'componentProps.size',
+        label: '尺寸',
+        type: 'select',
+      },
+
+      {
+        componentProps: {
+          allowClear: true,
+          options: [
+            {
+              label: 'bottomLeft',
+              value: 'bottomLeft',
+            },
+            {
+              label: 'bottomRight',
+              value: 'bottomRight',
+            },
+            {
+              label: 'topLeft',
+              value: 'topLeft',
+            },
+            {
+              label: 'topRight',
+              value: 'topRight',
+            },
+          ],
+          placeholder: '请选择',
+        },
+        field: 'componentProps.placement',
+        label: '弹出框位置',
+        type: 'select',
+      },
+      {
+        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: 'switch',
+      },
+      {
+        description: '校验规则需要配合表单使用',
+        field: 'rules',
+        label: '表单校验',
+        layout: 'vertical',
+        type: 'ERuleEditor',
+      },
+    ],
+    event: [
+      {
+        description: '值变化时',
+        type: 'change',
+      },
+      {
+        description: '点击确定按钮时',
+        type: 'ok',
+      },
+    ],
+  },
+  defaultSchema: {
+    componentProps: {
+      format: 'YYYY-MM-DD',
+      placeholder: '请选择',
+      type: 'date',
+      valueFormat: 'YYYY-MM-DD',
+    },
+    field: 'date',
+    input: true,
+    label: '日期选择器',
+    type: 'date',
+  },
+  groupName: '表单',
+  icon: 'icon--epic--calendar-month-outline-rounded',
+  sort: 910,
+} as ComponentConfigModel;

package/src/form/form.vue

@@ -0,0 +1,153 @@
+<script lang="ts" setup>
+import type { PageManager } from '@epic-designer/manager';
+import type {
+  ComponentSchema,
+  DesignerProps,
+  FormDataModel,
+} from '@epic-designer/types';
+
+import type { VNode } from 'vue';
+
+import { computed, inject, provide, ref } from 'vue';
+
+import { Form } from 'ant-design-vue';
+
+interface FormInstance extends InstanceType<typeof Form> {
+  getData?: () => FormDataModel;
+  scrollToField: (name: string) => void;
+  setData?: (data: FormDataModel) => void;
+  validate: () => Promise<unknown>;
+  validateFields: () => Promise<unknown>;
+}
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const props = withDefaults(
+  defineProps<{
+    componentSchema: ComponentSchema;
+    scrollToFirstError?: boolean;
+  }>(),
+  {
+    componentSchema: () => ({ type: '' }),
+    scrollToFirstError: false,
+  },
+);
+
+const designerProps = inject<DesignerProps>('designerProps');
+const pageManager = inject<PageManager>('pageManager', {} as PageManager);
+const form = ref<FormInstance | null>(null);
+const forms = inject<{ [name: string]: any }>('forms', {});
+const formData = pageManager.setFormData(
+  {},
+  props.componentSchema?.componentProps?.name,
+);
+provide('formData', formData);
+
+/**
+ * 获取表单数据
+ */
+function getData(): FormDataModel {
+  return formData;
+}
+
+/**
+ * 校验表单数据
+ */
+async function validate() {
+  try {
+    return await form.value?.validateFields();
+  } catch (error) {
+    if (props.scrollToFirstError) {
+      // 滚动到第一个错误字段
+      form.value?.scrollToField(error.errorFields[0].name.toString());
+    }
+    throw error;
+  }
+}
+
+/**
+ * 设置表单数据
+ * @param data
+ */
+function setData(data: FormDataModel) {
+  Object.assign(formData, data);
+}
+
+// form组件需要特殊处理
+const mountedForm = (vNode: VNode) => {
+  form.value = vNode.component?.exposed as FormInstance;
+
+  if (props.componentSchema?.type === 'form' && forms.value && form.value) {
+    const name =
+      props.componentSchema?.componentProps?.name ??
+      props.componentSchema?.name ??
+      ('default' as string);
+
+    form.value.validate = validate;
+    forms.value[name] = form.value;
+    form.value.getData = getData;
+    form.value.setData = setData;
+    return false;
+  }
+};
+
+const componentProps = computed(() => {
+  const recordProps = props.componentSchema!.componentProps;
+  let labelCol = recordProps.labelCol;
+  let wrapperCol = recordProps.wrapperCol;
+  if (recordProps.layout === 'vertical') {
+    labelCol = wrapperCol = { span: 24 };
+  } else if (
+    recordProps.layout === 'inline' &&
+    recordProps.labelLayout === 'fixed'
+  ) {
+    // 处理内联固定label宽度导致换行问题
+    labelCol = {};
+    wrapperCol = { flex: 1 };
+  } else if (recordProps.labelLayout === 'fixed') {
+    // 兼容 旧版本 labelWidth 是 number 的情况
+    labelCol = {
+      flex: `${typeof recordProps.labelWidth === 'number' ? `${recordProps.labelWidth}px` : recordProps.labelWidth}`,
+    };
+    wrapperCol = { flex: 1 };
+  }
+
+  return {
+    ...recordProps,
+    labelCol,
+    wrapperCol,
+  };
+});
+
+function onFinish() {}
+
+const children = computed(() => {
+  return props.componentSchema!.children ?? [];
+});
+
+defineExpose({
+  form,
+  getData,
+  setData,
+  validate,
+});
+</script>
+<template>
+  <Form
+    :model="formData"
+    v-bind="componentProps"
+    @finish="onFinish"
+    :class="{ 'epic-form-mode': designerProps?.formMode }"
+    @vue:mounted="mountedForm"
+  >
+    <slot name="edit-node">
+      <slot
+        v-for="item in children"
+        name="node"
+        :component-schema="item"
+      ></slot>
+    </slot>
+  </Form>
+</template>