🐞 fix(【drp-采购员上级采购经理匹配】): 批量上传控制文件上传类型

批量上传组件，上传前判断文件类型是否符合不生效，重新增加校验

20240508446

src/components/BatchImport/index.vue

@@ -1,112 +1,138 @@
-
-
 <script>
 export default {
-  name:'BatchImport',
-  props:{
-    disabled:{
-      type:Boolean,
-      default:false,
+  name: "BatchImport",
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false,
     },
-    limit:{
-      type:Number,
-      default:1,
+    limit: {
+      type: Number,
+      default: 1,
     },
-    fileType:{
-      type:Array,
-      default:()=>['xls', 'xlsx'],
+    fileType: {
+      type: Array,
+      default: () => ["xls", "xlsx"],
     },
-    size:{
-      type:String,
-      default:'mini',
+    size: {
+      type: String,
+      default: "mini",
     },
-    isShowTip:{
-      type:Boolean,
-      default:true,
+    isShowTip: {
+      type: Boolean,
+      default: true,
     },
-    isTemplate:{
-      type:Boolean,
-      default:true,
+    isTemplate: {
+      type: Boolean,
+      default: true,
     },
     fileSize: {
       type: Number,
       default: 100,
     },
   },
-  computed:{
-     // 是否显示提示
-     showTip() {
+  computed: {
+    // 是否显示提示
+    showTip() {
       return this.isShowTip && (this.fileType || this.fileSize);
     },
-    accept(){
-      return this.fileType.map(item =>(`.${item}`)).join(',');
-    }
+    accept() {
+      return this.fileType.map((item) => `.${item}`).join(",");
+    },
   },
-  data(){
+  data() {
     return {
-      title:'批量导入',
-      visible:false,
-      loading:false,
-      fileList:[],
+      title: "批量导入",
+      visible: false,
+      loading: false,
+      fileList: [],
       number: 0,
-
-    }
+    };
   },
-  methods:{
+  methods: {
     // 确认上传
-    async submitUpload(){
-      if(this.fileList.length){
-        this.$emit('import',this.fileList);
-      }else{
-      this.$notify.warning({
-        title:'警告',
-        message: '请上传文件之后在确认！',
-      });
-
+    async submitUpload() {
+      if (this.fileList.length) {
+        this.$emit("import", this.fileList);
+      } else {
+        this.$notify.warning({
+          title: "警告",
+          message: "请上传文件之后在确认！",
+        });
       }
-      
     },
     // 模板下载
-    async templateDownload(){
-      this.$emit('temDownload')
+    async templateDownload() {
+      this.$emit("temDownload");
       // 放父组件
       // this.download('/system/material/download', {}, `物料基本信息模板.xlsx`);
     },
-    // 
-    beforeClose(done){
+    //
+    beforeClose(done) {
       this.fileList = [];
       // 关闭前清空
       done();
     },
     // 预览
-    handlePreview(){},
+    handlePreview() {},
     // 移除
-    handleRemove(file, fileList){
+    handleRemove(file, fileList) {
       this.fileList = fileList;
     },
     // 文件改变
-    onChange(file, fileList){
+    onChange(file, fileList) {
       this.fileList = fileList;
+      // 校检文件类型
+      if (this.fileType) {
+        const fileName = file.name.split(".");
+        const fileExt = fileName[fileName.length - 1];
+        console.log(fileExt, "fileExt");
+        console.log(
+          this.fileType.indexOf(fileExt),
+          "this.fileType.indexOf(fileExt)"
+        );
+        const isTypeOk = this.fileType.indexOf(fileExt) >= 0;
+        if (!isTypeOk) {
+          this.$modal.msgError(
+            `文件格式不正确, 请上传${this.fileType.join("/")}格式文件!`
+          );
+          return this.fileList.pop();
+        }
+      }
+      // 校检文件大小
+      if (this.fileSize) {
+        const isLt = file.size / 1024 / 1024 < this.fileSize;
+        if (!isLt) {
+          this.$modal.msgError(`上传文件大小不能超过 ${this.fileSize} MB!`);
+          return this.fileList.pop();
+        }
+      }
     },
-    setVisible(prop){
+    setVisible(prop) {
       this.visible = prop;
-      if(!prop){
+      if (!prop) {
         this.fileList = [];
       }
     },
-    open(){
+    open() {
       this.setVisible(true);
     },
     // 取消
-    cancal(){
+    cancal() {
       this.setVisible(false);
     },
-     // 上传前校检格式和大小
-     handleBeforeUpload(file) {
+    // 上传前校检格式和大小
+    handleBeforeUpload(file) {
+      console.log(file, "file");
       // 校检文件类型
       if (this.fileType) {
         const fileName = file.name.split(".");
         const fileExt = fileName[fileName.length - 1];
+        console.log(fileExt, "fileExt");
+        console.log(
+          this.fileType.indexOf(fileExt),
+          "this.fileType.indexOf(fileExt)"
+        );
         const isTypeOk = this.fileType.indexOf(fileExt) >= 0;
         if (!isTypeOk) {
           this.$modal.msgError(
@@ -127,14 +153,13 @@ export default {
       this.number++;
       return true;
     },
-    
   },
-  created(){},
-}
+  created() {},
+};
 </script>
 
 <template>
-  <el-button 
+  <el-button
     :disabled="disabled"
     :size="size"
     @click="open"
@@ -143,41 +168,40 @@ export default {
     v-on="$listeners"
   >
     {{ title }}
-    <el-dialog 
-      :title="title" 
+    <el-dialog
+      :title="title"
       :visible.sync="visible"
       v-loading="loading"
-      width="35%" 
+      width="35%"
       center
       :before-close="beforeClose"
       append-to-body
     >
+      <!-- :before-upload="handleBeforeUpload" -->
       <el-upload
         ref="upload"
         action="#"
         :on-preview="handlePreview"
         :accept="accept"
-        :before-upload="handleBeforeUpload"
         :on-remove="handleRemove"
         :file-list="fileList"
         :auto-upload="false"
-        :on-change="onChange" 
+        :on-change="onChange"
         :limit="limit"
         :disabled="disabled"
-        style="text-align: center;"
+        style="text-align: center"
       >
-        <el-button 
-          slot="trigger" 
-          :size="size" 
-          type="primary"
-        >选取文件</el-button>
+        <el-button slot="trigger" :size="size" type="primary"
+          >选取文件</el-button
+        >
         <el-button
           v-if="isTemplate"
-          style="margin-left: 10px;" 
-          :size="size" 
-          type="success" 
+          style="margin-left: 10px"
+          :size="size"
+          type="success"
           @click="templateDownload"
-        >下载模板</el-button>
+          >下载模板</el-button
+        >
         <div slot="tip" class="el-upload__tip" v-if="isShowTip">
           请上传
           <template v-if="fileSize">
@@ -190,9 +214,11 @@ export default {
       </el-upload>
 
       <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitUpload" :size="size">确 定</el-button>
+        <el-button type="primary" @click="submitUpload" :size="size"
+          >确 定</el-button
+        >
         <el-button @click="cancal" :size="size">取 消</el-button>
       </div>
     </el-dialog>
   </el-button>
-</template>
+</template>