eoss 0.1.0-alpha.20 → 0.1.0-alpha.22

package/packages/lowcode/src/lowcode.vue

@@ -0,0 +1,640 @@
+<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="name">
+          <es-input v-model="form.name" placeholder="请输入名称" />
+        </es-form-item>
+        <es-form-item label="描述" prop="description">
+          <es-input
+            type="textarea"
+            v-model="form.description"
+            placeholder="请输入描述"
+          />
+        </es-form-item>
+        <es-form-item label="类型" prop="type">
+          <es-radio-group v-model="form.type">
+            <es-radio label="page">页面</es-radio>
+            <es-radio label="component">组件</es-radio>
+          </es-radio-group>
+        </es-form-item>
+        <es-form-item label="公开" prop="scopeType">
+          <es-radio-group v-model="form.scopeType">
+            <es-radio :label="0">是</es-radio>
+            <es-radio :label="3">否</es-radio>
+          </es-radio-group>
+        </es-form-item>
+        <div class="es-lowcode__aside--form-btn">
+          <es-button type="primary" @click="submitForm">确定</es-button>
+        </div>
+      </es-form>
+    </es-dialog>
+    <es-dialog
+      :title="publishTitle"
+      width="600px"
+      height="360px"
+      :visible.sync="publishVisible"
+      :close-on-click-modal="false"
+    >
+      <es-form :model="publishForm" ref="publishForm" label-width="80px">
+        <es-form-item label="发布类型">
+          <es-radio-group v-model="scopeType" :disabled="readonly">
+            <es-radio label="菜单">菜单</es-radio>
+            <es-radio label="应用">应用</es-radio>
+          </es-radio-group>
+        </es-form-item>
+        <es-form-item
+          :label="`${scopeType}名称`"
+          prop="name"
+          :disabled="readonly"
+        >
+          <es-input
+            v-model="publishForm.name"
+            :placeholder="`请输入${scopeType}名称`"
+          />
+        </es-form-item>
+        <es-form-item
+          :label="`${scopeType}地址`"
+          prop="url"
+          :disabled="readonly"
+        >
+          <es-input
+            v-model="publishForm.url"
+            :placeholder="`请输入${scopeType}地址`"
+          >
+            <template slot="append"
+              ><es-button @click.stop="copyUrl">复制</es-button></template
+            >
+          </es-input>
+        </es-form-item>
+        <es-form-item :label="`父${scopeType}`" prop="parentId">
+          <es-select
+            v-model="publishForm.parentId"
+            label-key="name"
+            value-key="id"
+            tree
+            :disabled="readonly"
+            :data="parentData"
+            :placeholder="`请选择父${scopeType}`"
+          ></es-select>
+        </es-form-item>
+        <div class="es-lowcode__aside--form-btn" v-show="!readonly">
+          <es-button type="primary" @click="submitPublishForm">确定</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: {
+    // url模式
+    urlMode: {
+      type: String,
+      required: true
+    },
+    // 页面列表
+    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: '',
+        scopeType: 0
+      },
+      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' }
+        // ]
+      },
+      publishVisible: false,
+      publishTitle: '',
+      readonly: false,
+      scopeType: '菜单',
+      parentData: [],
+      publishForm: {
+        name: '',
+        code: '',
+        url: '',
+        parentId: ''
+      }
+    };
+  },
+
+  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('publish', (index) => {
+      const page = this.pagesData[index];
+      if (page.id.startsWith('page_')) {
+        Message.warning('请先选择要保存的页面');
+        return;
+      }
+      this.publishTitle = page.status === 1 ? '查看' : '发布';
+      const url = this.urlMode?this.urlMode.replace('{id}',page.id):'';
+      this.readonly = page.status === 1;
+      this.publishForm = { name: page.name, pid: page.pid||'', url: url};
+      this.parentData = this.pagesData.filter((item) => item.type === 'page');
+      this.scopeType = page.code ? '应用' : '菜单';
+      this.publishVisible = true;
+    });
+
+    /** 保存 */
+    bus.$on('save', (index) => {
+      let page = this.page;
+      if (index !== undefined) {
+        page = this.pagesData[index];
+      } else if (!this.page) {
+        Message.warning('请先选择要发布的页面');
+        return;
+      }
+      const {
+        name,
+        title,
+        code,
+        description,
+        scopeType = 0,
+        type = 'page'
+      } = page;
+      this.form = { name, title, code, description, scopeType, type };
+      this.visible = true;
+    });
+  },
+
+  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,
+        name,
+        type,
+        description,
+        componentConfig,
+        layoutConfig,
+        status,
+        advancedConfig,
+        category,
+        versionType,
+        versionNo,
+        scopeType,
+        scopeValue,
+        ...content
+      } = this.page;
+
+      const meta = {
+        id,
+        name,
+        type,
+        description,
+        componentConfig,
+        layoutConfig,
+        advancedConfig,
+        category,
+        versionType,
+        versionNo,
+        scopeType,
+        scopeValue
+      };
+
+      return { meta, content };
+    },
+
+    /**
+     * 根据页面状态提交保存或更新
+     * @param {Object} extraData - 额外的合并数据（如表单数据）
+     */
+    submitPageData() {
+      const { meta, content } = this.extractPageData();
+      const data = {
+        status: 0,
+        ...meta,
+        content: JSON.stringify(content)
+      };
+
+      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];
+      if (page.id.startsWith('page_')) {
+        Message.success('删除成功');
+        this.pagesData.splice(index, 1);
+        return;
+      }
+      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;
+    },
+    /**
+     * 复制 URL 到剪贴板
+     */
+    copyUrl() {
+      navigator.clipboard.writeText(this.publishForm.url);
+      Message.success('复制成功');
+    },
+    /**
+     * 提交发布表单
+     */
+    submitPublishForm() {
+      this.$refs.publishForm.validate((valid) => {
+        if (valid) {
+          Message.warning('接口暂未开通，请复制地址手动创建菜单或应用');
+          //this.submitPageData(this.publishForm);
+        }
+      });
+    },
+  },
+  destroyed() {
+    // 移除所有事件监听器，防止内存泄漏
+    bus.$off('updatePage');
+    bus.$off('updateComponent');
+    bus.$off('updateChildren');
+    bus.$off('open');
+    bus.$off('save');
+    bus.$off('publish');
+  }
+};
+</script>