epic-designer-gold 0.0.3 → 0.0.4

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

@@ -0,0 +1,258 @@
+<template>
+  <Modal
+    v-model="visible"
+    class="w-1200px"
+    width="1200px"
+    @close="handleClose"
+    @ok="handleSave"
+    title="动作配置"
+  >
+    <div class="rounded epic-modal-action-main">
+      <div class="epic-modal-left-panel h-full flex flex-col">
+        <!-- 动作所属对象 start -->
+        <div class="flex flex-1 h-0 flex-col">
+          <div
+            class="fun-btn"
+            :class="{ checked: state.actionItem.type === 'custom' }"
+            @click="toggleMethod('custom')"
+          >
+            自定义函数
+          </div>
+          <div
+            class="fun-btn"
+            :class="{ checked: state.actionItem.type === 'public' }"
+            @click="toggleMethod('public')"
+          >
+            公共函数
+          </div>
+          组件
+          <div class="flex-1 h-0">
+            <ETree
+              v-model:selectedKeys="selectedKeys"
+              :options="pageSchema.schemas"
+              @nodeClick="handleNodeClick"
+            />
+          </div>
+        </div>
+        <!-- 动作选择 start -->
+        <div class="epic-action-select h-30/100 flex flex-col">
+          <div class="mb-2">动作选择</div>
+          <div class="flex-1 overflow-auto pr-8px">
+            <div
+              v-for="item in methodOptions"
+              :class="{ checked: item.value === state.actionItem.methodName }"
+              @click="handleCheckedMethod(item.value)"
+              :key="item.value"
+              class="epic-action-item"
+            >
+              <span>{{ item.label }}</span>
+            </div>
+            <div
+              v-show="!methodOptions?.length"
+              class="text-center pt-42px text-gray-400"
+            >
+              当前组件暂无动作
+            </div>
+          </div>
+        </div>
+        <!-- 动作所属对象 end -->
+        <!-- 动作选择 end -->
+      </div>
+      <!-- 动作配置 start -->
+      <div class="epic-modal-right-panel">
+        <EScriptEdit v-if="state.actionItem.type === 'custom'" />
+        <div
+          v-else-if="actionArgsConfigs.length === 0"
+          class="text-center pt-42px text-gray-400"
+        >
+          暂无配置
+        </div>
+        <EArgsEditor
+          v-else
+          v-model="state.actionItem.args"
+          :actionArgsConfigs="actionArgsConfigs"
+        />
+      </div>
+      <!-- 动作配置 end -->
+    </div>
+  </Modal>
+</template>
+<script lang="ts" setup>
+import {
+  pluginManager,
+  PageManager,
+  deepClone,
+  findSchemaById,
+  getUUID,
+} from "@epic-designer/utils";
+import { ref, inject, toRaw, reactive, computed, nextTick } from "vue";
+import ETree from "../../../components/tree";
+import { ComponentSchema, PageSchema, FormDataModel } from "../../../types/epic-designer";
+import EScriptEdit from "./EScriptEdit.vue";
+import EArgsEditor from "./EArgsEditor.vue";
+
+const Modal = pluginManager.getComponent("modal");
+const isAdd = ref(true);
+const pageSchema = inject("pageSchema") as PageSchema;
+const pageManager = inject("pageManager", {}) as PageManager;
+const visible = ref(false);
+const selectedKeys = ref<string[]>([]);
+const componentSchema = ref<ComponentSchema | null>(null);
+
+const emit = defineEmits(["add", "edit"]);
+
+const methodOptions = computed(() => {
+  // 组件动作列表
+  if (state.actionItem.type === "component") {
+    if (componentSchema.value) {
+      return pluginManager
+        .getComponentConfings()
+        [componentSchema.value.type].config.action?.map((item) => ({
+          label: item.describe,
+          value: item.type,
+        }));
+    }
+    return [];
+  }
+
+  // 自定义函数列表
+  if (state.actionItem.type === "custom") {
+    return Object.entries(pageManager.funcs.value)
+      .filter(([_key, value]) => typeof value === "function")
+      .map(([label]) => ({ label, value: label }));
+  }
+
+  // 公共函数列表
+  if (state.actionItem.type === "public") {
+    return Object.entries(pluginManager.publicMethods).map(([label]) => ({
+      label,
+      value: label,
+    }));
+  }
+
+  return [];
+});
+
+const actionArgsConfigs = computed(() => {
+  if (state.actionItem.type === "component") {
+    if (componentSchema.value) {
+      const action = pluginManager.getComponentConfings()[componentSchema.value.type]
+        .config.action;
+      const actionItem = action?.find(
+        (item) => item.type === state.actionItem.methodName
+      );
+
+      if (actionItem?.argsConfigs) {
+        const index = actionItem.argsConfigs.findIndex(
+          (item) => item.label === "设置数据"
+        );
+        index !== -1 &&
+          (actionItem.argsConfigs[index] = {
+            ...componentSchema.value,
+            label: "设置数据",
+            field: "0",
+            id: getUUID(),
+          } as ComponentSchema);
+      }
+
+      return actionItem?.argsConfigs ?? [];
+    }
+  }
+  return [];
+});
+
+const state = reactive({
+  actionItem: {
+    type: "custom",
+    methodName: "test",
+    componentId: null,
+  } as FormDataModel,
+  cacheData: {},
+});
+
+function handleOpen() {
+  visible.value = true;
+  isAdd.value = true;
+  state.actionItem.type = "custom";
+  state.actionItem.componentId = null;
+  if (methodOptions.value?.length) {
+    handleCheckedMethod(methodOptions.value[0].value);
+  }
+}
+function handleOpenEdit(action: any) {
+  visible.value = true;
+  isAdd.value = false;
+  componentSchema.value = null;
+
+  if (action.componentId) {
+    const schema = findSchemaById(pageSchema.schemas, action.componentId);
+
+    componentSchema.value = schema;
+    selectedKeys.value = [action.componentId];
+  }
+
+  nextTick(() => {
+    state.actionItem.componentId = action.componentId;
+    state.actionItem.methodName = action.methodName;
+    state.actionItem.type = action.type;
+    state.actionItem.args = action.args;
+  });
+}
+function handleSave() {
+  if (!state.actionItem.methodName) {
+    alert("请先选择动作方法");
+    return;
+  }
+  emit(isAdd.value ? "add" : "edit", deepClone(toRaw(state.actionItem)));
+  handleClose();
+}
+
+function handleClose() {
+  visible.value = false;
+  selectedKeys.value = [];
+  // 清空缓存数据
+  state.cacheData = {};
+}
+
+function toggleMethod(type: string) {
+  state.actionItem.componentId = null;
+  state.actionItem.type = type;
+  componentSchema.value = null;
+  state.actionItem.methodName = null;
+
+  selectedKeys.value = [];
+  if (methodOptions.value?.length) {
+    handleCheckedMethod(methodOptions.value[0].value);
+  }
+}
+function handleNodeClick(e: any) {
+  if (state.actionItem.args) {
+    // 存在参数配置，缓存参数配置数据
+    state.cacheData[state.actionItem.componentId + state.actionItem.methodName] =
+      state.actionItem.args;
+  }
+
+  state.actionItem.componentId = e.id;
+  state.actionItem.type = "component";
+  state.actionItem.methodName = null;
+  componentSchema.value = e.componentSchema;
+
+  if (methodOptions.value?.length) {
+    handleCheckedMethod(methodOptions.value[0].value);
+  }
+}
+
+function handleCheckedMethod(value: string) {
+  // activeTab.value = '脚本编辑'
+  state.actionItem.methodName = value;
+
+  // 获取缓存参数配置
+  state.actionItem.args =
+    state.cacheData[state.actionItem.componentId + state.actionItem.methodName];
+}
+
+defineExpose({
+  handleOpen,
+  handleOpenEdit,
+});
+</script>

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

