产品结构树： 1、新增树节点数据权限配置功能

zhaowei

2025-01-22 c5605aafbbb7678d91cefac28b3b6c1524809b46

产品结构树：
1、新增树节点数据权限配置功能

 src/api/dnc.js

@@ -46,5 +46,29 @@
  // æŒ‡å®šå½“前文档版本
  appointCurrentDocumentVersionApi: fileId => putAction(`/nc/file/assign/version/${fileId}`),
  // æ–‡æ¡£æ¯”对
  fileCompareApi: fileIdArray => getAction(`/nc/file/comparison/${fileIdArray[0]}/${fileIdArray[1]}`)
  fileCompareApi: fileIdArray => getAction(`/nc/file/comparison/${fileIdArray[0]}/${fileIdArray[1]}`),
  // èŽ·å–所有部门列表
  getAllDepartmentsListApi: () => getAction('/ucenter/depart/list/all'),
  // èŽ·å–所有用户列表
  getAllUsersListApi: () => getAction('/sys/user/list'),
  // èŽ·å–有权限的部门列表
  getHasPermissionDepartApi: ({ type, id }) => getAction(`/nc/product/get/perm/depart/${type}/${id}`),
  // èŽ·å–有权限的用户列表
  getHasPermissionUserApi: ({ type, id }) => getAction(`/nc/product/get/perm/user/${type}/${id}`),
  // åˆ†é…éƒ¨é—¨æƒé™
  assignPermissionToDepart: ({ treeNodeType, treeNodeId, isAssignSonNode, departIdArray }) => {
    return postAction(`/nc/product/assign/add/department/${treeNodeType}/${treeNodeId}/${isAssignSonNode}`, departIdArray)
  },
  // ç§»é™¤éƒ¨é—¨æƒé™
  removePermissionFromDepart: ({ treeNodeType, treeNodeId, isAssignSonNode, departIdArray }) => {
    return postAction(`/nc/product/assign/remove/department/${treeNodeType}/${treeNodeId}/${isAssignSonNode}`, departIdArray)
  },
  // åˆ†é…ç”¨æˆ¶æƒé™
  assignPermissionToUser: ({ treeNodeType, treeNodeId, isAssignSonNode, userIdArray }) => {
    return postAction(`/nc/product/assign/add/user/${treeNodeType}/${treeNodeId}/${isAssignSonNode}`, userIdArray)
  },
  // ç§»é™¤éƒ¨é—¨æƒé™
  removePermissionFromUser: ({ treeNodeType, treeNodeId, isAssignSonNode, userIdArray }) => {
    return postAction(`/nc/product/assign/remove/user/${treeNodeType}/${treeNodeId}/${isAssignSonNode}`, userIdArray)
  }
}

 src/views/dnc/base/modules/ProductStructure/Permission/AssignPermissionModal.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,120 @@
<template>
  <a-modal :visible="visible" :title="title" width="50%" :maskClosable="false" @cancel="handleModalClose"
           :footer="null">
    <a-form-model layout="inline">
      <a-form-item label="名称">
        <a-input readOnly :value="currentTreeNodeInfo.label"></a-input>
      </a-form-item>
      <a-form-item label="是否分配子节点">
        <a-switch v-model="isAssignSonNode"></a-switch>
      </a-form-item>
    </a-form-model>

    <a-tabs v-model="activeTabKey">
      <a-tab-pane :key="1" tab="分配部门">
        <DepartPermissionTransfer ref="departPermissionTransferRef" :currentTreeNodeInfo="currentTreeNodeInfo"
                                      :dataSource="allDepartmentsList" :isAssignSonNode="isAssignSonNode"/>
      </a-tab-pane>

      <a-tab-pane :key="2" tab="分配用户">
        <UserPermissionTransfer ref="userPermissionTransferRef" :currentTreeNodeInfo="currentTreeNodeInfo"
                                :dataSource="allUsersList" :isAssignSonNode="isAssignSonNode"/>
      </a-tab-pane>
    </a-tabs>
  </a-modal>
</template>

