lifeline_h5/src/pages/cityDangerReport/add.vue

<template>
  <div>
    <div class="cityDangerReportForm">
      <div class="row">
        <div class="row-label">
          <span class="isrequired">*</span>
          <span>隐患描述</span>
        </div>
        <div class="row-value">
          <van-field
            v-model="form.hiddenTroubleDescription"
            rows="4"
            autosize
            type="textarea"
            maxlength="800"
            placeholder="补充隐患的位置、隐患的大致情况、影响等信息"
            show-word-limit
          />
        </div>
      </div>
      <div class="row pdb0">
        <div class="row-label">
          <span>上传现场图片</span>
          <span class="tips">（最多9张）</span>
        </div>
        <div class="row-value">
          <van-uploader
            :max-count="9"
            v-model="entryForm"
            :after-read="afterRead"
          />
        </div>
      </div>
      <div class="row disflex pdb0 jcsb aligncenter">
        <div class="row-label mb0">
          <span class="isrequired">*</span>
          <span>联系人</span>
        </div>
        <div class="row-value width300px">
          <input type="text" placeholder="请填写" v-model="form.reportPeople" />
        </div>
      </div>
      <div class="row disflex pdb0 jcsb aligncenter">
        <div class="row-label mb0">
          <span class="isrequired">*</span>
          <span>联系电话</span>
        </div>
        <div class="row-value width300px">
          <input
            type="text"
            placeholder="请填写"
            placeholder-class="placestyle"
            v-model="form.reportPeopleTel"
          />
        </div>
      </div>
      <div class="row disflex pdb0 jcsb aligncenter">
        <div class="row-label mb0">
          <span class="isrequired">*</span>
          <span>所在区域</span>
        </div>
        <div class="row-value width300px" @click="show = true">
          <div style="display: flex; justify-content: end">
            <div style="color: rgba(179, 179, 179, 1)">
              {{ form.area ? form.areaName : "请选择区域" }}
            </div>
            <van-icon name="arrow" />
          </div>
        </div>
      </div>
      <div class="row disflex pdb0 jcsb aligncenter">
        <div class="row-label mb0">
          <span class="isrequired">*</span>
          <span>隐患位置</span>
        </div>
        <div class="row-value width300px">
          <input
            type="text"
            v-model="form.hiddenTroubleAddress"
            placeholder="请填写隐患位置"
            placeholder-class="placestyle"
          />
        </div>
      </div>
    </div>
    <van-popup v-model="show" position="bottom">
      <van-picker
        title=""
        show-toolbar
        :columns="columns"
        @confirm="onConfirm"
        @cancel="onCancel"
        @change="onChange"
        value-key="label"
      />
    </van-popup>
    <div class="btn" v-if="!$route.query.id">
      <van-button type="default" class="tj" @click="addForm">提交</van-button>
    </div>
  </div>
</template>

