[update] 内部工作组左侧树一级节点的新增删除和二级节点的编辑删除走角色管理，二级新增和三级编辑删除权限按一级新增时的管理权限走

src/common/lang/system/en.js

@@ -62,7 +62,9 @@ module.exports = {
     post: 'Position',
     templateName: 'Internal workgroup table template',
     exportName: 'Internal workgroup table',
-    nodeName: 'Node Name',
+    nodeName: '分会名称',
+    adminAuthority: '管理权限',
+    workGroupName: '工作组名称',
     user: 'User',
     pleaseSelectASystem: 'Please select the left system'
   },

src/common/lang/system/zh.js

@@ -63,7 +63,9 @@ module.exports = {
     post: '岗位',
     templateName: '内部工作组表模板',
     exportName: '内部工作组表',
-    nodeName: '节点名称',
+    nodeName: '分会名称',
+    adminAuthority: '管理权限',
+    workGroupName: '工作组名称',
     user: '用户',
     pleaseSelectASystem: '请选择左侧体系'
   },

src/views/system/internalWorkGroup/WorkingGroupList.vue

@@ -15,8 +15,8 @@
             :replaceFields="{children: 'subset', title: 'name', key: 'id'}"
             :default-expand-all="defaultExpandAll"
             @select="treeSelect">
-            <!--   没有删除  -->
+            <!--   第一级：没有删除  -->
-            <template #customNoDelete="record">
+            <template #oneCustom="record">
               <div class="tree-operate-node" @mouseenter="handleTreeMouseover(record.id)" @mouseleave="handleTreeMouseout(record.id)">
                 <a-icon class="parent-node-icon" type="folder" v-if="record.subset && record.subset.length > 0" />
                 <a-tooltip>
@@ -26,16 +26,41 @@
                   <span class="tree-node-custom-title">{{ record.name }}</span>
                 </a-tooltip>
                 <div class="tree-operate-node-btn-box" :class="{'tree-operate-node-btn-box-hide': record.id !== mouseInNodeKey}">
-                  <!--              新增-->
+                  <!--  新增  -->
                   <a-button icon="plus" class="tree-operate-node-btn" @click="handleTreeAdd" v-has="'sys:innerWorkingGroup:tree:add'"></a-button>
-                  <!--              编辑-->
+                  <!--  编辑  -->
-                  <a-button class="tree-operate-node-btn" @click="handleTreeEdit(record.name)" v-has="'sys:innerWorkingGroup:tree:edit'">
+                  <a-button class="tree-operate-node-btn" @click="handleTreeEdit(record)" v-has="'sys:innerWorkingGroup:tree:edit'">
                     <i class="iconfont icon-bianji" style="color: @primary-color"></i>
                   </a-button>
                 </div>
               </div>
             </template>
+            <!--  第二级： 新增权限根据授权人员决定，编辑删除走角色授权  -->
+            <template #twoCustom="record">
+              <div class="tree-operate-node" @mouseenter="handleTreeMouseover(record.id)" @mouseleave="handleTreeMouseout(record.id)">
+                <a-icon class="parent-node-icon" type="folder" v-if="record.subset && record.subset.length > 0" />
+                <a-tooltip>
+                  <template #title>
+                    {{ record.name }}
+                  </template>
+                  <span class="tree-node-custom-title">{{ record.name }}</span>
+                </a-tooltip>
+                <div class="tree-operate-node-btn-box" :class="{'tree-operate-node-btn-box-hide': record.id !== mouseInNodeKey}">
+                  <!--  新增  -->
+                  <a-button v-if="record.userId === currentUserId" icon="plus" class="tree-operate-node-btn" @click="handleWorkGroupAdd"></a-button>
+                  <!--  编辑  -->
+                  <a-button class="tree-operate-node-btn" @click="handleTreeEdit(record)" v-has="'sys:innerWorkingGroup:tree:edit'">
+                    <i class="iconfont icon-bianji" style="color: @primary-color"></i>
+                  </a-button>
+                  <!--  删除  -->
+                  <a-button class="tree-operate-node-btn" @click="handleTreeDelete" v-has="'sys:innerWorkingGroup:tree:delete'">
+                    <i class="iconfont icon-shanchu_" style="color: @primary-color"></i>
+                  </a-button>
+                </div>
+              </div>
+            </template>
 
+            <!--  第三级： 编辑、删除按授权人员决定  -->
             <template #custom="record">
               <div class="tree-operate-node" @mouseenter="handleTreeMouseover(record.id)" @mouseleave="handleTreeMouseout(record.id)">
                 <a-icon class="parent-node-icon" type="folder" v-if="record.subset && record.subset.length > 0" />
