form-designer-xinyi 1.0.0

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

@@ -0,0 +1,302 @@
+import { type ComponentConfigModel } from "@epic-designer/utils";
+export default {
+  component: () => import("./datePicker"),
+  groupName: "表单",
+  icon: "epic-icon-calendar",
+  defaultSchema: {
+    label: "日期选择器",
+    type: "date",
+    field: "date",
+    input: true,
+    componentProps: {
+      valueFormat: "YYYY-MM-DD",
+      format: "YYYY-MM-DD",
+      type: "date",
+      placeholder: "请选择",
+    },
+  },
+  config: {
+    attribute: [
+      {
+        label: "字段名",
+        type: "input",
+        field: "field",
+      },
+      {
+        label: "标题",
+        type: "input",
+        componentProps: {
+          placeholder: "请输入",
+        },
+        field: "label",
+      },
+      {
+        label: "默认值",
+        type: "date",
+        field: "componentProps.defaultValue",
+      },
+      {
+        label: "日期类型",
+        type: "select",
+        field: "componentProps.type",
+        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",
+            },
+          ],
+        },
+        changeSync: true,
+        onChange({ values, value }) {
+          values.componentProps.defaultValue = null;
+          if (
+            [
+              "daterange",
+              "weekrange",
+              "monthrange",
+              "yearrange",
+              "quarterrange",
+            ].includes(value)
+          ) {
+            values.componentProps.placeholder = ["请输入", "请输入"];
+          } else {
+            values.componentProps.placeholder = "请输入";
+          }
+
+          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 (["year", '"yearrange"'].includes(value)) {
+            values.componentProps.format = "YYYY";
+            values.componentProps.valueFormat = "YYYY";
+          }
+        },
+      },
+      {
+        label: "增加时间选择",
+        type: "switch",
+        field: "componentProps.showTime",
+        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);
+        },
+      },
+      {
+        label: "占位内容",
+        type: "input",
+        field: "componentProps.placeholder",
+        componentProps: {
+          placeholder: "请输入",
+        },
+        show: ({ values }) =>
+          ![
+            "daterange",
+            "weekrange",
+            "monthrange",
+            "yearrange",
+            "quarterrange",
+          ].includes(values.componentProps.type),
+      },
+      {
+        label: "开始占位符",
+        type: "input",
+        componentProps: {
+          placeholder: "请输入",
+        },
+        field: "componentProps.placeholder.0",
+        show: ({ values }) =>
+          [
+            "daterange",
+            "weekrange",
+            "monthrange",
+            "yearrange",
+            "quarterrange",
+          ].includes(values.componentProps.type),
+      },
+
+      {
+        label: "结束占位符",
+        type: "input",
+        componentProps: {
+          placeholder: "请输入",
+        },
+        field: "componentProps.placeholder.1",
+        show: ({ values }) =>
+          [
+            "daterange",
+            "weekrange",
+            "monthrange",
+            "yearrange",
+            "quarterrange",
+          ].includes(values.componentProps.type),
+      },
+      {
+        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: "select",
+        componentProps: {
+          options: [
+            {
+              label: "bottomLeft",
+              value: "bottomLeft",
+            },
+            {
+              label: "bottomRight",
+              value: "bottomRight",
+            },
+            {
+              label: "topLeft",
+              value: "topLeft",
+            },
+            {
+              label: "topRight",
+              value: "topRight",
+            },
+          ],
+          placeholder: "请选择",
+        },
+        field: "componentProps.placement",
+      },
+      {
+        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: "值变化时",
+      },
+      {
+        type: "ok",
+        describe: "点击确定按钮时",
+      },
+    ],
+  },
+  bindModel: "modelValue",
+} as ComponentConfigModel;

package/packages/ui/antd/form/form.vue

