form-designer-xinyi 1.0.0

package/packages/ui/naiveUi/color-picker/index.ts

@@ -0,0 +1,179 @@
+import { type ComponentConfigModel } from "@epic-designer/utils";
+export default {
+  component: async () =>
+    (await import("naive-ui/lib/color-picker")).NColorPicker,
+  groupName: "表单",
+  icon: "epic-icon-yanse",
+  defaultSchema: {
+    label: "颜色选择器",
+    type: "color-picker",
+    field: "color-picker",
+    input: true,
+    componentProps: {
+      type: "color",
+      modes: ["hex"],
+      showAlpha: true,
+      placement: "bottom-start",
+    },
+  },
+  config: {
+    attribute: [
+      {
+        label: "字段名",
+        type: "input",
+        field: "field",
+      },
+      {
+        label: "标题",
+        type: "input",
+        field: "label",
+      },
+      {
+        label: "默认值",
+        type: "color-picker",
+        field: "componentProps.defaultValue",
+      },
+      {
+        label: "尺寸",
+        type: "select",
+        defaultValue: "default",
+        componentProps: {
+          placeholder: "请选择",
+          options: [
+            {
+              label: "large",
+              value: "large",
+            },
+            {
+              label: "medium",
+              value: "medium",
+            },
+            {
+              label: "small",
+              value: "small",
+            },
+          ],
+        },
+        field: "componentProps.size",
+      },
+      {
+        label: "菜单弹出的位置",
+        type: "select",
+        field: "componentProps.placement",
+        componentProps: {
+          options: [
+            {
+              label: "top-start",
+              value: "top-start",
+            },
+            {
+              label: "top",
+              value: "top",
+            },
+            {
+              label: "top-end",
+              value: "top-end",
+            },
+            {
+              label: "right-start",
+              value: "right-start",
+            },
+            {
+              label: "right",
+              value: "right",
+            },
+            {
+              label: "right-end",
+              value: "right-end",
+            },
+            {
+              label: "bottom-start",
+              value: "bottom-start",
+            },
+            {
+              label: "bottom",
+              value: "bottom",
+            },
+            {
+              label: "bottom-end",
+              value: "bottom-end",
+            },
+            {
+              label: "left-start",
+              value: "left-start",
+            },
+            {
+              label: "left",
+              value: "left",
+            },
+            {
+              label: "left-end",
+              value: "left-end",
+            },
+          ],
+        },
+      },
+      {
+        label: "格式",
+        type: "checkbox",
+        field: "componentProps.modes",
+        componentProps: {
+          options: [
+            {
+              label: "rgb",
+              value: "rgb",
+            },
+            {
+              label: "hex",
+              value: "hex",
+            },
+            {
+              label: "hsl",
+              value: "hsl",
+            },
+            {
+              label: "hsv",
+              value: "hsv",
+            },
+          ],
+          max: 1,
+        },
+      },
+      {
+        label: "展示预览块",
+        type: "switch",
+        field: "componentProps.showPreview",
+      },
+      {
+        label: "可调节透明度",
+        type: "switch",
+        field: "componentProps.showAlpha",
+      },
+      {
+        label: "禁用",
+        type: "switch",
+        field: "componentProps.disabled",
+      },
+      {
+        label: "隐藏",
+        type: "switch",
+        field: "componentProps.hidden",
+      },
+      {
+        label: "表单校验",
+        type: "ERuleEditor",
+        layout: "vertical",
+        field: "rules",
+        describe: "校验规则需要配合表单使用",
+      },
+    ],
+    event: [
+      {
+        type: "change",
+        describe: "值变化时",
+      },
+    ],
+    action: [],
+  },
+  bindModel: "value",
+} as ComponentConfigModel;

package/packages/ui/naiveUi/date-picker/index.ts