<script>
import { addForApp, getTroubleDetail } from '@/service/api_company.js'
import { upload } from '@/service/api_upload'
import { Toast } from 'vant'
export default {
    data() {
        return {
            show: false,
            columns: [
                { label: '梁溪区', value: 320213, isSelected: false },
                { label: '锡山区', value: 320205, isSelected: false },
                { label: '惠山区', value: 320206, isSelected: false },
                { label: '滨湖区', value: 320211, isSelected: false },
                { label: '新吴区', value: 320214, isSelected: false },
                { label: '经开区', value: 320299, isSelected: false },
                { label: '江阴市', value: 320281, isSelected: false },
                { label: '宜兴市', value: 320282, isSelected: false }
            ],
            form: {
                createdBy: '10008611'
            },
            entryForm: [],
            fileList: [
                // { url: 'https://cloud-image', isImage: true },
            ]
        }
    },
    methods: {

        async addForm() {
            console.log(this.fileList)
            console.log(this.form)
            if (
                !this.form.hiddenTroubleDescription ||
        this.form.hiddenTroubleDescription.length == 0
            ) {
                return Toast('请填写隐患描述')
            }
            if (!this.form.reportPeople || this.form.reportPeople.length == 0) {
                return Toast('请填写联系人')
            }
            if (!this.form.reportPeopleTel || this.form.reportPeopleTel.length == 0) {
                return Toast('请填写联系电话')
            }
            if (!this.form.area || this.form.area.length == 0) {
                return Toast('请选择所在区域')
            }
            if (
                !this.form.hiddenTroubleAddress ||
        this.form.hiddenTroubleAddress.length == 0
            ) {
                return Toast('请填写隐患位置')
            }
            const form = { ...this.form }
            form.scenePhoto = JSON.stringify(this.entryForm)
            const data = await addForApp(form)
            console.log(data)
            if (data.code == 200) {
                Toast('提交成功')
                this.$router.go(-1)
            }
        },
        async getTroubleDetail() {
            const data = await getTroubleDetail({ id: this.$route.query.id })
            this.form = data
            const index = this.columns.findIndex((e) => e.value == data.area)
            console.log(this.columns[index])
            console.log(JSON.parse(data.scenePhoto))
            this.entryForm = JSON.parse(data.scenePhoto)
            this.form.areaName = this.columns[index].label
        },
        uploadImg(file) {
            const formParam = new FormData() // 创建form对象
            formParam.append('file', file.file) // 通过append向form对象添加数据
            const config = {
                headers: {
                    'Content-Type': 'multipart/form-data',
                    'MVVM-Key': String(new Date().getTime()),
                    xx: 'anything'
                } // 这里是重点，需要和后台沟通好请求头，Content-Type不一定是这个值
            } // 添加请求头
            return new Promise((resolve, reject) => {
                upload(formParam, config)
                    .then((response) => {
                        console.log(response)
                        if (response.data) {
                            this.entryForm[this.entryForm.length - 1].url = response.data.msg
                            this.entryForm[this.entryForm.length - 1].content = null
                            this.entryForm[this.entryForm.length - 1].name =
                response.data.name

                            Toast('上传成功')
                            Toast.clear()
                            console.log(this.entryForm)
                        } else {
                            Toast('上传失败')
                            Toast.clear()
                        }
                    })
                    .catch((err, x) => {
                        reject(err, x)
                    })
            })
        },
        afterRead(file) {
            if (file instanceof Array) {
                file.map((v) => {
                    this.uploadImg(v)
                })
            } else {
                this.uploadImg(file)
            }
        },
        onConfirm(e) {
            this.form.area = e.value
            this.form.areaName = e.label
            console.log(e)
            this.show = false
        },
        onCancel() {
            this.show = false
        }
    },
    mounted() {
        console.log('this.$route.params', this.$route.params, this.$route.params.openId)
        // alert('openId'+this.$route.params.openId)
        this.form.createdBy = this.$route.params.openId
        if (this.$route.query.id) {
            this.getTroubleDetail()
        }
    }
}
</script>

<style lang="scss">
.btn {
  display: flex;
  justify-content: space-around;
  margin-top: 5vh;
  button {
    width: 75vw;
    height: 15vw;
  }
  .tj {
    background: rgba(13, 47, 118, 1);
    color: white;
  }
}
.placestyle {
  text-align: right;
}
.disflex {
  display: flex;
}
.aligncenter {
  align-items: center;
}
.mb0 {
  margin-bottom: 0px !important;
}
.jcsb {
  justify-content: space-between;
}
.pdb0 {
  padding-bottom: 0;
}
.width300px {
  width: 300px;
}
.width100px {
  width: 100px;
}
.cityDangerReportForm {
  margin-top: 24px;
  background: #ffffff;
  padding: 24px;
  box-sizing: border-box;
  .isrequired {
    color: red;
  }
  .row {
    margin-bottom: 5.2vw;
    padding-bottom: 5.2vw;
    border-bottom: 1px solid #e6e6e6;
  }
  .row-label {
    font-size: 36px;
    margin-bottom: 16px;
  }
  .tips {
    color: rgba(179, 179, 179, 1);
    font-size: 24px;
  }
  .row-value {
    font-size: 36px;
    .van-cell {
      font-size: 36px;
      background: rgba(245, 247, 250, 1);
    }
    input {
      width: 100%;
      text-align: right;
      font-size: 36px;
    }
    .van-image,
    .van-uploader__upload {
      height: 30vw;
      width: 29vw;
    }
  }
}
</style>