y-admin-pro 0.0.1

package/packages/ele-pro-form-builder/components/outline-tree.vue

@@ -0,0 +1,163 @@
+<!-- 大纲树列表 -->
+<template>
+  <OutlineList
+    v-if="formItems"
+    :items="formItems"
+    :currentFormItemId="currentFormItemId"
+    :collapseItemIds="collapseItemIds"
+    :componentData="componentData"
+    :itemTypeData="itemTypeData"
+    @update:currentFormItemId="handleUpdateCurrentFormItemId"
+    @toggleItemCollapse="handleToggleItemCollapse"
+    @deleteItem="handleDeleteItem"
+    @copyItem="handleCopyItem"
+    @addChildren="handleAddChildren"
+    @openTableTool="handleOpenTableTool"
+    @updateItemChildren="handleUpdateItemChildren"
+  />
+  <ElEmpty
+    v-if="!formItems || !formItems.length"
+    :imageSize="58"
+    class="ele-pro-form-builder-form-empty"
+  />
+</template>
+
+<script lang="ts" setup>
+  import { ref, watch } from 'vue';
+  import { ElEmpty } from 'element-plus';
+  import { findTree } from '../../utils/common';
+  import type {
+    ProFormItemKey,
+    ProFormItemProps,
+    ProFormItemTypeData
+  } from '../../ele-pro-form/types';
+  import type {
+    ComponentGroup,
+    UpdateItemsResult,
+    AddChildrenItemAction
+  } from '../types';
+  import { fixedChildTypes } from './build-core';
+  import { generateCopyItemData, generateAddChildData } from './build-util';
+  import OutlineList from './outline-list.vue';
+
+  defineOptions({ name: 'OutlineTree' });
+
+  const props = defineProps<{
+    /** 全部表单项 */
+    formItems?: ProFormItemProps[];
+    /** 选中的表单项 */
+    currentFormItemId?: ProFormItemKey;
+    /** 组件库数据 */
+    componentData?: ComponentGroup[];
+    /** 高级表单组件类型数据 */
+    itemTypeData?: ProFormItemTypeData[];
+  }>();
+
+  const emit = defineEmits<{
+    /** 更新选中的表单项事件 */
+    (e: 'update:currentFormItemId', formItemId?: ProFormItemKey): void;
+    /** 更新表单项数据事件 */
+    (e: 'updateItems', result: UpdateItemsResult): void;
+    /** 更新表单项排序事件 */
+    (
+      e: 'updateItemChildren',
+      children: ProFormItemProps[],
+      parentKey?: ProFormItemKey
+    ): void;
+    /** 打开表格更多操作事件 */
+    (e: 'openTableTool', formItemId: string, el: HTMLElement): void;
+    /** 打开子组件选择器事件 */
+    (e: 'openComponentPicker', formItemId: string): void;
+  }>();
+
+  /** 折叠的表单项 */
+  const collapseItemIds = ref<ProFormItemKey[]>([]);
+
+  /** 更新选中的表单项 */
+  const handleUpdateCurrentFormItemId = (itemId: ProFormItemKey) => {
+    emit('update:currentFormItemId', itemId);
+  };
+
+  /** 更新表单项数据 */
+  const handleUpdateItems = (result: UpdateItemsResult) => {
+    emit('updateItems', result);
+  };
+
+  /** 删除表单项 */
+  const handleDeleteItem = (formItemId: ProFormItemKey) => {
+    handleUpdateItems({
+      deleteItemIds: [formItemId],
+      addItems: [],
+      updateItems: []
+    });
+  };
+
+  /** 复制表单项 */
+  const handleCopyItem = (formItemId: ProFormItemKey) => {
+    handleUpdateItems(generateCopyItemData(formItemId, props.formItems));
+  };
+
+  /** 添加子级表单项 */
+  const handleAddChildren = (
+    triggerItem: ProFormItemProps,
+    action?: AddChildrenItemAction
+  ) => {
+    if (
+      triggerItem.type &&
+      fixedChildTypes.some((d) => d.type === triggerItem.type)
+    ) {
+      const result = generateAddChildData(
+        triggerItem,
+        void 0,
+        void 0,
+        action,
+        props.formItems,
+        void 0,
+        props.componentData
+      );
+      handleUpdateItems(result);
+    } else {
+      emit('openComponentPicker', triggerItem.key as string);
+    }
+  };
+
+  /** 打开表格更多操作 */
+  const handleOpenTableTool = (item: ProFormItemProps, e: MouseEvent) => {
+    const el = e.currentTarget as HTMLElement;
+    const triggerEl = el?.parentElement?.querySelector?.(
+      '.ele-pro-form-builder-outline-item-table-tool-trigger'
+    );
+    emit('openTableTool', item.key as string, triggerEl as HTMLElement);
+  };
+
+  /** 更新表单项排序 */
+  const handleUpdateItemChildren = (
+    children: ProFormItemProps[],
+    parentKey?: ProFormItemKey
+  ) => {
+    emit('updateItemChildren', children, parentKey);
+  };
+
+  /** 表单项折叠切换 */
+  const handleToggleItemCollapse = (formItemId: string) => {
+    const index = collapseItemIds.value.indexOf(formItemId);
+    if (index !== -1) {
+      collapseItemIds.value.splice(index, 1);
+    } else {
+      collapseItemIds.value.push(formItemId);
+    }
+  };
+
+  /** 表单项数据更新后移除不存在的折叠数据 */
+  watch(
+    () => props.formItems,
+    (items) => {
+      for (let i = collapseItemIds.value.length - 1; i >= 0; i--) {
+        if (!findTree(items, (item) => collapseItemIds.value[i] === item.key)) {
+          collapseItemIds.value.splice(i, 1);
+        }
+      }
+    },
+    { deep: true }
+  );
+</script>

