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

package/src/components/EntityRightSubList.vue

@@ -0,0 +1,740 @@
+<template>
+  <div class="container">
+    <div class="operate">
+      <el-button type="primary" size="default" class="right-add" @click="addCommonRight">添加常用权限</el-button>
+      <el-button type="primary" size="default" class="right-add" @click="addRight">添加自定义权限</el-button>
+    </div>
+    <ul class="right-list" v-if="rightList && rightList.length>0">
+      <li class="right-item" v-for="item in rightList" :key="item.ID">
+        <div class="right-title">
+          <label>{{item.NAME}}</label>
+          <el-button class="right-delete" type="primary" link @click="removeRight(item)"><i class="el-icon-close"></i></el-button>
+        </div>
+        <div v-if="item.APIS" class="right-interface" :title="item.APIS ? item.APIS.replace(/\,/g, '、') : ''">
+          接口集：{{item.APIS? item.APIS.replace(/\,/g, '、'): ''}}
+        </div>
+        <div v-if="item.RULES" class="right-interface" :title="item.RULES ? item.RULES.replace(/\,/g, '、') : ''">
+          规则集：{{item.RULES? item.RULES.replace(/\,/g, '、'): ''}}
+        </div>
+        <div v-if="item.role" class="right-interface" :title="item.NAME ? item.role.replace(/\n/g, '、') : ''">
+          授权角色：{{item.role? item.role.replace(/\n/g, '、'): ''}}
+        </div>
+        <div v-if="item.OPEN_SCOPE" class="right-scope">
+          开放范围：<span class="right-scope__value" :class="openScopeClass(item.OPEN_SCOPE)">{{openScopeMap[item.OPEN_SCOPE] || item.OPEN_SCOPE}}</span>
+        </div>
+        <div class="right-operate">
+          <!-- <el-button type="primary" link @click="editRight(item)">编辑</el-button> -->
+          <el-button type="primary" link @click="goRightPage(item)">授权</el-button>
+        </div>
+      </li>
+    </ul>
+    <div class="null-data" v-else-if="rightList && rightList.length===0">
+      <i class="epx-icon-kong"></i>
+      <p>请添加常用权限或自定义权限</p>
+    </div>
+    <el-dialog
+      class="add-custom-right__dialog"
+      title="添加权限"
+      v-model="dialogVisible"
+      width="900px"
+      destroy-on-close
+    >
+      <div class="add-right">
+        <epx-entity-right-form-item v-if="dialogVisible" ref="form" :formData="rightFormData" @change="v=>rightFormData=v" metaId="FM_ENTITY_RIGHT" :compConfigs="{metaId: 'FM_ENTITY_RIGHT',column: '1', fields: ['ID', 'NAME', 'OPEN_SCOPE', 'AUTH_TYPE','APIS', 'RULES']}" pageType="ADD" ></epx-entity-right-form-item>
+        <!-- <epx-table-form v-if="fieldsConfigs.length>0" class="form-content" ref="form" v-model="rightFormData" :fieldsConfigs="fieldsConfigs" :column="1"></epx-table-form> -->
+        <!-- <div class="interface">
+          <label>接口集：</label>
+          <div>
+            <el-checkbox-group class="apis-checkbox__group" v-model="checkApis" >
+              <div class="checkbox" v-for="api in rightApiList"  :key="api.NAME">
+                <el-checkbox  :label="api.NAME" :value="api.NAME">
+                  {{api.LABEL}}/{{api.NAME}}
+                </el-checkbox>
+                <el-popconfirm
+                  v-if="api.ENTITY"
+                  confirm-button-text='确认'
+                  cancel-button-text=this.$t('cancel')
+                  icon="el-icon-info"
+                  icon-color="red"
+                  title="确定删除吗？"
+                  @confirm="deleteApi(api)"
+                >
+                  <i  class="delete el-icon-close" slot="reference" ></i>
+                </el-popconfirm>
+              </div>
+            </el-checkbox-group>
+            <el-button type="primary" link icon="el-icon-plus" @click="addInterfaceFlag=true">添加自定义接口</el-button>
+          </div>
+        </div>
+        <div class="add-interface" v-if="addInterfaceFlag">
+          <span>自定义接口：</span>
+          <el-input size="default" v-model="addInterfaceForm.NAME" placeholder="接口命令"></el-input>
+          <el-input  size="default" v-model="addInterfaceForm.LABEL" placeholder="接口名称"></el-input>
+          <el-button  size="default" type="primary" link @click="addCustomApi">保存</el-button>
+          <el-button :style="{color: '#666'}" size="default" type="primary" link @click="addInterfaceFlag=false">取消</el-button>
+        </div>
+        <div class="interface">
+          <label>业务规则集：</label>
+          <div>
+            <el-checkbox-group class="apis-checkbox__group" v-model="checkRules" >
+              <div class="checkbox" v-for="rule in ruleList"  :key="rule.KEY">
+                <el-checkbox  :label="rule.KEY" :value="rule.KEY">
+                  {{rule.NAME}}/{{rule.KEY}}
+                </el-checkbox>
+              </div>
+            </el-checkbox-group>
+          </div>
+        </div> -->
+      </div>
+      <template v-slot:footer><span class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="submitRight">确 定</el-button>
+      </span></template>
+    </el-dialog>
+    <el-dialog
+      title="添加常用权限"
+      v-model="commonDialogVisible"
+      width="900px"
+    >
+      <div class="common-right">
+        <epx-table-form v-if="commonFieldsConfigs.length>0" class="form-content" ref="commonForm" v-model="defaultValue" :fieldsConfigs="commonFieldsConfigs" :column="1"></epx-table-form>
+        <el-checkbox-group v-model="commonApiIds">
+          <ul class="right-list">
+            <li class="right-item" :class="{'is-disabled': item.disabled}" v-for="item in commonRightList" :key="item.TYPE">
+              <div class="right-title">
+                <label>{{item.TYPE}}</label>
+                <el-checkbox class="checkbox" :label="item.TYPE" :value="item.TYPE" :disabled="item.disabled" size="default">{{''}}</el-checkbox>
+              </div>
+              <div class="right-interface" :title="item.displayApis.replace(/\,/g, '、')">
+                接口集：{{item.displayApis.replace(/\,/g, '、')}}
+              </div>
+              <div v-if="item.usedTip" class="right-conflict" :title="item.usedTip">{{item.usedTip}}</div>
+            </li>
+          </ul>
+        </el-checkbox-group>
+        <div class="common-right__empty" v-if="commonRightList.length === 0">暂无可添加的常用权限</div>
+      </div>
+      <template v-slot:footer><span class="dialog-footer">
+        <el-button @click="commonDialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="saveCommonApis">确 定</el-button>
+      </span></template>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import component from '@epxing/core/src/mixins/component'
+export default {
+  name: 'epx-entity-right-sub-list',
+  mixins: [component],
+  data () {
+    return {
+      rightList: null,
+      dialogVisible: false,
+      commonDialogVisible: false,
+      fieldsConfigs: [],
+      commonFieldsConfigs: [],
+      addInterfaceForm: {},
+      addInterfaceFlag: false,
+      commonApiIds: [],
+      commonApis: [],
+      entityApiList: [],
+      checkApis: [],
+      checkRules: [],
+      defaultValue: {},
+      rightFormData: {},
+      entityApiMap: {},
+      ruleList: [],
+      openScopeList: [],
+      defaultAbleApis: []
+    }
+  },
+  computed: {
+    getApi () {
+      return (apis) => {
+        if (!apis) return []
+        return apis.split(',').map(api => this.entityApiMap[api] || { NAME: api })
+      }
+    },
+    rightApiList () {
+      const checkList = this.checkApis.filter(item => !this.entityApiList.find(api => api.NAME === item)).map(item => this.entityApiMap[item])
+      return [...checkList, ...this.entityApiList]
+    },
+    // 开放范围代码表：code -> 名称
+    openScopeMap () {
+      return this.openScopeList.reduce((map, item) => {
+        map[item.code] = item.name
+        return map
+      }, {})
+    },
+    // 已被占用的接口：接口命令 -> 所属权限集名称，一个接口只能归属一个权限集
+    usedApiMap () {
+      const map = {}
+      ;(this.rightList || []).forEach(right => {
+        const apis = right.APIS ? right.APIS.split(',') : []
+        apis.forEach(name => {
+          if (name && !map[name]) map[name] = right.NAME
+        })
+      })
+      return map
+    },
+    // 常用权限集：接口集只保留「开发平台定义的常用接口」中默认可用的，
+    // 其中已归属别的权限集的接口直接剔除，剩下的仍可添加；全被占用了才无从添加
+    commonRightList () {
+      return this.commonApis.map(item => {
+        const allApis = (item.APIS ? item.APIS.split(',') : []).filter(name => name && this.defaultAbleApis.includes(name))
+        const usedApis = allApis.filter(name => this.usedApiMap[name])
+        const apis = allApis.filter(name => !this.usedApiMap[name])
+        const owners = [...new Set(usedApis.map(name => this.usedApiMap[name]))]
+        const disabled = apis.length === 0
+        return {
+          TYPE: item.TYPE,
+          // APIS 是实际入库的接口集；整组被占完时卡片仍展示全量接口，只是整体置灰不可选
+          APIS: apis.join(','),
+          displayApis: (disabled ? allApis : apis).join(','),
+          usedApis,
+          usedTip: usedApis.length
+            ? (disabled ? `接口已全部归属权限集「${owners.join('、')}」` : `已剔除 ${usedApis.join('、')}：已在权限集「${owners.join('、')}」下`)
+            : '',
+          disabled
+        }
+      }).filter(item => item.APIS || item.usedTip)
+    }
+  },
+  methods: {
+    getCommonApis () {
+      const { id } = this.$query
+      return this.$http.get({
+        entityId: 'FM_ENTITY_API',
+        action: 'getCommonApi',
+        targetEntityId: id
+      })
+        .then(data => {
+          this.commonApis = data.apis || []
+          return this.commonApis
+        })
+    },
+    // 开发平台定义的常用接口（对象为空、有接口类型），只取「是否默认可用」为是的
+    getDefaultAbleApis () {
+      return this.$http.list({
+        entityId: 'FM_ENTITY_API',
+        scopeParams: JSON.stringify([
+          { lb: '', field: 'ENTITY', mode: 'is_null' },
+          { lb: '', field: 'TYPE', mode: 'not_null' }
+        ]),
+        page: 1,
+        limit: 500
+      })
+        .then(data => {
+          this.defaultAbleApis = (data.entitys || []).filter(item => item.DEFAULT_ABLE === '1').map(item => item.NAME)
+          return this.defaultAbleApis
+        })
+    },
+    getOpenScopeList () {
+      return this.$http.getCodes({
+        key: 'FM_API_OPEN_SCOPE'
+      })
+        .then(data => {
+          this.openScopeList = data || []
+          return this.openScopeList
+        })
+    },
+    // 授权类（授权访问 / 所有授权用户）蓝色，登录类（登录即可访问 / 所有登录用户）橙色，公开访问红色
+    openScopeClass (code) {
+      return {
+        1: 'is-auth',
+        3: 'is-auth',
+        2: 'is-login',
+        4: 'is-login',
+        5: 'is-public'
+      }[code] || ''
+    },
+    addCommonRight () {
+      this.commonDialogVisible = true
+      Promise.all([this.getRightList(), this.getCommonApis(), this.getDefaultAbleApis()])
+        .then(() => {
+          // 打开时默认勾选所有可添加的常用权限
+          this.commonApiIds = this.commonRightList.filter(item => !item.disabled).map(item => item.TYPE)
+        })
+    },
+    getRightList () {
+      const { id } = this.$query
+      return this.$http.list({
+        entityId: 'FM_ENTITY_RIGHT',
+        'scope.ENTITY': id,
+        columnFields: [
+          { attriName: 'ID' },
+          { attriName: 'ENTITY' },
+          { attriName: 'NAME' },
+          { attriName: 'APIS' },
+          { attriName: 'RULES' },
+          { attriName: 'OPEN_SCOPE' },
+          { attriName: 'AUTH_TYPE' },
+          { type: 'meta', attriName: 'role', fields: ['ROLE#'] }
+        ]
+      })
+        .then(data => {
+          this.rightList = data.entitys
+          return this.rightList
+        })
+    },
+    getAllEntityApi () {
+      const { id } = this.$query
+      this.$http.get({
+        action: 'getEntityAllApi',
+        entityId: 'FM_ENTITY_API',
+        metaId: id
+      })
+        .then(data => {
+          const entityApiMap = {}
+          this.allEntityApiList = data.entitys
+          data.entitys.forEach(item => {
+            entityApiMap[item.NAME] = item
+          })
+          this.entityApiMap = entityApiMap
+        })
+    },
+    getEntityApi () {
+      const { id } = this.$query
+      this.$http.get({
+        action: 'getUnusedApi',
+        entityId: 'FM_ENTITY_API',
+        metaId: id
+      })
+        .then(data => {
+          this.entityApiList = data.entitys
+        })
+    },
+    getRuleList () {
+      const { id } = this.$query
+      this.$http.list({
+        entityId: 'ACT_RE_MODEL',
+        'scope.ENTITY': id
+      })
+        .then(data => {
+          this.ruleList = data.entitys
+        })
+    },
+    getFieldConfigs () {
+      this.$http.get({
+        action: 'getDefault',
+        entityId: 'FM_ENTITY_RIGHT'
+      })
+        .then(data => {
+          this.defaultValue = data.data
+        })
+      this.$FieldFactory.createFields({
+        metaId: 'FM_ENTITY_RIGHT',
+        pageType: 'EDIT',
+        fields: ['ID', 'NAME', 'OPEN_SCOPE', 'AUTH_TYPE', { attriName: 'APIS', state: 'HIDDEN' }]
+      })
+        .then(data => {
+          this.fieldsConfigs = [...data]
+          this.commonFieldsConfigs = data.filter((item, index) => index > 1)
+        })
+    },
+    saveCommonApis () {
+      const form = this.$refs.commonForm
+      const data = form.model.data
+      const { id } = this.$query
+      if (this.commonApiIds.length === 0) {
+        this.$message.error('请选择常用权限')
+        return
+      }
+      const selected = this.commonRightList.filter(item => this.commonApiIds.includes(item.TYPE))
+      const conflict = selected.find(item => item.disabled)
+      if (conflict) {
+        this.$message.error(`「${conflict.TYPE}」的接口已全部归属其他权限集，无法添加`)
+        return
+      }
+      const params = {
+        entityId: 'FM_ENTITY_RIGHT',
+        'bean.CLIENT': this.CLIENT,
+        'bean.SYSTEM': this.SYSTEM,
+        'bean.ENTITY': id,
+        'bean.OPEN_SCOPE': data.OPEN_SCOPE,
+        'bean.AUTH_TYPE': data.AUTH_TYPE
+      }
+      Promise.all(selected.map(item => this.$http.save({
+        ...params,
+        'bean.NAME': item.TYPE,
+        'bean.APIS': item.APIS
+      })))
+        .then(() => {
+          this.$message.success('保存成功')
+          this.commonDialogVisible = false
+        })
+        .catch(err => {
+          this.$message.error(err.message)
+        })
+        .then(() => {
+          this.getRightList()
+          this.getEntityApi()
+        })
+    },
+    removeRight (item) {
+      this.$confirm('确认删除?', this.$t('hint'), {
+        confirmButtonText: this.$t('confirm'),
+        cancelButtonText: this.$t('cancel'),
+        type: 'warning'
+      }).then(() => {
+        this.$http.removeMulti({
+          entityId: 'FM_ENTITY_RIGHT',
+          ids: item.ID
+        })
+          .then(() => {
+            this.$message.success('删除成功')
+            this.getRightList()
+            this.getEntityApi()
+          })
+      })
+    },
+    addRight () {
+      this.rightFormData = { ...this.defaultValue, ENTITY: this.$query.id }
+      this.dialogVisible = true
+      this.addInterfaceFlag = false
+      this.checkApis = []
+      this.checkRules = []
+    },
+    editRight (right) {
+      this.rightFormData = right
+      this.dialogVisible = true
+      const { APIS = '', RULES } = right
+      const apiList = APIS ? APIS.split(',') : []
+      const ruleList = RULES ? RULES.split(',') : []
+      this.checkApis = apiList.filter(item => this.entityApiMap[item])
+      this.checkRules = ruleList
+    },
+    deleteApi (api) {
+      this.$http.removeMulti({
+        entityId: 'FM_ENTITY_API',
+        ids: api.ID
+      })
+        .then(() => {
+          this.$message.success('删除成功')
+          this.getEntityApi()
+
+          const index = this.checkApis.findIndex(item => item === api.NAME)
+          if (index !== -1) {
+            this.checkApis.splice(index, 1)
+          }
+        })
+        .catch(err => {
+          this.$message.error(err.message)
+        })
+    },
+    addCustomApi () {
+      const { id } = this.$query
+      const { LABEL, NAME } = this.addInterfaceForm
+      if (!LABEL) {
+        this.$message.error('请输入接口名称')
+        return
+      }
+      if (!NAME) {
+        this.$message.error('请输入接口命令')
+        return
+      }
+      this.$http.save({
+        entityId: 'FM_ENTITY_API',
+        'bean.CLIENT': this.CLIENT,
+        'bean.SYSTEM': this.SYSTEM,
+        'bean.ENTITY': id,
+        'bean.LABEL': LABEL,
+        'bean.NAME': NAME
+      })
+        .then(data => {
+          this.checkApis.push(NAME)
+          this.addInterfaceFlag = false
+          this.getEntityApi()
+        })
+        .catch(err => {
+          this.$message.error(err.message)
+        })
+    },
+    goRightPage (item) {
+      const { rightPageId } = this.$configs
+      const props = {
+        title: '对象接口授权',
+        entityId: item.ENTITY,
+        id: item.ID,
+        pageId: rightPageId,
+        pageType: 'DETAIL'
+      }
+      if (this.$route.name === 'Config') {
+        props.openType = '2'
+        props.defaultFullscreen = '2'
+        props.style = {
+          background: '#f0f2f6'
+        }
+      }
+      this.$createPage(props)
+    },
+    submitRight () {
+      const { id } = this.$query
+      const data = this.rightFormData
+      const params = {
+        entityId: 'FM_ENTITY_RIGHT',
+        'bean.CLIENT': this.CLIENT,
+        'bean.SYSTEM': this.SYSTEM,
+        'bean.ENTITY': id
+      }
+      if (!data.RULES) data.RULES = ''
+      if (data.ID) {
+        params.action = 'update'
+      }
+      if (!data.NAME) {
+        this.$message.error('请输入权限名称')
+        return
+      }
+      if (data.APIS.length === 0 && data.RULES.length === 0) {
+        this.$message.error('请添加接口或业务规则')
+        return
+      }
+      for (const key in data) {
+        if (!key.includes('#')) params[`bean.${key}`] = data[key]
+      }
+      this.$http.save({
+        ...params
+      })
+        .then(data => {
+          this.$message.success('保存成功')
+          this.dialogVisible = false
+          this.getRightList()
+          this.checkApis = []
+          this.checkRules = []
+        })
+        .catch(err => {
+          this.$message.error(err.message)
+        })
+    },
+    $refesh () {
+      this.getRightList()
+      this.getRuleList()
+      this.getCommonApis()
+      this.getDefaultAbleApis()
+      this.getAllEntityApi()
+      this.getEntityApi()
+    }
+  },
+  created () {
+    this.getRightList()
+    this.getRuleList()
+    this.getCommonApis()
+    this.getDefaultAbleApis()
+    this.getOpenScopeList()
+    this.getAllEntityApi()
+    this.getEntityApi()
+    this.getFieldConfigs()
+  }
+
+}
+</script>
+
+<style scoped lang="scss">
+.container {
+  background: var(--epx-bg-card);
+  padding: 10px;
+}
+.operate {
+  margin: 10px 0;
+}
+.right-add {
+  margin-left: 10px;
+}
+.right-list {
+  display: flex;
+  flex-wrap: wrap;
+}
+.right-item {
+  font-size: var(--epx-font-size-base);
+  position: relative;
+  width: calc(25% - 20px);
+  box-sizing: border-box;
+  margin: 10px;
+  padding: 16px;
+  padding-bottom: 32px;
+  border: 1px solid var(--epx-border);
+  border-radius: var(--epx-radius-base);
+}
+.right-title {
+  display: flex;
+  justify-content: space-between;
+  font-size: var(--epx-font-size-l);
+  font-weight: 600;
+}
+.right-interface {
+  margin: 10px 0;
+  max-height: 40px;
+  color: var(--epx-text);
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+}
+.right-delete {
+  padding: 0;
+  font-size: var(--epx-font-size-l);
+}
+.right-scope {
+  position: absolute;
+  left: 16px;
+  right: 64px;
+  bottom: 12px;
+  color: var(--color-text-secondary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+// 开放范围按访问敞口区分颜色：授权类蓝色、登录类橙色、公开访问红色
+.right-scope__value {
+  font-weight: 500;
+  &.is-auth {
+    color: #409eff;
+  }
+  &.is-login {
+    color: #e6a23c;
+  }
+  &.is-public {
+    color: #f56c6c;
+  }
+}
+.right-conflict {
+  margin-top: 10px;
+  color: #e6a23c;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+}
+.right-item.is-disabled {
+  background: var(--epx-bg);
+  .right-title,
+  .right-interface,
+  .right-conflict {
+    color: var(--color-text-disabled);
+  }
+}
+.common-right__empty {
+  margin: 20px 0;
+  text-align: center;
+  color: var(--color-text-secondary);
+}
+.right-operate {
+  position: absolute;
+  right: 20px;
+  bottom: 12px;
+  float: right;
+
+    :deep(.el-button) {
+      padding: 0;
+    }
+
+}
+.checkbox {
+  position: relative;
+  right: -4px;
+
+    :deep(.el-checkbox__inner) {
+      width: 16px;
+      height: 16px;
+      &::after {
+        left: 5px;
+        top: 2px;
+      }
+    }
+
+}
+.interface {
+  width: 100%;
+  box-sizing: border-box;
+  display: flex;
+  line-height: 36px;
+  >label {
+    width: 120px;
+    text-align: right;
+    margin-right: 4px;
+    flex-shrink: 0;
+  }
+  margin: 10px 0;
+
+    :deep(.el-button) {
+      padding: 0;
+    }
+
+}
+.add-interface {
+  display: flex;
+  padding-left: 30px;
+  padding-top: 10px;
+  align-items: center;
+  >label {
+    width: 120px;
+    text-align: right;
+    margin-right: 4px;
+    flex-shrink: 0;
+    flex-shrink: 0;
+  }
+
+    :deep(.el-input) {
+      width: 160px;
+      margin-right: 10px;
+    }
+
+}
+.api-tag {
+  margin-right: 8px;
+}
+.null-data {
+  text-align: center;
+  color:var(--epx-text);
+  margin: 20px 0;
+  &>i {
+    font-size: 100px;
+    @include font_color_primary
+  }
+}
+.tree {
+  max-height: 400px;
+  overflow: auto;
+}
+.common-right {
+
+    :deep(.table-form-item__label) {
+      width: auto;
+      padding-left: 10px;
+    }
+
+}
+.apis-checkbox__group {
+  .checkbox{
+    display: inline-block;
+    position: relative;
+    padding-right: 30px;
+    &:hover {
+      .delete {
+        display: inline;
+      }
+    }
+  }
+  .delete {
+    cursor: pointer;
+    position: absolute;
+    right: 12px;
+    top: 11px;
+    color: red;
+    display: none;
+    font-size: var(--epx-font-size-base);
+  }
+}
+.add-right {
+  max-height: 500px;
+  overflow: auto;
+}
+.add-custom-right__dialog {
+
+    :deep(.el-dialog__body) {
+      padding: 0;
+    }
+
+}
+</style>