From 5037b609c8f35bb25d5e3f48bee38ea43c88a40f Mon Sep 17 00:00:00 2001
From: yunuo970428 <405378304@qq.com>
Date: Fri, 29 Jul 2022 16:06:13 +0800
Subject: [PATCH] =?UTF-8?q?=E9=AA=8C=E8=BD=A6=E9=A1=B9=E7=9B=AE=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=E5=A2=9E=E5=8A=A0=E4=B8=8A=E4=BC=A0=E5=9B=BE=E6=A0=87?=
 =?UTF-8?q?=E7=9A=84=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../uploadFile/upload_yanchejianchaTuBiao.vue | 222 ++++++++++++++++++
 .../yanchejianchaxiangmu/yanchejianchaAdd.vue |  34 ++-
 2 files changed, 250 insertions(+), 6 deletions(-)
 create mode 100644 anrui-scm/anrui-scm-ui/src/components/uploadFile/upload_yanchejianchaTuBiao.vue

diff --git a/anrui-scm/anrui-scm-ui/src/components/uploadFile/upload_yanchejianchaTuBiao.vue b/anrui-scm/anrui-scm-ui/src/components/uploadFile/upload_yanchejianchaTuBiao.vue
new file mode 100644
index 0000000000..b7c1089aa9
--- /dev/null
+++ b/anrui-scm/anrui-scm-ui/src/components/uploadFile/upload_yanchejianchaTuBiao.vue
@@ -0,0 +1,222 @@
+<template>
+  <div>
+    <el-upload ref="imgUpload" v-loading="loadding" class="avatar-uploader" :headers="accessToken" :action="uploadFile" :accept="accept" list-type="picture-card" :limit="limit" :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"  title="查看图片">
+      <img width="100%" :src="dialogImageUrl" alt="">
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { uploadFile_yanchejiancha } from '@/api/portal/Upload'
+import { getStorage } from '@/utils/auth.js'
+
+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: ''
+    },
+    accept: {
+      type: String,
+      default: '.jpg,.jpeg,.png,.JPG,.JPEG,'
+    },
+    // 文件名称
+    name: {
+      type: Array,
+      required: true
+    },
+    uploadData: {
+      type: Object,
+      default: {}
+    }
+  },
+  data() {
+    return {
+      dialogImageUrl: '',
+      dialogVisible: false,
+      accessToken: null,
+      uploadFile: uploadFile_yanchejiancha,
+      fileList_FuJian: [],
+      enclosure: '',
+      file_add: '',
+      file_catch: '',
+      files: [],
+      files_list: [],
+      filedUrl: '',
+      // fileUrl: fileUrl,
+      // showpicture:false,
+      isview: false,
+      nameArr: '',
+      loadding: false
+    }
+  },
+  watch: {
+    name: {
+      deep: true,
+      immediate: true,
+      handler(newVal, oldVal) {
+        console.log('aaaa1', newVal)
+        this.files = newVal
+        console.log('aaaa2', this.files)
+      }
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.Init()
+    })
+  },
+  created() {
+    this.uploadFile = uploadFile_yanchejiancha // 接口
+    this.accessToken = {
+      token: getStorage()
+    }
+  },
+  methods: {
+    showImg(imgList) {
+      this.files = imgList
+      console.log('123123123', 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]
+          })
+        }
+      }
+    },
+    handlePictureCardPreview(file) {
+      this.dialogVisible = true
+      this.dialogImageUrl = file.url
+    },
+    // 上传方案--成功后执行
+    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
+      }
+    },
+    // 上传失败
+    uploadError() {
+      this.loadding = false
+    },
+    uploadProgrees(event, file, fileList) {
+      if (Number(event.percent) > 0) {
+        this.loadding = true
+      }
+      //   console.log('event:', event)
+    }
+  }
+}
+</script>
+
+<style scoped></style>
diff --git a/anrui-scm/anrui-scm-ui/src/views/supplychain/yanchejianchaxiangmu/yanchejianchaAdd.vue b/anrui-scm/anrui-scm-ui/src/views/supplychain/yanchejianchaxiangmu/yanchejianchaAdd.vue
index fc8218e15c..a01cdc34cd 100644
--- a/anrui-scm/anrui-scm-ui/src/views/supplychain/yanchejianchaxiangmu/yanchejianchaAdd.vue
+++ b/anrui-scm/anrui-scm-ui/src/views/supplychain/yanchejianchaxiangmu/yanchejianchaAdd.vue
@@ -49,10 +49,16 @@
             </el-col>
           </el-row>
           <el-row>
