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

package/src/components/authorization/AuthorizationInterface.vue

@@ -0,0 +1,668 @@
+<template>
+  <div class="container">
+    <el-card class="box-card" shadow="never" :body-style="{padding:'10px 24px'}">
+      <template v-slot:header><div class="clearfix">
+          <span class="blue"></span><span>{{$component.title}}</span>
+      </div></template>
+      <div class="authorization-content" >
+        <label class="epx-form-item__label epx-form-item__label--right" for="">对象接口：</label>
+        <ul class="authorization-list">
+          <li class="authorization-item" v-for="item in checkedApiList" :key="item.id">
+            <span>{{item.name}} / {{item.label}}</span>
+            <i class="el-icon-close" @click="deleteApi(item)"></i>
+          </li>
+        </ul>
+        <el-button type="primary" link size="default" @click="showAddInterfaceDialog=true">+ 添加对象接口</el-button>
+      </div>
+        <div class="authorization-content">
+        <label class="epx-form-item__label epx-form-item__label--right" for="">业务规则：</label>
+        <ul class="authorization-list">
+          <li class="authorization-item" v-for="item in checkedRuleList" :key="item.id">
+            <span>{{item.name}} / {{item.label}}</span>
+            <i class="el-icon-close" @click="deleteRule(item)"></i>
+          </li>
+        </ul>
+        <el-button type="primary" link size="default" @click="showAddRuleDialog=true">+ 添加业务规则</el-button>
+      </div>
+    </el-card>
+    <el-dialog class="authorization-interface__dialog" title="添加接口" v-model="showAddInterfaceDialog"
+      width="960px"
+      append-to-body :destroy-on-close="true">
+      <div class="api-type" v-for="apiType in apiTypeList" :key="apiType.id">
+        <div class="api-type__header">
+          <span class="api-type__title">{{apiType.name}}</span>
+          <span class="api-type__operate" >
+            <el-checkbox :label="apiType.code" :value="apiType.code" v-model="checkAllApiMap[apiType.code]" @change="v=>checkAllApi(apiType.code, v)">全选</el-checkbox>
+            <span class="api-type__fold" @click="foldMap[apiType.code] = !foldMap[apiType.code]">{{foldMap[apiType.code] ? '展开' : '收起'}}<i :class="foldMap[apiType.code] ? 'el-icon-arrow-down' : 'el-icon-arrow-up'"></i></span>
+          </span>
+        </div>
+        <div class="api-type__content" :style="{ display: foldMap[apiType.code] ? 'none' : 'block' }">
+          <el-checkbox-group v-model="checkApiMap[apiType.code]" >
+            <template v-if="rightApiByTypeList[apiType.code]">
+              <el-checkbox v-for="item in rightApiByTypeList[apiType.code]" :key="item.data.NAME" :label="item.data.NAME" :value="item.data.NAME" >{{item.data.NAME}} / {{item.data.LABEL}}</el-checkbox>
+            </template>
+          </el-checkbox-group>
+          <div>
+          <div class="add-interface" v-if="addInterfaceFlag === apiType.code">
+            <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>
+        </div>
+      </div>
+      <template v-slot:footer><span>
+        <el-button size="default" @click="showAddInterfaceDialog=false" >取消</el-button>
+        <el-button size="default" type="primary" @click="saveApi">保存</el-button>
+      </span></template>
+    </el-dialog>
+     <el-dialog class="authorization-interface__dialog" title="添加业务规则" v-model="showAddRuleDialog"
+      width="960px"
+      append-to-body :destroy-on-close="true">
+      <div class="api-type">
+        <div class="api-type__header">
+          <span class="api-type__title">业务规则</span>
+          <span class="api-type__operate" >
+            <el-checkbox v-model="checkAllRule">全选</el-checkbox>
+            <span class="api-type__fold" @click="foldMap['rule'] = !foldMap.rule">{{foldMap.rule ? '展开' : '收起'}}<i :class="foldMap.rule ? 'el-icon-arrow-down' : 'el-icon-arrow-up'"></i></span>
+          </span>
+        </div>
+        <div class="api-type__content" :style="{display: foldMap.rule ? 'none' : 'block' }">
+          <el-checkbox-group class="apis-checkbox__group" v-model="checkRules" >
+              <div v-for="rule in ruleList" class="checkbox" :key="rule.KEY">
+                <el-checkbox :label="rule.KEY" :value="rule.KEY">
+                  {{rule.NAME}} / {{rule.KEY}}
+                </el-checkbox>
+              </div>
+          </el-checkbox-group>
+        </div>
+        </div>
+      <template v-slot:footer><div class="">
+        <el-button size="default" @click="showAddRuleDialog=false" >取消</el-button>
+        <el-button size="default" type="primary" @click="saveRule">保存</el-button>
+      </div></template>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import component from '@epxing/core/src/mixins/component'
+export default {
+  name: 'epx-authorization-interface',
+  mixins: [component],
+  props: {
+    formData: {
+      type: Object,
+      default () {
+        return {}
+      }
+    }
+  },
+  data () {
+    return {
+      checkedApiList: [],
+      checkedRuleList: [],
+      showAddInterfaceDialog: false,
+      showAddRuleDialog: false,
+      checkRules: [],
+      entityApiList: [],
+      ruleList: [],
+      addInterfaceFlag: false,
+      addInterfaceForm: {},
+      entityApiMap: {},
+      apiTypeList: [],
+      rightApiByTypeList: {},
+      foldMap: {},
+      checkApiMap: {}
+    }
+  },
+  computed: {
+    checkAllRule: {
+      get () {
+        return this.checkRules.length === this.ruleList.length
+      },
+      set (v) {
+        if (v) {
+          this.checkRules = this.ruleList.map(item => item.KEY)
+        } else {
+          this.checkRules = []
+        }
+      }
+    },
+    checkAllApiMap: {
+      get () {
+        const checkAllApiMap = {}
+        this.apiTypeList.map(item => {
+          if (this.rightApiByTypeList[item.code]) {
+            checkAllApiMap[item.code] = this.rightApiByTypeList[item.code].every(api => this.checkApiMap[item.code] && this.checkApiMap[item.code].includes(api.data.NAME))
+          } else {
+            checkAllApiMap[item.code] = false
+          }
+        })
+        return checkAllApiMap
+      }
+    }
+  },
+  methods: {
+    toCheckedApiList (names, entityApiMap = this.entityApiMap) {
+      return names.filter(name => !!name).map(name => {
+        const api = entityApiMap[name] || {}
+        return { name, id: api.ID, label: api.LABEL || name }
+      })
+    },
+    $refesh () {
+      this.getApiList()
+      this.getRuleList()
+    },
+    getCheckApiMap () {
+      Promise.all([this.getApiType(), this.getRightApiByType()])
+        .then(([apiTypeList, rightApiByTypeList]) => {
+          const checkApiMap = {}
+          apiTypeList.map(item => {
+            if (rightApiByTypeList[item.code]) {
+              checkApiMap[item.code] = rightApiByTypeList[item.code].filter(api => this.checkedApiList.find(item => item.name === api.data.NAME)).map(api => api.data.NAME)
+            } else {
+              checkApiMap[item.code] = []
+            }
+          })
+          this.checkApiMap = checkApiMap
+        })
+    },
+    getEntityApi () {
+      this.$http.get({
+        action: 'getUnusedApi',
+        entityId: 'FM_ENTITY_API',
+        metaId: this.formData.ENTITY
+      })
+        .then(data => {
+          this.entityApiList = data.entitys
+        })
+    },
+    getApiList () {
+      this.$http.get({
+        action: 'getEntityAllApi',
+        entityId: 'FM_ENTITY_API',
+        metaId: this.formData.ENTITY
+      })
+        .then(data => {
+          const entityApiMap = {}
+          this.allEntityApiList = data.entitys
+          data.entitys.forEach(item => {
+            entityApiMap[item.NAME] = item
+          })
+          this.entityApiMap = entityApiMap
+          this.getCheckApiMap()
+          const { APIS = '' } = this.formData
+          this.checkedApiList = this.toCheckedApiList(APIS.split(','), entityApiMap)
+        })
+    },
+    getApiType () {
+      return this.$http.getCodes({
+        key: 'FM_API_TYPE',
+        scope: 'all'
+      })
+        .then(data => {
+          this.apiTypeList = data
+          return data
+        })
+    },
+    getRightApiByType () {
+      return this.$http.get({
+        action: 'getRightApiByType',
+        entityId: 'FM_ENTITY_API',
+        metaId: this.formData.ENTITY,
+        rightId: this.formData.ID
+      })
+        .then(data => {
+          this.rightApiByTypeList = data
+          return this.rightApiByTypeList
+        })
+    },
+    getRuleList () {
+      this.$http.list({
+        entityId: 'ACT_RE_MODEL',
+        'scope.ENTITY': this.formData.ENTITY
+      })
+        .then(data => {
+          const { RULES = '' } = this.formData
+          this.ruleList = data.entitys
+          this.checkRules = RULES ? RULES.split(',') : []
+          this.checkedRuleList = RULES.split(',').map(item => {
+            const rule = data.entitys.find(rule => rule.KEY === item)
+            if (rule) return { name: item, id: rule.ID, label: rule.NAME }
+          }).filter(item => !!item)
+        })
+    },
+    deleteApi (api) {
+      this.$confirm(this.$t('Confirm the deletion') + '？')
+        .then(() => {
+          console.log(this.checkedApiList, api)
+          const index = this.checkedApiList.findIndex(item => item.name === api.name)
+          if (index !== -1) {
+            const checkedApiList = [...this.checkedApiList]
+            checkedApiList.splice(index, 1)
+            this.$http.update({
+              entityId: this.$metaId,
+              'bean.ID': this.formData.ID,
+              'bean.APIS': checkedApiList.map(item => item.name).join(',')
+            })
+              .then(data => {
+                this.$message.success('删除成功')
+                this.getCheckApiMap()
+                this.checkedApiList = [...checkedApiList]
+              })
+              .catch(err => {
+                this.$message.error(err.message)
+              })
+          }
+        })
+        .catch(() => {})
+    },
+    saveApi () {
+      const checkApis = Object.values(this.checkApiMap).reduce((arr, item) => [...arr, ...item], [])
+      this.$http.update({
+        entityId: this.$metaId,
+        'bean.ID': this.formData.ID,
+        'bean.APIS': checkApis.join(',')
+      })
+        .then(data => {
+          this.checkedApiList = this.toCheckedApiList(checkApis)
+          this.getCheckApiMap()
+          this.showAddInterfaceDialog = false
+        })
+        .catch(err => {
+          this.$message.error(err.message)
+        })
+    },
+    deleteRule (rule) {
+      this.$confirm(this.$t('Confirm the deletion') + '？')
+        .then(() => {
+          const index = this.checkedRuleList.findIndex(item => item.name === rule.name)
+          if (index !== -1) {
+            const checkedRuleList = [...this.checkedRuleList]
+            checkedRuleList.splice(index, 1)
+            this.$http.update({
+              entityId: this.$metaId,
+              'bean.ID': this.formData.ID,
+              'bean.RULES': this.checkedRuleList.map(item => item.KEY).join(',')
+            })
+              .then(data => {
+                this.$message.success('删除成功')
+                this.checkedRuleList = [...checkedRuleList]
+              })
+              .catch(err => {
+                this.$message.error(err.message)
+              })
+          }
+        })
+        .catch(() => {})
+    },
+    saveRule () {
+      this.$http.update({
+        entityId: this.$metaId,
+        'bean.ID': this.formData.ID,
+        'bean.RULES': this.checkRules.join(',')
+      })
+        .then(data => {
+          this.showAddRuleDialog = false
+          this.checkedRuleList = this.checkRules.map(item => {
+            const rule = this.ruleList.find(rule => rule.KEY === item)
+            if (rule) {
+              return { name: item, id: rule.ID, label: rule.NAME }
+            } else {
+              return { name: item }
+            }
+          })
+        })
+        .catch(err => {
+          this.$message.error(err.message)
+        })
+    },
+    addCustomApi () {
+      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': this.formData.ENTITY,
+        'bean.LABEL': LABEL,
+        'bean.NAME': NAME,
+        'bean.SOURCE': 'entity',
+        'bean.TYPE': this.addInterfaceFlag
+      })
+        .then(data => {
+          this.checkApis.push(NAME)
+          this.addInterfaceFlag = false
+          this.getRightApiByType()
+        })
+        .catch(err => {
+          this.$message.error(err.message)
+        })
+    },
+    addRule () {
+      const { addRulePage } = this.$configs
+      this.$createPage({
+        pageId: addRulePage,
+        openType: '2'
+      })
+    },
+    editRule (api) {
+      const { editRulePage } = this.$configs
+      this.$createPage({
+        pageId: editRulePage,
+        id: api.ID
+      })
+    },
+    addInterface () {
+      this.addInterfaceForm = {}
+      this.addInterfaceFlag = true
+    },
+    editInterface (api) {
+      this.addInterfaceForm = { ...api }
+      this.addInterfaceFlag = true
+    },
+    checkAllApi (type, v) {
+      if (v) {
+        const allApis = this.rightApiByTypeList[type] || []
+        this.checkApiMap[type] = allApis.map(item => item.data.NAME)
+      } else {
+        this.checkApiMap[type] = []
+      }
+    }
+  },
+  created () {
+    this.getRuleList()
+    this.getApiList()
+  }
+}
+</script>
+<style lang="scss" scoped>
+.box-card{
+    border: none;
+
+        :deep(.el-card__header) {
+            padding: 10px 12px 16px;
+            font-size: var(--epx-font-size-l);
+        }
+
+}
+.blue{
+    border-left: 3px solid;
+    border-color: #1f82ef;
+    padding-left: 6px;
+}
+.list-item{
+    border-bottom: 1px solid var(--epx-border);
+    padding: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+.item-gray{
+    background-color: var(--epx-bg);
+}
+.no-data{
+    color: var(--epx-text);
+    padding: 16px;
+    text-align: center;
+}
+.item-title{
+    font-size: var(--epx-font-size-l);
+    font-weight: 600;
+    color: var(--epx-text);
+}
+.item-info{
+    margin-bottom: 12px;
+    font-size: var(--epx-font-size-base);
+    color: var(--epx-text);
+}
+.item-label{
+    color: #444444;
+}
+.item-right{
+    // width: 130px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+.enable{
+    color: #3F8FFF;
+    margin-left: 6px;
+}
+.disable{
+    color: var(--epx-text);
+    margin-right: 6px;
+}
+.item-switch{
+    line-height: 100%;
+}
+.delete-red{
+ color: #E40F0F;
+}
+.delete-red:hover{
+ color: #E40F0F;
+}
+.authorization-content {
+  display: flex;
+}
+.authorization-list {
+  display: flex;
+  flex-wrap: wrap;
+}
+.authorization-item {
+  margin: 4px 5px;
+  padding: 6px 12px;
+  @include bg_color_primary(.2);
+  border: 1px dashed;
+  @include border_color_primary;
+  position: relative;
+  >i {
+    color: var(--epx-text);
+    margin-left: 4px;
+    cursor: pointer;
+  }
+  &:hover {
+    .authorization-item__modal {
+      display: flex;
+    }
+  }
+}
+.authorization-item__modal {
+  display: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  background: rgba(0,0,0,.6);
+  color: #fff;
+  justify-content: center;
+  align-items: center;
+  >span {
+    height: 16px;
+    width: 1px;
+    background: var(--epx-bg-card);
+    margin: 0 6px;
+  }
+  >i {
+    cursor: pointer;
+  }
+}
+</style>
+
+<style lang="scss" scoped>
+.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;
+}
+</style>
+<style lang="scss" scoped>
+.interface {
+  background: var(--epx-bg-card);
+}
+.interface-container {
+  padding: 0 20px;
+  margin-bottom: 20px;
+}
+.interface-title {
+  display: flex;
+  font-size: var(--epx-font-size-base);
+  justify-content: space-between;
+  align-items: center;
+  i{
+    @include font_color_primary;
+    margin-right: 6px;
+  }
+}
+.interface-list {
+  display: flex;
+  flex-wrap: wrap;
+  margin: 0 -10px;
+}
+.interface-item {
+  font-size: var(--epx-font-size-base);
+  width: calc(25% - 20px);
+  height: 54px;
+  box-sizing: border-box;
+  padding: 0 20px;
+  margin:  10px;
+  background: var(--epx-bg-card);
+  border-radius: var(--epx-radius-base);
+  border: 1px solid var(--epx-border);
+  display: flex;
+  justify-content:space-between;
+  align-items: center;
+  .interface-edit {
+    @include font_color_primary;
+    margin-right: 12px;
+  }
+  .interface-delete {
+    color: var(--epx-text-secondary);
+  }
+}
+.interface-operate {
+  white-space: nowrap;
+  i {
+    cursor: pointer;
+  }
+}
+.form-item__title {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 20px;
+  height: 48px;
+  border-bottom: 1px solid var(--epx-border);
+  span {
+    border-left: 4px solid;
+    @include border_color_primary;
+    padding-left: 8px;
+  }
+}
+.rule {
+  margin: 0 -12px;
+  margin-top: 20px;
+  border-top: 20px solid #F3F5FA;
+  background: var(--epx-bg-card);
+}
+.rule-edit {
+  cursor: pointer;
+  color: var(--epx-text);
+}
+.add-form__item {
+  display: flex;
+  align-items: center;
+  margin: 20px 0;
+  label {
+   margin-left: 12px;
+  }
+
+    :deep(.el-input) {
+      width: 220px;
+    }
+
+}
+.add-form__button {
+  margin-top: 40px;
+  text-align: center;
+}
+.api-type {
+  background: var(--epx-bg);
+  border-radius: var(--epx-radius-base);
+  margin-bottom: 16px;
+}
+.api-type__header {
+  height: 48px;
+  padding: 0 20px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid var(--epx-border);
+}
+.api-type__title {
+  border-left: 4px solid;
+  @include border_color_primary;
+  font-size: var(--epx-font-size-l);
+  color: var(--epx-text);
+  padding-left: 8px;
+  line-height: 1;
+}
+.api-type__fold {
+  margin-left: 20px;
+  cursor: pointer;
+  color:var(--epx-text);
+  i {
+    margin-left: 4px;
+  }
+}
+.api-type__content {
+  padding: 10px 20px;
+
+    :deep(.el-checkbox) {
+      padding: 10px 0;
+      color: var(--epx-text);
+    }
+
+}
+</style>
+<style lang="scss">
+.authorization-interface__dialog {
+  .el-dialog__footer {
+    display: flex;
+    justify-content: center;
+    border-top: 1px solid var(--epx-border);
+    padding-top: 20px;
+  }
+}
+</style>