@@ -45,15 +70,13 @@
                   </template>
                   <span class="tree-node-custom-title">{{ record.name }}</span>
                 </a-tooltip>
-                <div class="tree-operate-node-btn-box" :class="{'tree-operate-node-btn-box-hide': record.id !== mouseInNodeKey}">
+                <div v-if="record.userId === currentUserId" class="tree-operate-node-btn-box" :class="{'tree-operate-node-btn-box-hide': record.id !== mouseInNodeKey}">
-                  <!--              新增-->
+                  <!--  编辑  -->
-                  <a-button icon="plus" class="tree-operate-node-btn" @click="handleTreeAdd" v-has="'sys:innerWorkingGroup:tree:add'"></a-button>
+                  <a-button class="tree-operate-node-btn" @click="handleWorkGroupEdit(record)">
-                  <!--              编辑-->
-                  <a-button class="tree-operate-node-btn" @click="handleTreeEdit(record.name)" v-has="'sys:innerWorkingGroup:tree:edit'">
                     <i class="iconfont icon-bianji" style="color: @primary-color"></i>
                   </a-button>
-                  <!--              删除-->
+                  <!--  删除  -->
-                  <a-button class="tree-operate-node-btn" @click="handleTreeDelete" v-has="'sys:innerWorkingGroup:tree:delete'">
+                  <a-button class="tree-operate-node-btn" @click="handleTreeDelete">
                     <i class="iconfont icon-shanchu_" style="color: @primary-color"></i>
                   </a-button>
                 </div>
@@ -104,18 +127,19 @@
       </div>
 
       <div class="table-operator">
+        <!--  当前登录人是当前左侧树选中节点的管理人员才有新增、导入、删除权限  -->
         <!--        新增-->
-        <a-button icon="plus" type="primary" @click="handleAdd" v-has="'sys:innerWorkingGroup:add'">{{ $t('newlyAdded') }}</a-button>
+        <a-button v-if="currentNodeObj.userId === currentUserId" icon="plus" type="primary" @click="handleAdd">{{ $t('newlyAdded') }}</a-button>
         <!--        导入-->
         <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :data="importData" :action="importExcelUrl" @change="handleImportExcel">
-          <a-button type="primary" icon="import" ghost @click="handleImport" v-has="'sys:innerWorkingGroup:import'">{{ $t('import') }}</a-button>
+          <a-button v-if="currentNodeObj.userId === currentUserId" type="primary" icon="import" ghost @click="handleImport">{{ $t('import') }}</a-button>
         </a-upload>
         <!--        导出-->
         <a-button icon="export" type="primary" ghost @click="handleExportXls($t('system.internalWorkGroup.exportName'))" v-has="'sys:innerWorkingGroup:export'">
           {{ $t('export') }}
         </a-button>
         <!--        模板下载-->
-        <a-button type="primary" icon="download" ghost @click="downTemplate($t('system.internalWorkGroup.templateName'))" v-has="'sys:innerWorkingGroup:downTemplate'">
+        <a-button v-if="currentNodeObj.userId === currentUserId" type="primary" icon="download" ghost @click="downTemplate($t('system.internalWorkGroup.templateName'))">
           {{ $t('templateDownload') }}
         </a-button>
       </div>
@@ -133,15 +157,18 @@
           @change="handleTableChange">
 
           <template v-slot:action="{text, record}">
-            <a @click="handleDelete(record.id)" v-has="'sys:innerWorkingGroup:delete'">{{ $t('delete') }}</a>
+            <!--  当前登录人是当前左侧树选中节点的管理人员才有新增、导入、删除权限  -->
+            <a v-if="currentNodeObj.userId === currentUserId" @click="handleDelete(record.id)">{{ $t('delete') }}</a>
           </template>
 
         </j-table>
       </div>
     </div>
 
-    <!--    新增、编辑左侧树节点  -->
+    <!--    根节点新增、二级节点编辑左侧树节点  -->
     <tree-node-modal ref="treeNodeModal" @ok="treeNodeModalOk"></tree-node-modal>
+    <!--  二级节点新增、三级节点编辑左侧树节点  -->
+    <tree-node-work-group-modal ref="treeNodeWorkGroupModal" @ok="treeNodeModalOk"></tree-node-work-group-modal>
     <!--  新增弹框  -->
     <working-group-modal ref="modalForm" @ok="modalFormOk"></working-group-modal>
   </a-card>
@@ -154,10 +181,13 @@ import TreeNodeModal from './modules/TreeNodeModal'
 import { postAction, downFile } from '@/api/manage'
 import WorkingGroupModal from './modules/WorkingGroupModal'
 import { getWorkGroupTreeList } from '@/api/api'
