eoss 0.1.0-alpha.20 → 0.1.0-alpha.21

package/packages/lowcode/src/lowcode.vue

@@ -0,0 +1,539 @@
+<template>
+  <div class="es-lowcode">
+    <toolbar></toolbar>
+    <div class="es-lowcode__main">
+      <!-- 左侧菜单 -->
+      <Aside
+        :pages="pagesData"
+        :components="components"
+        :library="library"
+        :pagination="paginations"
+      />
+
+      <!-- 中间画布区域 -->
+      <Canvas :page="page" />
+      <!-- 右侧属性区域 -->
+      <Attribute :page="page" />
+    </div>
+    <es-dialog size="max" :title="open.title" :visible.sync="open.visible">
+      <Json :page="page" v-if="open.type === 'json'" />
+      <Source :page="page" v-else />
+    </es-dialog>
+    <es-dialog
+      title="完善页面信息"
+      width="600px"
+      height="380px"
+      :visible.sync="visible"
+      :close-on-click-modal="false"
+    >
+      <es-form :model="form" :rules="rules" ref="formRef" label-width="80px">
+        <es-form-item label="编码" prop="code">
+          <es-input v-model="form.code" placeholder="请输入编码" />
+        </es-form-item>
+        <es-form-item label="名称" prop="name">
+          <es-input v-model="form.name" placeholder="请输入名称" />
+        </es-form-item>
+        <es-form-item label="标题" prop="title">
+          <es-input v-model="form.title" placeholder="请输入页面标题" />
+        </es-form-item>
+        <es-form-item label="描述" prop="description">
+          <es-input
+            type="textarea"
+            v-model="form.description"
+            placeholder="请输入描述"
+          />
+        </es-form-item>
+        <div class="es-lowcode__aside--form-btn">
+          <es-button type="primary" @click="submitForm">确定</es-button>
+        </div>
+      </es-form>
+    </es-dialog>
+  </div>
+</template>
+
+<script>
+import bus from 'eoss/src/utils/bus.js';
+import Toolbar from './toolbar.vue';
+import Aside from './aside.vue';
+import Canvas from './canvas.vue';
+import Attribute from './attribute.vue';
+import Json from './json.vue';
+import Source from './source.vue';
+import Message from 'eoss/packages/message';
+import { ajax } from 'eoss/src/utils/ajax';
+import {
+  pageLists,
+  pageSave,
+  pageUpdate,
+  pageDelete
+} from 'eoss/src/config/api.js';
+import { loading } from 'eoss/src/utils/util';
+export default {
+  name: 'EsLowcode',
+  provide() {
+    return {
+      lowcode: this
+    };
+  },
+  components: { Toolbar, Aside, Canvas, Attribute },
+
+  props: {
+    // 页面列表
+    pages: {
+      type: Array,
+      default: () => []
+    },
+    // 组件库数据
+    components: {
+      type: Array,
+      default: () => []
+    },
+    // 组件库数据
+    library: {
+      type: Array,
+      default: () => []
+    },
+    // 分页信息
+    pagination: {
+      type: Object,
+      default: () => ({
+        total: 0,
+        currentPage: 1,
+        pageSize: 20
+      })
+    },
+    // 是否远程获取页面列表
+    remote: {
+      type: Boolean,
+      default: false
+    },
+    // 下一页方法
+    nextPage: Function,
+    // 上一页方法
+    prevPage: Function,
+    // 当前页方法
+    currentPage: Function,
+    // 保存方法
+    save: Function,
+    // 发布方法
+    publish: Function
+  },
+
+  data() {
+    return {
+      pagesData: this.pages,
+      paginations: this.pagination,
+      page: null,
+      open: {
+        title: '',
+        type: '',
+        visible: false
+      },
+      visible: false,
+      form: {
+        name: '',
+        title: '',
+        code: '',
+        description: ''
+      },
+      rules: {
+        name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
+        code: [{ required: true, message: '请输入编码', trigger: 'blur' }]
+        //title: [{ required: true, message: '请输入页面标题', trigger: 'blur' }],
+        //description: [
+        //  { required: true, message: '请输入描述', trigger: 'blur' }
+        // ]
+      }
+    };
+  },
+
+  watch: {
+    pages: {
+      handler(val) {
+        this.pagesData = val;
+      }
+    },
+    pagination(val) {
+      this.paginations = val;
+    }
+  },
+
+  mounted() {
+    if (this.remote) {
+      this.getPageLists({
+        pageNum: this.paginations.currentPage,
+        pageSize: this.paginations.pageSize
+      });
+    }
+    // 下一页
+    bus.$on('nextPage', () => {
+      if (this.nextPage) {
+        this.nextPage(this.paginations);
+      } else {
+        this.getPageLists({
+          pageNum: this.paginations.currentPage + 1,
+          pageSize: this.paginations.pageSize
+        });
+      }
+    });
+    // 上一页
+    bus.$on('prevPage', () => {
+      if (this.prevPage) {
+        this.prevPage(this.paginations);
+      } else {
+        this.getPageLists({
+          pageNum: this.paginations.currentPage - 1,
+          pageSize: this.paginations.pageSize
+        });
+      }
+    });
+    // 当前页
+    bus.$on('currentPage', (pageNum) => {
+      if (this.currentPage) {
+        this.currentPage(pageNum);
+      } else {
+        this.getPageLists({
+          pageNum,
+          pageSize: this.paginations.pageSize
+        });
+      }
+    });
+    /** 添加页面 */
+    bus.$on('addPage', (page) => {
+      this.addPage(page);
+    });
+    /** 页面切换 */
+    bus.$on('selectPage', (page) => {
+      this.page = page;
+    });
+    /** 更新当前页面 */
+    bus.$on('updatePage', (page) => {
+      this.page = page;
+    });
+
+    /** 页面删除 */
+    bus.$on('removePage', (index) => {
+      this.removePage(index);
+    });
+
+    /** 组件/页面属性更新（来自 attribute 面板） */
+    bus.$on('updateComponent', (updates) => {
+      if (!this.page || !updates.id) return;
+      // 区分：修改的是页面本身还是子组件
+      if (this.page.id === updates.id) {
+        // 修改页面本身的属性（如 style、span 等）
+        Object.keys(updates).forEach((key) => {
+          if (key !== 'id') {
+            this.$set(this.page, key, updates[key]);
+          }
+        });
+      } else if (this.page.children) {
+        // 修改子组件属性
+        const index = this.page.children.findIndex((c) => c.id === updates.id);
+        if (index !== -1) {
+          const newComponent = { ...this.page.children[index], ...updates };
+          this.$set(this.page.children, index, newComponent);
+        }
+      }
+    });
+
+    /** 组件列表更新（来自 Canvas 拖拽操作） */
+    bus.$on('updateChildren', (children) => {
+      if (!this.page) return;
+      this.$set(this.page, 'children', children);
+    });
+
+    /** 显示JSON或源码 */
+    bus.$on('open', (type) => {
+      this.open.visible = true;
+      this.open.type = type;
+      this.open.title = type === 'json' ? 'JSON' : '源码';
+    });
+    /** 保存 */
+    bus.$on('save', () => {
+      if (!this.page) {
+        Message.warning('请先选择要保存的页面');
+        return;
+      }
+      if (this.save) {
+        this.save(this.page);
+        return;
+      }
+      this.submitPageData();
+    });
+    /** 发布 */
+    bus.$on('publish', (genre) => {
+      if (!this.page) {
+        Message.warning('请先选择要发布的页面');
+        return;
+      }
+      this.page.type = genre;
+      if (genre === 'page') {
+        const { name, title, code, description } = this.page;
+        this.form = { name, title, code, description };
+        this.visible = true;
+      } else {
+        if (this.publish) {
+          this.publish(this.page);
+          return;
+        }
+        this.submitPageData({ status: 1 });
+      }
+    });
+  },
+
+  methods: {
+    getPageLists(params = {}) {
+      const loadingInstance = loading('加载中...');
+      ajax({
+        url: pageLists,
+        method: 'GET',
+        params: {
+          ...params,
+          type: 'page'
+        }
+      })
+        .then((res) => {
+          loadingInstance.close();
+          if (res.rCode === 0) {
+            this.paginations.total = res.results.pageCount;
+            this.paginations.currentPage = res.results.pageNum;
+            this.paginations.pageSize = res.results.pageSize;
+            const records = res.results.records || [];
+            this.pagesData = records.map((item) => {
+              const {
+                id,
+                code,
+                name,
+                title,
+                type,
+                description,
+                componentConfig,
+                layoutConfig,
+                status,
+                advancedConfig,
+                category,
+                versionType,
+                versionNo,
+                scopeType,
+                scopeValue,
+                content
+              } = item;
+              return {
+                id,
+                code,
+                name,
+                title,
+                type,
+                description,
+                componentConfig,
+                layoutConfig,
+                status,
+                advancedConfig,
+                category,
+                versionType,
+                versionNo,
+                scopeType,
+                scopeValue,
+                ...JSON.parse(content)
+              };
+            });
+          } else {
+            Message.error(res.msg || '获取页面列表失败');
+          }
+        })
+        .catch(() => {
+          loadingInstance.close();
+        });
+    },
+    /**
+     * 提取页面数据（分离元信息与内容）
+     * @returns {Object} 包含 meta（元信息）和 content（内容）的对象
+     */
+    extractPageData() {
+      const {
+        id,
+        code,
+        name,
+        title,
+        type,
+        description,
+        componentConfig,
+        layoutConfig,
+        status,
+        advancedConfig,
+        category,
+        versionType,
+        versionNo,
+        scopeType,
+        scopeValue,
+        ...content
+      } = this.page;
+
+      const meta = {
+        id,
+        code,
+        name,
+        title,
+        type,
+        description,
+        componentConfig,
+        layoutConfig,
+        advancedConfig,
+        category,
+        versionType,
+        versionNo,
+        scopeType,
+        scopeValue
+      };
+
+      return { meta, content };
+    },
+
+    /**
+     * 根据页面状态提交保存或更新
+     * @param {Object} extraData - 额外的合并数据（如表单数据）
+     */
+    submitPageData(extraData = {}) {
+      const { meta, content } = this.extractPageData();
+      const data = {
+        ...meta,
+        content: JSON.stringify(content),
+        ...extraData
+      };
+
+      // 根据是否有 id 判断是更新还是新建
+      if (meta.status !== undefined) {
+        this.updatePage(data);
+      } else {
+        delete data.id;
+        this.savePage(data);
+      }
+    },
+    /**
+     * 添加页面
+     * @param {Object} page - 页面对象
+     */
+    addPage(page) {
+      this.pagesData.unshift(page);
+      this.$emit('page-add', page);
+    },
+    savePage(page) {
+      const loadingInstance = loading('保存中...');
+      ajax({
+        url: pageSave,
+        method: 'POST',
+        format: false,
+        data: page
+      })
+        .then((res) => {
+          loadingInstance.close();
+          if (res.code === 200) {
+            Message.success('保存成功');
+            this.$emit('page-save', page);
+            this.visible = false;
+          } else {
+            Message.error(res.msg || '保存失败');
+          }
+        })
+        .catch(() => {
+          loadingInstance.close();
+        });
+    },
+    updatePage(page) {
+      const loadingInstance = loading('保存中...');
+      ajax({
+        url: pageUpdate,
+        method: 'POST',
+        format: false,
+        data: page
+      })
+        .then((res) => {
+          loadingInstance.close();
+          if (res.code === 200) {
+            Message.success('更新成功');
+            this.$emit('page-update', page);
+            this.visible = false;
+          } else {
+            Message.error(res.msg || '更新失败');
+          }
+        })
+        .catch(() => {
+          loadingInstance.close();
+        });
+    },
+    /**
+     * 提交表单（发布页面时完善信息）
+     */
+    submitForm() {
+      this.$refs.formRef.validate((valid) => {
+        if (valid) {
+          this.submitPageData(this.form);
+        }
+      });
+    },
+    removePage(index) {
+      const page = this.pagesData[index];
+      const loadingInstance = loading('删除中...');
+      ajax({
+        url: pageDelete,
+        method: 'POST',
+        format: false,
+        data: {
+          id: page.id
+        }
+      })
+        .then((res) => {
+          loadingInstance.close();
+          if (res.code === 200) {
+            Message.success('删除成功');
+            this.pagesData.splice(index, 1);
+            this.$emit('page-delete', page);
+            if (this.remote) {
+              this.getPagesList();
+            }
+          } else {
+            Message.error(res.msg || '删除失败');
+          }
+        })
+        .catch(() => {
+          loadingInstance.close();
+        });
+    },
+    /**
+     * 更新当前页面对象
+     * @param {Object} page - 页面对象
+     */
+    setCurrentPage(page) {
+      this.$set(this, 'page', { ...page });
+      this.$emit('update:page-update', { ...page });
+    },
+    /**
+     * 在 page 树中递归查找指定组件
+     * @param {Object} page - 页面对象
+     * @param {String} id - 组件 ID
+     * @returns {Object|null} 找到的组件对象
+     */
+    findComponent(page, id) {
+      if (!page || !page.children) return null;
+      for (const child of page.children) {
+        if (child.id === id) return child;
+        if (child.children && child.children.length) {
+          const found = this.findComponent(child, id);
+          if (found) return found;
+        }
+      }
+      return null;
+    }
+  },
+  destroyed() {
+    // 移除所有事件监听器，防止内存泄漏
+    bus.$off('updatePage');
+    bus.$off('updateComponent');
+    bus.$off('updateChildren');
+    bus.$off('open');
+    bus.$off('save');
+    bus.$off('publish');
+  }
+};
+</script>

