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

package/src/base/ClientApplication.vue

@@ -0,0 +1,447 @@
+<template>
+<div class="content" v-loading.lock="loading">
+    <!-- 页面 -->
+    <ul class="application-list">
+    <li class="application-item" v-for="application in applicationList" :key="application.ID">
+        <div class="application-module">
+        <div class="module-inner">
+            <i :class="['module-icon', application.ICON || 'el-icon-s-platform']"></i>
+            <span class="module-text">{{application['NAME#'] || application.NAME}}</span>
+        </div>
+        <div class="module-operates">
+            <span @click="openDefaultApp(application)">{{$t('open')}}</span>
+            <span @click="openSettingPage(application)">{{$t('configuration')}}</span>
+            <el-dropdown>
+            <span class="el-dropdown-link">
+                <i class="el-icon-more" ></i>
+            </span>
+            <template v-slot:dropdown><el-dropdown-menu>
+                <!-- <el-dropdown-item @click="openDefaultApp(application)">打开默认应用</el-dropdown-item> -->
+                <el-dropdown-item @click="editApplication(application)">{{$t('edit')}}</el-dropdown-item>
+                <el-dropdown-item @click="deleteApplication(application)">{{$t('delete')}}</el-dropdown-item>
+                <el-dropdown-item @click="importDialogVisible=application">{{$t('Import the configuration')}}</el-dropdown-item>
+                <el-dropdown-item @click="exportConfig(application)">{{$t('Export the configuration')}}</el-dropdown-item>
+            </el-dropdown-menu></template>
+            </el-dropdown>
+        </div>
+        </div>
+    </li>
+    <li class="application-item add-application" >
+        <!-- <div class="module-add" @click="addApplication"> -->
+        <div class="module-add">
+        <div class="module-inner">
+            <i :class="['module-icon', 'el-icon-circle-plus']"></i>
+            <span class="module-text">{{$t('Add application')}}</span>
+        </div>
+        <div class="module-operates-two">
+            <span @click.stop="chooseApplication()">{{$t('selection')}}</span>
+            <span @click.stop="addApplication()">{{$t('creation')}}</span>
+        </div>
+        </div>
+        </li>
+    </ul>
+    <el-dialog
+      :title="$t('Uploading a Configuration File')"
+      v-model="importDialogVisible"
+      width="380px"
+    >
+      <el-upload
+        class="upload-demo"
+        action=""
+        drag
+        :http-request="uploadFile"
+        :limit="1"
+        >
+         <i class="el-icon-upload"></i>
+        <div class="el-upload__text">{{$t('Drag the file here')}}，{{$t('or')}}<em>{{$t('Click on the upload')}}</em></div>
+      </el-upload>
+      <template v-slot:footer><span class="dialog-footer">
+        <el-button @click="importDialogVisible = false">{{$t('cancel')}}</el-button>
+        <el-button type="primary" @click="importConfig">{{$t('determine')}}</el-button>
+      </span></template>
+    </el-dialog>
+</div>
+</template>
+
+<script>
+export default {
+  name: 'epx-base-client-module-applicaton',
+  props: {
+    currentQuery: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    config: {
+      type: Object,
+      default () {
+        return {}
+      }
+    }
+  },
+  data () {
+    return {
+      clientId: '',
+      applicationList: [],
+      importDialogVisible: false,
+      fileList: [],
+      file: null,
+      loading: false
+    }
+  },
+  methods: {
+    chooseApplication () {
+      this.$createPage({
+        component: 'base-client-choose-applicaton',
+        clientId: this.clientId
+      })
+    },
+    getApplication () {
+      const ID = this.clientId
+      if (!ID) return
+      this.$http.list({
+        entityId: 'FM_SYSTEM',
+        'scope.CLIENT': ID,
+        link: 'serve|left join',
+        order_field: 'ORDER_NUM',
+        order_mode: 'ASC'
+      })
+        .then(data => {
+          this.applicationList = [...data.entitys]
+        })
+    },
+    openDefaultApp (application) {
+      // 获取该系统的默认应用
+      this.$http.find({
+        entityId: 'FM_SERVICE',
+        link: 'system,client',
+        'scope.SYSTEM': application.ID,
+        'scope.DEFAULT_FLAG': '1'
+      })
+        .then(data => {
+          if (data && data.data) {
+            const item = data.data
+            const url = `${application['SERVE|FIRST_PAGE']}app/${item['CLIENT|CODE']}/${item['SYSTEM|CODE']}/${item.CODE}`
+            this.$util.openWindow(url)
+          } else {
+            this.$message.error(this.$t('No default application was created'))
+          }
+        })
+    },
+    openSettingPage (application) {
+      // const { CONFIG_MENU } = this.config
+      // this.$createPage({
+      //   openType: '1',
+      //   title: application.NAME + '配置',
+      //   moduleId: CONFIG_MENU,
+      //   query: {
+      //     SYSTEM: application.ID,
+      //     MENU: application.MENU
+      //   }
+      // })
+      // this.$store.commit('CREATE_TAB', {
+      //   title: application.NAME + '配置',
+      //   moduleId: CONFIG_MENU,
+      //   component: 'base-config-module-index',
+      //   SYSTEM: application.ID,
+      //   MENU: application.MENU,
+      //   CLIENT: this.clientId
+      // })
+      this.$http.get({
+        action: 'hasMangeService',
+        entityId: 'FM_USER',
+        querySystem: application.ID
+      })
+        .then(data => {
+          this.manageRight = data
+          if (data.systemServiceId) {
+            const rootPath = this.$util.getRootPath()
+            this.$util.openWindow(rootPath + '/app/' + data.systemServiceId + `?system=${application.ID}&client=${application.CLIENT}`)
+          } else {
+            this.$message.error(this.$t('No access'))
+          }
+        })
+    },
+    addApplication () {
+      const that = this
+      const submitParams = {
+        'bean.CLIENT': this.clientId
+      }
+      const fieldConfigs = {
+        CLIENT: {
+          state: 'HIDDEN'
+        }
+      }
+      this.$createPage({
+        // openType: '2',
+        metaId: 'FM_SYSTEM',
+        flag: 'v_subadd',
+        component: 'sub-add',
+        pageType: 'ADD',
+        submitParams,
+        fieldConfigs,
+        backCallBack () {
+          that.getApplication()
+        }
+      })
+    },
+    editApplication (application) {
+      const that = this
+      const submitParams = {
+        'bean.CLIENT': this.clientId
+      }
+      const fieldConfigs = {
+        CLIENT: {
+          state: 'DETAIL'
+        }
+      }
+      this.$createPage({
+        // openType: '2',
+        metaId: 'FM_SYSTEM',
+        flag: 'v_subadd',
+        component: 'sub-add',
+        pageType: 'EDIT',
+        id: application.ID,
+        submitParams,
+        fieldConfigs,
+        backCallBack () {
+          that.getApplication()
+        }
+      })
+    },
+    deleteApplication (application) {
+      this.$confirm(this.$t('Confirm the deletion') + '?')
+        .then(() => {
+          this.$http.removeMulti({
+            entityId: 'FM_SYSTEM',
+            ids: application.ID
+          })
+            .then(() => {
+              this.$message.success(this.$t('deleted successfully'))
+              this.getApplication()
+            })
+            .catch(err => {
+              this.$message.error(err.message || this.$t('Delete failed'))
+            })
+        })
+    },
+    uploadFile ({ file }) {
+      this.file = file
+    },
+    importConfig (application) {
+      this.loading = true
+      this.importDialogVisible = false
+      this.$http.$post({
+        action: 'exportIn',
+        entityId: 'FM_SYSTEM',
+        systemId: this.importDialogVisible.ID,
+        file: this.file
+      })
+        .then(data => {
+          this.loading = false
+          this.$message.success(this.$t('Import success'))
+        })
+        .catch((err) => {
+          this.loading = false
+          this.$message.error(err.message || this.$t('Import failure'))
+        })
+    },
+    exportConfig (application) {
+      var a = document.createElement('a')
+      document.body.appendChild(a)
+      this.$http.$post({
+        entityId: 'FM_SYSTEM',
+        action: 'exportOut',
+        conditionId: application.ID
+      }, {
+        responseType: 'blob'
+      })
+        .then(({ blob, filename }) => {
+          const objectUrl = URL.createObjectURL(blob)
+          a.href = objectUrl
+          a.download = filename
+          a.click()
+          window.URL.revokeObjectURL(objectUrl)
+          document.body.removeChild(a)
+        })
+    }
+  },
+  created () {
+    // this.$store.commit('SWITCH_MENU_SHOW', false)
+    this.clientId = this.currentQuery.clientId
+    this.getApplication()
+  },
+  beforeUnmount () {
+    // this.$store.commit('SWITCH_MENU_SHOW', false)
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.container {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  display: flex;
+  overflow: hidden;
+}
+.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;
+      top: 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%;
+  overflow: auto;
+}
+
+.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>

package/src/base/ClientApplicationList.vue

@@ -0,0 +1,180 @@
+<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 v-if="pageConfig.editable" @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}}
+          </li>
+        </ul>
+      </div>
+    </div>
+    <!-- 右侧内容 -->
+    <div class="content">
+      <epx-router-view ref="routerView" ></epx-router-view>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'epx-base-client-application-list',
+  navConfigs: {
+    flag: false
+  },
+  editable: false,
+  data () {
+    return {
+      menuKeyword: '',
+      clientList: [],
+      activeClient: {}
+    }
+  },
+  methods: {
+    getClient () {
+      this.$http.list({
+        entityId: 'FM_MGN_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
+            routerView.createPage({
+              component: 'client-app-item',
+              activeClient: this.activeClient
+            })
+            // this.getSystemList()
+          }
+        })
+    },
+
+    switchMenu (client) {
+      this.activeClient = client || {}
+      const routerView = this.$refs.routerView
+      routerView.createPage({
+        component: 'client-app-item',
+        activeClient: this.activeClient
+      })
+      // this.getSystemList()
+    },
+    addClient () {
+      const that = this
+      const routerView = this.$refs.routerView
+      if (routerView) {
+        routerView.createPage({
+        // openType: '2',
+          metaId: 'FM_MGN_CLIENT',
+          flag: 'client_add',
+          component: 'add',
+          pageType: 'ADD',
+          callback () {
+            that.getClient()
+          }
+        })
+      }
+    }
+  },
+  created () {
+    this.getClient()
+  }
+}
+</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 {
+  padding: 12px;
+  line-height: 22px;
+  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;
+      top: 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 {
+  flex: 1;
+  height: 100%;
+  overflow: auto;
+  box-sizing: border-box;
+}
+
+</style>

package/src/base/ClientModule.vue

@@ -0,0 +1,69 @@
+<template>
+<!-- 左侧菜单 -->
+  <div class="container">
+    <!-- 右侧内容 -->
+    <div class="content">
+      <!-- 页面 -->
+      <ul class="application-list">
+        <li class="application-item" v-for="application in applicationList" :key="application.ID">
+          <div class="application-module">
+            <div class="module-inner">
+              <i :class="['module-icon', application.ICON || 'el-icon-s-platform']"></i>
+              <span class="module-text">{{application['NAME#'] || application.NAME}}</span>
+            </div>
+            <div class="module-operates">
+              <span @click="openPage(application)">{{$t('open')}}</span>
+              <span @click="openSettingPage(application)">{{$t('configuration')}}</span>
+               <el-dropdown>
+                <span class="el-dropdown-link">
+                  <i class="el-icon-more" ></i>
+                </span>
+                <template v-slot:dropdown><el-dropdown-menu>
+                  <el-dropdown-item @click="editApplication(application)">{{$t('edit')}}</el-dropdown-item>
+                  <el-dropdown-item @click="deleteApplication(application)">{{$t('delete')}}</el-dropdown-item>
+                </el-dropdown-menu></template>
+              </el-dropdown>
+            </div>
+          </div>
+        </li>
+        <li class="application-item add-application" >
+          <div class="module" @click="addApplication">
+            <div class="module-inner">
+              <i :class="['module-icon', 'el-icon-circle-plus']"></i>
+              <span class="module-text">{{$t('Add application')}}</span>
+            </div>
+          </div>
+          </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+import ClientModuleIndexVue from './ClientModuleIndex.vue'
+const _comp = {
+  name: 'epx-base-client-module',
+  extends: ClientModuleIndexVue,
+  methods: {
+    getClient () {
+      this.$http.list({
+        entityId: 'FM_CLIENT',
+        'scope.NAME#like': this.menuKeyword
+      })
+        .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]
+          }
+          this.getApplication()
+        })
+    }
+  }
+}
+// Vue2 的 extends 会沿链继承 scoped 样式的 _scopeId，Vue3 不再继承 __scopeId——本组件无自有 <style>，
+// 全部类名靠父组件的 scoped 样式；不显式继承则渲染出的 DOM 无 data-v 标记、父样式整体失配（hall/login 实测裸样）。
+_comp.__scopeId = ClientModuleIndexVue.__scopeId
+export default _comp
+</script>