dvcp_v2_wxcp_app/src/apps/AppMonitoringObject/MonitorRemoveView.vue

<template>
  <div class="MonitorRemoveView">
    <div class="user-info" v-if="info">
      <div class="title">审核信息</div>
      <div class="info">
        <div class="item">
          <span>操作类型：</span>
          <span style="color: #2EA222;" v-if="info.operationType == 0">申请纳入监测</span>
          <span style="color: #2EA222;" v-if="info.operationType == 1">申请解除风险</span>
        </div>
        <div class="item">
          <span>监测类型：</span>
          <span v-if="info.operationType == 0">{{ $dict.getLabel('fpRiskType',info.bizDictValue) }}</span>
          <span v-if="info.operationType == 1">{{ $dict.getLabel('fpRiskEliminationMethod',info.bizDictValue) }}</span>
        </div>
        <div class="item">
          <span>申请人：</span>
          <span>{{ info.operationUserName }}</span>
        </div>
        <div class="item">
          <span>申请时间：</span>
          <span>{{ info.createTime }}</span>
        </div>
        <div class="item">
          <span>备注说明：</span>
          <span>{{ info.detail }}</span>
        </div>
        <div class="item">
          <span style="color: #999;">图片：</span>
          <div class="imgs" v-if="info.files && info.files.length">
            <image :src="img.url" @click="prevImg(info.files, img.url)" v-for="(img, index) in info.files"
                      :key="index"/>
          </div>
        </div>
      </div>
    </div>

    <div class="result">
      <div class="title">处理意见</div>
      <div class="check">
        <div class="left">
          <span style="color: #FF4466;">*</span>
          <span>审核结果</span>
        </div>
        <div class="right">
          <div class="check-item" :class="form.pass == '1' ? 'check-active' : '' " @click="form.pass='1'">纳入监测<img src="./components/img/check-icon.png" alt=""></div>
          <div class="check-item" :class="form.pass == '0' ? 'check-active' : '' " @click="form.pass='0'">驳回申请<img src="./components/img/check-icon.png" alt=""></div>
        </div>
      </div>
      <div class="item">
        <div><span style="color: #FF4466;">*</span>备注说明</div>
        <div>
          <u-input v-model="form.opinion" type="textarea" placeholder="请输入备注说明" height="200" :maxlength="500"></u-input>
        </div>
      </div>
      <div class="item">
        <div><span style="width: 8px;"></span>图片<span style="color: #999;">(最多9张)</span></div>
        <div style="margin-top: 20px; box-sizing: border-box;">
          <AiUploader :def.sync="files" multiple placeholder="上传图片" :limit="9" action="/admin/file/add2"></AiUploader>
        </div>
      </div>
    </div>

    <div class="btn" @click="submit">提交</div>

  </div>
</template>

<script>
export default {
  name: "MonitorRemoveView",
  // 网格长审核
  data() {
    return {
      info: {},
      id: '',
      pass: '',
      status: '',
      form: {
        pass: '',
        opinion: '',
        files: [],
      },
      files: [],
    }
  },
  onLoad(o) {
    this.$dict.load('fpRiskType','fpRiskEliminationMethod')
    this.pass = o.pass;
    this.id = o.id;
    this.status = o.status;
    this.form.pass = this.pass;
  },
  created() {
    this.getInfo()
    document.title = '审核'
  },
  methods: {
    getInfo() {
      this.$http.post(`/app/apppreventionreturntopoverty/popup?id=${this.id}`).then(res => {
        if (res.code === 0) {
          this.info = res.data
        }
      })
    },
    prevImg(urls, img) {
      const imgs = urls.map(v => v.url)
      uni.previewImage({
        urls: imgs,
        current: img
      })
    },
    submit() {
      if (!this.form.opinion) {
        return this.$u.toast('请输入备注说明')
      }

      if (this.form.pass == 1) {   // 申请纳入
        this.$http.post(`/app/apppreventionreturntopoverty/examine`,null,{
          params: {
            ...this.form,
            id: this.id,
          }
        }).then(res => {
          if (res.code === 0) {
            this.$u.toast('操作成功')
            uni.$emit('reload')
            setTimeout(() =>{
              uni.navigateBack({
                delta: 2
              })
            })
          }
        })
      } else if (this.form.pass == 0){     // 申请解除
        this.$http.post(`/app/apppreventionreturntopoverty/relieve`,null,{
          params: {
            ...this.form,
            id: this.id,
          }
        }).then(res => {
          if (res.code === 0) {
            this.$u.toast('操作成功')
            uni.$emit('reload')
            setTimeout(() =>{
              uni.navigateBack({
                delta: 2
              })
            })
          }
        })
      }
    }
  },
}
</script>

<style lang="scss" scoped>
.MonitorRemoveView {
  .user-info {
    background: #FFF;
    .title {
      padding: 30px 32px;
      box-sizing: border-box;
      border-bottom: 1px solid #DDDDDD;
      font-weight: 600;
    }
    .info {
      padding: 30px 32px;
      box-sizing: border-box;
      .item {
        display: flex;
        span {
          padding: 12px 0;
        }
        span:first-child {
          width: 140px;
          color: #999999;
          text-align: right;
        }
        span:last-child {
          color: #343D65;
        }
        .imgs {
          image {
            width: 136px;
            height: 136px;
            margin-right: 8px;
            margin-bottom: 8px;
          }
        }
      }
    }
  }
  .result {
    margin-top: 16px;
    padding-bottom: 112px;
    box-sizing: border-box;
    .title {
      height: 112px;
      padding: 30px 32px;
      font-weight: 600;
      box-sizing: border-box;
      border-bottom: 1px solid #DDDDDD;
      background: #FFF;
    }
    .check {
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #DDDDDD;
      padding: 30px 32px;
      box-sizing: border-box;
      background: #FFF;
      align-items: center;
      border-bottom: 1px solid #DDDDDD;
      .check-item{
        display: inline-block;
        width: 140px;
        height: 64px;
        line-height: 64px;
        text-align: center;
        background: #F5F5F5;
        border-radius: 4px;
        font-size: 30px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #333;
        position: relative;
        img{
          display: none;
        }
      }
      .check-item:nth-of-type(1) {
        margin-right: 36px;
      }
      .check-active{
        background: #E7F1FE;
        color: #1174FE;
        img{
          display: block;
          position: absolute;
          bottom: 0;
          right: 0;
          width: 48px;
          height: 48px;
        }
      }
    }
    .item {
      border-bottom: 1px solid #DDDDDD;
      padding: 30px 32px;
      background: #FFF;
    }
    ::v-deep .ai-uploader .fileList .default {
      width: 160px;
      height: 160px;
    }
  }
  .btn {
    width: 100%;
    height: 112px;
    line-height: 112px;
    text-align: center;
    background: #3192F4;
    color: #FFFFFF;
    position: fixed;
    bottom: 0;
    left: 0;
  }
}
</style>