<script>
  import dncApi from '@/api/dnc'
  import DepartPermissionTransfer from './DepartPermissionTransfer'
  import UserPermissionTransfer from './UserPermissionTransfer'

  export default {
    name: 'AssignPermissionModal',
    components: { UserPermissionTransfer, DepartPermissionTransfer },
    props: {
      currentTreeNodeInfo: {
        type: Object
      }
    },
    data() {
      return {
        visible: false,
        title: '',
        isAssignSonNode: true,
        activeTabKey: 1,
        allDepartmentsList: [],
        allUsersList: [],
        hasLoadedDataTabKeyArray: []
      }
    },
    watch: {
      visible: {
        handler(value) {
          if (value) {
            this.activeTabKey = 1
            this.isAssignSonNode = true
            this.getAllDepartmentsListByApi()
          }
        }
      },
      activeTabKey: {
        handler(value) {
          if (this.hasLoadedDataTabKeyArray.includes(value)) return
          if (value === 2) this.getAllUsersListByApi()
          this.hasLoadedDataTabKeyArray.push(value)
        }
      }
    },
    created() {
      this.$bus.$on('treeMenuItemMethodTrigger', this.triggerCorrespondingMethod)
    },
    methods: {
      // ç‚¹å‡»æ ‘节点右键菜单权限配置按钮后触发
      handleAssignPermission() {
        this.visible = true
      },

      // è°ƒç”¨æŽ¥å£èŽ·å–所有部门列表
      getAllDepartmentsListByApi() {
        dncApi.getAllDepartmentsListApi()
          .then(res => {
            if (res.success) {
              this.allDepartmentsList = res.list
              this.$nextTick(() => this.$refs.departPermissionTransferRef.getHasPermissionDepartByApi())
              // åªæœ‰ä¸Šæ¬¡é€€å‡ºæ—¶åœ¨éƒ¨é—¨åˆ†é…tab界面才会进入此判断
              // è‹¥ä¸Šæ¬¡é€€å‡ºæ—¶åœ¨ç”¨æˆ·åˆ†é…tab界面则再次进入时key由2变为1时会触发watch监测activeTabKey变化则会将key:1加入hasLoadedDataTabKeyArray，因此无需再次加入key:1
              if (!this.hasLoadedDataTabKeyArray.includes(this.activeTabKey)) this.hasLoadedDataTabKeyArray.push(this.activeTabKey)
            }
          })
      },

      // è°ƒç”¨æŽ¥å£èŽ·å–所有用户列表
      getAllUsersListByApi() {
        dncApi.getAllUsersListApi()
          .then(res => {
            if (res.success) {
              this.allUsersList = res.result.records
              this.$nextTick(() => this.$refs.userPermissionTransferRef.getHasPermissionUserByApi())
            }
          })
      },

      handleModalClose() {
        this.visible = false
        this.hasLoadedDataTabKeyArray = []
      },

      triggerCorrespondingMethod({ methodName, modalTitle }) {
        if (this[methodName]) {
          this[methodName]()
          this.title = modalTitle
        }
      }
    }
  }
</script>

<style scoped>

</style>

 src/views/dnc/base/modules/ProductStructure/Permission/DepartPermissionTransfer.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,104 @@
<template>
  <a-spin :spinning="spinning">
    <a-transfer
      class="transfer-container"
      :data-source="dataSource"
      show-search
      :list-style="{flex:1,height: '500px'}"
      :titles="['未分配部门', '已分配部门']"
      :operations="['分配部门', '移除部门']"
      :target-keys="targetKeys"
      :render="item => `${item.departName}`"
      @change="handleChange"
      :rowKey="record => record.departId"
    >

      <span slot="notFoundContent">暂无数据</span>
    </a-transfer>
  </a-spin>
</template>

<script>
  import dncApi from '@/api/dnc'

  export default {
    name: 'DepartPermissionTransfer',
    components: {},
    props: {
      currentTreeNodeInfo: {
        type: Object
      },
      dataSource: {
        type: Array
      },
      isAssignSonNode: {
        type: Boolean
      }
    },
    data() {
      return {
        targetKeys: [],
        spinning: false
      }
    },
    methods: {
      getHasPermissionDepartByApi() {
        dncApi.getHasPermissionDepartApi(this.currentTreeNodeInfo)
          .then(res => {
            if (res.success) this.targetKeys = res.list.map(item => item.departId)
          })
      },

      handleChange(targetKeys, direction, moveKeys) {
        const { currentTreeNodeInfo: { type, id }, isAssignSonNode, $notification } = this
        const that = this
        let method
        const params = {
          treeNodeType: type,
          treeNodeId: id,
          isAssignSonNode: isAssignSonNode ? 1 : 2,
          departIdArray: moveKeys
        }
        console.log('params--------------------------', params)
        console.log(targetKeys, direction, moveKeys)
        if (direction === 'right') {
          method = dncApi.assignPermissionToDepart
        } else {
          method = dncApi.removePermissionFromDepart
        }
        that.spinning = true
        method(params)
          .then(res => {
            if (res.success) {
              $notification.success({
                message: '消息',
                description: res.message
              })
              this.targetKeys = targetKeys
            } else {
              $notification.error({
                message: '消息',
                description: res.message
              })
            }
          })
          .catch(err => {
            $notification.error({
              message: '消息',
              description: err.message
            })
          })
          .finally(() => {
            that.spinning = false
          })
      }
    }
  }
