y-admin-pro 0.0.1

package/packages/ele-pro-form-builder/components/source-edit.vue

@@ -0,0 +1,104 @@
+<!-- 源码编辑弹窗 -->
+<template>
+  <ElButton
+    size="small"
+    :icon="CodeOutlined"
+    class="ele-pro-form-builder-props-fluid-btn"
+    @click="openModal"
+  >
+    {{ title }}
+  </ElButton>
+  <EleModal
+    :width="800"
+    :maxable="true"
+    position="center"
+    :title="title"
+    v-model="visible"
+    :closeOnClickModal="false"
+    :destroyOnClose="true"
+    :bodyStyle="{
+      height: '520px',
+      minHeight: '100%',
+      maxHeight: '100%',
+      padding: '8px 16px'
+    }"
+  >
+    <div class="ele-pro-form-builder-code-edit-wrapper">
+      <component
+        :is="jsonEditerComponent || CodeEditer"
+        v-model="jsonContent"
+      />
+    </div>
+    <template #footer>
+      <ElButton size="default" @click="handleCancel">取消</ElButton>
+      <ElButton type="primary" size="default" @click="handleSave">
+        保存
+      </ElButton>
+    </template>
+  </EleModal>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { ElButton } from 'element-plus';
+  import { CodeOutlined } from '../../icons/index';
+  import { omit } from '../../utils/common';
+  import type { UserComponent } from '../../ele-app/types';
+  import EleModal from '../../ele-modal/index.vue';
+  import CodeEditer from './code-editer.vue';
+
+  defineOptions({ name: 'SourceEdit' });
+
+  const props = defineProps<{
+    /** 数据 */
+    modelValue?: Record<string, any>;
+    /** 弹窗标题 */
+    title?: string;
+    /** 需要排除编辑的字段 */
+    excludeFields?: string[];
+    /** JSON 编辑器组件 */
+    jsonEditerComponent?: UserComponent;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'update:modelValue', data?: Record<string, any>): void;
+  }>();
+
+  /** 弹窗是否打开 */
+  const visible = ref(false);
+
+  /** JSON 内容 */
+  const jsonContent = ref('');
+
+  /** 打开弹窗 */
+  const openModal = () => {
+    jsonContent.value = JSON.stringify(
+      omit(props.modelValue || {}, props.excludeFields || ['key', 'children']),
+      void 0,
+      2
+    );
+    visible.value = true;
+  };
+
+  /** 关闭弹窗 */
+  const handleCancel = () => {
+    visible.value = false;
+    jsonContent.value = '';
+  };
+
+  /** 保存编辑 */
+  const handleSave = () => {
+    if (jsonContent.value) {
+      let result: Record<string, any> | undefined;
+      try {
+        result = JSON.parse(jsonContent.value);
+      } catch (e) {
+        console.error(e);
+      }
+      if (result) {
+        handleCancel();
+        emit('update:modelValue', result);
+      }
+    }
+  };
+</script>

package/packages/ele-pro-form-builder/components/style-edit.vue

