y-admin-pro 0.0.1

package/packages/ele-crud-builder/components/body-header.vue

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

package/packages/ele-crud-builder/components/code-generator.ts

@@ -0,0 +1,28 @@
+import type { EleCrudProps } from '../../ele-app/plus';
+import {
+  templateEngine,
+  obj2Str
+} from '../../ele-pro-form-builder/components/code-util';
+import { proTemplate } from './code-template';
+
+/**
+ * 生成代码
+ * @param data 配置数据
+ */
+export function generateElCode(_data?: EleCrudProps) {
+  return '';
+}
+
+/**
+ * 生成 ProCrud 代码
+ * @param data 配置数据
+ */
+export function generateProCode(data?: EleCrudProps) {
+  const config: EleCrudProps = JSON.parse(
+    JSON.stringify({ ...(data || {}), fields: data?.fields || [] })
+  );
+  const templateData = {
+    proCrudConfigCode: obj2Str(config, false, 2, () => void 0)
+  };
+  return templateEngine(proTemplate, templateData);
+}

package/packages/ele-crud-builder/components/code-preview.vue

@@ -0,0 +1,141 @@
+<!-- 生成代码弹窗 -->
+<template>
+  <EleModal
+    :width="980"
+    :maxable="true"
+    position="center"
+    title="生成代码"
+    :modelValue="modelValue"
+    :closeOnClickModal="false"
+    :destroyOnClose="true"
+    class="ele-crud-builder-code-preview"
+    @update:modelValue="handleUpdateModelValue"
+  >
+    <div class="ele-crud-builder-code-view">
+      <EleTabBar v-model="tabActive" :items="tabItems">
+        <template #extra>
+          <ElIcon
+            :class="[
+              'ele-crud-builder-code-icon-tool',
+              { 'is-copied': copied }
+            ]"
+            title="复制"
+            @click="handleCopy"
+          >
+            <CheckOutlined v-if="copied" />
+            <CopyOutlined v-else />
+          </ElIcon>
+          <ElIcon
+            class="ele-crud-builder-code-icon-tool"
+            title="下载"
+            @click="handleDownload"
+          >
+            <DownloadOutlined />
+          </ElIcon>
+        </template>
+      </EleTabBar>
+      <div class="ele-crud-builder-code-body">
+        <component
+          :is="codeViewerComponent || CodeViewer"
+          :code="codeContent"
+        />
+      </div>
+    </div>
+  </EleModal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, watch } from 'vue';
+  import { ElIcon } from 'element-plus';
+  import {
+    DownloadOutlined,
+    CopyOutlined,
+    CheckOutlined
+  } from '../../icons/index';
+  import { download, copyText } from '../../utils/common';
+  import { useTimer } from '../../utils/hook';
+  import type { UserComponent } from '../../ele-app/types';
+  import type { EleCrudProps } from '../../ele-app/plus';
+  import EleModal from '../../ele-modal/index.vue';
+  import EleTabBar from '../../ele-tab-bar/index.vue';
+  import CodeViewer from '../../ele-pro-form-builder/components/code-viewer.vue';
+  import { generateProCode, generateElCode } from './code-generator';
+
+  defineOptions({ name: 'CodePreview' });
+
+  const props = defineProps<{
+    /** 弹窗是否打开 */
+    modelValue?: boolean;
+    /** 表单配置数据 */
+    config?: EleCrudProps;
+    /** 代码查看器组件 */
+    codeViewerComponent?: UserComponent;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'update:modelValue', visible?: boolean): void;
+  }>();
+
+  /** 复制状态 */
+  const [setCopied, resetCopied, copied] = useTimer(1000);
+
+  /** 选项卡数据 */
+  const tabItems = [
+    { value: 'pro', label: 'ProCrud' } /* ,
+    { value: 'el', label: '' } */
+  ];
+
+  /** 选项卡选中 */
+  const tabActive = ref<'pro' | 'el'>('pro');
+
+  /** 代码内容 */
+  const codeContent = ref('');
+
+  /** 代码生成的数据 */
+  const generateData: string[] = ['', ''];
+
+  /** 更新弹窗打开状态 */
+  const handleUpdateModelValue = (visible?: boolean) => {
+    emit('update:modelValue', visible);
+  };
+
+  /** 更新代码内容 */
+  const setCodeContent = () => {
+    codeContent.value = generateData[tabActive.value === 'el' ? 1 : 0];
+  };
+
+  /** 复制 */
+  const handleCopy = () => {
+    copyText(codeContent.value)
+      .then(() => {
+        setCopied();
+      })
+      .catch((error) => {
+        console.error(error);
+        resetCopied();
+      });
+  };
+
+  /** 下载 */
+  const handleDownload = () => {
+    download(codeContent.value, 'index.vue', 'text/plain;charset=utf-8');
+  };
+
+  /** 生成代码 */
+  watch(
+    () => props.modelValue,
+    (visible) => {
+      if (visible) {
+        const proCode = generateProCode(props.config);
+        const elCode = generateElCode(props.config);
+        generateData[0] = proCode;
+        generateData[1] = elCode;
+        setCodeContent();
+      }
+    }
+  );
+
+  watch(tabActive, () => {
+    setCodeContent();
+  });
+</script>

package/packages/ele-crud-builder/components/code-template.ts

@@ -0,0 +1,15 @@
+/**
+ * ProCrud 代码生成模板
+ */
+export const proTemplate: string = `<template>
+  <pro-crud v-bind="config" />
+</template>
+
+<script setup>
+  import { reactive } from 'vue';
+  import ProCrud from '@/components/ProCrud/index.vue';
+
+  /** crud 配置 */
+  const config = reactive(<% d.proCrudConfigCode %>);
+</script>
+`;

