form-designer-xinyi 1.0.0

package/packages/core/components/tree/src/treeNodes.vue

@@ -0,0 +1,68 @@
+<template>
+  <draggable v-if="!pluginManager.getComponentConfingByType(props.parentSchema?.type || '')?.editConstraints?.childImmovable"
+    v-model="modelSchemas" item-key="id" :component-data="{
+    }" class="epic-draggable-range" v-bind="{
+      animation: 200,
+      tag: 'ul',
+      group: 'tree-draggable',
+      ghostClass: 'moveing',
+      draggable: '.draggable-item',
+      disabled: !treeProps.draggable || modelSchemas[0]?.type === 'page'
+
+    }" @start="handleSelect($event.oldIndex)">
+    <template #item="{ element, index }">
+      <ETreeNodeItem :class="isDraggable(element)" :key="element.id" :schema="element" />
+    </template>
+  </draggable>
+
+  <ul v-else>
+    <ETreeNodeItem v-for="( element ) in modelSchemas" :key="element.id" :schema="element" />
+  </ul>
+</template>
+<script lang="ts" setup>
+import { computed, inject } from 'vue'
+import { ComponentSchema, Designer } from '../../../types/epic-designer'
+import ETreeNodeItem from './treeNodeItem.vue'
+import draggable from 'vuedraggable'
+import { pluginManager } from '@epic-designer/utils'
+defineOptions({
+  name: 'ETreeNodes'
+})
+const designer = inject('designer') as Designer
+const treeProps = inject('treeProps') as any
+
+const props = defineProps<{
+  schemas: ComponentSchema[],
+  parentSchema?: ComponentSchema
+}>()
+const emit = defineEmits(['update:schemas'])
+const modelSchemas = computed({
+  get() {
+    // 判断props.schemas是否存在值
+    return props.schemas
+  },
+  set(e) {
+    emit('update:schemas', e)
+  }
+})
+
+/**
+ * 选中点击节点元素
+ * @param index
+ */
+function handleSelect(index: number) {
+  designer.setDisableHover(true)
+  designer.setCheckedNode(modelSchemas.value![index])
+}
+
+function isDraggable(schema: ComponentSchema) {
+  // 判断当前节点类型是否允许拖拽
+  if (schema.type === 'page' || pluginManager.getComponentConfingByType(schema.type).editConstraints?.immovable) {
+    // 禁止拖拽
+    return 'unmover-item'
+  }
+
+  return 'draggable-item'
+}
+
+</script>

package/packages/core/extensions/EActionEditor/index.less

