1、MDC零件加工管理和OEE页面开发100% 2、DNC结构树取消搜索框侧边下拉菜单改为树组件空白处右键菜单

zhaowei

2025-03-19 8fbfac872e852a0ad0dbe04f2b7b69e4cff3c85c

 src/views/dnc/common/ImportFileModal.vue

@@ -7,7 +7,7 @@
      </a-button>
    </a-upload>

    <div style="margin-top: 16px">已选择{{fileList.length}}个文件</div>
    <div style="margin-top: 16px">已选择{{ fileList.length }}个文件</div>

    <template slot="footer">
      <a-button @click="handleModalClose">取消</a-button>
@@ -26,197 +26,195 @@
</template>

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

  export default {
    name: 'ImportFileModal',
    components: {},
    data() {
      return {
        visible: false,
        title: '',
        fileList: [],
        uploadParams: {},
        uploading: false,
        isUploadMultiple: true,
        currentDeviceDocClassCode: 'SEND',
        currentTitleAfterClass: ''
export default {
  name: 'ImportFileModal',
  components: {},
  data() {
    return {
      visible: false,
      title: '',
      fileList: [],
      uploadParams: {},
      uploading: false,
      isUploadMultiple: true,
      currentDeviceDocClassCode: 'SEND',
      currentTitleAfterClass: ''
    }
  },
  created() {
    this.$bus.$on('treeMenuItemMethodTrigger', this.triggerCorrespondingMethod)
    this.$bus.$on('tableMenuItemMethodTrigger', this.triggerCorrespondingMethod)
  },
  methods: {
    /**
     * 点击导入文档或NC程序时触发
     * @param treeNodeInfo 点击树节点右键菜单导入程序时传入树节点信息
     * @param tableRowInfo 右键表格行时传入行信息
     * @param modalTitle 弹窗标题
     */
    handleImport(treeNodeInfo, tableRowInfo, modalTitle) {
      this.isUploadMultiple = true
      let attributionId // 文档所属层级Id
      let attributionType  // 文档所属层级类型
      let docClassCode // 文档类型
      if (treeNodeInfo) {
        attributionId = treeNodeInfo.treeKey
        attributionType = treeNodeInfo.type
        docClassCode = treeNodeInfo.param
      } else {
        // 若工序及工步层级下有设备类时则导入NC的参数需要调整
        attributionId = tableRowInfo.param === 'deviceCustomType' ? tableRowInfo.id : tableRowInfo.attributionId
        attributionType = tableRowInfo.attributionType
        docClassCode = tableRowInfo.param === 'deviceCustomType' ? 'NC' : tableRowInfo.param
      }
      this.setModalTitle(modalTitle, docClassCode)
      this.uploadParams = Object.assign({}, { attributionId, attributionType, docClassCode })
      console.log('uploadParams=====================', this.uploadParams)
      this.visible = true
    },

    /**
     * 点击文档生命周期的入库时触发
     * @param _
     * @param tableRowInfo 右键表格行时传入行信息
     */
    handlePush(_, tableRowInfo) {
      this.isUploadMultiple = false
      const { docId, attributionId, attributionType, param } = tableRowInfo
      this.uploadParams = Object.assign({}, {
        docId,
        attributionId,
        attributionType,
        docClassCode: param
      })
      this.visible = true
    },

    /**
     * 选择好文件点击确定后
     * @param file 文件对象
     */
    beforeUpload(file) {
      if (this.isUploadMultiple) {
        if (!this.fileList.find(item => item.name === file.name)) this.fileList = [...this.fileList, file]
      } else this.fileList.splice(0, 1, file)
      return false
    },

    // 点击上传至服务器按钮时触发
    handleUpload() {
      const { fileList, $notification, isUploadMultiple, uploadParams, $bus, handleModalClose } = this
      this.uploading = true
      let uploadedFileCount = 0
      let uploadSuccessFileCount = 0
      let apiMethod,params

      fileList.forEach((file, index) => {
        const formData = new FormData()
        formData.append('file', file)
        file.status = 'uploading'
        // 目前根据是否上传多个文件判断两个功能，若后续增加功能或调整需求则调整判断条件
        if (isUploadMultiple) {
          apiMethod = dncApi.importDocumentFromLocalApi
          params = Object.assign({}, { params: uploadParams, formData })
        } else {
          apiMethod = dncApi.documentVersionUpdateApi
          params = Object.assign({}, { docId: uploadParams.docId, formData })
        }
        apiMethod(params)
          .then(res => {
            if (res.success) {
              file.status = 'done'
              uploadSuccessFileCount++
              $notification.success({
                message: '消息',
                description: res.message
              })
            } else {
              file.status = 'error'
              $notification.error({
                message: '消息',
                description: res.message
              })
            }
          })
          .catch(err => {
            file.status = 'error'
          })
          .finally(() => {
            uploadedFileCount++
            fileList.splice(index, 1, file)
            // 当文件全部上传完成后
            if (uploadedFileCount === fileList.length) {
              // 至少有一个文件上传成功后就需要重新加载文档列表
              if (uploadSuccessFileCount > 0) {
                $bus.$emit('reloadDocumentListData', uploadParams)
                if (!isUploadMultiple) {
                  $bus.$emit('reloadMainBottomTableData', 'documentVersion')
                  handleModalClose() //无法连续入库多个版本因此入库成功后即可退出窗口
                }
              }
              this.uploading = false
            }
          })
      })
    },

    /**
     * 删除文件列表项时触发
     * @param file 文件对象
     */
    handleRemove(file) {
      const index = this.fileList.indexOf(file)
      const newFileList = this.fileList.slice()
      newFileList.splice(index, 1)
      this.fileList = newFileList
    },

    // 控制文件上传窗口关闭并清空文件列表
    handleModalClose() {
      this.visible = false
      this.fileList = []
    },

    /**
     * 设置弹窗标题
     * @param modalTitle 弹窗标题
     * @param docClassCode 文档类型
     */
    setModalTitle(modalTitle, docClassCode) {
      switch (docClassCode) {
        case 'SEND':
          this.title = modalTitle + '（发送）'
          break
        case 'REC':
          this.title = modalTitle + '（接收）'
          break
      }
    },
    created() {
      this.$bus.$on('treeMenuItemMethodTrigger', this.triggerCorrespondingMethod)
      this.$bus.$on('tableMenuItemMethodTrigger', this.triggerCorrespondingMethod)
    },
    methods: {
      /**
       * 点击导入文档或NC程序时触发
       * @param treeNodeInfo 点击树节点右键菜单导入程序时传入树节点信息
       * @param tableRowInfo 右键表格行时传入行信息
       * @param modalTitle 弹窗标题
       */
      handleImport(treeNodeInfo, tableRowInfo, modalTitle) {
        this.isUploadMultiple = true
        let attributionId // 文档所属层级Id
        let attributionType  // 文档所属层级类型
        let docClassCode // 文档类型
        if (treeNodeInfo) {
          attributionId = treeNodeInfo.treeKey
          attributionType = treeNodeInfo.type
          docClassCode = treeNodeInfo.param
        } else {
          // 若工序及工步层级下有设备类时则导入NC的参数需要调整
          attributionId = tableRowInfo.param==='deviceCustomType'?tableRowInfo.id:tableRowInfo.attributionId
          attributionType = tableRowInfo.attributionType
          docClassCode = tableRowInfo.param==='deviceCustomType'?'NC':tableRowInfo.param
        }
        this.setModalTitle(modalTitle, docClassCode)
        this.uploadParams = Object.assign({}, { attributionId, attributionType, docClassCode })
        console.log('uploadParams=====================', this.uploadParams)
        this.visible = true
      },

      /**
       * 点击文档生命周期的入库时触发
       * @param _
       * @param tableRowInfo 右键表格行时传入行信息
       */
      handlePush(_, tableRowInfo) {
        this.isUploadMultiple = false
        console.log('tableRowInfo', tableRowInfo)
        this.uploadParams = Object.assign({}, {
          docId: tableRowInfo.docId,
          attributionId: tableRowInfo.attributionId,
          docClassCode: tableRowInfo.param
        })
        this.visible = true
      },

      /**
       * 选择好文件点击确定后
       * @param file 文件对象
       */
      beforeUpload(file) {
        if (this.isUploadMultiple) {
          if (!this.fileList.find(item => item.name === file.name)) this.fileList = [...this.fileList, file]
        }
        else this.fileList.splice(0, 1, file)
        return false
      },

      // 点击上传至服务器按钮时触发
      handleUpload() {
        const { fileList, $notification, isUploadMultiple, uploadParams, $bus, handleModalClose } = this
        this.uploading = true
        let uploadedFileCount = 0
        let uploadSuccessFileCount = 0
        let apiMethod
        let params

        fileList.forEach((file, index) => {
          const formData = new FormData()
          formData.append('file', file)
          file.status = 'uploading'
          // 目前根据是否上传多个文件判断两个功能，若后续增加功能或调整需求则调整判断条件
          if (isUploadMultiple) {
            apiMethod = dncApi.importDocumentFromLocalApi
            params = Object.assign({}, { params: uploadParams, formData })
          } else {
            apiMethod = dncApi.documentVersionUpdateApi
            params = Object.assign({}, { docId: uploadParams.docId, formData })
          }
          apiMethod(params)
            .then(res => {
              if (res.success) {
                file.status = 'done'
                uploadSuccessFileCount++
                console.log('uploadSuccessFileCount++', uploadSuccessFileCount)
                $notification.success({
                  message: '消息',
                  description: res.message
                })
              } else {
                file.status = 'error'
                $notification.error({
                  message: '消息',
                  description: res.message
                })
              }
            })
            .catch(err => {
              file.status = 'error'
            })
            .finally(() => {
              uploadedFileCount++
              fileList.splice(index, 1, file)
              // 当文件全部上传完成后
              if (uploadedFileCount === fileList.length) {
                // 至少有一个文件上传成功后就需要重新加载文档列表
                if (uploadSuccessFileCount > 0) {
                  $bus.$emit('reloadDocumentListData', uploadParams)
                  if (!isUploadMultiple) {
                    $bus.$emit('reloadMainBottomTableData', 'documentVersion')
                    handleModalClose() //无法连续入库多个版本因此入库成功后即可退出窗口
                  }
                }
                this.uploading = false
              }
            })
        })
      },

      /**
       * 删除文件列表项时触发
       * @param file 文件对象
       */
      handleRemove(file) {
        const index = this.fileList.indexOf(file)
        const newFileList = this.fileList.slice()
        newFileList.splice(index, 1)
        this.fileList = newFileList
      },

      // 控制文件上传窗口关闭并清空文件列表
      handleModalClose() {
        this.visible = false
        this.fileList = []
      },

      /**
       * 设置弹窗标题
       * @param modalTitle 弹窗标题
       * @param docClassCode 文档类型
       */
      setModalTitle(modalTitle, docClassCode) {
        switch (docClassCode) {
          case 'SEND':
            this.title = modalTitle + '（发送）'
            break
          case 'REC':
            this.title = modalTitle + '（接收）'
            break
        }
      },

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

<style scoped lang="less">
  /deep/ .ant-btn-primary#custom-upload-button {
    color: #fff;
    background-color: #67C23A;
    border-color: #67C23A;
/deep/ .ant-btn-primary#custom-upload-button {
  color: #fff;
  background-color: #67C23A;
  border-color: #67C23A;

    &[disabled] {
      color: rgba(0, 0, 0, 0.25);
      background-color: #f5f5f5;
      border-color: #d9d9d9;
    }
  &[disabled] {
    color: rgba(0, 0, 0, 0.25);
    background-color: #f5f5f5;
    border-color: #d9d9d9;
  }
}
</style>