@@ -0,0 +1,61 @@
+<template>
+  <div class="epic-attribute-view">
+    <div v-for="item in props.actionArgsConfigs" :key="item.field + item.type">
+      <div v-show="isShow(item)" class="epic-attr-item" :class="item.layout">
+        <div class="epic-attr-label" :title="item.label">
+          {{ item.label }}
+        </div>
+        <div class="epic-attr-input">
+          <ENode
+            :componentSchema="{ ...item, componentProps: { ...item.componentProps, input: false, field: undefined, hidden: false }, show: true, noFormItem: true }"
+            :model-value="valueRef[item.field!]" @update:model-value="handleSetValue($event, item.field!)" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import ENode from '../../../components/node'
+import { ComponentSchema } from '../../../types/epic-designer'
+import { computed } from 'vue'
+
+const props = defineProps<{
+  modelValue: string | null | undefined,
+  actionArgsConfigs: ComponentSchema[]
+}>()
+const emits = defineEmits(['update:modelValue'])
+
+const valueRef = computed<any>(() => {
+  if (props.modelValue) {
+    return JSON.parse(props.modelValue)
+  }
+  return []
+})
+
+
+function isShow(item: ComponentSchema) {
+  // show属性为boolean类型则直接返回
+  if (typeof item.show === 'boolean') {
+    return item.show
+  }
+
+  // show属性为function类型则执行
+  if (typeof item.show === 'function') {
+    return item.show?.({ values: valueRef.value! })
+  }
+  return true
+}
+
+/**
+ * 设置属性值
+ */
+function handleSetValue(value: any, field: string) {
+  const values = [
+    ...JSON.parse(props.modelValue ?? '[]')
+  ]
+  values[field] = value
+  emits('update:modelValue', JSON.stringify(values))
+  // 将修改过的组件属性推入撤销操作的栈中
+}
+
+</script>

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