package/packages/lowcode/src/modules.vue

@@ -0,0 +1,93 @@
+<template>
+  <es-tabs class="es-lowcode__modules" v-model="active">
+    <es-tab-pane
+      :label="items.label"
+      :name="String(index)"
+      lazy
+      v-for="(items, index) in contents"
+      :key="items.name"
+    >
+      <es-collapse
+        v-model="actives"
+        v-show="items.children.length"
+        v-if="items.collapse"
+      >
+        <es-collapse-item
+          :title="item.label"
+          class="es-lowcode__modules--content"
+          v-for="item in items.children"
+          :name="item.name"
+          :key="item.name"
+        >
+          <div
+            class="es-lowcode__modules--item"
+            v-for="ele in item.children"
+            :key="ele.name"
+            draggable="true"
+            @dragstart="handleDragStart($event, ele)"
+          >
+            <span class="es-lowcode__modules--item-dom">{{ ele.name }}</span>
+            <span class="es-lowcode__modules--item-desc">{{
+              ele.description
+            }}</span>
+          </div>
+        </es-collapse-item>
+      </es-collapse>
+      <div v-else class="es-lowcode__modules--contents">
+        <div
+          class="es-lowcode__modules--item"
+          v-for="ele in items.children"
+          :key="ele.name"
+          draggable="true"
+          @dragstart="handleDragStart($event, ele)"
+        >
+          <span class="es-lowcode__modules--item-dom">{{ ele.name }}</span>
+          <span class="es-lowcode__modules--item-desc">{{
+            ele.description
+          }}</span>
+        </div>
+      </div>
+    </es-tab-pane>
+  </es-tabs>
+</template>
+<script>
+export default {
+  name: 'Modules',
+  props: {
+    contents: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      active: '0'
+    };
+  },
+  computed: {
+    actives() {
+      const content = this.contents[Number(this.active)];
+      return (
+        (content &&
+          content.children &&
+          content.children.map((item) => item.name)) ||
+        []
+      );
+    }
+  },
+  methods: {
+    /**
+     * 处理拖动开始事件
+     * @param event 拖动事件对象
+     * @param ele 被拖动的组件信息
+     */
+    handleDragStart(event, ele) {
+      if (event.dataTransfer) {
+        event.dataTransfer.setData('component', JSON.stringify(ele));
+      }
+    }
+  },
+  mounted() {
+  }
+};
+</script>

