refactor: sql取消执行逻辑调整、前端使用vueuse重构部分代码

mayfly_go_web/src/views/ops/machine/file/MachineFile.vue

@@ -49,7 +49,7 @@
                                                     :before-upload="beforeUpload"
                                                     :on-success="uploadSuccess"
                                                     action=""
-                                                    :http-request="getUploadFile"
+                                                    :http-request="uploadFile"
                                                     :headers="{ token }"
                                                     :show-file-list="false"
                                                     name="file"
@@ -68,7 +68,7 @@
                                                         ref="folderUploadRef"
                                                         webkitdirectory
                                                         directory
-                                                        @change="getFolder"
+                                                        @change="uploadFolder"
                                                         style="display: none"
                                                     />
                                                 </div>
@@ -173,7 +173,7 @@
 
                 <el-table-column prop="size" label="大小" width="100" sortable>
                     <template #default="scope">
-                        <span style="color: #67c23a; font-weight: bold" v-if="scope.row.type == '-'"> {{ formatFileSize(scope.row.size) }} </span>
+                        <span style="color: #67c23a; font-weight: bold" v-if="scope.row.type == '-'"> {{ formatByteSize(scope.row.size) }} </span>
                         <span style="color: #67c23a; font-weight: bold" v-if="scope.row.type == 'd' && scope.row.dirSize"> {{ scope.row.dirSize }} </span>
                         <span style="color: #67c23a; font-weight: bold" v-if="scope.row.type == 'd' && !scope.row.dirSize">
                             <el-button @click="getDirSize(scope.row)" type="primary" link :loading="scope.row.loadingDirSize">计算</el-button>
@@ -280,6 +280,8 @@ import { isTrue } from '@/common/assert';
 import MachineFileContent from './MachineFileContent.vue';
 import { notBlank } from '@/common/assert';
 import { getToken } from '@/common/utils/storage';
+import { formatByteSize, convertToBytes } from '@/common/utils/format';
+import { getMachineConfig } from '@/common/sysconfig';
 
 const props = defineProps({
     machineId: { type: Number },
@@ -326,14 +328,15 @@ const state = reactive({
         type: folderType,
         data: null as any,
     },
-    file: null as any,
+    machineConfig: { uploadMaxFileSize: '1GB' },
 });
 
 const { basePath, nowPath, loading, fileNameFilter, progressNum, uploadProgressShow, fileContent, createFileDialog } = toRefs(state);
 
-onMounted(() => {
+onMounted(async () => {
     state.basePath = props.path;
     setFiles(props.path);
+    state.machineConfig = await getMachineConfig();
 });
 
 const filterFiles = computed(() =>
@@ -616,16 +619,24 @@ function addFinderToList() {
     folderUploadRef.value.click();
 }
 
-function getFolder(e: any) {
+function uploadFolder(e: any) {
     //e.target.files为文件夹里面的文件
     // 把文件夹数据放到formData里面，下面的files和paths字段根据接口来定
     var form = new FormData();
     form.append('basePath', state.nowPath);
+
+    let totalFileSize = 0;
     for (let file of e.target.files) {
+        totalFileSize += file.size;
         form.append('files', file);
         form.append('paths', file.webkitRelativePath);
     }
+
     try {
+        if (!checkUploadFileSize(totalFileSize)) {
+            return;
+        }
+
         // 上传操作
         machineApi.uploadFile
             .request(form, {
@@ -660,7 +671,7 @@ const onUploadProgress = (progressEvent: any) => {
     state.progressNum = complete;
 };
 
-const getUploadFile = (content: any) => {
+const uploadFile = (content: any) => {
     const params = new FormData();
     const path = state.nowPath;
     params.append('file', content.file);
@@ -695,7 +706,16 @@ const uploadSuccess = (res: any) => {
 };
 
 const beforeUpload = (file: File) => {
-    state.file = file;
+    return checkUploadFileSize(file.size);
+};
+
+const checkUploadFileSize = (fileSize: number) => {
+    const bytes = convertToBytes(state.machineConfig.uploadMaxFileSize);
+    if (fileSize > bytes) {
+        ElMessage.error(`上传的文件超过系统配置的[${state.machineConfig.uploadMaxFileSize}]`);
+        return false;
+    }
+    return true;
 };
 
 const dontOperate = (data: any) => {
@@ -704,27 +724,6 @@ const dontOperate = (data: any) => {
     return ls.indexOf(path) != -1;
 };
 
-/**
- * 格式化文件大小
- * @param {*} value
- */
-const formatFileSize = (size: any) => {
-    const value = Number(size);
-    if (size && !isNaN(value)) {
-        const units = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB', 'BB'];
-        let index = 0;
-        let k = value;
-        if (value >= 1024) {
-            while (k > 1024) {
-                k = k / 1024;
-                index++;
-            }
-        }
-        return `${k.toFixed(2)}${units[index]}`;
-    }
-    return '-';
-};
-
 defineExpose({ showFileContent });
 </script>
 <style lang="scss">