@@ -0,0 +1,118 @@
+<template>
+  <div class="form-main" style="height: 100%;">
+    <Form ref="form" :model="formData" v-bind="componentProps" style="height: 100%;" @finish="onFinish">
+      <slot name="edit-node">
+        <slot v-for="item in children" name="node" :componentSchema="item" />
+      </slot>
+    </Form>
+  </div>
+</template>
+<script lang="ts" setup>
+import { ref, type Ref, type PropType, reactive, provide, computed, inject, onMounted, watch } from 'vue'
+import { Form } from 'ant-design-vue'
+import type { ComponentSchema, FormDataModel } from '@epic-designer/core/types/epic-designer'
+import { useFormLogic } from '../../hooks'
+interface FormInstance extends InstanceType<typeof Form> {
+  getData?: () => FormDataModel
+  setData?: (FormDataModel) => void
+  validateFields: () => void
+  validate: () => 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]: any }>
+const { formData, setLogicRules } = useFormLogic(clearValidate)
+provide('formData', formData)
+
+watch(() => props.componentSchema.componentProps.logicRules, rules => {
+  setLogicRules(rules)
+}, {
+  deep: true,
+  immediate: true
+})
+
+
+
+/**
+ * 获取表单数据
+ * @param formName 表单name
+ */
+function getData(): FormDataModel {
+  return formData
+}
+
+/**
+ * 校验表单数据
+ * @param data
+ */
+function validate() {
+  return form.value?.validateFields()
+}
+
+/**
+ * 移除校验结果
+ * @param data
+ */
+function clearValidate() {
+  return form.value?.clearValidate()
+}
+
+/**
+ * 设置表单数据
+ * @param data
+ */
+function setData(data: FormDataModel) {
+  Object.assign(formData, data)
+}
+
+// form组件需要特殊处理
+onMounted(async () => {
+  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.labelLayout === 'fixed') {
+    labelCol = { flex: `${typeof recordProps.labelWidth === 'number' ? recordProps.labelWidth + 'px' : recordProps.labelWidth}` }
+    wrapperCol = { flex: 1 }
+  }
+  return {
+    ...recordProps,
+    labelCol,
+    wrapperCol
+
+  }
+})
+
+function onFinish(e: any) {
+  console.log(e)
+}
+
+const children = computed(() => {
+  return props.componentSchema!.children ?? []
+})
+
+defineExpose({
+  form,
+  getData,
+  setData,
+  validate
+})
+</script>

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

@@ -0,0 +1,195 @@
+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: "100px",
+      labelLayout: "fixed",
+      labelCol: {
+        span: 5,
+      },
+      wrapperCol: {
+        span: 19,
+      },
+    },
+    children: [],
+  },
+  config: {
+    attribute: [
+      {
+        label: "name",
+        type: "input",
+        field: "componentProps.name",
+      },
+      {
+        label: "标签布局",
+        type: "radio",
+        field: "componentProps.labelLayout",
+        componentProps: {
+          options: [
+            {
+              label: "固定宽度",
+              value: "fixed",
+            },
+            {
+              label: "自适应宽度",
+              value: "flex",
+            },
+          ],
+        },
+      },
+      {
+        label: "标签宽度",
+        type: "EInputSize",
+        field: "componentProps.labelWidth",
+        show: ({ values }) => {
+          return values.componentProps?.labelLayout === "fixed";
+        },
+      },
+      {
+        label: "labelCol",
+        type: "input",
+        field: "componentProps.labelCol.span",
+        show: ({ values }) => {
+          return values.componentProps?.labelLayout === "flex";
+        },
+      },
+      {
+        label: "wrapperCol",
+        type: "input",
+        field: "componentProps.wrapperCol.span",
+        show: ({ values }) => {
+          return values.componentProps?.labelLayout === "flex";
+        },
+      },
+      {
+        label: "对齐方式",
+        type: "select",
+        componentProps: {
+          placeholder: "请选择",
+          allowClear: true,
+          options: [
+            {
+              label: "left",
+              value: "left",
+            },
+            {
+              label: "right",
+              value: "right",
+            },
+          ],
+        },
+        field: "componentProps.labelAlign",
+      },
+      {
+        label: "表单布局",
+        type: "select",
+        componentProps: {
+          placeholder: "请选择",
+          allowClear: true,
+          options: [
+            {
+              label: "horizontal",
+              value: "horizontal",
+            },
+            {
+              label: "vertical",
+              value: "vertical",
+            },
+            {
+              label: "inline",
+              value: "inline",
+            },
+          ],
+        },
+        field: "componentProps.layout",
+      },
+      {
+        label: "尺寸",
+        type: "select",
+        defaultValue: "default",
+        componentProps: {
+          placeholder: "请选择",
+          allowClear: true,
+          options: [
+            {
+              label: "large",
+              value: "large",
+            },
+            {
+              label: "middle",
+              value: "middle",
+            },
+            {
+              label: "small",
+              value: "small",
+            },
+          ],
+        },
+        field: "componentProps.size",
+      },
+      {
+        label: "隐藏冒号",
+        type: "switch",
+        componentProps: {
+          checkedValue: false,
+          unCheckedValue: true,
+        },
+        field: "componentProps.colon",
+      },
+      {
+        label: "隐藏必须标志",
+        type: "switch",
+        field: "componentProps.hideRequiredMark",
+      },
+
+      {
+        label: "标签文本换行",
+        type: "switch",
+        field: "componentProps.labelWrap",
+      },
+      {
+        label: "滚动校验错误处",
+        type: "switch",
+        field: "componentProps.scrollToFirstError",
+      },
+      {
+        label: "禁用",
+        type: "switch",
+        field: "componentProps.disabled",
+      },
+      {
+        label: "隐藏",
+        type: "switch",
+        field: "componentProps.hidden",
+      },
+      {
+        label: "逻辑控制",
+        type: "formLogic",
+        layout: "vertical",
+        field: "componentProps.logicRules",
+        describe: "逻辑规则",
+      },
+    ],
+    action: [
+      {
+        type: "getData",
+        describe: "获取表单数据",
+      },
+      {
+        type: "setData",
+        describe: "设置表单数据",
+      },
+      {
+        type: "validate",
+        describe: "校验表单",
+      },
+    ],
+  },
+} as ComponentConfigModel;

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

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

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

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

