y-admin-pro 0.0.1

package/packages/ele-pro-form-builder/components/options-table.vue

@@ -0,0 +1,421 @@
+<!-- 数据编辑表格模式 -->
+<template>
+  <EleTreeTable
+    :data="tableData"
+    :columns="tableColumns"
+    :tableStyle="{ minWidth: tableMinWidth }"
+    :class="[
+      'ele-pro-form-builder-options-editer',
+      { 'is-table-data': columns === 'tableData' }
+    ]"
+  >
+    <template #bodyCell="{ row, column, treeLevel }">
+      <EleSelect
+        v-if="columns === 'tableColumns' && column.prop === 'align'"
+        size="default"
+        placeholder=""
+        :clearable="true"
+        v-model="row[column.prop]"
+        :options="[
+          { label: '左对齐', value: 'left' },
+          { label: '居中', value: 'center' },
+          { label: '右对齐', value: 'right' }
+        ]"
+        :popperOptions="{ strategy: 'fixed' }"
+        class="ele-fluid"
+      />
+      <EleSelect
+        v-else-if="columns === 'tableColumns' && column.prop === 'fixed'"
+        size="default"
+        placeholder=""
+        :clearable="true"
+        v-model="row[column.prop]"
+        :options="[
+          { label: '不固定', value: false },
+          { label: '左侧', value: 'left' },
+          { label: '右侧', value: 'right' }
+        ]"
+        :popperOptions="{ strategy: 'fixed' }"
+        class="ele-fluid"
+      />
+      <EleSelect
+        v-else-if="columns === 'tableColumns' && column.prop === 'type'"
+        size="default"
+        placeholder=""
+        :clearable="true"
+        v-model="row[column.prop]"
+        :options="[
+          { label: '默认', value: 'default' },
+          { label: '选择列', value: 'selection' },
+          { label: '序号列', value: 'index' },
+          { label: '展开列', value: 'expand' }
+        ]"
+        :popperOptions="{ strategy: 'fixed' }"
+        class="ele-fluid"
+      />
+      <EleSelect
+        v-else-if="columns === 'tableColumns' && column.prop === 'sortable'"
+        size="default"
+        placeholder=""
+        :clearable="true"
+        v-model="row[column.prop]"
+        :options="[
+          { label: 'true', value: true },
+          { label: 'false', value: false },
+          { label: 'custom', value: 'custom' }
+        ]"
+        :popperOptions="{ strategy: 'fixed' }"
+        class="ele-fluid"
+      />
+      <div
+        v-else-if="column.prop && column.editType === 'switch'"
+        class="ele-pro-form-builder-options-edit-cell"
+      >
+        <ElSwitch size="small" v-model="row[column.prop]" />
+      </div>
+      <ElInput
+        v-else-if="column.prop"
+        size="default"
+        placeholder=""
+        :clearable="true"
+        v-model="row[column.prop]"
+      />
+      <div
+        v-else-if="column.key === actionColKey"
+        class="ele-pro-form-builder-options-edit-cell"
+      >
+        <ToolButton
+          :buttonProps="{
+            type: 'danger',
+            plain: true,
+            icon: DeleteOutlined
+          }"
+          tooltip="删除数据"
+          @click="handleDelete(row)"
+        />
+        <ToolButton
+          v-if="
+            isTreeData &&
+            !(
+              typeof isTreeData === 'object' &&
+              isTreeData.maxDepth &&
+              (treeLevel || 1) >= isTreeData.maxDepth
+            )
+          "
+          :buttonProps="{
+            type: 'primary',
+            plain: true,
+            icon: PlusOutlined
+          }"
+          tooltip="新增子级"
+          @click="handleAdd(row)"
+        />
+      </div>
+    </template>
+    <template #headerCell="{ column }">
+      <div
+        v-if="columns === 'tableData' && column.prop"
+        class="ele-pro-form-builder-options-edit-th"
+      >
+        <ElInput size="default" :clearable="true" v-model="column.userProp" />
+        <ToolButton
+          :buttonProps="{
+            type: 'danger',
+            plain: true,
+            icon: DeleteOutlined
+          }"
+          tooltip="删除属性"
+          @click="handleDeleteCol(column)"
+        />
+      </div>
+      <div
+        v-else-if="column.key === actionColKey"
+        class="ele-pro-form-builder-options-edit-cell"
+      >
+        <ToolButton
+          v-if="columns === 'tableData'"
+          :buttonProps="{
+            type: 'primary',
+            plain: true,
+            icon: AppstoreAddOutlined
+          }"
+          tooltip="新增属性"
+          @click="handleAddCol()"
+        />
+        <ToolButton
+          :buttonProps="{
+            type: 'primary',
+            plain: true,
+            icon: PlusOutlined
+          }"
+          tooltip="新增数据"
+          @click="handleAdd()"
+        />
+      </div>
+    </template>
+  </EleTreeTable>
+</template>
+
+<script lang="ts" setup>
+  import { ref, computed, onMounted } from 'vue';
+  import { ElInput, ElSwitch } from 'element-plus';
+  import { eachTree, mapTree } from '../../utils/common';
+  import type {
+    TreeTableColumn,
+    TreeTableDataItem
+  } from '../../ele-tree-table/types';
+  import EleTreeTable from '../../ele-tree-table/index.vue';
+  import EleSelect from '../../ele-select/index.vue';
+  import {
+    PlusOutlined,
+    DeleteOutlined,
+    AppstoreAddOutlined
+  } from '../../icons/index';
+  import { getValue, setValue } from '../../ele-pro-form/util';
+  import {
+    generateItemKey,
+    getPropertyPath,
+    deepCloneObject
+  } from './build-core';
+  import ToolButton from './tool-button.vue';
+  const actionColKey = 'optionsEditTreeTableAction';
+
+  defineOptions({ name: 'OptionsTable' });
+
+  const props = defineProps<{
+    /** 选项数据 */
+    data?: Array<any> | string;
+    /** 是否是树形结构数据 */
+    isTreeData?: boolean | { maxDepth?: number };
+    /** 自定义列 */
+    columns?: TreeTableColumn[] | 'tableData' | 'tableColumns' | 'stringArray';
+  }>();
+
+  /** 表格列配置 */
+  const tableColumns = ref<TreeTableColumn[]>([]);
+
+  /** 表格数据 */
+  const tableData = ref<TreeTableDataItem[]>([]);
+
+  /** 表格最小宽度 */
+  const tableMinWidth = computed<string>(() => {
+    let width: number = 0;
+    tableColumns.value.forEach((col) => {
+      const w: string | number | undefined = col.style?.width;
+      const wn = w == null || typeof w === 'number' ? w : Number.parseInt(w);
+      width += (wn == null || isNaN(wn) ? void 0 : wn) ?? 120;
+    });
+    return `${width}px`;
+  });
+
+  /** 生成表格数据属性名开始编号 */
+  let tablePropStart = 0;
+
+  /** 生成唯一属性名 */
+  const generateCellKey = () => {
+    const key = generateItemKey();
+    tablePropStart++;
+    return `${key}c${tablePropStart}`;
+  };
+
+  /** 删除行 */
+  const handleDelete = (row: TreeTableDataItem, parent?: TreeTableDataItem) => {
+    const children = parent ? parent.children : tableData.value;
+    if (children && children.length) {
+      for (let i = 0; i < children.length; i++) {
+        const temp = children[i];
+        if (temp === row) {
+          children.splice(i, 1);
+          return true;
+        }
+        if (handleDelete(row, temp)) {
+          return;
+        }
+      }
+    }
+  };
+
+  /** 添加行 */
+  const handleAdd = (parent?: TreeTableDataItem) => {
+    const item: any = {};
+    if (!parent) {
+      tableData.value.push(item);
+    } else if (parent.children) {
+      parent.children.push(item);
+    } else {
+      parent.children = [item];
+    }
+  };
+
+  /** 添加列 */
+  const handleAddCol = () => {
+    const index = tableColumns.value.findIndex((c) => c.key === actionColKey);
+    if (index !== -1) {
+      const col: TreeTableColumn = {
+        userProp: '',
+        prop: generateCellKey(),
+        label: '',
+        style: { textAlign: 'center' }
+      };
+      if (index <= 0) {
+        tableColumns.value.unshift(col);
+      } else {
+        tableColumns.value.splice(index, 0, col);
+      }
+    }
+  };
+
+  /** 删除列 */
+  const handleDeleteCol = (column: TreeTableColumn) => {
+    if (column.prop != null) {
+      const index = tableColumns.value.findIndex((c) => c.prop === column.prop);
+      if (index !== -1) {
+        tableColumns.value.splice(index, 1);
+      }
+    }
+  };
+
+  /** 获取数据结果 */
+  const getResult = (): Array<any> => {
+    let result: TreeTableDataItem[] = deepCloneObject(tableData.value);
+    if (props.columns === 'tableData') {
+      // 表格数据模式处理
+      result = mapTree(result, (row: any) => {
+        const temp: Record<string, any> = {};
+        tableColumns.value.forEach((col) => {
+          if (col.prop) {
+            setValue(temp, col.userProp || col.prop, row[col.prop]);
+          }
+        });
+        return temp as any;
+      });
+    } else if (props.columns === 'stringArray') {
+      // 字符数组模式处理
+      result = result.map((d) => d.value);
+    }
+    return result;
+  };
+
+  /** 解析数据 */
+  onMounted(() => {
+    tableData.value = [];
+    const userData =
+      props.data == null || typeof props.data === 'string'
+        ? []
+        : deepCloneObject(props.data);
+    const actionCol: TreeTableColumn = {
+      key: actionColKey,
+      label: '',
+      style: {
+        textAlign: 'center',
+        width: props.isTreeData ? '78px' : '48px',
+        flex: 'none'
+      },
+      class: 'is-fixed-right is-fixed-right-first'
+    };
+    if (props.columns === 'tableData') {
+      // 表格数据模式
+      const keys: string[] = [];
+      eachTree(userData, (row: any) => {
+        getPropertyPath(row, ['children']).forEach((k) => {
+          if (!keys.includes(k)) {
+            keys.push(k);
+          }
+        });
+      });
+      tableColumns.value = [
+        ...keys.map<TreeTableColumn>((k) => ({
+          userProp: k,
+          prop: generateCellKey(),
+          label: '',
+          style: { textAlign: 'center' }
+        })),
+        actionCol
+      ];
+      tableData.value = mapTree(userData, (row: any) => {
+        const temp = { ...row };
+        tableColumns.value.forEach((col) => {
+          if (col.prop && col.userProp) {
+            temp[col.prop] = getValue(temp, col.userProp);
+          }
+        });
+        return temp;
+      });
+    } else if (props.columns === 'tableColumns') {
+      // 表格列配置模式
+      tableColumns.value = [
+        {
+          prop: 'label',
+          label: '标题',
+          style: { textAlign: 'center' }
+        },
+        {
+          prop: 'prop',
+          label: '属性名',
+          style: { textAlign: 'center' }
+        },
+        {
+          prop: 'columnKey',
+          label: 'ColumnKey',
+          style: { textAlign: 'center' }
+        },
+        {
+          prop: 'align',
+          label: '对齐方式',
+          style: { textAlign: 'center', width: '110px', flex: 'none' }
+        },
+        {
+          prop: 'width',
+          label: '列宽',
+          style: { textAlign: 'center', width: '110px', flex: 'none' }
+        },
+        {
+          prop: 'minWidth',
+          label: '最小列宽',
+          style: { textAlign: 'center', width: '110px', flex: 'none' }
+        },
+        {
+          prop: 'sortable',
+          label: '支持排序',
+          style: { textAlign: 'center', width: '110px', flex: 'none' },
+          editType: 'switch'
+        },
+        {
+          prop: 'fixed',
+          label: '固定',
+          style: { textAlign: 'center' }
+        },
+        {
+          prop: 'type',
+          label: '类型',
+          style: { textAlign: 'center', width: '110px', flex: 'none' }
+        },
+        actionCol
+      ];
+      tableData.value = userData;
+    } else if (props.columns === 'stringArray') {
+      // 字符数组模式
+      tableColumns.value = [
+        { prop: 'value', label: '值', style: { textAlign: 'center' } },
+        actionCol
+      ];
+      tableData.value = userData.map((d: any) => ({ value: d }));
+    } else if (props.columns) {
+      // 自定义列模式
+      tableColumns.value = [...props.columns, actionCol];
+      tableData.value = userData;
+    } else {
+      // 通用模式
+      tableColumns.value = [
+        { prop: 'label', label: '文本', style: { textAlign: 'center' } },
+        { prop: 'value', label: '值', style: { textAlign: 'center' } },
+        actionCol
+      ];
+      tableData.value = userData;
+    }
+  });
+
+  defineExpose({
+    getResult
+  });
+</script>

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