@@ -0,0 +1,210 @@
+import { type ComponentConfigModel } from "@epic-designer/utils";
+export default {
+  component: async () => (await import("naive-ui/lib/date-picker")).NDatePicker,
+  groupName: "表单",
+  icon: "epic-icon-calendar",
+  defaultSchema: {
+    label: "日期选择器",
+    type: "date",
+    field: "date",
+    input: true,
+    componentProps: {
+      type: "date",
+      placeholder: "请选择",
+      format: "yyyy-MM-dd",
+      valueFormat: "yyyy-MM-dd",
+    },
+  },
+  config: {
+    attribute: [
+      {
+        label: "字段名",
+        type: "input",
+        field: "field",
+      },
+      {
+        label: "标题",
+        type: "input",
+        field: "label",
+      },
+      {
+        label: "默认值",
+        type: "date",
+        field: "componentProps.defaultValue",
+      },
+      {
+        label: "尺寸",
+        type: "select",
+        field: "componentProps.size",
+        componentProps: {
+          options: [
+            {
+              label: "small",
+              value: "small",
+            },
+            {
+              label: "medium",
+              value: "medium",
+            },
+            {
+              label: "large",
+              value: "large",
+            },
+          ],
+        },
+      },
+      {
+        label: "占位内容",
+        type: "input",
+        field: "componentProps.placeholder",
+      },
+      {
+        label: "日期类型",
+        type: "select",
+        field: "componentProps.type",
+        componentProps: {
+          options: [
+            {
+              label: "日期",
+              value: "date",
+            },
+            {
+              label: "日期时间",
+              value: "datetime",
+            },
+            {
+              label: "日期范围",
+              value: "daterange",
+            },
+            {
+              label: "时间范围",
+              value: "datetimerange",
+            },
+            {
+              label: "月份",
+              value: "month",
+            },
+            {
+              label: "月份范围",
+              value: "monthrange",
+            },
+            {
+              label: "年份",
+              value: "year",
+            },
+
+            {
+              label: "季度",
+              value: "quarter",
+            },
+            {
+              label: "周",
+              value: "week",
+            },
+          ],
+        },
+        onChange({ values, value }) {
+          values.componentProps.defaultValue = null;
+          console.log(value);
+          if (["date", "daterange", "dates"].includes(value)) {
+            values.componentProps.format = "yyyy-MM-dd";
+            values.componentProps.valueFormat = "yyyy-MM-dd";
+          } else if (["week"].includes(value)) {
+            values.componentProps.format = null;
+            values.componentProps.valueFormat = "yyyy-MM-dd";
+          } else if (["quarter"].includes(value)) {
+            values.componentProps.format = null;
+            values.componentProps.valueFormat = "yyyy-MM-dd";
+          } else if (["month", "monthrange"].includes(value)) {
+            values.componentProps.format = "yyyy-MM";
+            values.componentProps.valueFormat = "yyyy-MM";
+          } else if (["datetime", "datetimerange"].includes(value)) {
+            values.componentProps.format = "yyyy-MM-dd HH:mm:ss";
+            values.componentProps.valueFormat = "yyyy-MM-dd HH:mm:ss";
+          } else if (["year"].includes(value)) {
+            values.componentProps.format = "yyyy";
+            values.componentProps.valueFormat = "yyyy";
+          }
+        },
+      },
+      {
+        label: "显示格式",
+        type: "input",
+        field: "componentProps.format",
+      },
+      {
+        label: "数据格式",
+        type: "input",
+        field: "componentProps.valueFormat",
+      },
+      {
+        label: "分割符",
+        type: "input",
+        field: "componentProps.separator",
+        componentProps: {
+          placeholder: "请输入",
+          clearable: true,
+        },
+        show: ({ values }) =>
+          ["daterange", "datetimerange", "monthrange"].includes(
+            values.componentProps.type
+          ),
+      },
+      {
+        label: "start框占位符",
+        type: "input",
+        field: "componentProps.startPlaceholder",
+        componentProps: {
+          placeholder: "请输入",
+          clearable: true,
+        },
+        show: ({ values }) =>
+          ["daterange", "datetimerange", "monthrange"].includes(
+            values.componentProps.type
+          ),
+      },
+      {
+        label: "end框占位符",
+        type: "input",
+        field: "componentProps.endPlaceholder",
+        componentProps: {
+          placeholder: "请输入",
+          clearable: true,
+        },
+        show: ({ values }) =>
+          ["daterange", "datetimerange", "monthrange"].includes(
+            values.componentProps.type
+          ),
+      },
+      {
+        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: "change",
+        describe: "值变化时",
+      },
+    ],
+  },
+  bindModel: "formatted-value",
+} as ComponentConfigModel;