@@ -0,0 +1,26 @@
+<template>
+  <div class="h-full flex flex-col">
+    <div class="pb-2">
+      自定义函数编辑
+    </div>
+    <MonacoEditor ref="monacoEditorRef" autoToggleTheme v-model="pageSchema.script" class="epic-editor flex-1" :config="MonacoEditorConfig"
+      language="javascript" />
+  </div>
+</template>
+<script lang="ts" setup>
+import { pluginManager } from '@epic-designer/utils'
+import { ref, inject } from 'vue'
+import { PageSchema } from '../../../types/epic-designer'
+const MonacoEditor = pluginManager.getComponent('monacoEditor')
+const MonacoEditorConfig = {
+  theme: 'vs-light',
+  selectOnLineNumbers: true,
+  minimap: {
+    enabled: false
+  }
+}
+const monacoEditorRef = ref<any>(null)
+const pageSchema = inject('pageSchema') as PageSchema
+
+
+</script>

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

@@ -0,0 +1,24 @@
+
+.EColEditor-item {
+  display: flex;
+  align-items: center;
+  padding-top: 6px;
+
+  .epic-del-btn {
+      width: 50px;
+      height: 100%;
+      text-align: center;
+      cursor: pointer;
+
+      &:hover {
+          color: #f22;
+      }
+  }
+
+}
+
+.add-btn {
+  cursor: pointer;
+  margin-top: 6px;
+  color: var(--epic-primary-color);
+}

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

