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

package/src/base/ManageAppNav.vue

@@ -0,0 +1,1190 @@
+<script>
+// @jsx-vue3（T30 JSX 批：Vue3 JSX 语法，@vue/babel-plugin-jsx 编译）
+
+// '侧边导航', value: '0'  '顶部导航', value: '1'
+// '经典（默认）', value: '1'   '左侧', value: '0'   '顶部', value: '2'
+import AppNav from '@epxing/components/src/app-nav/AppNav.vue'
+import draggable from '@epxing/core/src/components/draggable'
+export default {
+  name: 'epx-manage-app-nav',
+  extends: AppNav,
+  components: {
+    draggable
+  },
+  computed: {
+    currentRoleName () {
+      if (this.$route.name === 'manage') return '管理模式'
+      const role = this.roleList.find(item => item.ID === this.$currentRoleId)
+      if (role) return role['NAME#'] || this.$t(role.NAME)
+      return this.$t('set the role')
+    }
+  },
+  data () {
+    return {
+      addMenuTypeList: [
+        { label: '列表查询页面', value: 'list', preview: require('@/assets/images/addmenu/list.png') },
+        { label: '数据看板页面', value: 'data', preview: require('@/assets/images/addmenu/data.png') },
+        { label: '空白页面', value: 'blank', preview: require('@/assets/images/addmenu/basepage.png') },
+        { label: '自选模版页面', value: 'choose', preview: require('@/assets/images/addmenu/zxmb.png') },
+        { label: '关联已有页面', value: 'select', preview: require('@/assets/images/addmenu/link.png') },
+        { label: '菜单目录', value: 'dir', preview: require('@/assets/images/addmenu/menu.png') }
+      ],
+      showEditAppDialog: false,
+      dialogTitle: '',
+      editType: '1',
+      inputAppName: '',
+      navOptions: [
+        { label: '经典（默认）', value: '1', preview: require('@/assets/images/nav/1.png') },
+        { label: '左侧', value: '0', preview: require('@/assets/images/nav/0.png') },
+        { label: '顶部', value: '2', preview: require('@/assets/images/nav/2.png') },
+        { label: '双列', value: '3', preview: require('@/assets/images/nav/3.svg') }
+      ],
+      dialogWidth: '610',
+      navType: '',
+      navAppType: '',
+      editMenuInfo: {},
+      addMenuData: {},
+      appAllRoleList: [],
+      checkRoleList: []
+      // popoverManualVisible: false
+    }
+  },
+  watch: {
+    menu () {
+      this.judgeClickMenu()
+      this.validateNavWidth()
+    }
+  },
+  methods: {
+    switchRole (role) {
+      const { params = {}, query = {} } = this.$route
+      if (role === 'app-manage-code') {
+        return
+      }
+      const switchRoleCode = role.CODE + (role.TYPE === 'client' ? '-client' : '')
+      // if (switchRoleCode !== params.role) {
+      this.$router.replace({
+        name: 'app1',
+        params: {
+          ...params,
+          role: switchRoleCode
+        },
+        query
+      })
+        .then(() => {
+          const timer = setTimeout(() => {
+            location.reload()
+            clearTimeout(timer)
+          }, 10)
+        })
+      // }
+    },
+    editAppMenu (nav, name, type, width) {
+      this.editMenuInfo = { ...nav }
+      this.dialogTitle = name
+      this.editType = type
+      if (name === 'delete-menu') {
+        this.removeEntity(nav, type)
+      } else {
+        if (type === 'menu-rename') {
+          this.inputAppName = nav.text
+        } else if (type === 'menu-setting') {
+          const query = {
+            openType: '2',
+            pageType: 'DETAIL',
+            flag: 'v_service_menu_detail_mobile',
+            metaId: 'FM_MODULE',
+            title: name,
+            id: nav.id,
+            callback: this.reloadMenu
+          }
+          this.$createPage(query)
+          return
+        } else if (type === 'menu-sq') {
+          // const query = {
+          //   openType: '2',
+          //   pageType: 'ADD',
+          //   flag: 'manage-client-system-app-menu-add-role',
+          //   metaId: 'FM_ROLE_MODULE',
+          //   title: name,
+          //   parentId: nav.id
+          // }
+          // this.$createPage(query)
+          // return
+          this.checkRoleList = []
+          this.showEditAppDialog = true
+          this.getSqList()
+          return
+        }
+        this.dialogWidth = width || '610'
+        this.showEditAppDialog = true
+      }
+    },
+    getClientSystemAppRole () {
+      const scopeParams = [
+        {
+          field: 'SYSTEM',
+          mode: 'equal',
+          values: this.SYSTEM,
+          link: 'or'
+        },
+        {
+          field: 'TYPE',
+          mode: 'equal',
+          values: 'client'
+        }
+      ]
+      const params = {
+        entityId: 'FM_ROLE',
+        scopeParams: JSON.stringify(scopeParams),
+        order_field: 'TYPE',
+        order_mode: 'desc'
+      }
+      this.$http.list(params)
+        .then(data => {
+          this.appAllRoleList = data.entitys
+        })
+    },
+    getSqList () {
+      this.$http.list({
+        entityId: 'FM_ROLE_MODULE',
+        'scope.MODULE': this.editMenuInfo.id
+      })
+        .then(data => {
+          this.checkRoleList = data.entitys.map(item => item.ROLE)
+        })
+    },
+    addAppMenu (nav, menuTypeItem, name, type, width) {
+      this.editMenuInfo = { ...nav }
+      this.editType = type
+      const defaultValue = {}
+      // 这里的add-nav-menu为新增同级菜单
+      defaultValue.UP_ID = (type === 'add-nav-menu' || type === 'add-tj') ? nav.parent : nav.id
+      // 新增菜单
+      const query = {
+        flag: 'manage-client-system-app-add-menu',
+        metaId: 'FM_MODULE',
+        defaultValue,
+        title: name,
+        serviceId: this.appConfig.ID,
+        moduleType: menuTypeItem.value,
+        ...(menuTypeItem.value === 'data' ? { component: 'dashboard-create', flag: undefined, title: '创建数据看板', dialogWidth: '560px' } : {}),
+        openType: '2',
+        callback: this.reloadMenu
+      }
+      this.$createPage(query)
+    },
+    chooseMenuType (item) {
+      this.editType = 'add-nav-menu'
+      // 新增菜单
+      const query = {
+        flag: 'manage-client-system-app-add-menu',
+        metaId: 'FM_MODULE',
+        serviceId: this.appConfig.ID,
+        moduleType: item.value,
+        ...(item.value === 'data' ? { component: 'dashboard-create', flag: undefined, title: '创建数据看板', dialogWidth: '560px' } : {}),
+        openType: '2',
+        callback: this.reloadMenu
+      }
+      const popover = this.$refs.popover
+      if (popover)popover.doClose()
+      // this.popoverManualVisible = false
+      this.$createPage(query)
+    },
+    judgeClickMenu () {
+      // 一级导航菜单信息后点击查看该新增菜单信息
+      if (this.editType === 'add-nav-menu') {
+        const nav = this.menu.find(item => item.ID === this.addMenuData.ID)
+        if (nav) {
+          // this.clickNavMenu(nav)
+          this.toPage(nav)
+        }
+      }
+    },
+    reloadMenu (v) {
+      // 经典模式新增下级菜单
+      if (this.type === '1' && this.editType === 'add-xj') {
+        this.toPage(this.editMenuInfo)
+      } else {
+        // 一级导航菜单信息后点击查看该新增菜单信息
+        if (this.editType === 'add-nav-menu') {
+          this.addMenuData = v
+        }
+        this.$emit('updateMenu')
+      }
+    },
+    removeEntity (select, type) {
+      this.showPopover = null
+      let selectItem = this.clickItem
+      if (select && select.id) {
+        selectItem = select
+      }
+      this.expandKeys = []
+      if (!selectItem || !selectItem.id) {
+        this.$message.error(this.$t('please select a record'))
+        return
+      }
+      // const idArr = [selectItem.id]
+      // this.getSubIds(idArr, selectItem.children)
+      const params = {
+        action: 'removeMulti',
+        entityId: 'FM_MODULE',
+        ids: selectItem.id
+        // ids: idArr.join(',')
+      }
+      if (type === '1') {
+        params.deletePag = '1'
+      }
+      this.$confirm(this.$t('Confirm the deletion') + '?')
+        .then(() => {
+          this.$http.$request(params)
+            .then(data => {
+              this.$message.success(this.$t('deleted successfully'))
+              // 删除菜单
+              if (!selectItem.parent) {
+                const key = 'default-' + selectItem.ID
+                this.$store.commit('DESTORY_TAB', key)
+              }
+              this.reloadMenu()
+            })
+        })
+    },
+    getSubIds (idArr = [], data) {
+      data.forEach(item => {
+        idArr.push(item.id)
+        if (item.children) {
+          this.getSubIds(idArr, item.children)
+        }
+      })
+    },
+    editAppConfig (name, type, width, e) {
+      this.dialogTitle = name
+      this.editType = type
+      if (type === '1') {
+        this.inputAppName = this.appConfig.NAME
+      } else if (type === '2') {
+        const appConfig = this.appConfig.APP_CONFIG ? JSON.parse(this.appConfig.APP_CONFIG) : {}
+        this.navAppType = appConfig.navType
+        this.navType = appConfig.navType
+      } else if (type === '3') {
+        const query = {
+          flag: 'manage-client-system-app-accredit',
+          metaId: 'FM_ROLE',
+          systemId: this.SYSTEM,
+          serviceId: this.appConfig.ID,
+          systemName: this.appConfig['SYSTEM|NAME'],
+          appName: this.appConfig.NAME,
+          appType: this.appConfig.TYPE
+        }
+        this.$store.commit('CREATE_TAB', {
+          key: 'default-' + this.appConfig.ID,
+          moduleId: this.appConfig.ID,
+          component: 'module-index-page',
+          title: name,
+          showBack: true,
+          ...query
+        })
+        return
+      } else {
+        const query = {
+          flag: 'manage-client-system-app-detail',
+          metaId: 'FM_SERVICE',
+          id: this.appConfig.ID
+        }
+        this.$store.commit('CREATE_TAB', {
+          key: 'default-' + new Date().getTime(),
+          moduleId: this.appConfig.ID,
+          component: 'module-index-page',
+          title: name,
+          showBack: true,
+          ...query
+        })
+        return
+      }
+      this.dialogWidth = width || '610'
+      this.showEditAppDialog = true
+    },
+    editAppDialog () {
+      if (this.editType === 'menu-rename') {
+        if (!this.inputAppName) {
+          this.$message.error('名称不能为空')
+          return
+        }
+        this.$http.update({
+          entityId: 'FM_MODULE',
+          'bean.ID': this.editMenuInfo.id,
+          'bean.NAME': this.inputAppName
+        })
+          .then(data => {
+            this.$emit('updateMenu')
+            this.$message.success('修改成功')
+            this.showEditAppDialog = false
+          })
+          .catch(err => {
+            this.$message.error(err.message || '修改失败')
+            this.showEditAppDialog = false
+          })
+      } else if (this.editType === 'menu-sq') {
+        // if (this.checkRoleList.length === 0) {
+        //   this.$message.error('请先选择授权角色')
+        //   return
+        // }
+        this.$http.$post({
+          action: 'refreshModuleRoles',
+          entityId: 'FM_ROLE_MODULE',
+          moduleId: this.editMenuInfo.id,
+          roleIds: this.checkRoleList.join(',')
+        })
+          .then(data => {
+            this.$message.success('添加成功')
+            this.showEditAppDialog = false
+          })
+          .catch(err => {
+            this.$message.error(err.message || '操作失败')
+          })
+      } else {
+        const params = {
+          entityId: 'FM_SERVICE',
+          'bean.ID': this.appConfig.ID
+        }
+        if (this.editType === '1') {
+          params['bean.NAME'] = this.inputAppName
+          if (!this.inputAppName) {
+            this.$message.error('名称不能为空')
+            return
+          }
+        } else if (this.editType === '2') {
+          if (this.navAppType === this.navType) {
+            this.$message.error('您未修改导航模式')
+            return
+          }
+          const appConfig = this.appConfig.APP_CONFIG ? JSON.parse(this.appConfig.APP_CONFIG) : {}
+          const obj = { ...appConfig, navType: this.navType }
+          params['bean.APP_CONFIG'] = JSON.stringify(obj)
+        }
+        this.$http.update(params)
+          .then(data => {
+            if (this.editType === '1') {
+              this.appName = ''
+              this.$store.dispatch({ type: 'GET_APP_CONFIG', client: this.appConfig['CLIENT|CODE'], system: this.appConfig['SYSTEM|CODE'], app: this.appConfig.CODE })
+            } else if (this.editType === '2') {
+              window.location.reload()
+            }
+            this.$message.success('修改成功')
+            this.showEditAppDialog = false
+          })
+          .catch(err => {
+            this.$message.error(err.message || '修改失败')
+            this.showEditAppDialog = false
+          })
+      }
+    },
+    switchNav (option) {
+      this.navType = option.value
+    },
+    renderEditDialog () {
+      return (
+        <el-dialog
+          title={this.dialogTitle}
+          modelValue={!!this.showEditAppDialog}
+          class="popup-dialog"
+          append-to-body={true}
+          width={this.dialogWidth + 'px'}
+          onClose={() => (this.showEditAppDialog = false)}
+        >
+          <div class="epx-add-form__check-dialog">
+            <div>
+              {this.editType === '1' &&
+                <div>
+                  <div style="width:300px;margin:auto;marginBottom:20px">
+                    <el-input v-model={this.inputAppName} clearable placeholder="请输入要修改的应用名称"></el-input>
+                  </div>
+                </div>
+              }
+              {this.editType === 'menu-rename' &&
+                <div>
+                  <div style="width:300px;margin:auto;marginBottom:20px">
+                    <el-input v-model={this.inputAppName} clearable placeholder="请输入要修改的菜单名称"></el-input>
+                  </div>
+                </div>
+              }
+              {this.editType === '2' &&
+                <div class='add-type nav-type'>
+                  {
+                    this.navOptions.map(option => (
+                      <div class={['add-menu-type__item', 'manage-nav-mode-item', 'nav-type__item', { 'is-active': this.navType === option.value }]} key={option.value} onClick={this.switchNav.bind(this, option)}>
+                        <div class="nav-img">
+                          <img src={option.preview} />
+                        </div>
+                        <p class="add-menu-type-label">{option.label}</p>
+                      </div>
+                    ))
+                  }
+                </div>
+              }
+              {this.editType === 'menu-sq' &&
+                <div class='role-system__content'>
+                  <el-checkbox-group v-model={this.checkRoleList}>
+                    {
+                      this.appAllRoleList.map(item => (
+                        <el-checkbox key={item.ID} label={item.ID} value={item.ID}>{item.NAME}
+                          {item.TYPE === 'client' && <el-tag style="marginLeft:4px" size="small">通用</el-tag>}
+                        </el-checkbox>
+                      ))
+                    }
+                  </el-checkbox-group>
+                </div>
+              }
+            </div>
+            <div class="epx-add-form__sign-buttongroup">
+              <el-button size="middle" type="primary" onClick={this.editAppDialog}>{this.$t('determine')}</el-button>
+              <el-button size="middle" onClick={() => (this.showEditAppDialog = false)}>{this.$t('return')}</el-button>
+            </div>
+          </div>
+        </el-dialog>
+      )
+    },
+    renderLogo () {
+      return (
+        <div class="epx-app-nav__logo" ref="logo" onClick={this.backIndex}>
+          {this.renderEditDialog()}
+          { this.logo && <img class="epx-app-nav__logo-icon" src={this.logo} />}
+          <span title={this.appName || this.NAME || this.appConfig.NAME}>{this.appName || this.NAME || this.appConfig.NAME}<span style="marginLeft:6px">{'[管理模式]'}</span></span>
+          <el-dropdown
+            placement="bottom-start"
+            trigger="click"
+            v-slots={{
+              dropdown: () => (<el-dropdown-menu>
+                <el-dropdown-item onClick={this.editAppConfig.bind(this, '重命名', '1')} class="app-config-item"><i class="el-icon-edit"></i>重命名</el-dropdown-item>
+                <el-dropdown-item onClick={this.editAppConfig.bind(this, '修改导航模式', '2')} class="app-config-item"><i class="el-icon-receiving"></i>导航模式</el-dropdown-item>
+                <el-dropdown-item onClick={this.editAppConfig.bind(this, '应用授权', '3')} class="app-config-item"><i class="el-icon-finished"></i>应用授权</el-dropdown-item>
+                <el-dropdown-item onClick={this.editAppConfig.bind(this, '更多设置', '4')} class="app-config-item"><i class="el-icon-setting"></i>更多设置</el-dropdown-item>
+              </el-dropdown-menu>)
+            }}>
+            <div class="app-logo-right" onClick={(e) => { e.stopPropagation() }}>
+              <i class="el-icon-caret-bottom"></i>
+            </div>
+          </el-dropdown>
+        </div>
+      )
+    },
+    renderMenuItem (nav, isSub = false) {
+      if (this.showAllLevel && nav.children && nav.children.length > 0) {
+        return (
+          <el-sub-menu class={['epx-app-nav__submenu', 'top-type-nav-menu', 'epx-app-nav__menu-item', { 'epx-app-nav__menu-item--sub': isSub }, { active: this.$tab.key === ('default-' + nav.ID) }]} index={nav.ID} onClick={this.clickNavMenu.bind(this, nav)} v-slots={{
+            // JSX 里必须用 v-slots 传具名插槽，v-slot 不生效（内容会被当默认插槽塞错位置）
+            title: () => (
+              // 原 <template> 允许多根，但箭头函数返回值必须单根 ⇒ 用 Fragment 包住
+              // 下面这两个相邻顶层元素（菜单名 + 配置下拉）
+              <>
+                <span>
+                  <i class={['fa', nav.FONT_ICON]}></i>
+                  <span style={{ fontSize: this.navMenuFontSize ? `${this.navMenuFontSize}px` : '' }}>{nav.text}1</span>
+                </span>
+                <el-dropdown
+                  placement={nav.parent ? 'right-start' : 'bottom-start'}
+                  trigger="click"
+                  v-slots={{
+                    dropdown: () => (<el-dropdown-menu>
+                      <el-dropdown-item onClick={this.editAppMenu.bind(this, nav, '菜单-重命名', 'menu-rename')} class="app-config-item" ><i class="el-icon-edit"></i>重命名</el-dropdown-item>
+                      <el-dropdown-item onClick={this.editAppMenu.bind(this, nav, '菜单-设置', 'menu-setting')}><i class="el-icon-setting"></i>设置</el-dropdown-item>
+                      <el-popover
+                        popper-class="manage-menu-popover"
+                        placement="right-start"
+                        trigger="hover"
+                        v-slots={{
+                          reference: () => (<div class="delete-dropdown-item">
+                            <div class="app-config-delete-item"><i class="el-icon-delete"></i>删除</div>
+                            <i class="el-icon-arrow-right"></i>
+                          </div>)
+                        }}>
+                        <div>
+                          <div class="app-config-item" onClick={this.editAppMenu.bind(this, nav, 'delete-menu', '0')}>删除菜单1</div>
+                          <div class="app-config-item" onClick={this.editAppMenu.bind(this, nav, 'delete-menu', '1')}>删除菜单及页面</div>
+                        </div>
+                      </el-popover>
+                      <el-dropdown-item onClick={this.editAppMenu.bind(this, nav, '菜单授权', 'menu-sq')} class="app-config-item"><i class="el-icon-finished"></i>菜单授权</el-dropdown-item>
+                      <el-popover
+                        popper-class="manage-menu-popover"
+                        placement="right-start"
+                        trigger="hover"
+                        v-slots={{
+                          reference: () => (<div class="delete-dropdown-item">
+                            <div class="app-config-delete-item"><i class="el-icon-plus"></i>新增同级菜单</div>
+                            <i class="el-icon-arrow-right"></i>
+                          </div>)
+                        }}>
+                        <div class="add-menu-container">
+                          <div>选择新增菜单类型</div>
+                          <div class="add-type">
+                            {this.addMenuTypeList.map(item => {
+                              return (
+                                <div class="add-menu-type__item" key={item.value} onClick={this.addAppMenu.bind(this, nav, item, '新增同级菜单', 'add-nav-menu')}>
+                                  <div>
+                                    <img src={item.preview} />
+                                  </div>
+                                  <p class="add-menu-type-label">{item.label}</p>
+                                </div>
+                              )
+                            })
+                            }
+                          </div>
+                        </div>
+                      </el-popover>
+                      <el-popover
+                        popper-class="manage-menu-popover"
+                        placement="right-start"
+                        trigger="hover"
+                        v-slots={{
+                          reference: () => (<div class="delete-dropdown-item">
+                            <div class="app-config-delete-item"><i class="el-icon-bottom"></i>新增下级菜单</div>
+                            <i class="el-icon-arrow-right"></i>
+                          </div>)
+                        }}>
+                        <div class="add-menu-container">
+                          <div>选择新增菜单类型</div>
+                          <div class="add-type">
+                            {this.addMenuTypeList.map(item => {
+                              return (
+                                <div class="add-menu-type__item" key={item.value} onClick={this.addAppMenu.bind(this, nav, item, '新增下级菜单', 'add-xj')}>
+                                  <div>
+                                    <img src={item.preview} />
+                                  </div>
+                                  <p class="add-menu-type-label">{item.label}</p>
+                                </div>
+                              )
+                            })
+                            }
+                          </div>
+                        </div>
+                      </el-popover>
+                    </el-dropdown-menu>)
+                  }}>
+                  <span onClick={this.settingAppMenu.bind(this, nav)} class="app-menu-setting has-children-app-menu-setting"><i class="el-icon-s-tools"></i></span>
+                </el-dropdown>
+              </>
+            )
+          }}>
+            {
+              nav.children.map(item => this.renderMenuItem(item, true))
+            }
+          </el-sub-menu>
+        )
+      } else {
+        return (
+          <el-menu-item key={nav.ID} index={nav.ID} class={['epx-app-nav__menu-item', 'top-type-nav-menu', 'top-type-nav-menu-no-children', { 'epx-app-nav__menu-item--sub': isSub }, { active: this.$tab.key === ('default-' + nav.ID) }]} onClick={this.toPage.bind(this, nav)} >
+            <span>
+              <i class={['fa', nav.FONT_ICON]}></i>
+              <span style={this.navMenuFontSize ? { fontSize: this.navMenuFontSize + 'px' } : {}}>{nav.text}</span>
+            </span>
+            <el-dropdown
+              placement={nav.parent ? 'right-start' : 'bottom-start'}
+              trigger="click"
+              v-slots={{
+                dropdown: () => (<el-dropdown-menu>
+                  <el-dropdown-item onClick={this.editAppMenu.bind(this, nav, '菜单-重命名', 'menu-rename')} class="app-config-item" ><i class="el-icon-edit"></i>重命名</el-dropdown-item>
+                  <el-dropdown-item onClick={this.editAppMenu.bind(this, nav, '菜单-设置', 'menu-setting')}><i class="el-icon-setting"></i>设置</el-dropdown-item>
+                  <el-popover
+                    popper-class="manage-menu-popover"
+                    placement="right-start"
+                    trigger="hover"
+                    v-slots={{
+                      reference: () => (<div class="delete-dropdown-item">
+                        <div class="app-config-delete-item"><i class="el-icon-delete"></i>删除</div>
+                        <i class="el-icon-arrow-right"></i>
+                      </div>)
+                    }}>
+                    <div>
+                      <div class="app-config-item" onClick={this.editAppMenu.bind(this, nav, 'delete-menu', '0')}>删除菜单</div>
+                      <div class="app-config-item" onClick={this.editAppMenu.bind(this, nav, 'delete-menu', '1')}>删除菜单及页面</div>
+                    </div>
+                  </el-popover>
+                  <el-dropdown-item onClick={this.editAppMenu.bind(this, nav, '菜单授权', 'menu-sq')} class="app-config-item"><i class="el-icon-finished"></i>菜单授权</el-dropdown-item>
+                  <el-popover
+                    popper-class="manage-menu-popover"
+                    placement="right-start"
+                    trigger="hover"
+                    v-slots={{
+                      reference: () => (<div class="delete-dropdown-item">
+                        <div class="app-config-delete-item"><i class="el-icon-plus"></i>新增同级菜单</div>
+                        <i class="el-icon-arrow-right"></i>
+                      </div>)
+                    }}>
+                    <div class="add-menu-container">
+                      <div>选择新增菜单类型</div>
+                      <div class="add-type">
+                        {this.addMenuTypeList.map(item => {
+                          return (
+                            <div class="add-menu-type__item" key={item.value} onClick={this.addAppMenu.bind(this, nav, item, '新增同级菜单', 'add-nav-menu')}>
+                              <div>
+                                <img src={item.preview} />
+                              </div>
+                              <p class="add-menu-type-label">{item.label}</p>
+                            </div>
+                          )
+                        })
+                        }
+                      </div>
+                    </div>
+                  </el-popover>
+                  <el-popover
+                    popper-class="manage-menu-popover"
+                    placement="right-start"
+                    trigger="hover"
+                    v-slots={{
+                      reference: () => (<div class="delete-dropdown-item">
+                        <div class="app-config-delete-item"><i class="el-icon-bottom"></i>新增下级菜单</div>
+                        <i class="el-icon-arrow-right"></i>
+                      </div>)
+                    }}>
+                    <div class="add-menu-container">
+                      <div>选择新增菜单类型</div>
+                      <div class="add-type">
+                        {this.addMenuTypeList.map(item => {
+                          return (
+                            <div class="add-menu-type__item" key={item.value} onClick={this.addAppMenu.bind(this, nav, item, '新增下级菜单', 'add-xj')}>
+                              <div>
+                                <img src={item.preview} />
+                              </div>
+                              <p class="add-menu-type-label">{item.label}</p>
+                            </div>
+                          )
+                        })
+                        }
+                      </div>
+                    </div>
+                  </el-popover>
+                </el-dropdown-menu>)
+              }}>
+              <span onClick={this.settingAppMenu.bind(this, nav)} class="app-menu-setting"><i class="el-icon-s-tools"></i></span>
+            </el-dropdown>
+          </el-menu-item>
+        )
+      }
+    },
+    validateNavWidth () {
+      if (!this.$refs.container) return
+      let maxWidth = this.$refs.container.offsetWidth - this.$refs.logo.offsetWidth - this.$refs.rightContainer.offsetWidth - 128
+      if (this.tabs.length > 0) {
+        maxWidth -= 138
+      }
+      let foldMenuIndex = 0
+      let width = 0
+      if (!this.showMenu) return
+      for (let i = 0; i < this.showMenu.length; i++) {
+        const item = this.showMenu[i]
+        const itemWidth = (item.text || '').length * 14 + (item.FONT_ICON ? 20 : 0) + 44 + 12
+        if (width + itemWidth > maxWidth) {
+          if (width + 100 <= maxWidth) {
+            foldMenuIndex = i
+          } else {
+            foldMenuIndex = i - 1
+          }
+          break
+        }
+        width += itemWidth
+      }
+      if (foldMenuIndex) {
+        this.openMenu = this.showMenu.slice(0, foldMenuIndex)
+        this.foldMenu = this.showMenu.slice(foldMenuIndex)
+      } else {
+        this.openMenu = [...this.showMenu]
+        this.foldMenu = []
+      }
+    },
+    moveEnd (e) {
+      const index = e.newIndex
+      const node = this.openMenu[index]
+      const parentId = 'root'
+      // 获取其父节点的所有子节点orderString
+      const str = this.openMenu.reduce((str, item, index) => (str += item.id + ':' + index + ','), '')
+      // // this.drag = false
+      this.$http.$post({
+        action: 'moveTree',
+        entityId: 'FM_MODULE',
+        orderString: str,
+        newParentId: parentId,
+        id: node.id,
+        selfAttriName: 'ID',
+        orderAtrriName: 'ORDER_NUM'
+      })
+        .then(() => {
+
+        })
+        .catch(err => {
+          this.$message.error(err.message || '拖拽排序失败')
+          this.reloadMenu()
+        })
+    },
+    renderNav () {
+      // menu-trigger="click" 菜单点击 子菜单打开的触发方式(只在 mode 为 horizontal 时有效)
+      return (
+        <div class="epx-app-nav__home">
+          {
+            (this.type === '1' || this.type === '2') ? (
+              <div class="epx-app-nav__menu-content">
+                <el-menu ref="menu" style="display:flex" class="epx-app-nav__menu" mode="horizontal" ellipsis={false}>
+                  {
+                    this.showMenu && (
+                      <draggable
+                        class="el-menu--horizontal epx-app-nav__menu nav-draggable"
+                        v-model={this.openMenu}
+                        group="description"
+                        ghostClass="ghost"
+                        animation={300}
+                        onEnd={this.moveEnd}
+                      >
+                        {this.openMenu.map(nav => {
+                          if (nav.HIDDEN_MENU !== '1') {
+                            return this.renderMenuItem(nav, false)
+                          }
+                        })}
+
+                      </draggable>
+                    )
+                  }
+                </el-menu>
+                {
+                  this.foldMenu.length > 0 && (
+                    <el-dropdown class="epx-app-nav__foldmenu" onCommand={this.toPage} trigger="click" v-slots={{
+                      dropdown: () => (<el-dropdown-menu>
+                        {
+                          this.foldMenu.map(menu => (
+                            <el-dropdown-item key={menu.ID} command={menu} class={{ 'epx-app-nav__foldmenu-item': true, ' more-menu-item': true, 'is-active': this.$tab.key === ('default-' + menu.ID) }}>
+                              <span>
+                                <i class={['fa', menu.FONT_ICON]}></i>
+                                <span>{menu.text}</span>
+                              </span>
+                              <el-dropdown
+                                placement="right-start"
+                                trigger="click"
+                                v-slots={{
+                                  dropdown: () => (<el-dropdown-menu>
+                                    <el-dropdown-item onClick={this.editAppMenu.bind(this, menu, '菜单-重命名', 'menu-rename')} class="app-config-item"><i class="el-icon-edit"></i>重命名</el-dropdown-item>
+                                    <el-dropdown-item onClick={this.editAppMenu.bind(this, menu, '菜单-设置', 'menu-setting')}><i class="el-icon-setting"></i>设置</el-dropdown-item>
+                                    <el-popover
+                                      popper-class="manage-menu-popover"
+                                      placement="right-start"
+                                      trigger="hover"
+                                      v-slots={{
+                                        reference: () => (<div class="delete-dropdown-item">
+                                          <div class="app-config-delete-item"><i class="el-icon-delete"></i>删除</div>
+                                          <i class="el-icon-arrow-right"></i>
+                                        </div>)
+                                      }}>
+                                      <div>
+                                        <div class="app-config-item" onClick={this.editAppMenu.bind(this, menu, 'delete-menu', '0')}>删除菜单</div>
+                                        <div class="app-config-item" onClick={this.editAppMenu.bind(this, menu, 'delete-menu', '1')}>删除菜单及页面</div>
+                                      </div>
+                                    </el-popover>
+                                    <el-dropdown-item onClick={this.editAppMenu.bind(this, menu, '菜单授权', 'menu-sq')} class="app-config-item"><i class="el-icon-finished"></i>菜单授权</el-dropdown-item>
+                                    <el-popover
+                                      popper-class="manage-menu-popover"
+                                      placement="right-start"
+                                      trigger="hover"
+                                      v-slots={{
+                                        reference: () => (<div class="delete-dropdown-item">
+                                          <div class="app-config-delete-item"><i class="el-icon-plus"></i>新增同级菜单</div>
+                                          <i class="el-icon-arrow-right"></i>
+                                        </div>)
+                                      }}>
+                                      <div class="add-menu-container">
+                                        <div>选择新增菜单类型</div>
+                                        <div class="add-type">
+                                          {this.addMenuTypeList.map(item => {
+                                            return (
+                                              <div class="add-menu-type__item" key={item.value} onClick={this.addAppMenu.bind(this, menu, item, '新增同级菜单', 'add-nav-menu')}>
+                                                <div>
+                                                  <img src={item.preview} />
+                                                </div>
+                                                <p class="add-menu-type-label">{item.label}</p>
+                                              </div>
+                                            )
+                                          })
+                                          }
+                                        </div>
+                                      </div>
+                                    </el-popover>
+                                    <el-popover
+                                      popper-class="manage-menu-popover"
+                                      placement="right-start"
+                                      trigger="hover"
+                                      v-slots={{
+                                        reference: () => (<div class="delete-dropdown-item">
+                                          <div class="app-config-delete-item"><i class="el-icon-bottom"></i>新增下级菜单</div>
+                                          <i class="el-icon-arrow-right"></i>
+                                        </div>)
+                                      }}>
+                                      <div class="add-menu-container">
+                                        <div>选择新增菜单类型</div>
+                                        <div class="add-type">
+                                          {this.addMenuTypeList.map(item => {
+                                            return (
+                                              <div class="add-menu-type__item" key={item.value} onClick={this.addAppMenu.bind(this, menu, item, '新增下级菜单', 'add-xj')}>
+                                                <div>
+                                                  <img src={item.preview} />
+                                                </div>
+                                                <p class="add-menu-type-label">{item.label}</p>
+                                              </div>
+                                            )
+                                          })
+                                          }
+                                        </div>
+                                      </div>
+                                    </el-popover>
+                                  </el-dropdown-menu>)
+                                }}>
+                                <span onClick={this.settingAppMenu.bind(this, menu)} class="app-menu-setting"><i class="el-icon-s-tools"></i></span>
+                              </el-dropdown>
+                            </el-dropdown-item>
+                          ))
+                        }
+                      </el-dropdown-menu>)
+                    }}>
+                      <span class={{ 'epx-app-nav__foldmenu-text': true, 'is-active': this.activeMenuInMore }} >
+                        {this.$t('more')}<i class="el-icon-caret-bottom"></i>
+                      </span>
+                    </el-dropdown>
+                  )
+                }
+                <el-popover
+                  ref="popover"
+                  popper-class="manage-menu-popover"
+                  placement="bottom"
+                  trigger="click"
+                  v-slots={{ reference: () => (<span class="app-add-menu"><i class="el-icon-circle-plus-outline"></i></span>) }}>
+                  <div class="add-menu-container">
+                    <div>选择新增菜单类型</div>
+                    <div class="add-type">
+                      {this.addMenuTypeList.map(item => {
+                        return (
+                          <div class="add-menu-type__item" key={item.value} onClick={this.chooseMenuType.bind(this, item)}>
+                            <div>
+                              <img src={item.preview} />
+                            </div>
+                            <p class="add-menu-type-label">{item.label}</p>
+                          </div>
+                        )
+                      })
+                      }
+                    </div>
+                  </div>
+                </el-popover>
+                {
+                  this.tabs.length > 0 && (
+                    <el-dropdown onCommand={this.selectTab} v-slots={{
+                      dropdown: () => (<el-dropdown-menu>
+                        {
+                          this.tabs.map(tab => (
+                            <el-dropdown-item key={tab.key} command={tab}>
+                              {tab.title || tab.menuTitle}
+                              <i class="epx-app-nav__tabs-delete el-icon-error" onClick={this.tabRemove.bind(this, tab.key)}></i>
+                            </el-dropdown-item>
+                          ))
+                        }
+                        <el-dropdown-item onClick={this.clearTabs}>
+                          <el-button class="epx-app-nav__tabs-clear" type="primary" link><i class="el-icon-document-delete"></i>{this.$t('empty')}</el-button>
+                        </el-dropdown-item>
+                      </el-dropdown-menu>)
+                    }}>
+                      <el-button round size="default" class="epx-app-nav__tabs-page">{this.$tab && this.$tab.title}<i class="el-icon-arrow-down el-icon--right"></i></el-button>
+                    </el-dropdown>
+                  )
+                }
+              </div>
+            ) : (
+              <div class="epx-app-nav__menu-tabs">
+                {
+                  this.tabs.length > 0 && (
+                    <div class="epx-app-nav__menu-home">
+                      <i class="el-icon-s-home" onClick={this.toAppIndex}></i>
+                    </div>
+                  )
+                }
+                <el-tabs class="epx-app-nav__tabs" modelValue={this.$tab.key} onTabClick={this.tabClick} closable onTabRemove={this.tabRemove} onContextmenu={this.tabsContextmenu}>
+                  {
+                    this.tabs.map(tab => (
+                      <el-tab-pane key={tab.key} label={tab.title || tab.menuTitle} name={tab.key}></el-tab-pane>
+                    ))
+                  }
+                </el-tabs>
+              </div>
+            )
+          }
+          <el-popover
+            ref="tabPopover"
+            placement="bottom"
+            width="200"
+            trigger="manual"
+            v-model:visible={this.popoverVisible}
+            v-slots={{ reference: () => (<span > </span>) }}>
+            <div class="tabs-popover-clear" onClick={this.clearTabs}>{this.$t('Clear tabs')}</div>
+          </el-popover>
+        </div>
+      )
+    },
+    renderRole () {
+      const { EXTEND_OF_COMPETENCE } = this.appConfig
+      // 本组件只在管理模式下渲染。这个下拉显示「管理模式」并提供退回运行模式的唯一入口，
+      // 不能被应用自定义工具栏（TOOLBAR，如智能体应用只留 language）裁掉
+      if (EXTEND_OF_COMPETENCE !== 'allRole') {
+        return (
+          <el-dropdown trigger="click" placement="bottom-start" onCommand={this.switchRole} v-slots={{
+            dropdown: () => (<el-dropdown-menu>
+              <el-dropdown-item command='app-manage-code'>
+                管理模式
+              </el-dropdown-item>
+              {
+                this.roleList.map(role => (
+                  <el-dropdown-item
+                    class={['epx-app-nav__role-dropdown-item', { 'epx-app-nav__role-dropdown-item--default': role.MAIN_ROLE === 'true' }]}
+                    key={role.CODE}
+                    command={role}
+                  >
+                    <span class="epx-app-nav__role-name">{role['NAME#'] || this.$t(role.NAME)}</span>
+                    <i class="epx-app-nav__role-icon epx-icon-qizhi" ></i>
+                    <span class="epx-app-nav__role-text" onClick={this.setMainRole.bind(this, role)}>{role.MAIN_ROLE === 'true' ? this.$t('default') : this.$t('Set to the default')}</span>
+                  </el-dropdown-item>
+                ))
+              }
+            </el-dropdown-menu>)
+          }}>
+            <el-button size="default" type="primary" plain class="epx-app-nav__role-button">
+              {this.currentRoleName}<i class="el-icon-arrow-down el-icon--right"></i>
+            </el-button>
+          </el-dropdown>
+        )
+      }
+    },
+    settingAppMenu (menu, event) {
+      event.stopPropagation()
+    }
+  },
+  created () {
+    this.getClientSystemAppRole()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.app-logo-right .el-icon-caret-bottom{
+  font-size: var(--epx-font-size-l);
+  color: #fff;
+}
+.app-config-item{
+  box-sizing: border-box;
+  height: 36px;
+  background: var(--epx-bg-card);
+  cursor: pointer;
+  line-height: 36px;
+  padding: 0 40px 0 20px;
+  color: var(--epx-text);
+  i{
+    margin-right: 10px;
+  }
+  &:hover{
+    @include font_color_primary;
+    @include bg_color_primary(0.1);
+  }
+}
+.top-type-nav-menu:hover,.more-menu-item:hover{
+  .app-menu-setting{
+    visibility: visible;
+  }
+}
+.app-menu-setting{
+  visibility: hidden;
+  margin-left: 4px;
+  width: 24px;
+  display: inline-block;
+  i{
+    font-size: var(--epx-font-size-l);
+    position: relative;
+    top: 2px;
+  }
+}
+.has-children-app-menu-setting{
+  padding-left: 16px;
+}
+.more-menu-item{
+  padding-right: 10px;
+  display: flex;
+  justify-content: space-between;
+}
+.app-add-menu{
+  display: inline-block;
+  width: 64px;
+  color: #fff;
+  cursor: pointer;
+  text-align: center;
+  font-size: 21px;
+}
+.app-add-menu:hover{
+  background-color: rgba(0,0,0,.2);
+}
+.add-menu-container{
+  box-sizing: border-box;
+  padding: 4px 0 0 20px;
+  width: 560px;
+  height: 352px;
+  font-size: var(--epx-font-size-l);
+  color: var(--epx-text);
+  font-weight: bold;
+}
+.add-type {
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: 12px;
+}
+.add-menu-type-label{
+  font-size: var(--epx-font-size-base);
+  color: #444444;
+  margin-top: 10px;
+  margin-bottom: 10px;
+  line-height: 19px;
+  font-weight: 500;
+}
+.add-menu-type__item {
+  box-sizing: border-box;
+  width: 160px;
+  margin-right: 20px;
+  margin-bottom: 20px;
+  text-align: center;
+  cursor: pointer;
+  img {
+    width: 100%;
+  }
+  &:hover {
+    .add-menu-type-label{
+      @include font_color_primary;
+    }
+  }
+}
+.manage-nav-mode-item{
+  margin-bottom: 40px;
+  margin-left: 10px;
+  margin-right: 10px;
+}
+.nav-type {
+  img {
+    opacity: 0.5;
+    transition: all .5s;
+  }
+  .is-active {
+    .add-menu-type-label{
+      @include font_color_primary;
+    }
+    img {
+      opacity: 1;
+    }
+    .nav-img{
+      border: 1px solid;
+      @include border_color_primary;
+    }
+  }
+}
+.top-type-nav-menu{
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-right: 4px !important;
+
+    :deep(.el-sub-menu__title) {
+      // padding-right: 34px;
+      width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding-right: 0;
+      .el-sub-menu__icon-arrow{
+        position: absolute;
+        top: 42%;
+      }
+    }
+
+}
+.epx-app-nav__menu-item--sub {
+  // padding: 0 !important;
+
+    :deep(.el-sub-menu__title .el-sub-menu__icon-arrow) {
+        top: 50%;
+    }
+    :deep(.app-menu-setting i) {
+      top:0;
+    }
+
+}
+.top-type-app-menu-setting{
+  position: absolute;
+  right: -10px;
+  top: 0;
+}
+// .top-type-nav-menu-no-children{
+//   padding-right: 10px !important;
+// }
+// .top-menu-setting-item{
+//   display: flex;
+//   align-items: center;
+//   justify-content: space-between;
+//   padding-right: 10px;
+// }
+.mode-manage-choose{
+  display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 1px solid var(--epx-border);
+}
+.nav-draggable{
+  display: flex;
+}
+.delete-dropdown-item{
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-right: 10px;
+  cursor: pointer;
+  background: var(--epx-bg-card);
+  color: var(--epx-text);
+}
+.delete-dropdown-item:hover{
+  @include font_color_primary;
+  @include bg_color_primary(0.1);
+}
+.app-config-delete-item{
+  box-sizing: border-box;
+  height: 36px;
+  cursor: pointer;
+  line-height: 36px;
+  padding: 0 40px 0 20px;
+  i{
+    margin-right: 10px;
+  }
+}
+.role-system__content {
+  padding-bottom: 20px;
+
+    :deep(.el-checkbox) {
+      padding: 10px 0;
+      color: var(--epx-text);
+    }
+
+}
+.popup-dialog{
+  :deep(.el-dialog__header){
+    padding: 16px;
+  }
+}
+.epx-add-form__sign-buttongroup .el-button + .el-button{
+  margin-left: 20px;
+}
+</style>
+
+<style lang="scss">
+.manage-menu-popover{
+  box-sizing: border-box;
+  padding: 8px 0;
+  box-shadow: 0px 4px 12px 0px rgba(0,0,0,0.15);
+  border-radius: var(--epx-radius-base);
+  border: 1px solid var(--epx-border);
+}
+</style>