package/packages/lowcode/src/pages.vue

@@ -0,0 +1,91 @@
+<template>
+  <div class="es-lowcode__pages">
+    <es-scrollbar :class="{'is-page':paginations.total > paginations.pageSize}">
+      <div
+        v-for="(page, index) in pages"
+        :key="page.id"
+        @click="handleSelect(page)"
+        class="es-lowcode__pages--item"
+        :class="{ 'is-active': active === page.id }"
+      >
+        <span class="es-lowcode__pages--item-name">{{
+          page.name || page.id
+        }}</span>
+        <i
+          class="es-icon-shanchu es-lowcode__pages--item-delete"
+          @click.stop="handleDelete(index)"
+        ></i>
+      </div>
+    </es-scrollbar>
+    <es-pagination
+      layout="prev, pager, next"
+      :hide-on-single-page="true"
+      :background="false"
+      v-bind="paginations"
+    >
+    </es-pagination>
+  </div>
+</template>
+<script>
+import bus from 'eoss/src/utils/bus.js';
+export default {
+  name: 'Pages',
+  inject: ['lowcode'],
+  props: {
+    pages: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      active: ''
+    };
+  },
+  computed: {
+    paginations() {
+      return this.lowcode.paginations;
+    }
+  },
+  watch: {
+    pages: {
+      handler(newPages) {
+        this.active = (newPages[0] && newPages[0].id) || '';
+        // 延迟发送事件，确保父组件监听器已注册
+        this.active && this.$nextTick(() => this.handleSelect(newPages[0]));
+      },
+      immediate: true
+    }
+  },
+  mounted() {
+  },
+  methods: {
+    /**
+     * 处理页面选择事件
+     * @param page 页面对象
+     */
+    handleSelect(page) {
+      const pageList = localStorage.getItem('pageList');
+      if (pageList) {
+        this.$message.warning('请先保存当前页面');
+        return;
+      }
+      this.active = page.id;
+      bus.$emit('selectPage', page);
+    },
+    /**
+     * 处理页面删除事件
+     * @param index 页面索引
+     */
+    handleDelete(index) {
+      this.$confirm('确定删除该页面吗？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        bus.$emit('removePage', index);
+      });
+    }
+  }
+};
+</script>