</script>

<style scoped lang="less">
  .transfer-container {
    display: flex;
    align-items: center;
  }
</style>

 src/views/dnc/base/modules/ProductStructure/Permission/UserPermissionTransfer.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,111 @@
<template>
  <a-spin :spinning="spinning">
    <a-transfer
      class="transfer-container"
      :data-source="dataSource"
      show-search
      :list-style="{flex:1,height: '500px'}"
      :titles="['未分配用户', '已分配用户']"
      :operations="['分配用户', '移除用户']"
      :target-keys="targetKeys"
      :render="item => `${item.realname}`"
      @change="handleChange"
      :rowKey="record => record.id"
    >
      <span slot="notFoundContent">暂无数据</span>
    </a-transfer>
  </a-spin>
</template>

<script>
  import dncApi from '@/api/dnc'

  export default {
    name: 'UserPermissionTransfer',
    components: {},
    props: {
      currentTreeNodeInfo: {
        type: Object
      },
      dataSource: {
        type: Array
      },
      isAssignSonNode: {
        type: Boolean
      }
    },
    data() {
      return {
        targetKeys: [],
        spinning: false
      }
    },
    methods: {
      getHasPermissionUserByApi() {
        dncApi.getHasPermissionUserApi(this.currentTreeNodeInfo)
          .then(res => {
            if (res.success) this.targetKeys = res.list.map(item => item.id)
          })
      },

      handleChange(targetKeys, direction, moveKeys) {
        const { currentTreeNodeInfo: { type, id }, isAssignSonNode, $notification, dataSource } = this
        const that = this
        let method
        const params = {
          treeNodeType: type,
          treeNodeId: id,
          isAssignSonNode: isAssignSonNode ? 1 : 2,
          userIdArray: moveKeys
        }
        console.log('params--------------------------', params)
        console.log(targetKeys, direction, moveKeys)
        if (direction === 'right') {
          method = dncApi.assignPermissionToUser
        } else {
          method = dncApi.removePermissionFromUser
          const adminId = dataSource.find(item => item.username === 'admin').id
          if (moveKeys.includes(adminId)) {
            $notification.warning({
              message: '消息',
              description: '不能移除管理员权限'
            })
            return
          }
        }
        that.spinning = true
        method(params)
          .then(res => {
            if (res.success) {
              $notification.success({
                message: '消息',
                description: res.message
              })
              this.targetKeys = targetKeys
            } else {
              $notification.error({
                message: '消息',
                description: res.message
              })
            }
          })
          .catch(err => {
            $notification.error({
              message: '消息',
              description: err.message
            })
          })
          .finally(() => {
            that.spinning = false
          })
      }
    }
  }
</script>

<style scoped lang="less">
  .transfer-container {
    display: flex;
    align-items: center;
  }
</style>

 src/views/dnc/base/modules/ProductStructure/ProductStructureTree.vue

@@ -9,7 +9,7 @@
            <a-menu slot="overlay">
              <a-menu-item key="1" @click="expandedKeys = allTreeKeys">展开所有</a-menu-item>
              <a-menu-item key="2" @click="expandedKeys = ['-1']">合并所有</a-menu-item>
              <a-menu-item key="3" @click="queryTreeData">刷新</a-menu-item>
              <a-menu-item key="3" @click="getTreeDataByApi">刷新</a-menu-item>
            </a-menu>
            <a-button>
              <a-icon type="bars"/>
@@ -45,7 +45,7 @@

    <!--产品弹窗-->
    <ProductModal ref="productModalFormRef" :currentTreeNodeInfo="rightClickSelected"
                  @submitSuccess="queryTreeData"/>
                  @submitSuccess="getTreeDataByApi"/>
    <!--部件弹窗-->
    <ComponentModal :currentTreeNodeInfo="rightClickSelected" @submitSuccess="modalFormSubmitSuccess"/>
    <!--零件弹窗-->
@@ -54,6 +54,8 @@
    <ProcessModal :currentTreeNodeInfo="rightClickSelected" @submitSuccess="modalFormSubmitSuccess"/>
    <!--工步弹窗-->
    <ProcessStepModal :currentTreeNodeInfo="rightClickSelected" @submitSuccess="modalFormSubmitSuccess"/>
    <!--权限配置弹窗-->
    <AssignPermissionModal :currentTreeNodeInfo="rightClickSelected" @submitSuccess="modalFormSubmitSuccess"/>
  </a-card>
