1、设备类管理页面完成增删改查功能 2、产品结构树工序及工步层级引入设备类概念由系统参数配置决定是否展示，若设备类存在时则NC文档挂载在设备类下不存在...

zhaowei

2025-03-14 9c7505a22f6c249184228de7c6f256a4d880dfed

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

@@ -1,14 +1,20 @@
<template>
  <a-dropdown :trigger="['contextmenu']">
    <span v-if="treeParams.label.indexOf(treeParams.searchValue) > -1">{{ treeParams.label.substr(0, treeParams.label.indexOf(treeParams.searchValue)) }}<span
      class="replaceSearch">{{ treeParams.searchValue }}</span>{{ treeParams.label.substr(treeParams.label.indexOf(treeParams.searchValue) + treeParams.searchValue.length) }}</span>
    <span v-if="treeParams.label.indexOf(treeParams.searchValue) > -1">{{
        treeParams.label.substr(0, treeParams.label.indexOf(treeParams.searchValue))
      }}<span
        class="replaceSearch">{{
          treeParams.searchValue
        }}</span>{{
        treeParams.label.substr(treeParams.label.indexOf(treeParams.searchValue) + treeParams.searchValue.length)
      }}</span>
    <span v-else>{{ treeParams.label }}</span>
    <template #overlay>
      <a-menu @click="({ key: menuKey }) => onContextMenuClick(treeParams.treeKey, menuKey)"
              @contextmenu="event=>event.preventDefault()">
        <a-menu-item v-for="item in defaultContextMenuList[getCurrentMenuLevel]" :key="item.code" v-has="item.code">
          <a-icon :type="item.icon"/>
          {{item.label}}
          {{ item.label }}
        </a-menu-item>
      </a-menu>
    </template>
@@ -16,141 +22,144 @@
</template>