package/packages/ele-pro-form-builder/components/preview-modal.vue

@@ -0,0 +1,161 @@
+<!-- 预览弹窗 -->
+<template>
+  <EleModal
+    :width="980"
+    :maxable="true"
+    :draggable="false"
+    position="center"
+    :closeOnClickModal="false"
+    :destroyOnClose="true"
+    :modalBodyClass="
+      [
+        'ele-pro-form-builder-preview',
+        previewScreen === 'pad'
+          ? 'is-pad'
+          : previewScreen === 'phone'
+            ? 'is-phone'
+            : 'is-pc'
+      ].join(' ')
+    "
+    :modelValue="modelValue"
+    @update:modelValue="handleUpdateModelValue"
+  >
+    <template #header>
+      <div class="ele-pro-form-builder-screen-radio">
+        <ElIcon
+          v-for="item in screenItems"
+          :key="item.value"
+          :class="[
+            'ele-pro-form-builder-header-tool',
+            'ele-pro-form-builder-screen-icon',
+            { 'is-active': item.value === previewScreen }
+          ]"
+          @click="handleUpdatePreviewScreen(item.value)"
+        >
+          <component :is="item.icon" :style="item.iconStyle" />
+        </ElIcon>
+      </div>
+    </template>
+    <component
+      :validateOnRuleChange="false"
+      v-bind="previewFormProps"
+      :is="proFormComponent || EleProForm"
+      ref="previewFormRef"
+      :model="formData"
+      :editable="false"
+      :screenSize="previewScreen"
+      :itemTypeData="itemTypeData"
+      :httpRequest="httpRequest"
+      class="ele-pro-form-builder-preview-form"
+      @updateValue="setPreviewFormDataFieldValue"
+      @submit="handlePreviewFormSubmit"
+      @reset="handlePreviewFormReset"
+    >
+      <template v-for="name in Object.keys($slots)" #[name]="slotProps">
+        <slot :name="name" v-bind="slotProps || {}"></slot>
+      </template>
+    </component>
+  </EleModal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, nextTick, watch } from 'vue';
+  import { ElIcon } from 'element-plus';
+  import EleModal from '../../ele-modal/index.vue';
+  import type {
+    ProFormItemTypeData,
+    ScreenSize
+  } from '../../ele-pro-form/types';
+  import {
+    setValue,
+    mergeValue,
+    getFormInitValue
+  } from '../../ele-pro-form/util';
+  import type { UserComponent } from '../../ele-app/types';
+  import type { EleProFormInstance, EleProFormProps } from '../../ele-app/plus';
+  import EleProForm from '../../ele-pro-form/index.vue';
+  import { screenItems } from '../util';
+  import { deepCloneObject } from './build-core';
+
+  defineOptions({ name: 'PreviewModal' });
+
+  const props = defineProps<{
+    /** 弹窗是否打开 */
+    modelValue?: boolean;
+    /** 表单属性 */
+    formProps?: EleProFormProps;
+    /** 高级表单组件 */
+    proFormComponent?: UserComponent;
+    /** 高级表单组件类型数据 */
+    itemTypeData?: ProFormItemTypeData[];
+    /** 远程数据源请求工具 */
+    httpRequest?: any;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'update:modelValue', visible?: boolean): void;
+    (e: 'previewFormSubmit', data: Record<string, any>): void;
+  }>();
+
+  /** 预览表单组件 */
+  const previewFormRef = ref<EleProFormInstance>(null);
+
+  /** 预览表单属性 */
+  const previewFormProps = ref<EleProFormProps>({ items: [] });
+
+  /** 表单数据 */
+  const formData = reactive<Record<string, any>>({});
+
+  /** 预览屏幕尺寸 */
+  const previewScreen = ref<ScreenSize>('pc');
+
+  /** 更新弹窗打开状态 */
+  const handleUpdateModelValue = (visible?: boolean) => {
+    emit('update:modelValue', visible);
+  };
+
+  /** 更新预览表单数据 */
+  const setPreviewFormDataFieldValue = (field: string, value: unknown) => {
+    setValue(formData, field, value);
+  };
+
+  /** 预览表单提交 */
+  const handlePreviewFormSubmit = () => {
+    emit('previewFormSubmit', formData);
+  };
+
+  /** 预览表单重置 */
+  const handlePreviewFormReset = () => {
+    Object.keys(formData).forEach((k) => {
+      formData[k] = void 0;
+    });
+    mergeValue(
+      formData,
+      getFormInitValue(previewFormProps.value?.items, props.itemTypeData, true)
+    );
+  };
+
+  /** 更新预览屏幕尺寸 */
+  const handleUpdatePreviewScreen = (size: ScreenSize) => {
+    previewScreen.value = size;
+  };
+
+  /** 监听预览弹窗打开 */
+  watch(
+    () => props.modelValue,
+    (visible) => {
+      if (visible) {
+        previewFormProps.value = deepCloneObject(
+          props.formProps || { items: [] }
+        );
+        handlePreviewFormReset();
+        nextTick(() => {
+          previewFormRef.value?.clearValidate?.();
+          nextTick(() => {
+            previewFormRef.value?.clearValidate?.();
+          });
+        });
+      }
+    }
+  );
+</script>

