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

package/src/components/AiPermissionAssistant.vue

@@ -0,0 +1,304 @@
+<template>
+  <div class="epx-ai-permission-assistant">
+    <div class="ap-content">
+      <div class="ap-empty" v-if="permissions.length === 0">
+        <i class="epx-icon-kong"></i>
+        <p>暂无对象权限</p>
+      </div>
+
+      <div class="ap-entity" v-for="(entity, ei) in permissions" :key="'entity-' + ei">
+        <div class="ap-entity-header" @click="toggle(entity)">
+          <span class="ap-entity-title">
+            对象权限：{{ entity.ENTITYNAME}}（{{entity.ENTITY}}）
+            <span class="ap-entity-count">（{{ entity.AUTHS.length }} 个权限组）</span>
+          </span>
+          <i class="el-icon-arrow-down ap-entity-toggle" :class="{ 'is-collapsed': !entity.expanded }"></i>
+        </div>
+
+        <div class="ap-entity-body" v-show="entity.expanded">
+          <div class="ap-empty-text" v-if="entity.AUTHS.length === 0">该对象暂无权限组</div>
+
+          <div class="ap-group" v-for="(group, gi) in entity.AUTHS" :key="'group-' + gi">
+            <div class="ap-group-header">
+              <el-input
+                class="ap-group-name"
+                v-model="group.NAME"
+                size="small"
+                placeholder="权限组名称"
+              ></el-input>
+              <div class="ap-group-fields">
+                <el-select v-model="group.OPEN_SCOPE" size="small" placeholder="开放范围">
+                  <el-option v-for="item in openScopeList" :key="item.code" :label="item.name" :value="item.code"></el-option>
+                </el-select>
+                <el-select v-model="group.AUTH_TYPE" size="small" placeholder="鉴权方式">
+                  <el-option v-for="item in authTypeList" :key="item.code" :label="item.name" :value="item.code"></el-option>
+                </el-select>
+              </div>
+            </div>
+
+            <div class="ap-section">
+              <div class="ap-section-title">接口集</div>
+              <div class="ap-tags">
+                <el-tag
+                  v-for="(api, ai) in group.APIS"
+                  :key="'api-' + ai"
+                  size="small"
+                  :title="api.ID"
+                >{{ api.NAME || api.ID }}</el-tag>
+                <span class="ap-empty-text" v-if="group.APIS.length === 0">无</span>
+              </div>
+            </div>
+
+            <div class="ap-section">
+              <div class="ap-section-title">业务规则</div>
+              <div class="ap-tags">
+                <el-tag
+                  v-for="(rule, ri) in group.ruleList"
+                  :key="'rule-' + ri"
+                  size="small"
+                  type="info"
+                >{{ rule }}</el-tag>
+                <span class="ap-empty-text" v-if="group.ruleList.length === 0">无</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="ap-footer">
+      <el-button size="medium" @click="cancel">取消</el-button>
+      <el-button size="medium" type="primary" @click="confirm">确认提交</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import component from '@epxing/core/src/mixins/component'
+
+export default {
+  name: 'epx-ai-permission-assistant',
+  mixins: [component],
+  data () {
+    return {
+      permissions: [],
+      openScopeList: [],
+      authTypeList: []
+    }
+  },
+  watch: {
+    '$query.data': {
+      immediate: true,
+      deep: true,
+      handler (val) {
+        if (val) this.permissions = this.normalize(val)
+      }
+    },
+    '$configs.value': {
+      immediate: true,
+      deep: true,
+      handler (val) {
+        if (val && this.permissions.length === 0) this.permissions = this.normalize(val)
+      }
+    }
+  },
+  methods: {
+    initComponent () {
+      this.$http.getCodes({ key: 'FM_API_OPEN_SCOPE' }).then(data => {
+        this.openScopeList = data || []
+      })
+      this.$http.getCodes({ key: 'FM_API_AUTH_TYPE' }).then(data => {
+        this.authTypeList = data || []
+      })
+    },
+    // 把外部传入的数据转换成工作副本：把 RULES 字符串拆成标签数组、补默认展开态
+    normalize (val) {
+      const list = Array.isArray(val) ? val : (val.permissions || [])
+      return list.map(entity => ({
+        ENTITY: entity.ENTITY,
+        expanded: true,
+        AUTHS: (entity.AUTHS || []).map(group => ({
+          NAME: group.NAME || '',
+          OPEN_SCOPE: group.OPEN_SCOPE || '',
+          AUTH_TYPE: group.AUTH_TYPE || '',
+          APIS: (group.APIS || []).map(api => ({ ID: api.ID, NAME: api.NAME })),
+          ruleList: group.RULES ? String(group.RULES).split(',').filter(Boolean) : []
+        }))
+      }))
+    },
+    toggle (entity) {
+      entity.expanded = !entity.expanded
+    },
+    // 还原成与入参一致的数据结构（RULES 重新拼回字符串）
+    buildResult () {
+      return {
+        permissions: this.permissions.map(entity => ({
+          ENTITY: entity.ENTITY,
+          AUTHS: entity.AUTHS.map(group => ({
+            NAME: group.NAME,
+            APIS: group.APIS.map(api => ({ ID: api.ID, NAME: api.NAME })),
+            RULES: group.ruleList.join(','),
+            OPEN_SCOPE: group.OPEN_SCOPE,
+            AUTH_TYPE: group.AUTH_TYPE
+          }))
+        }))
+      }
+    },
+    validate () {
+      for (const entity of this.permissions) {
+        for (const group of entity.AUTHS) {
+          if (!group.NAME) {
+            this.$message.error('请填写每个权限组的名称')
+            return false
+          }
+        }
+      }
+      return true
+    },
+    confirm () {
+      if (!this.validate()) return
+      const data = this.buildResult()
+      const sendMessage = this.$query && this.$query.sendMessage
+      if (sendMessage) {
+        sendMessage('确认提交', null, { inputParam: data })
+        const closePage = this.$query && this.$query.closePage
+        if (closePage) closePage()
+      } else {
+        this.$emit('confirm', data)
+      }
+    },
+    cancel () {
+      const closePage = this.$query && this.$query.closePage
+      if (closePage) closePage()
+      else this.$emit('cancel')
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.epx-ai-permission-assistant {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background: #f5f7fa;
+  margin: 0;
+
+  .ap-content {
+    flex: 1;
+    overflow-y: auto;
+    padding: 16px;
+    @include scroll-bar;
+  }
+
+  .ap-empty {
+    text-align: center;
+    color: var(--color-text-secondary);
+    margin-top: 80px;
+    > i {
+      font-size: 80px;
+      @include font_color_primary_mixin(0);
+    }
+  }
+
+  .ap-entity {
+    margin-bottom: 16px;
+  }
+
+  .ap-entity-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    cursor: pointer;
+    user-select: none;
+  }
+
+  .ap-entity-title {
+    font-size: $--font-size-medium;
+    font-weight: 600;
+    color: var(--color-text-title);
+  }
+
+  .ap-entity-count {
+    font-size: $--font-size-small;
+    font-weight: 400;
+    color: var(--color-text-assistant);
+  }
+
+  .ap-entity-toggle {
+    font-size: 14px;
+    color: var(--color-text-secondary);
+    transition: transform .25s;
+    flex-shrink: 0;
+    &.is-collapsed { transform: rotate(-90deg); }
+  }
+
+  .ap-group {
+    background: #fff;
+    border: 1px solid #e3e3e3;
+    border-radius: var(--border-radius-medium);
+    padding: 14px 16px;
+    margin-bottom: 12px;
+    &:last-child { margin-bottom: 0; }
+  }
+
+  .ap-group-header {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding-bottom: 12px;
+    border-bottom: 1px solid #ebeef5;
+  }
+
+  .ap-group-name {
+    width: 160px;
+    flex-shrink: 0;
+  }
+
+  .ap-group-fields {
+    display: flex;
+    gap: 8px;
+    flex: 1;
+    .el-select { width: 140px; }
+  }
+
+  .ap-section {
+    display: flex;
+    align-items: flex-start;
+    padding-top: 12px;
+  }
+
+  .ap-section-title {
+    width: 72px;
+    flex-shrink: 0;
+    line-height: 28px;
+    color: var(--color-text-secondary);
+    font-size: $--font-size-base;
+  }
+
+  .ap-tags {
+    flex: 1;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 8px;
+    .el-tag { margin: 0; }
+  }
+
+  .ap-empty-text {
+    color: var(--color-text-assistant);
+    font-size: $--font-size-base;
+    line-height: 28px;
+  }
+
+  .ap-footer {
+    flex-shrink: 0;
+    padding: 12px 16px;
+    text-align: right;
+    background: #fff;
+    border-top: 1px solid #ebeef5;
+    .el-button + .el-button { margin-left: 8px; }
+  }
+}
+</style>

package/src/components/AppList.vue

@@ -0,0 +1,330 @@
+<template>
+  <div class="container">
+    <div class="list-operates" >
+      <div class="search-simple fr" v-if="$configs.searchFlag&&$configs.searchMode === 'keyword'">
+        <epx-search-keyword v-model="searchKeyParams" :meta="$meta" :keywords="$configs.keywords"></epx-search-keyword>
+          <span v-if="$configs.showFilter">
+            <el-button :style="{ marginLeft: '8px' }" type="primary" link @click="filterDrawer = true"><i class="epx-icon-filter" ></i>{{searchScopeParams.length > 0 ? `（${validScopeLength}）` : ''}}</el-button>
+            <epx-scope-drawer v-model:visible="filterDrawer" :metaId="$metaId" ref="filterDrawer" v-model="searchScopeParams" :filterFields="$configs.filterFields"/>
+          </span>
+      </div>
+      <span v-else-if="$configs.totalFlag">{{$t('general')}}{{total}}{{$t('data')}}</span>
+      <div class="button-group" v-if="$configs.operateFlag&&checkRightOperates.length > 0">
+        <el-button size="default" v-for="operate in operates"  :key="operate.text" :type="buttonUi(operate.ui)" @click="$handler(operate, null)">{{operate.text}}</el-button>
+        <el-button v-if="selection.length>0" size="medium" @click="selection=[]">{{$t('uncheck')}}</el-button>
+        <el-dropdown class="more-table-operates" trigger="click" v-if="moreOperates.length > 0">
+          <el-button size="default">
+            <i class="el-icon-more"></i>
+          </el-button>
+          <template v-slot:dropdown><el-dropdown-menu>
+            <el-dropdown-item v-for="operate in moreOperates" :key="operate.text" @click="$handler(operate, null)">{{operate.text}}</el-dropdown-item>
+          </el-dropdown-menu></template>
+        </el-dropdown>
+      </div>
+    </div>
+    <div class="app-container" v-loading="loading">
+      <draggable v-bind="dragOptions" v-if="data && data.length>0"
+        class="app-list"
+        v-model="data"
+        tag="ul"
+
+        @start="drag = true"
+        @end="moveEnd">
+        <li :class="{'app-item': true,active: isSelect(app)}" v-for="app in data" :key="app.ID" @click="viewEntity({},app)">
+          <div class="app-icon" >
+            <img :src="app.IMAGE? $util.getFileUrl(app.IMAGE) : require('@/assets/images/app.png')" />
+          </div>
+          <div class="app-info">
+            <p class="app-name">{{app['NAME#'] || app.NAME}}<el-tag size="small" v-if="app['STATUS']" :type="app['STATUS']==='off' ? 'danger': ''">{{app['STATUS#']}}</el-tag></p>
+            <p class="app-code">{{app.CODE}}</p>
+          </div>
+          <div class="app-operates" @click.stop>
+            <div class="column-operates">
+              <el-button
+                v-for="operate in unfoldColumnOperates"
+                :key="operate.text"
+                class="column-operate-btn"
+                type="primary" link
+                size="small"
+                @click="$handler(operate, app)"
+              >
+                <i v-if="operate.iconCls" :class="operate.iconCls"></i>
+                {{operate.text}}
+              </el-button>
+              <el-dropdown trigger="click" v-if="foldColumnOperates.length>0" @visible-change="show => (activeDropDown = show ? app.ID : '')">
+                <span :class="['el-dropdown-link', { active: activeDropDown === app.ID }]">
+                  <i class="el-icon-more"></i>
+                </span>
+                <template v-slot:dropdown><el-dropdown-menu>
+                  <el-dropdown-item @click="appSetting(app)">{{$t('setting')}}</el-dropdown-item>
+                  <el-dropdown-item v-for="operate in foldColumnOperates" :key="operate.text" @click="$handler(operate, app)" :icon="operate.iconCls">
+                    {{operate.text}}
+                  </el-dropdown-item>
+                  <el-dropdown-item @click="copyLink(app)">{{$t('copylink')}}</el-dropdown-item>
+                  <el-dropdown-item @click="openApp(app)">打开应用</el-dropdown-item>
+                  <el-dropdown-item @click="startApp(app)">{{app.STATUS!=='ON'? $t('activate') : $t('outage')}}</el-dropdown-item>
+                  <el-dropdown-item @click="selectApp(app)">{{isSelect(app)? $t('cancel') : $t('checked')}}</el-dropdown-item>
+                </el-dropdown-menu></template>
+              </el-dropdown>
+            </div>
+          </div>
+          <div class="app-type" v-if="app.LEVEL">
+            <i class="el-icon-setting"></i>
+            {{app['LEVEL#']}}
+          </div>
+        </li>
+      </draggable>
+      <div class="null-data" v-else-if="data">
+        <i class="epx-icon-color-kong"></i>
+        <p>{{$t('no data')}}</p>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script>
+import draggable from '@epxing/core/src/components/draggable'
+import List from '@epxing/components/src/entity-list'
+export default {
+  name: 'epx-app-list',
+  extends: List,
+  components: {
+    draggable
+  },
+  data () {
+    return {
+      data: null,
+      dragOptions () {
+        return {
+          animation: 200,
+          group: 'description',
+          disabled: false,
+          ghostClass: 'ghost'
+        }
+      }
+    }
+  },
+  computed: {
+    isSelect () {
+      return app => {
+        return !!this.selection.find(item => item.ID === app.ID)
+      }
+    }
+  },
+  methods: {
+    selectApp (app) {
+      const index = this.selection.findIndex(item => item.ID === app.ID)
+      if (index === -1) {
+        this.selection.push(app)
+      } else {
+        this.selection.splice(index, 1)
+      }
+    },
+    moveEnd (evt) {
+      this.drag = false
+      const str = this.data.reduce((str, item, index) => (str += (item.ID) + ':' + index + ','), '')
+      this.$http.$post({
+        action: 'moveList',
+        entityId: this.$metaId,
+        orderString: str
+      })
+        .then(() => {
+          this.reloadData()
+        })
+    },
+    startApp (app) {
+      this.$http.update({
+        entityId: this.$metaId,
+        'bean.ID': app.ID,
+        'bean.STATUS': app.STATUS !== 'ON' ? 'ON' : 'OFF'
+      })
+        .then(() => {
+          this.$message.success(this.$t('handle a successful'))
+          this.getData()
+        })
+    },
+    copyLink (app) {
+      this.$http.get({
+        link: 'client',
+        entityId: 'FM_SYSTEM',
+        id: app.SYSTEM
+      })
+        .then(async data => {
+          if (data && data.data) {
+            const rootPath = this.$util.getRootPath()
+            let url = `${rootPath}/app/${data.data['CLIENT|CODE']}/${data.data.CODE}/${app.CODE}`
+            if (app.IS_SHORT_URL === '1') {
+              const shortUrl = await this.$http.get({
+                action: 'getShortUrl',
+                entityId: 'FM_URL_MAP',
+                url: url
+              }, {
+                domainContext: window.BASE_PROJECT_NAME,
+                client: window.BASE_CLIENT_ID,
+                system: window.BASE_SYSTEM_ID
+              })
+              url = `${rootPath}/s/${shortUrl}`
+            }
+            var input = document.createElement('input')
+            input.value = url
+            document.body.appendChild(input)
+            input.select()
+            document.execCommand('Copy')
+            document.body.removeChild(input)
+            this.$message.success(this.$t('copy success'))
+          }
+        })
+    },
+    openApp (app) {
+      this.$http.get({
+        link: 'client',
+        entityId: 'FM_SYSTEM',
+        id: app.SYSTEM
+      })
+        .then(async data => {
+          if (data && data.data) {
+            const rootPath = this.$util.getRootPath()
+            let url = `${rootPath}/app/${data.data['CLIENT|CODE']}/${data.data.CODE}/${app.CODE}`
+            if (app.IS_SHORT_URL) {
+              const shortUrl = await this.$http.get({
+                action: 'getShortUrl',
+                entityId: 'FM_URL_MAP',
+                url: url
+              }, {
+                domainContext: window.BASE_PROJECT_NAME,
+                client: window.BASE_CLIENT_ID,
+                system: window.BASE_SYSTEM_ID
+              })
+              url = `${rootPath}/s/${shortUrl}`
+            }
+            this.$util.openWindow(url)
+          }
+        })
+    },
+    appSetting (app) {
+      const rootPath = this.$util.getRootPath()
+      const url = `${rootPath}/service/setting/${app['CLIENT|CODE']}/${app['SYSTEM|CODE']}/${app.CODE}`
+      this.$util.openWindow(url)
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.container {
+  background: var(--epx-bg-card);
+}
+.app-container {
+  min-height: 200px;
+}
+.app-list {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 0 10px 10px;
+}
+.app-item {
+  cursor: move;
+  width: calc(33.3% - 20px);
+  margin: 10px;
+  border-radius: var(--epx-radius-base);
+  border: 1px solid var(--epx-border);
+  box-sizing: border-box;
+  padding: 24px 20px;
+  display: flex;
+  align-items: center;
+  position: relative;
+  &.active {
+    @include border_color_primary
+  }
+}
+.app-icon {
+  width: 56px;
+  height: 56px;
+  margin-right: 10px;
+  >img {
+    width: 100%;
+    height: 100%;
+  }
+}
+.app-name {
+  font-size: var(--epx-font-size-l);
+  margin-bottom: 6px;
+
+    :deep(.el-tag) {
+      margin-left: 6px;
+      position: relative;
+      top: -2px;
+    }
+
+}
+.app-code {
+  color: var(--epx-text);
+}
+.list-operates {
+  background: var(--epx-bg-card);
+  padding: 16px 12px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.more-table-operates {
+  margin-left: 10px
+}
+.column-operates {
+  position: absolute;
+  right: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+  button:not(:last-child) {
+    &::after {
+      content: '';
+      position: relative;
+      right: -6px;
+      top:0 ;
+      height: 14px;
+      border-right:  1px solid var(--epx-border);
+    }
+  }
+}
+
+.el-dropdown-link {
+  cursor: pointer;
+  float: left;
+  width: 30px;
+  height: 30px;
+  border-radius: var(--epx-radius-base);
+  text-align: center;
+  line-height: 30px;
+  overflow: hidden;
+   border: 0;
+  outline: none;
+  margin-left: 6px;
+  &.active {
+    @include bg_color_primary( 0.1);
+  }
+}
+
+.column-operate-btn {
+  font-size: var(--epx-font-size-base);
+}
+.app-type {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  font-size: var(--epx-font-size-s);
+  color: var(--epx-text);
+  line-height: 1;
+}
+.null-data {
+  padding: 20px 0;
+  text-align: center;
+  color: var(--epx-text-secondary);
+  i {
+    font-size: 80px;
+  }
+}
+</style>