<script>
  export default {
    name: 'ProductStructureTreeContextMenu',
    components: {},
    props: {
      treeParams: {
        type: Object
      }
    },
    data() {
      return {
        defaultContextMenuList: {
          //产品
          product: [
            { label: '添加产品', code: 'product_add', icon: 'plus', isCommonMethod: false },
            { label: '添加部件', code: 'product_add_child', icon: 'plus', isCommonMethod: false },
            { label: '编辑产品信息', code: 'product_edit', icon: 'edit', isCommonMethod: false },
            // {  label: '导出文档', code: 'product_export', icon: 'export', isCommonMethod: true },
            { label: '导入其他文档', code: 'product_import', icon: 'import', isCommonMethod: true },
            { label: '删除', code: 'product_delete', icon: 'delete', isCommonMethod: true },
            { label: '权限配置', code: 'public_assign_permission', icon: 'idcard', isCommonMethod: true }
          ],
          //部件
          component: [
            { label: '添加子部件', code: 'component_add', icon: 'plus', isCommonMethod: false },
            { label: '添加零件', code: 'component_add_child', icon: 'plus', isCommonMethod: false },
            { label: '创建工序', code: 'component_add_relative', icon: 'plus', isCommonMethod: false },
            { label: '编辑部件信息', code: 'component_edit', icon: 'edit', isCommonMethod: false },
            // {  label: '导出文档', code: 'component_export', icon: 'export', isCommonMethod: true },
            { label: '导入其他文档', code: 'component_import', icon: 'import', isCommonMethod: true },
            { label: '删除', code: 'component_delete', icon: 'delete', isCommonMethod: true },
            { label: '权限配置', code: 'public_assign_permission', icon: 'idcard', isCommonMethod: true }
          ],
          //零件
          part: [
            { label: '添加零件', code: 'parts_add', icon: 'plus', isCommonMethod: false },
            { label: '创建工艺规程版本', code: 'parts_add_relative', icon: 'plus', isCommonMethod: false },
            // { label: '创建工序', code: 'parts_add_relative', icon: 'plus', isCommonMethod: false },
            { label: '编辑零件信息', code: 'parts_edit', icon: 'edit', isCommonMethod: false },
            // {  label: '导出文档', code: 'parts_export', icon: 'export', isCommonMethod: true },
            { label: '导入其他文档', code: 'parts_import', icon: 'import', isCommonMethod: true },
            { label: '删除', code: 'parts_delete', icon: 'delete', isCommonMethod: true },
            { label: '权限配置', code: 'public_assign_permission', icon: 'idcard', isCommonMethod: true }
          ],
          //工艺规程版本
          processSpecVersion: [
            { label: '创建工艺规程版本', code: 'version_add', icon: 'plus', isCommonMethod: false },
            { label: '创建工序', code: 'version_add_child', icon: 'plus', isCommonMethod: false },
            { label: '编辑工艺规程版本信息', code: 'version_edit', icon: 'edit', isCommonMethod: false },
            { label: '删除', code: 'version_delete', icon: 'delete', isCommonMethod: true },
            { label: '权限配置', code: 'public_assign_permission', icon: 'idcard', isCommonMethod: true }
          ],
          //工序
          process: [
            { label: '创建工序', code: 'process_add', icon: 'plus', isCommonMethod: false },
            { label: '创建工步', code: 'process_add_child', icon: 'plus', isCommonMethod: false },
            { label: '编辑工序信息', code: 'process_edit', icon: 'edit', isCommonMethod: false },
            { label: '删除', code: 'process_delete', icon: 'delete', isCommonMethod: true },
            // {  label: '导出NC程序', code: 'process_export', icon: 'export', isCommonMethod: true },
            { label: '导入NC程序', code: 'process_import', icon: 'import', isCommonMethod: true },
            { label: '权限配置', code: 'public_assign_permission', icon: 'idcard', isCommonMethod: true }
          ],
          //工步
          processStep: [
            { label: '创建工步', code: 'processStep_add', icon: 'plus', isCommonMethod: false },
            { 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: 'import', isCommonMethod: true },
            { label: '权限配置', code: 'public_assign_permission', icon: 'idcard', isCommonMethod: true }
          ]
        }
      }
    },
    computed: {
      getCurrentMenuLevel() {
        switch (this.treeParams.type) {
          case 1:
            return 'product'
          case 2:
            return 'component'
          case 3:
            return 'part'
          case 4:
            return 'processSpecVersion'
          case 5:
            return 'process'
          case 6:
            return 'processStep'
        }
      },
      getCurrentDocClassCode() {
        switch (this.treeParams.type) {
          case 1:
            return 'OTHER'
          case 2:
            return 'OTHER'
          case 3:
            return 'OTHER'
          case 5:
            return 'NC'
          case 6:
            return 'NC'
        }
      }
    },
    methods: {
      onContextMenuClick(treeKey, menuKey) {
        const level = this.getCurrentMenuLevel
        const param = this.getCurrentDocClassCode
        console.log('level---------------------', level)
        console.log('param---------------------', param)
        const treeNodeInfo = Object.assign({}, this.treeParams, { param })
        console.log('treeNodeInfo******************', treeNodeInfo)
        const menuKeyArray = menuKey.split('_')
        const isCommonMethod = this.defaultContextMenuList[level].find(item => item.code === menuKey).isCommonMethod
        // product_add => handleAdd 触发对应组件事件
        let methodName
        // 判断是否为公共方法，如果为公共方法则截取专有属性product/component/part/process等字段
        if (isCommonMethod) {
          methodName = 'handle' + menuKeyArray.map(item => item[0].toUpperCase() + item.slice(1)).slice(1).join('')
        } else {
          methodName = 'handle' + menuKeyArray.map(item => item[0].toUpperCase() + item.slice(1)).join('')
        }
        const modalTitle = this.defaultContextMenuList[level].find(item => item.code === menuKey).label
        this.$bus.$emit('treeMenuItemMethodTrigger', { methodName, modalTitle, treeNodeInfo })
export default {
  name: 'ProductStructureTreeContextMenu',
  components: {},
  props: {
    treeParams: {
      type: Object
    }
  },
  data() {
    return {
      defaultContextMenuList: {
        //产品
        product: [
          { label: '添加产品', code: 'product_add', icon: 'plus', isCommonMethod: false },
          { label: '添加部件', code: 'product_add_child', icon: 'plus', isCommonMethod: false },
          { label: '编辑产品信息', code: 'product_edit', icon: 'edit', isCommonMethod: false },
          // {  label: '导出文档', code: 'product_export', icon: 'export', isCommonMethod: true },
          { label: '导入其他文档', code: 'product_import', icon: 'import', isCommonMethod: true },
          { label: '删除', code: 'product_delete', icon: 'delete', isCommonMethod: true },
          { label: '权限配置', code: 'public_assign_permission', icon: 'idcard', isCommonMethod: true }
        ],
        //部件
        component: [
          { label: '添加子部件', code: 'component_add', icon: 'plus', isCommonMethod: false },
          { label: '添加零件', code: 'component_add_child', icon: 'plus', isCommonMethod: false },
          { label: '创建工序', code: 'component_add_relative', icon: 'plus', isCommonMethod: false },
          { label: '编辑部件信息', code: 'component_edit', icon: 'edit', isCommonMethod: false },
          // {  label: '导出文档', code: 'component_export', icon: 'export', isCommonMethod: true },
          { label: '导入其他文档', code: 'component_import', icon: 'import', isCommonMethod: true },
          { label: '删除', code: 'component_delete', icon: 'delete', isCommonMethod: true },
          { label: '权限配置', code: 'public_assign_permission', icon: 'idcard', isCommonMethod: true }
        ],
        //零件
        part: [
          { label: '添加零件', code: 'parts_add', icon: 'plus', isCommonMethod: false },
          { label: '创建工艺规程版本', code: 'parts_add_relative', icon: 'plus', isCommonMethod: false },
          // { label: '创建工序', code: 'parts_add_relative', icon: 'plus', isCommonMethod: false },
          { label: '编辑零件信息', code: 'parts_edit', icon: 'edit', isCommonMethod: false },
          // {  label: '导出文档', code: 'parts_export', icon: 'export', isCommonMethod: true },
          { label: '导入其他文档', code: 'parts_import', icon: 'import', isCommonMethod: true },
          { label: '删除', code: 'parts_delete', icon: 'delete', isCommonMethod: true },
          { label: '权限配置', code: 'public_assign_permission', icon: 'idcard', isCommonMethod: true }
        ],
        //工艺规程版本
        processSpecVersion: [
          { label: '创建工艺规程版本', code: 'version_add', icon: 'plus', isCommonMethod: false },
          { label: '创建工序', code: 'version_add_child', icon: 'plus', isCommonMethod: false },
          { label: '编辑工艺规程版本信息', code: 'version_edit', icon: 'edit', isCommonMethod: false },
          { label: '删除', code: 'version_delete', icon: 'delete', isCommonMethod: true },
          { label: '权限配置', code: 'public_assign_permission', icon: 'idcard', isCommonMethod: true }
        ],
        //工序
        process: [
          { label: '创建工序', code: 'process_add', icon: 'plus', isCommonMethod: false },
          { label: '创建工步', code: 'process_add_child', icon: 'plus', isCommonMethod: false },
          { label: '添加设备类', code: 'process_add_type', icon: 'plus', isCommonMethod: true },
          { label: '编辑工序信息', code: 'process_edit', icon: 'edit', isCommonMethod: false },
          { label: '删除', code: 'process_delete', icon: 'delete', isCommonMethod: true },
          // {  label: '导出NC程序', code: 'process_export', icon: 'export', isCommonMethod: true },
          { label: '导入NC程序', code: 'process_import', icon: 'import', isCommonMethod: true },
          { label: '权限配置', code: 'public_assign_permission', icon: 'idcard', isCommonMethod: true }
        ],
        //工步
        processStep: [
          { label: '创建工步', code: 'processStep_add', icon: 'plus', isCommonMethod: false },
          { label: '编辑工步信息', code: 'processStep_edit', icon: 'edit', isCommonMethod: false },
          { label: '添加设备类', code: 'processStep_add_type', icon: 'plus', isCommonMethod: true },
          { label: '删除', code: 'processStep_delete', icon: 'delete', isCommonMethod: true },
          // {  label: '导出NC程序', code: 'processStep_export', icon: 'import', isCommonMethod: true },
          { label: '导入NC程序', code: 'processStep_import', icon: 'import', isCommonMethod: true },
          { label: '权限配置', code: 'public_assign_permission', icon: 'idcard', isCommonMethod: true }
        ]
      }
    }
  },
  computed: {
    getCurrentMenuLevel() {
      switch (+this.treeParams.type) {
        case 1:
          return 'product'
        case 2:
          return 'component'
        case 3:
          return 'part'
        case 4:
          return 'processSpecVersion'
        case 5:
          return 'process'
        case 6:
          return 'processStep'
      }
    },
    getCurrentDocClassCode() {
      switch (+this.treeParams.type) {
        case 1:
          return 'OTHER'
        case 2:
          return 'OTHER'
        case 3:
          return 'OTHER'
        case 5:
          return 'NC'
        case 6:
          return 'NC'
      }
    }
  },
  methods: {
    onContextMenuClick(treeKey, menuKey) {
      const level = this.getCurrentMenuLevel
      const param = this.getCurrentDocClassCode
      console.log('level---------------------', level)
      console.log('param---------------------', param)
      const treeNodeInfo = Object.assign({}, this.treeParams, { param })
      console.log('treeNodeInfo******************', treeNodeInfo)
      const menuKeyArray = menuKey.split('_')
      const isCommonMethod = this.defaultContextMenuList[level].find(item => item.code === menuKey).isCommonMethod
      // product_add => handleAdd 触发对应组件事件
      let methodName
      // 判断是否为公共方法，如果为公共方法则截取专有属性product/component/part/process等字段
      if (isCommonMethod) {
        methodName = 'handle' + menuKeyArray.map(item => item[0].toUpperCase() + item.slice(1)).slice(1).join('')
      } else {
        methodName = 'handle' + menuKeyArray.map(item => item[0].toUpperCase() + item.slice(1)).join('')
      }
      console.log('methodName', methodName)
      const modalTitle = this.defaultContextMenuList[level].find(item => item.code === menuKey).label
      this.$bus.$emit('treeMenuItemMethodTrigger', { methodName, modalTitle, treeNodeInfo })
    }
  }
}
</script>

<style scoped>
  .replaceSearch {
    color: #40a9ff;
    font-weight: bold;
    background-color: rgb(204, 204, 204);
  }
.replaceSearch {
  color: #40a9ff;
  font-weight: bold;
  background-color: rgb(204, 204, 204);
}

</style>