上传组件提交

whyczyk

2021-09-14 391214149f8edfc2ce9ff995cf37f06e962fd946

上传组件提交

 src/assets/js/api.js

@@ -61,6 +61,17 @@
}

/**
 * 删除文件
 */
export const deleteAlarmFile = (data) => {
    return axios({
        method: "post",
        url: `MyFileAction!deleteAlarmFile`,
        data: 'json=' + JSON.stringify(data)
    })
}

/**
 * 更新告警处理
 */
export const updateUserWork = (data) => {

 src/components/v-upload.vue

@@ -1,6 +1,7 @@
<template>
    <van-uploader
        :after-read="afterRead"
        :before-delete="beforeDelete"
        v-model="getFileList"
        accept="image/png, image/jpeg"
        :max-size="10 * 1024 * 1024"
@@ -11,7 +12,7 @@
</template>

<script>
import { uploadAlarmFile } from "@/assets/js/api"
import { uploadAlarmFile, deleteAlarmFile } from "@/assets/js/api"
export default {
    name: "v-upload",
    props: {
@@ -30,6 +31,10 @@
        afterOrBefore: {
            type: String,
            default: "before",
        },
        stationId: {
            type: Number,
            default: 0,
        },
    },
    data() {
@@ -80,6 +85,7 @@
            var formData = new FormData()
            let json = JSON.stringify({
                afterOrBefore: this.afterOrBefore,
                stationId: this.stationId,
            })
            formData.append("file", file.file)
            formData.append("json", json)
@@ -97,6 +103,32 @@
                }
            })
        },
        // 删除图片
        beforeDelete(file, detail) {
            let fileName = file.url1.split("/")[file.url1.split("/").length - 1]
            let postData = {
                filePath: this.stationId,
                fileName: fileName,
                fileType: this.afterOrBefore,
            }
            deleteAlarmFile(postData)
                .then((res) => {
                    let resData = JSON.parse(res.data.result)
                    if (resData.code == 1) {
                        var arr = this.fileList.split(",")
                        arr.splice(detail.index, 1)
                        this.fileList = arr.join(",")
                    } else {
                        this.$toast(resData.msg)
                        return false
                    }
                })
                .catch((err) => {
                    this.$toast("删除文件失败!")
                    console.log(err)
                    return false
                })
        },
        // 文件过大
        oversize(e) {
            this.$toast.fail("图片过大！")

 src/pages/alarm-details.vue

@@ -311,6 +311,7 @@
        if (assignUser) {
            this.assignUser = JSON.parse(assignUser)
        }
        console.log(this.alarmInfo)
        this.loadStatus()
    },
    destroyed() {
@@ -324,6 +325,7 @@
                    id: this.alarmInfo.id,
                    type: type,
                    managerId: this.alarmInfo.managerId,
                    stationId: this.alarmInfo.stationId,
                },
            })
        },

 src/pages/alarm-handle.vue

@@ -1,23 +1,63 @@
<template>
  <div class="alarm-handle">
    <van-nav-bar title="告警处理" @click-left="$router.back()" left-arrow fixed safe-area-inset-top placeholder>
        <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">
                <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" afterOrBefore="after" class="upload">
                <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 />
                <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>
@@ -28,19 +68,17 @@
</template>

<script>
  import vUpload from '@/components/v-upload.vue'
  import {
    updateUserWork,
    serchByCondition
  } from '@/assets/js/api'
import vUpload from "@/components/v-upload.vue"
import { updateUserWork, serchByCondition } from "@/assets/js/api"
  export default {
    components: {
      vUpload
        vUpload,
    },
    data() {
      return {
            stationId: 0,
        alarmInfo: {
          description: '',
                description: "",
          checkStatus: 0,
          createTime: null,
          endTime: null,
@@ -48,18 +86,21 @@
          imageBefore: "",
          managerId: 0,
          note: "",
          userId: sessionStorage.getItem('userId'),
                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.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()
      }
    },
@@ -73,49 +114,56 @@
      //查询告警处理详情
      loadHandle() {
        let postData = {
          workId: this.alarmInfo.workId
                workId: this.alarmInfo.workId,
        }
        serchByCondition(postData).then((res) => {
            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) => {
                })
                .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('请输入告警描述…')
            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('请上传处理前照片…')
            if (this.alarmInfo.imageBefore == "") {
                this.$toast("请上传处理前照片…")
          return
        }
        if (this.alarmInfo.workWay == '') {
          this.$toast('请输入处理方法…')
            if (this.alarmInfo.workWay == "") {
                this.$toast("请输入处理方法…")
          return
        }
        if (this.alarmInfo.imageAfter == '') {
          this.$toast('请上传处理后照片…')
            if (this.alarmInfo.imageAfter == "") {
                this.$toast("请上传处理后照片…")
          return
        }
        updateUserWork(this.alarmInfo).then((res) => {
            updateUserWork(this.alarmInfo)
                .then((res) => {
          let resData = JSON.parse(res.data.result)
          if (resData.code == 1) {
            this.$toast(resData.msg)
            this.$router.back();
                        this.$router.back()
          }
        }).catch((err) => {
                })
                .catch((err) => {
          console.log(err)
        });
      }
    }
                })
        },
    },
  }
</script>

@@ -123,7 +171,7 @@
  .alarm-handle {
    width: 100%;
    min-height: 100%;
    background: #F5F5F5;
    background: #f5f5f5;
  }

  .handleCon {
@@ -138,7 +186,7 @@
  }

  .textareaCon {
    background: #FFFFFF;
    background: #ffffff;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0px 4px 20px 0px rgba(75, 136, 249, 0.2);
@@ -171,7 +219,7 @@
    display: flex;
    justify-content: center;
    align-items: center;
    color: #FFFFFF;
    color: #ffffff;
    font-size: 36px;
    margin-top: 48px;
    margin-right: 24px;
@@ -179,6 +227,6 @@

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