epx-frame 3.5.0-shpgy.1

package/src/frame/components/EntityRightSubList.vue

@@ -0,0 +1,588 @@
+<template>
+  <div class="container">
+    <div class="operate">
+      <el-button type="primary" size="medium" class="right-add" @click="commonDialogVisible=true">添加常用权限</el-button>
+      <el-button type="primary" size="medium" 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="text" @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 class="right-operate">
+          <!-- <el-button type="text" @click="editRight(item)">编辑</el-button> -->
+          <el-button type="text" @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="添加权限"
+      :visible.sync="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">
+                  {{api.LABEL}}/{{api.NAME}}
+                </el-checkbox>
+                <el-popconfirm
+                  v-if="api.ENTITY"
+                  confirm-button-text='确认'
+                  cancel-button-text='取消'
+                  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="text" icon="el-icon-plus" @click="addInterfaceFlag=true">添加自定义接口</el-button>
+          </div>
+        </div>
+        <div class="add-interface" v-if="addInterfaceFlag">
+          <span>自定义接口：</span>
+          <el-input size="medium" v-model="addInterfaceForm.NAME" placeholder="接口命令"></el-input>
+          <el-input  size="medium" v-model="addInterfaceForm.LABEL" placeholder="接口名称"></el-input>
+          <el-button  size="medium" type="text" @click="addCustomApi">保存</el-button>
+          <el-button :style="{color: '#666'}" size="medium" type="text" @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">
+                  {{rule.NAME}}/{{rule.KEY}}
+                </el-checkbox>
+              </div>
+            </el-checkbox-group>
+          </div>
+        </div> -->
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="submitRight">确 定</el-button>
+      </span>
+    </el-dialog>
+    <el-dialog
+      title="添加常用权限"
+      :visible.sync="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" v-for="item in commonApis" :key="item.TYPE">
+              <div class="right-title">
+                <label>{{item.TYPE}}</label>
+                <el-checkbox class="checkbox" :label="item.TYPE" size="medium">{{''}}</el-checkbox>
+              </div>
+              <div class="right-interface" :title="item.APIS.replace(/\,/g, '、')">
+                接口集：{{item.APIS.replace(/\,/g, '、')}}
+              </div>
+            </li>
+          </ul>
+        </el-checkbox-group>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="commonDialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="saveCommonApis">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import component from '@/utils/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: []
+    }
+  },
+  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]
+    }
+  },
+  methods: {
+    getCommonApis () {
+      const { id } = this.$query
+      this.$http.get({
+        entityId: 'FM_ENTITY_API',
+        action: 'getCommonApi',
+        targetEntityId: id
+      })
+        .then(data => {
+          this.commonApis = data.apis
+        })
+    },
+    getRightList () {
+      const { id } = this.$query
+      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
+        })
+    },
+    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 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
+      }
+      this.commonApiIds.forEach(item => {
+        const common = this.commonApis.find(api => api.TYPE === item)
+        if (common) {
+          this.$http.save({
+            ...params,
+            'bean.NAME': common.TYPE,
+            'bean.APIS': common.APIS
+          })
+            .then(data => {
+              this.getRightList()
+              this.getEntityApi()
+              this.commonDialogVisible = false
+            })
+            .catch(err => {
+              this.$message.error(err.message)
+            })
+        }
+      })
+    },
+    removeRight (item) {
+      this.$confirm('确认删除?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        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
+      this.$createPage({
+        entityId: item.ENTITY,
+        id: item.ID,
+        pageId: rightPageId,
+        pageType: 'DETAIL'
+      })
+    },
+    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.getAllEntityApi()
+      this.getEntityApi()
+    }
+  },
+  created () {
+    this.getRightList()
+    this.getRuleList()
+    this.getCommonApis()
+    this.getAllEntityApi()
+    this.getEntityApi()
+    this.getFieldConfigs()
+  }
+
+}
+</script>
+
+<style scoped lang="scss">
+.container {
+  background: #fff;
+  padding: 10px;
+}
+.operate {
+  margin: 10px 0;
+}
+.right-add {
+  margin-left: 10px;
+}
+.right-list {
+  display: flex;
+  flex-wrap: wrap;
+}
+.right-item {
+  font-size: 14px;
+  position: relative;
+  width: calc(25% - 20px);
+  box-sizing: border-box;
+  margin: 10px;
+  padding: 16px;
+  padding-bottom: 32px;
+  border: 1px solid #e3e3e3;
+  border-radius: 4px;
+}
+.right-title {
+  display: flex;
+  justify-content: space-between;
+  font-size: 16px;
+  font-weight: 600;
+}
+.right-interface {
+  margin: 10px 0;
+  max-height: 40px;
+  color: #666;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+}
+.right-delete {
+  padding: 0;
+  font-size: 16px;
+}
+.right-operate {
+  position: absolute;
+  right: 20px;
+  bottom: 12px;
+  float: right;
+  &::v-deep {
+    .el-button {
+      padding: 0;
+    }
+  }
+}
+.checkbox {
+  position: relative;
+  right: -4px;
+  &::v-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;
+  &::v-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;
+  }
+  &::v-deep {
+    .el-input {
+      width: 160px;
+      margin-right: 10px;
+    }
+  }
+}
+.api-tag {
+  margin-right: 8px;
+}
+.null-data {
+  text-align: center;
+  color:#666;
+  margin: 20px 0;
+  &>i {
+    font-size: 100px;
+    @include font_color_primary
+  }
+}
+.tree {
+  max-height: 400px;
+  overflow: auto;
+}
+.common-right {
+  &::v-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: 14px;
+  }
+}
+.add-right {
+  max-height: 500px;
+  overflow: auto;
+}
+.add-custom-right__dialog {
+  &::v-deep {
+    .el-dialog__body {
+      padding: 0;
+    }
+  }
+}
+</style>