车辆台账---买断

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

@@ -0,0 +1,243 @@
+<template>
+  <div>
+    <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>
+  </div>
+</template>
+
+<script>
+import { uploadFile } from '@/api/portal/Upload.js'
+import { getStorage } from '@/utils/auth.js' //token
+import { mapGetters } from 'vuex'
+
+export default {
+  model: {
+    prop: 'name',
+    event: 'change'
+  },
+  props: {
+    placeholder: {
+      type: String,
+      default: ''
+    },
+    bucket: {
+      type: String,
+      default: 'abc'
+    },
+    // 长度
+    width: {
+      type: String,
+      default: '270px'
+    },
+    limit: {
+      type: Number,
+      default: 1
+    },
+    accept: {
+      type: String,
+      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: '',
+      dialogVisible: false,
+      accessToken: null,
+      uploadFile: uploadFile,
+      fileList_FuJian: [],
+      enclosure: '',
+      file_add: '',
+      file_catch: '',
+      files: [],
+      files_list: [],
+      filedUrl: '',
+      // fileUrl: fileUrl,
+      // showpicture:false,
+      isview: false,
+      nameArr: '',
+      loadding: false,
+      stateName: ''
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'id',
+      'departmentCode',
+      'departmentLevel',
+      'departmentType',
+      'token'
+    ])
+  },
+  watch: {
+    name: {
+      deep: true,
+      immediate: true,
+      handler(newVal, oldVal) {
+        console.log('aaaa1', newVal)
+        this.files = newVal
+        if (this.files.length > 1) {
+          this.files.splice(0, 1)
+        }
+        console.log('aaaa2', this.files)
+      }
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.Init()
+    })
+  },
+  created() {
+    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() {
+      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, fileList) {
+      console.log('您选择的file:', file)
+      if (file.response.code === '200') {
+        this.loadding = false
+        // 返显图片
+        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)
+      }
+    },
+
+    removeImage(file, ImageFileList) {
+      this.files.splice(this.files.indexOf(file), 1)
+      const imgFiles = []
+
+      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 + ','
+        }
+      }
+      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)
+    },
+    // 返回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
+      }
+    },
+    handlePictureCardPreview(file) {
+      this.dialogImageUrl = file.url
+      this.dialogVisible = true
+    },
+    // 上传失败
+    uploadError() {
+      this.loadding = false
+    },
+    uploadProgrees(event, file, fileList) {
+      if (Number(event.percent) > 0) {
+        this.loadding = true
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped></style>

anrui-scm/anrui-scm-ui/src/views/cheliang/cheliangtaizhang/relation/cheliangtaizhangMai.vue

@@ -54,7 +54,7 @@
 
 <script>
 import { vehicleBuyBreak } from '@/api/cheliang/basevehicle'
-import Upload from '@/components/uploadFile/uploadImg.vue'
+import Upload from '@/components/uploadFile/upload_maiduan.vue'
 
 export default {
   name: 'cheliangtaizhangMai',
@@ -64,11 +64,10 @@ export default {
   data() {
     return {
       temp: {
-        vinNo: '',
-        baseVehicleBuyBlank:{
-          commonAppendix:[],
-          updateBySid: window.sessionStorage.getItem('userSid'),
-        },
+        commonAppendix: {},
+        solidDate: '',
+        vehicleSid: [],
+        vinNo: ''
       },
       dialogFormVisible: false,
       imgList: [],
@@ -83,27 +82,35 @@ export default {
     getUrl() {
       if (this.imgList.length > 0) {
         console.log('imgList', this.imgList)
-        const img01_list = []
-        for (var i = 0; i < this.imgList.length; i++) {
-          const type = this.imgList[i].name.split('.')
-          img01_list.push({
+        let img01_list = new Object()
+        // for (var i = 0; i < this.imgList.length; i++) {
+          const type = this.imgList[this.imgList.length - 1].name.split('.')
+          img01_list = {
             attachType: type[type.length - 1],
             createBySid: window.sessionStorage.getItem('userSid'),
-            fileName: this.imgList[i].name,
-            filePath: this.imgList[i].url,
-            fileSize: this.imgList[i].size,
+            fileName: this.imgList[this.imgList.length - 1].name,
+            filePath: this.imgList[this.imgList.length - 1].url,
+            fileSize: this.imgList[this.imgList.length - 1].size,
             fileType: type[type.length - 1]
-          })
-        }
-        this.temp.baseVehicleBuyBlank.commonAppendix = img01_list
+          }
+        // }
+        this.temp.commonAppendix = img01_list
       } else {
-        this.temp.baseVehicleBuyBlank.commonAppendix = []
+        this.temp.commonAppendix = []
       }
     },
     // 保存
     handleCreate() {
-      this.dialogFormVisible = true
       this.getUrl()
+      if (this.temp.commonAppendix.length < 1) {
+        this.$message({
+          showClose: true,
+          message: '请上传买断证明！',
+          type: 'error'
+        })
+        return
+      }
+      this.dialogFormVisible = true
       vehicleBuyBreak(this.temp).then((response) => {
         if (response.code === '200') {
           this.dialogFormVisible = false