车辆巡检单中上传相关照片的功能

anrui-scm/anrui-scm-ui/src/api/portal/Upload.js

@@ -1,10 +1,8 @@
 import request from '@/utils/request'
 import qs from 'qs'
-// 统一请求路径前缀
-const base = process.env.VUE_APP_URL
 
-// 文件上传接口
-export const uploadFile = '/api/portal/file/upload'
+// 文件上传接口
+export const uploadFile = '/api/base/file/upload'
 
 // 上传图片
 // export function imageUpload(data) {

anrui-scm/anrui-scm-ui/src/components/uploadFile/FaImages.vue

@@ -1,53 +1,92 @@
 <template>
   <div>
-    <div>
-      <el-upload v-loading="loadding" ref="imgUpload" class="avatar-uploader" :headers="accessToken" :action="uploadFile" accept=".jpg,.jpeg,.png,.bmp,.pdf,.JPG,.JPEG,.BMP" list-type="picture-card" :file-list="files" :on-remove="removeImage" :on-preview="handlePictureCardPreview" :on-progress="uploadProgrees" :on-error="uploadError" :on-success="uploadImgSuccess_FuJian">
-        <i class="el-icon-plus avatar-uploader-icon"></i>
-      </el-upload>
-    </div>
-    <el-dialog :visible.sync="showpicture" :append-to-body="true" title="查看图片">
+    <el-upload ref="imgUpload" v-loading="loadding" class="avatar-uploader" :headers="accessToken"
+               :action="uploadFile" accept=".jpg,.jpeg,.png,.bmp,.pdf,.JPG,.JPEG,.BMP" list-type="picture-card"
+               :file-list="files" :on-remove="removeImage" :on-preview="handlePictureCardPreview"
+               :on-progress="uploadProgrees"
+               :on-error="uploadError" :on-success="uploadImgSuccess_FuJian">
+      <i class="el-icon-plus avatar-uploader-icon"/>
+    </el-upload>
+    <el-dialog :visible.sync="dialogVisible" :append-to-body="true" title="查看图片">
       <img width="100%" :src="dialogImageUrl" alt="">
     </el-dialog>
+
+    <!--    <el-upload list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove">-->
+    <!--      <i class="el-icon-plus"></i>-->
+    <!--    </el-upload>-->
+    <!--    <el-dialog :visible.sync="dialogVisible">-->
+    <!--      <img width="100%" :src="dialogImageUrl" alt="">-->
+    <!--    </el-dialog>-->
+    <!--    <el-upload class="upload-demo" :headers="accessToken" :action="uploadFile" :accept="accept" :data="uploadData" :on-success="uploadImgSuccess_FuJian" :on-remove="handleRemove" :file-list="fileList_FuJian">-->
+    <!--      <el-button size="small" type="primary">点击上传</el-button>-->
+    <!--      &lt;!&ndash; <el-button v-show="isview" size="small" type="primary" @click="view()">查看</el-button> &ndash;&gt;-->
+    <!--      &lt;!&ndash; <div slot="tip" class="el-upload__tip">单个文件大小不允许超过100M,支持上传文件类型：{{ accept }}</div> &ndash;&gt;-->
+    <!--    </el-upload>-->
   </div>
 </template>
 
 <script>