+import TreeNodeWorkGroupModal from './modules/TreeNodeWorkGroupModal'
+import Vue from 'vue'
+import { USER_INFO } from '../../../store/mutation-types'
 
 export default {
   name: 'WorkingGroupList',
-  components: { WorkingGroupModal, TreeNodeModal, JTable },
+  components: { TreeNodeWorkGroupModal, WorkingGroupModal, TreeNodeModal, JTable },
   mixins: [JeroListMixin],
   data () {
     return {
@@ -218,11 +248,14 @@ export default {
         exportXlsUrl: '/sys/lawsWorkingGroupUser/export',
         delete: '/sys/lawsWorkingGroupUser/delete',
         downTemplateUrl: '/sys/lawsWorkingGroupUser/download/template'
-      }
+      },
+      currentUserId: '',
+      currentNodeObj: {} // 当前左侧树节点对象
     }
   },
   mounted () {
     this.initTreeData()
+    this.currentUserId = Vue.ls.get(USER_INFO).id
   },
   methods: {
     // 获取左侧树数据
@@ -231,7 +264,7 @@ export default {
       getWorkGroupTreeList(params).then(res => {
         if (res.success) {
           this.treeData = this.dealTreeData(res.result)
-          this.treeData[0].scopedSlots = { title: 'customNoDelete' }
+          this.treeData[0].scopedSlots = { title: 'oneCustom' }
         } else {
           this.treeData = []
         }
@@ -245,8 +278,8 @@ export default {
     // 处理左侧树数据结构
     dealTreeData (treeData) {
       return treeData.map(item => {
+        item.scopedSlots = { title: item.level === 2 ? 'twoCustom' : 'custom' }
         if (item.subset && item.subset.length > 0) {
-          item.scopedSlots = { title: 'custom' }
           item.subset = this.dealTreeData(item.subset)
         }
         return item
@@ -267,15 +300,25 @@ export default {
         this.mouseInNodeKey = null
       }
     },
-    // 左侧树点击新增
+    // 左侧树点击新增(根节点新增）
     handleTreeAdd () {
       this.$refs.treeNodeModal.title = this.$t('newlyAdded')
       this.$refs.treeNodeModal.add(this.mouseInNodeKey)
     },
-    // 左侧树点击编辑
+    // 左侧树点击编辑（二级节点编辑）
-    handleTreeEdit (name) {
+    handleTreeEdit (record) {
       this.$refs.treeNodeModal.title = this.$t('edit')
-      this.$refs.treeNodeModal.edit(this.mouseInNodeKey, name)
+      this.$refs.treeNodeModal.edit(this.mouseInNodeKey, record)
+    },
+    // 左侧树新增（二级节点的新增）
+    handleWorkGroupAdd () {
+      this.$refs.treeNodeWorkGroupModal.title = this.$t('newlyAdded')
+      this.$refs.treeNodeWorkGroupModal.add(this.mouseInNodeKey)
+    },
+    // 左侧树编辑（三级节点的编辑）
+    handleWorkGroupEdit (record) {
+      this.$refs.treeNodeWorkGroupModal.title = this.$t('edit')
+      this.$refs.treeNodeWorkGroupModal.edit(this.mouseInNodeKey, record)
     },
     // 左侧树点击删除
     handleTreeDelete () {
@@ -300,9 +343,23 @@ export default {
     treeNodeModalOk () {
       this.initTreeData()
     },
+    // 根据当前节点key设置当前节点对象
+    setCurrNodeObjByKey (treeData) {
+      for (const item of treeData) {
+        if (item.id === this.currentTreeNode) {
+          this.currentNodeObj = item
+          break
+        }
+        if (item.subset && item.subset.length > 0) {
+          this.setCurrNodeObjByKey(item.subset)
+        }
+      }
+    },
     // 左侧树点击选中
     treeSelect (selectedKeys) {
       this.currentTreeNode = selectedKeys
+      // 设置当前左侧树节点对象，为了右侧表格操作判断权限
+      this.setCurrNodeObjByKey()
       this.queryParam.workingGroupId = selectedKeys[0]
       this.loadData()
     },

src/views/system/internalWorkGroup/modules/TreeNodeModal.vue

@@ -11,12 +11,19 @@
 
     <a-spin :spinning="confirmLoading">
       <a-form :form="form">
+        <!--  分会名称  -->
         <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('system.internalWorkGroup.nodeName')">
           <a-input :placeholder="$t('pleaseEnter') + $t('system.internalWorkGroup.nodeName')"
                    :maxLength="50"
                    @change="event => event.target.value = event.target.value.trim()"
                    v-decorator.trim="[ 'name', validatorRules.name ]" />
         </a-form-item>
+        <!--  管理权限  -->
+        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('system.internalWorkGroup.adminAuthority')">
+          <user-selection :placeholder="$t('pleaseSelect') + $t('system.internalWorkGroup.adminAuthority')"
+                          type="radio"
+                          v-decorator="['userId', validatorRules.userId]" />
+        </a-form-item>
       </a-form>
     </a-spin>
 
@@ -26,9 +33,11 @@
 <script>
 import pick from 'lodash.pick'
 import { postAction } from '@/api/manage'
+import UserSelection from '@/components/selection/UserSelection'
 
 export default {
   name: 'TreeNodeModal',
+  components: { UserSelection },
   data () {
     return {
       title: '',
@@ -50,6 +59,12 @@ export default {
             { required: true, message: this.$t('pleaseEnter') + this.$t('system.internalWorkGroup.nodeName') }
           ],
           validateTrigger: 'blur'
+        },
+        userId: {
+          rules: [
+            { required: true, message: this.$t('pleaseSelect') + this.$t('system.internalWorkGroup.adminAuthority') }
+          ],
+          validateTrigger: 'change'
         }
       },
       url: {
@@ -64,13 +79,13 @@ export default {
       this.form.resetFields()
       this.model.pid = parentNodeKey
     },
-    edit (nodeKey, name) {
+    edit (nodeKey, record) {
       this.visible = true
       this.form.resetFields()
+      this.model = Object.assign({}, record)
       this.model.id = nodeKey
-      this.model.name = name
       this.$nextTick(() => {
-        this.form.setFieldsValue(pick(this.model, 'name'))
+        this.form.setFieldsValue(pick(this.model, 'name', 'userId'))
       })
     },
     close () {
@@ -87,6 +102,7 @@ export default {
           this.confirmLoading = true
           const param = Object.assign({}, this.model)
           param.name = values.name
+          param.userId = values.userId
           let url = ''
           if (this.model.id) {
             url = this.url.edit

src/views/system/internalWorkGroup/modules/TreeNodeWorkGroupModal.vue

@@ -0,0 +1,117 @@
+<template>
+  <j-modal
+    :title="title"
+    :maskClosable="true"
+    :width="500"
+    :closable="true"
+    switchFullscreen
+    @cancel="handleCancel"
+    @ok="handleOk"
+    :visible="visible">
+
+    <a-spin :spinning="confirmLoading">
+      <a-form :form="form">
+        <!--  工作组名称  -->
+        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('system.internalWorkGroup.workGroupName')">
+          <a-input :placeholder="$t('pleaseEnter') + $t('system.internalWorkGroup.workGroupName')"
+                   :maxLength="50"
+                   @change="event => event.target.value = event.target.value.trim()"
+                   v-decorator.trim="[ 'name', validatorRules.name ]" />
+        </a-form-item>
+      </a-form>
+    </a-spin>
+
+  </j-modal>
+</template>
+
+<script>
+import pick from 'lodash.pick'
+import { postAction } from '@/api/manage'
+
+export default {
+  name: 'TreeNodeWorkGroupModal',
+  data () {
+    return {
+      title: '',
+      visible: false,
+      confirmLoading: false,
+      form: this.$form.createForm(this),
+      model: {},
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 6 }
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 16 }
+      },
+      validatorRules: {
+        name: {
+          rules: [
+            { required: true, message: this.$t('pleaseEnter') + this.$t('system.internalWorkGroup.workGroupName') }
+          ],
+          validateTrigger: 'blur'
+        }
+      },
+      url: {
+        add: '/sys/lawsWorkingGroup/add',
+        edit: '/sys/lawsWorkingGroup/edit'
+      }
+    }
+  },
+  methods: {
+    add (parentNodeKey) {
+      this.visible = true
+      this.form.resetFields()
+      this.model.pid = parentNodeKey
+    },
+    edit (nodeKey, record) {
+      this.visible = true
+      this.form.resetFields()
+      this.model = Object.assign({}, record)
+      this.model.id = nodeKey
+      this.$nextTick(() => {
+        this.form.setFieldsValue(pick(this.model, 'name'))
+      })
+    },
+    close () {
+      this.visible = false
+      this.model = {}
+    },
+    handleCancel () {
+      this.close()
+    },
+    handleOk () {
+      if (this.confirmLoading) return
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          this.confirmLoading = true
+          const param = Object.assign({}, this.model)
+          param.name = values.name
+          let url = ''
+          if (this.model.id) {
+            url = this.url.edit
+          } else {
+            url = this.url.add
+          }
+          postAction(url, param).then(res => {
+            if (res.success) {
+              this.$message.success(res.message)
+              this.$emit('ok')
+              this.close()
+            } else {
+              this.$message.warning(res.message)
+            }
+          }).finally(() => {
+            this.confirmLoading = false
+          })
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>