y-admin-pro 0.0.1

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

@@ -0,0 +1,233 @@
+<!-- 主体表单区 -->
+<template>
+  <div
+    :class="[
+      'ele-pro-form-builder-body',
+      { 'is-pc': currentScreen === 'pc' },
+      { 'is-pad': currentScreen === 'pad' },
+      { 'is-phone': currentScreen === 'phone' }
+    ]"
+  >
+    <component
+      v-bind="formProps || {}"
+      :is="proFormComponent || EleProForm"
+      ref="proFormRef"
+      :model="formData"
+      :activeItemKey="currentFormItemId"
+      :editable="true"
+      :screenSize="currentScreen"
+      :footer="false"
+      :validateOnRuleChange="false"
+      :scrollToError="false"
+      :showMessage="false"
+      :itemTypeData="itemTypeData"
+      :httpRequest="httpRequest"
+      class="ele-pro-form-builder-body-form"
+      @updateValue="setBuilderFormDataFieldValue"
+      @update:items="handleUpdateFormItems"
+      @update:activeItemKey="handleUpdateCurrentFormItemId"
+    >
+      <template #builderItemHandleContent="{ item }">
+        <ComponentName :itemType="item.type" :componentData="componentData" />
+      </template>
+      <template #builderItemTools="{ item }">
+        <BuilderTools
+          :itemType="item.type"
+          @delete="handleDeleteItem(item)"
+          @copy="handleCopyItem(item)"
+          @add="handleAddChildrenItem(item)"
+          @addTableRow="handleAddChildrenItem(item, 'addTableRow')"
+          @addTableCol="handleAddChildrenItem(item, 'addTableCol')"
+          @openTableTool="(e) => handleOpenTableTool(item, e)"
+        />
+      </template>
+      <template
+        v-for="name in Object.keys($slots).filter((k) => !ownSlots.includes(k))"
+        #[name]="slotProps"
+      >
+        <slot :name="name" v-bind="slotProps || {}"></slot>
+      </template>
+    </component>
+    <ElEmpty
+      v-if="!formProps || !formProps.items || !formProps.items.length"
+      :imageSize="80"
+      description="拖拽左侧组件到此"
+      class="ele-pro-form-builder-form-empty"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, watch } from 'vue';
+  import { ElEmpty } from 'element-plus';
+  import type { UserComponent } from '../../ele-app/types';
+  import type { EleProFormInstance, EleProFormProps } from '../../ele-app/plus';
+  import { eachTree } from '../../utils/common';
+  import type {
+    ProFormItemKey,
+    ProFormItemProps,
+    ProFormItemTypeData,
+    ScreenSize
+  } from '../../ele-pro-form/types';
+  import {
+    setValue,
+    mergeValue,
+    getFormInitValue
+  } from '../../ele-pro-form/util';
+  import EleProForm from '../../ele-pro-form/index.vue';
+  import type {
+    ComponentGroup,
+    UpdateItemsResult,
+    AddChildrenItemAction
+  } from '../types';
+  import { generateAddChildData, generateCopyItemData } from './build-util';
+  import ComponentName from './component-name.vue';
+  import BuilderTools from './builder-tools.vue';
+  const ownSlots = ['builderItemHandleContent', 'builderItemTools'];
+
+  defineOptions({ name: 'BodyForm' });
+
+  const props = defineProps<{
+    /** 表单属性 */
+    formProps?: EleProFormProps;
+    /** 选中的表单项 id */
+    currentFormItemId?: ProFormItemKey;
+    /** 当前选中屏幕尺寸 */
+    currentScreen?: ScreenSize;
+    /** 组件库数据 */
+    componentData?: ComponentGroup[];
+    /** 高级表单组件 */
+    proFormComponent?: UserComponent;
+    /** 高级表单组件类型数据 */
+    itemTypeData?: ProFormItemTypeData[];
+    /** 远程数据源请求工具 */
+    httpRequest?: any;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'update:currentFormItemId', formItemId?: ProFormItemKey): void;
+    (e: 'updateItems', result: UpdateItemsResult): void;
+    (e: 'openTableTool', formItemId: string, el: HTMLElement): void;
+    (e: 'updateFormItems', items: ProFormItemProps[]): void;
+  }>();
+
+  /** 表单组件 */
+  const proFormRef = ref<EleProFormInstance>(null);
+
+  /** 表单数据 */
+  const formData = reactive<Record<string, any>>({});
+
+  /** 缓存的表单数据 */
+  const cachebuilderFormData = reactive<Record<string, any>>({});
+
+  /** 更新表单项数据 */
+  const handleUpdateItems = (result: UpdateItemsResult) => {
+    emit('updateItems', result);
+  };
+
+  /** 更新选中的表单项 */
+  const handleUpdateCurrentFormItemId = (formItemId: ProFormItemKey) => {
+    emit('update:currentFormItemId', formItemId);
+  };
+
+  /** 删除表单项 */
+  const handleDeleteItem = (item: ProFormItemProps) => {
+    if (item.key != null) {
+      handleUpdateItems({
+        deleteItemIds: [item.key as string],
+        addItems: [],
+        updateItems: []
+      });
+    }
+  };
+
+  /** 表单项添加子级 */
+  const handleAddChildrenItem = (
+    formItem: ProFormItemProps,
+    action?: AddChildrenItemAction
+  ) => {
+    if (formItem.key != null) {
+      eachTree(props.formProps?.items, (item, cIndex, parent) => {
+        if (item.key === formItem.key) {
+          const result = generateAddChildData(
+            item,
+            parent,
+            cIndex,
+            action,
+            props.formProps?.items,
+            void 0,
+            props.componentData
+          );
+          handleUpdateItems(result);
+          return false;
+        }
+      });
+    }
+  };
+
+  /** 复制表单项 */
+  const handleCopyItem = (item: ProFormItemProps) => {
+    if (item.key != null) {
+      handleUpdateItems(
+        generateCopyItemData(item.key as string, props.formProps?.items)
+      );
+    }
+  };
+
+  /** 打开表格更多操作 */
+  const handleOpenTableTool = (item: ProFormItemProps, e: MouseEvent) => {
+    if (item.key != null) {
+      emit('openTableTool', item.key as string, e.currentTarget as HTMLElement);
+    }
+  };
+
+  /** 更新表单数据 */
+  const setBuilderFormDataFieldValue = (field: string, value: unknown) => {
+    setValue(formData, field, value);
+    setValue(cachebuilderFormData, field, value);
+  };
+
+  /** 拖拽排序更新 */
+  const handleUpdateFormItems = (items: ProFormItemProps[]) => {
+    emit('updateFormItems', items);
+  };
+
+  /** 选项卡和折叠面板组件自动切换到选中的选项卡子级表单项 */
+  watch(
+    () => props.currentFormItemId,
+    (currentFormItemId) => {
+      eachTree(props.formProps?.items, (item, _cIndex, parent) => {
+        if (item.key === currentFormItemId) {
+          if (
+            item.type &&
+            ['tabPane', 'collapseItem'].includes(item.type) &&
+            parent &&
+            parent.prop
+          ) {
+            setBuilderFormDataFieldValue(parent.prop, item.prop);
+          }
+          return false;
+        }
+      });
+    }
+  );
+
+  /** 同步更新表单项数据 */
+  watch(
+    () => props.formProps,
+    () => {
+      Object.keys(formData).forEach((k) => {
+        formData[k] = void 0;
+      });
+      mergeValue(
+        formData,
+        getFormInitValue(props.formProps?.items, props.itemTypeData, true),
+        cachebuilderFormData
+      );
+    },
+    {
+      deep: true,
+      immediate: true
+    }
+  );
+</script>