package/packages/ele-pro-form-builder/components/props-form.vue

@@ -0,0 +1,340 @@
+<!-- 属性设置表单 -->
+<template>
+  <component
+    :is="proFormComponent || EleProForm"
+    ref="propsProFormRef"
+    size="small"
+    labelPosition="top"
+    :model="propsFormData"
+    :items="propsFormItems"
+    :itemTypeData="itemTypeData"
+    :httpRequest="httpRequest"
+    class="ele-pro-form-builder-props-form"
+    @updateValue="handleUpdateItem"
+  >
+    <template
+      v-if="!$slots.proFormBuilderOptionsEdit"
+      #proFormBuilderOptionsEdit="{ item, modelValue, updateValue }"
+    >
+      <OptionsEdit
+        :codeEditerComponent="codeEditerComponent"
+        v-bind="item.props || {}"
+        :modelValue="modelValue"
+        @update:modelValue="updateValue"
+      />
+    </template>
+    <template
+      v-if="!$slots.proFormBuilderEventEdit"
+      #proFormBuilderEventEdit="{ item, modelValue, updateValue }"
+    >
+      <EventEdit
+        :codeEditerComponent="codeEditerComponent"
+        v-bind="item.props || {}"
+        :modelValue="modelValue"
+        @update:modelValue="updateValue"
+      />
+    </template>
+    <template
+      v-if="!$slots.proFormBuilderHtmlEdit"
+      #proFormBuilderHtmlEdit="{ item, modelValue, updateValue }"
+    >
+      <HtmlEdit
+        :htmlEditerComponent="htmlEditerComponent"
+        v-bind="item.props || {}"
+        :modelValue="modelValue"
+        @update:modelValue="updateValue"
+      />
+    </template>
+    <template
+      v-if="!$slots.proFormBuilderIfEdit"
+      #proFormBuilderIfEdit="{ item, modelValue, updateValue }"
+    >
+      <IfEdit
+        :codeEditerComponent="codeEditerComponent"
+        v-bind="item.props || {}"
+        :modelValue="modelValue"
+        @update:modelValue="updateValue"
+      />
+    </template>
+    <template
+      v-if="!$slots.proFormBuilderSourceEdit"
+      #proFormBuilderSourceEdit="{ item, model, updatePropValue }"
+    >
+      <SourceEdit
+        :jsonEditerComponent="jsonEditerComponent"
+        v-bind="item.props || {}"
+        :modelValue="model"
+        @update:modelValue="(val) => updatePropValue('', val)"
+      />
+    </template>
+    <template v-if="!$slots.proFormBuilderTypeEdit" #proFormBuilderTypeEdit>
+      <TypeEdit
+        :key="currentFormItemId"
+        :formItem="currentFormItem"
+        :componentData="componentData"
+        @openComponentPicker="handleOpenComponentPicker"
+      />
+    </template>
+    <template
+      v-if="!$slots.proFormBuilderChildrenEdit"
+      #proFormBuilderChildrenEdit="{ item }"
+    >
+      <ChildrenEdit
+        :key="currentFormItemId"
+        v-bind="item.props || {}"
+        :formItem="currentFormItem"
+        :componentData="componentData"
+        @updateChildLabel="handleUpdateChildLabel"
+        @sortChildren="handleSortChildren"
+        @deleteChildren="handleDeleteChildren"
+        @addChildren="handleAddChildren"
+        @update:currentFormItemId="handleUpdateCurrentFormItemId"
+      />
+    </template>
+    <template
+      v-if="!$slots.proFormBuilderStyleEdit"
+      #proFormBuilderStyleEdit="{ item, modelValue, updateValue }"
+    >
+      <StyleEdit
+        :key="currentFormItemId"
+        v-bind="item.props || {}"
+        :modelValue="modelValue"
+        @update:modelValue="updateValue"
+      />
+    </template>
+    <template
+      v-if="!$slots.proFormBuilderJsonInput"
+      #proFormBuilderJsonInput="{ item, modelValue, updateValue }"
+    >
+      <JsonInput
+        :key="currentFormItemId"
+        v-bind="item.props || {}"
+        :modelValue="modelValue"
+        @update:modelValue="updateValue"
+      />
+    </template>
+    <template
+      v-if="!$slots.proFormBuilderIconInput"
+      #proFormBuilderIconInput="{ modelValue, updateValue }"
+    >
+      <ElInput
+        size="small"
+        :clearable="true"
+        :modelValue="modelValue"
+        @update:modelValue="updateValue"
+      />
+    </template>
+    <template v-for="name in Object.keys($slots)" #[name]="slotProps">
+      <slot :name="name" v-bind="slotProps || {}"></slot>
+    </template>
+  </component>
+  <ElEmpty
+    v-if="!currentFormItem"
+    :imageSize="58"
+    description="选中组件配置属性"
+    class="ele-pro-form-builder-form-empty"
+  />
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, watch } from 'vue';
+  import { ElEmpty, ElInput } from 'element-plus';
+  import type { UserComponent } from '../../ele-app/types';
+  import type { EleProFormInstance, EleProFormProps } from '../../ele-app/plus';
+  import { findTree } from '../../utils/common';
+  import type {
+    ProFormItemKey,
+    ProFormItemProps,
+    ProFormItemTypeData
+  } from '../../ele-pro-form/types';
+  import EleProForm from '../../ele-pro-form/index.vue';
+  import type { ComponentGroup, UpdateItemsResult } from '../types';
+  import { getFormDataAndItems, fixedChildTypes } from './build-core';
+  import { generateAddChildData } from './build-util';
+  import OptionsEdit from './options-edit.vue';
+  import EventEdit from './event-edit.vue';
+  import HtmlEdit from './html-edit.vue';
+  import IfEdit from './if-edit.vue';
+  import SourceEdit from './source-edit.vue';
+  import TypeEdit from './type-edit.vue';
+  import ChildrenEdit from './children-edit.vue';
+  import StyleEdit from './style-edit.vue';
+  import JsonInput from './json-input.vue';
+
+  defineOptions({ name: 'PropsForm' });
+
+  const props = defineProps<{
+    /** 选中的表单项 id */
+    currentFormItemId?: ProFormItemKey;
+    /** 表单属性 */
+    formProps?: EleProFormProps;
+    /** 表单属性设置的组件预设属性值 */
+    configFormPresetProps?: Record<string, any>;
+    /** 组件库数据 */
+    componentData?: ComponentGroup[];
+    /** 高级表单组件 */
+    proFormComponent?: UserComponent;
+    /** 代码编辑器组件 */
+    codeEditerComponent?: UserComponent;
+    /** JSON 编辑器组件 */
+    jsonEditerComponent?: UserComponent;
+    /** 富文本编辑器组件 */
+    htmlEditerComponent?: UserComponent;
+    /** 高级表单组件类型数据 */
+    itemTypeData?: ProFormItemTypeData[];
+    /** 远程数据源请求工具 */
+    httpRequest?: any;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'update:currentFormItemId', formItemId?: string): void;
+    (
+      e: 'updateItem',
+      formItemId: ProFormItemKey,
+      field: string,
+      value: any
+    ): void;
+    (e: 'updateItems', result: UpdateItemsResult): void;
+    (
+      e: 'sortItemChildren',
+      childIds: string[],
+      formItemId: ProFormItemKey
+    ): void;
+    (e: 'openComponentPicker', formItemId: string, formItemType?: string): void;
+  }>();
+
+  /** 表单组件 */
+  const propsProFormRef = ref<EleProFormInstance>(null);
+
+  /** 当前选中的表单项数据 */
+  const currentFormItem = ref<ProFormItemProps>();
+
+  /** 当前选中的表单项对应的属性设置表单数据 */
+  const propsFormData = reactive<Record<string, any>>({});
+
+  /** 当前选中的表单项对应的属性设置表单项配置 */
+  const propsFormItems = ref<ProFormItemProps[]>([]);
+
+  /** 更新表单项 */
+  const handleUpdateItem = (field: string, value: any) => {
+    if (props.currentFormItemId != null) {
+      emit('updateItem', props.currentFormItemId, field, value);
+    }
+  };
+
+  /** 更新表单项子级名称 */
+  const handleUpdateChildLabel = (
+    label: string,
+    child: ProFormItemProps,
+    field: string
+  ) => {
+    emit('updateItem', child.key as string, field, label);
+  };
+
+  /** 更新表单项子级顺序 */
+  const handleSortChildren = (children: ProFormItemProps[]) => {
+    if (props.currentFormItemId != null) {
+      emit(
+        'sortItemChildren',
+        children.map((c) => c.key) as string[],
+        props.currentFormItemId
+      );
+    }
+  };
+
+  /** 表单项删除子级 */
+  const handleDeleteChildren = (child: ProFormItemProps) => {
+    emit('updateItems', {
+      addItems: [],
+      updateItems: [],
+      deleteItemIds: [child.key as string]
+    });
+  };
+
+  /** 打开组件选择弹窗 */
+  const handleOpenComponentPicker = (
+    item: ProFormItemProps,
+    isAdd?: boolean
+  ) => {
+    emit('openComponentPicker', item.key as string, isAdd ? void 0 : item.type);
+  };
+
+  /** 表单项添加子级 */
+  const handleAddChildren = (parent: ProFormItemProps) => {
+    if (parent.type && fixedChildTypes.some((d) => d.type === parent.type)) {
+      const result = generateAddChildData(
+        parent,
+        void 0,
+        void 0,
+        void 0,
+        props.formProps?.items,
+        void 0,
+        props.componentData
+      );
+      emit('updateItems', result);
+    } else {
+      handleOpenComponentPicker(parent, true);
+    }
+  };
+
+  /** 选中表单项子级 */
+  const handleUpdateCurrentFormItemId = (formItemId?: string) => {
+    emit('update:currentFormItemId', formItemId);
+  };
+
+  /** 重置属性表单数据 */
+  const resetPropsFormData = (data?: Record<string, any>) => {
+    Object.keys(propsFormData).forEach((k) => {
+      propsFormData[k] = void 0;
+    });
+    if (data) {
+      Object.assign(propsFormData, data);
+    }
+  };
+
+  /** 同步选中表单项更新 */
+  watch(
+    [() => props.formProps, () => props.currentFormItemId],
+    () => {
+      if (props.currentFormItemId == null) {
+        resetPropsFormData();
+        propsFormItems.value = [];
+        currentFormItem.value = void 0;
+        return;
+      }
+      const temp = findTree(
+        props.formProps?.items,
+        (item) => item.key === props.currentFormItemId
+      );
+      const { data, items } = getFormDataAndItems(temp, props.componentData);
+      resetPropsFormData(
+        Object.assign({}, data, {
+          itemProps: Object.assign(
+            {
+              labelWidth:
+                props.formProps?.labelWidth ??
+                props.configFormPresetProps?.labelWidth,
+              labelPosition:
+                props.formProps?.labelPosition ??
+                props.configFormPresetProps?.labelPosition
+            },
+            data.itemProps
+          )
+        })
+      );
+      if (JSON.stringify(propsFormItems.value) !== JSON.stringify(items)) {
+        propsFormItems.value = items;
+      }
+      if (currentFormItem.value !== temp) {
+        currentFormItem.value = temp;
+        if (propsProFormRef.value) {
+          propsProFormRef.value.$el.scrollTop = 0;
+        }
+      }
+    },
+    {
+      immediate: true,
+      deep: true
+    }
+  );
+</script>