@@ -0,0 +1,207 @@
+<!-- 样式和类名编辑 -->
+<template>
+  <div v-if="data && data.length" class="ele-pro-form-builder-style-edit-list">
+    <div
+      v-for="(item, index) in data"
+      :key="item.id"
+      class="ele-pro-form-builder-style-edit-item"
+    >
+      <div v-if="!isClass" class="ele-pro-form-builder-style-edit-item-body">
+        <ElInput
+          size="small"
+          v-model="item.name"
+          @change="handleDataListChange"
+        />
+      </div>
+      <div class="ele-pro-form-builder-style-edit-item-body">
+        <ElInput
+          size="small"
+          v-model="item.value"
+          @change="handleDataListChange"
+        />
+      </div>
+      <ElIcon
+        class="ele-pro-form-builder-style-edit-item-del-btn"
+        title="删除"
+        @click="handleDelete(index)"
+      >
+        <DeleteOutlined />
+      </ElIcon>
+    </div>
+  </div>
+  <ElButton
+    size="small"
+    :icon="PlusOutlined"
+    class="ele-pro-form-builder-props-fluid-btn is-small-icon"
+    @click="handleAdd"
+  >
+    <template #default>
+      {{ isClass ? '添加类名' : '添加样式' }}
+    </template>
+  </ElButton>
+</template>
+
+<script lang="ts" setup>
+  import { ref, watch } from 'vue';
+  import { ElInput, ElIcon, ElButton } from 'element-plus';
+  import { DeleteOutlined, PlusOutlined } from '../../icons/index';
+  import type { ComponentStyleItem } from '../types';
+  let itemStartId = 0;
+
+  defineOptions({ name: 'StyleEdit' });
+
+  const props = defineProps<{
+    /** 样式数据或类名 */
+    modelValue?: Record<string, string> | string;
+    /** 是否是类名编辑 */
+    isClass?: boolean;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'update:modelValue', value: Record<string, string> | string): void;
+  }>();
+
+  /** 数据 */
+  const data = ref<ComponentStyleItem[]>([]);
+
+  /** 更新绑定值 */
+  const updateModelValue = (value: Record<string, string> | string) => {
+    if (props.modelValue !== value) {
+      emit('update:modelValue', value);
+    }
+  };
+
+  /** 更新数据 */
+  const updateDataValue = (dataList: ComponentStyleItem[]) => {
+    let isChanged = false;
+    const temp = [...data.value];
+    if (props.isClass) {
+      dataList.forEach((d) => {
+        const index = temp.findIndex((t) => d.value === t.value);
+        if (index === -1) {
+          itemStartId++;
+          temp.push({ ...d, id: itemStartId });
+          isChanged = true;
+        }
+      });
+      temp.forEach((t, i) => {
+        if (t.value != null && t.value.trim().length) {
+          if (!dataList.some((d) => d.value === t.value)) {
+            temp.splice(i, 1);
+            isChanged = true;
+          }
+        }
+      });
+    } else {
+      dataList.forEach((d) => {
+        const index = temp.findIndex(
+          (t) => d.name === t.name && d.value === t.value
+        );
+        if (index === -1) {
+          itemStartId++;
+          temp.push({ ...d, id: itemStartId });
+          isChanged = true;
+        }
+      });
+      temp.forEach((t, i) => {
+        if (
+          t.name != null &&
+          t.name.trim().length &&
+          t.value != null &&
+          t.value.trim().length
+        ) {
+          if (!dataList.some((d) => d.name === t.name && d.value === t.value)) {
+            temp.splice(i, 1);
+            isChanged = true;
+          }
+        }
+      });
+    }
+    if (isChanged) {
+      data.value = temp;
+    }
+  };
+
+  /** 获取数据对应的绑定值 */
+  const getDataValue = (
+    dataList: ComponentStyleItem[],
+    isClass?: boolean
+  ): Record<string, string> | string => {
+    if (isClass) {
+      const result: string[] = [];
+      dataList.forEach((d) => {
+        if (d.value != null && d.value.trim().length) {
+          result.push(d.value);
+        }
+      });
+      return result.join(' ');
+    }
+    const result: Record<string, string> = {};
+    dataList.forEach((d) => {
+      if (
+        d.name != null &&
+        d.name.trim().length &&
+        d.value != null &&
+        d.value.trim().length
+      ) {
+        result[d.name] = d.value;
+      }
+    });
+    return result;
+  };
+
+  /** 获取绑定值对应的数据 */
+  const getValueData = (
+    value?: Record<string, string> | string,
+    isClass?: boolean
+  ): ComponentStyleItem[] => {
+    const result: ComponentStyleItem[] = [];
+    if (isClass) {
+      const classValue = (value || '') as string;
+      classValue.split(' ').forEach((d) => {
+        if (d != null && d.trim().length) {
+          result.push({ value: d });
+        }
+      });
+      return result;
+    }
+    const styleValue = (value || {}) as Record<string, string>;
+    Object.keys(styleValue).forEach((k) => {
+      const v = styleValue[k];
+      if (v != null && !(typeof v === 'string' && !v.trim().length)) {
+        result.push({ name: k, value: String(v) });
+      }
+    });
+    return result;
+  };
+
+  /** 数据改变事件 */
+  const handleDataListChange = () => {
+    updateModelValue(getDataValue(data.value, props.isClass));
+  };
+
+  /** 删除 */
+  const handleDelete = (index: number) => {
+    data.value.splice(index, 1);
+    handleDataListChange();
+  };
+
+  /** 添加 */
+  const handleAdd = () => {
+    itemStartId++;
+    data.value.push({ name: '', value: '', id: itemStartId });
+    handleDataListChange();
+  };
+
+  /** 同步数据 */
+  watch(
+    () => props.modelValue,
+    (value) => {
+      updateDataValue(getValueData(value, props.isClass));
+    },
+    {
+      deep: true,
+      immediate: true
+    }
+  );
+</script>

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

