上传组件提交

whyczyk

2021-09-14 391214149f8edfc2ce9ff995cf37f06e962fd946

 src/pages/alarm-handle.vue

@@ -1,184 +1,232 @@
<template>
  <div class="alarm-handle">
    <van-nav-bar title="告警处理" @click-left="$router.back()" left-arrow fixed safe-area-inset-top placeholder>
    </van-nav-bar>
    <div class="handleCon">
      <div class="textareaCon">
        <van-field v-model="alarmInfo.description" rows="2" autosize label="告警描述" type="textarea" placeholder="请输入告警描述…"
          show-word-limit />
        <v-upload :value="alarmInfo.imageBefore" @valChange="beforeUploadChange" afterOrBefore="before" class="upload">
        </v-upload>
      </div>
      <div class="textareaCon">
        <van-field v-model="alarmInfo.workWay" rows="2" autosize label="处理方法" type="textarea" placeholder="请输入处理方法…"
          show-word-limit />
        <v-upload :value="alarmInfo.imageAfter" @valChange="afterUploadChange" afterOrBefore="after" class="upload">
        </v-upload>
      </div>
      <div class="textareaCon">
        <van-field v-model="alarmInfo.workSuggest" rows="2" autosize label="意见建议" type="textarea" placeholder="请输入意见建议…"
          show-word-limit />
      </div>
      <div class="btnCon">
        <div class="subBtn" @click="submit(1)">保存</div>
        <div class="subBtn" @click="submit(2)">提交</div>
      </div>
    </div>
  </div>
   <div class="alarm-handle">
      <van-nav-bar
         title="告警处理"
         @click-left="$router.back()"
         left-arrow
         fixed
         safe-area-inset-top
         placeholder
      >
      </van-nav-bar>
      <div class="handleCon">
         <div class="textareaCon">
            <van-field
               v-model="alarmInfo.description"
               rows="2"
               autosize
               label="告警描述"
               type="textarea"
               placeholder="请输入告警描述…"
               show-word-limit
            />
            <v-upload
               :value="alarmInfo.imageBefore"
               @valChange="beforeUploadChange"
               :stationId="stationId"
               afterOrBefore="before"
               class="upload"
            >
            </v-upload>
         </div>
         <div class="textareaCon">
            <van-field
               v-model="alarmInfo.workWay"
               rows="2"
               autosize
               label="处理方法"
               type="textarea"
               placeholder="请输入处理方法…"
               show-word-limit
            />
            <v-upload
               :value="alarmInfo.imageAfter"
               @valChange="afterUploadChange"
               :stationId="stationId"
               afterOrBefore="after"
               class="upload"
            >
            </v-upload>
         </div>
         <div class="textareaCon">
            <van-field
               v-model="alarmInfo.workSuggest"
               rows="2"
               autosize
               label="意见建议"
               type="textarea"
               placeholder="请输入意见建议…"
               show-word-limit
            />
         </div>
         <div class="btnCon">
            <div class="subBtn" @click="submit(1)">保存</div>
            <div class="subBtn" @click="submit(2)">提交</div>
         </div>
      </div>
   </div>
</template>

<script>
  import vUpload from '@/components/v-upload.vue'
  import {
    updateUserWork,
    serchByCondition
  } from '@/assets/js/api'
  export default {
    components: {
      vUpload
    },
    data() {
      return {
        alarmInfo: {
          description: '',
          checkStatus: 0,
          createTime: null,
          endTime: null,
          imageAfter: "",
          imageBefore: "",
          managerId: 0,
          note: "",
          userId: sessionStorage.getItem('userId'),
          workId: 0,
          workSuggest: "",
          workWay: "",
        }
      }
    },
    mounted() {
      this.alarmInfo.workId = this.$route.query.id;
      this.alarmInfo.managerId = this.$route.query.managerId;
      let type = this.$route.query.type;
      if (type == 'edit') {
        this.loadHandle()
      }
    },
    methods: {
      beforeUploadChange(list) {
        this.alarmInfo.imageBefore = list
      },
      afterUploadChange(list) {
        this.alarmInfo.imageAfter = list
      },
      //查询告警处理详情
      loadHandle() {
        let postData = {
          workId: this.alarmInfo.workId
        }
        serchByCondition(postData).then((res) => {
          let resData = JSON.parse(res.data.result)
          if (resData.code == 1) {
            this.alarmInfo = resData.data[resData.data.length - 1]
          }
        }).catch((err) => {
          console.log(err)
        });
      },
      //保存提交
      submit(checkStatus) {
        this.alarmInfo.checkStatus = checkStatus;
        let endTime = this.$units.timeFormat(new Date().getTime, 'yyyy-mm-dd hh:MM:ss');
        this.alarmInfo.endTime = endTime;
        if (this.alarmInfo.description == '') {
          this.$toast('请输入告警描述…')
          return
        }
        if (this.alarmInfo.imageBefore == '') {
          this.$toast('请上传处理前照片…')
          return
        }
        if (this.alarmInfo.workWay == '') {
          this.$toast('请输入处理方法…')
          return
        }
        if (this.alarmInfo.imageAfter == '') {
          this.$toast('请上传处理后照片…')
          return
        }
        updateUserWork(this.alarmInfo).then((res) => {
          let resData = JSON.parse(res.data.result)
          if (resData.code == 1) {
            this.$toast(resData.msg)
            this.$router.back();
          }
        }).catch((err) => {
          console.log(err)
        });
      }
    }
  }
