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

package/src/views/Permission.vue

@@ -0,0 +1,695 @@
+<template>
+  <div class="container">
+    <!-- 按钮区域 -->
+    <div class="table-operates">
+      <div class="button-group" >
+      </div>
+      <!-- 内联查询 显示条件->不配置筛选区域 -->
+      <div class="search-inline">
+        <el-input size="default" placeholder="请输入对象名称或对象编号" v-model="searchKey" @change="seachEntity" class="input-with-select" clearable suffix-icon="el-icon-search">
+        </el-input>
+      </div>
+    </div>
+    <div class="table no-border">
+      <el-table
+        :data="dataList"
+        :span-method="dataListSpanMethod"
+        :row-class-name="tableRowClassName"
+        border
+        style="width: 100%;height: 100%;"
+        >
+        <!-- <el-table-column
+          label="序号"
+          width="60"
+        >
+          <template v-slot="scope" >
+            {{ scope.$index + 1}}
+          </template>
+        </el-table-column> -->
+        <el-table-column
+          label="对象名称">
+          <template v-slot="scope">
+            {{scope.row.entityName}}
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="对象操作">
+          <template v-slot="scope">
+            {{scope.row.operateName}}
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="授权">
+          <template v-slot="scope">
+             <el-checkbox v-model="scope.row.isAuth" true-value="1" false-value="0" @change="authorization(scope.row.operateId,$event)"></el-checkbox>
+          </template>
+        </el-table-column>
+            <!-- show-overflow-tooltip -->
+        <el-table-column
+            label="数据范围"
+          >
+            <template v-slot="scope">
+              <div class="data-range-container">
+                <span v-if="scope.row.isAuth==='1'&&!scope.row.dataScope" @click="cellClick(scope.row,scope.$index)">+ 选择范围</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="字段范围"
+          >
+            <template v-slot="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)">+ 选择范围</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>
+      <el-drawer
+        class="table-container__drawer"
+        v-model="filterDrawer"
+        size="600px"
+        direction="rtl"
+      >
+        <epx-filter v-if="filterDrawer" ref="filter" :showFilter="false" :metaId="columnMetaId" :fields="getfilterFields(rowSpanInfo.dataScope)" :init-condition="getInitcondition(rowSpanInfo.dataScope)" v-model:params="searchParams">
+          <template v-slot:button><div class="filter-button">
+            <el-button type="primary" @click="saveDataRange()">保存</el-button>
+          </div></template>
+        </epx-filter>
+      </el-drawer>
+      <el-dialog v-model="dialogFieldVisible">
+        <div class="dialog-content">
+          <el-radio-group v-model="fieldIsIncluded" size="small">
+            <el-radio-button label="包括" value="包括"></el-radio-button>
+            <el-radio-button label="不包括" value="不包括"></el-radio-button>
+          </el-radio-group>
+          <div class="field-content" v-if="fieldIsIncluded==='包括'">
+            <el-checkbox v-model="checkAll" @change="handleCheckAllChange">全选</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" :value="option.code">{{option.text}}</el-checkbox>
+              </ul>
+            </el-checkbox-group>
+          </div>
+          <div class="field-content" v-else>
+            <el-checkbox v-model="checkAlltwo" @change="handleCheckAllChangetwo">全选</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" :value="option.code">{{option.text}}</el-checkbox>
+              </ul>
+            </el-checkbox-group>
+          </div>
+          <div style="text-align:center">
+            <el-button size="small" type="primary" @click="saveFieldRange()">保存</el-button>
+            <el-button size="small" @click="dialogFieldVisible=false">取消</el-button>
+          </div>
+        </div>
+      </el-dialog>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+export default {
+  name: 'epx-promission',
+  data () {
+    return {
+      searchKey: '',
+      dataList: [],
+      // dialogDataVisible: false,
+      dialogFieldVisible: false,
+      formLabelWidth: '120px',
+      fieldIsIncluded: '包括',
+      selectIncludeFields: [],
+      selectnoIncludeFields: [],
+      fieldGroup: [],
+      checkAll: false,
+      checkAlltwo: false,
+      searchParams: [],
+      indexInfoList: [],
+      filterFields: [],
+      rowSpanInfo: {},
+      filterDrawer: false,
+      columnIndex: null,
+      columnMetaId: ''
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'getCodeById'
+    ]),
+    codeList () {
+      return (codeKey, value) => {
+        const code = this.getCodeById(codeKey)
+        if (code) {
+          const arr = code.find(item => {
+            return item.id === 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
+        }
+      }
+    }
+  },
+  methods: {
+    seachEntity () {
+      this.getEntityOperateList()
+    },
+    changeJsonRange (v) {
+      // eslint-disable-next-line no-eval
+      const fields = eval('(' + v + ')')
+      return fields.optionText || '无'
+    },
+    changeJsonRangeTwo (v) {
+      // eslint-disable-next-line no-eval
+      const fields = eval('(' + v + ')')
+      return fields.fieldNames || '无' || fields
+    },
+    // 是否授权
+    authorization (operateId, val) {
+      // entityId, operateId, val
+      // 对象id，   操作id  , 值
+      const { id } = this.$query
+      const params = {
+        action: 'authorization',
+        entityId: this.$metaId,
+        roleId: id,
+        operateId: operateId,
+        isAuth: val
+      }
+      this.$http.$request(params)
+        .then(data => {
+          this.$message.success('保存成功')
+        })
+    },
+    cellClick (row, index) {
+      this.rowSpanInfo = row
+      this.columnMetaId = row.entityId
+      this.columnIndex = index
+      this.searchParams = []
+      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.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.saveFieldRange(true)
+        })
+        .catch(() => {})
+    },
+    // 保存数据范围
+    saveDataRange (isDelete = false) {
+      const index = this.columnIndex
+      const itemObj = this.dataList[index]
+      const params1 = {
+        action: 'setDataScope',
+        entityId: this.$metaId,
+        operateRightId: 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 = '无'
+      } else {
+        objJson.optionText = group
+      }
+      itemObj.dataScope = JSON.stringify(objJson)
+      this.dataList[index] = itemObj
+      const paramsAll = { ...params, ...params1 }
+      this.filterDrawer = false
+      this.$http.$request(paramsAll)
+        .then(data => {
+          this.$message.success(!isDelete ? '保存成功' : '删除成功')
+        })
+        .catch(err => {
+          this.$message.error(err.message || '保存失败')
+        })
+    },
+    // 保存字段范围
+    saveFieldRange (isDelete = false) {
+      const index = this.columnIndex
+      const itemObj = this.dataList[index]
+      const params = {
+        action: 'setFieldScope',
+        entityId: this.$metaId,
+        operateRightId: 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.dataList[index] = itemObj
+      this.dialogFieldVisible = false
+      this.$http.$request(params)
+        .then(data => {
+          this.$message.success(!isDelete ? '保存成功' : '删除成功')
+          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 }) {
+      if (this.indexInfoList.length > 0) {
+        // if (columnIndex === 0 || columnIndex === 1) {
+        if (columnIndex === 0) {
+          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'
+              }
+            }
+          }
+        }
+      }
+    },
+    getEntityOperateList () {
+      const { id } = this.$query
+      const params = {
+        action: 'getRoleOperateRightInfos',
+        entityId: this.$metaId,
+        roleId: id,
+        searchField: this.searchKey
+      }
+      this.$http.$request(params)
+        .then(data => {
+          if (data.oriList) {
+            this.dataList = data.oriList
+            // 获取每个对象下的条数
+            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里面的内容
+          }
+        })
+    }
+  },
+  created () {
+    // v_fm_permission FM_OPERATE_RIGHT
+    // 获取权限列表
+    this.getEntityOperateList()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+$paddingSize: 16px;
+.container {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  padding: $paddingSize;
+  background-color: var(--epx-bg-card);
+  overflow: auto;
+}
+.table-operates {
+  padding-bottom: $paddingSize;
+  display: flex;
+  justify-content: space-between;
+}
+.search-inline {
+  display: flex;
+  align-items: center;
+
+    :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 var(--epx-border);;
+
+    :deep(th) {
+      color: var(--epx-text-secondary);
+      line-height: 1;
+      padding: 8px 0;
+      &:hover {
+        background: rgb(245, 247, 250);
+      }
+      .cell {
+        white-space: nowrap;
+      }
+    }
+    :deep(.cell) {
+      text-align: center;
+    }
+    :deep(td) {
+      padding: 9px 0;
+    }
+    :deep(.even-row) {
+      background: var(--epx-bg);
+    }
+
+  .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: var(--epx-bg-card);
+}
+.data-range-icon{
+  font-size: var(--epx-font-size-s);
+  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;
+}
+</style>
+<style lang="scss">
+.el-dialog__header{
+  border-bottom: 1px solid var(--epx-border);
+}
+</style>