@@ -0,0 +1,172 @@
+.epic-event-item {
+  .epic-event-info {
+    display: flex;
+    background-color: var(--epic-event-item-color);
+    padding: 0 12px;
+    justify-content: space-between;
+    align-items: center;
+    height: 36px;
+    border: 1px solid var(--epic-border-color);
+    color: var(--epic-text-main);
+    margin: 0px -1px -1px 0px;
+  }
+
+  .epic-event-btn > span {
+    cursor: pointer;
+  }
+
+  .epic-action-editor-main {
+    .epic-editor-item {
+      margin: 8px 0px;
+      border: 1px solid var(--epic-border-color);
+    background-color: var(--epic-event-item-color);
+    color: var(--epic-text-main);
+    padding: 8px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+
+  }
+}
+
+.epic-modal-action-main {
+  display: flex;
+  height: 100%;
+}
+
+.epic-modal-left-panel,
+.epic-script-left-panel {
+  width: 240px;
+  border: 1px solid var(--epic-border-color);
+  overflow: auto;
+  padding: 8px;
+  box-sizing: border-box;
+
+  .fun-btn {
+    border: 1px solid var(--epic-border-color);
+    padding: 8px 12px;
+    border-radius: 3px;
+    cursor: pointer;
+    margin-bottom: 6px;
+    
+    &.checked {
+      background-color: var(--epic-primary-hover-color);
+      border-color: var(--epic-primary-color);
+      color: var(--epic-primary-color);
+    }
+  }
+}
+
+.epic-modal-right-panel,
+.epic-script-right-panel {
+  flex: 1;
+  border: 1px solid var(--epic-border-color);
+  margin-left: 8px;
+  padding: 8px;
+
+  .action-select {
+    margin-right: 8px;
+    min-width: 175px;
+  }
+}
+
+.epic-script-edit {
+  display: flex;
+
+  .epic-script-left-panel {
+    .epic-tree-select {
+      height: 240px;
+      overflow: auto;
+    }
+
+    .tree-node-item,
+    .epic-action-item {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 0 8px;
+      .action {
+        opacity: 0;
+        pointer-events: none;
+        color: var(--epic-primary-color);
+      }
+      &:hover .action {
+        opacity: 1;
+        pointer-events: all;
+      }
+    }
+
+
+  }
+  .epic-script-right-panel {
+    // width: 240px;
+    // flex: none;
+  }
+}
+
+.epic-action-select {
+  border-top: 1px solid var(--epic-border-color);
+  margin-top: 12px;
+  padding: 8px;
+  padding-right: 0;
+  overflow: auto;
+
+  .epic-action-item {
+    height: 32px;
+    line-height: 32px;
+    padding-left: 12px;
+    border-radius: 3px;
+    cursor: pointer;
+    border: 1px solid transparent;
+
+    &:hover {
+      background-color: var(--epic-primary-hover-color);
+      color: var(--epic-primary-color);
+    }
+    &.checked {
+      background-color: var(--epic-primary-hover-color);
+      border-color: var(--epic-primary-color);
+      color: var(--epic-primary-color);
+    }
+  }
+}
+
+.epic-editor-item {
+  display: flex;
+  align-items: center;
+  padding-top: 6px;
+
+  .epic-action-box {
+    display: flex;
+
+    .epic-del-btn {
+      width: 30px;
+      height: 100%;
+      text-align: center;
+      cursor: pointer;
+
+      &:hover {
+        color: #f22;
+      }
+    }
+
+    .epic-edit-btn {
+      width: 30px;
+      height: 100%;
+      text-align: center;
+      cursor: pointer;
+
+      &:hover {
+        color: var(--epic-primary-color);
+      }
+    }
+  }
+}
+
+.add-btn {
+  cursor: pointer;
+  margin-top: 6px;
+  color: var(--epic-primary-color);
+}

package/packages/core/extensions/EActionEditor/index.vue

@@ -0,0 +1,160 @@
+<template>
+  <Collapse v-model="activeNames" v-model:activeKey="activeNames" v-model:expanded-names="activeNames">
+    <CollapseItem v-for="(item) in filterEventList" :key="item.title" :title="item.title" :header="item.title"
+      :name="item.title">
+      <EActionEditorItem v-model="modelValueComputed" :item-events="item.events" :all-events="allEvents"
+        :events="events" @add="handleOpen" @edit="handleOpenEdit" />
+    </CollapseItem>
+  </Collapse>
+  <EActionModal ref="EActionModalRef" @add="handleAdd" @edit="handleEdit" />
+</template>
+
+<script lang="ts" setup>
+import { PropType, computed, ref, nextTick, toRaw, watch } from 'vue'
+import EActionEditorItem from './src/EActionEditorItem.vue'
+import { pluginManager } from '@epic-designer/utils'
+import EActionModal from './src/EActionModal.vue'
+const Collapse = pluginManager.getComponent('Collapse')
+const CollapseItem = pluginManager.getComponent('CollapseItem')
+
+const EActionModalRef = ref<any>(null)
+let editIndex = 0
+const props = defineProps({
+  eventList: {
+    type: Array as PropType<any>,
+    default: () => []
+  },
+  modelValue: {
+    type: Object as PropType<any>
+  }
+})
+
+const emit = defineEmits(['update:modelValue'])
+const modelValueComputed = computed({
+  get() {
+    return props.modelValue
+  },
+  set(value) {
+    emit('update:modelValue', value)
+  }
+})
+const activeNames = ref<string[]>([])
+
+// 过滤无事件
+const filterEventList = computed(() => {
+  return props.eventList.filter((item: { events: string | any[]; }) => item.events.length)
+})
+
+const allEvents = computed(() => {
+  return props.eventList.map((item: { events: any; }) => item.events).flat()
+})
+
+
+
+
+const events = ref<any>({})
+
+
+
+
+allEvents.value.forEach((item: any) => {
+
+  events.value[item.type] = computed({
+    get() {
+      return modelValueComputed.value?.[item.type] ?? []
+    },
+    set(e) {
+      if (e && e.length) {
+        modelValueComputed.value[item.type] = e.map(item => toRaw(item))
+      } else {
+        // 事件动作为空时，则清除该事件列表
+        delete modelValueComputed.value[item.type]
+      }
+    }
+  })
+
+})
+
+// 监视 filterEventList.value 的变化
+watch(() => filterEventList.value, (e) => {
+  // 当 filterEventList.value 变化时执行回调函数
+  if (e.length) {
+    // 如果 filterEventList.value 不为空数组
+    // 过滤出满足条件的事件，并将它们的标题存储在 activeNames.value 中
+    activeNames.value = e.filter(item => {
+      // 对于每个事件项，检查其包含的事件类型
+      for (let i = 0; i < item.events.length; i++) {
+        const type = item.events[i].type
+        // 如果 events.value[type] 不为空数组，则返回 true
+        if (events.value[type].length) {
+          return true
+        }
+      }
+      // 如果事件项中没有任何一个事件类型满足条件，则返回 false
+      return false
+    }).map(item => item.title) // 将满足条件的事件项的标题映射成一个新的数组
+  }
+}, {
+  // 配置选项
+  immediate: true // 立即执行一次回调函数
+})
+
+
+
+let currentType: string = ''
+/**
+ * 打开动作配置窗口
+ * @param type
+ */
+function handleOpen(type: string) {
+  EActionModalRef.value?.handleOpen()
+  currentType = type
+}
+
+
+/**
+ * 打开动作配置窗口-编辑
+ * @param {number} index - 要编辑事件的索引
+ * @param {string} type - 事件类型
+ * @param {any} action - 要执行的动作
+ */
+function handleOpenEdit(index: number, type: string, action) {
+  // 如果 EActionModalRef.value 不为 null 或 undefined，则调用其 handleOpenEdit 方法
+  EActionModalRef.value?.handleOpenEdit(action)
+
+  // 将要编辑的事件的索引赋值给 editIndex
+  editIndex = index
+
+  // 将事件的类型赋值给 currentType
+  currentType = type
+}
+
+/**
+ * 编辑事件的函数
+ * @param {any} action - 动作数据
+ */
+function handleEdit(action: any) {
+  // 将编辑后的动作替换掉 events.value[currentType][editIndex]
+  events.value[currentType][editIndex] = action
+
+  // 更新 modelValueComputed.value[currentType]，使用新的数组代替原始数组
+  modelValueComputed.value[currentType] = [...(events.value[currentType] ?? [])]
+}
+
+
+/**
+ * 添加组件事件
+ * @param {any} action - 要执行的动作
+ */
+function handleAdd(action: any) {
+  // 如果 modelValueComputed.value 为 null 或 undefined，则创建一个新的对象
+  if (!modelValueComputed.value) {
+    modelValueComputed.value = { [currentType]: [...(events.value[currentType] ?? []), action] }
+    return
+  }
+
+  // 否则，直接在 modelValueComputed.value[currentType] 中添加新的动作
+  modelValueComputed.value[currentType] = [...(events.value[currentType] ?? []), action]
+}
+
+</script>

package/packages/core/extensions/EActionEditor/src/EActionEditorItem.vue

@@ -0,0 +1,133 @@
+<template>
+  <div v-for="item in itemEvents" :key="item.type" class="epic-event-item">
+    <div class="epic-event-info">
+      <div class="epic-event-label" :title="item.describe">
+        {{ item.describe }}
+      </div>
+      <div class="epic-event-btn">
+        <EIcon name="icon-tianjia1" @click="handleOpen(item.type)" />
+      </div>
+    </div>
+    <div class="epic-action-editor-main">
+      <draggable v-model="props.events[item.type]" item-key="id" :component-data="{
+        type: 'transition-group',
+      }" group="option-list" handle=".handle" :animation="200">
+        <template #item="{ element: action, index }">
+          <div class="epic-editor-item">
+            <div class="w-36px text-lg">
+              <EIcon class="mr-2 text-lg cursor-move handle" name="icon-tuozhuai" />
+            </div>
+            <div class="flex-1">
+              <div v-if="action.type === 'component'">
+                {{ getLabel(action.componentId) }}
+              </div>
+              <div v-else-if="action.type === 'custom'">
+                自定义函数
+              </div>
+              <div v-else-if="action.type === 'public'">
+                公共函数
+              </div>
+              {{ action.methodName }}
+            </div>
+            <div class="epic-action-box">
+              <div class="epic-edit-btn" @click="handleEdit(index, item.type, action)">
+                <EIcon name="icon-tiaozheng" />
+              </div>
+              <div class="epic-del-btn" @click="handleDelete(index, item.type)">
+                <EIcon name="icon-shanchu1" />
+              </div>
+            </div>
+          </div>
+        </template>
+      </draggable>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { type PropType, inject } from 'vue'
+import { findSchemaById } from '@epic-designer/utils'
+import { PageSchema } from '../../../types/epic-designer'
+import EIcon from '../../../components/icon'
+import draggable from 'vuedraggable'
+
+const props = defineProps({
+  itemEvents: {
+    type: Array as PropType<any>,
+    default: () => []
+  },
+  allEvents: {
+    type: Array as PropType<any>,
+    default: () => []
+  },
+  modelValue: {
+    type: Object as PropType<any>,
+    default: () => []
+  },
+  events: {
+    type: Object as PropType<any>,
+    default: () => ({})
+  }
+})
+const emit = defineEmits(['add', 'edit', 'update:modelValue'])
+
+const pageSchema = inject('pageSchema') as PageSchema
+
+/**
+ * 打开动作配置窗口
+ * @param type
+ */
+function handleOpen(type: string) {
+  emit('add', type)
+}
+
+/**
+ * 获取组件label
+ * @param id
+ */
+function getLabel(id: string) {
+  const schema = findSchemaById(pageSchema.schemas, id)
+  return schema.label
+}
+
+/**
+ * 删除
+ * @param index
+ */
+function handleDelete(index: number, type: string) {
+  const newEvents = getNewEvents(type)
+  newEvents[type] = props.events[type].filter((_item: any, i: number) => index !== i)
+  if (!newEvents[type]?.length) {
+    delete newEvents[type]
+  }
+  emit('update:modelValue', newEvents)
+}
+
+/**
+ * 修改事件
+ * @param index
+ * @param type
+ * @param action
+ */
+function handleEdit(index: number, type: string, action: any) {
+  emit('edit', index, type, action)
+}
+
+/**
+ * 获取新的事件数据，过滤空数据
+ * @param type
+ */
+function getNewEvents(type: string) {
+  const newEvents: { [type: string]: any } = {}
+  props.allEvents.forEach((item: any) => {
+    if (!props.events[item.type].length) {
+      return false
+    }
+    if (item.type === type) {
+      return false
+    }
+    newEvents[item.type] = props.events[item.type]
+  })
+  return newEvents
+}
+
+</script>