新建项目

2024-07-02 17:40:15 +08:00
commit e4c2a52560
449 changed files with 38782 additions and 0 deletions
--- a/src/components/uploadFile/FileUpload.vue
+++ b/src/components/uploadFile/FileUpload.vue
@@ -0,0 +1,165 @@
+<template>
+  <div>
+    <el-upload class="upload-demo" :data="datas" :accept="accept" :on-success="uploadImgSuccess"
+      :on-change="handleChange" :on-remove="handleRemove" :file-list="fileList_FuJian"
+      :http-request="uploadSectionFile">
+      <el-button size="small" type="primary">点击上传</el-button>
+      <div slot="tip" class="el-upload__tip">单个文件大小不允许超过100M,支持上传文件类型：{{ accept }}</div>
+    </el-upload>
+  </div>
+</template>
+
+<script>
+  import {
+    uploadFile
+  } from '@/api/business/beiAn'
+  import {
+    mapGetters
+  } from 'vuex'
+  export default {
+    props: {
+      placeholder: {
+        type: String,
+        default: '',
+      },
+      // 长度
+      width: {
+        type: String,
+        default: '270px',
+      },
+      accept: {
+        type: String,
+        default: '.jpg,.jpeg,.png,.bmp,.pdf,.JPG,.JPEG,.BMP,.PDF,.xls,.docx,.xlsx,.ppt,.pptx',
+      },
+      // 文件列表
+      files: {
+        type: String,
+        required: true,
+      },
+      // 文件名称
+      name: {
+        type: String,
+        required: true,
+      },
+    },
+    data() {
+      return {
+        datas: null,
+         name:null,
+        accessToken: {},
+        fileList_FuJian: [],
+        enclosure: '',
+        file_add: '',
+        idsz: '',
+        file_catch: '',
+        files_list: [],
+      }
+    },
+    computed: {
+      ...mapGetters([
+        'id',
+        'departmentCode',
+        'departmentLevel',
+        'departmentType',
+        'token',
+      ]),
+    },
+    watch: {
+      files: {
+        deep: true,
+        handler(val) {
+          this.pageLoad(val, '')
+        },
+      },
+    },
+    creatd() {
+    },
+    mounted() {
+      this.$nextTick(() => {
+        // this.Init()
+      })
+    },
+    methods: {
+      // 页面第一次加载
+      Init() {
+        // 1. 文件上传用token
+        // this.accessToken = {
+        //   token: this.token,
+        // }
+        this.pageLoad(this.files)
+      },
+      handleChange(file, fileList) {},
+      // 传入数据并绑定
+      pageLoad(files) {
+        // console.log('传入：' + files)
+        if (files !== null && files !== '') {
+          this.files_list = JSON.parse(files)
+          var ids = ''
+          this.fileList_FuJian = []
+          // 1. 回显页面
+          for (var i = 0; i < this.files_list.length; i++) {
+            var body = {
+              name: this.files_list[i].name,
+              url: '',
+              status: 'finished',
+            }
+            this.fileList_FuJian.push(body)
+            ids = ids + this.files_list[i].id + ','
+          }
+          // 2. 回存文件id
+          if (ids !== '') {
+            ids = ids.substring(0, ids.length - 1)
+          }
+          this.enclosure = ids
+          this.file_catch = ids
+        } else {
+          this.file_add = ''
+          this.file_catch = ''
+          this.enclosure = ''
+          this.files_list = []
+          this.fileList_FuJian = []
+        }
+      },
+      // 上传方案--成功后执行
+      uploadImgSuccess(response, file, fileList) {
+        this.$emit('change', this.enclosure)
+      },
+      handleRemove(file, fileList) {
+        if (this.idsz != '') {
+          this.$emit('handleRemove', this.idsz)
+        }
+      },
+      // 上传文件 FrontPhoto
+      uploadSectionFile(params) {
+        const file = params.file
+        // 根据后台需求数据格式
+        const form = new FormData()
+        // console.log('77777777777777',form)
+        // 文件对象
+        form.append('file', file)
+        // 项目封装的请求方法，下面做简单介绍
+        uploadFile(form).then((res) => {
+            // 自行处理各种情况
+            if (res.code === '200') {
+              let a = ''
+              a = res.data.filePath
+              this.idsz = a
+              this.$emit('handleSuccess', res)
+            }
+            if (res.msg == '操作成功') {
+              this.$message({
+                message: '上传成功！',
+                type: 'success',
+              })
+            }
+          })
+          .catch((err) => {
+            console.log(err)
+            // 如果等于备案,就调备案图片上传接口
+          })
+      },
+    },
+  }
+</script>
+
+<style lang="scss" scoped></style>