-import { imageUpload } from '@/api/portal/Upload.js'
-import { mapGetters } from 'vuex'
+import {uploadFile} from '@/api/portal/Upload'
+import {getStorage} from '@/utils/auth.js' //token
+import {mapGetters} from 'vuex'
+
 export default {
   model: {
-    prop: 'imageFileList',
-    event: 'fileListChange',
+    prop: 'name',
+    event: 'change',
   },
   props: {
     placeholder: {
       type: String,
       default: '',
     },
+    bucket: {
+      type: String,
+      default: 'abc',
+    },
     // 长度
     width: {
       type: String,
       default: '270px',
     },
-    // 图片路径
-    imageFileList: {
-      type: Array,
-      required: [],
+    limit: {
+      type: Number,
+      default: 1,
     },
-    num: {
+    accept: {
       type: String,
-      default: '',
+      default:
+        '.jpg,.jpeg,.png,.bmp,.pdf,.JPG,.JPEG,.BMP,.PDF,.xls,.docx,.xlsx,.ppt,.pptx',
+    },
+    // 文件名称
+    name: {
+      type: Array,
+      required: true,
+    },
+    uploadData: {
+      type: Object,
+      default: {},
     },
   },
   data() {
     return {
       dialogImageUrl: '',
-      accessToken: {},
-      fileUrl: fileUrl,
-      uploadFile: imageUpload,
+      dialogVisible: false,
+      accessToken: null,
+      uploadFile: uploadFile,
+      fileList_FuJian: [],
+      enclosure: '',
+      file_add: '',
+      file_catch: '',
       files: [],
-      showpicture: false,
+      files_list: [],
+      filedUrl: '',
+      // fileUrl: fileUrl,
+      // showpicture:false,
+      isview: false,
+      nameArr: '',
       loadding: false,
+      stateName: '',
     }
   },
   computed: {
@@ -60,16 +99,19 @@ export default {
     ]),
   },
   watch: {
-    imageFileList: {
+    name: {
       deep: true,
+      immediate: true,
       handler(newVal, oldVal) {
-        this.files = []
-        for (var i = 0; i < newVal.length; i++) {
-          this.files.push({
-            name: newVal[i].name,
-            url: fileUrl + newVal[i].url,
-          })
+        console.log('aaaa1', newVal)
+        console.log('aaaa2', oldVal)
+        this.files = newVal
+        if (this.stateName = 'xunidingjinAdd') {
+          if (this.files.length > 1) {
+            this.files.splice(0, 1);
+          }
         }
+        console.log('aaaa2', this.files)
       },
     },
   },
@@ -79,62 +121,124 @@ export default {
     })
   },
   created() {
-    if (this.imageFileList !== undefined) {
-      this.files = []
-      for (var i = 0; i < this.imageFileList.length; i++) {
-        this.files.push({
-          name: this.imageFileList[i].name,
-          url: fileUrl + this.imageFileList[i].url,
-        })
-      }
+    this.uploadFile = uploadFile // 接口
+    this.accessToken = {
+      token: getStorage(),
     }
   },
   methods: {
+    showImg(imgList) {
+      this.stateName = 'xunidingjinAdd'
+      this.files = imgList
+      console.log('回显图片', this.files)
+    },
+    view() {
+      // window.open(this.filedUrl)
+    },
     // 页面第一次加载
     Init() {
-      //
-      // 1. 文件上传用token
-      this.accessToken = {
-        accessToken: this.token,
+      if (this.name !== undefined) {
+        this.files = []
+        for (var i = 0; i < this.name.length; i++) {
+          this.files.push({
+            name: this.name[i],
+            url: this.name[i],
+          })
+        }
       }
-    }, // 上传方案--成功后执行
-    uploadImgSuccess_FuJian(response, file, ImageFileList) {
-      this.loadding = false
-      if (file.response.code === 20000) {
+    },
+    // 上传方案--成功后执行
+    uploadImgSuccess_FuJian(response, file, fileList) {
+      console.log('您选择的file:', file)
+      if (file.response.code === '200') {
+        this.loadding = false
         // 返显图片
-        var imageUrl = this.fileUrl + file.response.data
-        var uid = file.response.data
-        this.files.push({ name: file.name, url: imageUrl })
+        this.filedUrl = this.fileUrl + file.response.data
+        // var uid = file.response.data
+        this.files.push({
+          name: file.response.data.sourceFileName,
+          url: file.response.data.fullUrl,
+          size: file.response.data.size,
+        })
+        this.$emit('change', this.files)
+        this.$emit('eett', this.files)
+      }
+    },
 
-        var fileList = []
-        for (var i = 0; i < this.files.length; i++) {
-          console.log(this.files[i].url, 'this.files[i].url')
+    removeImage(file, ImageFileList) {
+      this.files.splice(this.files.indexOf(file), 1)
+      const imgFiles = []
 
-          fileList.push({
-            name: this.files[i].name,
-            url: this.files[i].url.substr(this.fileUrl.length),
-            num: this.num,
-          })
+      this.files.forEach((o) => {
+        imgFiles.push(o.url)
+      })
+      this.$emit('fileChange', this.files)
+    },
+    handleRemove(file, fileList) {
+      console.log('file:' + JSON.stringify(file))
+      console.log('fileList:' + JSON.stringify(fileList))
+      this.enclosure = ''
+      // 1. 保存新增文件id(this.file_add)
+      this.getNewFileId(fileList)
+      // 2. 保存数据库读取的已有文件id(this.file_catch)
+      this.getCatchFileId(file)
+      // 3. 保存并拼接id
+      this.getFileId()
+      // 4. 返回拼接id
+      this.$emit('change', this.enclosure)
+    },
+    // 返回this.file_add(新上传文件的id拼接集合)
+    getNewFileId(fileList) {
+      // debugger
+      this.file_add = ''
+      for (var i = 0; i < fileList.length; i++) {
+        if (fileList[i].response && fileList[i].response.code === '200') {
+          this.file_add = this.file_add + fileList[i].response.data + ','
         }
-
-        this.$emit('fileListChange', fileList)
       }
+      if (this.file_add !== '') {
+        this.file_add = this.file_add.substring(0, this.file_add.length - 1)
+      }
+      // console.log('1. this.file_add: ' + this.file_add)
     },
-    removeImage(file, ImageFileList) {
-      this.files.splice(this.files.indexOf(file), 1)
-      var fileList = []
-      for (var i = 0; i < this.files.length; i++) {
-        fileList.push({
-          name: this.files[i].name,
-          url: this.files[i].url.substr(this.fileUrl.length),
-        })
+    // 返回this.file_catch（数库一寸照的文件的id的拼接集合）
+    getCatchFileId(file) {
+      for (var i = 0; i < this.files_list.length; i++) {
+        if (this.file_catch !== '') {
+          // 1. 检查当前删除的文件是否是修改文件列表里面的，如果是，将修改列表里去除此id
+          if (this.files_list[i].name === file.name) {
+            // 2. 拆开file_catch到fils_arry
+            var fils_arry = this.file_catch.split(',')
+            // 3. 从fils_arry去除 this.files_list[i].id
+            var arry = []
+            fils_arry.forEach((element) => {
+              // 不加载文件里面的
+              if (element !== this.files_list[i].id) {
+                arry.push(element)
+              }
+            })
+            // 4. 重新拼接成file_catch
+            this.file_catch = arry.join(',')
+          }
+        }
+      }
+      // console.log('2. this.file_catch:' + this.file_catch)
+    },
+    // 保存并拼接id
+    getFileId() {
+      // console.log('3. this.file_catch:' + this.file_catch + ',this.file_add:' + this.file_add)
+      if (this.file_catch !== '') {
+        if (this.file_add !== '') {
+          this.enclosure = this.file_catch + ',' + this.file_add
+        } else {
+          this.enclosure = this.file_catch
+        }
+      } else {
+        this.enclosure = this.file_add
       }
-
-      this.$emit('fileListChange', fileList)
     },
     handlePictureCardPreview(file) {
       this.dialogImageUrl = file.url
-      this.showpicture = true
     },
     // 上传失败
     uploadError() {
@@ -144,35 +248,9 @@ export default {
       if (Number(event.percent) > 0) {
         this.loadding = true
       }
-      //   console.log('event:', event)
     },
   },
 }
 </script>
 
-<style lang="scss" scoped>
-.avatar-uploader .el-upload {
-  border: 1px dashed #d9d9d9;
-  border-radius: 6px;
-  cursor: pointer;
-  position: relative;
-  overflow: hidden;
-}
-.avatar-uploader .el-upload:hover {
-  border-color: #409eff;
-}
-.avatar-uploader-icon {
-  font-size: 28px;
-  color: #8c939d;
-  width: 100px;
-  height: 250px;
-  line-height: 100px;
-  text-align: center;
-}
-.avatar {
-  width: 200px;
-  height: 200px;
-  display: block;
-  //   float: left;
-}
-</style>
+<style lang="scss" scoped></style>

anrui-scm/anrui-scm-ui/src/views/kucunguanli/cheliangweihu/richangxunjian/xunjiandan.vue

@@ -55,7 +55,9 @@
           <el-row>
             <el-col :span="24">
               <div class="span-sty spanOneWidth"><span>相关照片</span></div>
-              <el-form-item><span>{{ formobj.vinNo }}</span></el-form-item>
+              <el-form-item>
+                <upload ref="uploadImg" class="addinputw addinputwOne" v-model="list1" :limit="1" bucket="map" :upload-data="{type:'0001'}"/>
+              </el-form-item>
             </el-col>
           </el-row>
         </el-form>
@@ -67,9 +69,13 @@
 <script>
 import req from '@/api/weishoumaiduan/unsold'
 import { typeValues } from '@/api/cheliang/dictcommons'
+import upload from '@/components/uploadFile/FaImages'
 
 export default {
   name: 'cheliangxunjiancaozuo',
+  components: {
+    upload
+  },
   data() {
     return {
       viewTitle: '车辆巡检操作',
@@ -80,6 +86,7 @@ export default {
       list: [],
       warehouse_list: [],
       staff_list: [],
+      list1: [],
       // 表单数据
       formobj: {
         sid: '', // 一条数据的sid