package/packages/ui/antd/formLogic/actionEdit.vue

@@ -0,0 +1,72 @@
+<template>
+    <div>
+        <ActionItemCmp v-model="innerValue[index]" v-for="(_condition, index) in innerValue" :key="index"
+            :fieldOptions="fieldOptions" :triggerOptions="triggerOptions" @delete="handleDelete(index)" />
+        <Dropdown>
+            <span class="ant-dropdown-link cursor-pointer text-blue-500" @click.prevent>
+                <span class="iconfont epic-icon-tianjia" />
+                添加动作
+            </span>
+            <template #overlay>
+                <Menu>
+                    <MenuItem @click="handleAdd(item.value)" :key="item.value" v-for="item in triggerOptions">
+                    {{ item.label }}
+                    </MenuItem>
+
+                </Menu>
+            </template>
+        </Dropdown>
+    </div>
+</template>
+<script lang="ts" setup>
+import { useVModel } from '@vueuse/core'
+import { ActionItem } from './types'
+import { Dropdown, Menu, MenuItem } from 'ant-design-vue'
+import { Designer } from '@epic-designer/core'
+import { getFormSchemas } from '@epic-designer/utils'
+import { inject, computed } from 'vue'
+import ActionItemCmp from './actionItem.vue'
+const designer = inject('designer') as Designer
+
+const checkedNode = computed(() => {
+    return designer.state.checkedNode
+})
+
+const fieldOptions = computed(() => {
+    return getFormSchemas([checkedNode.value!], checkedNode.value?.componentProps.name).map(item => ({ label: item.label, value: item.id })).reverse()
+})
+
+const triggerOptions = [
+    { label: '隐藏', value: 'hide' },
+    { label: '显示', value: 'show' },
+    { label: '必填', value: 'required' },
+    { label: '非必填', value: 'notRequired' },
+    { label: '只读', value: 'readonly' },
+    { label: '可写', value: 'readWrite' },
+    { label: '禁用', value: 'disabled' },
+    { label: '启用', value: 'enabled' },
+    { label: '设置值', value: 'setValue' },
+]
+
+const props = defineProps<{
+    modelValue: ActionItem[]
+}>()
+const emit = defineEmits(['update:modelValue'])
+
+
+
+const innerValue = useVModel(props, 'modelValue', emit)
+
+function handleAdd(trigger) {
+
+    innerValue.value.push({
+        trigger
+    })
+
+}
+
+function handleDelete(index) {
+    innerValue.value.splice(index, 1);
+}
+
+</script>