-            <el-col :span="24">
+            <el-col :span="12">
+              <div class="span-sty spanOneWidth"><span>图标</span></div>
+              <el-form-item>
+                <upload_yanchejianchaTuBiao ref="uploadImg" class="addinputwOne addinputw" v-model="imagelist" :limit="1" @change="backTuBiaoData" @fileChange="deleteData" bucket="map" :upload-data="{ type: '0001' }"/>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
               <div class="span-sty spanOneWidth"><span>照片说明</span></div>
               <el-form-item>
-                <el-input v-model="formobj.remarks" clearable class="addinputw addinputwOne" placeholder=""></el-input>
+                <el-input v-model="formobj.remarks" clearable class="addinputw addinputwOne" type="textarea" resize="none" :autosize="{ minRows: 6, maxRows: 8 }" placeholder=""></el-input>
               </el-form-item>
             </el-col>
           </el-row>
@@ -138,11 +144,13 @@
 <script>
 import { save, fetchDetailsBySid, deleteFilesOss } from '@/api/supplychain/yanchejiancha'
 import upload_yanchejiancha from '@/components/uploadFile/upload_yanchejiancha'
+import upload_yanchejianchaTuBiao from '@/components/uploadFile/upload_yanchejianchaTuBiao'
 
 export default {
   name: 'yanchejianchaAdd',
    components: {
-     upload_yanchejiancha
+     upload_yanchejiancha,
+     upload_yanchejianchaTuBiao
    },
   data() {
     return {
@@ -156,6 +164,7 @@ export default {
       imglist: [],
       dialogVisible: false,
       dialogUrl: '',
+      imagelist: [],
       // 表单数据
       formobj: {
         iconUrl: '',
@@ -189,6 +198,10 @@ export default {
       fetchDetailsBySid(row.sid).then((resp) => {
         if (resp.success) {
           this.formobj = resp.data
+          this.imagelist.push({
+            name: '',
+            url: this.formobj.iconUrl
+          })
         }
       }).catch((e) => {
         this.formobj = row
@@ -213,16 +226,13 @@ export default {
       this.formobj.inspectimgtemp.splice(index, 1)
     },
     backData(val, index) {
-      console.log(val, 9999999)
       if (val.length > 0) {
         val.forEach((e) => {
           this.formobj.inspectimgtemp[index].imgTempUrl.push(e.url)
         })
       }
-      console.log(this.formobj, 777777)
     },
     handleLook(row) {
-      console.log(row, 9999999)
       this.srcList = []
       this.dialogImgVisible = true
       this.srcList = row.imgTempUrl
@@ -243,6 +253,16 @@ export default {
       this.dialogVisible = true
       this.dialogUrl = row
     },
+    backTuBiaoData(val) {
+      if (val.length > 0) {
+        val.forEach((e) => {
+          this.formobj.iconUrl = e.url
+        })
+      }
+    },
+    deleteData() {
+      this.formobj.iconUrl = ''
+    },
     saveOrUpdate() {
       if (this.formobj.isImg === '') {
         this.$message({ showClose: true, type: 'error', message: '请勾选是否上传图片' })
@@ -283,6 +303,8 @@ export default {
         inspectdetail: [],
         inspectimgtemp: []
       }
+      this.imagelist = []
+      this.imglist = []
       this.$refs['form_obj'].resetFields()
       this.$emit('doback')
     }