fix: 我分享的没有及时刷新

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')
     }
   }
 }

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] }
       }
+      if (!this.sharesLoad) {
+        this.queryShareNodeIds(() => {
+          this.sharesLoad = true
+          this.loadTreeData(param, condition)
+        })
+      } else {
+        this.loadTreeData(param, condition)
+      }
+    },
 
-      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
+    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)
+      }
     }
 
   }

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() {

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))
+      }
     }
 
   }

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 })
     }
 
   }

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))
+      }
     }
 
   }

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>