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

package/src/components/authorization/PermissRoleAuthorization.vue

@@ -0,0 +1,1097 @@
+<template>
+    <div class="container">
+        <div class="list-operates" >
+          <div class="button-group" v-if="!readonly && $configs.operateFlag && checkRightOperates.length > 0 ">
+            <template v-for="operate in operates" :key="operate.text">
+              <el-button size="default" :type="operate.ui" @click="$handler(operate, null)">{{operate.text}}</el-button>
+            </template>
+          </div>
+          <el-input @change="getData(1)" style="width:200px" clearable v-model="searchText" placeholder="请输入对象编号、对象名称"></el-input>
+        </div>
+        <el-table
+            ref="multipleTable"
+            class="list-table no-border"
+            :data="tableData"
+            height="calc(100% - 128px)"
+            rowKey="entityId"
+            @select="selectionChange"
+            @select-all="selectionAll"
+            border
+            >
+            <el-table-column
+              type="selection"
+              width="55"
+              :reserve-selection="true"
+              v-if="!readonly"
+            >
+            </el-table-column>
+            <el-table-column
+                label="对象名称">
+                <template v-slot="scope">
+                    {{scope.row.entityName}}（{{scope.row.entityCode}}）
+                </template>
+            </el-table-column>
+            <!-- <el-table-column
+                label="对象编号">
+                <template v-slot="scope">
+
+                </template>
+            </el-table-column> -->
+            <el-table-column
+                label="功能权限">
+                <template v-slot="scope">
+                  <template v-if="readonly">
+                    <el-popover
+                        v-for="api in scope.row.apis"
+                        :key="api.apiId"
+                        placement="top-start"
+                        title=""
+                        :style="{ maxWidth: '200px' }"
+                        trigger="hover"
+                      >
+                        <div :style="{ display: 'inline-block', maxWidth: '300px' }">{{api.apiName.replace(/,/g, '、')}}</div>
+                        <template v-slot:reference><span :style="{marginRight: '8px', cursor: 'pointer'}"  >{{ api.apiLabel }}</span></template>
+                    </el-popover>
+                  </template>
+                  <template v-else>
+                    <el-checkbox v-for="api in scope.row.apis" :key="api.apiId" :value="!!selectionList.find(item=>item.apiId===api.apiId)" :label="api.apiId" @change="checkApi( scope.row, api)">
+                      <el-popover
+                        placement="top-start"
+                        title=""
+                        :style="{ maxWidth: '200px' }"
+                        trigger="hover"
+                      >
+                        <div :style="{ display: 'inline-block', maxWidth: '300px' }">{{api.apiName.replace(/,/g, '、')}}</div>
+                        <template v-slot:reference><span :style="{marginRight: '8px', cursor: 'pointer'}"  >{{ api.apiLabel }}</span></template>
+                      </el-popover>
+                    </el-checkbox>
+                  </template>
+                </template>
+            </el-table-column>
+            <el-table-column label="数据权限">
+              <template v-slot="scope"><div class="right-item">
+                <div>
+                  <template v-if="scope.row.dataScopes && scope.row.dataScopes['1']">
+                    <!-- 是否相等 -->
+                    <template v-if="isSameDataRight(scope.row)">
+                    <!-- 获取第一个 -->
+                      {{ getRightText(scope.row.dataScopes['1'])  }}
+                    </template>
+                    <template v-else>
+                      <!-- 循环 -->
+                      <p v-for="(item, key) in scope.row.dataScopes" :key="item.id" class="right-item__sub"><font class="right-item__title">{{ key==='1'? '新增':key==='2'? '查询' : key==='3'? '删除': '修改' }}：</font> {{getRightText(item)}}</p>
+                    </template>
+                  </template>
+                  <template v-else>/</template>
+                </div>
+                <i class="el-icon-setting" @click="editDataScope(scope)"></i>
+              </div></template>
+          </el-table-column>
+          <el-table-column
+            label="字段权限">
+            <template v-slot="scope"><div class="right-item">
+              <div>
+                <template v-if="scope.row.fieldScopes && scope.row.fieldScopes['1']">
+                  <!-- 是否相等 -->
+                  <template v-if="isSameFieldRight(scope.row)">
+                  <!-- 获取第一个 -->
+                    {{ getRightFieldText(scope.row.fieldScopes['1'])  }}
+                  </template>
+                  <template v-else>
+                    <!-- 循环 -->
+                    <p v-for="(item, key) in scope.row.fieldScopes" :key="item.id" class="right-item__sub"><font class="right-item__title">{{ key==='1'? '查看': key==='2'? '编辑' : '解密' }}：</font>{{getRightFieldText(item)}}</p>
+                  </template>
+                </template>
+                <template v-else>/</template>
+              </div>
+              <i class="el-icon-setting" @click="editFieldScope(scope.row)"></i>
+            </div></template>
+          </el-table-column>
+        </el-table>
+        <div class="pagination">
+         <el-pagination
+                  v-loading="loading"
+                  :currentPage="currentPage"
+                  :pageSizes="[5, 10, 15, 20, 30, 50, 100, 200]"
+                  :pageSize="pageSize"
+                  layout="prev, pager, next, jumper, sizes,total"
+                  :total="total"
+                  @size-change="sizeChange"
+                  @current-change="currentChange"
+                >
+        </el-pagination>
+        </div>
+        <!-- 编辑字段弹窗 -->
+        <el-dialog width="800px" v-model="editFieldDialog" destroy-on-close title="编辑字段权限">
+          <div class="scope-form">
+            <div class="scope-form__item">
+              <label for="">对象名称：</label>
+              <span>{{editItem.entityName}}</span>
+            </div>
+          </div>
+
+          <el-table class="scope-table" height="500px" border :data="allFields">
+            <el-table-column
+                width="80px"
+                :label="this.$t('numerical order')"
+                type="index"
+              >
+            </el-table-column>
+            <el-table-column label="字段名称" >
+              <template v-slot="scope">
+                {{scope.row.attriLabel}}
+              </template>
+            </el-table-column>
+            <el-table-column label="查看">
+              <template v-slot:header>
+                <span class="scope-table__title">查看</span>
+                <el-checkbox ref="detailSelectAll" :value="detailSelectAll" @change="v=>changeSelectAll(v, '1')">
+                  <span></span>
+                </el-checkbox>
+              </template>
+              <template v-slot="scope">
+              <el-checkbox :label="scope.row.attribute.id" :value="detailSelection.includes(scope.row.attribute.id)" @change="changeSelect(scope.row, '1')">
+                <span></span>
+              </el-checkbox>
+              </template>
+            </el-table-column>
+            <el-table-column label="编辑">
+              <template v-slot:header>
+                <span class="scope-table__title">编辑</span>
+                <el-checkbox  ref="editSelectAll" :value="editSelectAll" @change="v=>changeSelectAll(v, '2')">
+                  <span></span>
+                </el-checkbox>
+              </template>
+              <template v-slot="scope">
+              <el-checkbox :label="scope.row.attribute.id" :value="editSelection.includes(scope.row.attribute.id)" @change="changeSelect(scope.row, '2')">
+                <span></span>
+              </el-checkbox>
+              </template>
+            </el-table-column>
+             <el-table-column label="解密">
+              <template v-slot="scope">
+              <el-checkbox v-if="scope.row.attribute.isMasking==='1'" :label="scope.row.attribute.id" :value="decryptSelection.includes(scope.row.attribute.id)" @change="changeSelect(scope.row, '3')">
+                <span></span>
+              </el-checkbox>
+              </template>
+            </el-table-column>
+          </el-table>
+          <template v-slot:footer><div class="dialog-footer">
+            <el-button @click="editFieldDialog = false">取 消</el-button>
+            <el-button type="primary" @click="submitFieldScope">确 定</el-button>
+          </div></template>
+        </el-dialog>
+        <!-- 编辑数据权限弹窗 -->
+        <el-dialog width="960px" v-model="editDataDialog" title="编辑数据权限">
+          <div class="scope-form">
+            <div class="scope-form__item">
+              <label for="">对象名称：</label>
+              <span>{{editDataScopeForm.entityName}}</span>
+            </div>
+          </div>
+          <div class="scope-form__item">
+            <label for="">配置方式：</label>
+            <el-radio-group class="scope-radio__group" v-model="dataConfigWay">
+              <el-radio label="1" value="1">统一设置</el-radio>
+              <el-radio label="2" value="2">单个设置</el-radio>
+            </el-radio-group>
+          </div>
+          <div class="scope-form__item" v-show="dataConfigWay==='1'">
+            <label for="">统一配置方式：</label>
+            <el-radio-group class="scope-radio__group" v-model="dataAllConfigWay">
+              <el-radio v-for="item in dataScopeTypeList" :key="item.code" :label="item.code" :value="item.code">{{item.name}}</el-radio>
+            </el-radio-group>
+          </div>
+          <epx-form-scope v-if="dataConfigWay==='1' && dataAllConfigWay==='7'" v-model="dataAllConfig" :metaId="editDataScopeForm.entityId" :fieldConfigs="{state: 'EDIT'}" />
+          <epx-object class="scope-item__object"  v-if="dataConfigWay==='1' && dataAllConfigWay==='6'" v-model="dataAllConfigDeptId" :fieldConfigs="{attriLabel: '部门', codeKey: 'FM_DEPT', state:'EDIT',dataType: 'object', isTree: '1', isMultiple: '1' }"></epx-object>
+          <el-table class="scope-table" border :data="editDataScopeList">
+            <el-table-column label="数据操作" width="100px">
+              <template v-slot="scope">
+                {{scope.row.data.API_TYPE==='1' ? '新增':scope.row.data.API_TYPE==='2' ? '查询':scope.row.data.API_TYPE==='3' ? '删除': '修改'}}
+              </template>
+            </el-table-column>
+            <el-table-column label="权限范围">
+              <template v-slot="scope">
+                <template v-if="dataConfigWay==='1'">
+                  {{ getRightText(scope.row) }}
+                </template>
+                <template v-else>
+                  <el-radio-group class="scope-radio__group"  v-model="scope.row.data.TYPE">
+                    <el-radio v-for="item in dataScopeTypeList" :key="item.code" :label="item.code" :value="item.code">{{item.name}}</el-radio>
+                  </el-radio-group>
+                  <epx-form-scope v-if="scope.row.data.TYPE==='7'" v-model="scope.row.data.DATA_SCOPE" :metaId="scope.row.data.ENTITY" :fieldConfigs="{state: 'EDIT'}" />
+                  <epx-object class="scope-item__object" v-if="scope.row.data.TYPE==='6'" v-model="scope.row.data.DEPT_ID" :fieldConfigs="{attriLabel: '部门', codeKey: 'FM_DEPT', state:'EDIT',dataType: 'object', isTree: '1', isMultiple: '1' }"></epx-object>
+                </template>
+              </template>
+            </el-table-column>
+          </el-table>
+          <template v-slot:footer><div class="dialog-footer">
+            <el-button @click="editDataDialog = false">取 消</el-button>
+            <el-button type="primary" :loading="isSubmitDataLoading" @click="submitDataScope">确 定</el-button>
+          </div></template>
+        </el-dialog>
+    </div>
+</template>
+<script>
+import List from '@epxing/components/src/entity-list'
+export default {
+  name: 'epx-permiss-role-authorization',
+  pageSize: 10,
+  operateEllipsis: 6,
+  extends: List,
+  computed: {
+    dataScope () {
+      return (scope) => {
+        if (scope) {
+          return JSON.parse(scope).scopeText
+        } else {
+          return '/'
+        }
+      }
+    },
+    fieldScope () {
+      return (scope) => {
+        if (scope) {
+          return JSON.parse(scope).fieldNames
+        } else {
+          return '/'
+        }
+      }
+    },
+    selection () {
+      return this.selectionList
+    },
+    isSameDataRight () {
+      return data => {
+        const dataScopes = data.dataScopes
+        if (!dataScopes || !dataScopes['1'] || !dataScopes['1'].data) return true
+        const initData = dataScopes['1'].data
+        return Object.values(dataScopes).every(item => item.data && item.data.TYPE === initData.TYPE && item.data.DATA_SCOPE === initData.DATA_SCOPE && item.data.DEPT_ID === initData.DEPT_ID)
+      }
+    },
+    getRightText () {
+      return data => {
+        if (!data || !data.data) return ''
+        const { TYPE, DATA_SCOPE } = data.data
+        if (TYPE === '7') {
+          if (DATA_SCOPE) {
+            let text = ''
+            const scope = JSON.parse(DATA_SCOPE)
+            if (scope.scopeParams) {
+              scope.scopeParams.map((item, index) => (
+                text += (item.text || '') + (index === scope.scopeParams.length - 1 ? '' : item.link === 'or' ? ' 或者 ' : ' 并且 ')
+              ))
+            }
+
+            return text
+          }
+          return ''
+        } else if (TYPE === '1') {
+          const { LEVEL } = this.roleInfo
+          return LEVEL === '1' ? '默认（个人）' : LEVEL === '2' ? '默认（所属部门）' : '默认（全部）'
+        } else {
+          return this.dataScopeTypeMap[TYPE]
+        }
+      }
+    },
+    isSameFieldRight () {
+      return data => {
+        const fieldScopes = data.fieldScopes
+        if (!fieldScopes || !fieldScopes['1'] || !fieldScopes['1'].data) return true
+        const initData = fieldScopes['1'].data
+        return Object.values(fieldScopes).every(item => item.data && item.data.TYPE === initData.TYPE && item.data.FIELD_SCOPE === initData.FIELD_SCOPE)
+      }
+    },
+    getRightFieldText () {
+      return data => {
+        if (!data || !data.data) return ''
+        const { OPERATE_TYPE, TYPE, 'FIELD_SCOPE#': fieldNames } = data.data
+        if (TYPE === '1') {
+          return OPERATE_TYPE === '3' ? '无' : '全部'
+        } else {
+          return fieldNames
+        }
+      }
+    },
+    detailSelectAll () {
+      return this.detailSelection.length === this.allFields.length
+    },
+    editSelectAll () {
+      return this.editSelection.length === this.allFields.length
+    }
+  },
+  data () {
+    return {
+      roleInfo: {},
+      tableData: [],
+      searchText: '',
+      selectionList: [],
+      editFieldScopeForm: {},
+      editItem: {},
+      editFieldDialog: false,
+      allFields: [],
+      detailSelection: [],
+      editSelection: [],
+      decryptSelection: [],
+      editDataDialog: false,
+      editDataScopeForm: {},
+      editDataScopeList: [],
+      dataConfigWay: '2',
+      dataAllConfigWay: '1',
+      dataAllConfig: null,
+      dataAllConfigDeptId: null,
+      dataScopeTypeList: [],
+      isSubmitDataLoading: false
+    }
+  },
+  watch: {
+    detailSelectAll (v) {
+      const input = this.$refs.detailSelectAll.$el.querySelector('.el-checkbox__input')
+      if (input) {
+        if (v) {
+          input.className += ' is-checked'
+        } else {
+          input.className = 'el-checkbox__input'
+        }
+      }
+    },
+    editSelectAll (v) {
+      const input = this.$refs.editSelectAll.$el.querySelector('.el-checkbox__input')
+      if (input) {
+        if (v) {
+          input.className += ' is-checked'
+        } else {
+          input.className = 'el-checkbox__input'
+        }
+      }
+    },
+    decryptSelectAll (v) {
+      const input = this.$refs.decryptSelectAll.$el.querySelector('.el-checkbox__input')
+      if (input) {
+        if (v) {
+          input.className += ' is-checked'
+        } else {
+          input.className = 'el-checkbox__input'
+        }
+      }
+    },
+    dataConfigWay (v) {
+      if (v === '1') {
+        const editDataScopeList = this.$_.cloneDeep(this.editDataScopeList)
+        editDataScopeList.forEach(item => {
+          item.data.TYPE = this.dataAllConfigWay
+          item.data.DATA_SCOPE = this.dataAllConfig ? JSON.stringify(this.dataAllConfig) : ''
+          item.data.DEPT_ID = Array.isArray(this.dataAllConfigDeptId) ? this.dataAllConfigDeptId.map(dept => dept.id).join(',') : this.dataAllConfigDeptId
+        })
+        this.editDataScopeList = editDataScopeList
+      }
+    },
+    dataAllConfigWay (v) {
+      const editDataScopeList = this.$_.cloneDeep(this.editDataScopeList)
+      editDataScopeList.forEach(item => {
+        item.data.TYPE = this.dataAllConfigWay
+        item.data.DATA_SCOPE = this.dataAllConfig ? JSON.stringify(this.dataAllConfig) : ''
+        item.data.DEPT_ID = Array.isArray(this.dataAllConfigDeptId) ? this.dataAllConfigDeptId.map(dept => dept.id).join(',') : this.dataAllConfigDeptId
+      })
+      this.editDataScopeList = editDataScopeList
+    },
+    dataAllConfig () {
+      const editDataScopeList = this.$_.cloneDeep(this.editDataScopeList)
+      editDataScopeList.forEach(item => {
+        item.data.TYPE = this.dataAllConfigWay
+        item.data.DATA_SCOPE = this.dataAllConfig
+        item.data.DEPT_ID = this.dataAllConfigDeptId
+      })
+      this.editDataScopeList = editDataScopeList
+    },
+    dataAllConfigDeptId () {
+      const editDataScopeList = this.$_.cloneDeep(this.editDataScopeList)
+      editDataScopeList.forEach(item => {
+        item.data.TYPE = this.dataAllConfigWay
+        item.data.DATA_SCOPE = this.dataAllConfig
+        item.data.DEPT_ID = Array.isArray(this.dataAllConfigDeptId) ? this.dataAllConfigDeptId.map(dept => dept.id).join(',') : this.dataAllConfigDeptId
+      })
+      this.editDataScopeList = editDataScopeList
+    }
+  },
+  methods: {
+    getRoleInfo () {
+      this.$http.get({
+        entityId: 'FM_ROLE',
+        id: this.$query.roleId
+      })
+        .then(data => {
+          this.roleInfo = data.data
+        })
+    },
+    getDataScopeType () {
+      this.$store.dispatch({
+        type: 'ADD_LIST',
+        key: 'FM_DATASCOPE_TYPE'
+      })
+        .then(data => {
+          this.dataScopeTypeList = data
+          const dataScopeTypeMap = {}
+          data.forEach(item => {
+            dataScopeTypeMap[item.code] = item.name
+          })
+          this.dataScopeTypeMap = dataScopeTypeMap
+        })
+    },
+    search (scopeParams) {
+      if (scopeParams) {
+        this.searchScopeParams = scopeParams
+      }
+    },
+    selectionAll (selection) {
+      if (selection.length === 0) {
+        this.selectionList = []
+      } else {
+        const apis = this.tableData.reduce((arr, item) => [...arr, ...(item.apis || [])], [])
+        this.selectionList = apis
+      }
+    },
+    selectionChange (selection, row) {
+      const index = selection.findIndex(item => item.entityId === row.entityId)
+      const rowApis = row.apis || []
+      if (index !== -1) {
+        // 删除所有的接口
+        this.selectionList = [...new Set([...this.selectionList, ...rowApis])]
+      } else {
+        rowApis.forEach(api => {
+          const apiIndex = this.selectionList.findIndex(item => item.apiId === api.apiId)
+          if (apiIndex !== -1) this.selectionList.splice(apiIndex, 1)
+        })
+      }
+
+      // 获取对象
+      // this.selection = [...selection]
+      // 选中对象下所有接口
+    },
+    checkApi (row, api) {
+      const index = this.selectionList.findIndex(item => item.apiId === api.apiId)
+      const entityApis = row.apis || []
+      // 如果全选了，或者全取消  取消勾选
+      if (index !== -1) {
+        this.selectionList.splice(index, 1)
+        const flag = entityApis.some(api => !this.selectionList.find(item => item.apiId === api.apiId))
+        if (flag) this.$refs.multipleTable.toggleRowSelection(row, false)
+      } else {
+        this.selectionList.push(api)
+        const flag = entityApis.every(api => this.selectionList.find(item => item.apiId === api.apiId))
+        if (flag) {
+          this.$refs.multipleTable.toggleRowSelection(row, true)
+        }
+      }
+    },
+    // 添加操作接口
+    addApi () {
+      this.$createPage({
+        title: '添加操作权限',
+        component: 'authorization-add-no-api',
+        metaId: this.$metaId,
+        openType: '2',
+        roleId: this.$query.roleId,
+        systemId: this.$query.systemId,
+        systemType: this.$query.systemType
+      })
+    },
+    // 启用
+    startApi () {
+      if (this.selectionList.length === 0) {
+        this.$message.error('请至少选择一个记录')
+        return
+      }
+      const apiRoleIds = this.selectionList.map(item => item.apiRoleId).join(',')
+      const apiAuthStatus = this.selectionList.map(item => item.apiAuthStatus).join(',')
+      if (apiAuthStatus.indexOf('disable') === -1) {
+        this.$message.error('接口已经为全部启用状态')
+        return
+      }
+      this.$confirm('确定启用', {
+        confirmButtonText: this.$t('confirm'),
+        cancelButtonText: this.$t('cancel'),
+        type: 'warning'
+      }).then(() => {
+        this.$http.$post({
+          action: 'setRoleApiStatus',
+          entityId: this.$metaId,
+          ids: apiRoleIds,
+          status: 'enable'
+        }).then(() => {
+          this.$refs.multipleTable.clearSelection()
+          this.selectionList = []
+          this.getData()
+          this.$message({
+            type: 'success',
+            message: '操作成功!'
+          })
+        })
+      })
+    },
+    // startApi () {
+    //   if (this.selection.length > 1) {
+    //     this.$message.error('请不要选择多个记录')
+    //     return
+    //   }
+    //   if (this.selection.length === 0) {
+    //     this.$message.error('请选择一个记录')
+    //     return
+    //   }
+    //   const item = this.selection[0]
+    //   if (item.apiAuthStatus === 'enable') {
+    //     this.$message.error('该接口已经启用')
+    //     return
+    //   }
+    //   this.$confirm('确定启用', {
+    //     confirmButtonText: this.$t('confirm'),
+    //     cancelButtonText: this.$t('cancel'),
+    //     type: 'warning'
+    //   }).then(() => {
+    //     this.$http.update({
+    //       entityId: this.$metaId,
+    //       'bean.ID': item.apiRoleId,
+    //       'bean.STATUS': 'enable'
+    //     }).then(() => {
+    //       item.apiAuthStatus = 'enable'
+    //       this.selection.splice(0, 1, item)
+    //       this.getData()
+    //       this.$message({
+    //         type: 'success',
+    //         message: '操作成功!'
+    //       })
+    //     })
+    //   })
+    // },
+    // 停用
+    stopApi () {
+      if (this.selectionList.length === 0) {
+        this.$message.error('请至少选择一个记录')
+        return
+      }
+      const apiRoleIds = this.selectionList.map(item => item.apiRoleId).join(',')
+      const apiAuthStatus = this.selectionList.map(item => item.apiAuthStatus).join(',')
+      if (apiAuthStatus.indexOf('enable') === -1) {
+        this.$message.error('接口已经为全部停用状态')
+        return
+      }
+      this.$confirm('确定停用', {
+        confirmButtonText: this.$t('confirm'),
+        cancelButtonText: this.$t('cancel'),
+        type: 'warning'
+      }).then(() => {
+        this.$http.$post({
+          action: 'setRoleApiStatus',
+          entityId: this.$metaId,
+          ids: apiRoleIds,
+          status: 'disable'
+        }).then(() => {
+          this.$refs.multipleTable.clearSelection()
+          this.selectionList = []
+          this.getData()
+          this.$message({
+            type: 'success',
+            message: '操作成功!'
+          })
+        })
+      })
+    },
+    // stopApi () {
+    //   if (this.selection.length > 1) {
+    //     this.$message.error('请不要选择多个记录')
+    //     return
+    //   }
+    //   if (this.selection.length === 0) {
+    //     this.$message.error('请选择一个记录')
+    //     return
+    //   }
+    //   const item = this.selection[0]
+    //   if (item.apiAuthStatus === 'disable') {
+    //     this.$message.error('该接口已经停用')
+    //     return
+    //   }
+    //   this.$confirm('确定停用', {
+    //     confirmButtonText: this.$t('confirm'),
+    //     cancelButtonText: this.$t('cancel'),
+    //     type: 'warning'
+    //   }).then(() => {
+    //     this.$http.update({
+    //       entityId: this.$metaId,
+    //       'bean.ID': item.apiRoleId,
+    //       'bean.STATUS': 'disable'
+    //     }).then(() => {
+    //       item.apiAuthStatus = 'disable'
+    //       this.selection.splice(0, 1, item)
+    //       this.getData()
+    //       this.$message({
+    //         type: 'success',
+    //         message: '操作成功!'
+    //       })
+    //     })
+    //   })
+    // },
+    // 设置数据范围
+    settingDataScope (config, item) {
+      if (!item) {
+        if (this.selectionList.length > 1) {
+          this.$message.error('请不要选择多个记录')
+          return
+        }
+        if (this.selectionList.length === 0) {
+          this.$message.error('请选择一个记录')
+          return
+        }
+        item = this.selectionList[0]
+      }
+      this.$createPage({
+        title: '设置数据范围',
+        component: 'add-role-scope',
+        // metaId: 'FM_ENTITY_RIGHT_ROLE',
+        metaId: this.$metaId,
+        entityId: item.entityId,
+        openType: '2',
+        comType: 'role',
+        id: item.apiRoleId
+      })
+    },
+    // column删除
+    deleteAuthorizationRole (row) {
+      const id = (row.apis || []).map(item => item.apiRoleId).join(',')
+      this.$confirm(this.$t('Confirm the deletion') + '？')
+        .then(() => {
+          this.$http.removeMulti({
+            entityId: this.$metaId,
+            ids: id
+          })
+            .then(() => {
+              this.$message.success('删除成功')
+              this.$refs.multipleTable.clearSelection()
+              this.selectionList = []
+              this.getData()
+            })
+            .catch(err => {
+              this.$message.error(err.message || '删除失败')
+            })
+        })
+        .catch(() => {})
+    },
+    deleteRoleApis () {
+      if (this.selectionList.length === 0) {
+        this.$message.error('请至少选择一个记录')
+        return
+      }
+      const apiRoleIds = this.selectionList.map(item => item.apiRoleId).join(',')
+      this.$confirm(this.$t('Confirm the deletion') + '？')
+        .then(() => {
+          this.$http.removeMulti({
+            entityId: this.$metaId,
+            ids: apiRoleIds
+          })
+            .then(() => {
+              this.$message.success('删除成功')
+              this.$refs.multipleTable.clearSelection()
+              this.selectionList = []
+              this.getData()
+            })
+            .catch(err => {
+              this.$message.error(err.message || '删除失败')
+            })
+        })
+        .catch(() => {})
+    },
+    // 设置字段范围
+    settingFieldScope () {
+      // console.log(this.selection)
+    },
+    getDefaultOperates () {
+      const { editPage, operates, columnOperates } = this.$configs
+      const defaultOperates = [
+        {
+          text: '添加操作接口',
+          handler: 'addApi',
+          ui: 'primary'
+        },
+        // {
+        //   text: '启用',
+        //   handler: 'startApi'
+        // },
+        // {
+        //   text: '停用',
+        //   handler: 'stopApi'
+        // },
+        // {
+        //   text: '设置数据范围',
+        //   handler: 'settingDataScope'
+        // },
+        // {
+        //   text: '设置字段范围',
+        //   handler: 'settingFieldScope'
+        // },
+        {
+          text: '删除',
+          handler: 'deleteRoleApis',
+          action: 'removeMulti',
+          num: 'n',
+          confirmMsg: this.$t('Confirm the deletion') + '？',
+          successMsg: '删除成功',
+          params: {
+            ids: `#[${this.$metaKey}]`
+          }
+        }
+      ]
+
+      const defaultColumnOperates = [
+        {
+          text: '编辑',
+          handler: 'goPage',
+          num: 1,
+          component: editPage,
+          openMode: '3',
+          params: {
+            callback: '$[getData]'
+          }
+        },
+        {
+          text: '删除',
+          handler: 'commonAction',
+          action: 'removeMulti',
+          num: 'n',
+          confirmMsg: this.$t('Confirm the deletion') + '？',
+          successMsg: '删除成功',
+          params: {
+            ids: `#[${this.$metaKey}]`
+          }
+        }
+      ]
+      if (!operates) {
+        this.configs.operates = defaultOperates
+      }
+      if (!columnOperates) {
+        this.configs.columnOperates = defaultColumnOperates
+      }
+    },
+    addAuthorization (row) {
+      if (row.apiId) {
+        this.$createPage({
+          flag: 'v_entity_api_authorization',
+          metaId: 'FM_ENTITY_RIGHT',
+          id: row.apiId,
+          pageType: 'DETAIL',
+          entityId: row.entityId
+        })
+      } else {
+        this.$message.error('该对象下没有接口')
+      }
+    },
+    // 合并行
+    objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
+      if (columnIndex <= 1) {
+        const apisLength = (row.apis || []).length
+        if (row.merge && apisLength > 0) {
+          return {
+            rowspan: apisLength,
+            colspan: 1
+          }
+        } else if (row.merge && apisLength === 0) {
+          return {
+            rowspan: 1,
+            colspan: 1
+          }
+        } else {
+          return {
+            rowspan: 0,
+            colspan: 0
+          }
+        }
+      }
+    },
+    // tableRowClassName ({ row, rowIndex }) {
+    //   console.log(rowIndex)
+    //   if (rowIndex % 2 === 0) {
+    //     return 'even-row'
+    //   } else {
+    //     return ''
+    //   }
+    // },
+    getData (current, cb) {
+      // eslint-disable-next-line camelcase
+      let { queryParams = {}, pageFlag, orderFields, order_field: orderField = [], order_mode: orderMode = [], limit } = this.$configs
+      //   const fields = this.listFields.map(item => (item.attriName || item))
+      const params = {
+        action: 'getRoleLocalApiManagement',
+        roleId: this.$query.roleId,
+        entityId: this.$metaId,
+        searchText: this.searchText
+      }
+      if (this.$query.systemType === 'others') {
+        params.action = 'getRoleDesignatedSystemApiManagement'
+        params.systemId = this.$query.systemId
+      }
+      //   if (fields.length > 0) {
+      //     params.columnFieldNames = fields.join('#,') + '#'
+      //   }
+      const functionField = this.listFields.filter(item => {
+        return item.function
+      })
+      let functionList = []
+      if (functionField.length > 0) {
+        functionList = functionField.map(item => ({ dataIndex: item.attriName, function: item.function }))
+        params.fieldFunctions = JSON.stringify(functionList)
+      }
+      if (pageFlag) {
+        params.page = current || this.currentPage
+        params.limit = this.pageSize
+      }
+      if (limit) {
+        params.limit = limit
+      }
+      if (this.scopeParams) {
+        params.scopeParams = JSON.stringify(this.scopeParams)
+      }
+      if (orderFields && orderFields.length > 0) {
+        orderField = orderFields.map(item => item.attriName || item)
+        orderMode = orderFields.map(item => item.sort || 'asc')
+      }
+      if (this.loading) return
+      this.loading = true
+
+      this.$http.list({
+        ...params,
+        ...this.$formatParams(queryParams),
+        ...this.queryParams,
+        ...this.sortParams,
+        order_field: orderField.join(','),
+        order_mode: orderMode.join(',')
+      })
+        .then(data => {
+          this.initData = true
+          this.loading = false
+          if (current) this.currentPage = current
+          // this.data = data.entitys ? [...data.entitys] : []
+          this.tableData = data.entitys || []
+          // this.data.forEach(element => {
+          //   if (element.apis.length > 0) {
+          //     element.apis.forEach((item, index) => {
+          //       this.tableData.push({ ...item, ...element, merge: index === 0 })
+          //     })
+          //   } else {
+          //     this.tableData.push({ ...element, merge: true })
+          //   }
+          // })
+          this.total = data.total || this.tableData.length
+          this.$bus.emit('refreshCount', { total: this.total, index: this.$query.componentIndex })
+          if (cb) cb(this.data)
+          this.$dispatchPage('listData', [{ total: this.total, entitys: this.data }])
+          this.$emit('listData', { total: this.total, entitys: this.data })
+          if (this.afterData) this.afterData(this.data)
+        })
+        .catch(() => {
+          this.loading = false
+        })
+    },
+    editFieldScope (scope) {
+      this.editFieldScopeForm = {
+        ...scope.fieldScopes
+      }
+      this.editItem = scope
+      this.$store.dispatch({
+        type: 'ADD_META',
+        metaId: scope.entityId
+      })
+        .then(meta => {
+          this.allFields = meta.getAllFieldConfigs()
+          this.editFieldDialog = true
+          const fieldScopes = scope.fieldScopes || {}
+          const detailData = fieldScopes['1']?.data || {}
+          const editData = fieldScopes['2']?.data || {}
+          const decryptData = fieldScopes['3']?.data || {}
+          if (detailData.TYPE === '1') {
+            this.detailSelection = this.allFields.map(item => item.attribute.id)
+          } else {
+            const selects = detailData.FIELD_SCOPE ? detailData.FIELD_SCOPE.split(',') : []
+            this.detailSelection = selects
+          }
+          if (editData.TYPE === '1') {
+            this.editSelection = this.allFields.map(item => item.attribute.id)
+          } else {
+            const selects = editData.FIELD_SCOPE ? editData.FIELD_SCOPE.split(',') : []
+            this.editSelection = selects
+          }
+          if (decryptData.TYPE === '1') {
+            this.decryptSelection = []
+          } else {
+            const selects = decryptData.FIELD_SCOPE ? decryptData.FIELD_SCOPE.split(',') : []
+            this.decryptSelection = selects
+          }
+        })
+    },
+    changeSelect (row, type) {
+      if (type === '1') {
+        const index = this.detailSelection.findIndex(item => item === row.attribute.id)
+        if (index !== -1) {
+          this.detailSelection.splice(index, 1)
+        } else {
+          this.detailSelection.push(row.attribute.id)
+        }
+      } else if (type === '2') {
+        const index = this.editSelection.findIndex(item => item === row.attribute.id)
+        if (index !== -1) {
+          this.editSelection.splice(index, 1)
+        } else {
+          this.editSelection.push(row.attribute.id)
+        }
+      } else {
+        const index = this.decryptSelection.findIndex(item => item === row.attribute.id)
+        if (index !== -1) {
+          this.decryptSelection.splice(index, 1)
+        } else {
+          this.decryptSelection.push(row.attribute.id)
+        }
+      }
+    },
+    changeSelectAll (v, type) {
+      if (type === '1') {
+        if (!this.detailSelectAll) {
+          this.detailSelection = this.allFields.map(item => item.attribute.id)
+        } else {
+          this.detailSelection = []
+        }
+      } else if (type === '2') {
+        if (!this.editSelectAll) {
+          this.editSelection = this.allFields.map(item => item.attribute.id)
+        } else {
+          this.editSelection = []
+        }
+      }
+    },
+    submitFieldScope () {
+      const entityList = Object.keys(this.editFieldScopeForm).filter(item => item === '1' || item === '2' || item === '3').map(item => {
+        const data = this.editFieldScopeForm[item].data
+        const fieldList = item === '1' ? this.detailSelection : item === '2' ? this.editSelection : this.decryptSelection
+        const type = fieldList.length === this.allFields.length ? '1' : '2'
+        return {
+          ID: data.ID,
+          TYPE: type,
+          FIELD_SCOPE: type === '1' ? '' : fieldList.join(','),
+          OPERATE_TYPE: item,
+          ENTITY: this.editItem.entityId,
+          ROLE: this.$query.roleId
+        }
+      })
+      this.$http.save({
+        action: 'setRoleFieldScope',
+        entityId: 'FM_ROLE_FIELDSCOPE',
+        entityList: entityList
+      })
+        .then(data => {
+          this.$message.success('修改成功')
+          this.editFieldDialog = false
+          this.allFields = []
+          this.editFieldScopeForm = {}
+          this.editItem = {}
+          this.getData()
+        })
+        .catch(err => {
+          this.$message.error(err.message)
+        })
+    },
+    editDataScope (scope, system) {
+      this.editDataDialog = true
+      this.editDataSystem = this.$query.id
+      this.editDataScopeForm = { ...scope.row }
+      const dataScopes = scope.row.dataScopes || {}
+      this.editDataScopeList = Object.keys(dataScopes).filter(item => item === '1' || item === '2' || item === '3' || item === '4').map(item => dataScopes[item])
+      // 获取是否相同
+      const isSame = this.isSameDataRight(scope.row)
+      if (isSame && this.editDataScopeList.length) {
+        this.dataConfigWay = '1'
+        this.dataAllConfigWay = this.editDataScopeList[0].data.TYPE || '1'
+        this.dataAllConfig = this.editDataScopeList[0].data.DATA_SCOPE
+        this.dataAllConfigDeptId = this.editDataScopeList[0].data.DEPT_ID
+      } else {
+        this.dataConfigWay = '2'
+      }
+    },
+    submitDataScope () {
+      this.isSubmitDataLoading = true
+      this.$http.save({
+        action: 'setRoleDataScope',
+        entityId: 'FM_ROLE_DATASCOPE',
+        entityList: this.editDataScopeList.map(item => ({
+          ID: item.data.ID,
+          TYPE: !item.data.DATA_SCOPE && item.data.TYPE === '7' ? '1' : item.data.TYPE,
+          DATA_SCOPE: item.data.DATA_SCOPE,
+          DEPT_ID: item.data.DEPT_ID
+        }))
+      })
+        .then(data => {
+          this.$message.success('修改成功')
+          this.editDataDialog = false
+          this.editDataScopeList = []
+          this.editDataScopeForm = {}
+          this.getData()
+          this.isSubmitDataLoading = false
+        })
+        .catch(err => {
+          this.$message.error(err.message)
+          this.isSubmitDataLoading = false
+        })
+    }
+  },
+  created () {
+    this.getRoleInfo()
+    this.getDataScopeType()
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.container {
+  height: 100%;
+}
+.list-operates {
+  padding: 16px 0;
+  display: flex;
+  justify-content: space-between;
+}
+.button-group {
+  margin-left: 10px;
+}
+.list-table {
+
+    :deep(.el-table__row.hover-row>td) {
+      background: none
+    }
+
+}
+.pagination {
+  padding-top: 10px;
+}
+.right-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  >i {
+    cursor: pointer;
+    &:hover {
+      @include font_color_primary;
+    }
+  }
+}
+.scope-form__item {
+  margin: 12px 0;
+}
+.right-item__title {
+  font-weight: bold;
+}
+.right-item__sub {
+  margin: 8px 0;
+}
+.scope-table__title {
+  margin-right: 6px;
+}
+.scope-item__object {
+  width: 200px;
+  margin: 10px 0;
+}
+</style>