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

package/src/base/ClientModuleIndex.vue

@@ -0,0 +1,437 @@
+<template>
+<!-- 左侧菜单 -->
+  <div class="container">
+    <!-- 菜单 -->
+    <div class="menu">
+      <div class="menu-inner">
+        <div class="menu-keyword">
+          <el-input v-model="menuKeyword" size="middle" prefix-icon="el-icon-search" :placeholder="$t('keyword')" @update:model-value="getClient"></el-input>
+        </div>
+        <div class="add-client">
+          <el-button type="primary" link @click="addClient">+ {{$t('Add New Customer')}}</el-button>
+        </div>
+        <ul class="menu-list">
+          <li :class="['menu-item', client.ID===activeClient.ID && 'menu-item__active']" v-for="client in clientList" :key="client.ID" @click="switchMenu(client)">
+            {{client['NAME#'] || client.NAME}}
+            <el-dropdown class="menu-item-operate">
+              <span class="el-dropdown-link">
+                <i class="el-icon-more" ></i>
+              </span>
+              <template v-slot:dropdown><el-dropdown-menu>
+                <el-dropdown-item @click="editClient(client)">{{$t('edit')}}</el-dropdown-item>
+                <el-dropdown-item @click="deleteClient(client)">{{$t('delete')}}</el-dropdown-item>
+              </el-dropdown-menu></template>
+            </el-dropdown>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <!-- 右侧内容 -->
+    <div class="content">
+      <!-- 页面路由 -->
+      <epx-router-view ref="routerView" inline></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="route.component" :current-query="item" :config="config"></epx-page>
+      </template> -->
+    </div>
+  </div>
+</template>
+
+<script>
+// import { SET_ROUTER_QUERY } from '@epxing/core/src/store/actions'
+export default {
+  name: 'epx-base-client-module-index',
+  navConfigs: {
+    flag: false
+  },
+  data () {
+    return {
+      menuKeyword: '',
+      clientList: [],
+      activeClient: {},
+      applicationList: [],
+      config: {},
+      showPage: true,
+      routers: []
+    }
+  },
+  computed: {
+    route () {
+      const routers = [...this.routers]
+      return routers.pop()
+    },
+    showIndex () {
+      let showIndex = -1
+      const routers = [...this.routers]
+      routers.forEach((item, index) => {
+        if (this.$_.isEqual(item, this.route)) {
+          showIndex = index
+        }
+      })
+      return showIndex
+    }
+  },
+  provide () {
+    return {
+      $changeRouter: this.changeRouter,
+      $reloadPage: this.reloadPage,
+      $backPage: this.back
+    }
+  },
+  methods: {
+    changeRouter (v) {
+      const { router } = v
+      this.routers.push(router)
+      if (router.moduleId || router.pageId) {
+        this.$emit('changeRouter', v)
+      }
+    },
+    back () {
+      console.log(this.routers)
+      // if ((this.isShow)) {
+      if (this.routers.length <= 0) {
+        this.$emit('back')
+      } else {
+        this.routers.pop()
+      }
+      // } else {
+      //   this.$emit('back')
+      // }
+    },
+    reloadPage () {
+      this.showPage = false
+      this.$nextTick(() => {
+        this.showPage = true
+      })
+      this.getTreeModule()
+    },
+    getClient () {
+      this.$http.list({
+        entityId: 'FM_CLIENT',
+        'scope.NAME#like': this.menuKeyword,
+        order_field: 'ORDER_NUM',
+        order_mode: 'ASC'
+      })
+        .then(data => {
+          this.clientList = [...data.entitys]
+          // 如果clientList存在
+          const client = this.clientList.find(item => item.ID === this.activeClient.ID)
+          if (!client) {
+            this.activeClient = this.clientList[0] || {}
+            const routerView = this.$refs.routerView
+            if (routerView) {
+              routerView.createPage({
+                component: 'base-client-module-applicaton',
+                clientId: this.clientList[0].ID
+              })
+            }
+          }
+        })
+    },
+    switchMenu (client) {
+      this.activeClient = client || {}
+      const routerView = this.$refs.routerView
+      if (routerView) {
+        routerView.createPage({
+          component: 'base-client-module-applicaton',
+          clientId: client.ID
+        })
+      }
+    },
+    openSettingPage (application) {
+      const { CONFIG_MENU } = this.config
+      this.$createPage({
+        openType: '1',
+        title: application.NAME + this.$t('configuration'),
+        moduleId: CONFIG_MENU,
+        query: {
+          SYSTEM: application.ID,
+          MENU: application.MENU
+        }
+      })
+    },
+    addClient () {
+      const that = this
+      const routerView = this.$refs.routerView
+      if (routerView) {
+        routerView.createPage({
+        // openType: '2',
+          metaId: 'FM_CLIENT',
+          flag: 'client_add',
+          component: 'add',
+          pageType: 'ADD',
+          callback () {
+            that.getClient()
+          }
+        })
+      }
+    },
+    editClient (client) {
+      const that = this
+      const routerView = this.$refs.routerView
+      if (routerView) {
+        routerView.createPage({
+          metaId: 'FM_CLIENT',
+          flag: 'v_add',
+          component: 'add',
+          pageType: 'EDIT',
+          id: client.ID,
+          callback () {
+            that.getClient()
+          }
+        })
+      }
+    },
+    deleteClient (client) {
+      this.$confirm(this.$t('Confirm the deletion') + '?')
+        .then(() => {
+          this.$http.removeMulti({
+            entityId: 'FM_CLIENT',
+            ids: client.ID
+          })
+            .then(() => {
+              this.$message.success(this.$t('deleted successfully'))
+              this.getClient()
+            })
+            .catch(err => {
+              this.$message.error(err.message || this.$t('Delete failed'))
+            })
+        })
+    }
+  },
+  created () {
+    this.getClient()
+  },
+  mounted () {
+    // 注：这三个「不带 handler 的 off」是**挂载时**的既有行为（效果是"push/pop 只有最后挂载的那个
+    // 说了算"），属既有缺陷、不在 Task 17 的内存范畴内，本次不动。本次只处理销毁侧（见 beforeUnmount）。
+    this.$bus.off('reload')
+    this.$bus.off('push')
+    this.$bus.off('pop')
+    // T17 修复轮 1（评审 C1）：把三个 handler 存成实例引用，好在卸载时**按引用**精确摘掉自己这几个
+    // ⚠️ 这一段原来整体是坏的，与 `EntityTreeManage.vue` 同一根因（那边有更详细的说明）：
+    // `createPage` / `pushMenuRoute` / `popMenuRoute` **都只定义在 `@epxing/core/src/Container.vue`**，
+    // 而本组件**无 mixins/extends** ⇒ 三个全是 `undefined`，push 与 pop 都会抛。
+    // 改用平台现行的全局方法 `$createPage` / `$backPage`（已核：它们所在的文件一处 `$bus` 都没有，
+    // 不会回头再 emit push/pop，无递归）。
+    // 原来那句 `this.$bus.off('push')` 是为了「首次开页后让位给 pushMenuRoute」，本组件没有它 ⇒
+    // 只会让第 2 次及以后的 push 无人接管，一并去掉。
+    // 注：本组件另有一套已在工作的开页写法 `this.$refs.routerView.createPage({...})`（:123/:135），
+    // 那条走的是 RouterView 实例方法，与总线无关，不受本次改动影响。
+    this.busPushHandler = (route) => {
+      this.routers.push(route)
+      if (route.moduleId || route.pageId) {
+        this.$createPage(route)
+      }
+    }
+    this.busPopHandler = () => {
+      if ((this.isShow)) {
+        this.routers.pop()
+        if (this.routers.length <= 0) {
+          this.$backPage()
+        }
+      } else {
+        this.$backPage()
+      }
+    }
+    this.busReloadHandler = () => {
+      this.showPage = false
+      this.$nextTick(() => {
+        this.showPage = true
+      })
+    }
+    this.$bus.on('push', this.busPushHandler)
+    this.$bus.on('pop', this.busPopHandler)
+    this.$bus.on('reload', this.busReloadHandler)
+  },
+  beforeUnmount () {
+    // ⚠️ T17 修复轮 1（评审 C1）：原来是「不带 handler 的 off（删光该事件全部监听）+ 反手把 5 个
+    // 绑在**正在销毁的实例**上的 handler 重新钉回全局总线」。$bus 是全应用单例，这等于让总线
+    // 强引用刚卸载的整棵页面树，每关一次累加 5 个 —— 一条**新增的保活链**，而且全程不抛错
+    // （在死实例上赋值只是静默无效），所以「错误多重集没变」那条证据对它天然免疫。
+    // 现在只按引用摘掉自己注册过的那几个（identity 匹配，不会连坐删掉兄弟标签的监听），
+    // 并且**不再重新注册任何东西**。
+    // ⚠️ T17 修复轮 2（定向复审 N1）：这里原来还有一行 `off('push', this.pushMenuRoute)`。
+    // `pushMenuRoute` 在本组件里恒为 `undefined`（见 mounted 的说明），而 `vue.bus.js` 的 off
+    // 判的是 `if (!callback)` ⇒ `off(e, undefined)` 走「删光该事件全部监听」那条分支，
+    // **与裸 off 完全等价**，把刚补上的 identity 匹配又抵消掉了。上面那条注册已一并删除，
+    // 所以这里也没有对应的东西要摘。
+    // ⚠️ N6：handler 已被置 null 时（beforeUnmount 因故跑第二次、或 mounted 未跑完就卸载）
+    // `off(e, null)` 同样退化成全量删，所以每条都先判非空。
+    if (this.busPushHandler) this.$bus.off('push', this.busPushHandler)
+    if (this.busPopHandler) this.$bus.off('pop', this.busPopHandler)
+    if (this.busReloadHandler) this.$bus.off('reload', this.busReloadHandler)
+    this.busPushHandler = null
+    this.busPopHandler = null
+    this.busReloadHandler = null
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.container {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  display: flex;
+}
+.menu {
+  width: 280px;
+  height: 100%;
+  overflow-x: visible;
+  background-color: #f6f9fb;
+  border-right: solid 1px #ededed;
+  position: relative;
+}
+.menu-inner {
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+}
+
+.menu-keyword {
+  padding:16px 16px 0;
+}
+.add-client {
+  line-height: 45px;
+  text-align: center;
+  min-height: 20px;
+}
+
+.menu-item {
+  line-height: 45px;
+  color: var(--epx-text);
+  padding-left: 40px;
+  cursor: pointer;
+  &:hover {
+    @include bg_color_primary(.1);
+    @include font_color_primary;
+    .menu-item-operate {
+      display: block;
+    }
+  }
+  &.menu-item__active {
+    @include bg_color_primary(.1);
+    @include font_color_primary;
+    position: relative;
+    &::before {
+      content: '';
+      position: absolute;
+      left: 0;
+      width: 4px;
+      height: 100%;
+      @include bg_color_primary
+    }
+  }
+}
+
+.menu-item-operate {
+  display: none;
+  float: right;
+  margin-right: 12px;
+  font-size: 18px;
+}
+
+.menu-active__arrow {
+  border: 10px solid red;
+  border-color:  transparent transparent transparent red;
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translate(100%, -50%);
+}
+
+.content {
+  background: var(--epx-bg-card);
+  flex: 1;
+  height: 100%;
+  box-sizing: border-box;
+  padding-top: 19px;
+
+}
+
+.application-list {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.application-item {
+  width: 16%;
+  min-width: 200px;
+  box-sizing: border-box;
+  height: 188px;
+  padding:  20px;
+  margin-bottom: 20px;
+  position: relative;
+}
+
+.application-module {
+  position: absolute;
+  width: 180px;
+  left: 50%;
+  margin-left: -90px;
+  height: auto;
+  &:hover {
+    box-shadow: 1px 2px 5px rgba(21, 21, 21, 0.1);
+
+  }
+}
+
+.application-module:hover .module-operates {
+  display: flex;
+}
+
+.add-application {
+  cursor: pointer;
+  .application-module {
+    &:hover {
+      box-shadow: none;
+    }
+  }
+  .module-icon {
+    color: var(--epx-text-secondary);
+  }
+}
+
+.module-inner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 16px 0;
+}
+.module-icon {
+  @include font_color_primary;
+  font-size: 86px;
+  line-height: 1;
+  margin-bottom: 16px;
+}
+
+.module-operates {
+  display: none;
+  width: 100%;
+  background-color: #f6f9fb;
+  &>span, .el-dropdown {
+    flex: 1;
+    line-height: 50px;
+    text-align: center;
+    cursor: pointer;
+  }
+}
+
+.module-add:hover .module-operates-two {
+  display: flex;
+}
+.module-operates-two {
+  display: none;
+  width: 100%;
+  background-color: #f6f9fb;
+  &>span, .el-dropdown {
+    flex: 1;
+    line-height: 50px;
+    text-align: center;
+    cursor: pointer;
+  }
+}
+</style>