epic-designer-gold 0.0.1 → 0.0.3

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

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

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

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

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

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

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

@@ -1,304 +0,0 @@
-import { type ComponentConfigModel } from "@epic-designer/utils";
-export default {
-  component: () => import("./datePicker"),
-  groupName: "表单",
-  icon: "icon--epic--calendar-month-outline-rounded",
-  sort: 910,
-  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: "大号",
-              value: "large",
-            },
-            {
-              label: "中等",
-              value: "middle",
-            },
-            {
-              label: "小型",
-              value: "small",
-            },
-          ],
-        },
-        field: "componentProps.size",
-      },
-
-      {
-        label: "弹出框位置",
-        type: "select",
-        componentProps: {
-          placeholder: "请选择",
-          allowClear: true,
-          options: [
-            {
-              label: "bottomLeft",
-              value: "bottomLeft",
-            },
-            {
-              label: "bottomRight",
-              value: "bottomRight",
-            },
-            {
-              label: "topLeft",
-              value: "topLeft",
-            },
-            {
-              label: "topRight",
-              value: "topRight",
-            },
-          ]
-        },
-        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

@@ -1,115 +0,0 @@
-<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 } from 'vue'
-import { Form } from 'ant-design-vue'
-import type { ComponentSchema, FormDataModel } from '@epic-designer/core/types/epic-designer'
-import { type PageManager } from '@epic-designer/utils'
-
-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 pageManager = inject('pageManager', {}) as PageManager
-const form = ref<FormInstance | null>(null)
-const forms = inject('forms', {}) as Ref<{ [name: string]: any }>
-const formData = reactive<FormDataModel>({})
-pageManager.addFormData(formData, props.componentSchema?.componentProps?.name)
-provide('formData', formData)
-
-
-/**
- * 获取表单数据
- * @param formName 表单name
- */
-function getData(): FormDataModel {
-  return formData
-}
-
-/**
- * 校验表单数据
- * @param data
- */
-function validate() {
-  return form.value?.validateFields()
-}
-
-/**
- * 设置表单数据
- * @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.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(e: any) {
-  console.log(e)
-}
-
-const children = computed(() => {
-  return props.componentSchema!.children ?? []
-})
-
-defineExpose({
-  form,
-  getData,
-  setData,
-  validate
-})
-</script>