@@ -0,0 +1,246 @@
+<!-- 表格操作下拉菜单 -->
+<template>
+  <EleDropdown
+    :triggerKeys="[]"
+    :persistent="false"
+    :validateEvent="false"
+    placement="bottom-end"
+    :popperOptions="{
+      strategy: 'fixed',
+      modifiers: [{ name: 'offset', options: { offset: [6, 8] } }]
+    }"
+    popperClass="ele-pro-form-builder-table-tool-dropdown"
+    ref="dropdownRef"
+    trigger="click"
+    componentType="pro"
+    :virtualTriggering="true"
+    :virtualRef="dropdownVirtualRef"
+    :items="[
+      { title: '上方插入行', command: 'insertAboveRow' },
+      { title: '下方插入行', command: 'insertBelowRow' },
+      { title: '左侧插入列', command: 'insertLeftCol' },
+      { title: '右侧插入列', command: 'insertRightCol' },
+      { title: '合并右侧单元格', command: 'mergeRightCell', divided: true },
+      { title: '合并下方单元格', command: 'mergeBelowCell' },
+      { title: '拆分单元格合并', command: 'splitCell' },
+      {
+        title: '删除整行',
+        command: 'deleteRow',
+        divided: true,
+        danger: true
+      },
+      { title: '删除整列', command: 'deleteCol', danger: true }
+    ]"
+    @command="handleTableToolDropdownCommand"
+  />
+</template>
+
+<script lang="ts" setup>
+  import { ref, nextTick } from 'vue';
+  import type { EleDropdownInstance } from '../../ele-app/plus';
+  import EleDropdown from '../../ele-dropdown/index.vue';
+  import type { ProFormItemProps } from '../../ele-pro-form/types';
+  import type { ComponentGroup, UpdateItemsResult } from '../types';
+  import {
+    getTableFormItemByTd,
+    generateAddTableColData,
+    generateAddTableRowData,
+    getTableSplitEffects,
+    getTableDeleteRowEffects,
+    getTableDeleteColEffects,
+    getTableMergeRightEffects,
+    getTableMergeBelowEffects
+  } from './table-util';
+
+  defineOptions({ name: 'TableToolMenu' });
+
+  const props = defineProps<{
+    /** 全部表单项 */
+    formItems?: ProFormItemProps[];
+    /** 组件库数据 */
+    componentData?: ComponentGroup[];
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'updateItems', result: UpdateItemsResult): void;
+  }>();
+
+  /** 表格操作下拉菜单组件 */
+  const dropdownRef = ref<EleDropdownInstance>();
+
+  /** 表格操作下拉菜单虚拟触发节点 */
+  const dropdownVirtualRef = ref<any>();
+
+  /** 当前打开的表格操作下拉菜单对应的表单项 */
+  let tdFormItemId: string | null = null;
+
+  /** 更新表单项数据 */
+  const handleUpdateItems = (result: UpdateItemsResult) => {
+    emit('updateItems', result);
+  };
+
+  /** 插入行或列 */
+  const handleAddChildren = (
+    formItemId: string,
+    actionType?: 'addTableRow' | 'addTableCol',
+    position?: -1
+  ) => {
+    const { tableFormItem, tdFormItem } = getTableFormItemByTd(
+      formItemId,
+      props.formItems
+    );
+    if (!tableFormItem || !tdFormItem) {
+      return;
+    }
+    const result = (
+      actionType === 'addTableCol'
+        ? generateAddTableColData
+        : generateAddTableRowData
+    )(
+      tableFormItem,
+      props.formItems,
+      tdFormItem,
+      position,
+      props.componentData
+    );
+    handleUpdateItems(result);
+  };
+
+  /** 拆分单元格 */
+  const handleSplitCell = (formItemId: string) => {
+    const { tableFormItem, tdFormItem } = getTableFormItemByTd(
+      formItemId,
+      props.formItems
+    );
+    if (!tableFormItem || !tdFormItem) {
+      return;
+    }
+    const result = getTableSplitEffects(
+      tableFormItem,
+      props.formItems,
+      tdFormItem,
+      props.componentData
+    );
+    handleUpdateItems(result);
+  };
+
+  /** 删除整行 */
+  const handleDeleteRow = (formItemId: string) => {
+    const { tableFormItem, trItemIndex } = getTableFormItemByTd(
+      formItemId,
+      props.formItems
+    );
+    if (!tableFormItem || trItemIndex == null) {
+      return;
+    }
+    const result = getTableDeleteRowEffects(
+      tableFormItem,
+      props.formItems,
+      trItemIndex,
+      props.componentData
+    );
+    handleUpdateItems(result);
+  };
+
+  /** 删除整列 */
+  const handleDeleteCol = (formItemId: string) => {
+    const { tableFormItem, tdFormItem } = getTableFormItemByTd(
+      formItemId,
+      props.formItems
+    );
+    if (!tableFormItem || !tdFormItem) {
+      return;
+    }
+    const result = getTableDeleteColEffects(
+      tableFormItem,
+      props.formItems,
+      tdFormItem,
+      props.componentData
+    );
+    handleUpdateItems(result);
+  };
+
+  /** 合并单元格 */
+  const handleMergeCell = (
+    formItemId: string,
+    actionType?: 'mergeRightCell' | 'mergeBelowCell'
+  ) => {
+    const { tableFormItem, tdFormItem } = getTableFormItemByTd(
+      formItemId,
+      props.formItems
+    );
+    if (!tableFormItem || !tdFormItem) {
+      return;
+    }
+    const result = (
+      actionType === 'mergeBelowCell'
+        ? getTableMergeBelowEffects
+        : getTableMergeRightEffects
+    )(tableFormItem, props.formItems, tdFormItem, props.componentData);
+    handleUpdateItems(result);
+  };
+
+  /** 关闭表格操作下拉菜单 */
+  const hideTableToolDropdown = () => {
+    dropdownRef.value && dropdownRef.value.handleClose();
+  };
+
+  /** 表格操作下拉菜单项点击事件 */
+  const handleTableToolDropdownCommand = (command: any) => {
+    if (tdFormItemId != null) {
+      if (command === 'insertAboveRow') {
+        // 上方插入行
+        handleAddChildren(tdFormItemId, 'addTableRow', -1);
+      } else if (command === 'insertBelowRow') {
+        // 下方插入行
+        handleAddChildren(tdFormItemId, 'addTableRow');
+      } else if (command === 'insertLeftCol') {
+        // 左侧插入列
+        handleAddChildren(tdFormItemId, 'addTableCol', -1);
+      } else if (command === 'insertRightCol') {
+        // 右侧插入列
+        handleAddChildren(tdFormItemId, 'addTableCol');
+      } else if (command === 'mergeRightCell') {
+        // 合并右侧单元格
+        handleMergeCell(tdFormItemId, 'mergeRightCell');
+      } else if (command === 'mergeBelowCell') {
+        // 合并下方单元格
+        handleMergeCell(tdFormItemId, 'mergeBelowCell');
+      } else if (command === 'splitCell') {
+        // 拆分单元格
+        handleSplitCell(tdFormItemId);
+      } else if (command === 'deleteRow') {
+        // 删除整行
+        handleDeleteRow(tdFormItemId);
+      } else if (command === 'deleteCol') {
+        // 删除整列
+        handleDeleteCol(tdFormItemId);
+      }
+    }
+  };
+
+  /** 打开表格更多操作下拉菜单 */
+  const openMenu = (formItemId: string, triggerEl?: HTMLElement) => {
+    hideTableToolDropdown();
+    if (!triggerEl) {
+      return;
+    }
+    nextTick(() => {
+      tdFormItemId = formItemId;
+      dropdownVirtualRef.value = triggerEl;
+      nextTick(() => {
+        dropdownRef.value && dropdownRef.value.handleOpen();
+      });
+    });
+  };
+
+  /** 关闭表格操作下拉菜单 */
+  const hideMenu = () => {
+    hideTableToolDropdown();
+  };
+
+  defineExpose({
+    openMenu,
+    hideMenu
+  });
+</script>