From 566a31700530ad968d2782a8b7bac44b99cd59cd Mon Sep 17 00:00:00 2001
From: taojinlong <jinlong@fit2cloud.com>
Date: Mon, 15 Nov 2021 15:53:40 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=A1=8C=E6=9D=83=E9=99=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../service/dataset/DataSetTableService.java  |   1 +
 frontend/src/lang/zh.js                       |   1 +
 .../src/views/dataset/data/RowPermissions.vue |  35 ++
 frontend/src/views/dataset/data/ViewTable.vue |   6 +-
 .../src/views/dataset/data/authConfig.vue     | 226 +++++++++++
 .../dataset/data/components/LazyTree.vue      | 373 ++++++++++++++++++
 6 files changed, 641 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/views/dataset/data/RowPermissions.vue
 create mode 100644 frontend/src/views/dataset/data/authConfig.vue
 create mode 100644 frontend/src/views/dataset/data/components/LazyTree.vue

diff --git a/backend/src/main/java/io/dataease/service/dataset/DataSetTableService.java b/backend/src/main/java/io/dataease/service/dataset/DataSetTableService.java
index e14690a455..7838ca7e31 100644
--- a/backend/src/main/java/io/dataease/service/dataset/DataSetTableService.java
+++ b/backend/src/main/java/io/dataease/service/dataset/DataSetTableService.java
@@ -1228,6 +1228,7 @@ public class DataSetTableService {
         dataSetDetail.setTable(table);
         if (ObjectUtils.isNotEmpty(table)) {
             Datasource datasource = datasourceMapper.selectByPrimaryKey(table.getDataSourceId());
+            datasource.setConfiguration(null);
             dataSetDetail.setDatasource(datasource);
         }
         return dataSetDetail;
diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js
index eafbcbcc02..9ed6e3e856 100644
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@@ -1014,6 +1014,7 @@ export default {
     field_check: '选中',
     update_info: '更新信息',
     join_view: '数据关联',
+    row_permissions: '行权限',
     text: '文本',
     time: '时间',
     value: '数值',
diff --git a/frontend/src/views/dataset/data/RowPermissions.vue b/frontend/src/views/dataset/data/RowPermissions.vue
new file mode 100644
index 0000000000..5c061fc5ca
--- /dev/null
+++ b/frontend/src/views/dataset/data/RowPermissions.vue
@@ -0,0 +1,35 @@
+<template>
+  <de-main-container style="height: calc(100vh - 56px)">
+    <auth-config  />
+  </de-main-container>
+</template>
+<script>
+import DeMainContainer from '@/components/dataease/DeMainContainer'
+import AuthConfig from './authConfig'
+
+export default {
+  name: 'RowPermissions',
+  components: { DeMainContainer, AuthConfig },
+  data () {
+    return {
+      authorityType: 'authConfig'
+    }
+  },
+  watch: {
+  },
+  mounted () {
+  },
+  methods: {
+    executeAxios (param) {
+      this.$emit('execute-axios', param)
+    },
+    handleClick () {
+      console.log('===>handleClick')
+    }
+
+  }
+}
+</script>
+
+<style scoped>
+</style>
diff --git a/frontend/src/views/dataset/data/ViewTable.vue b/frontend/src/views/dataset/data/ViewTable.vue
index 32eafed33c..bad5538a6b 100644
--- a/frontend/src/views/dataset/data/ViewTable.vue
+++ b/frontend/src/views/dataset/data/ViewTable.vue
@@ -56,6 +56,9 @@
       <el-tab-pane v-if="table.type !== 'custom' && !(table.type === 'sql' && table.mode === 0)" :label="$t('dataset.join_view')" name="joinView">
         <union-view :param="param" :table="table" />
       </el-tab-pane>
+      <el-tab-pane :label="$t('dataset.row_permissions')" name="rowPermissions">
+        <row-permissions :param="param" :table="table" />
+      </el-tab-pane>
       <el-tab-pane v-if="table.mode === 1 && (table.type === 'excel' || table.type === 'db' || table.type === 'sql')" :label="$t('dataset.update_info')" name="updateInfo">
         <update-info v-if="tabActive=='updateInfo'" :param="param" :table="table" />
       </el-tab-pane>
@@ -69,11 +72,12 @@ import TabDataPreview from './TabDataPreview'
 import UpdateInfo from './UpdateInfo'
 import DatasetChartDetail from '../common/DatasetChartDetail'
 import UnionView from './UnionView'
+import RowPermissions from './RowPermissions'
 import FieldEdit from './FieldEdit'
 
 export default {
   name: 'ViewTable',
-  components: { FieldEdit, UnionView, DatasetChartDetail, UpdateInfo, TabDataPreview },
+  components: {RowPermissions, FieldEdit, UnionView, DatasetChartDetail, UpdateInfo, TabDataPreview },
   props: {
     param: {
       type: Object,
diff --git a/frontend/src/views/dataset/data/authConfig.vue b/frontend/src/views/dataset/data/authConfig.vue
new file mode 100644
index 0000000000..8324e167d8
--- /dev/null
+++ b/frontend/src/views/dataset/data/authConfig.vue
@@ -0,0 +1,226 @@
+<template>
+  <de-container style="height: auto">
+    <de-aside-container style="height: auto">
+      <el-button v-show="!showTargetSearchInput" class="de-icon" icon="el-icon-search" circle size="mini" @click="showTargetSearchWidget" />
+      <div v-show="showTargetSearchInput" class="de-input">
+        <el-input v-model="targetFilterText" class="main-area-input">
+          <el-button slot="append" icon="el-icon-close" @click="closeTargetSearchWidget" />
+        </el-input>
+      </div>
+      <el-tabs v-model="targetActiveName" :class="{'de-search-header': showTargetSearchInput}" @tab-click="handleClick">
+        <el-tab-pane v-for="(targetInfo, index) in targetInfoArray" :key="index" :lazy="true" :label="targetInfo.tabName" :name="targetInfo.authType">
+          <lazy-tree
+            v-if="targetActiveName===targetInfo.authType"
+            :active-name="targetActiveName"
+            :filter-text="targetFilterText"
+            :data-info="targetInfo"
+            highlight-current
+            @nodeClick="authNodeClick"
+            @execute-axios="executeAxios"
+          />
+        </el-tab-pane>
+      </el-tabs>
+    </de-aside-container>
+    <de-main-container class="de-main-container-auth">
+      <el-button v-show="!showSourceSearchInput" class="de-icon" icon="el-icon-search" circle size="mini" @click="showSourceSearchWidget" />
+      <div v-show="showSourceSearchInput" class="de-input">
+        <el-input v-model="sourceFilterText" class="main-area-input">
+          <el-button slot="append" icon="el-icon-close" @click="closeSourceSearchWidget" />
+        </el-input>
+      </div>
+      <el-tabs v-model="sourceActiveName" :class="{'de-search-header': showSourceSearchInput}" @tab-click="handleClick">
+        <el-tab-pane v-for="(sourceInfo, index) in sourceInfoTabs" :key="index" :lazy="true" :label="sourceInfo.tabName" :name="sourceInfo.authType">
+          <lazy-tree
+            v-if="authCondition"
+            :active-name="sourceActiveName"
+            :filter-text="sourceFilterText"
+            :data-info="sourceInfo"
+            show-extent
+            :auth-condition="authCondition"
+            @execute-axios="executeAxios"
+            :attach-active-name="targetActiveName"
+          />
+        </el-tab-pane>
+      </el-tabs>
+    </de-main-container>
+  </de-container>
+
+</template>
+
+<script>
+import DeContainer from '@/components/dataease/DeContainer'
+import DeAsideContainer from '@/components/dataease/DeAsideContainer'
+import DeMainContainer from '@/components/dataease/DeMainContainer'
+import LazyTree from './components/LazyTree'
+
+export default {
+  name: 'Authority',
+  components: { LazyTree, DeMainContainer, DeAsideContainer, DeContainer },
+  props: {
+    resourceId: {
+      type: String,
+      default: null
+    }
+  },
+  data () {
+    return {
+      targetInfoArray:
+        [
+          {
+            tabName: this.$t('auth.dept'),
+            head: this.$t('auth.deptHead'),
+            direction: 'target',
+            authType: 'dept'
+          },
+          {
+            tabName: this.$t('auth.role'),
+            head: this.$t('auth.roleHead'),
+            direction: 'target',
+            authType: 'role'
+          },
+          {
+            tabName: this.$t('auth.user'),
+            head: this.$t('auth.userHead'),
+            direction: 'target',
+            authType: 'user'
+          }],
+      sourceInfoArray:
+        [
+          {
+            tabName: this.$t('auth.linkAuth'),
+            head: this.$t('auth.linkAuthHead'),
+            direction: 'source',
+            authType: 'link',
+            authTargets: 'dept,role,user'
+          },
+          {
+            tabName: this.$t('auth.datasetAuth'),
+            head: this.$t('auth.datasetAuthHead'),
+            direction: 'source',
+            authType: 'dataset',
+            authTargets: 'dept,role,user'
+          },
+          {
+            tabName: this.$t('auth.chartAuth'),
+            head: this.$t('auth.chartAuthHead'),
+            direction: 'source',
+            authType: 'chart',
+            authTargets: 'dept,role,user'
+          },
+          {
+            tabName: this.$t('auth.panelAuth'),
+            head: this.$t('auth.panelAuthHead'),
+            direction: 'source',
+            authType: 'panel',
+            authTargets: 'dept,role,user'
+          },
+          {
+            tabName: this.$t('auth.menuAuth'),
+            head: this.$t('auth.menuAuthHead'),
+            direction: 'source',
+            authType: 'menu',
+            authTargets: 'dept,role,user'
+          }
+        ],
+      targetActiveName: null,
+      sourceActiveName: null,
+      showSourceSearchInput: false,
+      showTargetSearchInput: false,
+      sourceFilterText: '',
+      targetFilterText: '',
+      timeMachine: null,
+      authCondition: null
+    }
+  },
+  computed: {
+    sourceInfoTabs () {
+      const tabs = []
+      this.sourceInfoArray.forEach(item => {
+        if (item.authTargets.indexOf(this.targetActiveName) > -1) {
+          tabs.push(item)
+        }
+      })
+      return tabs
+    }
+  },
+  created () {
+    this.targetActiveName = this.targetInfoArray[0].authType
+    this.sourceActiveName = this.sourceInfoArray[0].authType
+  },
+
+  methods: {
+    executeAxios (param) {
+      this.$emit('execute-axios', param)
+    },
+    handleClick (tab, event) {
+    },
+    showSourceSearchWidget () {
+      this.showSourceSearchInput = true
+    },
+    closeSourceSearchWidget () {
+      this.sourceFilterText = ''
+      this.showSourceSearchInput = false
+    },
+    showTargetSearchWidget () {
+      this.showTargetSearchInput = true
+    },
+    closeTargetSearchWidget () {
+      this.targetFilterText = ''
+      this.showTargetSearchInput = false
+    },
+    save () {
+      this.$refs[this.activeName].save()
+      this.$emit('close-grant', 0)
+    },
+    cancel () {
+      this.$refs[this.activeName].cancel()
+      this.$emit('close-grant', 0)
+    },
+    authNodeClick (val) {
+      console.log('authNodeClick')
+      this.authCondition = val
+    },
+    clickAuth (auth) {
+      console.log('clickAuth')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .de-tab {
+    border:1px solid #E6E6E6;
+    min-height:200px !important;
+    max-height:300px !important;
+    overflow:auto;
+  }
+  .de-icon {
+    position: absolute;
+    right: 10px;
+    top: 15px;
+    z-index: 99;
+  }
+  .el-input-group__append{
+    background-color: #ffffff;
+  }
+  .el-input__inner{
+    border-right: none;
+  }
+
+  .auth-root-class {
+    margin: 15px 0px 5px;
+    text-align: right;
+  }
+  .de-main-container-auth{
+    border: 1px solid #E6E6E6;
+    height: auto;
+  }
+
+  .blackTheme .de-main-container-auth {
+      border-color: #495865;
+  }
+
+  // ::-webkit-scrollbar {
+
+  // }
+</style>
diff --git a/frontend/src/views/dataset/data/components/LazyTree.vue b/frontend/src/views/dataset/data/components/LazyTree.vue
new file mode 100644
index 0000000000..762e0bcc99
--- /dev/null
+++ b/frontend/src/views/dataset/data/components/LazyTree.vue
@@ -0,0 +1,373 @@
+<template xmlns:el-col="http://www.w3.org/1999/html">
+  <el-col v-loading="loading" class="tree-main">
+    <el-row v-if="showExtent" class="tree-head">
+      <span style="float: left;padding-left: 10px">{{ dataInfo.head }}</span>
+      <span v-for="auth in defaultAuthDetails" :key="auth.privilegeName" class="auth-span">
+        {{ auth.privilegeName }}
+      </span>
+    </el-row>
+    <el-row style="margin-top: 5px">
+      <el-tree
+        :props="defaultProps"
+        :load="loadNodes"
+        :data="treeData"
+        :node-key="defaultProps.id"
+        :highlight-current="highlightCurrent"
+        :default-expanded-keys="expandedKey"
+        lazy
+        @node-click="nodeClick"
+      >
+        <span slot-scope="{ node, data }" class="custom-tree-node">
+          <span>
+            <span style="margin-left: 6px" v-html="data.name" />
+          </span>
+          <span v-if="showExtent" @click.stop>
+            <div v-if="authDetails[data.id]">
+              <span v-for="auth in authDetails[data.id]" :key="auth.privilegeType" class="auth-span">
+                <!-- 1-{{ auth.privilegeType }}-{{ auth.privilegeValue }}-->
+                <a href="javascript:;" @click="clickAuth(data.id,auth)">
+                  <svg-icon style="width: 25px;height: 25px" :icon-class="auth.privilegeValue===1?'lock_open':'lock_closed'" />
+                </a>
+              </span>
+            </div>
+            <div v-else>
+              <span v-for="auth in defaultAuthDetails" :key="auth.privilegeType" class="auth-span">
+                <!--2-{{ auth.privilegeType }}-{{ auth.privilegeValue }}-->
+                <a href="javascript:;" @click="clickAuth(data.id,auth)">
+                  <svg-icon style="width: 25px;height: 25px" :icon-class="auth.privilegeValue===1?'lock_open':'lock_closed'" />
+                </a>
+              </span>
+            </div></span>
+        </span>
+      </el-tree>
+    </el-row>
+  </el-col>
+</template>
+
+<script>
+// import { authChange, authDetails, authDetailsModel, authModel } from '@/api/system/sysAuth'
+// import { execute } from '@/de-base/api/de-api'
+export default {
+  name: 'LazyTree',
+  components: { },
+  props: {
+    filterText: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    authCondition: {
+      type: Object,
+      required: false
+    },
+    dataInfo: {
+      type: Object,
+      required: true
+    },
+    activeName: {
+      type: String,
+      required: true
+    },
+    attachActiveName: String,
+    defaultProps: {
+      type: Object,
+      required: false,
+      default: function () {
+        return {
+          children: 'children',
+          label: 'name',
+          id: 'id',
+          parentId: 'pid',
+          isLeaf: 'leaf'
+        }
+      }
+    },
+    showExtent: Boolean,
+    highlightCurrent: Boolean
+  },
+  data () {
+    return {
+      loading: false,
+      treeData: [],
+      changeIndex: 0,
+      timeMachine: null,
+      expandedKey: [], // 展开节点 搜索时默认展开父级节点
+      defaultCondition: { // pid 是0的时候 查询的是顶级的节点
+        pid: '0'
+      },
+      authDetails: {},
+      defaultAuthDetails: [],
+      searchStatus: false, // 当前是否在搜索状态 （搜索状态 展开不加载子节点）
+      // 当前已经加载的节点ID 备用（当前把当前authTarget的所有授权加载进来）
+      loadedNodeIds: new Set()
+    }
+  },
+  computed: {
+  },
+  watch: {
+    filterText (val) {
+      this.expandedKey = []
+      if (val && val.length > 0) {
+        this.searchStatus = true
+      }
+      // 当组件名和 activeName 相等时 才进行查询
+      if (this.dataInfo.authType === this.activeName) {
+        this.destroyTimeMachine()
+        this.changeIndex++
+        this.filterNode(this.changeIndex)
+      }
+    },
+    authCondition: {
+      handler (newVal, oldVla) {
+        this.loadAuth()
+      },
+      deep: true
+    },
+    activeName: {
+      handler (newVal, oldVla) {
+        this.loadAuth()
+      },
+      deep: true
+    },
+    attachActiveName: {
+      handler (newVal, oldVla) {
+        this.authDetails = {}
+      },
+      deep: true
+    }
+  },
+  created () {
+    // 初始化授权模板
+    if (this.showExtent) {
+      this.executeAxios('/plugin/auth/authDetailsModel/' + this.dataInfo.authType, 'get', {}, res => {
+        this.defaultAuthDetails = res.data
+      })
+      //   authDetailsModel(this.dataInfo.authType).then(res => {
+      //     this.defaultAuthDetails = res.data
+      //   })
+      this.loadAuth()
+    }
+  },
+  methods: {
+    executeAxios (url, type, data, callBack) {
+      const param = {
+        url: url,
+        type: type,
+        data: data,
+        callBack: callBack
+      }
+      this.$emit('execute-axios', param)
+      // if (process.env.NODE_ENV === 'development') {
+      //   execute(param).then(res => {
+      //     if (param.callBack) {
+      //       param.callBack(res)
+      //     }
+      //   }).catch(e => {
+      //     if (param.error) {
+      //       param.error(e)
+      //     }
+      //   })
+      // }
+    },
+    loadAuth () {
+      if (this.authCondition && this.showExtent) {
+        let authQueryCondition = {}
+        if (this.dataInfo.direction === 'source') {
+          // 当前为授权数据 获取当前authTarget 的授权信息 authSource
+          authQueryCondition = {
+            authTarget: this.authCondition.id,
+            authTargetType: this.authCondition.type,
+            authSourceType: this.dataInfo.authType
+          }
+        } else {
+          authQueryCondition = {
+            authSource: this.authCondition.id,
+            authSourceType: this.authCondition.type
+          }
+        }
+        this.executeAxios('/plugin/auth/authDetails', 'post', authQueryCondition, res => {
+          this.authDetails = res.data
+        })
+        // authDetails(authQueryCondition).then(res => {
+        //   this.authDetails = res.data
+        // })
+      }
+    },
+    loadNodes (node, resolve) {
+      if (!this.searchStatus) {
+        if (node.level === 0) {
+          const queryCondition = {
+            modelType: this.dataInfo.authType,
+            ...this.defaultCondition
+          }
+          this.executeAxios('/plugin/auth/authModels', 'post', queryCondition, res => {
+            const data = res.data
+            resolve(data)
+          })
+        //   authModel(queryCondition).then(res => {
+        //     const data = res.data
+        //     resolve(data)
+        //   })
+        } else {
+          const queryCondition = {
+            modelType: this.dataInfo.authType
+          }
+          queryCondition[this.defaultProps.parentId] = node.data[this.defaultProps.id]
+          this.executeAxios('/plugin/auth/authModels', 'post', queryCondition, res => {
+            const data = res.data
+            resolve(data)
+          })
+        //   authModel(queryCondition).then(res => {
+        //     const data = res.data
+        //     resolve(data)
+        //   })
+        }
+      } else {
+        resolve(node.data.children)
+      }
+    },
+    filterNode (index) {
+      this.timeMachine = setTimeout(() => {
+        if (index === this.changeIndex) {
+          const queryCondition = {
+            withExtend: 'parent',
+            modelType: this.dataInfo.authType
+          }
+          queryCondition[this.defaultProps.label] = this.filterText
+          this.executeAxios('/plugin/auth/authModels', 'post', queryCondition, res => {
+            // 高亮显示
+            this.highlights(res.data)
+            this.treeData = this.buildTree(res.data)
+            // 恢复searchStatus 状态 可以允许继续展开父级
+            this.$nextTick(() => (this.searchStatus = false))
+          })
+        //   authModel(queryCondition).then(res => {
+        //     // 高亮显示
+        //     this.highlights(res.data)
+        //     this.treeData = this.buildTree(res.data)
+        //     // 恢复searchStatus 状态 可以允许继续展开父级
+        //     this.$nextTick(() => (this.searchStatus = false))
+        //   })
+        }
+        this.destroyTimeMachine()
+      }, 1500)
+    },
+    nodeClick (data, node) {
+      this.$emit('nodeClick', { id: data.id, type: this.dataInfo.authType })
+    },
+    destroyTimeMachine () {
+      this.timeMachine && clearTimeout(this.timeMachine)
+      this.timeMachine = null
+    },
+    buildTree (arrs) {
+      const idMapping = arrs.reduce((acc, el, i) => {
+        acc[el[this.defaultProps.id]] = i
+        return acc
+      }, {})
+      const roots = []
+      arrs.forEach(el => {
+        // 判断根节点 ###
+        if (el[this.defaultProps.parentId] === null || el[this.defaultProps.parentId] === 0 || el[this.defaultProps.parentId] === '0') {
+          roots.push(el)
+          return
+        }
+        // 用映射表找到父元素
+        const parentEl = arrs[idMapping[el[this.defaultProps.parentId]]]
+        // 把当前元素添加到父元素的`children`数组中
+        parentEl.children = [...(parentEl.children || []), el]
+
+        // 设置展开节点 如果没有子节点则不进行展开
+        if (parentEl.children.length > 0) {
+          this.expandedKey.push(parentEl[this.defaultProps.id])
+        }
+      })
+      return roots
+    },
+    // 权限修改
+    clickAuth (dataId, auth) {
+      let authChangeCondition = {}
+      if (this.dataInfo.direction === 'source') { // 当前为授权数据
+        authChangeCondition = {
+          authSource: dataId,
+          authSourceType: this.dataInfo.authType,
+          authTarget: this.authCondition.id,
+          authTargetType: this.authCondition.type,
+          authDetail: auth
+
+        }
+      } else {
+        authChangeCondition = {
+          authTarget: dataId,
+          authTargetType: this.dataInfo.authType,
+          authSource: this.authCondition.id,
+          authSourceType: this.authCondition.type,
+          authDetail: auth
+        }
+      }
+      this.loading = true
+      this.executeAxios('/plugin/auth/authChange', 'post', authChangeCondition, res => {
+        // 重新加载权限
+        this.loadAuth()
+        this.loading = false
+      })
+    },
+    // 高亮显示搜索内容
+    highlights (data) {
+      if (data && this.filterText && this.filterText.length > 0) {
+        const replaceReg = new RegExp(this.filterText, 'g')// 匹配关键字正则
+        const replaceString = '<span style="color: #faaa39">' + this.filterText + '</span>' // 高亮替换v-html值
+        data.forEach(item => {
+          item.name = item.name.replace(replaceReg, replaceString) // 开始替换
+        })
+      }
+    }
+
+  }
+}
+</script>
+
+<style scoped>
+  .custom-tree-node {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 14px;
+    padding-left: 8px;
+  }
+  .tree-main{
+    height:  calc(100vh - 210px);
+    border: 1px solid #e6e6e6;
+    overflow-y: auto;
+  }
+  .blackTheme .tree-main {
+    border-color: var(--TableBorderColor) !important;
+}
+  /* .tree-head{
+    height: 30px;
+    line-height: 30px;
+    border-bottom: 1px solid #e6e6e6;
+    background-color: #f7f8fa;
+    font-size: 12px;
+    color: #3d4d66 ;
+  } */
+
+  .tree-head{
+    height: 30px;
+    line-height: 30px;
+    border-bottom: 1px solid var(--TableBorderColor, #e6e6e6);
+    background-color: var(--SiderBG, #f7f8fa);
+    font-size: 12px;
+    color: var(--TableColor, #3d4d66) ;
+  }
+
+  .auth-span{
+    float: right;
+    width:50px;
+    margin-right: 30px
+  }
+  .highlights-text {
+    color: #faaa39 !important;
+  }
+
+</style>