eoss 0.1.0-alpha.21 → 0.1.0-alpha.23

package/packages/lowcode/src/lowcode.vue

@@ -20,22 +20,16 @@
       <Source :page="page" v-else />
     </es-dialog>
     <es-dialog
-      title="完善页面信息"
+      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"
@@ -43,11 +37,103 @@
             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>
+    <es-dialog
+      title="页面授权"
+      width="600px"
+      height="380px"
+      :visible.sync="selectorVisible"
+      :close-on-click-modal="false"
+    >
+      <div class="es-lowcode__authorize">
+        <es-selector
+          v-model="selectorData"
+          value-type="string"
+          method="post"
+          mix
+          max-height="auto"
+          title="授权对象"
+          :types="authorizeType"
+          :collapse-tags="5"
+        ></es-selector>
+        <div class="es-lowcode__authorize--btn">
+          <es-button size="medium" @click="handleCancel">取消</es-button>
+          <es-button size="medium" type="primary" @click="handleConfirm"
+            >确定</es-button
+          >
+        </div>
+      </div>
+    </es-dialog>
   </div>
 </template>
 
@@ -78,6 +164,16 @@ export default {
   components: { Toolbar, Aside, Canvas, Attribute },
 
   props: {
+    // url模式
+    urlMode: {
+      type: String,
+      required: true
+    },
+    // 授权类型
+    authorizeType: {
+      type: Array,
+      default: () => ['enterprise', 'person', 'department', 'role']
+    },
     // 页面列表
     pages: {
       type: Array,
@@ -97,7 +193,7 @@ export default {
     pagination: {
       type: Object,
       default: () => ({
-        total: 0,
+        total: 100,
         currentPage: 1,
         pageSize: 20
       })
@@ -134,7 +230,8 @@ export default {
         name: '',
         title: '',
         code: '',
-        description: ''
+        description: '',
+        scopeType: 0
       },
       rules: {
         name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
@@ -143,7 +240,21 @@ export default {
         //description: [
         //  { required: true, message: '请输入描述', trigger: 'blur' }
         // ]
-      }
+      },
+      publishVisible: false,
+      publishTitle: '',
+      readonly: false,
+      scopeType: '菜单',
+      parentData: [],
+      publishForm: {
+        name: '',
+        code: '',
+        url: '',
+        parentId: ''
+      },
+      selectorVisible: false,
+      selectorData: [],
+      selectorDatas: []
     };
   },
 
@@ -216,6 +327,12 @@ export default {
       this.removePage(index);
     });
 
+    /** 页面授权 **/
+    bus.$on('authorize', (page) => {
+      this.selectorVisible = true;
+      //this.selectorData = page.authorize;
+    });
+
     /** 组件/页面属性更新（来自 attribute 面板） */
     bus.$on('updateComponent', (updates) => {
       if (!this.page || !updates.id) return;
@@ -249,36 +366,47 @@ export default {
       this.open.type = type;
       this.open.title = type === 'json' ? 'JSON' : '源码';
     });
-    /** 保存 */
-    bus.$on('save', () => {
-      if (!this.page) {
+
+    /** 发布 */
+    bus.$on('publish', (page) => {
+      if (page.id.startsWith('page_')) {
         Message.warning('请先选择要保存的页面');
         return;
       }
-      if (this.save) {
-        this.save(this.page);
-        return;
-      }
-      this.submitPageData();
+      this.publishTitle = page.status === 1 ? '查看' : '发布';
+      const url = this.urlMode
+        ? this.urlMode.replace(
+            '{id}',
+            page.childrens && page.childrens.length > 0 ? '' : 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('publish', (genre) => {
-      if (!this.page) {
+
+    /** 保存 */
+    bus.$on('save', (newPage) => {
+      let page = this.page;
+      if (newPage.id !== page.id) {
+        page = newPage;
+      } else 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 });
-      }
+      const {
+        pid,
+        name,
+        title,
+        code,
+        description,
+        scopeType = 0,
+        type = 'page'
+      } = page;
+      this.form = { pid, name, title, code, description, scopeType, type };
+      this.visible = true;
     });
   },
 
@@ -353,9 +481,7 @@ export default {
     extractPageData() {
       const {
         id,
-        code,
         name,
-        title,
         type,
         description,
         componentConfig,
@@ -372,9 +498,7 @@ export default {
 
       const meta = {
         id,
-        code,
         name,
-        title,
         type,
         description,
         componentConfig,
@@ -394,15 +518,14 @@ export default {
      * 根据页面状态提交保存或更新
      * @param {Object} extraData - 额外的合并数据（如表单数据）
      */
-    submitPageData(extraData = {}) {
+    submitPageData() {
       const { meta, content } = this.extractPageData();
       const data = {
+        status: 0,
         ...meta,
-        content: JSON.stringify(content),
-        ...extraData
+        content: JSON.stringify(content)
       };
 
-      // 根据是否有 id 判断是更新还是新建
       if (meta.status !== undefined) {
         this.updatePage(data);
       } else {
@@ -474,6 +597,11 @@ export default {
     },
     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,
@@ -524,6 +652,32 @@ export default {
         }
       }
       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);
+        }
+      });
+    },
+    handleConfirm() {
+      console.log('handleConfirm', this.selectorData);
+      this.selectorVisible = false;
+    },
+    handleCancel() {
+      this.selectorVisible = false;
+      this.selectorData = JSON.parse(JSON.stringify(this.selectorDatas));
     }
   },
   destroyed() {

package/packages/lowcode/src/pages.vue

@@ -1,22 +1,95 @@
 <template>
   <div class="es-lowcode__pages">
-    <es-scrollbar :class="{'is-page':paginations.total > paginations.pageSize}">
+    <div
+      class="es-lowcode__pages--container"
+      :class="{ 'is-page': paginations.total > paginations.pageSize }"
+    >
+      <es-tree
+        height="100%"
+        highlight-current
+        :default-expanded-keys="expandeds"
+        :current-node-key="active"
+        :data="newPages"
+        :default-active="active"
+        :props="defaultProps"
+        @current-change="handleSelect"
+      >
+        <div class="es-lowcode__pages--item" slot-scope="{ node, data }">
+          <div class="es-lowcode__pages--item-label">{{ node.label }}</div>
+          <es-dropdown @command="(command) => handleCommand(command, data)">
+            <i class="es-icon-gengduo"></i>
+            <es-dropdown-menu slot="dropdown">
+              <es-dropdown-item command="add" v-if="!data.pid">
+                新增
+              </es-dropdown-item>
+              <es-dropdown-item
+                command="authorize"
+                v-if="!data.childrens || !data.childrens.length"
+              >
+                授权
+              </es-dropdown-item>
+              <es-dropdown-item command="delete"> 删除 </es-dropdown-item>
+              <es-dropdown-item command="edit">编辑</es-dropdown-item>
+              <es-dropdown-item command="publish" v-if="!data.pid">{{
+                data.status === 1 ? '查看' : '发布'
+              }}</es-dropdown-item>
+            </es-dropdown-menu>
+          </es-dropdown>
+        </div>
+      </es-tree>
+    </div>
+    <!-- <es-scrollbar
+      :class="{ 'is-page': paginations.total > paginations.pageSize }"
+    >
       <div
-        v-for="(page, index) in pages"
+        v-for="page in newPages"
         :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 class="es-lowcode__pages--item-content">
+          <span class="es-lowcode__pages--item-name">{{
+            page.name || page.id
+          }}</span>
+          <es-dropdown @command="(command) => handleCommand(command, page)">
+            <i class="es-icon-gengduo"></i>
+            <es-dropdown-menu slot="dropdown">
+              <es-dropdown-item command="add"> 新增 </es-dropdown-item>
+              <es-dropdown-item command="delete"> 删除 </es-dropdown-item>
+              <es-dropdown-item command="edit">编辑</es-dropdown-item>
+              <es-dropdown-item command="publish">{{
+                page.status === 1 ? '查看' : '发布'
+              }}</es-dropdown-item>
+            </es-dropdown-menu>
+          </es-dropdown>
+        </div>
+        <template v-if="page.children && page.children.length">
+          <div
+            v-for="child in page.children"
+            :key="child.id"
+            @click="handleSelect(child)"
+            class="es-lowcode__pages--item-content"
+            :class="{ 'is-active': active === child.id }"
+          >
+            <span class="es-lowcode__pages--item-name">{{
+              child.name || child.id
+            }}</span>
+            <es-dropdown @command="(command) => handleCommand(command, page)">
+              <i class="es-icon-gengduo"></i>
+              <es-dropdown-menu slot="dropdown">
+                <es-dropdown-item command="add"> 新增 </es-dropdown-item>
+                <es-dropdown-item command="delete"> 删除 </es-dropdown-item>
+                <es-dropdown-item command="edit">编辑</es-dropdown-item>
+                <es-dropdown-item command="publish">{{
+                  page.status === 1 ? '查看' : '发布'
+                }}</es-dropdown-item>
+              </es-dropdown-menu>
+            </es-dropdown>
+          </div>
+        </template>
       </div>
-    </es-scrollbar>
+    </es-scrollbar> -->
     <es-pagination
       layout="prev, pager, next"
       :hide-on-single-page="true"
@@ -27,10 +100,19 @@
   </div>
 </template>
 <script>
+import EsTree from 'eoss/packages/tree';
+import EsMenuItem from 'eoss/packages/menu-item';
+import EsSubmenu from 'eoss/packages/submenu';
 import bus from 'eoss/src/utils/bus.js';
+import { active } from 'sortablejs';
 export default {
   name: 'Pages',
   inject: ['lowcode'],
+  components: {
+    EsTree,
+    EsMenuItem,
+    EsSubmenu
+  },
   props: {
     pages: {
       type: Array,
@@ -39,52 +121,118 @@ export default {
   },
   data() {
     return {
-      active: ''
+      newPages: [],
+      expandeds: [],
+      active: '',
+      defaultProps: {
+        children: 'childrens',
+        label: 'name'
+      }
     };
   },
   computed: {
+    height() {
+      return this.paginations.total > this.paginations.pageSize
+        ? 'calc(100% - 48px)'
+        : '100%';
+    },
     paginations() {
       return this.lowcode.paginations;
     }
   },
   watch: {
     pages: {
-      handler(newPages) {
-        this.active = (newPages[0] && newPages[0].id) || '';
+      handler(pages) {
+        // 深拷贝，避免直接修改 props
+        const newPages = pages
+          .filter((page) => !page.pid)
+          .map((page) => ({ ...page }));
+        const childrens = pages.filter((page) => page.pid);
+        newPages.forEach((page) => {
+          const children = childrens.filter((child) => child.pid === page.id);
+          if (children.length) {
+            page.childrens = children;
+          }
+        });
+        const first = newPages[0];
+        const firstChild = first && first.childrens && first.childrens[0];
+        if (firstChild) {
+          this.expandeds = [first.id];
+        }
+        this.active = (firstChild || first || {}).id || '';
+        this.newPages = newPages;
         // 延迟发送事件，确保父组件监听器已注册
-        this.active && this.$nextTick(() => this.handleSelect(newPages[0]));
+        this.active &&
+          this.$nextTick(() => this.handleSelect(firstChild || first));
       },
       immediate: true
     }
   },
-  mounted() {
-  },
   methods: {
     /**
      * 处理页面选择事件
      * @param page 页面对象
      */
-    handleSelect(page) {
-      const pageList = localStorage.getItem('pageList');
-      if (pageList) {
+    handleSelect(data) {
+      if (data.childrens && data.childrens.length) {
+        return;
+      }
+      console.log('handleSelect', data);
+      if (localStorage.getItem('pageList')) {
         this.$message.warning('请先保存当前页面');
         return;
       }
-      this.active = page.id;
-      bus.$emit('selectPage', page);
+      bus.$emit('selectPage', data);
+    },
+    /**
+     * 处理下拉菜单命令事件
+     * @param {string} command 命令
+     * @param {Object} page 页面对象
+     */
+    handleCommand(command, page) {
+      this[command](page);
+    },
+    /**
+     * 处理页面新增事件
+     */
+    add(page) {
+      this.$emit('add', page);
+    },
+    /**
+     * 处理页面编辑事件
+     * @param {Object} page 页面对象
+     */
+    edit(page) {
+      bus.$emit('save', page);
+    },
+    /**
+     * 处理页面发布事件
+     * @param {Object} page 页面对象
+     */
+    publish(page) {
+      bus.$emit('publish', page);
+    },
+    /**
+     * 处理页面授权事件
+     * @param {Object} page 页面对象
+     */
+    authorize(page) {
+      bus.$emit('authorize', page);
     },
     /**
      * 处理页面删除事件
-     * @param index 页面索引
+     * @param {Object} page 页面对象
      */
-    handleDelete(index) {
+    delete() {
       this.$confirm('确定删除该页面吗？', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
-      }).then(() => {
-        bus.$emit('removePage', index);
-      });
+      })
+        .then(() => {
+          bus.$emit('removePage', page);
+        })
+        .catch(() => {});
     }
   }
 };

package/packages/lowcode/src/toolbar.vue

@@ -68,9 +68,6 @@
         </es-button>
       </es-button-group>
       <es-button-group separate>
-        <es-button type="primary" size="small" @click="handleSave">
-          保存
-        </es-button>
         <es-button
           type="primary"
           class="es-margin-left-none"
@@ -79,19 +76,10 @@
         >
           预览
         </es-button>
-      </es-button-group>
-      <es-dropdown type="primary" @command="handlePublish" size="small">
-        <es-button type="primary" size="small">
-          发布<i class="es-icon-xia"></i>
+        <es-button type="primary" size="small" @click="handleSave">
+          保存
         </es-button>
-
-        <template #dropdown>
-          <es-dropdown-menu>
-            <es-dropdown-item command="page">发布页面</es-dropdown-item>
-            <es-dropdown-item command="component">发布组件</es-dropdown-item>
-          </es-dropdown-menu>
-        </template>
-      </es-dropdown>
+      </es-button-group>
     </div>
   </div>
 </template>
@@ -154,9 +142,6 @@ export default {
     handlePreview() {
       bus.$emit('preview');
     },
-    handlePublish(command) {
-      bus.$emit('publish', command);
-    }
   }
 };
 </script>