refactor(front): 优化组件功能和消息提示

- 修改部门树组件的值类型
- 优化文件上传组件的大小计算和消息提示
- 统一使用 CsMessage 组件进行消息提示
- 调整控制台日志输出级别

cutejava-front/src/views/components/business/CuteDeptTree.vue

@@ -30,7 +30,7 @@ export default {
   name: 'CuteDeptTree',
   props: {
     value: {
-      type: Object,
+      type: [Number, String],
       required: false,
       default: null
     }
@@ -68,9 +68,11 @@ export default {
         })
       }, 100)
     },
-    handleNodeClick(data) {
-      this.$emit('node-click', data)
-      this.$emit('input', data)
+    handleNodeClick(value) {
+      // 绑定node-click事件
+      this.$emit('node-click', value)
+      // 绑定form value
+      this.$emit('input', value.id)
     }
   }
 }

cutejava-front/src/views/components/business/CuteFileDragUpload.vue

@@ -17,9 +17,9 @@
 </template>
 
 <script>
-import { Message } from 'element-ui'
 import { mapGetters } from 'vuex'
 import { getToken } from '@/utils/auth'
+import CsMessage from '@/utils/elementui/CsMessage'
 
 export default {
   name: 'CuteFileUpload',
@@ -44,7 +44,7 @@ export default {
   methods: {
     beforeUpload(file) {
       let isLt2M = true
-      isLt2M = file.size / 1024 / 1024 < 100
+      isLt2M = file.size / 1024 ** 2 < 100
       if (!isLt2M) {
         this.$message.error('上传文件大小不能超过 100MB')
         return false
@@ -53,17 +53,21 @@ export default {
     },
     // 监听上传失成功
     handleSuccess(response, file, fileList) {
-      // Message.success('上传成功')
+      CsMessage.Success('上传成功')
       // this.$refs.upload.clearFiles()
-      console.error('response', response)
-      console.error('file', file)
-      console.error('fileList', fileList)
+      // console.error('response', response)
+      // console.error('file', file)
+      // console.error('fileList', fileList)
       this.value.fileUrl = response
+      // 绑定on-success事件
+      this.$emit('on-success', response, file, fileList)
     },
     // 监听上传失败
     handleError(e, file, fileList) {
       const msg = JSON.parse(e.message)
-      Message.error(msg.message)
+      CsMessage.Error(msg.message)
+      // 绑定on-error事件
+      this.$emit('on-error', e, file, fileList)
     }
   }
 }

cutejava-front/src/views/components/business/CuteFileUpload.vue

@@ -15,9 +15,9 @@
 </template>
 
 <script>
-import { Message } from 'element-ui'
 import { mapGetters } from 'vuex'
 import { getToken } from '@/utils/auth'
+import CsMessage from '@/utils/elementui/CsMessage'
 
 export default {
   name: 'CuteFileUpload',
@@ -42,7 +42,7 @@ export default {
   methods: {
     beforeUpload(file) {
       let isLt2M = true
-      isLt2M = file.size / 1024 / 1024 < 100
+      isLt2M = file.size / 1024 ** 2 < 100
       if (!isLt2M) {
         this.$message.error('上传文件大小不能超过 100MB')
         return false
@@ -51,17 +51,20 @@ export default {
     },
     // 监听上传失成功
     handleSuccess(response, file, fileList) {
-      // Message.success('上传成功')
       // this.$refs.upload.clearFiles()
-      console.error('response', response)
-      console.error('file', file)
-      console.error('fileList', fileList)
+      // console.error('response', response)
+      // console.error('file', file)
+      // console.error('fileList', fileList)
       this.value.fileUrl = response
+      // 绑定on-success事件
+      this.$emit('on-success', response, file, fileList)
     },
     // 监听上传失败
     handleError(e, file, fileList) {
       const msg = JSON.parse(e.message)
-      Message.error(msg.message)
+      CsMessage.Error(msg.message)
+      // 绑定on-error事件
+      this.$emit('on-error', e, file, fileList)
     }
   }
 }

cutejava-front/src/views/components/business/CuteUserSelect.vue

@@ -59,7 +59,10 @@ export default {
       })
     },
     onChange(value) {
+      // 绑定change事件
       this.$emit('change', value)
+      // 绑定form value
+      this.$emit('input', value)
     }
   }
 }

cutejava-front/src/views/components/dev/CuteCodeEditor.vue

@@ -26,7 +26,7 @@ import 'codemirror/mode/ruby/ruby'
 import 'codemirror/mode/sql/sql'
 import 'codemirror/mode/vue/vue'
 import 'codemirror/mode/xml/xml'
-import { Message } from 'element-ui'
+import CsMessage from '@/utils/elementui/CsMessage'
 
 const SupportModeList = ['yaml', 'java', 'go', 'swift', 'dockerfile', 'groovy', 'lua', 'perl', 'python', 'ruby', 'sql', 'xml', 'vue']
 export default {
@@ -98,7 +98,7 @@ export default {
       })
       return
     }
-    Message.error('不支持的mode')
+    CsMessage.Error('不支持的mode')
   },
   methods: {
     getValue() {

cutejava-front/src/views/components/dev/CutePipelineNode.vue

@@ -309,7 +309,7 @@ export default {
         CsMessage.Warning('当前流水线节点不支持查看明细')
         return
       }
-      console.error('templateData', this.templateData)
+      console.log('templateData', this.templateData)
       this.$refs.detailDrawer.show()
     },
     onNodeRetryClick() {
@@ -327,7 +327,7 @@ export default {
       this.$emit('retry', data)
     },
     onNodeOperationClick(buttonInfo) {
-      console.error('buttonInfo', buttonInfo)
+      console.log('buttonInfo', buttonInfo)
     }
   }
 }

cutejava-front/src/views/components/dev/CuteRichTextEditor.vue

@@ -27,9 +27,9 @@
 <script>
 import { mapGetters } from 'vuex'
 import '@wangeditor/editor/dist/css/style.css'
-import { Message } from 'element-ui'
 import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
 import { UploadFile } from '@/utils/CsDomUtil'
+import CsMessage from '@/utils/elementui/CsMessage'
 
 export default {
   name: 'CuteRichTextEditor',
@@ -155,19 +155,19 @@ export default {
     customAlert(info, type) {
       switch (type) {
         case 'success':
-          Message.success(info)
+          CsMessage.Error(info)
           break
         case 'info':
-          Message.info(info)
+          CsMessage.Info(info)
           break
         case 'warning':
-          Message.warning(info)
+          CsMessage.Warning(info)
           break
         case 'error':
-          Message.error(info)
+          CsMessage.Error(info)
           break
         default:
-          Message.info(info)
+          CsMessage.Info(info)
           break
       }
     },