package/packages/ui/naiveUi/form/form.vue

@@ -0,0 +1,85 @@
+<template>
+  <div v-if="visible" class="form-main" style="height: 100%">
+    <NForm ref="form" :model="formData" v-bind="componentProps" style="height: 100%">
+      <slot name="edit-node">
+        <slot v-for="item in children" name="node" :componentSchema="item" />
+      </slot>
+    </NForm>
+  </div>
+</template>
+<script lang="ts" setup>
+import type { Ref, PropType } from 'vue'
+import { ref, computed, inject, reactive, provide, onMounted } from 'vue'
+import { NForm } from 'naive-ui/lib/form'
+import type { ComponentSchema, FormDataModel } from '@epic-designer/core/types/epic-designer'
+
+interface FormInstance extends InstanceType<typeof NForm> {
+  getData?: () => FormDataModel
+  setData?: (FormDataModel) => void
+}
+
+const props = defineProps({
+  componentSchema: {
+    type: Object as PropType<ComponentSchema>,
+    require: true,
+    default: () => ({})
+  }
+})
+const form = ref<FormInstance | null>(null)
+const forms = inject('forms', {}) as Ref<{ [name: string]: FormInstance }>
+const visible = ref(true)
+const formData = reactive<FormDataModel>({})
+provide('formData', formData)
+
+/**
+ * 获取表单数据
+ * @param formName 表单name
+ */
+function getData(): FormDataModel {
+  return formData
+}
+
+/**
+ * 设置表单数据
+ * @param data
+ */
+ function setData (data: FormDataModel) {
+  Object.assign(formData, data)
+}
+
+/**
+ * 校验表单数据
+ * @param data
+ */
+ function validate() {
+  return form.value?.validate()
+}
+
+// form组件需要特殊处理
+onMounted(async (): Promise<void> => {
+  if (props.componentSchema?.type === 'form' && forms.value && form.value) {
+    const name = props.componentSchema?.componentProps?.name ??
+    props.componentSchema?.name ?? 'default' as string
+
+    forms.value[name] = form.value as any
+    form.value.getData = getData
+    form.value.setData = setData
+  }
+})
+
+const componentProps = computed(() => {
+  const recordProps = props.componentSchema!.componentProps
+  return recordProps
+})
+
+const children = computed(() => {
+  return props.componentSchema!.children ?? []
+})
+
+defineExpose({
+  form,
+  getData,
+  setData,
+  validate
+})
+</script>

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