</template>

@@ -66,10 +68,12 @@
  import PartModal from './Part/PartModal'
  import ProcessModal from './Process/ProcessModal'
  import ProcessStepModal from './ProcessStep/ProcessStepModal'
  import AssignPermissionModal from './Permission/AssignPermissionModal'

  export default {
    name: 'ProductStructureTree',
    components: {
      AssignPermissionModal,
      ProcessStepModal,
      ProcessModal,
      PartModal,
@@ -98,11 +102,11 @@
      }
    },
    created() {
      this.queryTreeData()
      this.getTreeDataByApi()
      this.$bus.$on('treeMenuItemMethodTrigger', this.triggerCorrespondingMethod)
    },
    methods: {
      queryTreeData() {
      getTreeDataByApi() {
        this.loading = true
        this.cardLoading = true
        dncApi.getProductStructureTreeApi().then(res => {
@@ -145,9 +149,7 @@
        this.rightClickSelected = Object.assign({}, record)
      },

      /**
       * æ ‘节点右键单击菜单中删除按钮时触发
       */
      // æ ‘节点右键单击菜单中删除按钮时触发
      handleDelete() {
        this.$confirm({
          title: '提示',
@@ -165,7 +167,7 @@
            deleteAction(that.url.delete, { id: this.rightClickSelected.id })
              .then((res) => {
                if (res.success) {
                  that.queryTreeData()
                  that.getTreeDataByApi()
                  that.$notification.success({
                    message: '消息',
                    description: res.message
@@ -187,7 +189,7 @@
      modalFormSubmitSuccess(isAddNextLevel) {
        // åˆ¤æ–­æ˜¯å¦ä¸ºæ·»åŠ ä¸‹çº§å¹¶ä¸”判断父节点是否展开
        if (isAddNextLevel && !this.expandedKeys.includes(this.rightClickSelected.id)) this.expandedKeys.push(this.rightClickSelected.id)
        this.queryTreeData()
        this.getTreeDataByApi()
      },

      /**
@@ -257,8 +259,8 @@
        }
      },

      triggerCorrespondingMethod({ methodName, modalTitle }) {
        if (this[methodName]) this[methodName](modalTitle)
      triggerCorrespondingMethod({ methodName }) {
        if (this[methodName]) this[methodName]()
      },

      /**

 src/views/dnc/base/modules/ProductStructure/ProductStructureTreeContextMenu.vue

@@ -65,7 +65,8 @@
            { label: '编辑工序信息', code: 'process_edit', icon: 'edit', isCommonMethod: false },
            { label: '删除', code: 'process_delete', icon: 'delete', isCommonMethod: true },
            // {  label: '导出NC程序', code: 'process_export', icon: 'import', isCommonMethod: true },
            { label: '导入NC程序', code: 'process_import', icon: 'export', isCommonMethod: true }
            { label: '导入NC程序', code: 'process_import', icon: 'export', isCommonMethod: true },
            { label: '权限配置', code: 'public_assign_permission', icon: 'idcard', isCommonMethod: true }
          ],
          //工步
          processStep: [
@@ -73,7 +74,8 @@
            { label: '编辑工步信息', code: 'processStep_edit', icon: 'edit', isCommonMethod: false },
            { label: '删除', code: 'processStep_delete', icon: 'delete', isCommonMethod: true },
            // {  label: '导出NC程序', code: 'processStep_export', icon: 'import', isCommonMethod: true },
            { label: '导入NC程序', code: 'processStep_import', icon: 'export', isCommonMethod: true }
            { label: '导入NC程序', code: 'processStep_import', icon: 'export', isCommonMethod: true },
            { label: '权限配置', code: 'public_assign_permission', icon: 'idcard', isCommonMethod: true }
          ]
        }
      }

 src/views/dnc/common/TableContextMenu.vue

@@ -83,8 +83,8 @@
          ],
          //文件
          file: [
            { label: '指定当前版本', code: 'file_assign', subMenu: [], icon: 'export', isCommonMethod: false },//文件-指定当前版本
            { label: '比对', code: 'file_add_relative', subMenu: [], icon: 'export', isCommonMethod: false }//比对
            { label: '指定当前版本', code: 'file_assign', subMenu: [], icon: 'highlight', isCommonMethod: false },//文件-指定当前版本
            { label: '比对', code: 'file_add_relative', subMenu: [], icon: 'interaction', isCommonMethod: false }//比对
          ]
        }
      }