@@ -0,0 +1,65 @@
+<template>
+  <div>
+    <div v-for="(item, index) in colList" :key="index" class="EColEditor-item">
+      <Number v-model:value="item.componentProps.span" v-model="item.componentProps.span" style="width:100%" :min="1"
+        :max="24" />
+      <div v-if="colList.length > 1" class="epic-del-btn">
+        <span @click="handleDelete(index)">
+          <EIcon name="icon-shanchu1" />
+        </span>
+
+      </div>
+    </div>
+    <div class="add-btn" @click="handleAdd">
+      添加
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { pluginManager, getUUID } from '@epic-designer/utils'
+import { ComponentSchema } from '../../types/epic-designer'
+import { computed, PropType } from 'vue'
+import EIcon from '../../components/icon'
+
+const Number = pluginManager.getComponent('number')
+const props = defineProps({
+  modelValue: {
+    type: Array as PropType<ComponentSchema[]>,
+    default: () => []
+  }
+})
+
+const emit = defineEmits(['update:modelValue'])
+const colList = computed({
+  get() {
+    return props.modelValue
+  },
+  set(e) {
+    emit('update:modelValue', e)
+  }
+})
+
+/**
+ * 新增栅格Col
+ */
+function handleAdd() {
+  const colItem = {
+    type: 'col',
+    children: [],
+    componentProps: {
+      span: 12
+    },
+    id: getUUID()
+  }
+  colList.value.push(colItem)
+}
+
+/**
+ * 删除栅格Col
+ * @param index
+ */
+function handleDelete(index: number) {
+  colList.value = colList.value.filter((item, i) => index !== i)
+}
+
+</script>

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

@@ -0,0 +1,170 @@
+.e-data-source {
+    position: relative;
+}
+
+.el-drawer__header {
+    margin-bottom: 0 !important;
+}
+
+button {
+    position: relative;
+}
+
+.icon-numbers {
+    position: absolute;
+    right: -8px;
+    top: -8px;
+    min-width: 18px;
+    min-height: 18px;
+    background-color: #3e8bf2;
+    color: #fff;
+    padding: 4px;
+    font-size: 12px;
+    border-radius: 50%;
+}
+
+.drawer-content {
+    border: 1px solid #ccc;
+    height: 100%;
+    width: 100%;
+    overflow: hidden;
+    display: flex;
+
+    &-left {
+        width: 45%;
+        height: 100%;
+        border-right: 1px solid #ccc;
+        padding: 16px 12px;
+
+        button {
+            width: 100%;
+            height: 36px;
+            margin-bottom: 12px;
+        }
+
+        >div {
+            height: calc(100% - 48px);
+            overflow: auto;
+        }
+
+        .source-item {
+            &.active {
+                background: #ecf5ff;
+            }
+
+            display: flex;
+            align-items: center;
+            border: 1px solid #ccc;
+            border-radius: 4px;
+            height: 38px;
+            // padding: 0 12px;
+            justify-content: space-between;
+            margin-bottom: 8px;
+            width: 100%;
+            cursor: pointer;
+
+            &:hover {
+                background: #ecf5ff;
+                width: 100%;
+            }
+
+            &-title {
+                display: flex;
+                align-items: center;
+                font-size: 14px;
+                height: 100%;
+                margin-left: 12px;
+                width: calc(100% - 40px);
+                user-select: none;
+
+                >div:first-child {
+                    color: #6ac33e;
+                    margin-right: 8px;
+                    font-weight: bold;
+                }
+
+                >div:last-child {}
+            }
+
+            &-icon {
+                width: 40px;
+                height: 40px;
+                // padding-right: 12px;
+                padding: 12px;
+                color: rgb(250, 16, 16);
+            }
+
+        }
+    }
+
+    &-right {
+        width: 55%;
+        height: 100%;
+
+        .content-right-btn {
+            height: 60px;
+            // border-bottom: 1px solid #ccc;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 0 16px;
+        }
+
+        .content {
+            height: calc(100% - 60px);
+
+            &-empty {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                width: 100%;
+                height: 100%;
+                color: #666;
+            }
+
+            &-form {
+                padding: 16px;
+            }
+        }
+    }
+}
+
+.form-flex {
+    display: flex;
+    justify-content: space-between;
+}
+
+.form-item {
+    &-title {
+        font-size: 14px;
+        color: #606266;
+        display: inline-block;
+        height: auto;
+        line-height: 22px;
+        margin-bottom: 8px;
+        text-align: left;
+        vertical-align: middle;
+    }
+
+    &-content {
+        .content-item {
+            width: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin-bottom: 8px;
+
+            .icon-bg {
+                background-color: red;
+                border-radius: 50%;
+                padding: 4px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                cursor: pointer;
+
+            }
+        }
+
+    }
+}