Merge pull request #1301 from dataease/pr@dev@fix_my_share_tree

fix: 我分享的没有及时刷新
2021-11-29 13:53:37 +08:00 · 2021-11-29 13:53:37 +08:00 · 8f00ea4783
commit 8f00ea4783
parent a6245443b8 b9348f13ac
7 changed files with 166 additions and 140 deletions
--- a/frontend/src/views/panel/GrantAuth/ShareHead/index.vue
+++ b/frontend/src/views/panel/GrantAuth/ShareHead/index.vue
@ -7,22 +7,20 @@
        </el-col>

        <el-col :span="8" style="text-overflow:ellipsis;overflow: hidden;white-space: nowrap;font-size: 14px">
-          <span>{{ $t('panel.when_share') + ': ' + (granterTime ? new Date(granterTime).format('yyyy年-MM月-dd日') : '') }}</span>
+          <span>{{ $t('panel.when_share') + ': ' + (granterTime ? new Date(granterTime).format('yyyy-MM-dd hh:mm:ss') : '') }}</span>
        </el-col>

        <el-col :span="8" style="text-overflow:ellipsis;overflow: hidden;white-space: nowrap;font-size: 14px">
-          <el-link type="primary" disabled class="share-checked">
-            <!-- <el-checkbox v-model="checked" disabled>组织</el-checkbox> -->
+          <!-- 分享维度提醒 先注释 因为后面有可能还是需要的 -->
+          <!-- <el-link type="primary" disabled class="share-checked">
            {{ $t('panel.org') }}
          </el-link>
          <el-link type="success" disabled class="share-checked">
-            <!-- <el-checkbox v-model="checked" disabled>角色</el-checkbox> -->
            {{ $t('panel.role') }}
          </el-link>
          <el-link type="info" disabled class="share-checked">
-            <!-- <el-checkbox v-model="checked" disabled>用户</el-checkbox> -->
            {{ $t('panel.user') }}
-          </el-link>
+          </el-link> -->
        </el-col>
      </el-row>
      <el-row style="display: flex;">
@ -68,6 +66,7 @@
 <script>
 import GrantAuth from '../index'
 import { shareTargets, removeShares } from '@/api/panel/share'
+import bus from '@/utils/bus'
 export default {
  name: 'ShareHead',
  components: { GrantAuth },
@ -135,7 +134,13 @@ export default {
          this.granterTime = item.createTime
          return item
        }).sort((a, b) => b.type - a.type)
+        if (!this.dynamicTags || this.dynamicTags.length === 0) {
+          this.afterRemoveAll()
+        }
      })
+    },
+    afterRemoveAll() {
+      bus.$emit('refresh-my-share-out')
    }
  }
 }
--- a/frontend/src/views/panel/GrantAuth/dept/index.vue
+++ b/frontend/src/views/panel/GrantAuth/dept/index.vue
@ -18,13 +18,13 @@
      >
        <span slot-scope="{ node, data }" class="custom-tree-node">
          <span>
-            <span style="margin-left: 6px">{{ data.name }}</span>
+            <span style="margin-left: 6px">{{ node.data.name }}</span>
          </span>
          <span @click.stop>

            <div>
              <span class="auth-span">
-                <el-checkbox v-model="data.checked" />
+                <el-checkbox v-model="data.checked" @change="nodeStatusChange(data)" />
              </span>
            </div>
          </span>
@ -68,7 +68,8 @@ export default {
          return !data.hasChildren
        }
      },
