上传组件提交

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) => {
@@ -85,7 +96,7 @@
/**
 * 查询维护员告警列表
 */
 export const getTaskListWithFlag = (data) => {
export const getTaskListWithFlag = (data) => {
    return axios({
        method: "post",
        url: `WorkAlarmAction!getTaskListWithFlag`,
@@ -96,7 +107,7 @@
/**
 * 根据站点查询相关人员
 */
 export const getUserInfoByStationId = (data) => {
export const getUserInfoByStationId = (data) => {
    return axios({
        method: "post",
        url: `User_infAction!getUserInfoByStationId`,
@@ -107,7 +118,7 @@
/**
 * 确认指派任务订单
 */
 export const dispatchTask = (data) => {
export const dispatchTask = (data) => {
    return axios({
        method: "post",
        url: `WorkAlarmAction!dispatchTask`,

 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,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>