import vUpload from "@/components/v-upload.vue"
import { updateUserWork, serchByCondition } from "@/assets/js/api"
export default {
   components: {
      vUpload,
   },
   data() {
      return {
         stationId: 0,
         alarmInfo: {
            description: "",
            checkStatus: 0,
            createTime: null,
            endTime: null,
            imageAfter: "",
            imageBefore: "",
            managerId: 0,
            note: "",
            userId: sessionStorage.getItem("userId"),
            workId: 0,
            workSuggest: "",
            workWay: "",
         },
      }
   },
   mounted() {
      this.alarmInfo.workId = this.$route.query.id
      this.alarmInfo.managerId = this.$route.query.managerId
      this.$nextTick(() => {
         this.stationId = Number(this.$route.query.stationId)
      })
      let type = this.$route.query.type
      if (type == "edit") {
         this.loadHandle()
      }
   },
   methods: {
      beforeUploadChange(list) {
         this.alarmInfo.imageBefore = list
      },
      afterUploadChange(list) {
         this.alarmInfo.imageAfter = list
      },
      //查询告警处理详情
      loadHandle() {
         let postData = {
            workId: this.alarmInfo.workId,
         }
         serchByCondition(postData)
            .then((res) => {
               let resData = JSON.parse(res.data.result)
               if (resData.code == 1) {
                  this.alarmInfo = resData.data[resData.data.length - 1]
               }
            })
            .catch((err) => {
               console.log(err)
            })
      },
      //保存提交
      submit(checkStatus) {
         this.alarmInfo.checkStatus = checkStatus
         let endTime = this.$units.timeFormat(
            new Date().getTime,
            "yyyy-mm-dd hh:MM:ss"
         )
         this.alarmInfo.endTime = endTime
         if (this.alarmInfo.description == "") {
            this.$toast("请输入告警描述…")
            return
         }
         if (this.alarmInfo.imageBefore == "") {
            this.$toast("请上传处理前照片…")
            return
         }
         if (this.alarmInfo.workWay == "") {
            this.$toast("请输入处理方法…")
            return
         }
         if (this.alarmInfo.imageAfter == "") {
            this.$toast("请上传处理后照片…")
            return
         }
         updateUserWork(this.alarmInfo)
            .then((res) => {
               let resData = JSON.parse(res.data.result)
               if (resData.code == 1) {
                  this.$toast(resData.msg)
                  this.$router.back()
               }
            })
            .catch((err) => {
               console.log(err)
            })
      },
   },
}
</script>

<style scoped>
  .alarm-handle {
    width: 100%;
    min-height: 100%;
    background: #F5F5F5;
  }
.alarm-handle {
   width: 100%;
   min-height: 100%;
   background: #f5f5f5;
}

  .handleCon {
    padding: 24px;
  }
.handleCon {
   padding: 24px;
}

  .handleTitle {
    font-size: 28px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
  }
.handleTitle {
   font-size: 28px;
   font-family: PingFangSC-Regular, PingFang SC;
   font-weight: 400;
   color: #333333;
}

  .textareaCon {
    background: #FFFFFF;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0px 4px 20px 0px rgba(75, 136, 249, 0.2);
    margin-bottom: 24px;
  }
.textareaCon {
   background: #ffffff;
   border-radius: 16px;
   padding: 24px;
   box-shadow: 0px 4px 20px 0px rgba(75, 136, 249, 0.2);
   margin-bottom: 24px;
}

  .textareaCon /deep/ .van-cell {
    padding: 20px 0;
  }
.textareaCon /deep/ .van-cell {
   padding: 20px 0;
}

  .textareaCon /deep/ .van-cell::after {
    display: none;
  }
.textareaCon /deep/ .van-cell::after {
   display: none;
}

  .upload {
    margin-top: 16px;
  }
.upload {
   margin-top: 16px;
}

  .btnCon {
    width: 100%;
    display: flex;
    align-items: center;
  }
.btnCon {
   width: 100%;
   display: flex;
   align-items: center;
}

  .btnCon .subBtn {
    flex: 1;
    height: 98px;
    background: #07c160;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #FFFFFF;
    font-size: 36px;
    margin-top: 48px;
    margin-right: 24px;
  }
.btnCon .subBtn {
   flex: 1;
   height: 98px;
   background: #07c160;
   border-radius: 8px;
   display: flex;
   justify-content: center;
   align-items: center;
   color: #ffffff;
   font-size: 36px;
   margin-top: 48px;
   margin-right: 24px;
}

  .btnCon .subBtn:last-of-type {
    margin-right: 0;
    background: #4B88F9;
  }
.btnCon .subBtn:last-of-type {
   margin-right: 0;
   background: #4b88f9;
}
</style>