y-admin-pro 0.0.1

package/packages/ele-pro-form/index.vue

@@ -0,0 +1,312 @@
+<!-- 高级表单 -->
+<template>
+  <ElForm
+    ref="formRef"
+    :model="model"
+    :labelPosition="labelPosition"
+    :labelWidth="labelWidth"
+    :statusIcon="statusIcon"
+    :validateOnRuleChange="validateOnRuleChange"
+    :size="size"
+    :disabled="disabled"
+    :scrollToError="scrollToError"
+    :scrollIntoViewOptions="scrollIntoViewOptions"
+    :inline="inline"
+    :labelSuffix="labelSuffix"
+    :hideRequiredAsterisk="hideRequiredAsterisk"
+    :requireAsteriskPosition="requireAsteriskPosition"
+    :showMessage="showMessage"
+    :inlineMessage="inlineMessage"
+    :class="['ele-pro-form', { 'is-editable': editable }]"
+    @validate="handleFormValidate"
+    @submit="handleFormSubmit"
+  >
+    <slot name="topExtra"></slot>
+    <ChildrenRender
+      ref="childrenRef"
+      :model="model"
+      :items="formItems"
+      :rules="rules"
+      :grid="grid"
+      :rowProps="rowProps"
+      :contentExtraColProps="footerColProps"
+      :autoContentExtraCol="autoFooterCol"
+      :formItems="formItems"
+      :searchExpand="formSearchExpand"
+      :editable="editable"
+      :screenSize="screenSize"
+      :activeItemKey="currentActiveKey"
+      :itemTypeData="itemTypeData"
+      :httpRequest="httpRequest"
+      :getProFormRefs="getProFormRefs"
+      :getAndCacheCode="getAndCacheCode"
+      :requiredLang="lang.required"
+      @updateItemValue="updateValue"
+      @updateItemsData="handleUpdateItemsData"
+      @update:activeItemKey="handleUpdateActiveItemKey"
+    >
+      <template
+        v-for="name in Object.keys($slots).filter(
+          (k) => !slotExcludes.includes(k)
+        )"
+        #[name]="slotProps"
+      >
+        <slot :name="name" v-bind="slotProps || {}"></slot>
+      </template>
+      <template v-if="footer" #contentExtra>
+        <ProFormFooter
+          :footerProps="footerProps"
+          :footerSlots="footerSlots"
+          :autoFooterCol="autoFooterCol"
+          :footerStyle="footerStyleData"
+          :submitText="submitText ?? lang.submit"
+          :resetText="resetText ?? lang.reset"
+          :submitButtonProps="submitButtonProps"
+          :resetButtonProps="resetButtonProps"
+          :showSearchExpand="showSearchExpand"
+          :searchExpand="formSearchExpand"
+          :searchExpandButtonProps="searchExpandButtonProps"
+          :searchExpandText="searchExpandText ?? lang.expand"
+          :searchShrinkText="searchShrinkText ?? lang.shrink"
+          @submit="handleSubmit"
+          @reset="handleReset"
+          @updateSearchExpand="updateSearchExpand"
+        >
+          <template
+            v-for="name in Object.keys($slots).filter(
+              (k) => !footerSlotExcludes.includes(k)
+            )"
+            #[name]="slotProps"
+          >
+            <slot :name="name" v-bind="slotProps || {}"></slot>
+          </template>
+        </ProFormFooter>
+      </template>
+    </ChildrenRender>
+    <slot name="bottomExtra"></slot>
+  </ElForm>
+</template>
+
+<script lang="ts" setup>
+  import {
+    ref,
+    computed,
+    watch,
+    nextTick,
+    onBeforeUnmount,
+    useModel
+  } from 'vue';
+  import { ElForm } from 'element-plus';
+  import type {
+    ElFormInstance,
+    ElFormInstanceMethods,
+    ElFormItemProp
+  } from '../ele-app/el';
+  import { useLocale } from '../ele-config-provider/receiver';
+  import { eachTree } from '../utils/common';
+  import { translateJsCode } from './components/render-core';
+  import { ChildrenRender } from './components/render-util';
+  import type { ChildrenRenderInstance } from './components/render-util';
+  import ProFormFooter from './components/pro-form-footer.vue';
+  import type {
+    ProFormItemProps,
+    ProFormItemKey,
+    ProFormLocale
+  } from './types';
+  import { proFormProps, proFormEmits } from './props';
+  const footerSlotExcludes = [
+    'default',
+    'topExtra',
+    'bottomExtra',
+    'contentExtra'
+  ];
+  const slotExcludes = [...footerSlotExcludes, 'footer', 'footerExtra'];
+
+  defineOptions({ name: 'EleProForm' });
+
+  const props = defineProps(proFormProps);
+
+  const emit = defineEmits(proFormEmits);
+
+  /** 表单项数据 */
+  const formItems = useModel(props, 'items');
+
+  /** 国际化语言 */
+  const { lang } = useLocale<ProFormLocale>('proForm', props);
+
+  /** 表单实例 */
+  const formRef = ref<ElFormInstance>(null);
+
+  /** 实例方法 */
+  const exposeMethods = {} as ElFormInstanceMethods;
+  [
+    'validate',
+    'validateField',
+    'resetFields',
+    'scrollToField',
+    'clearValidate'
+  ].forEach((key) => {
+    exposeMethods[key] = (...params: any) => {
+      if (!formRef.value) {
+        throw new Error('formRef is null');
+      }
+      return formRef.value[key](...params);
+    };
+  });
+
+  /** 子级实例 */
+  const childrenRef = ref<ChildrenRenderInstance>(null);
+
+  /** 搜索表单展开状态 */
+  const formSearchExpand = ref(!!props.searchExpand);
+
+  /** 编辑模式选中的表单项 */
+  const currentActiveKey = ref<ProFormItemKey | undefined>(props.activeItemKey);
+
+  /** 底栏样式 */
+  const footerStyleData = computed(() => {
+    return translateJsCode(
+      props.footerStyle || {},
+      props.model || {},
+      formItems.value || [],
+      formSearchExpand.value,
+      props.httpRequest
+    ).result;
+  });
+
+  /** 更新搜索表单展开状态 */
+  const updateSearchExpand = (expand: boolean) => {
+    formSearchExpand.value = expand;
+    if (props.searchExpand !== expand) {
+      emit('update:searchExpand', expand);
+    }
+  };
+
+  /** 更新表单数据属性值 */
+  const updateValue = (prop: string, value: unknown) => {
+    if (prop != null) {
+      emit('updateValue', prop, value);
+    }
+  };
+
+  /** 更新表单项数据 */
+  const handleUpdateItemsData = (
+    items: ProFormItemProps[],
+    parentItem?: ProFormItemProps
+  ) => {
+    if (!parentItem) {
+      formItems.value = items;
+    } else {
+      const parentItemKey = parentItem.key;
+      eachTree(formItems.value, (item) => {
+        if (item.key === parentItemKey) {
+          item.children = items;
+          return false;
+        }
+      });
+    }
+  };
+
+  /** 更新选中的表单项 */
+  const handleUpdateActiveItemKey = (key: ProFormItemKey) => {
+    currentActiveKey.value = key;
+    if (props.activeItemKey !== key) {
+      emit('update:activeItemKey', key);
+    }
+  };
+
+  /** 提交 */
+  const handleSubmit = () => {
+    if (formRef.value) {
+      formRef.value.validate((valid) => {
+        if (valid) {
+          emit('submit', props.model ?? {});
+        }
+      });
+    }
+  };
+
+  /** 重置 */
+  const handleReset = () => {
+    clearCodeCache();
+    emit('reset');
+    exposeMethods.clearValidate();
+    nextTick(() => {
+      exposeMethods.clearValidate();
+      nextTick(() => {
+        exposeMethods.clearValidate();
+      });
+    });
+  };
+
+  /** 表单原生的表单提交事件 */
+  const handleFormSubmit = (e: MouseEvent) => {
+    if (props.preventFormSubmit) {
+      e.preventDefault();
+    }
+  };
+
+  /** 表单校验事件 */
+  const handleFormValidate = (
+    prop: ElFormItemProp,
+    isValid: boolean,
+    message: string
+  ) => {
+    emit('validate', prop, isValid, message);
+  };
+
+  /** 同步搜索表单展开状态 */
+  watch(
+    () => props.searchExpand,
+    (expand) => {
+      if (formSearchExpand.value !== expand) {
+        formSearchExpand.value = expand;
+      }
+    }
+  );
+
+  /** 同步编辑模式选中的表单项 */
+  watch(
+    () => props.activeItemKey,
+    (key) => {
+      if (currentActiveKey.value !== key) {
+        currentActiveKey.value = key;
+      }
+    }
+  );
+
+  /** 获取表单组件的组件引用数据 */
+  const getProFormRefs = (): Record<string, any> => {
+    return childrenRef.value?.$refs || {};
+  };
+
+  /** 代码字符串解析缓存 */
+  const codeCache = new Map<string, any>();
+
+  /** 获取并缓存代码解析结果 */
+  const getAndCacheCode = (code: string, codeResult: any) => {
+    const cacheResult = codeCache.get(code);
+    if (cacheResult) {
+      return cacheResult;
+    }
+    codeCache.set(code, codeResult);
+    return codeResult;
+  };
+
+  /** 清空代码解析结果缓存 */
+  const clearCodeCache = () => {
+    codeCache.clear();
+  };
+
+  onBeforeUnmount(() => {
+    clearCodeCache();
+  });
+
+  defineExpose({
+    ...exposeMethods,
+    formRef,
+    childrenRef,
+    getProFormRefs,
+    clearCodeCache
+  });
+</script>

