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

package/src/base/ServiceMenu.vue

@@ -0,0 +1,420 @@
+<template>
+  <div class="container" @click="showPopover=null">
+    <div class="tree-list">
+      <div class="tree-header">
+        <span :class="mode==='all'?'active':''" @click="changeMenu('all')">全部</span>
+        |
+        <span :class="mode==='pc'?'active':''" @click="changeMenu('pc')">{{$t('PC port')}}</span>
+        |
+        <span :class="mode==='move'?'active':''" @click="changeMenu('move')">{{$t('mobile port')}}</span>
+      </div>
+      <div class="opera">
+        <!-- 按钮组 -->
+        <div class="button-group">
+          <el-button type="primary" size="small" @click="add">{{$t('add')}}</el-button>
+          <!-- <el-button type="primary" size="small"  @click="editEntity">{{$t('edit')}}</el-button> -->
+          <el-button type="primary" size="small"  @click="removeEntity">{{$t('delete')}}</el-button>
+        </div>
+        <!-- 查询区 -->
+        <div class="search-container">
+          <el-input
+            :placeholder="$t('enter the keyword for filtering')"
+            v-model="filterText">
+          </el-input>
+        </div>
+      </div>
+        <!-- :auto-expand-parent="false" -->
+      <el-tree class="tree" ref="tree"
+        :data="treeModule"
+        :props="{label: 'NAME', children: 'children'}"
+        :filter-node-method="filterNode"
+        :expand-on-click-node="false"
+        :current-node-key="clickItem.id"
+        node-key="id"
+        :default-expanded-keys="expandKeys"
+        :check-on-click-node="true"
+        :highlight-current="true"
+        :draggable="true"
+        @node-drop="drop"
+        @node-click="viewEntity"
+        @node-contextmenu="showContextmenu"
+        @node-expand="expandNode"
+        @node-collapse="collapseNode"
+        v-loading="loading"
+      >
+         <template v-slot="{ node, data }"><span>
+          <el-popover
+            popper-class="tree-opera-popover"
+            :value="showPopover===node.id"
+            trigger="manual"
+            placement="right-start"
+          >
+              <template v-slot:reference><span class="tree-node">
+                <!-- 图标 -->
+                <i :class="data.children.length>0? 'el-icon-folder' : 'el-icon-document'"></i>
+                <!-- 文字 -->
+                <span>{{ node.label }}</span>
+                <template v-if="mode==='all'">
+                  <el-tag class="terminal-tag" size="small" v-if="data.TERMINAL==='pc'">PC</el-tag>
+                  <el-tag class="terminal-tag" type="warning" size="small" v-if="data.TERMINAL==='move'">移动</el-tag>
+                </template>
+
+            </span></template>
+            <ul class="opera-list">
+              <li @click="add(data.id || data.ID, data.text)">{{$t('adding child nodes')}}</li>
+              <li @click="mainAdd(data)">{{$t('adding nodes of the same level')}}</li>
+              <!-- <li @click="editTheEntity(data)">{{$t('edit')}}</li> -->
+              <li @click="removeEntity(data)">{{$t('delete')}}</li>
+            </ul>
+          </el-popover>
+         </span></template>
+      </el-tree>
+    </div>
+    <!-- 手机显示切换按钮 -->
+    <!-- 右边页面内容 -->
+    <div class="content">
+      <epx-router-view :router-change="routerChange" :inline="true" ></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 EntityTree from '@epxing/business/src/components/EntityTreeManage.vue'
+export default {
+  name: 'epx-base-service-menu',
+  extends: EntityTree,
+  addPageFlag: 'v_service_menu_add_pc',
+  addPageFlagM: 'v_service_menu_add_mobile',
+  detailPageFlag: 'v_service_menu_detail_pc',
+  detailPageFlagM: 'v_service_menu_detail_mobile',
+  data () {
+    return {
+      mode: 'all',
+      loading: false,
+      expandKeys: []
+    }
+  },
+  computed: {
+    appId () {
+      return this.$query.id || this.APP
+    }
+  },
+  watch: {
+    mode (v) {
+      this.mode = v
+      this.getTreeModule()
+    }
+  },
+  methods: {
+    changeMenu (mode) {
+      if (this.mode !== mode) {
+        this.clickItem = {}
+        this.mode = mode
+        this.$store.commit('SET_TAB_QUERY', {
+          query: {
+            appMenuMode: this.mode === 'all' ? '' : this.mode
+          }
+        })
+        this.expandKeys = []
+        this.getTreeModule()
+      }
+    },
+    getTreeModule () {
+      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]
+      }
+      this.loading = true
+      // const { mode = 'pc' } = this.$configs
+      const params = {
+        action: 'getServiceAllMenu',
+        entityId: 'FM_MODULE',
+        serviceId: this.appId
+      }
+      if (this.mode !== 'all') {
+        params.mode = this.mode
+      }
+      this.$http.get(params)
+        .then(data => {
+          this.loading = false
+          this.treeModule = [...data]
+        })
+        .catch(() => {
+          this.loading = false
+        })
+    },
+    removeEntity (select) {
+      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)
+      // removeMulti
+      this.$confirm(this.$t('Confirm the deletion') + '?')
+        .then(() => {
+          this.$http.$request({
+            action: 'removeMulti',
+            entityId: 'FM_MODULE',
+            ids: idArr.join(',')
+          })
+            .then(data => {
+              this.$message.success(this.$t('deleted successfully'))
+              this.getTreeModule()
+              if (select.parent) {
+                this.expandKeys.push(select.parent)
+              }
+            })
+        })
+    },
+    viewEntity (item) {
+      this.clickItem = { id: item.id, ...item }
+      const { detailPageFlag, detailPageFlagM } = this.$configs
+      // this.load = false
+      this.pageFlag = this.mode === 'pc' ? detailPageFlag : detailPageFlagM
+      this.$emit('createPage', {
+        metaId: 'FM_MODULE',
+        flag: this.pageFlag,
+        component: 'entity-add-page',
+        pageType: 'DETAIL',
+        serviceId: this.appId,
+        id: item.id,
+        callback: this.getTreeModule
+      })
+      // this.$nextTick(() => {
+      //   this.load = true
+      // })
+      // this.expandKeys = [item.id]
+      // 添加参数
+      this.$store.commit('SET_TAB_QUERY', { query: { serviceId: this.appId } })
+    },
+    editEntity () {
+      const { id } = this.clickItem || {}
+      if (!id) {
+        this.$message.error(this.$t('please select a record'))
+        return
+      }
+      const { detailPageFlag, detailPageFlagM } = this.$configs
+      this.$emit('createPage', {
+        metaId: 'FM_MODULE',
+        flag: this.mode === 'pc' ? detailPageFlag : detailPageFlagM,
+        component: 'entity-add-page',
+        pageType: 'EDIT',
+        serviceId: this.appId,
+        id: id,
+        callback: this.getTreeModule
+      })
+      this.expandKeys = [this.clickItem.parent]
+    },
+    editTheEntity (item) {
+      this.showPopover = null
+      this.clickItem = item
+      const { detailPageFlag, detailPageFlagM } = this.configs
+      this.load = false
+      this.pageFlag = this.mode === 'pc' ? detailPageFlag : detailPageFlagM
+      this.$emit('createPage', {
+        metaId: 'FM_MODULE',
+        flag: this.pageFlag,
+        pageType: 'EDIT',
+        component: 'entity-add-page',
+        serviceId: this.appId,
+        id: item.id,
+        callback: this.getTreeModule
+      })
+      this.$nextTick(() => {
+        this.load = true
+      })
+      this.expandKeys = [item.parent]
+      // this.expandKeys.push(item.id)
+      // 添加参数
+      this.$store.commit(SET_ROUTER_QUERY, { id: item.id })
+    },
+    add (selectId, selectText) {
+      this.showPopover = null
+      const { addPageFlag, addPageFlagM } = this.configs
+      this.pageFlag = addPageFlag
+      let id = this.clickItem.id
+      let text = this.clickItem.text
+      if (typeof selectId === 'string') {
+        id = selectId
+        text = selectText
+        this.expandKeys = [selectId]
+      }
+      const field = this.defaultValueField
+      const defaultValue = { }
+      defaultValue[field] = id
+      defaultValue[field + '#'] = text
+      this.$emit('createPage', {
+        metaId: 'FM_MODULE',
+        flag: this.mode === 'pc' ? addPageFlag : addPageFlagM,
+        component: 'entity-add-page',
+        pageType: 'ADD',
+        serviceId: this.appId,
+        defaultValue: defaultValue,
+        callback: this.getTreeModule
+        // defaultValue: { UP_ID: id, 'UP_ID#': text }
+      })
+    },
+    expandNode (node) {
+      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)
+      }
+    },
+    mainAdd (data) {
+      this.clickItem = {}
+      if (data.parent) {
+        this.expandKeys = [data.id]
+        const obj = this.deepList(data.parent, this.treeModule) || {}
+        this.add(data.parent, obj.text || '')
+      } else {
+        this.add()
+      }
+    },
+    drop (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
+      }
+
+      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的节点
+      this.$http.$request({
+        action: 'moveTree',
+        entityId: 'FM_MODULE',
+        id: node.data.id || node.data.ID,
+        // selfAttriName: 'ID',
+        selfAttriName: this.selfAttriName,
+        newParentId: parentId,
+        orderString: str,
+        orderAtrriName: 'ORDER_NUM'
+      })
+        .then(data => {
+          this.showPage = false
+          this.$nextTick(() => {
+            this.showPage = true
+          })
+        })
+    }
+  },
+  created () {
+    this.$store.commit('SET_TAB_QUERY', {
+      query: {
+        appId: this.appId,
+        appMenuMode: this.mode
+      }
+    })
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.container {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  display: flex;
+}
+.tree {
+  & :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;
+
+    :deep(.el-tree-node__content) {
+      height: 30px;
+    }
+
+}
+.tree-header {
+  // @include bg_color_primary;
+  font-size: var(--epx-font-size-base);
+  line-height: 30px;
+  color: var(--epx-text);
+  padding: 8px 12px;
+  display: flex;
+  span{
+    cursor: pointer;
+    flex: 1;
+    text-align: center
+  }
+
+}
+.active{
+  @include font_color_primary;
+}
+.opera {
+  padding: 10px;
+  border-bottom: 1px solid var(--epx-border);
+}
+.button-group {
+  margin-bottom: 10px;
+}
+.tree-node {
+  line-height: 32px;
+}
+.tree-node >i{
+  @include font_color_primary;
+  margin-right: 8px;
+  font-size: var(--epx-font-size-l);
+}
+.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);
+    }
+  }
+}
+.terminal-tag {
+  margin-left: 6px;
+}
+</style>
+<style>
+.tree-opera-popover {
+  padding: 12px 0;
+  min-width: 100px;
+}
+</style>

package/src/base/ServiceMenuFormItem.vue

@@ -0,0 +1,22 @@
+<script>
+import AddFormItem from '@epxing/components/src/add-form-item'
+export default {
+  extends: AddFormItem,
+  name: 'epx-service-menu-form-item',
+  methods: {
+    cancel (finish) {
+      this.isEdit = false
+      this.$emit('cancel-edit', false)
+      this.getFieldsConfigs()
+      this.$query.callback && this.$query.callback()
+      if (finish && this.form) {
+        this.form.$refesh()
+      }
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>