@@ -0,0 +1,141 @@
+import { type ComponentConfigModel } from "@epic-designer/utils";
+
+export default {
+  component: () => import("./form.vue"),
+  groupName: "表单",
+  icon: "epic-icon-daibanshixiang",
+  defaultSchema: {
+    label: "表单",
+    type: "form",
+    componentProps: {
+      name: "default",
+      labelWidth: 100,
+      labelCol: {
+        span: 5,
+      },
+      wrapperCol: {
+        span: 19,
+      },
+      hideRequiredMark: false,
+      labelPlacement: "left",
+      labelAlign: "right",
+      requireMarkPlacement: "right",
+    },
+    children: [],
+  },
+  config: {
+    attribute: [
+      {
+        label: "name",
+        type: "input",
+        field: "componentProps.name",
+      },
+      {
+        label: "标签宽度",
+        type: "EInputSize",
+        field: "componentProps.labelWidth",
+      },
+      {
+        label: "标签位置",
+        type: "select",
+        field: "componentProps.labelPlacement",
+        componentProps: {
+          options: [
+            {
+              label: "left",
+              value: "left",
+            },
+            {
+              label: "top",
+              value: "top",
+            },
+          ],
+        },
+      },
+      {
+        label: "标签对齐方式",
+        type: "select",
+        field: "componentProps.labelAlign",
+        componentProps: {
+          options: [
+            {
+              label: "left",
+              value: "left",
+            },
+            {
+              label: "right",
+              value: "right",
+            },
+          ],
+        },
+      },
+      {
+        label: "必填星号位置",
+        type: "select",
+        field: "componentProps.requireMarkPlacement",
+        componentProps: {
+          options: [
+            {
+              label: "left",
+              value: "left",
+            },
+            {
+              label: "right",
+              value: "right",
+            },
+          ],
+        },
+      },
+      {
+        label: "表单尺寸",
+        type: "select",
+        field: "componentProps.size",
+        componentProps: {
+          options: [
+            {
+              label: "large",
+              value: "large",
+            },
+            {
+              label: "medium",
+              value: "medium",
+            },
+            {
+              label: "small",
+              value: "small",
+            },
+          ],
+        },
+      },
+      {
+        label: "行内模式",
+        type: "switch",
+        field: "componentProps.inline",
+      },
+      {
+        label: "禁用",
+        type: "switch",
+        field: "componentProps.disabled",
+      },
+      {
+        label: '隐藏',
+        type: 'switch',
+        field: 'componentProps.hidden'
+      },
+    ],
+    action: [
+      {
+        type: "getData",
+        describe: "获取表单数据",
+      },
+      {
+        type: "setData",
+        describe: "设置表单数据",
+      },
+      {
+        type: "validate",
+        describe: "校验表单",
+      },
+    ],
+  },
+} as ComponentConfigModel;

package/packages/ui/naiveUi/form-item/formItem.vue

@@ -0,0 +1,15 @@
+<template>
+  <NFormItem
+    ref="form"
+    v-bind="attrs"
+    :path="attrs.field"
+  >
+    <slot />
+  </NFormItem>
+</template>
+<script lang="ts" setup>
+import { ref, useAttrs } from 'vue'
+import { NFormItem } from 'naive-ui/lib/form'
+const attrs = useAttrs() as any
+const form = ref<any>(null)
+</script>

package/packages/ui/naiveUi/form-item/index.ts

@@ -0,0 +1,10 @@
+import { type ComponentConfigModel } from '@epic-designer/utils'
+
+export default {
+  component: () => import('./formItem.vue'),
+  defaultSchema: {
+    label: '表单项',
+    type: 'form-item'
+  },
+  config: {}
+} as ComponentConfigModel

package/packages/ui/naiveUi/index.less

@@ -0,0 +1,33 @@
+// 折叠面板样式重置
+.n-collapse .n-collapse-item:first-child,
+.n-collapse .n-collapse-item {
+  > .n-collapse-item__header {
+    padding-top: 16px;
+    .n-collapse-item__header-main {
+      padding-left: 8px;
+    }
+  }
+}
+
+// 适配k-input-size样式
+.epic-input-size > .n-input-wrapper {
+  padding-right: 0;
+}
+
+.epic-modal-n {
+  margin: 0 auto 0 !important;
+  height: calc(100vh - 50px);
+  .n-card-header {
+    padding: 16px 16px 0;
+  }
+
+  .n-card__content {
+    padding: 0;
+    height: calc(100% - 56px);
+    .epic-modal-main {
+      height: calc(100% - 56px);
+      overflow: auto;
+      padding: 12px;
+    }
+  }
+}