-      expandNodeIds: []
+      expandNodeIds: [],
+      sharesLoad: false
    }
  },
  watch: {
@ -125,33 +126,36 @@ export default {
      } else {
        param = { conditions: [this.defaultCondition] }
      }
-
-      this.queryShareNodeIds(() => {
-        loadTable(param).then(res => {
-          let data = res.data
-          data = data.map(obj => {
-            if (obj.subCount > 0) {
-              obj.hasChildren = true
-            }
-            return obj
-          })
-
-          this.setCheckExpandNodes(data)
-          this.expandNodeIds = []
-          if (condition && condition.value) {
-            // data = data.map(node => {
-            //   delete (node.hasChildren)
-            //   return node
-            // })
-            this.data = this.buildTree(data)
-            this.$nextTick(() => {
-              // this.expandNodeIds.push()
-              this.expandResult(this.data)
-            })
-          } else {
-            this.data = data
-          }
+      if (!this.sharesLoad) {
+        this.queryShareNodeIds(() => {
+          this.sharesLoad = true
+          this.loadTreeData(param, condition)
        })
+      } else {
+        this.loadTreeData(param, condition)
+      }
+    },
+
+    loadTreeData(param, condition) {
+      loadTable(param).then(res => {
+        let data = res.data
+        data = data.map(obj => {
+          if (obj.subCount > 0) {
+            obj.hasChildren = true
+          }
+          return obj
+        })
+
+        this.setCheckExpandNodes(data)
+        this.expandNodeIds = []
+        if (condition && condition.value) {
+          this.data = this.buildTree(data)
+          this.$nextTick(() => {
+            this.expandResult(this.data)
+          })
+        } else {
+          this.data = data
+        }
      })
    },

@ -185,18 +189,8 @@ export default {
    },

    getSelected() {
-    //   const ids = []
-    //   this.searchChecked(ids)
-    //   return {
-    //     deptIds: ids
-    //   }
-      // const ids = []
-      const nodesMap = this.$refs.tree.store.nodesMap
-
-      const ids = Object.values(nodesMap).filter(node => node.data.checked).map(item => item.data.deptId)
-
      return {
-        deptIds: ids
+        deptIds: this.shares
      }
    },

@ -221,24 +215,26 @@ export default {
        const shares = res.data
        const nodeIds = shares.map(share => share.targetId)
        this.shares = nodeIds
-        // this.$nextTick(() => {
-        //   this.setCheckNodes()
-        // })
+
        callBack && callBack()
      })
    },

-    // setCheckNodes() {
-    //   this.data.forEach(node => {
-    //     const nodeId = node.deptId
-    //     this.shares.includes(nodeId) && (node.checked = true)
-    //   })
-    // },
    setCheckExpandNodes(rows) {
      rows.forEach(node => {
        const nodeId = node.deptId
        this.shares.includes(nodeId) && (node.checked = true)
      })
+    },
+
+    nodeStatusChange(val) {
+      if (val.checked) {
+        if (!this.shares.includes(val.deptId)) {
+          this.shares.push(val.deptId)
+        }
+      } else {
+        this.shares = this.shares.filter(deptId => deptId !== val.deptId)
+      }
    }

  }
--- a/frontend/src/views/panel/GrantAuth/index.vue
+++ b/frontend/src/views/panel/GrantAuth/index.vue
@ -59,8 +59,6 @@ export default {
      this.showSearchInput = false
    },
    save() {
-    //   this.$refs[this.activeName].save(this.$t('commons.share_success'))
-    //   this.$emit('close-grant', 0)
      this.fineSave()
    },
    fineSave() {
--- a/frontend/src/views/panel/GrantAuth/role/index.vue
+++ b/frontend/src/views/panel/GrantAuth/role/index.vue
@ -2,11 +2,12 @@
  <div class="my_table">
    <el-table
      ref="table"
-      :data="data.filter(node => !keyWord || node[fieldName].toLowerCase().includes(keyWord.toLowerCase()))"
+      :data="tableData"
      :show-header="true"
      style="width: 100%"
      :row-style="{height: '35px'}"
-      @filter-change="filterChange"
+      @select="selectOne"
+      @select-all="selectAll"
    >
      <el-table-column :column-key="fieldName" :label="columnLabel" :prop="fieldName" filter-placement="right-start" :filters="filter_options" :filter-multiple="false" :filter-method="filterHandler" />
      <el-table-column type="selection" fixd />
@ -18,7 +19,6 @@
 import { roleGrid } from '@/api/system/user'
 import { formatCondition } from '@/utils/index'
 import { loadShares } from '@/api/panel/share'
-/* import { saveShare, loadShares } from '@/api/panel/share' */
 export default {
  name: 'GrantRole',
  props: {
@ -39,7 +39,15 @@ export default {
      filter_options: [{ text: this.$t('panel.no_auth_role'), value: 0 }, { text: this.$t('panel.auth_role'), value: 1 }],
      fieldName: 'name',
      type: 1, // 类型1代表角色
-      shares: []
+      shares: [],
+
+      tableData: []
+    }
+  },
+  watch: {
+    'keyWord': function(val) {
+      this.tableData = this.data.filter(node => !val || node[this.fieldName].toLowerCase().includes(val.toLowerCase()))
+      this.setCheckNodes()
    }
  },
  created() {
@ -56,48 +64,22 @@ export default {
      const param = temp || {}
      roleGrid(1, 0, param).then(response => {
        const data = response.data
-        // this.total = data.itemCount
        this.data = data.listObject
+        this.tableData = data.listObject
        this.queryShareNodeIds()
      })
    },
    filterHandler(value, row, column) {
-      // const property = column['property']
-      // return row[property] === value
      const roleId = row['roleId']
      return !(value ^ this.shares.includes(roleId))
    },

-    filterChange(obj) {
-      const arr = obj[this.fieldName]
-      if (arr.length === 0) {
-        this.initColumnLabel()
-      } else {
-        this.columnLabel = this.filter_options[arr[0]].text
-      }
-      this.$nextTick(() => {
-        this.setCheckNodes()
-      })
-    },
-
    getSelected() {
      return {
-        roleIds: this.$refs.table.store.states.selection.map(item => item.roleId)
+        roleIds: this.shares
      }
    },

-    /* save(msg) {
-      const rows = this.$refs.table.store.states.selection
-      const request = this.buildRequest(rows)
-      saveShare(request).then(res => {
-        this.$success(msg)
-        return true
-      }).catch(err => {
-        this.$error(err.message)
-        return false
-      })
-    }, */
-
    cancel() {
    },
    buildRequest(rows) {
@ -126,10 +108,39 @@ export default {
    },

    setCheckNodes() {
-      this.data.forEach(node => {
-        const nodeId = node.roleId
-        this.shares.includes(nodeId) && this.$refs.table.toggleRowSelection(node, true)
+      this.$nextTick(() => {
+        this.$refs.table.store.states.data.forEach(node => {
+          const nodeId = node.roleId
+          this.shares.includes(nodeId) && this.$refs.table.toggleRowSelection(node, true)
+        })
      })
+    },
+    selectOne(selection, row) {
+      if (selection.some(node => node.roleId === row.roleId)) {
+        // 如果选中了 且 已有分享数据不包含当前节点则添加
+        if (!this.shares.includes(row.roleId)) {
+          this.shares.push(row.roleId)
+        }
+      } else {
+        // 如果取消选中 则移除
+        this.shares = this.shares.filter(nodeId => row.roleId !== nodeId)
+        // this.shares.splice(this.shares.findIndex(item => item.roleId === row.roleId), 1)
+      }
+    },
+    selectAll(selection) {
+      // 1.全选
+      if (selection && selection.length > 0) {
+        selection.forEach(node => {
+          if (!this.shares.includes(node.roleId)) {
+            this.shares.push(node.roleId)
+          }
+        })
+      } else {
+        // 2.全部取消
+        const currentNodes = this.$refs.table.store.states.data
+        const currentNodeIds = currentNodes.map(node => node.roleId)
+        this.shares = this.shares.filter(nodeId => !currentNodeIds.includes(nodeId))
+      }
    }

  }
--- a/frontend/src/views/panel/GrantAuth/shareTree.vue
+++ b/frontend/src/views/panel/GrantAuth/shareTree.vue
@ -11,15 +11,7 @@
              </span>
              <span style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">{{ data.name }}</span>
            </span>
-            <!--  <span :class="!!data.msgNode ? 'msg-node-class': ''">
-              <span v-if="!!data.id">
-                <el-button
-                  icon="el-icon-picture-outline"
-                  type="text"
-                />
-              </span>
-              <span style="margin-left: 6px">{{ data.name }}</span>
-            </span> -->
+
          </span>
        </el-tree>
      </div>
@ -28,9 +20,9 @@
    <el-row>
      <span class="header-title">{{ $t('panel.share_out') }}</span>
      <div class="block" style="margin-top:8px;">
-        <el-tree :data="outDatas" :props="defaultProps" :highlight-current="true" node-key="name" :default-expand-all="true" @node-click="viewMyShare">
+        <el-tree :data="outDatas" :props="defaultProps" :highlight-current="true" node-key="name" :default-expand-all="true">
          <span slot-scope="{ data }" class="custom-tree-node father">
-            <span style="display: flex; flex: 1 1 0%; width: 0px;">
+            <span style="display: flex; flex: 1 1 0%; width: 0px;" @click="viewMyShare(data)">
              <span v-if="!!data.id">
                <svg-icon icon-class="panel" class="ds-icon-scene" />
              </span>
@ -79,7 +71,18 @@ export default {
      outDatas: []
    }
  },
+  computed: {
+    panelInfo() {
+      return this.$store.state.panel.panelInfo
+    }
+  },
  created() {
+    bus.$on('refresh-my-share-out', () => {
+      this.initOutData().then(res => {
+        this.outDatas = res.data
+        this.setMainNull()
+      })
+    })
    this.initData().then(res => {
      this.datas = res.data
      if (this.msgPanelIds && this.msgPanelIds.length > 0) {
@ -145,7 +148,6 @@ export default {
      })
    },
    removeCurrent(node) {
-      console.log(node)
      const param = {
        panelId: node.id
      }
@ -156,6 +158,7 @@ export default {
        type: 'warning'
      }).then(() => {
        removeShares(param).then(res => {
+          this.panelInfo && this.panelInfo.id && node.id === this.panelInfo.id && this.setMainNull()
          this.initOutData().then(res => {
            this.outDatas = res.data
          })
@ -167,6 +170,9 @@ export default {
          message: this.$t('commons.delete_cancelled')
        })
      })
+    },
+    setMainNull() {
+      this.$store.dispatch('panel/setPanelInfo', { id: null, name: '', preStyle: null })
    }

  }
--- a/frontend/src/views/panel/GrantAuth/user/index.vue
+++ b/frontend/src/views/panel/GrantAuth/user/index.vue
@ -2,11 +2,12 @@
  <div class="my_table">
    <el-table
      ref="table"
-      :data="data.filter(node => !keyWord || node[fieldName].toLowerCase().includes(keyWord.toLowerCase()))"
+      :data="tableData"
      :show-header="true"
      style="width: 100%"
      :row-style="{height: '35px'}"
-      @filter-change="filterChange"
+      @select="selectOne"
+      @select-all="selectAll"
    >
      <el-table-column
        :column-key="fieldName"
@ -47,7 +48,14 @@ export default {
      filter_options: [{ text: this.$t('panel.unshared_people'), value: 0 }, { text: this.$t('panel.shared_people'), value: 1 }],
      fieldName: 'nickName',
      type: 0, // 类型0代表用户
-      shares: []
+      shares: [],
+      tableData: []
+    }
+  },
+  watch: {
+    'keyWord': function(val) {
+      this.tableData = this.data.filter(node => !val || node[this.fieldName].toLowerCase().includes(val.toLowerCase()))
+      this.setCheckNodes()
    }
  },
  created() {
@ -63,48 +71,22 @@ export default {
      const param = temp || {}
      userLists(1, 0, param).then(response => {
        const data = response.data
-        // this.total = data.itemCount
        this.data = data.listObject.filter(ele => ele.id !== this.$store.getters.user.userId)
+        this.tableData = data.listObject.filter(ele => ele.id !== this.$store.getters.user.userId)
        this.queryShareNodeIds()
      })
    },
    filterHandler(value, row, column) {
-      // const property = column['property']
-      // return row[property] === value
      const userId = row['userId']
      return !(value ^ this.shares.includes(userId))
    },

-    filterChange(obj) {
-      const arr = obj[this.fieldName]
-      if (arr.length === 0) {
-        this.initColumnLabel()
-      } else {
-        this.columnLabel = this.filter_options[arr[0]].text
-      }
-      this.$nextTick(() => {
-        this.setCheckNodes()
-      })
-    },
-
    getSelected() {
      return {
-        userIds: this.$refs.table.store.states.selection.map(item => item.userId)
+        userIds: this.shares
      }
    },

-    /*  save(msg) {
-      const rows = this.$refs.table.store.states.selection
-      const request = this.buildRequest(rows)
-      saveShare(request).then(response => {
-        this.$success(msg)
-        return true
-      }).catch(err => {
-        this.$error(err.message)
-        return false
-      })
-    }, */
-
    cancel() {
      console.log('user cancel')
    },
@ -134,10 +116,38 @@ export default {
    },

    setCheckNodes() {
-      this.data.forEach(node => {
-        const nodeId = node.userId
-        this.shares.includes(nodeId) && this.$refs.table.toggleRowSelection(node, true)
+      this.$nextTick(() => {
+        this.$refs.table.store.states.data.forEach(node => {
+          const nodeId = node.userId
+          this.shares.includes(nodeId) && this.$refs.table.toggleRowSelection(node, true)
+        })
      })
+    },
+    selectOne(selection, row) {
+      if (selection.some(node => node.userId === row.userId)) {
+        // 如果选中了 且 已有分享数据不包含当前节点则添加
+        if (!this.shares.includes(row.userId)) {
+          this.shares.push(row.userId)
+        }
+      } else {
+        // 如果取消选中 则移除
+        this.shares = this.shares.filter(nodeId => row.userId !== nodeId)
+      }
+    },
+    selectAll(selection) {
+      // 1.全选
+      if (selection && selection.length > 0) {
+        selection.forEach(node => {
+          if (!this.shares.includes(node.userId)) {
+            this.shares.push(node.userId)
+          }
+        })
+      } else {
+        // 2.全部取消
+        const currentNodes = this.$refs.table.store.states.data
+        const currentNodeIds = currentNodes.map(node => node.userId)
+        this.shares = this.shares.filter(nodeId => !currentNodeIds.includes(nodeId))
+      }
    }

  }
--- a/frontend/src/views/panel/list/PanelMain.vue
+++ b/frontend/src/views/panel/list/PanelMain.vue
@ -4,7 +4,7 @@
      <el-tabs v-model="activeName" class="tab-panel" :stretch="true" @tab-click="handleClick">
        <el-tab-pane name="PanelList">
          <span slot="label"><i class="el-icon-document tablepanel-i" />{{ $t('panel.panel_list') }}</span>
-          <panel-list ref="panelList" v-if="activeName==='PanelList'" />
+          <panel-list v-if="activeName==='PanelList'" ref="panelList" />
        </el-tab-pane>
        <el-tab-pane name="panels_star" :lazy="true">
          <span slot="label"><i class="el-icon-star-off tablepanel-i" />{{ $t('panel.store') }}</span>
@ -17,7 +17,7 @@
      </el-tabs>
    </de-aside-container>
    <de-main-container>
-      <PanelViewShow v-if="mainActiveName==='PanelMain'" :active-tab="activeName"  @editPanel="editPanel"/>
+      <PanelViewShow v-if="mainActiveName==='PanelMain'" :active-tab="activeName" @editPanel="editPanel" />
    </de-main-container>
  </de-container>
 </template>