package/packages/ele-pro-form-builder/components/body-header.vue

@@ -0,0 +1,279 @@
+<!-- 顶栏操作区 -->
+<template>
+  <div class="ele-pro-form-builder-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 === currentScreen }
+        ]"
+        @click="handleUpdateScreen(item.value)"
+      >
+        <component :is="item.icon" :style="item.iconStyle" />
+      </ElIcon>
+    </div>
+    <div class="ele-pro-form-builder-header-left">
+      <ElIcon
+        :class="[
+          'ele-pro-form-builder-header-tool',
+          'ele-pro-form-builder-header-tool-undo',
+          { 'is-disabled': undoDisabled }
+        ]"
+        title="撤销"
+        @click="handleUndo"
+      >
+        <RollbackOutlined />
+      </ElIcon>
+      <ElIcon
+        :class="[
+          'ele-pro-form-builder-header-tool',
+          'ele-pro-form-builder-header-tool-redo',
+          { 'is-disabled': redoDisabled }
+        ]"
+        title="恢复"
+        @click="handleRedo"
+      >
+        <RecoverOutlined />
+      </ElIcon>
+    </div>
+    <div class="ele-pro-form-builder-header-tools">
+      <template v-for="toolName in headerRightToolNames" :key="toolName">
+        <ElButton
+          v-if="toolName === 'import'"
+          :text="true"
+          :icon="UploadOutlined"
+          @click="handleOpenImport"
+        >
+          导入
+        </ElButton>
+        <ElButton
+          v-else-if="toolName === 'export'"
+          :text="true"
+          :icon="DownloadOutlined"
+          @click="handleOpenExport"
+        >
+          导出
+        </ElButton>
+        <ElButton
+          v-else-if="toolName === 'clear'"
+          :text="true"
+          type="danger"
+          :icon="DeleteOutlined"
+          @click="handleClear"
+        >
+          清空
+        </ElButton>
+        <ElButton
+          v-else-if="toolName === 'preview'"
+          :text="true"
+          type="primary"
+          :icon="EyeOutlined"
+          @click="handleOpenPreview"
+        >
+          预览
+        </ElButton>
+        <ElButton
+          v-else-if="toolName === 'code'"
+          :text="true"
+          type="primary"
+          :icon="CodeOutlined"
+          @click="handleOpenCode"
+        >
+          生成代码
+        </ElButton>
+      </template>
+      <slot name="headerTools"></slot>
+    </div>
+    <!-- 预览弹窗 -->
+    <PreviewModal
+      v-if="headerRightToolNames && headerRightToolNames.includes('preview')"
+      v-model="previewVisible"
+      :formProps="formProps"
+      :proFormComponent="proFormComponent"
+      :itemTypeData="itemTypeData"
+      :httpRequest="httpRequest"
+      @previewFormSubmit="handlePreviewFormSubmit"
+    >
+      <template
+        v-for="name in Object.keys($slots).filter((k) => !ownSlots.includes(k))"
+        #[name]="slotProps"
+      >
+        <slot :name="name" v-bind="slotProps || {}"></slot>
+      </template>
+    </PreviewModal>
+    <!-- 导入导出弹窗 -->
+    <ImportModal
+      v-if="
+        headerRightToolNames &&
+        (headerRightToolNames.includes('import') ||
+          headerRightToolNames.includes('export'))
+      "
+      v-model="importVisible"
+      :config="formProps"
+      :isImport="isImport"
+      :jsonEditerComponent="jsonEditerComponent"
+      @importData="handleImportData"
+    />
+    <!-- 生成代码弹窗 -->
+    <CodePreview
+      v-if="headerRightToolNames && headerRightToolNames.includes('code')"
+      v-model="codeVisible"
+      :config="formProps"
+      :componentData="componentData"
+      :codeViewerComponent="codeViewerComponent"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, computed } from 'vue';
+  import { ElIcon, ElButton } from 'element-plus';
+  import {
+    RollbackOutlined,
+    RecoverOutlined,
+    DeleteOutlined,
+    EyeOutlined,
+    UploadOutlined,
+    DownloadOutlined,
+    CodeOutlined
+  } from '../../icons/index';
+  import type { UserComponent } from '../../ele-app/types';
+  import type { EleProFormProps } from '../../ele-app/plus';
+  import type {
+    ProFormItemTypeData,
+    ScreenSize
+  } from '../../ele-pro-form/types';
+  import { defaultHeaderRightTools, screenItems } from '../util';
+  import type { HeaderRightToolName, ComponentGroup } from '../types';
+  import PreviewModal from './preview-modal.vue';
+  import ImportModal from './import-modal.vue';
+  import CodePreview from './code-preview.vue';
+  const ownSlots = ['headerTools'];
+
+  defineOptions({ name: 'BodyHeader' });
+
+  const props = defineProps<{
+    /** 当前选中屏幕尺寸 */
+    currentScreen?: ScreenSize;
+    /** 是否禁用撤销 */
+    undoDisabled?: boolean;
+    /** 是否禁用恢复 */
+    redoDisabled?: boolean;
+    /** 表单属性 */
+    formProps?: EleProFormProps;
+    /** 顶栏右侧操作按钮顺序 */
+    headerTools?: boolean | HeaderRightToolName[];
+    /** 高级表单组件 */
+    proFormComponent?: UserComponent;
+    /** JSON 编辑器组件 */
+    jsonEditerComponent?: UserComponent;
+    /** 代码查看器组件 */
+    codeViewerComponent?: UserComponent;
+    /** 组件库数据 */
+    componentData?: ComponentGroup[];
+    /** 高级表单组件类型数据 */
+    itemTypeData?: ProFormItemTypeData[];
+    /** 远程数据源请求工具 */
+    httpRequest?: any;
+  }>();
+
+  const emit = defineEmits<{
+    /** 更新屏幕尺寸事件 */
+    (e: 'update:currentScreen', size?: string): void;
+    /** 撤销按钮点击事件 */
+    (e: 'undo'): void;
+    /** 恢复按钮点击事件 */
+    (e: 'redo'): void;
+    /** 清空按钮点击事件 */
+    (e: 'clear'): void;
+    /** 预览表单提交事件 */
+    (e: 'previewFormSubmit', data: Record<string, any>): void;
+    /** 导入事件 */
+    (e: 'importData', data: EleProFormProps): void;
+  }>();
+
+  /** 是否打开预览弹窗 */
+  const previewVisible = ref(false);
+
+  /** 是否打开导入导出弹窗 */
+  const importVisible = ref(false);
+
+  /** 是否是导入 */
+  const isImport = ref(false);
+
+  /** 是否打开生成代码弹窗 */
+  const codeVisible = ref(false);
+
+  /** 顶栏右侧操作按钮顺序 */
+  const headerRightToolNames = computed<HeaderRightToolName[]>(() => {
+    if (
+      typeof props.headerTools === 'undefined' ||
+      props.headerTools === true
+    ) {
+      return defaultHeaderRightTools;
+    }
+    if (!props.headerTools) {
+      return [];
+    }
+    return props.headerTools;
+  });
+
+  /** 更新屏幕尺寸 */
+  const handleUpdateScreen = (size?: string) => {
+    emit('update:currentScreen', size);
+  };
+
+  /** 撤销 */
+  const handleUndo = () => {
+    if (!props.undoDisabled) {
+      emit('undo');
+    }
+  };
+
+  /** 恢复 */
+  const handleRedo = () => {
+    if (!props.redoDisabled) {
+      emit('redo');
+    }
+  };
+
+  /** 清空 */
+  const handleClear = () => {
+    emit('clear');
+  };
+
+  /** 打开预览弹窗 */
+  const handleOpenPreview = () => {
+    previewVisible.value = true;
+  };
+
+  /** 预览表单提交事件 */
+  const handlePreviewFormSubmit = (data: Record<string, any>) => {
+    emit('previewFormSubmit', data);
+  };
+
+  /** 打开导入弹窗 */
+  const handleOpenImport = () => {
+    importVisible.value = true;
+    isImport.value = true;
+  };
+
+  /** 打开导出弹窗 */
+  const handleOpenExport = () => {
+    importVisible.value = true;
+    isImport.value = false;
+  };
+
+  /** 导入事件 */
+  const handleImportData = (data: EleProFormProps) => {
+    emit('importData', data);
+  };
+
+  /** 打开生成代码弹窗 */
+  const handleOpenCode = () => {
+    codeVisible.value = true;
+  };
+</script>