@epxing/business 0.0.0-stage → 5.3.0-beta.2

package/src/components/EntityTreeManage.vue

@@ -0,0 +1,988 @@
+<template>
+  <div class="container" @click="showPopover=null">
+    <div class="tree-list">
+      <div class="tree-header">功能模块</div>
+      <div class="opera">
+        <!-- 按钮组 -->
+        <div class="button-group">
+           <el-button class="tree-button" type="primary" v-for="operate in operates" :key="operate.text" size="small" @click="$handler(operate)">{{operate.text}}</el-button>
+          <!-- <el-button type="primary" size="small" @click="add">新增</el-button>
+          <el-button type="primary" size="small"  @click="editEntity">编辑</el-button>
+          <el-button type="primary" size="small"  @click="removeEntity">删除</el-button> -->
+        </div>
+        <!-- 查询区 -->
+        <div class="search-container">
+          <el-input
+            placeholder="输入关键字进行过滤"
+            v-model="filterText">
+          </el-input>
+        </div>
+      </div>
+        <!-- :auto-expand-parent="false" -->
+      <el-tree class="tree" ref="tree"
+        :data="treeModule"
+        :props="{label: 'title', children: 'children'}"
+        :filter-node-method="filterNode"
+        :expand-on-click-node="false"
+        :current-node-key="clickItem.id"
+        node-key="id"
+        :default-expand-all="$configs.expand==='all'"
+        :accordion="$configs.expandMore===false"
+        :default-expanded-keys="expandKeys"
+        :auto-expand-parent="false"
+        :check-on-click-node="true"
+        :highlight-current="true"
+        :draggable="$configs.draggable===true"
+        @node-drop="drop"
+        @node-click="viewEntity"
+        @node-contextmenu="showContextmenu"
+        @node-expand="expandNode"
+        @node-collapse="collapseNode"
+      >
+         <template v-slot="{ node, data }"><span class="tree-node__container"  :class="{node: true, active: clickItem && clickItem.id ===data.id }">
+          <el-tooltip class="item" effect="dark" :content="node.label"   placement="top" :show-after="1000">
+            <span class="tree-node"  >
+              <!-- 图标 -->
+              <i :class="data.iconCls==='dir'? 'el-icon-folder' : 'el-icon-document'"></i>
+              <!-- 文字 -->
+              <span>{{ node.label }}</span>
+            </span>
+          </el-tooltip>
+          <el-dropdown>
+            <span class="column-operates">
+              <i class="el-icon-more"></i>
+            </span>
+            <template v-slot:dropdown><el-dropdown-menu>
+              <el-dropdown-item v-for="operate in getShowColumnOperates(data, node)" :key="operate.text" @click="$handler(operate, data)">{{operate.text}}</el-dropdown-item>
+            </el-dropdown-menu></template>
+          </el-dropdown>
+         </span></template>
+      </el-tree>
+    </div>
+    <!-- 手机显示切换按钮 -->
+    <!-- 右边页面内容 -->
+    <div class="content">
+      <epx-router-view :inline="true" @back="getTreeModule" :router-change="()=>null"></epx-router-view>
+      <!-- <template v-for="(item, index) in routers" :key="index">
+        <epx-page @changeRouter="changeRouter" @back="back" @reloadPage="reloadPage" v-if="!$_.isEqual(item, route) || showPage" v-show="index===showIndex" :flag="route.flag" :metaId="route.metaId" :inline="true" component="add" :current-query="item"></epx-page>
+      </template> -->
+    </div>
+  </div>
+</template>
+
+<script>
+import { SET_ROUTER_QUERY } from '@epxing/core/src/store/actions'
+import component from '@epxing/core/src/mixins/component'
+
+export default {
+  name: 'epx-entity-tree-manage',
+  mixins: [component],
+  detailPageFlag: 'v_add',
+  addPageFlag: 'v_add',
+  order_field: [],
+  order_mode: [],
+  queryParams: {},
+  expandMore: true,
+  expand: 'none',
+  flex: 1,
+  draggable: true,
+  data () {
+    return {
+      treeModule: [],
+      filterText: '',
+      pageFlag: '',
+      showPage: true,
+      routers: [],
+      clickItem: {},
+      showPopover: '',
+      defaultClick: [],
+      expandKeys: []
+    }
+  },
+  props: ['isShow'],
+  computed: {
+    flag () {
+      const { firstPageFlag = '' } = this.configs
+      return this.pageFlag || firstPageFlag
+    },
+    selfAttriName () {
+      const { selfAttriName = this.$metaKey } = this.configs
+      return selfAttriName
+    },
+    orderParams () {
+      const { orderParams = {} } = this.configs
+      return orderParams
+    },
+    defaultValueField () {
+      const field = this.getUpField()
+      const { upField = [] } = this.$configs
+      return upField[0] || field
+    },
+    firstPageMetaId () {
+      const { firstPageMetaId = '' } = this.configs
+      return firstPageMetaId
+    },
+    route () {
+      const routers = [...this.routers]
+      return routers.pop()
+    },
+    showIndex () {
+      let showIndex = -1
+      const routers = [...this.routers]
+      routers.forEach((item, index) => {
+        if (this.$_.isEqual(item, this.route)) {
+          showIndex = index
+        }
+      })
+      return showIndex
+    },
+    operates () {
+      const { operates } = this.$configs
+      return operates
+    },
+    columnOperates () {
+      const { columnOperates } = this.$configs
+      return columnOperates.filter(item => this.$checkOperateRight(item))
+    },
+    getShowColumnOperates (row) {
+      return (row, node) => {
+        const columnOperates = this.columnOperates.filter(item => {
+          if (item.handler === 'operateTree') {
+            if (node.level === 1 && item.moveType === 'upper') {
+              return false
+            }
+            const parentNodes = node.parent ? node.parent.childNodes : this.treeModule
+            if (item.moveType === 'pre' || item.moveType === 'first') {
+              const index = parentNodes.findIndex(item => row.id === (item.data.id || item.id))
+              return index !== 0
+            }
+            if (item.moveType === 'next' || item.moveType === 'last') {
+              const index = parentNodes.findIndex(item => row.id === (item.data.id || item.id))
+              return index !== parentNodes.length - 1
+            }
+          }
+          return !item.showCondition || item.showCondition.length === 0 || this.$util.runExpByScope.call(this, item.showCondition, row)
+        })
+        return columnOperates
+      }
+    },
+    scopeParams () {
+      const { scopeParams = [] } = this.$configs
+      return this.$formatScope(scopeParams)
+    }
+  },
+  watch: {
+    filterText (val) {
+      this.$refs.tree.filter(val)
+    }
+  },
+  provide () {
+    return {
+      $changeRouter: this.changeRouter,
+      $reloadPage: this.reloadPage,
+      $backPage: this.back
+    }
+  },
+  methods: {
+    initComponent () {
+      this.getDefaultOperates()
+      this.getTreeModule(true)
+    },
+    getDefaultOperates () {
+      const { operates, columnOperates } = this.$configs
+      const defaultOperates = [
+        {
+          text: '新增',
+          handler: 'addEntity',
+          ui: 'primary',
+          component: 'entity-add-page'
+        },
+        {
+          text: '编辑',
+          handler: 'editEntity',
+          ui: 'primary',
+          component: 'entity-add-page'
+        },
+        {
+          text: '删除',
+          ui: 'primary',
+          handler: 'commonAction',
+          action: 'removeMulti',
+          num: 'n',
+          confirmMsg: this.$t('Confirm the deletion') + '？',
+          successMsg: '删除成功',
+          params: {
+            ids: '#[id]'
+          }
+        }
+      ]
+
+      const defaultColumnOperates = [
+        {
+          text: '新增节点',
+          handler: 'addEntity',
+          ui: 'primary',
+          component: 'entity-add-page'
+        },
+        {
+          text: '新增同级节点',
+          handler: 'addSiblingEntity',
+          ui: 'primary',
+          component: 'entity-add-page'
+        },
+        {
+          text: '编辑',
+          handler: 'editEntity',
+          ui: 'primary',
+          component: 'entity-add-page'
+        },
+        {
+          text: '删除',
+          ui: 'primary',
+          handler: 'commonAction',
+          action: 'removeMulti',
+          num: 'n',
+          confirmMsg: this.$t('Confirm the deletion') + '？',
+          successMsg: '删除成功',
+          params: {
+            ids: '#[id]'
+          }
+        },
+        {
+          text: '上移',
+          handler: 'operateTree',
+          moveType: 'pre'
+        },
+        {
+          text: '下移',
+          handler: 'operateTree',
+          moveType: 'next'
+        },
+        {
+          text: '移到最前',
+          handler: 'operateTree',
+          moveType: 'first'
+        },
+        {
+          text: '移到最后',
+          handler: 'operateTree',
+          moveType: 'last'
+        },
+        {
+          text: '移到上一层',
+          handler: 'operateTree',
+          moveType: 'upper'
+        }
+      ]
+      if (!operates) {
+        this.configs.operates = defaultOperates
+      }
+      if (!columnOperates) {
+        this.configs.columnOperates = defaultColumnOperates
+      }
+    },
+    $refesh () {
+      this.getTreeModule()
+    },
+    reloadData () {
+      this.getTreeModule()
+    },
+    getExpandKeys (arr, level, current = 1) {
+      const keys = []
+      arr.forEach(item => {
+        if (!item.leaf) {
+          keys.push(item.id)
+        }
+        if (item.children && current < level) {
+          const childrenKeys = this.getExpandKeys(item.children, level, current + 1)
+          keys.push(...childrenKeys)
+        }
+      })
+      return keys
+    },
+    getTreeModule (first) {
+      // eslint-disable-next-line camelcase
+      let { action = 'getTree', queryParams = {}, showAll = false, expand, orderFields, order_field: orderField = [], order_mode: orderMode = [], groupField } = this.$configs
+      if (orderFields && orderFields.length > 0) {
+        orderField = orderFields.map(item => item.attriName || item)
+        orderMode = orderFields.map(item => item.sort || 'asc')
+      }
+      const params = {
+        action,
+        entityId: this.$metaId,
+        up_field: this.defaultValueField,
+        ...this.orderParams,
+        ...this.$formatParams(queryParams),
+        scopeParams: JSON.stringify(this.scopeParams),
+        node: 'root',
+        order_field: orderField.join(','),
+        order_mode: orderMode.join(',')
+      }
+      if (groupField) {
+        params.groupField = groupField
+      }
+      this.$http.$post(params)
+        .then(data => {
+          if (showAll) {
+            this.treeModule = [{ id: 'all', title: '全部', children: [...data] }]
+          } else {
+            this.treeModule = [...data]
+          }
+          let defaultSelectNode = null
+          if (this.treeModule.length > 0) {
+            const oldConfigValue = this.$configs.loadDefaultSelected === false ? 'none' : 'first'
+            const defaultSelected = this.$configs.defaultSelected || oldConfigValue
+
+            if (defaultSelected !== 'none') {
+              if (defaultSelected === 'first') {
+                this.viewEntity(this.treeModule[0])
+              } else {
+                defaultSelectNode = this.deepList(defaultSelected, this.treeModule) || {}
+                this.viewEntity(defaultSelectNode)
+              }
+            }
+          }
+          if (first) {
+            if (defaultSelectNode && defaultSelectNode.parent) {
+              this.expandKeys = [defaultSelectNode.parent]
+            } else if (expand === 'first') {
+              this.expandKeys = [this.treeModule[0].id]
+            } else if (expand === 'level1') {
+              this.expandKeys = this.getExpandKeys(this.treeModule, '1')
+            } else if (expand === 'level2') {
+              this.expandKeys = this.getExpandKeys(this.treeModule, '2')
+            } else if (expand === 'all') {
+              this.expandKeys = this.getExpandKeys(this.treeModule)
+            }
+          }
+        })
+    },
+    getUpField () {
+      const { attributes = {}, id } = this.$meta || {}
+      const field = Object.values(attributes).find(item => item.relatedEntity === id)
+      if (field) return field.name
+      return 'UP_ID'
+    },
+    filterNode (value, data) {
+      if (!value) return true
+      return (data.text || data.title).indexOf(value) !== -1
+    },
+    getTreeModuleNode (modules, parentId) {
+      let node = null
+      for (let i = 0; i < modules.length; i++) {
+        const module = modules[i]
+        if ((module.id || module.ID) === parentId) {
+          node = module
+          return node
+        } else if (module.children && module.children.length > 0) {
+          node = this.getTreeModuleNode(module.children, parentId)
+        }
+        if (node) {
+          return node
+        }
+      }
+    },
+    drop (node, current, type, event) {
+      // 获取当前节点结束后的父节点
+      const { orderFields } = this.$configs
+      let parentId = ''
+      let modules = []
+      if (type === 'after' || type === 'before') {
+        parentId = current.data.parent || 'root'
+      } else if (type === 'inner') {
+        parentId = current.data.id || current.data.ID
+      }
+
+      if (parentId === 'root') {
+        modules = [...this.treeModule]
+      } else {
+        const parentNode = this.getTreeModuleNode(this.treeModule, parentId) || { children: [...this.treeModule] }
+        modules = [...parentNode.children]
+      }
+
+      // 获取其父节点的所有子节点
+      const str = modules.reduce((str, item, index) => (str += (item.id || item.ID) + ':' + index + ','), '')
+      // 递归获取id为parentId的节点
+      const params = {
+        action: 'moveTree',
+        entityId: this.$metaId,
+        id: node.data.id || node.data.ID,
+        selfAttriName: this.selfAttriName,
+        newParentId: parentId,
+        orderString: str
+      }
+      if (orderFields && orderFields[0]) {
+        params.orderAtrriName = orderFields[0].attriName || orderFields[0]
+      }
+      this.$http.$post(params)
+        .then(data => {
+          this.showPage = false
+          this.getTreeModule()
+          this.$nextTick(() => {
+            this.showPage = true
+          })
+        })
+        .catch(err => {
+          this.$message.error(err.message)
+        })
+    },
+    commonAction ({ action, rule, metaId = (this.$metaId), num = 0, confirmMsg = null, mask = false, params = {}, successMsg = '处理成功', failMsg = '处理失败', afterTrigger, afterTriggerPage, afterTriggerPageOpenMode, afterTriggerParams }, row) {
+      let selections = []
+      // 检测是否选中元素
+      if (row) {
+        selections = [{ ...row }]
+      } else {
+        if (this.clickItem) selections = [{ ...this.clickItem }]
+      }
+      if (num !== 0) {
+        if (selections.length === 0) {
+          this.$message.error('请选择一个记录')
+          return
+        } else if (selections.length > 1) {
+          if (num === 1) {
+            this.$message.error('只能选择一个记录')
+            return
+          }
+        }
+      }
+      if (!params.id) {
+        params.id = '#[id]'
+      }
+      // 格式化params
+      const formatParams = this.$formatParams(params, selections)
+      // 提交方法
+      const submitFn = () => {
+        if (this.httpLoading[`common-${action}`]) {
+          return this.$message.error('正在提交，请稍后...')
+        }
+        this.httpLoading[`common-${action}`] = true
+        let loading = null
+        if (mask) {
+          loading = this.$loading({
+            target: this.$el,
+            background: 'rgba(255, 255, 255, 0.5)',
+            text: '正在操作,请稍后...'
+          })
+        }
+        const timer = setTimeout(() => {
+          this.httpLoading[`common-${action}`] = false
+          clearTimeout(timer)
+        }, 2000)
+        this.$http[rule ? '$post' : '$request']({
+          action,
+          rule,
+          entityId: metaId,
+          ...formatParams
+        })
+          .then(() => {
+            // 如果存在下一个事件，执行下一个时间
+            // 执行完成进行提示
+            this.$message.success(successMsg)
+            if (afterTrigger) {
+              this[afterTrigger]({ pageId: afterTriggerPage, openMode: afterTriggerPageOpenMode, params: afterTriggerParams })
+            } else {
+              if (this.reloadData) this.reloadData()
+            }
+          })
+          .catch(err => {
+            this.$message.error(err.message || failMsg)
+          })
+          .finally(() => {
+            this.httpLoading[`common-${action}`] = false
+            if (loading) loading.close()
+          })
+      }
+      // 判断是否需要确认弹窗
+      if (confirmMsg) {
+        this.$confirm(confirmMsg, this.$t('hint'), {
+          confirmButtonText: this.$t('confirm'),
+          cancelButtonText: this.$t('cancel'),
+          type: 'warning'
+        }).then(() => {
+          submitFn()
+        })
+      } else {
+        submitFn()
+      }
+    },
+    // 右侧内容区的开页闸口：必须「$epxEmit + $emit」双发射。
+    // RouterView 是本组件模板里的子组件，它用 `this.$parent.$epxOn('createPage', ...)`
+    // 把 handler 注册在本实例的 __epxEvents 上（Vue3 已无实例 $on，见
+    // core/src/mixins/methods-to-prototype.js 的实例级轻量事件）；而 Vue3 的 $emit 只触发
+    // 父组件模板上的监听器、不读 __epxEvents ⇒ 只用 $emit 时 RouterView 永远收不到，
+    // 右侧整块空白且全程无报错。保留 $emit 是为了不影响模板上可能存在的 @createPage。
+    // 与 methods-to-prototype.js 里 broadcast 的 emitTo 同款双发射写法。
+    emitCreatePage (payload) {
+      this.$epxEmit('createPage', payload)
+      this.$emit('createPage', payload)
+    },
+    viewEntity (item) {
+      if (item.iconCls === 'dir') return
+      if (item.id === 'all') {
+        this.clickItem = {}
+        const { allDetailPageId } = this.$configs
+        this.emitCreatePage({
+          metaId: this.$metaId,
+          pageId: allDetailPageId,
+          component: 'entity-add-page',
+          pageType: 'DETAIL',
+          callback: () => {
+            this.getTreeModule()
+          }
+        })
+        return
+      }
+      this.clickItem = { id: item.ID, ...item }
+      const { detailPageFlag, detailPageId } = this.$configs
+      // this.load = false
+      this.pageFlag = detailPageFlag
+      this.emitCreatePage({
+        metaId: this.$metaId,
+        flag: detailPageFlag,
+        pageId: detailPageId,
+        component: 'entity-add-page',
+        pageType: 'DETAIL',
+        id: item.id,
+        callback: () => {
+          this.getTreeModule()
+        }
+      })
+      // this.$nextTick(() => {
+      //   this.load = true
+      // })
+      // this.defaultClick = [item.id]
+      // 添加参数
+      this.$store.commit(SET_ROUTER_QUERY, { id: item.id })
+    },
+    editEntity (operate, item) {
+      const { pageId, component = 'entity-add-page' } = operate || {}
+      const { id } = item || this.clickItem || {}
+      if (!id) {
+        this.$message.error('请选择一个记录')
+        return
+      }
+      const { detailPageFlag } = this.$configs
+      this.emitCreatePage({
+        metaId: this.$metaId,
+        flag: detailPageFlag,
+        component,
+        pageId,
+        pageType: 'EDIT',
+        id: id,
+        ...this.$formatParams(operate.params),
+        callback: () => {
+          this.getTreeModule()
+        }
+      })
+      this.defaultClick = [this.clickItem.parent]
+    },
+    expandNode (node) {
+      if (this.$configs.expandMore === false) {
+        let siblingNodes = []
+        if (node.parent) {
+          const parentNode = this.deepList(node.parent, this.treeModule)
+          siblingNodes = parentNode.children
+        } else {
+          siblingNodes = this.treeModule
+        }
+        this.expandKeys = this.expandKeys.filter(item => !siblingNodes.find(child => child.id === item))
+      }
+      this.expandKeys = [...new Set([...this.expandKeys, node.id])]
+    },
+    collapseNode (node) {
+      const index = this.expandKeys.findIndex(item => item === node.id)
+      if (index !== -1) {
+        this.expandKeys.splice(index, 1)
+      }
+    },
+    addEntity (operate = {}, select) {
+      this.showPopover = null
+      const { detailPageFlag } = this.$configs
+      const { pageId, component = 'entity-add-page' } = operate || {}
+      this.pageFlag = detailPageFlag
+      let id = this.clickItem.id
+      let text = this.clickItem.text
+      if (select && typeof select === 'object') {
+        id = select.id
+        text = select.text
+        this.defaultClick = [select.id]
+      }
+      const field = this.defaultValueField
+      const defaultValue = {}
+      defaultValue[field] = id
+      defaultValue[field + '#'] = text
+      this.emitCreatePage({
+        metaId: this.$metaId,
+        flag: detailPageFlag,
+        pageId,
+        component: component,
+        pageType: 'ADD',
+        defaultValue: defaultValue,
+        ...this.$formatParams(operate.params),
+        callback: () => {
+          this.getTreeModule()
+        }
+        // defaultValue: { UP_ID: id, 'UP_ID#': text }
+      })
+    },
+    getSubIds (idArr = [], data) {
+      data.forEach(item => {
+        idArr.push(item.id)
+        if (item.children) {
+          this.getSubIds(idArr, item.children)
+        }
+      })
+    },
+    editTheEntity (item) {
+      this.showPopover = null
+      this.clickItem = item
+      const { detailPageFlag } = this.configs
+      this.load = false
+      this.pageFlag = detailPageFlag
+      this.emitCreatePage({
+        metaId: this.$metaId,
+        flag: detailPageFlag,
+        pageType: 'EDIT',
+        component: 'add',
+        id: item.id
+      })
+      this.$nextTick(() => {
+        this.load = true
+      })
+      this.defaultClick = [item.parent]
+      // this.defaultClick.push(item.id)
+      // 添加参数
+      this.$store.commit(SET_ROUTER_QUERY, { id: item.id })
+    },
+    removeEntity (select) {
+      this.showPopover = null
+      let selectItem = this.clickItem
+      if (select && select.id) {
+        selectItem = select
+      }
+      this.defaultClick = []
+      if (!selectItem || !selectItem.id) {
+        this.$message.error('请选择一个记录')
+        return
+      }
+      const idArr = [selectItem.id]
+      this.getSubIds(idArr, selectItem.children)
+      // removeMulti
+      this.$confirm(this.$t('Confirm the deletion') + '？')
+        .then(() => {
+          this.$http.$request({
+            action: 'removeMulti',
+            entityId: this.$metaId,
+            ids: idArr.join(',')
+          })
+            .then(data => {
+              this.$message.success('删除成功')
+              this.getTreeModule()
+              if (select.parent) {
+                this.defaultClick.push(select.parent)
+              }
+            })
+        })
+    },
+    operateTree (operate, item) {
+      const { queryParams = {}, upField = [], orderFields = [] } = this.$configs
+      const params = {
+        action: 'operateTree',
+        entityId: this.$metaId,
+        mark: operate.moveType,
+        currentNode: item.id,
+        ...this.$formatParams(queryParams),
+        scopeParams: JSON.stringify(this.scopeParams)
+      }
+      if (upField && upField[0]) {
+        params.upField = upField[0]
+      }
+      if (orderFields && orderFields[0]) {
+        params.orderField = orderFields[0].attriName || orderFields[0]
+      }
+
+      this.$http.save(params)
+        .then(() => {
+          this.showPage = false
+          this.getTreeModule()
+          this.$nextTick(() => {
+            this.showPage = true
+          })
+        })
+        .catch(err => {
+          this.$message.error(err.message)
+        })
+    },
+    routerChange () {
+      this.getTreeModule()
+    },
+    addSiblingEntity (operate, data) {
+      this.clickItem = {}
+      if (data.parent) {
+        this.defaultClick = [data.id]
+        const obj = this.deepList(data.parent, this.treeModule) || {}
+        this.addEntity(operate, obj.iconCls !== 'dir' ? { id: data.parent, text: obj.text || '' } : {})
+      } else {
+        this.addEntity(operate)
+      }
+    },
+    deepList (id, arr) {
+      let main = null
+      try {
+        (function poll (arr, leval) {
+          for (let i = 0; i < arr.length; i++) {
+            if (arr[i].id === id) {
+              main = arr[i]
+              throw Error
+            } else if (arr[i].id !== id && arr[i].children && arr[i].children.length > 0) {
+              poll(arr[i].children, leval + 1)
+            }
+          }
+        })(arr, 0)
+      } catch (err) {}
+      return main
+    },
+    // deepList (parent, arr) {
+    //   for (let i = 0; i < arr.length; i++) {
+    //     if (arr[i].id === parent) {
+    //       return arr[i]
+    //     } else if (arr[i].id !== parent && arr[i].children && arr[i].children.length > 0) {
+    //       this.deepList(parent, arr[i].children)
+    //     }
+    //   }
+    // },
+    showContextmenu (event, data, node) {
+      this.showPopover = node.id
+    },
+    destoryPopover () {
+      this.showPopover = null
+    },
+    changeRouter (v) {
+      const { router } = v
+      this.routers.push(router)
+      if (router.moduleId || router.pageId) {
+        this.$emit('changeRouter', v)
+      }
+    },
+    back () {
+      if ((this.isShow)) {
+        if (this.routers.length <= 0) {
+          this.$emit('back')
+        }
+        this.routers.pop()
+      } else {
+        this.$emit('back')
+      }
+    },
+    reloadPage () {
+      this.showPage = false
+      this.$nextTick(() => {
+        this.showPage = true
+      })
+      this.getTreeModule()
+    }
+  },
+  created () {
+    const { firstPageFlag = '', pageMetaId = this.$metaId } = this.$configs
+    if (firstPageFlag) {
+      this.routers.push({
+        flag: firstPageFlag,
+        metaId: pageMetaId
+      })
+    }
+  },
+  mounted () {
+    window.addEventListener('click', this.destoryPopover)
+    // 注：这三个「不带 handler 的 off」是**挂载时**的既有行为，属既有缺陷、不在 Task 17 的内存范畴内，
+    // 本次不动。本次只处理销毁侧（见 beforeUnmount）。
+    this.$bus.off('reload')
+    this.$bus.off('push')
+    this.$bus.off('pop')
+    // T17 修复轮 1（评审 C1）：把三个 handler 存成实例引用，好在卸载时**按引用**精确摘掉自己这几个
+    // ⚠️ 这一段原来整体是坏的（Task 27 运行时实测 + 全仓静态查定义，两条独立证据）：
+    // `createPage` / `pushMenuRoute` / `popMenuRoute` **都只定义在 `@epxing/core/src/Container.vue`**，
+    // 而本组件是 `mixins: [component]`、**不 extends Container** ⇒ 三个全是 `undefined`。
+    //   · push：Task 17 前塞 undefined 进总线，下一次 emit 抛 `h is not a function`；
+    //     Task 17 删掉那行后变成静默 no-op；而**再下一行** `this.createPage(route)` 照样抛
+    //     `this.createPage is not a function`（Task 27 抓到的抛点）
+    //   · pop：`this.popMenuRoute()` 同样抛
+    // 即「在容器中打开 / 返回」这条路，只要本组件挂着就是坏的（`$bus` 是全局单例，
+    // 而 mounted 里那三个裸 off 会把别的监听全删掉，所以 push 一定落到这里）。
+    //
+    // 改用平台现行的全局方法：`$createPage`（methods-to-prototype.js:199）/
+    // `$backPage`（:373）。佐证：`MenuIndex.vue:191` 那行注释掉的 `$backPage: this.$popMenuRoute`
+    // 正说明 `$backPage` 就是 `popMenuRoute` 的现行替代。
+    // ⚠️ 已核无递归：这两个全局所在的文件**一处 `$bus` 都没有**，不会回头再 emit push/pop。
+    // 另：原来那句 `this.$bus.off('push')` 的用意是「首次开页后把监听让给 pushMenuRoute」，
+    // 而本组件根本没有 pushMenuRoute ⇒ 它只会让第 2 次及以后的 push 无人接管。一并去掉，
+    // 让每次 push 都走 `$createPage`（RouterView 自己有页面栈，叠层由它负责）。
+    this.busPushHandler = (route) => {
+      this.routers.push(route)
+      if (route.moduleId || route.pageId) {
+        this.$createPage(route)
+      }
+    }
+    this.busPopHandler = () => {
+      if ((this.isShow)) {
+        this.routers.pop()
+        if (this.routers.length <= 0) {
+          this.$backPage()
+        }
+      } else {
+        this.$backPage()
+      }
+    }
+    this.busReloadHandler = () => {
+      this.showPage = false
+      this.$nextTick(() => {
+        this.showPage = true
+      })
+    }
+    this.$bus.on('push', this.busPushHandler)
+    this.$bus.on('pop', this.busPopHandler)
+    this.$bus.on('reload', this.busReloadHandler)
+  },
+  beforeUnmount () {
+    // ⚠️ T17 修复轮 1（评审 C1）：原来是「不带 handler 的 off（删光该事件全部监听）+ 反手把 5 个
+    // 绑在**正在销毁的实例**上的 handler 重新钉回全局总线」= 让全应用单例的 $bus 强引用刚卸载的
+    // 整棵页面树（每关一次累加 5 个），是一条新增的保活链，且全程不抛错。
+    // 现在只按引用摘掉自己注册过的那几个，并且不再重新注册任何东西。
+    // ⚠️ T17 修复轮 2（定向复审 N1）：这里原来还有一行 `off('push', this.pushMenuRoute)`，
+    // 而 `pushMenuRoute` 在本组件里恒为 `undefined` ⇒ `off(e, undefined)` 走「删光该事件全部
+    // 监听」那条分支，与裸 off 等价，把刚补上的 identity 匹配又抵消掉。对应的注册已一并删除。
+    // ⚠️ N6：handler 已置 null 时 `off(e, null)` 同样退化成全量删，所以每条都先判非空。
+    if (this.busPushHandler) this.$bus.off('push', this.busPushHandler)
+    if (this.busPopHandler) this.$bus.off('pop', this.busPopHandler)
+    if (this.busReloadHandler) this.$bus.off('reload', this.busReloadHandler)
+    this.busPushHandler = null
+    this.busPopHandler = null
+    this.busReloadHandler = null
+    window.removeEventListener('click', this.destoryPopover)
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.container {
+  width: 100%;
+  height: 100%;
+  // max-height: calc(100vh - 180px);
+  // height: calc(100vh - 192px);
+  overflow: hidden;
+  display: flex;
+}
+.tree {
+  height:calc(100% - 156px);
+  overflow: auto;
+  & :deep(.is-current) {
+    background: rgb(245, 247, 250);
+  }
+}
+.tree-list {
+  width: 250px;
+  height: 100%;
+  flex-shrink: 0;
+  background: var(--epx-bg-card);
+  overflow: auto;
+  margin-right: 10px;
+  min-height: 400px;
+
+    :deep(.el-tree-node__content) {
+      height: 30px;
+      position: relative
+    }
+    :deep(.el-tree-node__expand-icon) {
+      z-index: 1;
+    }
+
+}
+.tree-header {
+  @include bg_color_primary;
+  font-size: var(--epx-font-size-l);
+  line-height: 30px;
+  color: #fff;
+  padding: 8px 12px;
+}
+.opera {
+  padding: 5px 0 10px;
+  border-bottom: 1px solid var(--epx-border);
+}
+.button-group {
+  margin-bottom: 5px;
+  padding: 0 5px;
+  .tree-button {
+    margin: 5px;
+    margin-right: 10px;
+    margin-left: 0;
+  }
+}
+.search-container {
+  padding: 5px 10px 0;
+}
+
+.node {
+  &.active {
+    &::before {
+      position: absolute;
+      left: 0;
+      top: 0;
+      content: '';
+      width: 100%;
+      height: 100%;
+      background: var(--epx-bg);
+    }
+  }
+
+}
+.tree-node__container {
+  flex: 1;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  &:hover {
+    .column-operates {
+      display: block;
+    }
+  }
+}
+.tree-node {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  line-height: 32px;
+  position: relative;
+  z-index: 1;
+}
+.tree-node >i{
+  @include font_color_primary;
+  margin-right: 8px;
+  font-size: var(--epx-font-size-l);
+}
+.column-operates {
+  display: none;
+  margin: 0 12px;
+  color: var(--epx-text);
+}
+.content {
+  flex: 1;
+  overflow: hidden;
+}
+
+.opera-list {
+  li {
+    line-height: 36px;
+    cursor: pointer;
+    padding: 0 20px;
+    color: var(--epx-text);
+    &:hover {
+      @include bg_color_primary(.2);
+    }
+  }
+}
+</style>
+<style>
+.tree-opera-popover {
+  padding: 12px 0;
+  min-width: 100px;
+}
+</style>