巡检增加图片

src/views/InspectionDetail.vue

@@ -50,6 +50,20 @@
         <cube-switch v-if="index%2==1" v-model="param[item.key]" :class="{'abnormal':param[item.key]}" :data-label="forms[index-1].templateOptions.placeholder" ></cube-switch>
       </p>
     </div>
+    <div class="label formLabel">
+      图片上传
+      <span>(最多可上传3张JPG或PNG,每张不能超过10M)</span>
+    </div>
+    <div class="uplod">
+      <cube-upload
+        ref="upload"
+        :max="3"
+        :action="action"
+        :simultaneous-uploads="3"
+        @files-added="filesAdded"
+        @file-submitted="fileSubmitted"
+      />
+    </div>
     <div class="btns">
       <div class="btn" @click="createIncident()">生成事件</div>
       <div class="btn submit" @click="submit()">提交</div>
@@ -61,6 +75,11 @@
 export default {
   data() {
     return {
+      action: {
+        target:
+          this.$host + "/service/common/common/uploadAttachment/inspection/",
+        data: {}
+      },
       loginUser: JSON.parse(localStorage.getItem("loginUser")),
       valConfig: JSON.parse(localStorage.getItem("valConfig")) - 0, //报修主体
       baseInfo: {}, //巡检基础信息
@@ -76,6 +95,26 @@ export default {
     };
   },
   methods: {
+    fileSubmitted(files) {
+      this.action.data = { fileName: files.name };
+    },
+    filesAdded(files) {
+      let hasIgnore = false;
+      const maxSize = 10 * 1024 * 1024; // 10M
+      for (let k in files) {
+        const file = files[k];
+        if (file.size > maxSize) {
+          file.ignore = true;
+          hasIgnore = true;
+        }
+      }
+      hasIgnore &&
+        this.$createToast({
+          type: "warn",
+          time: 1000,
+          txt: "不能上传超过10M的文件"
+        }).show();
+    },
     // 获取项目异常状态
     getItems() {
       var that = this;
@@ -138,6 +177,10 @@ export default {
         .then(function(res) {
           console.log(res.data);
           if (res.data.status == 200) {
+            that.action.target = that.action.target + that.param.inspectionProcessActual.processInstanceId;
+            setTimeout(function() {
+              that.$refs.upload.start();
+            }, 100);
             $("#fade").fadeIn();
             that.promptingConent = "恭喜您,提交成功!";
             that.promptingStatus = true;
@@ -176,11 +219,18 @@ export default {
     this.forms=JSON.parse( window.localStorage.getItem('forms'))||[];
     this.title = this.baseInfo.inspectionType.type;
     this.getItems();
+  },
+  mounted(){
+    this.$refs.upload.pause();
   }
 };
 </script>
 <style lang="less" scoped>
 .inspedtionDetail {
+  .uplod {
+    padding: 0.24rem;
+    border-bottom: 0.02rem solid rgb(245, 245, 245);
+  }
   .label {
     background-color: #eee;
     height: 0.6rem;
@@ -245,17 +295,18 @@ export default {
     justify-content: space-between;
     align-items: center;
     padding: 0.24rem;
+    display: flex;
     .btn {
       border: 0.01rem solid #005395;
       color: #005395;
       background-color: #fff;
-      width: 1.8rem;
+      flex: 1;
+      margin: 0 0.1rem;
       height: 0.88rem;
       line-height: 0.88rem;
       text-align: center;
       border-radius: 0.1rem;
       &.submit {
-        width: 3.06rem;
         background-color: #005395;
         color: #fff;
       }

src/views/inspectionDoneDetail.vue

@@ -52,12 +52,36 @@
         <span v-if="index%2==1" class="colorGray">{{param[item.key]?'不正常':'正常'}}</span>
       </p>
     </div>
+    <div class="label">图片列表</div>
+    <div class="imgs-c">
+      <div class="imgs-container" v-if="imgs.length">
+        <div class="imgs-cont">
+          <img
+            v-if="
+              img.suffix == 'jpeg' ||
+              img.suffix == 'jpg' ||
+              img.suffix == 'gif' ||
+              img.suffix == 'png' ||
+              img.suffix == 'svg' ||
+              img.suffix == 'pdf'
+            "
+            :src="img.previewUrl"
+            v-for="(img, index) in imgs"
+            class="imgs"
+          />
+          <p v-else>
+            <a :href="[img.previewUrl]">{{ img.name }}</a>
+          </p>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 <script>
 export default {
   data() {
     return {
+      imgs:[],//图片
       loginUser: JSON.parse(localStorage.getItem("loginUser")),
       valConfig: JSON.parse(localStorage.getItem("valConfig")) - 0, //报修主体
       baseInfo: {}, //巡检基础信息
@@ -169,7 +193,20 @@ export default {
         name: "NewIncident",
         params: { data: this.baseInfo, abnormal: this.abnormal }
       });
-    }
+    },
+    // 获取图片
+    getImgs() {
+      var that = this;
+      that.$http
+        .get(
+          "service/common/common/listAttachment/inspection/" +
+            that.baseInfo.processInstanceId,
+          {}
+        )
+        .then(function (res) {
+          that.imgs = res.data.data.splice(0, 3);
+        });
+    },
   },
   created() {
     this.baseInfo =
@@ -178,14 +215,34 @@ export default {
     this.forms = JSON.parse(window.localStorage.getItem("forms")) || [];
     this.title = this.baseInfo.inspectionType.type;
     this.getItems();
+    this.getImgs();//获取图片
   }
 };
 </script>
 <style lang="less" scoped>
 .inspedtionDetail {
-    .colorGray{
-        color: #999;
+  .imgs-c{
+    padding: 0.28rem;
+  }
+  .imgs-container {
+    a {
+      color: #03c !important;
+      &:visited {
+        color: #551a8b !important;
+      }
     }
+    .imgs-cont{
+      display: flex;
+    }
+    img {
+      width: 1.5rem;
+      height: 1.5rem;
+      margin-right: 0.5rem;
+    }
+  }
+  .colorGray{
+      color: #999;
+  }
   .label {
     background-color: #eee;
     height: 0.6rem;