@@ -0,0 +1,291 @@
+<!-- 大纲列表 -->
+<template>
+  <VueDraggable
+    itemKey="key"
+    :modelValue="items"
+    :forceFallback="true"
+    :fallbackOnBody="true"
+    :setData="() => void 0"
+    group="ProFormBuilderOutlineSortGroup"
+    handle=".ele-pro-form-builder-outline-item-handle"
+    class="ele-pro-form-builder-outline"
+    @update:modelValue="handleUpdateModelValue"
+  >
+    <template #item="{ element }">
+      <div
+        :class="[
+          'ele-pro-form-builder-outline-item',
+          {
+            'is-active':
+              element.key != null &&
+              currentFormItemId != null &&
+              currentFormItemId === element.key
+          },
+          {
+            'is-collapse':
+              element.key != null &&
+              collapseItemIds &&
+              collapseItemIds.includes(element.key)
+          },
+          { 'is-form-item': !itemIsContainerType(element) }
+        ]"
+      >
+        <OutlineList
+          v-if="itemIsContainerType(element)"
+          :items="element.children || []"
+          :currentFormItemId="currentFormItemId"
+          :collapseItemIds="collapseItemIds"
+          :parent="element"
+          :componentData="componentData"
+          :itemTypeData="itemTypeData"
+          @update:currentFormItemId="handleUpdateCurrentFormItemId"
+          @toggleItemCollapse="handleToggleItemCollapse"
+          @deleteItem="handleDeleteItem"
+          @copyItem="handleCopyItem"
+          @addChildren="handleAddChildren"
+          @openTableTool="handleOpenTableTool"
+          @updateItemChildren="handleUpdateItemChildren"
+        />
+        <div
+          class="ele-pro-form-builder-outline-item-body"
+          :title="(element.prop ?? '') + ' ' + (element.label ?? '')"
+          @click="handleUpdateCurrentFormItemId(element.key)"
+        >
+          <ElIcon
+            v-if="element.children && element.children.length"
+            class="ele-pro-form-builder-outline-item-arrow"
+            @click.stop="handleToggleItemCollapse(element.key)"
+          >
+            <ArrowDown />
+          </ElIcon>
+          <div class="ele-pro-form-builder-outline-item-content">
+            <ComponentName
+              :itemType="element.type"
+              :componentData="componentData"
+              class="ele-pro-form-builder-outline-item-type-tag"
+            />
+            <span class="ele-pro-form-builder-outline-item-prop">
+              {{ element.prop }}
+            </span>
+            <span
+              v-if="element.label"
+              class="ele-pro-form-builder-outline-item-label"
+            >
+              {{ element.label }}
+            </span>
+          </div>
+          <ElIcon
+            v-if="!isTableChildType(element)"
+            class="ele-pro-form-builder-outline-item-tool is-danger"
+            title="删除"
+            @click.stop="handleDeleteItem(element.key)"
+          >
+            <DeleteOutlined />
+          </ElIcon>
+          <ElIcon
+            v-if="!isTableChildType(element)"
+            class="ele-pro-form-builder-outline-item-tool"
+            title="复制"
+            @click.stop="handleCopyItem(element.key)"
+          >
+            <CopyOutlined />
+          </ElIcon>
+          <ElIcon
+            v-if="element.type === 'table'"
+            class="ele-pro-form-builder-outline-item-tool"
+            title="新增行"
+            @click.stop="handleAddChildren(element, 'addTableRow')"
+          >
+            <InsertRowOutlined />
+          </ElIcon>
+          <ElIcon
+            v-if="element.type === 'table'"
+            class="ele-pro-form-builder-outline-item-tool"
+            title="新增列"
+            @click.stop="handleAddChildren(element, 'addTableCol')"
+          >
+            <InsertColumnOutlined />
+          </ElIcon>
+          <ElIcon
+            v-if="element.type === 'tableCell'"
+            class="ele-pro-form-builder-outline-item-tool"
+            title="更多"
+            @click.stop="(e) => handleOpenTableTool(element, e)"
+          >
+            <AppstoreAddOutlined style="transform: scale(1.1)" />
+          </ElIcon>
+          <ElIcon
+            v-if="
+              itemIsContainerType(element) &&
+              element.type !== 'table' &&
+              element.type !== 'tableRow'
+            "
+            class="ele-pro-form-builder-outline-item-tool"
+            :title="
+              {
+                tabs: '添加选项卡',
+                tabPane: '插入选项卡',
+                collapse: '添加折叠面板',
+                collapseItem: '插入折叠面板',
+                row: '添加栅格列',
+                col: '插入栅格列',
+                carousel: '添加走马灯',
+                carouselItem: '插入走马灯',
+                descriptions: '添加描述列表',
+                descriptionsItem: '插入描述列表'
+              }[element.type] || '添加子级'
+            "
+            @click.stop="handleAddChildren(element)"
+          >
+            <PlusSquareDashOutlined
+              v-if="
+                element.type &&
+                fixedChildTypes.some((d) => d.type === element.type)
+              "
+            />
+            <PlusOutlined v-else style="transform: scale(1.1)" />
+          </ElIcon>
+          <ElIcon
+            title=""
+            class="ele-pro-form-builder-outline-item-handle"
+            @click.stop=""
+          >
+            <DragOutlined style="transform: scale(1.1)" />
+          </ElIcon>
+          <div
+            class="ele-pro-form-builder-outline-item-table-tool-trigger"
+          ></div>
+        </div>
+        <div class="ele-pro-form-builder-outline-item-border"></div>
+      </div>
+    </template>
+  </VueDraggable>
+</template>
+
+<script lang="ts" setup>
+  import VueDraggable from 'vuedraggable';
+  import { ElIcon } from 'element-plus';
+  import {
+    ArrowDown,
+    DeleteOutlined,
+    CopyOutlined,
+    PlusSquareDashOutlined,
+    PlusOutlined,
+    InsertRowOutlined,
+    InsertColumnOutlined,
+    AppstoreAddOutlined,
+    DragOutlined
+  } from '../../icons/index';
+  import type {
+    ProFormItemKey,
+    ProFormItemProps,
+    ProFormItemTypeData
+  } from '../../ele-pro-form/types';
+  import { isContainerType } from '../../ele-pro-form/util';
+  import type { AddChildrenItemAction, ComponentGroup } from '../types';
+  import { fixedChildTypes } from './build-core';
+  import ComponentName from './component-name.vue';
+
+  defineOptions({ name: 'OutlineList' });
+
+  const props = defineProps<{
+    /** 表单项 */
+    items: ProFormItemProps[];
+    /** 选中的表单项 */
+    currentFormItemId?: ProFormItemKey;
+    /** 折叠的表单项 */
+    collapseItemIds?: ProFormItemKey[];
+    /** 父级数据 */
+    parent?: ProFormItemProps;
+    /** 组件库数据 */
+    componentData?: ComponentGroup[];
+    /** 高级表单组件类型数据 */
+    itemTypeData?: ProFormItemTypeData[];
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'update:currentFormItemId', formItemId?: ProFormItemKey): void;
+    /** 折叠按钮点击事件 */
+    (e: 'toggleItemCollapse', formItemId: ProFormItemKey): void;
+    /** 删除按钮点击事件 */
+    (e: 'deleteItem', formItemId: ProFormItemKey): void;
+    /** 复制按钮点击事件 */
+    (e: 'copyItem', formItemId: ProFormItemKey): void;
+    /** 添加子级按钮点击事件 */
+    (
+      e: 'addChildren',
+      triggerItem: ProFormItemProps,
+      action?: AddChildrenItemAction
+    ): void;
+    /** 更新表单项排序事件 */
+    (
+      e: 'updateItemChildren',
+      children: ProFormItemProps[],
+      parentKey?: ProFormItemKey
+    ): void;
+    /** 表格更多操作按钮点击事件 */
+    (e: 'openTableTool', item: ProFormItemProps, event: MouseEvent): void;
+  }>();
+
+  /** 打开表格更多操作 */
+  const handleOpenTableTool = (item: ProFormItemProps, e: MouseEvent) => {
+    emit('openTableTool', item, e);
+  };
+
+  /** 更新选中的表单项 */
+  const handleUpdateCurrentFormItemId = (itemId: ProFormItemKey) => {
+    emit('update:currentFormItemId', itemId);
+  };
+
+  /** 折叠切换 */
+  const handleToggleItemCollapse = (formItemId: ProFormItemKey) => {
+    emit('toggleItemCollapse', formItemId);
+  };
+
+  /** 删除表单项 */
+  const handleDeleteItem = (formItemId: ProFormItemKey) => {
+    emit('deleteItem', formItemId);
+  };
+
+  /** 复制表单项 */
+  const handleCopyItem = (formItemId: ProFormItemKey) => {
+    emit('copyItem', formItemId);
+  };
+
+  /** 添加子级表单项 */
+  const handleAddChildren = (
+    triggerItem: ProFormItemProps,
+    action?: AddChildrenItemAction
+  ) => {
+    emit('addChildren', triggerItem, action);
+  };
+
+  /** 更新数据排序事件 */
+  const handleUpdateItemChildren = (
+    children: ProFormItemProps[],
+    parentKey?: ProFormItemKey
+  ) => {
+    emit('updateItemChildren', children, parentKey);
+  };
+
+  /** 更新数据排序 */
+  const handleUpdateModelValue = (data: ProFormItemProps[]) => {
+    if (props.parent != null && props.parent.key == null) {
+      return;
+    }
+    handleUpdateItemChildren(data, props.parent?.key);
+  };
+
+  /** 判断是否是容器类型 */
+  const itemIsContainerType = (item: ProFormItemProps) => {
+    return isContainerType(item, props.itemTypeData);
+  };
+
+  /** 判断是否是表格子级类型 */
+  const isTableChildType = (item: ProFormItemProps) => {
+    if (!item.type) {
+      return false;
+    }
+    return ['tableRow', 'tableCell'].includes(item.type);
+  };
+</script>