上传图片

src/api/zdsz/house.js

@@ -45,7 +45,7 @@ export function delHouse(id) {
 
 export function getHouses(unitId) {
   return request({
-    url: '/zdsz/house/getHouses/',
+    url: '/zdsz/house/getHousesList/',
     method: 'GET',
     params:{
       unitId:unitId

src/api/zdsz/obs.js

@@ -0,0 +1,9 @@
+import request from '@/utils/request'
+
+export function picDel(data) {
+  return request({
+    url: `/zdsz/engiineeringPhoto/url`,
+    method: 'delete',
+    params:data
+  })
+}

src/components/ObsImageUpload/index.vue

@@ -1,21 +1,21 @@
 <template>
   <el-form>
     <el-upload ref="fileList"
-      :disabled="disabled"
-      :action="uploadImgUrl"
-      list-type="picture-card"
-      :on-success="handleUploadSuccess"
-      :before-upload="handleBeforeUpload"
-      :limit="limit"
-      :on-error="handleUploadError"
-      :on-exceed="handleExceed"
-      name="file"
-      :on-remove="handleRemove"
-      :show-file-list="true"
-      :headers="headers"
-      :file-list="fileList"
-      :on-preview="handlePictureCardPreview"
-      :class="{hide: this.fileList.length >= this.limit}"
+               :disabled="disabled"
+               :action="uploadImgUrl"
+               list-type="picture-card"
+               :on-success="handleUploadSuccess"
+               :before-upload="handleBeforeUpload"
+               :limit="limit"
+               :on-error="handleUploadError"
+               :on-exceed="handleExceed"
+               name="file"
+               :on-remove="handleRemove"
+               :show-file-list="true"
+               :headers="headers"
+               :file-list="fileList"
+               :on-preview="handlePictureCardPreview"
+               :class="{hide: this.fileList.length >= this.limit}"
     >
       <i class="el-icon-plus abs"></i>
     </el-upload>
@@ -46,179 +46,185 @@
 </template>
 
 <script>
-  import { getToken } from "@/utils/auth";
+import { getToken } from "@/utils/auth";
+import {picDel} from "@/api/zdsz/obs";
+import request from "@/utils/request";
 
-  export default {
-    props: {
-      value: [String, Object, Array],
-      // 图片数量限制
-      limit: {
-        type: Number,
-        default: 5,
-      },
-      // 大小限制(MB)
-      fileSize: {
-        type: Number,
-        default: 5,
-      },
-      disabled:{
-        type:Boolean,
-        default: false
-      },
-      // 文件类型, 例如['png', 'jpg', 'jpeg']
-      fileType: {
-        type: Array,
-        default: () => ["png", "jpg", "jpeg","mp4"],
-      },
-      // 是否显示提示
-      isShowTip: {
-        type: Boolean,
-        default: true
-      }
+export default {
+  props: {
+    value: [String, Object, Array],
+    // 图片数量限制
+    limit: {
+      type: Number,
+      default: 5,
     },
-    data() {
-      return {
-        dialogImageUrl: "",
-        dialogVisible: false,
-        hideUpload: false,
-        type:"",
-        baseUrl: process.env.VUE_APP_BASE_API,
-        uploadImgUrl: process.env.VUE_APP_BASE_API + "/obs", // 上传的图片服务器地址
-        headers: {
-          Authorization: "Bearer " + getToken(),
-        },
-        fileList: []
-      };
+    // 大小限制(MB)
+    fileSize: {
+      type: Number,
+      default: 5,
     },
-    watch: {
-      value: {
-        handler(val) {
-          if (val) {
-            // 首先将值转为数组
-            const list = Array.isArray(val) ? val : this.value.split(',');
-            // 然后将数组转为对象数组
-            this.fileList = list.map(item => {
-              if (typeof item === "string") {
-                item = { name: item, url: item ,suffix:item.substring(item.lastIndexOf('.')+1)};
-              }
-              return item;
-            });
-          } else {
-            this.fileList = [];
-            return [];
-          }
-        },
-        deep: true,
-        immediate: true
-      }
+    disabled:{
+      type:Boolean,
+      default: false
     },
-    computed: {
-      // 是否显示提示
-      showTip() {
-        return this.isShowTip && (this.fileType || this.fileSize);
-      },
+    // 文件类型, 例如['png', 'jpg', 'jpeg']
+    fileType: {
+      type: Array,
+      default: () => ["png", "jpg", "jpeg","mp4"],
     },
-    methods: {
-      // 删除图片
-      handleRemove(file, fileList) {
-        const findex = this.fileList.map(f => f.name).indexOf(file.name);
-        if(findex > -1) {
-          this.fileList.splice(findex, 1);
-          this.$emit("input", this.listToString(this.fileList));
-        }
-      },
-      // 上传成功回调
-      handleUploadSuccess(res) {
-        if (res.code == 200) {
-          this.fileList.push({ name: res.data.fileName, url: res.data.url });
-          this.$emit("input", this.listToString(this.fileList));
-          this.loading.close();
-        } else {
-          this.$message.error(res.msg);
-          this.loading.close();
-        }
+    // 是否显示提示
+    isShowTip: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      dialogImageUrl: "",
+      dialogVisible: false,
+      hideUpload: false,
+      type:"",
+      baseUrl: process.env.VUE_APP_BASE_API,
+      uploadImgUrl: process.env.VUE_APP_BASE_API + "/obs", // 上传的图片服务器地址
+      headers: {
+        Authorization: "Bearer " + getToken(),
       },
-      // 上传前loading加载
-      handleBeforeUpload(file) {
-        let isImg = false;
-        if (this.fileType.length) {
-          let fileExtension = "";
-          if (file.name.lastIndexOf(".") > -1) {
-            fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
-          }
-          isImg = this.fileType.some((type) => {
-            if (file.type.indexOf(type) > -1) return true;
-            if (fileExtension && fileExtension.indexOf(type) > -1) return true;
-            return false;
+      fileList: []
+    };
+  },
+  watch: {
+    value: {
+      handler(val) {
+        if (val) {
+          // 首先将值转为数组
+          const list = Array.isArray(val) ? val : this.value.split(',');
+          // 然后将数组转为对象数组
+          this.fileList = list.map(item => {
+            if (typeof item === "string") {
+              item = { name: item, url: item ,suffix:item.substring(item.lastIndexOf('.')+1)};
+            }
+            return item;
           });
         } else {
-          isImg = file.type.indexOf("image") > -1;
+          this.fileList = [];
+          return [];
         }
-
-        if (!isImg) {
-          this.$message.error(
-            `文件格式不正确, 请上传${this.fileType.join("/")}图片格式文件!`
-          );
-          return false;
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  computed: {
+    // 是否显示提示
+    showTip() {
+      return this.isShowTip && (this.fileType || this.fileSize);
+    },
+  },
+  methods: {
+    // 删除图片
+    handleRemove(file, fileList) {
+      debugger
+      const findex = this.fileList.map(f => f.url).indexOf(file.url);
+      if(findex > -1) {
+        if (file.url!=null){
+          picDel({picUrl:file.url}).then(res=>{})
+          this.fileList.splice(findex, 1);
         }
-        if (this.fileSize) {
-          const isLt = file.size / 1024 / 1024 < this.fileSize;
-          if (!isLt) {
-            this.$message.error(`上传头像图片大小不能超过 ${this.fileSize} MB!`);
-            return false;
-          }
+        this.$emit("input", this.listToString(this.fileList));
+      }
+    },
+    // 上传成功回调
+    handleUploadSuccess(res) {
+      if (res.code == 200) {
+        this.fileList.push({ name: res.data.fileName, url: res.data.url });
+        this.$emit("input", this.listToString(this.fileList));
+        this.loading.close();
+      } else {
+        this.$message.error(res.msg);
+        this.loading.close();
+      }
+    },
+    // 上传前loading加载
+    handleBeforeUpload(file) {
+      let isImg = false;
+      if (this.fileType.length) {
+        let fileExtension = "";
+        if (file.name.lastIndexOf(".") > -1) {
+          fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
         }
-        this.loading = this.$loading({
-          lock: true,
-          text: "上传中",
-          background: "rgba(0, 0, 0, 0.7)",
-        });
-      },
-      // 文件个数超出
-      handleExceed() {
-        this.$message.error(`上传文件数量不能超过 ${this.limit} 个!`);
-      },
-      // 上传失败
-      handleUploadError(res) {
-        this.$message({
-          type: "error",
-          message: "上传失败",
+        isImg = this.fileType.some((type) => {
+          if (file.type.indexOf(type) > -1) return true;
+          if (fileExtension && fileExtension.indexOf(type) > -1) return true;
+          return false;
         });
-        this.loading.close();
-      },
-      // 预览
-      handlePictureCardPreview(file) {
-        this.dialogImageUrl = file.url;
-        this.dialogVisible = true;
-        this.type=file.name.slice(file.name.lastIndexOf(".")+1);
-        console.log(this.type)
-      },
-      // 对象转成指定字符串分隔
-      listToString(list, separator) {
-        let strs = "";
-        separator = separator || ",";
-        for (let i in list) {
-          strs += list[i].url + separator;
+      } else {
+        isImg = file.type.indexOf("image") > -1;
+      }
+
+      if (!isImg) {
+        this.$message.error(
+          `文件格式不正确, 请上传${this.fileType.join("/")}图片格式文件!`
+        );
+        return false;
+      }
+      if (this.fileSize) {
+        const isLt = file.size / 1024 / 1024 < this.fileSize;
+        if (!isLt) {
+          this.$message.error(`上传头像图片大小不能超过 ${this.fileSize} MB!`);
+          return false;
         }
-        return strs != '' ? strs.substr(0, strs.length - 1) : '';
       }
+      this.loading = this.$loading({
+        lock: true,
+        text: "上传中",
+        background: "rgba(0, 0, 0, 0.7)",
+      });
+    },
+    // 文件个数超出
+    handleExceed() {
+      this.$message.error(`上传文件数量不能超过 ${this.limit} 个!`);
+    },
+    // 上传失败
+    handleUploadError(res) {
+      this.$message({
+        type: "error",
+        message: "上传失败",
+      });
+      this.loading.close();
+    },
+    // 预览
+    handlePictureCardPreview(file) {
+      this.dialogImageUrl = file.url;
+      this.dialogVisible = true;
+      this.type=file.name.slice(file.name.lastIndexOf(".")+1);
+      console.log(this.type)
+    },
+    // 对象转成指定字符串分隔
+    listToString(list, separator) {
+      let strs = "";
+      separator = separator || ",";
+      for (let i in list) {
+        strs += list[i].url + separator;
+      }
+      return strs != '' ? strs.substr(0, strs.length - 1) : '';
     }
-  };
+  }
+};
 </script>
 <style scoped lang="scss">
-  // .el-upload--picture-card 控制加号部分
-  ::v-deep.hide .el-upload--picture-card {
-    display: none;
-  }
-  // 去掉动画效果
-  ::v-deep .el-list-enter-active,
-  ::v-deep .el-list-leave-active {
-    transition: all 0s;
-  }
+// .el-upload--picture-card 控制加号部分
+::v-deep.hide .el-upload--picture-card {
+  display: none;
+}
+// 去掉动画效果
+::v-deep .el-list-enter-active,
+::v-deep .el-list-leave-active {
+  transition: all 0s;
+}
 
-  ::v-deep .el-list-enter, .el-list-leave-active {
-    opacity: 0;
-    transform: translateY(0);
-  }
+::v-deep .el-list-enter, .el-list-leave-active {
+  opacity: 0;
+  transform: translateY(0);
+}
 </style>
 

src/views/zdsz/openbolt/index.vue

@@ -202,8 +202,12 @@
             ></el-option>
           </el-select>
         </el-form-item>
-        <el-form-item label="照片" prop="photo">
-          <obs-image-upload v-model="form.photo"/>
+<!--        <el-form-item label="照片" prop="photo">-->
+<!--          <obs-image-upload v-model="form.photo"/>-->
+<!--        </el-form-item>-->
+        <el-form-item label="照片" prop="picIds">
+          <ObsImageUpload ref="obsImageUpload" :limit="9999" :fileType="['png', 'jpg', 'jpeg']" :value="form.picIds"
+                       @input="getUrl"></ObsImageUpload>
         </el-form-item>
         <el-form-item label="备注" prop="remark">
           <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"/>
@@ -291,9 +295,12 @@ export default {
         isMaintenance: [
           { required: true, message: "是否维修不能为空", trigger: "blur" }
         ],
-        photo: [
-          { required: true, message: "照片不能为空", trigger: "blur" }
-        ],
+        // photo: [
+        //   { required: true, message: "照片不能为空", trigger: "blur" }
+        // ],
+        // picIds: [
+        //   { required: true, message: "照片必须上传", trigger: "change" }
+        // ],
         remark: [
           { required: false, message: "备注不能为空", trigger: "blur" }
         ],
@@ -305,6 +312,9 @@ export default {
     this.getAreas();
   },
   methods: {
+    getUrl(url) {
+      this.form.picIds = this.$refs.obsImageUpload.fileList?this.$refs.obsImageUpload.fileList.map(e=>e.url):[];
+    },
     getBuildings(id) {
       this.units = []
       this.houses = []
@@ -403,6 +413,7 @@ export default {
         createBy: undefined,
         createTime: undefined,
         updateBy: undefined,
+        picIds: [],
         updateTime: undefined
       };
       this.resetForm("form");
@@ -446,6 +457,7 @@ export default {
       getComprehensive(id).then(response => {
         this.loading = false;
         this.form = response.data;
+
         this.open = true;
         this.title = "修改开栓";
       });

src/views/zdsz/opencheck/index.vue

@@ -204,6 +204,10 @@
             ></el-option>
           </el-select>
         </el-form-item>
+        <el-form-item label="照片" prop="picIds">
+          <ObsImageUpload ref="obsImageUpload" :limit="9999" :fileType="['png', 'jpg', 'jpeg']" :value="form.picIds"
+                          @input="getUrl"></ObsImageUpload>
+        </el-form-item>
         <el-form-item label="备注" prop="remark">
           <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"/>
         </el-form-item>
@@ -301,6 +305,9 @@ export default {
     this.getAreas();
   },
   methods: {
+    getUrl(url) {
+      this.form.picIds = this.$refs.obsImageUpload.fileList?this.$refs.obsImageUpload.fileList.map(e=>e.url):[];
+    },
     getBuildings(id) {
       this.units = []
       this.houses = []
@@ -394,6 +401,7 @@ export default {
         isQualified: undefined,
         isMaintenance: undefined,
         remark: undefined,
+        picIds: [],
         delFlag: 0,
         createBy: undefined,
         createTime: undefined,

src/views/zdsz/openrepair/index.vue

@@ -204,6 +204,10 @@
             ></el-option>
           </el-select>
         </el-form-item>
+        <el-form-item label="照片" prop="picIds">
+          <ObsImageUpload ref="obsImageUpload" :limit="9999" :fileType="['png', 'jpg', 'jpeg']" :value="form.picIds"
+                          @input="getUrl"></ObsImageUpload>
+        </el-form-item>
         <el-form-item label="备注" prop="remark">
           <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"/>
         </el-form-item>
@@ -301,6 +305,9 @@ export default {
     this.getAreas();
   },
   methods: {
+    getUrl(url) {
+      this.form.picIds = this.$refs.obsImageUpload.fileList?this.$refs.obsImageUpload.fileList.map(e=>e.url):[];
+    },
     getBuildings(id) {
       this.units = []
       this.houses = []