package/packages/ele-crud-builder/components/field-list.vue

@@ -0,0 +1,177 @@
+<!-- 字段列表 -->
+<template>
+  <VueDraggable
+    itemKey="key"
+    :modelValue="items"
+    :forceFallback="true"
+    :fallbackOnBody="true"
+    :setData="() => void 0"
+    group="CrudBuilderFieldSortGroup"
+    handle=".ele-crud-builder-field-item-handle"
+    class="ele-crud-builder-field"
+    @update:modelValue="handleUpdateModelValue"
+  >
+    <template #item="{ element }">
+      <div
+        :class="[
+          'ele-crud-builder-field-item',
+          {
+            'is-collapse':
+              element.key != null &&
+              collapseItemIds &&
+              collapseItemIds.includes(element.key)
+          }
+        ]"
+      >
+        <FieldList
+          :items="element.children || []"
+          :collapseItemIds="collapseItemIds"
+          :parent="element"
+          @toggleItemCollapse="handleToggleItemCollapse"
+          @deleteItem="handleDeleteItem"
+          @copyItem="handleCopyItem"
+          @editItem="handleEditItem"
+          @addChildren="handleAddChildren"
+          @updateItemChildren="handleUpdateItemChildren"
+        />
+        <div
+          class="ele-crud-builder-field-item-body"
+          :title="(element.prop ?? '') + ' ' + (element.label ?? '')"
+        >
+          <ElIcon
+            v-if="element.children && element.children.length"
+            class="ele-crud-builder-field-item-arrow"
+            @click.stop="handleToggleItemCollapse(element.key)"
+          >
+            <ArrowDown />
+          </ElIcon>
+          <div class="ele-crud-builder-field-item-content">
+            <span class="ele-crud-builder-field-item-prop">
+              {{ element.prop }}
+            </span>
+            <span
+              v-if="element.label"
+              class="ele-crud-builder-field-item-label"
+            >
+              {{ element.label }}
+            </span>
+          </div>
+          <ElIcon
+            class="ele-crud-builder-field-item-tool is-danger"
+            title="删除"
+            @click.stop="handleDeleteItem(element.key)"
+          >
+            <DeleteOutlined />
+          </ElIcon>
+          <ElIcon
+            class="ele-crud-builder-field-item-tool"
+            title="复制"
+            @click.stop="handleCopyItem(element.key)"
+          >
+            <CopyOutlined style="transform: scale(0.96)" />
+          </ElIcon>
+          <ElIcon
+            class="ele-crud-builder-field-item-tool"
+            title="修改"
+            @click.stop="handleEditItem(element)"
+          >
+            <EditOutlined />
+          </ElIcon>
+          <ElIcon
+            class="ele-crud-builder-field-item-tool"
+            title="添加子级"
+            @click.stop="handleAddChildren(element.key)"
+          >
+            <PlusOutlined style="transform: scale(1.1)" />
+          </ElIcon>
+          <ElIcon
+            title=""
+            class="ele-crud-builder-field-item-handle"
+            @click.stop=""
+          >
+            <DragOutlined style="transform: scale(1.1)" />
+          </ElIcon>
+        </div>
+        <div class="ele-crud-builder-field-item-border"></div>
+      </div>
+    </template>
+  </VueDraggable>
+</template>
+
+<script lang="ts" setup>
+  import VueDraggable from 'vuedraggable';
+  import { ElIcon } from 'element-plus';
+  import {
+    ArrowDown,
+    DeleteOutlined,
+    CopyOutlined,
+    PlusOutlined,
+    DragOutlined,
+    EditOutlined
+  } from '../../icons/index';
+  import type { CrudField } from '../../ele-crud/types';
+
+  defineOptions({ name: 'FieldList' });
+
+  const props = defineProps<{
+    /** 字段 */
+    items: CrudField[];
+    /** 折叠的字段 */
+    collapseItemIds?: string[];
+    /** 父级数据 */
+    parent?: CrudField;
+  }>();
+
+  const emit = defineEmits<{
+    /** 折叠按钮点击事件 */
+    (e: 'toggleItemCollapse', key: string): void;
+    /** 删除按钮点击事件 */
+    (e: 'deleteItem', key: string): void;
+    /** 复制按钮点击事件 */
+    (e: 'copyItem', key: string): void;
+    /** 修改按钮点击事件 */
+    (e: 'editItem', item: CrudField): void;
+    /** 添加子级按钮点击事件 */
+    (e: 'addChildren', parentKey: string): void;
+    /** 更新字段排序事件 */
+    (e: 'updateItemChildren', data: CrudField[], parentKey?: string): void;
+  }>();
+
+  /** 折叠切换 */
+  const handleToggleItemCollapse = (key: string) => {
+    emit('toggleItemCollapse', key);
+  };
+
+  /** 删除字段 */
+  const handleDeleteItem = (key: string) => {
+    emit('deleteItem', key);
+  };
+
+  /** 复制字段 */
+  const handleCopyItem = (key: string) => {
+    emit('copyItem', key);
+  };
+
+  /** 修改字段 */
+  const handleEditItem = (item: CrudField) => {
+    emit('editItem', item);
+  };
+
+  /** 添加子级字段 */
+  const handleAddChildren = (parentKey: string) => {
+    emit('addChildren', parentKey);
+  };
+
+  /** 更新数据排序事件 */
+  const handleUpdateItemChildren = (data: CrudField[], parentKey?: string) => {
+    emit('updateItemChildren', data, parentKey);
+  };
+
+  /** 更新数据排序 */
+  const handleUpdateModelValue = (data: CrudField[]) => {
+    if (props.parent != null && props.parent.key == null) {
+      return;
+    }
+    handleUpdateItemChildren(data, props.parent?.key);
+  };
+</script>