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

package/src/base/ManageMenu.vue

@@ -0,0 +1,935 @@
+<template>
+  <div class="epx-menu" :style="{ width: width + 'px'}">
+    <el-row class="epx-menu__row manage-menu-row">
+      <el-col>
+        <h5 :class="['epx-menu__header', {'is-active': isActive }]" @click="backModule" v-if="showNav">
+          <p class="epx-menu__name">
+            <i v-if="back" @click="$emit('back')" class="epx-menu__back el-icon-arrow-left"></i>
+            <i v-else class="el-icon-s-data"></i>
+            <span>{{moduleName}}</span>
+          </p>
+          <p class="epx-menu__subtitle" v-if="subTitle">（{{subTitle}}）</p>
+          </h5>
+          <template v-if="serviceMenu.length>0">
+              <el-tree
+              class="tree-wrap"
+                :data="serviceMenu"
+                node-key="id"
+                :props="props"
+                :default-expanded-keys="defaultOpenMenuId"
+                accordion
+                draggable
+                :indent="0"
+                icon="mycons"
+                @node-drop="nodeDrop"
+                >
+                  <template v-slot="{ node, data }"><div :class="{'tree-node':true,'tree-active':currentNodeId === data.id && node.isLeaf}">
+                    <div
+                      :class="['tree-content-panel' ]"
+                      @click="treeNodeClick(node, data)"
+                    >
+                      <div :style="{'padding-left': (node.level-1)* 16+20 + 'px'}">
+                        <div v-if="data.children&&data.children.length>0" class="tree-content-panel-span">
+                          <span>
+                            <!-- 图标 -->
+                            <epx-icon class="epx-menu-item__icon" :name="data.FONT_ICON || 'el-icon-monitor'"></epx-icon>
+                            <span :title="node.label">{{node.label}}</span>
+                          </span>
+                          <i :class="['iconfont','el-icon-arrow-down', node.expanded ? 'rotate' : 'rotate1']"></i>
+                        </div>
+                        <div v-else class="tree-content-panel-span">
+                          <span>
+                            <!-- 图标 -->
+                            <epx-icon class="epx-menu-item__icon" :name="data.FONT_ICON || 'el-icon-monitor'"></epx-icon>
+                            <span :title="node.label">{{node.label}}</span>
+                          </span>
+                          <i style="width: 8px;height: 16px;display: inline-block;"></i>
+                        </div>
+                      </div>
+                    </div>
+                    <el-dropdown trigger="click" placement="right-start">
+                      <span class="setting-btn" @click.stop><i class="el-icon-s-tools"></i></span>
+                      <template v-slot:dropdown><el-dropdown-menu>
+                        <el-dropdown-item class="app-config-item" @click="editAppMenu( data, '菜单-重命名', 'menu-rename')"><i class="el-icon-edit"></i>重命名</el-dropdown-item>
+                        <el-dropdown-item class="app-config-item" @click="editAppMenu(data, '菜单-设置', 'menu-setting')"><i class="el-icon-setting"></i>设置</el-dropdown-item>
+                        <el-popover
+                          popper-class="manage-menu-popover"
+                          placement="right-start"
+                          trigger="hover"
+                        >
+                          <template v-slot: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></template>
+                          <div>
+                            <div class="app-config-item" @click="editAppMenu(data,'delete-menu','0')">删除菜单</div>
+                            <div class="app-config-item" @click="editAppMenu(data,'delete-menu','1')">删除菜单及页面</div>
+                          </div>
+                        </el-popover>
+                        <el-dropdown-item class="app-config-item" @click="editAppMenu(data, '菜单授权', 'menu-sq')">
+                          <i class="el-icon-finished"></i>菜单授权
+                        </el-dropdown-item>
+                        <el-popover
+                          popper-class="manage-menu-popover"
+                          placement="right-start"
+                          trigger="hover">
+                          <div class="add-menu-container">
+                            <div>选择新增菜单类型</div>
+                            <div class="add-type">
+                                  <div v-for="item in addMenuTypeList" class="add-menu-type__item" :key="item.value" @click="addAppMenu(data,item, '新增同级菜单', 'add-tj')">
+                                    <div>
+                                      <img :src="item.preview" />
+                                    </div>
+                                    <p class="add-menu-type-label">{{item.label}}</p>
+                                  </div>
+                            </div>
+                          </div>
+                          <template v-slot: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></template>
+                        </el-popover>
+                        <el-popover
+                          popper-class="manage-menu-popover"
+                          placement="right-start"
+                          trigger="hover">
+                          <div class="add-menu-container">
+                            <div>选择新增菜单类型</div>
+                            <div class="add-type">
+                                  <div v-for="item in addMenuTypeList" class="add-menu-type__item" :key="item.value" @click="addAppMenu(data,item, '新增下级菜单', 'add-xj')">
+                                    <div>
+                                      <img :src="item.preview" />
+                                    </div>
+                                    <p class="add-menu-type-label">{{item.label}}</p>
+                                  </div>
+                            </div>
+                          </div>
+                          <template v-slot: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></template>
+                          <!-- <el-dropdown-item slot="reference" class="app-config-item"><i class="el-icon-bottom"></i>新增下级菜单</el-dropdown-item> -->
+                        </el-popover>
+                      </el-dropdown-menu></template>
+                    </el-dropdown>
+                  </div></template>
+              </el-tree>
+              <!-- <el-menu
+                :default-active="currentModuleId"
+                :default-openeds="defaultOpenMenuId"
+                class="el-menu-vertical"
+                :unique-opened="true"
+                @open="openMenuFn"
+              >
+                <draggable
+                class="draggable-menu-con"
+                  v-model="serviceMenu"
+                  group="description"
+                  ghostClass="epx-page-designer-widget-tree__drag-ghost"
+                  :animation="300"
+                  @change="changeLog"
+                >
+                  <template  v-for="item in serviceMenu" :key="item.ID">
+                    <epx-manage-menu-item v-if="item.HIDDEN_MENU!=='1'" :module="item" :select="handleSelect" :menuFontSize="menuFontSize"></epx-manage-menu-item>
+                  </template>
+                </draggable>
+              </el-menu> -->
+              <div class="add-menu">
+                <el-popover
+                  ref="popover"
+                  popper-class="manage-menu-popover"
+                  placement="right"
+                  trigger="click"
+                  >
+                  <div class="add-menu-container">
+                    <div>选择新增菜单类型</div>
+                    <div class="add-type">
+                          <div v-for="item in addMenuTypeList" class="add-menu-type__item" :key="item.value" @click="chooseMenuType(item)">
+                            <div>
+                              <img :src="item.preview" />
+                            </div>
+                            <p class="add-menu-type-label">{{item.label}}</p>
+                          </div>
+                    </div>
+                  </div>
+                  <template v-slot:reference><el-button style="paddingLeft:20px" type="primary" link>
+                    <i class="el-icon-plus"></i>
+                      新增菜单
+                  </el-button></template>
+                </el-popover>
+              </div>
+            </template>
+            <div v-else class="no-menu">
+              <i class="epx-icon-color-kong"></i>
+              <div>暂无菜单</div>
+              <div class="no-menu-add-menu">
+                <el-popover
+                  ref="popover"
+                  popper-class="manage-menu-popover"
+                  placement="right"
+                  :offset="10"
+                  trigger="click"
+                  >
+                  <div class="add-menu-container">
+                    <div>选择新增菜单类型</div>
+                    <div class="add-type">
+                          <div v-for="item in addMenuTypeList" class="add-menu-type__item" :key="item.value" @click="chooseMenuType(item)">
+                            <div>
+                              <img :src="item.preview" />
+                            </div>
+                            <p class="add-menu-type-label">{{item.label}}</p>
+                          </div>
+                    </div>
+                  </div>
+                  <!-- 无菜单时新增 -->
+                  <!-- <el-button v-popover:popover style="width:100%" type="primary" @click="addMenuMenual"> -->
+                  <template v-slot:reference><el-button style="width:100%" type="primary">
+                    <i class="el-icon-plus"></i>
+                      新增菜单
+                  </el-button></template>
+                </el-popover>
+              </div>
+            </div>
+          <slot></slot>
+        </el-col>
+      </el-row>
+      <slot name="footer"></slot>
+      <!-- <el-popover
+        ref="popover"
+        popper-class="manage-menu-popover"
+        placement="right"
+        :offset="10"
+        trigger="manual"
+        v-model:visible="popoverManualVisible"
+        >
+        <div class="add-menu-container">
+          <div>选择新增菜单类型</div>
+          <div class="add-type">
+                <div v-for="item in addMenuTypeList" class="add-menu-type__item" :key="item.value" @click="chooseMenuType(item)">
+                  <div>
+                    <img :src="item.preview" />
+                  </div>
+                  <p class="add-menu-type-label">{{item.label}}</p>
+                </div>
+          </div>
+        </div>
+      </el-popover> -->
+        <el-dialog
+          :title="dialogTitle"
+          v-model="showEditAppDialog"
+          class="popup-dialog"
+          :append-to-body="true"
+          :width="this.dialogWidth + 'px'"
+          @close="this.showEditAppDialog = false"
+        >
+          <div class="epx-add-form__check-dialog">
+            <div>
+                <div v-if="editType === 'menu-rename'">
+                  <div style="width:300px;margin:auto;marginBottom:20px">
+                    <el-input v-model="inputAppName" clearable placeholder="请输入要修改的菜单名称"></el-input>
+                  </div>
+                </div>
+                <div v-else-if="editType === 'menu-sq'" class="role-system__content">
+                  <el-checkbox-group v-model="checkRoleList">
+                    <el-checkbox v-for="item in appAllRoleList" :key="item.ID" :label="item.ID" :value="item.ID">{{item.NAME}}
+                      <el-tag size="small" v-if="item.TYPE==='client'">通用</el-tag>
+                    </el-checkbox>
+                  </el-checkbox-group>
+                </div>
+            </div>
+            <div class="epx-add-form__sign-buttongroup">
+              <el-button size="middle" type="primary" @click="editAppDialog">{{$t('determine')}}</el-button>
+              <el-button size="middle" @click="showEditAppDialog = false">{{$t('return')}}</el-button>
+            </div>
+          </div>
+        </el-dialog>
+  </div>
+</template>
+
+<script>
+import Menu from '@epxing/components/src/menu/Menu.vue'
+// import draggable from '@epxing/core/src/components/draggable'
+export default {
+  name: 'epx-manager-menu',
+  extends: Menu,
+  props: {
+    terminal: String
+  },
+  computed: {
+    $isMobile () {
+      return this.terminal === 'mobile'
+    },
+    navType () {
+      const appConfig = this.appConfig.APP_CONFIG ? JSON.parse(this.appConfig.APP_CONFIG) : {}
+      return this.terminal === 'mobile' || appConfig.navType === '3' ? '0' : appConfig.navType
+    }
+  },
+  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') }
+      // ],
+      dialogWidth: '610',
+      navAppType: '',
+      editMenuInfo: {},
+      serviceMenu: [],
+      addMenuData: {},
+      dragOptions () {
+        return {
+          animation: 200,
+          group: 'description',
+          // disabled: false,
+          ghostClass: 'ghost'
+        }
+      },
+      props: {
+        label: 'title',
+        children: 'children'
+      },
+      currentNodeId: '',
+      // expendIdArr: [],
+      appAllRoleList: [],
+      checkRoleList: [],
+      popoverManualVisible: false
+    }
+  },
+  // provide () {
+  //   return {
+  //     $editAppMenu: this.editAppMenu,
+  //     $addAppMenu: this.addAppMenu,
+  //     $reloadMenu: this.reloadMenu
+  //   }
+  // },
+  watch: {
+    modules: {
+      handler (v) {
+        this.serviceMenu = [...v]
+        // if (v.length > 0) {
+        //   this.expendIdArr = [v[0].id]
+        // }
+        this.judgeClickMenu()
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    // addMenuMenual (e) {
+    // if (this.popoverManualVisible) {
+    //   this.popoverManualVisible = false
+    //   return
+    // }
+    // this.popoverManualVisible = false
+    // this.$refs.popover.doDestroy(true)
+    // this.$nextTick(() => {
+    //   this.$refs.popover.referenceElm = e.target
+    //   this.popoverManualVisible = 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
+        })
+    },
+    treeNodeClick (node, data) {
+      if (node.isLeaf) {
+        this.currentNodeId = data.id
+        this.handleSelect(data)
+      }
+    },
+    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
+        }
+      }
+    },
+    nodeDrop (node, current, type, event) {
+      // 获取当前节点结束后的父节点
+      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
+      }
+      const parentNode = this.getTreeModuleNode(this.serviceMenu, parentId) || { children: [...this.serviceMenu] }
+      modules = [...parentNode.children]
+      // 获取其父节点的所有子节点
+      const str = modules.reduce((str, item, index) => (str += (item.id || item.ID) + ':' + index + ','), '')
+      // const str1 = modules.reduce((str, item, index) => (str += (item.title || item.ID) + ':' + index + ','), '')
+      // console.log(str1)
+      // 递归获取id为parentId的节点
+      this.$http.$post({
+        action: 'moveTree',
+        entityId: 'FM_MODULE',
+        id: node.data.id || node.data.ID,
+        selfAttriName: 'ID',
+        newParentId: parentId,
+        orderString: str,
+        orderAtrriName: 'ORDER_NUM'
+      })
+        .then(() => {
+
+        })
+        .catch(err => {
+          this.$message.error(err.message || '拖拽排序失败')
+          this.$reloadMenu()
+        })
+    },
+    // changeLog (e) {
+    //   console.log(e)
+    //   if (e.added || e.moved) {
+    //     let node = {}
+    //     // let isAdd = false
+    //     if (e.added) {
+    //       // isAdd = true
+    //       node = e.added.element
+    //     } else {
+    //       node = e.moved.element
+    //     }
+
+    //     const parentId = this.$tab.moduleId
+    //     // 获取其父节点的所有子节点orderString
+    //     const str = this.serviceMenu.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()
+    //       })
+    //   }
+    // },
+    judgeClickMenu () {
+      // 一级导航菜单信息后点击查看该新增菜单信息
+      if (this.editType === 'add-tj' || this.editType === 'add-xj') {
+        const nav = this.findClickMenuItem(this.modules, this.addMenuData.ID)
+        if (nav) {
+          this.editType = ''
+          this.handleSelect(nav)
+        }
+      }
+    },
+    findClickMenuItem (arr, id) {
+      for (const node of arr) {
+        if (node.ID === id) {
+          return node
+        }
+        if (node.children.length > 0) {
+          const foundNode = this.findClickMenuItem(node.children, id)
+          if (foundNode) {
+            return foundNode
+          }
+        }
+      }
+      return null
+    },
+    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'))
+              this.reloadMenu()
+              // this.$emit('clearPage')
+              this.backModule()
+            })
+        })
+    },
+    getSubIds (idArr = [], data) {
+      data.forEach(item => {
+        idArr.push(item.id)
+        if (item.children) {
+          this.getSubIds(idArr, item.children)
+        }
+      })
+    },
+    addAppMenu (nav, menuTypeItem, name, type) {
+      // const { nav, menuTypeItem, name, type } = obj
+      this.editMenuInfo = { ...nav }
+      this.editType = type
+      const defaultValue = {}
+      // 这里的add-nav-menu为新增同级菜单
+      defaultValue.UP_ID = 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)
+    },
+    editAppMenu (nav, name, type, width) {
+      // console.log(obj)
+      // const { nav, name, type, width } = obj
+      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 === 'add-tj' || type === 'add-xj') {
+          const defaultValue = {}
+          defaultValue.UP_ID = type === 'add-tj' ? nav.parent : nav.id
+          const query = {
+            openType: '2',
+            pageType: 'ADD',
+            flag: 'v_service_menu_add_mobile',
+            metaId: 'FM_MODULE',
+            defaultValue: defaultValue,
+            title: name,
+            SYSTEM: this.SYSTEM,
+            CLIENT: this.CLIENT,
+            serviceId: this.appConfig.ID,
+            callback: this.reloadMenu
+          }
+          this.$createPage(query)
+          return
+        } 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)
+          this.checkRoleList = []
+          this.showEditAppDialog = true
+          this.getSqList()
+          return
+        }
+        this.dialogWidth = width || '610'
+        this.showEditAppDialog = true
+      }
+    },
+    getSqList () {
+      this.$http.list({
+        entityId: 'FM_ROLE_MODULE',
+        'scope.MODULE': this.editMenuInfo.id
+      })
+        .then(data => {
+          this.checkRoleList = data.entitys.map(item => item.ROLE)
+        })
+    },
+    getUserServiceMenu () {
+      let { roleId, role } = this.$route.params
+      if (!roleId) {
+        const { roles = {} } = this.user
+        const currentRole = Object.entries(roles).find(([key, item]) => item.CODE === role) || []
+        roleId = currentRole[0]
+      }
+      const { ID } = this.appConfig
+      this.$http.get({
+        action: 'getUserServiceMenu',
+        entityId: 'FM_MODULE',
+        serviceId: ID,
+        roleId,
+        mode: this.$isMobile ? 'move' : 'pc'
+      })
+        .then(data => {
+          const menu = data ? [...data] : []
+          this.$store.commit('SET_MENUS', menu)
+          this.serviceMenu = menu
+          this.$emit('change-menu', menu)
+        })
+    },
+    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 => {
+            if (this.$tab.moduleId) {
+              this.$emit('updateMenu', this.$tab.moduleId)
+            } else {
+              this.getUserServiceMenu()
+            }
+            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 || '操作失败')
+          })
+      }
+    },
+    reloadMenu (v) {
+      // navType :0 左侧模式
+      if (this.$tab.moduleId && this.navType !== '0') {
+        if (this.editType === 'add-tj' || this.editType === 'add-xj') {
+          this.addMenuData = v
+        }
+        this.$emit('updateMenu', this.$tab.moduleId)
+      } else {
+        // 导航模式为左侧模式时需更新所有菜单
+        this.getUserServiceMenu()
+      }
+    },
+    chooseMenuType (item) {
+      const defaultValue = {}
+      if (this.$tab.moduleId && this.navType !== '0') {
+        defaultValue.UP_ID = this.$tab.moduleId
+      }
+      // 新增菜单
+      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' } : {}),
+        defaultValue: defaultValue,
+        openType: '2',
+        callback: this.reloadMenu
+      }
+      const popover = this.$refs.popover
+      if (popover)popover.doClose()
+      // this.popoverManualVisible = false
+      this.$createPage(query)
+    }
+  },
+  created () {
+    this.getClientSystemAppRole()
+    if (this.modules) {
+      this.serviceMenu = [...this.modules]
+    } else {
+      this.getUserServiceMenu()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.manage-menu-row{
+  box-sizing: border-box;
+    // height: 100%;
+    // overflow: auto;
+    // padding-bottom: 60px;
+}
+.add-menu{
+  // position: absolute;
+  // bottom: 0;
+  // left: 0;
+  box-sizing: border-box;
+  width: 100%;
+  height: 56px;
+  // padding: 10px;
+  background: var(--epx-bg-card);
+  box-shadow: 0px -2px 4px 0px rgba(0,0,0,0.15);
+}
+.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;
+  line-height: 19px;
+  font-weight: 500;
+}
+.add-menu-type__item {
+  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;
+    }
+  }
+}
+.draggable-menu-con{
+  padding-bottom: 20px;
+}
+.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;
+  }
+}
+.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);
+  }
+}
+.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;
+}
+
+// 菜单样式
+.tree-node {
+  line-height: 48px;
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: var(--epx-font-size-base);
+  padding-right: 8px;
+  color: var(--epx-text);
+  width: 100%;
+  box-sizing: border-box;
+}
+.tree-node i{
+  margin-right: 8px;
+}
+.tree-wrap{
+
+    :deep(.el-tree-node__content) {
+      height: auto;
+      &:hover {
+        @include bg_color_primary(0.2);
+        .setting-btn{
+          visibility: visible;
+        }
+      }
+    }
+    :deep(.el-tree-node__content>.el-tree-node__expand-icon) {
+      padding: 0;
+    }
+
+}
+.setting-btn{
+  width: 20px;
+  display: inline-block;
+  visibility: hidden;
+  font-size: var(--epx-font-size-l);
+  text-align: right;
+}
+.mycons {
+  padding: 0;
+}
+.tree-content-panel {
+  display: inline-block;
+  width: calc(100% - 20px);
+  overflow: hidden;
+}
+.tree-active {
+  @include bg_color_primary(0.1);
+  @include font_color_primary;
+}
+.tree-content-panel-span {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  & span{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+}
+.rotate {
+  transform-origin: center center; //旋转中心要是正中间 才行
+  transform: rotate(180deg);
+  -webkit-transform: rotate(180deg);
+  -moz-transform: rotate(180deg);
+  -ms-transform: rotate(180deg);
+  -o-transform: rotate(180deg);
+  transition: transform 0.2s; //过度时间 可调
+  -moz-transition: -moz-transform 0.2s;
+  -moz-transition: -moz-transform 0.2s;
+  -o-transition: -o-transform 0.2s;
+  -ms-transition: -ms-transform 0.2s;
+}
+.rotate1 {
+  transform-origin: center center;
+  transform: rotate(0deg); //返回原点
+  -webkit-transform: rotate(0deg);
+  -moz-transform: rotate(0deg);
+  -ms-transform: rotate(0deg);
+  -o-transform: rotate(0deg);
+  transition: transform 0.2s;
+  -moz-transition: -moz-transform 0.2s;
+  -moz-transition: -moz-transform 0.2s;
+  -o-transition: -o-transform 0.2s;
+  -ms-transition: -ms-transform 0.2s;
+}
+
+.no-menu{
+  text-align: center;
+  color: var(--epx-text-secondary);
+  padding-top: 20px;
+  .epx-icon-color-kong{
+    font-size: 120px;
+  }
+}
+.no-menu-add-menu{
+  box-sizing: border-box;
+  width: 100%;
+  padding: 10px;
+}
+</style>