1

src/utils/http/axios/Axios.ts

@@ -10,7 +10,7 @@ import { cloneDeep } from 'lodash-es';
 import { ContentTypeEnum } from '/@/enums/httpEnum';
 import { RequestEnum } from '/@/enums/httpEnum';
 const { createMessage } = useMessage();
-import { downloadByData } from '/@/utils/file/download'
+import { downloadByData } from '/@/utils/file/download';
 
 export * from './axiosTransform';
 
@@ -129,14 +129,15 @@ export class VAxios {
     const customFilename = params.name || 'file';
     if (params.filename) {
       formData.append(customFilename, params.file, params.filename);
-    }else {
-      formData.append(customFilename, params.file || params.data && params.data.file);
+    } else {
+      const file = params.file.originFileObj || params.file;
+      formData.append(customFilename, file || (params.data && params.data.file));
     }
     if (params.data) {
       Object.keys(params.data).forEach((key) => {
         const value = params.data![key];
-        if(key == 'file' && !params.filename){
-          return
+        if (key == 'file' && !params.filename) {
+          return;
         }
         if (Array.isArray(value)) {
           value.forEach((item) => {
@@ -144,7 +145,7 @@ export class VAxios {
           });
           return;
         }
-        if(params.data![key] == undefined){
+        if (params.data![key] == undefined) {
           formData.append(key, '');
           return;
         }
@@ -197,11 +198,10 @@ export class VAxios {
     });
   }
 
-  
   /**
    * @description:  File Upload
    */
-   downloadFile<T = any>(config: AxiosRequestConfig) {
+  downloadFile<T = any>(config: AxiosRequestConfig) {
     let conf: CreateAxiosOptions = cloneDeep(config);
     const { requestOptions } = this.options;
     const transform = this.getTransform();
@@ -214,32 +214,34 @@ export class VAxios {
 
     conf = this.supportFormData(conf);
     // return new Promise((resolve, reject) => {
-      this.axiosInstance
+    this.axiosInstance
       .request<any, AxiosResponse<Result>>(conf)
       .then((res: AxiosResponse<Result>) => {
-        const resData = res.data
-        const fileReader = new FileReader()
+        const resData = res.data;
+        const fileReader = new FileReader();
         fileReader.onloadend = () => {
           // 此处两种判断返回信息的方法可选其一
           // 方法一：
           try {
-            const jsonData = JSON.parse(fileReader.result) // 说明是普通对象数据，后台转换失败
+            const jsonData = JSON.parse(fileReader.result); // 说明是普通对象数据，后台转换失败
             // 后台信息
             createMessage.error(jsonData.message);
-          } catch (err) { // 解析成对象失败，说明是正常的文件流
+          } catch (err) {
+            // 解析成对象失败，说明是正常的文件流
             // 下载文件
-            downloadByData(resData,config.fileName)
+            downloadByData(resData, config.fileName);
           }
-        }
-        fileReader.readAsText(resData)
-      }).catch((e: Error | AxiosError) => {    
+        };
+        fileReader.readAsText(resData);
+      })
+      .catch((e: Error | AxiosError) => {
         if (requestCatchHook && isFunction(requestCatchHook)) {
           requestCatchHook(e, opt);
           return;
-        }    
-        console.log('Error',e)
+        }
+        console.log('Error', e);
         // reject(e);
-      });;
+      });
     // })
   }
   // support form-data
@@ -287,7 +289,7 @@ export class VAxios {
 
     const { beforeRequestHook, requestCatchHook, transformRequestHook } = transform || {};
     if (beforeRequestHook && isFunction(beforeRequestHook)) {
-    conf = beforeRequestHook(conf, opt);
+      conf = beforeRequestHook(conf, opt);
     }
     conf.requestOptions = opt;
     conf = this.supportFormData(conf);

src/views/mediaLibrary/modal/uploadModal.vue

@@ -6,16 +6,27 @@
     @visible-change="handleVisibleChange"
     @cancel="resetFields"
     @ok="handleSubmit"
-    :okText="loading?`上传中 ${fileFlow.complete}%`:'确认'"
+    :okText="loading ? `上传中 ${fileFlow.complete}%` : '确认'"
     :confirmLoading="loading"
     :min-height="250"
     :height="700"
   >
-    <div class="pt-2px pr-3px">
+    <div class="pt-2px pr-3px myzdyfrmo">
       <BasicForm @register="registerForm" :model="model">
         <template #text="{ model, field }">
           {{ model[field] }}
         </template>
+        <template #file="{ model, field }">
+          <Upload
+            style="width: 300px"
+            accept=".jpg, .png, .jpeg, .mp4, .wav, .mp3, .shp, .zip"
+            v-model:file-list="fileList"
+            :beforeUpload="beforeUpload"
+            @remove="handleRemove"
+          >
+            <a-button> 上传 </a-button>
+          </Upload>
+        </template>
       </BasicForm>
       <div style="padding: 0 0 0 82px">
         <div style="margin-bottom: 10px"
@@ -23,11 +34,16 @@
         >
         <!-- <span>注意：模型需使用zip包上传。包含贴图、模型、mtl文件，包内不得包含文件夹。</span> -->
         <div style="margin-bottom: 10px">
-          <div> 上传 obj：需使用zip包上传。包含贴图、模型、mtl文件，包内不得包含文件夹，文件名不得使用中文。如图：</div>
+          <div>
+            上传
+            obj：需使用zip包上传。包含贴图、模型、mtl文件，包内不得包含文件夹，文件名不得使用中文。如图：</div
+          >
           <img style="width: 150px" :src="obj" alt="" />
         </div>
         <div style="margin-bottom: 10px">
-          <div> 上传 osgb：需使用zip包上传。包含 Data 文件夹、mtl文件，文件名不得使用中文。如图：</div>
+          <div>
+            上传 osgb：需使用zip包上传。包含 Data 文件夹、mtl文件，文件名不得使用中文。如图：</div
+          >
           <img style="width: 150px" :src="osgb" alt="" />
         </div>
       </div>
@@ -35,7 +51,8 @@
   </BasicModal>
 </template>
 <script lang="ts">
-  import { defineComponent, ref, nextTick, onMounted, reactive } from 'vue';
+  import { defineComponent, ref, nextTick, onMounted, reactive, unref } from 'vue';
+  import { Upload } from 'ant-design-vue';
   import { BasicModal, useModalInner } from '/@/components/Modal';
   import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
   import { useMessage } from '/@/hooks/web/useMessage';
@@ -43,16 +60,18 @@
   import obj from '/@/assets/images/obj.jpg';
   import osgb from '/@/assets/images/osgb.jpg';
   import { useI18n } from '/@/hooks/web/useI18n';
+  import type { UploadProps } from 'ant-design-vue';
 
   const { t } = useI18n();
   export default defineComponent({
-    components: { BasicModal, BasicForm },
+    components: { BasicModal, BasicForm, Upload },
     props: {
       userData: { type: Object },
     },
     emits: ['update', 'register'],
     setup(props, { emit }) {
       const modelRef = ref({});
+      const fileList = ref<UploadProps['fileList']>([]);
       const loading = ref(false);
       const fileFlow = reactive({
         file: null,
@@ -63,37 +82,38 @@
       const schemas: FormSchema[] = [
         {
           field: 'file',
-          component: 'Upload',
+          component: 'InputTextArea',
+          // component: 'Upload',
           label: t('routes.product.file'),
-          required: true,
-          rules: [{ required: true, message: t('common.uploadMessge') }],
-          // helpMessage: t('routes.corporation.uploadHelp'),
-          itemProps: {
-            validateTrigger: 'onBlur',
-          },
-          componentProps: {
-            api: uploadApi,
-            maxNumber: 1,
-            maxSize: 2000,
-            fileFlow: true,
-            accept: ['jpg', 'jpg', 'png', 'jpeg', 'mp4', 'wav', 'mp3', 'shp', 'zip'],
-            afterFetch: function (data) {
-              console.log('afterFetch', data);
-              // Reflect.set(data, 'url', data.name);
-              fileFlow.file = data.file;
-              return data;
-            },
-          },
+          slot: 'file',
+          // rules: [{ required: true, message: t('common.uploadMessge') }],
+          // // helpMessage: t('routes.corporation.uploadHelp'),
+          // itemProps: {
+          //   validateTrigger: 'onBlur',
+          // },
+          // componentProps: {
+          //   api: uploadApi,
+          //   maxNumber: 1,
+          //   maxSize: 2000,
+          //   fileFlow: true,
+          //   accept: ['jpg', 'jpg', 'png', 'jpeg', 'mp4', 'wav', 'mp3', 'shp', 'zip'],
+          //   afterFetch: function (data) {
+          //     console.log('afterFetch', data);
+          //     // Reflect.set(data, 'url', data.name);
+          //     fileFlow.file = data.file;
+          //     return data;
+          //   },
+          // },
 
           colProps: {
-            span: 22,
+            span: 16,
           },
         },
         {
           field: 'dictId',
           label: '分组',
           component: 'ApiSelect',
-          required: true,
+          // required: true,
           componentProps: {
             api: getByKey,
             style: 'width: 350px',
@@ -131,25 +151,32 @@
       function onDataReceive(data) {
         modelRef.value = data;
         resetFields();
+        fileList.value = []
         setFieldsValue({
           type: data.sceneName,
         });
       }
       const handleSubmit = async () => {
+        let file = fileList.value[0];
+        if(!file){
+          createMessage.warning('请上传文件');
+          return;
+        }
+        console.log('handleSubmit', file, file.value);
         loading.value = true;
         fileFlow.complete = 0;
         try {
           const params = await validate();
           const apiData = {
-            file: fileFlow.file,
-            data:{
+            file: file,
+            data: {
               dictId: params.dictId,
-            }
+            },
           };
           console.log('res', apiData, params);
           function onUploadProgress(progressEvent: ProgressEvent) {
-              const complete = ((progressEvent.loaded / progressEvent.total) * 100) | 0;
-              fileFlow.complete = complete;
+            const complete = ((progressEvent.loaded / progressEvent.total) * 100) | 0;
+            fileFlow.complete = complete;
           }
           await uploadApi(apiData, onUploadProgress);
           closeModal();
@@ -166,6 +193,31 @@
         // console.log(v);
         // v && props.userData && nextTick(() => onDataReceive(props.userData));
       }
+      const handleRemove = (file) => {
+        const index = fileList.value.indexOf(file);
+        const newFileList = fileList.value.slice();
+        newFileList.splice(index, 1);
+        fileList.value = newFileList;
+      };
+
+      const beforeUpload: UploadProps['beforeUpload'] = (file) => {
+        console.log('beforeUpload', file);
+        const filetype = file.name.substring(file.name.lastIndexOf('.') + 1);
+        const isExcel = ['jpg', 'jpg', 'png', 'jpeg', 'mp4', 'wav', 'mp3', 'shp', 'zip'].includes(
+          filetype,
+        ); // 调用上面代码
+        if (!isExcel) {
+          createMessage.error('支持jpg、png、jpeg、mp4、wav、mp3 、shp、zip格式文件上传');
+          return false;
+        }
+        const isLt10M = file.size / 1024 / 1024 < 2000;
+        if (!isLt10M) {
+          createMessage.error('上传文件不能超过 2G!');
+          return false;
+        }
+        fileList.value = [file];
+        return false;
+      };
       return {
         register,
         schemas,
@@ -180,7 +232,18 @@
         obj,
         osgb,
         loading,
+        fileList,
+        handleRemove,
+        beforeUpload,
       };
     },
   });
 </script>
+
+<style lang="less">
+  .myzdyfrmo {
+    .ant-upload-span {
+      max-width: 340px !important;
+    }
+  }
+</style>

src/views/productOperation/modal/caseListModal.vue

@@ -10,7 +10,7 @@
     :min-height="0"
   >
     <div class="pt-2px pr-3px">
-      <div class="pl-4">该场景已被纳入案件，请跳转到案件列表修改权限或将场景移出案件。</div>
+      <div class="pl-4">该场景已被纳入案件，权限跟随案件，不支持单独设置</div>
       <!-- <BasicForm @register="registerForm" :model="model">
         <template #text="{ model, field }">
           {{ model[field] }}