epx-frame 3.5.0-shpgy.1

package/src/frame/base/ServiceOperate.vue

@@ -0,0 +1,929 @@
+<template>
+  <div class="container">
+    <!-- 按钮区域 -->
+    <div class="table-operates">
+      <div class="button-group" >
+        <el-button type="primary" size="middle" @click="dialogTableVisible=true">{{$t('add')}}</el-button>
+        <el-button size="middle" @click="deleteRecord">{{$t('delete')}}</el-button>
+      </div>
+      <!-- 内联查询 显示条件->不配置筛选区域 -->
+      <div class="search-inline">
+        <el-input size="medium" :placeholder="$t('please enter the object name or object number')" v-model="searchKey" @change="seachEntity" class="input-with-select" clearable suffix-icon="el-icon-search">
+        </el-input>
+      </div>
+    </div>
+    <el-dialog :title="$t('add object operation')" class="table-dialog" :visible.sync="dialogTableVisible">
+      <div class="dialog-add-entity-title">
+        <el-button type="primary" size="middle" @click="addScopeMulti">{{$t('determine')}}</el-button>
+      <div class="dialog-right-input">
+        <el-input :placeholder="$t('please enter an object name')" v-model="searchKeyName" clearable></el-input>
+        <!-- <el-input placeholder="请输入对象名称" v-model="searchKeyName" @change="seachEntityMethod" clearable></el-input> -->
+      </div>
+      </div>
+      <!-- <el-table :data="unallocatedList" style="width: 100%" height="480"> -->
+      <el-table :data="seachEntityMethod" style="width: 100%" height="480">
+          <el-table-column :label="$t('object name')" prop="entityName"></el-table-column>
+          <el-table-column
+            :label="$t('check all')"
+          >
+            <template slot-scope="{row}">
+              <el-checkbox :value="isRowChecked(row)" @change="v=>changeRowChecked(row, v)"></el-checkbox>
+            </template>
+          </el-table-column>
+          <el-table-column :label="$t('object operation')" min-width="240">
+            <template slot-scope="{row}">
+              <el-checkbox v-for="operate in (row.operateInfos || [])" v-model="operate.checked" :key="operate.operateId">{{operate.operateName}}</el-checkbox>
+            </template>
+          </el-table-column>
+        </el-table>
+  </el-dialog>
+    <div class="table no-border">
+      <el-table
+        :data="dataList"
+        :span-method="dataListSpanMethod"
+        :row-class-name="tableRowClassName"
+        border
+        style="width: 100%;height: 100%;"
+        @selection-change="handleSelectionChange"
+      >
+        <el-table-column
+          type="selection"
+          width="55"
+        >
+        </el-table-column>
+        <el-table-column
+          :label="$t('object name')">
+          <template slot-scope="scope">
+            {{scope.row.entityName}}
+          </template>
+        </el-table-column>
+        <el-table-column
+          :label="$t('object operation')">
+          <template slot-scope="scope">
+            {{scope.row.operateName}}
+          </template>
+        </el-table-column>
+        <!-- <el-table-column
+          label="授权">
+          <template slot-scope="scope">
+             <el-checkbox v-model="scope.row.isAuth" true-label="1" false-label="0" @change="authorization(scope.row.operateId,$event)"></el-checkbox>
+          </template>
+        </el-table-column> -->
+        <el-table-column
+            :label="$t('scope of data')"
+          >
+            <template slot-scope="scope">
+              <div class="data-range-container">
+                <span v-if="scope.row.isAuth==='1'&&!scope.row.dataScope" @click="cellClick(scope.row,scope.$index)">+ {{$t('select range')}}</span>
+                <el-tooltip v-if="scope.row.isAuth==='1'&& scope.row.dataScope"  class="item" effect="dark" :content="changeJsonRange(scope.row.dataScope)" placement="top">
+                  <!-- <span class="data-range-content" @click="cellClick(scope.row,scope.$index)"> -->
+                  <span class="data-range-content">
+                    {{changeJsonRange(scope.row.dataScope)}}
+                  </span>
+                </el-tooltip>
+                <span v-if="scope.row.isAuth==='1'&& scope.row.dataScope" class="data-range-edit">
+                  <i class="el-icon-edit data-range-icon data-range-icon-edit" @click="cellClick(scope.row,scope.$index)"></i>
+                  <i class="el-icon-delete data-range-icon" @click="deleteDataRange(scope.row,scope.$index)"></i>
+                </span>
+              </div>
+            </template>
+        </el-table-column>
+        <el-table-column
+            :label="$t('range of fields')"
+          >
+            <template slot-scope="scope">
+              <div class="data-range-container">
+                  <span v-if="scope.row.isAuth==='1'&&!scope.row.fieldScope" @click="getFields(scope.row.entityId,scope.row.fieldScope,scope.row,scope.$index)">+ {{$t('select range')}}</span>
+                  <el-tooltip v-if="scope.row.isAuth==='1'&& scope.row.fieldScope"  class="item" effect="dark" :content="changeJsonRangeTwo(scope.row.fieldScope)" placement="top">
+                    <span class="data-range-content">
+                      {{changeJsonRangeTwo(scope.row.fieldScope)}}
+                    </span>
+                  </el-tooltip>
+                  <span v-if="scope.row.isAuth==='1'&& scope.row.dataScope" class="data-range-edit">
+                    <i class="el-icon-edit data-range-icon data-range-icon-edit" @click="getFields(scope.row.entityId,scope.row.fieldScope,scope.row,scope.$index)"></i>
+                    <i class="el-icon-delete data-range-icon" @click="deleteFieldRange(scope.row,scope.$index)"></i>
+                  </span>
+                </div>
+            </template>
+        </el-table-column>
+      </el-table>
+      <!-- 每次重新加载，防止对象错乱 -->
+      <epx-scope-drawer ref="scopeDrawer" :visible.sync="filterDrawer" :metaId="columnMetaId" :params="scopeParams">
+        <el-button class="scope-save-btn" slot="button" type="primary" @click="saveScopeParams">{{$t('save')}}</el-button>
+      </epx-scope-drawer>
+      <el-dialog :visible.sync="dialogFieldVisible">
+        <div class="dialog-content">
+          <el-radio-group v-model="fieldIsIncluded" size="small">
+            <el-radio-button :label="$t('include')"></el-radio-button>
+            <el-radio-button :label="$t('exclusive')"></el-radio-button>
+          </el-radio-group>
+          <div class="field-content" v-if="fieldIsIncluded==='包括'">
+            <el-checkbox v-model="checkAll" @change="handleCheckAllChange">{{$t('check all')}}</el-checkbox>
+            <el-checkbox-group class="checkbox-group" v-model="selectIncludeFields" @change="handleCheckedFieldChange">
+              <ul class="field-group">
+                  <el-checkbox class="checkbox" v-for="option in fieldGroup" :key="option.code" :label="option.code">{{option.text}}</el-checkbox>
+              </ul>
+            </el-checkbox-group>
+          </div>
+          <div class="field-content" v-else>
+            <el-checkbox v-model="checkAlltwo" @change="handleCheckAllChangetwo">{{$t('check all')}}</el-checkbox>
+            <el-checkbox-group class="checkbox-group" v-model="selectnoIncludeFields" @change="handleCheckedFieldChangetwo">
+              <ul class="field-group">
+                <el-checkbox class="checkbox" v-for="option in fieldGroup" :key="option.code" :label="option.code">{{option.text}}</el-checkbox>
+              </ul>
+            </el-checkbox-group>
+          </div>
+          <div style="text-align:center">
+            <el-button size="small" type="primary" @click="saveFieldRange()">{{$t('save')}}</el-button>
+            <el-button size="small" @click="dialogFieldVisible=false">{{$t('cancel')}}</el-button>
+          </div>
+        </div>
+      </el-dialog>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import component from '@/utils/mixins/component'
+export default {
+  name: 'epx-base-promission',
+  mixins: [component],
+  data () {
+    return {
+      searchKey: '',
+      dataList: [],
+      unallocatedList: [],
+      // dialogDataVisible: false,
+      dialogFieldVisible: false,
+      formLabelWidth: '120px',
+      fieldIsIncluded: '包括',
+      selectIncludeFields: [],
+      selectnoIncludeFields: [],
+      fieldGroup: [],
+      checkAll: false,
+      checkAlltwo: false,
+      searchParams: [],
+      indexInfoList: [],
+      unallocatedIndexInfoList: [],
+      filterFields: [],
+      rowSpanInfo: {},
+      filterDrawer: false,
+      columnIndex: null,
+      columnMetaId: '',
+      dialogTableVisible: false,
+      tableSelection: [],
+      addTableSelection: [],
+      scopeParams: [],
+      searchKeyName: ''
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'getCodeById'
+    ]),
+    codeList () {
+      return (codeKey, value) => {
+        const code = this.getCodeById(codeKey)
+        if (code) {
+          const arr = code.find(item => {
+            return item.code === value
+          })
+          return arr.name
+        } else {
+          return ''
+        }
+      }
+    },
+    getfilterFields () {
+      return (dataScope = this.rowSpanInfo.dataScope) => {
+        const arr = []
+        if (dataScope) {
+          // eslint-disable-next-line no-eval
+          const fields = eval('(' + dataScope + ')')
+          const arr = []
+          if (fields.data && fields.data.length > 0) {
+            fields.data.forEach(item => {
+              arr.push(item.attriName)
+            })
+          }
+          return arr
+        } else {
+          return arr
+        }
+      }
+    },
+    getInitcondition () {
+      return (dataScope = this.rowSpanInfo.dataScope) => {
+        const arr = []
+        if (dataScope) {
+          // eslint-disable-next-line no-eval
+          const fields = eval('(' + dataScope + ')')
+          return fields.data
+        } else {
+          return arr
+        }
+      }
+    },
+    seachEntityMethod () {
+      return this.unallocatedList.filter(item => {
+        return item.entityName.match(this.searchKeyName)
+      })
+    }
+  },
+  // watch: {
+  //   searchKeyName (v) {
+  //     this.seachEntityMethod()
+  //   }
+  // },
+  methods: {
+    // seachEntityMethod () {
+    //   const arr = this.unallocatedList.filter(item => {
+    //     return item.entityName.match(this.searchKeyName)
+    //   })
+    //   return arr
+    // },
+    isRowChecked (row, index) {
+      return row.operateInfos.every(item => item.checked)
+    },
+    changeRowChecked (row, v) {
+      row.operateInfos.forEach(item => {
+        item.checked = v
+      })
+    },
+    // seachEntityMethod () {
+    //   this.getUnallocatedOperateList()
+    // },
+    seachEntity () {
+      this.getEntityOperateList()
+    },
+    changeJsonRange (v) {
+      // eslint-disable-next-line no-eval
+      const scopeInfo = JSON.parse(v)
+
+      return scopeInfo.scopeText || this.$t('not')
+    },
+    changeJsonRangeTwo (v) {
+      // eslint-disable-next-line no-eval
+      const fields = eval('(' + v + ')')
+      return fields.fieldNames || this.$t('not') || fields
+    },
+    // 是否授权
+    authorization (operateId, val) {
+      // entityId, operateId, val
+      // 对象id，   操作id  , 值
+      const { id } = this.$query
+      const params = {
+        action: 'authorization',
+        entityId: this.$metaId,
+        serviceId: id,
+        operateId: operateId,
+        isAuth: val
+      }
+      this.$http.$request(params)
+        .then(data => {
+          this.getEntityOperateList()
+          this.$message.success(this.$t('save successfully'))
+        })
+    },
+    cellClick (row, index) {
+      this.rowSpanInfo = row
+      this.columnMetaId = row.entityId
+      this.columnIndex = index
+      const dataScope = row.dataScope ? JSON.parse(row.dataScope) : {}
+      this.scopeParams = dataScope.scopeParams ? dataScope.scopeParams : []
+      this.filterDrawer = true
+    },
+    deleteDataRange (row, index) {
+      this.$confirm(this.$t('Confirm the deletion') + '?')
+        .then(() => {
+          this.rowSpanInfo = row
+          this.columnMetaId = row.entityId
+          this.columnIndex = index
+          this.searchParams = []
+
+          this.$http.$request({
+            action: 'clearScope',
+            entityId: this.$metaId,
+            serviceOperateId: this.rowSpanInfo.operateRightId,
+            type: 'data'
+          })
+            .then(data => {
+              const itemObj = this.dataList[index]
+              itemObj.dataScope = ''
+              this.$set(this.dataList, index, itemObj)
+              this.$message.success(this.$t('deleted successfully'))
+            })
+          // this.saveDataRange(true)
+        })
+        .catch(() => {})
+    },
+    deleteFieldRange (row, index) {
+      this.$confirm(this.$t('Confirm the deletion') + '?')
+        .then(() => {
+          this.rowSpanInfo = row
+          this.columnIndex = index
+          this.selectIncludeFields = []
+          this.selectnoIncludeFields = []
+          this.$http.$request({
+            action: 'clearScope',
+            entityId: this.$metaId,
+            serviceOperateId: this.rowSpanInfo.operateRightId,
+            type: 'field'
+          })
+            .then(data => {
+              const itemObj = this.dataList[index]
+              itemObj.fieldScope = ''
+              this.$set(this.dataList, index, itemObj)
+              this.$message.success(this.$t('deleted successfully'))
+            })
+          // this.saveFieldRange(true)
+        })
+        .catch(() => {})
+    },
+    // 保存数据范围
+    saveScopeParams () {
+      const scopeParams = this.$refs.scopeDrawer.scopeParams || []
+      let scopeText = ''
+      // 防止数据获取不到
+      const _scopeParmas = scopeParams.map(item => {
+        const { lb = '', field, mode, values, rb = '', link, label, 'mode#': modelLabel = this.$t('yes'), 'values#': valueLabel, 'link#': linkLabel = '' } = item
+        const text = lb + label + modelLabel + (valueLabel || values) + rb + linkLabel
+        scopeText += text
+        return { lb, field, mode, values, rb, link }
+      })
+      const params = {
+        action: 'setDataScope',
+        entityId: this.$metaId,
+        serviceOperateId: this.rowSpanInfo.operateRightId,
+        targetMetaId: this.rowSpanInfo.entityId
+      }
+      this.$http.save({
+        ...params,
+        scopeInfo: JSON.stringify({
+          scopeParams: _scopeParmas,
+          scopeText
+        })
+      })
+        .then(data => {
+          const index = this.columnIndex
+          const itemObj = this.dataList[index]
+          itemObj.dataScope = JSON.stringify({
+            scopeParams: _scopeParmas,
+            scopeText
+          })
+          this.$set(this.dataList, index, itemObj)
+          this.filterDrawer = false
+          this.$message.success(this.$t('save successfully'))
+        })
+        .catch(err => {
+          this.$message.error(err.message || this.$t('fail to save'))
+        })
+    },
+    // 保存数据范围
+    saveDataRange (isDelete = false) {
+      const index = this.columnIndex
+      const itemObj = this.dataList[index]
+      const params1 = {
+        action: 'setDataScope',
+        entityId: this.$metaId,
+        serviceOperateId: this.rowSpanInfo.operateRightId,
+        targetMetaId: this.rowSpanInfo.entityId
+      }
+      // group
+      let group = ''
+      const params = {
+        searchMode: 'advance'
+      }
+      this.searchParams.map((item, i) => {
+        group += item.fieldC
+        // group += '-值：'
+        const valueList = item.value.split(',')
+        let groupValue = ''
+        valueList.forEach(value => {
+          groupValue += this.codeList(item.codeKey, value)
+        })
+        if (groupValue) {
+          group += groupValue
+        } else {
+          group += item.realValue || item.value || item.dateType
+        }
+        // group += item.realValue || item.value
+        // group += ','
+        if (i < this.searchParams.length - 1) {
+          params[`search.link${i + 1}`] = item.link || 'and'
+          if (item.link === 'and') {
+            group += ',并且'
+          }
+          if (item.link === 'or') {
+            group += ',或者'
+          }
+        }
+        params[`search.leftBrace${i + 1}`] = item.leftBrace || ''
+        params[`search.field${i + 1}`] = ''
+        params[`search.value${i + 1}`] = item.value
+        if (item.dateType) params[`search.dateType${i + 1}`] = item.dateType
+        params[`search.attriName${i + 1}`] = (item.field || item.attriName).replace('#', '').replace(/\|/g, '.')
+        params[`search.relation${i + 1}`] = item.relation
+        params[`search.realRelation${i + 1}`] = item.relation
+        params[`search.realValue${i + 1}`] = item.realValue || item.value
+        params[`search.rightBrace${i + 1}`] = item.rightBrace || ''
+        params[`search.metaId${i + 1}`] = this.$metaId
+      })
+      params.size = this.searchParams.length
+      params.optionText = group
+      const objJson = {}
+      if (params.size === 0) {
+        objJson.optionText = this.$t('not')
+      } else {
+        objJson.optionText = group
+      }
+      itemObj.dataScope = JSON.stringify(objJson)
+      this.$set(this.dataList, index, itemObj)
+      const paramsAll = { ...params, ...params1 }
+      this.filterDrawer = false
+      this.$http.$request(paramsAll)
+        .then(data => {
+          this.$message.success(!isDelete ? this.$t('save successfully') : this.$t('deleted successfully'))
+        })
+        .catch(err => {
+          this.$message.error(err.message || this.$t('fail to save'))
+        })
+    },
+    // 保存字段范围
+    saveFieldRange (isDelete = false) {
+      const index = this.columnIndex
+      const itemObj = this.dataList[index]
+      const params = {
+        action: 'setFieldScope',
+        entityId: this.$metaId,
+        serviceOperateId: this.rowSpanInfo.operateRightId
+      }
+      let strName = ''
+      const objJson = {}
+      if (this.fieldIsIncluded === '包括') {
+      // if (this.selectIncludeFields.length > 0) {
+        params.type = '1'
+        strName += '包含字段：'
+        if (this.selectIncludeFields.length > 0) {
+          strName += this.fieldLabel(this.selectIncludeFields)
+          const str = this.selectIncludeFields.join(',')
+          params.fieldNames = strName
+          params.fields = str
+          objJson.fieldNames = strName
+          objJson.fields = str
+        } else {
+          params.fieldNames = '无'
+          objJson.fieldNames = '无'
+          params.fields = ''
+          objJson.fields = ''
+        }
+        objJson.type = '1'
+      } else {
+        params.type = '0'
+        strName += '不包含字段：'
+        if (this.selectnoIncludeFields.length > 0) {
+          strName += this.fieldLabel(this.selectnoIncludeFields)
+          const str = this.selectnoIncludeFields.join(',')
+          params.fieldNames = strName
+          params.fields = str
+          objJson.fieldNames = strName
+          objJson.fields = str
+        } else {
+          params.fieldNames = '无'
+          objJson.fieldNames = '无'
+          params.fields = ''
+          objJson.fields = ''
+        }
+        // strName += this.fieldLabel(this.selectnoIncludeFields)
+        // params.fieldNames = strName
+        // const str = this.selectnoIncludeFields.join(',')
+        // params.fields = str
+        // objJson.fields = str
+        objJson.type = '0'
+      }
+      // objJson.fieldNames = strName
+      itemObj.fieldScope = JSON.stringify(objJson)
+      this.$set(this.dataList, index, itemObj)
+      this.dialogFieldVisible = false
+      this.$http.$request(params)
+        .then(data => {
+          this.$message.success(!isDelete ? this.$t('save successfully') : this.$t('deleted successfully'))
+          this.selectIncludeFields = []
+          this.selectnoIncludeFields = []
+          this.checkAll = false
+          this.checkAlltwo = false
+        })
+    },
+    fieldLabel (arr) {
+      const strArr = []
+      arr.forEach(item => {
+        const obj = this.fieldGroup.find(item1 => item1.code === item)
+        strArr.push(obj.text)
+      })
+      const string = strArr.join(',')
+      return string
+    },
+    // 全选（包含）
+    handleCheckAllChange (val) {
+      const arr = []
+      this.fieldGroup.forEach(item => {
+        arr.push(item.code)
+      })
+      this.selectIncludeFields = val ? arr : []
+    },
+    // 复选框改变（包含）
+    handleCheckedFieldChange (value) {
+      const checkedCount = value.length
+      this.checkAll = checkedCount === this.fieldGroup.length
+    },
+    // 复选框改变（不包含）
+    handleCheckAllChangetwo (val) {
+      const arr = []
+      this.fieldGroup.forEach(item => {
+        arr.push(item.code)
+      })
+      this.selectnoIncludeFields = val ? arr : []
+    },
+    // 全选（不包含）
+    handleCheckedFieldChangetwo (value) {
+      const checkedCount = value.length
+      this.checkAlltwo = checkedCount === this.fieldGroup.length
+    },
+    // 获取对象字段信息
+    getFields (entityId, fieldScope, row, index) {
+      this.rowSpanInfo = row
+      this.columnIndex = index
+      this.columnIndex = index
+      this.dialogFieldVisible = true
+      this.checkAll = false
+      this.checkAlltwo = false
+      this.$http.entityFieldTreeStore({
+        metaId: entityId,
+        allSub: false,
+        node: 'root'
+      })
+        .then(data => {
+          // eslint-disable-next-line no-eval
+          const fields = eval('(' + data + ')')
+          const fieldGroup = Object.values(fields) || []
+          fieldGroup.forEach(fieldItem => {
+            fieldItem.children.forEach(item => {
+              item.code = item.code.replace(/\./g, '|')
+            })
+          })
+          // this.fieldGroup = [...fieldGroup]
+          this.fieldGroup = [...fieldGroup[0].children]
+          if (fieldScope) {
+            // eslint-disable-next-line no-eval
+            const fields = eval('(' + fieldScope + ')')
+            if (fields.type === '1') {
+              let arr = []
+              if (fields.fields) {
+                arr = fields.fields.split(',')
+              }
+              this.selectIncludeFields = [...arr]
+              this.handleCheckedFieldChange(arr)
+              this.fieldIsIncluded = '包括'
+            } else {
+              let arr = []
+              if (fields.fields) {
+                arr = fields.fields.split(',')
+              }
+              this.selectnoIncludeFields = [...arr]
+              this.handleCheckedFieldChangetwo(arr)
+              this.fieldIsIncluded = '不包括'
+            }
+          } else {
+            this.selectIncludeFields = []
+            this.selectnoIncludeFields = []
+            this.fieldIsIncluded = '包括'
+          }
+        })
+    },
+    // 合并行
+    dataListSpanMethod ({ row, column, rowIndex, columnIndex }, a) {
+      if (this.indexInfoList.length > 0) {
+        // if (columnIndex === 0 || columnIndex === 1) {
+        if (columnIndex === 1) {
+          const index = this.indexInfoList.findIndex(item => { // 遍历数组
+            return item.firstIndex === rowIndex
+          })
+          // 原数组 查找和他相同的entityId  5
+
+          if (index > -1) {
+            return {
+              rowspan: this.indexInfoList[index].length,
+              colspan: 1
+            }
+          } else {
+            return {
+              rowspan: 0,
+              colspan: 0
+            }
+          }
+        }
+      }
+    },
+    tableRowClassName ({ row, rowIndex }) {
+      if (this.indexInfoList.length > 0) {
+        const index = this.indexInfoList.findIndex(item => { // 遍历数组
+          return item.firstIndex === rowIndex
+        })
+        if (index % 2 === 0) {
+          return ''
+        } else {
+          let sum = 0
+          for (let i = 0; i < this.indexInfoList.length; i++) {
+            sum += this.indexInfoList[i].length
+            if (rowIndex < sum) {
+              if (i % 2 === 0) {
+                return ''
+              } else {
+                return 'even-row'
+              }
+            }
+          }
+        }
+      }
+    },
+    // unallocatedDataListSpanMethod ({ row, column, rowIndex, columnIndex }) {
+    //   if (columnIndex === 1) {
+    //     // 查询是否有相同的entityId
+    //     const index = this.unallocatedList.findIndex(item => item.entityId === row.entityId)
+    //     if (index === rowIndex) {
+    //       const sameEntitys = this.unallocatedList.filter(item => item.entityId === row.entityId)
+    //       return {
+    //         rowspan: sameEntitys.length,
+    //         colspan: 1
+    //       }
+    //     } else {
+    //       return {
+    //         rowspan: 0,
+    //         colspan: 0
+    //       }
+    //     }
+    //   }
+    // },
+    // unallocatedTableRowClassName ({ row, rowIndex }) {
+    //   if (this.unallocatedIndexInfoList.length > 0) {
+    //     const index = this.unallocatedIndexInfoList.findIndex(item => { // 遍历数组
+    //       return item.firstIndex === rowIndex
+    //     })
+    //     if (index % 2 === 0) {
+    //       return ''
+    //     } else {
+    //       let sum = 0
+    //       for (let i = 0; i < this.unallocatedIndexInfoList.length; i++) {
+    //         sum += this.unallocatedIndexInfoList[i].length
+    //         if (rowIndex < sum) {
+    //           if (i % 2 === 0) {
+    //             return ''
+    //           } else {
+    //             return 'even-row'
+    //           }
+    //         }
+    //       }
+    //     }
+    //   }
+    // },
+    getUnallocatedOperateList () {
+      const { id } = this.$query
+      const params = {
+        action: 'getServiceOperateInfo',
+        entityId: this.$metaId,
+        serviceId: id
+        // name: this.searchKeyName
+      }
+      this.$http.$request(params)
+        .then(data => {
+          this.unallocatedList = data.soiList
+        })
+    },
+    getEntityOperateList () {
+      const { id } = this.$query
+      const params = {
+        action: 'getAllocated',
+        entityId: this.$metaId,
+        serviceId: id,
+        searchField: this.searchKey
+      }
+      this.$http.$request(params)
+        .then(data => {
+          if (data.soiList) {
+            this.dataList = data.soiList
+            // 获取每个对象下的条数
+            const arr = []
+            this.dataList.forEach(ele => {
+              const firstIndex = this.dataList.findIndex(item => {
+                return item.entityId === ele.entityId // 当entityId相同的时候，返回第一个相同的Index 赋值给 firstIndex
+              })
+              if (arr.findIndex(item => {
+                return item.firstIndex === firstIndex
+              }) === -1) {
+                arr.push({
+                  length: this.dataList.filter(item => {
+                    return item.entityId === ele.entityId // 利用数组的filter方法，过滤出相同entityId的数组的长度。数组长度-即为跨多少行
+                  }).length,
+                  firstIndex: firstIndex // firstIndex 返回的是第一个entityId就满足的第一个Index,即为rowIndex开始于第几行。
+                })
+              }
+            })
+            this.indexInfoList = arr // 得到的arr里面的内容
+          }
+        })
+    },
+    handleSelectionChange (v) {
+      this.tableSelection = [...v]
+    },
+    // addSelectionChange (v) {
+    //   this.addTableSelection = [...v]
+    // },
+    deleteRecord () {
+      const ids = this.tableSelection.map(item => item.operateRightId).join(',')
+      this.$http.removeMulti({
+        entityId: this.$metaId,
+        ids
+      })
+        .then(() => {
+          this.$message.success(this.$t('deleted successfully'))
+          this.getEntityOperateList()
+        })
+    },
+    addScopeMulti () {
+      // const ids = this.addTableSelection.map(item => item.operateId).join(',')
+      const operates = this.unallocatedList.reduce((operates, item) => operates.concat(item.operateInfos.filter(oItem => oItem.checked)), [])
+      const operateIds = operates.map(item => item.operateId).join(',')
+      const { id } = this.$query
+      this.$http.$post({
+        action: 'saveServiceOperate',
+        entityId: this.$metaId,
+        serviceId: id,
+        operateIds: operateIds
+      })
+        .then(() => {
+          this.$message.success(this.$t('add success'))
+          this.getUnallocatedOperateList()
+          this.getEntityOperateList()
+          this.searchKeyName = ''
+          this.dialogTableVisible = false
+        })
+    }
+  },
+  created () {
+    // v_fm_permission FM_OPERATE_RIGHT
+    // 获取权限列表
+    this.getEntityOperateList()
+    this.getUnallocatedOperateList()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+$paddingSize: 16px;
+.container {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  padding: $paddingSize;
+  background-color: #fff;
+  overflow: auto;
+}
+.table-dialog {
+  &::v-deep {
+    .el-dialog__body {
+      max-height: 600px;
+      overflow: auto;
+      padding-top: 20px;
+    }
+  }
+}
+.table-operates {
+  padding-bottom: $paddingSize;
+  display: flex;
+  justify-content: space-between;
+}
+.search-inline {
+  display: flex;
+  align-items: center;
+  &::v-deep {
+    .el-input{
+      margin-right: 12px;
+    }
+  }
+}
+.filter-button{
+  text-align: center;
+  margin: 10px 0;
+}
+.table{
+  flex: 1;
+  position: relative;
+  overflow: hidden;
+  // border-top:  dashed 1px #e3e3e3;;
+  ::v-deep{
+    th {
+      color: #909399;
+      line-height: 1;
+      padding: 8px 0;
+      &:hover {
+        background: rgb(245, 247, 250);
+      }
+      .cell {
+        white-space: nowrap;
+      }
+    }
+    .cell {
+      text-align: center;
+    }
+    td{
+      padding: 9px 0;
+    }
+    .even-row {
+      background: #f5f5f5;
+    }
+  }
+  .label {
+    @include font_color_primary;
+    cursor: pointer;
+  }
+  // 无边框
+  // &.no-border {
+  //   ::v-deep {
+  //     .el-table th.is-leaf, .el-table td {
+  //      border-right: 0
+  //     }
+  //     .el-table--border {
+  //       border: 0;
+  //       &::after {
+  //         display: none
+  //       }
+  //     }
+  //   }
+  // }
+}
+.data-range-content{
+  display: inline-block;
+  width: 69%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.data-range-edit{
+  display: none;
+  position: absolute;
+  right: 6px;
+  z-index: 1;
+  background-color: #fff;
+}
+.data-range-icon{
+  font-size: 12px;
+  cursor: pointer;
+}
+.data-range-icon-edit{
+  margin-right: 6px;
+}
+.data-range-container:hover .data-range-edit{
+  display: inline-block;
+}
+.data-range{
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+.dialog-content{
+  margin-top: 10px;
+  overflow: auto;
+}
+.field-content{
+  min-height: 100px;
+  margin: 20px 0;
+}
+.el-checkbox-group{
+  font-size: inherit;
+}
+.field-content .el-checkbox{
+  margin-bottom: 10px;
+}
+.scope-save-btn {
+  display: block;
+  margin: 0 auto;
+  width: 120px;
+  margin-top: 20px;
+}
+.dialog-add-entity-title{
+  display: flex;
+  align-items: center;
+  margin-bottom: 20px;
+  justify-content: space-between;
+}
+// .dialog-right-input{
+//     // width:260px;
+//   //  margin-left: 120px;
+// }
+</style>
+<style lang="scss">
+.el-dialog__header{
+  border-bottom: 1px solid #e3e3e3;
+}
+</style>