package/packages/ele-pro-form/props.ts

@@ -0,0 +1,201 @@
+import type { PropType, CSSProperties, ExtractPropTypes } from 'vue';
+import { formProps, formEmits } from 'element-plus';
+import type {
+  ElRowProps,
+  ElColProps,
+  ElFormItemProps,
+  ElButtonProps,
+  ElLinkProps
+} from '../ele-app/el';
+import { pick } from '../utils/common';
+import type {
+  ProFormItemKey,
+  ProFormItemProps,
+  ProFormItemTypeData,
+  ProFormItemRenderSlots,
+  ScreenSize,
+  ProFormLocale
+} from './types';
+
+/**
+ * 属性
+ */
+export const proFormProps = {
+  ...formProps,
+  /** 标签宽度 */
+  labelWidth: {
+    type: [String, Number],
+    default: '80px'
+  },
+  /** 表单项 */
+  items: Array as PropType<ProFormItemProps[]>,
+  /** 是否栅格布局 */
+  grid: [Boolean, Object] as PropType<boolean | ElColProps>,
+  /** 栅格布局时更多 ElRow 属性 */
+  rowProps: Object as PropType<ElRowProps>,
+  /** 是否需要底栏 */
+  footer: Boolean,
+  /** 底栏 ElFormItem 属性 */
+  footerProps: Object as PropType<ElFormItemProps>,
+  /** 底栏 ElFormItem 插槽 */
+  footerSlots: Object,
+  /** 栅格布局时底栏 ElCol 属性 */
+  footerColProps: Object as PropType<ElColProps>,
+  /** 自动计算底栏栅格份数 */
+  autoFooterCol: Boolean,
+  /** 底栏样式 */
+  footerStyle: Object as PropType<CSSProperties>,
+  /** 提交按钮文本 */
+  submitText: String,
+  /** 重置按钮文本 */
+  resetText: String,
+  /** 提交按钮属性 */
+  submitButtonProps: Object as PropType<ElButtonProps>,
+  /** 重置按钮属性 */
+  resetButtonProps: Object as PropType<ElButtonProps>,
+  /** 是否在底栏显示表单展开收起按钮 */
+  showSearchExpand: Boolean,
+  /** 展开和收起按钮属性 */
+  searchExpandButtonProps: Object as PropType<ElLinkProps>,
+  /** 展开按钮的文字 */
+  searchExpandText: String,
+  /** 收起按钮的文字 */
+  searchShrinkText: String,
+  /** 搜索表单展开状态 */
+  searchExpand: Boolean,
+  /** 阻止表单原生的表单提交事件 */
+  preventFormSubmit: {
+    type: Boolean,
+    default: true
+  },
+  /** 编辑模式 */
+  editable: Boolean,
+  /** 屏幕尺寸 */
+  screenSize: String as PropType<ScreenSize>,
+  /** 编辑模式选中的表单项 */
+  activeItemKey: [String, Number] as PropType<ProFormItemKey>,
+  /** 组件类型数据 */
+  itemTypeData: Array as PropType<ProFormItemTypeData[]>,
+  /** 远程数据源请求工具 */
+  httpRequest: [Object, Function],
+  /** 国际化 */
+  locale: Object as PropType<Partial<ProFormLocale>>
+};
+
+export type ProFormProps = ExtractPropTypes<typeof proFormProps>;
+
+/**
+ * 事件
+ */
+export const proFormEmits = {
+  ...formEmits,
+  'update:searchExpand': (_expand: boolean) => true,
+  updateValue: (_prop: string, _value: unknown) => true,
+  'update:items': (_items: ProFormItemProps[]) => true,
+  'update:activeItemKey': (_activeKey: ProFormItemKey) => true,
+  submit: (_model: Record<string, any>) => true,
+  reset: () => true
+};
+
+/**
+ * 表单项数据渲染组件属性
+ */
+export const childrenRenderProps = {
+  ...pick(proFormProps, [
+    'model',
+    'items',
+    'rules',
+    'grid',
+    'rowProps',
+    'editable',
+    'screenSize',
+    'activeItemKey',
+    'itemTypeData',
+    'httpRequest'
+  ]),
+  /** 额外的 ElCol 属性 */
+  contentExtraColProps: Object as PropType<ElColProps>,
+  /** 自动计算额外的 ElCol 份数 */
+  autoContentExtraCol: {
+    type: Boolean,
+    required: false
+  },
+  /** 父级表单项 */
+  parentItem: Object as PropType<ProFormItemProps>,
+  /** 全部的表单项 */
+  formItems: Array as PropType<ProFormItemProps[]>,
+  /** 搜索表单展开状态 */
+  searchExpand: Boolean,
+  /** 编辑模式禁用子级排序 */
+  sortDisabled: Boolean,
+  /** 编辑模式父级拖拽容器是否可点击选中 */
+  containerSelectable: Boolean,
+  /** 直接传递插槽数据 */
+  slots: Object as PropType<ProFormItemRenderSlots>,
+  /** 获取表单组件的组件引用数据方法 */
+  getProFormRefs: Function as PropType<() => Record<string, any>>,
+  /** 获取并缓存代码解析结果方法 */
+  getAndCacheCode: Function as PropType<(code: string, codeResult: any) => any>,
+  /** 更新表单数据属性值方法 */
+  updateItemValue: Function as PropType<(prop: string, value: any) => void>,
+  /** 编辑模式更新表单项数据方法 */
+  updateItemsData: Function as PropType<
+    (items: ProFormItemProps[], parentItem?: ProFormItemProps) => void
+  >,
+  /** 更新编辑模式选中项方法 */
+  updateActiveItemKey: Function as PropType<
+    (activeKey?: ProFormItemKey) => void
+  >,
+  /** 默认的必填提示文本 */
+  requiredLang: String,
+  /** 兼容旧版 */
+  item: Object as PropType<ProFormItemProps>
+};
+
+export type ChildrenRenderProps = ExtractPropTypes<typeof childrenRenderProps>;
+
+/**
+ * 渲染表单项数据方法参数
+ */
+export type RenderProFormContentProps = Partial<
+  Omit<ChildrenRenderProps, 'item'>
+>;
+
+/**
+ * 渲染表单项组件方法参数
+ */
+export interface RenderProFormItemProps
+  extends Pick<
+    RenderProFormContentProps,
+    | 'model'
+    | 'rules'
+    | 'formItems'
+    | 'searchExpand'
+    | 'editable'
+    | 'screenSize'
+    | 'activeItemKey'
+    | 'updateItemValue'
+    | 'updateItemsData'
+    | 'updateActiveItemKey'
+    | 'getProFormRefs'
+    | 'getAndCacheCode'
+    | 'itemTypeData'
+    | 'httpRequest'
+    | 'slots'
+    | 'requiredLang'
+  > {
+  /** 循环的 key */
+  key?: ProFormItemKey;
+  /** 表单项 */
+  item: ProFormItemProps;
+}
+
+/**
+ * 渲染表单项组件时的插槽额外参数
+ */
+export type RenderSlotProFormParam = Partial<
+  Omit<
+    ChildrenRenderProps,
+    'items' | 'contentExtraColProps' | 'sortDisabled' | 'containerSelectable'
+  >
+>;

package/packages/ele-pro-form/style/css-var.scss

@@ -0,0 +1,8 @@
+@use '../../style/util.scss' as *;
+
+/* 高级表单主题变量 */
+@mixin set-pro-form-var($var) {
+  .ele-pro-form {
+    @include set-ele-var('pro-form', $var);
+  }
+}